/* ============================================================
   LITON:One UI — tokens + components
   v1.0 · 2026-08-28 · extracted from the Sales CRM design mockup
   Source of truth for values: Liton Design System Package v1.0
   (file 03 / shared.css) + the mockup's deviation log DV-01/02/06.

   API — set attributes on <html>:
     data-theme    : (unset = follow OS) | "light" | "dark"
     data-contrast : (unset = normal)    | "low"   | "high"
     data-density  : (unset = standard)  | "compact" | "comfortable"

   Rules of the road:
   · Zero border-radius (50% dots only) · zero box-shadows ·
     flat surfaces + 1px hairlines · amber earned, never decorates.
   · Inter Tight = display + body. JetBrains Mono = eyebrows,
     labels, chips, IDs, numbers. The two never swap roles.
   · Every color flows through a token. No literals in components
     except on committed navy surfaces (cover/chrome).
   ============================================================ */

/* ---------- 1 · BASE — light · normal · standard ---------- */
:root{
  /* surfaces */
  --bg:#ffffff; --bg-2:#f7f7f7; --bg-3:#ececec; --card:#ffffff;
  /* inks */
  --ink:#00274a; --ink-2:#01426a; --ink-3:#5f6672; --charcoal:#222222;
  /* hairlines */
  --line:#c8c8c8; --line-2:#e8e8e8;
  /* amber — #FBB715 is constant across every mode; it is fill/ring,
     never body text. --accent-text is the DV-06 text-role variant. */
  --accent:#fbb715; --accent-text:#9a6700;
  --accent-tint:#fff1cf; --accent-tint-line:#e5c785;
  /* status — one meaning per color, everywhere */
  --ok:#1f7a4d; --ok-bg:#e8f3ec;
  --warn:#a34a05; --warn-bg:#fff1cf;
  --bad:#8a1c1c; --bad-bg:#fbeaea;
  --future:#5f6672; --future-bg:#f7f7f7;
  /* committed navy set — identical in every theme */
  --navy-fixed:#00274a; --navy-mut:#9fb1c4; --navy-line:#103a5e; --navy-ok:#4fb27e;
  /* app chrome (top bar) */
  --chrome-bg:#ffffff; --chrome-ink:#00274a; --chrome-line:#c8c8c8; --chrome-mut:#5f6672;
  /* heat ramp — exactly four stops */
  --heat-1:#fff1cf; --heat-2:#fbd76a; --heat-3:#fbb715; --heat-4:#d99500;
  /* selection + focus */
  --sel-bg:#fff8e6; --focus:#00274a; --focus-w:2px;
  /* type */
  --font-d:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* density — standard */
  --d-cell-y:13px;  /* row vertical padding (queue rows, feed items) */
  --d-cell-x:16px;  /* row horizontal padding */
  --d-card:16px;    /* card body padding */
  --d-gap:18px;     /* grid gaps between cards */
  --d-ctl-y:12px; --d-ctl-x:20px;   /* CTA padding */
  --d-act-y:6px;  --d-act-x:10px;   /* action-chip padding */
  --d-table-y:12px; --d-table-x:14px; /* table cell padding */
  --d-kpi:18px;     /* KPI tile padding */
  --d-strip-y:14px; --d-strip-x:16px; /* count-strip cell padding */
  --d-topbar:56px;  /* app top bar height */
  --d-nav-y:9px;    /* surface-nav item vertical padding */
}

