/* PrintShopCRM — themeable UI. Dark is the default; [data-theme="light"] overrides below. */

:root, :root[data-theme="dark"] {
  --bg: #0a0c0f;
  --bg-2: #101318;
  --panel: #151920;
  --panel-2: #1b2029;
  --line: #242a34;
  --line-2: #333b49;
  --txt: #eef1f6;
  --txt-2: #9aa5b6;
  --txt-3: #8792a6;
  --accent: #10d39a;
  --accent-2: #16e6aa;
  --accent-dim: #0b8f6a;
  --accent-glow: rgba(16, 211, 154, .14);
  --accent-ink: #04120d;
  --violet: #8b7cff;
  --amber: #f7b955;
  --red: #ff5f6d;
  --blue: #4aa8ff;
  --r: var(--r-md);            /* legacy alias — kept so nothing outside this file breaks */
  --shadow: 0 10px 34px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --grad: linear-gradient(135deg, #10d39a, #7c6cff);
  --grad-soft: linear-gradient(135deg, rgba(16,211,154,.16), rgba(124,108,255,.16));
  --glass: rgba(12, 15, 20, .72);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-2: #eceff4;
  --panel: #ffffff;
  --panel-2: #f4f6f9;
  --line: #e6eaf0;
  --line-2: #d5dbe4;
  --txt: #141922;
  --txt-2: #566072;
  --txt-3: #5c677a;
  --accent: #047857;
  --accent-2: #036049;
  --accent-dim: #06795a;
  --accent-glow: rgba(7, 177, 131, .12);
  --accent-ink: #ffffff;
  --violet: #6f5cf0;
  --amber: #a35c00;
  --red: #c5262c;
  --blue: #1b62c0;
  --shadow: 0 12px 34px rgba(28, 40, 66, .12);
  --shadow-sm: 0 2px 8px rgba(28, 40, 66, .08);
  --grad: linear-gradient(135deg, #07b183, #6f5cf0);
  --grad-soft: linear-gradient(135deg, rgba(7,177,131,.1), rgba(111,92,240,.1));
  --glass: rgba(255, 255, 255, .78);
  color-scheme: light;
}

/* ───────────────────────────── design system ─────────────────────────────
   Three scales, one source of truth. These are theme-independent (a step is a
   step in light and dark alike), so they live above the palette blocks and are
   deliberately NOT repeated in the [data-theme] overrides.

   Type — 7 UI steps (3xs…xl) plus 3 display steps. Nothing between the steps:
   the old sheet carried 31 sizes, 20 of them stacked in 0.5px increments
   between 8.5 and 16px, which reads as noise rather than hierarchy.
   Spacing — a 4px ramp with 2px and 6px half-steps for the dense chrome
   (pill insets, icon gaps) that a pure 4px ramp cannot express.
   Radius — 3 steps plus a pill token; 999px is what every 20px "pill" radius
   was actually reaching for.
   ------------------------------------------------------------------------ */
:root {
  /* type */
  --fs-3xs: 10px;   /* micro uppercase labels, counts, table headers */
  --fs-2xs: 11px;   /* captions, field labels, meta */
  --fs-xs:  12px;   /* secondary body, chips, tabs */
  --fs-sm:  13px;   /* dense body — table cells, nav, cards */
  --fs-md:  14px;   /* base body */
  --fs-lg:  16px;   /* section headings, inputs (also dodges iOS zoom) */
  --fs-xl:  20px;   /* card numbers, sub-headings */
  --fs-2xl: 26px;   /* page titles */
  --fs-3xl: 34px;   /* hero figures */
  --fs-4xl: 52px;   /* single celebratory mark */

  /* spacing — 4px ramp */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  32px;
  --sp-10: 40px;
  --sp-11: 48px;

  /* radius */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-full: 999px;

  /* the one focus ring — every focusable surface uses this, never a bare border swap */
  --ring: 0 0 0 3px var(--accent-glow);

  /* minimum comfortable touch target (WCAG 2.5.5) */
  --tap: 44px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg);
  color: var(--txt);
  font: var(--fs-md)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-sm); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- layout ---------- */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex: none; background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}

.brand { padding: var(--sp-7) var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--line); }
.brand h1 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.3px; display: flex; align-items: center; gap: var(--sp-4); }
.brand .dot { width: 9px; height: 9px; border-radius: var(--r-sm); background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.brand .sub { font-size: var(--fs-3xs); color: var(--txt-3); margin-top: var(--sp-3); line-height: 1.35; }

.nav { padding: var(--sp-5) var(--sp-5); flex: 1; overflow-y: auto; }
.nav-label { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .9px; color: var(--txt-3); padding: var(--sp-5) var(--sp-4) var(--sp-3); font-weight: 600; }

/* Reveals the advanced destinations. Styled as a quiet nav row, not a call to action — it is an
   escape hatch for people who want more, not something to draw a new user's eye. */
.nav-more {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  color: var(--txt-3); font: inherit; font-size: var(--fs-2xs); font-weight: 500;
  text-align: left; cursor: pointer; transition: color .12s;
}
.nav-more:hover { color: var(--txt); }
.nav-more .count {
  margin-left: auto; font-size: var(--fs-3xs); color: var(--txt-3);
  background: var(--panel-2, rgba(127,127,127,.14)); border-radius: 999px; padding: 1px 7px;
}
.nav a {
  display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  color: var(--txt-2); font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--sp-1); transition: .12s;
}
.nav a:hover { background: var(--panel); color: var(--txt); }
.nav a.on { background: var(--accent-glow); color: var(--accent); }
.nav a .ico { width: 16px; text-align: center; opacity: .9; font-size: var(--fs-sm); }
.nav a .count { margin-left: auto; font-size: var(--fs-3xs); background: var(--panel-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); color: var(--txt-2); }
.nav a.on .count { background: rgba(16, 211, 154, .2); color: var(--accent); }

.shopcard { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line); display: flex; gap: var(--sp-5); align-items: center; }
.shopcard .av { width: 30px; height: 30px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent), var(--violet)); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); color: var(--accent-ink); }
.shopcard .nm { font-size: var(--fs-xs); font-weight: 600; }
.shopcard .rl { font-size: var(--fs-3xs); color: var(--txt-3); }

/* Optional operator credit (PSC_HOST_BADGE_TEXT). Absent entirely on a self-hosted install. */
.host-badge {
  display: block; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line);
  font-size: var(--fs-3xs); color: var(--txt-3); text-decoration: none; letter-spacing: .02em;
}
a.host-badge:hover { color: var(--accent); }

/* AGPL §13 source offer. Always rendered — it is a licence obligation, not decoration. */
.source-link {
  display: block; padding: var(--sp-3) var(--sp-6) var(--sp-5);
  font-size: var(--fs-3xs); color: var(--txt-3); text-decoration: none; letter-spacing: .02em; opacity: .75;
}
.host-badge + .source-link { padding-top: 0; }
.source-link:hover { color: var(--accent); opacity: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 58px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-6);
  padding: 0 var(--sp-8); background: var(--glass); backdrop-filter: saturate(1.4) blur(14px); position: sticky; top: 0; z-index: 20;
}
.topbar h2 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.2px; }
.topbar .spacer { flex: 1; }
.crumb { color: var(--txt-3); font-size: var(--fs-sm); }
.crumb a:hover { color: var(--accent); }

.view { padding: var(--sp-8); max-width: 1500px; width: 100%; }
.menu-btn { display: none; }

/* Purposeful motion — a calm fade-rise on each page. Deliberately a SINGLE container fade with
   no fill-mode: content's natural state is always visible, so a dropped/deferred animation frame
   (seen on iOS) can never strand a card at opacity:0 — the page is never blank. */
.view-in { animation: viewIn .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.card { transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; }

.theme-toggle {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--panel-2); cursor: pointer; position: relative; transition: .18s; overflow: hidden;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle::before {
  content: '◐'; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-lg);
  transition: transform .4s cubic-bezier(.5,1.6,.4,1), opacity .3s;
}
:root[data-theme="light"] .theme-toggle::before { content: '◑'; }

/* ---------- primitives ---------- */

.btn {
  background: var(--accent); color: var(--accent-ink); border: 0; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-md);
  font-weight: 650; font-size: var(--fs-sm); cursor: pointer; transition: .12s; white-space: nowrap;
}
.btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: none; }
.btn.ghost { background: var(--panel-2); color: var(--txt); border: 1px solid var(--line-2); }
.btn.ghost:hover { background: var(--line); border-color: var(--txt-3); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid rgba(255, 95, 109, .35); }
.btn.danger:hover { background: rgba(255, 95, 109, .12); }
.btn.sm { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.input, select.input, textarea.input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); transition: .12s;
}
.input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
textarea.input { resize: vertical; min-height: 76px; line-height: 1.55; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa5b6' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px; padding-right: var(--sp-9); }
.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--txt-2); margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: .5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
/* Must live beside .grid2, ABOVE the mobile block that stacks them — a later base rule would
   override the media query and the three fields would stay side by side at 375px. */
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.card-h { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-5); }
.card-h h3 { font-size: var(--fs-sm); font-weight: 650; }
.card-h .spacer { flex: 1; }
.card-b { padding: var(--sp-6); }

.pill { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full); font-size: var(--fs-3xs); font-weight: 650; text-transform: uppercase; letter-spacing: .4px; border: 1px solid transparent; }
.pill.gray { background: var(--panel-2); color: var(--txt-2); border-color: var(--line-2); }
.pill.green { background: rgba(16, 211, 154, .13); color: var(--accent); border-color: rgba(16, 211, 154, .3); }
.pill.amber { background: rgba(247, 185, 85, .13); color: var(--amber); border-color: rgba(247, 185, 85, .3); }
.pill.red { background: rgba(255, 95, 109, .13); color: var(--red); border-color: rgba(255, 95, 109, .3); }
.pill.blue { background: rgba(74, 168, 255, .13); color: var(--blue); border-color: rgba(74, 168, 255, .3); }
.pill.violet { background: rgba(124, 108, 255, .15); color: #a99dff; border-color: rgba(124, 108, 255, .3); }

.tag { display: inline-block; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line-2); font-size: var(--fs-3xs); color: var(--txt-2); font-weight: 500; }
.sizetags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.sizetags .tag { font-family: var(--mono); font-size: var(--fs-3xs); padding: var(--sp-1) var(--sp-3); }

