/* Colorrow Phase 17 — Color Harmony Explorer */
.cr-harmony-page{background:var(--cr-canvas);color:var(--cr-ink);padding:clamp(2rem,4vw,4.5rem) 1rem 5rem}.cr-harmony-shell,.cr-harmony-content{width:min(1180px,100%);margin:0 auto}.cr-harmony-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:2rem}.cr-harmony-hero h1{font-size:var(--cr-font-4xl);line-height:var(--cr-leading-tight);letter-spacing:var(--cr-tracking-tight);margin:.35rem 0 .8rem}.cr-harmony-hero p{max-width:760px;margin:0;color:var(--cr-ink-soft);font-size:clamp(1rem,1vw + .8rem,1.2rem);line-height:1.65}.cr-harmony-kicker{display:block;text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800;color:var(--cr-muted)}.cr-harmony-hero-note{padding:1rem 1.1rem;border:1px solid var(--cr-border);border-radius:var(--cr-radius-md);background:var(--cr-surface-soft);display:grid;gap:.35rem;line-height:1.5}.cr-harmony-hero-note span{color:var(--cr-muted);font-size:.9rem}
.cr-harmony-workspace{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.55fr);gap:1rem;align-items:start}.cr-harmony-panel{background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:var(--cr-radius-xl);box-shadow:var(--cr-shadow-xs);padding:clamp(1rem,2.2vw,1.6rem)}.cr-harmony-panel-head{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}.cr-harmony-panel-head h2{font-size:var(--cr-font-xl);margin:.22rem 0 0;line-height:1.2}.cr-harmony-output-head{align-items:center}.cr-harmony-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
.cr-harmony-wheel-wrap{display:grid;justify-items:center;gap:.75rem;padding:.5rem 0 1rem}.cr-harmony-wheel{--wheel-size:min(280px,70vw);position:relative;width:var(--wheel-size);aspect-ratio:1;border-radius:50%;background:conic-gradient(#f33 0deg,#ff0 60deg,#0f0 120deg,#0ff 180deg,#33f 240deg,#f0f 300deg,#f33 360deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),var(--cr-shadow-sm);cursor:crosshair;touch-action:none;outline:none}.cr-harmony-wheel::after{content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle,var(--cr-surface) 0 48%,transparent 49%),radial-gradient(circle at 50% 0,rgba(255,255,255,.9),transparent 62%),radial-gradient(circle at 50% 100%,rgba(0,0,0,.55),transparent 62%);border:1px solid color-mix(in srgb,var(--cr-border) 75%,transparent);pointer-events:none}.cr-harmony-wheel:focus-visible{outline:3px solid var(--cr-focus);outline-offset:5px;box-shadow:var(--cr-focus-ring),var(--cr-shadow-sm)}.cr-harmony-wheel-center{position:absolute;inset:43%;z-index:2;border-radius:50%;background:var(--harmony-base,#3A86FF);border:3px solid var(--cr-surface);box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}.cr-harmony-wheel-marker{position:absolute;z-index:4;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--marker-color);border:3px solid var(--cr-surface);box-shadow:0 1px 5px rgba(0,0,0,.4);pointer-events:none}.cr-harmony-wheel-marker[data-base="true"]{width:24px;height:24px;border-width:4px;box-shadow:0 0 0 2px var(--cr-ink),0 2px 8px rgba(0,0,0,.35)}.cr-harmony-wheel-help{margin:0;max-width:310px;text-align:center;color:var(--cr-muted);font-size:.82rem;line-height:1.45}
.cr-harmony-fields{display:grid;gap:1rem}.cr-harmony-field-pair>label,.cr-harmony-range-field label{font-weight:750;font-size:.86rem}.cr-harmony-hex-row{display:grid;grid-template-columns:48px 1fr;gap:.55rem;margin-top:.45rem}.cr-harmony-hex-row input[type=color]{width:48px;height:44px;border:1px solid var(--cr-border-strong);padding:3px;border-radius:var(--cr-radius-sm);background:var(--cr-surface);cursor:pointer}.cr-harmony-error{display:block;min-height:1.2rem;margin-top:.25rem;color:var(--cr-danger);font-size:.78rem}.cr-harmony-range-field{display:grid;gap:.5rem}.cr-harmony-range-field>div{display:flex;justify-content:space-between;gap:1rem;align-items:center}.cr-harmony-range-field output{font-family:var(--cr-font-mono);font-size:.8rem;color:var(--cr-muted);font-variant-numeric:tabular-nums}.cr-harmony-range-field input[type=range]{width:100%;accent-color:var(--harmony-base,#3A86FF)}
.cr-harmony-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-bottom:1rem}.cr-harmony-modes button{min-height:42px;border:1px solid var(--cr-border);border-radius:var(--cr-radius-sm);background:var(--cr-surface-soft);color:var(--cr-ink);font:inherit;font-weight:700;font-size:.82rem;padding:.55rem .7rem;cursor:pointer;transition:transform var(--cr-motion-fast) var(--cr-ease-standard),border-color var(--cr-motion-fast),background var(--cr-motion-fast)}.cr-harmony-modes button:hover{border-color:var(--cr-border-strong);transform:translateY(-1px)}.cr-harmony-modes button[aria-pressed="true"]{background:var(--cr-ink);color:var(--cr-canvas);border-color:var(--cr-ink)}.cr-harmony-modes button:focus-visible{outline:3px solid var(--cr-focus);outline-offset:2px}
.cr-harmony-palette{display:grid;grid-template-columns:repeat(var(--harmony-count,3),minmax(0,1fr));min-height:330px;border-radius:var(--cr-radius-lg);overflow:hidden;border:1px solid var(--cr-border);background:var(--cr-surface-soft)}.cr-harmony-swatch{position:relative;display:flex;align-items:flex-end;min-width:0;background:var(--swatch);border:0;padding:0;color:inherit;cursor:pointer;isolation:isolate}.cr-harmony-swatch::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.58));z-index:-1}.cr-harmony-swatch-info{width:100%;padding:1rem .8rem .85rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);display:grid;gap:.18rem}.cr-harmony-swatch-info strong{font-family:var(--cr-font-mono);font-size:.9rem}.cr-harmony-swatch-info span{font-size:.72rem;opacity:.9}.cr-harmony-swatch:focus-visible{outline:4px solid var(--cr-focus);outline-offset:-4px;z-index:2}.cr-harmony-derivation{margin-top:1rem;padding:1rem;border-radius:var(--cr-radius-md);background:var(--cr-surface-soft);border:1px solid var(--cr-border);display:grid;gap:.3rem}.cr-harmony-derivation strong{font-size:.9rem}.cr-harmony-derivation p{margin:0;color:var(--cr-muted);font-size:.86rem;line-height:1.5}
.cr-harmony-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.cr-harmony-content article{padding:clamp(1.25rem,2vw,1.7rem);background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:var(--cr-radius-lg)}.cr-harmony-content h2{font-size:var(--cr-font-xl);margin:.3rem 0 .8rem}.cr-harmony-content p{color:var(--cr-ink-soft);line-height:1.7;margin:.65rem 0 0}.cr-harmony-definition-list{display:grid;gap:.75rem;margin:1rem 0 0}.cr-harmony-definition-list div{padding-top:.7rem;border-top:1px solid var(--cr-border)}.cr-harmony-definition-list dt{font-weight:800}.cr-harmony-definition-list dd{margin:.2rem 0 0;color:var(--cr-muted);line-height:1.55}.cr-harmony-related{grid-column:1/-1}.cr-harmony-related-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:1rem}.cr-harmony-related-links a{display:grid;gap:.3rem;padding:1rem;border:1px solid var(--cr-border);border-radius:var(--cr-radius-md);background:var(--cr-surface-soft);color:var(--cr-ink);text-decoration:none}.cr-harmony-related-links a:hover{border-color:var(--cr-border-strong)}.cr-harmony-related-links span{color:var(--cr-muted);font-size:.82rem;line-height:1.5}
body.dark .cr-harmony-modes button[aria-pressed="true"]{background:var(--cr-ink);color:#111}.cr-harmony-page .toast.show{z-index:1000}
@media(max-width:960px){.cr-harmony-hero{grid-template-columns:1fr}.cr-harmony-workspace{grid-template-columns:1fr}.cr-harmony-controls{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(260px,1fr);column-gap:1.5rem}.cr-harmony-controls>.cr-harmony-panel-head{grid-column:1/-1}.cr-harmony-fields{align-content:center}.cr-harmony-related-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.cr-harmony-page{padding:1.5rem .75rem 4rem}.cr-harmony-controls{display:block}.cr-harmony-output-head{display:grid}.cr-harmony-actions{justify-content:flex-start}.cr-harmony-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-harmony-palette{min-height:420px;grid-template-columns:1fr;grid-template-rows:repeat(var(--harmony-count,3),minmax(78px,1fr))}.cr-harmony-swatch::after{height:100%;width:55%;left:auto;background:linear-gradient(90deg,transparent,rgba(0,0,0,.55))}.cr-harmony-swatch-info{justify-items:end;text-align:right}.cr-harmony-content{grid-template-columns:1fr}.cr-harmony-related{grid-column:auto}}
@media(max-width:480px){.cr-harmony-hero h1{font-size:2.35rem}.cr-harmony-panel{border-radius:var(--cr-radius-lg);padding:1rem}.cr-harmony-modes{grid-template-columns:1fr}.cr-harmony-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.cr-harmony-actions .cr-btn--primary{grid-column:1/-1;text-align:center}.cr-harmony-related-links{grid-template-columns:1fr}.cr-harmony-wheel{--wheel-size:min(250px,76vw)}}
@media(prefers-reduced-motion:reduce){.cr-harmony-modes button{transition:none}}


/* Phase 17 scrollable-page patch — keep the explorer in normal document flow.
   The route must scroll as one page; controls/results never become a clipped
   viewport or a nested vertical scroller. */
html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body.cr-harmony-route {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: visible;
}
body.cr-harmony-route #main-content {
  flex: 1 0 auto;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100dvh - 4.5rem);
  height: auto;
  overflow: visible;
}
.cr-harmony-page,
.cr-harmony-shell,
.cr-harmony-workspace,
.cr-harmony-panel,
.cr-harmony-content {
  max-height: none;
  overflow-y: visible;
}
.cr-harmony-page {
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100dvh - 4.5rem);
}
.cr-harmony-workspace,
.cr-harmony-panel {
  min-height: 0;
}
.cr-harmony-content {
  padding-bottom: clamp(1rem, 3vw, 2.5rem);
}

@media (max-width: 720px) {
  body.cr-harmony-route #main-content,
  .cr-harmony-page {
    min-height: calc(100vh - 4rem);
    min-height: calc(100dvh - 4rem);
  }

  /* Vertical swipes that begin on the large wheel can still move the page.
     Taps and horizontal/mostly-horizontal wheel gestures continue to update hue. */
  .cr-harmony-wheel {
    touch-action: pan-y pinch-zoom;
  }
}

/* Phase 17 banner background alignment — the semantic <header> inside the
   explorer must not inherit the legacy site-wide sticky/glass header rules.
   Keep the hero on the same canvas as the surrounding page. */
.cr-harmony-page .cr-harmony-hero {
  position: static;
  top: auto;
  z-index: auto;
  background: var(--cr-canvas);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}