@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ==========================================================================
   T2C design tokens

   Dark is the default. Light is a selected set, not an inversion.

   Status colours are semantic and fixed:
     lime  = confirmed / live / complete
     amber = in construction / at risk
     red   = delayed / failed / materially negative
     grey  = unknown / unverified

   Amber and lime are neighbouring hues, so under deuteranopia they converge.
   That is why every status in this stylesheet is paired with a glyph and a text
   label in the markup — colour is never the only carrier. Validated with the
   dataviz palette checker: dark passes all CVD checks (worst pair ΔE 8.7 deutan,
   15.7 normal vision); light needs green rather than olive-lime for "live", which
   is why --ok differs between the two modes.
   ========================================================================== */

:root, html[data-theme="dark"] {
  --bg:#0B0B0C; --surface:#141416; --surface-2:#1B1B1E; --surface-3:#232327;
  --line:#2B2B30; --line-2:#1F1F23;
  --ink:#FFFFFF; --soft:#C9C9CE; --dim:#8A8A93; --faint:#5C5C64;

  --brand:#D6FF00; --brand-ink:#0A0A0A;
  --ok:#C8E82A; --warn:#C48400; --bad:#D14545; --unknown:#7A7A82;
  --ok-bg:rgba(200,232,42,.12); --warn-bg:rgba(196,132,0,.14);
  --bad-bg:rgba(209,69,69,.14); --unknown-bg:rgba(122,122,130,.12);

  --up:#3FD183; --down:#FF6B78;
  --hero-bg:#08080A;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --radius:4px;
}