/* ---------- 2 · DARK (DV-02 proposed set) ---------- */
/* System-dark: applies when the OS is dark and no explicit light choice */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1622; --bg-2:#151f2d; --bg-3:#1c283a; --card:#151f2d;
    --ink:#e7edf4; --ink-2:#c2ccd8; --ink-3:#8a97a8; --charcoal:#e7edf4;
    --line:#2d3b4e; --line-2:#243142;
    --accent:#fbb715; --accent-text:#f2c766;
    --accent-tint:#3a2d09; --accent-tint-line:#6b5210;
    --ok:#9bddb5; --ok-bg:#173a29;
    --warn:#f5d07a; --warn-bg:#4a3606;
    --bad:#f3a3a3; --bad-bg:#4a1c1c;
    --future:#8a97a8; --future-bg:#1c283a;
    --chrome-bg:#00274a; --chrome-ink:#ffffff; --chrome-line:#103a5e; --chrome-mut:#9fb1c4;
    --heat-1:#3a2d09; --heat-2:#8a6a10; --heat-3:#fbb715; --heat-4:#f2c766;
    --sel-bg:#2a2410; --focus:#fbb715;
  }
}
/* Explicit dark: the toggle wins in both directions */
:root[data-theme="dark"]{
  --bg:#0e1622; --bg-2:#151f2d; --bg-3:#1c283a; --card:#151f2d;
  --ink:#e7edf4; --ink-2:#c2ccd8; --ink-3:#8a97a8; --charcoal:#e7edf4;
  --line:#2d3b4e; --line-2:#243142;
  --accent:#fbb715; --accent-text:#f2c766;
  --accent-tint:#3a2d09; --accent-tint-line:#6b5210;
  --ok:#9bddb5; --ok-bg:#173a29;
  --warn:#f5d07a; --warn-bg:#4a3606;
  --bad:#f3a3a3; --bad-bg:#4a1c1c;
  --future:#8a97a8; --future-bg:#1c283a;
  --chrome-bg:#00274a; --chrome-ink:#ffffff; --chrome-line:#103a5e; --chrome-mut:#9fb1c4;
  --heat-1:#3a2d09; --heat-2:#8a6a10; --heat-3:#fbb715; --heat-4:#f2c766;
  --sel-bg:#2a2410; --focus:#fbb715;
}

/* ---------- 3 · CONTRAST — low ("calm") ---------- */
/* Softens hairlines and secondary ink for long reading sessions.
   Body text stays AA on white/card; micro-labels on tinted surfaces
   may ride ~4.2:1 — calm is not for vision-critical contexts. */
:root[data-contrast="low"]{
  --ink-3:#6e7783; --line:#d6dade; --line-2:#f0f1f2;
  --future:#6e7783;
}
:root[data-theme="dark"][data-contrast="low"]{
  --ink-3:#798696; --line:#26313f; --line-2:#1e2836;
  --future:#798696;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-contrast="low"]{
    --ink-3:#798696; --line:#26313f; --line-2:#1e2836;
    --future:#798696;
  }
}

/* ---------- 4 · CONTRAST — high ---------- */
/* Pushes body toward AAA, strengthens boundaries and focus. */
:root[data-contrast="high"]{
  --ink-2:#00365c; --ink-3:#454d57;
  --line:#8a9099; --line-2:#c4c9ce;
  --accent-text:#7a5200;
  --ok:#175f3c; --warn:#8a3f04; --bad:#7a1717;
  --future:#454d57;
  --focus-w:3px;
}
:root[data-theme="dark"][data-contrast="high"]{
  --ink:#f4f8fc; --ink-2:#dde5ee; --ink-3:#a7b2c2;
  --line:#46586e; --line-2:#37475a;
  --accent-text:#f7d78a;
  --ok:#b5e8ca; --warn:#f8dc96; --bad:#f7bcbc;
  --future:#a7b2c2;
  --focus-w:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-contrast="high"]{
    --ink:#f4f8fc; --ink-2:#dde5ee; --ink-3:#a7b2c2;
    --line:#46586e; --line-2:#37475a;
    --accent-text:#f7d78a;
    --ok:#b5e8ca; --warn:#f8dc96; --bad:#f7bcbc;
    --future:#a7b2c2;
    --focus-w:3px;
  }
}

/* ---------- 4b · HIGH-CONTRAST READABILITY ---------- */
/* High contrast is also a low-strain mode: bolder weights, fine print
   stepped up, body at the SOP's 14.5px floor, tracking relaxed to 0.
   Applies with either theme; density is untouched. */
