/* ── desk.css — Going Concern: the desk ─────────────────────────────
   A dark, dense, keyboard-first terminal. Numbers in Plex Mono, prose in
   Plex Sans, documents on paper in Plex Serif. Nothing blinks, nothing
   bounces. The old apps render into panes through the same class names
   they always used (.fieldset, .kpi-box, .meter, .btn …), restyled here. */

/* ── tokens: the whole desk is drawn from these (docs/DESIGN-SYSTEM.md) ──
   --u is the unit. Every size below is a multiple of it, so a wall display
   scales the desk by changing one number (the media queries at the end).
   Hex colours live here and nowhere else; tools/design-lint.js checks it. */
:root{
  --u:1px;
  /* surfaces and lines */
  --bg:#0a0d12; --bg-2:#10151c; --panel:#11161d; --panel-2:#161c25; --panel-3:#182230; --line:#1f2833; --line-2:#2a3542;
  /* text on the dark surfaces, contrast for small text: text 15.8:1; muted 6.5:1 on --bg, 6.0:1 on --panel,
     5.7:1 on --panel-2; dim 5.2:1 on --bg, 4.9:1 on --panel, 4.6:1 on --panel-2 (WCAG AA is 4.5:1) */
  --text:#e3e8ee; --muted:#8a96a3; --dim:#7a8693;
  --accent:#f5b000; --accent-hi:#ffc62a; --accent-dim:#8a6500; --accent-wash:#2a2000; --on-accent:#000;
  --accent-glow:rgba(245,176,0,.10); --accent-glow-2:rgba(245,176,0,.18); --accent-glow-3:rgba(245,176,0,.25);
  --up:#2fbf71; --up-dim:#1f4a33; --down:#e8565b; --down-dim:#5a2a2c; --warn-c:#f5b000; --link:#5b9cf6; --link-dim:#2a3e5c;
  --duotone:#f5b000;   /* the amber the photographs are printed in; not the accent, so paper can change the accent */
  /* paper: documents are ink on paper, never the terminal's colours. Small text on --paper:
     ink-2 8.1:1, ink-dim 5.6:1, ink-link 7.6:1, ink-up 6.1:1, ink-down 6.0:1, ink-accent 5.9:1 */
  --paper:#f7f4ec; --paper-2:#efeadf; --paper-3:#fffdf7; --paper-hover:#f1ecdf; --ink:#161616; --ink-2:#4a4a4a; --ink-3:#2b2b2b; --ink-dim:#626262;
  --rule:#d9d3c4; --rule-2:#bdb6a6; --rule-3:#cfc8b6; --ink-link:#1f4e8c; --ink-up:#1b6a32; --ink-down:#b3261e; --ink-accent:#7a5800; --ink-brown:#5a4a1e; --sepia:#8a7a5a;
  /* the painting's frame on the ending */
  --wood:#2b2118; --wood-2:#6b4a2a; --brass:#b8862b; --brass-ink:#2b1d08; --brass-line:#7a5a1e;
  /* scrims and shadows */
  --scrim-1:rgba(4,6,9,.62); --scrim:rgba(4,6,9,.72); --scrim-2:rgba(4,6,9,.85);
  --shadow-lift:0 30px 80px rgba(0,0,0,.6); --shadow-win:0 10px 36px rgba(0,0,0,.63); --shadow-frame:0 6px 20px rgba(0,0,0,.4); --shadow-float:0 10px 30px rgba(0,0,0,.5);
  /* type: Plex Mono for numbers and codes, Plex Sans for prose, Plex Serif on paper */
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --serif:'IBM Plex Serif',Georgia,serif;
  /* the type scale: eight steps */
  --fs-1:calc(10 * var(--u));   /* micro: kickers, tags, labels, captions */
  --fs-2:calc(11 * var(--u));   /* chrome: the strip, hints, buttons, table cells */
  --fs-3:calc(12 * var(--u));   /* the desk's body: numbers and prose in the panes */
  --fs-4:calc(13 * var(--u));   /* prose: dialogs, forms, the memo */
  --fs-5:calc(15 * var(--u));   /* paper body, the big number in a tile */
  --fs-6:calc(18 * var(--u));   /* a dialog's headline */
  --fs-7:calc(22 * var(--u));   /* a paper's headline, the stamp */
  --fs-8:calc(26 * var(--u));   /* the letter's headline */
  --lh-1:1.15; --lh-2:1.4; --lh-3:1.5; --lh-4:1.55;   /* headline, interface, prose, paper */
  /* the spacing grid: 4px steps with 2px half steps below 16, a hairline, and three page margins for paper */
  --sp-px:calc(1 * var(--u));
  --sp-0:calc(2 * var(--u)); --sp-1:calc(4 * var(--u)); --sp-1h:calc(6 * var(--u)); --sp-2:calc(8 * var(--u)); --sp-2h:calc(10 * var(--u));
  --sp-3:calc(12 * var(--u)); --sp-3h:calc(14 * var(--u)); --sp-4:calc(16 * var(--u)); --sp-5:calc(20 * var(--u)); --sp-6:calc(24 * var(--u));
  --sp-7:calc(28 * var(--u)); --sp-8:calc(32 * var(--u));
  --page-1:calc(40 * var(--u)); --page-2:calc(48 * var(--u)); --page-3:calc(56 * var(--u));
  /* component heights */
  --h-strip:calc(44 * var(--u)); --h-cmd:calc(34 * var(--u)); --h-bar:calc(32 * var(--u)); --h-head:calc(28 * var(--u)); --h-tick:calc(26 * var(--u)); --h-btn:calc(22 * var(--u)); --h-icon:calc(20 * var(--u));
  /* the focus ring: amber on the dark surfaces, ink on paper (the paper block redefines --ring) */
  --ring:var(--accent); --ring-w:2px; --ring-off:2px;
  /* the old theme's tokens, mapped so leftover inline styles land on the palette */
  --face:var(--panel); --face-dk:var(--line-2); --face-lt:var(--panel-2); --shadow:#000;
  --title-a:var(--panel-2); --title-b:var(--panel-2); --desk:var(--bg); --sel:var(--accent); --seltext:var(--on-accent);
  --term-bg:#0b1016; --term-fg:var(--text); --pos:var(--up); --neg:var(--down); --warn:var(--warn-c); --note:#1a2230;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:var(--bg); color:var(--text); font:var(--fs-4)/var(--lh-2) var(--sans); overflow:hidden; -webkit-font-smoothing:antialiased; }
.hidden{ display:none !important; }
a{ color:var(--link); }
b,strong{ font-weight:600; }
::selection{ background:var(--accent); color:var(--on-accent); }
::-webkit-scrollbar{ width:var(--sp-2h); height:var(--sp-2h); } ::-webkit-scrollbar-thumb{ background:var(--line-2); } ::-webkit-scrollbar-track{ background:transparent; }

/* ═══ the appointment (the career screen) ═══ */
#login{ position:fixed; inset:0; overflow:auto; display:flex; justify-content:center; align-items:flex-start; padding:var(--page-1) var(--sp-4); background:
  radial-gradient(1200px 500px at 50% -10%, var(--panel-3) 0%, var(--bg) 60%); }