table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th {
  text-align: left; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .7px; color: var(--txt-3);
  font-weight: 650; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl td { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: .1s; }
table.tbl tbody tr.click { cursor: pointer; }
table.tbl tbody tr.click:hover { background: var(--panel-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--fs-xs); color: var(--txt-2); }

.empty { padding: var(--sp-11) var(--sp-7); text-align: center; color: var(--txt-3); }
.empty .big { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); opacity: .5; }
.empty p { font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

.muted { color: var(--txt-2); }
.dim { color: var(--txt-3); }
.right { text-align: right; }
.row { display: flex; gap: var(--sp-4); align-items: center; }
.wrap-row { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.sp { flex: 1; }

/* ---------- KPIs ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-7); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-6); position: relative; overflow: hidden; }
.kpi::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--accent); opacity: .55; }
.kpi.warn::after { background: var(--amber); }
.kpi.bad::after { background: var(--red); }
.kpi.info::after { background: var(--violet); }
.kpi .lbl { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .8px; color: var(--txt-3); font-weight: 650; }
.kpi .val { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.8px; margin: var(--sp-4) 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: var(--fs-2xs); color: var(--txt-2); }

.schednote { margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-5); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; }
.schednote.ok { border-left: 3px solid var(--accent); }
.schednote.risk { border-left: 3px solid var(--red); background: rgba(255, 95, 109, .07); }
.schednote .dim { font-size: var(--fs-2xs); }

.rollup { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-7); }
.rup { display: flex; align-items: center; gap: var(--sp-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); transition: .12s; }
.rup:hover { border-color: var(--line-2); transform: translateY(-1px); }
.rup-ic { font-size: var(--fs-xl); width: 26px; text-align: center; }
.rup-v { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.4px; display: flex; align-items: center; gap: var(--sp-3); }
.rup-l { font-size: var(--fs-2xs); color: var(--txt-3); margin-top: var(--sp-1); }
.rup-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }

.riskcard { border-color: rgba(255, 95, 109, .4); margin-bottom: var(--sp-6); }
.riskcard .card-h { background: rgba(255, 95, 109, .07); border-radius: var(--r-md) var(--r-md) 0 0; }
.riskcard .card-h h3 { color: var(--red); }

.cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-6); }
/* Grid/flex children default to min-width:auto and refuse to shrink below their content,
   which lets a wide table push the whole page sideways. Let them shrink; tables scroll instead. */
.cols > *, .stack > *, .kpis > *, .card { min-width: 0; }

/* ---------- board ---------- */

.boardbar { display: flex; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.boardbar .tabs button span { background: var(--bg); padding: 0 var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-3xs); margin-left: var(--sp-2); color: var(--txt-3); }
.boardbar .tabs button.on span { background: rgba(16, 211, 154, .2); color: var(--accent); }

.board { display: flex; gap: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-6); align-items: flex-start; }
.col-empty { text-align: center; color: var(--txt-3); font-size: var(--fs-2xs); padding: var(--sp-7) var(--sp-4); border: 1px dashed var(--line); border-radius: var(--r-md); }
.col-h .pcs { font-size: var(--fs-3xs); color: var(--txt-3); background: var(--panel-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.jpc { font-size: var(--fs-2xs); color: var(--txt-2); margin-top: var(--sp-3); }
.jpc strong { color: var(--txt); font-variant-numeric: tabular-nums; }
/* Sits in the card footer's flex flow, not absolutely over it: the pill row wraps on a narrow
   column, and an absolutely-placed assignee landed on top of whatever wrapped under it. */
.jassign { margin-left: auto; font-size: var(--fs-3xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .4px; }
.col { flex: 0 0 262px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; max-height: calc(100vh - 150px); }
.col-h { padding: var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-4); position: sticky; top: 0; background: var(--bg-2); border-radius: var(--r-md) var(--r-md) 0 0; z-index: 2; }
.col-h .nm { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .3px; }
.col-h .ct { font-size: var(--fs-3xs); color: var(--txt-3); background: var(--panel-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); margin-left: auto; }
.col-h .bar { width: 6px; height: 6px; border-radius: var(--r-sm); }
.col-b { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; flex: 1; min-height: 70px; }
.col.over { border-color: var(--accent); }
.col.over .col-b { background: var(--accent-glow); }

.jcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5);
  cursor: grab; transition: .12s; position: relative;
  touch-action: none; /* let pointermove drive the drag instead of scrolling the column */
  user-select: none;
}
.jcard:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.jcard.drag { opacity: .3; }
/* the floating clone that follows the cursor */
.jcard.ghost {
  position: fixed; z-index: 500; pointer-events: none; cursor: grabbing;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .6); border-color: var(--accent);
  transform: rotate(1.6deg) scale(1.02); opacity: .96; margin: 0;
}
body.dragging { cursor: grabbing; user-select: none; }
.jcard .jn { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--txt-3); }
.jcard .ti { font-size: var(--fs-sm); font-weight: 600; margin: var(--sp-2) 0 var(--sp-3); line-height: 1.35; }
.jcard .cn { font-size: var(--fs-2xs); color: var(--txt-2); display: flex; align-items: center; gap: var(--sp-3); }
.jcard .ft { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.jcard .due { font-size: var(--fs-3xs); color: var(--txt-3); font-variant-numeric: tabular-nums; }
.jcard .due.soon { color: var(--amber); }
.jcard .due.late { color: var(--red); font-weight: 600; }
.jcard.rush { border-left: 2px solid var(--red); }
.jcard .rushb { position: absolute; top: 9px; right: 9px; font-size: var(--fs-3xs); font-weight: 700; color: var(--red); letter-spacing: .5px; }

/* ---------- modal ---------- */

.modal-bg { position: fixed; inset: 0; background: rgba(4, 6, 9, .72); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 5vh var(--sp-6); overflow-y: auto; }
.modal { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); width: 100%; max-width: 560px; box-shadow: var(--shadow); animation: pop .16s ease-out; }
.modal.wide { max-width: 900px; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
.modal-h { padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-5); }
.modal-h h3 { font-size: var(--fs-lg); font-weight: 650; }
.modal-h .x { margin-left: auto; background: 0; border: 0; color: var(--txt-3); font-size: var(--fs-xl); cursor: pointer; line-height: 1; padding: 0 var(--sp-2); }
.modal-h .x:hover { color: var(--txt); }
.modal-b { padding: var(--sp-7); }
.modal-f { padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--line); display: flex; gap: var(--sp-4); justify-content: flex-end; background: var(--bg-2); border-radius: 0 0 var(--r-md) var(--r-md); }

/* ---------- line items ---------- */

.items { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.items .ih, .items .ir { display: grid; grid-template-columns: 2.4fr 1.1fr .7fr .8fr .8fr 30px; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); }
.items .ih { background: var(--bg-2); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); font-weight: 650; border-bottom: 1px solid var(--line); }
.items .ir { border-bottom: 1px solid var(--line); }
.items .ir:last-child { border-bottom: 0; }
.items .input { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
.items .del { background: 0; border: 0; color: var(--txt-3); cursor: pointer; font-size: var(--fs-lg); }
.items .del:hover { color: var(--red); }
.items .amt { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: right; padding-right: var(--sp-2); }
/* ---------- size grid ---------- */

.qtycell {
  text-align: right; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--txt-2);
  padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--bg);
}
.sizegrid {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-5) var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.sz { display: flex; flex-direction: column; gap: var(--sp-1); width: 54px; }
.sz > span { font-size: var(--fs-3xs); font-weight: 700; color: var(--txt-3); letter-spacing: .5px; text-align: center; }
.sz > span em { font-style: normal; color: var(--amber); font-weight: 600; margin-left: var(--sp-1); }
.sz input {
  width: 100%; text-align: center; background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-1); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; transition: .12s;
}
.sz input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.sz.on input { border-color: var(--accent-dim); background: var(--accent-glow); color: var(--txt); font-weight: 600; }
.sz-more {
  width: 26px; height: 30px; align-self: flex-end; background: var(--panel-2); border: 1px dashed var(--line-2);
  color: var(--txt-3); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-md);
}
.sz-more:hover { border-color: var(--accent); color: var(--accent); }
.sz-sum { margin-left: auto; align-self: flex-end; font-size: var(--fs-2xs); color: var(--txt-2); font-variant-numeric: tabular-nums; }

.sizebar { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sizebox {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 50px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.sizebox span { font-size: var(--fs-3xs); font-weight: 700; color: var(--txt-3); letter-spacing: .5px; }
.sizebox strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.sizebox.tot { background: var(--accent-glow); border-color: var(--accent-dim); }
.sizebox.tot strong, .sizebox.tot span { color: var(--accent); }

/* ---------- quote calculator ---------- */

.quote { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-7); }
.qloc { display: grid; grid-template-columns: 1fr 72px auto 26px; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-3); }
.qloc .input { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
.quote-out { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6); }
.qbig { text-align: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.qbig span { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -1.2px; color: var(--accent); display: block; font-variant-numeric: tabular-nums; }
.qbig em { font-style: normal; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .8px; color: var(--txt-3); }
/* The margin verdict — the number that should stop a bad quote from being sent. */
.qmargin { border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-5); border: 1px solid; }
.qmargin.good { background: rgba(16, 211, 154, .1); border-color: rgba(16, 211, 154, .35); }
.qmargin.warn { background: rgba(247, 185, 85, .1); border-color: rgba(247, 185, 85, .35); }
.qmargin.bad { background: rgba(255, 95, 109, .1); border-color: rgba(255, 95, 109, .4); }
.qm-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.qm-top span { font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.qm-top strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.qmargin.good .qm-top span, .qmargin.good .qm-top strong { color: var(--accent); }
.qmargin.warn .qm-top span, .qmargin.warn .qm-top strong { color: var(--amber); }
.qmargin.bad .qm-top span, .qmargin.bad .qm-top strong { color: var(--red); }
.qm-row { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--txt-2); padding: var(--sp-1) 0; }
.qm-row span:last-child { font-variant-numeric: tabular-nums; color: var(--txt); }
.qm-warn { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-2xs); line-height: 1.45; color: var(--txt); }
.qm-foot { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.qm-foot span { font-size: var(--fs-3xs); color: var(--txt-3); justify-content: flex-start; }
.qb em.good { color: var(--accent); }
.qb em.warn { color: var(--amber); }
.qb em.bad { color: var(--red); }

.qbreak div { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--txt-2); padding: var(--sp-2) 0; gap: var(--sp-5); }
.qbreak div span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qbreak .qline { border-top: 1px solid var(--line); margin-top: var(--sp-3); padding-top: var(--sp-4); color: var(--txt); font-weight: 600; }
.qbreak .strong { font-size: var(--fs-md); font-weight: 700; color: var(--txt); }
.qtable { margin-top: var(--sp-6); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.qtable h4 { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .8px; color: var(--txt-3); margin-bottom: var(--sp-4); }
.qb {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-xs); transition: .1s;
}
.qb:hover { background: var(--panel-2); }
.qb.on { background: var(--accent-glow); }
.qb span { color: var(--txt-3); font-variant-numeric: tabular-nums; }
.qb strong { font-variant-numeric: tabular-nums; }
.qb.on strong, .qb.on span { color: var(--accent); }
.qb em { font-style: normal; color: var(--txt-3); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }

.totbox { margin-left: auto; width: 262px; margin-top: var(--sp-5); }
.totbox div { display: flex; justify-content: space-between; padding: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--txt-2); }
.totbox div.g { border-top: 1px solid var(--line-2); margin-top: var(--sp-3); padding-top: var(--sp-4); font-size: var(--fs-lg); font-weight: 700; color: var(--txt); }