:root[data-contrast="high"] body{font-size:14.5px;font-weight:500;letter-spacing:0}
:root[data-contrast="high"] :is(h1,h2,h3,h4){font-weight:600}
:root[data-contrast="high"] :is(.eyebrow,.t-eyebrow,.t-label,.card-h,.kpi .k,.strip .l,.kv .k,.fld label,.stg,.pill,.sla,.act-b,.chip,.snav .grp,.topbar .mod,.topbar .me,table.lt th,.brow .bn,.fstage .fl,.qrow .id small,.tev .tb .tm){font-weight:600}
:root[data-contrast="high"] :is(.pill,.sla,.act-b,.stg,.kpi .k,.card-h,.fld label,.kv .k,table.lt th,.strip .l){font-size:10.5px}
:root[data-contrast="high"] .chip{font-size:11px}
:root[data-contrast="high"] :is(.qrow .why .m,.brow .bn,.tev .tb .tm){font-size:11px}
:root[data-contrast="high"] :is(.qrow .id,.kv .v.mono,table.lt td.mono,table.lt td.num,.brow .bv,.fstage .fv){font-size:12px}
:root[data-contrast="high"] .qrow .why .r{font-size:14px}
:root[data-contrast="high"] table.lt{font-size:13.5px}
:root[data-contrast="high"] :is(.kpi .t,.snav .pin){font-size:11.5px}
:root[data-contrast="high"] .snav .nv{font-weight:600}
:root[data-contrast="high"] .article p,:root[data-contrast="high"] .article li{font-size:14.5px}
:root[data-contrast="high"] :is(.article-head .meta,.article-head .crumb,.term .t){font-weight:600}
:root[data-contrast="high"] .term p{font-size:13px}

/* ---------- 5 · DENSITY ---------- */
:root[data-density="compact"]{
  --d-cell-y:8px;  --d-cell-x:12px;
  --d-card:12px;   --d-gap:12px;
  --d-ctl-y:8px;   --d-ctl-x:14px;
  --d-act-y:4px;   --d-act-x:8px;
  --d-table-y:8px; --d-table-x:12px;
  --d-kpi:12px;
  --d-strip-y:10px; --d-strip-x:12px;
  --d-topbar:48px; --d-nav-y:6px;
}
:root[data-density="comfortable"]{
  --d-cell-y:18px;  --d-cell-x:20px;
  --d-card:24px;    --d-gap:24px;
  --d-ctl-y:14px;   --d-ctl-x:24px;
  --d-act-y:8px;    --d-act-x:14px;
  --d-table-y:16px; --d-table-x:18px;
  --d-kpi:24px;
  --d-strip-y:18px; --d-strip-x:20px;
  --d-topbar:64px; --d-nav-y:12px;
}

/* ============================================================
   COMPONENTS
   ============================================================ */
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-d);font-size:14px;line-height:1.55;letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.025em;text-wrap:balance}
a{color:var(--ink-2)}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:var(--focus-w) solid var(--focus);outline-offset:2px}
.mono{font-family:var(--font-m)}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.scroll-x{overflow-x:auto}

