/* =========================================================
   Color Studio — tool styles
   LAB-172. Loads after labs.css.

   SCOPE: everything here is color-tool-specific. The generic
   parts — fields, tabs, buttons, code blocks, section rhythm —
   live in labs.css so the next tool inherits them instead of
   re-inventing them.

   RULE INHERITED FROM labs.css: a raw hex here is a bug. The
   only literal colors on this page are the ones the USER picks,
   and those arrive via inline style from app.js, not from CSS.
   ========================================================= */

/* =======================================================
   NOSCRIPT
   ======================================================= */

.cs-noscript p { margin: 0 0 12px; color: var(--text-secondary); line-height: 1.6; }
.cs-noscript p:last-child { margin-bottom: 0; }
.cs-noscript-alt { font-size: 14px; color: var(--labs-text-muted); }
.cs-noscript-alt a { color: var(--brand-blue-light); text-decoration: underline; }

/* =======================================================
   1 · STAGE — preview + controls
   ======================================================= */

.cs-stage {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 860px) {
  .cs-stage { grid-template-columns: 1fr; }
}

/* ---------- the big swatch ---------- */

.cs-preview {
  position: relative;
  min-height: 260px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  cursor: pointer;
  /* Only the background animates. Transitioning `all` here made
     dragging the picker visibly lag behind the cursor. */
  transition: background-color var(--t-fast) linear,
              box-shadow var(--t-base) var(--ease-out);
}
.cs-preview:hover { box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8); }
.cs-preview:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}

.cs-preview-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Default is light text; app.js flips the class when APCA says
   dark text reads better on the current color. */