/* ---------- timeline ---------- */

.tl { position: relative; padding-left: var(--sp-7); }
.tl::before { content: ''; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 1px; background: var(--line); }
.tl-i { position: relative; padding-bottom: var(--sp-6); }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before { content: ''; position: absolute; left: -19.5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.tl-i.gray::before { background: var(--txt-3); }
.tl-i .tx { font-size: var(--fs-sm); line-height: 1.45; }
.tl-i .dt { font-size: var(--fs-3xs); color: var(--txt-3); margin-top: var(--sp-1); }

/* ---------- automations ---------- */

.autorow { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); cursor: pointer; transition: .1s; }
.autorow:last-child { border-bottom: 0; }
.autorow:hover { background: var(--panel-2); }
.autorow.off { opacity: .5; }
.au-main { flex: 1; min-width: 0; }
.au-name { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.au-flow { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--fs-3xs); }
.au-when { background: rgba(124, 108, 255, .16); color: #a99dff; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); font-weight: 600; }
.au-if { background: rgba(247, 185, 85, .14); color: var(--amber); padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); }
.au-arrow { color: var(--txt-3); }
.au-do { background: rgba(16, 211, 154, .13); color: var(--accent); padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); font-weight: 600; }
.au-wait { background: rgba(74, 168, 255, .14); color: var(--blue); padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); font-weight: 600; }
.au-meta { text-align: right; flex: none; }
.au-count { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

/* toggle */
.tog { position: relative; width: 34px; height: 19px; flex: none; cursor: pointer; }
.tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.tog span { position: absolute; inset: 0; background: var(--line-2); border-radius: var(--r-full); transition: .15s; }
.tog span::before { content: ''; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; background: var(--txt-2); border-radius: 50%; transition: .15s; }
.tog input:checked + span { background: var(--accent-dim); }
.tog input:checked + span::before { transform: translateX(15px); background: #fff; }

.autobuild { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-3); }
.ab-step { display: flex; gap: var(--sp-5); align-items: flex-start; }
.ab-badge { font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .8px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); width: 48px; text-align: center; flex: none; margin-top: var(--sp-3); }
.ab-badge.when { background: rgba(124, 108, 255, .18); color: #a99dff; }
.ab-badge.if { background: rgba(247, 185, 85, .16); color: var(--amber); }
.ab-badge.then { background: rgba(16, 211, 154, .15); color: var(--accent); }
.ab-act { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-4); }

.inkchip { display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-2xs); }
.inkchip .sw { width: 11px; height: 11px; border-radius: var(--r-sm); border: 1px solid var(--line-2); }

/* ---------- conversations ---------- */

.convo { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); height: calc(100vh - 100px); }
.convo-list { overflow-y: auto; padding: 0; }
.convo-item { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); cursor: pointer; transition: .1s; }
.convo-item:hover { background: var(--panel-2); }
.convo-item.on { background: var(--accent-glow); }
.convo-item.unread .ci-name { font-weight: 700; }
.convo-item.unread .ci-preview { color: var(--txt); }
.ci-main { flex: 1; min-width: 0; }
.ci-top { display: flex; justify-content: space-between; gap: var(--sp-4); }
.ci-name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-time { font-size: var(--fs-3xs); color: var(--txt-3); flex: none; }
.ci-preview { font-size: var(--fs-xs); color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--sp-1); }
.ci-badge { background: var(--accent); color: var(--accent-ink); font-size: var(--fs-3xs); font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--r-full); display: grid; place-items: center; padding: 0 var(--sp-3); flex: none; }
.ci-ch { color: var(--txt-3); font-size: var(--fs-sm); flex: none; }

.convo-thread { display: flex; flex-direction: column; overflow: hidden; }
.ct-head { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); flex: none; }
.ct-body { flex: 1; overflow-y: auto; padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.bubble { max-width: 74%; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); }
.bubble.in { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: var(--r-sm); }
.bubble.out { align-self: flex-end; background: var(--accent-dim); color: #eafff8; border-bottom-right-radius: var(--r-sm); }
.bub-txt { font-size: var(--fs-sm); line-height: 1.5; }
.bub-meta { font-size: var(--fs-3xs); margin-top: var(--sp-2); opacity: .65; }
.ct-compose { border-top: 1px solid var(--line); padding: var(--sp-5) var(--sp-6); flex: none; background: var(--bg-2); }

@media (max-width: 800px) { .convo { grid-template-columns: 1fr; height: auto; } .convo-thread { min-height: 60vh; } }

/* ---------- autopilot ---------- */

.ap-hero { text-align: center; padding: var(--sp-7) var(--sp-7) var(--sp-8); position: relative; }
.ap-badge { display: inline-block; font-size: var(--fs-3xs); font-weight: 800; letter-spacing: 2px; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full);
  background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--accent); margin-bottom: var(--sp-6); }
.ap-hero h1 { font-size:var(--fs-3xl); font-weight:800; letter-spacing:-1.2px; color:var(--txt); }
.ap-hero p { max-width: 560px; margin: var(--sp-5) auto 0; color: var(--txt-2); font-size: var(--fs-md); line-height: 1.6; }

.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.ap-runner { min-height: 440px; }
.ap-runner .card-b { min-height: 440px; display: flex; }

.ap-empty { margin: auto; text-align: center; }
.ap-empty p { color: var(--txt-3); margin: var(--sp-6) 0 var(--sp-7); font-size: var(--fs-sm); }
.ap-orbit { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line-2); font-size: var(--fs-3xl); color: var(--accent);
  animation: apPulse 2.6s ease-in-out infinite; }
@keyframes apPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); transform: scale(1); } 50% { box-shadow: 0 0 0 16px transparent; transform: scale(1.05); } }
.ap-go { font-size: var(--fs-lg); padding: var(--sp-5) var(--sp-8); }

/* the pipeline */
.ap-pipe { position: relative; padding: var(--sp-4) var(--sp-2); width: 100%; }
.ap-spine { position: absolute; left: 28px; top: 30px; bottom: 30px; width: 3px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; }
.ap-spine-fill { width: 100%; height: 0; background: var(--grad); border-radius: var(--r-sm); transition: height .5s cubic-bezier(.4,0,.2,1); }
.ap-steps { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.ap-step { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-4) var(--sp-3); opacity: .4; transition: opacity .3s; }
.ap-step.active, .ap-step.done { opacity: 1; }
.ap-node { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--panel-2); border: 2px solid var(--line-2); transition: .3s; z-index: 2; }
.ap-ico { font-size: var(--fs-xl); transition: opacity .3s; }
.ap-check { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xl); color: var(--accent-ink); opacity: 0; transform: scale(.4); transition: .3s; }
.ap-step.active .ap-node { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow); animation: apNode 1s ease-in-out infinite; }
@keyframes apNode { 0%,100% { box-shadow: 0 0 0 4px var(--accent-glow); } 50% { box-shadow: 0 0 0 9px transparent; } }
.ap-step.done .ap-node { background: var(--accent); border-color: var(--accent); }
.ap-step.done .ap-ico { opacity: 0; }
.ap-step.done .ap-check { opacity: 1; transform: scale(1); }
.ap-title { font-size: var(--fs-md); font-weight: 650; }
.ap-detail { font-size: var(--fs-xs); color: var(--txt-2); min-height: 15px; animation: apFade .4s; }
@keyframes apFade { from { opacity: 0; transform: translateX(-4px); } }
.ap-err { color: var(--red); padding: var(--sp-5); font-size: var(--fs-sm); }

/* the reveal */
.ap-reveal { margin: auto; text-align: center; animation: apReveal .5s cubic-bezier(.3,1.4,.5,1); width: 100%; }
@keyframes apReveal { from { opacity: 0; transform: scale(.94); } }
.ap-mockup img { max-width: 260px; max-height: 300px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));  }
@keyframes apFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ap-done-h { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.6px; margin: var(--sp-5) 0 var(--sp-6);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ap-review-h { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.5px; margin: var(--sp-5) 0 var(--sp-6); color: var(--txt); }
.ap-review-note { max-width: 420px; margin: 0 auto var(--sp-6); font-size: var(--fs-xs); color: var(--txt-2); line-height: 1.6; }

/* the autonomy dial */
.ap-dial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ap-dial button { text-align: left; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); cursor: pointer; transition: .12s; }
.ap-dial button:hover { border-color: var(--txt-3); }
.ap-dial button.on { border-color: var(--accent); background: var(--accent-glow); }
.ap-dial button strong { display: block; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.ap-dial button span { font-size: var(--fs-3xs); color: var(--txt-3); line-height: 1.35; display: block; }
.ap-dial button.on strong { color: var(--accent); }
.ap-stats { display: flex; justify-content: center; gap: var(--sp-8); margin-bottom: var(--sp-7); }
.ap-stats span { display: block; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.5px; }
.ap-stats em { font-style: normal; font-size: var(--fs-2xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .5px; }
.ap-links { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.ap-foot { max-width: 460px; margin: var(--sp-7) auto 0; font-size: var(--fs-2xs); color: var(--txt-3); line-height: 1.6; }

@media (max-width: 900px) { .ap-grid { grid-template-columns: 1fr; } .ap-hero h1 { font-size: var(--fs-2xl); } }

/* ---------- separation studio ---------- */

.sepwrap { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-6); align-items: start; }
.sep-drop { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-10) var(--sp-7); text-align: center; color: var(--txt-2); cursor: pointer; transition: .12s; }
.sep-drop:hover, .sep-drop.over { border-color: var(--accent); background: var(--accent-glow); }
.sep-composite { position: relative; background: repeating-conic-gradient(#1a1d22 0% 25%, #15181d 0% 50%) 50% / 20px 20px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 220px; }
.sep-lbl { position: absolute; top: 8px; left: 10px; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-2); background: rgba(0,0,0,.5); padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); z-index: 2; }
.sep-canvas { max-width: 100%; max-height: 340px; image-rendering: auto; display: block; }
.sep-screens { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-6); }
.sep-screen { width: 110px; }
.sep-thumb { background: repeating-conic-gradient(#1a1d22 0% 25%, #15181d 0% 50%) 50% / 12px 12px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.sep-thumb .sep-canvas { max-height: 108px; }
.sep-screen-meta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.sep-screen-meta .sw { width: 12px; height: 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); flex: none; }
.sep-screen-name { font-size: var(--fs-2xs); font-weight: 600; }

.sep-count { display: flex; align-items: center; gap: var(--sp-5); background: var(--accent-glow); border: 1px solid rgba(16,211,154,.3); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); }
.sep-count-num { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -1.5px; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.sep-range { width: 100%; accent-color: var(--accent); }
.sep-garments { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.sep-gswatch { width: 30px; height: 30px; border-radius: var(--r-md); border: 2px solid var(--line-2); cursor: pointer; transition: .1s; }
.sep-gswatch.on { border-color: var(--accent); transform: scale(1.08); box-shadow: 0 0 0 2px var(--accent-glow); }
.sep-inks { display: flex; flex-direction: column; gap: var(--sp-3); }
.sep-ink { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); }
.sep-ink input[type=color] { width: 30px; height: 24px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; cursor: pointer; padding: 0; }
.sep-pricehint { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); margin-top: var(--sp-6); }

