/* ============================================================
   DESK v5 — the v3 visual system (canvas artboards "v3 visual system" and "Today v3").
   Loads LAST on every page and repaints behind the existing class names: nothing moves,
   no id or class changes, no JS touched. Rules, in order of what they replace:
     tokens    one accent (blue), three greys for text that all clear WCAG AA on the panel,
               colour reserved for STATE (green / amber / red); IBM Plex Sans + JetBrains Mono
     surfaces  flat — the v4 gradients, glows, the pulsing dot, the ring gauges are removed
     rhythm    8pt spacing, radius 8 (6 on chips), 1px lines, tabular figures on every number
   Palette: Graphite, cooled toward indigo with the v4 indigo→violet accent back as THE accent (2026-09-25, Cole: Graphite read but felt flat; "the indigo was a touch better"). Text greys unchanged. Faint is for LABELS and meta only.
   Module internals (the legs blotter, the book line, the decision head) come in their own
   commits; this file is paint. Remove it and v4 is back exactly as it was.
   ============================================================ */
:root{
  /* Graphite (canvas board "Palettes", pick A): a dark GREY, not near-black — light text halates on black and every
     grey then fights it. Contrast on the panel: text 14:1 · muted 10:1 · faint 7:1. Faint is for labels and meta only. */
  --bg:#1c2029; --bg2:#20242e; --panel:#242935; --panel2:#2c3240; --inset:#181b23;
  --line:#383e4d; --line-soft:#313745; --line-bright:#474e5f;
  --ink:#f7f8fa; --soft:#d3d8df; --mute:#c0c7d0; --faint:#aab2bd;
  --accent:#9aa8ff; --accent2:#b39dfc; --glow:rgba(154,168,255,.16); --accent-grad:linear-gradient(135deg,#9aa8ff,#b39dfc);
  --green:#5fd38a; --green-s:rgba(95,211,138,.14);
  --red:#ff7b72; --red-s:rgba(255,123,114,.14);
  --amber:#f2c14e; --amber-s:rgba(242,193,78,.14);
  --blue:#7cc4ff; --blue-s:rgba(124,196,255,.14);   /* blue stays for charts and 'closed'; indigo is the accent */
  --tier-green:#5fd38a; --tier-yellow:#f2c14e; --tier-orange:#f5a25a; --tier-red:#ff7b72; --tier-pending:#aab2bd;
  --tg:var(--tier-green); --ty:var(--tier-yellow); --to:var(--tier-orange); --tr:var(--tier-red);
  --disp:"IBM Plex Sans",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  /* aliases a few late panels used without declaring them */
  --fg:var(--ink); --warn:var(--amber); --cau:var(--amber); --ok:var(--green); --pos:var(--green); --neg:var(--red);
}
body{font-size:14px;line-height:1.45;letter-spacing:0}
.mono,.tbl,.pm-tbl .pm-n,.cap .t b,.ttile .v,.chip b,.sc-r b,.gk .v,.crate .rt,.drstat .v{font-variant-numeric:tabular-nums}
h1,h2,h3,.brand,.h-action,.sect,.card-h .t,.tnext-h,.phead h1{letter-spacing:-.01em}

