/* BB2G house palette: navy #0A1E44 · red #C8102E · gold #C9A227 · parchment #FAF6EC */
:root{
  --navy:#0A1E44; --red:#C8102E; --gold:#C9A227; --parch:#FAF6EC;
  --ink:#14181f; --muted:#5a6472; --rule:#e2ddcf; --bg:#FAF6EC; --card:#fffdf7;
  --good:#1d6b45; --bad:#C8102E; --warn:#8a6a10; --none:#9aa3ad;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Calibri,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eef1f5; --muted:#a2acbb; --rule:#2a3444; --bg:#0b1220; --card:#111b2c; --parch:#0b1220;
  --good:#5fd39b; --bad:#ff8a9c; --warn:#e2bb55; --none:#63707f;
}}
:root[data-theme="dark"]{
  --ink:#eef1f5; --muted:#a2acbb; --rule:#2a3444; --bg:#0b1220; --card:#111b2c; --parch:#0b1220;
  --good:#5fd39b; --bad:#ff8a9c; --warn:#e2bb55; --none:#63707f;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--gold);color:#000;padding:10px 14px;z-index:99;border-radius:6px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
  padding:12px 20px;background:color-mix(in srgb,var(--navy) 96%,black);color:#fff;border-bottom:3px solid var(--gold)}
.brand{font-family:var(--serif);font-weight:700;letter-spacing:.2px;margin-right:auto}
.navlinks{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:#e9e3d2;text-decoration:none;font-size:14px;padding:3px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}

/* full-bleed hero */
.hero{position:relative;min-height:clamp(340px,62vh,620px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,30,68,.30) 0%,rgba(10,30,68,.62) 46%,rgba(10,30,68,.90) 100%)}
.hero-in{padding:40px 20px 26px;max-width:min(72ch,100%);margin:0 auto;width:100%}
.hero h1{font-family:var(--serif);color:#fff;font-size:clamp(30px,5.2vw,54px);line-height:1.08;margin:.12em 0 .3em;
  text-shadow:0 2px 18px rgba(0,0,0,.5)}
.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:var(--gold);margin:0;font-weight:700}
.lede{color:#f2eee2;font-size:clamp(16px,2.1vw,20px);margin:0;max-width:62ch;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.cred{position:absolute;right:12px;bottom:8px;margin:0;font-size:10.5px;color:rgba(255,255,255,.72);
  font-family:var(--mono);max-width:60%;text-align:right}
header.plain{max-width:74ch;margin:0 auto;padding:38px 20px 8px}
header.plain h1{font-family:var(--serif);font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin:.1em 0 .3em}
header.plain .lede{color:var(--muted);text-shadow:none}

main{max-width:74ch;margin:0 auto;padding:26px 20px 60px}
section{margin:0 0 34px}
h2{font-family:var(--serif);font-size:clamp(21px,3vw,29px);line-height:1.2;margin:1.6em 0 .5em;color:var(--ink)}
h3{font-family:var(--serif);font-size:19px;margin:1.4em 0 .4em}
p{margin:0 0 .95em}
blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid var(--gold);background:var(--card);
  font-family:var(--serif);font-size:18px;border-radius:0 8px 8px 0}
code{font-family:var(--mono);font-size:.88em;background:color-mix(in srgb,var(--gold) 16%,transparent);padding:1px 5px;border-radius:4px}
pre{overflow-x:auto;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:14px}
pre code{background:none;padding:0}
hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
a{color:var(--red)} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:var(--gold)}}
.muted{color:var(--muted)} .small{font-size:13px} .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* tables */
.tw{overflow-x:auto;margin:1em 0}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
td.v{font-family:var(--mono);font-weight:700;white-space:nowrap}

/* register entries */
.entry{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;margin:0 0 20px}
.entry h3{margin-top:0}
.govern{font-size:14.5px}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:999px;
  border:1px solid currentColor}
.t-confirmed{color:var(--good)} .t-self{color:var(--warn)} .t-unknown{color:var(--none)} .t-retired{color:var(--red)}
.action{background:color-mix(in srgb,var(--gold) 15%,transparent);border-left:3px solid var(--gold);padding:10px 14px;border-radius:0 6px 6px 0}
.verified{font-family:var(--mono);font-size:13px;color:var(--good)}
.merged{border:1px dashed var(--gold);border-radius:8px;padding:12px 16px;margin:1em 0}