@media (max-width: 900px) { .sepwrap { grid-template-columns: 1fr; } }

/* ---------- assistant panel ---------- */

.asst { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 260;
  background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: -14px 0 40px rgba(0,0,0,.3);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.asst.open { transform: none; }
.asst-head { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-6); border-bottom: 1px solid var(--line); flex: none; }
.asst-badge { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; font-size: var(--fs-lg); background: var(--grad-soft); border: 1px solid var(--line-2); }
.asst-title { font-size: var(--fs-md); font-weight: 700; }
.asst-sub { font-size: var(--fs-2xs); color: var(--txt-3); }
.asst-x { margin-left: auto; background: 0; border: 0; color: var(--txt-3); font-size: var(--fs-xl); line-height: 1; cursor: pointer; }
.asst-x:hover { color: var(--txt); }

.asst-log { flex: 1; overflow-y: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.asst-msg { display: flex; flex-direction: column; max-width: 100%; }
.asst-msg.user { align-items: flex-end; }
.asst-msg.bot { align-items: flex-start; }
.asst-bub { max-width: 88%; padding: var(--sp-5) var(--sp-5); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.5; }
.asst-msg.user .asst-bub { background: var(--accent-dim); color: #eafff8; border-bottom-right-radius: var(--r-sm); }
.asst-msg.bot .asst-bub { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: var(--r-sm); }
.asst-bub strong { font-weight: 700; }
.asst-ai { font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .5px; color: var(--violet); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 var(--sp-2); vertical-align: middle; }

.asst-card { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); cursor: pointer; transition: .12s; width: 88%; }
.asst-card:hover { border-color: var(--accent); background: var(--accent-glow); }
.asst-card-ic { font-size: var(--fs-lg); flex: none; }
.asst-card-t { display: block; font-size: var(--fs-xs); font-weight: 600; }
.asst-card-s { display: block; font-size: var(--fs-2xs); color: var(--txt-3); }
.asst-undo { margin-top: var(--sp-4); align-self: flex-start; background: none; border: 1px solid var(--line-2); color: var(--accent); font-size: var(--fs-2xs); font-weight: 650; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-md); cursor: pointer; }
.asst-undo:hover { background: var(--accent-glow); border-color: var(--accent); }

.asst-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.asst-chip { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt-2); font-size: var(--fs-2xs); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full); cursor: pointer; text-align: left; transition: .12s; }
.asst-chip:hover { border-color: var(--accent); color: var(--accent); }

.asst-dots { display: inline-flex; gap: var(--sp-2); padding: var(--sp-1) 0; }
.asst-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); animation: asstDot 1.2s infinite ease-in-out; }
.asst-dots i:nth-child(2) { animation-delay: .18s; } .asst-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes asstDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.asst-compose { display: flex; gap: var(--sp-4); align-items: flex-end; padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line); flex: none; background: var(--bg-2); }
.asst-compose textarea { flex: 1; resize: none; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font: inherit; font-size: var(--fs-sm); line-height: 1.4; max-height: 120px; }
.asst-compose textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.asst-send { width: 34px; height: 34px; flex: none; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-lg); font-weight: 700; cursor: pointer; transition: .12s; }
.asst-send:hover { background: var(--accent-2); }

/* the topbar trigger */
.asst-trigger { display: flex; align-items: center; gap: var(--sp-3); flex: none; background: var(--grad-soft); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-xs); font-weight: 650; color: var(--accent); cursor: pointer; transition: .12s; }
.asst-trigger:hover { border-color: var(--accent); }
.asst-trigger .spark { font-size: var(--fs-sm); }

@media (max-width: 640px) { .asst { width: 100vw; max-width: 100vw; } .asst-trigger span.lbl { display: none; } }

/* ---------- command palette ---------- */

.cmd-bg { position: fixed; inset: 0; background: rgba(4, 6, 9, .7); backdrop-filter: blur(3px); z-index: 300; display: flex; justify-content: center; padding-top: 12vh; }
.cmd { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); width: 100%; max-width: 580px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); overflow: hidden; height: fit-content; animation: pop .14s ease-out; }
.cmd-in { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); }
.cmd-ico { color: var(--txt-3); font-size: var(--fs-lg); }
.cmd-in input { flex: 1; background: 0; border: 0; outline: 0; font-size: var(--fs-lg); color: var(--txt); }
.cmd-in input::placeholder { color: var(--txt-3); }
.cmd-list { max-height: 60vh; overflow-y: auto; padding: var(--sp-3); }
.cmd-i { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); cursor: pointer; }
.cmd-i.on { background: var(--accent-glow); }
.cmd-i .ci { width: 18px; text-align: center; color: var(--txt-3); font-size: var(--fs-sm); }
.cmd-i.on .ci { color: var(--accent); }
.cmd-i .ct { flex: 1; min-width: 0; }
.cmd-i .c1 { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-i .c2 { font-size: var(--fs-2xs); color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-i .cty { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); background: var(--panel-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); }
.cmd-empty, .cmd-hint { padding: var(--sp-8); text-align: center; color: var(--txt-3); font-size: var(--fs-xs); }
.cmd-hintkey { display: flex; gap: var(--sp-2); flex: none; }
.cmd-hintkey kbd { font-size: var(--fs-3xs); }

/* keyboard help overlay */
.kbd-help { position: fixed; inset: 0; background: var(--glass); backdrop-filter: blur(6px); z-index: 320; display: grid; place-items: center; padding: var(--sp-7); animation: apFade .18s; }
.kbd-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); width: 100%; max-width: 620px; box-shadow: var(--shadow); overflow: hidden; }
.kbd-h { display: flex; align-items: center; padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line); }
.kbd-h h3 { font-size: var(--fs-lg); font-weight: 650; flex: 1; }
.kbd-h .x { background: 0; border: 0; color: var(--txt-3); font-size: var(--fs-xl); cursor: pointer; line-height: 1; }
.kbd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding: var(--sp-7); }
.kbd-sec { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .8px; color: var(--txt-3); font-weight: 700; margin-bottom: var(--sp-4); }
.kbd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-2) 0; font-size: var(--fs-xs); color: var(--txt-2); }
.kbd-keys { display: flex; gap: var(--sp-2); flex: none; }
.kbd-foot { padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--txt-3); text-align: center; }
@media (max-width: 640px) { .kbd-cols { grid-template-columns: 1fr; gap: var(--sp-6); } }
.cmd-jump { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }
.cmd-jump button { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-xs); cursor: pointer; }
.cmd-jump button:hover { border-color: var(--accent); color: var(--accent); }
kbd { background: var(--panel-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); font: inherit; font-size: var(--fs-3xs); color: var(--txt-3); font-family: var(--mono); }

.searchtrigger {
  display: flex; align-items: center; gap: var(--sp-4); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); color: var(--txt-3); font-size: var(--fs-xs); cursor: pointer; min-width: 190px;
}
.searchtrigger:hover { border-color: var(--line-2); color: var(--txt-2); }
.searchtrigger kbd { margin-left: auto; }

/* ---------- misc ---------- */

.searchbar { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.searchbar .input { max-width: 300px; }
.tabs { display: flex; gap: var(--sp-2); background: var(--bg-2); padding: var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--line); }
.tabs button { background: 0; border: 0; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--txt-2); cursor: pointer; font-weight: 550; }
.tabs button.on { background: var(--panel-2); color: var(--txt); }

.toast { position: fixed; bottom: 22px; right: 22px; background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); font-size: var(--fs-sm); box-shadow: var(--shadow); z-index: 200; animation: slide .2s; max-width: 380px; }
.toast.undo { display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-6); }
.toast-undo { background: none; border: 1px solid var(--line-2); color: var(--accent); font-weight: 650; font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-5); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.toast-undo:hover { background: var(--accent-glow); border-color: var(--accent); }
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; }
.toast-bar-fill { display: block; height: 100%; width: 100%; background: var(--accent); opacity: .55; }
.toast.err { border-left-color: var(--red); }
@keyframes slide { from { opacity: 0; transform: translateX(14px); } }

.avatar { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 650; color: var(--txt-2); flex: none; }
.avatar.lg { width: 52px; height: 52px; font-size: var(--fs-lg); border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent-dim), var(--violet)); color: #fff; border: 0; }

.art-thumb { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); }
.drop { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-8); text-align: center; color: var(--txt-3); cursor: pointer; transition: .12s; }
.drop:hover, .drop.over { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

.copy { font-family: var(--mono); font-size: var(--fs-2xs); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-4); color: var(--txt-2); word-break: break-all; cursor: pointer; }
.copy:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: .2s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow); }
  .menu-btn { display: grid; place-items: center; width: 32px; height: 32px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; }
  .cols { grid-template-columns: 1fr; }
  /* Once .grid2 stacks, its row-gap and the .field's own margin-bottom stack too,
     so rows sat 24px apart while the fields inside them sat 12px apart — an
     alternating rhythm that reads as a layout bug. The gap is the single source
     of vertical spacing in the stacked state. */
  .grid2 { grid-template-columns: 1fr; }
  .grid2 > .field { margin-bottom: 0; }
  .grid3 { grid-template-columns: 1fr; }
  .grid3 > .field { margin-bottom: 0; }
  .view { padding: var(--sp-6); }
  .items .ih { display: none; }
  .items .ir { grid-template-columns: 1fr 1fr; }
  .totbox { width: 100%; }
  /* Long segmented rows (tag filters, board filters) scroll instead of stretching the page. */
  .tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .searchbar { flex-wrap: wrap; }
  .searchbar .input { max-width: 100%; }
  .quote { grid-template-columns: 1fr; }
  .sz { width: calc(25% - 5px); }

  /* Wide tables scroll inside their own card — the page itself must never scroll sideways. */
  table.tbl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl thead, table.tbl tbody { display: table; width: 100%; min-width: 440px; }
  /* Let the topbar grow and wrap its actions on mobile rather than overflow the page. */
  .topbar { padding: var(--sp-4) var(--sp-6); gap: var(--sp-4); height: auto; min-height: 58px; flex-wrap: wrap; }
  .topbar h2 { font-size: var(--fs-lg); flex: 1 1 auto; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumb { display: none; }
  .searchtrigger { display: none; } /* ⌘K has no keyboard here; the nav is one tap away */
  #page-actions { flex-wrap: wrap; justify-content: flex-end; }
  #page-actions .btn { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-xs); }
  .row { flex-wrap: wrap; }

}

/* Belt and braces: nothing may push the document sideways on a phone. */
body { overflow-x: hidden; }

/* nav hero item */
.nav a.hot { color: var(--accent); font-weight: 650; }
.nav a.hot .ico { color: var(--accent); }
.nav a .hotdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; box-shadow: 0 0 8px var(--accent); animation: apPulse 2s infinite; }