/* ── chrome: top bar, rail, bottom tabs — flat ── */
.nav{background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:15px}
.brand .mk{background:var(--accent-grad);border:0;color:#14172a;border-radius:6px;font-family:var(--mono);font-size:10px;font-weight:700}
.tabs a{border-radius:6px}.tabs a.on{background:var(--panel2);color:var(--ink)}
.micro .m i{font-size:11px;color:var(--faint)}.micro .m b{font-size:13px}
.navbtn{border-radius:6px;background:var(--panel);color:var(--soft)}.navbtn:active{transform:none}
.dot{box-shadow:none;animation:none}.dot.warn,.dot.err{box-shadow:none}
.rail{background:var(--bg);border-right:1px solid var(--line)}
.rail .r-item,.rail .r-group>button{border-radius:6px;font-weight:400;color:var(--soft)}
.rail .r-item:hover,.rail .r-group>button:hover{background:var(--panel);color:var(--ink)}
.rail .r-item.on{background:var(--panel2);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.rail .r-item,.rail .r-group>button{font-size:14px}.rail .r-sub .r-item{font-size:13.5px}
.rail .r-group.on>button{color:var(--ink)}
.rail .r-item .n,.rail .r-sub .r-sub .r-item{color:var(--faint)}
.rail .r-foot{border-radius:8px;background:var(--panel);color:var(--faint)}.rail .r-foot b{color:var(--soft)}
.btabs{background:var(--bg)}
.canvas::-webkit-scrollbar-thumb,.rail::-webkit-scrollbar-thumb{background:var(--line-bright);border-color:var(--bg)}

/* ── page furniture ── */
.note{border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--soft)}.note b{color:var(--accent)}
.sect{font-size:11px;letter-spacing:.12em;color:var(--faint);font-weight:500}
.sect .tagn{border-radius:4px}.sect .hint{color:var(--faint)}
.hbanner{border-radius:8px}
.phead .crumb{font-size:11px}.phead h1{font-weight:600;font-size:20px}
.ptabs a,.ptabs button{border-radius:6px;color:var(--soft)}.ptabs a.on,.ptabs button.on{background:var(--panel2);color:var(--ink);border-color:var(--line-bright)}
.obs{border-radius:4px;font-size:10px}
.stub{border-radius:4px;font-size:10px}
details.disc[open]>summary::before{color:var(--accent)}

/* ── cards, tiles, grids ── */
.card,.ttile,.tnext,.tbar,.cpd{border-radius:8px;border-color:var(--line)}
.card-h{padding:11px 16px}.card-h .t{font-size:15px;font-weight:600}.card-h .m{font-size:12px;color:var(--faint)}
.card-b{padding:14px 16px}
.legend{font-size:11px}
.chip,.crate,.drstat,.gk,.rc,.ri,.ops-window,.sc,.rationale,.events,.timeline,.alert-row,.ema-row{border-radius:6px}
.chip i,.cap .t i,.ttile .k,.gk .l,.crate .rl,.drstat .l,.rc .rst,.micro .m i,.ring .c .l,.tl-right .cd i,.sc-r i,.tk-out-h,.sc-legs-h,.eqf-h,.pm-cap,.pm-tbl th,.tbl thead th,.wb-table th,.lev-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500}
.cap{border-radius:8px}.cap .t{padding:10px 12px}.cap .t b{font-size:22px}.cap .t small{font-size:13px;color:var(--faint);text-transform:none;letter-spacing:0}
.cap .t .bar{height:4px;border-radius:2px}
.ttile .v{font-size:22px}.ttile .s{font-size:13px}

/* ── the decision — flat, and the rings become two inline stats ── */
.hero,#hero.hero{background:var(--panel)!important;border-radius:8px!important;border:1px solid var(--line)}
.hero::before{width:3px;background:var(--tg)}
.hero.tier-YELLOW::before{background:var(--ty)}.hero.tier-ORANGE::before{background:var(--to)}
.hero.tier-RED::before{background:var(--tr)}.hero.tier-PENDING::before{background:var(--tier-pending)}
.h-tier .badge{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;padding:3px 8px;border-radius:4px;display:inline-block;background:var(--green-s)}
.tier-YELLOW .badge{background:var(--amber-s)}.tier-ORANGE .badge{background:rgba(240,136,62,.12)}.tier-RED .badge{background:var(--red-s)}.tier-PENDING .badge{background:var(--panel2)}
.h-tier .sub{font-size:11px;color:var(--faint);margin-top:6px}
.h-mid .eyebrow{font-size:11px;letter-spacing:.08em;color:var(--faint)}
.h-action{font-weight:600;letter-spacing:-.01em}
#hero .h-mid .h-action{font-size:19px;line-height:1.3}
.rings{gap:24px;align-self:start;padding-top:4px}
.ring{width:auto;height:auto;display:block}
.ring svg{display:none}
.ring .c{position:static;text-align:right}
.ring .c .v{font-size:22px;font-weight:600;color:var(--ink)!important}
.ring .c .l{margin-top:2px}
.tnums{border-radius:8px!important}
.twhy summary{color:var(--accent)}
.h-reason{color:var(--soft)}
.h-contra li{color:var(--amber)}
.chips .chip b.t{font-family:var(--body)}

/* ── status bar, next ── */
.tbar-phase b{font-weight:600;font-size:14px}
.tbar-dot.open{box-shadow:none}
.tbar-steps .st{border-radius:4px;font-size:12px}
.tbar-steps .st.next{background:transparent;border-color:var(--accent);color:var(--ink)}
.tnext .ev .at{color:var(--faint)}.tnext .ev.next .at{color:var(--accent)}.tnext .cd{color:var(--accent)}