html[data-theme="light"] {
  --bg:#F2F2EF; --surface:#FFFFFF; --surface-2:#F7F7F4; --surface-3:#EDEDE8;
  --line:#D8D8D1; --line-2:#E8E8E2;
  --ink:#0A0A0A; --soft:#333333; --dim:#63636A; --faint:#8C8C94;

  --brand:#D6FF00; --brand-ink:#0A0A0A;
  /* lime is 1.16:1 on white, so light mode uses green for "live" instead */
  --ok:#2E9B52; --warn:#C98A00; --bad:#9E1B10; --unknown:#6A6A72;
  --ok-bg:rgba(46,155,82,.10); --warn-bg:rgba(201,138,0,.12);
  --bad-bg:rgba(158,27,16,.09); --unknown-bg:rgba(106,106,114,.10);

  --up:#136B3C; --down:#A81322;
  --hero-bg:#08080A;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);min-height:100vh;font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,td,th,span,div,li,label,a,button,select,option,summary{color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hide{display:none!important}

/* ============ HEADER ============ */
.top{background:var(--hero-bg);border-bottom:1px solid #1E1E22;position:relative;z-index:60}
.topin{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:34px;width:auto;display:block}
.topin .right{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#C9C9CE;border:1px solid #2A2A30;padding:5px 9px;border-radius:var(--radius);background:rgba(255,255,255,.03);font-family:'IBM Plex Mono',monospace}
.conn i{width:6px;height:6px;border-radius:50%;background:var(--unknown);display:block;flex:none}
.conn.ok i{background:var(--brand);box-shadow:0 0 7px var(--brand)}
.conn.off i{background:var(--bad)}
.hbtn{border:1px solid #2A2A30;background:rgba(255,255,255,.04);color:#EEE;font-family:inherit;font-size:12px;font-weight:700;padding:7px 11px;border-radius:var(--radius);cursor:pointer;min-height:34px}
.hbtn:hover{border-color:var(--brand);color:var(--brand)}

/* ============ HERO ============
   Deliberately short: the product must be visible without scrolling. */
.hero{background:var(--hero-bg);position:relative;overflow:hidden;border-bottom:1px solid #1E1E22}
#flow{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.55}
.heroin{position:relative;z-index:2;padding:34px 0 30px}
.tagline{color:#FFF;font-weight:900;letter-spacing:-.035em;line-height:1.05;font-size:clamp(25px,3.5vw,40px);max-width:20ch}
.tagline u{text-decoration:none;color:var(--brand)}
.taglinesub{color:#9C9CA5;font-size:15px;max-width:60ch;margin-top:11px;line-height:1.55}
.heroacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:19px}
.cta{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:800;padding:10px 16px;border-radius:var(--radius);text-decoration:none;cursor:pointer;border:1px solid transparent;min-height:42px}
.cta.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.cta.primary:hover{filter:brightness(1.08)}
.cta.ghost{border-color:#33333A;color:#DDD;background:rgba(255,255,255,.03)}
.cta.ghost:hover{border-color:var(--brand);color:var(--brand)}

/* KPI strip */
.kstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#1E1E22;border-top:1px solid #1E1E22;position:relative;z-index:2}
.kcell{background:rgba(10,10,12,.86);padding:13px 16px;backdrop-filter:blur(3px);min-width:0}
.kcell .kv{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:clamp(19px,2.4vw,27px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--brand)}
.kcell .kv.plain{color:#FFF}
.kcell .kl{font-size:11.5px;font-weight:700;margin-top:6px;color:#DDD;line-height:1.3}
.kcell .ke{font-size:10.5px;color:#7E7E88;margin-top:3px;line-height:1.4;font-family:'IBM Plex Mono',monospace}

/* ticker tape */
.tape{background:#0A0A0C;border-top:1px solid #1A1A1E;overflow:hidden;white-space:nowrap;position:relative;z-index:2}
.tapein{display:inline-flex;padding:8px 0;will-change:transform}
@media(prefers-reduced-motion:no-preference){.tapein{animation:roll 60s linear infinite}}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape:hover .tapein{animation-play-state:paused}
.tk{display:inline-flex;align-items:baseline;gap:6px;padding:0 18px;border-right:1px solid #1A1A1E;font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.tk b{color:#FFF;font-weight:700}
.tk span.p{color:#9C9CA5}
.tk span.u{color:var(--up)}
.tk span.d{color:var(--down)}

/* ============ NAV ============ */
.nav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:55;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.navin{display:flex;gap:0}
.tab{border:none;background:none;color:var(--dim);font-family:inherit;font-weight:700;font-size:13.5px;padding:13px 15px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;min-height:46px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"],.tab.active{color:var(--ink);border-bottom-color:var(--brand)}

main{padding:20px 0 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.ph{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.ph h2{font-size:14px;font-weight:800;letter-spacing:-.01em}
.ph h3{font-size:13px;font-weight:800}
.ph .meta{margin-left:auto;font-size:11px;color:var(--dim);font-weight:600;font-family:'IBM Plex Mono',monospace}
.pb{padding:16px}
.grid{display:grid;gap:14px}
@media(min-width:1000px){.g23{grid-template-columns:1.5fr 1fr}.g32{grid-template-columns:1fr 1.45fr}.g11{grid-template-columns:1fr 1fr}}

/* ============ STATUS + CONFIDENCE ============
   Always glyph + label + colour, never colour alone. */
.st{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.st i{font-style:normal;line-height:1}
.st-ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.st-warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.st-bad{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.st-unknown{color:var(--unknown);border-color:var(--unknown);background:var(--unknown-bg)}

.src{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--faint);font-family:'IBM Plex Mono',monospace}
.src:hover{color:var(--ok);border-bottom-color:var(--ok)}
.src.none{color:var(--warn);border-bottom-style:none;cursor:help}

/* ============ STAGE TRACK ============
   Position in the pipeline is carried by an ordered, numbered track — not by hue,
   so a reader can always tell where a project sits even if the colours converge. */
.track{display:flex;align-items:stretch;gap:2px;margin:10px 0 0}
.seg{flex:1;min-width:0;position:relative;padding:7px 6px 6px;border-radius:2px;background:var(--surface-3);border-top:3px solid var(--faint);text-align:left}
.seg .sn{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;color:var(--faint);display:block;line-height:1}
.seg .sl{font-size:10.5px;font-weight:700;color:var(--dim);display:block;margin-top:3px;line-height:1.25;overflow-wrap:anywhere}
.seg.done{border-top-color:var(--ok);background:var(--ok-bg)}
.seg.done .sn,.seg.done .sl{color:var(--ok)}
.seg.here{border-top-color:var(--warn);background:var(--warn-bg)}
.seg.here .sn,.seg.here .sl{color:var(--warn)}
.seg.here::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--warn)}
.seg.late{border-top-color:var(--bad);background:var(--bad-bg)}
.seg.late .sn,.seg.late .sl{color:var(--bad)}
@media(max-width:640px){.track{flex-wrap:wrap}.seg{flex:1 1 30%}}

/* ============ KPI CARDS ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line-2)}
.kpi{background:var(--surface);padding:15px 16px;min-width:0}
.kpi .kv{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1}
.kpi .kl{font-size:12.5px;font-weight:700;margin-top:7px}
.kpi .kd{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.45}
.kpi .kfoot{margin-top:9px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bar{height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-top:9px;display:flex;gap:2px}
.bar i{display:block;height:100%;border-radius:2px}

/* ============ LEDGER ============ */
.led{display:flex;flex-direction:column;gap:1px;background:var(--line-2)}
.ledrow{background:var(--surface);padding:14px 16px;display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:start}
.ledrow .when{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--dim);font-weight:600;line-height:1.4}
.ledrow .when b{display:block;color:var(--ink);font-weight:700;font-size:12.5px}
.ledrow .what h4{font-size:13.5px;font-weight:800;margin-bottom:3px}
.ledrow .what p{font-size:12.5px;color:var(--soft);line-height:1.55}
.ledrow .delta{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:700;white-space:nowrap;text-align:right}
.ledrow .delta .arrow{color:var(--dim);padding:0 4px}
.ledmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.imp{font-size:12px;color:var(--dim);line-height:1.55;margin-top:7px;padding-left:10px;border-left:2px solid var(--line)}
@media(max-width:720px){.ledrow{grid-template-columns:1fr;gap:8px}.ledrow .delta{text-align:left}}

.empty{padding:30px 20px;text-align:center}
.empty h3{font-size:14px;font-weight:800;margin-bottom:6px}
.empty p{font-size:13px;color:var(--dim);max-width:56ch;margin:0 auto;line-height:1.6}
.empty code{font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--line);padding:2px 5px;border-radius:3px}

/* ============ TABLES ============ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw[data-scrollhint]{position:relative}
.scrollnote{font-size:10.5px;color:var(--dim);padding:7px 16px;border-bottom:1px solid var(--line-2);font-family:'IBM Plex Mono',monospace}
table{width:100%;border-collapse:collapse;min-width:560px}
th{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
th:first-child{text-align:left}
td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line-2);font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;vertical-align:top}
td:first-child{text-align:left;font-family:'Archivo',sans-serif;font-weight:800}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.sub{display:block;font-family:'Archivo',sans-serif;font-weight:400;font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.45;max-width:34ch;text-align:left}
.nd{color:var(--unknown);font-style:normal}

/* ============ KEY ============ */
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line-2);border-bottom:1px solid var(--line-2)}
.keyitem{background:var(--surface);padding:12px 16px}
.keyitem .kh{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.keyitem .kh b{font-size:12.5px;font-weight:800}
.keyitem p{font-size:11.5px;color:var(--dim);line-height:1.5}
.keynote{font-size:11.5px;color:var(--dim);padding:11px 16px;border-bottom:1px solid var(--line-2);line-height:1.55;background:var(--surface-2)}
.keynote b{color:var(--ink)}

/* ============ COUNTRY ============ */
.geo{display:grid;gap:1px;background:var(--line-2)}
.georow{background:var(--surface);padding:13px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;cursor:pointer;width:100%;border:none;text-align:left;font-family:inherit;font-size:inherit;min-height:56px}
.georow:hover{background:var(--surface-2)}
.geoflag{font-size:20px;line-height:1;width:28px;text-align:center}
.geoname{font-weight:800;font-size:14px}
.geoname small{display:block;font-weight:400;font-size:11.5px;color:var(--dim);margin-top:2px}
.geobar{height:8px;background:var(--surface-3);border-radius:2px;overflow:hidden;display:flex;gap:2px;margin-top:7px}
.geobar i{display:block;height:100%;border-radius:2px}
.geoval{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;white-space:nowrap}
.geoval small{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;color:var(--dim);margin-top:2px}
.geodetail{background:var(--surface-2);padding:0 16px;display:none}
.geodetail.open{display:block;padding:12px 16px 15px}
.sitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.sitecard{border:1px solid var(--line);border-radius:3px;padding:10px 12px;background:var(--surface)}
.sitecard .sn{font-weight:800;font-size:12.5px}
.sitecard .sc{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.45}
.sitecard .sm{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:14px;margin-top:6px}

/* contribution rows */
.contrib{display:flex;flex-direction:column;gap:1px;background:var(--line-2)}
.crow{background:var(--surface);padding:11px 16px;display:grid;grid-template-columns:78px 1fr 96px;gap:11px;align-items:center}
.crow .ct{font-weight:800;font-size:13px}
.crow .ct a{text-decoration:none;border-bottom:1px solid var(--line)}
.crow .ct a:hover{color:var(--ok);border-bottom-color:var(--ok)}
.crow .cb{height:8px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.crow .cb i{display:block;height:100%;background:var(--ok);border-radius:2px}
.crow .cv{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.crow .cv small{display:block;font-family:'Archivo',sans-serif;font-size:10.5px;color:var(--dim);font-weight:600}

/* ============ INTELLIGENCE ============ */
.filters{display:flex;gap:6px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.fchip{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:3px;cursor:pointer;min-height:32px}
.fchip:hover{border-color:var(--ok)}
.fchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

.newshero{display:block;text-decoration:none;padding:18px 16px;border-bottom:1px solid var(--line-2);position:relative}
.newshero:hover{background:var(--surface-2)}
.newshero .lead{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ok);margin-bottom:8px;font-family:'IBM Plex Mono',monospace}
.newshero .heroimg{width:100%;max-height:210px;object-fit:cover;border-radius:3px;margin-bottom:13px;display:block;background:var(--surface-3)}
.newshero .hl{font-size:clamp(18px,2.3vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.22}
.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1px;background:var(--line-2)}
.ncard{background:var(--surface);text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden}
.ncard:hover{background:var(--surface-2)}
.nthumb{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3);border-bottom:1px solid var(--line-2)}
.nthumb img{width:100%;height:100%;object-fit:cover;display:block}
.nbody{padding:14px 16px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard .hl{font-size:14px;font-weight:700;line-height:1.35;display:block}
.mt{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--dim);font-weight:600;margin-top:auto;font-family:'IBM Plex Mono',monospace}
.srcpill{background:var(--surface-2);border:1px solid var(--line);padding:2px 6px;border-radius:3px}
.symp{background:var(--brand);color:var(--brand-ink);padding:2px 6px;border-radius:3px;font-weight:800}
.fresh{display:inline-flex;align-items:center;gap:4px;color:var(--ok);font-weight:800}
.fresh i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block}
/* Placeholder for the future structured "what changed" summary. */
.whatchanged{font-size:11px;color:var(--faint);font-family:'IBM Plex Mono',monospace;border-top:1px dashed var(--line);padding-top:7px;margin-top:2px}

/* ============ FORMS / ODDS ============ */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;font-weight:700}
.field .hint{display:block;font-weight:400;font-size:10.5px;color:var(--dim);margin-top:1px;font-family:'IBM Plex Mono',monospace}
input,select{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;padding:9px 10px;border-radius:3px;width:100%;min-height:42px}
input:focus,select:focus{border-color:var(--ok);outline:none}
select{cursor:pointer}
.livetag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line);color:var(--dim);font-family:'IBM Plex Mono',monospace}
.livetag.on{border-color:var(--ok);color:var(--ok)}
.livetag i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block}
.resync{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:3px;cursor:pointer;min-height:32px}
.resync:hover:not([disabled]){border-color:var(--ok);color:var(--ok)}
.resync[disabled]{opacity:.4;cursor:default}
.big{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(46px,9vw,74px);line-height:.95;letter-spacing:-.045em}
.pbar{height:10px;background:var(--surface-3);border-radius:3px;overflow:hidden;margin-top:12px}
.pbar i{display:block;height:100%;background:var(--ok);transition:width .4s ease}
.note{font-size:13px;color:var(--soft);line-height:1.6}
.note b{font-weight:700;color:var(--ink)}
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:none}
.step .no{counter-increment:s;width:24px;height:24px;border-radius:3px;background:var(--surface-3);color:var(--ink);font-weight:900;font-size:11.5px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace}
.step .no::before{content:counter(s)}
.step h4{font-size:13px;font-weight:800;margin-bottom:3px}
.step p{font-size:12.5px;color:var(--soft);line-height:1.55}
.step .calc{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ok);font-weight:700;margin-top:4px;display:block}
.terms{display:flex;gap:6px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.term{border:1px dashed var(--line);background:none;color:var(--ink);font-family:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:3px;cursor:pointer;min-height:32px}
.term:hover,.term[aria-pressed="true"]{border-style:solid;border-color:var(--brand);background:var(--brand);color:var(--brand-ink)}
#termDef{padding:14px 16px;background:var(--surface-2);font-size:13px;line-height:1.6;border-bottom:1px solid var(--line-2)}
.stamp{font-size:11.5px;color:var(--dim);padding:11px 16px;border-top:1px solid var(--line-2);line-height:1.55}
.stamp b{color:var(--ink)}
.skel{height:11px;background:var(--surface-3);border-radius:3px;margin:9px 0}
@media(prefers-reduced-motion:no-preference){.skel{animation:sh 1.3s ease-in-out infinite}}
@keyframes sh{0%,100%{opacity:.45}50%{opacity:.85}}
svg{display:block;width:100%;height:auto}

/* ============ PROSE (methodology, legal) ============ */
.prose{max-width:78ch}
.prose h2{font-size:19px;font-weight:800;margin:26px 0 9px;letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:14.5px;font-weight:800;margin:18px 0 6px}
.prose p{font-size:14px;color:var(--soft);line-height:1.68;margin-bottom:11px}
.prose ul,.prose ol{margin:0 0 13px 20px}
.prose li{font-size:14px;color:var(--soft);line-height:1.68;margin-bottom:5px}
.prose code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);padding:1px 5px;border-radius:3px;color:var(--ink)}
.prose a{color:var(--ok);text-decoration:underline;text-underline-offset:2px}
.deftable td:first-child{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;white-space:nowrap}
.deftable td{text-align:left;font-family:'Archivo',sans-serif;font-weight:400;font-size:13px;color:var(--soft);line-height:1.55}

/* ============ COMPANY PAGE ============ */
.chead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:20px 0 16px}
.chead h1{font-size:clamp(24px,3.6vw,34px);font-weight:900;letter-spacing:-.035em;line-height:1.05}
.chead .tick{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--dim);font-weight:700;margin-top:4px}
.chead .right{margin-left:auto;text-align:right}
.crumb{font-size:11.5px;color:var(--dim);font-family:'IBM Plex Mono',monospace;padding-top:16px}
.crumb a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--ok)}
.srclist li{list-style:none;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px;line-height:1.5}
.srclist li:last-child{border-bottom:none}
.srclist a{color:var(--ok);text-decoration:none;font-weight:700}
.srclist a:hover{text-decoration:underline}
.srclist .d{color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:11px;display:block;margin-top:2px}

/* ============ FOOTER ============ */
.foot{background:var(--hero-bg);border-top:1px solid #1E1E22;margin-top:40px}
.footin{padding:34px 0 26px}
.footmark{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid #1A1A1E}
.footmark img{height:40px;width:auto;display:block}
.footmark p{color:#84848E;font-size:13px;line-height:1.6;max-width:44ch}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;padding:22px 0;border-bottom:1px solid #1A1A1E}
.footcol h4{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:9px;font-family:'IBM Plex Mono',monospace}
.footcol li{list-style:none;font-size:12.5px;color:#93939C;line-height:1.85}
.footcol li b{color:#DDD;font-weight:700;font-family:'IBM Plex Mono',monospace}
.footcol a{color:#93939C;text-decoration:none;border-bottom:1px solid #2A2A30}
.footcol a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.footbase{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-top:18px;font-size:11.5px;color:#66666E;line-height:1.6}
.footbase .sep{margin-left:auto}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .kstrip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .wrap{padding:0 14px}
  .heroin{padding:24px 0 22px}
  .tagline{font-size:24px;max-width:100%}
  .taglinesub{font-size:14px}
  .kcell{padding:11px 13px}
  .kcell .kv{font-size:20px}
  .cta{flex:1 1 auto;justify-content:center}
  .logo img{height:28px}
  .crow{grid-template-columns:64px 1fr 78px;gap:9px}
  .georow{grid-template-columns:auto 1fr;gap:10px}
  .geoval{grid-column:2;text-align:left;margin-top:4px}
  .footbase .sep{margin-left:0}
  .ph{padding:12px 14px}
  .pb{padding:14px}
}

/* ============================================================
   Evidence, gates, scenarios and comparison components.
   Concatenated after styles.css at build time.
   ============================================================ */

:root, html[data-theme="dark"] {
  --series-1:#C8E82A; --series-2:#4FA3E3; --series-3:#E08A3C;
}
html[data-theme="light"] {
  --series-1:#2E9B52; --series-2:#1F6FB5; --series-3:#B45F09;
}

/* ---- feed status: feed health and market session are different things ---- */
.feed{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#C9C9CE;border:1px solid #2A2A30;padding:5px 10px;border-radius:var(--radius);background:rgba(255,255,255,.03);font-family:'IBM Plex Mono',monospace}
.feed i{width:6px;height:6px;border-radius:50%;background:var(--unknown);display:block;flex:none}
.feed.ok i{background:var(--brand);box-shadow:0 0 7px var(--brand)}
.feed.idle i{background:var(--warn)}
.feed.off i{background:var(--bad)}

/* ---- value + evidence ---- */
.val{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700}
.val-target,.val-pipeline,.val-potential{font-style:italic;opacity:.9}
.vmeta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:4px}
.asof{font-size:10px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.basis{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 5px;border-radius:3px;border:1px solid var(--line);color:var(--dim);font-family:'IBM Plex Mono',monospace;white-space:nowrap}

details.ev{margin-top:7px}
details.ev summary{cursor:pointer;font-size:10.5px;font-weight:700;color:var(--dim);font-family:'IBM Plex Mono',monospace;list-style:none;display:inline-flex;align-items:center;gap:5px;padding:4px 0;min-height:24px}
details.ev summary::-webkit-details-marker{display:none}
details.ev summary::before{content:"\25B8";display:inline-block;transition:transform .15s}
details.ev[open] summary::before{transform:rotate(90deg)}
details.ev summary:hover{color:var(--ok)}
.evbody{border-left:2px solid var(--line);padding:9px 0 4px 11px;margin-top:5px}
.evnote{font-size:12px;color:var(--soft);line-height:1.55;margin-bottom:9px;font-family:'Archivo',sans-serif;text-align:left}
.evmeta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:11px;margin-bottom:9px}
.evmeta dt{color:var(--dim);font-family:'IBM Plex Mono',monospace}
.evmeta dd{color:var(--ink);font-family:'Archivo',sans-serif}
.evsrc{margin-top:9px;font-size:11.5px;text-align:left}
.evsrc a{color:var(--ok);font-weight:700;text-decoration:none}
.evsrc a:hover{text-decoration:underline}
.evsrcmeta{display:block;color:var(--dim);font-size:10.5px;font-family:'IBM Plex Mono',monospace;margin-top:2px}
.evsrc blockquote{margin-top:6px;padding:8px 10px;background:var(--surface-2);border-left:2px solid var(--ok);font-size:11.5px;color:var(--soft);line-height:1.55;font-family:'Archivo',sans-serif}

/* ---- KPI cards: coverage sits with the number, not below it ---- */
.kpi .kl{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kfacts{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin-top:11px;font-size:11px;line-height:1.45}
.kfacts dt{color:var(--dim);font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.kfacts dd{color:var(--soft)}
.kpilink{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;color:var(--ok);text-decoration:none;font-family:'IBM Plex Mono',monospace}
.kpilink:hover{text-decoration:underline}
.kpi-empty .kv{font-size:15px;line-height:1.4;font-family:'Archivo',sans-serif;font-weight:700}

/* ---- project gates ---- */
.gates{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--line-2);margin-top:11px;border-radius:3px;overflow:hidden}
.gate{background:var(--surface);display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center;padding:7px 11px;font-size:11.5px}
.gate .gglyph{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1}
.gate .glabel{font-weight:700}
.gate .gstatus{font-size:10.5px;color:var(--dim);font-family:'IBM Plex Mono',monospace;text-align:right}
.gate .gdate{font-size:10px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.gate-ok .gglyph{color:var(--ok)}
.gate-warn .gglyph{color:var(--warn)}
.gate-unknown .gglyph{color:var(--unknown)}
.gate-unknown .glabel{color:var(--dim);font-weight:500}
.gate-bad .gglyph{color:var(--bad)}

/* ---- projects ---- */
.projgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--line-2)}
.projcard{background:var(--surface);padding:15px 16px}
.projhead{display:flex;align-items:baseline;gap:9px;justify-content:space-between}
.projhead h3{font-size:14px;font-weight:800}
.projmeta{font-size:10.5px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.projval{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px;font-family:'IBM Plex Mono',monospace;font-size:16px}
.projnote{font-size:12px;color:var(--dim);line-height:1.55;margin-top:8px}
.projsrc{margin-top:9px}
.rectable td:first-child{width:36%;font-family:'Archivo',sans-serif;font-weight:700;font-size:13px}
.rectable td{text-align:left;vertical-align:top}

/* ---- catalysts ---- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line-2)}
.cat{background:var(--surface);padding:15px 16px}
.cathead{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cattick{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:12px;background:var(--surface-3);padding:2px 7px;border-radius:3px}
.cat h4{font-size:14px;font-weight:800;margin-bottom:6px;line-height:1.3}
.catwhen{display:flex;gap:9px;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:13px;margin-bottom:8px;flex-wrap:wrap}
.catwhen span{font-size:11px;color:var(--dim)}
.cat p{font-size:12px;color:var(--soft);line-height:1.55}
.catmeta{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin-top:10px;font-size:10.5px}
.catmeta dt{color:var(--dim);font-family:'IBM Plex Mono',monospace}
.catmeta dd{color:var(--soft)}

/* ---- data health ---- */
.health{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-2)}
.hcell{background:var(--surface);padding:14px 15px}
.hv{font-family:'IBM Plex Mono',monospace;font-size:23px;font-weight:700;line-height:1}
.hl{font-size:11.5px;font-weight:700;margin-top:6px}
.hh{font-size:10.5px;color:var(--dim);margin-top:3px;line-height:1.4}

/* ---- segmented control ---- */
.segbar{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:3px;margin-bottom:14px;overflow-x:auto}
.seg-btn{flex:1;min-width:110px;border:none;background:none;color:var(--dim);font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 12px;border-radius:3px;cursor:pointer;white-space:nowrap;min-height:40px}
.seg-btn:hover{color:var(--ink)}
.seg-btn[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* ---- charts ---- */
.chartlegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:11px;color:var(--soft)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg i{width:12px;height:10px;border-radius:2px;display:block;flex:none}
.lg i.dash{height:2px;border-radius:0}
.chartsummary{font-size:11.5px;color:var(--dim);line-height:1.6;margin-top:10px;max-width:80ch}

/* ---- honest unavailable states ---- */
.unavail{padding:24px 20px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius);margin:14px 16px}
.unavail.compact{margin:14px 0}
.unavail h3{font-size:14.5px;font-weight:800;margin-bottom:8px;color:var(--warn)}
.unavail p{font-size:12.5px;color:var(--soft);line-height:1.6;margin-bottom:8px;max-width:80ch}
.unavail-fields{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim)}
.unavail-note{font-size:11.5px;color:var(--dim);border-left:2px solid var(--line);padding-left:11px}

/* ---- comparison ---- */
.cmpsel{border:none;margin-bottom:14px;padding:0}
.cmpsel legend{font-size:11.5px;font-weight:700;color:var(--dim);margin-bottom:9px;font-family:'IBM Plex Mono',monospace}
.chiprow{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:7px}
.cchip{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);padding:9px 11px;cursor:pointer;min-height:48px;transition:border-color .12s}
.cchip:hover{border-color:var(--ok)}
.cchip:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.cchip input{width:16px;height:16px;min-height:0;flex:none;accent-color:var(--brand);cursor:pointer}
.cchip .cct{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:12.5px;flex:none}
/* The full company name wraps rather than truncating — never an ellipsis alone. */
.cchip .ccn{font-size:11.5px;color:var(--dim);line-height:1.3;overflow-wrap:anywhere}
.cchip.is-disabled{opacity:.45;cursor:not-allowed}
.cmphint{font-size:11.5px;color:var(--dim);margin-top:9px;font-family:'IBM Plex Mono',monospace}
.cmpcontrols{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end}
.fsel{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--dim)}
.fsel select{min-width:130px}
.potgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-2)}
.potcard{background:var(--surface);padding:15px 16px}
.potcard h4{font-size:14px;font-weight:800}
.potcard h4 span{display:block;font-size:11px;color:var(--dim);font-weight:500;margin-top:2px}
.potcard dl{margin-top:11px;font-size:12px}
.potcard dt{color:var(--dim);font-size:10.5px;font-family:'IBM Plex Mono',monospace;margin-top:9px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.potcard dd{color:var(--ink);font-weight:700;margin-top:2px}
.tag{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 5px;border-radius:2px}
.tag-live{background:var(--ok-bg);color:var(--ok)}
.tag-analyst{background:var(--warn-bg);color:var(--warn)}
.tag-model{background:var(--unknown-bg);color:var(--unknown)}
.tag-filed{background:var(--ok-bg);color:var(--ok)}

/* ---- ledger filters ---- */
.fcount{font-size:11px;color:var(--dim);font-family:'IBM Plex Mono',monospace;align-self:flex-end;margin-left:auto}
.filters{align-items:flex-end}

/* ---- misc ---- */
.tleft{text-align:left !important}
.dim{color:var(--dim)}
.small{font-size:11.5px}
.lede{max-width:72ch;margin-bottom:16px}
.qt{font-weight:800;font-size:12.5px;font-family:'IBM Plex Mono',monospace}
.qn{font-size:10.5px;color:var(--dim);line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
.tkn{color:#6E6E78;font-size:11px}
.tkgroup{display:inline-flex}
.filinghead{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.formpill{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:800;border:1px solid var(--line);padding:2px 6px;border-radius:3px;color:var(--dim)}
.filingdate{font-size:10.5px;color:var(--dim);font-family:'IBM Plex Mono',monospace;margin-left:auto}
.ratingbar{display:flex;height:9px;border-radius:2px;overflow:hidden;gap:1px;min-width:90px}
.ratingbar i{display:block;height:100%}
.crow-detail td{padding:0 12px 14px}
.georow{background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0;width:100%;min-height:44px}
.georow:hover{color:var(--ok)}
.dfrom{color:var(--dim)}
.dto{color:var(--ink)}
.crumb a:hover{color:var(--ok)}

@media(max-width:640px){
  .kfacts{grid-template-columns:1fr}
  .kfacts dt{margin-top:6px}
  .gate{grid-template-columns:18px 1fr;gap:7px}
  .gate .gstatus{grid-column:2;text-align:left}
  .gate .gdate{grid-column:2}
  .chiprow{grid-template-columns:1fr}
  .cmpcontrols{flex-direction:column;align-items:stretch}
  .unavail{margin:14px 0}
  .projgrid{grid-template-columns:1fr}
}

/* Grid and flex children default to min-width:auto, so a table carrying
   min-width:560px refuses to let its panel shrink and pushes the whole page wide
   at mobile widths. Allowing them to shrink lets .tw act as the scroll container
   it was always meant to be. Caught at 375px: 201px of page overflow on Scenarios. */
.grid > *,
.panel,
.pb > .frow,
.tw { min-width: 0; }

/* A two-column input grid at 375px leaves the company <select> about 167px wide,
   which truncates "IREN — IREN Limited" to "IREN — IREN". Full company names must
   stay readable, so the inputs go single-column on narrow screens. */
@media(max-width:560px){
  .frow{grid-template-columns:1fr}
}

/* The company selector carries "TICKER — Full Company Name", which needs roughly
   200px. auto-fit columns give it ~165px, truncating the name the brief requires
   to stay visible, so it spans two columns wherever the grid has more than one. */
.field-wide{grid-column:span 2}
@media(max-width:560px){.field-wide{grid-column:auto}}

/* ---- delivery timeline: promised versus delivered ---- */
.tl{margin-top:11px;border-top:1px solid var(--line-2);padding-top:11px;display:flex;flex-direction:column;gap:11px}
.tlrow{display:flex;flex-direction:column;gap:5px;padding-left:11px;border-left:2px solid var(--line)}
.tlgate{font-size:12px;font-weight:800;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tlscope{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:800;background:var(--surface-3);color:var(--dim);padding:1px 5px;border-radius:2px}
.tldates{display:flex;gap:14px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.tlt b{color:var(--dim);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-right:5px}
.tlout,.tlmoved{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tlnote{font-size:11px;color:var(--dim);line-height:1.5}
.tlsrc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ============================================================
   Average-user layer: briefing cards, company snapshots, About
   sections and official links. Concatenated last.
   ============================================================ */

/* ---- readable body copy ----
   Explanatory prose was 15px, which reads as fine print to an ordinary visitor.
   Financial figures keep tabular numerals so columns still align. */
body { font-size: 17px; line-height: 1.55; }
.note, .prose p, .prose li { font-size: 16.5px; line-height: 1.68; }
.prose { max-width: 72ch; }
.mono, .kv, td, .val { font-variant-numeric: tabular-nums; }

/* ---- market in 30 seconds ---- */
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--line-2)}
.bcard{background:var(--surface);padding:17px 18px;display:flex;flex-direction:column;gap:7px;min-width:0}
.bkicker{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.bco{font-size:13px;font-weight:700;overflow-wrap:anywhere}
.bco b{font-family:'IBM Plex Mono',monospace;color:var(--ok);margin-right:5px}
.bfig{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.03em}
.bsent{font-size:14px;color:var(--soft);line-height:1.5;flex:1}
.bmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.baction{font-size:12.5px;font-weight:700;color:var(--ok);text-decoration:none;margin-top:4px;min-height:24px;display:inline-flex;align-items:center}
.baction:hover{text-decoration:underline}
.bcard-off{background:var(--surface-2)}
.bunavail{font-size:13px;color:var(--dim);line-height:1.55;flex:1}

/* ---- company snapshot cards ---- */
.snaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1px;background:var(--line-2)}
.snap{background:var(--surface);padding:17px 18px;display:flex;flex-direction:column;gap:13px;min-width:0}
.snaphead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.snapname{font-size:16px;font-weight:800;text-decoration:none;line-height:1.25;overflow-wrap:anywhere}
.snapname:hover{color:var(--ok)}
.snaptick{font-size:11.5px;color:var(--dim);margin-top:3px}
.snapprice{font-size:17px;font-weight:700;text-align:right;white-space:nowrap}
.snapprice .chg{display:block;font-size:12px;margin-top:2px}
.snapstats{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13.5px;align-items:baseline}
.snapstats dt{color:var(--dim);font-size:12.5px}
.snapstats dd{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700}
.snapstats dd .sub{text-align:right;font-family:'Archivo',sans-serif;font-weight:400;max-width:22ch;margin-left:auto}
.snaphealth{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.snaphealth .hbar{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden}
.snaphealth .hbar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.snapacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.cta.small{font-size:12.5px;padding:8px 13px;min-height:44px}
.snapcompare[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* ---- About / profile ---- */
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px}
.facts dt{color:var(--dim);font-size:12.5px;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.facts dd{color:var(--ink);overflow-wrap:anywhere}
.plainlist{margin:0 0 0 19px}
.plainlist li{font-size:15.5px;color:var(--soft);line-height:1.65;margin-bottom:5px}
.hintnote{font-size:13px;color:var(--dim);line-height:1.6;margin-top:10px;max-width:70ch}

.execgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.execcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.execname{font-size:16px;font-weight:800}
.exectitle{font-size:13px;color:var(--ok);font-weight:700;margin-top:3px}
.execmeta{font-size:11.5px;color:var(--dim);font-family:'IBM Plex Mono',monospace;margin-top:5px}
.execbio{font-size:14px;color:var(--soft);line-height:1.6;margin-top:9px}
.execsrc{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}

/* ---- official links ---- */
.olinks{display:flex;gap:8px;flex-wrap:wrap}
.olink{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--radius);padding:10px 14px;text-decoration:none;font-size:13.5px;font-weight:700;
  min-height:44px;transition:border-color .12s,color .12s}
.olink:hover{border-color:var(--ok);color:var(--ok)}
.oglyph{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:3px;
  background:var(--surface-3);font-size:12px;font-weight:800;flex:none}
.olink:hover .oglyph{background:var(--ok);color:var(--brand-ink)}

@media(max-width:640px){
  body{font-size:16px}
  .brief,.snaps{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:2px 0}
  .facts dt{margin-top:9px}
  .snapstats{grid-template-columns:1fr}
  .snapstats dd{text-align:left}
  .snapstats dd .sub{margin-left:0;text-align:left}
  .olinks{flex-direction:column}
  .olink{width:100%}
}

/* ============================================================
   Visual storybook — schematic illustrations on company pages.
   Flat fills, thin strokes, theme variables. No gradients, no glow.
   ============================================================ */

.story .ph h3{font-size:13.5px}
.storyhead{display:flex;gap:16px;align-items:flex-start;padding:16px;border-bottom:1px solid var(--line-2)}
.ctile{flex:none;border-radius:7px}
.storylede{font-size:16px;color:var(--soft);line-height:1.6;max-width:68ch}
.storychips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}

.illus{margin:0}
.illus svg{width:100%;height:auto;display:block}
.illus figcaption{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:11px;max-width:74ch}

/* ---- interactive journey ---- */
.journey{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0}
.jstep{position:relative}
.jbtn{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;cursor:pointer;font-family:inherit;text-align:left;min-height:88px;
  transition:border-color .14s,background .14s}
.jbtn:hover{border-color:var(--ok);background:var(--surface-3)}
.jicon{width:26px;height:26px;display:inline-flex;color:var(--unknown)}
.jicon svg{width:100%;height:100%}
.jlabel{font-size:13px;font-weight:800;line-height:1.25}
.jstate{font-size:10.5px;font-family:'IBM Plex Mono',monospace;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.jstep-done .jbtn{border-color:var(--ok);background:var(--ok-bg)}
.jstep-done .jicon{color:var(--ok)}
.jstep-done .jstate{color:var(--ok)}
.jstep-pending .jbtn{border-style:dashed}
.jdetail{background:var(--surface-3);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);padding:11px 14px;font-size:12.5px;color:var(--soft);line-height:1.55}
.jdetail p{margin:0}
.jsrc{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
/* the arrow between steps only reads on wide layouts */
@media(min-width:900px){
  .jstep:not(:last-child)::after{content:"";position:absolute;right:-6px;top:44px;width:4px;height:1px;background:var(--line)}
}

/* ---- footprint dots ---- */
.footprint{display:flex;gap:22px;flex-wrap:wrap}
.fpcountry{min-width:96px}
.fphead{font-size:11.5px;font-family:'IBM Plex Mono',monospace;color:var(--dim);display:flex;gap:6px;align-items:center;margin-bottom:8px}
.fphead b{color:var(--ink);margin-left:auto}
.fpdots{display:flex;gap:5px;flex-wrap:wrap;max-width:120px}
.fpdot{width:13px;height:13px;border-radius:3px;background:var(--ok);opacity:.8;display:block}
.fpdot-unknown{background:none;border:1px dashed var(--unknown);opacity:1}

@media(max-width:640px){
  .storyhead{flex-direction:column;gap:12px}
  .journey{grid-template-columns:1fr 1fr}
  .footprint{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .jbtn{transition:none}
}

/* The global `svg{width:100%}` rule would stretch the identity tile to fill its
   flex row. Tiles are fixed-size marks, not responsive figures. */
.ctile{width:56px;height:56px;flex:none}
.storyhead .ctile{width:64px;height:64px}
.fpflag{font-size:14px}
.fphead{gap:8px}

/* ============================================================
   Application shell and route pages.
   Loaded last, so it wins over the older panel styling.

   The guiding change: fewer borders. Grouping comes from spacing,
   surface elevation and type — a border is reserved for something
   selected or genuinely important.
   ============================================================ */

:root {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --shell: 1280px;
  --appbar-h: 68px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--s3); }

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--brand-ink); padding: 12px 18px; font-weight: 800;
}
.skiplink:focus { left: 0; }

/* ---- app bar ---- */
.appbar {
  position: sticky; top: 0; z-index: 90;
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
}
html[data-theme="light"] .appbar { background: rgba(255, 255, 255, 0.92); }
.appbarin { display: flex; align-items: center; gap: var(--s3); min-height: var(--appbar-h); }
.brand { flex: none; display: flex; align-items: center; text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; }

.mainnav { display: flex; gap: 2px; margin-right: auto; }
.navlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 14.5px; font-weight: 700; color: var(--dim); text-decoration: none;
  border-radius: 6px; white-space: nowrap; transition: color .15s, background .15s;
}
.navlink:hover { color: var(--ink); background: var(--surface-2); }
.navlink.is-active { color: var(--ink); background: var(--surface-3); }
.navlink.is-primary { color: var(--brand); }
.navlink.is-primary.is-active { background: var(--brand); color: var(--brand-ink); }

.appbarutil { display: flex; align-items: center; gap: var(--s1); flex: none; }

/* market state pill: three states, never lying about which */
.mstate {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
  color: var(--soft); padding: 7px 11px; border-radius: 999px; background: var(--surface-2);
  white-space: nowrap;
}
.mstate i { width: 7px; height: 7px; border-radius: 50%; background: var(--unknown); flex: none; }
.mstate.is-open i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.mstate.is-closed i { background: var(--dim); }
.mstate.is-loading i { background: var(--warn); }
.mstate.is-off i { background: var(--bad); }

/* utility menu */
.umenu { position: relative; }
.umenu > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--dim); background: var(--surface-2);
}
.umenu > summary::-webkit-details-marker { display: none; }
.umenu > summary:hover { color: var(--ink); }
.umenupanel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 290px; z-index: 100;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--s2); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.umenugroup + .umenugroup { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line-2); }
.umenuhead {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 8px; font-family: 'IBM Plex Mono', monospace;
}
.umenurow { font-size: 12.5px; color: var(--soft); line-height: 1.7; font-family: 'IBM Plex Mono', monospace; }
.umenubtn {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--ink); font: inherit; font-size: 14px; padding: 10px 0; cursor: pointer;
  text-decoration: none; min-height: 44px;
}
.umenubtn:hover { color: var(--ok); }