/* ---------- logout ---------- */
.shopcard { display: flex; align-items: center; gap: var(--sp-5); }
.logout-btn { background: transparent; border: 1px solid var(--line); color: var(--txt-2); width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-lg); flex: 0 0 auto; transition: .15s; }
.logout-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- AI onboarding / welcome ---------- */
.ob { max-width: 900px; margin: 0 auto; }
.ob-hero { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-9); margin-bottom: var(--sp-8); }
.ob-kicker { font-size: var(--fs-sm); color: var(--accent); font-weight: 700; margin-bottom: var(--sp-5); }
.ob-hero h1 { font-size: var(--fs-2xl); letter-spacing: -.5px; margin: 0 0 var(--sp-4); }
.ob-sub { color: var(--txt-2); font-size: var(--fs-md); line-height: 1.6; max-width: 640px; margin-bottom: var(--sp-7); }
.ob-ai { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); }
.ob-ai textarea { width: 100%; min-height: 92px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--txt); font: inherit; font-size: var(--fs-md); padding: var(--sp-5); resize: vertical; }
.ob-ai textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.ob-ai-row { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-5); flex-wrap: wrap; }
.ob-ai-note { font-size: var(--fs-2xs); color: var(--txt-2); opacity: .8; }
.ob-result { margin-top: var(--sp-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6); font-size: var(--fs-sm); }
.ob-result .ob-r-h { font-weight: 700; color: var(--accent); margin-bottom: var(--sp-4); }
.ob-result ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-7); color: var(--txt); }
.ob-result li { margin: var(--sp-2) 0; }
.ob-result .ob-r-f { color: var(--txt-2); font-size: var(--fs-xs); }
.ob-result a, .ob-ai-note a { color: var(--accent); text-decoration: none; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-8); }
@media (max-width: 760px) { .ob-grid { grid-template-columns: 1fr; } }
.ob-steps { display: flex; flex-direction: column; gap: var(--sp-4); }
.ob-step { display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-5) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--txt); cursor: pointer; transition: .15s; }
.ob-step:hover { border-color: var(--accent); }
.ob-step.done { opacity: .7; }
.ob-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--accent); flex: 0 0 auto; margin-top: var(--sp-1); }
.ob-step.done .ob-check { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ob-step-t { display: block; font-weight: 600; font-size: var(--fs-sm); }
.ob-step-h { display: block; color: var(--txt-2); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.ob-finish { display: flex; align-items: center; gap: var(--sp-5); justify-content: center; flex-wrap: wrap; padding: var(--sp-4) 0 var(--sp-8); }

/* ---------- trial banner + billing ---------- */
.trialbar { display:block; text-align:center; padding:var(--sp-4) var(--sp-6); font-size:var(--fs-sm);
            background:var(--panel-2); color:var(--txt-2); font-weight:500;
            border-bottom:1px solid var(--line); }
.trialbar strong { color:var(--accent); }
.trialbar.danger { background:#e5484d; color:#fff; }
.bill { max-width:1000px; margin:0 auto; }
.bill-status { padding:var(--sp-5) var(--sp-6); border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel-2); font-size:var(--fs-md); margin-bottom:var(--sp-7); }
.bill-status.ok { border-color:var(--accent); }
.bill-status.warn { border-color:#e5a23d; }
.bill-toggle { display:flex; gap:var(--sp-2); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-2); width:max-content; margin:0 auto var(--sp-8); }
.bill-toggle button { border:0; background:transparent; color:var(--txt-2); font:inherit; font-weight:600; padding:var(--sp-4) var(--sp-6); border-radius:var(--r-md); cursor:pointer; }
.bill-toggle button.on { background:var(--accent); color:var(--accent-ink); }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
@media (max-width:820px){ .plans{ grid-template-columns:1fr; } }
.plan { position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-8); background:var(--panel); display:flex; flex-direction:column; }
.plan.pop { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan.cur { opacity:.85; }
.plan-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-ink); font-size:var(--fs-2xs); font-weight:700; padding:var(--sp-2) var(--sp-5); border-radius:var(--r-full); }
.plan-name { font-size:var(--fs-xl); font-weight:800; }
.plan-tag { color:var(--txt-2); font-size:var(--fs-sm); margin:var(--sp-1) 0 var(--sp-6); }
.plan-price { display:flex; align-items:baseline; gap:var(--sp-2); }
.plan-price .amt { font-size:var(--fs-3xl); font-weight:800; letter-spacing:-1px; }
.plan-price .per { color:var(--txt-2); font-size:var(--fs-lg); }
.plan-annual { color:var(--txt-2); font-size:var(--fs-xs); margin:var(--sp-1) 0 var(--sp-6); }
.plan-feats { list-style:none; padding:0; margin:0 0 var(--sp-7); flex:1; }
.plan-feats li { font-size:var(--fs-sm); padding:var(--sp-3) 0 var(--sp-3) var(--sp-8); position:relative; border-top:1px solid var(--line); }
.plan-feats li:first-child { border-top:0; }
.plan-feats li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; }
.plan .btn { width:100%; }

/* ===================== AI Receptionist + Products + realtime (v20) ===================== */

.agent-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 1080px) { .agent-grid { grid-template-columns: 1fr; } }

/* toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 40px; height: 22px; background: var(--line-2); border-radius: var(--r-full); transition: background .2s; position: relative; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* mode picker */
.modepick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px) { .modepick { grid-template-columns: 1fr; } }
.modeopt { text-align: left; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: var(--sp-2); }
.modeopt strong { font-size: var(--fs-sm); color: var(--txt); }
.modeopt span { font-size: var(--fs-2xs); color: var(--txt-2); line-height: 1.5; }
.modeopt:hover { border-color: var(--line-2); }
.modeopt.on { border-color: var(--accent); background: var(--accent-glow); }

/* capabilities */
.capgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 560px) { .capgrid { grid-template-columns: 1fr; } }
.capbox { display: flex; gap: var(--sp-5); align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); cursor: pointer; }
.capbox input { margin-top: var(--sp-1); accent-color: var(--accent); width: 16px; height: 16px; }
.capbox span { display: flex; flex-direction: column; gap: var(--sp-1); }
.capbox strong { font-size: var(--fs-xs); color: var(--txt); }
.capbox em { font-size: var(--fs-2xs); color: var(--txt-3); font-style: normal; }

/* FAQ editor */
.faqlist { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-3); }
.faqrow { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--sp-4); align-items: start; }
.faqrow .faq-a { min-height: 40px; }
.faqrow .faq-x { align-self: start; }
@media (max-width: 560px) { .faqrow { grid-template-columns: 1fr auto; } .faqrow .faq-a { grid-column: 1 / -1; } }

/* live preview chat */
.preview-card { display: flex; flex-direction: column; }
.chatprev { height: 360px; overflow-y: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prevmsg { max-width: 84%; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.prevmsg.bot { background: var(--panel-2); color: var(--txt); align-self: flex-start; border-bottom-left-radius: var(--r-sm); }
.prevmsg.me { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: var(--r-sm); font-weight: 500; }
.prevmsg.typing { color: var(--txt-3); font-style: italic; background: transparent; padding: var(--sp-1) var(--sp-3); }
.prevchips { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-self: flex-start; }
.chip { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt-2); border-radius: var(--r-full); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--txt); }
.chatinput { display: flex; gap: var(--sp-4); padding: var(--sp-5); }
.chatinput .input { flex: 1; }

/* session transcript modal */
.chatlog { display: flex; flex-direction: column; gap: var(--sp-4); max-height: 50vh; overflow-y: auto; padding: var(--sp-2); }
.logmsg { max-width: 86%; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; position: relative; }
.logmsg .who { display: block; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .5px; opacity: .55; margin-bottom: var(--sp-2); }
.logmsg.me { background: var(--panel-2); align-self: flex-start; }
.logmsg.bot { background: var(--accent-glow); align-self: flex-end; }
.logmsg.agent { background: var(--violet); color: #fff; align-self: flex-end; }
.logmsg.sys { background: transparent; color: var(--txt-3); font-style: italic; align-self: center; font-size: var(--fs-2xs); }

/* tables that must scroll on mobile */
.tbl-wrap { overflow-x: auto; }
.brandblock { margin-bottom: var(--sp-6); }
.brandname { font-size: var(--fs-xs); font-weight: 700; color: var(--txt-2); text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--sp-3); }

/* delivery status dots */
.deliv { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2xs); }
.deliv .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-3); }
.deliv.ok .dot { background: var(--accent); }
.deliv.err .dot { background: var(--red); }

/* ===================== Pricing matrix + margin guard (v21) ===================== */
.pm-controls { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .pm-controls { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .pm-controls { grid-template-columns: repeat(2, 1fr); } }
.pm-input label { display: block; font-size: var(--fs-3xs); font-weight: 600; color: var(--txt-2); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: .4px; }
.pm-input .input { padding: var(--sp-4) var(--sp-4); font-size: var(--fs-sm); }
.pm-hint { font-size: var(--fs-3xs); color: var(--txt-3); margin-top: var(--sp-2); }

.pm-legend { font-size: var(--fs-2xs); color: var(--txt-2); display: inline-flex; align-items: center; gap: var(--sp-3); }
.pm-legend .sw { width: 10px; height: 10px; border-radius: var(--r-sm); display: inline-block; margin-left: var(--sp-4); }
.pm-legend .sw.good { background: var(--accent); }
.pm-legend .sw.warn { background: var(--amber); }
.pm-legend .sw.bad { background: var(--red); }

.pm-table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.pm-table thead th { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .5px; color: var(--txt-3); font-weight: 600; padding: var(--sp-2) var(--sp-4); text-align: center; white-space: nowrap; }
.pm-table thead th:first-child { text-align: left; }
.pm-qty { font-size: var(--fs-sm); font-weight: 700; color: var(--txt-2); text-align: left; padding: 0 var(--sp-5); white-space: nowrap; }
.pm-cell { text-align: center; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-2); min-width: 76px; }
.pm-cell.good { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.pm-cell.warn { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.pm-cell.bad, .pm-cell.below { background: color-mix(in srgb, var(--red) 12%, var(--panel-2)); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.pm-price { font-size: var(--fs-lg); font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.pm-margin { font-size: var(--fs-2xs); margin-top: var(--sp-1); font-variant-numeric: tabular-nums; }
.pm-cell.good .pm-margin { color: var(--accent); }
.pm-cell.warn .pm-margin { color: var(--amber); }
.pm-cell.bad .pm-margin, .pm-cell.below .pm-margin { color: var(--red); font-weight: 600; }

/* ===================== Custom price matrices =====================
   The shop's own price sheet, in any shape. Headings are inputs, not labels, because renaming a
   column is the most common edit — "3 Colors" becomes "Both Sides" becomes "20 oz Tumbler". */
.mx-grid { width: 100%; border-collapse: separate; border-spacing: 3px; }
.mx-grid .mx-corner { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .5px; color: var(--txt-3); font-weight: 600; text-align: left; padding: var(--sp-2) var(--sp-3); white-space: nowrap; }
.mx-head { position: relative; padding: 0; min-width: 108px; }
.mx-rowhead { min-width: 132px; }
.mx-h { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-3); font: inherit; font-size: var(--fs-2xs);
  font-weight: 650; color: var(--txt-2); text-align: left; }
.mx-h:focus { outline: none; border-color: var(--accent); background: var(--panel); color: var(--txt); }
/* The delete affordance stays out of the way until you're on the heading — a row of always-visible
   × buttons across a 12-column grid reads as clutter and invites a misclick. */
.mx-x { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;
  background: 0; border: 0; color: var(--txt-3); font-size: var(--fs-md); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s; border-radius: var(--r-sm); }
.mx-head:hover .mx-x, .mx-x:focus-visible { opacity: 1; }
.mx-x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }

.mx-cell { padding: 0; }
.mx-in { width: 100%; min-width: 92px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3); font: inherit; font-size: var(--fs-xs);
  color: var(--txt); text-align: right; font-variant-numeric: tabular-nums; }
.mx-in::placeholder { color: var(--txt-3); }
.mx-in:focus { outline: none; border-color: var(--accent); background: var(--panel); }
/* A priced cell is visibly different from a blank one — a shop scanning for holes in its sheet
   should find them without reading every number. */
.mx-in:not(:placeholder-shown) { font-weight: 650; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.mx-in::-webkit-outer-spin-button, .mx-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-in[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Template cards on the list screen. */
.mx-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--sp-4); }
.mx-tpl-card { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5); cursor: pointer; font: inherit; color: inherit; display: block; }
.mx-tpl-card:hover { border-color: var(--accent); background: var(--panel); }
.mx-tpl-name { font-weight: 650; font-size: var(--fs-sm); color: var(--txt); }
.mx-tpl-desc { font-size: var(--fs-2xs); color: var(--txt-3); line-height: 1.5; margin-top: var(--sp-2); }
.mx-tpl-meta { font-size: var(--fs-3xs); color: var(--txt-3); margin-top: var(--sp-3); font-variant-numeric: tabular-nums; }

