/* Local to Color. Swatches use opaque computed colors, never atmosphere blends. */
.color-page { min-height:100svh; min-height:100dvh; }
.color-tool { width:min(100% - 48px,640px); margin:0 auto; padding:max(64px,calc(env(safe-area-inset-top) + 56px)) 0 104px; }
.color-tool h1 { margin:0 0 36px; font-size:18px; font-weight:400; }
.color-tool label,.color-tool select,.color-tool input,.color-tool summary { font:inherit; color:inherit; }
.color-tool label,.color-note,.color-method,.color-tool summary { font-size:12px; }
.color-tool input,.color-tool select { min-height:44px; border:0; border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:0; background:transparent; }
.color-tool select { max-width:100%; padding:8px 20px 8px 0; cursor:pointer; }
.color-tool option { color:var(--ink); background:var(--paper); }
.color-tool :is(input,select,textarea,summary):focus-visible { outline:1px solid currentColor; outline-offset:4px; }
.color-entry { display:flex; align-items:center; gap:14px; margin-top:4px; }
#base-chip { width:32px; height:32px; flex-shrink:0; border:1px solid #8888; border-radius:50%; }
#color-input { min-width:0; width:100%; font-size:20px; letter-spacing:.025em; }
.color-entry button { font-size:14px; padding-right:0; }
#color-error { margin:8px 0 16px; font-size:12px; min-height:18px; }
.color-row { margin-bottom:22px; }
.row-heading { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.row-heading h2 { font-size:13px; font-weight:400; margin:0; }
.swatches { display:flex; gap:6px; }
.swatch { flex:1; min-width:0; }
.swatch-select { width:100%; padding:0; height:94px; display:flex; align-items:flex-end; justify-content:center; border:1px solid #8884; transition:filter .2s ease; }
.swatch-select span { font-size:10px; letter-spacing:.02em; padding:8px 1px; }
.color-note { line-height:1.6; opacity:.75; }
#color-preview,.color-method { border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent); margin-top:24px; padding-top:6px; }
.color-tool summary { min-height:44px; display:flex; align-items:center; cursor:pointer; list-style:none; gap:8px; }
.color-tool summary::-webkit-details-marker { display:none; }
.color-tool summary::after { content:'+'; opacity:.5; }
.color-tool details[open]>summary::after { content:'−'; }
/* Closed disclosure rows keep equal space above and below their labels.
 * Open rows retain their existing reading margins. */
.color-tool details:not([open]) { padding-bottom:6px; }
.color-tool details:not([open])+details { margin-top:0; }
.preview-choices { display:flex; align-items:flex-end; gap:8px; margin:8px 0 18px; }
.preview-choices label { flex:1; min-width:0; }
.preview-choices select { display:block; width:100%; font-size:13px; }
.preview-choices button { font-size:12px; }
#color-sample { padding:30px 24px; min-height:230px; border:1px solid #8884; }
#color-sample p { font-size:28px; line-height:1.25; margin:24px 0; }
.sample-shape { display:block; width:36px; height:36px; border-radius:50%; background:currentColor; }
.sample-small { font-size:13px; }
#contrast-result { font-size:12px; line-height:1.7; }
.color-method p { line-height:1.7; opacity:.75; }
#color-status { min-height:20px; font-size:12px; }
@media(min-width:760px) { .color-tool { padding-top:max(64px,9svh,calc(env(safe-area-inset-top) + 56px)); } .swatch-select { height:112px; } }
@media(prefers-reduced-motion:reduce) { .swatch-select { transition:none; } }
@media(max-width:600px) {
  .swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .swatch-select span { font-size:10px; letter-spacing:0; }
  .swatch-select { height:76px; }
  .swatches:has(.swatch:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .swatches:has(.swatch:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
#color-status { position:fixed; z-index:3; left:16px; right:16px; bottom:64px; margin:0; text-align:center; pointer-events:none; }
.swatch-select:focus-visible { outline-color:var(--ink); }
.color-page .actions { background:var(--paper); padding:0 6px; }

/* Preserve the shared atmosphere geometry, drift and visibility preference.
 * Registered colors interpolate inside the gradients; quick changes retarget
 * from the currently visible color rather than restarting/stacking overlays. */
@property --is-color-light-0 { syntax:"<color>"; inherits:true; initial-value:#b9c9d2; }
@property --is-color-light-1 { syntax:"<color>"; inherits:true; initial-value:#d6c4d9; }
@property --is-color-light-2 { syntax:"<color>"; inherits:true; initial-value:#93b7ba; }
@property --is-color-light-3 { syntax:"<color>"; inherits:true; initial-value:#e2d4be; }
@property --is-color-light-4 { syntax:"<color>"; inherits:true; initial-value:#a0b5d3; }
@property --is-color-dark-0 { syntax:"<color>"; inherits:true; initial-value:#192331; }
@property --is-color-dark-1 { syntax:"<color>"; inherits:true; initial-value:#363149; }
@property --is-color-dark-2 { syntax:"<color>"; inherits:true; initial-value:#213e42; }
@property --is-color-dark-3 { syntax:"<color>"; inherits:true; initial-value:#40382e; }
@property --is-color-dark-4 { syntax:"<color>"; inherits:true; initial-value:#24324d; }
.color-page .atmosphere { background:var(--is-color-light-0); transition:opacity 2.4s ease, --is-color-light-0 1.8s cubic-bezier(.22,.61,.36,1), --is-color-light-1 1.8s cubic-bezier(.22,.61,.36,1), --is-color-light-2 1.8s cubic-bezier(.22,.61,.36,1), --is-color-light-3 1.8s cubic-bezier(.22,.61,.36,1), --is-color-light-4 1.8s cubic-bezier(.22,.61,.36,1), --is-color-dark-0 1.8s cubic-bezier(.22,.61,.36,1), --is-color-dark-1 1.8s cubic-bezier(.22,.61,.36,1), --is-color-dark-2 1.8s cubic-bezier(.22,.61,.36,1), --is-color-dark-3 1.8s cubic-bezier(.22,.61,.36,1), --is-color-dark-4 1.8s cubic-bezier(.22,.61,.36,1); }
.color-page .atmosphere::before { background:radial-gradient(ellipse at 25% 25%,var(--is-color-light-1) 0%,transparent 60%),radial-gradient(ellipse at 75% 75%,var(--is-color-light-2) 0%,transparent 65%); }
.color-page .atmosphere::after { background:radial-gradient(ellipse at 70% 20%,var(--is-color-light-3) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,var(--is-color-light-4) 0%,transparent 65%); }
.color-page .atmosphere-dark { background:var(--is-color-dark-0); }
.color-page .atmosphere-dark::before { background:radial-gradient(ellipse at 25% 25%,var(--is-color-dark-1) 0%,transparent 60%),radial-gradient(ellipse at 75% 75%,var(--is-color-dark-2) 0%,transparent 65%); }
.color-page .atmosphere-dark::after { background:radial-gradient(ellipse at 70% 20%,var(--is-color-dark-3) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,var(--is-color-dark-4) 0%,transparent 65%); }
@media(prefers-reduced-motion:reduce) { .color-page .atmosphere { transition:none; } }
@media(max-width:600px) {
  .preview-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
  .preview-choices label:last-child { grid-column:2; grid-row:1; }
  .preview-choices #swap { grid-column:1; grid-row:2; justify-self:end; }
  .preview-choices #preview-random { grid-column:2; grid-row:2; justify-self:start; }
}
.color-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; margin-bottom:36px; }
.color-tabs a { color:inherit; text-decoration:none; font-size:18px; min-height:44px; width:100%; display:inline-flex; align-items:center; justify-content:center; opacity:.55; }
.color-tabs a[aria-current="page"] { opacity:1; }
.color-tabs h1 { font:inherit; margin:0; }

/* Shared editable typography for Color and Colorways; no saved user text. */
#preview-text { display:block; width:100%; box-sizing:border-box; min-height:44px; padding:0; border:0; border-radius:0; resize:none; overflow:hidden; background:transparent; color:inherit; -webkit-text-fill-color:currentColor; font:inherit; font-size:28px; line-height:1.25; font-weight:400; margin:24px 0; }
#preview-text::selection { background:#8885; }
.preview-type-controls { display:grid; grid-template-columns:minmax(0,1fr) 100px 100px; gap:24px; margin:14px 0 8px; align-items:start; }
.preview-type-controls label,.preview-weight-control,.preview-case-control { display:grid; grid-template-rows:20px 44px; min-width:0; font-size:12px; }
.preview-control-label { display:block; line-height:20px; }
.preview-type-controls output { opacity:.65; margin-left:4px; }
.preview-type-controls input,.preview-type-controls select,.preview-case-control button,#preview-weight { display:block; width:100%; height:44px; min-height:44px; margin:0; box-sizing:border-box; }
.preview-type-controls input { padding:0; accent-color:var(--ink); border:0; cursor:pointer; }
.preview-case-control button,#preview-weight { border:0; background:transparent; padding:8px 0; text-align:left; font-size:12px; white-space:nowrap; }
@media(max-width:600px) {
 .preview-type-controls { grid-template-columns:minmax(0,1fr) 78px 78px; gap:12px; }
}

/* A deliberate shared lock; ordinary visits stay open to chance. */
.shared-color-bar:has(button[hidden]) { display:none; }
.shared-color-bar { position:absolute; z-index:4; top:max(8px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); margin:0; }
#shared-color-lock { display:inline-flex; align-items:center; gap:8px; font-size:11px; padding-left:0; min-height:44px; }
#shared-color-lock::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--locked-color); border:1px solid #8886; }
.color-discovery { display:flex; gap:20px; margin-bottom:14px; }
.color-discovery button { padding-left:0; font-size:12px; min-height:44px; }

/* One shared mobile shell for all three tools, locked or unlocked. */
@media(max-width:600px) {
  .color-tool { width:calc(100% - 32px); }
  .color-tabs a { font-size:16px; }
}

@media(max-width:600px) {
  /* Keep color sequences continuous; retain hexes only when each cell has room. */
  .swatches { display:flex; gap:0; }
  .swatch-select { height:88px; border:0; }
  .swatches:has(.swatch:nth-child(5)) .swatch-select span { display:none; }
}

/* Color tools finish with a normal footer, never a floating action over the work. */
.color-page { display:flex; flex-direction:column; }
.color-page .color-tool { flex:1; padding-bottom:28px; }
.color-page .actions { position:static; left:auto; bottom:auto; transform:none; flex-shrink:0; margin:0 auto; padding:0 6px max(8px,env(safe-area-inset-bottom)); background:transparent; }
.color-tool button.color-icon-action { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; opacity:.5; }
.color-tool button.color-icon-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.color-tool button.color-icon-action:hover,.color-tool button.color-icon-action:focus-visible { opacity:1; }
.color-tool button.color-icon-action:disabled { opacity:.2; cursor:default; }
.color-discovery { align-items:center; gap:8px; }

#shared-color-lock svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.5; }
#shared-color-lock:hover svg,#shared-color-lock:focus-visible svg { opacity:1; }

/* The base chip is the same native color control used in Theory. */
#base-chip { box-sizing:border-box; width:44px; height:44px; min-width:44px; max-width:44px; min-height:44px; padding:6px; border:0; background:transparent; cursor:pointer; }
#base-chip::-webkit-color-swatch-wrapper { width:100%; height:100%; padding:0; }
#base-chip::-webkit-color-swatch { border:1px solid #8888; border-radius:50%; }
#base-chip::-moz-color-swatch { border:1px solid #8888; border-radius:50%; }

#base-color-name { display:block; margin:0 0 4px; font-size:12px; }
#color-submit svg { width:16px; height:16px; stroke-width:1.2; }

#color-name-slot { overflow:hidden; }

/* Inset only the mobile navigation and top selectors; keep artwork full width. */
@media(max-width:600px) {
 .color-tabs,.colorway-count,.theory-navigation { margin-inline:8px; }
}

/* History uses the same smaller curved icons as Colorways. */
.color-tool #color-back svg,.color-tool #color-forward svg{width:14px;height:14px;}

.color-history{display:flex;align-items:center;gap:4px;}