/* VENDORED from screamingface-brand@c9673b3 (public/style.css) — do not edit here.
   Source of truth: screamingface-brand repo (tokens/tokens.json + node build.mjs). Re-copy to update. */
/* =====================================================================
   screamingface — brand system  ·  brand.screamingface.ai
   Aesthetic: infra-retro-modern. Square, hairline, monochrome-with-one-
   accent. Refined, not "vibe-coded" (see the anti-rules in the guide).

   FULLY TOKENISED. Every value here is a var() from tokens.css (generated
   from tokens/tokens.json by build.mjs). This file only arranges tokens
   into the interface — it contains no raw colors, sizes, or fonts.

   Type roles (the whole scale, deliberately few):
     display  Garamond  --text-display   h1
     metric   Mono      --text-metric    big stat numbers
     lead     Sans      --text-lead      opening line
     body     Sans      --text-body      prose (incl. notes)
     sm       Sans/Mono --text-sm        captions, tables, climb, buttons
     micro    Mono      --text-micro     chart text, rail, footer
     label    Mono caps --text-label     eyebrow, h2, kickers, table headers
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- top rail (infra header) -------------------------------------- */
.rail {
  position: sticky; top: 0; z-index: 20;
  height: var(--rail-h); display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5); background: var(--bg);
  border-bottom: var(--border-hairline) solid var(--line);
  font-family: var(--f-mono); font-size: var(--text-micro);
}
.rail .brand { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); font-family: var(--f-wordmark); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
.rail .brand .m { font-size: var(--text-body); }
.rail .sep { color: var(--ink-3); }
.rail .crumbs { display: flex; gap: var(--space-4); color: var(--ink-3); }
.rail .crumbs a { color: var(--ink-2); text-decoration: none; }
.rail .crumbs a:hover { color: var(--ink); }
.rail .crumbs a.here { color: var(--ink); border-bottom: var(--border-hairline) solid var(--ink); }
.rail .spacer { margin-left: auto; }
.rail .toggle {
  font-family: var(--f-mono); font-size: var(--text-micro); cursor: pointer;
  background: none; border: var(--border-hairline) solid var(--line-2); color: var(--ink-2);
  padding: var(--space-1) var(--space-2); line-height: 1; border-radius: var(--radius-none);
}
.rail .toggle:hover { color: var(--ink); border-color: var(--ink-2); }

/* ---- column ------------------------------------------------------- */
.wrap { max-width: var(--col); margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-12); }
.wrap.wide { max-width: var(--col-wide); }

/* ---- type --------------------------------------------------------- */
h1 {
  font-family: var(--f-display); font-weight: var(--weight-semibold);
  font-size: var(--text-display); letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight); color: var(--ink); margin: 0 0 var(--space-4);
}
/* label role — the single treatment for every small caps label */
h2, .eyebrow, .kicker, thead th, .stage-head, .deltawrap .k, .stats .k, .logo-cell .cap, .rules h4, #gate .t {
  font-family: var(--f-mono); font-weight: var(--weight-semibold);
  font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-3);
}
h2 { margin: var(--space-9) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--border-hairline) solid var(--line); }
h3 { font-family: var(--f-sans); font-weight: var(--weight-semibold); font-size: var(--text-body); margin: var(--space-6) 0 var(--space-2); color: var(--ink); }

p { margin: 0 0 var(--space-4); }
.lead { font-family: var(--f-sans); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--ink); letter-spacing: var(--tracking-tight); }
small, .small { font-size: var(--text-sm); }
.meta { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); }
.faint { color: var(--ink-3); }
.mono { font-family: var(--f-mono); }
strong, b { font-weight: var(--weight-semibold); color: var(--ink); }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin: var(--space-1) 0; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

hr { border: 0; border-top: var(--border-hairline) solid var(--line); margin: var(--space-7) 0; }

code, kbd {
  font-family: var(--f-mono); font-size: 0.85em;
  background: var(--surface); border: var(--border-hairline) solid var(--line); padding: 0 var(--space-1); border-radius: var(--radius-none);
}
pre {
  font-family: var(--f-mono); font-size: var(--text-sm); line-height: var(--leading-snug);
  background: var(--surface); border: var(--border-hairline) solid var(--line);
  padding: var(--space-4) var(--space-5); overflow-x: auto; margin: 0 0 var(--space-4); color: var(--ink);
}
pre .ok { color: var(--gain); }
pre .dim { color: var(--ink-3); }