/* mobile bottom navigation */
.bottomnav { display: none; }

/* ---- page header (internal routes) ---- */
.pagehead {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) 0 var(--s3); flex-wrap: wrap;
}
.pagehead h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; }
.pagelede { font-size: 17px; color: var(--soft); line-height: 1.6; max-width: 68ch; margin-top: 10px; }
.pagemeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pill-lite {
  font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
  color: var(--dim); background: var(--surface-2); padding: 5px 10px; border-radius: 999px;
  text-decoration: none;
}
a.pill-lite:hover { color: var(--ok); }

/* ---- blocks replace bordered panels ---- */
.block { padding: var(--s5) 0; border-top: 1px solid var(--line-2); }
.block:first-of-type { border-top: none; }
.blockhead { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.blockhead h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.blockhead h3 { font-size: 17px; font-weight: 800; }
.blockmeta { margin-left: auto; font-size: 12.5px; color: var(--dim); font-family: 'IBM Plex Mono', monospace; }
.blocklede { font-size: 16.5px; color: var(--soft); line-height: 1.65; max-width: 70ch; margin-bottom: var(--s3); }
.blocknote { font-size: 14px; color: var(--dim); line-height: 1.65; max-width: 74ch; margin-top: var(--s2); }
.blockacts { margin-top: var(--s3); }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); border-bottom: 1px solid var(--line-2); }
#flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.heroin {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr 1fr;
  gap: var(--s5); padding: var(--s6) var(--s3);
}
.herocopy h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1.04; color: #fff; }
.herocopy h1 u { text-decoration: none; color: var(--brand); }
.herolede { font-size: 17.5px; color: #A6A6B0; line-height: 1.6; max-width: 54ch; margin-top: var(--s2); }
.heroacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s3); }

