/* PRINT-CHAIN — the Print Room in Chain dress.
   Loaded AFTER /css/desktop-tokens.css, /css/signal.css and /css/chain.css, and after print.html's
   own <style> block, so everything here is a deliberate override of what came before.

   Method: print.html's entire inline stylesheet is written against a small set of shared tokens
   (--bg, --surface, --card, --border, --text-N, --font-N, --safe). Rather than renaming ~40 that
   JS template-strings generate — which is where a restyle breaks an engine — this file
   (1) re-points those tokens at Chain's own --cn-* values, so the whole page changes palette and
   type in one move, then (2) reshapes the handful of components that need Chain's actual geometry
   (cards, chips, switches, tick scales, command bar).

   Nothing here changes a selector JS queries, an id, a data-* attribute or a state class
   (.on/.open/.dirty/.active) — only how they look. */

/* ══════════════════════════════════════════════════════════════════════
   1 · TOKEN BRIDGE — the page's own vocabulary, re-pointed at Chain
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ground + ink: byte-identical to Chain's, via the tokens print.html already uses */
  --bg:            var(--cn-page);
  --surface:       var(--cn-surf-off);
  --card:          var(--cn-surf);
  --card-2:        var(--cn-surf-off);
  --border:        var(--cn-line);
  --border-strong: var(--cn-line-btn);
  --text:          var(--cn-ink);
  --text-2:        var(--cn-t-72);
  --text-3:        var(--cn-t-45);

  /* Type. --font-serif is print.html's micro-label face (it was JetBrains Mono); Chain sets every
     micro-label in Urbanist with letter-spacing instead, so both roles collapse onto --cn-font.
     --font-plate is deliberately NOT touched: it names the typeface DRAWN INTO the exported
     print's gallery plate, which is product output, not chrome. */
  --font-sans:  var(--cn-font);
  --font-serif: var(--cn-font);

  /* Accent. The Print Room's gold (#C9A24B) is retired in favour of Chain's amber so the room
     reads as the same product as Studio. Every --safe reference in print.html — chips, switches,
     active thumbs, the range fill, status text — follows this one line.
     --sig-accent already points at --safe (print.html:35), so SIGNAL's tick markers follow too. */
  --safe:      var(--cn-amber);
  --safe-hi:   var(--cn-amber-hi);
  --safe-dim:  rgba(232,134,58,0.16);
  --safe-line: rgba(232,134,58,0.42);

  --r: var(--cn-r-12);
}

/* ══════════════════════════════════════════════════════════════════════
   2 · SHELL
   ══════════════════════════════════════════════════════════════════════ */
body{
  font-family:var(--cn-font);
  background:var(--cn-page);
  color:var(--cn-ink);
  -webkit-font-smoothing:antialiased;
}

/* Focus. chain.css scopes its focus ring to html.cn-app; print.html is not an app-shell document
   (it still scrolls below 960px), so the same ring is restated here for the whole page. */
:focus-visible{ outline:var(--cn-focus-ring); outline-offset:var(--cn-focus-offset); }
/* The SIGNAL tick scale hides its real <input type=range> at opacity 0 — focus it and the ring
   would land on an invisible box. Move the ring onto the visible ruler instead. */
.sig-scale input[type=range]:focus-visible{ outline:none; }
.sig-scale:has(input[type=range]:focus-visible){
  outline:var(--cn-focus-ring); outline-offset:var(--cn-focus-offset); border-radius:var(--cn-r-8);
}

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:var(--cn-line-btn); border-radius:3px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ── command bar ──────────────────────────────────────────────────────
   Uses chain.css's own .cn-bar / .cn-cmdbtn / .cn-vrule / .cn-status / .cn-nav / .cn-cta
   unchanged. Only the two things Studio gets from its flex shell and print.html does not
   (a page background behind a sticky bar, and a stacking context) are added here. */
