/* Colorrow palette detail/share route — Phase 5B+/6 */

#paletteDetail {
  max-width: var(--cr-shell-width);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 5.25rem) clamp(1rem, 3vw, 2rem) var(--cr-space-12);
  font-family: var(--cr-font-sans);
  color: var(--cr-ink);
}

#paletteDetail .section-head { margin: 0 0 var(--cr-space-7); }
#paletteDetail .cr-palette-detail-eyebrow {
  margin: 0 0 var(--cr-space-3);
  color: var(--cr-muted);
  font-size: var(--cr-font-sm);
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#paletteDetail .section-head > div { max-width: 850px; }
#paletteDetail .section-title {
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.055em;
}
#paletteDetail .subtext {
  max-width: 68ch;
  margin-top: var(--cr-space-4);
  color: var(--cr-muted);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.7;
}

.cr-palette-detail-shell { display: grid; gap: var(--cr-space-6); }
.cr-palette-detail-surface {
  overflow: hidden;
  border: 1px solid var(--cr-border);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--cr-surface);
  box-shadow: var(--cr-shadow-sm);
}
.cr-palette-detail-preview {
  display: flex;
  min-height: clamp(360px, 54vh, 660px);
}
.cr-palette-detail-color {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.18);
  cursor: copy;
}
.cr-palette-detail-color:last-child { border-right: 0; }
.cr-palette-detail-color-label {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(var(--detail-label-x, -50%), .4rem);
  opacity: 0;
  padding: .42rem .58rem;
  border-radius: var(--cr-radius-sm);
  background: rgba(17,17,17,.78);
  color: #fff;
  font: 720 .76rem/1 var(--cr-font-mono);
  transition: opacity var(--cr-motion-fast) var(--cr-ease-standard), transform var(--cr-motion-fast) var(--cr-ease-standard);
  pointer-events: none;
}
.cr-palette-detail-color:hover .cr-palette-detail-color-label,
.cr-palette-detail-color:focus-visible .cr-palette-detail-color-label { opacity: 1; transform: translate(var(--detail-label-x, -50%), 0); }
.cr-palette-detail-color:is(:hover, :focus-visible) { z-index: 1; }
/* Edge labels stay inside the clipped preview, including ten-color shares. */
@media (min-width: 641px) {
  .cr-palette-detail-color:first-child .cr-palette-detail-color-label { left: .4rem; --detail-label-x: 0; }
  .cr-palette-detail-color:last-child .cr-palette-detail-color-label { left: auto; right: .4rem; --detail-label-x: 0; }
}

.cr-palette-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  padding: var(--cr-space-4);
  border-top: 1px solid var(--cr-border);
}
.cr-palette-detail-toolbar .cr-btn { min-height: 2.9rem; }
.cr-palette-detail-toolbar .cr-btn--primary { margin-right: auto; }

.cr-palette-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: var(--cr-space-5);
}
.cr-palette-detail-panel {
  padding: clamp(1.2rem, 2vw, 1.65rem);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-xl);
  background: var(--cr-surface);
}
.cr-palette-detail-panel h2,
.cr-palette-detail-panel h3 { margin-top: 0; letter-spacing: -.025em; }
.cr-palette-detail-panel p { color: var(--cr-muted); line-height: 1.65; }

.cr-palette-detail-values { display: grid; gap: .65rem; margin-top: var(--cr-space-4); }
.cr-palette-value-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-height: 3.25rem;
  padding: .55rem .65rem;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  background: var(--cr-surface-soft);
}
.cr-palette-value-dot { width: 2.2rem; height: 2.2rem; border-radius: var(--cr-radius-sm); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cr-palette-value-code { min-width: 0; font: 730 .9rem/1.2 var(--cr-font-mono); color: var(--cr-ink); }
.cr-palette-value-copy {
  min-height: 2.35rem;
  padding: .5rem .7rem;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-surface);
  color: var(--cr-ink);
  font: 700 .78rem/1 var(--cr-font-sans);
  cursor: pointer;
}
.cr-palette-value-copy:hover { background: var(--cr-surface-tint); }

.cr-palette-detail-summary {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin: var(--cr-space-4) 0 0;
}
.cr-palette-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: .35rem .55rem;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-pill);
  background: var(--cr-surface-soft);
  color: var(--cr-muted);
  font-size: .74rem;
  font-weight: 720;
}

.cr-palette-detail-related { display: grid; gap: .7rem; margin-top: var(--cr-space-4); }
.cr-palette-detail-related a {
  display: block;
  padding: .85rem .9rem;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  color: var(--cr-ink);
  text-decoration: none;
  background: var(--cr-surface-soft);
}
.cr-palette-detail-related a strong { display: block; margin-bottom: .25rem; }
.cr-palette-detail-related a span { color: var(--cr-muted); font-size: var(--cr-font-sm); line-height: 1.45; }
.cr-palette-detail-related a:hover { border-color: var(--cr-border-strong); background: var(--cr-surface-tint); }

.cr-palette-detail-note {
  margin-top: var(--cr-space-8);
  padding-top: var(--cr-space-6);
  border-top: 1px solid var(--cr-border);
  color: var(--cr-muted);
  line-height: 1.7;
}
.cr-palette-detail-note strong { color: var(--cr-ink); }

.cr-palette-detail-invalid {
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px dashed var(--cr-border-strong);
  border-radius: var(--cr-radius-xl);
  background: var(--cr-surface-soft);
  text-align: center;
}
.cr-palette-detail-invalid h2 { margin-top: 0; font-size: var(--cr-font-2xl); }
.cr-palette-detail-invalid p { max-width: 54ch; margin: .7rem auto 1.25rem; color: var(--cr-muted); line-height: 1.65; }
.cr-palette-detail-invalid-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }

#paletteDetail button:focus-visible,
#paletteDetail a:focus-visible {
  outline: 2px solid var(--cr-focus) !important;
  outline-offset: 3px !important;
  box-shadow: var(--cr-focus-ring);
}

@media (max-width: 880px) {
  .cr-palette-detail-grid { grid-template-columns: 1fr; }
  .cr-palette-detail-preview { min-height: 440px; }
}

@media (max-width: 640px) {
  #paletteDetail { padding: 2rem .9rem var(--cr-space-10); }
  #paletteDetail .section-title { font-size: clamp(2.45rem, 13vw, 4rem); }
  .cr-palette-detail-preview {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cr-palette-detail-color { min-height: 105px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .cr-palette-detail-color:last-child { border-bottom: 0; }
  .cr-palette-detail-color-label { opacity: 1; transform: translate(-50%, 0); }
  .cr-palette-detail-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .cr-palette-detail-toolbar .cr-btn--primary { margin-right: 0; }
  .cr-palette-value-row { grid-template-columns: 2rem 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  #paletteDetail * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}