/* --- type scale (from Design System file 03 — 12 tokens) --- */
.t-display-1{font-size:96px;line-height:.92;letter-spacing:-.045em;font-weight:500}
.t-display-2{font-size:72px;line-height:.94;letter-spacing:-.04em;font-weight:500}
.t-display-3{font-size:56px;line-height:.98;letter-spacing:-.035em;font-weight:500}
.t-h1{font-size:40px;line-height:1.02;letter-spacing:-.03em;font-weight:500}
.t-h2{font-size:28px;line-height:1.05;letter-spacing:-.025em;font-weight:500}
.t-h3{font-size:22px;line-height:1.1;letter-spacing:-.02em;font-weight:500}
.t-body-l{font-size:17px;line-height:1.65;letter-spacing:-.005em}
.t-body-m{font-size:14px;line-height:1.65;letter-spacing:-.005em}
.t-body-s{font-size:12px;line-height:1.6}
.t-eyebrow{font-family:var(--font-m);font-size:11px;line-height:1;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.t-label{font-family:var(--font-m);font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.t-mono-l{font-family:var(--font-m);font-size:14px;line-height:1.5;letter-spacing:-.005em;font-weight:500}
/* one italic word per headline — amber as type only via --accent-text */
em.am,.am{font-style:italic;color:var(--accent-text)}

/* --- CTAs — three tiers, never four --- */
.cta{display:inline-flex;align-items:center;gap:10px;padding:var(--d-ctl-y) var(--d-ctl-x);
  font-family:var(--font-d);font-weight:500;font-size:14px;letter-spacing:-0.005em;
  border:1px solid transparent;cursor:pointer;transition:background 120ms ease,color 120ms ease}
.cta .arr{font-family:var(--font-m)}
.cta.primary{background:var(--accent);color:var(--navy-fixed)}
.cta.primary:hover{background:var(--navy-fixed);color:#ffffff}
.cta.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta.secondary:hover{background:var(--ink);color:var(--bg)}
.cta.tertiary{background:transparent;color:var(--ink);padding:6px 0}
.cta.tertiary:hover{color:var(--ink);text-decoration:underline}
.cta.sm{padding:8px 14px;font-size:12.5px}
.cta[disabled]{opacity:.4;cursor:not-allowed}

/* --- action chip — the chip pattern doing row work (DV-03) --- */
.act-b{background:transparent;color:var(--ink-3);border:1px solid var(--line-2);
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:var(--d-act-y) var(--d-act-x);cursor:pointer;
  transition:border-color 120ms ease,color 120ms ease}
.act-b:hover{border-color:var(--ink);color:var(--ink)}

/* --- filter / view chips --- */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;transition:background 120ms ease,color 120ms ease,border-color 120ms ease}
.chip:hover{background:var(--bg-2)}
.chip.on,.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .ct{font-weight:600}
.chip.amber{background:var(--accent-tint);border-color:var(--accent-tint-line)}

/* --- status pills — color only inside the pill, never row shading --- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;flex:none}
.pill.ok{background:var(--ok-bg);color:var(--ok)}       .pill.ok .dot{background:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.warn .dot{background:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}    .pill.bad .dot{background:var(--bad)}
.pill.future{background:var(--future-bg);color:var(--future);border:1px dashed var(--line)}
.pill.future .dot{background:var(--future)}
.pill.stage{background:var(--bg-2);color:var(--ink-3);border:1px solid var(--line-2)}
.pill.stage .dot{background:var(--ink-3)}
:root[data-contrast="high"] .pill{border:1px solid currentColor}

/* --- cards --- */
.card{background:var(--card);border:1px solid var(--line)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px var(--d-cell-x);border-bottom:1px solid var(--line-2);
  font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.card-h b{color:var(--ink);font-weight:500}
.card-b{padding:var(--d-card)}

/* --- KPI tile — one number, one label, one trend; ≤1 amber per board --- */
.kpi{background:var(--card);border:1px solid var(--line);padding:var(--d-kpi);
  display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;
  transition:border-color 120ms ease}
.kpi:hover{border-color:var(--ink)}
.kpi .k{font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-size:40px;letter-spacing:-.035em;line-height:1;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .t{font-family:var(--font-m);font-size:11px}
.kpi .t.up{color:var(--ok)} .kpi .t.down{color:var(--bad)} .kpi .t.flat{color:var(--ink-3)}
.kpi.hot{background:var(--accent);border-color:var(--accent)}
.kpi.hot .k,.kpi.hot .t{color:#01426a}
.kpi.hot .v{color:var(--navy-fixed)}

/* --- count strip — every number is a door --- */
.strip{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.strip button{flex:1 1 150px;background:var(--card);padding:var(--d-strip-y) var(--d-strip-x);
  text-align:left;display:flex;flex-direction:column;gap:4px;transition:background 120ms ease}
.strip button:hover{background:var(--sel-bg)}
.strip .n{font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.strip .n.warn{color:var(--warn)} .strip .n.bad{color:var(--bad)}
.strip .l{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* --- queue row — the reason it is here + the clock, always --- */
.qrow{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;
  padding:var(--d-cell-y) var(--d-cell-x);border-bottom:1px solid var(--line-2);
  background:var(--card);transition:background 120ms ease}
.qrow:hover{background:var(--bg-2)}
.qrow .id{font-family:var(--font-m);font-size:11.5px;font-weight:500;color:var(--ink)}
.qrow .id small{display:block;font-size:9px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase;margin-top:3px;font-weight:400}
.qrow .why{min-width:0}
.qrow .why .r{font-size:13.5px;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.qrow .why .m{font-family:var(--font-m);font-size:10.5px;color:var(--ink-3);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 12px}
.qrow .why .m b{color:var(--ink-2);font-weight:500}
.qrow .act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:end}
.qrow.leaving{animation:lto-leave .28s ease forwards}

/* --- SLA chip --- */
.sla{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;padding:3px 7px;white-space:nowrap}
.sla.over{background:var(--bad-bg);color:var(--bad)}
.sla.near{background:var(--warn-bg);color:var(--warn)}
.sla.okc{background:var(--ok-bg);color:var(--ok)}

/* --- list table — first column is a business number --- */
table.lt{width:100%;border-collapse:collapse;font-size:13px;background:var(--card)}
table.lt th{font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;text-align:left;
  padding:10px var(--d-table-x);border-bottom:1px solid var(--ink);white-space:nowrap}
table.lt td{padding:var(--d-table-y) var(--d-table-x);border-bottom:1px solid var(--line-2);vertical-align:middle}
table.lt td.mono,table.lt td.num{font-family:var(--font-m);font-size:11.5px}
table.lt td.num{text-align:right;font-variant-numeric:tabular-nums}
table.lt tr{transition:background 120ms ease}
table.lt tbody tr:hover{background:var(--bg-2)}
.tr-up{color:var(--ok);font-family:var(--font-m)}
.tr-dn{color:var(--bad);font-family:var(--font-m)}
.tr-fl{color:var(--ink-3);font-family:var(--font-m)}

/* --- key-value grid --- */
.kv{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--card)}
.kv>div{padding:11px var(--d-cell-x);border-bottom:1px solid var(--line-2)}
.kv .k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.kv .v{font-size:13px;color:var(--ink);border-left:1px solid var(--line-2);font-weight:500}
.kv .v.mono{font-family:var(--font-m);font-size:11.5px}

/* --- horizontal bars — sorted, one amber, start at zero --- */
.brow{display:grid;grid-template-columns:170px 1fr 80px;gap:14px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line-2)}
.brow .bn{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .btr{height:14px;background:var(--bg-2)}
.brow .bf{height:100%;background:var(--ink);width:0;transition:width .5s ease}
.brow .bf.amber{background:var(--accent)}
.brow .bv{font-family:var(--font-m);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}

/* --- funnel — true scale; min-width keeps tiny values visible --- */
.fstage{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center}
.fstage .fl{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.fstage .ftr{height:26px;background:var(--bg-2)}
.fstage .ff{height:100%;background:var(--ink-2);width:0;min-width:2px;transition:width .6s ease}
.fstage .fv{font-family:var(--font-m);font-size:11.5px;font-variant-numeric:tabular-nums}

/* --- stage strip — legal moves visible before the click --- */
.stages{display:flex;gap:1px;background:var(--line-2);border:1px solid var(--line-2);flex-wrap:wrap}
.stg{flex:1 1 90px;background:var(--card);padding:10px 12px;text-align:center;position:relative;
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stg .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.stg.done{color:var(--ink)}
.stg.done .bar{width:100%;background:var(--ink-3)}
.stg.now{color:var(--navy-fixed);background:var(--accent);font-weight:600}
.stg.won{color:var(--bg);background:var(--ok);font-weight:600}
.stg.anim .bar{animation:lto-fill .2s ease forwards}

/* --- trail — append-only, actor + timestamp, changed-from → changed-to --- */
.tev{display:grid;grid-template-columns:14px 1fr;gap:14px;position:relative;padding:0 0 var(--d-gap)}
.tev::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:1px;background:var(--line-2)}
.tev:last-child::before{display:none}
.tev .td{width:9px;height:9px;border:2px solid var(--ink-3);background:var(--card);border-radius:50%;margin-top:3px}
.tev.hot .td{border-color:var(--accent);background:var(--accent)}
.tev .tb .tt{font-size:13px;color:var(--ink);font-weight:500}
.tev .tb .tt .fromto{font-family:var(--font-m);font-size:10.5px;color:var(--ink-3);font-weight:400}
.tev .tb .tm{font-family:var(--font-m);font-size:10px;color:var(--ink-3);margin-top:3px;letter-spacing:.06em}
.tev.new{animation:lto-rise .4s ease}

/* --- form input — mono label above, 1px line, navy focus stroke --- */
.fld label{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-family:var(--font-d);font-size:14px;padding:var(--d-act-y) 14px;min-height:38px;border-radius:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink)}

/* --- callout note — amber-tint, one per surface at most --- */
.note{border-left:2px solid var(--accent);background:var(--accent-tint);padding:12px var(--d-cell-x);
  font-size:12.5px;color:var(--ink);line-height:1.6}
.note b{font-weight:600}

/* --- article — the Learn / Know page (surface #6) --- */
/* One reading column, verb-led title, owner on every article,
   "flag as outdated" raises a Handoff to that owner. */
.article{max-width:68ch}
.article-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px}
.article-head .crumb{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.article-head .crumb b{color:var(--ink);font-weight:500}
.article-head h1{font-size:28px;letter-spacing:-.025em;line-height:1.1;font-weight:500}
.article-head .lede{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:12px 0 0}
.article-head .meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.article-head .meta b{color:var(--ink);font-weight:500}
.article p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.article h2{font-size:22px;letter-spacing:-.02em;font-weight:500;border-top:1px solid var(--line-2);padding-top:20px;margin:28px 0 12px}
.article h3{font-size:16px;letter-spacing:-.015em;font-weight:600;margin:22px 0 8px}
.article a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.article ul,.article ol{margin:0 0 14px;padding-left:22px;color:var(--ink-2);line-height:1.7}
.article li{margin:4px 0}
.steps{list-style:none;counter-reset:step;padding:0;margin:0 0 14px}
.steps li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);line-height:1.65}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-m);font-size:10px;letter-spacing:.1em;color:var(--accent-text);padding-top:4px}
.term{border:1px solid var(--line);background:var(--card);padding:12px 16px;margin:0 0 10px}
.term .t{font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.term p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.article .foot-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:26px}

/* --- app frame — the menu: top bar + surface nav --- */
/* Rules: seven surfaces, fixed order, on every module; empty slots ship
   as stubs. Universal search on every page, never only on Find. The Plus
   compose icon is always top-right. The pin rail rides every page.
   In dark theme the chrome commits to navy so the white logo merges. */
.topbar{position:sticky;top:0;z-index:60;background:var(--chrome-bg);color:var(--chrome-ink);
  border-bottom:1px solid var(--chrome-line);display:flex;align-items:center;gap:18px;
  padding:0 20px;height:var(--d-topbar)}
.topbar .logo-l,.topbar .logo-d{height:24px;display:block} /* 24px = logo digital minimum */
.topbar .logo-d{display:none}
:root[data-theme="dark"] .topbar .logo-l{display:none}
:root[data-theme="dark"] .topbar .logo-d{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topbar .logo-l{display:none}
  :root:not([data-theme="light"]) .topbar .logo-d{display:block}
}
.topbar .div{width:1px;height:22px;background:var(--chrome-line)}
.topbar .mod{font-family:var(--font-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-mut);white-space:nowrap}
.topbar .search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--chrome-line);padding:7px 12px;color:var(--chrome-mut);
  cursor:text;background:transparent;font-size:12.5px;transition:border-color 120ms ease}
.topbar .search:hover{border-color:var(--accent)}
.topbar .search .hint{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;margin-left:auto;border:1px solid var(--chrome-line);padding:2px 6px}
.topbar .grow{flex:1}
.topbar .plus{width:34px;height:34px;border:1px solid var(--chrome-line);display:grid;place-items:center;
  font-size:19px;color:var(--chrome-ink);transition:background 120ms ease,color 120ms ease,border-color 120ms ease}
.topbar .plus:hover{background:var(--accent);color:var(--navy-fixed);border-color:var(--accent)}
.topbar .me{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-mut);border:1px solid var(--chrome-line);padding:7px 10px;white-space:nowrap}

