/* SUP Dieline Studio — UI styles */

:root {
  --bg: #11151c;
  --panel: #1a212c;
  --panel-2: #202938;
  --line: #2c3648;
  --text: #dde4ee;
  --muted: #8b97a8;
  --label: #aab4c4;
  --accent: #4dabf7;
  --accent-2: #9775fa;
  --good: #51cf66;
  --warn: #fcc419;
  --err: #ff6b6b;
  --canvas-bg: #f4f6f9;

  /* ---- design tokens (feat/ui-refresh) — one rhythm across both rails ---- */
  /* surfaces + state: a fuller hierarchy than panel/panel-2 alone */
  --panel-3: #27313f;                       /* raised row / hover fill */
  --line-2: #384456;                        /* stronger hairline (dividers) */
  --row-line: rgba(150, 166, 190, 0.10);    /* between-row separators */
  --tint-accent: rgba(77, 171, 247, 0.12);  /* accent wash (selected/active) */
  --focus-ring: 0 0 0 3px rgba(77, 171, 247, 0.30);
  /* spacing scale (4px base) */
  --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px;
  --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;
  /* radii */
  --r-xs: 5px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px;
  /* type scale */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
  --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
  /* eyebrow (section header) */
  --eyebrow-ls: 0.5px; --eyebrow-fs: 11.5px;
  /* elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-2: 0 6px 20px rgba(6, 9, 14, 0.36);
  --dur: 0.15s; --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  font-size: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
header h1 { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; }
header h1 span { color: var(--accent); }
header .sub { color: var(--muted); font-size: 12px; }
header .spacer { flex: 1; }

/* ---------- workflow spine (job-progress stepper under the header) ---------- */
#workflowSpine { display: flex; align-items: flex-start; padding: 9px 18px 7px; background: var(--panel); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
#workflowSpine[hidden] { display: none; }
.wf-step { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; cursor: pointer; background: none; border: 0; font: inherit; padding: 0; }
.wf-step::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.wf-step:last-child::after { display: none; }
.wf-step.s-done::after { background: var(--good); }
.wf-node { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--panel-2); border: 1.5px solid var(--line); color: var(--muted); }
.s-done .wf-node { background: #16321f; border-color: var(--good); color: var(--good); }
.s-attention .wf-node { background: #3a3413; border-color: var(--warn); color: var(--warn); }
.s-locked .wf-node { border-style: dashed; }
.wf-step.s-current .wf-node { box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.20); }
.wf-name { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
.s-locked .wf-name, .wf-step.s-available .wf-name { color: var(--muted); }
/* wrap to two lines instead of truncating — at narrow widths "set facestock +
   laminate" / long artwork names must never become "set facestoc…" (review #7) */
.wf-sub { font-size: 10px; margin-top: 1px; color: var(--muted); max-width: 100%; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.s-done .wf-sub { color: var(--good); }
.s-attention .wf-sub { color: var(--warn); }
.wf-step:hover .wf-name { color: var(--accent); }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.btn:hover { background: #283349; border-color: #3a4a66; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b1320; }
.btn.primary:hover { background: #66b8f8; }
.btn.small { padding: 4px 9px; font-size: 11.5px; }

/* ---------- main layout ---------- */
main { display: flex; flex: 1 1 auto; min-height: 0; }

/* ---------- sidebar ---------- */
#sidebar {
  width: 318px;
  flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width 0.15s;
}
#sidebar.collapsed { width: 34px; }
#sidebar.collapsed #sidebarBody,
#sidebar.collapsed #sidebarHead > span { display: none; }
#sidebarHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-weight: 800; font-size: 14px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--accent); background: var(--panel-2);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
#sidebarBody { overflow-y: auto; padding: 10px 12px 40px; flex: 1 1 auto; min-height: 0; }
#sidebarBody::-webkit-scrollbar { width: 9px; }
#sidebarBody::-webkit-scrollbar-thumb { background: #303c52; border-radius: 5px; }
/* proof mode swaps the spec form for the file/proofing panel */
#proofFileRail { display: none; }
#sidebarBody.proof-mode > #sbSearch,
#sidebarBody.proof-mode > .section { display: none !important; }
#sidebarBody.proof-mode > #proofFileRail { display: block; }

.section { margin-bottom: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel-2); box-shadow: var(--shadow-1); transition: border-color var(--dur) var(--ease); }
.section:hover { border-color: var(--line-2); }
.section > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  font-size: var(--eyebrow-fs);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  user-select: none;
}
.section[open] > summary { border-bottom: 1px solid var(--row-line); }
.section > summary::-webkit-details-marker { display: none; }
.section > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: var(--fs-xs); transition: transform var(--dur) var(--ease); }
.section:not([open]) > summary::after { transform: rotate(-90deg); }
.section .body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row label { flex: 1; color: var(--label); font-size: var(--fs-sm); }
.row .unit { color: var(--muted); font-size: var(--fs-xs); width: 26px; }
/* field-attached guidance: a quiet ⓘ on a row; the note appears on focus or click,
   instead of a standing 'Why' footnote row */
.row.has-hint { flex-wrap: wrap; }
.fhint { background: none; border: 0; color: var(--muted); cursor: help; font-size: 11px; line-height: 1; padding: 0 2px; margin-left: 2px; flex: 0 0 auto; }
.fhint:hover { color: var(--accent); }
.fhint-pop { display: none; flex-basis: 100%; width: 100%; margin-top: 5px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.fhint-pop > div + div { margin-top: 5px; }
.row.has-hint:focus-within > .fhint-pop, .row.hint-open > .fhint-pop { display: block; }
/* preflight: advisory (warning/info) notes fold behind a count; blocking errors stay shown */
details.pf-advisory { margin-top: 5px; }
details.pf-advisory > summary { cursor: pointer; color: var(--muted); font-size: 11px; padding: 2px 0; list-style: none; }
details.pf-advisory > summary::-webkit-details-marker { display: none; }
details.pf-advisory > summary::before { content: "▸ "; }
details.pf-advisory[open] > summary::before { content: "▾ "; }

input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="number"], input[type="text"], select {
  background: #131922;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-base);
  width: 96px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input[type="text"] { width: 100%; }
select { width: 150px; }
select.wide, .row select.full { width: 100%; flex: 1; }
input:hover, select:hover { border-color: var(--line-2); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.row.check { justify-content: flex-start; }
.row.check label { flex: none; color: var(--text); }

.seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button {
  flex: 1; background: transparent; color: var(--muted);
  border: none; padding: 6px 4px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.seg button.active { background: var(--accent); color: #0b1320; }

.hint { color: var(--muted); font-size: 11px; line-height: 1.45; }

/* ---------- canvas area ---------- */
#stage { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

#tabs {
  display: flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-6) 0;
  background: var(--bg);
  /* pinned: never let the flex column shrink the tab strip — overflow-y:hidden
     was clipping the buttons' tops when the filmstrip + a growing view (e.g.
     #packoutView) competed for height. The strip scrolls horizontally only. */
  flex: 0 0 auto;
  /* many tabs (8+) overflow the centre column at medium widths — scroll the
     strip instead of clipping labels ("Packo…"). Thin, only-on-overflow. */
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
#tabs::-webkit-scrollbar { height: 6px; }
#tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#tabs::-webkit-scrollbar-track { background: transparent; }
/* overflow affordance: fade the scrolling edge(s) so clipped tabs read as
   "more this way" instead of a hard cut. .ovf-* toggled by scroll position
   (app.js syncTabFade); the mask sits on the visible box, so it stays at the
   edges as the strip scrolls. */
#tabs.ovf-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
#tabs.ovf-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px);
  mask-image: linear-gradient(to right, transparent, #000 34px); }
#tabs.ovf-start.ovf-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
#tabs button {
  flex: 0 0 auto; white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--muted); padding: var(--sp-2) var(--sp-6); font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--r-md) var(--r-md) 0 0; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
#tabs button:hover:not(.active) { background: var(--panel-2); color: var(--text); }
#tabs button.active { background: var(--canvas-bg); color: #25313f; }
/* the 3D tab opens the DARK viewport — its active tab connects to that, not the
   light 2D views, so the tab→panel seam reads continuous */
#tabs button.active[data-tab="3d"] { background: #1b2331; color: var(--text); }
#tabSpacer { flex: 1 1 auto; }
#tabs button.tab-toggle {
  align-self: center; margin-bottom: 4px; padding: 5px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted); font-size: 12px;
}
#tabs button.tab-toggle:hover { border-color: var(--accent); color: var(--text); }
#tabs button.tab-toggle.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* imported artwork sits behind the linework; keep it crisp, not smoothed */
#svgHost .art-layer image { image-rendering: auto; }

#canvasWrap {
  flex: 1 1 auto; position: relative; background: var(--canvas-bg);
  margin: 0 14px 0; border-radius: 0 10px 10px 10px; overflow: hidden;
  cursor: grab;
}
#canvasWrap.panning { cursor: grabbing; }
#svgHost { width: 100%; height: 100%; display: block; }

#zoomCtrls {
  position: absolute; right: 12px; top: 12px; display: flex; gap: 6px;
}
#zoomCtrls .btn { background: #ffffffd9; color: #25313f; border-color: #cdd6e2; }
#zoomCtrls .btn:hover { background: #fff; }

#legend {
  position: absolute; left: 12px; bottom: 12px;
  background: #ffffffe8; border: 1px solid #cdd6e2; border-radius: 9px;
  padding: 9px 12px; font-size: 11.5px; color: #2b3645;
  display: grid; grid-template-columns: auto auto; gap: 3px 18px;
}
#legend .key { display: flex; align-items: center; gap: 7px; }
#legend .swatch { width: 22px; height: 0; border-bottom-width: 2.5px; border-bottom-style: solid; }
#legend .swatch.dashed { border-bottom-style: dashed; }
#legend .swatch.fill { height: 10px; border: 1px solid #9aa7b5; border-radius: 2px; }

#readout {
  position: absolute; right: 12px; bottom: 12px;
  background: #ffffffe8; border: 1px solid #cdd6e2; border-radius: 8px;
  padding: 5px 10px; font-size: 11.5px; color: #2b3645; font-variant-numeric: tabular-nums;
}

/* ---------- proof-view panel review ---------- */
#proofReview {
  position: absolute; left: 12px; top: 12px; right: auto;
  display: flex; flex-direction: column; gap: 3px;
  background: #fffffff2; border: 1px solid #cdd6e2; border-left: 4px solid var(--accent);
  border-radius: 9px; padding: 8px 12px; max-width: 60%;
  box-shadow: 0 4px 14px rgba(20,30,48,.12); color: #25313f;
}
#proofReview.all-done { border-left-color: #16a34a; }
#proofReview b { font-size: 12.5px; }
#proofReview.all-done b { color: #15803d; }
#proofReview .pr-sub { font-size: 11px; color: #5b6677; }
#proofReview .pr-chips { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
#proofReview .pr-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: #eef1f6; color: #5b6677; border: 1px solid #d7deea;
}
#proofReview .pr-chip.done { background: #dcfce7; color: #15803d; border-color: #86efac; }
#svgHost .proof-hit { cursor: pointer; transition: fill .12s; }
#svgHost .proof-hit:hover { fill: rgba(58,128,255,0.10); }
#svgHost .proof-hit.done:hover { fill: rgba(34,197,94,0.18); }

/* ---------- warnings ---------- */
#warnings {
  flex: 0 0 auto; margin: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px;
}
.whead {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--panel-2); color: var(--good); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 11px; font: 600 12px/1.2 inherit; cursor: pointer;
}
.whead.warn { color: var(--warn); }
.whead.error { color: var(--err); }
.whead .wcaret { font-size: 10px; opacity: 0.75; transition: transform 0.15s ease; }
#warnings.collapsed .whead .wcaret { transform: rotate(-90deg); }
#warnings.collapsed .wlist { display: none; }
.wlist { display: flex; flex-direction: column; gap: 5px; max-height: 130px; overflow-y: auto; }
.wmsg {
  border-radius: 7px; padding: 7px 11px; font-size: 12.5px; display: flex; gap: 8px; align-items: baseline;
}
.wmsg.warn { background: #3a3413; color: var(--warn); border: 1px solid #5c521d; }
.wmsg.error { background: #3d1d1f; color: var(--err); border: 1px solid #6b3034; }
.wmsg .tag { font-weight: 800; font-size: 10.5px; letter-spacing: 0.6px; }
.wmsg-ok { color: var(--good); font-size: 12px; padding: 4px 2px; }

/* ---------- spec sheet ---------- */
#specSheet {
  flex: 1 1 auto; overflow-y: auto; background: var(--canvas-bg);
  margin: 0 14px; border-radius: 0 10px 10px 10px; padding: 26px 34px; color: #1f2937;
}
#specSheet h2 { font-size: 17px; margin-bottom: 4px; }
#specSheet h3 { font-size: 13px; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; color: #4b5b70; }
#specSheet table { border-collapse: collapse; width: 100%; max-width: 640px; font-size: 13px; }
#specSheet td { padding: 6px 12px; border-bottom: 1px solid #dbe2ea; }
#specSheet td:first-child { color: #51616f; width: 46%; }
#specSheet td:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Calyx lock buttons ---------- */
.lockbtn { padding: 4px 7px; font-size: 12px; line-height: 1; flex: 0 0 auto; }
input:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- clickable warnings + field flash ---------- */
.wmsg.clickable { cursor: pointer; }
.wmsg.clickable:hover { filter: brightness(1.25); }
.row.flash { animation: fieldFlash 1.6s ease-out; border-radius: 6px; }
@keyframes fieldFlash {
  0% { background: rgba(77, 171, 247, 0.45); box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.45); }
  100% { background: transparent; box-shadow: none; }
}

/* ---------- legend scales with the viewport ---------- */
#legend { transform-origin: left bottom; max-width: 44vw; }
@media (max-width: 1400px) { #legend { transform: scale(0.88); } }
@media (max-width: 1150px) { #legend { transform: scale(0.76); grid-template-columns: auto; gap: 2px 0; } }
@media (max-width: 900px)  { #legend { transform: scale(0.66); } }
@media (max-height: 700px) { #legend { transform: scale(0.72); grid-template-columns: auto; } }

/* ---------- material intelligence panel (right side) ---------- */
#matpanel {
  width: 304px; flex: 0 0 auto; background: var(--panel);
  border-left: 1px solid var(--line); display: flex; flex-direction: column;
  min-height: 0; transition: width 0.15s;
}
#matpanel.collapsed { width: 34px; }
#matpanel.collapsed #matpanelBody, #matpanel.collapsed #matpanelHead span { display: none; }
/* canvas focus (design review #3) — the two full-height rails box the 3D hero
   into the middle. Focus mode slides both rails away so the mockup fills the
   stage; the toggle lives in the tab bar and stays reachable to exit. The rails
   already animate `width`, so this slides. Overrides even the ≤920 stacked
   width:auto (hence !important). */
body.canvas-focus #sidebar,
body.canvas-focus #matpanel { width: 0 !important; min-width: 0; border: none; overflow: hidden; }
#focusToggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#matpanelHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-weight: 800; font-size: 14px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--accent-2); background: var(--panel-2);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
#matpanelBody { overflow-y: auto; padding: 10px 12px 40px; flex: 1 1 auto; }
#matpanelBody::-webkit-scrollbar { width: 9px; }
#matpanelBody::-webkit-scrollbar-thumb { background: #303c52; border-radius: 5px; }

.matcard {
  border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--sp-3);
  background: var(--panel-2); overflow: hidden; box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease);
}
.matcard:hover { border-color: var(--line-2); }
.matcard > .mhead {
  padding: var(--sp-3) var(--sp-5); font-size: var(--eyebrow-fs); font-weight: 700;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--label);
  display: flex; align-items: center; gap: var(--sp-3);
  cursor: pointer; user-select: none; transition: color var(--dur) var(--ease);
}
.matcard > .mhead:hover { color: var(--text); }
.matcard:not(.collapsed) > .mhead { border-bottom: 1px solid var(--row-line); }
.matcard > .mhead::after {
  content: "▾"; color: var(--muted); font-size: var(--fs-xs); transition: transform var(--dur) var(--ease);
  margin-left: auto; flex: 0 0 auto;
}
.matcard.collapsed > .mhead::after { transform: rotate(-90deg); }
.matcard.collapsed > .mbody { display: none; }
.matcard > .mbody { padding: var(--sp-4) var(--sp-5) var(--sp-5); font-size: var(--fs-sm); }
/* attention: a card needing a decision/fix keeps a colored edge even when folded,
   so nothing actionable is buried in 'simple' density */
.matcard.mat-attn { border-left: 3px solid var(--warn); }
.matcard.mat-attn-bad { border-left-color: var(--err); }
.matcard.mat-attn > .mhead { color: var(--warn); }
.matcard.mat-attn-bad > .mhead { color: var(--err); }
/* ---- panel hierarchy (design review #4) ------------------------------------
   The panel read flat — every card the same weight, and the QUOTE (the outcome
   the customer wants) was collapsed at the bottom, indistinguishable from
   reference cards. Give it three tiers so the eye lands right: the required
   ACTION (amber, a filled callout) → the QUOTE payoff (accent-framed
   destination) → quiet reference cards. Action + payoff sit forward
   (shadow-2); reference stays flat (shadow-1). */
.matcard.mat-attn, .matcard.quote-card { box-shadow: var(--shadow-2); }
/* required action reads as a filled task, not just a coloured edge */
.matcard.mat-attn > .mbody { background: rgba(252, 196, 25, 0.05); }
.matcard.mat-attn-bad > .mbody { background: rgba(255, 107, 107, 0.05); }
/* the quote is the panel's destination — accent-framed, never an afterthought */
.matcard.quote-card { border-left: 3px solid var(--accent); }
/* ---- context-aware rail (VIEWCTX phase 1) ----------------------------------
   The rail reorders per view: a one-line chip names the context (so the
   behavior reads as designed, not random), and ambient cards fold into a
   dashed "More intelligence" group — demoted, never hidden. */
.mi-ctx { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 0 2px 6px; }
details.mi-more { margin-top: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--r-lg); }
details.mi-more > summary { list-style: none; cursor: pointer; user-select: none;
  padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: 6px;
  font-size: var(--eyebrow-fs); font-weight: 700; letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase; color: var(--muted); }
details.mi-more > summary::-webkit-details-marker { display: none; }
details.mi-more > summary::after { content: "▾"; margin-left: auto; font-size: 10px;
  transition: transform var(--dur) var(--ease); }
details.mi-more:not([open]) > summary::after { transform: rotate(-90deg); }
details.mi-more > summary:hover { color: var(--text); }
details.mi-more > .matcard { margin: 0 var(--sp-3) var(--sp-3); }
/* the left rail's "More settings" fold — same demoted-not-hidden grammar */
details.sb-more { margin-top: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--r-lg); }
details.sb-more > summary { list-style: none; cursor: pointer; user-select: none;
  padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: 6px;
  font-size: var(--eyebrow-fs); font-weight: 700; letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase; color: var(--muted); }
details.sb-more > summary::-webkit-details-marker { display: none; }
details.sb-more > summary::after { content: "▾"; margin-left: auto; font-size: 10px;
  transition: transform var(--dur) var(--ease); }