.cs-preview-hex,
.cs-preview-name { color: #FFFFFF; }
.cs-preview.is-dark-text .cs-preview-hex,
.cs-preview.is-dark-text .cs-preview-name { color: #000000; }

.cs-preview-hex {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cs-preview-name {
  font-size: 13px;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* ---------- controls column ---------- */

.cs-controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.cs-pick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
@media (max-width: 560px) {
  .cs-pick-row { grid-template-columns: auto minmax(0, 1fr); }
  .cs-pick-actions { grid-column: 1 / -1; }
}

.cs-pick-actions {
  display: flex;
  align-items: flex-end;
  /* Line the button up with the input, not the label above it. */
  padding-top: 27px;
}

/* Native color input. Chrome and Safari each wrap the swatch in
   their own padded shadow-DOM box; both are zeroed out here so
   the control is a clean square that matches the field height. */
.cs-native {
  width: 54px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev-1);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.cs-native::-webkit-color-swatch-wrapper { padding: 3px; }
.cs-native::-webkit-color-swatch { border: 0; border-radius: 6px; }
.cs-native::-moz-color-swatch { border: 0; border-radius: 6px; }
.cs-native:hover { border-color: var(--border-strong); }
.cs-native:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}
.cs-native--sm { width: 44px; height: 42px; flex: none; }

.cs-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* ---------- presets ---------- */

.cs-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.cs-presets-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cs-presets-row { display: flex; flex-wrap: wrap; gap: 8px; }

.cs-preset {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
/* Scale, never translate — see the note on .cs-step-chip. Growing
   is safe because it never uncovers the point under the cursor. */
.cs-preset:hover { transform: scale(1.1); border-color: var(--border-strong); }
.cs-preset:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}

/* ---------- format readouts ---------- */

.cs-formats {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.cs-format {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--bg-elev-1);
  border-top: 1px solid var(--border-subtle);
}
.cs-format:first-child { border-top: 0; }

.cs-format-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

.cs-format-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: nowrap;
}

.cs-format-copy {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.cs-format-copy:hover { color: var(--text-primary); background: var(--bg-elev-2); }
.cs-format-copy:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

/* =======================================================
   2 · SCALE
   ======================================================= */

.cs-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1000px) { .cs-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cs-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px)  { .cs-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-step { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.cs-step-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  height: 108px;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

/* NO HOVER LIFT HERE — this was `transform: translateY(-3px)` and it
   was a genuine interaction bug, caught by clicking each swatch at its
   bottom edge rather than its middle.
   Lifting the button on hover slides it out from under the cursor, so
   the bottom 3px of its resting footprint stops being the button. Point
   at that strip and it flickers: hover lifts it away, losing hover drops
   it back, which re-triggers hover. Playwright reported it as "element
   is not stable"; a person reports it as "the swatch is jumpy and I have
   to click twice."
   The ring below reads as hover just as clearly and never moves the
   target. Same reasoning applies to .cs-preset above. */
.cs-step-chip:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 3px var(--border-strong),
              0 12px 24px -14px rgba(0, 0, 0, 0.9);
}
.cs-step-chip:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}

.cs-step.is-anchor .cs-step-chip {
  border-color: var(--brand-blue-light);
  box-shadow: 0 0 0 1px var(--brand-blue-light);
}

/* The two contrast reads sitting on the swatch itself. */
.cs-step-reads { display: flex; flex-direction: column; gap: 3px; }

.cs-read {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
/* No background: these have to sit directly on the swatch to be
   an honest reading of that swatch. A tinted pill behind them
   would be measuring the pill. */
.cs-read--w { color: #FFFFFF; }
.cs-read--b { color: #000000; }

.cs-read-aa { font-family: var(--font-display); font-weight: 700; font-size: 11px; }
.cs-read-num { opacity: 0.85; }

.cs-step-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.cs-step-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cs-step-hex {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--labs-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-step-anchor {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
}

.cs-scale-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--labs-text-muted);
  max-width: 68ch;
}
.cs-scale-note:empty { display: none; }

/* =======================================================
   3 · CONTRAST
   ======================================================= */

.cs-contrast { display: flex; flex-direction: column; gap: 22px; }

.cs-contrast-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}
@media (max-width: 620px) {
  .cs-contrast-inputs { grid-template-columns: 1fr; }
  .cs-swap { justify-self: start; }
}

.cs-swatch-input { display: flex; gap: 8px; align-items: center; }

.cs-swap { margin-bottom: 1px; }

.cs-contrast-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .cs-contrast-body { grid-template-columns: 1fr; }
}

/* ---------- live sample ---------- */

.cs-sample {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.cs-sample p { margin: 0; }
.cs-sample-lg { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; }
.cs-sample-md { font-size: 16px; line-height: 1.6; }
.cs-sample-sm { font-size: 13px; line-height: 1.55; }

/* ---------- results ---------- */

.cs-results { display: flex; flex-direction: column; gap: 12px; }

.cs-result {
  padding: 18px 20px;
  background: var(--labs-card-bg);
  border: 1px solid var(--labs-card-border);
  border-radius: var(--r-lg);
}

.cs-result-h {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 8px;
}
.cs-result-sub { opacity: 0.6; letter-spacing: 0.06em; }

.cs-result-figure {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.cs-result-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0;
}

/* ---------- WCAG gates ---------- */

.cs-gates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.cs-gate { display: flex; align-items: flex-start; gap: 9px; }

.cs-gate-mark {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.cs-gate.is-pass .cs-gate-mark {
  color: var(--labs-status-live);
  background: color-mix(in srgb, var(--labs-status-live) 14%, transparent);
}
.cs-gate.is-fail .cs-gate-mark {
  color: var(--labs-status-wip);
  background: color-mix(in srgb, var(--labs-status-wip) 14%, transparent);
}

.cs-gate-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-gate-label { font-size: 13.5px; color: var(--text-secondary); line-height: 1.35; }
.cs-gate.is-pass .cs-gate-label { color: var(--text-primary); }
.cs-gate-hint { font-size: 11.5px; color: var(--labs-text-muted); line-height: 1.35; }

/* ---------- APCA ---------- */

.cs-apca-use {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--text-secondary);
}
.cs-apca-use.is-pass { color: var(--labs-status-live); }
.cs-apca-use.is-ok   { color: var(--text-primary); }
.cs-apca-use.is-warn { color: var(--labs-status-wip); }
.cs-apca-use.is-fail { color: var(--labs-status-wip); font-weight: 600; }

.cs-apca-polarity {
  font-size: 12px;
  line-height: 1.45;
  color: var(--labs-text-muted);
  margin: 0;
}

.cs-status {
  font-size: 13px;
  color: var(--labs-text-muted);
  margin: 0;
  min-height: 1.4em;
}

/* =======================================================
   4 · TOKENS
   ======================================================= */

.cs-token-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.cs-field-name { width: min(260px, 100%); }

.cs-code-wrap { position: relative; }

.cs-code-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--bg-elev-2);
}

/* =======================================================
   5 · SAVED
   ======================================================= */

.cs-saved-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

.cs-saved {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.cs-saved-chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  flex: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.cs-saved-chip:hover { transform: scale(1.08); }
.cs-saved-chip:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 2px; }

.cs-saved-hex {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}

.cs-saved-del {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.cs-saved-del:hover { color: var(--text-primary); background: var(--bg-elev-2); }
.cs-saved-del:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 2px; }

.cs-saved-empty {
  font-size: 14px;
  color: var(--labs-text-muted);
  margin: 0;
}

/* =======================================================
   TOAST
   ======================================================= */

.cs-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 80;
  transform: translate(-50%, 14px);
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.cs-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =======================================================
   3 · HARMONY
   ======================================================= */

.cs-harmony { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* labs.css sets .labs-tabs to inline-flex with no wrap, which is right
   for the short token-format labels it was written for. "Split
   complementary" is long enough to push the pill row past a phone
   viewport, so this tablist is allowed to wrap. Scoped here rather
   than changed in labs.css — the other tools' tabs are still short,
   and widening a suite-level rule to fix one tool is how shared
   stylesheets rot. */
.cs-harmony .labs-tabs { flex-wrap: wrap; max-width: 100%; }

.cs-harmony-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--labs-text-muted);
  max-width: 68ch;
}

.cs-harmony-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Four is the widest harmony (tetradic). Past that the swatches get
   too narrow to read the contrast chips sitting on them. */