/* defects */
.defect{border:1px solid var(--bad);border-left:5px solid var(--bad);border-radius:0 10px 10px 0;
  padding:14px 18px;margin:1.2em 0;background:color-mix(in srgb,var(--bad) 7%,var(--card))}
.defect-h{font-weight:700;font-family:var(--serif);font-size:17.5px;margin:0 0 .2em}
.counts{margin:.8em 0}
.reading{font-size:15px;border-top:1px solid var(--rule);padding-top:.8em;margin-bottom:0}

/* live grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:6px;margin:1em 0}
.cell{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:7px 10px;border-radius:6px;
  border:1px solid var(--rule);background:var(--card);font-size:13px}
.cell .n{font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .c{font-weight:700;font-family:var(--mono);font-size:12px;white-space:nowrap}
.cell.good .c{color:var(--good)} .cell.bad{border-color:var(--bad);border-width:2px} .cell.bad .c{color:var(--bad)}
.cell.warn .c{color:var(--warn)} .cell.none .c{color:var(--none)}

/* explainer */
.explain{border-top:2px solid var(--gold);padding-top:20px;margin-top:44px}
.explainer{width:100%;height:auto;border-radius:10px;border:1px solid var(--rule);background:#000;display:block}

.doc h1,.doc h2,.doc h3{max-width:100%}
.doc li{margin:.3em 0}
footer{border-top:1px solid var(--rule);padding:22px 20px 46px;max-width:74ch;margin:0 auto;color:var(--muted);font-size:13.5px}

img,video{max-width:100%}
@media (prefers-reduced-motion:reduce){.hero-v{display:none}
  .hero{background:linear-gradient(160deg,var(--navy),#16305e)}}
@media (max-width:520px){.cred{position:static;text-align:left;max-width:100%;padding:6px 20px 10px;color:var(--muted)}
  .hero{min-height:auto} .hero-in{padding:30px 20px 18px}}

/* register + version tables. Caught by the unstyled-class gate: both were
   emitted by build.mjs and had no rule, so they rendered as bare tables. */
table.reg td{padding:10px}
table.reg tr:hover td{background:color-mix(in srgb,var(--gold) 8%,transparent)}
table.reg a{text-decoration:none} table.reg a:hover{text-decoration:underline}
table.vers{margin:.6em 0 1em;background:color-mix(in srgb,var(--gold) 5%,transparent);border-radius:8px}
table.vers th{padding-top:10px} table.vers td{font-size:14px}
table.vers tr:last-child td{border-bottom:0}

/* Defence in depth against sideways scroll: a wide child must scroll inside
   its own box, never drag the page. Caught at 400px, where a bare .vers table
   pushed the body wider than the viewport and clipped the headline. */
/* NOTE: overflow-x:hidden was tried here and REMOVED. It hid the sideways
   scroll without fixing it, the page stayed clipped, and the scrollWidth gate
   went green because the mask clamps the very number it measures. */
main table{min-width:0}
.tw{max-width:100%}

/* Long unbreakable tokens — a hostname, a deployment id, a package path — are
   wider than a phone and cannot wrap at a space because they contain none.
   Measured: `safe-elections.bornbetween2generals.com` renders 266px inside a
   385px viewport and pushed three pages into sideways scroll. */
code,.doc td,.doc th,.entry td,td .muted{overflow-wrap:anywhere}
.doc a{overflow-wrap:anywhere}
/* The evidence lines carry a bare 64-character SHA-256. It has no space to
   wrap at, so it set the minimum width of its paragraph, which set the
   minimum width of the section, which set the minimum width of the page.
   Nothing reported a right edge past the viewport because the paragraph's
   BOX fit — only its content did not. */
.entry>p,.entry>h3,.reading,.action,p.muted,li{overflow-wrap:anywhere}

/* The register table was 902px wide inside a 385px viewport. Not because it
   has many columns — because the `governs` column carries unbreakable tokens
   (`dpl_3d5PNLPYAVPRa9ni3BTWEiNhK3AZ`, `custody-layer/src/lib/merkle.mjs`)
   with no space to wrap at, so the column could not be narrowed. */
/* Deliberately NOT table-layout:fixed and NOT overflow-wrap:anywhere here.
   Both were tried: they crushed the columns until ordinary words broke
   mid-word ("docu ment", "primiti ve"). Removing the table entirely proved it
   was never the page-overflow cause, so the right answer is the ordinary one —
   a wide table scrolls inside its own .tw container. */
table.reg{min-width:640px}
.chip{white-space:nowrap}