/* Row actions stay on one line — four buttons that wrap read as two broken rows, not a toolbar. */
.mx-actions { white-space: nowrap; }
.mx-actions .btn { margin-left: var(--sp-2); }

/* The price readout in the quote-side picker. */
.mx-out { background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-md); padding: var(--sp-5); margin: var(--sp-2) 0 var(--sp-5); }
.mx-out.empty { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); font-size: var(--fs-2xs); color: var(--txt-3); line-height: 1.6; }
.mx-out-price { font-size: var(--fs-xl); font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.mx-out-price span { font-size: var(--fs-2xs); font-weight: 400; color: var(--txt-3); }
.mx-out-sub { font-size: var(--fs-2xs); color: var(--txt-3); margin-top: var(--sp-2); }

/* The per-line "price from a matrix" button on the estimate editor. */
.rate-cell { display: flex; align-items: center; gap: var(--sp-2); }
.rate-cell .input { flex: 1; min-width: 0; }
.mx-btn { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--txt-3); cursor: pointer; font-size: var(--fs-2xs); line-height: 1; }
.mx-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ===================== 2026 usability pass (v22) ===================== */

/* Full-height that survives mobile browser chrome; kill horizontal overflow app-wide. */
html { overflow-x: hidden; }
.app { min-height: 100dvh; }
.sidebar { height: 100dvh; }
/* Long unbroken strings (emails, IDs, style numbers) must wrap, never widen the page. */
.tbl td, .card, .msg, .logmsg, .prevmsg { overflow-wrap: anywhere; }
/* Kill the 300ms tap delay / double-fire on touch. */
button, a, .nav a, .chip, .tab, [role="button"] { touch-action: manipulation; }

/* Tabular figures everywhere numbers line up — instant scan-ability + a "designed" feel. */
.kpi .v, .kpi-val, .num, .pm-price, .pm-margin, .pm-qty, .tbl td.num, .money,
.totbox, .kpi h3 + *, .rup .n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
table.tbl td, table.pm-table td { font-variant-numeric: tabular-nums; }

/* One focus-ring token, keyboard-only (no ring on mouse click), WCAG 2.2 contrast. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
button:focus-visible, a:focus-visible, .nav a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .chip:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Only suppress the default ring for pointer users; keyboard users always get the token above. */
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first focusable element, off-screen until it takes keyboard focus, then it drops in. */
.skip-link {
  position: fixed; top: var(--sp-4); left: var(--sp-4); z-index: 400;
  transform: translateY(calc(-100% - var(--sp-6))); transition: transform .16s ease;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 650; text-decoration: none; box-shadow: var(--shadow);
}
.skip-link:focus { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Mobile nav drawer backdrop — dims the page and captures the outside tap that closes the drawer.
   Sits above the tabbar (45) and below the open sidebar (50). */
.drawer-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(4, 6, 9, .55); backdrop-filter: blur(2px); }
.drawer-backdrop[hidden] { display: none; }

/* ---------- loading skeletons (never a blank content area) ---------- */
.skel { position: relative; overflow: hidden; background: var(--panel-2); border-radius: var(--r-md); }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--txt) 7%, transparent), transparent);
  animation: shimmer 1.25s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-line { height: 12px; margin: var(--sp-4) 0; border-radius: var(--r-sm); }
.skel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.skel-kpi { height: 96px; }
.skel-card { height: 220px; margin-bottom: var(--sp-6); }
@media (max-width: 900px) { .skel-kpis { grid-template-columns: 1fr 1fr; } }

/* ---------- mobile bottom tab bar (primary nav in the thumb zone) ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--glass); backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-4) 0 var(--sp-4); color: var(--txt-3); font-size: var(--fs-3xs); font-weight: 600; text-decoration: none;
    position: relative; min-height: 52px;
  }
  .tabbar a .tico { font-size: var(--fs-xl); line-height: 1; }
  .tabbar a.on { color: var(--accent); }
  .tabbar a.on::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 2.5px; border-radius: var(--r-sm); background: var(--accent); }
  .tabbar a .tdot { position: absolute; top: 7px; margin-left: var(--sp-6); width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  /* Give scrollable content room so the bar never covers the last row. */
  .main { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
  .view { padding-bottom: var(--sp-8); }
}

/* ---------- responsive tables → stacked cards on mobile ---------- */
/* Label ABOVE value (block), never side-by-side: wide cells can't push values off-screen. The
   first cell is the card's title (larger, no label). Every card is a tap target for the row. */
@media (max-width: 720px) {
  table.tbl.stack, table.tbl.stack tbody, table.tbl.stack tr, table.tbl.stack td { display: block; width: 100%; max-width: 100%; }
  table.tbl.stack thead { position: absolute; left: -9999px; }
  table.tbl.stack tr { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--panel-2); }
  table.tbl.stack tr.click { cursor: pointer; }
  table.tbl.stack tr.click:active { transform: scale(.99); }
  table.tbl.stack td { padding: var(--sp-3) 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  table.tbl.stack td.num { text-align: left; }
  table.tbl.stack td::before {
    content: attr(data-label); display: block; color: var(--txt-3); font-size: var(--fs-3xs);
    text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-bottom: var(--sp-1);
  }
  /* First cell = card title: bigger, no label chrome, a divider under it. */
  table.tbl.stack td:first-child { font-size: var(--fs-lg); font-weight: 700; padding-bottom: var(--sp-4); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
  table.tbl.stack td:first-child::before { display: none; }
  /* Numeric fields read as a compact two-up grid so the card stays short. */
  table.tbl.stack td.num { display: inline-block; width: 48%; vertical-align: top; }
  table.tbl.stack td:empty { display: none; }
}

/* Pricing matrix: horizontal-scroll the grid rather than crushing it on small screens. */
@media (max-width: 720px) {
  .pm-table { min-width: 560px; }
  /* Same for a custom matrix — its width is the shop's own column count, so it can be anything. */
  .mx-grid { min-width: 560px; }
  .mx-x { opacity: 1; }   /* no hover on touch: the delete affordance has to be visible */
}

/* Bottom-nav clearance for floating UI (assistant, toasts) on mobile. */
@media (max-width: 900px) {
  .toast { bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}

/* Shop-rate wizard output */
.rate-out { margin-top: var(--sp-6); padding: var(--sp-6); background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--r-md); }
.rate-big { font-size: var(--fs-3xl); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-3); }
.rate-big span { font-size: var(--fs-md); font-weight: 500; color: var(--txt-2); margin-left: var(--sp-3); }

/* Live margin guard on the estimate editor */
.margin-guard { margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-2); }
.margin-guard.good { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-glow); }
.margin-guard.warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--panel-2)); }
.margin-guard.bad, .margin-guard.below { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); background: color-mix(in srgb, var(--red) 10%, var(--panel-2)); }
.mg-row { display: flex; align-items: baseline; gap: var(--sp-5); }
.mg-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .5px; color: var(--txt-3); font-weight: 600; }
.mg-pct { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.margin-guard.good .mg-pct { color: var(--accent); }
.margin-guard.warn .mg-pct { color: var(--amber); }
.margin-guard.bad .mg-pct, .margin-guard.below .mg-pct { color: var(--red); }
.mg-verdict { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; }
.margin-guard.good .mg-verdict { color: var(--accent); }
.margin-guard.warn .mg-verdict { color: var(--amber); }
.margin-guard.bad .mg-verdict, .margin-guard.below .mg-verdict { color: var(--red); }
.mg-sub { font-size: var(--fs-2xs); color: var(--txt-3); margin-top: var(--sp-2); line-height: 1.5; }

/* ============ Capacity & promise dates ============ */
.promise { border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 30px -18px var(--accent-glow); }
.promise-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: var(--sp-5); }
.promise-grid label { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--txt-3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.promise-grid input { background: var(--panel-2); border: 1px solid var(--line); color: var(--txt); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.promise-grid input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
/* A grid track of `1fr` still refuses to shrink below its content's min-width, and an <input>
   carries a ~170px intrinsic one. Three of them plus gaps measured 460px inside a 375px
   viewport — `body{overflow-x:hidden}` clipped the third field rather than revealing it, so on
   a phone the last input simply could not be reached. Let the cells shrink, size the inputs to
   their cell, and stack the row outright once there is no room for three. */
.promise-grid > * { min-width: 0; }
.promise-grid input { width: 100%; }
@media (max-width: 640px) { .promise-grid { grid-template-columns: 1fr; } }
.promise-out { margin-top: var(--sp-5); }
.promise-verdict { border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); }
.promise-verdict.ok { background: var(--accent-glow); border-color: var(--accent-dim); }
.promise-verdict.no { background: rgba(255, 95, 109, .1); border-color: rgba(255, 95, 109, .4); }
.pv-main { font-size: var(--fs-lg); font-weight: 700; }
.promise-verdict.ok .pv-main { color: var(--accent); }
.promise-verdict.no .pv-main { color: var(--red); }
.pv-note { font-size: var(--fs-xs); color: var(--txt-2); margin-top: var(--sp-2); line-height: 1.45; }

.cap-strip { display: flex; gap: var(--sp-3); align-items: flex-end; height: 132px; padding: var(--sp-2) 0 0; }
.cap-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.cap-track { position: relative; width: 100%; height: 96px; background: var(--panel-2); border-radius: var(--r-sm); overflow: hidden; display: flex; align-items: flex-end; }
.cap-fill { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: height .35s cubic-bezier(.2,.7,.3,1); min-height: 2px; }
.cap-fill.free { background: var(--line-2); }
.cap-fill.open { background: var(--accent); }
.cap-fill.busy { background: var(--amber); }
.cap-fill.full { background: var(--red); }
.cap-cap { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--txt-3); opacity: .7; }
.cap-d { font-size: var(--fs-3xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .4px; }
.cap-n { font-size: var(--fs-xs); color: var(--txt-2); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: -2px; }
.cap-legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); font-size: var(--fs-2xs); color: var(--txt-2); align-items: center; }
.cap-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-sm); margin-right: var(--sp-3); vertical-align: -1px; }
.sw.free { background: var(--line-2); } .sw.open { background: var(--accent); } .sw.busy { background: var(--amber); } .sw.full { background: var(--red); }

