/* ==========================================================================
   Ballot Trail — house style.

   Palette is the BB2G brand kit (ivory / gold / navy), not a guess:
   standard.bornbetween2generals.com/brand-kit.html.

   ⭐ THE RULE THAT KEEPS IT FROM GOING BROWN: on ivory, gold is a RULE and a
   MARK — never a word. Gold dark enough to read on ivory IS brown, so the
   moment gold becomes a text colour the whole app's accent turns brown.
   Links are ink with a gold underline. Eyebrows are neutral caps beside a
   short gold rule. The greys stay NEUTRAL and never mix toward the gold.
   --goldink is the one gold allowed to be a word, and only on ivory.
   ========================================================================== */

:root {
  /* ⚠⚠ THE ALIAS ARROW MUST POINT THE SAME WAY IN EVERY THEME BLOCK.
     This block used to make the BRAND name the primitive (--ink:#1c2333) and
     the SEMANTIC name the alias (--text:var(--ink)) — while the dark block did
     the exact reverse (--text:#eef2f9; --ink:var(--text)). Two blocks pointing
     at each other is a resolution cycle, and the browser fell back to the
     light literal: .btn--ghost computed #1c2333 on a #161b26 plate — 1.10:1,
     invisible, on every ghost button in dark mode. Caught by MEASURING the
     rendered page, not by reading the CSS, which looks perfectly reasonable.

     THE RULE: SEMANTIC tokens hold the literals. Brand names alias to them,
     never the other way round. test/gates.mjs enforces the direction. */

  /* semantic — the primitives */
  --ground:#f7f1e3; --surface:#fffdf8; --surface2:#faf5ea;
  --rule:#e6d9bc;   --rule2:#d8c79f;
  --text:#1c2333;   --text2:#4d5871; --text3:#5c6678;
  --head:#16294a;

  /* brand names alias to the semantic ones — one direction, always */
  --cream:var(--ground); --card:var(--surface); --panel:var(--surface2);
  --line:var(--rule);    --line2:var(--rule2);
  --ink:var(--text);     --sub:var(--text2);   --muted:var(--text3);
  --navy:var(--head);

  --cream2:#efe6d1; --navy2:#1f3a68; --blue:#3a5da9;
  --gold:#b8860b; --gold2:#caa12e; --gold3:#e4cd84; --goldsoft:#f3e8c6;
  --goldink:#7a5c12;
  --red:#b22234; --redsoft:#f7dfe2; --good:#25764f; --warn:#8f6410; --hot:#a8500f;
  --serif:Georgia,"Palatino Linotype","Times New Roman",serif;
  --display:"Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:74rem;
}

/* ⚠ Dark mode OWNS ITS SURFACE TOKENS. A previous app shipped white-on-white
   at 1.12:1 because dark mode redefined --ink but left a surface hard-coded
   to a light literal. Every colour below is a token; none is a literal. */
html[data-theme="dark"] {
  --ground:#0e1119; --surface:#161b26; --surface2:#1c2230;
  --rule:#2c3547; --rule2:#3b465c;
  --text:#eef2f9; --text2:#b6c0d2; --text3:#8d99ad;
  --head:#e8eefb;
  --card:var(--surface); --panel:var(--surface2); --cream:var(--ground);
  --line:var(--rule); --line2:var(--rule2);
  --ink:var(--text); --sub:var(--text2); --muted:var(--text3); --navy:var(--head);
  --goldink:#e0bd63;         /* on a dark ground gold IS legible as a word */
  --gold3:#8a6a1c; --goldsoft:#2a2412;
  --redsoft:#3a1c22; --red:#e2606f; --good:#5fc794; --warn:#e0b45c; --hot:#e39057;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--text);
  font:400 clamp(1rem,.34vw + .94rem,1.09rem)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,video,svg{max-width:100%}
:focus-visible{
  /* two-tone ring: holds on ivory AND on the black bar */
  outline:2px solid var(--navy); outline-offset:2px;
  box-shadow:0 0 0 4px var(--goldsoft);
  border-radius:2px;
}
html[data-theme="dark"] :focus-visible{outline-color:var(--gold3);box-shadow:0 0 0 4px #000}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.narrow{max-width:60rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.75rem;top:.75rem;z-index:99;background:var(--navy);color:#fff;padding:.6rem 1rem}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--head);line-height:1.16;margin:0 0 .5em;font-weight:600}
h1{font-family:var(--display);font-size:clamp(2.1rem,5.2vw,3.9rem);letter-spacing:-.012em;font-weight:400}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);margin-top:0}
h3{font-size:clamp(1.14rem,1.5vw,1.35rem)}
p,li{color:var(--text)}
.lede{font-family:var(--serif);font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.5;color:var(--text2)}
a{color:var(--text);text-decoration-color:var(--gold2);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-color:var(--goldink)}