@media (min-width: 900px) {
  .cs-harmony-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cs-harm { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.cs-harm-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  height: 128px;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
/* Ring, not lift — see the note on .cs-step-chip above. Same bug. */
.cs-harm-chip:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 3px var(--border-strong),
              0 12px 24px -14px rgba(0, 0, 0, 0.9);
}
.cs-harm-chip:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 3px; }

.cs-harm.is-base .cs-harm-chip {
  border-color: var(--brand-blue-light);
  box-shadow: 0 0 0 1px var(--brand-blue-light);
}

.cs-harm-reads { display: flex; flex-direction: column; gap: 3px; }

.cs-harm-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.cs-harm-role {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cs-harm.is-base .cs-harm-role { color: var(--brand-blue-light); }

.cs-harm-hex {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--labs-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-harm-use {
  align-self: flex-start;
  padding: 4px 10px;
  min-height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.cs-harm-use:hover { border-color: var(--border-strong); color: var(--text-primary); }
.cs-harm-use:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 2px; }

.cs-harmony-clamp {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--labs-text-muted);
  max-width: 72ch;
}
.cs-harmony-clamp:empty { display: none; }

/* =======================================================
   5 · CONTRAST MATRIX
   ======================================================= */

.cs-matrix-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* The scroll lives on a dedicated box around the table, not on
   .cs-matrix-wrap. A flex item defaults to min-width:auto, so a wrap
   that is itself a flex child refuses to shrink below its content and
   the overflow escapes to the page instead of scrolling here — which
   is exactly what the 375px check caught. */
.cs-matrix-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }

.cs-matrix {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  table-layout: fixed;
}

.cs-mx-corner { width: 44px; }

.cs-mx-head {
  padding: 2px;
  font-weight: 500;
  vertical-align: middle;
  text-align: center;
}

.cs-mx-swatch {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
}
.cs-mx-head--row .cs-mx-swatch { height: 14px; }

.cs-mx-head-num {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--labs-text-muted);
  line-height: 1.2;
}

.cs-mx-cell {
  height: 34px;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Filled = clears body text. Outlined = large text and UI only.
   Empty = carries nothing, and an empty cell says that faster than a
   number would. */
.cs-mx-cell.is-ui { border-color: var(--border-strong); opacity: 0.9; }
.cs-mx-cell.is-no { opacity: 0.28; }
.cs-mx-cell.is-self { opacity: 0.5; border-style: dashed; border-color: var(--border-subtle); }

.cs-matrix-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--labs-text-muted);
  max-width: 72ch;
}

/* Wider than a phone at any readable cell size, so below this it
   scrolls inside .cs-matrix-scroll rather than pushing the page
   sideways. */
@media (max-width: 820px) {
  .cs-matrix { min-width: 620px; }
  .cs-mx-cell { height: 28px; font-size: 10px; }
}

/* =======================================================
   6 · COLOUR VISION
   ======================================================= */

.cs-vision { display: flex; flex-direction: column; gap: 28px; }

/* #csVisionMounts is a plain wrapper around the three deficiency rows,
   so it has to carry the same rhythm the flex parent gives the
   reference row — otherwise the verdict text of one row butts
   straight into the heading of the next. */
#csVisionMounts { display: flex; flex-direction: column; gap: 28px; }

.cs-vision-row { display: flex; flex-direction: column; gap: 6px; }

.cs-vision-row--ref { padding-bottom: 22px; border-bottom: 1px solid var(--border-subtle); }

.cs-vision-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.cs-vision-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--labs-text-muted);
  max-width: 72ch;
}

.cs-vision-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 3px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.cs-vision-step {
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
}

.cs-vision-verdict {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--labs-text-muted);
  max-width: 72ch;
}
.cs-vision-verdict.is-warn { color: var(--text-secondary); }

@media (max-width: 620px) { .cs-vision-step { height: 34px; } }

/* =======================================================
   7 · INTERFACE PREVIEW
   ======================================================= */

.cs-uiprev { display: flex; flex-direction: column; gap: 14px; }

/* The stage carries user colors as inline style from app.js. It is
   deliberately NOT themed from the site tokens — the whole point is
   that it stops looking like this page. */
.cs-uiprev-stage {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.cs-uiprev-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-uiprev-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: inherit;
}

.cs-uiprev-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  max-width: 58ch;
  color: inherit;
}

.cs-uiprev-link { text-decoration: underline; text-underline-offset: 2px; }

.cs-uiprev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.cs-uiprev-btn {
  padding: 10px 18px;
  min-height: 40px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}
.cs-uiprev-btn--ghost { background: transparent; border-style: solid; }

.cs-uiprev-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cs-uiprev-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--labs-text-muted);
  max-width: 72ch;
}

/* =======================================================
   MOTION
   ======================================================= */

@media (prefers-reduced-motion: reduce) {
  .cs-preview,
  .cs-sample,
  .cs-preset,
  .cs-step-chip,
  .cs-harm-chip,
  .cs-harm-use,
  .cs-saved-chip,
  .cs-toast {
    transition: none !important;
  }
  .cs-preset:hover,
  .cs-saved-chip:hover { transform: none; }
  .cs-toast { transform: translate(-50%, 0); }
}