.appt{ width:min(calc(760 * var(--u)),100%); }
.appt .mast{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:var(--fs-3); color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--sp-3h); }
.appt .mast b{ color:var(--text); letter-spacing:.22em; }
.doc{ background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:var(--fs-5); line-height:var(--lh-4); padding:var(--page-2) var(--page-3); box-shadow:var(--shadow-lift); }
.doc .doc-kicker{ font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.doc h1{ font-size:var(--fs-8); font-weight:600; margin:var(--sp-1h) 0 var(--sp-0); letter-spacing:-.01em; }
.doc .doc-meta{ font-family:var(--mono); font-size:var(--fs-2); color:var(--ink-2); margin-bottom:var(--sp-7); }
.doc p{ margin:0 0 var(--sp-3h); }
.doc .sig{ margin-top:var(--sp-6); font-style:italic; color:var(--ink-2); }
.doc hr{ border:0; border-top:1px solid var(--rule); margin:var(--sp-6) 0; }
.login-form{ border-collapse:collapse; width:100%; margin:0 0 var(--sp-2); font-family:var(--sans); font-size:var(--fs-4); }
.login-form td{ padding:var(--sp-1h) 0; vertical-align:top; }
.login-form td:first-child{ width:calc(150 * var(--u)); color:var(--ink-2); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.08em; text-transform:uppercase; padding-top:var(--sp-2h); }
.login-form input,.login-form select{ width:100%; font:var(--fs-5) var(--serif); padding:var(--sp-1h) var(--sp-2); border:1px solid var(--rule-3); background:var(--paper-3); color:var(--ink); }
.login-form input:focus,.login-form select:focus{ outline:var(--ring-w) solid var(--ring); outline-offset:0; }
#login.first-visit:not(.adv-open) .login-form tr.adv{ display:none; }
#scenario-blurb{ font-size:var(--fs-3); color:var(--ink-2); margin-top:var(--sp-1); font-family:var(--sans); }
.linkbtn{ background:none; border:0; padding:0; color:var(--ink-brown); font:var(--fs-3) var(--mono); text-decoration:underline; cursor:pointer; margin-bottom:var(--sp-2h); }
.login-buttons{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-3) 0 var(--sp-1); }
.doc .btn{ font-family:var(--mono); font-size:var(--fs-3); letter-spacing:.06em; text-transform:uppercase; padding:var(--sp-2h) var(--sp-3h); border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; }
.doc .btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.doc .btn:disabled{ display:none; }
.doc .btn:hover:not(:disabled){ background:var(--ink-3); color:var(--paper); }
.qm{ margin-top:var(--sp-5); border-top:1px solid var(--rule); padding-top:var(--sp-3); }
.qm .qm-head{ font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--sp-1h); }
.qm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--sp-1h); }
.qm-btn{ text-align:left; font:var(--fs-3) var(--sans); padding:var(--sp-2) var(--sp-2h); border:1px solid var(--rule-3); background:var(--paper-3); cursor:pointer; color:var(--ink); }
.qm-btn b{ display:block; font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.06em; }
.qm-btn span{ color:var(--ink-2); font-size:var(--fs-2); }
.qm-btn:hover{ border-color:var(--ink); }
.pc{ margin-top:var(--sp-3h); border-top:1px solid var(--rule); padding-top:var(--sp-2h); font-family:var(--mono); font-size:var(--fs-2); }
.pc .pc-head{ letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--sp-1); }
.pc-row{ display:grid; grid-template-columns:1fr auto auto auto; gap:var(--sp-3); padding:var(--sp-1) 0; border-bottom:1px dotted var(--rule); cursor:pointer; }
.pc-row:hover{ background:var(--paper-hover); }
.pc-row .o{ color:var(--ink-2); }