.proof {
  background: rgba(20, 20, 24, .78); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--s3); backdrop-filter: blur(6px); align-self: start;
}
.proofkicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--brand); font-family: 'IBM Plex Mono', monospace;
}
.proofco { font-size: 14px; font-weight: 700; margin-top: 12px; color: #fff; }
.proofco b { font-family: 'IBM Plex Mono', monospace; color: var(--brand); margin-right: 6px; }
.prooffig {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em; margin: 10px 0; color: #fff;
}
.proofsent { font-size: 14.5px; color: #A6A6B0; line-height: 1.55; }
.proofmeta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.prooflink { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
.prooflink:hover { text-decoration: underline; }

/* ---- filters and form fields ---- */
.filterbar {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-2);
}
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.fld label { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.fldunit { color: var(--faint); font-weight: 500; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.fld input, .fld select {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; padding: 11px 12px;
  border-radius: 8px; min-height: 44px; width: 100%;
}
.fld input:focus, .fld select:focus { border-color: var(--ok); outline: 2px solid var(--brand); outline-offset: 1px; }
.filtercount { margin-left: auto; font-size: 13px; color: var(--dim); font-family: 'IBM Plex Mono', monospace; }

/* ---- mode switcher ---- */
.modebar {
  display: flex; gap: 4px; padding: 4px; background: var(--surface-2);
  border-radius: 10px; margin: var(--s3) 0; overflow-x: auto; scrollbar-width: none;
}
.modebar::-webkit-scrollbar { display: none; }
.mode {
  flex: 1; min-width: 150px; border: none; background: none; color: var(--dim);
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 11px 14px;
  border-radius: 7px; cursor: pointer; white-space: nowrap; min-height: 44px;
}
.mode:hover:not(:disabled) { color: var(--ink); }
.mode.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mode:disabled, .mode.is-disabled { opacity: .4; cursor: not-allowed; }

/* ---- compare ---- */
.cmpbar { padding: var(--s3) 0; border-bottom: 1px solid var(--line-2); }
.presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--s2); }
.presetlabel { font-size: 12.5px; color: var(--dim); font-family: 'IBM Plex Mono', monospace; }
.preset {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700; padding: 9px 13px;
  border-radius: 999px; cursor: pointer; min-height: 44px;
}
.preset:hover { border-color: var(--ok); color: var(--ok); }
.cmptray { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s2); min-height: 40px; align-items: center; }
.traychip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface-3);
  border-radius: 999px; padding: 8px 8px 8px 14px; font-size: 13.5px;
}
.traychip b { font-family: 'IBM Plex Mono', monospace; color: var(--ok); }
.traychip button {
  border: none; background: var(--surface); color: var(--dim); width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
}
.traychip button:hover { color: var(--bad); }
.trayempty { font-size: 13.5px; color: var(--dim); }
.cmppicker > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ok);
  list-style: none; min-height: 44px; display: inline-flex; align-items: center;
}
.cmppicker > summary::-webkit-details-marker { display: none; }
.cmppickerpanel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; margin-top: var(--s2);
}

.cmpgrid { margin-top: var(--s3); }
.cmphead, .cmprow { display: grid; grid-template-columns: 190px repeat(var(--cols), 1fr); gap: var(--s2); }
.cmphead { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cmpco a { text-decoration: none; }
.cmpco b { font-family: 'IBM Plex Mono', monospace; font-size: 17px; color: var(--ok); }
.cmpconame { display: block; font-size: 13px; color: var(--soft); line-height: 1.3; margin-top: 3px; overflow-wrap: anywhere; }
.cmppx { display: block; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.cmprow { padding: 14px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.cmplabel { font-size: 13.5px; color: var(--dim); }
.cmpcell { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; }
.cmpcats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.cmpcatco h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.cmpcatco h3 span { font-weight: 400; color: var(--dim); font-size: 13px; }
.cmpcatco ul { list-style: none; }
.cmpcatco li { padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }

/* ---- catalysts timeline ---- */
.catgroup { margin-bottom: var(--s5); }
.catgroup h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); padding-bottom: 10px; border-bottom: 1px solid var(--line-2);
  margin-bottom: var(--s2); display: flex; gap: 10px; align-items: center;
  font-family: 'IBM Plex Mono', monospace;
}
.catgroup h2 span { color: var(--faint); }
.catrow {
  display: grid; grid-template-columns: 172px 1fr; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-2);
}
.catwhenbox { border-left: 3px solid var(--line); padding-left: 14px; }
.catrow-ok .catwhenbox { border-left-color: var(--ok); }
.catrow-warn .catwhenbox { border-left-color: var(--warn); }
.catrow-unknown .catwhenbox { border-left-color: var(--unknown); }
.catwhen { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; }
.catcert { font-size: 11.5px; color: var(--dim); margin-top: 4px; line-height: 1.4; }
.catcount { font-size: 12.5px; color: var(--ok); margin-top: 6px; font-family: 'IBM Plex Mono', monospace; }
.catbody h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.catco { font-size: 13px; color: var(--dim); margin-bottom: 10px; }
.catco b { font-family: 'IBM Plex Mono', monospace; color: var(--ok); }
.catbody p { font-size: 15px; color: var(--soft); line-height: 1.6; max-width: 72ch; }
.catmetric { font-size: 13px; color: var(--dim); margin-top: 10px; }
.catsrc { margin-top: 12px; }

/* ---- Edge Lab ---- */
.labtop {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s2); padding: var(--s3); background: var(--surface-2); border-radius: 12px;
}
.labanswer { margin: var(--s3) 0; }
.answercard {
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
  border: 1px solid var(--line); border-radius: 14px; padding: var(--s4);
}
.answerkicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim); font-family: 'IBM Plex Mono', monospace;
}
.answercard h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.025em; margin: 12px 0; line-height: 1.2; }
.answercard h3 b { color: var(--brand); }
.verdict {
  display: inline-block; font-size: 12.5px; font-weight: 800; padding: 6px 12px;
  border-radius: 999px; margin-bottom: var(--s2);
}
.verdict-ok { background: var(--ok-bg); color: var(--ok); }
.verdict-warn { background: var(--warn-bg); color: var(--warn); }
.verdict-bad { background: var(--bad-bg); color: var(--bad); }
.answerfacts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14.5px; margin-top: var(--s2); }
.answerfacts dt { color: var(--dim); font-size: 13px; }
.answerfacts dd { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.answernote { font-size: 13.5px; color: var(--dim); line-height: 1.65; margin-top: var(--s2); max-width: 74ch; }
.answercard-ask, .answercard-none { border-style: dashed; }

.advanced { margin: var(--s3) 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.advanced > summary {
  cursor: pointer; padding: var(--s2) var(--s3); background: var(--surface-2);
  display: flex; gap: 12px; align-items: baseline; list-style: none; min-height: 52px;
  font-weight: 700; font-size: 15px;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸"; color: var(--dim); }
.advanced[open] > summary::before { content: "▾"; }
.advsub { font-size: 13px; color: var(--dim); font-weight: 400; }
.advbody { padding: var(--s3); }
.assumpgroup + .assumpgroup { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.assumpgroup h4 { font-size: 13px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace; }
.assumprow { display: grid; grid-template-columns: 180px 130px 1fr; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.assumplabel { font-size: 14px; font-weight: 700; }
.assumpvalue { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ok); }
.assumpnote { font-size: 13px; color: var(--dim); line-height: 1.55; }
.labbalance { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s2); }

.qchart { display: flex; gap: 4px; align-items: flex-end; height: 180px; }
/* min-width:0 or the quarter label sets a min-content floor on every bar and the
   chart pushes the page sideways rather than compressing. */
.qbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.qbar i { display: block; width: 100%; background: var(--ok); border-radius: 3px 3px 0 0; opacity: .8; min-height: 2px; }
.qbar span {
  font-size: 10px; color: var(--dim); font-family: 'IBM Plex Mono', monospace;
  max-width: 100%; overflow: hidden; white-space: nowrap;
}
.stressrow { display: flex; gap: 10px; flex-wrap: wrap; }
.stresschip {
  display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-start;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px;
  padding: 12px 16px; cursor: pointer; font: inherit; min-height: 44px;
}
.stresschip:hover { border-color: var(--warn); }
.stresslabel { font-size: 13px; font-weight: 700; }
.stressdelta { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; color: var(--ok); }
.stressdelta.is-down { color: var(--bad); }

/* provenance of each modelled date */
.basis {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px;
  border-radius: 999px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace;
}
.basis-ok { background: var(--ok-bg); color: var(--ok); }
.basis-warn { background: var(--warn-bg); color: var(--warn); }
.basis-unknown { background: var(--unknown-bg); color: var(--unknown); }
th.prov, td.prov { text-align: left; font-family: 'Archivo', sans-serif; font-weight: 400; }
.basisnote { display: block; font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 5px; max-width: 46ch; }
.warnnote {
  background: var(--warn-bg); border-left: 3px solid var(--warn);
  padding: 12px 16px; border-radius: 0 8px 8px 0; color: var(--soft); max-width: none;
}

.fldhelp { font-size: 12px; color: var(--dim); line-height: 1.45; }
.fld input[type="range"] { padding: 0; height: 34px; min-height: 34px; background: none; border: none; accent-color: var(--brand); }

.covgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s2); }
.covcard { padding: var(--s3); border-radius: 12px; background: var(--surface-2); }
.covcard.cov-off { opacity: .82; }
.covhead { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.covhead b { font-family: 'IBM Plex Mono', monospace; }
.covname { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.covcard p { font-size: 13.5px; color: var(--dim); line-height: 1.6; }

.oddsrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s2); align-items: end; margin-bottom: var(--s3); }
.oddshead { margin: var(--s3) 0; }
.grid2 { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1.3fr 1fr; } }

/* ---- research progressive disclosure ---- */
.rsgrid { display: flex; flex-direction: column; }
.rsrow { display: grid; grid-template-columns: 260px 160px 1fr; gap: var(--s3); padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.rslabel { font-size: 15px; font-weight: 700; }
.rsvalue { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; color: var(--ok); }
.rsnote { font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.explore { margin: var(--s4) 0; }
.explore > summary { cursor: pointer; list-style: none; padding: var(--s3); background: var(--surface-2); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.explore > summary::-webkit-details-marker { display: none; }
.explorehead { font-size: 19px; font-weight: 800; }
.exploresub { font-size: 14px; color: var(--dim); }
.explorebody { padding-top: var(--s2); }
.gloss { margin-bottom: 10px; }
.gloss > summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15px; min-height: 44px; }
.tabletools { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }

/* ---- company page: snapshot first, then the evidence ---- */
.crumb { padding: var(--s3) 0 0; font-size: 13px; color: var(--dim); display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--ok); }

.csnap { padding: var(--s3) 0 var(--s4); }
.csnaphead { display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; }
.csnaphead h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; }
.csnapsub { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--dim); margin-top: 8px; }
.csnapsub .mono { color: var(--ok); font-weight: 700; }
.csnappx { font-size: 14px; }
.csnapstate { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.csnapverified { font-size: 12px; color: var(--dim); font-family: 'IBM Plex Mono', monospace; }
.csnaplede { font-size: 17px; color: var(--soft); line-height: 1.6; max-width: 72ch; margin-top: var(--s2); }

.csnapfigs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--line-2); border-radius: 12px; overflow: hidden; margin-top: var(--s3);
}
.csnapfig { background: var(--surface); padding: var(--s3); }
.csnapfig dt { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.csnapfig dd {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin: 8px 0 6px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.csnapfig dd .nd { font-size: 17px; }
.csnapfig p { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.csnapacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s3); }
.csnapwhy { font-size: 13.5px; color: var(--dim); line-height: 1.6; margin-top: 12px; max-width: 70ch; }
.cta.disabled { opacity: .5; cursor: not-allowed; }

/* sticky in-page navigation, offset below the app bar */
.secnav {
  position: sticky; top: var(--appbar-h); z-index: 40;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: var(--bg); border-bottom: 1px solid var(--line-2); margin-bottom: var(--s2);
}
.secnav::-webkit-scrollbar { display: none; }
.secnav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  font-size: 13.5px; font-weight: 700; color: var(--dim); text-decoration: none;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.secnav a:hover { color: var(--ink); }
.secnav a.is-active { color: var(--ok); border-bottom-color: var(--ok); }
/* anchors must clear both sticky bars when jumped to */
[id="story"], [id="record"], [id="targets"], [id="projects"],
[id="contracts"], [id="changes"], [id="catalysts"], [id="sources"] {
  scroll-margin-top: calc(var(--appbar-h) + 56px);
}

/* ---- watch-only cards ---- */
.watchgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s2); }
.watchcard { display: block; padding: var(--s3); background: var(--surface-2); border-radius: 12px; text-decoration: none; }
.watchcard:hover { background: var(--surface-3); }
.watchtick { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ok); font-weight: 800; }
.watchname { font-size: 16px; font-weight: 800; margin: 4px 0 8px; }
.watchcard p { font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.watchgo { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ok); }

/* ---- your own call ---- */
.callform { margin-top: var(--s2); }
.callform .frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2); }
.callform .field-wide { margin-top: var(--s2); }
.callform textarea {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 8px; width: 100%; resize: vertical;
}
.callform textarea:focus { border-color: var(--ok); outline: 2px solid var(--brand); outline-offset: 1px; }
.callacts { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); flex-wrap: wrap; }
.callsaved { font-size: 13.5px; color: var(--ok); }

.calllist { margin-top: var(--s3); display: grid; gap: 10px; }
.callempty { font-size: 14px; color: var(--dim); }
.callcard { background: var(--surface-2); border-radius: 10px; padding: var(--s2) var(--s3); }
.callcard.call-due { border-left: 3px solid var(--warn); }
.callmeta { font-size: 14px; color: var(--soft); }
.callmeta b { color: var(--ink); }
.callwhy { font-size: 14px; color: var(--dim); line-height: 1.6; margin-top: 8px; max-width: 70ch; }
.callfoot { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: 12px; }
.callstate { font-size: 12.5px; color: var(--dim); }
.callbtns { margin-left: auto; display: flex; gap: 6px; }
.callmark, .calldel {
  border: 1px solid var(--line); background: none; color: var(--dim);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 12px;
  border-radius: 6px; cursor: pointer; min-height: 44px;
}
.callmark:hover { border-color: var(--ok); color: var(--ok); }
.calldel:hover { border-color: var(--bad); color: var(--bad); }
.callresult { font-size: 13px; font-weight: 700; margin-top: 10px; padding: 8px 12px; border-radius: 6px; }
.callresult.call-right { background: var(--ok-bg); color: var(--ok); }
.callresult.call-wrong { background: var(--bad-bg); color: var(--bad); }

/* ---- states ---- */
.emptystate { padding: var(--s5) var(--s3); text-align: center; background: var(--surface-2); border-radius: 12px; }
.emptystate h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.emptystate p { font-size: 15px; color: var(--dim); max-width: 56ch; margin: 0 auto; line-height: 1.6; }

/* the coverage bar restored to the KPI cards */
.covbar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-top: 12px; }
.covbar i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }

/* price cells */
.pxval { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.pxchg { display: block; font-size: 12.5px; margin-top: 2px; font-family: 'IBM Plex Mono', monospace; }
.pxqual { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; font-family: 'IBM Plex Mono', monospace; }

/* soften the legacy bordered panels inside the new blocks */
.blockbody > .panel, .explorebody > .panel { border: none; background: none; margin: 0; }
.blockbody > .panel > .ph, .explorebody > .panel > .ph { padding-left: 0; padding-right: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .heroin { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s5) var(--s3); }
  .mainnav { display: none; }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(11, 11, 12, .96); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    backdrop-filter: blur(10px);
  }
  html[data-theme="light"] .bottomnav { background: rgba(255,255,255,.96); }
  .bnav {
    flex: 1; display: flex; align-items: center; justify-content: center;
    min-height: 56px; font-size: 12px; font-weight: 700; color: var(--dim); text-decoration: none;
  }
  .bnav.is-active { color: var(--brand); }
  body { padding-bottom: 60px; }
}