/* eyebrow: NEUTRAL caps + a short gold rule. Gold caps on ivory measure
   3.69:1 — an actual failure. These measure 5.66:1. */
.eyebrow{
  font:700 .72rem/1 var(--sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--text2); display:flex; align-items:center; gap:.7rem; margin:0 0 1rem;
}
.eyebrow::before{content:"";width:2.1rem;height:2px;background:var(--gold2);flex:none}
/* ⚠ 3.87:1 as #e8e2d4 — the kicker is 14px, so it needs 4.5:1, not the 3:1
   large-text allowance the headline gets. Measured, then raised. */
.hero .eyebrow{color:#fbf9f4}
.hero .eyebrow::before{background:var(--gold3)}

/* ---------- header ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--rule);position:relative;z-index:20}
.top__in{display:flex;align-items:center;gap:1rem;padding:.85rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--head);font-family:var(--display);font-size:1.24rem}
.brand svg{width:44px;height:44px;flex:none}
.brand b{font-weight:400;letter-spacing:.01em}
.brand small{display:block;font:700 .58rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text3)}
.top nav{margin-left:auto;display:flex;gap:.15rem;flex-wrap:wrap}
.top nav a{
  font:600 .82rem/1 var(--sans);letter-spacing:.02em;padding:.5rem .62rem;
  text-decoration:none;color:var(--text2);border-bottom:2px solid transparent;white-space:nowrap;
}
.top nav a:hover{color:var(--text);border-bottom-color:var(--gold2)}
.top nav a[aria-current="page"]{color:var(--head);border-bottom-color:var(--gold)}
/* ⚠ the nav stacks on phones — it must scroll, not wrap into a wall */
@media (max-width:760px){
  .top__in{flex-wrap:nowrap}
  .top nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
}

/* ---------- hero ---------- */
.hero{color:#fff}
.hero__in{max-width:56rem}
.hero h1{color:#fff}
.hero p{color:#eae5da}
.hero .lede{color:#e6e0d3}
.bbm-hero__still,.bbm-hero .heroloop{filter:saturate(.55) contrast(1.06) brightness(.72)}

/* ---------- the black bar: the business card's bottom strip ---------- */
.bar{background:#0a0a0a;color:#e8cf90}   /* its own ground, its own ink */
.bar__in{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;padding:.8rem 0;
  font:700 .68rem/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-align:center}

/* ---------- plates ---------- */
section{padding-block:clamp(2.6rem,6vw,4.6rem)}
section.tight{padding-block:clamp(1.6rem,3vw,2.4rem)}
.plate{background:var(--surface);border:1px solid var(--rule);border-radius:0;padding:clamp(1.1rem,2.4vw,1.7rem)}
.plate--panel{background:var(--surface2)}
.grid{display:grid;gap:1.05rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.stack>*+*{margin-top:1rem}

.num{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--head);display:block}
.num small{display:block;font:700 .64rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin-top:.5rem}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:.42rem;font:700 .64rem/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;padding:.36rem .6rem;border:1px solid var(--rule2);
  background:var(--surface2);color:var(--text2)}
.chip::before{content:"";width:.46rem;height:.46rem;border-radius:50%;background:var(--text3);flex:none}
.chip--good::before{background:var(--good)} .chip--warn::before{background:var(--warn)}
.chip--hot::before{background:var(--hot)}   .chip--stop::before{background:var(--red)}
.chip--term{border-style:dashed}

/* ---------- tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--rule);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:34rem}
th,td{text-align:left;padding:.62rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font:700 .66rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text2);background:var(--surface2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
td code,th code{font-size:.86em}

/* ---------- code ---------- */
code{font-family:var(--mono);font-size:.88em;background:var(--surface2);
  border:1px solid var(--rule);padding:.08em .34em}
pre{margin:0;overflow-x:auto;background:#0d1117;color:#dfe6f0;border:1px solid var(--rule);
  padding:1rem 1.1rem;font:400 .82rem/1.62 var(--mono)}
pre code{background:none;border:0;padding:0;color:inherit;font-size:1em}
.k{color:#e4cd84} .s{color:#9ad39a} .c{color:#8d99ad;font-style:italic} .n{color:#84b6f4}

/* ---------- buttons ---------- */
/* ⚠⚠ AN ELEMENT WHOSE BACKGROUND DOES NOT FOLLOW THE THEME MUST NOT TAKE A
   FOREGROUND THAT DOES. .btn is near-black in BOTH themes, but --gold3 flips
   to a dark gold for dark grounds — so in dark mode this was #8a6a1c on
   #0a0a0a: 3.92:1, measured on the rendered page. The button carries its own
   ground, so it carries its own ink. Same for .bar. */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:700 .8rem/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;padding:.78rem 1.15rem;border-radius:0;
  border:1px solid #0a0a0a;background:#0a0a0a;color:#e8cf90;cursor:pointer;
  text-decoration:none;transition:background .18s,color .18s}
.btn:hover{background:#1c2333;color:#fff}
.btn--gold{background:linear-gradient(180deg,#f0d0a0,#d9b45e 30%,#a07020 64%,#7d5616);
  color:#17130a;border-color:#7d5616}
.btn--gold:hover{filter:brightness(1.08);color:#17130a}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--rule2)}
.btn--ghost:hover{background:var(--surface2);color:var(--text)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ---------- callouts ---------- */
.note{border-left:3px solid var(--gold2);background:var(--surface2);padding:.9rem 1.1rem}
.note--stop{border-left-color:var(--red);background:var(--redsoft)}
.note--good{border-left-color:var(--good)}
.note p:last-child,.note ul:last-child{margin-bottom:0}
.note p:first-child{margin-top:0}
.note b{color:var(--head)}

/* ---------- the boundary rail: the one idea the app exists for ---------- */
.rail{display:grid;gap:0;grid-template-columns:1fr auto 1fr;align-items:stretch;
  border:1px solid var(--rule);background:var(--surface)}
.rail__side{padding:1.1rem 1.2rem}
.rail__cut{width:3px;background:repeating-linear-gradient(180deg,var(--red) 0 10px,transparent 10px 18px);position:relative}
.rail__cut::after{content:"NEVER JOINED";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;
  font:700 .6rem/1 var(--sans);letter-spacing:.2em;color:var(--red);
  background:var(--surface);padding:.35rem .5rem}
@media (max-width:720px){
  .rail{grid-template-columns:1fr}
  .rail__cut{width:auto;height:3px;background:repeating-linear-gradient(90deg,var(--red) 0 10px,transparent 10px 18px)}
  .rail__cut::after{transform:translate(-50%,-50%)}
}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);padding-block:2.2rem;margin-top:2rem}
.foot p{color:var(--text2);font-size:.88rem;margin:.3rem 0}
/* the 4-star rule is a MARK, not a word: rendered as an aria-hidden graphic so
   it is decoration by construction rather than text that cannot pass 4.5:1 */
.foot .stars{display:flex;gap:.62rem;justify-content:center;margin:0 0 .9rem}
.foot .stars svg{width:13px;height:13px;fill:var(--gold2);display:block}

/* ---------- utility ---------- */
.mono{font-family:var(--mono);font-size:.84rem;word-break:break-all}
.tiny{font-size:.8rem;color:var(--text2)}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
hr.rule{border:0;border-top:1px solid var(--rule);margin:2rem 0}
hr.stars{border:0;text-align:center;margin:2rem 0;color:var(--gold2)}
hr.stars::before{content:"★ ★ ★ ★";letter-spacing:.6em}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   Fixes found by looking at the rendered page, not by reading the CSS.
   ========================================================================== */

/* ⚠ THE DARK-TYPE-ON-A-DARK-HERO TRAP. .btn--ghost takes its colour from
   --text, which is near-black ink — correct on ivory, invisible on the hero.
   Measured on the built page: rgb(28,35,51) on graded footage. A hero is a
   different ground and its controls need their own tokens. */
.hero .btn--ghost{color:#fbf9f4;border-color:rgba(251,249,244,.5);background:rgba(10,10,16,.28)}
.hero .btn--ghost:hover{background:rgba(251,249,244,.15);color:#fff;border-color:#fbf9f4}
.hero .btn--ghost:focus-visible{outline-color:#f0d0a0;box-shadow:0 0 0 4px rgba(0,0,0,.55)}

/* The lockup must not wrap AND must not be overlapped. ⚠ Adding min-width:0
   to let it shrink did the opposite of the intent: with nowrap the text then
   overflowed its own box and the nav — which has margin-left:auto — was drawn
   straight over the wordmark. The mark NEVER shrinks; the nav is the thing
   that gives way, by scrolling. */
.brand{flex:none}
.top nav{min-width:0;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.brand b{white-space:nowrap}
.brand small{white-space:nowrap}
@media (max-width:560px){
  .brand{font-size:1.06rem;gap:.5rem}
  .brand svg{width:34px;height:34px}
  .brand small{font-size:.5rem;letter-spacing:.16em}
}
/* the nav is a scroll rail on phones — give it a fading edge so it is
   discoverable that there is more to the right */
@media (max-width:760px){
  .top nav{
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 1.6rem),transparent 100%);
    padding-right:1.2rem;
  }
  .top__in{gap:.5rem}
  #themebtn{flex:none}
}

/* ==========================================================================
   ELECTION COMMAND — components added on top of the shared house sheet.
   ========================================================================== */

/* ---- full-bleed section band ------------------------------------------
   A hero-sized loop used mid-page. Same markup contract as .bbm-hero so the
   motion kit drives it: still ALWAYS present, video layered over, veil on
   top, type last. The veil polarity is set per band because the scrim must
   follow the copy, not the other way round. */
.band{position:relative;min-height:clamp(340px,46vh,520px);display:grid;align-items:center;
  overflow:hidden;margin:0;isolation:isolate}
.band__in{max-width:56rem;padding:clamp(2rem,5vw,4rem) 0}
.band__line{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.24;margin:.5rem 0 0}
.band--dark{color:#fff}
.band--dark .band__line{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.6)}
.band--dark .eyebrow{color:#f0d0a0}
.band--dark .bbm-hero__veil{background:linear-gradient(90deg,rgba(8,8,12,.86) 0%,rgba(8,8,12,.66) 46%,rgba(8,8,12,.3) 100%)}
.band--light{color:var(--ink)}
.band--light .band__line{color:var(--ink)}
.band--light .eyebrow{color:var(--gold-dk,#6f4d14)}
.band--light .bbm-hero__veil{background:linear-gradient(90deg,rgba(247,243,236,.94) 0%,rgba(247,243,236,.8) 46%,rgba(247,243,236,.42) 100%)}

/* ---- module grid ------------------------------------------------------- */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem;margin:1.4rem 0}
.mod{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:var(--panel);
  display:flex;flex-direction:column;gap:.5rem}
.mod__id{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;color:var(--gold-dk,#6f4d14);font-weight:700}
.mod__name{font-family:var(--serif);font-size:1.08rem;line-height:1.25;margin:0}
.mod__what{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:0}
.mod__svcs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto;padding-top:.5rem}
.svc{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .44rem;border-radius:99px;
  border:1px solid var(--rule-soft);color:var(--ink-3);background:transparent;white-space:nowrap}
.mod__caution{font-size:.78rem;line-height:1.45;border-left:2px solid var(--hot,#b8541c);padding-left:.6rem;
  color:var(--ink-2);margin:.2rem 0 0}

/* ---- group heading ----------------------------------------------------- */
.grp{margin:2.6rem 0 0}
.grp__n{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---- the four layers --------------------------------------------------- */
.layers{display:grid;gap:.9rem;margin:1.4rem 0}
.layer{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:1rem 1.1rem;background:var(--panel)}
.layer h3{margin:0 0 .3rem;font-size:1.05rem}
.layer dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin:.5rem 0 0;font-size:.85rem}
.layer dt{color:var(--ink-3);white-space:nowrap}
.layer dd{margin:0;color:var(--ink-2)}
.layer .defeat{color:var(--hot,#b8541c)}

/* ---- evidence ladder --------------------------------------------------- */
.ladder{display:grid;gap:.4rem;margin:1.4rem 0;counter-reset:rung}
.rung{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:baseline;
  border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--panel)}
.rung__name{font-family:var(--sans);font-weight:700;letter-spacing:.1em;font-size:.74rem}
.rung__what{font-size:.86rem;color:var(--ink-2)}
.rung__who{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:.2rem .5rem;border-radius:99px}
.rung--machine .rung__who{background:var(--good-soft);color:var(--good);border:1px solid var(--good-line)}
.rung--human   .rung__who{background:var(--notice-soft);color:var(--notice);border:1px solid var(--notice-line)}

/* ---- sync-state chips: held and confirmed MUST NOT look alike ---------- */
.sync{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.06em;
  padding:.28rem .6rem;border-radius:99px;font-weight:600}
.sync::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.sync--held{background:var(--warn-soft);color:#7a5310;border:1px dashed var(--warn-line)}
.sync--confirmed{background:var(--good-soft);color:var(--good);border:1px solid var(--good-line)}
.sync--urgent{background:var(--urgent-soft);color:var(--red);border:1px solid var(--urgent-line)}
.sync--held::before{border-radius:1px}          /* different SHAPE, not only colour */

/* ---- completion matrix -------------------------------------------------- */
.matrixwrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:10px}
table.matrix{border-collapse:collapse;width:100%;font-size:.78rem;min-width:56rem}
table.matrix th,table.matrix td{padding:.42rem .5rem;border-bottom:1px solid var(--rule-soft);text-align:center}
table.matrix th:first-child,table.matrix td:first-child{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--panel)}
table.matrix thead th{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  writing-mode:vertical-rl;transform:rotate(180deg);padding:.6rem .28rem}
table.matrix thead th:first-child{writing-mode:horizontal-tb;transform:none}
.cell-yes{color:var(--good);font-weight:700}
.cell-part{color:var(--notice)}
.cell-no{color:var(--ink-3)}
.cell-na{color:var(--ink-3);opacity:.5}

/* ---- live demo panels --------------------------------------------------- */
.demo{border:1px solid var(--line);border-radius:12px;padding:1.1rem;background:var(--panel);margin:1.2rem 0}
.demo__out{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;line-height:1.5;
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:8px;padding:.8rem;
  overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin:.7rem 0 0}
.verdict{display:flex;align-items:center;gap:.6rem;font-weight:700;margin:.7rem 0 0;font-size:.9rem}
.verdict--pass{color:var(--good)}
.verdict--fail{color:var(--red)}

/* ---- phones: the STANDARD nav must not stack into a wall ---------------- */
@media (max-width:900px){
  .top__in{flex-wrap:wrap;gap:.5rem}
  .top__in nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    display:flex;gap:.9rem;padding-bottom:.3rem;scrollbar-width:none}
  .top__in nav::-webkit-scrollbar{display:none}
  .top__in nav a{white-space:nowrap}
  .band{min-height:300px}
  table.matrix thead th{writing-mode:horizontal-tb;transform:none}
}

/* ---- reduced motion: resolve to the FINISHED state, never a frozen frame */
@media (prefers-reduced-motion:reduce){
  .band .heroloop{display:none}
  .band .bbm-hero__still{opacity:1}
}

/* ---- dark mode: own the surface tokens, never inherit a light panel ----- */
:root[data-theme="dark"]{
  --panel:#16151a; --paper:#0e0d11; --paper-2:#121116;
  --ink:#f4f1ea; --ink-2:#cfc9bd; --ink-3:#9a9387;
  --line:rgba(240,208,160,.16); --rule-soft:rgba(240,208,160,.14);
}
:root[data-theme="dark"] .mod,
:root[data-theme="dark"] .layer,
:root[data-theme="dark"] .rung,
:root[data-theme="dark"] .demo,
:root[data-theme="dark"] table.matrix td:first-child,
:root[data-theme="dark"] table.matrix th:first-child{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] .demo__out{background:#0b0a0e;color:#e8e3d8}
:root[data-theme="dark"] .band--light{color:var(--ink)}
:root[data-theme="dark"] .band--light .bbm-hero__veil{
  background:linear-gradient(90deg,rgba(14,13,17,.9) 0%,rgba(14,13,17,.72) 46%,rgba(14,13,17,.34) 100%)}
:root[data-theme="dark"] .band--light .band__line{color:#fff}
:root[data-theme="dark"] .band--light .eyebrow{color:#f0d0a0}

/* ---- module page furniture --------------------------------------------- */
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.toc a{font-size:.78rem;padding:.34rem .7rem;border:1px solid var(--rule-soft);border-radius:99px;
  text-decoration:none;color:var(--ink-2);display:inline-flex;gap:.4rem;align-items:center}
.toc a:hover{border-color:var(--gold);color:var(--ink)}
.tocn{font-size:.66rem;color:var(--ink-3)}
.mod details{margin-top:.2rem}
.mod summary{font-size:.76rem;color:var(--ink-3);cursor:pointer;letter-spacing:.04em}
.mod summary:hover{color:var(--gold-dk,#6f4d14)}
.moddl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem;margin:.6rem 0 0;font-size:.8rem}
.moddl dt{color:var(--ink-3);white-space:nowrap}
.moddl dd{margin:0;color:var(--ink-2)}
.moddl ul{margin:0;padding-left:1.1rem}
.moddl code{font-size:.72rem;background:var(--paper-2);padding:.1rem .3rem;border-radius:4px;
  border:1px solid var(--rule-soft);display:inline-block;margin:.1rem .1rem 0 0}
:root[data-theme="dark"] .moddl code{background:#0b0a0e}
@media (max-width:600px){ .moddl{grid-template-columns:1fr} .moddl dt{margin-top:.4rem} }

/* ---- stat row ----------------------------------------------------------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem;margin:1.6rem 0}
.stat{border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--panel);text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--gold-dk,#6f4d14)}
.stat span{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.4rem;line-height:1.35}
:root[data-theme="dark"] .stat{background:var(--panel)}
:root[data-theme="dark"] .stat b{color:#e0bd72}

/* ---- inline ladder ------------------------------------------------------ */
.ladderline{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1.2rem 0}
.lrung{font-size:.68rem;letter-spacing:.09em;font-weight:700;padding:.26rem .55rem;border-radius:99px}
.lrung--machine{background:var(--good-soft);color:var(--good);border:1px solid var(--good-line)}
.lrung--human{background:var(--notice-soft);color:var(--notice);border:1px solid var(--notice-line)}
.larrow{color:var(--ink-3);font-size:.8rem}

/* ---- field chips -------------------------------------------------------- */
.fields{display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0}
.field{font-size:.72rem;padding:.24rem .5rem;border-radius:6px;border:1px solid var(--rule-soft);
  background:var(--paper-2);color:var(--ink-2)}
.fhash{border-color:var(--gold);color:var(--gold-dk,#6f4d14);font-weight:600}
.fopen{border-style:dashed;opacity:.75}
:root[data-theme="dark"] .field{background:#0b0a0e;color:var(--ink-2)}
:root[data-theme="dark"] .fhash{color:#e0bd72;border-color:#8a6a28}

/* ==========================================================================
   ⚠⚠ THE TOKENS THE COMPONENTS ABOVE REFERENCE AND NOTHING IN THIS SHELL
   DEFINED. A MISSING STYLESHEET HAS A DIRECTION.

   .sync, .rung__who, .mod, .svc and .demo__out were written against the
   BB2G house sheet, which holds --good-soft, --warn-line, --notice,
   --gold-dk, --paper-2 and friends. But scripts/shell.mjs links motion.css
   and command.css ONLY — house.css is copied to dist and never loaded. So
   every one of those var() calls resolved to nothing on every built page,
   and the failure was silent and directional:

     · .sync--held lost its ground (--warn-soft) but KEPT its literal ink.
       #7a5310 on the dark panel measures 2.86:1 — and that chip is the one
       component on /offline.html whose entire job is to NOT be mistaken for
       the green one.
     · .rung__who lost both its ground and its ink in the human case.
     · .demo__out lost its plate; .svc lost its border colour.

   Values are taken from assets/house.css so the two sheets agree, with ONE
   deliberate divergence, noted below. Nothing above this comment is changed.
   ========================================================================== */

:root{
  --ink-2:var(--text2); --ink-3:var(--text3);
  --paper:var(--ground); --paper-2:var(--surface2); --rule-soft:#eadfc6;
  --gold-dk:#6f4d14;
  --good-soft:#e6f0e8;   --good-line:#bcd6c6;
  /* ⚠ house.css sets --notice:#a07020. As .rung__who's INK on --notice-soft
     that measures 3.80:1, and the chip is .66rem uppercase — small text, so
     it needs 4.5:1, not the large-text allowance. Darkened to 5.07:1. The
     ground and the line keep the house values. */
  --notice:#8a5c12;      --notice-soft:#f7efdd; --notice-line:#e2cfa4;
  --warn-soft:#f8eed6;   --warn-line:#e5d2a2;
  --urgent-soft:#f7e2de; --urgent-line:#e8bcb4;
}

:root[data-theme="dark"]{
  --gold-dk:#e0bd63;
  --good-soft:#12281d;   --good-line:#2f5d45;
  --notice:#e0b45c;      --notice-soft:#2a2412; --notice-line:#5a4a20;
  --warn-soft:#2a2412;   --warn-line:#5a4a20;
  /* ⚠ #3a1c22 (the --redsoft value) measured 4.48:1 against dark --red
     #e2606f — under 4.5 by a hair on a .72rem chip. Deepened to 4.92:1. */
  --urgent-soft:#2e161b; --urgent-line:#6a2f38;
}

/* .sync--held carries a LITERAL ink, so redefining a token cannot reach it.
   #7a5310 → 2.86:1 on the dark panel; this reads 9.9:1. The chip keeps its
   dashed border and its square dot in both themes — colour was never the
   only difference and must never become it. */
:root[data-theme="dark"] .sync--held{color:#e8c27a}
.cliptitle{display:block;font-weight:400;font-size:.72rem;color:var(--ink-3);margin-top:.15rem}