/* ═══ the desk ═══ */
#desktop{ position:fixed; inset:0; display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr); font-family:var(--mono); font-size:var(--fs-3); }
#desktop > *{ min-width:0; }
#strip{ display:flex; align-items:stretch; gap:0; border-bottom:1px solid var(--line); background:var(--panel); height:var(--h-strip); overflow:hidden; }
#strip > *{ display:flex; align-items:center; padding:0 var(--sp-3); border-right:1px solid var(--line); white-space:nowrap; }
.s-brand{ font-weight:600; letter-spacing:.22em; font-size:var(--fs-2); color:var(--accent); }
.s-who{ color:var(--muted); font-size:var(--fs-2); max-width:calc(260 * var(--u)); overflow:hidden; text-overflow:ellipsis; }
.s-who b{ color:var(--text); font-weight:500; }
.s-clock{ gap:var(--sp-1h); }
.s-clock #tb-date{ min-width:calc(92 * var(--u)); color:var(--text); }
.spd,#btn-step{ font:var(--fs-2) var(--mono); color:var(--muted); background:transparent; border:1px solid var(--line-2); padding:var(--sp-1) var(--sp-2); cursor:pointer; letter-spacing:.04em; }
.spd.active{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.spd:hover,#btn-step:hover{ color:var(--text); border-color:var(--muted); }
.s-vitals{ flex:1; padding:0 !important; gap:0; overflow:hidden; }
.vital{ display:flex; flex-direction:column; justify-content:center; gap:1px; height:100%; min-width:0; flex:1 1 0; padding:0 var(--sp-2h); border:0; border-right:1px solid var(--line); background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; overflow:hidden; }
.vital .v-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vital:hover{ background:var(--panel-2); }
.vital .v-label{ font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vital .v-row{ display:flex; align-items:baseline; gap:var(--sp-1h); }
.vital .v-val{ font-size:var(--fs-4); font-weight:500; }
.vital .v-sub{ font-size:var(--fs-1); color:var(--dim); }
.vital.tone-ok .v-val{ color:var(--text); } .vital.tone-warn .v-val{ color:var(--warn-c); } .vital.tone-bad .v-val{ color:var(--down); }
.vital .v-bar{ display:block; height:var(--sp-0); background:var(--line); width:100%; } .vital .v-bar i{ display:block; height:100%; background:var(--line-2); }
.vital.tone-warn .v-bar i{ background:var(--accent-dim); } .vital.tone-bad .v-bar i{ background:var(--down); }
.s-decide{ border:0; border-left:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; cursor:pointer; gap:var(--sp-1h); letter-spacing:.1em; text-transform:uppercase; font-size:var(--fs-1); }
.s-decide b{ font-size:var(--fs-5); color:var(--text); } .s-decide.has{ background:var(--accent-wash); color:var(--accent); } .s-decide.has b{ color:var(--accent); }

#cmd{ display:flex; align-items:center; flex-wrap:wrap; gap:0 var(--sp-2h); padding:0 var(--sp-3); border-bottom:1px solid var(--line); background:var(--bg); }
#cmd-in,.c-prompt,#cmd-hint{ height:var(--h-cmd); line-height:var(--h-cmd); }
#fn-bar{ width:100%; order:3; border-top:1px solid var(--line); padding:var(--sp-0) 0; justify-content:flex-start; flex-wrap:wrap; }
@media (max-width:1500px){ .vital .v-sub{ display:none; } }
.c-prompt{ color:var(--accent); font-weight:600; }
#cmd-in{ width:calc(240 * var(--u)); background:transparent; border:0; border-bottom:1px solid var(--line-2); color:var(--text); font:var(--fs-4) var(--mono); padding:var(--sp-1) var(--sp-0); outline:0; text-transform:uppercase; }
#cmd-in:focus{ border-bottom-color:var(--accent); }
#cmd-in::placeholder{ color:var(--dim); text-transform:none; }
#cmd-hint{ color:var(--muted); font-size:var(--fs-2); min-width:calc(200 * var(--u)); }
#fn-bar{ display:flex; flex-direction:column; gap:0; flex:1; overflow:hidden; }
.fn-pins,.fn-depts,.fn-row{ display:flex; align-items:center; gap:var(--sp-0); flex-wrap:wrap; }
.fn-top{ display:flex; align-items:center; justify-content:space-between; gap:0 var(--sp-3h); flex-wrap:wrap; padding:var(--sp-0) 0 0; }
.fn-pins{ margin-left:auto; padding-left:var(--sp-2h); border-left:1px solid var(--line); } .fn-pins::before{ content:'PINNED'; font:var(--fs-1) var(--mono); letter-spacing:.14em; color:var(--dim); margin-right:var(--sp-1h); } .fn-row{ padding:var(--sp-px) 0 var(--sp-0); } .fn-row::before{ content:'›'; color:var(--dim); margin:0 var(--sp-1) 0 var(--sp-0); }
.dept{ font:var(--fs-1) var(--mono); letter-spacing:.12em; color:var(--muted); background:transparent; border:1px solid transparent; border-bottom:2px solid transparent; padding:var(--sp-1) var(--sp-2h); cursor:pointer; }
.dept:hover{ color:var(--text); } .dept.on{ color:var(--text); border-bottom-color:var(--accent); } .dept.hot{ color:var(--accent); } .dept.badge::after{ content:''; display:inline-block; width:var(--sp-1h); height:var(--sp-1h); border-radius:50%; background:var(--down); margin-left:var(--sp-1h); vertical-align:middle; }
.fn .lock{ display:inline-block; width:var(--sp-1h); height:var(--sp-1h); margin-left:var(--sp-1); border:1px solid currentColor; border-radius:2px 2px 0 0; opacity:.7; vertical-align:middle; } .fn-empty{ font:var(--fs-1) var(--mono); color:var(--dim); }
.fn{ font:var(--fs-1) var(--mono); letter-spacing:.08em; color:var(--muted); background:transparent; border:1px solid transparent; padding:var(--sp-1) var(--sp-1h); cursor:pointer; }
.fn:hover{ color:var(--text); border-color:var(--line-2); }
.fn.on{ color:var(--accent); border-color:var(--accent-dim); }
.fn.locked{ color:var(--dim); } .fn.badge{ color:var(--text); }

#guide{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-1h) var(--sp-3); border-bottom:1px solid var(--accent-dim); background:linear-gradient(90deg, var(--accent-glow), transparent 60%); font:var(--fs-2) var(--mono); min-width:0; }
#guide.hidden{ display:none; }
.g-k{ color:var(--accent); letter-spacing:.14em; font-weight:600; white-space:nowrap; }
.g-dots{ display:flex; gap:var(--sp-1); flex:none; } .g-dots i{ width:var(--sp-2); height:var(--sp-2); border:1px solid var(--accent-dim); display:block; } .g-dots i.done{ background:var(--accent); border-color:var(--accent); } .g-dots i.now{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow-3); }
.g-title{ color:var(--text); white-space:nowrap; }
.g-t{ color:var(--muted); font-family:var(--sans); font-size:var(--fs-3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-act{ display:flex; gap:var(--sp-1h); margin-left:auto; flex:none; }
.ph-lesson{ font-size:var(--fs-1); letter-spacing:.14em; color:var(--accent); border:1px solid var(--accent-dim); padding:var(--sp-px) var(--sp-1h); white-space:nowrap; } .pane.lesson .pane-head{ border-bottom-color:var(--accent-dim); }
.fn.lesson{ color:var(--accent); border-color:var(--accent); animation:fnpulse 1.6s ease-in-out infinite; } @keyframes fnpulse{ 50%{ box-shadow:0 0 0 3px var(--accent-glow-2); } }
@media (max-width:900px){ .g-t{ display:none; } .g-dots{ display:none; } }
#grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(calc(360 * var(--u)),38%); grid-template-rows:minmax(0,auto) minmax(0,1fr); min-height:0; }
.pane{ min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--bg); }
#pane-a{ grid-row:1 / span 2; }
#queue{ border-bottom:1px solid var(--line); display:flex; flex-direction:column; max-height:44vh; min-height:0; background:var(--panel); }
#inbox-list{ flex:1 1 auto; }
#pane-b{ border-right:0; }
.pane.on .pane-head .ph-code{ color:var(--accent); }
.pane-head{ display:flex; align-items:center; gap:var(--sp-2h); height:var(--h-head); padding:0 var(--sp-3); border-bottom:1px solid var(--line); background:var(--panel); font-size:var(--fs-2); }
.ph-code{ font-weight:600; letter-spacing:.14em; color:var(--muted); }
.ph-title{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-status{ margin-left:auto; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.pane .winbody{ flex:1; min-height:0; overflow:auto; padding:var(--sp-3) var(--sp-3h); font:var(--fs-3)/var(--lh-3) var(--sans); }
.winbody.noscroll{ overflow:hidden; }
.q-head{ display:flex; align-items:center; gap:var(--sp-2); height:var(--h-head); padding:0 var(--sp-3); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); }
.q-head b{ color:var(--accent); font-size:var(--fs-3); }
#inbox-list{ overflow:auto; min-height:0; }
.qi{ padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); cursor:pointer; }
.qi:hover{ background:var(--panel-2); }
.qi-top{ display:flex; gap:var(--sp-2); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.qi-kind{ color:var(--accent); }
.qi-due{ margin-left:auto; color:var(--dim); } .qi.urgent .qi-due{ color:var(--down); }
.qi-title{ font:var(--fs-3) var(--sans); color:var(--text); margin-top:var(--sp-0); }
.qi-sub{ font:var(--fs-2) var(--sans); color:var(--muted); margin-top:var(--sp-px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-empty{ padding:var(--sp-5) var(--sp-3); color:var(--dim); font:var(--fs-3) var(--sans); }
.inbox-empty b{ color:var(--muted); display:block; }

#tick{ display:flex; align-items:center; gap:var(--sp-4); height:var(--h-tick); padding:0 var(--sp-3); border-top:1px solid var(--line); background:var(--panel); font-size:var(--fs-2); color:var(--muted); overflow:hidden; white-space:nowrap; }
#tb-goal{ color:var(--text); } #tb-goal.ready{ color:var(--up); } #tb-goal:empty{ display:none; }
#tb-ticker{ overflow:hidden; text-overflow:ellipsis; }
#tb-msg{ margin-left:auto; color:var(--accent); overflow:hidden; text-overflow:ellipsis; max-width:45%; }

/* ═══ the apps, restyled ═══ */
.winbody h2,.winbody h3{ font:600 var(--fs-2) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:var(--sp-3h) 0 var(--sp-1h); }
.winbody p{ margin:0 0 var(--sp-2); }
.winbody input,.winbody select,.winbody textarea{ font:var(--fs-3) var(--mono); background:var(--panel); color:var(--text); border:1px solid var(--line-2); padding:var(--sp-1) var(--sp-1h); }
.winbody input:focus,.winbody select:focus{ outline:var(--ring-w) solid var(--ring); outline-offset:0; }
.winbody input[type=range]{ accent-color:var(--accent); }
.winbody input[type=checkbox],.winbody input[type=radio]{ accent-color:var(--accent); }
.small{ font-size:var(--fs-2); color:var(--muted); } .tiny{ font-size:var(--fs-1); }
.dim{ color:var(--dim); } .pos{ color:var(--up); } .neg{ color:var(--down); } .warn{ color:var(--warn-c); }
.hi{ color:var(--text); font-weight:600; }
.fieldset{ border:1px solid var(--line); padding:var(--sp-3) var(--sp-3) var(--sp-2h); margin:0 0 var(--sp-3); position:relative; background:transparent; }
.fieldset .fieldset{ margin-top:var(--sp-2); }
.fieldset > .legend{ position:absolute; top:calc(-1 * var(--sp-2)); left:var(--sp-2h); padding:0 var(--sp-1h); background:var(--bg); font:600 var(--fs-1) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
#queue .fieldset > .legend,#pane-b .fieldset > .legend{ background:var(--bg); }
.row{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-1h) 0; flex-wrap:wrap; }
.row label{ min-width:calc(130 * var(--u)); font-size:var(--fs-3); color:var(--muted); }
.row .val{ font-family:var(--mono); font-weight:500; min-width:calc(60 * var(--u)); text-align:right; }
.kpi-strip{ display:flex; gap:1px; flex-wrap:wrap; margin:0 0 var(--sp-3); background:var(--line); border:1px solid var(--line); }
.kpi-box{ background:var(--panel); padding:var(--sp-2) var(--sp-3); min-width:calc(110 * var(--u)); flex:1; }
.kpi-box .k{ font:var(--fs-1) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kpi-box .v{ font:500 var(--fs-5) var(--mono); margin-top:var(--sp-0); }
.kpi-box .s{ font:var(--fs-1) var(--mono); color:var(--dim); margin-top:var(--sp-px); }
.meter{ height:var(--sp-1h); background:var(--line); position:relative; margin:var(--sp-1) 0; }
.meter .fill{ position:absolute; inset:0; width:0; background:var(--line-2); }
.meter .fill.ok{ background:var(--up); } .meter .fill.warn{ background:var(--accent); } .meter .fill.bad{ background:var(--down); }
.btn{ font:var(--fs-2) var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); padding:var(--sp-1h) var(--sp-2h); cursor:pointer; }
.btn:hover:not(:disabled){ border-color:var(--muted); }
.btn:disabled{ color:var(--dim); cursor:default; }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.btn.primary:hover:not(:disabled){ background:var(--accent-hi); }
.btn.primary:disabled{ background:var(--accent-dim); color:var(--ink-3); border-color:var(--accent-dim); }
.btn.danger{ color:var(--down); border-color:var(--down-dim); }
.btn.tiny{ padding:var(--sp-0) var(--sp-2); font-size:var(--fs-1); } .btn.step2{ font-size:var(--fs-3); padding:var(--sp-2) var(--sp-3); }
.tag{ display:inline-block; font:var(--fs-1) var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:var(--sp-px) var(--sp-1h); border:1px solid var(--line-2); color:var(--muted); }
.tag.g{ color:var(--up); border-color:var(--up-dim); } .tag.r{ color:var(--down); border-color:var(--down-dim); } .tag.y{ color:var(--accent); border-color:var(--accent-dim); } .tag.b{ color:var(--link); border-color:var(--link-dim); }
.winbody table{ border-collapse:collapse; width:100%; font-family:var(--mono); font-size:var(--fs-2); }
.winbody table th{ text-align:left; font-weight:500; font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:var(--sp-1) var(--sp-1h); border-bottom:1px solid var(--line-2); }
.winbody table td{ padding:var(--sp-0) var(--sp-1h); border-bottom:1px solid var(--line); vertical-align:top; }
.winbody table td.r,.winbody table th.r,.winbody td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.winbody table tr.total td{ border-top:1px solid var(--line-2); font-weight:600; }
.winbody table tr:hover td{ background:var(--panel); }
.sunken{ border:1px solid var(--line); background:var(--panel); padding:var(--sp-2); }
.term{ font:var(--fs-3)/var(--lh-3) var(--mono); background:var(--term-bg); color:var(--text); padding:var(--sp-3) var(--sp-3h); white-space:pre; overflow:auto; height:100%; }
.term .dim{ color:var(--dim); } .term .hi{ color:var(--accent); }
.cu-up{ color:var(--text); }
.mail-list{ max-height:40%; overflow:auto; padding:0; }
.mail-row{ display:grid; grid-template-columns:calc(150 * var(--u)) 1fr calc(70 * var(--u)); gap:var(--sp-2); padding:var(--sp-1) var(--sp-2); border-bottom:1px solid var(--line); cursor:pointer; font-size:var(--fs-2); }
.mail-row:hover{ background:var(--panel-2); } .mail-row.sel{ background:var(--panel-2); outline:1px solid var(--line-2); }
.mail-row.unread .from{ color:var(--text); font-weight:600; } .mail-row .from{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-row .subj{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mail-row .dt{ color:var(--dim); text-align:right; font-family:var(--mono); font-size:var(--fs-1); }
.mail-body{ font-size:var(--fs-3); line-height:var(--lh-3); }
.mail-body .hdr{ font:var(--fs-2) var(--mono); color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:var(--sp-1h); margin-bottom:var(--sp-2); }
.mail-actions{ margin-top:var(--sp-2h); display:flex; gap:var(--sp-1h); flex-wrap:wrap; }
.help-doc h2{ font:600 var(--fs-3) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text); margin:var(--sp-4) 0 var(--sp-1h); }
.help-doc code{ font-family:var(--mono); color:var(--accent); }
.help-doc ul{ padding-left:var(--sp-5); }
.org-tree{ font-family:var(--mono); } .org-row{ display:flex; gap:var(--sp-1h); flex-wrap:wrap; margin:var(--sp-1) 0; }
.org-node{ border:1px solid var(--line-2); padding:var(--sp-1) var(--sp-2); background:var(--panel); min-width:calc(110 * var(--u)); } .org-node.off{ opacity:.45; }
.org-node .g{ display:none; } .org-node .n{ font-size:var(--fs-2); } .org-node .s{ font-size:var(--fs-1); color:var(--muted); }
.chart-canvas{ width:100%; background:var(--panel); border:1px solid var(--line); }
.map-wrap{ background:var(--panel); } .map-pop{ background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); padding:var(--sp-1h) var(--sp-2); }
.px-scene,.px-vig,.px-run,.paper-photo,.brief-lesson .px-art{ display:none; }
/* leftover inline colours from the old light theme */
.winbody [style*="background:#fff"],.winbody [style*="background: #fff"],.winbody [style*="background:#f"],.winbody [style*="background:white"]{ background:var(--panel) !important; color:var(--text) !important; }
.winbody [style*="color:#333"],.winbody [style*="color:#444"],.winbody [style*="color:#555"],.winbody [style*="color:#666"],.winbody [style*="color:#222"],.winbody [style*="color:#000"]{ color:var(--muted) !important; }
.winbody [style*="border:1px solid #ddd"],.winbody [style*="border:1px solid #ccc"],.winbody [style*="border-bottom:1px solid #ddd"]{ border-color:var(--line) !important; }
.winbody [style*="background:var(--note)"],[style*="background:var(--note)"]{ background:var(--note) !important; border-color:var(--line-2) !important; }
.winbody [style*="font-family:'Courier New'"]{ font-family:var(--mono) !important; }

/* ═══ dialogs: decisions, notices, the annual report, the run ═══ */
.victory-overlay{ position:fixed; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; z-index:500; padding:var(--sp-5); }
.victory-box{ background:var(--panel); border:1px solid var(--line-2); color:var(--text); width:min(calc(560 * var(--u)),100%); max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lift); font:var(--fs-4)/var(--lh-3) var(--sans); }
.victory-box > *{ flex-shrink:0; }
.victory-box .titlebar{ display:flex; align-items:center; gap:var(--sp-2); height:var(--h-bar); padding:0 var(--sp-3); border-bottom:1px solid var(--line); background:var(--panel-2) !important; font:600 var(--fs-1) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.victory-box .titlebar .t-icon{ display:none; } .victory-box .titlebar .t-text{ flex:1; }
.tb-btn{ background:transparent; border:1px solid var(--line-2); color:var(--muted); font:var(--fs-2) var(--mono); width:var(--sp-6); height:var(--h-btn); cursor:pointer; }
.tb-btn:hover{ color:var(--text); border-color:var(--muted); }
.victory-box .content{ padding:var(--sp-3h) var(--sp-4); overflow:auto; flex:1 1 auto; text-align:left !important; }
.victory-box .big{ font:600 var(--fs-6) var(--sans); margin:var(--sp-1) 0 var(--sp-2); }
.victory-box > .btn,.victory-box > .row{ margin:0 var(--sp-4) var(--sp-3h); }
.victory-box > .btn{ align-self:flex-start; }
.victory-box [style*="font-size:3"]{ display:none; }
.decide-box{ width:min(calc(620 * var(--u)),100%); }
.dx-head{ display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-3h) var(--sp-4) var(--sp-2); }
.dx-who{ font:var(--fs-2) var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .dx-who span{ color:var(--dim); }
.dx-title{ font:600 var(--fs-5) var(--sans); margin-top:var(--sp-0); }
.dx-body{ flex-shrink:1 !important; min-height:0; padding:0 var(--sp-4) var(--sp-2h); overflow:auto; font-size:var(--fs-4); line-height:var(--lh-4); }
.dx-body p{ margin:0 0 var(--sp-2h); }
.dx-acts{ display:flex; gap:var(--sp-1h); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4) var(--sp-3h); border-top:1px solid var(--line); }
.dx-acts .spacer{ flex:1; }
.face{ display:inline-flex; align-items:center; justify-content:center; width:var(--h-head); height:var(--h-head); border:1px solid var(--line-2); background:var(--panel-2); color:var(--text); font:600 var(--fs-1) var(--mono); letter-spacing:.06em; flex-shrink:0; }
.face.big{ width:var(--page-1); height:var(--page-1); font-size:var(--fs-3); }
.dx-stamp{ position:fixed; left:50%; top:46%; transform:translate(-50%,-50%); font:600 var(--fs-7) var(--mono); letter-spacing:.3em; color:var(--accent); border:var(--sp-0) solid var(--accent); padding:var(--sp-2) var(--sp-5); pointer-events:none; z-index:600; animation:stamp 1.1s ease forwards; }
@keyframes stamp{ 0%{ opacity:0; } 15%{ opacity:1; } 80%{ opacity:1; } 100%{ opacity:0; } }
#toasts,.toast,.confetti{ display:none !important; }
.ar-box{ width:min(calc(720 * var(--u)),100%); } .ar-content{ padding:var(--sp-3h) var(--sp-4); overflow:auto; font-size:var(--fs-3); }
.ar-title{ font:600 var(--fs-5) var(--sans); } .ar-verdict{ color:var(--accent); } .ar-table td.c{ text-align:center; } .ar-hl{ color:var(--accent); }
.paper-box{ display:none; }
.doc.paper{ font-size:var(--fs-5); } .doc.paper h1{ font-size:var(--fs-7); line-height:var(--lh-1); margin:var(--sp-2) 0 var(--sp-2h); } .paper-item{ margin:0 0 var(--sp-2); padding-left:var(--sp-2h); border-left:2px solid var(--rule); }
.doc.cv{ padding:var(--sp-6) var(--sp-7); font-size:var(--fs-4); } .doc.cv h1{ font-size:var(--fs-7); }
.grid tr.on td{ background:var(--panel-2); }
#grid.ws{ display:block; position:relative; overflow:hidden; background:radial-gradient(ellipse at 30% 20%, var(--bg-2), var(--bg) 70%); }
#grid.ws .pane, #grid.ws #queue{ position:absolute; resize:both; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-win); max-height:none; min-width:calc(280 * var(--u)); min-height:calc(120 * var(--u)); background:var(--bg); }
#grid.ws #pane-a{ grid-row:auto; } #grid.ws .pane-head, #grid.ws .q-head{ cursor:grab; user-select:none; } #grid.ws .pane.on{ border-color:var(--accent); }
.sb-table .grid{ font-size:var(--fs-3); margin-top:var(--sp-1h); }
.art-wrap{ border:1px solid var(--line); background:var(--bg); margin-bottom:var(--sp-2h); } .art-wrap svg{ display:block; width:100%; height:auto; } .art-wrap.home{ margin:calc(-1 * var(--sp-0)) 0 var(--sp-2h); }
.art-row{ display:inline-flex; align-items:center; gap:var(--sp-2); } .art-row svg{ border:1px solid var(--line); flex:none; }
.art-people{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--sp-2) var(--sp-3h); } .art-person{ display:flex; align-items:center; gap:var(--sp-2h); } .art-person svg{ border:1px solid var(--line); flex:none; }
.art-cv{ float:right; margin:0 0 var(--sp-2) var(--sp-3h); } .art-cv svg{ border:1px solid var(--rule); } .art-chair{ float:right; display:flex; flex-direction:column; align-items:center; gap:var(--sp-0); } .art-chair svg{ border:1px solid var(--rule); }
.face.art{ background:none; padding:0; width:auto; height:auto; } .face.art svg{ display:block; border:1px solid var(--line); }
.mail-row .from svg{ vertical-align:middle; margin-right:var(--sp-1h); border:1px solid var(--line); }
.art-halftone{ margin:var(--sp-2h) 0 var(--sp-3h); } .art-ht{ display:inline-block; position:relative; filter:grayscale(1) contrast(1.25) brightness(1.1); border:1px solid var(--rule-2); max-width:100%; } .art-ht svg{ display:block; max-width:100%; height:auto; } .art-ht::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle, transparent 55%, var(--paper) 56%); background-size:3px 3px; mix-blend-mode:screen; opacity:.55; pointer-events:none; }
.art-halftone figcaption{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-top:var(--sp-1); }
.art-board{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-2h); } .art-dir{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-0); padding:var(--sp-2) var(--sp-1); border:1px solid var(--line); background:var(--panel); } .art-dir svg{ border:1px solid var(--line-2); margin-bottom:var(--sp-1); } .art-dir .dim{ color:var(--dim); }
.art-frame{ float:right; margin:0 0 var(--sp-3) var(--sp-5); text-align:center; } .art-frame-in{ display:inline-block; padding:var(--sp-2); background:var(--wood); border:var(--sp-1h) solid var(--wood-2); box-shadow:var(--shadow-frame); } .art-frame-in svg{ display:block; } .art-plaque{ margin-top:var(--sp-1h); display:inline-block; background:var(--brass); color:var(--brass-ink); font:600 var(--fs-1)/var(--lh-2) var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:var(--sp-1) var(--sp-2); border:1px solid var(--brass-line); max-width:calc(200 * var(--u)); }
.art-letterhead{ display:flex; align-items:center; gap:var(--sp-3); padding-bottom:var(--sp-2h); margin-bottom:var(--sp-2h); border-bottom:1px solid var(--rule); } .art-letterhead b{ font-family:var(--serif); font-size:var(--fs-5); }
.art-ar-cover{ margin:calc(-1 * var(--page-1)) calc(-1 * var(--page-2)) var(--sp-5); } .art-ar-cover svg{ display:block; width:100%; height:auto; } .art-ar-title{ padding:var(--sp-4) var(--page-2) 0; } .art-ar-title h1{ font-size:var(--fs-8); }
.art-medal{ vertical-align:middle; }
.art-face{ display:inline-block; line-height:0; flex:none; vertical-align:middle; border:1px solid var(--line); background:var(--panel-2); overflow:hidden; } .art-face img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.12) brightness(.96); }
.doc .art-face, .memo .art-face, .paper .art-face{ border-color:var(--rule-2); } .art-row .art-face{ margin-right:var(--sp-1h); } .art-frame-in .art-face{ border:0; } .art-dir .art-face{ margin-bottom:var(--sp-1); }
.art-peep{ display:inline-block; line-height:0; } .art-peep svg{ display:block; border:1px solid var(--line); background:var(--panel-2); }
.art-row .art-peep svg, .mail-row .from .art-peep svg{ border-color:var(--line); } .face.art .art-peep svg{ border:1px solid var(--line); }
.art-photo{ margin:0 0 var(--sp-2h); } .art-photo-in{ background:var(--duotone); border:1px solid var(--line-2); overflow:hidden; } .art-photo img{ display:block; width:100%; height:auto; filter:grayscale(1) contrast(1.15) brightness(.92); mix-blend-mode:multiply; }
.art-photo.head .art-photo-in img{ height:calc(150 * var(--u)); object-fit:cover; object-position:center 62%; } .art-photo.tall .art-photo-in img{ height:calc(260 * var(--u)); object-fit:cover; }
.art-photo figcaption{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:var(--sp-1); } .art-photo .credit a{ color:var(--dim); text-decoration:none; } .art-photo .credit a:hover{ color:var(--text); }
.art-photo.paper .art-photo-in{ background:var(--sepia); border-color:var(--rule-2); position:relative; } .art-photo.paper .art-photo-in img{ height:calc(220 * var(--u)); object-fit:cover; filter:grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode:multiply; }
.art-photo.paper .art-photo-in::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle, transparent 55%, var(--paper) 56%); background-size:3px 3px; mix-blend-mode:screen; opacity:.5; pointer-events:none; }
.art-photo.paper figcaption{ color:var(--ink-2); } .art-photo.paper .credit a{ color:var(--ink-2); }
#login-city{ margin:calc(-1 * var(--sp-1h)) 0 var(--sp-4); } #login-city .art-photo.paper .art-photo-in img{ height:calc(170 * var(--u)); }
.exam-q{ margin:var(--sp-3h) 0 var(--sp-1h); } .exam-qt{ margin-bottom:var(--sp-1); } .exam-o{ display:block; font-family:var(--sans); font-size:var(--fs-4); padding:var(--sp-0) 0 var(--sp-0) var(--sp-1h); cursor:pointer; } .exam-o input{ margin-right:var(--sp-1h); }
body.crisis-mode #strip{ border-bottom-color:var(--down); }
.crisis-box{ width:min(calc(680 * var(--u)),100%); }
.crisis-stats{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin:var(--sp-2) 0; }
.crisis-stats > div{ flex:1; background:var(--panel); padding:var(--sp-1h) var(--sp-2h); } .crisis-stats .k{ font:var(--fs-1) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .crisis-stats .v{ font:500 var(--fs-5) var(--mono); }
.crisis-log{ max-height:calc(160 * var(--u)); overflow:auto; font:var(--fs-2) var(--mono); color:var(--muted); border:1px solid var(--line); padding:var(--sp-1h) var(--sp-2); margin:var(--sp-2) 0; }
.crisis-acts{ display:flex; gap:var(--sp-1h); flex-wrap:wrap; }
.crisis-bar{ height:var(--sp-1h); background:var(--line); } .crisis-bar i{ display:block; height:100%; background:var(--down); }
/* a notice on paper (the appointment, the regulator's notice, the exit) */
.notice-overlay{ position:fixed; inset:0; background:var(--scrim-2); z-index:700; display:flex; align-items:center; justify-content:center; padding:var(--sp-5); overflow:auto; }
.notice{ width:min(calc(640 * var(--u)),100%); max-height:92vh; overflow:auto; padding:var(--page-1) var(--page-2); }
.notice pre{ font:var(--fs-3)/var(--lh-3) var(--mono); white-space:pre-wrap; margin:var(--sp-3) 0; }
.notice .btn{ margin-top:var(--sp-2h); }

/* account bar (guest) and consent notice from the old modules */
#acct-bar{ position:fixed; right:var(--sp-2h); bottom:var(--sp-8); z-index:300; font:var(--fs-1) var(--mono); color:var(--muted); background:var(--panel); border:1px solid var(--line-2); padding:var(--sp-1) var(--sp-2); display:flex; gap:var(--sp-2h); align-items:center; }
#acct-bar a{ color:var(--accent); } #acct-bar .ab-btn{ text-decoration:none; }
#consent{ position:fixed; left:50%; transform:translateX(-50%); bottom:var(--h-cmd); z-index:300; width:min(calc(720 * var(--u)),96vw); background:var(--panel); border:1px solid var(--accent-dim); padding:var(--sp-2) var(--sp-3); font:var(--fs-2)/var(--lh-2) var(--sans); color:var(--muted); box-shadow:var(--shadow-float); }
#consent{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-0) var(--sp-4); align-items:center; }
.consent-title{ color:var(--text); font-weight:600; } .consent-text{ margin:0; grid-row:2; }
.consent-acts{ grid-row:1 / span 2; display:flex; gap:var(--sp-1h); }
.consent-btn{ font:var(--fs-1) var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:var(--sp-1h) var(--sp-2h); background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); cursor:pointer; }
.consent-btn.yes{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.consent-link{ grid-column:1; grid-row:3; font-size:var(--fs-1); color:var(--link); }

@media (max-width:900px){
  #strip{ height:auto; flex-wrap:wrap; } .s-vitals{ order:9; width:100%; border-top:1px solid var(--line); overflow:auto; }
  #grid{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; } #grid > *{ min-width:0; } .winbody{ overflow-x:auto; }
  #pane-a{ grid-row:2; } #queue{ max-height:30vh; } #pane-b{ display:none; }
  #cmd-hint{ display:none; } #cmd-in{ flex:1; width:auto; }
  #fn-bar{ display:flex; min-width:0; flex-basis:100%; width:100%; order:3; } .fn-top{ flex-wrap:nowrap; } .fn-depts, .fn-row, .fn-pins{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .fn-depts::-webkit-scrollbar, .fn-row::-webkit-scrollbar, .fn-pins::-webkit-scrollbar{ display:none; } .fn-pins{ display:none; } .dept, .fn{ flex:none; }
  .doc{ padding:var(--sp-7) var(--sp-6); } .login-form td:first-child{ width:calc(100 * var(--u)); }
}

/* ═══ T2: the ladder, the book, the handbook ═══ */
.ladder-bar{ display:block; width:calc(90 * var(--u)); height:var(--sp-2h); position:relative; background:var(--line); }
.ladder-bar i{ position:absolute; left:0; height:var(--sp-1); } .ladder-bar i.a{ top:0; background:var(--up); } .ladder-bar i.l{ top:var(--sp-1h); background:var(--down); }
.hb{ display:grid; grid-template-columns:calc(170 * var(--u)) minmax(0,1fr); gap:0; height:100%; min-height:0; }
.hb-side{ border-right:1px solid var(--line); padding-right:var(--sp-2h); overflow:auto; }
.hb-side input{ width:100%; margin-bottom:var(--sp-2); }
.hb-sec{ font:600 var(--fs-1) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:var(--sp-2h) 0 var(--sp-1); }
.hb-item{ display:block; font:var(--fs-3) var(--sans); color:var(--text); text-decoration:none; padding:var(--sp-1) var(--sp-1h); border-left:2px solid transparent; }
.hb-item:hover{ background:var(--panel-2); } .hb-item.on{ border-left-color:var(--accent); color:var(--accent); }
.hb-article.doc{ padding:var(--sp-7) var(--sp-8); font-size:var(--fs-5); overflow:auto; box-shadow:none; margin-left:var(--sp-3); }
.hb-article h1{ font-size:var(--fs-7); }
.hb-article ul{ padding-left:var(--sp-5); } .hb-article li{ margin:var(--sp-1) 0; }
.hb-article a{ color:var(--ink-link); }
.hb-sandbox{ background:var(--paper-2); border:1px solid var(--rule); padding:var(--sp-2h) var(--sp-3h); margin:var(--sp-3) 0; font-family:var(--sans); font-size:var(--fs-4); }
.hb-sandbox .row label{ min-width:calc(220 * var(--u)); color:var(--ink-2); }
.hb-sandbox input[type=range]{ width:calc(180 * var(--u)); accent-color:var(--ink-link); }
.hb-sandbox .sb-result{ font-family:var(--mono); font-size:var(--fs-5); margin-top:var(--sp-1h); } .hb-sandbox .pos{ color:var(--ink-up); } .hb-sandbox .neg{ color:var(--ink-down); }
.hb-ref{ font:var(--fs-1) var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--link); text-decoration:none; margin-left:var(--sp-1h); }
.winbody .legend .hb-ref{ text-transform:none; letter-spacing:0; font-size:var(--fs-1); }
.winbody select{ max-width:100%; }
.winbody td .btn.tiny{ white-space:nowrap; }
.winbody table td:has(> .btn.tiny){ white-space:nowrap; }