.cn-bar{
  position:sticky; top:0; z-index:200;
  background:var(--cn-page);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
/* print.html's own toolbar state class is .on (compareBtn / zoomFitBtn), not aria-pressed —
   give it the same lit treatment chain.css gives [aria-pressed="true"]. */
.cn-cmdbtn.on{ background:var(--cn-hov-14); }
.cn-cmdbtn.on svg{ stroke:var(--cn-amber); }
.cn-cmdbtn.on span{ color:var(--cn-amber); }

/* ── work grid ────────────────────────────────────────────────────────── */
.work{
  position:relative;
  grid-template-columns:1fr var(--cn-col-w);
  height:calc(100dvh - var(--cn-bar-h));
  background:var(--cn-shell);
}

/* ── viewer column ────────────────────────────────────────────────────── */
.stage{
  padding:var(--cn-body-pad);
  gap:var(--cn-col-gap);
}
/* the viewer toolbar, as Chain's .cn-vtools */
.stage-top{
  flex:none; height:var(--cn-vtool-h);
  padding:0 12px; gap:10px;
  border:1px solid var(--cn-line); border-bottom:1px solid var(--cn-line);
  border-radius:var(--cn-r-14);
  background:var(--cn-surf);
}
.stage-tools{ gap:4px; min-width:0; }
.zoom-group{ display:inline-flex; align-items:center; gap:2px; margin-left:0; }

/* .mini — every small pill button on the page (zoom, Save, Re-roll, panel actions). Chain's
   .cn-ghost geometry, with .on lit amber the way .cn-cursor[aria-pressed] is. */
.mini{
  height:26px; padding:0 12px; gap:6px;
  border-radius:var(--cn-r-pill);
  background:var(--cn-surf-btn); border:1px solid var(--cn-line-btn);
  color:var(--cn-t-85);
  font-family:var(--cn-font); font-size:var(--cn-fs-95); font-weight:var(--cn-w-reg);
  letter-spacing:var(--cn-ls-14); text-transform:uppercase;
  transition:background var(--cn-t-state) var(--cn-ease),
             border-color var(--cn-t-state) var(--cn-ease),
             color var(--cn-t-state) var(--cn-ease),
             transform var(--cn-t-state) var(--cn-ease);
}
.mini:hover{ background:var(--cn-hov-18); border-color:var(--cn-line-btn); color:var(--cn-ink); }
.mini:active{ transform:scale(0.94); }
.mini svg{ width:13px; height:13px; }
.mini.on{ background:var(--cn-amber); border-color:transparent; color:var(--cn-ink-on-amber); }
.mini[disabled]{ opacity:var(--cn-disabled-alpha); cursor:default; }
.mini[disabled]:hover{ background:var(--cn-surf-btn); color:var(--cn-t-85); }
/* the −/Fit/+ trio reads as Chain's zoom cluster: square icon buttons, tabular readout */
.zoom-group .mini{
  min-width:26px; padding:0 9px; justify-content:center;
  border-radius:var(--cn-r-8); background:transparent; border-color:transparent;
  color:var(--cn-t-80); font-variant-numeric:tabular-nums;
}
.zoom-group .mini:hover{ background:var(--cn-hov-14); }
.zoom-group .mini.on{ background:var(--cn-amber); color:var(--cn-ink-on-amber); }

.dims-tag{
  font-family:var(--cn-font); font-size:var(--cn-fs-95);
  letter-spacing:var(--cn-ls-14); color:var(--cn-t-60);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* filmstrip — Chain's .cn-strip card */
.print-filmstrip{
  flex:none; gap:6px; padding:9px 12px;
  border:1px solid var(--cn-line); border-bottom:1px solid var(--cn-line);
  border-radius:var(--cn-r-14);
  background:var(--cn-surf);
}
/* The cells themselves are Chain's .cn-filmstrip-thumb now, rendered by js/gallery/filmstrip.js —
   the same component Studio and Mono use, which is what the "Chain's .cn-strip card" comment
   above always wanted and never got. The 44px square box, the active border and the worked
   amber border+glow that used to be re-declared here all live in chain.css. */
.print-filmstrip{ overflow-x:auto; align-items:center; }

/* the viewer well — Chain's .cn-frame */
.viewport{
  border:1px solid var(--cn-line);
  border-radius:var(--cn-r-18);
  background:var(--cn-well);
}

/* ── empty state ──────────────────────────────────────────────────────── */
.dropzone{ background:color-mix(in srgb, var(--cn-well) 82%, transparent); border-radius:var(--cn-r-18); }
.dropzone h2{
  font-family:var(--cn-font); font-size:var(--cn-fs-30); font-weight:var(--cn-w-thin);
  letter-spacing:var(--cn-ls-n35); color:var(--cn-ink);
}
.dropzone p{ font-size:var(--cn-fs-125); line-height:1.5; color:var(--cn-t-60); }
.dz-icon{ color:var(--cn-t-30); }

/* .dz-btn — Chain's .cn-action (primary amber; .ghost is the neutral variant) */
.dz-btn{
  height:38px; padding:0 18px; gap:8px;
  border-radius:var(--cn-r-12);
  background:var(--cn-amber); color:var(--cn-ink-on-amber);
  font-family:var(--cn-font); font-size:var(--cn-fs-12); font-weight:var(--cn-w-med);
  box-shadow:var(--cn-amber-glow);
  transition:filter var(--cn-t-state) var(--cn-ease), transform var(--cn-t-state) var(--cn-ease);
}
.dz-btn:hover{ filter:brightness(1.1); }
.dz-btn:active{ transform:scale(0.96); }
.dz-btn.ghost{
  background:var(--cn-surf-btn); border:1px solid var(--cn-line-btn);
  color:var(--cn-ink); box-shadow:none; font-weight:var(--cn-w-reg);
}
.dz-btn svg{ width:15px; height:15px; }

/* ══════════════════════════════════════════════════════════════════════
   3 · CONTROL PANEL
   ══════════════════════════════════════════════════════════════════════ */
.panel{
  background:transparent;
  border-left:1px solid var(--cn-line-head);
  padding-bottom:0;
  scrollbar-width:thin; scrollbar-color:var(--cn-line-btn) transparent;
}

/* hero — Chain's .cn-hero: a bordered surface card, not a lit glow slab */
.panel-head{ padding:12px 12px 2px; }
.panel-head .sig-glow{
  border-radius:var(--cn-r-16);
  background:var(--cn-surf); border:1px solid var(--cn-line-2);
  box-shadow:none;
}
.panel-head .sig-glow::after{ display:none; }
.panel-hero{ padding:13px 14px 12px; gap:12px; }
.panel-head .sig-sub{
  font-family:var(--cn-font); font-size:var(--cn-fs-85);
  letter-spacing:var(--cn-ls-24); color:var(--cn-t-62);
}
.panel-head .sig-val{
  color:var(--cn-ink); font-family:var(--cn-font);
  font-size:var(--cn-fs-30); font-weight:var(--cn-w-thin);
  letter-spacing:var(--cn-ls-n35); line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.panel-head .sig-val small{
  font-family:var(--cn-font); font-size:var(--cn-fs-12); font-weight:var(--cn-w-reg);
  color:var(--cn-t-72); opacity:1;
}
.panel-head .sig-cap{
  font-family:var(--cn-font); font-size:var(--cn-fs-11); font-weight:var(--cn-w-reg);
  line-height:1.35; color:var(--cn-t-60); letter-spacing:0; opacity:1 !important;
}

/* ── category header — Chain's .cn-stagehead (label · count · hairline rule · chevron) ── */
.panel-category{ border:0; padding:0 12px; }
/* now a real <button> (it was a clickable <div>, so Tab skipped it) — strip the UA button dress
   and keep the flex row it already was. */
.panel-category-header{
  display:flex; width:100%;
  padding:16px 2px 8px; gap:9px;
  background:none; border:0; font-family:inherit; text-align:left;
}
.panel-category-header:hover{ opacity:1; }
.panel-category-header:hover .panel-category-label{ color:var(--cn-ink); }
.panel-category-label{
  align-items:center; gap:8px;                 /* see .card-head .name — same inline-flex, no gap */
  font-family:var(--cn-font); font-size:var(--cn-fs-95); font-weight:var(--cn-w-reg);
  letter-spacing:var(--cn-ls-24); text-transform:uppercase; color:var(--cn-t-60);
}
.panel-category-label > svg{ flex:none; }
.panel-category-count{
  font-family:var(--cn-font); font-size:var(--cn-fs-85);
  letter-spacing:var(--cn-ls-10); color:var(--cn-t-42);
  background:transparent; border:0; padding:0;
  font-variant-numeric:tabular-nums;
}
/* the hairline that runs to the chevron. ::after is a flex item of the header, so `order`
   is what puts it before the chevron rather than after it. */
.panel-category-header::after{
  content:''; order:1; flex:1; height:1px; background:var(--cn-line-div);
}
.panel-category-header .chevron{
  order:2; margin-left:0; width:13px; height:13px;
  color:var(--cn-t-50); stroke-width:1.4;
  transition:transform var(--cn-t-state) var(--cn-ease);
}

/* ── module card — Chain's .cn-mod ───────────────────────────────────── */
.card{
  position:relative;
  border:1px solid var(--cn-line-off);
  border-radius:var(--cn-r-15);
  background:var(--cn-surf-off);
  overflow:hidden;
  margin-bottom:var(--cn-mod-gap);
  transition:background var(--cn-t-state) var(--cn-ease), border-color var(--cn-t-state) var(--cn-ease);
}
.card.open, .card.dirty{ background:var(--cn-surf); border-color:var(--cn-line); }
.card-head{ padding:10px 12px 10px 14px; gap:11px; }
.card-head:hover{ background:var(--cn-hov-08); }
/* .tick becomes Chain's .cn-mod-edge: a 4px accent bar down the card's whole left edge */
.card-head .tick{
  position:absolute; left:0; top:0; bottom:0;
  width:4px; height:auto; border-radius:0;
  background:var(--cn-line-off); opacity:.55;
  transition:opacity var(--cn-t-state) var(--cn-ease), background var(--cn-t-state) var(--cn-ease);
}
.card.open .card-head .tick, .card.dirty .card-head .tick{ background:var(--cn-amber); opacity:1; }
/* .name is a real <button> now (Chain's .cn-mod-title is one too) so the card can be opened from
   the keyboard; the rest of the head row stays click-to-toggle for the mouse. */
/* al: "the icons are on top of the copy."
   They were touching, which at this size reads as on top of. Both this and .panel-category-label
   below are turned into flex containers by an INLINE style="display:flex..." on the element in
   print.html — 21 of them — and none of those inline styles sets a gap, so `gap` fell back to
   `normal` (0) and each 16-18px glyph sat flush against the first letter of its title. Measured:
   the icon's right edge and the text's left edge were both at exactly the same x.
   Fixed here rather than in the 21 inline styles: the inline rule only sets `display` (and
   alignment), so a stylesheet `gap` applies cleanly to every instance at once and cannot be
   forgotten on the next card someone adds. flex:none on the glyph stops a long title squeezing
   it out of shape. */
.card-head .name{
  flex:1; min-width:0; padding:0;
  align-items:center; gap:9px;
  background:none; border:0; text-align:left; cursor:pointer;
  font-family:var(--cn-font); font-size:var(--cn-fs-13); font-weight:var(--cn-w-reg);
  letter-spacing:0; color:var(--cn-t-45);
}
.card-head .name > svg{ flex:none; }
.card.open .card-head .name, .card.dirty .card-head .name{ color:var(--cn-ink); }
.card-head .chev{
  width:13px; height:13px; color:var(--cn-t-50); stroke-width:1.3;
  transition:transform var(--cn-t-state) var(--cn-ease);
}
/* Chain's chevron points down and flips 180° open (the markup's arrow was changed to match). */
.card.open .card-head .chev{ transform:rotate(180deg); color:var(--cn-t-50); }
.card-body{ padding:0 12px 13px 14px; }

/* ── per-card on/off — Chain's own switch, in the Print Room's card head ─────
   al: "I think we need to add checkmarks in to activate each tool like studio. Its very hard to
   navigate whats on or off."

   .cn-switch and .cn-mod-state are defined in /css/chain.css, which this page already loads —
   nothing is redrawn here. The rules below only place them in a .card-head (chain.css positions
   them in a .cn-mod-head) and restate the two "this module is live" cues under .card.on, since
   chain.css scopes those to .cn-mod.on. Print's amber arrives for free: .cn-switch's checked
   fill is var(--tint, var(--cn-grad-b)) and there is no --tint in this room, so it falls through
   to Chain's amber, which is exactly what --safe was re-pointed at at the top of this file. */
/* Ghost of exactly the switch's box for the four cards that have no honest off state, so their
   titles stay in the same column as the thirteen that do. Measured: with no slot the switchless
   titles sat 43px left of the rest. Neither element carries a margin — the head's own `gap` does
   all the spacing — so the two boxes are the same width to the pixel. */
.cn-switch-slot{ width:33px; height:18px; flex:none; display:block; }
.card-head .cn-mod-state{ flex:none; font-family:var(--cn-font); }
.card.on .card-head .name{ color:var(--cn-ink); }
.card.on .card-head .cn-mod-state{ color:var(--cn-t-72); }
/* The edge bar. On a card that has a switch it now means one thing only — this tool is affecting
   the print — because next to a label reading OFF it cannot also mean open-or-edited without
   contradicting it. Seen in practice: an Edge card carrying a leftover tear of 55 under square
   corners (which prints nothing) lit its bar while its own switch said OFF. Cards with no switch
   are untouched; there is no "live" for them, so edited/open is still the only thing their bar
   can say. */
.card.open:not(.on):has(.cn-switch) .card-head .tick,
.card.dirty:not(.on):has(.cn-switch) .card-head .tick{ background:var(--cn-line-off); opacity:.55; }
.card.on .card-head .tick{ background:var(--cn-amber); opacity:1; }

/* per-card reset — Chain's .cn-mod-reset: circular icon that rotates back on hover */
.mini-reset-card{
  width:22px; height:22px; padding:3px; margin-left:2px;
  border:0; border-radius:50%; background:none;
  align-items:center; justify-content:center;
  opacity:.55; text-transform:none; letter-spacing:0;
  transition:opacity var(--cn-t-state) var(--cn-ease),
             background-color var(--cn-t-state) var(--cn-ease),
             transform .25s var(--cn-ease);
}
.card.dirty .mini-reset-card{ display:flex; }
.mini-reset-card:hover{ opacity:1; background:var(--cn-surf-track); transform:rotate(-40deg); border-color:transparent; }
.mini-reset-card:hover:active{ transform:rotate(-40deg) scale(0.9); }
.mini-reset-card svg{ width:12px; height:12px; fill:none; stroke:var(--cn-t-55); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; display:block; }

/* ── in-card typography ───────────────────────────────────────────────── */
.card-note{
  font-family:var(--cn-font); font-size:var(--cn-fs-105); line-height:1.45;
  color:var(--cn-t-50); margin:2px 0 10px;
}
/* Chain's .cn-section-label: small-caps sub-header over a hairline */
.field-lbl{
  margin:20px 0 0; padding-top:12px;
  border-top:1px solid var(--cn-line-div);
  font-family:var(--cn-font); font-size:var(--cn-fs-9); font-weight:var(--cn-w-reg);
  letter-spacing:var(--cn-ls-20); text-transform:uppercase; color:var(--cn-t-55);
}
.field-lbl:first-child{ margin-top:11px; padding-top:0; border-top:0; }
/* a label immediately followed by its control needs the gap back */
.field-lbl + .chips, .field-lbl + .dirt-thumb-grid, .field-lbl + .txt,
.field-lbl + .select, .field-lbl + div, .field-lbl + input{ margin-top:8px; }

/* ══ THE SLIDER ROW IS DELIBERATELY NOT RESTYLED ══════════════════════════
   .row / .row-top / .row-top label / .row-num / .row-ctl and the .sig-scale tick ruler under
   them are the SIGNAL scale component (css/signal.css §"the tick scale" + js/signal/enhance.js).
   QC has made this component the site-wide standard and Studio is adopting it, so this file must
   leave its geometry, ink and behaviour alone — an override here would fork the very component
   that is about to be ported outward. Its colours already track the page through --sig-accent,
   which §1's token bridge points at Chain's amber; nothing else about it is touched.

   The one exception below is a specificity BUG FIX, not a restyle: in signal.css the `.maj` rule
   happens to come after the `.mark` rule at identical specificity, so any marker that lands on a
   major graduation (every 6th tick — so 1 value in 6) silently loses --sig-accent and vanishes
   into the ruler. `.mark.maj` outranks both and puts the marker back. This needs to travel WITH
   the component when it is ported; better still, fix the ordering in signal.css itself, which is
   owned by another engineer on this rollout. */
.sig-scale-ticks i.mark, .sig-scale-ticks i.mark.maj{ background:var(--sig-accent); }
.sig-scale-ticks::after{ background:var(--cn-line-off); }
.sig-scale:hover .sig-scale-ticks::after,
.sig-scale[data-live] .sig-scale-ticks::after{ background:var(--cn-line-2); }

/* ── chips — Chain's .cn-chip pill ───────────────────────────────────── */
.chips{ gap:5px; margin-top:8px; }
.chip{
  padding:7px 12px;
  border-radius:var(--cn-r-pill);
  background:transparent; border:1px solid var(--cn-line-chip); color:var(--cn-t-60);
  font-family:var(--cn-font); font-size:var(--cn-fs-10); font-weight:var(--cn-w-reg);
  letter-spacing:var(--cn-ls-06);
  transition:transform var(--cn-t-state) var(--cn-ease),
             background var(--cn-t-state) var(--cn-ease),
             border-color var(--cn-t-state) var(--cn-ease),
             color var(--cn-t-state) var(--cn-ease);
}
.chip:hover{ border-color:var(--cn-line-check); color:var(--cn-ink); background:transparent; }
.chip:active{ transform:scale(0.94); }
.chip.on{ background:var(--cn-ink); border-color:transparent; color:var(--cn-ink-on-white); }
.chip small{ font-size:8px; letter-spacing:var(--cn-ls-06); color:var(--cn-t-45); margin-top:2px; }
.chip.on small{ color:var(--cn-ink-on-white); opacity:.65; }
.mini-reset{ margin-top:9px; }

/* ── switches — Chain's .cn-switch ───────────────────────────────────── */
.toggle-row{ gap:12px; margin:11px 0 0; }
.toggle-row span{
  font-family:var(--cn-font); font-size:var(--cn-fs-115); line-height:1.35;
  color:var(--cn-t-90); flex:1; min-width:0;
}
.sw{
  width:33px; height:18px; padding:2px;
  border-radius:var(--cn-r-pill);
  background:var(--cn-surf-track); border:0;
}
.sw::after{
  top:2px; left:2px; width:14px; height:14px;
  background:var(--cn-t-50);
}
.sw.on{ background:var(--cn-amber); border-color:transparent; }
.sw.on::after{ left:2px; transform:translateX(15px); background:#FFF7EF; }

/* ── thumbnail grids — Chain's .cn-tiles-grid / .cn-dirt-tile ────────── */
.dirt-thumb-grid{ gap:6px; margin-top:8px; }
.dirt-thumb{
  border-radius:var(--cn-r-9);
  background:var(--cn-surf-off); border:1px solid var(--cn-line);
  transition:border-color var(--cn-t-state) var(--cn-ease), box-shadow var(--cn-t-state) var(--cn-ease);
}
.dirt-thumb img{ opacity:1; }
.dirt-thumb.active{ border-color:var(--cn-amber); box-shadow:0 0 0 1px var(--cn-amber); }
.dirt-thumb.none{
  font-family:var(--cn-font); font-size:var(--cn-fs-9);
  letter-spacing:var(--cn-ls-10); color:var(--cn-t-55); text-transform:uppercase;
}

/* ── layout cells ─────────────────────────────────────────────────────── */
.cell{
  border-radius:var(--cn-r-9);
  background:var(--cn-surf-off); border:1px dashed var(--cn-line-chip);
}
.cell.filled{ border-style:solid; border-color:var(--cn-line); }
.cell .plus{ color:var(--cn-t-40); }
.cell .num{ font-family:var(--cn-font); font-size:var(--cn-fs-9); letter-spacing:var(--cn-ls-06);
  color:var(--cn-t-75); background:rgba(7,13,14,.7); border-radius:var(--cn-r-5); }
.cell .rm{ border-radius:var(--cn-r-5); background:rgba(7,13,14,.75); }

/* ── text inputs / selects — Chain's .cn-text-input ──────────────────── */
.txt, .select{
  height:34px; padding:0 11px;
  background:var(--cn-surf); border:1px solid var(--cn-line-2); border-radius:var(--cn-r-10);
  color:var(--cn-ink); font-family:var(--cn-font); font-size:var(--cn-fs-12);
}
.txt::placeholder{ color:var(--cn-t-40); }
.txt:focus, .select:focus{ outline:none; border-color:var(--cn-amber); }
.select option{ background:var(--cn-well); color:var(--cn-ink); }
input[type=color]{
  border:1px solid var(--cn-line-btn) !important; border-radius:var(--cn-r-8) !important;
}

/* ── saved recipes ────────────────────────────────────────────────────── */
.named-recipe-row{ gap:6px; margin-top:10px; }
.named-recipe-item button.load{
  padding:8px 10px; border-radius:var(--cn-r-9);
  background:var(--cn-surf-btn); border:1px solid transparent;
  color:var(--cn-ink); font-family:var(--cn-font); font-size:var(--cn-fs-12);
}
.named-recipe-item button.load:hover{ filter:brightness(1.1); border-color:var(--cn-line); }
.named-recipe-item button.del{
  width:22px; height:22px; border-radius:50%;
  color:var(--cn-t-50); display:flex; align-items:center; justify-content:center;
}
.named-recipe-item button.del:hover{ background:var(--cn-line-btn); color:var(--cn-ink); }

/* ── colour-space / warning tags ──────────────────────────────────────── */
.cs-tag{
  margin-top:10px; padding:4px 9px;
  border-radius:var(--cn-r-pill);
  background:var(--cn-hov-08); border:1px solid var(--cn-line-2);
  font-family:var(--cn-font); font-size:var(--cn-fs-9);
  letter-spacing:var(--cn-ls-14); text-transform:uppercase; color:var(--cn-t-60);
}
.cs-tag b{ color:var(--cn-ink); font-weight:var(--cn-w-med); letter-spacing:var(--cn-ls-10); }
.cs-tag.warn{ color:var(--cn-amber-hi); border-color:var(--cn-amber); }

/* ── seed row ─────────────────────────────────────────────────────────── */
.seedrow{ gap:10px; margin-top:12px; }
.seedlab{
  font-family:var(--cn-font); font-size:var(--cn-fs-9);
  letter-spacing:var(--cn-ls-20); text-transform:uppercase; color:var(--cn-t-55);
}
.seedval{
  font-family:var(--cn-font); font-size:var(--cn-fs-16); font-weight:var(--cn-w-thin);
  letter-spacing:var(--cn-ls-n2); color:var(--cn-ink); font-variant-numeric:tabular-nums;
}

/* ── export actions ───────────────────────────────────────────────────── */
.exp-row{ gap:8px; margin-top:10px; }
.exp-row .dz-btn{ height:38px; border-radius:var(--cn-r-12); }

/* ── busy overlay ─────────────────────────────────────────────────────── */
.busy{
  background:color-mix(in srgb, var(--cn-well) 80%, transparent);
  border-radius:var(--cn-r-18);
  font-family:var(--cn-font); font-size:var(--cn-fs-9);
  letter-spacing:var(--cn-ls-20); color:var(--cn-t-70);
}
.spin{ border-color:var(--cn-line-btn); border-top-color:var(--cn-amber); }

/* ── panel foot ───────────────────────────────────────────────────────── */
.foot{
  margin-top:10px; padding:14px 16px;
  border-top:1px solid var(--cn-line-head);
  font-family:var(--cn-font); font-size:var(--cn-fs-85);
  letter-spacing:var(--cn-ls-14); text-transform:uppercase; color:var(--cn-t-40);
}
.print-status{ font-size:var(--cn-fs-105); letter-spacing:0; color:var(--cn-t-55); }
.print-status.ok{ color:var(--cn-amber); }
.print-status.error{ color:#E5544C; }

/* ══════════════════════════════════════════════════════════════════════
   4 · RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1120px){
  .cn-bar{ gap:10px; padding:0 12px; }
  .cn-bar .cn-status{ display:none; }
}
@media (max-width:960px){
  /* the bar wraps into two rows rather than overflowing the viewport sideways */
  .cn-bar{ height:auto; min-height:var(--cn-bar-h); flex-wrap:wrap; padding:8px 12px; row-gap:6px; }
  .work{ grid-template-columns:1fr; height:auto; }
  .stage{ height:70vh; }
  .panel{ border-left:0; border-top:1px solid var(--cn-line-head); overflow-y:visible; }
}
@media (max-width:640px){
  .cn-bar .cn-nav{ order:3; width:100%; justify-content:space-between; gap:8px; }
  .cn-bar .sp{ display:none; }
  .cn-cmdbtn{ width:46px; }
  .stage{ height:58vh; }
  .stage-tools{ overflow-x:auto; scrollbar-width:none; }
  .stage-tools::-webkit-scrollbar{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   5 · MOTION
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
  .mini-reset-card:hover{ transform:none; }
}