@media (max-width: 760px) {
  .shell { padding: 0 var(--s2); }
  .pagehead { padding: var(--s3) 0 var(--s2); }
  .pagehead h1 { font-size: 27px; }
  .pagelede { font-size: 16px; }
  .block { padding: var(--s4) 0; }
  .blockhead h2 { font-size: 19px; }
  .cmphead, .cmprow { grid-template-columns: 1fr; gap: 6px; }
  .cmplabel { color: var(--dim); font-size: 12.5px; }
  .cmprow { padding: 14px 0; }
  .catrow { grid-template-columns: 1fr; gap: 12px; }
  .catwhenbox { border-left: none; border-top: 3px solid var(--line); padding-left: 0; padding-top: 10px; }
  .rsrow { grid-template-columns: 1fr; gap: 4px; }
  .assumprow { grid-template-columns: 1fr; gap: 4px; }
  .brand img { height: 26px; }
  .appbarin { gap: var(--s2); }
  .qchart { height: 130px; }
  .csnapstate { margin-left: 0; align-items: flex-start; }
  .csnapfig dd { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .navlink, .mode, .preset, .watchcard { transition: none; }
}

/* ============================================================
   Mission Control layer.

   Loaded last, after shell.css. This layer adds the Mission
   Control surfaces, the click-glow interaction primitive and the
   site/signal components. It reuses the existing token names
   (--brand, --ink, --surface-*) rather than introducing a second
   theme architecture; only the values that are genuinely new —
   panel radii, glow shadows, the raised panel surface — are
   declared here.

   Lime is reserved for progress, selection and action. It is not
   a border colour.
   ============================================================ */

:root {
  --m-panel: #0E0E10;
  --m-panel-2: #131316;
  --m-panel-raised: #17171B;
  --m-radius: 14px;
  --m-radius-sm: 10px;
  --m-shadow: 0 18px 55px rgba(0, 0, 0, .34);
  --m-glow-hover: 0 0 0 1px rgba(214, 255, 0, .28), 0 0 18px rgba(214, 255, 0, .10);
  --m-glow-press: 0 0 0 1px rgba(214, 255, 0, .95), 0 0 14px rgba(214, 255, 0, .60), 0 0 38px rgba(214, 255, 0, .24);
  --m-lime-soft: rgba(214, 255, 0, .14);
  --m-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="light"] {
  --m-panel: #FFFFFF;
  --m-panel-2: #FAFAF7;
  --m-panel-raised: #F2F2EE;
  --m-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .06);
  --m-glow-hover: 0 0 0 1px rgba(120, 140, 0, .30), 0 0 14px rgba(120, 140, 0, .08);
  --m-glow-press: 0 0 0 2px rgba(90, 110, 0, .85), 0 0 12px rgba(120, 140, 0, .35);
  --m-lime-soft: rgba(150, 175, 0, .16);
}

/* Visually hidden, still announced. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   1. Click-glow — one primitive, applied everywhere
   ============================================================

   .press is the whole interaction system. It works on links,
   buttons, rows, cards, tabs, hotspots and progress nodes alike.

   Layout shift is impossible by construction: the glow is drawn
   entirely by box-shadow (which does not participate in layout)
   and the press uses a transform. Neither reflows a neighbour.

   Navigation is never delayed for the animation — .is-pressed is
   applied and removed on a timer that the browser is free to
   abandon the moment the page changes. */

.press {
  position: relative;
  border-radius: var(--m-radius-sm);
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease, transform .34s cubic-bezier(.2, .8, .3, 1);
  -webkit-tap-highlight-color: transparent;
}

.press:hover {
  box-shadow: var(--m-glow-hover);
}

/* Keyboard focus is always obvious, and always distinguishable
   from hover — a focus ring, not a bloom. */
.press:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: var(--m-glow-hover);
}

/* The pressed state. Applied by the runtime for pointer, Enter and
   Space alike so all three feel identical. */
.press.is-pressed {
  transform: scale(.985);
  box-shadow: var(--m-glow-press);
}

/* A selected control keeps a restrained inner border, never a
   permanent bloom. */
.press.is-selected,
.press[aria-selected="true"],
.press[aria-current="page"] {
  box-shadow: inset 0 0 0 1px rgba(214, 255, 0, .55);
}

/* A control that cannot act says so and does not look pressable. */
.press[disabled],
.press[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .press { transition: box-shadow .01ms, border-color .01ms; }
  /* No scale and no travelling highlight, but the pressed state
     stays high-contrast and static so the feedback is not lost. */
  .press.is-pressed {
    transform: none;
    box-shadow: 0 0 0 2px var(--brand);
  }
}

/* ============================================================
   2. Panels
   ============================================================ */

.mpanel {
  background: var(--m-panel);
  border: 1px solid var(--line-2);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: var(--s3);
}
.mpanel + .mpanel { margin-top: var(--s3); }
.mpanel.flush { padding: 0; overflow: hidden; }

.mhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
.mkicker {
  font-family: var(--m-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
}
.mkicker.dim { color: var(--dim); }
.mhead h2, .mhead h3 {
  font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -.01em;
}
.mnote { color: var(--dim); font-size: 13px; margin: var(--s1) 0 0; }

/* ============================================================
   3. Segmented meter — the ▮▮▮▮▯ bar
   ============================================================
   Always paired with a text label. Never colour alone. */

.meter { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.meter i {
  display: block; width: 6px; height: 14px; border-radius: 1px;
  background: var(--surface-3);
}
.meter i.on { background: var(--brand); }
.meter.warn i.on { background: var(--warn); }
.meter.bad i.on { background: var(--bad); }
.meterlab {
  font-family: var(--m-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
}

/* ============================================================
   4. Delivery path — the horizontal ladder
   ============================================================ */

.pathwrap { overflow-x: auto; padding-bottom: var(--s1); }
.path {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr);
  list-style: none; margin: 0; padding: 0; min-width: 640px;
}
.pstep { position: relative; text-align: center; padding: 0 4px; }

/* the connecting rail, drawn behind the node */
.pstep::before {
  content: ''; position: absolute; top: 17px; left: -50%; width: 100%;
  height: 2px; background: var(--surface-3);
}
.pstep:first-child::before { display: none; }
.pstep.done::before { background: var(--brand); }

.pnode {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 auto var(--s1);
  border-radius: 50%; border: 2px solid var(--surface-3);
  background: var(--bg); color: var(--dim); font-size: 15px;
}
.pstep.done .pnode { border-color: var(--brand); color: var(--brand); }
.pstep.now .pnode {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 4px var(--m-lime-soft), 0 0 16px rgba(214, 255, 0, .35);
}
.pstep.nd .pnode { border-style: dashed; }

.plabel {
  display: block; font-family: var(--m-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soft); line-height: 1.3;
}
.pstep.done .plabel { color: var(--ink); }
.pdate, .pstatus {
  display: block; font-size: 11px; color: var(--dim); margin-top: 3px;
}
.pstep.nd .pstatus { font-style: italic; }

/* the step is a real button when it has evidence to show */
button.pstep {
  border: 0; background: none; font: inherit; cursor: pointer;
  padding-top: var(--s1); padding-bottom: var(--s1);
}
button.pstep:disabled { cursor: default; opacity: 1; }

/* ============================================================
   5. Site directory and site page
   ============================================================ */

.sitegrid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.sitecard {
  display: flex; flex-direction: column; gap: var(--s1);
  background: var(--m-panel); border: 1px solid var(--line-2);
  border-radius: var(--m-radius); padding: var(--s2);
  text-decoration: none; color: inherit;
}
.sitecard[hidden] { display: none; }
.sitecardtop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s1); }
.sitecardco {
  font-family: var(--m-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: var(--dim);
}
.sitecardname { font-size: 16px; font-weight: 800; line-height: 1.25; margin: 2px 0 0; }
.sitecardloc { font-size: 12.5px; color: var(--dim); }
.sitecardcap {
  font-family: var(--m-mono); font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink);
}
.sitecardcap .nd { font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.sitecardfoot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s1);
  margin-top: auto; padding-top: var(--s1); border-top: 1px solid var(--line-2);
}
.sitecardstage {
  font-family: var(--m-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
.sitecardstage.none { color: var(--dim); }

/* site page */
.siteid {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s3); background: var(--m-panel);
  border: 1px solid var(--line-2); border-radius: var(--m-radius);
}
.siteticker {
  display: grid; place-items: center; width: 84px; height: 84px; flex: none;
  border: 1px solid var(--line); border-radius: var(--m-radius-sm);
  background: var(--m-panel-2);
  font-family: var(--m-mono); font-size: 17px; font-weight: 700; color: var(--brand);
}
.siteidmain { flex: 1 1 260px; min-width: 0; }
.siteidmain h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.02; margin: 0; letter-spacing: -.02em; }
.siteidsub {
  font-family: var(--m-mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin: 6px 0 0;
}
.sitefacts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
.sitefact { min-width: 92px; }
.sitefact.wide { min-width: 200px; }
.conflevel {
  font-family: var(--m-mono); font-size: 20px; font-weight: 700; color: var(--brand);
  letter-spacing: .02em; margin-right: 8px;
}
.conflevel.medium { color: var(--warn); }
.conflevel.low { color: var(--bad); }
.sitefactl { display: block; max-width: 30ch; line-height: 1.4; }
.sitefactv {
  font-family: var(--m-mono); font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; display: block;
}
.sitefactv .nd { font-size: 13px; font-weight: 500; color: var(--dim); }
.sitefactl {
  font-family: var(--m-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}

.sitecols { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .sitecols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* the campus visual */
.campus {
  position: relative; border-radius: var(--m-radius); overflow: hidden;
  background: #07070A; border: 1px solid var(--line-2);
}
.campusimg { display: block; width: 100%; height: auto; }
.campusnote {
  position: absolute; left: var(--s2); bottom: var(--s2); right: var(--s2);
  font-size: 11.5px; color: var(--soft); background: rgba(0, 0, 0, .62);
  border-radius: 6px; padding: 6px 9px; backdrop-filter: blur(4px);
}

/* status ladder */
.ladder { list-style: none; margin: 0; padding: 0; }
.lstep { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s1) 0; position: relative; }
.lstep::before {
  content: ''; position: absolute; left: 15px; top: 34px; bottom: -6px; width: 2px;
  background: var(--surface-3);
}
.lstep:last-child::before { display: none; }
.lstep.done::before { background: var(--brand); }
.lnode {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--surface-3); background: var(--bg);
  color: var(--dim); font-size: 14px; z-index: 1;
}
.lstep.done .lnode { border-color: var(--brand); color: var(--brand); }
.lstep.now .lnode { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--m-lime-soft); }
.lbody { min-width: 0; flex: 1; }
.llabel {
  font-family: var(--m-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.lstep.nd .llabel { color: var(--dim); }
.lmeta { font-size: 12.5px; color: var(--dim); margin-top: 2px; }

/* dependencies */
.deps { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dep { display: flex; gap: 9px; align-items: flex-start; }
.depglyph { font-size: 15px; line-height: 1.2; flex: none; }
.deplabel { font-size: 13px; font-weight: 700; display: block; }
.depstatus { font-size: 12px; color: var(--dim); }
.dep.ok .depglyph, .dep.ok .depstatus { color: var(--ok); }
.dep.warn .depglyph, .dep.warn .depstatus { color: var(--warn); }
.dep.unknown .depglyph { color: var(--unknown); }

/* replay */
.replay { display: flex; gap: 0; align-items: flex-start; overflow-x: auto; padding-bottom: var(--s1); }
.rstep { flex: 1 0 96px; text-align: center; position: relative; }
.rstep::before {
  content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--brand);
}
.rstep:first-child::before { display: none; }
.rdot {
  position: relative; z-index: 1; width: 26px; height: 26px; margin: 0 auto 6px;
  border-radius: 50%; border: 2px solid var(--brand); background: var(--bg);
  display: grid; place-items: center; font-size: 12px; color: var(--brand);
}
.rlabel {
  display: block; font-family: var(--m-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
}
.rdate { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }

/* ============================================================
   6. Signals — the Intelligence feed
   ============================================================ */

.sigfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--soft);
  font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.chip .n { font-family: var(--m-mono); font-size: 11.5px; color: var(--dim); }
.chip[aria-pressed="true"], .chip.is-selected {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.chip[aria-pressed="true"] .n, .chip.is-selected .n { color: var(--brand-ink); }

.siglist { list-style: none; margin: 0; padding: 0; }
.sig {
  display: grid; gap: var(--s2); align-items: start; padding: var(--s2) 0;
  border-top: 1px solid var(--line-2);
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.sig:first-child { border-top: 0; }
.sig[hidden] { display: none; }
.sigglyph {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); font-size: 14px; color: var(--dim);
}
.sig.ok .sigglyph { border-color: rgba(214, 255, 0, .5); color: var(--brand); }
.sig.bad .sigglyph { border-color: rgba(209, 69, 69, .5); color: var(--bad); }
.sig.warn .sigglyph { border-color: rgba(196, 132, 0, .5); color: var(--warn); }
.sigmain { min-width: 0; }
.sigtop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 3px; }
.sigco {
  font-family: var(--m-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--dim); text-decoration: none;
}
.sigco:hover { color: var(--brand); }
.sigcat {
  font-family: var(--m-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 3px;
  background: var(--surface-3); color: var(--soft);
}
.sigsum { font-size: 14.5px; font-weight: 600; line-height: 1.4; margin: 0; }
.sigimp { font-size: 13px; color: var(--dim); line-height: 1.5; margin: 5px 0 0; }
.sigside { text-align: right; white-space: nowrap; }
.sigdate { font-family: var(--m-mono); font-size: 11.5px; color: var(--dim); display: block; }
.sigdelta {
  font-family: var(--m-mono); font-size: 14px; font-weight: 700; display: block; margin-top: 3px;
}
.sigdelta.up { color: var(--brand); }
.sigdelta.down { color: var(--bad); }

/* reviewed state */
.sig.is-reviewed { opacity: .58; }
.sigread {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--dim);
  border-radius: 6px; min-height: 32px; padding: 0 10px; font-size: 12px; font-weight: 700;
  cursor: pointer; margin-top: 6px;
}
.sig.is-reviewed .sigread { border-color: rgba(214, 255, 0, .45); color: var(--brand); }

.caughtup {
  text-align: center; padding: var(--s5) var(--s3); color: var(--dim);
}
.caughtup .cuglyph { font-size: 30px; color: var(--brand); display: block; margin-bottom: var(--s1); }
.caughtup h3 { font-size: 17px; margin: 0 0 6px; color: var(--ink); }

@media (max-width: 640px) {
  .sig { grid-template-columns: 28px minmax(0, 1fr); }
  .sigside { grid-column: 2; text-align: left; }
}

/* ============================================================
   7. Live / Focus
   ============================================================ */

.modetoggle {
  display: inline-flex; padding: 3px; gap: 3px; flex: none;
  background: var(--surface-2); border-radius: 8px; border: 1px solid var(--line-2);
}
.modebtn {
  min-height: 32px; padding: 0 13px; border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: var(--dim);
  font-family: var(--m-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.modebtn[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }

/* ---- Focus mode ----
   Focus strips supporting context so the numbers stand alone. Two rules bound
   what it is allowed to remove:

     1. It never hides a caveat attached to a figure that is still on screen.
        A basis, a confidence chip, a "not counted in any total" note and a
        source link all stay — hiding them would make the remaining number look
        more certain than it is, which is the opposite of the point.
     2. It never closes a panel the reader opened, changes a filter or moves the
        scroll position. The investigation survives the switch. */
html[data-mode="focus"] .secondary { display: none; }

/* Explanatory sections, keys and long reference tables step back. */
html[data-mode="focus"] .keys,
html[data-mode="focus"] .scrollnote,
html[data-mode="focus"] .footgrid,
html[data-mode="focus"] .footmark p,
html[data-mode="focus"] .newsdisclaimer + .filterbar .fld:last-of-type { display: none; }

/* Tighter rhythm, so more of the record fits on one screen. */
html[data-mode="focus"] .block { margin-bottom: var(--s3); }
html[data-mode="focus"] .mpanel { padding: var(--s2); }
html[data-mode="focus"] .blocklede { display: none; }

/* The map keeps its pins and its disclaimer but loses the artwork's pull. */
html[data-mode="focus"] .mapimg { opacity: .45; }

/* A mode that changes the page has to say it is on, and how to leave. */
.focusbar {
  display: none; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-family: var(--m-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  background: var(--m-lime-soft); border-bottom: 1px solid rgba(214, 255, 0, .28);
  padding: 8px var(--s3);
}
html[data-mode="focus"] .focusbar { display: flex; }
.focusbar .focusnote {
  font-family: inherit; font-size: 11px; letter-spacing: .06em;
  color: var(--soft); text-transform: none; font-weight: 500;
}
.focusbar button {
  margin-left: auto; background: none; border: 1px solid rgba(214, 255, 0, .5);
  color: var(--brand); border-radius: 6px; min-height: 32px; padding: 0 12px;
  font: inherit; cursor: pointer;
}

/* ============================================================
   8. Command palette
   ============================================================ */

.pal {
  border: 0; padding: 0; background: none;
  width: min(620px, calc(100vw - 32px));
  border-radius: var(--m-radius);
}
.pal::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
.palin {
  background: var(--m-panel); border: 1px solid var(--line);
  border-radius: var(--m-radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.palfield { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-2); }
.palfield input {
  flex: 1; background: none; border: 0; color: var(--ink); font-size: 16px; outline: none;
  min-width: 0;
}
.palfield input::placeholder { color: var(--faint); }
.palresults { list-style: none; margin: 0; padding: var(--s1); max-height: min(52vh, 420px); overflow-y: auto; }
.palitem {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
}
.palitem:hover, .palitem.is-active { background: var(--surface-2); }
.palkind {
  font-family: var(--m-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); flex: none; width: 62px;
}
.palname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.palhint { font-size: 12px; color: var(--dim); flex: none; }
.palempty { padding: var(--s3); text-align: center; color: var(--dim); font-size: 14px; }

.paltrigger {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px;
  padding: 0 10px 0 12px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--dim);
  font-size: 13px; white-space: nowrap;
}
.paltrigger:hover { color: var(--soft); }
.palkbd {
  font-family: var(--m-mono); font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; color: var(--dim);
}
@media (max-width: 900px) { .paltrigger .paltxt { display: none; } }

/* ============================================================
   8b. News — a wire feed, visibly not a T2C record
   ============================================================ */

.newsdisclaimer {
  font-size: 13.5px; line-height: 1.6; color: var(--soft);
  border-left: 3px solid var(--warn); background: var(--warn-bg);
  padding: var(--s2); border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
  margin: 0 0 var(--s3); max-width: 78ch;
}

.newsgrid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.newscard {
  display: flex; flex-direction: column;
  background: var(--m-panel); border: 1px solid var(--line-2);
  border-radius: var(--m-radius); overflow: hidden;
}
.newsimg {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  background: var(--surface-2);
}
/* A publisher mark, not artwork for the story, so it gets a short credit band
   rather than a full photo slot. Two in five stories here are Yahoo, and a
   full-height white tile repeated down a dark page shouts louder than the
   placeholder it replaced. The asset is letterboxed to the same 16:5 at build
   time, so it fills the band exactly without cropping the logo. */
.newsimg.is-brand {
  aspect-ratio: 16 / 5;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.newsbody { padding: var(--s2); display: flex; flex-direction: column; gap: 8px; }
.newsmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.newstick {
  font-family: var(--m-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 3px; background: var(--m-lime-soft); color: var(--brand);
}
.newssrc {
  font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em;
}
.newsage { font-family: var(--m-mono); font-size: 11px; color: var(--faint); margin-left: auto; }
.newshead { font-size: 14.5px; line-height: 1.4; font-weight: 700; margin: 0; }
.newshead a { color: var(--ink); text-decoration: none; }
.newshead a:hover { color: var(--brand); }
/* An outbound link is marked, so a reader knows they are leaving T2C. */
.newshead a::after { content: ' ↗'; color: var(--dim); font-size: 12px; }

/* ============================================================
   8c. Estimates — the weakest claim on the site, and it looks it
   ============================================================
   Amber, never lime. Lime is reserved for evidenced progress; an estimate is
   T2C's arithmetic over someone else's figures and must not borrow the colour
   that means "confirmed". */

html[data-estimates="off"] [data-estimate] { display: none !important; }

.est {
  display: grid; gap: 4px 10px; align-items: baseline;
  grid-template-columns: auto auto 1fr;
  padding: var(--s2); margin-top: var(--s2);
  border-left: 3px solid var(--warn); background: var(--warn-bg);
  border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
}
.estval {
  font-family: var(--m-mono); font-size: 21px; font-weight: 700; color: var(--warn);
  letter-spacing: -.02em;
}
.esttag {
  font-family: var(--m-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 3px; padding: 2px 6px;
}
.estlabel { font-size: 13px; font-weight: 700; color: var(--soft); }
.estderiv {
  grid-column: 1 / -1; font-family: var(--m-mono); font-size: 11.5px; color: var(--soft);
}
.estwhy { grid-column: 1 / -1; }
.estwhy > summary {
  cursor: pointer; font-size: 12px; color: var(--dim); padding: 4px 0; min-height: 32px;
  display: flex; align-items: center;
}
.estwhy p { font-size: 12.5px; line-height: 1.6; color: var(--dim); margin: 0 0 6px; max-width: 74ch; }
.estrule { color: var(--soft); }
.estdetail { margin-top: var(--s2); }

/* Inline forms, for cards and metric cells. */
.ctest { color: var(--warn); }
.ctesttag {
  display: block; font-family: var(--m-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warn); margin-top: 3px; cursor: help;
}
.ctesttag.ctnone { color: var(--faint); cursor: default; }
.estchip {
  font-family: var(--m-mono); font-size: 12px; color: var(--warn); cursor: help;
}
.estchip i { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.sitecardit {
  display: block; font-family: var(--m-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .04em; color: var(--warn); cursor: help; margin-top: 2px;
}

/* ============================================================
   8d. Revenue calculator
   ============================================================ */

.revcalc { display: grid; gap: var(--s3); }
@media (min-width: 900px) {
  .revcalc { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: start; }
  .revcalc > .tw, .revcalc > .mnote { grid-column: 1 / -1; }
}

.rvpresets { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) { .rvpresets, .rvpresetnote { grid-column: 1 / -1; } }
.rvpreset {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-height: 52px; padding: 8px 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--m-radius-sm);
  color: var(--soft); font-size: 12.5px; font-weight: 700; text-align: left;
}
.rvpreset span {
  font-family: var(--m-mono); font-size: 15px; font-weight: 700; color: var(--ink);
}
.rvpreset.is-selected {
  border-color: var(--brand); background: var(--m-lime-soft); color: var(--brand);
}
.rvpreset.is-selected span { color: var(--brand); }
.rvpresetnote {
  font-size: 12px; line-height: 1.55; color: var(--dim); margin: 0; max-width: 78ch;
}

.rvinputs { display: grid; gap: var(--s2); }
.rvrow { display: grid; gap: 4px; }
.rvrow label {
  font-family: var(--m-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.rvfield {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--m-radius-sm);
  padding: 0 12px; min-height: 46px;
}
.rvfield:focus-within { border-color: var(--brand); box-shadow: var(--m-glow-hover); }
.rvfield input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink);
  font-family: var(--m-mono); font-size: 19px; font-weight: 700; padding: 10px 0;
}
.rvunit { font-family: var(--m-mono); font-size: 13px; color: var(--dim); flex: none; }
.rvunit.pre { order: -1; }

.rvbasis {
  font-size: 11.5px; line-height: 1.45;
}
.rvbasis.ok { color: var(--ok); }
.rvbasis.est { color: var(--warn); }
.rvbasis.opinion { color: var(--bad); }
.rvbasis.pending { color: var(--dim); }
.rvderiv { font-family: var(--m-mono); font-size: 11px; color: var(--dim); margin: 2px 0 0; }

.rvout {
  background: var(--m-panel-2); border: 1px solid var(--line-2);
  border-radius: var(--m-radius); padding: var(--s2);
}
.rvline {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.rvline:last-child { border-bottom: 0; }
.rvlabel { font-size: 12.5px; color: var(--dim); }
.rvval { font-family: var(--m-mono); font-size: 17px; font-weight: 700; color: var(--ink); text-align: right; }
.rvbig .rvval { font-size: 27px; color: var(--brand); letter-spacing: -.02em; }
.rvval.up { color: var(--up); }
.rvval.down { color: var(--down); }

.rvsens { width: 100%; border-collapse: collapse; font-size: 13px; }
.rvsens caption {
  text-align: left; font-family: var(--m-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-bottom: 8px;
}
.rvsens th, .rvsens td {
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line-2);
  font-family: var(--m-mono);
}
.rvsens th:first-child, .rvsens td:first-child { text-align: left; }
.rvsens th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.rvsens tr.is-base { background: var(--m-lime-soft); }
.rvsens tr.is-base td { color: var(--ink); font-weight: 700; }
.rvsens td.up { color: var(--up); }
.rvsens td.down { color: var(--down); }
.rvsens[hidden] { display: none; }

/* ============================================================
   9. Reality Score
   ============================================================ */

.scorehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.scoreval {
  font-family: var(--m-mono); font-size: 54px; font-weight: 700; letter-spacing: -.03em;
  color: var(--brand); line-height: 1;
}
.scoreval.mixed { color: var(--warn); }
.scoreval.weak { color: var(--bad); }
.scoreval.nd { color: var(--dim); font-size: 40px; }
.scoreband { font-size: 15px; font-weight: 700; color: var(--soft); }
.scorederived {
  font-family: var(--m-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-left: auto;
}
.scorederived a { color: var(--dim); }
.scorederived a:hover { color: var(--brand); }

.sfactors { margin-top: var(--s3); }
.sfactor {
  display: grid; gap: var(--s2); align-items: center; padding: 10px 0;
  grid-template-columns: minmax(120px, 1.1fr) auto minmax(0, 1fr) 44px;
  border-top: 1px solid var(--line-2);
}
.sflabel {
  font-family: var(--m-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  cursor: help;
}
.sfactor.is-missing .sflabel { color: var(--dim); }
.sfdetail { font-size: 12.5px; color: var(--dim); }
.sfweight {
  font-family: var(--m-mono); font-size: 11px; color: var(--faint); text-align: right; cursor: help;
}
.warnnote { color: var(--warn); }

@media (max-width: 700px) {
  .sfactor { grid-template-columns: 1fr auto; row-gap: 4px; }
  .sfbar { grid-column: 2; }
  .sfdetail { grid-column: 1 / -1; }
  .sfweight { display: none; }
  .scorederived { margin-left: 0; width: 100%; }
}

/* ============================================================
   9b. Capacity truth
   ============================================================ */

.ctruth {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.ctcell { padding: var(--s2) 0; border-left: 2px solid var(--line-2); padding-left: var(--s2); }
.ctglyph { display: block; font-size: 17px; color: var(--brand); margin-bottom: 4px; }
.ctval {
  display: block; font-family: var(--m-mono); font-size: clamp(22px, 3vw, 32px);
  font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.ctval .nd { font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.ctlabel { display: block; font-size: 13px; color: var(--soft); margin-top: 3px; }
.ctbasis {
  display: block; font-family: var(--m-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-top: 2px;
}

/* ============================================================
   9c. Contract X-ray
   ============================================================ */

.xray { display: grid; gap: var(--s2); }
.xcard { background: var(--m-panel-2); border: 1px solid var(--line-2); border-radius: var(--m-radius-sm); padding: var(--s2); }
.xhead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s1); margin-bottom: var(--s2);
}
.xcust { font-size: 16px; font-weight: 800; }
.xmw { font-family: var(--m-mono); font-size: 17px; font-weight: 700; color: var(--brand); }
.xmw .nd { font-size: 12px; font-weight: 500; color: var(--dim); }
.xgrid { display: grid; gap: var(--s2); margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.xitem { border-left: 2px solid var(--line); padding-left: var(--s2); }
.xitem.ok { border-left-color: var(--brand); }
.xitem.is-missing { border-left-style: dashed; }
.xitem dt {
  font-family: var(--m-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.xitem dd {
  margin: 2px 0 4px; font-family: var(--m-mono); font-size: 20px; font-weight: 700; color: var(--ink);
}
.xitem dd .nd { font-size: 12.5px; font-weight: 500; color: var(--dim); }
.xitem p { font-size: 12px; color: var(--dim); line-height: 1.5; margin: 0; }
.xterms { font-size: 13px; color: var(--soft); line-height: 1.55; margin: var(--s2) 0 var(--s1); }
.xsrc { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   10. Mission Control — the Today grid
   ============================================================
   Three dominant regions: the signal, the map, and the day's progress.
   Everything else is deliberately quieter. */

.mission { padding-top: var(--s3); }

.mgrid {
  display: grid; gap: var(--s2); align-items: start;
  grid-template-columns: 1fr;
}
/* A grid item defaults to `min-width: auto`, so it refuses to shrink below its
   content's min-content width and bursts out of its track. At 320px the panels
   were 335px wide inside a 288px column. This is the fix for the whole class of
   bug, so it is applied to every grid child here rather than case by case. */
.mgrid > * { min-width: 0; }
@media (min-width: 1000px) {
  .mgrid { grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); }
}

.signalcard { display: flex; flex-direction: column; justify-content: center; min-height: 260px; }
.tshead {
  font-size: clamp(30px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -.03em;
  margin: var(--s1) 0 0; font-weight: 800;
}
.tshead b { color: var(--brand); font-weight: 800; }
.tssent {
  font-size: clamp(15px, 1.5vw, 19px); color: var(--soft); margin: var(--s2) 0 0;
  padding-top: var(--s2); border-top: 1px solid var(--line-2); max-width: 62ch;
}
.tsfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s3);
}
.tsconf { text-align: right; }
.tsconf .sitefactl { display: block; margin-bottom: 3px; }

/* since last visit */
.sincelist { list-style: none; margin: 0; padding: 0; }
.srow + .srow { border-top: 1px solid var(--line-2); }
.srow[hidden] { display: none; }
.srowlink {
  display: flex; align-items: center; gap: var(--s2); min-height: 56px;
  padding: 0 var(--s1); text-decoration: none; color: inherit;
}
.srowglyph {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); font-size: 15px; color: var(--dim);
}
.srowglyph.ok { border-color: rgba(214, 255, 0, .5); color: var(--brand); }
.srowglyph.bad { border-color: rgba(209, 69, 69, .5); color: var(--bad); }
.srowglyph.warn { border-color: rgba(196, 132, 0, .5); color: var(--warn); }
.srowcount {
  font-family: var(--m-mono); font-size: 22px; font-weight: 700; color: var(--ink);
  min-width: 1.4em; text-align: right;
}
.srowlabel { flex: 1; font-size: 14.5px; color: var(--soft); }
.srowgo { color: var(--dim); font-size: 19px; }
.wall { display: block; text-align: center; margin-top: var(--s2); }

/* ---- infrastructure map ---- */
.mapcard { display: flex; flex-direction: column; }
.mappad { padding: var(--s3) var(--s3) 0; margin-bottom: var(--s2); }
.map { position: relative; }
.mapview {
  position: relative; overflow: hidden; background: #050607;
  aspect-ratio: 3 / 2;   /* fixed, so nothing shifts while the image loads */
}
.mapimg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: center; transition: transform .28s ease;
}
@media (prefers-reduced-motion: reduce) { .mapimg { transition: none; } }

/* The surface sits under the hotspots, so a hotspot click never fires both. */
.mapsurface { position: absolute; inset: 0; z-index: 1; }

.hot {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: block; padding: 6px; border-radius: var(--m-radius-sm); text-decoration: none;
}
.hotdot {
  display: block; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px rgba(214, 255, 0, .18), 0 0 12px rgba(214, 255, 0, .6);
}
/* Labels are always drawn, as in the reference — a bare dot tells the reader
   nothing, and hiding the name behind hover is useless on a touch screen.
   They sit to one side of the pin so four pins do not collide. */
.hotcard {
  position: absolute; bottom: calc(100% + 8px);
  min-width: 128px; padding: 7px 9px; border-radius: 8px;
  background: rgba(8, 10, 9, .9); border: 1px solid rgba(214, 255, 0, .3);
  pointer-events: none; transition: border-color .16s ease;
  backdrop-filter: blur(3px);
}
.hot-left .hotcard { right: 50%; margin-right: 6px; }
.hot-right .hotcard { left: 50%; margin-left: 6px; }
.hot:hover .hotcard, .hot:focus-visible .hotcard { border-color: var(--brand); }

/* Four labels do not fit over a phone-width map — they collide and clip. Below
   this width the pins stand alone; each is still a link carrying the site name,
   its capacity and its stage in an aria-label, and the note tells a sighted
   reader to tap one. */
@media (max-width: 760px) {
  .hotcard { display: none; }
  .hot:focus-visible .hotcard { display: block; }
  .hotdot { width: 14px; height: 14px; }
  .hot { padding: 12px; }   /* a 44px touch target around a 14px dot */
}
.hotname {
  display: block; font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.hotcap {
  display: block; font-family: var(--m-mono); font-size: 15px; font-weight: 700; color: var(--brand);
}
.hotstage {
  display: block; font-family: var(--m-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

/* The effects layer carries the same transform as the map image, so the vehicle
   stays on the road when the reader zooms. */
.mapfx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform-origin: center; transition: transform .28s ease;
}
@media (prefers-reduced-motion: reduce) { .mapfx { transition: none; } }

/* One sheet, eight directions. background-position picks the facing; the sheet
   is drawn at 4x its display size so it stays sharp on a 2x screen.
   image-set gives WebP to browsers that take it — CSS has no <picture>. */
.vehicle {
  position: absolute; width: 24px; height: 32px;
  transform: translate(-50%, -50%);   /* the route gives the centre of the car */
  background-image: url('/assets/vehicles.png');
  background-image: image-set(url('/assets/vehicles.webp') type('image/webp'),
                              url('/assets/vehicles.png') type('image/png'));
  background-size: 96px 64px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(214, 255, 0, .45));
}
.vehicle[data-dir="n"]  { background-position:   0    0; }
.vehicle[data-dir="ne"] { background-position: -24px  0; }
.vehicle[data-dir="e"]  { background-position: -48px  0; }
.vehicle[data-dir="se"] { background-position: -72px  0; }
.vehicle[data-dir="s"]  { background-position:   0   -32px; }
.vehicle[data-dir="sw"] { background-position: -24px -32px; }
.vehicle[data-dir="w"]  { background-position: -48px -32px; }
.vehicle[data-dir="nw"] { background-position: -72px -32px; }

.mapctl {
  position: absolute; left: var(--s2); bottom: var(--s2); z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
}
.mapbtn {
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
  background: rgba(8, 10, 9, .82); border: 1px solid var(--line);
  color: var(--ink); font-size: 17px; line-height: 1;
}
.mapbtn:hover { border-color: rgba(214, 255, 0, .5); }
.mapnote {
  font-size: 11.5px; color: var(--dim); line-height: 1.5;
  margin: 0; padding: var(--s2) var(--s3) var(--s3);
}
/* Only shown where the pin labels are hidden. */
.taphint { display: none; }
@media (max-width: 760px) { .taphint { display: inline; color: var(--soft); } }

/* ---- watchlist ---- */
.watchlist { list-style: none; margin: 0; padding: 0; }
.wrow { display: flex; align-items: stretch; gap: 4px; }
.wrow + .wrow { border-top: 1px solid var(--line-2); }
.wrow[hidden] { display: none; }
.wmain {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2);
  min-height: 62px; padding: 0 var(--s1); text-decoration: none; color: inherit;
}
.wtick {
  flex: none; display: grid; place-items: center; width: 52px; height: 40px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--m-panel-2);
  font-family: var(--m-mono); font-size: 12px; font-weight: 700; color: var(--brand);
}
.wbody { flex: 1; min-width: 0; }
.wname { display: block; font-size: 14.5px; font-weight: 700; }
.wmeta { display: block; font-size: 12px; color: var(--dim); }
.wstage {
  flex: none; font-family: var(--m-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--soft); text-align: right;
}
.wbtn {
  flex: none; width: 44px; border: 0; background: none; cursor: pointer;
  color: var(--dim); font-size: 19px; border-radius: 8px;
}
.wbtn[aria-pressed="true"] { color: var(--brand); }
.watchempty { font-size: 13px; color: var(--dim); padding: var(--s2) var(--s1); margin: 0; }

.watchbanner {
  display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center;
  font-size: 13.5px; color: var(--soft); margin: 0 0 var(--s2);
  padding: 10px var(--s2); border-radius: var(--m-radius-sm);
  background: var(--m-lime-soft); border: 1px solid rgba(214, 255, 0, .28);
}
.watchbanner[hidden] { display: none; }
.watchbtn[aria-pressed="true"] { color: var(--brand); border-color: rgba(214, 255, 0, .5); }

/* ---- daily signal progress ---- */
.progcard { margin-top: var(--s2); }
.prog { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.proghead { display: flex; align-items: center; gap: var(--s2); flex: none; }
.progglyph {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(214, 255, 0, .45); color: var(--brand); font-size: 17px;
}
.progcount {
  font-family: var(--m-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
}
.prognodes {
  flex: 1; min-width: 180px; list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0; overflow-x: auto;
}
.prognodes li { position: relative; flex: 1 0 44px; display: grid; place-items: center; }
.prognodes li::before {
  content: ''; position: absolute; top: 50%; left: -50%; width: 100%; height: 2px;
  background: var(--surface-3);
}
.prognodes li:first-child::before { display: none; }
.prognodes li.done::before { background: var(--brand); }
.pnodebtn {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--surface-3); background: var(--bg);
  color: var(--dim); font-family: var(--m-mono); font-size: 12px; text-decoration: none;
}
.prognodes li.done .pnodebtn { border-color: var(--brand); color: var(--brand); }
.prognodes li.now .pnodebtn {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 4px var(--m-lime-soft);
}

@media (max-width: 640px) {
  .prog { gap: var(--s2); }
  .prog .cta { width: 100%; text-align: center; }
  .tsfoot { flex-direction: column; align-items: stretch; }
  .tsconf { text-align: left; }
}

/* ============================================================
   10. Active route — an underline, not a filled chip
   ============================================================
   The reference marks the current destination with a lime underline. A filled
   block reads as a button and competes with the one primary action. */

.mainnav .navlink.is-active {
  background: none;
  color: var(--ink);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.mainnav .navlink.is-primary { color: var(--brand); }
.mainnav .navlink.is-primary.is-active {
  background: none;
  color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.mainnav .navlink:hover { background: var(--surface-2); border-radius: 6px; }
.mainnav .navlink.is-active:hover { border-radius: 0; }

/* The bottom bar has no room for an underline under a 5-up grid, so the current
   item is marked by colour AND weight AND aria-current, never colour alone. */
.bottomnav .bnav.is-active { box-shadow: inset 0 2px 0 var(--brand); }

/* ============================================================
   11. The shell on small screens
   ============================================================
   The header gained a palette trigger and a Live/Focus toggle. Below the
   breakpoint where the primary nav moves to the bottom bar, the brand takes the
   free space and the utility cluster is allowed to shrink rather than push the
   document sideways. */

/* ---- header overflow ----
   The header is a flex row of brand + nav + utility cluster, and the utility
   cluster was `flex: none`. Once the nav reached six destinations the row was
   17px wider than the shell between 1080px (where the nav hides) and 1440px
   (where it fits) — a band the visual QA did not sample, so it went unseen.

   The cluster now shrinks, and its contents drop away in order of how much they
   duplicate something else: the palette's label first (the icon and the shortcut
   remain), then the market pill (the utility menu carries the same feed row).
   Nothing that is the only route to a destination is ever hidden. */
.appbarin { min-width: 0; }
.appbarutil { min-width: 0; flex-shrink: 1; }
.paltrigger { min-width: 0; }

@media (max-width: 1460px) {
  .paltrigger .paltxt { display: none; }
}
@media (max-width: 1240px) {
  .appbarutil .mstate { display: none; }
  .navlink { padding: 0 10px; }
}

@media (max-width: 1080px) {
  .brand { margin-right: auto; }
}

@media (max-width: 760px) {
  /* The market pill duplicates the feed row already inside the utility menu. */
  .appbarutil .mstate { display: none; }
  .paltrigger .palkbd { display: none; }
  .paltrigger { padding: 0 10px; }
  .modebtn { padding: 0 10px; letter-spacing: .06em; }
}

@media (max-width: 420px) {
  /* Both controls stay reachable — the toggle keeps its labels, which are the
     only thing distinguishing the two states. */
  .modetoggle { padding: 2px; }
  .modebtn { padding: 0 8px; font-size: 10.5px; }
  .appbarin { gap: var(--s1); }
}

/* ============================================================
   Editorial layer — the audience-led homepage.

   Loaded last. The asset pack's tokens are mapped onto the ones this project
   already has rather than declared a second time: --brand stays the lime,
   --ink/--surface keep their meaning, and only genuinely new roles (the display
   face, the editorial scale, the shell width) are added here.

   Colour discipline, inherited from the rest of the site and reinforced:
     lime  = verified progress and the one primary action
     amber = unresolved, reported or estimated
     never colour alone — every state carries a word.
   ============================================================ */

:root {
  /* New roles only. */
  --t2c-shell: 1600px;
  --t2c-gutter: clamp(1rem, 3vw, 3.5rem);
  --t2c-section: clamp(3rem, 6vw, 6rem);

  --ed-display: 'Archivo', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ed-hero: clamp(2.5rem, 6.2vw, 6.5rem);
  --ed-h2: clamp(1.6rem, 3vw, 2.9rem);
  --ed-h3: clamp(1.05rem, 1.5vw, 1.35rem);
  --ed-lede: clamp(1.05rem, 1.4vw, 1.3rem);

  --ed-radius: 14px;
  --ed-panel: #101314;
  --ed-panel-2: #161a1b;
  --ed-amber: var(--warn);
}

html[data-theme="light"] {
  --ed-panel: #ffffff;
  --ed-panel-2: #f7f7f4;
}

.t2c-shell {
  inline-size: min(100% - (2 * var(--t2c-gutter)), var(--t2c-shell));
  margin-inline: auto;
}

/* ---- shared editorial atoms ---- */

.ed-eyebrow {
  font-family: var(--m-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 var(--s2);
}

.ed-headline {
  font-family: var(--ed-display);
  font-size: var(--ed-hero); line-height: .92; letter-spacing: -.025em;
  text-transform: uppercase; color: var(--ink);
  margin: 0; text-wrap: balance;
}

.ed-consequence {
  font-size: var(--ed-lede); line-height: 1.45; color: var(--soft);
  margin: var(--s3) 0 0; max-width: 42ch;
}

.ed-sectionh {
  font-family: var(--ed-display);
  font-size: var(--ed-h2); line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.ed-section { margin-top: var(--t2c-section); }
.ed-sectionhead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s3);
}
.ed-section > .ed-sectionh { margin-bottom: var(--s3); }
.ed-morelink { font-size: 14px; color: var(--brand); text-decoration: none; font-weight: 700; }

.ed-note {
  font-size: 12.5px; line-height: 1.55; color: var(--dim); margin: var(--s2) 0 0; max-width: 68ch;
}
.ed-caveat {
  font-size: 13px; line-height: 1.55; color: var(--soft); margin: var(--s2) 0 0;
  padding-left: var(--s2); border-left: 2px solid var(--ed-amber); max-width: 68ch;
}
.ed-disclosure {
  font-size: 11.5px; line-height: 1.5; color: var(--dim); margin: var(--s2) 0 0;
  display: flex; gap: 6px; align-items: baseline;
}
.ed-disclosure span { color: var(--ed-amber); }

/* `hidden` must win over any display a class sets. A component that sets
   `display: inline-flex` silently defeats the attribute otherwise, which is how
   the explainer's "next step" button appeared before it was started. */
[hidden] { display: none !important; }

/* Buttons. One primary action per section. */
.ed-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 8px;
  font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.ed-cta.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.ed-cta.secondary { background: rgba(7, 9, 9, .5); color: var(--ink); border-color: var(--line); }
.ed-cta.secondary:hover { border-color: var(--brand); }

/* ---- illustrative imagery ---- */

.ed-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.t2c-media { position: relative; overflow: clip; background: var(--bg); }
.t2c-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(7 9 9 / 94%) 0%, rgb(7 9 9 / 68%) 30%, transparent 66%),
    linear-gradient(0deg, rgb(7 9 9 / 82%) 0%, transparent 52%);
}
html[data-theme="light"] .t2c-media::after {
  background: linear-gradient(90deg, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 60%) 34%, transparent 70%);
}

/* On a phone there is no side column to hide behind, so the scrim runs bottom-up
   and the copy sits on a near-solid base rather than over lit buildings. */
@media (max-width: 760px) {
  .ed-heromedia.t2c-media::after {
    background: linear-gradient(0deg, rgb(7 9 9 / 97%) 0%, rgb(7 9 9 / 88%) 46%, rgb(7 9 9 / 40%) 78%, rgb(7 9 9 / 15%) 100%);
  }
  .ed-heroin { padding-top: clamp(2rem, 12vw, 4rem); }
  /* One primary action; the evidence route becomes a text link. */
  .ed-heroacts .ed-cta.secondary {
    min-height: 44px; padding: 0; border: 0; background: none;
    color: var(--brand); text-decoration: underline; text-underline-offset: 4px;
  }
}

/* ============================================================
   Lead story hero
   ============================================================ */

.ed-hero { position: relative; isolation: isolate; }
.ed-heromedia { position: absolute; inset: 0; z-index: -1; }
.ed-hero.is-empty { background: var(--ed-panel); padding: var(--s6) 0; }

.ed-heroin {
  display: grid; gap: var(--s4);
  padding: clamp(3rem, 7vw, 7rem) 0 var(--s4);
  align-items: start;
}
@media (min-width: 1100px) {
  .ed-heroin { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}
.ed-herocopy { min-width: 0; }

.ed-heroacts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

.ed-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--m-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin: var(--s3) 0 0;
}
.ed-badge[data-evidence="reported"], .ed-badge[data-evidence="estimated"] { color: var(--ed-amber); }
/* The pack's icons are stroked with `currentColor`, which an <img> cannot
   inherit — loaded that way they render as nothing. Drawn as a mask instead,
   they take the colour of whatever they sit in, which is the whole point of a
   currentColor icon. */
.ed-icon {
  display: inline-block; width: 17px; height: 17px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ed-icon[data-icon="verified-shield"] { --icon: url('/assets/t2c/icons/verified-shield.svg'); }
.ed-icon[data-icon="watchlist"] { --icon: url('/assets/t2c/icons/watchlist.svg'); }
.ed-icon[data-icon="power"] { --icon: url('/assets/t2c/icons/power.svg'); }
.ed-icon[data-icon="evidence"] { --icon: url('/assets/t2c/icons/evidence.svg'); }
.ed-badgedate { color: var(--dim); letter-spacing: .06em; }

/* Investor watch */
.ed-watch {
  background: rgba(16, 19, 20, .84); border: 1px solid var(--line);
  border-radius: var(--ed-radius); padding: var(--s3); backdrop-filter: blur(8px);
}
html[data-theme="light"] .ed-watch { background: rgba(255, 255, 255, .9); }
.ed-watchh {
  font-family: var(--m-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  margin: 0 0 var(--s1);
}
.ed-watchlist { list-style: none; margin: 0; padding: 0; }
.ed-watchrow + .ed-watchrow { border-top: 1px solid var(--line-2); }
.ed-watchlink {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2);
  align-items: center; min-height: 60px; padding: var(--s1) 0;
  text-decoration: none; color: inherit;
}
.ed-watchstate {
  font-family: var(--m-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap;
}
.ed-watchstate.ok { color: var(--brand); }
.ed-watchstate.warn { color: var(--ed-amber); }
.ed-watchstate.dim { color: var(--dim); }
.ed-watchbody { min-width: 0; }
.ed-watchtitle { display: block; font-size: 14px; font-weight: 700; }
.ed-watchdetail { display: block; font-size: 12px; color: var(--dim); }
.ed-watchgo { color: var(--dim); font-size: 19px; }

/* ---- delivery rail ---- */

.ed-railwrap { overflow-x: auto; padding: var(--s3) 0 var(--s5); }
.ed-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr);
  list-style: none; margin: 0; padding: 0; min-width: 760px;
}
.ed-railstep { position: relative; text-align: center; }
.ed-railstep::before {
  content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px;
  background: var(--surface-3);
}
.ed-railstep:first-child::before { display: none; }
.ed-railstep.is-complete::before { background: var(--brand); }

.ed-railbtn {
  display: block; width: 100%; border: 0; background: none; padding: 0 4px 4px;
  color: inherit; font: inherit; cursor: pointer; border-radius: 8px;
}
.ed-railbtn.is-inert { cursor: default; }
.ed-railnode {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 50%;
  border: 2px solid var(--surface-3); background: var(--bg); color: var(--dim); font-size: 15px;
}
.is-complete .ed-railnode { border-color: var(--brand); color: var(--brand); }
.is-current .ed-railnode {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 5px rgba(214, 255, 0, .14);
}
.is-unknown .ed-railnode { border-style: dashed; }

.ed-railsimple {
  display: block; font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.2;
}
.is-unknown .ed-railsimple { color: var(--dim); }
.ed-raildetail {
  display: block; font-family: var(--m-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); margin-top: 3px;
}
.ed-railstate { display: block; font-size: 11px; color: var(--dim); margin-top: 4px; }
.is-complete .ed-railstate { color: var(--brand); }
.ed-railev { padding-top: 8px; }

/* ============================================================
   Why-this-matters drawer
   ============================================================ */

.ed-drawer {
  border: 0; padding: 0; background: none; color: var(--ink);
  margin: 0 0 0 auto; max-width: min(560px, 100vw); height: 100%; max-height: 100vh;
}
.ed-drawer::backdrop { background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px); }
.ed-drawerin {
  display: flex; flex-direction: column; height: 100vh;
  background: var(--ed-panel); border-left: 1px solid var(--line);
}
.ed-drawerhead {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s3); border-bottom: 1px solid var(--line-2);
}
.ed-drawerhead h2 {
  font-family: var(--ed-display); font-size: 24px; line-height: 1.05;
  text-transform: uppercase; margin: 0; flex: 1;
}
.ed-drawerclose {
  flex: none; width: 44px; height: 44px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font-size: 16px; cursor: pointer;
}
.ed-drawerbody { overflow-y: auto; padding: var(--s3); }
.ed-drawersec + .ed-drawersec { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.ed-drawersec h3 {
  font-family: var(--m-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px;
}
.ed-drawersec p { font-size: 14.5px; line-height: 1.6; color: var(--soft); margin: 0; }
.ed-blockers { margin: 0; padding-left: 1.1em; }
.ed-blockers li { font-size: 14px; line-height: 1.6; color: var(--soft); margin-bottom: 6px; }
.ed-drawersrc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s2); }

@media (max-width: 760px) {
  /* Bottom sheet on a phone. */
  .ed-drawer { margin: auto 0 0; max-width: 100vw; width: 100vw; height: auto; max-height: 92vh; }
  .ed-drawerin { height: auto; max-height: 92vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
}

/* ============================================================
   Returning user
   ============================================================ */

.ed-return {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s4);
  padding: var(--s3); border-radius: var(--ed-radius);
  background: var(--ed-panel); border: 1px solid var(--line-2);
}
.ed-returnhead {
  font-family: var(--ed-display); font-size: clamp(1.2rem, 2vw, 1.7rem);
  text-transform: uppercase; letter-spacing: -.01em; margin: 0; color: var(--ink);
}
.ed-returnsub { font-size: 13.5px; color: var(--dim); margin: 4px 0 0; }
.ed-return.is-caughtup .ed-returnhead { color: var(--brand); }

/* ============================================================
   Buildout grid
   ============================================================ */

.ed-grid4 { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.ed-grid3 { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.ed-grid4 > *, .ed-grid3 > * { min-width: 0; }
@media (min-width: 700px) { .ed-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .ed-grid4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 820px) { .ed-grid3 { grid-template-columns: repeat(3, 1fr); } }

.ed-card {
  display: flex; flex-direction: column;
  background: var(--ed-panel); border: 1px solid var(--line-2);
  border-radius: var(--ed-radius); padding: var(--s3);
}
.ed-cardh {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--ed-h3); font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 var(--s2); color: var(--ink);
}
.ed-cardn {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 5px; background: var(--brand); color: var(--brand-ink);
  font-family: var(--m-mono); font-size: 12px; font-weight: 700;
}
.ed-cardsub { font-family: var(--m-mono); font-size: 12px; color: var(--dim); margin: 0 0 8px; }

/* Delivery leaders */
.ed-leaders { list-style: none; margin: 0; padding: 0; }
.ed-leader + .ed-leader { border-top: 1px solid var(--line-2); }
.ed-leadlink {
  display: grid; grid-template-columns: 58px 1fr; gap: 4px var(--s2);
  align-items: center; min-height: 56px; padding: var(--s1) 0;
  text-decoration: none; color: inherit;
}
.ed-leadtick {
  grid-row: span 2; font-family: var(--m-mono); font-size: 13px; font-weight: 700; color: var(--brand);
}
.ed-leadrail { display: flex; gap: 3px; align-items: center; }
.ed-leadrail i { flex: 1; height: 6px; border-radius: 2px; background: var(--surface-3); }
.ed-leadrail i.on { background: var(--brand); }
.ed-leadstage {
  font-family: var(--m-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soft);
}

/* Next catalyst */
.ed-bignum {
  font-family: var(--ed-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1;
  text-transform: uppercase; color: var(--brand); margin: 0;
}
.ed-bignum.is-soft { color: var(--ed-amber); }
.ed-bignum.nd { color: var(--dim); font-size: 1.2rem; }
.ed-certainty {
  font-family: var(--m-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin: 10px 0 0;
  display: flex; align-items: center; gap: 6px;
}
.ed-certainty.is-exact { color: var(--brand); }
.ed-certainty.is-guided_window { color: var(--ed-amber); }
.ed-certainty.is-date_unknown { color: var(--dim); }
.ed-catco { font-size: 13.5px; color: var(--soft); margin: var(--s2) 0 0; }

/* Promise vs reality */
.ed-promise { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }
.ed-prcell { display: flex; flex-direction: column; gap: 2px; padding-left: var(--s2); border-left: 2px solid var(--line); }
.ed-prcell.is-reality { border-left-color: var(--brand); }
.ed-prcell.is-promise { border-left-color: var(--line-strong, var(--line)); }
.ed-prlabel {
  font-family: var(--m-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.ed-prval {
  font-family: var(--m-mono); font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
}
.is-reality .ed-prval { color: var(--brand); }
.ed-prmeta { font-size: 11px; color: var(--dim); line-height: 1.4; }

/* Audience lens */
.ed-lenstabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s2); }
.ed-lenstab {
  min-height: 44px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--soft);
  font-size: 12.5px; font-weight: 700;
}
.ed-lenstab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ed-lenspanel p { font-size: 13.5px; line-height: 1.6; color: var(--soft); margin: 0 0 var(--s2); }
.ed-lenslist { margin: 0 0 var(--s2); padding-left: 1.1em; }
.ed-lenslist li { font-size: 13px; line-height: 1.6; color: var(--dim); margin-bottom: 5px; }

/* ============================================================
   Megaprojects
   ============================================================ */

.ed-project {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ed-panel); border: 1px solid var(--line-2); border-radius: var(--ed-radius);
}
.ed-projmedia { aspect-ratio: 16 / 9; position: relative; }
.ed-projstage {
  position: absolute; left: var(--s2); bottom: var(--s2); z-index: 1;
  font-family: var(--m-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 4px;
  background: rgba(7, 9, 9, .8); border: 1px solid rgba(214, 255, 0, .4); color: var(--brand);
}
.ed-projbody { padding: var(--s3); display: flex; flex-direction: column; flex: 1; }
.ed-projop { font-family: var(--m-mono); font-size: 11px; letter-spacing: .08em; color: var(--dim); margin: 0; }
.ed-projname { font-size: 18px; font-weight: 800; margin: 4px 0 var(--s2); line-height: 1.2; }
.ed-projfacts { margin: 0 0 var(--s2); display: grid; gap: 6px; }
.ed-projfacts > div { display: flex; justify-content: space-between; gap: var(--s2); font-size: 13px; }
.ed-projfacts dt { color: var(--dim); }
.ed-projfacts dd { margin: 0; text-align: right; font-weight: 700; }
.ed-projev { font-size: 12px; color: var(--dim); margin: 0 0 var(--s2); }
.ed-projbody .ed-cta { margin-top: auto; }

/* ============================================================
   Explainer
   ============================================================ */

.ed-explainer {
  display: grid; gap: 0; overflow: hidden;
  background: var(--ed-panel); border: 1px solid var(--line-2); border-radius: var(--ed-radius);
}
/* minmax(0, 1fr), not 1fr: a bare `1fr` has an `auto` minimum, so the 1672px
   intrinsic width of the illustration forced its column to 985px of a 1328px
   row and the subject was cropped out of frame. */
@media (min-width: 900px) {
  .ed-explainer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ed-explainer > * { min-width: 0; }
/* The explainer artwork is the point of the panel, so it keeps a light scrim
   rather than the hero's heavy left-to-right gradient — nothing is overlaid on
   it and there is no copy to keep legible. */
/* The cutaway is a wide 16:9 with the subject spanning nearly the full width, so
   the frame keeps that ratio and `contain` rather than cropping the pylon off
   one end and the office off the other. */
.ed-explmedia { aspect-ratio: 16 / 9; align-self: center; }
.ed-explmedia .ed-img { object-fit: contain; }
.ed-explmedia::after {
  background: linear-gradient(0deg, rgb(7 9 9 / 35%) 0%, transparent 40%);
}

/* Project cards likewise: a light bottom scrim so the stage chip stays readable
   without hiding the illustration behind it. */
.ed-projmedia::after {
  background: linear-gradient(0deg, rgb(7 9 9 / 72%) 0%, transparent 55%);
}
.ed-explbody { padding: var(--s4); }
.ed-explh {
  font-family: var(--ed-display); font-size: var(--ed-h2); line-height: 1;
  text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 var(--s3); color: var(--ink);
}
.ed-steps { list-style: none; margin: 0 0 var(--s3); padding: 0; counter-reset: step; }
.ed-step {
  display: flex; gap: var(--s2); align-items: flex-start; padding: 10px 0;
  border-top: 1px solid var(--line-2); opacity: .45;
  transition: opacity var(--t2c-fast, 160ms) ease;
}
.ed-step.is-current, .ed-step.is-done { opacity: 1; }
.ed-stepn {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--m-mono); font-size: 12px;
}
.ed-step.is-current .ed-stepn { border-color: var(--brand); color: var(--brand); }
.ed-step.is-done .ed-stepn { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.ed-steptext { font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.ed-explacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ed-explstatus { font-size: 12.5px; color: var(--dim); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ed-step { transition: none; }
}

/* ============================================================
   Header: watchlist action
   ============================================================ */

.watchbtn-nav {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 38px; padding: 0 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--soft); font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.watchbtn-nav:hover { border-color: var(--brand); color: var(--ink); }
.watchbtn-nav img { display: block; opacity: .8; }

/* The label goes before the palette label does: the icon still reads as a
   watchlist, and the destination is in its accessible name either way. */
@media (max-width: 1320px) { .watchbtn-nav .watchtxt { display: none; } }

/* Below this, the bar keeps only the brand, search and the menu. The watchlist
   and the interface mode move INTO the menu rather than off the page — the
   duplicate controls carry the same data-mode, so one handler serves both. */
.umenu-narrow { display: none; }
@media (max-width: 900px) {
  .appbarutil .watchbtn-nav,
  .appbarutil > .modetoggle { display: none; }
  .umenu-narrow { display: block; }
  .umenu-narrow .modetoggle { margin-top: 8px; width: 100%; }
  .umenu-narrow .modebtn { flex: 1; }
}

/* ============================================================
   404
   ============================================================ */

.ed-404 { padding-top: var(--s6); }
.ed-404 .ed-headline { max-width: 16ch; }
.ed-404 .ed-grid3 { margin-top: var(--s3); }
.ed-404 .ed-card { text-decoration: none; color: inherit; }
.ed-404 .ed-card:hover { border-color: var(--brand); }
.ed-404 .ed-cardh { margin-bottom: 6px; }

/* Explainer cards elsewhere use the same affordance. */
a.ed-card { text-decoration: none; color: inherit; }
a.ed-card:hover { border-color: var(--brand); }

/* ============================================================
   Main column
   ============================================================ */

.ed-main { padding-bottom: var(--t2c-section); }