/* ═══ T3: the supervisor's letter ═══ */
.reg-letter{ padding:var(--sp-6) var(--sp-7); font-size:var(--fs-4); box-shadow:none; margin:var(--sp-1) 0; }
.reg-letter h1{ font-size:var(--fs-7); }
.reg-table{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:var(--fs-3); margin:var(--sp-2h) 0; }
.reg-table td{ padding:var(--sp-1) var(--sp-1h); border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink); }
.reg-table td.k{ width:calc(110 * var(--u)); text-transform:capitalize; color:var(--ink-2); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.06em; }
.reg-table td.g{ width:var(--h-head); text-align:center; font-family:var(--mono); font-weight:600; }
.reg-table .g1,.reg-table .g2{ color:var(--ink-up); } .reg-table .g3{ color:var(--ink-accent); } .reg-table .g4,.reg-table .g5{ color:var(--ink-down); }

/* ═══ T4: the credit memo ═══ */
.memo{ font-family:var(--sans); background:var(--paper); color:var(--ink); padding:var(--sp-3) var(--sp-4) var(--sp-2h); margin:0 0 var(--sp-2h); }
.memo .doc-kicker{ font:600 var(--fs-2) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.memo .art-photo{ margin:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-4)) var(--sp-2h); } .memo .art-photo figcaption{ padding:0 var(--sp-4); }
.memo-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-1h); }
.memo-grade{ font:600 var(--fs-2) var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:var(--sp-0) var(--sp-2); border:1px solid; }
.memo-grade.ga{ color:var(--up); border-color:var(--up-dim); } .memo-grade.gb{ color:var(--accent); border-color:var(--accent-dim); } .memo-grade.gc{ color:var(--down); border-color:var(--down-dim); }
.memo-t{ width:100%; border-collapse:collapse; font-size:var(--fs-3); margin-bottom:var(--sp-2); }
.memo-t td{ padding:var(--sp-1) var(--sp-1h); border-bottom:1px solid var(--line); vertical-align:top; }
.memo-t td:first-child{ width:calc(130 * var(--u)); font:var(--fs-1) var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:var(--sp-1h); }
.memo .small{ color:var(--ink-2); }