/* ---- masthead ----------------------------------------------------- */
.masthead { margin-bottom: var(--space-1); }
.masthead .eyebrow { display: block; margin-bottom: var(--space-3); }

/* ---- kicker / note ------------------------------------------------ */
.kicker { display: block; margin-bottom: var(--space-2); }
.note { border: var(--border-hairline) solid var(--line); border-left: var(--border-strong) solid var(--ink); background: var(--surface); padding: var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-body); }
.note.gain { border-left-color: var(--gain); }
.note.gain .kicker { color: var(--gain); }

/* ---- tables ------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); }
thead th { border-bottom: var(--border-hairline) solid var(--line-2); }
tbody tr:hover { background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.sota td { background: var(--gain-bg); }
tr.sota td:first-child { box-shadow: inset var(--border-strong) 0 0 var(--gain); }

/* ---- swatches ----------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: var(--border-hairline); background: var(--line); border: var(--border-hairline) solid var(--line); }
.swatch { background: var(--bg); }
.swatch .chip { height: var(--space-10); border-bottom: var(--border-hairline) solid var(--line); }
.swatch .m { font-family: var(--f-mono); font-size: var(--text-label); padding: var(--space-2); text-transform: none; letter-spacing: var(--tracking-normal); }
.swatch .m b { display: block; }
.swatch .m span { color: var(--ink-3); }

/* big-figure unit (the % set small + muted so the number leads) */
.v .u, .big .u { font-size: 0.45em; font-weight: var(--weight-regular); opacity: 0.5; margin-left: 2px; letter-spacing: 0; }

/* token-reference inline swatch (rendered by guide.js) */
.tok-sw { display: inline-block; width: 11px; height: 11px; border: var(--border-hairline) solid var(--line-2); vertical-align: -1px; margin-right: var(--space-2); }
#tok-semantic td:first-child, #tok-type td:first-child, #tok-text td:first-child { color: var(--ink); }

/* logo / mark */
.logo-row { display: flex; flex-wrap: wrap; border: var(--border-hairline) solid var(--line); margin: 0 0 var(--space-4); }
.logo-cell { padding: var(--space-6) var(--space-7); border-right: var(--border-hairline) solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; flex: 1; min-width: 150px; }
.logo-cell:last-child { border-right: 0; }
.logo-cell .big-mark { font-size: var(--space-10); line-height: 1; user-select: none; }
.logo-cell img { width: 72px; height: 72px; }
.logo-cell .cap { display: block; }

/* ---- anti-rules grid (do / don't) --------------------------------- */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--border-hairline); background: var(--line); border: var(--border-hairline) solid var(--line); font-size: var(--text-sm); }
.rules > div { background: var(--bg); padding: var(--space-3); }
.rules .no { border-top: var(--border-strong) solid var(--blind); }
.rules .yes { border-top: var(--border-strong) solid var(--gain); }
.rules h4 { margin-bottom: var(--space-2); }
.rules .no h4 { color: var(--blind); }
.rules .yes h4 { color: var(--gain); }
.rules ul { padding-left: var(--space-4); margin: 0; }
.rules li { font-family: var(--f-sans); }
@media (max-width: 620px) { .rules { grid-template-columns: 1fr; } }

/* ---- figure / chart ----------------------------------------------- */
figure { margin: 0 0 var(--space-4); border: var(--border-hairline) solid var(--line); background: var(--bg); }
figure svg { display: block; width: 100%; height: auto; }
figcaption { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); padding: var(--space-2) var(--space-3); border-top: var(--border-hairline) solid var(--line); }
/* all chart text is mono/micro by default; bold via inline font-weight where needed */
figure svg text { font-family: var(--f-mono); font-size: var(--text-micro); }
/* svg theme hooks */
.svg-ink   { fill: var(--ink); }
.svg-ink2  { fill: var(--ink-2); }
.svg-ink3  { fill: var(--ink-3); }
.svg-line  { stroke: var(--line); }
.svg-line2 { stroke: var(--line-2); }
.svg-axis  { stroke: var(--ink-3); }
.svg-gain  { fill: var(--gain); }
.svg-gain-s{ stroke: var(--gain); }
.svg-base  { fill: var(--ink-3); }
.svg-blind { fill: var(--blind); }
/* Data points always sit on top of lines/gridlines with a clean halo. Markers
   must be drawn AFTER lines and kept opaque for the halo to read. */
