/* ============================================================================
 * Helm — UI CONSTITUTION token + component layer (spec v4.5 R-1, owner-ruled 7/7/26).
 * THE single source of visual truth, extracted verbatim from the Colleen-approved
 * canon: the restored exec home (desk-accounting bones), the Command Center
 * density panels, and the Front Door identity card. Divergences resolved to canon
 * and recorded in the spec changelog: --muted #7e98a3 -> #8aa3ad (2 pages),
 * --violet #8aa0ff -> #8a5cf6 (2 pages). NO page may define its own copies of
 * these tokens or components (tools/uicheck.js enforces).
 * ========================================================================== */
:root{
  --bg:#08171f; --panel:#0f2731; --line:#1d4051; --soft:#16313d; --line-soft:#16313d;
  --ink:#eaf3f5; --muted:#8aa3ad; --faint:#56727d;
  --cyan:#36d6e8; --cyan-dim:#1d7c8a; --teal:#36d6e8;
  --amber:#f4b740; --red:#ff6262; --green:#43d6a0; --violet:#8a5cf6;
  --act:#36d6e8; --ok:#43d6a0; --warn:#f4b740; --bad:#ff6262;
  --jobs:#36d6e8; --sales:#43d6a0;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 12px 30px -16px rgba(0,0,0,.7);
  --r-panel:12px; --r-chip:9px; --r-btn:8px;
}
/* ---- base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 -apple-system,Segoe UI,Roboto,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
a{color:var(--cyan)} a.quiet{color:var(--ink);text-decoration:none} a.quiet:hover{color:var(--cyan)}
/* ---- page skeleton: header slot + law line ---- */
header{display:flex;align-items:center;gap:12px}
h1{font-size:17px;margin:0;font-weight:650}
.asof{margin-left:auto;font-size:11px;color:var(--faint)}
.law{font-size:10.5px;color:var(--faint);margin:8px 0 14px}
.lawnote{font-size:10px;color:var(--faint);font-style:italic;padding:2px 2px 5px}
/* ---- panel / card (canon: exec home panel + CC sect) ---- */
.panel,.card,.sect{background:var(--panel);border:1px solid var(--soft);border-radius:var(--r-panel);padding:12px 14px;margin-bottom:12px}
.panel h2,.card h2,.sect b.h{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.panel h2 .n{margin-left:auto;color:var(--faint);font-weight:600}
/* ---- stat cards (density rollups) ---- */
.stat{background:var(--panel);border:1px solid var(--soft);border-radius:var(--r-panel);padding:10px 16px;min-width:140px}
.stat .n{font-size:20px;font-weight:800;color:var(--cyan)} .stat .l{font-size:10px;color:var(--faint);text-transform:uppercase} .stat .s{font-size:10px;color:var(--muted)}
.cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
/* ---- table / list rows ---- */
table.helm{width:100%;border-collapse:collapse}
table.helm td,table.helm th{padding:6px;border-top:1px solid var(--soft);font-size:11.5px;text-align:left;vertical-align:top}
table.helm th{font-size:9.5px;text-transform:uppercase;color:var(--faint);border-top:none}
.row{display:flex;align-items:center;gap:9px;padding:6px 2px;border-bottom:1px solid var(--soft);font-size:12px}
.row:last-child{border-bottom:0}
/* ---- chips / badges / severity ---- */
.badge,.chip{font-size:9px;font-weight:800;padding:2px 7px;border-radius:var(--r-chip);text-transform:uppercase;white-space:nowrap}
.b-ok{background:rgba(67,214,160,.15);color:var(--green)} .b-warn{background:rgba(244,183,64,.15);color:var(--amber)}
.b-red{background:rgba(255,98,98,.15);color:var(--red)} .b-src,.b-kind{background:rgba(54,214,232,.12);color:var(--cyan)}
.sev{font-size:8.5px;font-weight:800;padding:1px 6px;border-radius:8px;text-transform:uppercase;flex:0 0 auto}
.sev.crit{background:rgba(255,98,98,.14);color:var(--red)} .sev.warn,.sev.high{background:rgba(244,183,64,.12);color:var(--amber)} .sev.info,.sev.watch{background:rgba(86,114,125,.2);color:var(--muted)}
/* ---- buttons / inputs (native feel: real elements, instant states) ---- */
button{background:#0b1e27;border:1px solid var(--cyan);color:var(--cyan);border-radius:var(--r-btn);padding:4px 10px;font:11px inherit;cursor:pointer}
button:hover{background:#0d2530} button:active{transform:translateY(1px)} button:disabled{opacity:.45;cursor:not-allowed}
button.warn{border-color:var(--amber);color:var(--amber)} button.danger{border-color:var(--red);color:var(--red)}
input,select,textarea{background:#0b1e27;border:1px solid var(--line);color:var(--ink);border-radius:var(--r-btn);padding:5px 8px;font:11.5px inherit}
/* ---- checklist row (ITEM G spine, desk-accounting bones) ---- */
.srow{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--soft);font-size:12.5px}
.srow:last-child{border-bottom:0}
.srow input[type=checkbox]{width:15px;height:15px;accent-color:var(--cyan);cursor:pointer;flex:0 0 auto}
.srow.done .lbl{color:var(--faint);text-decoration:line-through} .srow.skipped .lbl{color:var(--amber)}
.selfcert{font-size:8px;font-weight:800;text-transform:uppercase;padding:1px 5px;border-radius:8px;background:rgba(86,114,125,.2);color:var(--muted);flex:0 0 auto}
/* ---- drawer (<=150ms law, R-4) ---- */
.drawer{position:fixed;top:0;right:-560px;width:540px;height:100vh;background:var(--panel);border-left:1px solid var(--line);transition:right .14s;overflow-y:auto;padding:18px;z-index:60}
.drawer.open{right:0}
.drawer .close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--faint);font-size:18px;cursor:pointer}
/* ---- honest empty state (R-3: name the missing feed, never fake/zero-fill/hide) ---- */
.empty{font-size:11px;color:var(--faint);padding:8px 2px}
.empty-state{border:1px dashed var(--soft);border-radius:10px;padding:10px 12px;font-size:11px;color:var(--faint);font-style:italic}
.empty-state b{color:var(--muted);font-style:normal}
.stub{font-size:10.5px;color:var(--faint);font-style:italic;border-top:1px dashed var(--soft);margin-top:8px;padding-top:8px}
.sub{font-size:10.5px;color:var(--faint)}
/* ---- gap box (Everything Law §59 R2) ---- */
.gapbox{background:rgba(244,183,64,.08);border:1px solid rgba(244,183,64,.35);border-radius:10px;padding:9px 12px;margin-top:10px}
.gapbox b{color:var(--amber)} .gapbox div{color:var(--amber);font-size:11.5px;padding:1px 0}