/* ═══ paper: the documents (.doc, the credit memo, the notice, the paper photographs) ═══
   Paper redefines the tokens for everything inside it, so a table, a button, a tag, a legend,
   a link or small text written for the dark desk lands in ink on paper without a rule of its
   own. The few rules after the block are what the tokens cannot say. */
.doc, .memo, .art-photo.paper{
  --text:var(--ink); --muted:var(--ink-2); --dim:var(--ink-dim);
  --bg:var(--paper); --panel:var(--paper-3); --panel-2:var(--paper-hover); --term-bg:var(--paper-2); --note:var(--paper-2);
  --line:var(--rule); --line-2:var(--rule-2);
  --accent:var(--ink-accent); --accent-hi:var(--ink-brown); --accent-dim:var(--rule-2); --accent-wash:var(--paper-2); --on-accent:var(--paper);
  --up:var(--ink-up); --down:var(--ink-down); --warn-c:var(--ink-accent); --link:var(--ink-link);
  --up-dim:var(--rule-2); --down-dim:var(--rule-2); --link-dim:var(--rule-2);
  --ring:var(--ink);
}
/* zero-specificity defaults, so every named component above still wins */
:where(.doc, .memo) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea){ font:var(--fs-3) var(--mono); background:var(--paper-3); color:var(--ink); border:1px solid var(--rule-3); padding:var(--sp-1) var(--sp-1h); }
:where(.doc, .memo) :where(input, select, textarea):focus{ outline:var(--ring-w) solid var(--ring); outline-offset:0; }
:where(.doc, .memo) input{ accent-color:var(--ink); }
:where(.doc, .memo) :where(table){ border-collapse:collapse; }
:where(.doc, .memo) :where(th){ text-align:left; font:500 var(--fs-1) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:var(--sp-1) var(--sp-1h); border-bottom:1px solid var(--rule-2); }
:where(.doc, .memo) :where(td){ padding:var(--sp-1) var(--sp-1h); border-bottom:1px solid var(--rule); vertical-align:top; }
:where(.doc, .memo) :where(code, kbd){ font-family:var(--mono); color:var(--ink-accent); }
:where(.doc, .memo) :where(figcaption, caption, small){ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; color:var(--ink-2); }
:where(.doc, .memo) a{ color:var(--ink-link); }
:where(.doc, .memo) a:hover{ color:var(--ink); }
:where(.doc, .memo) ::selection{ background:var(--ink); color:var(--paper); }
.doc .btn.danger{ color:var(--ink-down); border-color:var(--ink-down); }
.doc .btn.danger:hover:not(:disabled){ background:var(--ink-down); color:var(--paper); }
.doc .btn.tiny{ padding:var(--sp-0) var(--sp-2); font-size:var(--fs-1); }
.doc .fieldset{ border-color:var(--rule); }
.doc .tag, .memo .tag{ color:var(--ink-2); border-color:var(--rule-2); }
.doc .term{ background:var(--paper-2); color:var(--ink); }
.doc .gc-empty, .memo .gc-empty{ border-left-color:var(--rule-2); }