figure svg circle { paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; }
figure svg circle[fill="none"] { stroke-width: 1.3px; }  /* ring markers keep their own stroke */

/* ---- climb (direction A) ------------------------------------------ */
.climb { font-family: var(--f-mono); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-4); }
.climb .row { display: grid; grid-template-columns: 210px 1fr 52px; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
.climb .lbl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.climb .track { display: block; background: var(--surface); border: var(--border-hairline) solid var(--line); height: 18px; overflow: hidden; }
.climb .fill { display: block; height: 100%; }
.climb .fill.base { background: var(--ink-3); opacity: 0.5; }
.climb .fill.ens  { background: var(--ink-3); }
.climb .fill.priv { background: var(--gain); opacity: 0.6; }
.climb .fill.sota { background: var(--gain); }
.climb .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.stage-head { display: block; margin: var(--space-4) 0 var(--space-1); }

/* ---- before/after delta (direction C) ----------------------------- */
.deltawrap { display: grid; grid-template-columns: 1fr auto 1fr; border: var(--border-hairline) solid var(--line); font-family: var(--f-mono); margin: var(--space-1) 0 var(--space-4); }
.deltawrap .cell { padding: var(--space-6) var(--space-5); }
.deltawrap .cell.mid { display: flex; align-items: center; justify-content: center; border-left: var(--border-hairline) solid var(--line); border-right: var(--border-hairline) solid var(--line); background: var(--surface); font-size: var(--text-lead); color: var(--gain); }
.deltawrap .k { display: block; }
.deltawrap .big { font-size: var(--text-display); line-height: var(--leading-tight); margin: var(--space-2) 0 var(--space-1); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.deltawrap .cell.before .big { color: var(--blind); }
.deltawrap .cell.after .big { color: var(--gain); }
@media (max-width: 620px) { .deltawrap { grid-template-columns: 1fr; } .deltawrap .cell.mid { border: 0; border-top: var(--border-hairline) solid var(--line); border-bottom: var(--border-hairline) solid var(--line); } }

/* ---- stat row (demo) ---------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); border: var(--border-hairline) solid var(--line); font-family: var(--f-mono); margin: 0 0 var(--space-5); }
.stats .s { padding: var(--space-4); border-right: var(--border-hairline) solid var(--line); }
.stats .s:last-child { border-right: 0; }
.stats .s .v { font-size: var(--text-metric); font-weight: var(--weight-semibold); margin-top: var(--space-2); font-variant-numeric: tabular-nums; color: var(--ink); }
.stats .s .v.gain { color: var(--gain); }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } .stats .s { border-right: 0; border-bottom: var(--border-hairline) solid var(--line); } }

/* ---- buttons / deep-link ------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: var(--border-hairline) solid var(--ink); background: var(--ink); color: var(--bg); text-decoration: none; cursor: pointer; border-radius: var(--radius-none); }
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--surface); }

/* ---- footer ------------------------------------------------------- */
.foot { margin-top: var(--space-10); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--line); font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }

/* ---- gate --------------------------------------------------------- */
#gate { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); z-index: 100; }
#gate .m { font-size: var(--space-9); }
#gate .t { color: var(--ink-3); }
#gate form { display: flex; gap: var(--space-2); }
#gate input { font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--bg); border: var(--border-hairline) solid var(--line-2); color: var(--ink); outline: none; width: 200px; border-radius: var(--radius-none); }
#gate input:focus { border-color: var(--ink); }
#gate input.err { border-color: var(--blind); }
#gate button { font-family: var(--f-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--bg); border: var(--border-hairline) solid var(--ink); cursor: pointer; border-radius: var(--radius-none); }
#gate .e { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--blind); height: 14px; }
body.locked { overflow: hidden; }

@media (max-width: 620px) {
  .wrap { padding: var(--space-7) var(--space-4) var(--space-11); }
  h1 { font-size: var(--text-metric); }
  .lead { font-size: var(--text-body); }
  /* keep the full nav available on mobile: let the rail wrap instead of hiding it */
  .rail { height: auto; flex-wrap: wrap; padding: var(--space-2) var(--space-4); gap: var(--space-1) var(--space-3); }
  .rail .crumbs { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .rail .spacer { display: none; }
  .climb .row { grid-template-columns: 124px 1fr 44px; }
}