details.sb-more:not([open]) > summary::after { transform: rotate(-90deg); }
details.sb-more > summary:hover { color: var(--text); }
details.sb-more > .section { margin: 0 var(--sp-3) var(--sp-3); }
details.sb-more.search-hide { display: none; }
.matcard.quote-card > .mhead { color: var(--accent); }
.matcard.quote-card > .mbody { background: rgba(77, 171, 247, 0.045); }
/* Simple / Detailed density control in the panel header */
.density-seg { display: inline-flex; margin-left: auto; margin-right: 6px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.density-seg button { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; padding: 2px 5px; cursor: pointer; white-space: nowrap; }
.density-seg button.on { background: var(--accent); color: #0b1320; }
#matpanel.collapsed #matDensity { display: none; }

/* ==========================================================================
   Responsive app shell (design review #1) — the desktop 3-column layout
   (#sidebar | #stage | #matpanel) had NO breakpoints, so narrow viewports
   crushed the centre and (on phones) dropped the 3D viewport into a blank
   void. Stack it product-first instead. Pure layout — no markup, no JS.
   ========================================================================== */
/* tablet-landscape: keep three columns but slim the rails so the centre
   viewport (the product) keeps a usable width */
@media (max-width: 1180px) {
  #sidebar  { width: 264px; }
  #matpanel { width: 262px; }
}
/* tablet-portrait & phone: stack. The stage (tabs + 3D/product) leads;
   Specification and Material Intelligence flow below it. The page scrolls as
   one column — no nested rail scrollbars — and the viewport keeps real height. */
@media (max-width: 920px) {
  main { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  #stage    { order: 1; min-height: 76vh; }
  #sidebar  { order: 2; }
  #matpanel { order: 3; }
  #sidebar, #matpanel {
    width: auto; flex: 0 0 auto; max-height: none;
    border-left: none; border-right: none; border-bottom: 1px solid var(--line);
    transition: none;                    /* the desktop width-tween is meaningless stacked */
  }
  #sidebarBody, #matpanelBody { overflow: visible; }
  /* collapse chevrons become an accordion fold here (header stays, body hides)
     rather than the desktop 34px stub */
  #sidebar.collapsed, #matpanel.collapsed { width: auto; }
  /* once #view3d is no longer a stretched flex child it needs an explicit
     height, or it collapses to 0 — the mobile blank-void bug */
  #view3d     { min-height: 64vh; }
  #canvasWrap { min-height: 60vh; }
}
/* phone: tighten the chrome */
@media (max-width: 560px) {
  header  { padding: 0 10px; gap: 4px; }
  #stage  { min-height: 70vh; }
  #view3d, #canvasWrap { min-height: 56vh; }
}

.matcard .big { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.matcard .sub { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.matrow { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; }
.matrow + .matrow { border-top: 1px solid var(--row-line); }
.matrow .k { color: var(--muted); }
/* label material that still needs picking: amber-highlighted select + "confirm" chip */
.msub { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 2px 0 3px; }
.matrow.mat-unset select { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(252,196,25,.25); }
.mat-need { display: inline-block; background: #3a3413; color: var(--warn); font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
@keyframes matFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,196,25,0); } 30% { box-shadow: 0 0 0 3px rgba(252,196,25,.55); } }
.matcard.mat-flash { animation: matFlash 1.6s ease-in-out; border-color: var(--warn); }
.matrow .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; color: var(--text); }
/* embellishment picker rows: whole row is the click target; price makes a tick
   visibly do something; selected rows wash with the accent tint */
.emb-row { cursor: pointer; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); transition: background var(--dur) var(--ease); }
.emb-row + .emb-row { border-top: 1px solid var(--row-line); }
.emb-row:hover { background: var(--panel-3); }
.emb-row.on { background: var(--tint-accent); }
.emb-name { display: flex; flex-direction: column; gap: 1px; color: var(--text); }
.emb-price { font-size: var(--fs-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.emb-row.on .emb-price { color: var(--accent); }
.emb-ctl { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.emb-na { margin-top: var(--sp-3); font-style: italic; opacity: .8; }
.emb-dfm { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--row-line); }
.badge { display: inline-block; border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em; }
.badge.good { background: #16321f; color: var(--good); }
.badge.warn { background: #3a3413; color: var(--warn); }
.badge.bad  { background: #3d1d1f; color: var(--err); }
.badge.info { background: #1d2c44; color: var(--accent); }
.matbar { height: 5px; border-radius: 3px; background: #131922; overflow: hidden; margin: 4px 0 2px; }
.matbar > div { height: 100%; border-radius: 3px; }

/* ---------- 3D view ---------- */
/* Dark studio viewport — the mockup is the hero, so the canvas reads as one
   surface with the dark UI (not a white hole). The radial frame mirrors the
   WebGL backdrop for the load state + margins. The Dieline/Die 2D views keep
   the light --canvas-bg (correct for technical line drawings). */
#view3d { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  margin: 0 14px; border-radius: 0 10px 10px 10px; overflow: hidden;
  background: radial-gradient(120% 92% at 50% 40%, #1b2331 0%, #0c1016 72%); }
#threeHost { flex: 1 1 auto; min-height: 0; }
#threeHost canvas { display: block; }
#view3dBar { flex: 0 0 auto; display: flex; align-items: center; gap: 0;
  padding: var(--sp-3) var(--sp-6); background: #12171f; border-top: 1px solid var(--line); }
/* logical control groups — Model | Surface | Finish · · · Export — with a
   hairline between clusters so 20-odd controls read as four decisions */
.v3dgrp { display: flex; align-items: center; gap: var(--sp-3); }
.v3dgrp + .v3dgrp, #view3dBar .spacer + .v3dgrp { margin-left: var(--sp-5); padding-left: var(--sp-5); border-left: 1px solid var(--line); }
#view3dBar label { font-size: 12px; color: var(--label); font-weight: 600; }
#view3dBar input[type=range] { width: 220px; accent-color: var(--accent); }
#view3dBar select { width: 170px; }   /* inherits the app dark control style */
#view3dBar select.v3dsm { width: auto; min-width: 96px; }
#view3dBar button { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: 12px; cursor: pointer;
  transition: border-color var(--dur) var(--ease); }
#view3dBar button:hover { border-color: var(--accent); }
/* peel-&-reveal / booklet review controls — accented so they read as the
   primary interaction for these labels; filled when active */
#view3dBar button.v3dpr { border-color: var(--accent); color: #7fe9db; font-weight: 700; background: rgba(94, 234, 212, .12); }
#view3dBar button.v3dpr:hover { background: rgba(94, 234, 212, .22); }
#view3dBar button.v3dpr.on { background: var(--accent); color: #0b1320; box-shadow: inset 0 0 0 1px var(--accent); }
#view3dBar .v3dchk { display: flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--label); font-weight: 600; cursor: pointer; user-select: none; }
#view3dBar .spacer { flex: 1; }
#view3dNote { display: none; }   /* scrolling status ticker removed — the info lives in the spec sheet + preflight */

/* production-file import panel */
#artModal { position: fixed; inset: 0; background: rgba(10,14,20,0.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; }
#artModalCard { background: #fff; color: #1d2733; border-radius: 10px; padding: 18px 20px;
  width: min(560px, 92vw); max-height: 84vh; overflow: auto; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
#artModalCard h3 { margin: 0 0 8px; font-size: 15px; }
#artModalInfo { font-size: 12px; color: #445162; margin-bottom: 10px; }
#artModalLayers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#artModalLayers .artrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
#artModalLayers .artrow .lname { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#artModalLayers select { width: 130px; background: #fff; color: #25313f; border: 1px solid #cdd6e2; border-radius: 6px; padding: 3px 6px; }
/* confirm-gate: detected-finish badges + attention highlight (modal is light) */
#artModalLayers .finbadge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; letter-spacing: .2px; }
#artModalLayers .finbadge.auto { background: #e3f6ea; color: #176b3a; border: 1px solid #b6e2c4; }
#artModalLayers .finbadge.confirm { background: #fdf2dc; color: #8a5a08; border: 1px solid #f0d399; }
#artModalLayers .finbadge.review { background: #fdeadb; color: #9a4a16; border: 1px solid #f1c39a; }
#artModalLayers .artrow.needs-confirm { background: #fffaf0; border-left: 3px solid #e8a33d; padding: 4px 6px 4px 8px; margin: 0 -6px; }
#artModalLayers .artnote { font-size: 11.5px; font-weight: 700; color: #9a4a16; background: #fdeadb; border: 1px solid #f1c39a; border-radius: 7px; padding: 6px 10px; }
#artModalLayers .seprow { align-items: flex-start; }
#artModalLayers .seprow .lname { flex: 0 0 auto; }
#artModalLayers .sepchips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
#artModalLayers .sepchip { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 9px; background: #eef1f5; color: #445162; border: 1px solid #dde3ec; white-space: nowrap; }
#artModalLayers .sepchip.finish { background: #e7eefb; color: #26477e; border-color: #c6d6f1; }
#artModalLayers .sepchip.collision { background: #fdeadb; color: #9a4a16; border-color: #f1c39a; }
#artModalMeasure { font-size: 12px; color: #445162; min-height: 16px; margin-bottom: 10px; }
#artModalMeasure .dev-bad { color: #b3261e; font-weight: 700; }
#artModalMeasure .dev-ok { color: #156c35; font-weight: 700; }
.art-family { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px solid #e3e9f1; }
.art-family > b { font-size: 12.5px; color: #1d2733; }
.art-family select { background: #fff; color: #1d2733; border: 1px solid #cdd6e2; border-radius: 6px; padding: 4px 8px; font-weight: 700; font-size: 12.5px; }
.art-family-conf { font-size: 11px; color: #6b7a8d; }
.art-family-why { flex-basis: 100%; font-size: 11px; color: #6b7a8d; margin-top: 1px; }
#artModalBtns { display: flex; justify-content: flex-end; gap: 8px; }
#artModalBtns .primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* embellishment zones panel */
#embPanel { position: fixed; right: 14px; bottom: 64px; z-index: 55; width: 354px;
  background: #fff; color: #1d2733; border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.4); font-size: 12.5px; max-height: 72vh; overflow: auto; }
#embPanel h4 { margin: 0 0 4px; font-size: 13px; }
#embPanel h5 { margin: 10px 0 4px; font-size: 11.5px; color: #4a5a6d;
  text-transform: uppercase; letter-spacing: .4px; }
#embPanel .embsub { color: #5d6d80; font-size: 11.5px; line-height: 1.45; margin-bottom: 6px; }
#embPanel .embimport { display: flex; gap: 7px; align-items: center; padding: 4px 2px; }
#embPanel .embimport.off > span:not(.embnote) { color: #9aa7b5; text-decoration: line-through; }
#embPanel .embnote { color: #8a97a6; font-size: 11px; margin-left: auto; }
#embPanel .embcard { border: 1px solid #dfe6ee; border-radius: 8px; padding: 8px 9px;
  margin-top: 8px; background: #f9fbfd; }
#embPanel .embcard.off { opacity: .55; background: #f2f4f6; }
#embPanel .embhead { display: flex; gap: 6px; align-items: center; }
#embPanel .embhead .grow { flex: 1; min-width: 0; }
#embPanel .embblurb { color: #5d6d80; font-size: 11px; line-height: 1.4; margin: 5px 0 2px; }
#embPanel .embline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
#embPanel .embline .k { color: #4a5a6d; font-size: 11px; font-weight: 600; min-width: 42px; }
#embPanel .embline.params .k { min-width: 0; margin-left: 2px; }
#embPanel select, #embPanel input[type=range] { background: #fff; color: #25313f;
  border: 1px solid #cdd6e2; border-radius: 6px; padding: 2px 4px; font-size: 12px; }
#embPanel input[type=range] { flex: 1; padding: 0; border: none; }
#embPanel .pickbtn { background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 3px 8px; cursor: pointer; font-size: 12px; }
#embPanel .ord { background: none; border: 1px solid #cdd6e2; color: #4a5a6d; border-radius: 6px;
  cursor: pointer; font-size: 11px; padding: 1px 5px; }
#embPanel .rm { background: none; border: none; color: #b3261e; cursor: pointer; font-weight: 700; }
#embPanel .hint { color: #667687; font-size: 11.5px; margin-top: 8px; line-height: 1.45; }
#embPanel .addbtn { margin-top: 10px; }

/* shots menu */
#shotsMenu { position: fixed; right: 14px; bottom: 64px; z-index: 56; width: 250px;
  background: #fff; color: #1d2733; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.4); font-size: 12.5px; }
#shotsMenu button { display: block; width: 100%; margin: 4px 0; text-align: left; }
#shotsMenu .busy { color: #667687; font-size: 11.5px; min-height: 14px; }

/* ============================================================
 * Tier-1 UI refresh: button system, export menu, sidebar
 * search, inline-unit groups, on-demand hints
 * ============================================================ */

/* button system: primary (accent) / default / ghost (quiet) */
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: #232d3e; color: var(--text); border-color: transparent; }

/* export split-menu */
.menu { position: relative; display: inline-block; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; min-width: 210px; box-shadow: 0 16px 44px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 3px;
}
.menu-pop[hidden] { display: none; }
.btn.menu-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border-color: transparent; color: var(--text); font-size: 12.5px; padding: 8px 10px;
}
.btn.menu-item:hover { background: var(--accent); color: #0b1320; border-color: transparent; }
.menu-pop .menu-sep { height: 1px; background: var(--line); margin: 5px 2px; }
.menu-pop .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.menu-pop .menu-row select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px; }

/* sidebar search header (sticky; survives form rebuilds) */
#sbSearch { position: sticky; top: 0; z-index: 5; background: var(--panel);
  padding: 0 0 8px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
#fieldSearch {
  flex: 1; width: 100%; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 12.5px;
}
#fieldSearch::placeholder { color: var(--muted); }
#fieldSearch:focus { outline: none; border-color: var(--accent); }
#sbSearchClear {
  border: none; background: var(--panel-2); color: var(--muted); border-radius: 7px;
  width: 28px; height: 30px; cursor: pointer; font-size: 12px; flex: 0 0 auto;
}
#sbSearchClear:hover { color: var(--text); background: #2a3548; }
.section.search-hide, .row.search-hide, details.hint.search-hide { display: none !important; }
mark.sb-hit { background: var(--accent); color: #0b1320; border-radius: 2px; padding: 0 1px; }

/* inline-unit group: input + unit suffix read as one control (no floating column) */
.inputgroup {
  display: flex; align-items: center; width: 150px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2);
  overflow: hidden;
}
.inputgroup:focus-within { border-color: var(--accent); }
.inputgroup input[type="number"] {
  border: none; background: transparent; border-radius: 0; flex: 1; min-width: 0;
  text-align: right; padding-right: 4px;
}
.inputgroup input:focus { outline: none; }
.inputgroup .unit { width: auto; padding: 0 9px 0 4px; color: var(--muted); font-size: 11px; }
.inputgroup input:disabled { opacity: 0.55; }

/* on-demand hints: a quiet ⓘ that expands the guidance inline */
details.hint { border: 0; }
details.hint > summary {
  list-style: none; cursor: pointer; color: var(--muted); font-size: 11px;
  display: inline-flex; align-items: center; gap: 4px; user-select: none; padding: 1px 0;
}
details.hint > summary::-webkit-details-marker { display: none; }
details.hint > summary::before { content: "ⓘ"; font-size: 11px; opacity: .85; }
details.hint > summary:hover { color: var(--accent); }
details.hint[open] > summary { color: var(--text); }
details.hint .hint-body { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 5px; }

/* ============================================================
 * Product gallery — sidebar trigger + category/dieline modal
 * ============================================================ */

/* sidebar trigger: shows current product, opens the gallery */
.product-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; cursor: pointer; color: var(--text);
}
.product-trigger:hover { border-color: var(--accent); background: #243044; }
.product-trigger .pt-ico { width: 34px; height: 30px; color: var(--accent); flex: 0 0 auto; }
.product-trigger .pt-ico svg { width: 100%; height: 100%; }
.product-trigger .pt-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.product-trigger .pt-txt b { font-size: 13px; font-weight: 700; }
.product-trigger .pt-txt i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-trigger .pt-chev { font-size: 11px; color: var(--accent); font-weight: 600; flex: 0 0 auto; }

/* modal overlay + card */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(8,11,16,.66);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display: none; }
.pm-card-wrap {
  width: min(860px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden;
}
.pm-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; }
.pm-head h2 { font-size: 18px; font-weight: 700; }
.pm-head p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.pm-head .btn.ghost { font-size: 16px; padding: 4px 10px; margin-left: auto; }

.pm-tabs { display: flex; gap: 6px; padding: 0 22px 14px; border-bottom: 1px solid var(--line); }
.pm-tabs button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 9px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pm-tabs button:hover { color: var(--text); }
.pm-tabs button.active { background: var(--accent); border-color: var(--accent); color: #0b1320; }

.pm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 18px 22px 24px; overflow-y: auto;
}
.pm-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 10px 13px; cursor: pointer; color: var(--text); transition: border-color .12s, transform .08s, background .12s;
}
.pm-card:hover { border-color: var(--accent); background: #243044; transform: translateY(-2px); }
.pm-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pm-card.current::after { content: "✓ current"; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .4px; }
.pm-card .pm-ico {
  width: 100%; height: 66px; background: var(--canvas-bg); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 7px; overflow: hidden;
}
.pm-card .pm-ico svg { width: 100%; height: 100%; display: block; }
/* real dieline thumbnails: keep per-layer colours, force a legible px stroke */
.pm-card .pm-ico svg path, .pm-card .pm-ico svg line, .pm-card .pm-ico svg rect,
.pm-card .pm-ico svg circle, .pm-card .pm-ico svg ellipse, .pm-card .pm-ico svg polygon {
  vector-effect: non-scaling-stroke; stroke-width: 1.15px;
}
.pm-card .pm-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.pm-card .pm-blurb { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.pm-grid::-webkit-scrollbar { width: 9px; }
.pm-grid::-webkit-scrollbar-thumb { background: #303c52; border-radius: 5px; }

/* ============================================================
 * Live coupling, inline validation, number scrub
 * ============================================================ */

/* hover a field -> spotlight the matching dieline layer(s) [fallback, whole layer] */
#svgHost.coupling g[id^="layer-"] { opacity: .15; transition: opacity .1s ease; }
#svgHost.coupling g[id^="layer-"].cpl-hot { opacity: 1; filter: drop-shadow(0 0 2px var(--accent)); }
/* granular spotlight: dim every drawn element, lift only the tagged dim/feature */
#svgHost.coupling-el g[id^="layer-"] > * { opacity: .12; transition: opacity .1s ease; }
#svgHost.coupling-el g[id^="layer-"] > .cpl-hot { opacity: 1; filter: drop-shadow(0 0 1.6px var(--accent)); }

/* scrub: drag the label to change the value */
.row.scrub > label { cursor: ew-resize; }
.row.scrub > label:hover { color: var(--accent); }
.row.scrub > label::after { content: " ⇆"; font-size: 10px; opacity: .45; }
.row.scrub > label:hover::after { opacity: .9; }

/* inline field validation: red/amber border + message under the field */
.row.field-bad, .row.field-warn { flex-wrap: wrap; }
.row.field-bad input, .row.field-bad select, .row.field-bad .inputgroup { border-color: var(--err) !important; }
.row.field-warn input, .row.field-warn select, .row.field-warn .inputgroup { border-color: var(--warn) !important; }
.field-msg { flex-basis: 100%; font-size: 10.5px; line-height: 1.35; margin-top: 3px; }
.row.field-bad .field-msg { color: var(--err); }
.row.field-warn .field-msg { color: var(--warn); }

/* quote option blocks in the Material Intelligence panel */
.qopt { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; margin-top: 7px; }
.qopt.qrec { border-color: var(--accent); background: #1b2436; }
.qopt-h { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 12px; }
.qopt .matrow { padding: 2px 0; }
.qspec { background: #161e2c; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; margin-bottom: 8px; }
.qspec + .qspec { margin-top: -2px; }
.qspec-h { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 1px 0 3px; }
.qspec .matrow { padding: 2px 0; }
.qspec select { width: 168px; }

/* ---------- preflight card ---------- */
.pf-card.matcard { border-left: 3px solid var(--accent); }
.pf-headline { font-weight: 700; font-size: 12.5px; margin-top: 2px; }
.pf-headline.ready { color: #22c55e; }
.pf-headline.bad { color: #f87171; }
.pf-headline.warn { color: #fbbf24; }
.pf-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* findings-to-fix: actionable rows read as buttons; the canvas glow pulses
   over the defect region and follows pan/zoom until it expires */
.pf-find.pf-click { cursor: pointer; border-radius: 6px; margin: 0 calc(-1 * var(--sp-2)); padding-left: var(--sp-2); padding-right: var(--sp-2); }
.pf-find.pf-click:hover { background: var(--panel-3); }
.pf-find.pf-click:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#findingGlow { position: absolute; z-index: 6; pointer-events: none;
  border: 2px solid var(--warn); border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(252, 196, 25, .25);
  animation: fglow 1.15s ease-in-out 2; }
@keyframes fglow { 0%, 100% { box-shadow: 0 0 0 4px rgba(252, 196, 25, .25); } 50% { box-shadow: 0 0 0 12px rgba(252, 196, 25, .06); } }
@media (prefers-reduced-motion: reduce) { #findingGlow { animation: none; } }

.pf-find { position: relative; padding-left: 15px; font-size: 11.5px; line-height: 1.4; }
.pf-dot { position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; }
.pf-msg { color: var(--text); }
.pf-tag { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
  border: 1px solid var(--line); color: var(--muted); }
.pf-tag.pf-deterministic { color: #22c55e; border-color: rgba(34,197,94,.45); }
.pf-tag.pf-heuristic { color: #fbbf24; border-color: rgba(251,191,36,.45); }
.pf-tag.pf-ai { color: #a5b4fc; border-color: rgba(165,180,252,.45); }
.pf-tag.pf-human { color: var(--muted); }
.pf-why { color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.pf-assume { color: #fbbf24; }
/* press-aware ink/colour count (preflight source line) */
.pf-ink { color: var(--label); font-weight: 700; cursor: help; border-bottom: 1px dotted rgba(148,160,180,.5); }
.pf-inkbadge { font-size: 10px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; white-space: nowrap; }

/* ============ Price & Lead Time tab ============ */
#priceView { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--bg); }
.pv { max-width: 1080px; margin: 0 auto; padding: 22px 26px 44px; display: flex; flex-direction: column; gap: 18px; }
.pv-empty { padding: 64px; text-align: center; color: var(--muted); }
.pv-unsupported { padding: 56px 40px; max-width: 560px; margin: 0 auto; }
.pv-unsup-h { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.pv-unsup-sub { font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.pv-unsup-sub b { color: var(--label); }
/* inline material picker shown in the price box when facestock/laminate are unset */
.pv-matpick { max-width: 380px; margin: 20px auto 0; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.pv-matpick .matrow { padding: 6px 0; }
.pv-matpick .mat-suggest { margin: -2px 0 6px; font-size: 11.5px; line-height: 1.5; }
.pv-matpick-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pv-matpick-foot a { color: var(--accent); text-decoration: none; }
.pv-matpick-foot a:hover { text-decoration: underline; }
/* live-pricing error card — amber for retryable (transient/rate/network/off),
   red for hard errors that need a change or admin (spec/scope/auth/config) */
.pv-error { border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 12px; background: rgba(252,196,25,.07); padding: 13px 16px; }
.pv-error-h { font-size: 14px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.pv-error-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.pv-error-d { font-size: 12.5px; color: var(--label); margin-top: 5px; line-height: 1.55; }
.pv-error-issues { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--label); }
.pv-error-issues li { margin: 2px 0; }
.pv-error-issues b { color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
.pv-error-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pv-error-hint { font-size: 12px; color: var(--muted); }
.pv-err-spec, .pv-err-scope, .pv-err-auth, .pv-err-config { border-left-color: var(--err); background: rgba(255,107,107,.07); }
.pv-err-spec .pv-error-dot, .pv-err-scope .pv-error-dot, .pv-err-auth .pv-error-dot, .pv-err-config .pv-error-dot { background: var(--err); }

.pv-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.pv-title { font-size: 19px; font-weight: 700; }
.pv-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 3px; }
.pv-controls { display: flex; gap: 10px; margin-left: auto; }
.pv-num { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--label); }
.pv-num input { width: 108px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 7px 9px; font-size: 13px; font-weight: 600; }
.pv-num input:focus { outline: none; border-color: var(--accent); }
.pv-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-srctag { font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; }
.pv-srctag.est { background: #243044; color: var(--muted); }
.pv-srctag.live { background: rgba(81,207,102,.14); color: var(--good); }
.pv-srctag.sm { text-transform: none; letter-spacing: 0; padding: 1px 7px; }
.pv-hint { font-size: 11.5px; color: var(--muted); }
.pv-hint.err { color: var(--err); }

.pv-hero { display: flex; gap: 24px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1c2738 0%, #1a2230 62%); border: 1px solid #314058;
  border-left: 4px solid var(--accent); border-radius: 14px; padding: 22px 26px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.pv-hero-tag { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--accent); text-transform: uppercase; }
.pv-hero-method { font-size: 26px; font-weight: 800; margin-top: 6px; }
.pv-hero-why { font-size: 13px; color: var(--label); margin-top: 8px; max-width: 520px; line-height: 1.5; }
.pv-hero-r { text-align: right; flex: 0 0 auto; }
.pv-hero-price .amt { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.pv-hero-price .unit { font-size: 14px; color: var(--muted); margin-left: 4px; }
.pv-hero-meta { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 22px; margin-top: 14px; justify-content: end; }
.pv-hero-meta .k { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pv-hero-meta .v { font-size: 14px; font-weight: 700; }

.pv-sec { font-size: 12.5px; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 -4px; }
.pv-sec b { color: var(--text); text-transform: none; letter-spacing: 0; }

.pv-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 12px; }
.pv-opt { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; cursor: pointer; position: relative; transition: border-color .12s, transform .08s, box-shadow .12s; color: var(--text); font: inherit; }
.pv-opt:hover { border-color: #3a4a66; transform: translateY(-1px); }
.pv-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(77,171,247,.12); }
.pv-opt.rec { background: linear-gradient(180deg, #1d2a3a, var(--panel)); }
.pv-opt-rank { position: absolute; top: 12px; right: 13px; font-size: 11px; font-weight: 800; color: var(--muted); }
.pv-opt.rec .pv-opt-rank, .pv-opt.sel .pv-opt-rank { color: var(--accent); }
.pv-opt-method { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-right: 22px; }
.pv-opt-price { margin: 9px 0 1px; }
.pv-opt-price .amt { font-size: 24px; font-weight: 800; }
.pv-opt-price .unit { font-size: 12px; color: var(--muted); margin-left: 3px; }
.pv-opt-from { font-size: 11px; color: var(--muted); }
.pv-opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 11px 0; }
.pv-opt-grid .k { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.pv-opt-grid .v { font-size: 12.5px; font-weight: 700; }
.pv-opt-lead { font-size: 11px; color: var(--label); }
.pv-opt-lead .fr { color: var(--muted); }

.pv-tag { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; text-transform: uppercase; letter-spacing: .3px; }
.pv-tag.rec { background: rgba(77,171,247,.16); color: var(--accent); }
.pv-tag.ok { background: rgba(81,207,102,.14); color: var(--good); }
.pv-tag.warn { background: rgba(252,196,25,.16); color: var(--warn); }

.pv-leadbar { display: flex; height: 6px; border-radius: 4px; background: #222d3e; overflow: hidden; margin-top: 6px; }
.pv-leadbar .seg { height: 100%; display: block; }
.pv-leadbar .seg.prod { background: var(--accent); }
.pv-leadbar .seg.fr { background: var(--accent-2); opacity: .6; }

.pv-breaks { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-brk { flex: 1 1 108px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; text-align: center; }
.pv-brk.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: linear-gradient(180deg, #1d2a3a, var(--panel)); }
.pv-brk-q { font-size: 15px; font-weight: 800; }
.pv-brk-q .u { display: block; font-size: 9.5px; color: var(--muted); font-weight: 500; text-transform: uppercase; }
.pv-brk-pu { font-size: 18px; font-weight: 800; color: var(--accent); margin-top: 7px; }
.pv-brk-pu .u { font-size: 10px; color: var(--muted); font-weight: 500; }
.pv-brk-sav { font-size: 11px; font-weight: 700; color: var(--good); margin-top: 5px; }
.pv-brk-sav.base { color: var(--muted); }
.pv-brk-tot { font-size: 11px; color: var(--label); margin-top: 3px; }

/* live multi-vendor fan-out (cc2 flex pricing) */
.pv-vendors-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pv-vendors { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.pv-vendors th, .pv-vendors td { padding: 9px 12px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pv-vendors thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; background: #1b2636; position: sticky; top: 0; }
.pv-vendors tbody th { text-align: left; font-weight: 800; }
.pv-vendors tbody th .u { font-size: 9.5px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.pv-vendors td .pu { font-weight: 800; }
.pv-vendors td .tot { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.pv-vendors td.best { background: rgba(81,207,102,.12); }
.pv-vendors td.best .pu { color: var(--good); }
.pv-vendors td.na { color: var(--muted); }
.pv-vendors td.lead { color: var(--label); font-weight: 600; }
.pv-vendors tbody tr:last-child th, .pv-vendors tbody tr:last-child td { border-bottom: 0; }
.pv-vendor-legend { font-size: 11px; color: var(--muted); margin-top: -2px; }

.pv-leads { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.pv-leadrow { display: grid; grid-template-columns: 132px 1fr 210px; gap: 14px; align-items: center; padding: 6px 0; }
.pv-leadrow.sel .pv-leadrow-m { color: var(--accent); }
.pv-leadrow-m { font-size: 12.5px; font-weight: 600; }
.pv-leadrow-d { font-size: 11.5px; color: var(--label); text-align: right; }
.pv-leadrow-d .fr { color: var(--muted); }
.pv-leadrow .pv-leadbar { margin: 0; height: 9px; }
.pv-lead-legend { font-size: 11px; color: var(--muted); margin-top: 11px; display: flex; align-items: center; gap: 6px; }
.pv-lead-legend .seg { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }
.pv-lead-legend .seg.prod { background: var(--accent); }
.pv-lead-legend .seg.fr { background: var(--accent-2); opacity: .6; }

.pv-foot { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.pv-foot .pv-assume { flex-basis: 100%; line-height: 1.5; }

/* ---- Price tab: clickable breaks + Next steps / order ---- */
.pv-brk { cursor: pointer; font: inherit; color: inherit; }
.pv-brk:hover { border-color: #3a4a66; transform: translateY(-1px); }
.pv-order { display: flex; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, #1c2738, #1a2230); border: 1px solid #314058; border-radius: 14px; padding: 20px 24px; }
.pv-order-recap { flex: 1 1 320px; }
.pv-order-h { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.pv-order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 18px; margin-top: 12px; }
.pv-order-grid .k { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.pv-order-grid .v { font-size: 14px; font-weight: 700; }
.pv-order-grid .v.big { font-size: 21px; }
.pv-order-grid .v .fr { font-size: 11px; color: var(--muted); font-weight: 500; }
.pv-order-action { flex: 0 0 290px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--line); padding-left: 22px; }
.pv-steps { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; flex-wrap: wrap; }
.pv-step { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.pv-step .dot { width: 8px; height: 8px; border-radius: 50%; background: #33425a; display: inline-block; }
.pv-step.done { color: var(--good); } .pv-step.done .dot { background: var(--good); }
.pv-step.cur { color: var(--accent); } .pv-step.cur .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(77,171,247,.2); }
.pv-step .arr { color: #3a4a66; }
.pv-order-cta { display: flex; flex-direction: column; gap: 7px; }
.btn.block { width: 100%; text-align: center; padding: 10px; font-size: 13px; }
.pv-cta-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pv-cta-sub b { color: var(--text); }
.pv-order-ok { font-size: 14px; color: var(--good); font-weight: 800; }
.pv-order-err { font-size: 11.5px; color: var(--err); }

/* Price tab: progressive-disclosure toggle for breaks + lead detail */
.pv-disclose { align-self: flex-start; background: none; border: 1px solid var(--line); color: var(--label); border-radius: 8px; padding: 8px 13px; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
.pv-disclose:hover { border-color: #3a4a66; color: var(--text); }

/* =================================================================== */
/* Proof mode — file & proofing (left rail) + approval (right rail)     */
/* =================================================================== */
.prcard { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; background: var(--panel-2); overflow: hidden; }
.prcard > .prhead {
  padding: 8px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.prcard > .prhead .prh-r { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; }
.prcard > .prbody { padding: 2px 11px 11px; font-size: 12px; }
.pr-empty { font-size: 12px; color: var(--muted); line-height: 1.5; padding: 4px 0; }

/* key/value file facts */
.pr-kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.pr-kv:last-child { border-bottom: 0; }
.pr-kv .k { color: var(--muted); flex: 0 0 auto; }
.pr-kv .v { font-weight: 600; text-align: right; word-break: break-word; }
.pr-chips2 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pr-chip2 {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--panel); color: var(--label); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 5px;
}
.pr-ink { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); flex: 0 0 auto; }
.pr-warn { font-size: 11.5px; color: var(--warn); margin-top: 6px; }

/* proofing controls */
.pr-ctl { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.pr-ctl input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.pr-ctl label { cursor: pointer; }
.pr-btnrow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* panel review checklist */
.pr-check {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-top: 6px; cursor: pointer; color: var(--text);
  font-size: 12px; transition: border-color .12s, background .12s;
}
.pr-check:hover { border-color: #3a4a66; background: #283349; }
.pr-check .box {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #8a98ac;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font-size: 11px; color: #fff;
}
.pr-check.done { border-color: #2f7d4f; background: rgba(34,197,94,.10); }
.pr-check.done .box { background: #16a34a; border-color: #16a34a; }
.pr-check .lbl { font-weight: 600; }
.pr-check .sub { color: var(--muted); margin-left: auto; font-weight: 600; font-size: 11px; }
.pr-progress { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* approval status banner + gates */
.pr-status {
  border-radius: 9px; padding: 11px 12px; margin-bottom: 10px; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.pr-status .st-lbl { font-size: 13px; font-weight: 800; letter-spacing: .2px; }
.pr-status .st-sub { font-size: 11px; color: var(--muted); }
.pr-status.pending  { background: rgba(151,117,250,.10); border-color: rgba(151,117,250,.40); }
.pr-status.pending .st-lbl { color: var(--accent-2); }
.pr-status.changes  { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.45); }
.pr-status.changes .st-lbl { color: #f59e0b; }
.pr-status.approved { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.45); }
.pr-status.approved .st-lbl { color: #4ade80; }

.pr-gate { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; }
.pr-gate .g-ico { flex: 0 0 auto; width: 16px; text-align: center; font-weight: 700; }
.pr-gate.ok .g-ico { color: #4ade80; }
.pr-gate.no .g-ico { color: var(--muted); }
.pr-gate.bad .g-ico { color: var(--err); }
.pr-gate .g-txt { color: var(--label); }

.pr-field { margin-top: 9px; }
.pr-field > label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }
.pr-field input[type="text"], .pr-field textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 7px 9px; font-size: 12px; font-family: inherit; box-sizing: border-box;
}
.pr-field textarea { resize: vertical; min-height: 54px; }
.pr-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.pr-actions .btn { width: 100%; justify-content: center; display: inline-flex; }
.btn.approve { background: #15803d; border-color: #1c9e4e; color: #fff; }
.btn.approve:hover:not(:disabled) { background: #1c9e4e; }
.btn.approve:disabled { opacity: .45; cursor: not-allowed; }
.btn.changes { background: #b45309; border-color: #d97706; color: #fff; }
.btn.changes:hover { background: #d97706; }

.pr-signoff { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.35); font-size: 12px; }
.pr-signoff b { color: #4ade80; }
.pr-log { margin-top: 10px; }
.pr-log .lg { display: flex; gap: 8px; font-size: 11px; color: var(--muted); padding: 3px 0; border-top: 1px solid var(--line); }
.pr-log .lg .t { flex: 0 0 auto; color: var(--label); font-variant-numeric: tabular-nums; }

/* =================================================================== */
/* Multi-document Files filmstrip (top of stage)                        */
/* =================================================================== */
#filmstrip { background: var(--panel); border-bottom: 1px solid var(--line); padding: 7px 14px 6px; flex: 0 0 auto; }
#filmstrip .fs-row { display: flex; gap: 8px; align-items: center; overflow-x: auto; }
#filmstrip .fs-row::-webkit-scrollbar { height: 7px; }
#filmstrip .fs-row::-webkit-scrollbar-thumb { background: #303c52; border-radius: 5px; }
.fs-tile { flex: 0 0 auto; width: 58px; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fs-thumb { position: relative; width: 50px; height: 60px; border-radius: 6px; border: 2px solid var(--line); overflow: hidden; background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.fs-tile.active .fs-thumb { border-color: var(--accent); }
.fs-tile:hover .fs-thumb { border-color: #3a4a66; }
.fs-tile.active:hover .fs-thumb { border-color: var(--accent); }
.fs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fs-ph { color: var(--muted); font-size: 18px; }
.fs-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; border-radius: 999px; font-size: 10px; line-height: 14px; text-align: center; color: #fff; padding: 0 2px; }
.fs-badge.ok { background: #16a34a; } .fs-badge.chg { background: #d97706; } .fs-badge.err { background: #dc2626; }
.fs-badge.pend { background: #5b6677; } .fs-badge.proc { background: var(--accent); }
.fs-badge .spin { display: inline-block; animation: fsspin 1s linear infinite; }
@keyframes fsspin { to { transform: rotate(360deg); } }
.fs-name { font-size: 10px; color: var(--label); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-tile.active .fs-name { color: var(--text); font-weight: 600; }
.fs-add { flex: 0 0 auto; align-self: center; background: var(--panel-2); border: 1px dashed var(--line); color: var(--muted); border-radius: 6px; height: 60px; padding: 0 11px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.fs-add:hover { border-color: var(--accent); color: var(--text); }
.fs-sum { font-size: 11px; color: var(--muted); margin-top: 5px; display: block; }

/* ============================================================ *
 * LEAD LANDING — marketing front door (#landing)               *
 * Full-page dark SaaS layout: nav / 3D hero + instant-quote /  *
 * brand bar / 3 steps / why+quote+device / CTA band / privacy. *
 * Scoped tokens (--ln-*) so the CRO harness's --accent         *
 * overrides can't recolor the design system.                   *
 * App contract kept: #landing.hide, #landing.dragging,         *
 * #ldDrop(.drag), .ld-build steps, .ld-samp, .ld-browse.       *
 * ============================================================ */
header h1#logoHome { cursor: pointer; user-select: none; transition: opacity .15s; }
header h1#logoHome:hover { opacity: .82; }
header h1#logoHome:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

#landing {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overflow-x: hidden;
  background: var(--ln-bg);
  color: var(--ln-text);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  opacity: 1; visibility: visible;
  transition: opacity .35s ease, visibility .35s ease;
  /* landing-scoped design tokens */
  --ln-bg: #06070d;
  --ln-panel: #0c0e17;
  --ln-panel2: #10121d;
  --ln-line: rgba(255, 255, 255, .08);
  --ln-line2: rgba(255, 255, 255, .14);
  --ln-text: #f2f4fb;
  --ln-mut: #9aa3b8;
  --ln-dim2: #6b7488;
  --ln-vio: #7c5cff;
  --ln-blu: #4f7dff;
  /* A/B accent bridge: color experiments + industry accents override these two */
  --ln-accent: var(--ln-vio);
  --ln-accent-2: var(--ln-blu);
  --ln-grn: #34d399;
  --ln-r: 12px; --ln-rs: 9px;
  --ln-ease: cubic-bezier(.2, .7, .3, 1);
}
#landing.hide { opacity: 0; visibility: hidden; pointer-events: none; }
/* the CRO harness's QA variant toolbar collides with the redesigned nav —
 * the harness itself stays loaded (beacons, segment attrs), only its dev
 * picker is hidden on this layout */
#landing ::selection { background: rgba(124, 92, 255, .35); }
.ln-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* whole-page drag: dim everything but the drop zone */
#landing.dragging .ln-dim { opacity: .25; filter: blur(2px) saturate(.6); transition: opacity .18s var(--ln-ease), filter .18s var(--ln-ease); }
#landing.dragging .ln-hero-copy > *:not(.ln-drop) { opacity: .25; filter: blur(2px); }
#landing.dragging .ln-drop { border-color: var(--ln-accent); background: color-mix(in srgb, var(--ln-accent) 10%, transparent); transform: scale(1.015); }

/* ------------------------------------------------------------ nav */
.ln-nav { position: sticky; top: 0; z-index: 20; background: rgba(6, 7, 13, .78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ln-line); }
.ln-nav-in { display: flex; align-items: center; gap: 26px; height: 64px; }
.ln-logo { font-size: 15px; font-weight: 800; letter-spacing: .16em; white-space: nowrap; }
.ln-logo span { font-weight: 300; letter-spacing: .22em; color: var(--ln-mut); }
.ln-logo em { font-style: normal; font-weight: 500; letter-spacing: .02em; font-size: 11px; color: var(--ln-dim2); margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--ln-line2); }
.ln-links { display: flex; gap: 4px; margin: 0 auto; }
.ln-links a { color: var(--ln-mut); text-decoration: none; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: color .15s var(--ln-ease), background .15s var(--ln-ease); }
.ln-links a:hover { color: var(--ln-text); background: rgba(255, 255, 255, .05); }
.ln-links a.on { color: var(--ln-text); background: rgba(124, 92, 255, .12); }
.ln-nav-cta { display: flex; gap: 10px; align-items: center; }

/* ------------------------------------------------------------ buttons */
.ln-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; border-radius: 999px; transition: filter .15s var(--ln-ease), transform .15s var(--ln-ease), background .15s var(--ln-ease), box-shadow .15s var(--ln-ease); }
.ln-btn:active { transform: translateY(1px); }
.ln-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-vio); }
.ln-btn.primary { color: #fff; padding: 10px 20px; font-size: 13.5px; background: linear-gradient(135deg, var(--ln-accent), var(--ln-accent-2)); box-shadow: 0 6px 22px color-mix(in srgb, var(--ln-accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ln-btn.primary:hover { filter: brightness(1.12); box-shadow: 0 8px 28px rgba(124, 92, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ln-btn.ghost { color: var(--ln-mut); background: transparent; padding: 10px 16px; font-size: 13.5px; }
.ln-btn.ghost:hover { color: var(--ln-text); }
.ln-btn.light { color: #241d4d; background: #fff; padding: 13px 26px; font-size: 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.ln-btn.light:hover { filter: brightness(.96); }

/* ------------------------------------------------------------ hero */
.ln-hero { position: relative; padding: 64px 0 44px; }
/* ambient depth: a faint wash behind the visual ties the pouch and quote
 * card into the page instead of floating on flat black (bleeds past both
 * container edges so no boundary is ever visible) */
.ln-hero::before { content: ''; position: absolute; inset: -180px -20% auto; height: 640px; pointer-events: none;
  background: radial-gradient(560px 380px at 68% 36%, rgba(124, 92, 255, .16), transparent 65%),
              radial-gradient(480px 340px at 78% 60%, rgba(52, 211, 153, .07), transparent 70%); }
.ln-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 56px; align-items: start; }
.ln-hero-copy { padding-top: 26px; }
.ln-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--ln-grn); border: 1px solid rgba(52, 211, 153, .35); border-radius: 999px; padding: 6px 14px; background: rgba(52, 211, 153, .06); }
.ln-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--ln-grn); animation: ln-pulse 2.4s ease-out infinite; }
@keyframes ln-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.ln-h1 { font-size: clamp(34px, 3.9vw, 50px); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; margin: 20px 0 18px; text-wrap: balance; }
/* "3D packaging" goes literally 3D on hover: cursor-following perspective
 * tilt (JS sets --lnrx/--lnry) + a block extrusion under the gradient glyphs.
 * The ::after clone stays at (0,0) with a TRANSPARENT fill — its glyph body
 * hides exactly under the opaque gradient text and only the contiguous
 * 1px-step shadow stack peeks out, so the depth reads as connected bevel
 * sides, never a detached duplicate word. */
.ln-grad { position: relative; display: inline-block; background: linear-gradient(100deg, color-mix(in srgb, var(--ln-accent) 74%, #fff) 5%, color-mix(in srgb, var(--ln-accent-2) 89%, #fff) 60%, color-mix(in srgb, var(--ln-accent-2) 62%, #d9ecff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: perspective(700px) rotateX(var(--lnrx, 0deg)) rotateY(var(--lnry, 0deg)) translateY(var(--lnty, 0px)) scale(var(--lnsc, 1));
  transition: transform .3s var(--ln-ease), filter .3s var(--ln-ease); will-change: transform; }
.ln-grad::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0;
  text-shadow: 1px 1.5px 0 #3a3c96, 2px 3px 0 #323383, 3px 4.5px 0 #2a2b70, 4px 6px 0 #23235d, 5px 7.5px 0 #1b1c4a, 6px 9px 0 #141438;
  transition: opacity .25s var(--ln-ease); }
.ln-grad.lift { --lnsc: 1.03; filter: brightness(1.12) drop-shadow(0 24px 22px rgba(64, 74, 168, .45)); }
.ln-grad.lift::after { opacity: 1; }
.ln-sub { font-size: 16px; line-height: 1.65; color: var(--ln-mut); max-width: 46ch; margin: 0 0 26px; }
.ln-sub b { color: var(--ln-text); font-weight: 600; }

/* drop zone (app contract: #ldDrop / #ldFile / .ld-browse / #ldErr) */
.ln-drop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 24px; border: 1.5px dashed color-mix(in srgb, color-mix(in srgb, var(--ln-accent) 82%, #fff) 40%, transparent); border-radius: var(--ln-r); background: color-mix(in srgb, var(--ln-accent) 6%, transparent); cursor: pointer; transition: border-color .18s var(--ln-ease), background .18s var(--ln-ease), transform .18s var(--ln-ease), box-shadow .18s var(--ln-ease); }
.ln-drop:hover, .ln-drop.drag { border-color: var(--ln-vio); background: rgba(124, 92, 255, .12); box-shadow: 0 10px 34px rgba(124, 92, 255, .22); }
.ln-drop:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-vio); }
.ln-drop.pulse { animation: ln-droppulse 1.1s var(--ln-ease) 2; }
@keyframes ln-droppulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); } 40% { box-shadow: 0 0 0 8px rgba(124, 92, 255, .22); } }
/* the one job of the page, dressed like it: a full-size primary CTA */
.ln-drop-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 28px; font-size: 16px; box-shadow: 0 10px 30px rgba(124, 92, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ln-drop-s { font-size: 13px; color: var(--ln-mut); }
.ln-drop-s b { color: #b8a4ff; }
.ln-browse { border: 0; background: none; color: var(--ln-blu); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.ln-browse:hover { color: #7fa8ff; color: #8fb4ff; }
.ln-droperr { position: absolute; left: 22px; bottom: -24px; font-size: 11.5px; color: #f6717f; }
/* failure RESCUE: a specific way out, not a dead end — rich errors become a
 * readable block under the CTA instead of the one-line whisper */
.ln-droperr.rich { position: static; margin-top: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55; color: #f4a6ae; text-align: left; background: rgba(246, 113, 127, .07); border: 1px solid rgba(246, 113, 127, .3); border-radius: 10px; }
.ln-droperr.rich b { color: #ffd7db; }
.ld-rescue-sample { display: block; margin-top: 7px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #b8a4ff; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ld-rescue-sample:hover { color: #cdbfff; }

.ln-trustrow { margin: 12px 2px 0; font-size: 11.5px; letter-spacing: .01em; color: var(--ln-dim2); }
.ln-tsep { opacity: .5; }
/* return-visitor resume: greet them with THEIR pouch, not a cold page */
.ln-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 18px; padding: 10px 14px; font-size: 12.5px; color: var(--ln-mut); background: rgba(52, 211, 153, .07); border: 1px solid rgba(52, 211, 153, .3); border-radius: 12px; }
.ln-resume b { color: var(--ln-text); font-weight: 600; }
.ln-resume-go { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ln-grn); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ln-resume-go:hover { filter: brightness(1.15); }
.ln-resume-x { border: 0; background: none; margin-left: auto; padding: 2px 4px; font-size: 14px; line-height: 1; color: var(--ln-dim2); cursor: pointer; }
.ln-resume-x:hover { color: var(--ln-text); }

/* email-my-quote: the second conversion tier, inside the build card */
.ld-lead { margin-top: 13px; text-align: left; }
.ld-lead-row { display: flex; gap: 8px; }
.ld-lead-row input { flex: 1; min-width: 0; background: rgba(8, 10, 18, .7); border: 1px solid var(--ln-line2); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 12.5px; color: var(--ln-text); outline: none; }
.ld-lead-row input:focus { border-color: var(--ln-vio); }
.ld-lead-row .btn { flex: none; }
.ld-lead-p { margin-top: 7px; font-size: 10.5px; color: var(--ln-dim2); }
.ld-lead-skip { border: 0; background: none; padding: 0; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--ln-mut); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ld-lead-skip:hover { color: var(--ln-text); }
.ld-lead-ok { font-size: 12.5px; color: var(--ln-grn); font-weight: 600; }

/* secondary intent: no artwork yet → one-click sample build (a real
 * secondary button — quieter than the upload CTA, louder than body copy) */
.ln-try { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ln-line2); background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ln-text); cursor: pointer; padding: 11px 20px; border-radius: 999px; margin: 12px 0 0; transition: border-color .15s var(--ln-ease), background .15s var(--ln-ease), transform .15s var(--ln-ease); }
.ln-try span { color: #b8a4ff; transition: transform .15s var(--ln-ease); display: inline-block; }
.ln-try:hover { border-color: rgba(124, 92, 255, .6); background: rgba(124, 92, 255, .07); }
.ln-try:hover span { transform: translateX(3px); }
.ln-try:active { transform: translateY(1px); }
.ln-try:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-vio); }

/* below-the-fold format strip (the cards moved out of the hero) — part of
 * the hero cluster: tight above, one full beat below before the brands band */
.ln-formats { padding: 0 0 44px; }
.ln-formats .ln-starters-k { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ln-dim2); margin-bottom: 18px; }
.ln-formats .ln-starter-row { margin: 0 auto; }
.ln-starters-k { display: block; font-size: 12.5px; color: var(--ln-mut); margin-bottom: 10px; }
.ln-starter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 680px; }
@media (max-width: 560px) { .ln-starter-row { grid-template-columns: repeat(2, 1fr); } }
/* format cards: mini renders instead of pills */
.ln-samp-card { display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: var(--ln-text); text-align: center; background: var(--ln-panel); border: 1px solid var(--ln-line2); border-radius: 14px; padding: 12px; cursor: pointer; transition: border-color .15s var(--ln-ease), background .15s var(--ln-ease), transform .15s var(--ln-ease), box-shadow .15s var(--ln-ease); }
.ln-samp-card:hover { border-color: rgba(124, 92, 255, .6); background: var(--ln-panel2); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.ln-samp-card:active { transform: translateY(0); }
.ln-samp-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-vio); }
.ln-sc-art { display: flex; justify-content: center; width: 100%; padding: 5px 0 7px; }
.ln-samp-card[data-sample="label"] .ln-sc-art { color: #b18cff; }
.ln-samp-card[data-sample="pouch"] .ln-sc-art { color: #7fa2ff; }
.ln-samp-card[data-sample="carton"] .ln-sc-art { color: #4fd6a7; }
.ln-samp-card[data-sample="brief"] .ln-sc-art { color: #ffb86b; }
.ln-brief-card { border-style: dashed; border-color: rgba(255, 184, 107, .4); }
.ln-brief-card:hover { border-color: rgba(255, 184, 107, .85); }
.ln-samp-card:hover .ln-sc-art { filter: brightness(1.15); }
.ln-sc-t { font-size: 12.5px; font-weight: 700; }
.ln-sc-s { font-size: 10.5px; color: var(--ln-mut); }
.ln-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ln-text); background: var(--ln-panel); border: 1px solid var(--ln-line2); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: border-color .15s var(--ln-ease), background .15s var(--ln-ease), transform .15s var(--ln-ease); }
.ln-chip svg { color: var(--ln-mut); }
.ln-chip:hover { border-color: var(--ln-vio); background: rgba(124, 92, 255, .08); }
.ln-chip:hover svg { color: var(--ln-vio); }
.ln-chip:active { transform: translateY(1px); }
.ln-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-vio); }

/* hero visual: 3D stage + quote card + orbit strip */
.ln-hero-visual { position: relative; min-width: 0; }
.ln-stage { position: relative; height: 480px; border-radius: 18px; overflow: visible; }
.ln-stage-glow { position: absolute; inset: 8% 6% 0; border-radius: 20px; background: radial-gradient(65% 60% at 50% 42%, color-mix(in srgb, var(--ln-accent) 16%, transparent), transparent 70%); pointer-events: none; }
#lnHero3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; opacity: 0; transition: opacity .6s ease; touch-action: pan-y; }
#lnHero3d:active { cursor: grabbing; }
.ln-stage.ready #lnHero3d { opacity: 1; }
.ln-stage.ready .ln-pouch-fallback { opacity: 0; }
/* CSS fallback pouch (visible until — or instead of — WebGL) */
.ln-pouch-fallback { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); transition: opacity .6s ease; pointer-events: none; }
.ln-pf-body { width: 208px; height: 300px; border-radius: 16px 16px 22px 22px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, #232a5e 0%, #17204d 34%, #123055 62%, #0e4a63 100%);
  box-shadow: inset 14px 0 26px rgba(255, 255, 255, .07), inset -18px 0 30px rgba(0, 0, 0, .45), 0 24px 50px rgba(0, 0, 0, .55); }
.ln-pf-body::before { content: ''; position: absolute; inset: 0 0 auto; height: 14px; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); }
.ln-pf-body::after { content: ''; position: absolute; top: 0; bottom: 0; left: 26%; width: 14%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent); }
.ln-pf-mark { font-size: 30px; color: rgba(255, 255, 255, .9); }
.ln-pf-name { font-size: 24px; font-weight: 300; letter-spacing: .34em; text-indent: .34em; color: #fff; }
.ln-pf-tag { font-size: 8px; letter-spacing: .42em; text-indent: .42em; color: rgba(255, 255, 255, .65); }

.ln-quote { position: absolute; top: 26px; right: -8px; width: 212px; background: rgba(13, 15, 24, .84); border: 1px solid var(--ln-line2); border-radius: 14px; padding: 16px 16px 14px; backdrop-filter: blur(12px); box-shadow: 0 18px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
.ln-q-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
.ln-q-time { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; color: var(--ln-grn); letter-spacing: .02em; white-space: nowrap; }
.ln-q-row { padding: 7px 0; border-top: 1px solid var(--ln-line); display: flex; flex-direction: column; gap: 1px; }
/* demo quantity slider: price ownership before commitment */
#lnQty { width: 100%; margin: 6px 0 2px; accent-color: var(--ln-vio); height: 14px; cursor: pointer; }
.ln-qk { font-size: 10px; color: var(--ln-dim2); letter-spacing: .02em; }
.ln-qv { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ln-q-price { color: var(--ln-grn); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ln-q-price i { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--ln-mut); }
.ln-q-btn { width: 100%; margin-top: 10px; padding: 9px 0; font-size: 12.5px; }
.ln-q-live { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 9.5px; color: var(--ln-dim2); }
.ln-q-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--ln-grn); animation: ln-pulse 2.4s ease-out infinite; }

/* one quiet affordance hint, floating at the foot of the stage — at 40%
 * because the pouch itself renders 10% left of center (FRAME_SHIFT pans the
 * projection to clear the quote card); the pill sits on the POUCH's axis */
.ln-orbitbar { position: absolute; left: 37%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--ln-line); border-radius: 999px; background: rgba(12, 14, 23, .72); backdrop-filter: blur(6px); pointer-events: none; white-space: nowrap; }
.ln-orbit-k { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ln-text); }
.ln-orbit-k svg { color: var(--ln-vio); }
.ln-orbit-t { font-size: 11px; color: var(--ln-dim2); }

/* the pipeline, made visible: status chips cycle upload → dieline → 3D → quote */
.ln-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ln-how .ln-flow { justify-content: center; margin: 0 0 52px; }
.ln-flow-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ln-dim2); border: 1px solid var(--ln-line); border-radius: 999px; padding: 5px 10px; background: rgba(12, 14, 23, .6); transition: color .3s var(--ln-ease), border-color .3s var(--ln-ease); }
.ln-flow-chip i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .3s var(--ln-ease); }
.ln-flow-chip.active { color: var(--ln-text); border-color: rgba(124, 92, 255, .55); }
.ln-flow-chip.active i { background: var(--ln-vio); animation: ln-pulse 1.1s ease-out infinite; }
.ln-flow-chip.done { color: var(--ln-mut); }
.ln-flow-chip.done i { background: var(--ln-grn); }
.ln-flow-sep { font-size: 10px; color: var(--ln-dim2); opacity: .55; }

/* ------------------------------------------------------------ brand bar */
.ln-brands { border-top: 1px solid var(--ln-line); border-bottom: 1px solid var(--ln-line); background: rgba(255, 255, 255, .015); padding: 32px 0; }
.ln-brands-k { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--ln-dim2); margin-bottom: 18px; }
.ln-brands-row { display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; }
.ln-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: .26em; color: #808a9f; opacity: .8; transition: opacity .2s var(--ln-ease), color .2s var(--ln-ease); }
.ln-brand:hover { opacity: 1; color: #aeb8cc; }

/* ------------------------------------------------------------ how it works */
/* section rhythm: every major band below the brands strip opens with one
 * 96px beat (64px <=720); bands own their TOP space only, so gaps never
 * double up */
.ln-how { padding: 96px 0 0; text-align: center; }
.ln-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: var(--ln-vio); margin-bottom: 12px; }
.ln-h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; }
.ln-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: start; max-width: 980px; margin: 0 auto; }
.ln-step-ic { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #a58cff;
  background: radial-gradient(circle at 30% 25%, rgba(124, 92, 255, .28), rgba(124, 92, 255, .1)); border: 1px solid rgba(124, 92, 255, .35); box-shadow: 0 8px 26px rgba(124, 92, 255, .18); }
.ln-step-t { font-size: 16.5px; font-weight: 700; margin-bottom: 10px; }
.ln-step-s { font-size: 13px; line-height: 1.65; color: var(--ln-mut); margin: 0; }
.ln-step-arrow { color: #4b5470; padding-top: 16px; }

/* ------------------------------------------------------------ showcase band */
.ln-showcase { padding: 96px 0 0; }
.ln-show-grid { display: grid; grid-template-columns: 0.9fr 1.1fr 1.1fr; gap: 0; border: 1px solid var(--ln-line); border-radius: 18px; overflow: hidden; background: var(--ln-panel); }
.ln-why { padding: 30px 28px; border-right: 1px solid var(--ln-line); }
.ln-h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 18px; }
.ln-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ln-checks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #c6cddd; }
.ln-checks i { width: 17px; height: 17px; border-radius: 50%; flex: none; position: relative; background: rgba(52, 211, 153, .15); border: 1px solid rgba(52, 211, 153, .5); }
.ln-checks i::after { content: ''; position: absolute; left: 4.5px; top: 4px; width: 6px; height: 3.5px; border-left: 1.6px solid var(--ln-grn); border-bottom: 1.6px solid var(--ln-grn); transform: rotate(-45deg); }
.ln-quotecard { margin: 0; padding: 30px 30px; border-right: 1px solid var(--ln-line); display: flex; flex-direction: column; justify-content: center; }
.ln-qc-mark { font-size: 46px; line-height: .6; color: var(--ln-blu); font-weight: 800; margin-bottom: 14px; }
.ln-quotecard blockquote { margin: 0 0 20px; font-size: 17.5px; line-height: 1.55; font-weight: 500; color: #e6eaf4; }
.ln-quotecard figcaption { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ln-mut); line-height: 1.45; }
.ln-quotecard figcaption b { color: var(--ln-text); font-size: 12.5px; }
.ln-qc-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #cdd5e6; background: linear-gradient(140deg, #2a3150, #1a1f36); border: 1px solid var(--ln-line2); }
/* CSS device mock (stands in for the laptop photo) */
.ln-devicewrap { padding: 30px 26px; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 100% at 70% 20%, rgba(124, 92, 255, .09), transparent 60%); }
.ln-device { width: 100%; max-width: 340px; }
.ln-dv-screen { border: 1px solid var(--ln-line2); border-radius: 12px 12px 4px 4px; background: #0a0c14; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.ln-dv-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--ln-line); }
.ln-dv-bar span { width: 7px; height: 7px; border-radius: 50%; background: #2c3350; }
.ln-dv-bar b { margin-left: 8px; font-size: 7px; letter-spacing: .18em; color: var(--ln-dim2); }
.ln-dv-body { display: grid; grid-template-columns: 26px 1fr 84px; gap: 8px; padding: 10px; height: 148px; }
.ln-dv-side { display: flex; flex-direction: column; gap: 6px; }
.ln-dv-side i { height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.ln-dv-side i:first-child { background: rgba(124, 92, 255, .4); }
.ln-dv-hero { border-radius: 8px; background: radial-gradient(80% 90% at 50% 30%, rgba(124, 92, 255, .22), rgba(10, 12, 20, .8)); display: flex; align-items: center; justify-content: center; }
.ln-dv-pouch { width: 58px; height: 86px; border-radius: 7px; background: linear-gradient(160deg, #232a5e, #0e4a63); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 7px; letter-spacing: .2em; color: #fff; box-shadow: inset 5px 0 9px rgba(255, 255, 255, .08), inset -6px 0 10px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .45); }
.ln-dv-pouch em { font-style: normal; font-size: 11px; }
.ln-dv-quote { display: flex; flex-direction: column; gap: 7px; padding: 8px; border: 1px solid var(--ln-line); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.ln-dv-quote i { height: 7px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.ln-dv-quote i.w60 { width: 60%; } .ln-dv-quote i.w40 { width: 40%; } .ln-dv-quote i.w50 { width: 50%; }
.ln-dv-quote b { font-size: 10px; color: var(--ln-grn); }
.ln-dv-quote span { height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--ln-vio), var(--ln-blu)); opacity: .85; }
.ln-dv-base { height: 10px; margin: 0 -14px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #1a1e30, #0c0e17); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }

/* ------------------------------------------------------------ CTA band */
.ln-cta { padding: 96px 0; }
.ln-cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 44px 48px; border-radius: 20px;
  background: linear-gradient(115deg, #5b3bd6 0%, #4d51e0 55%, #3f66e8 100%); box-shadow: 0 26px 70px rgba(80, 62, 220, .35); }
.ln-h2b { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: #fff; }
.ln-cta-s { font-size: 14.5px; color: rgba(255, 255, 255, .82); margin: 0 0 22px; }
.ln-cta-note { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.ln-cta-points { display: flex; gap: 30px; justify-content: flex-end; }
.ln-point { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.ln-point svg { color: #fff; opacity: .95; background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 10px; width: 44px; height: 44px; }

/* ------------------------------------------------------------ footer strip */
.ln-foot { border-top: 1px solid var(--ln-line); padding: 20px 0 28px; }
.ln-foot-in { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; font-size: 12px; color: var(--ln-dim2); }
.ln-foot svg { vertical-align: -2px; margin-right: 5px; opacity: .75; }
.ln-skip { border: 0; background: none; font: inherit; font-size: 12px; color: var(--ln-mut); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.ln-skip:hover { color: var(--ln-text); }
.ln-skip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-vio); border-radius: 4px; }

/* ------------------------------------------------------------ build overlay (app contract) */
.ld-build { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(4, 5, 10, .8); backdrop-filter: blur(8px); }
.ld-build[hidden] { display: none; }
.ld-build-card { width: 400px; max-width: 92vw; padding: 26px 28px; border: 1px solid var(--ln-line2); border-radius: 18px; background: var(--ln-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); text-align: center; position: relative; overflow: hidden; }
/* ambient scanline — quiet motion between real discovery events */
.ld-build-card::after { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124, 92, 255, .05) 45%, rgba(124, 92, 255, .10) 50%, rgba(124, 92, 255, .05) 55%, transparent);
  animation: ldScan 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes ldScan { 0% { top: -40%; } 55% { top: 106%; } 100% { top: 106%; } }
/* THE LIVING BLUEPRINT — the customer's own computed dieline draws itself */
.ld-build-die { margin: 16px auto 0; max-height: 195px; display: flex; justify-content: center; animation: ld-mirror-in .3s var(--ln-ease); }
.ld-build-die[hidden] { display: none; }
.ld-build-die svg { max-height: 195px; width: auto; max-width: 100%; filter: drop-shadow(0 0 10px rgba(124, 92, 255, .22)); }
.ld-build-die svg text { display: none; }
.ld-build-die svg [pathLength] { stroke-dasharray: 60; stroke-dashoffset: 60; animation: ldDraw 1.25s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes ldDraw { to { stroke-dashoffset: 0; } }
.ld-build-die svg .ldf { opacity: 0; animation: ldFill .7s ease forwards; animation-delay: calc(.9s + var(--i, 0) * 35ms); }
@keyframes ldFill { to { opacity: 1; } }
/* discovery feed — real pipeline facts streaming in as they're found */
.ld-build-feed { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ld-build-feed[hidden] { display: none; }
.ld-fact { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--ln-text); animation: ldFactIn .32s var(--ln-ease); }
.ld-fact .ftag { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .7px; color: var(--ln-vio); background: rgba(124, 92, 255, .12); border: 1px solid rgba(124, 92, 255, .3); border-radius: 5px; padding: 1.5px 6px; }
@keyframes ldFactIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ld-inkrow { display: flex; flex-wrap: wrap; gap: 5px 7px; align-items: center; }
.ld-ink { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ln-dim2); border: 1px solid var(--ln-line2); border-radius: 999px; padding: 2px 9px 2px 4px; animation: ldFactIn .32s var(--ln-ease); animation-delay: calc(var(--i, 0) * 90ms); animation-fill-mode: both; }
.ld-ink i { width: 13px; height: 13px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, .25); background: repeating-linear-gradient(45deg, #3a4356 0 3px, #2c3648 3px 6px); }
.ld-build-price { margin-top: 13px; font-size: 13px; color: var(--ln-text); animation: ld-mirror-in .3s var(--ln-ease); }
.ld-build-price b { font-size: 19px; font-weight: 800; color: #b7f4d9; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ld-build-card::after { animation: none; display: none; }
  .ld-build-die svg [pathLength] { animation: none; stroke-dashoffset: 0; }
  .ld-build-die svg .ldf { animation: none; opacity: 1; }
  .ld-fact, .ld-ink, .ld-build-die, .ld-build-price { animation: none; }
}
.ld-build-spin { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid rgba(124, 92, 255, .25); border-top-color: var(--ln-vio); animation: ln-spin 1s linear infinite; }
@keyframes ln-spin { to { transform: rotate(360deg); } }
.ld-build-name { font-size: 13px; font-weight: 600; color: var(--ln-text); margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-build-steps { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 9px; }
/* mirror-back: the machine proving it read THEIR file, shown for a beat
 * between the last build step and the handoff */
.ld-build-mirror { margin-top: 15px; padding: 10px 12px; text-align: left; font-size: 12px; line-height: 1.55; color: #b7f4d9; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .32); border-radius: 10px; animation: ld-mirror-in .3s var(--ln-ease); }
@keyframes ld-mirror-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ld-build-steps li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ln-dim2); transition: color .2s var(--ln-ease); }
.ld-build-steps li i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ln-line2); flex: none; position: relative; transition: all .2s var(--ln-ease); }
.ld-build-steps li.active { color: var(--ln-text); }
.ld-build-steps li.active i { border-color: var(--ln-vio); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
.ld-build-steps li.done { color: var(--ln-mut); }
.ld-build-steps li.done i { border-color: var(--ln-grn); background: rgba(52, 211, 153, .15); }
.ld-build-steps li.done i::after { content: ''; position: absolute; left: 4px; top: 3.5px; width: 6px; height: 3.5px; border-left: 1.6px solid var(--ln-grn); border-bottom: 1.6px solid var(--ln-grn); transform: rotate(-45deg); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .ln-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ln-hero-copy { padding-top: 6px; max-width: 560px; }
  .ln-stage { height: 430px; }
  .ln-quote { right: 6px; }
  .ln-show-grid { grid-template-columns: 1fr 1fr; }
  .ln-devicewrap { grid-column: 1 / -1; border-top: 1px solid var(--ln-line); }
  .ln-links { display: none; }
}
@media (max-width: 720px) {
  .ln-container { padding: 0 18px; }
  .ln-nav-in { height: 56px; }
  .ln-logo em { display: none; }
  .ln-btn.ghost { display: none; }
  .ln-hero { padding-top: 36px; }
  .ln-sub { font-size: 15px; }
  .ln-formats { padding-bottom: 36px; }
  .ln-how, .ln-showcase { padding-top: 64px; }
  .ln-cta { padding: 64px 0; }
  .ln-how .ln-flow { margin-bottom: 40px; }
  .ln-steps { grid-template-columns: 1fr; }
  .ln-step-arrow { transform: rotate(90deg); padding: 0; justify-self: center; }
  .ln-show-grid { grid-template-columns: 1fr; }
  .ln-why, .ln-quotecard { border-right: 0; border-bottom: 1px solid var(--ln-line); }
  .ln-cta-grid { grid-template-columns: 1fr; padding: 34px 26px; }
  .ln-cta-points { justify-content: flex-start; }
  /* stage becomes a flowing column: a fixed 340px pouch band up top (the
   * canvas pins to it), then the quote card BELOW the pouch — never over it */
  .ln-stage { height: auto; }
  .ln-stage::before { content: ''; display: block; height: 340px; }
  #lnHero3d, .ln-pouch-fallback { position: absolute; top: 0; bottom: auto; height: 340px; }
  .ln-pouch-fallback { left: 50%; height: auto; top: 24px; }
  .ln-stage-glow { inset: 12px 6% auto; height: 300px; }
  .ln-quote { position: static; width: auto; margin: 10px 2px 0; }
  /* anchor the 360° hint to the pouch BAND's foot, not the stacked column;
   * mobile pouch is centered (no FRAME_SHIFT) so the pill re-centers too */
  .ln-orbitbar { top: 300px; bottom: auto; left: 50%; }
  .ln-brands-row { justify-content: center; }
}
@media (max-width: 480px) {
  .ln-drop { padding: 20px 14px; gap: 10px; }
  .ln-drop-cta { font-size: 15px; padding: 15px 14px; gap: 8px; }
  .ln-h2 { font-size: 26px; }
  .ln-h2b { font-size: 28px; }
}
/* scroll-reveal: sections rise in once (JS adds .ln-reveal, then .ln-in) */
#landing .ln-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ln-ease), transform .6s var(--ln-ease); }
#landing .ln-reveal.ln-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #landing *, #landing *::before, #landing *::after { animation: none !important; transition: none !important; }
  #landing { scroll-behavior: auto; }
}

/* =========================================================================
 * Training cockpit (the #trainView pane) — diagnosis-right / action-left.
 * A token-driven system: one control language (buttons, chips, rows, inputs),
 * consistent 34px pane headers, 8px rhythm, tabular numerals everywhere a
 * number lives, reveal-on-hover row actions, and calm semantic color.
 * Semantic working palette: truth=green machine=amber die=magenta dim=cyan.
 * ========================================================================= */
#trainView { flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--bg); }
/* the cockpit owns the full stage — its own queue (left) + matrix (right) replace the app rails */
body.train-active #sidebar, body.train-active #matpanel, body.train-active #warnings { display: none !important; }
#tc {
  display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative;
  /* semantic tokens (names are load-bearing — JS + older rules reference them) */
  --truth: #3ad6a0; --machine: #f3b13f; --die: #e64aa0; --dim: #3fb6f5; --reject: #f15b6c;
  /* system tokens */
  --tc-r: 8px; --tc-rs: 6px;
  --tc-line2: rgba(148, 170, 200, .14);
  --tc-raise: rgba(148, 170, 200, .06);
  --tc-ring: 0 0 0 2px rgba(94, 234, 212, .35);
  --tc-dur: .14s; --tc-ease: cubic-bezier(.2, .7, .3, 1);
}
#tc, #tc * { scrollbar-width: thin; scrollbar-color: var(--tc-line2) transparent; }
#tc ::-webkit-scrollbar { width: 8px; height: 8px; }
#tc ::-webkit-scrollbar-thumb { background: var(--tc-line2); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
#tc ::-webkit-scrollbar-thumb:hover { background: rgba(94, 234, 212, .35); background-clip: content-box; }
#tc ::-webkit-scrollbar-track { background: transparent; }
.tc-empty { padding: 28px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tc-mut { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- header */
#tc-head { display: grid; grid-template-columns: 1.15fr 1.65fr 1.2fr auto; border-bottom: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.tc-hcell { padding: 10px 16px 9px; border-right: 1px solid var(--line); min-width: 0; transition: background var(--tc-dur) var(--tc-ease); }
.tc-hcell:last-child { border-right: 0; }
.tc-hlabel { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; font-weight: 600; }
.tc-hrow { display: flex; gap: 18px; }
.tc-stat { display: flex; flex-direction: column; font-size: 10px; color: var(--muted); line-height: 1.15; }
.tc-stat b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tc-stat.pos b { color: var(--truth); } .tc-stat.neg b { color: var(--machine); } .tc-stat.rej b { color: var(--reject); }
.tc-sinks { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-sink { font-size: 10.5px; border: 1px solid var(--line); border-radius: var(--tc-rs); padding: 3px 8px; color: var(--label); background: rgba(148, 170, 200, .03); }
.tc-sink i { font-style: normal; font-weight: 700; color: var(--truth); font-variant-numeric: tabular-nums; margin-left: 2px; }
.tc-slow { font-size: 9px; color: var(--muted); margin-top: 6px; letter-spacing: .01em; }
.tc-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; padding-right: 18px; }
/* the clickable accuracy cell */
.tc-hbtn { cursor: pointer; }
.tc-hbtn:hover { background: var(--tc-raise); }
.tc-hbtn:hover .tc-link { text-decoration: underline; text-underline-offset: 2px; }
.tc-acc { display: flex; align-items: baseline; gap: 9px; margin: 3px 0 2px; }
.tc-acc b { font-size: 28px; font-weight: 800; color: var(--truth); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tc-acc span { font-size: 10px; color: var(--muted); }
.tc-link { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------- buttons */
.tc-btn, .tc-savebtn {
  border: 0; border-radius: 7px; cursor: pointer; font-weight: 700; font: inherit; font-size: 12px;
  padding: 7px 14px; background: var(--accent); color: #08121d;
  transition: filter var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease);
}
.tc-btn:hover, .tc-savebtn:hover { filter: brightness(1.09); }
.tc-btn:active, .tc-savebtn:active { transform: translateY(1px); filter: brightness(.96); }
.tc-savebtn { width: 100%; height: 38px; background: var(--truth); font-size: 12.5px; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14); }
.tc-btn:focus-visible, .tc-savebtn:focus-visible, .tc-qrow:focus-visible, .tc-bulk:focus-visible, .tc-hbtn:focus-visible { outline: none; box-shadow: var(--tc-ring); }
/* icon verdict buttons — quiet until the row is engaged */
.tc-ab {
  width: 24px; height: 24px; border-radius: var(--tc-rs); border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; background: transparent;
  transition: color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease);
}
.tc-ab svg { width: 13px; height: 13px; display: block; }
.tc-ab:active { transform: scale(.92); }
.tc-ab.c:hover { color: var(--truth); background: rgba(58, 214, 160, .12); border-color: rgba(58, 214, 160, .4); }
.tc-ab.e:hover { color: var(--dim); background: rgba(63, 182, 245, .12); border-color: rgba(63, 182, 245, .4); }
.tc-ab.r:hover { color: var(--reject); background: rgba(241, 91, 108, .12); border-color: rgba(241, 91, 108, .4); }
.tc-ab.u:hover { color: var(--machine); background: rgba(243, 177, 63, .12); border-color: rgba(243, 177, 63, .4); }
.tc-acts { display: flex; gap: 3px; opacity: .38; transition: opacity var(--tc-dur) var(--tc-ease); }
.tc-lrow:hover .tc-acts, .tc-lrow.focus .tc-acts, .tc-lrow.editing .tc-acts, .tc-famtop .tc-acts { opacity: 1; }

/* ----------------------------------------------------------- body 3-pane */
/* minmax(0,…) lets the middle track shrink below its content's min-content —
 * without it the (correctly) tall dieline SVG forces the track wider than the
 * window; the single row is bounded to the body height so the SVG letterboxes. */
#tc-body { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
#tc-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
#tc-queue { display: flex; flex-direction: column; min-height: 0; flex: 1 1 38%; }
#tc-ledger { border-top: 2px solid var(--line); display: flex; flex-direction: column; min-height: 0; flex: 1 1 62%; background: var(--panel-2); }
#tc-stage { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(#0c1320, #0a111b); }
#tc-matrix { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel-2); }
.tc-panehd { min-height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--panel); flex: 0 0 auto; }
.tc-ttl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); font-weight: 700; white-space: nowrap; }
.tc-meta { margin-left: auto; font-size: 9.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

/* ------------------------------------------------------------------ queue */
.tc-qbar { display: flex; gap: 6px; align-items: center; padding: 8px 11px 6px; }
.tc-qsearch { flex: 1 1 auto; min-width: 0; height: 26px; background: rgba(8, 14, 24, .5); color: var(--text); border: 1px solid var(--line); border-radius: var(--tc-rs); padding: 0 9px; font: inherit; font-size: 11px; outline: none; transition: border-color var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease); }
.tc-qsearch::placeholder { color: var(--muted); }
.tc-qsearch:focus { border-color: var(--accent); box-shadow: var(--tc-ring); }
.tc-qf { flex: 0 0 auto; font-size: 10px; height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease); }
.tc-qf i { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-qf:hover { color: var(--text); border-color: var(--tc-line2); }
.tc-qf.on { border-color: var(--accent); color: var(--accent); background: rgba(94, 234, 212, .08); }
.tc-bulk { display: flex; align-items: center; gap: 6px; margin: 4px 11px 4px; padding: 7px 11px; border: 1px solid rgba(58, 214, 160, .4); border-radius: 7px; background: rgba(58, 214, 160, .07); color: var(--truth); font-size: 10.5px; font-weight: 600; cursor: pointer; user-select: none; transition: background var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) var(--tc-ease); }
.tc-bulk:hover { background: rgba(58, 214, 160, .14); border-color: rgba(58, 214, 160, .6); }
.tc-bulk .tc-mut { font-weight: 400; margin-left: auto; }
.tc-qlist { overflow: auto; flex: 1 1 auto; }
.tc-qrow { display: flex; gap: 9px; align-items: center; min-height: 46px; padding: 7px 13px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--tc-dur) var(--tc-ease); }
.tc-qrow:hover { background: var(--tc-raise); }
.tc-qrow.on { background: rgba(94, 234, 212, .06); box-shadow: inset 2px 0 0 var(--accent); }
.tc-pip { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(148, 170, 200, .07); }
.tc-qmeta { flex: 1; min-width: 0; }
.tc-fn { font-size: 11.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-qsub { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.tc-ubar { height: 3px; border-radius: 2px; background: rgba(148, 170, 200, .1); margin-top: 5px; overflow: hidden; }
.tc-ubar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.tc-ubar.mid i { background: var(--machine); }
.tc-ubar.hi i { background: var(--reject); }
.tc-learned { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; color: #08121d; background: var(--truth); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.tc-multi { display: inline-block; background: var(--accent); color: #06202a; font-weight: 700; font-size: 9px; padding: 0 5px; border-radius: 4px; margin-right: 3px; }
.tc-src { color: #c4a3ff; }

/* ----------------------------------------------------------------- ledger */
.tc-prog2 { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--muted); margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-pbar { display: inline-block; width: 56px; height: 4px; border-radius: 2px; background: rgba(148, 170, 200, .12); overflow: hidden; }
.tc-pbar i { display: block; height: 100%; border-radius: 2px; background: var(--truth); transition: width .25s var(--tc-ease); }
.tc-famcard { padding: 11px 14px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tc-famtop { display: flex; align-items: center; gap: 8px; }
.tc-fambadge { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #08121d; background: var(--truth); padding: 3px 9px; border-radius: var(--tc-rs); }
.tc-why { font-size: 10px; color: var(--muted); margin-top: 7px; font-style: italic; line-height: 1.45; }
.tc-reclass { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; max-height: 46px; overflow-y: auto; }
.tc-rc { font-size: 9.5px; height: 22px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; color: var(--label); cursor: pointer; transition: color var(--tc-dur) var(--tc-ease), border-color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease); }
.tc-rc:hover { border-color: var(--accent); color: var(--text); background: rgba(94, 234, 212, .07); }
.tc-rc.tc-add { border-style: dashed; color: var(--accent); }
.tc-lrows { overflow: auto; flex: 1 1 auto; min-height: 130px; }
.tc-lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 40px; padding: 7px 14px; border-bottom: 1px solid var(--line); align-items: center; transition: background var(--tc-dur) var(--tc-ease); }
.tc-lrow:hover { background: var(--tc-raise); }
.tc-lrow.disp { background: rgba(243, 177, 63, .07); }
.tc-lrow.disp:hover { background: rgba(243, 177, 63, .11); }
.tc-lrow.focus { box-shadow: inset 3px 0 0 var(--accent); background: rgba(94, 234, 212, .05); }
.tc-lrow.editing { box-shadow: inset 3px 0 0 var(--accent); background: rgba(94, 234, 212, .06); }
.tc-lrow.done-ok { box-shadow: inset 3px 0 0 rgba(58, 214, 160, .8); }
.tc-lrow.done-ok .tc-k, .tc-lrow.done-ok .tc-vals { opacity: .62; }
.tc-lrow.done-rej { box-shadow: inset 3px 0 0 var(--reject); }
.tc-lrow.done-fix { box-shadow: inset 3px 0 0 var(--dim); }
.tc-k { font-size: 11px; color: var(--label); font-weight: 500; }
.tc-vals { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tc-gv { color: #5eead4; } .tc-vv { color: var(--machine); } .tc-tv { color: var(--truth); font-weight: 700; } .tc-author { color: #a98bff; }
.tc-old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.tc-arrow { color: var(--muted); margin: 0 6px; }
.tc-matgroup { border-top: 1px solid var(--line); }
.tc-grouphd { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 9px 14px 4px; font-weight: 600; }
.tc-savebar { padding: 11px 14px; border-top: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.tc-impact { font-size: 9.5px; color: var(--muted); margin-top: 8px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.tc-impact i { font-style: normal; color: var(--truth); }
/* provenance chips: where a value came from */
.tc-p { display: inline-block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1.5px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
.tc-p-you { background: rgba(243, 177, 63, .16); color: var(--machine); }
.tc-p-learned { background: rgba(58, 214, 160, .15); color: var(--truth); }
.tc-p-template { background: rgba(196, 163, 255, .15); color: #c4a3ff; }
.tc-p-file, .tc-p-geometry { background: rgba(94, 234, 212, .11); color: #5eead4; }
.tc-p-prooftext { background: rgba(63, 182, 245, .13); color: var(--dim); }
/* inline editor + ghosts */
.tc-edit { width: 100%; max-width: 170px; height: 28px; background: rgba(8, 14, 24, .55); color: var(--text); border: 1px solid var(--accent); border-radius: var(--tc-rs); padding: 0 8px; font: inherit; font-size: 12px; outline: none; }
.tc-edit:focus { box-shadow: var(--tc-ring); }
input.tc-edit[type=number] { width: auto; max-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
select.tc-edit { max-width: 210px; }
.tc-editu { margin-left: 6px; font-size: 11px; color: var(--muted); }
.tc-ghost { margin-left: 8px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.tc-editkeys { margin-left: 8px; font-size: 9px; color: var(--muted); white-space: nowrap; }
/* material stock suggestions */
.tc-matwrap { position: relative; display: inline-block; max-width: 100%; }
.tc-suggest { position: absolute; left: 0; top: calc(100% + 4px); z-index: 6; min-width: 240px; max-width: 310px; background: #101a2a; border: 1px solid var(--tc-line2); border-radius: var(--tc-r); overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); }
.tc-suggest:empty { display: none; }
.tc-sg { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 11px; font-size: 11px; cursor: pointer; transition: background var(--tc-dur) var(--tc-ease); }
.tc-sg + .tc-sg { border-top: 1px solid var(--line); }
.tc-sg:hover, .tc-sg.on { background: rgba(94, 234, 212, .1); box-shadow: inset 2px 0 0 var(--accent); }
.tc-sg b { color: var(--accent); font-variant-numeric: tabular-nums; }
.tc-sg i { font-style: normal; font-size: 9px; color: var(--muted); white-space: nowrap; }
/* multi-object: object switcher in the ledger */
.tc-objbar { padding: 9px 14px; border-bottom: 1px solid var(--line); background: rgba(94, 234, 212, .045); }
.tc-objlab { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; font-weight: 600; }
.tc-objpills { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-obj { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; background: var(--panel); line-height: 1.2; transition: border-color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease); }
.tc-obj b { font-size: 11px; letter-spacing: .03em; }
.tc-obj i { font-size: 9px; color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.tc-obj:hover { border-color: var(--accent); }
.tc-obj.on { border-color: var(--accent); background: rgba(94, 234, 212, .12); box-shadow: inset 0 0 0 1px var(--accent); }

/* ------------------------------------------------------------------ stage */
#tc-stagewrap {
  flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 0;
  background-image: radial-gradient(circle, rgba(148, 170, 200, .05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.tc-svg { max-width: 100%; max-height: 100%; }
.tc-stagecol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.tc-stagecol .tc-svg { flex: 1 1 auto; min-height: 0; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .35)); }
.tc-stagenote { font-size: 10.5px; }
/* layer toggle — a segmented control, tinted (not flooded) when active */
.tc-toggle { position: absolute; top: 12px; left: 14px; z-index: 2; display: flex; gap: 2px; padding: 2px; background: rgba(10, 17, 28, .8); border: 1px solid var(--line); border-radius: var(--tc-r); font-size: 10px; backdrop-filter: blur(6px); }
.tc-toggle b { min-height: 24px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: var(--tc-rs); color: var(--muted); cursor: pointer; user-select: none; font-weight: 600; letter-spacing: .02em; transition: color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease); }
.tc-toggle b:hover { color: var(--text); }
.tc-toggle b[data-layer="art"].on { background: rgba(58, 214, 160, .16); color: var(--truth); box-shadow: inset 0 0 0 1px rgba(58, 214, 160, .45); }
.tc-toggle b[data-layer="die"].on { background: rgba(230, 74, 160, .16); color: var(--die); box-shadow: inset 0 0 0 1px rgba(230, 74, 160, .45); }
.tc-noart { display: flex; gap: 14px; align-items: center; max-width: 420px; color: var(--text); }
.tc-noart-i { font-size: 40px; color: var(--die); }
/* HUD — keycap chips */
#tc-hud { border-top: 1px solid var(--line); background: var(--panel); padding: 7px 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 0 0 auto; }
.tc-key { font-size: 9.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.tc-key b {
  color: var(--text); font-size: 9.5px; font-weight: 700; min-width: 16px; text-align: center;
  background: rgba(148, 170, 200, .08); border: 1px solid var(--tc-line2); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px;
}
.tc-prog { margin-left: auto; font-size: 9.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }

/* ----------------------------------------------------------------- matrix */
.tc-matgrid { overflow: auto; flex: 1 1 auto; }
table.tc-mat { width: 100%; border-collapse: collapse; font-size: 10px; }
table.tc-mat th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--muted); text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
table.tc-mat th .tc-hue { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
table.tc-mat td { padding: 7px 9px; border-bottom: 1px solid var(--line); color: var(--label); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tc-mat tbody tr { transition: background var(--tc-dur) var(--tc-ease); }
table.tc-mat tbody tr:hover td { background: var(--tc-raise); }
table.tc-mat tr.disp td { background: rgba(243, 177, 63, .07); }
table.tc-mat tr.disp .tc-field { color: var(--machine); }
.tc-field { color: var(--text); font-weight: 600; }
.tc-mb { display: inline-block; height: 3px; width: 26px; border-radius: 2px; background: rgba(148, 170, 200, .12); overflow: hidden; vertical-align: middle; margin-left: 6px; }
.tc-mb i { display: block; height: 100%; border-radius: 2px; background: #5eead4; }
.tc-stab { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1.5px 6px; border-radius: 4px; }
.tc-stab.hi { color: var(--truth); background: rgba(58, 214, 160, .12); }
.tc-stab.lo { color: var(--reject); background: rgba(241, 91, 108, .12); }
.tc-stab.sg { color: var(--muted); background: rgba(148, 170, 200, .08); }
.tc-matnote { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); line-height: 1.55; }
table.tc-mat td.okc { color: var(--truth); } table.tc-mat td.fixc { color: var(--machine); } table.tc-mat td.rejc { color: var(--reject); }
.tc-warn { display: inline-block; background: rgba(243, 177, 63, .16); color: var(--machine); font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 4px; margin-left: 4px; }

/* --------------------------------------------------------- accuracy report */
#tc-report { display: none; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 22px; background: linear-gradient(#0c1320, #0a111b); }
.tc-rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tc-rp-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.tc-rp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.tc-rcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tc-rcard-l { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.tc-rcard-b { font-size: 21px; font-weight: 800; margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tc-rcard-s { font-size: 10px; color: var(--muted); }
.tc-rp-sec { margin-bottom: 22px; }
.tc-rp-title { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tc-rp-sub { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.tc-rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tc-cf td.cf { text-align: center; font-weight: 700; }
.tc-cf td.cf.ok { background: rgba(58, 214, 160, .14); color: var(--truth); }
.tc-cf td.cf.err { background: rgba(243, 177, 63, .16); color: var(--machine); }
.tc-cf td.cf.z { color: var(--muted); opacity: .45; }

/* ------------------------------------------------------------------ toast */
#tc-toast {
  position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 7px;
  background: rgba(16, 26, 42, .96); border: 1px solid rgba(58, 214, 160, .5); color: var(--text);
  font-size: 11.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--tc-ease), transform .2s var(--tc-ease); z-index: 30;
}
#tc-toast::before { content: '✓'; color: var(--truth); font-weight: 800; }
#tc-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------- responsive */
/* narrow: stack the three panes. The stage row would otherwise size to the
 * (tall) dieline SVG and blow out the column, so bound it explicitly and let
 * minmax(0,…) shrink the track below the SVG's min-content width. */
@media (max-width: 980px) {
  #tc-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  #tc-head { grid-template-columns: 1fr 1fr; }
  #tc-stage { height: 68vh; min-height: 320px; }
  .tc-rp-cards { grid-template-columns: 1fr 1fr; }
  .tc-rp-two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #tc *, #tc *::before, #tc *::after { transition: none !important; animation: none !important; }
}

/* =========================================================================
   3D studio chrome — inert overlays inside #threeHost (wired by app.js).
   Same light on-canvas idiom as #zoomCtrls / #legend / #readout.
   ========================================================================= */
#threeHost { position: relative; }

/* containers never eat orbit-drag: only the controls take input */
.v3d-overlay { position: absolute; z-index: 5; pointer-events: none; }
.v3d-overlay > * { pointer-events: auto; }

/* low-confidence guess banner — the 3D is a fallback guess, say so on it */
#v3dGuessBanner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  max-width: min(92%, 560px); z-index: 6; pointer-events: none;
  background: rgba(30, 26, 8, 0.86); border: 1px solid rgba(255, 196, 0, 0.55);
  color: #ffd75e; border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; line-height: 1.45; text-align: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.v3d-overlay[hidden] { display: none !important; }  /* author display beats UA [hidden] */

/* --- stage bar (top-left) + shot bar (top-right) --- */
#v3dStages { top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 50%; }
#v3dShots  { top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 46%; }

.v3d-chip {
  font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.v3d-chip:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
.v3d-chip.on { background: var(--accent); border-color: var(--accent); color: #0b1320; }
.v3d-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#v3dReplay { margin-left: 6px; }

/* --- timeline scrubber (floating pill, bottom center) --- */
#v3dTimeline {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 20px);            /* shrink inside narrow hosts */
  display: flex; align-items: center; gap: 10px;
  background: #ffffffe8; border: 1px solid #cdd6e2; border-radius: 999px;
  padding: 6px 12px; box-shadow: 0 4px 14px rgba(20,30,48,.12);
}
#v3dTLmode {
  font-family: ui-monospace, Menlo, "SF Mono", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #26477e; background: #e7eefb; border: 1px solid #c6d6f1;
  border-radius: 999px; padding: 2px 8px;
}
#v3dTL { flex: 1 1 auto; width: 340px; min-width: 60px; accent-color: var(--accent); }
#v3dTL:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.v3d-tl-hint { font-size: 10px; color: #5b6677; white-space: nowrap; }

/* --- hero-shot ready card (bottom-right) --- */
#v3dHeroCard {
  right: 12px; bottom: 14px; width: 208px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fffffff2; border: 1px solid #cdd6e2; border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 6px 20px rgba(20,30,48,.18); color: #25313f;
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;   /* entrance via .show */
}
#v3dHeroCard.show { opacity: 1; transform: none; }
#v3dHeroCard:not(.show) > * { pointer-events: none; }   /* invisible card must not catch clicks */
.v3d-hero-t { font-size: 12px; }
#v3dHeroImg { display: block; width: 100%; max-width: 180px; border-radius: 6px; border: 1px solid #dde3ec; background: #eef1f6; }
#v3dHeroImg:not([src]) { display: none; }                /* no broken-image icon while unwired */
.v3d-hero-btns { display: flex; gap: 6px; }
.v3d-hero-btns .btn { flex: 1 1 auto; }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.v3d-hero-btns .btn:disabled { opacity: .45; cursor: not-allowed; }
#v3dHeroX {
  position: absolute; top: 4px; right: 6px;
  background: none; border: none; color: #5b6677; font-size: 14px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
#v3dHeroX:hover { color: #25313f; background: #eef1f6; }
#v3dHeroX:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Roll unwind-position guide — upper-left, clear of the top-right shots and the
   bottom-right hero card. Shown only for the label-roll host (app.js). */
#v3dRollGuide {
  left: 12px; top: 96px; width: 198px;
  display: flex; flex-direction: column; gap: 7px;
  background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: var(--r-lg, 10px);
  padding: 9px 11px; box-shadow: var(--shadow-2); color: var(--text);
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
  opacity: 0; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
}
#v3dRollGuide.show { opacity: 1; transform: none; }
#v3dRollGuide:not(.show) > * { pointer-events: none; }
/* Roll peel-&-reveal: the PROMINENT floating action by the reel — peeling is
   the whole point of a P&R label, so it must not hide in the bottom bar. */
#v3dPeelFab {
  left: 50%; bottom: 64px; transform: translateX(-50%) translateY(8px);
  pointer-events: auto; cursor: pointer;
  font: 700 14px/1 inherit; letter-spacing: .01em;
  background: var(--accent); color: #0b1320; border: 0; border-radius: 999px;
  padding: 12px 20px; box-shadow: var(--shadow-2), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0; transition: opacity .28s ease, transform .28s ease, background .15s ease;
}
#v3dPeelFab.show { opacity: 1; transform: translateX(-50%); }
#v3dPeelFab:hover { filter: brightness(1.08); }
#v3dPeelFab.on { background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--text); border: 1px solid var(--line); }
#v3dPeelFab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #v3dPeelFab { transition: none; } }
.v3d-guide-t { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--text); }
.v3d-guide-num { background: var(--accent); color: #0b1320; font-size: 10px; line-height: 1; padding: 2px 6px; border-radius: 999px; }
#v3dGuideArt svg { display: block; width: 100%; height: auto; }
#v3dRollPosSel {
  width: 100%; font-size: 10.5px; padding: 3px 4px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text);
}
#v3dRollPosSel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v3d-guide-cap { font-size: 10px; line-height: 1.35; color: var(--muted); }
.v3d-guide-cap b { color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  #v3dHeroCard, #v3dRollGuide { transition: none; }
}

/* mobile: bars wrap tighter, timeline goes full-width */
@media (max-width: 760px) {
  #v3dStages, #v3dShots { max-width: 48%; }
  #v3dTimeline { left: 10px; right: 10px; transform: none; border-radius: 12px; }
  #v3dTL { flex: 1 1 auto; width: auto; min-width: 0; }
  .v3d-tl-hint { display: none; }
}

/* =========================================================================
 * QUOTE MODE — the customer moment after artwork upload: full-bleed 3D with
 * the reveal, a floating interactive quote card, rails hidden until the user
 * opens the full studio.
 * ========================================================================= */
body.quote-mode #sidebar, body.quote-mode #matpanel { display: none !important; }
body.quote-mode #filmstrip { display: none !important; }
/* customer quote view = the 3D + the price panel only. Hide studio navigation
 * (all tabs except 3D), the Save/Load/Export controls, and the manufacturing-
 * checks bar so nothing offers a way around the quote or exposes studio tools. */
body.quote-mode #tabs button[data-tab]:not([data-tab="3d"]) { display: none !important; }
body.quote-mode #btnJSON, body.quote-mode #btnLoadJSON, body.quote-mode #exportMenu { display: none !important; }
body.quote-mode #warnings { display: none !important; }
/* rotate affordance — customer quote view only. The reveal already signals 3D;
 * this makes "you can spin it" discoverable, then fades on first drag. */
#v3dOrbitHint { display: none; }
body.quote-mode #v3dOrbitHint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(15,23,42,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none; white-space: nowrap; transition: opacity .45s ease; }
#v3dOrbitHint.faded { opacity: 0; }
.v3d-orbit-k { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #f2f5fb; }
.v3d-orbit-k svg { color: #8aa6ff; }
.v3d-orbit-t { font-size: 11px; color: #c3ccda; }
@media (prefers-reduced-motion: reduce) { #v3dOrbitHint { transition: none; } }
@media (max-width: 640px) { body.quote-mode #v3dOrbitHint { display: none; } }  /* panel docks bottom here */
#v3dQuote {
  position: absolute; right: 12px; top: 56px; width: 340px; z-index: 6;
  max-height: calc(100vh - 76px); overflow-y: auto;
  background: #ffffffe8; border: 1px solid #d8dfe8; border-radius: 12px;
  box-shadow: 0 12px 40px -12px rgba(15,27,45,.35);
  color: #25313f; font-size: 13px; padding: 14px 16px;
  pointer-events: auto; backdrop-filter: blur(6px);
}
#v3dQuote[hidden] { display: none !important; }
.qm-eyebrow { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #4dabf7; font-weight: 700; }
.qm-prod { font-size: 12.5px; color: #5b6b7c; margin-top: 2px; }
.qm-price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.qm-price .pu { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qm-price .per { font-size: 12px; color: #5b6b7c; }
.qm-total { font-size: 12.5px; color: #5b6b7c; font-variant-numeric: tabular-nums; }
.qm-err { font-size: 13px; color: #9a6700; margin-top: 10px; }
.qm-lab { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #8b97a8; margin: 12px 0 5px; }
.qm-qty { display: flex; gap: 5px; flex-wrap: wrap; }
.qm-qty button { border: 1px solid #d8dfe8; background: #fff; border-radius: 6px; padding: 3px 9px;
  font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.qm-qty button.on { background: #4dabf7; border-color: #4dabf7; color: #fff; font-weight: 700; }
.qm-speed input[type=range] { width: 100%; accent-color: #4dabf7; }
.qm-speed-row { display: flex; justify-content: space-between; font-size: 11px; color: #5b6b7c; }
.qm-speed-row .on { color: #25313f; font-weight: 700; }
.qm-lead { font-size: 12px; color: #25313f; margin-top: 4px; }
.qm-lead b { font-variant-numeric: tabular-nums; }
.qm-note { font-size: 10.5px; color: #8b97a8; margin-top: 10px; line-height: 1.45; }
/* detected-spec block */
.qm-spec { margin-top: 11px; padding: 9px 11px; background: #f6f9fc; border: 1px solid #e6edf3; border-radius: 9px;
  display: flex; flex-direction: column; gap: 6px; }
.qm-srow { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.qm-srow .qm-k { flex: none; width: 78px; color: #8b97a8; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.qm-srow .qm-v { color: #25313f; font-weight: 600; }
.qm-inks { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.qm-ink { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #33445c;
  border: 1px solid #e2e8f0; border-radius: 999px; padding: 1px 8px 1px 3px; background: #fff; }
.qm-ink i { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.15);
  background: repeating-linear-gradient(45deg, #c9d3de 0 3px, #eef2f6 3px 6px); }
/* selectable spec controls (base material / laminate / effects / colours) —
 * the matSel/matSelReq markup (.matrow) restyled for the light quote card */
.qm-spec .matrow { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.qm-spec .matrow .k { flex: none; width: 78px; color: #8b97a8; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.qm-spec .matrow select { flex: 1 1 auto; min-width: 0; width: auto !important; font-size: 12px; color: #25313f;
  background: #fff; border: 1px solid #d8e0ea; border-radius: 7px; padding: 4px 7px; cursor: pointer; }
.qm-spec .matrow select:hover { border-color: #b7c4d6; }
.qm-spec .matrow select:focus-visible { outline: 2px solid #4dabf7; outline-offset: 1px; }
.qm-spec .matrow.mat-unset select { border-color: #e8a33d; background: #fff8ee; }
.qm-spec .matrow .mat-need { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #b26a00; background: #ffeccc; border-radius: 5px; padding: 2px 6px; }
.qm-colwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.qm-count { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #d8e0ea; border-radius: 7px; background: #fff; }
.qm-count b { min-width: 20px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #25313f; }
.qm-step { width: 22px; height: 22px; border: 0; background: transparent; color: #5b6a7d; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; }
.qm-step:hover { background: #eef3f9; color: #1c7ed6; }
.qm-hintlite { font-size: 11px; color: #9aa7b6; font-style: italic; }
.qm-effs { display: flex; flex-wrap: wrap; gap: 5px; }
.qm-eff { font-size: 11px; color: #4a5768; background: #fff; border: 1px solid #dbe3ec; border-radius: 999px;
  padding: 3px 10px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.qm-eff:hover { border-color: #b7c4d6; }
.qm-eff.on { color: #0b5bb5; background: #e8f1fd; border-color: #9cc3f0; font-weight: 600; }
.qm-eff.on::before { content: '✓ '; }
/* email gate */
/* "we read your file" trust line — small, quiet reassurance above the ask */
.qm-detected { font-size: 11px; color: #2e9c6a; font-weight: 600; margin-top: 5px; }
/* EMAIL HERO — the panel's focal point: solid accent card, full-width field
 * then a full-width benefit CTA (bigger tap target, single clear next step) */
.qm-gate { margin-top: 13px; padding: 15px 15px 13px; border: 1px solid #cfe0fb; border-radius: 12px;
  background: linear-gradient(180deg, #eaf3ff, #f6faff); box-shadow: 0 1px 0 rgba(31,51,80,.03), 0 6px 18px -12px rgba(41,98,190,.35); }
.qm-gate-h { font-size: 16px; font-weight: 800; color: #16233a; letter-spacing: -.01em; }
.qm-gate-p { font-size: 12px; color: #55657a; margin: 4px 0 11px; line-height: 1.5; }
.qm-gate-row { display: flex; flex-direction: column; gap: 7px; }
.qm-gate-row input { width: 100%; min-width: 0; border: 1px solid #c3d3ea; border-radius: 9px; padding: 11px 12px; font-size: 13.5px; background: #fff; }
.qm-gate-row input:focus-visible { outline: 2px solid #4dabf7; outline-offset: 1px; border-color: #4dabf7; }
.qm-gate-row input.qm-bad { border-color: #ff6b6b; box-shadow: 0 0 0 2px rgba(255,107,107,.18); }
.qm-gate-row button { width: 100%; background: linear-gradient(180deg, #4dabf7, #2f8fe6); color: #fff; border: 0; border-radius: 9px;
  padding: 11px 12px; font-weight: 800; font-size: 13.5px; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(41,98,190,.6); }
.qm-gate-row button:hover { filter: brightness(1.04); }
.qm-gate-note { font-size: 10.5px; color: #8b97a8; margin-top: 8px; text-align: center; }
/* price teaser (A/B: blurred exact figure OR visible range) — the anchor that
 * makes the email feel worth it; the exact number is what the submit reveals */
.qm-teaser { text-align: center; margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid #dbe7fb; }
.qm-teaser-fig { display: inline-flex; align-items: baseline; gap: 4px; position: relative; }
.qm-teaser-fig .pu { font-size: 30px; font-weight: 800; color: #16233a; letter-spacing: -.02em;
  filter: blur(7px); user-select: none; -webkit-user-select: none; }
.qm-teaser-fig .per { font-size: 12px; color: #55657a; filter: blur(4px); user-select: none; }
.qm-teaser-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; filter: none; }
.qm-teaser-range { font-size: 24px; font-weight: 800; color: #16233a; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.qm-teaser-range span { font-size: 12px; font-weight: 600; color: #55657a; }
.qm-teaser-sub { font-size: 11.5px; color: #55657a; margin-top: 4px; }
/* trust strip under the CTA */
.qm-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 10px;
  font-size: 10.5px; color: #7c8a9b; }
.qm-trust span { white-space: nowrap; }
/* multi-SKU batch: the "N products, one email" anchor + the unlocked basket row */
.qm-batch-anchor { font-size: 12px; color: #1c5aa8; background: #e7f0fe; border-radius: 8px;
  padding: 7px 10px; margin: 0 0 11px; text-align: center; }
.qm-batch-anchor b { font-weight: 700; }
.qm-basket { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 11px 0; padding: 9px 12px; background: #f6f9fc; border: 1px solid #e6edf3; border-radius: 10px; }
.qm-basket-n { font-size: 12.5px; font-weight: 600; color: #25313f; }
.qm-basket .qm-link { font-size: 12.5px; color: #1c7ed6; font-weight: 600; }
.sr-price.locked { color: #8b97a8; font-variant-numeric: normal; letter-spacing: .02em; }
/* volume tiers */
.qm-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.qm-tier { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 1px solid #d8dfe8;
  background: #fff; border-radius: 7px; padding: 5px 2px; cursor: pointer; }
.qm-tier .qt-q { font-size: 11px; color: #8b97a8; font-variant-numeric: tabular-nums; }
.qm-tier .qt-p { font-size: 12px; font-weight: 700; color: #25313f; font-variant-numeric: tabular-nums; }
.qm-tier.on { border-color: #4dabf7; background: #eaf6ff; }
.qm-tier.on .qt-p { color: #1c7ed6; }
.qm-qtyrow { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11px; color: #8b97a8; }
.qm-qtyrow .qm-k { text-transform: uppercase; letter-spacing: .04em; }
.qm-qtyrow input { width: 78px; border: 1px solid #d8dfe8; border-radius: 6px; padding: 3px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.qm-speed input[type=range] { width: 100%; accent-color: #4dabf7; }
.qm-speed-row { display: flex; justify-content: space-between; font-size: 11px; color: #5b6b7c; }
.qm-speed-row .on { color: #25313f; font-weight: 700; }
/* actions */
.qm-actions { display: flex; gap: 7px; margin-top: 13px; }
.qm-actions .primary { flex: 1; background: #4dabf7; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 10px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.qm-actions .book { flex: none; background: #fff; border: 1px solid #4dabf7; color: #1c7ed6; border-radius: 8px;
  padding: 8px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.qm-sub { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.qm-link { background: none; border: 0; color: #5b6b7c; font-size: 12px; cursor: pointer; padding: 2px; }
.qm-link:hover { color: #1c7ed6; }
.qm-cap { background: #f4f7fa; border: 1px solid #e2e8f0; border-radius: 7px; padding: 5px 11px;
  font-size: 11.5px; cursor: pointer; color: #33445c; }
.qm-cap:hover { border-color: #4dabf7; }
/* collapsible spec editor — quiet by default so it never competes with the
 * email ask; the summary line reassures without unfolding the controls */
.qm-specwrap { margin-top: 10px; border: 1px solid #e6edf3; border-radius: 10px; background: #fff; overflow: hidden; }
.qm-spectoggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
  padding: 9px 11px; cursor: pointer; text-align: left; font: inherit; }
.qm-spectoggle:hover { background: #f6f9fc; }
.qm-st-lead { flex: none; font-size: 11px; font-weight: 600; color: #46566a; }
.qm-st-sum { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 11px; color: #8b97a8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-st-chev { flex: none; color: #9aa7b6; font-size: 11px; }
.qm-specwrap.need .qm-st-sum { color: #b26a00; font-weight: 600; }
.qm-specwrap.open { border-color: #cfe0fb; }
.qm-specwrap .qm-spec { margin-top: 0; border: 0; border-top: 1px solid #eef2f6; border-radius: 0; background: #fbfdff; }
/* secondary links row (locked state) — deliberately low-key */
.qm-sub-locked { justify-content: center; gap: 8px; margin-top: 11px; }
.qm-sub-locked .qm-link { font-size: 11.5px; }
.qm-sub-locked .qm-dot { color: #c2ccd8; }
#v3dQuote button:focus-visible { outline: 2px solid #4dabf7; outline-offset: 1px; }
/* true-mobile only: too narrow to reserve a side column, so the 3D takes the
 * full width and the panel docks across the bottom. The extra #view3d id
 * out-specifies the desktop `body.quote-mode #v3dQuote` rule below (which
 * otherwise wins on source order). */
@media (max-width: 640px) {
  body.quote-mode #view3d #v3dQuote { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; max-height: 46vh; }
}

/* compact hero card — a notification, not a panel */
#v3dHeroCard { width: 168px; padding: 8px 10px; font-size: 11px; }
#v3dHeroImg { max-width: 146px; }
.v3d-hero-t { font-size: 11px; }
.v3d-hero-btns .btn { font-size: 10.5px; padding: 3px 6px; }

/* =========================================================================
 * 3D studio chrome v2 — segmented pill groups, glass toolbar, quote card v2
 * ========================================================================= */
/* top bars: cohesive segmented groups, glass + theme-matched so they read on
   ANY stage backdrop (white Studio Sweep included) instead of a white-on-white
   island. Dark translucent group, borderless chip segments, accent when on. */
/* LIQUID GLASS — light frosted material (not a dark panel): translucent white,
   heavy blur + saturation for the glass distortion, a bright specular top edge
   and soft drop shadow to define it on ANY backdrop. Chip text goes dark for
   contrast on the light glass. */
#v3dStages, #v3dShots { display: inline-flex; flex-wrap: wrap; gap: 1px; align-items: center;
  max-width: 44%;                                                    /* lower profile — don't crowd the product */
  background: rgba(255, 255, 255, .38);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px; padding: 2px;
  box-shadow: 0 10px 30px -12px rgba(6, 10, 18, .55), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .18);
  backdrop-filter: blur(20px) saturate(1.9); -webkit-backdrop-filter: blur(20px) saturate(1.9); }
#v3dStages .v3d-chip, #v3dShots .v3d-chip { border: 0; background: transparent; border-radius: 999px;
  padding: 3px 9px; font-weight: 600; font-size: 10.5px; line-height: 1.35; letter-spacing: .01em; color: #2b3546; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
#v3dStages .v3d-chip:hover, #v3dShots .v3d-chip:hover { color: #0d1420; background: rgba(255, 255, 255, .55); }
#v3dStages .v3d-chip.on, #v3dShots .v3d-chip.on { background: var(--accent); color: #fff; }
#v3dReplay { margin-left: 4px; }
/* bottom timeline: one glass toolbar */
#v3dTimeline { background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
  display: flex; align-items: center; gap: 10px; }
#v3dTLmode { font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
#v3dTL { accent-color: var(--accent); }
#v3dRecTL { border: 0; background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
#v3dRecTL:hover { background: #e5484d; color: #fff; }
.v3d-tl-hint { display: none; }
/* the hero box is gone — its actions live on the quote card */
#v3dHeroCard { display: none !important; }
/* quote mode is the CUSTOMER moment: hide the engineer's toolbar too */
body.quote-mode #view3dBar { display: none !important; }
/* ---- quote card v2 ---- */
#v3dQuote { padding: 16px 18px; border-radius: 14px; }
.qm-price { margin-top: 12px; align-items: baseline; }
.qm-price .pu { font-size: 34px; }
.qm-price .total-inline { margin-left: auto; text-align: right; font-size: 12px; color: #5b6b7c; line-height: 1.35; font-variant-numeric: tabular-nums; }
.qm-price .total-inline b { display: block; color: #25313f; font-size: 14px; }
.qm-seg { display: flex; background: #eef3f9; border-radius: 10px; padding: 3px; gap: 3px; }
.qm-seg button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 6px 2px 5px;
  cursor: pointer; text-align: center; color: #5b6b7c; }
.qm-seg button .t { display: block; font-size: 12px; font-weight: 700; }
.qm-seg button .d { display: block; font-size: 9.5px; margin-top: 1px; color: #8b97a8; font-variant-numeric: tabular-nums; }
.qm-seg button.on { background: #fff; color: #25313f; box-shadow: 0 1px 4px rgba(15,27,45,.15); }
.qm-seg button.on .d { color: #4dabf7; font-weight: 700; }
.qm-lead { text-align: center; margin-top: 7px; font-size: 12.5px; }
.qm-qty { gap: 4px; }
.qm-qty button { flex: 1; padding: 5px 0; border-radius: 8px; }
.qm-qty input { flex: 1.3; text-align: right; }
.qm-share { margin-top: 9px; }
.qm-share button { padding: 7px 4px; border-radius: 8px; }
.qm-note { text-align: center; }

/* ---- chrome v3: ticker, collapsed checks, quote column, price ladder ---- */
#view3d { position: relative; }
/* reserve the quote panel's column so the 3D render pushes LEFT instead of
 * sitting under the panel — held down to the true-mobile breakpoint */
body.quote-mode #threeHost { margin-right: 372px; }
body.quote-mode #v3dQuote { right: 14px; top: 14px; width: 344px; }
@media (max-width: 640px) { body.quote-mode #threeHost { margin-right: 0; } }
/* looping ticker replaces the static disclaimer */
#view3dNote { overflow: hidden; white-space: nowrap; }
.v3d-ticker { display: inline-flex; gap: 64px; animation: v3dTick 36s linear infinite; will-change: transform; }
.v3d-ticker > span { flex: none; }
@keyframes v3dTick { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 32px)); } }
@media (prefers-reduced-motion: reduce) { .v3d-ticker { animation: none; } }
/* production checks: one pill, expand on demand */
#warnings .wmsg-sum { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #2b2410; border: 1px solid #6b5a1e; color: #e8d48b; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; cursor: pointer; }
#warnings .wmsg-sum.err { background: #2b1210; border-color: #7a2e2e; color: #f0b3ae; }
#warnings .wmsg-sum .tag { font: 700 10px/1 ui-monospace, monospace; letter-spacing: .08em; opacity: .8; }
#warnings .wmsg-sum .tw { margin-left: auto; }
#warnings:not(.open) .wmsg { display: none; }
#warnings.open .wmsg { display: flex; }
/* price-break ladder */
.qm-ladder { display: flex; flex-direction: column; gap: 4px; }
.qm-tier { display: grid; grid-template-columns: 34px 1fr 64px; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.qm-tier:hover { background: #f2f6fb; }
.qm-tier.on { background: #eaf3fd; border-color: #bcdcf8; }
.qm-tier .tq { font: 700 12px/1 ui-monospace, monospace; color: #33445c; }
.qm-tier .tbar { height: 8px; background: #eef3f9; border-radius: 4px; overflow: hidden; }
.qm-tier .tbar i { display: block; height: 100%; background: linear-gradient(90deg, #4dabf7, #74c0ff); border-radius: 4px; }
.qm-tier.on .tbar i { background: linear-gradient(90deg, #1c7ed6, #4dabf7); }
.qm-tier .tp { text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #25313f; }
.qm-tier.on .tp { color: #1c7ed6; }
.qm-custom { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: #8b97a8; }
.qm-custom input { width: 84px; border: 1px solid #d8dfe8; border-radius: 6px; padding: 3px 7px; font-size: 12px; text-align: right; }

/* ---- SKU carousel: rail, hint, error card, transition overlay ---- */
.v3d-xfade { position: absolute; inset: 0; z-index: 5; opacity: 1; pointer-events: none; }
.v3d-xfade canvas { width: 100%; height: 100%; display: block; }
#skuRail { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 6px; max-width: min(92%, 720px);
  background: rgba(16, 20, 26, .82); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px; padding: 6px 8px; backdrop-filter: blur(10px); }
#skuRail[hidden] { display: none !important; }
#skuRail .sr-nav { flex: none; width: 30px; height: 44px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .07); color: #dfe6ee; font-size: 20px; line-height: 1; cursor: pointer; }
#skuRail .sr-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
#skuRail .sr-nav:disabled { opacity: .3; cursor: default; }
#skuRail .sr-tiles { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
#skuRail .sr-tiles::-webkit-scrollbar { display: none; }
#skuRail .sr-tile { position: relative; flex: none; width: 52px; height: 48px; padding: 0; border-radius: 8px;
  border: 2px solid transparent; background: rgba(255, 255, 255, .06); overflow: hidden; cursor: pointer; }
#skuRail .sr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#skuRail .sr-tile .sr-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: #8b97a8; font-size: 16px; }
#skuRail .sr-tile .sr-price { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0 2px;
  background: rgba(10, 14, 18, .78); color: #cfe3f6; font: 600 9.5px/1 ui-monospace, monospace; text-align: center; }
#skuRail .sr-tile.on { border-color: #4dabf7; box-shadow: 0 0 0 3px rgba(77, 171, 247, .25); }
#skuRail .sr-tile.err { border-color: rgba(224, 82, 82, .8); }
#skuRail .sr-tile.err .sr-ph { color: #e05252; }
#skuRail .sr-meta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 4px 0 6px; color: #8b97a8; font-size: 9.5px; white-space: nowrap; }
#skuRail .sr-meta b { color: #eef2f7; font-size: 12px; }
#skuHint { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 7;
  padding: 7px 16px; border-radius: 999px; background: rgba(16, 20, 26, .82); color: #cfe3f6;
  border: 1px solid rgba(255, 255, 255, .09); font-size: 12.5px; pointer-events: none;
  animation: skuHintPulse 2.2s ease-in-out infinite; }
#skuHint[hidden] { display: none !important; }
#skuHint b { color: #4dabf7; }
@keyframes skuHintPulse { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #skuHint { animation: none; } }
#skuError { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 6;
  max-width: 380px; text-align: center; background: rgba(24, 16, 16, .92); border: 1px solid rgba(224, 82, 82, .5);
  border-radius: 14px; padding: 22px 26px; color: #f0d9d6; backdrop-filter: blur(8px); }
#skuError[hidden] { display: none !important; }
#skuError .se-name { font-weight: 700; margin-bottom: 6px; color: #fff; }
#skuError .se-msg { font-size: 13px; line-height: 1.5; }
#skuError .se-hint { margin-top: 10px; font-size: 11.5px; color: #b99; }
/* quote mode = the customer moment: studio pill bars yield to the SKU rail */
body.quote-mode #v3dStages, body.quote-mode #v3dShots { display: none !important; }
/* headline price pulse when a flip moves the number */
.qm-price.flash .pu, .qm-price.flash .total-inline b { animation: qmFlash .65s ease; }
@keyframes qmFlash { 0% { color: #1c7ed6; } 100% { color: inherit; } }

/* ============================== GENSTUDIO ==============================
 * brief sheet + concept rail + revise chip (genstudio.js owns the DOM).
 * Sheet/rail ride the landing --ln-* palette when present and fall back to
 * studio tokens; the revise chip is quote-mode-only (light .qm idiom). */
.gs-sheet[hidden] { display: none; }
.gs-sheet { position: fixed; inset: 0; z-index: 1200; background: rgba(4, 6, 12, .72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.gs-card { width: min(560px, 100%); background: var(--ln-panel, var(--panel, #171c26)); color: var(--ln-text, var(--text, #dde4ee)); border: 1px solid var(--ln-line2, #2a3345); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); position: relative; }
.gs-card h3 { margin: 0 0 10px; font-size: 16px; }
.gs-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; opacity: .7; }
.gs-x:hover { opacity: 1; }
.gs-briefwrap { position: relative; }
.gs-brief { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, .25); color: inherit; border: 1px solid var(--ln-line2, #2a3345); border-radius: 10px; padding: 10px 40px 10px 12px; font: inherit; font-size: 13.5px; resize: vertical; }
.gs-brief:focus { outline: none; border-color: var(--ln-vio, #7c5cff); }
.gs-mic { position: absolute; right: 8px; top: 8px; background: none; border: 0; font-size: 16px; cursor: pointer; opacity: .75; }
.gs-mic:hover { opacity: 1; }
.gs-mic.rec { animation: gs-pulse 1.1s infinite; opacity: 1; }
@keyframes gs-pulse { 50% { transform: scale(1.25); } }
.gs-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gs-fam { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ln-line2, #2a3345); background: none; color: inherit; cursor: pointer; }
.gs-fam.on { border-color: var(--ln-vio, #7c5cff); background: rgba(124, 92, 255, .14); }
.gs-dims label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ln-mut, #93a0b4); }
.gs-dims input { width: 62px; background: rgba(0, 0, 0, .25); color: inherit; border: 1px solid var(--ln-line2, #2a3345); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 12.5px; }
.gs-brand { margin-top: 12px; border-top: 1px solid var(--ln-line2, #2a3345); padding-top: 8px; }
.gs-brand summary { cursor: pointer; font-size: 12.5px; color: var(--ln-mut, #93a0b4); }
.gs-bname { flex: 1; min-width: 140px; background: rgba(0, 0, 0, .25); color: inherit; border: 1px solid var(--ln-line2, #2a3345); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12.5px; }
.gs-industry { background: rgba(0, 0, 0, .25); color: inherit; border: 1px solid var(--ln-line2, #2a3345); border-radius: 8px; padding: 7px; font: inherit; font-size: 12.5px; }
.gs-colors input { width: 34px; height: 26px; padding: 0; border: 1px solid var(--ln-line2, #2a3345); border-radius: 6px; background: none; cursor: pointer; }
.gs-logol { font-size: 12px; color: var(--ln-mut, #93a0b4); cursor: pointer; }
.gs-logostate { font-size: 11.5px; color: var(--ln-mut, #93a0b4); }
.gs-go { justify-content: space-between; margin-top: 14px; }
.gs-budget { font-size: 11.5px; color: var(--ln-mut, #93a0b4); }
.gs-generate { font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; color: #fff; background: linear-gradient(120deg, var(--ln-vio, #7c5cff), #4dabf7); }
.gs-generate:hover { filter: brightness(1.1); }
.gs-rail { position: fixed; left: 12px; bottom: 12px; z-index: 1150; width: 240px; background: var(--panel, #171c26); color: var(--text, #dde4ee); border: 1px solid #2a3345; border-radius: 12px; padding: 10px 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.gs-rail-head { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.gs-rail-feed { font-size: 11.5px; color: #93a0b4; min-height: 15px; }
.gs-rail-strip { display: flex; gap: 8px; margin-top: 8px; }
.gs-thumb { position: relative; border: 1px solid #2a3345; border-radius: 8px; background: none; padding: 3px; cursor: pointer; }
.gs-thumb:hover { border-color: var(--accent, #4dabf7); }
.gs-thumb canvas { display: block; border-radius: 5px; max-height: 96px; }
.gs-thumb span { position: absolute; top: 5px; left: 7px; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.gs-addmenu { position: absolute; z-index: 240; background: var(--panel, #171c26); border: 1px solid #2a3345; border-radius: 10px; padding: 4px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.gs-addmenu button { font: inherit; font-size: 12px; text-align: left; background: none; border: 0; color: inherit; padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.gs-addmenu button:hover { background: rgba(77, 171, 247, .12); }
.gs-revise { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 205; font: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 14px; border-radius: 999px; border: 1px solid #d8dfe8; background: #fff; color: #33445c; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
body.quote-mode .gs-revise { display: block; }
.gs-revise:hover { border-color: #4dabf7; }
.gs-hdbtn { position: absolute; bottom: 5px; right: 6px; font-size: 9px; font-weight: 800; color: #ffd76b; background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 2px 5px; cursor: pointer; }
.gs-hdbtn:hover { background: rgba(0, 0, 0, .8); }

.gs-svgbtn { right: auto; left: 6px; color: #7fd1ff; }
.gs-rail-txt { margin-top: 6px; }
.gs-tx-d summary { cursor: pointer; font-size: 11px; color: var(--ln-mut, #93a0b4); list-style: none; }
.gs-tx-d[open] summary { margin-bottom: 5px; }
.gs-tx-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.gs-tx-row > span { width: 46px; font-size: 10px; color: var(--ln-mut, #93a0b4); flex: none; }
.gs-tx { flex: 1; min-width: 0; background: rgba(0,0,0,.25); color: var(--text, #dde4ee); border: 1px solid #2a3345; border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 11px; }
textarea.gs-tx { resize: vertical; }
.gs-tx-apply { margin-top: 5px; width: 100%; font: inherit; font-size: 11px; font-weight: 700; padding: 6px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(120deg, var(--ln-vio, #7c5cff), #4dabf7); cursor: pointer; }

/* ============ PACKOUT tab (js/packout-view.js) ============ */
/* the tab view is the scroll container (flex child of #stage, like #priceView);
   .po-wrap is natural height inside it — height:100% on an unsized parent
   collapsed and killed the scroll. */
#packoutView { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* container-query context: the packout panels respond to the CENTRE COLUMN's
   own width (sidebar + material rail eat ~700px, so viewport media queries
   never fired and the 2-col grid stayed cramped/overflowing). */
.po-wrap { padding: 18px 22px 30px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; container-type: inline-size; container-name: pow; }
.po-empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.po-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 16px; }
.po-stat { background: var(--panel); border: 1px solid #2a3345; border-radius: 10px; padding: 10px 12px; }
.po-stat-v { font-size: 19px; font-weight: 750; line-height: 1.15; }
.po-stat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 2px; }
.po-stat-s { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* two-column review layout: the PLAN reads top-to-bottom in the main column
   (① unit → ② case → ③ pallet → ④ container & freight); the SIDE rail holds
   review checks (first — errors surface without scrolling), setup, alternatives */
/* tracks use minmax(0,..) so they SHRINK instead of overflowing a narrow
   centre column; the container query collapses to one column when the panel
   itself (not the viewport) is too tight for the two-up review layout. */
.po-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@container pow (max-width: 780px) { .po-grid { grid-template-columns: 1fr; } }
@supports not (container-type: inline-size) { @media (max-width: 1180px) { .po-grid { grid-template-columns: 1fr; } } }
.po-main, .po-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.po-card { background: var(--panel); border: 1px solid #2a3345; border-radius: 12px; padding: 14px 16px; }
.po-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.po-stepn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(77, 171, 247, .16); color: #74b6f7; font-size: 11px; font-weight: 750; flex: none; }
.po-h3btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.po-count { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  background: #ffd43b; color: #241a04; font-size: 11px; font-weight: 750; }
.po-count.po-ok { background: rgba(56, 217, 129, .18); color: #38d981; }
.po-kv { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 5px 14px; font-size: 13px; margin: 0; }
.po-kv dt { color: var(--muted); white-space: nowrap; }
.po-kv dd { margin: 0; }
.po-kv dd b { font-weight: 700; }
.po-freight { margin-top: 10px; padding-top: 10px; border-top: 1px solid #232c3c; }
.po-est { font-size: 10px; color: var(--muted); border: 1px solid #2a3345; border-radius: 8px; padding: 0 5px; }
.po-diagram { margin-top: 10px; background: #f4f6f9; border-radius: 8px; padding: 8px; }
.po-diagram svg { display: block; width: 100%; height: auto; max-height: 240px; }
.po-scroll { overflow-x: auto; }
table.po-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.po-t th, table.po-t td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #2a3345; white-space: nowrap; }
table.po-t th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table.po-t th.num, table.po-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.po-t tr.po-best td { background: rgba(77, 171, 247, .1); font-weight: 650; }
.po-bestchip { font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: #74b6f7;
  border: 1px solid rgba(77, 171, 247, .5); border-radius: 8px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.po-controls { display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 12.5px; }
.po-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.po-controls input, .po-controls select { flex: 1; min-width: 0; background: rgba(0,0,0,.25); color: inherit; border: 1px solid #2a3345; border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px; }
.po-advs { list-style: none; margin: 0; padding: 0; }
.po-adv { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; margin-bottom: 4px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; background: rgba(0,0,0,.14); border-left: 3px solid #3a4a63; }
.po-adv-i { flex: none; }
.po-adv.po-error { border-left-color: #ff6b6b; color: #ffb3b3; }
.po-adv.po-warn { border-left-color: #ffd43b; color: #ffe38a; }
.po-adv.po-info { color: var(--muted); }
.po-foot { font-size: 11px; color: var(--muted); padding: 0 4px; }
.po-dl { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.po-dl select { background: rgba(0,0,0,.25); color: inherit; border: 1px solid #2a3345; border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px; }

/* live freight (Ship-to) card */
.po-ship .po-shipnote { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.po-shiprow { display: flex; gap: 8px; align-items: center; }
.po-shiprow input { width: 150px; background: rgba(0,0,0,.25); color: inherit; border: 1px solid #2a3345; border-radius: 6px; padding: 6px 10px; font: inherit; letter-spacing: .08em; }
.po-rates { margin-top: 12px; }
.po-rate-msg { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.po-rate-err { color: #ff8787; }
.po-rate-head { font-size: 13px; margin-bottom: 8px; } .po-rate-head b { color: var(--fg); font-weight: 700; }

/* ============================================================================
   exp_landing_theme — 'light' arm (CRO): light page shell, dark media frame.
   Positive-polarity copy + trust register for B2B daytime/mobile traffic; the
   hero 3D + example quote keep the DARK theme inside a framed media window so
   the packshot drama survives. Pure token re-scope: every .ln-* component
   reads var(--ln-*), so the shell flips here and the frame re-pins the dark
   values for its subtree. Control (all-dark) is untouched.
   ========================================================================= */
#landing.ln-light {
  --ln-bg: #f6f7fb;
  --ln-panel: #ffffff;
  --ln-panel2: #eef0f6;
  --ln-line: rgba(16, 24, 40, .10);
  --ln-line2: rgba(16, 24, 40, .18);
  --ln-text: #171a23;
  --ln-mut: #4a5468;
  --ln-dim2: #67708a;
  --ln-vio: #5b3df0;   /* darkened for AA text/border contrast on the light shell */
  --ln-blu: #2761e6;
  --ln-grn: #0c8f62;
}
/* sticky nav: hard-coded dark glass in the base rule → light glass here */
#landing.ln-light .ln-nav { background: rgba(250, 251, 253, .82); }
/* the band CTA is a white pill (reads on the violet band); keep AA if a light
   arm ever renders it on the shell by giving it a dark fallback ring */
#landing.ln-light .ln-btn.light { box-shadow: 0 8px 26px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .08); }
/* error rescue block: the base colors are tuned for dark (#f4a6ae on a 7%
   wash is invisible on white) — deepen to AA red-on-light */
#landing.ln-light .ln-droperr { color: #c62436; }
#landing.ln-light .ln-droperr.rich { color: #a41f2f; background: rgba(198, 36, 54, .06); border-color: rgba(198, 36, 54, .32); }
#landing.ln-light .ln-droperr.rich b { color: #7f1826; }
/* FLOATING PACKSHOT: the hero 3D canvas is transparent (alpha renderer), so
   the pouch floats directly on the light shell — no frame box. The accent
   stage-glow behind it reads as a soft halo on light. Only the instant-quote
   EXAMPLE keeps its dark-glass look: its background is self-styled dark, so
   its token-driven text re-pins to the dark values (it reads as a preview of
   the studio the visitor lands in after upload). */
/* ground the floating pouch on light: a slightly stronger accent halo + a
   soft under-shadow ellipse — presence without a box, and pale/white pouch
   films can't wash into the shell */
#landing.ln-light .ln-stage-glow {
  background:
    radial-gradient(50% 12% at 50% 88%, rgba(16, 24, 40, .16), transparent 72%),
    radial-gradient(65% 60% at 50% 42%, color-mix(in srgb, var(--ln-accent) 24%, transparent), transparent 70%);
}
#landing.ln-light .ln-quote {
  --ln-line: rgba(255, 255, 255, .08);
  --ln-line2: rgba(255, 255, 255, .14);
  --ln-text: #f2f4fb;
  --ln-mut: #9aa3b8;
  --ln-dim2: #6b7488;
  --ln-vio: #7c5cff;
  --ln-blu: #4f7dff;
  --ln-grn: #34d399;
  color: var(--ln-text);
}