.model-formula { font-size: var(--fs-md); line-height: 1.7; color: var(--txt-2); }
.model-formula b { color: var(--txt); font-weight: 700; }
.model-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
.model-grid label { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); font-size: var(--fs-xs); color: var(--txt-2); }
.model-grid input { width: 90px; background: var(--panel-2); border: 1px solid var(--line); color: var(--txt); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.model-grid input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }

/* ============ Reorder Radar ============ */
.ro-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.ro-card { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); transition: border-color .15s; }
.ro-card:hover { border-color: var(--line-2); }
.ro-main { flex: 1; min-width: 0; }
.ro-top { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ro-name { font-weight: 700; font-size: var(--fs-md); color: var(--txt); text-decoration: none; }
.ro-name:hover { color: var(--accent); }
.ro-sub { font-size: var(--fs-xs); color: var(--txt-2); margin-top: var(--sp-2); line-height: 1.5; }
.ro-meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--txt-3); }
.ro-actions { display: flex; flex-direction: column; gap: var(--sp-3); flex: none; }
@media (max-width: 640px) { .ro-card { flex-direction: column; align-items: stretch; } .ro-actions { flex-direction: row; } }

/* ============ CSV import ============ */
.csv-drop { display:block; border:1.5px dashed var(--line-2); border-radius:var(--r-md); padding:var(--sp-8); text-align:center; cursor:pointer; color:var(--txt-2); font-size:var(--fs-sm); transition:border-color .15s,background .15s; }
.csv-drop:hover { border-color:var(--accent); background:var(--accent-glow); }

/* ============ Onboarding wizard ============ */
.obx { display:grid; grid-template-columns:260px 1fr; gap:var(--sp-8); max-width:940px; margin:0 auto; align-items:start; }
.ob-rail { position:sticky; top:16px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); }
.ob-rail-kicker { font-size:var(--fs-3xs); text-transform:uppercase; letter-spacing:.8px; color:var(--txt-3); }
.ob-rail-shop { font-weight:700; font-size:var(--fs-lg); margin:var(--sp-1) 0 var(--sp-5); }
.ob-progress { height:6px; background:var(--panel-2); border-radius:var(--r-sm); overflow:hidden; }
.ob-progress-fill { height:100%; background:var(--accent); border-radius:var(--r-sm); transition:width .4s; }
.ob-progress-t { font-size:var(--fs-2xs); color:var(--txt-3); margin-top:var(--sp-3); }
.ob-rail-list { display:flex; flex-direction:column; gap:var(--sp-1); margin:var(--sp-6) 0; }
.ob-rail-item { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-4); border-radius:var(--r-md); background:none; border:0; text-align:left; cursor:pointer; color:var(--txt-2); font-size:var(--fs-xs); width:100%; }
.ob-rail-item:hover { background:var(--panel-2); }
.ob-rail-item.on { background:var(--accent-glow); color:var(--txt); }
.ob-rail-item.done { color:var(--txt-3); }
.ob-rail-ic { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--panel-2); font-size:var(--fs-xs); }
.ob-rail-item.done .ob-rail-ic { background:var(--accent); color:var(--accent-ink); }
.ob-rail-item.on .ob-rail-ic { background:var(--accent); color:var(--accent-ink); }
.ob-rail-t { line-height:1.3; }
.ob-opt { font-size:var(--fs-3xs); color:var(--txt-3); text-transform:uppercase; letter-spacing:.4px; }
.ob-skip-all { width:100%; background:none; border:0; color:var(--txt-3); font-size:var(--fs-xs); cursor:pointer; padding:var(--sp-4); margin-top:var(--sp-2); border-top:1px solid var(--line); }
.ob-skip-all:hover { color:var(--accent); }

.ob-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-8) var(--sp-9); min-height:360px; }
.ob-head h1 { font-size:var(--fs-2xl); margin-bottom:var(--sp-4); } .ob-head h2 { font-size:var(--fs-xl); margin-bottom:var(--sp-4); }
.ob-head p { color:var(--txt-2); font-size:var(--fs-sm); line-height:1.65; margin-bottom:var(--sp-7); max-width:600px; }
.ob-form { display:flex; flex-direction:column; gap:var(--sp-5); }
.ob-form .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.ob-hint { font-size:var(--fs-2xs); color:var(--txt-3); margin-top:var(--sp-2); }
.ob-note { font-size:var(--fs-xs); color:var(--txt-2); background:var(--panel-2); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); }
.ob-foot { display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line); }
.ob-describe textarea, #ob-desc { width:100%; min-height:120px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); color:var(--txt); padding:var(--sp-5); font-size:var(--fs-md); font-family:inherit; resize:vertical; }
.ob-describe textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.ob-describe-out { margin-top:var(--sp-6); background:var(--panel-2); border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6); font-size:var(--fs-sm); }
.ob-describe-out ul { margin:var(--sp-4) 0 0 var(--sp-7); color:var(--txt-2); font-size:var(--fs-xs); line-height:1.7; }
.ob-svc { background:var(--panel-2); border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6); }
.ob-svc-h { font-size:var(--fs-xs); font-weight:600; color:var(--txt-2); margin-bottom:var(--sp-4); }
.ob-svc-row { display:flex; align-items:center; gap:var(--sp-5); justify-content:space-between; padding:var(--sp-3) 0; font-size:var(--fs-sm); border-bottom:1px solid var(--line); }
.ob-svc-row:last-child { border-bottom:0; }
.ob-svc-row span:first-child { flex:1; }
.ob-done { text-align:center; padding:var(--sp-10) var(--sp-7); }
.ob-done-ic { font-size:var(--fs-4xl); margin-bottom:var(--sp-5); }
.ob-done h1 { font-size:var(--fs-2xl); margin-bottom:var(--sp-5); }
.ob-done p { color:var(--txt-2); font-size:var(--fs-md); line-height:1.6; max-width:440px; margin:0 auto var(--sp-8); }

/* Dashboard "finish setup" resume card */
.setup-card { border:1px solid var(--accent-dim); background:linear-gradient(180deg,var(--accent-glow),transparent); border-radius:var(--r-md); padding:var(--sp-6) var(--sp-7); margin-bottom:var(--sp-6); }
.setup-card-h { display:flex; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-5); }
.setup-card-h h3 { font-size:var(--fs-md); } .setup-card-h .spacer { flex:1; }
.setup-chips { display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.setup-chip { display:inline-flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); padding:var(--sp-3) var(--sp-5); border-radius:var(--r-full); border:1px solid var(--line); background:var(--panel); color:var(--txt-2); cursor:pointer; }
.setup-chip:hover { border-color:var(--accent); color:var(--txt); }
.setup-chip.done { color:var(--txt-3); opacity:.6; }
.setup-chip.skipped { opacity: .55; }
.setup-chip svg { width:14px; height:14px; flex:none; }
@media (max-width:720px){ .obx{ grid-template-columns:1fr; } .ob-rail{ position:static; } .ob-form .grid2{ grid-template-columns:1fr; } .ob-form .grid2 > .field{ margin-bottom:0; } }

/* ============ Today — action center ============ */
.tdy-head { margin-bottom: var(--sp-7); }
.tdy-head h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
.tdy-date { color: var(--txt-2); font-size: var(--fs-md); margin-top: var(--sp-2); }
.tdy-pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-6); }
.tdy-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-6); text-decoration: none; transition: border-color .15s, transform .1s; display: block; }
.tdy-stat:hover { border-color: var(--line-2); transform: translateY(-1px); }
.tdy-stat.bad { border-color: rgba(255,95,109,.4); }
.tdy-stat.warn { border-color: rgba(247,185,85,.35); }
.tdy-stat-v { font-size: var(--fs-2xl); font-weight: 700; color: var(--txt); letter-spacing: -0.02em; }
.tdy-stat.bad .tdy-stat-v { color: var(--red); }
.tdy-stat-l { font-size: var(--fs-xs); color: var(--txt-2); margin-top: var(--sp-1); }
.tdy-list { display: flex; flex-direction: column; }
.tdy-item { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .12s; border-radius: var(--r-md); }
.tdy-item:last-child { border-bottom: 0; }
.tdy-item:hover { background: var(--panel-2); }
.tdy-item.lead { background: var(--accent-glow); padding-left: var(--sp-5); padding-right: var(--sp-5); margin-bottom: var(--sp-2); border-bottom: 0; border: 1px solid var(--accent-dim); }
.tdy-ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; font-size: var(--fs-lg); }
.tdy-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.tdy-t { font-size: var(--fs-md); font-weight: 600; color: var(--txt); }
.tdy-s { font-size: var(--fs-xs); color: var(--txt-2); }
.tdy-go { color: var(--txt-3); font-size: var(--fs-xl); flex: none; }
.tdy-item:hover .tdy-go { color: var(--accent); }
@media (max-width: 720px) { .tdy-pulse { grid-template-columns: 1fr 1fr; } }

/* Art tools: print-quality verdict + gang-sheet planner readout. */
.dtf-q-row { display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--panel-2); border-left-width: 3px; }
/* An explicit `display` beats the UA stylesheet's [hidden] rule, so the collapsed warning still drew
   as an empty coloured bar. Restore what `hidden` is supposed to mean. */