/* ── the legs / tickets ── */
.slot-l .tag{font-size:12px;letter-spacing:.04em}.slot-l .win{font-size:11px}
.pill{border-radius:4px;font-size:11px}
.tk-top .pf{color:var(--ink)}
.tk-tag{border-radius:4px;font-size:10px}
.tk-out-r,.tk-meta,.blotter{font-size:12px}.tk-out-r .s{font-size:12px}
.tk-net .nl,.tk-net .na{font-size:10px}
.tk-row .n small,.tk-row .s,.tk-row .legs{font-size:12px}
.sc-r{border-top-style:solid}.sc-r small{font-size:11px}.sc-next b{color:var(--ink)}
.sc-leg{font-size:12px}.sc-leg .t,.sc-leg .r{font-size:12px}
.eqf{border-radius:6px;background:var(--panel2)}.eqf-r input{border-radius:4px}.eqf-r button{border-radius:4px;color:#1b1e24}
.ticket{border-top-style:solid}

/* ── validated strategies, radar, containment — flat ── */
.sc{background:var(--panel2);border-left-width:2px}.sc-h .nm{font-size:13px}.sc-h .st{font-size:10px}
.sc-why,.sc-m{font-size:12px;color:var(--faint)}
.rc{border-top-width:2px}.rc .rmt{font-size:11px}
.ctrack{opacity:.35;border-radius:2px}
.cneedle{box-shadow:none;width:2px}.cneedle-l{font-size:11px}.ctick-l{font-size:10px}
.dr-spot{box-shadow:none;width:2px}
.rationale{background:var(--panel2)}.rationale .feat{border-radius:4px}
.term .b .bar{background:var(--accent);border-radius:2px 2px 0 0;opacity:.85}
.term-tag{border-radius:6px}
.divflag{border-radius:6px}

/* ── tables ── */
.tbl{font-size:13px}.tbl thead th{padding:8px 12px}.tbl td{padding:8px 12px}
.tbl td:first-child{color:var(--ink)}.tbl tr:hover td{background:var(--panel2)}
.pm-tbl{font-size:13px}.pm-tbl .pm-legs{font-size:12px}
.wb-table{font-size:13px}.wb-str{font-size:12px}.wb-grp td{font-size:11px;letter-spacing:.06em}
.wb-seg{border-radius:6px}.wb-seg button{border-radius:4px}.wb-seg button.active{color:#1b1e24}
.lev-table{font-size:13px}.lev-table th{font-size:12px}.lev-now{font-size:10px}
.bchip,.oc-chip{border-radius:4px;font-size:10px}
.b-tight,.oc-win{background:var(--green-s);color:var(--green)}.b-mid{background:var(--blue-s);color:var(--blue)}
.b-loose{background:var(--amber-s);color:var(--amber)}.b-breach,.oc-loss{background:var(--red-s);color:var(--red)}

/* ── arms, risk, alerts, ops ── */
.gauge{border-radius:2px}.gauge-band{border-radius:2px}.gauge-mk{border-radius:1px}
.badge-ok,.badge-warn,.badge-bad{border-radius:4px;font-size:11px;font-family:var(--mono);font-weight:500;border-color:transparent}
.ri{border-radius:6px;font-size:13px}
.alert-row .ak{border-radius:4px;font-size:10px}.alert-row .at{font-size:11px}
.ops-window-title{font-weight:600}.ops-window-time,.ops-window-completion,.ops-step-tooltip{font-size:11px}
.opsbtn,#btn-ops-reset{border-radius:4px;font-size:11px}
.chip-btn{border-radius:4px;font-size:11px}
.cpd>summary{font-size:13px}.cpd-meta{font-size:11px}

/* ── chips (drawer openers) ── */
.tchips button{border-radius:6px;color:var(--soft)}
.tchips button.open{background:var(--panel2);border-color:var(--accent);color:var(--ink)}

/* ── loading / empty ── */
.loading{color:var(--faint);font-style:normal}
.loading::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;border:2px solid var(--line-bright);border-top-color:var(--accent);vertical-align:-1px;animation:v5spin .9s linear infinite}
@keyframes v5spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading::before{animation:none}}

/* ── phone ── */
@media(max-width:900px){
  .rings{gap:20px}
  .ring .c{text-align:left}
  .nav{gap:8px;padding:0 10px}.brand{white-space:nowrap;font-size:14px}
  .micro{gap:10px}.micro .m:nth-child(3),.clk{display:none}
}

/* ── depth (2026-09-25, Cole: "too flat") — layering, not glow. Every raised surface gets a hairline highlight
   on its top edge and a soft shadow beneath; headers sit a shade above their card; the active tab and the current
   rail item lift; state colour is an EDGE (a 3px bar) rather than a fill. Contrast is untouched: the tokens and
   every text colour stay as they are; only surfaces and edges change. ── */