.snav{width:212px;border-right:1px solid var(--line-2);background:var(--bg);
  padding:18px 0 28px;display:flex;flex-direction:column}
.snav .grp{font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding:14px 18px 8px}
.snav .nv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:var(--d-nav-y) 18px;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);
  border-left:2px solid transparent;
  transition:background 120ms ease,border-color 120ms ease,color 120ms ease}
.snav .nv .ix{font-family:var(--font-m);font-size:9.5px;color:var(--ink-3);width:14px;flex:none}
.snav .nv .bdg{margin-left:auto;font-family:var(--font-m);font-size:10px;color:var(--navy-fixed);background:var(--accent);padding:1px 6px;font-weight:600}
.snav .nv:hover{background:var(--bg-2)}
.snav .nv.on,.snav .nv[aria-current="page"]{border-left-color:var(--accent);background:var(--bg-2);color:var(--ink)}
.snav .rail{margin-top:auto;border-top:1px solid var(--line-2);padding-top:10px}
.snav .pin{display:flex;align-items:center;gap:8px;padding:6px 18px;
  font-family:var(--font-m);font-size:10.5px;color:var(--ink-2);letter-spacing:.02em;
  width:100%;text-align:left;transition:background 120ms ease}
.snav .pin:hover{background:var(--bg-2)}
.snav .pin .pd{width:5px;height:5px;background:var(--ink-3);border-radius:50%;flex:none}
.snav .pin.stale .pd{background:var(--warn);animation:lto-pulse 2s ease-in-out infinite}
/* mobile: the nav becomes a horizontal scroll strip; active = amber underline;
   groups and the pin rail hide (pins remain reachable from My Admin) */