/* ═══ focus: a visible ring on everything the keyboard can reach ═══
   Amber on the dark desk, ink on paper (the paper block sets --ring). Inside the bars, whose
   overflow is hidden, the ring is drawn inside the control so it is never clipped. */
:focus-visible{ outline:var(--ring-w) solid var(--ring); outline-offset:var(--ring-off); }
.vital:focus-visible, .s-decide:focus-visible, .spd:focus-visible, #btn-step:focus-visible, .fn:focus-visible, .dept:focus-visible,
.qi:focus-visible, .mail-row:focus-visible, .gcc-card:focus-visible, .hb-item:focus-visible, .gc-pal-row:focus-visible,
.ph-acts button:focus-visible, .tb-btn:focus-visible, .pc-row:focus-visible, .qm-btn:focus-visible{ outline:var(--ring-w) solid var(--ring); outline-offset:calc(-1 * var(--ring-w)); }
/* a container the desk moves the focus to (a dialog, a pane after F6) is not a control: no ring on it */
.victory-box[tabindex="-1"]:focus-visible, .notice[tabindex="-1"]:focus-visible, .winbody[tabindex="-1"]:focus-visible, #queue[tabindex="-1"]:focus-visible{ outline:0; }
#cmd-in:focus-visible{ outline:0; border-bottom-color:var(--ring); box-shadow:0 var(--sp-px) 0 var(--ring); }
.qi:focus-visible{ background:var(--panel-2); }
/* text only for the reader of a screen */
.gc-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ═══ widths ═══
   Under 1500 px (to the laptop's 1280) the strip gives the seven vitals the room they need: the
   bank's name shortens, the clock and the bar tighten, and the right pane keeps 340 units. */
@media (max-width:1500px) and (min-width:901px){
  #strip > *{ padding:0 var(--sp-2); }
  .s-brand{ letter-spacing:.12em; }
  .s-who{ max-width:calc(230 * var(--u)); } .s-who .s-ceo{ display:none; }
  .s-clock{ gap:var(--sp-1); }
  .spd, #btn-step{ padding:var(--sp-1) var(--sp-1h); letter-spacing:0; }
  .vital{ padding:0 var(--sp-1h); }
  .vital .v-label{ letter-spacing:.06em; }
  .s-decide{ letter-spacing:.04em; }
  #cmd-in{ width:calc(190 * var(--u)); }
  #cmd-hint{ min-width:calc(150 * var(--u)); }
  #grid{ grid-template-columns:minmax(0,1fr) minmax(calc(340 * var(--u)),38%); }
}
/* above 2200 px the desk scales up through the unit: every size above is a multiple of --u
   (the drawn icons carry their size as an attribute, so they follow by zoom) */
@media (min-width:2200px){ :root{ --u:1.25px; --ring-w:3px; } svg.gc-ico{ zoom:1.25; } }
@media (min-width:2800px){ :root{ --u:1.5px; } svg.gc-ico{ zoom:1.5; } }
@media (min-width:3600px){ :root{ --u:2px; --ring-w:4px; --ring-off:3px; } svg.gc-ico{ zoom:2; } }

/* CRED: the rivals named beside their rates (apps-cred.js) */
.gc-rr{ display:block; white-space:nowrap; }