:root{
  --lift:0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.75);
  --lift-sm:0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.3);
  --raise:linear-gradient(180deg,#2c3240,#272c38);
  --head:linear-gradient(180deg,#2d3341,#262b37);
}
body{background:radial-gradient(1100px 520px at 18% -8%,rgba(154,168,255,.10) 0%,transparent 60%),radial-gradient(900px 500px at 95% 110%,rgba(179,157,252,.06) 0%,transparent 60%),var(--bg) fixed}
.canvas{background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 120px)}
.nav{background:linear-gradient(180deg,#272c39,#22262f);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 10px rgba(0,0,0,.35)}
.rail{background:linear-gradient(180deg,#1f232d,#1c2029)}
.rail .r-item.on{background:var(--raise);box-shadow:var(--lift-sm);position:relative}
.rail .r-item.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent-grad)}
.card,.ttile,.tnext,.cpd,.tbar{box-shadow:var(--lift);border-color:var(--line)}
.card-h{background:var(--head)}
.card .card-h .t{text-shadow:0 1px 0 rgba(0,0,0,.4)}
.cap .t,.chip,.crate,.drstat,.gk,.rc,.ri,.ops-window,.sc,.rationale,.alert-row,.ema-row{box-shadow:var(--lift-sm)}
.cap{box-shadow:var(--lift)}
.btabs{background:linear-gradient(0deg,#272c39,#22262f);box-shadow:0 -1px 0 rgba(255,255,255,.04) inset,0 -4px 14px rgba(0,0,0,.35)}
.tchips button,.ptabs a,.ptabs button,.chip-btn,.navbtn,.opsbtn,#btn-ops-reset{background:var(--raise);box-shadow:var(--lift-sm)}
.tchips button.open,.ptabs a.on,.ptabs button.on{box-shadow:var(--lift-sm),inset 0 -2px 0 var(--accent);color:var(--ink)}
.eqf-r button,.wb-seg button.active{background:var(--accent-grad);color:#14172a}
.hbanner{box-shadow:var(--lift-sm)}
.note{box-shadow:var(--lift-sm)}
.eqf{box-shadow:var(--lift-sm)}
/* the verdict panel: state as a left edge with a faint wash behind it */
.hero.tier-GREEN,#hero.hero.tier-GREEN{background:linear-gradient(90deg,rgba(95,211,138,.07),transparent 28%),var(--panel)!important}
.hero.tier-YELLOW,#hero.hero.tier-YELLOW{background:linear-gradient(90deg,rgba(242,193,78,.07),transparent 28%),var(--panel)!important}
.hero.tier-ORANGE,#hero.hero.tier-ORANGE{background:linear-gradient(90deg,rgba(245,162,90,.07),transparent 28%),var(--panel)!important}
.hero.tier-RED,#hero.hero.tier-RED{background:linear-gradient(90deg,rgba(255,123,114,.08),transparent 28%),var(--panel)!important}
/* the pulse of the live dot: a soft ring, never neon */
.dot{box-shadow:0 0 0 3px rgba(95,211,138,.18)}.dot.warn{box-shadow:0 0 0 3px rgba(242,193,78,.18)}.dot.err{box-shadow:0 0 0 3px rgba(255,123,114,.2)}
/* the legs board's not-eligible rows: room for words instead of codes */
.tk-out-r{grid-template-columns:170px 150px auto;font-size:12.5px}.tk-out-r .n{color:var(--soft)}.tk-out-r .s{color:var(--muted,var(--soft))}
/* data tables (the v4 pages): text columns read left, at the v5 scale */
.data-table thead th,.db-table thead th{font-size:12px;letter-spacing:.06em;font-weight:500;text-transform:uppercase}
.data-table td,.db-table td{font-size:13px;padding:9px 11px;vertical-align:top}
.data-table td:not(.num),.db-table td:not(.num),.data-table th:not(.num),.db-table th:not(.num){text-align:left}
.data-table td.num,.db-table td.num,.data-table th.num,.db-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the strategies index: room for the sentence columns */
#st-table td:nth-child(2),#st-table td:nth-child(3){white-space:nowrap}
#st-table td:nth-child(4){min-width:300px;line-height:1.45}#st-table td:nth-child(4) .st-note{white-space:normal}
#st-table td:last-child{white-space:nowrap}
/* the verdict sentence is ink on every page; tier colour lives in the badge and the edge only */
.hero .h-action,.tier-YELLOW .h-action,.tier-GREEN .h-action,.tier-ORANGE .h-action,.tier-RED .h-action{color:var(--ink)}