@media (max-width:980px){
  .snav{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-2);padding:0}
  .snav .grp,.snav .rail{display:none}
  .snav .nv{width:auto;border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .snav .nv.on,.snav .nv[aria-current="page"]{border-bottom-color:var(--accent)}
}

/* --- heat cells --- */
.heat{display:inline-block;width:16px;height:16px}
.heat.h0{background:var(--line-2)} .heat.h1{background:var(--heat-1)}
.heat.h2{background:var(--heat-2)} .heat.h3{background:var(--heat-3)} .heat.h4{background:var(--heat-4)}
.heat.hf{background:var(--future-bg);border:1px dashed var(--line)}

/* ============================================================
   MOTION VOCABULARY (DV-01) — three moves, nothing else
   · 120ms ease   — hover / selection
   · 0.2s fill    — state change (stage bars, progress)
   · 2s ring      — staleness pulse (flat outline, no shadows)
   ============================================================ */
@keyframes lto-fill{from{width:0}to{width:100%}}
@keyframes lto-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lto-leave{to{opacity:0;transform:translateX(24px)}}
@keyframes lto-pulse{0%,100%{outline:1px solid var(--warn);outline-offset:0}50%{outline:1px solid transparent;outline-offset:4px}}
.pulse-stale{animation:lto-pulse 2s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}