/* ─────────────────────────────────────────────────────────────────────────────
Primaegis portal — shell stylesheet.
Tokens are the primaegis-research :root, verbatim. Do not invent values here;
add them to :root and reference them.
Layered on top: preopen's glass treatment (.glass, /daily cards, stat rail)
and inanalytics' mono discipline (all tabular numbers).
──────────────────────────────────────────────────────────────────────────── */
/* Fonts are loaded via in base.html — no @import here (it double-loaded
a second family set and delayed first paint). */
:root{
--bg:#0A0D14; --bg-2:#070A10;
--surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.085);
--border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.14); --border-hi:rgba(229,195,106,.45);
/* ink-3 is every secondary label on the site. It was #AAB2C0; one step up
so micro-labels hold their weight at the smaller sizes they render at. */
--ink:#EDEFF4; --ink-2:#C9CFDA; --ink-3:#B6BECC;
--accent:#E5C36A; --accent-deep:#B5861E; --accent-hi:#F2D894; --accent-underline:rgba(229,195,106,.28);
--good:#5CB88A; --warn:#D9A03C; --bad:#D96C6C;
--eq:#B5861E; --debt:#4E97CB; --gold:#C07146; --cash:#8E8AD0;
--elev-glow:radial-gradient(120% 120% at 50% 0%, rgba(229,195,106,.07), transparent 60%);
/* Dark mode separates with luminance and spends no shadow; defined so
var(--shadow-*) always resolves rather than silently dropping the rule. */
--shadow-1:none; --shadow-2:none;
/* preopen glass + status */
--glass:rgba(255,255,255,.06); --glass-brd:rgba(255,255,255,.14);
/* LIQUID GLASS — dark. See the light block for why the blur is 2px and not
20: a 20px radius erases the 44px weave the glass is supposed to reveal.
brightness() does here what saturate() does on paper — lifts the ground
under the pane rather than covering it. */
--glass-face:
radial-gradient(120% 90% at 6% -10%, rgba(255,255,255,.085), transparent 52%),
linear-gradient(176deg,rgba(255,255,255,.05) 0%,
rgba(255,255,255,.018) 48%,rgba(255,255,255,.008) 100%);
--glass-blur:blur(2px) saturate(160%) brightness(1.08);
--glass-edge:rgba(255,255,255,.09);
--glass-edge-t:rgba(255,255,255,.22);
--glass-edge-b:rgba(255,255,255,.045);
--glass-lift:inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -1px 0 rgba(255,255,255,.035),0 22px 48px -32px rgba(0,0,0,.9);
--glass-flat:linear-gradient(176deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
/* The floating dialog (search) — heavier than a card because it sits over a
scrim and must own the foreground. */
--pane-face:rgba(13,17,24,.74); --pane-blur:blur(30px) saturate(150%);
--pane-shadow:0 24px 70px rgba(0,0,0,.62);
--chrome-face:linear-gradient(180deg,rgba(12,16,24,.72) 0%,
rgba(12,16,24,.54) 58%,rgba(12,16,24,0) 100%);
--chrome-blur:blur(10px) saturate(108%);
--chrome-edge:transparent;
--chrome-lift:none;
--chrome-rule:rgba(229,195,106,.30);
--st-good:#34d399; --st-warn:#fbbf24; --st-bad:#f87171;
--indigo:#818cf8; --teal:#2dd4bf; --violet:#c4b5fd;
/* type badges */
--t-desk:#E5C36A; --t-dossier:#4E97CB; --t-thesis:#8E8AD0; --t-preopen:#5CB88A;
--t-postclose:#4E97CB; --t-intel:#D96C6C; --t-indicator:#C07146; --t-brief:#A9B0BF;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
--r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-full:999px;
--maxw:960px; --wide:1200px; --shell:1440px;
--e-out:cubic-bezier(.16,1,.3,1); --e-spring:cubic-bezier(.34,1.56,.64,1); --e-inout:cubic-bezier(.65,0,.35,1);
--d1:180ms; --d2:320ms; --d3:640ms; --d4:1100ms;
--serif:"Fraunces",Georgia,serif;
--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
/* DARK GROUND (2026-08-02). The dark page was a flat #0A0D14 fill, which is
why glass never read here: a pane needs something behind it to refract, and
a flat fill blurs to itself. This is the same geometry the light page has
carried since 31-Jul — gold glow top-right, a second low-left, blue at the
right edge, rust at the foot, the diamond weave — at roughly a third the
alpha, because ink shows decoration far more readily than paper does.
Nothing here exceeds .09; the vignette does the rest.
`body` alone, so this is also the no-JS and pre-paint state. The light rule
later in the file is more specific and overrides it whole. */
body{
background:
radial-gradient(88% 66% at 84% -12%, rgba(229,195,106,.10), rgba(229,195,106,.03) 42%, transparent 66%),
radial-gradient(58% 48% at 6% 10%, rgba(181,134,30,.06), transparent 56%),
radial-gradient(54% 62% at 100% 58%, rgba(78,151,203,.05), transparent 60%),
radial-gradient(70% 78% at 10% 96%, rgba(192,113,70,.045), transparent 60%),
radial-gradient(150% 118% at 50% 38%, transparent 48%, rgba(0,0,0,.45) 100%),
url("data:image/svg+xml;utf8,"),
linear-gradient(168deg,#0C1018 0%,#0A0D14 44%,#070A10 100%);
background-attachment:fixed;
}
body{font-family:var(--sans);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.65;color:var(--ink);
-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(1.9rem,4vw,2.8rem)} h2{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.display{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em}
/* The family's signature heading device: the closing phrase in gold italic. */
.display em{font-style:italic;color:var(--accent)}
.hero-main h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2.3vw,1.75rem);
letter-spacing:0;line-height:1.18}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
.prose a{text-decoration:underline;text-decoration-color:var(--accent-underline);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:rgba(229,195,106,.28)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:var(--r-sm);border:2px solid var(--bg)}
img{max-width:100%;height:auto;display:block}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sm{font-size:.84rem} .xs{font-size:.75rem}
.dim{color:var(--ink-3)} .accent{color:var(--accent)} .warn{color:var(--bad)}
.upper{text-transform:uppercase;letter-spacing:.14em}
.wrap{max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--s5) 0}
.wrap.narrow{max-width:var(--maxw)}
.mb-l{margin-bottom:var(--s6)} .mt-xl{margin-top:var(--s7)} .mt-auto{margin-top:auto}
.label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
/* Section eyebrow. Up a step with tracking pulled back proportionally, so it
renders at roughly the same width and nothing below it reflows. */
.eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3)}
.eyebrow::before{content:"◆";font-size:.55rem;line-height:1}
.lede{color:var(--ink-2);max-width:70ch;text-wrap:pretty;margin:0}
/* chrome ------------------------------------------------------------------- */
/* THE HEADER FADES OUT — no bottom edge at all (chosen 2026-08-02).
Every tinted face tried here read as a coloured BAND against the page, and
the reason is where the gold sits: the wash is centred at 85% -10%, just
above the top-right corner, so the bar stands in the brightest part of it.
Tinting could not fix that and saturate(185%) was amplifying it.
So the face fades to nothing by the bottom edge and there is no border to
draw a line. The separation is a single inset gold rule that stops short of
both margins — a printed rule under a masthead, not a UI divider.
It holds .62 through the top 58% (where the nav labels sit) before falling
away: "fades to nothing" is the look, but the type still needs a ground.
saturate() is now ~1.0 — boosting chroma is what made the gold shout. */
.chrome{position:sticky;top:0;z-index:40;background:var(--chrome-face);
-webkit-backdrop-filter:var(--chrome-blur);backdrop-filter:var(--chrome-blur);
border-bottom:1px solid var(--chrome-edge);box-shadow:var(--chrome-lift)}
.chrome::after{content:"";position:absolute;left:var(--s5);right:var(--s5);bottom:0;
height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--chrome-rule) 16%,
var(--chrome-rule) 84%,transparent)}
.chrome-in{max-width:var(--shell);margin:0 auto;padding:0 var(--s5);height:60px;display:flex;align-items:center;gap:var(--s5)}
/* Wordmark stacks: P tile on the left, PRIMAEGIS over RESEARCH. Grid rather
than a wrapper div so the markup is untouched and every place the mark
renders picks it up. The tile spans both rows and stays vertically centred. */
.mark{display:grid;grid-template-columns:auto auto;column-gap:11px;
align-items:center;justify-content:start;color:var(--ink);flex:none}
.mark::before{content:"P";grid-row:1/3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--border-2);
font-family:var(--serif);font-size:1.05rem;color:var(--accent)}
.mark-name{grid-column:2;grid-row:1;font-family:var(--sans);font-weight:600;
font-size:.78rem;letter-spacing:.2em;line-height:1.15;color:var(--ink)}
/* RESEARCH is tracked out to sit flush under PRIMAEGIS. Value is measured, not
guessed: PRIMAEGIS renders 88.68px, RESEARCH's bare glyphs 46.24px, and the
gap is spread across 7 inter-letter spaces → .595em. letter-spacing also adds
a trailing space after the LAST character, which would push the right edge in
by one full step, so an equal negative margin cancels it. Expressed in em so
it holds if the type scale changes. */
.mark-sub{grid-column:2;grid-row:2;font-family:var(--mono);font-size:.6rem;
letter-spacing:.595em;margin-right:-.595em;line-height:1.15;
text-transform:uppercase;color:var(--ink-2)}
/* min-width:0 — WITHOUT IT THE HEADER OVERFLOWS ITS OWN PADDING.
A flex item defaults to min-width:auto, so `flex:1` here still refused to
shrink below the intrinsic width of all eleven links. On a phone that pushed
the search button past the right gutter — it sat a few pixels wider than
every card below it — and squeezed the nav to nothing in the process.
overflow-x:auto cannot scroll a box that is never allowed to be too small. */
.nav{display:flex;align-items:center;gap:1px;flex:1;min-width:0;
overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
padding:6px 12px;border-radius:var(--r-sm);white-space:nowrap;transition:color var(--d1) var(--e-out),background var(--d1) var(--e-out)}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a.on{color:var(--bg-2);background:var(--accent)}
.searchbtn{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-2);
border-radius:var(--r-sm);padding:7px 10px 7px 13px;cursor:pointer;color:var(--ink-3);flex:none;font-family:var(--sans);font-weight:500;font-size:.72rem}
.searchbtn:hover{border-color:var(--border-hi);color:var(--ink-2)}
kbd{font-family:var(--mono);font-size:.62rem;border:1px solid var(--border-2);border-radius:6px;padding:1px 5px;color:var(--ink-3)}
/* today -------------------------------------------------------------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.hero{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.hero-main{display:flex;flex-direction:column;background:var(--elev-glow),var(--surface);
border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;color:var(--ink)}
.hero-main:hover{border-color:var(--border-hi)}
.hero-main .thumb,.hero-main .ph{border-bottom:1px solid var(--border)}
.hero-tags{display:flex;align-items:center;gap:11px;padding:var(--s5) var(--s5) 0;flex-wrap:wrap}
.hero-main h2,.hero-main .lede{padding:0 var(--s5)}
.hero-main h2{margin:var(--s3) 0}
.hero-main .lede{padding-bottom:var(--s5)}
.cta{padding:0 var(--s5) var(--s5);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hero-side{display:flex;flex-direction:column;gap:var(--s4);background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
padding-bottom:var(--s3);border-bottom:1px solid var(--border);color:var(--ink)}
.stat-row:hover{color:#fff}
.big-num{font-size:1.25rem;font-weight:500;color:var(--accent);letter-spacing:-.01em}
.statbar,.pillars{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s7)}
/* CELL COUNT IS NOT A CONSTANT. This was repeat(5,1fr) and adding a sixth stat
pushed one cell onto a row of its own, stretched full width — the layout
knew how many cells there were in 2026 and would need editing every time
that changed. Flex with a basis lets each ROW fill completely at whatever
count and whatever width: seven across on a wide monitor, four then three on
a laptop, two and two on a phone, with no breakpoint to maintain. */
.statbar{display:flex;flex-wrap:wrap}
.statbar>div{flex:1 1 152px;background:var(--bg-2);padding:20px 22px}
.statbar b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.statbar .label{margin-top:7px}
/* preopen glass: the hero stat rail */
.hero-stats{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--glass-brd);border-top:1px solid var(--glass-brd)}
.hero-stats>div{background:var(--glass);backdrop-filter:blur(10px);padding:14px 18px}
.hero-stats b{display:block;font-family:var(--mono);font-size:1.3rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.hero-stats .good{color:var(--st-good)}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
padding-bottom:var(--s3);border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
.more{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
/* cards -------------------------------------------------------------------- */
.grid{display:grid;gap:var(--s3)}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(238px,1fr));margin-bottom:var(--s7)}
.grid.daily{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);padding:18px;color:var(--ink)}
.card:hover{border-color:var(--border-hi);background:var(--surface-2)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-title{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.16}
.card-title-sm{font-size:.9rem;line-height:1.38}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
padding-top:var(--s3);border-top:1px solid var(--border)}
.ticker{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent)}
.ticker.lg{font-size:.8rem;letter-spacing:.16em}
/* preopen glass: /daily */
.daily-card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);
border-radius:var(--r-xl);padding:0;overflow:hidden;gap:0}
.daily-card .card-foot{padding:12px 13px;border-top:1px solid var(--glass-brd);margin:0}
.daily-card:hover{border-color:var(--border-hi)}
.ph{background:repeating-linear-gradient(135deg,var(--surface-2) 0 9px,transparent 9px 18px);
display:flex;align-items:center;justify-content:center}
.ph span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.month{margin-bottom:var(--s7)}
.month-head{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:11px;
border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
.month-head h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--ink)}
.grade{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;border-radius:8px;padding:2px 6px;
color:var(--st-good);border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.10)}
.grade.none{color:var(--ink-3);border-color:var(--border-2);background:transparent}
.pillars{grid-template-columns:repeat(3,1fr)}
.pillars a{background:var(--bg-2);padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.pillars a:hover{background:var(--surface)}
.pillars .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent)}
/* badges ------------------------------------------------------------------- */
.badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bc);
background:rgba(255,255,255,.025);border:1px solid color-mix(in srgb,var(--bc) 40%,transparent);
border-radius:8px;padding:3px 8px;white-space:nowrap;display:inline-block}
.badge.big{font-size:.64rem;padding:4px 9px}
.view{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
border:1px solid var(--border-2);background:var(--surface-2);border-radius:var(--r-sm);
padding:3px 10px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.view i{width:0;height:0;border:0;font-style:normal;font-size:.55rem;line-height:1;flex:none}
.view.big{font-size:.78rem;padding:7px 15px;letter-spacing:.16em}
.view.none{color:var(--ink-3)}
/* screener ----------------------------------------------------------------- */
.disc-short{max-width:44ch;font-family:var(--mono);font-size:.66rem;line-height:1.9;color:var(--ink-3)}
.searchbar{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--border-2);
border-radius:var(--r-md);padding:0 var(--s4);height:52px;margin-bottom:var(--s4)}
.searchbar::before{content:"◆";color:var(--accent);font-size:.62rem}
.searchbar input{flex:1;background:transparent;border:0;outline:0;font:inherit;font-size:1rem;color:var(--ink)}
.searchbar input::placeholder{color:var(--ink-3)}
.kbdhint{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.facets{display:flex;flex-direction:column;gap:9px;margin-bottom:var(--s4)}
.facet-row{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.facet-label{width:62px;flex:none;padding-top:6px;font-size:.58rem;letter-spacing:.2em}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-size:.78rem;
padding:5px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);color:var(--ink-2)}
.chip.chip-mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.chip:hover{border-color:var(--border-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:rgba(229,195,106,.12);border-color:var(--border-hi);color:var(--accent-hi)}
.chip[aria-pressed="true"]::before{content:"◆";font-size:.45rem;line-height:1;color:var(--accent)}
.chip[data-empty="1"]{color:rgba(255,255,255,.22);border-color:var(--border)}
.chip-n{font-family:var(--mono);font-size:.58rem;color:var(--ink-3)}
.scr-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--border)}
.scr-bar,.scr-bar code{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.scr-bar-r{display:flex;align-items:center;gap:var(--s3)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:rgba(255,255,255,.22);
border-radius:var(--r-sm);padding:6px 12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.btn-ghost:not([disabled]){border-color:var(--border-2);color:var(--accent);cursor:pointer}
.btn-accent{background:rgba(229,195,106,.10);border:1px solid var(--border-hi);color:var(--accent);
border-radius:var(--r-sm);padding:9px 17px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;cursor:pointer}
.btn-accent:hover{background:rgba(229,195,106,.18)}
/* no overflow:hidden here — it would break the sticky header (see .thead) */
.table-wrap{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2)}
.table-wrap #scr-rows .trow:last-child{border-bottom:0;border-radius:0 0 var(--r-md) var(--r-md)}
/* The hidden attribute must outrank author display rules. .trow sets
display:grid, which beats the UA [hidden]{display:none}, so filtered-out
rows stayed on screen while the counter correctly said '1 of 45'. */
[hidden]{display:none!important}
.thead,.trow{display:grid;grid-template-columns:100px minmax(140px,1.35fr) 104px minmax(110px,1fr) 132px 104px 100px 50px minmax(96px,.82fr)}
/* Figures right-align so magnitudes line up and can be compared down the
column — the whole reason to show size as a column rather than a chip. */
.thead .num,.trow .num{text-align:right}
/* Sticky header rules, learned the hard way (2026-07-30):
1. OPAQUE background — translucent surfaces let rows show through.
2. The wrap must NOT clip (no overflow:hidden) — a clipping ancestor becomes
the sticky containing scrollport, which parked the header 60px INSIDE the
table, hiding the first row. Corners are rounded on the header and last
row instead. */
.thead{position:sticky;top:60px;z-index:20;background:#14171f;border-bottom:1px solid var(--border-2);
border-radius:var(--r-md) var(--r-md) 0 0}
.thead>div{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
padding:13px 12px;cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden}
.thead>div:hover{color:var(--ink-2)}
.thead>div.on{color:var(--accent)}
.thead>div.on.desc i::after{content:" ↓"} .thead>div.on.asc i::after{content:" ↑"}
.trow{align-items:center;min-height:46px;border-bottom:1px solid var(--border);color:var(--ink);font-size:.85rem}
.trow>*{padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow:hover,.trow.cur{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.trow .mono{font-size:.82rem}
.cell-sec{font-size:.8rem;color:var(--ink-2)}
.cards-mobile{display:none;flex-direction:column;gap:9px}
.empty-state{border:1px dashed var(--border-2);border-radius:var(--r-md);padding:60px var(--s5);text-align:center}
.empty-state .display{font-size:1.6rem;margin-bottom:10px}
.empty-state p{color:var(--ink-2);margin:0 0 var(--s5)}
/* company file ------------------------------------------------------------- */
.back{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s6)}
.back:hover{color:var(--accent)}
.co-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
padding-bottom:var(--s5);border-bottom:1px solid var(--border);margin-bottom:var(--s6)}
.co-head h1{margin:var(--s3) 0}
.co-meta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em}
.co-meta .sep{color:var(--border-2)}
.co-view{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* align-items:start — do not stretch a column past its content. A grid cell
defaults to `stretch`, so on a thin company page (one document, no scenario)
the left column was being sized to the unbounded chatter aside beside it and
carried ~700px of stretched emptiness. The columns are independent lengths;
letting each end where its content ends is the honest layout. */
.co-body{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
gap:var(--s7);align-items:start}
.timeline{display:flex;flex-direction:column;gap:10px}
.tl-item{display:grid;grid-template-columns:92px 1fr;gap:18px;background:var(--bg-2);border:1px solid var(--border);
border-radius:var(--r-md);padding:18px;color:var(--ink)}
.tl-item:hover{border-color:var(--border-hi);background:var(--surface)}
.tl-date{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.tl-tags{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.tl-title{font-size:1.4rem;line-height:1.2;margin-bottom:10px}
.tl-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3);
margin-top:var(--s3)}
.gallery img{border:1px solid var(--border);border-radius:var(--r-sm);display:block;width:100%}
/* Caption under each exhibit: what it is, and when it was drawn. The date is
the point — an undated chart is the one block on the page a reader cannot
age against the rest. */
.ex{margin:0}
.ex figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
margin-top:6px;line-height:1.3}
.ex-l{letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase;font-size:.6rem}
.ex-d{white-space:nowrap;font-size:.6rem}
.leads{display:flex;flex-direction:column;gap:10px;margin:var(--s3) 0 0}
.lead{background:var(--bg-2);border:1px solid var(--border);border-left:2px solid rgba(217,108,108,.42);
border-radius:0 var(--r-md) var(--r-md) 0;padding:13px 15px}
.lead p{margin:0 0 9px;font-size:.85rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
/* Structured channel chatter. These posts are written headline-first, so the
first line is the claim and carries the weight; the rest are the supporting
detail it was posted with. Before this they rendered as one undifferentiated
paragraph of Markdown asterisks and emoji. */
.ch-claim{margin:0 0 7px!important;font-size:.88rem!important;line-height:1.5!important;
color:var(--ink)!important;font-weight:500}
.ch-p{margin:0 0 6px!important;font-size:.81rem!important;color:var(--ink-2)!important}
.ch-item{margin:0 0 4px!important;font-size:.81rem!important;color:var(--ink-2)!important;
padding-left:14px;position:relative}
.ch-item::before{content:"";position:absolute;left:3px;top:.62em;width:4px;height:4px;
border-radius:50%;background:var(--accent);opacity:.6}
.lead code{font-family:var(--mono);font-size:.92em;letter-spacing:.02em;color:var(--accent);
background:var(--surface-3);border-radius:4px;padding:1px 5px}
.lead strong{color:var(--ink);font-weight:600}
/* An excerpt we could not locate the company in: real traffic, weaker claim on
being ABOUT this company. Shown, ranked last, and visibly quieter. */
.ch-off{opacity:.62}
/* EVENT-TYPE CHIP. What kind of fact the post asserts — never whether it is
good news, which is why there is no green and no red on this scale.
A valence tint would be a stronger claim than the "unverified" warning above
these cards can retract, and tone is not direction anyway: a pledge reads bad
and is often neutral, an order reads good and may be immaterial.
So the palette is CATEGORICAL, and only two categories are allowed to carry
any weight — the two a holder would most regret scrolling past. Regulatory
borrows --warn, the same colour the block's own "unverified" line already
uses, so it reads as "look at this", not as "bad". Order win takes the site
accent. Everything else is deliberately the same quiet grey: the WORD does
the work, and eight competing hues would turn a footer into a legend. */
.ch-kind{border:1px solid var(--border);border-radius:3px;padding:0 5px;
color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.ch-k-legal{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent)}
.ch-k-order{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
/* Not a claim about the company at all — a round-up that listed it, or a bullet
whose subject is someone else. Quietest thing in the footer. */
.ch-k-listing,.ch-k-commentary{opacity:.7}
/* COVERAGE BADGE — the thin data page's whole honesty mechanism.
A data page must never be mistaken for a dossier page, and the tell has to
survive skim-reading, so it is a full-width bar above the fold rather than a
discreet chip: left rule in the warn colour, the kind named in the site's
mono voice, and a sentence that says what is ABSENT. Understating this
devalues the 50 pages that did get an analyst. */
.cov-bar{display:flex;gap:var(--s4);align-items:flex-start;margin:var(--s5) 0 var(--s2);
padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--warn);
border-radius:var(--r-md);background:var(--bg-2)}
.cov-k{flex:0 0 auto;color:var(--warn);text-transform:uppercase;letter-spacing:.12em;
font-size:.7rem;padding-top:2px;white-space:nowrap}
.cov-t{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.6;max-width:76ch}
.cov-t b{color:var(--ink);font-weight:600}
@media(max-width:640px){.cov-bar{flex-direction:column;gap:var(--s2)}}
/* HOW TO READ A SCENARIO.
Beside the card where there is room, under it where there is not — one
markup, no duplicate copy to drift apart. The wrapper is a grid whose second
column only exists above 1180px; below that it collapses and the aside simply
follows the card, which is the right reading order on a phone anyway.
Quieter than the card it explains: this is scaffolding, not a finding. */
.scen-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start}
/* 1180 was the threshold for the card when it lived in a 881px column; out at
full width the second column fits far sooner, and a tablet has room for it. */
@media(min-width:900px){.scen-wrap{grid-template-columns:minmax(0,1fr) minmax(240px,320px)}}
.htr{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2);
padding:14px 16px}
.htr-h{color:var(--accent);letter-spacing:.14em;margin-bottom:9px}
.htr-list{margin:0;padding-left:1.1em;color:var(--ink-2);font-size:.78rem;line-height:1.65}
.htr-list li{margin-bottom:9px}
.htr-list b{color:var(--ink);font-weight:600}
.htr-list i{font-style:italic;color:var(--ink)}
.htr-foot{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--border);
color:var(--ink-3);line-height:1.7}
/* Why a page has no forward scenario. Plain sentence, no card — an explanation
should not look like a result. */
.scen-none{color:var(--ink-3);border-left:2px solid var(--border);
padding:2px 0 2px 10px;margin-top:var(--s3);line-height:1.6}
.lead:last-child p:last-of-type{margin-bottom:0}
.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-top:var(--s6)}
.kv,.kvs>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
padding:7px 0;border-bottom:1px solid var(--border);font-size:.82rem;color:var(--ink-2)}
.kv b{font-family:var(--mono);color:var(--ink);font-weight:400}
/* intel / indicators / advisor --------------------------------------------- */
.numpair{display:flex;gap:20px}
.numpair b{display:block;font-family:var(--mono);font-size:1.32rem;font-weight:500;color:var(--ink)}
.numpair div:first-child b{color:var(--accent)}
.tickerchips{display:flex;gap:5px;flex-wrap:wrap;padding-top:var(--s3);border-top:1px solid var(--border)}
.tickerchips span,.tickerchips a{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-2);
background:var(--surface-2);border:1px solid var(--border-2);border-radius:8px;padding:2px 6px}
.list{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.list-row{display:grid;grid-template-columns:100px 1fr auto;gap:20px;align-items:center;padding:18px;
border-bottom:1px solid var(--border);background:var(--bg-2);color:var(--ink)}
.list-row:hover{background:var(--surface)}
.list-title{font-size:1.32rem;line-height:1.25;margin-bottom:5px}
.channel{font-size:.75rem;letter-spacing:.18em;color:var(--ink-3);margin:var(--s6) 0 var(--s3)}
/* FILLS ITS CONTAINER. The 74ch cap was set for running prose and these are
release notes: they carry tables and code, and at 74ch the tier table's
"when" cell wrapped to eight lines while a third of the page sat empty
beside it. The container already bounds the measure (.list-row gives it one
1fr column of a 1440 shell), so the cap only ever subtracted. */
.prose{color:var(--ink-2);max-width:none}
.prose h2,.prose h3{color:var(--ink);margin:var(--s5) 0 var(--s2)}
.prose code{font-family:var(--mono);font-size:.82rem;background:var(--surface-2);border-radius:6px;padding:1px 5px}
.prose pre{font-family:var(--mono);font-size:.78rem;background:var(--bg-2);border:1px solid var(--border);
border-radius:var(--r-sm);padding:var(--s3);overflow:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.85rem}
.prose th,.prose td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border)}
.prose th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prose blockquote{margin:var(--s3) 0;padding-left:var(--s3);border-left:2px solid var(--border-2);color:var(--ink-3)}
.advisor{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.quiz{margin-top:0;padding:var(--s5)}
.q{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--border)}
.q-head{display:flex;gap:var(--s3);margin-bottom:var(--s4)}
.q-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent);padding-top:3px}
.q-opts{display:flex;gap:6px;flex-wrap:wrap;padding-left:30px}
.q-opts button{font:inherit;font-size:.82rem;padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;
background:var(--surface);border:1px solid var(--border);color:var(--ink-2)}
.q-opts button:hover{border-color:var(--border-2);color:var(--ink)}
.q-opts button[aria-pressed="true"]{background:rgba(229,195,106,.12);border-color:var(--border-hi);color:var(--accent-hi)}
.result{margin-top:0;padding:var(--s5);position:sticky;top:80px;background:var(--surface)}
.band{font-size:2rem;margin-bottom:8px}
.bar{height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden;margin:var(--s5) 0}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-deep),var(--accent));
transition:width var(--d2) var(--e-out)}
.kvs{display:flex;flex-direction:column}
.kvs b{font-family:var(--mono);color:var(--ink);font-weight:400}
/* overlay + footer --------------------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(4,5,7,.76);backdrop-filter:blur(4px);
display:flex;justify-content:center;padding:84px var(--s5) var(--s5)}
.overlay[hidden]{display:none}
/* The panel carried `background-color:#0C1017` — a dark literal with no light
override, so the search dropdown opened near-black on the cream page while
its text resolved to light-mode ink. It is a token now, per this file's own
rule: no theme value is ever written inline. */
.overlay-panel{width:100%;max-width:700px;background:var(--pane-face);
-webkit-backdrop-filter:var(--pane-blur);backdrop-filter:var(--pane-blur);
border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--pane-shadow);
overflow:hidden;max-height:74vh;display:flex;flex-direction:column;
animation:pgOverlay var(--d1) var(--e-out) both}
@keyframes pgOverlay{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.overlay-in{display:flex;align-items:center;gap:var(--s3);padding:0 18px;height:54px;border-bottom:1px solid var(--border);flex:none}
.overlay-in::before{content:"◆";color:var(--accent);font-size:.62rem}
.overlay-in input{flex:1;background:transparent;border:0;outline:0;font:inherit;font-size:1rem;color:var(--ink)}
.overlay-results{overflow-y:auto;padding:var(--s2)}
.overlay-results .group-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3);padding:11px 11px 7px}
.hit{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:10px 11px;
border-radius:var(--r-sm);color:var(--ink)}
.hit:hover,.hit.cur{background:var(--surface-3)}
.hit-l{display:flex;align-items:center;gap:var(--s3);min-width:0}
.hit-t{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--accent);width:88px;flex:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hit-n{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hit-m{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:none}
.overlay-foot{flex:none;border-top:1px solid var(--border);padding:10px 15px;font-size:.6rem;letter-spacing:.06em;color:var(--ink-3)}
.page-results{display:flex;flex-direction:column;gap:2px}
.foot{margin-top:var(--s9);border-top:1px solid var(--border);background:var(--bg-2)}
.foot .wrap{padding:var(--s6) var(--s5) var(--s7)}
/* Brand block left, three link columns hard right. `auto` on the second track
lets the columns size to their content and sit flush against the right edge,
under the search box in the chrome — rather than a fraction that stretched
the block and stranded it mid-page. */
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);
margin-bottom:var(--s6);align-items:start}
.foot-brand{max-width:52ch}
/* The colophon. Same mono/size as the two lines above it, deliberately: at
reading size this was a six-line display paragraph occupying a whole band of
its own. */
.foot-about{margin:var(--s4) 0 0;line-height:1.9;text-transform:none;letter-spacing:0}
.foot-routines span:not(.label){font-family:var(--mono);font-size:.62rem;line-height:2;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.foot-mark{display:flex;align-items:center;gap:11px;margin-bottom:var(--s3)}
.foot .mono.dim.sm{font-family:var(--mono);font-size:.62rem;line-height:2;letter-spacing:.06em;text-transform:uppercase}
/* PUSHED TO THE RIGHT EDGE, under the search box in the header above.
The link block was left-aligned inside a column that ran to the page edge, so
Sections and More clumped in the middle with ~450px of nothing to their right
— the widest empty gap on the site. Ending them flush right squares the
footer against the disclaimer rule below and the chrome above. */
.foot-links{display:flex;gap:46px;flex-wrap:wrap;justify-content:flex-end}
.foot-links>div{display:flex;flex-direction:column;gap:var(--s2)}
.foot-links a{font-size:.8rem;color:var(--ink-2)}
.foot-links a:hover{color:var(--ink)}
.foot-disc{border-top:1px solid var(--border);padding-top:var(--s5)}
/* FILL THE WIDTH WITHOUT RUINING THE MEASURE.
The cap was 104ch, so on a wide monitor the disclaimer stopped well short of
the rule above it and left an obvious empty right-hand block. Removing the
cap would have "fixed" that by running lines to 160 characters, which is
past the point where the eye reliably finds the next line.
Columns are the typographic answer to exactly this: the text uses the whole
width, each line stays near 70ch, and the count follows the viewport with no
breakpoint to maintain. Below ~1100px it collapses to one column on its own. */
/* One column, full width. Two columns meant reading down the left half and
jumping back up for the rest of one sentence — density at the cost of
reading order, which is the wrong trade for a disclaimer. */
.foot-disc p{margin:var(--s3) 0 0;font-size:.8rem;line-height:1.8;color:var(--ink-2);
text-wrap:pretty}
@media (max-width:1000px){
/* .statbar is no longer here: it is a flex row now and grid-template-columns
would be inert on it. Leaving a dead rule behind is how the next reader is
misled about what controls the layout — its wrapping is the flex-basis. */
.hero,.co-body,.advisor,.foot-top,.pillars{grid-template-columns:1fr}
.table-wrap{display:none}
.cards-mobile{display:flex}
.result{position:static}
}
/* ── PHONE CHROME ────────────────────────────────────────────────────────────
Three things share a 375px bar: identity, navigation, search. Only two of
them fit, so the wordmark drops to its tile — the P mark is the favicon and
is already how the site identifies itself in a browser tab — and the links
move behind a button. */
.navbtn{display:none;flex:none;width:36px;height:36px;border-radius:var(--r-sm);
align-items:center;justify-content:center;padding:0;cursor:pointer;
background:var(--surface);border:1px solid var(--border-2);color:var(--ink-2)}
.navbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round}
.navbtn[aria-expanded="true"]{color:var(--accent);border-color:var(--border-hi)}
@media (max-width:760px){
/* Gap only — the horizontal padding must stay var(--s5) so the bar's right
edge lines up with .wrap's. Tightening it to --s4 here put the search
button 8px wider than every card below it, which is the misalignment this
breakpoint was added to fix. Only the gap between items shrinks. */
.chrome-in{gap:var(--s3)}
/* Tile only. mark-sub is the tracked-out RESEARCH line; both go. */
.mark{grid-template-columns:auto}
.mark-name,.mark-sub{display:none}
.navbtn{display:inline-flex}
.searchbtn{margin-left:auto}
.searchbtn kbd{display:none}
/* The strip becomes a sheet under the bar. Positioned against .chrome, which
is sticky and therefore already a containing block. */
.nav{position:absolute;top:100%;left:0;right:0;display:none;flex:none;
flex-direction:column;align-items:stretch;gap:2px;padding:10px 12px 16px;
max-height:min(72vh,560px);overflow-y:auto;
/* OPAQUE, NOT GLASS. .chrome already carries a backdrop-filter, and a
nested one cannot sample past its parent's filtered region — the sheet
rendered as a clear pane with the page legible straight through it.
A navigation menu wants to be read, not seen through; --bg is the page's
own base colour, so it reads as the page folding down rather than as a
foreign panel. */
background:var(--bg);
border-bottom:1px solid var(--border-2);box-shadow:var(--pane-shadow)}
.nav.open{display:flex}
.nav a{font-size:.78rem;letter-spacing:.14em;padding:12px 13px;
border-radius:var(--r-sm)}
.nav a.navemoji{justify-content:flex-start}
}
@media print{
.chrome,.searchbtn,.navbtn,.facets,.overlay,.scr-bar{display:none}
body{background:#fff;color:#111}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* street intel — day page ---------------------------------------------------- */
.intel-statrail{display:flex;gap:var(--s5);padding:var(--s4) 0;margin-bottom:var(--s5);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
font-size:.78rem;color:var(--ink-2)}
.intel-statrail b{color:var(--accent);margin-right:6px}
.lead-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--s4) var(--s5);margin-bottom:var(--s3)}
.lead-top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.lead-rank{color:var(--ink-3);font-size:.72rem}
.lead-co{font-family:var(--serif);font-weight:600;font-size:1.02rem}
.lead-meta{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.pill{display:inline-block;font-style:normal;padding:2px 8px;border-radius:var(--r-full);
border:1px solid var(--border-2);color:var(--ink-2);font-size:.6rem;
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill-hi{border-color:var(--border-hi);color:var(--accent)}
.lead-claim{margin:var(--s3) 0 0;color:var(--ink);font-size:.9rem;line-height:1.6}
.lead-foot{display:flex;gap:var(--s4);margin-top:var(--s3);flex-wrap:wrap}
.lead-verify{margin-top:var(--s3)}
.lead-verify summary{cursor:pointer;color:var(--warn);letter-spacing:.12em}
.lead-verify ul{margin:var(--s2) 0 0;padding-left:18px;color:var(--ink-2);font-size:.84rem}
.lead-verify li{margin-bottom:4px}
.chan-nav{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0 var(--s6)}
.chan{margin-bottom:var(--s7)}
.chan .channel{font-size:.72rem;letter-spacing:.16em;color:var(--accent);
border-bottom:1px solid var(--border-2);padding-bottom:var(--s2);margin-bottom:var(--s4)}
.msg{position:relative;background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.msg-ts{display:inline-block;font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);
margin-bottom:6px;text-transform:uppercase}
.msg-body{font-size:.86rem;line-height:1.62;color:var(--ink-2);overflow-wrap:anywhere}
.msg-body strong{color:var(--ink)}
.msg-body a{color:var(--accent)}
.back-top{display:inline-block;margin-top:var(--s2);letter-spacing:.12em;text-transform:uppercase}
/* street intel — cross-day search ------------------------------------------- */
.int-hit-day{margin-bottom:var(--s6)}
.int-hit{display:block;background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s2);
text-decoration:none;color:var(--ink-2);
transition:border-color var(--d1) var(--e-inout),background var(--d1)}
.int-hit:hover{border-color:var(--border-hi);background:var(--surface-2)}
.int-hit-meta{display:flex;align-items:center;gap:var(--s3);margin-bottom:6px;flex-wrap:wrap}
.int-hit-text{font-size:.85rem;line-height:1.55;display:block}
.int-hit mark{background:rgba(229,195,106,.22);color:var(--accent);border-radius:3px;padding:0 2px}
/* flagship promo card (TODAY rail) ------------------------------------------ */
.promo-card{display:block;margin-top:var(--s4);background:var(--elev-glow),var(--surface);
border:1px solid var(--border-hi);border-radius:var(--r-md);
padding:var(--s4) var(--s5);color:var(--ink);
transition:border-color var(--d1) var(--e-inout),background var(--d1) var(--e-inout)}
.promo-card:hover{border-color:var(--accent);background:var(--elev-glow),var(--surface-2)}
.promo-card .display{font-size:1.18rem;margin:4px 0 6px}
.promo-card p{margin:0 0 10px;font-size:.8rem;line-height:1.55;color:var(--ink-2)}
/* rail pillars — the 01/02/03 boxes, vertical under the flagship card -------- */
.rail-pillars{display:flex;flex-direction:column;margin-top:var(--s2)}
.rail-pillars a{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;
border-bottom:1px solid var(--border);color:var(--ink)}
.rail-pillars a:last-child{border-bottom:0}
.rail-pillars .num{font-size:.62rem;letter-spacing:.14em;color:var(--accent)}
.rp-t{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.2}
.rail-pillars a:hover .rp-t{color:var(--accent)}
.rail-pillars p{margin:3px 0 0;font-size:.76rem;line-height:1.5;color:var(--ink-3)}
.rp-arrow{margin-left:auto;color:var(--ink-3);flex:none}
.rail-pillars a:hover .rp-arrow{color:var(--accent)}
/* keep the hero preview from dwarfing the rail */
.hero-main .thumb{max-height:640px;object-fit:cover;object-position:top center}
/* type-role discipline (2026-07-30): Fraunces = every title, Inter = nav/body,
mono = numbers/dates/small labels ONLY. The rail's primary labels are titles. */
.stat-row>div>div:first-child{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.25}
/* sector lines on research cards — named in user legibility feedback */
.card-foot .upper{color:var(--ink-2)}
/* ─────────────────────────────────────────────────────────────────────────────
THEME SYSTEM (31-Jul-2026). Dark is the design default and the no-JS state.
The header toggle (sun/moon/monitor, injected by search.js) sets
data-theme="light"|"dark" on ; "system" follows prefers-color-scheme.
Everything below REMAPS TOKENS — never invent a light value inline in a
template; add the token here so both themes stay in one place.
──────────────────────────────────────────────────────────────────────────── */
:root{color-scheme:dark}
:root[data-theme="light"]{
color-scheme:light;
/* TWO-TONE GLASS.
The light page is not flat cream — it carries gold, blue and terracotta
washes, a diamond lattice and a warm gradient, all attachment:fixed. The
cards' whole job is to sit ON that without hiding it, so they are
translucent and blurred rather than filled.
Opaque white failed because it blocked the ground completely: the texture
stopped dead at the card edge and every panel read as a printed sticker.
The previous translucent BLACK failed differently — a near-black tint over
a gold ground desaturates it toward grey, which is where the muddiness came
from. This is warm-tinted instead: light along the top edge, settling amber
at the base, so the card still recedes into the paper without going flat. */
--bg:#F4F1E8; --bg-2:#EDE9DD;
--surface:rgba(255,253,247,.55); --surface-2:rgba(255,254,250,.72);
--surface-3:rgba(150,116,44,.07);
--border:rgba(38,30,10,.10); --border-2:rgba(38,30,10,.16); --border-hi:rgba(143,106,18,.42);
/* THE FACE IS A WARM SHADOW, NOT A WHITE FILM.
Every white-tinted face tried here failed the same way: white over a gold
ground is a veil, and the lattice and the wash die under it however low the
alpha goes. The variant that worked tinted the other way — translucent warm
BLACK, which darkens without covering, so the ground still reads at full
texture straight through the card.
Its one weakness was desaturation: a neutral dark tint pulls gold toward
grey. `saturate()` in the blur below fixes exactly that, and it is why the
two belong together — the backdrop is boosted in chroma BEFORE the tint
darkens it, so the card recedes while the gold underneath stays gold.
That is the whole trick: the D face, with the glass optics it was missing. */
/* THE BLUR RADIUS IS THE WHOLE PROBLEM, AND IT WAS 20px.
The ground's texture is a 44px diamond tile drawn in 1px hairlines at .05
alpha. A 20px backdrop blur averages over roughly ±20px of that tile, so
the weave does not survive the trip through the card — it stopped dead at
every card edge, which is exactly the "bland filled panel" look. Measured
across a blur sweep: at 20 the weave is gone, at 8 it is a ghost, at 4 it
is readable, at 2 it is fully intact.
So the blur is 2px. That is still a real optical softening — it is what
separates glass from a coloured film — but it is far below the scale of
the pattern, so the pattern comes through. saturate() then does the work
the blur was wrongly being asked to do: it boosts the ground's chroma
under the pane, so the card reads as glass rather than as a tint.
Two layers in the face: a specular sheen thrown from the top-left corner,
over a very thin warm gradient. The tint is roughly half what it was —
it no longer has to compensate for a blur that flattened everything.
RESTORED TO THE ORIGINAL (variant D) ON REQUEST, 2026-08-02.
Translucent BLACK, no blur, no shadow — the recipe that was here before any
of the glass work. It is the most transparent face of everything tried: a
.05 tint and nothing else, so the weave, the gold wash and the corner
glows all read through at nearly full strength. Dark keeps its glass; only
this half reverts.
A NOTE ON WHAT WAS ACTUALLY RUNNING. The prose here used to continue past
a stray comment terminator, which left bare English inside this block. CSS
recovers by discarding up to the next semicolon — the end of --glass-face
— so the light face was being DROPPED and light inherited dark's
white-tinted face from :root. That is why light read pale and washed while
dark looked right, and it means the total-alpha figure this comment once
quoted was never what shipped. tests/test_portal_css.py now fails on it,
and caught a second instance while being written. */
--glass-face:rgba(26,21,6,.05);
--glass-blur:none;
/* One uniform warm hairline, no specular top edge and no lift: D separated
by tone alone, and adding either was what started making it a sticker. */
--glass-edge:rgba(26,21,6,.17);
--glass-edge-t:rgba(26,21,6,.17);
--glass-edge-b:rgba(26,21,6,.17);
--glass-lift:none;
/* Long lists: the same tint, lighter still, so 192 rows stay cheap. */
--glass-flat:rgba(26,21,6,.04);
--pane-face:rgba(252,249,241,.80); --pane-blur:blur(30px) saturate(150%);
--pane-shadow:0 24px 70px rgba(60,50,20,.28);
/* THE HEADER LETS THE GOLD THROUGH. It was a .62/.50 paper face behind a
26px blur — enough to wash the top-right gold glow out entirely, so the
bar read as a pale strip rather than as part of the page. The face is
roughly half as heavy now and the blur less than half as wide: the wash
and the weave both carry across it. Still blurrier than a card, because
this is the one surface content scrolls UNDER and it has to stay legible
while a headline passes beneath it. */
--chrome-face:linear-gradient(180deg,rgba(255,253,247,.62) 0%,
rgba(255,253,247,.46) 58%,rgba(255,253,247,0) 100%);
--chrome-blur:blur(10px) saturate(104%);
--chrome-edge:transparent;
--chrome-lift:none;
--chrome-rule:rgba(143,106,18,.42);
--shadow-1:0 1px 2px rgba(72,56,20,.05), 0 1px 3px rgba(72,56,20,.04);
--shadow-2:0 2px 5px rgba(72,56,20,.06), 0 8px 20px -8px rgba(72,56,20,.13);
--ink:#191B22; --ink-2:#3A3E4A; --ink-3:#5B6070;
--accent:#8F6A12; --accent-deep:#A87F1E; --accent-hi:#6B4E0B; --accent-underline:rgba(143,106,18,.32);
--good:#1E7A4C; --warn:#96690F; --bad:#B04848;
--eq:#8F6A12; --debt:#2E6E9E; --gold:#9A5432; --cash:#5F5AA8;
--elev-glow:radial-gradient(120% 120% at 50% 0%, rgba(143,106,18,.07), transparent 60%);
--glass:rgba(26,21,6,.05); --glass-brd:rgba(26,21,6,.17);
--st-good:#0E7A4C; --st-warn:#A16C08; --st-bad:#C24F4F;
--indigo:#5560C8; --teal:#0E8D80; --violet:#7C68C9;
--t-desk:#8F6A12; --t-dossier:#2E6E9E; --t-thesis:#5F5AA8; --t-preopen:#1E7A4C;
--t-postclose:#2E6E9E; --t-intel:#B04848; --t-indicator:#9A5432; --t-brief:#5B606F;
}
/* the few literals portal.css keeps outside tokens */
[data-theme="light"] .badge{background:rgba(26,21,6,.03)}
[data-theme="light"] .chip[data-empty="1"]{color:rgba(26,21,6,.35)}
[data-theme="light"] .btn-ghost{color:rgba(26,21,6,.38)}
[data-theme="light"] .overlay{background:rgba(240,236,226,.72)}
/* learn page + progress layer (template styles are dark literals) */
[data-theme="light"] li.learn-node.pgp-done .learn-n-title{color:rgba(28,30,38,.45);text-decoration-color:rgba(143,106,18,.4)}
[data-theme="light"] li.learn-node.pgp-done .learn-n-blurb{color:rgba(28,30,38,.35)}
[data-theme="light"] .pgp-bar{background:rgba(26,21,6,.10)}
[data-theme="light"] .pgp-count{color:rgba(28,30,38,.6)}
[data-theme="light"] #pgp-overall .meta{color:rgba(28,30,38,.55)}
[data-theme="light"] #pgp-overall .meta button{color:rgba(28,30,38,.45)}
[data-theme="light"] #pgp-modal{background:rgba(240,236,226,.86)}
[data-theme="light"] #pgp-cert{background:#FBF9F3}
[data-theme="light"] #pgp-cert .what{color:rgba(28,30,38,.7)}
[data-theme="light"] #pgp-cert .date{color:rgba(28,30,38,.5)}
[data-theme="light"] #pgp-cert .attest{color:rgba(28,30,38,.42)}
[data-theme="light"] #pgp-cert .acts .x{color:rgba(28,30,38,.6)}
/* goal calc page */
[data-theme="light"] #goal-app .g-stat .k{color:rgba(28,30,38,.55)}
[data-theme="light"] #goal-app .g-stat .s{color:rgba(28,30,38,.55)}
[data-theme="light"] #goal-app .g-legend{color:rgba(28,30,38,.6)}
[data-theme="light"] #goal-app .g-mile th{color:rgba(28,30,38,.5)}
[data-theme="light"] #goal-app .g-mile td{border-bottom:1px solid rgba(26,21,6,.08)}
[data-theme="light"] #goal-app .g-note{color:rgba(28,30,38,.62)}
[data-theme="light"] #goal-app .g-fact{color:rgba(28,30,38,.72)}
[data-theme="light"] #goal-app .g-field input[type=number]{background:rgba(26,21,6,.05)}
/* JS-drawn SVG uses attribute colors; CSS fill/stroke wins over attributes */
[data-theme="light"] svg [fill="rgba(237,239,244,.45)"]{fill:rgba(28,30,38,.55)}
[data-theme="light"] svg [stroke="rgba(255,255,255,.06)"]{stroke:rgba(26,21,6,.10)}
[data-theme="light"] svg [stroke="rgba(237,239,244,.35)"]{stroke:rgba(28,30,38,.4)}
/* emoji nav item (🧮 Goal Calc) — slightly larger than the label type, no
letterspacing so the glyph doesn't drift, same hover/on treatment */
.nav a.navemoji{font-size:1.05rem;letter-spacing:0;line-height:1}
/* screener sticky table head carries a literal dark bg (portal.css:218) */
[data-theme="light"] .thead{background:#E9E4D7}
/* the toggle itself */
.themeseg{display:flex;gap:2px;border:1px solid var(--border);border-radius:999px;padding:3px;margin-right:10px}
.themeseg button{width:26px;height:26px;border-radius:999px;background:none;border:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;padding:0}
.themeseg button:hover{color:var(--ink)}
.themeseg button.on{background:var(--surface-3);color:var(--accent)}
.themeseg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ── Light-mode elegance layer (user request 31-Jul-2026). Flat paper read as
bland; this dresses light mode in the family's gold: two soft gold glows
(top-right, low-left), a whisper of rust at the lower corner, a barely-there
diagonal gold hairline weave, over a warm top-to-bottom paper gradient.
Decoration NEVER exceeds ~.22 alpha at its brightest — legibility owns the
page; the gold owns the corners. .chrome stays a translucent paper glass so
the glows scroll beneath it; cards get a faint warm sheen so panels read as
surfaces, not cutouts. */
[data-theme="light"] body{
background:
radial-gradient(90% 70% at 85% -10%, rgba(232,196,104,.42), rgba(232,196,104,.14) 40%, transparent 65%),
radial-gradient(60% 50% at 8% 12%, rgba(214,166,60,.22), transparent 55%),
radial-gradient(55% 65% at 100% 55%, rgba(78,110,158,.10), transparent 60%),
radial-gradient(70% 80% at 12% 95%, rgba(154,84,50,.13), transparent 60%),
radial-gradient(150% 120% at 50% 40%, transparent 52%, rgba(110,80,15,.12) 100%),
url("data:image/svg+xml;utf8,"),
linear-gradient(168deg,#FCF8EE 0%,#F7EFDD 42%,#EFE3C8 100%);
background-attachment:fixed;
}
/* SEIGAIHA, NOT A LATTICE (chosen 2026-08-02).
The diamond tile crossed its own lines twice per 44px, and at the alpha the
glass needed to see it that density read as graph paper. Seigaiha is arcs:
they overlap rather than intersect, so the texture reads as a continuous
surface instead of a grid, and it stays quiet at a distance while still
being clearly THERE up close.
The 48x24 tile is a half-drop — the upper row is offset by half a period,
which is what makes the fans interlock rather than stack. Alpha .06 against
the lattice's .10: fewer, softer marks need less weight to register.
Quatrefoil damask was the runner-up and is a one-line swap; the tile is in
docs/ if that reads better after living with this one.
THE WEAVE WAS .05 AND THAT WAS THE REAL CEILING ON LIGHT MODE.
Thinning the card face helped dark but barely moved light, because the two
themes were never starting from the same place: gold at .05 alpha on ink is
a large relative step, the same gold at .05 on cream is almost nothing. The
pattern was already at the edge of visible BEFORE any card sat on it, so no
face was thin enough to rescue it — tested across a 3×3 of weave strength
against face alpha, and at .05 the weave failed under every face including
one thinner than dark's.
At .14 it survives the trip and the page reads as textured paper rather than
flat cream. Legibility is untouched: this is a hairline in the page's own
gold, an order of magnitude below the body text it sits behind. */
/* .chrome's light values used to be pinned here at .88 opacity — nearly solid,
and it would have beaten the --chrome-* tokens on specificity. Both themes
now come from those tokens, in one place, like every other surface. */
[data-theme="light"] .nav a.on{background:linear-gradient(180deg,#DDB94E,#9A7115);color:#241C04}
[data-theme="light"] .btn-accent{background:linear-gradient(180deg,#D9B44A,#8F6A12);color:#241C04;border:none}
/* .card / .g-card / .lead-card used to take a near-opaque white gradient here.
That is the fill this whole layer exists to avoid — it stopped the ground
dead at the card edge. They join the glass rule at the foot of this file
instead, so there is ONE card recipe rather than two that disagree. */
[data-theme="light"] .card:hover{border-color:rgba(158,118,26,.44)}
[data-theme="light"] .foot{background:linear-gradient(180deg, transparent, rgba(181,134,30,.12))}
/* Badges bake their colour as an inline --bc custom prop at BUILD time, so
the token remap can't reach them — override the prop per literal. Same
pastels, deepened for paper.
!important is REQUIRED, not defensive: --bc is set in a style attribute, and
an inline declaration outranks any selector. Without it this whole block is
dead code and every badge keeps its dark pastel on cream (WEEKLY measured
1.7:1, DOSSIER 1.99:1). It was dead from the day it was written; the
attribute selectors match fine, they just lost the cascade. */
[data-theme="light"] .badge[style*="#E0B86B"]{--bc:#7E5B0C!important} /* weekly */
[data-theme="light"] .badge[style*="#D8A657"]{--bc:#815F10!important}
[data-theme="light"] .badge[style*="#7FC0A6"]{--bc:#1C7347!important}
[data-theme="light"] .badge[style*="#8FB3D9"]{--bc:#2B6795!important}
[data-theme="light"] .badge[style*="#7FA8C0"]{--bc:#33667F!important}
[data-theme="light"] .badge[style*="#A99BE0"]{--bc:#6B54B8!important}
[data-theme="light"] .badge[style*="#B8C07F"]{--bc:#62691F!important}
[data-theme="light"] .badge[style*="#D98F7F"]{--bc:#9E4D3A!important}
[data-theme="light"] .badge[style*="#9AA3B0"]{--bc:#5B606F!important}
/* GOAL nav item: word + inline calculator glyph (no emoji — the abacus/
calculator emoji situation has no reliable cross-platform answer) */
.nav a.navemoji{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.12em}
.nav a.navemoji svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Learn level headlines in the family gold — both themes (user request). */
.learn-lv-head h2{color:var(--accent)}
[data-theme="light"] .badge{font-weight:700}
/* Auto-generated weekly snapshot card. No raster asset: a PNG cannot follow
the theme toggle, and the weekly never had one (it rendered the "NO CARD"
placeholder). Everything resolves through the palette variables, so light and
dark come from one rule set. Colour is semantic throughout — the gauge and
tiles are red/amber/green against the 47% and 53% deployment gates. */
.wcard{position:relative;overflow:hidden;border-radius:14px;padding:24px 22px 18px;
background:linear-gradient(155deg,var(--surface-3),var(--surface));
border:1px solid var(--border-2)}
.wcard::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;
background:linear-gradient(90deg,var(--accent),transparent 62%)}
.wcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
/* Card micro-labels across this file sat at .5–.6rem (8–9.6px) in --ink-3.
They are the legend for every number on the card, so they are read, not
glanced at; they move up a step to .62–.68rem in --ink-2. Tracking comes
down as size goes up so the labels occupy the same width and no layout
assumption below changes. */
.wcard-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;
text-transform:uppercase;color:var(--accent)}
.wcard-date{font-family:var(--mono);font-size:.7rem;color:var(--ink-2)}
.wcard-regime{font-family:var(--serif);font-weight:600;line-height:1.05;
font-size:clamp(1.9rem,4.6vw,2.8rem);color:var(--ink);margin:8px 0 0;letter-spacing:-.01em}
.wcard-head{margin:8px 0 0;max-width:52ch;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.wg-pos{color:var(--good)} .wg-neg{color:var(--bad)} .wg-warn{color:var(--accent)}
.wg-fill-pos{background:var(--good)} .wg-fill-neg{background:var(--bad)}
.wg-fill-warn{background:var(--accent)}
.wgauge{margin-top:18px}
.wgauge-lab{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-2);margin-bottom:7px}
.wgauge-lab b{font-size:.98rem;letter-spacing:0}
.wgauge-track{position:relative;height:9px;border-radius:5px;overflow:hidden;
background:var(--border);box-shadow:inset 0 0 0 1px var(--border)}
.wgauge-track>i{display:block;height:100%;border-radius:5px}
.wgauge-gate{position:absolute;top:-3px;width:1px;height:15px;background:var(--ink-3);opacity:.5}
.wgauge-scale{display:flex;justify-content:space-between;margin-top:6px;
font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--ink-3)}
.wtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;margin-top:16px}
.wtile{border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--surface-2)}
.wtile-k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.wtile-v{font-family:var(--serif);font-size:1.05rem;font-weight:600;line-height:1.1}
.wmovers{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}
.wmovers-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-2);margin-right:2px}
.wmover{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border-radius:999px;
border:1px solid var(--border);font-size:.73rem;color:var(--ink-2)}
.wmover b{font-family:var(--mono);font-size:.72rem}
.wcard-foot{margin-top:15px;padding-top:11px;border-top:1px solid var(--border)}
.wchip-src{font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-3)}
/* Weekly archive grid. The daily grid is sized for small thumbnails; at that
width the snapshot card clipped the regime word and collapsed its tiles into
a single column. These cards ARE the dashboard preview, so they get room. */
.grid.wgrid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){ .grid.wgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1240px){ .grid.wgrid{grid-template-columns:repeat(3,1fr)} }
.wgrid-card{padding:0;overflow:hidden;gap:0}
.wgrid-card .wcard{border:0;border-radius:0;background:transparent;padding:20px 18px 14px}
.wgrid-card .wcard::after{inset:0 0 auto 0}
/* THE FOOT MUST SHARE THE BODY'S GUTTER.
.wgrid-card zeroes its own padding so the inner .wcard can run its coloured
rule edge to edge, and .wcard re-establishes an 18px gutter. The foot is a
sibling of .wcard, not a child, so it inherited the zero and sat 18px to the
left of everything above it — the date in the foot did not line up with the
MARKET REGIME eyebrow or the regime title, and the read time hung further
right than the date opposite it. Same 18px, both edges. */
.wgrid-card .card-foot{padding:11px 18px 13px}
/* Container-relative so the word cannot outgrow its column — the 4.6vw clamp
scaled to the viewport, not the card, and overflowed at three-up. */
.wgrid-card .wcard-regime{font-size:clamp(1.45rem,2.1vw,1.95rem)}
.wgrid-card .wcard-head{font-size:.83rem;margin-top:7px}
.wgrid-card .wtiles{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:13px}
.wgrid-card .wtile{padding:7px 8px}
.wgrid-card .wtile-v{font-size:.9rem}
.wgrid-card .wtile-k{font-size:.58rem;letter-spacing:.08em}
.wgrid-card .wgauge{margin-top:14px}
.wgrid-card .wmovers{margin-top:11px;gap:5px}
.wgrid-card .wmover{font-size:.68rem;padding:3px 7px}
.wgrid-card .wcard-foot{margin-top:12px}
.wcard-regime{overflow-wrap:anywhere;hyphens:auto}
/* Breadth gauges — three moving-average participation reads with last week as a
ghost marker, so direction is legible before the delta is read. */
.wgauges{display:grid;gap:11px;margin-top:16px}
.wg-lab{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-2);margin-bottom:5px}
.wg-lab b{font-size:.92rem;letter-spacing:0}
.wg-track{position:relative;height:7px;border-radius:4px;background:var(--border);
box-shadow:inset 0 0 0 1px var(--border);overflow:visible}
.wg-track>i{display:block;height:100%;border-radius:4px}
.wg-gate{position:absolute;top:-2px;width:1px;height:11px;background:var(--ink-3);opacity:.45}
.wg-prev{position:absolute;top:-3px;width:2px;height:13px;background:var(--ink-2);
opacity:.65;border-radius:1px}
.wg-delta{font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;margin-top:4px}
.wg-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--ink-3)}
.wg-legend-gate{width:1px;height:9px;background:var(--ink-3);opacity:.55}
.wg-legend-prev{width:2px;height:9px;background:var(--ink-2);opacity:.7;margin-left:8px}
/* Archive year sections. Collapsed years still render into the DOM, so the page
stays one indexable URL — the disclosure only controls what the reader sees. */
.arc-yr{border-top:1px solid var(--border);padding:14px 0 4px;margin:0}
.arc-yr:first-of-type{border-top:0}
.arc-sum{display:flex;align-items:baseline;gap:12px;cursor:pointer;list-style:none;
padding:6px 0 14px;user-select:none}
.arc-sum::-webkit-details-marker{display:none}
.arc-sum::before{content:"+";font-family:var(--mono);font-size:.9rem;color:var(--accent);
width:14px;display:inline-block}
.arc-yr[open] .arc-sum::before{content:"\2212"}
.arc-yr-n{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink)}
.arc-sum:hover .arc-yr-n{color:var(--accent)}
.arc-yr-c{margin-left:auto}
/* What management said — concall guidance on the company page. The quote is
the primary element, not the extracted facts: the facts are our reading, the
quote is the company's own words and the thing a reader can verify against
the linked filing. Sized and coloured accordingly. */
.concalls{display:grid;gap:12px;margin-top:var(--s3)}
.concall{border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;
background:var(--surface)}
.cc-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.cc-fact{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
padding:3px 9px;border-radius:var(--r-full);border:1px solid var(--border-2);
color:var(--ink-2);white-space:nowrap}
.cc-quote{margin:0;padding-left:12px;border-left:2px solid var(--accent-underline);
font-size:.92rem;line-height:1.6;color:var(--ink);text-wrap:pretty}
.cc-foot{margin-top:9px}
.cc-foot a{text-decoration:underline;text-decoration-color:var(--accent-underline);
text-underline-offset:3px}
@media(max-width:600px){ .cc-fact{white-space:normal} }
/* ---------------------------------------------------------------------------
LIQUID GLASS — one card recipe, both themes.
This was light-only, on the reasoning that dark cards already separate by
luminance and blur would just muddy them. True as far as it went, and it
missed the actual reason glass was invisible in dark: THERE WAS NOTHING
BEHIND IT. The dark page was a flat fill, and a pane refracts nothing over
a flat fill however well it is built. Dark now carries the same ground as
light — the gold glow, the lattice, the corner washes, at roughly a third
the intensity — so the same four ingredients do the same work in both:
face a tint, warm-dark on paper / white on ink, that darkens or
lifts WITHOUT covering what is underneath
blur the refraction, with saturate() restoring the chroma the tint
would otherwise flatten
rim a hairline in the ground's own colour, dimmer along the bottom
so the pane has an up
lift a white specular on the top edge and one wide, low shadow
Everything resolves through tokens, so the two themes differ only in the
values at the top of this file — never in this rule.
--------------------------------------------------------------------------- */
:root .panel,
:root .card,
:root .g-card,
:root .lead-card,
:root .tl-item,
:root .lead,
:root .pace-box,
:root .fscen,
:root .promo-card,
:root .hero-main{
background:var(--glass-face);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-t);
border-bottom-color:var(--glass-edge-b);
box-shadow:var(--glass-lift)}
:root .card:hover{border-color:var(--border-hi);background:var(--glass-face)}
:root .tl-item:hover,
:root .promo-card:hover{border-color:var(--border-hi)}
/* Long lists take the flat face: same colour story, no per-row blur. 192 rows
of backdrop-filter costs real scroll performance for a difference nobody can
see at row height.
`:root ` IS LOad-BEARING HERE. scenario.css is linked after this file and
defines .sb-sc / .sb-row:hover itself, so a bare .sb-sc ties on specificity
and loses on order. These previously carried :root[data-theme="light"] and
won that way; dropping the theme prefix without keeping :root would have
silently handed the rule back to scenario.css. */
:root .sb-sc{background:var(--glass-flat);
border:1px solid var(--glass-edge);box-shadow:var(--shadow-1)}
:root .sb-sc.on{border-color:var(--accent);background:var(--surface-3)}
:root .sb-row:hover{background:var(--glass-flat)}
:root .sb-list{border-top-color:var(--border)}
/* Where a browser cannot blur there is also no saturate() to lift the ground,
so the face has to carry the separation on its own — a touch more tint, same
sheen. Still translucent: the weave reads through either way, which is the
point of the whole layer. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.panel,.card,.g-card,.lead-card,.tl-item,.lead,.pace-box,.fscen{
background:
radial-gradient(120% 90% at 6% -10%, rgba(255,255,255,.10), transparent 52%),
linear-gradient(176deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
/* Light needs no fallback at all now: its face is a flat tint with no blur
to lose, so it renders identically either way. Explicitly restated so a
future edit to the dark rule above cannot leak a gradient onto it. */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .g-card,
:root[data-theme="light"] .lead-card,
:root[data-theme="light"] .tl-item,
:root[data-theme="light"] .lead,
:root[data-theme="light"] .pace-box,
:root[data-theme="light"] .fscen{background:var(--glass-face)}
}
/* ── Live price chart (TradingView widget) ───────────────────────────────────
Sized in CSS, not by the widget: `autosize:true` fills its container, so the
container is the only thing that decides height and the block never jumps
during load. Shorter on a phone, where a 460px chart eats the whole screen. */
/* Full page width, below the two-column grid — it is the widest thing on the
page and a price chart squeezed into a 1.9fr column wastes the one block
that genuinely benefits from horizontal room. Height scales with the shell
so a wide monitor gets a taller chart rather than a letterbox. */
.tvwrap{height:clamp(380px,42vh,620px);margin-top:var(--s3);
border:1px solid var(--border);
border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.tvwrap iframe{display:block;border:0}
.tv-credit{margin-top:7px;text-align:right}
.tv-credit a{color:var(--ink-3)}
.tv-credit a:hover{color:var(--accent)}
/* Blocked, offline, or the symbol never resolved. Say so — an empty 460px
frame reads as a broken page, and the reader still gets a way through. */
.tvwrap.tv-failed{display:grid;place-items:center;height:150px}
.tvwrap.tv-failed::after{content:"Live chart unavailable — open it on TradingView below.";
font-family:var(--mono);font-size:.72rem;color:var(--ink-3);padding:0 18px;text-align:center}
@media(max-width:760px){ .tvwrap{height:320px} }
/* ── Company price chart (ours, inline SVG) ──────────────────────────────────
Every colour is a token or currentColor, which is what lets one build-time
SVG serve light, dark, rising and falling without a second asset. The
direction class on the figure sets currentColor; the line, the area gradient
and the last-price dot all inherit it. */
.pchart{margin:var(--s3) 0 0;padding:14px 10px 6px;border:1px solid var(--border);
border-radius:var(--r-md);background:var(--glass-face)}
.pchart svg{width:100%;height:clamp(260px,34vh,400px);display:block;overflow:visible}
.pchart.pc-up{color:var(--good)}
.pchart.pc-dn{color:var(--bad)}
.pc-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;
vector-effect:non-scaling-stroke}
.pc-area{stroke:none}
.pc-dot{fill:currentColor}
/* Moving averages are reference, not the subject — thinner, dimmer, and the
200 quieter than the 50. */
.pc-ma{fill:none;vector-effect:non-scaling-stroke}
.pc-ma50{stroke:var(--accent);stroke-width:1.2;opacity:.75}
.pc-ma200{stroke:var(--ink-3);stroke-width:1.2;opacity:.5;stroke-dasharray:5 4}
.pc-grid{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.pc-vgrid{opacity:.55}
.pc-vol{opacity:.62}
.pc-vol.v-up{fill:var(--good)}
.pc-vol.v-dn{fill:var(--bad)}
/* Text inside a non-uniformly scaled viewBox would stretch — these are sized in
px and the SVG is only scaled on one axis, so they stay legible. */
.pc-ylab,.pc-xlab,.pc-last{font-family:var(--mono);font-size:11px;fill:var(--ink-3)}
.pc-xlab{text-anchor:middle}
.pc-vlab{text-anchor:start;font-size:9.5px;opacity:.7}
.pc-last{fill:currentColor;font-weight:600}
.pc-foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
margin-top:8px;padding:0 4px}
.pc-key{display:inline-flex;align-items:center;gap:6px}
.pc-key i{display:inline-block;width:13px;height:2px;border-radius:2px;margin-left:8px}
.pc-key .k-line{background:currentColor}
.pc-key .k-ma50{background:var(--accent)}
.pc-key .k-ma200{background:var(--ink-3);opacity:.6}
@media(max-width:760px){ .pchart svg{height:250px} .pc-foot{font-size:.6rem} }
/* Chart moved into the left column by cochart.js. Narrower box, so the strip
and the type need a little less room; margin-top mirrors the h3 spacing it
now sits under rather than the full-width block's. */
.pchart.pc-inline{margin-top:var(--s5)}
.pchart.pc-inline svg{height:clamp(230px,26vh,320px)}
.pchart.pc-inline .pc-foot{font-size:.58rem;gap:4px 12px}