.dtf-q-row[hidden] { display: none; }
.dtf-q-row strong { font-size: var(--fs-md); }
.dtf-q-row span { font-size: var(--fs-xs); color: var(--txt-2); line-height: 1.5; }
.dtf-q-row.good { border-left-color: var(--accent); }
.dtf-q-row.ok { border-left-color: var(--accent); }
.dtf-q-row.warn { border-left-color: var(--amber); }
.dtf-q-row.bad { border-left-color: var(--red); }
.gs-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.gs-facts > div { display: grid; gap: var(--sp-1); padding: var(--sp-5) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.gs-facts span { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .5px; }
.gs-facts strong { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .gs-facts { grid-template-columns: 1fr 1fr; } }

/* Order board cards (lite). Reuses .board/.col/.jcard/.ghost from the production board. */
.jc-h { display: flex; align-items: baseline; gap: var(--sp-4); }
.jc-num { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--txt-3); }
.jc-amt { margin-left: auto; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.jc-who { font-size: var(--fs-xs); font-weight: 600; margin: var(--sp-2) 0 var(--sp-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.jc-track { font-size: var(--fs-2xs); color: var(--txt-2); margin-top: var(--sp-4); word-break: break-all; line-height: 1.4; }

/* Artwork / mockup approval on an estimate. */
.mk-list { display: grid; gap: var(--sp-5); }
.mk { display: grid; grid-template-columns: 66px 1fr auto; gap: var(--sp-5); align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); background: var(--panel-2); }
.mk-thumb { width: 66px; height: 54px; border-radius: var(--r-md); overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--fs-xl); }
.mk-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-body { min-width: 0; }
.mk-note { font-size: var(--fs-xs); color: var(--amber); font-style: italic; margin-top: var(--sp-3); line-height: 1.5; }
.mk-act { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .mk { grid-template-columns: 52px 1fr; }
  .mk-thumb { width: 52px; height: 44px; }
  .mk-act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Shop-logo picker in Settings + the lite welcome screen. */
.logo-row { display: flex; align-items: center; gap: var(--sp-6); }
.logo-prev { width: 116px; height: 62px; flex: none; border: 1px dashed var(--line-2); border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--panel-2); overflow: hidden; }
.logo-prev img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* First-run start card — the three things a brand-new shop can do immediately. */
.tdy-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.tdy-start-a { display: grid; gap: var(--sp-3); padding: var(--sp-7) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2); text-decoration: none; transition: border-color .15s, transform .1s; }
.tdy-start-a:hover { border-color: var(--accent); transform: translateY(-1px); }
.tdy-start-ic { font-size: var(--fs-xl); line-height: 1; color: var(--accent); }
.tdy-start-t { font-size: var(--fs-md); font-weight: 700; color: var(--txt); }
.tdy-start-s { font-size: var(--fs-xs); color: var(--txt-2); line-height: 1.5; }
.tdy-start-go { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); margin-top: var(--sp-2); }
@media (max-width: 720px) { .tdy-start { grid-template-columns: 1fr; } }

/* ============ Quote calculator — one financial language ============ */
.qhead { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); }
.qhead-total { font-size: var(--fs-sm); color: var(--txt-2); margin-top: var(--sp-2); }
.qverdict { border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-sm); }
.qverdict.good { background: var(--accent-glow); border: 1px solid var(--accent-dim); }
.qverdict.warn { background: rgba(247,185,85,.1); border: 1px solid rgba(247,185,85,.4); }
.qverdict.bad { background: rgba(255,95,109,.1); border: 1px solid rgba(255,95,109,.4); }
.qv-label { font-weight: 700; }
.qverdict.good .qv-label { color: var(--accent); } .qverdict.warn .qv-label { color: var(--amber); } .qverdict.bad .qv-label { color: var(--red); }
.qv-vph { color: var(--txt-2); font-size: var(--fs-xs); }
.qv-warn { flex-basis: 100%; color: var(--red); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.qtiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.qtile { background: var(--panel-2); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5); text-align: center; }
.qtile-l { font-size: var(--fs-2xs); color: var(--txt-3); text-transform: uppercase; letter-spacing: .4px; }
.qtile-v { font-size: var(--fs-xl); font-weight: 700; color: var(--txt); margin-top: var(--sp-2); }
.qshow { width: 100%; background: none; border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--txt-2); font-size: var(--fs-xs); padding: var(--sp-4); cursor: pointer; margin-bottom: var(--sp-5); }
.qshow:hover { border-color: var(--accent); color: var(--accent); }

/* ============ DTF Resize ============ */
.dtf-wrap { max-width: 940px; margin: 0 auto; }
.dtf-controls .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-2); }
.dtf-stage { display: grid; place-items: center; min-height: 200px; }
.dtf-stage canvas { max-width: 100%; border-radius: var(--r-md); }
@media (max-width: 720px) { .dtf-controls .grid4 { grid-template-columns: 1fr 1fr; } }

/* Gang sheet builder: design list on the left, live roll preview on the right. */
.gsb { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-6); align-items: start; }
.gsb-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); max-height: 46vh; overflow-y: auto; }
.gsb-item { display: grid; grid-template-columns: 46px 1fr auto; gap: var(--sp-5); align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--panel-2); }
.gsb-item img { width: 46px; height: 46px; object-fit: contain; background: var(--panel); border-radius: var(--r-sm); }
.gsb-item-n { font-size: var(--fs-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsb-item-f { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.gsb-item-f label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-3xs); color: var(--txt-3); }
.gsb-item-f .input { width: 62px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.gsb-item-f .dim { font-size: var(--fs-3xs); }
.gsb-item-a { display: flex; flex-direction: column; gap: var(--sp-2); }
.gsb-stage-card { position: sticky; top: 12px; }
.gsb-stage { display: grid; place-items: center; max-height: calc(100vh - 190px); overflow: auto; background: var(--bg); }
.gsb-stage canvas { max-width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow); }
@media (max-width: 900px) { .gsb { grid-template-columns: 1fr; } .gsb-stage-card { position: static; } }

/* ── Disclosure ───────────────────────────────────────────────────────────────
   Progressive disclosure primitive: the simple path stays on screen, the depth
   folds away behind a summary. Built on native <details> so it keeps keyboard
   support, find-in-page, and screen-reader semantics for free — a div+JS
   accordion loses all three. */
.disc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); margin-top: var(--sp-5); }
.disc > summary {
  cursor: pointer; padding: var(--sp-5) var(--sp-5); list-style: none;
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-xs); font-weight: 600; color: var(--txt-2);
  border-radius: var(--r-md);
}
.disc > summary::-webkit-details-marker { display: none; }
/* The chevron is drawn, not an emoji or an icon font — one less asset, and it
   inherits currentColor so it tracks the theme without a second rule. */
.disc > summary::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); margin-left: var(--sp-1);
  transition: transform .18s ease;
}
.disc[open] > summary::before { transform: rotate(45deg); }
.disc > summary:hover { color: var(--txt); }
.disc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.disc-b { padding: var(--sp-1) var(--sp-5) var(--sp-5); border-top: 1px solid var(--line); margin-top: -1px; }
.disc-b > * + * { margin-top: var(--sp-5); }
@media (prefers-reduced-motion: reduce) { .disc > summary::before { transition: none; } }

/* A labelled, copyable value — the shape every "paste this into the other app"
   row wants: monospace, selectable, and it wraps instead of overflowing. */
.kv { display: grid; gap: var(--sp-2); }
.kv > code {
  font: var(--fs-2xs)/1.5 var(--mono); color: var(--txt);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4);
  word-break: break-all; user-select: all;
}

/* ── Numbered setup steps ─────────────────────────────────────────────────────
   A guided sequence, not a bulleted list. The rule down the left connects the
   markers so the eye reads it as one path with a beginning and an end; the
   counter is drawn from CSS so the markup stays a plain <ol> and the numbering
   can never drift out of sync with the content. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--sp-7) var(--sp-9); border-left: 1px solid var(--line); margin-left: var(--sp-5);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: var(--sp-2); }
.steps > li::before {
  content: counter(step);
  position: absolute; left: -11px; top: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 var(--fs-2xs)/1 var(--mono); color: var(--txt-2);
  background: var(--panel); border: 1px solid var(--line-2);
}
.steps .step-t { font-size: var(--fs-sm); font-weight: 650; color: var(--txt); margin-bottom: var(--sp-2); }
.steps .step-d { font-size: var(--fs-xs); line-height: 1.6; color: var(--txt-3); }
@media (max-width: 560px) { .steps > li { padding-left: var(--sp-8); } }


/* ── Touch targets ────────────────────────────────────────────────────────────
   At 375px these controls measured 36px (.nav a), 30px (.logout-btn), 34px
   (.theme-toggle) and 32px (.menu-btn) — all under the 44px comfortable minimum,
   and .menu-btn is the only way to open the nav at that width.

   This block sits at the very end of the sheet on purpose. `.logout-btn` is
   declared *after* the main 900px media query, so a rule of equal specificity
   placed up there loses on source order and silently does nothing; only the last
   word in the file reliably wins for every one of these.

   `.nav a` is sized by its content, so min-height (not height) does the work and
   the align-items:center already on the rule keeps the label centred. */
@media (max-width: 900px) {
  .nav a       { min-height: var(--tap); }
  .logout-btn  { width: var(--tap); height: var(--tap); }
  .theme-toggle{ width: var(--tap); height: var(--tap); }
  .menu-btn    { width: var(--tap); height: var(--tap); }
  /* WCAG 2.5.5: interactive controls reach a 44px touch target on phones/tablets. A production
     floor is a mobile context; a 24px destructive button is the worst offender this fixes. */
  .btn, .input, .select, .chip, textarea.input { min-height: var(--tap); }
  .btn.sm      { min-height: var(--tap); }
  .del         { min-height: var(--tap); min-width: var(--tap); }
  .sz-more     { min-height: var(--tap); min-width: 34px; }
  .asst-trigger{ min-height: var(--tap); min-width: var(--tap); }
}

/* ================= v56: Floor Mode, Books, Developers ================= */

td.r, th.r { text-align: right; }
td.bad, .bad { color: var(--red); }

.scan-wrap { max-width: 560px; margin: 0 auto; }
.scan-cam-card { padding: var(--sp-6); text-align: center; margin-bottom: var(--sp-6); }
#scan-video { width: 100%; max-height: 320px; border-radius: 10px; object-fit: cover; background: #000; }
.scan-form { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.scan-form input { flex: 1; min-height: var(--tap, 44px); font-size: 17px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); }
.scan-job-card { padding: var(--sp-7); }
.scan-num { font: 700 15px/1 ui-monospace, monospace; color: var(--txt-2); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.scan-job-card h2 { margin: 0 0 4px; }
.scan-advance { width: 100%; min-height: 56px; font-size: 17px; margin: 14px 0 10px; }
.scan-stages { display: flex; flex-wrap: wrap; gap: 6px; }
.scan-stage { padding: 8px 12px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--panel-2); color: var(--txt-2); font-size: 12px; cursor: pointer; }
.scan-stage.cur { background: rgba(16, 211, 154, .15); color: var(--accent); border-color: rgba(16, 211, 154, .35); font-weight: 700; }
.scan-done { color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.scan-log { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; display: grid; gap: 3px; }

.dev-key-row { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.dev-key-row code { padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.dev-secret { display: block; margin-top: 10px; padding: 12px; background: rgba(16, 211, 154, .08); border: 1px solid rgba(16, 211, 154, .3); border-radius: 8px; font-size: 13px; word-break: break-all; }
.dev-events code { padding: 1px 5px; background: var(--panel-2); border-radius: 4px; }