/* =====================================================================
   Crosslink network dashboard — Staker Space / Zcash design system, v2

   Light is the default: paper page, white panels, gold at 700 for text
   contrast. Dark is the [data-theme="dark"] variant. The verdict band
   stays deep space in BOTH themes — the design system's anchor pattern.

   Type is self-hosted only: Space Grotesk for display, IBM Plex for
   body and numerals, nothing below 11px.
   Panels are square — one hairline border, no radius, no soft shadow;
   bands of panels use 1px gaps over the line colour so dividers read as
   ruled lines. Radii exist only on chips, pills and buttons.

   Caveats live behind `i` buttons that open click-popovers — reachable
   on touch, out of the way until asked for.

   Conventions: no rule sets a raw font-size (use a --fs-* step) and no
   rule sets a raw gap/padding (use a --sp-* step).
   ===================================================================== */

@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-var-400-600.woff2") format("woff2-variations");
  font-weight: 400 700;    /* 700 renders from the 600 master — closest weight */
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-500.ttf") format("truetype");
  font-weight: 400 500; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-700.ttf") format("truetype");
  font-weight: 600 800; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  /* ---- brand ramps ------------------------------------------------- */
  --gold-100:#FEF9E9; --gold-300:#F8CE5E; --gold-500:#F4B728;
  --gold-700:#A87705;   /* borders only — 3.9:1, above the 3:1 non-text floor */
  --gold-800:#7A5602; --gold-900:#5E4201;
  --sp-050:#F6FAFC; --sp-100:#D7E3EB; --sp-200:#AFC3D1; --sp-300:#87A2B4;
  --sp-400:#5F8196; --sp-500:#3F6177; --sp-600:#2B4A5E; --sp-700:#1C3447;
  --sp-t2:#33556B;   /* 7.9:1 on white — secondary prose */
  --sp-t3:#42647A;   /* v11: 4.8:1 on the sunken panel, 5.2:1 on the page, 6.3:1 on white — dim text.
                        v10 moved it two values darker from #4E7288, which
                        was audited against WHITE only and measured 4.43:1
                        on the sunken panel. The rule is the surface the
                        text is ON, so audit every ground a role lands on. */
  --sp-b3:#5F8196;   /* v11: 3.2:1 on the sunken track it sits in — the lightest a bar may be */
  --sp-900:#0B1828; --sp-950:#060F1B;
  --cy:#04FDCF; --teal:#00809E;

  /* ---- LIGHT — the default ----------------------------------------- */
  color-scheme: light;
  --bg:#E4EBF1;            /* v11: was #F4F8FB — 1.05:1 against a white panel, so the page had no structure */
  --bg-raised:#FFFFFF;     /* the one true white: panels only */
  --bg-sunken:#D9E3EB;     /* was #E9EFF4 — tracks, meters, wells */
  --bg-inset:#EFF3F7;      /* was #F4F8FB — hover, folds, strips inside a panel */
  --line:rgba(11,24,40,.22);        /* was .15 — a hairline that reads on both grounds */
  --line-strong:rgba(11,24,40,.40); /* was .26 */
  --line-signal:rgba(122,86,2,.60); /* was .42 */
  --focus:var(--gold-700);          /* v11: the ring was --signal at 1.5:1 on the page; gold-700 is 3.3:1 */
  --fg:var(--sp-900);
  --fg-2:var(--sp-t2);
  --fg-3:var(--sp-t3);            /* 4.2:1 -> 5.1:1 */
  --signal:var(--gold-500);
  --signal-text:var(--gold-800);  /* 3.96:1 -> 6.65:1 — eyebrows AND links */
  --on-signal:var(--sp-900);
  --signal-bg:var(--gold-100);
  --live:#0A6B4A;                 /* 5.34:1 -> 6.53:1 */
  --live-bg:rgba(10,107,74,.10);
  --live-line:rgba(10,107,74,.50);
  --warn:#A83B12;                 /* 4.93:1 -> 6.37:1 */
  --warn-bg:rgba(168,59,18,.10);
  --warn-line:rgba(168,59,18,.55);
  --danger:#B3261E;
  --bar-1:var(--sp-t2); --bar-2:var(--sp-t3); --bar-3:var(--sp-b3);
  --tip-shadow:0 18px 40px -18px rgba(11,24,40,.34);
  /* identicon glyph palette — four brand colours, themed */
  --ic-1:var(--gold-800); --ic-2:#00657D; --ic-3:var(--sp-t2); --ic-4:#0A6B4A;

  /* ---- type: self-hosted OFL faces only -----------------------------
     v9 led these stacks with the PLATFORM faces, on a real legibility
     finding: at 15px in a dense expert list, x-height decides more than the
     size does. v10 keeps the finding and reverses the order, for a licensing
     reason — naming "Segoe UI Variable Text" and "Cascadia Mono" asks for
     faces this project has no licence to host, so they render on the machines
     that already own them and nowhere else. Every face named here is now
     open-licensed and self-hosted, and the stacks LEAD with the shipped file:
     the first choice is always present, so prose renders identically on every
     machine — the one thing v9 listed as its accepted cost — Plex Sans carries
     the x-height v9 was asking for, and the tails are GENERIC keywords rather
     than named proprietary faces. Still no third-party request either way.

     The families are "Plex Sans" and "Plex Mono", matching the @font-face
     declarations above. "IBM Plex Sans" declares nothing here and would fall
     straight through to the generic. */
  --display: "Space Grotesk", "Plex Sans", system-ui, sans-serif;
  --sans:    "Plex Sans", system-ui, sans-serif;
  --mono:    "Plex Mono", ui-monospace, monospace;

  /* ONE TYPE SCALE — six steps, and nothing else. Ratified as a system
     decision by design v8 (field feedback #5, ask A): the census of the v6
     build found sixteen sizes on this page and nine inside the verdict band
     alone. This block is the only place a size is written down; every older
     token name below resolves to one of the six, so a rule never invents a
     seventh, and no rule anywhere sets a raw font-size.

       11 · 13 · 15 · 19 · 34 · 88
     Three text steps (13 · 15 · 19) over a floor (11) and two display steps.
     The floor is 11 — nothing on an expert surface is smaller, chips and axes
     included. 13 → 15 is the density step (a row's meta against a row's
     number); 15 → 19 is the hierarchy step (body against a title). Above 19
     nothing is text: 34 is a figure or a band headline, 88 is the finalizer
     page's grade letter, and both are objects to look at, not to read. The
     steps are deliberately far apart at the top — a ladder that can express
     "slightly bigger" gets used to express it. Only the two display steps
     move with the viewport (they clamp); the text steps hold, so a phone
     reads the same words at the same size as a desk.

     THREE FAMILIES, roles tightened. Size no longer separates a claimed name
     from a key, so face and weight must:
       Plex Mono      machine strings and labels only — keys, hashes, figures,
                      uppercase eyebrows, axes, units. Never prose.
       Plex Sans      all prose, and a claimed name at 600. A name is language,
                      a key is a string, and that is the difference readers see.
       Space Grotesk  display only — band headlines, band figures, section
                      titles, the grade letter. Never a paragraph, never a row. */
  --fs-1: 0.6875rem;                                   /* 11px  eyebrows, chips, axes — the floor */
  --fs-2: 0.8125rem;                                   /* 13px  notes, meta, fine print           */
  --fs-3: 0.9375rem;                                   /* 15px  body text, rows, keys, prose      */
  --fs-4: 1.1875rem;                                   /* 19px  titles, names, lead numerals      */
  --fs-5: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem);     /* 34px  headlines and band figures        */
  --fs-6: clamp(3.25rem, 2.2rem + 4.6vw, 5.5rem);      /* 88px  the finalizer page's letter       */

  /* Two prose roles, and the line between them is a question about the
     text, not about the space it sits in:
       If a sentence is meant to be READ, it is --t-body (15px).
       If it is a LABEL on something else, it is --t-meta (13px).
     A canvas writes a role token. It never writes --fs-2 for a sentence. */
  --t-body:   var(--fs-3);
  --t-meta:   var(--fs-2);
  --t-eyebrow:var(--fs-1); --t-title: var(--fs-4);
  --t-fig:    var(--fs-5); --t-letter:var(--fs-6);

  --fs-row:   var(--fs-3);

  --lh-fig: 1.05;    /* numerals — no descender room needed */
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-title: 1.3;
  --lh-meta: 1.5;    /* labels: tight enough to read as one unit */
  --lh-body: 1.62;   /* sentences: loose enough to track across 68ch */
  --lh-letter: .86;  /* the 88px grade letter — optical, below 1 on purpose */
  --tr-label: 0.14em;

  /* ---- spacing & shape --------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --pad-page: clamp(14px, 0.5rem + 1.8vw, 32px);
  --pad-head: 15px var(--sp-5);
  --pad-body: 18px var(--sp-5);
  --gap-grid: var(--sp-4);
  --measure: 68ch;          /* prose column */
  --measure-narrow: 52ch;   /* definitions, notes beside a figure */

  --r-1: 4px; --r-2: 8px;
  --snap: 90ms linear;      /* the interaction duration: hover, pressed, theme */

  /* ---- MOTION — the live-update vocabulary (design-system/tokens/motion.css)
     Five finite ticks and two loops. A tick acknowledges a fact that changed
     and runs once; only the live dot, the syncing dot and the skeleton
     shimmer loop. Paint only: opacity, transform, colour, background. */
  --tick: 1.2s ease-out;                    /* a numeral or word that moved */
  --tick-row: 1.6s ease-out;                /* a row whose rank, grade or state moved */
  --tick-chip: .5s ease-out;                /* a chip whose state flipped */
  --sweep: .9s ease-out;                    /* a block arriving, a vote landing */
  --breathe: 1.8s ease-in-out infinite;     /* the live dot — the only slow loop */
  --breathe-fast: .9s ease-in-out infinite; /* the syncing dot, the missing dot */

  /* ---- THE LIST — type and density, set once (design v7, v8) --------
     The board is read at arm's length. Sizes come from the ladder above and
     nothing else: a claimed name is the same step as a key (15px), told apart
     by face and weight — Sans 600 for a name, Mono 400 for a key. The floor
     in a row is 13px. Only the density lives here. */
  --fs-row-name: var(--fs-3);   /* a claimed name is the same step as a key — the display face and weight set it apart */
  --fs-row-key:  var(--fs-3);
  --fs-row-meta: var(--fs-2);
  --row-pad:     15px;
  --row-chip:    var(--fs-1);
  --row-strip:   8px;
  --grid-row: 36px minmax(0,2.25fr) minmax(0,.78fr) minmax(0,1fr) 76px minmax(0,1.05fr);
}

[data-theme="dark"] {
  color-scheme: dark;
  --focus:var(--gold-500);
  --bg:var(--sp-950);
  --bg-raised:var(--sp-900);
  --bg-sunken:#040A12;
  --bg-inset:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --line-signal:rgba(244,183,40,.45);
  --fg:#EDF4F8;
  --fg-2:var(--sp-200);
  --fg-3:#8FA9BA;
  --signal-text:var(--gold-500);
  --signal-bg:rgba(244,183,40,.13);
  --live:var(--cy);
  --live-bg:rgba(4,253,207,.12);
  --live-line:rgba(4,253,207,.32);
  --warn:#FF8A5C; --danger:#FF5C5C;
  --warn-bg:rgba(255,138,92,.12);
  --warn-line:rgba(255,138,92,.42);
  --bar-1:var(--sp-500); --bar-2:var(--sp-400); --bar-3:var(--sp-300);
  --tip-shadow:0 20px 44px -22px rgba(0,0,0,.9);
  --ic-1:#F4B728; --ic-2:#00A8C9; --ic-3:#87A2B4; --ic-4:#3CD9A0;
}

/* =====================================================================
   base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* An author `display:` beats the UA rule for [hidden], and this sheet sets
   display on panels, grids and chips that are hidden until their data lands.
   One rule, so the attribute means what it says on every page. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-page) var(--sp-12); }
.wrap.prose { max-width: 820px; }

h1, h2, h3 {
  margin: 0; font-family: var(--display); font-weight: 700;
  letter-spacing: -0.02em; line-height: var(--lh-snug);
}
p { margin: 0 0 var(--sp-3); }
a { color: var(--signal-text); text-decoration: none; }
a:hover { color: var(--gold-800); text-decoration: underline; }
[data-theme="dark"] a:hover { color: var(--gold-300); }
code, .mono { font-family: var(--mono); font-size: var(--t-eyebrow); }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* mission-control eyebrow: 11px mono caps, wide tracking */
.eyebrow, .glabel {
  font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3);
  line-height: var(--lh-snug);
}

/* the loops — three on the whole page, and no more (motion.css) */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes shim { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
/* a hidden tab breathes nothing: the loops hold, the polls stop (js/ui.js) */
[data-live="paused"] *, [data-live="paused"] *::before, [data-live="paused"] *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* identicon glyph: stable visual identity for a bare hex key */
.idg { flex: none; vertical-align: -2px; }

/* a fraction is built, never typed (design system house rule, pulled
   2026-09-03): the precomposed glyph draws at half x-height, so at the 11 and
   13px steps its digits land near 6px — under the floor by definition. Two full
   digits at .7em around a fraction slash, inheriting face, size and colour:
   <span class="frac"><sup>2</sup>&frasl;<sub>3</sub></span>, from ui.js frac().
   In an SVG label the same fraction is tspans — the shifts are cumulative dy in
   svgchart.js, the digit size is the last rule here. A sentence says it in
   words: "two thirds", "a third". */
.frac { display: inline-block; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; line-height: 1; }
.frac sup, .frac sub { font-size: .7em; line-height: 1; position: relative; vertical-align: baseline; font-weight: 600; }
.frac sup { top: -.42em; margin-right: -.06em; }
.frac sub { top: .1em; margin-left: -.06em; }
text.frac .fd { font-size: .7em; font-weight: 600; }

/* loading skeleton: three shimmering bars instead of a text jump */
.skel {
  display: block; height: 10px; margin: 8px 0; width: 80%;
  background: var(--bar-3); animation: shim 1.25s ease-in-out infinite;
}
.skel[data-shim="2"] { width: 60%; animation-delay: .18s; }
.skel[data-shim="3"] { width: 70%; animation-delay: .36s; }

/* tier headers: the page reads as three questions */
.tier-head {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  padding: 26px 0 var(--sp-3);
}
.tier-head:first-of-type { padding-top: var(--sp-6); }
.tier-tag {
  font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--signal-text);
}

.tier-rule { flex: 1; height: 1px; background: var(--line); align-self: center; }
/* glossary term links: dotted underline, colour inherited */
a.term { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
a.term:hover { color: var(--signal-text); border-bottom-color: var(--signal); text-decoration: none; }
[data-theme="dark"] .hero a.term { border-bottom-color: rgba(237,244,248,.5); }
.hero a.term:hover { color: inherit; border-bottom-color: var(--signal); }

/* the state chip — one component, both themes, colours from the tokens */
.schip {
  display: inline-flex; align-items: center; padding: 3px 7px; flex: none;
  font-family: var(--mono); font-size: var(--fs-1); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--fg-3);
}
.schip.clear { border-color: var(--live-line); color: var(--live); }
.schip.tight, .schip.watch { border-color: var(--line-signal); color: var(--signal-text); }
.schip.breached { border-color: var(--warn-line); color: var(--warn); }
[data-theme="dark"] .schip.breached { border-color: rgba(255,138,92,.42); }
.schip.expected { border-color: var(--line-strong); color: var(--fg-2); }

/* the drift band: one sentence, remedies, and the fold */
.drift {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line); background: var(--bg-raised);
}
.drift-body { flex: 1; min-width: 260px; }
.drift-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.drift-title { font-family: var(--display); font-size: var(--t-title); font-weight: 600; letter-spacing: -.015em; }
.drift-sub { font-size: var(--t-body); color: var(--fg-3); }
.drift-items { display: grid; gap: 7px; }
.drift-items:not(:empty) { margin-top: 11px; }
.drift-item { display: flex; align-items: baseline; gap: 11px; font-size: var(--t-body); line-height: var(--lh-meta); }
.drift-item .dval { font-family: var(--mono); font-size: var(--t-meta); flex: 0 0 auto; }
.drift-item .dval.warn { color: var(--signal-text); }
.drift-item .dval.bad { color: var(--warn); }
.drift-item > span:last-child { color: var(--fg-2); }
.drift-item strong { color: var(--fg); }

/* three-column kv rows: label · state chip · value */
.kv3 {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(96px,auto);
  gap: 4px var(--sp-3); align-items: start;
  padding: 11px 0; border-top: 1px solid var(--line); font-size: var(--t-body);
}
.kv3 > span:first-child { color: var(--fg-2); }
.kv3 .schip { justify-self: end; margin-top: 3px; }
.kv3 .kvv { justify-self: end; text-align: right; }
.kv3 .kvv b { font-family: var(--mono); font-size: var(--t-body); font-weight: 500; }
.kv3 .kvv small { display: block; margin-top: 3px; font-size: var(--t-eyebrow); color: var(--fg-3); }
.kv3 .kvv b.ok { color: var(--live); } .kv3 .kvv b.warn { color: var(--signal-text); } .kv3 .kvv b.bad { color: var(--warn); }

/* the reading sheet */
/* .panel is declared later with the same specificity, so its border and
   background shorthands would win — the sheet asks for both by name. */
.panel.readsheet {
  margin-top: 18px; scroll-margin-top: var(--sp-5);
  border: 1px solid var(--line-strong); border-top: 3px solid var(--fg-2);
  background: var(--bg-inset);
}
.readsheet .read-answers, .readsheet .grid.ruled > * { background: var(--bg-raised); }
.readlist { margin: var(--sp-3) 0 0; }
.readlist > div {
  display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px;
  padding: var(--sp-2) 0; border-top: 1px solid var(--line);
  scroll-margin-top: var(--sp-5);
}
.readlist > div:target { background: var(--signal-bg); box-shadow: -8px 0 0 var(--signal-bg), 8px 0 0 var(--signal-bg); }
.readlist dt { font-family: var(--display); font-size: var(--t-body); font-weight: 600; }
.readlist dd { margin: 0; max-width: var(--measure-narrow); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }
@media (max-width: 560px) { .readlist > div { grid-template-columns: 88px minmax(0,1fr); } }

.tier-fold {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px;
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .08em;
}
.tier-fold:hover { border-color: var(--signal); color: var(--signal-text); }
.tier-fold .up { display: none; }
.tier-fold.open .up { display: block; }
.tier-fold.open .down { display: none; }

/* =====================================================================
   header
   ===================================================================== */
.topbar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5) 0 var(--sp-4); border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: var(--t-title); }
.topbar h1 a { color: inherit; }
.brand { display: flex; align-items: center; gap: var(--sp-2); }
/* Two square links passing through each other — the PoS ring and the PoW ring,
   held at the crossing. Square corners, butt caps, one grid, one orientation. */
.brand-mark { width: 20px; height: 20px; flex: none; display: block; }
.topbar .net {
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: var(--tr-label);
}
.topbar .right { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* nav as a segmented control: active tab solid gold */
nav.pages {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: var(--r-1); overflow: hidden;
}
nav.pages a {
  height: 30px; padding: 0 14px; display: grid; place-items: center;
  background: var(--bg-raised); color: var(--fg);
  font-family: var(--sans); font-size: var(--t-meta); font-weight: 500;
  text-decoration: none; transition: background var(--snap);
}
nav.pages a + a { border-left: 1px solid var(--line-strong); }
nav.pages a:hover { background: var(--bg-inset); text-decoration: none; color: var(--fg); }
nav.pages a[aria-current] { background: var(--signal); color: var(--on-signal); font-weight: 600; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 10px; border-radius: var(--r-1);
  border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok    { border-color: var(--live-line); background: var(--live-bg); color: var(--live); }
.pill.ok::before { animation: pulse-dot var(--breathe); }
.pill.stale { border-color: var(--line-signal); background: var(--signal-bg); color: var(--signal-text); }
.pill.dead  { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
/* the stream is gone and the page is on a poll: dashed, breathing fast */
.pill.syncing { border-style: dashed; color: var(--fg-3); }
.pill.syncing::before { animation: pulse-dot var(--breathe-fast); }
/* the tab is hidden: nothing moves, and one fetch on return replaces the gap */
.pill.paused { border-style: dashed; color: var(--fg-3); }
.pill.paused::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.pill.plain::before { display: none; }
.pill.micro { height: auto; padding: 1px 6px; letter-spacing: .08em; border-radius: 0; }

button {
  background: var(--bg-raised); border: 1px solid var(--line-strong); color: var(--fg-2);
  border-radius: var(--r-1); padding: var(--sp-1) var(--sp-3);
  cursor: pointer; font: inherit; font-size: var(--t-meta); line-height: var(--lh-body);
  transition: background var(--snap), color var(--snap), border-color var(--snap);
}
button:hover { color: var(--fg); background: var(--bg-inset); }
button.on { color: var(--signal-text); border-color: var(--line-signal); background: var(--signal-bg); }
#theme-toggle { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
#theme-toggle:hover { border-color: var(--signal); }
#theme-toggle svg { display: block; }
/* moon shows in light (click for dark), sun shows in dark */
#theme-toggle .sun { display: none; }
[data-theme="dark"] #theme-toggle .sun { display: block; }
[data-theme="dark"] #theme-toggle .moon { display: none; }

#banner {
  border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; font-size: var(--t-body);
}

/* =====================================================================
   tooltips — click-popovers behind an `i`
   ===================================================================== */
.tip-wrap { position: relative; display: inline-flex; }
.tip-btn {
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--bg-inset); color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-eyebrow); cursor: pointer; flex: none;
}
.tip-btn:hover { border-color: var(--signal); color: var(--signal-text); }
.tip-panel {
  position: absolute; z-index: 9; top: calc(100% + 10px); left: 0;
  width: min(400px, 84vw); padding: var(--sp-4);
  border: 1px solid var(--line-signal); background: var(--bg-raised);
  box-shadow: var(--tip-shadow);
  font-family: var(--sans); font-size: var(--t-body); font-weight: 400;
  line-height: var(--lh-body); color: var(--fg-2);
  text-transform: none; letter-spacing: 0; text-align: left; white-space: normal;
}
.tip-panel.up { top: auto; bottom: calc(100% + 10px); }
.tip-panel.right { left: auto; right: 0; }
.tip-panel p { margin: 0; }
.tip-panel p + p { margin-top: var(--sp-3); }
.tip-panel[hidden] { display: none; }

/* =====================================================================
   panels
   ===================================================================== */
.panel { border: 1px solid var(--line); background: var(--bg-raised); }
.phead {
  position: relative; padding: var(--pad-head); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.phead h2 { font-size: var(--t-title); }
.phead h3 { font-size: var(--t-title); letter-spacing: -.015em; }
.phead .subtitle {
  font-family: var(--sans); font-size: var(--t-body); color: var(--fg-3);
  max-width: var(--measure);
}
.phead .count {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.phead .right { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.pbody { padding: var(--pad-body); }

.grid { display: grid; gap: var(--gap-grid); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.grid.ruled { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid.ruled > * { background: var(--bg-raised); border: 0; }

/* --- vitals --- */
.vitals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--gap-grid);
}
.vitals.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .vitals.cols-2 { grid-template-columns: 1fr; } }
.vgroup { background: var(--bg-raised); padding: var(--sp-5) 22px; }
.glabel { display: flex; align-items: center; gap: var(--sp-2); }
.vlead { margin-top: 14px; }
.vlead .n {
  font-family: var(--mono); font-size: var(--t-fig); font-weight: 500;
  line-height: var(--lh-fig); letter-spacing: -.03em;
}
.vlead .l { margin-top: 6px; font-size: var(--t-meta); color: var(--fg-2); }
.vrows { margin-top: var(--sp-4); display: flex; flex-direction: column; }
.vrows .kv { border-top: 1px solid var(--line); padding: var(--sp-2) 0; }

.kv {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); font-size: var(--t-meta); padding: 11px 0;
}
.kv + .kv { border-top: 1px solid var(--line); }
.kv > span:first-child { min-width: 0; color: var(--fg-2); display: flex; align-items: center; gap: var(--sp-2); }
.kv b { font-family: var(--mono); font-size: var(--t-body); font-weight: 500; white-space: nowrap; }
.kv b.ok { color: var(--live); } .kv b.warn { color: var(--warn); } .kv b.bad { color: var(--warn); }

.note { font-size: var(--t-body); color: var(--fg-3); line-height: var(--lh-body); margin-top: var(--sp-3); }

/* --- meter: a value against a threshold ---------------------------- */
.meter {
  position: relative; height: 8px; margin-top: 10px;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.meter i { position: absolute; inset: -1px auto -1px -1px; background: var(--live); display: block; }
.meter u { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--gold-700); }
.meter-scale {
  margin-top: 7px; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--fg-3);
}
.meter-scale .mark { color: var(--signal-text); }

/* =====================================================================
   the anchor bands (pulse, verdict) — THEMED since 2026-08-26. Light
   mode is a plain raised panel behind the signal border: no dark-blue
   band on a light page. Dark mode keeps the deep-space gradient. All
   band-internal colors route through --h* so both modes stay legible.
   ===================================================================== */
.hero {
  margin-top: var(--sp-6);
  border: 1px solid var(--line-signal);
  background: var(--bg-raised);
  /* band palette: aliases the theme in light mode */
  --hfg: var(--fg); --hfg-2: var(--fg-2); --hfg-3: var(--fg-3); --hline: var(--line);
  --h-clear: var(--live); --h-clear-line: var(--live-line);
  --h-tight: var(--signal-text); --h-tight-line: rgba(244,183,40,.5);
  --h-breach: var(--warn); --h-breach-line: var(--warn-line); --h-breach-bg: var(--warn-bg);
  --hchip-line: var(--line-strong);
  --hbtn-line: var(--line-strong); --hbtn-bg: var(--bg-inset);
  --htip-bg: var(--bg-raised); --htip-shadow: 0 20px 44px -22px rgba(11,24,40,.28);
  --hnote: var(--fg-3);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  padding: 30px; color: var(--hfg-2);
}
[data-theme="dark"] .hero {
  background: linear-gradient(150deg, #16283A 0%, #0B1828 62%, #060F1B 100%);
  box-shadow: 0 18px 44px -26px rgba(11,24,40,.6);
  /* these three were literal copies of the dark theme values, and --hfg-3
     silently kept the pre-v9 dim colour when --fg-3 moved. Alias instead. */
  --hfg: var(--fg); --hfg-2: var(--fg-2); --hfg-3: var(--fg-3); --hline: rgba(255,255,255,.14);
  --h-clear: var(--cy); --h-clear-line: rgba(4,253,207,.45);
  --h-tight: var(--gold-500);
  --h-breach: #FF8A5C; --h-breach-line: rgba(255,138,92,.5); --h-breach-bg: rgba(255,138,92,.07);
  --hchip-line: rgba(255,255,255,.22);
  --hbtn-line: rgba(255,255,255,.24); --hbtn-bg: rgba(255,255,255,.05);
  --htip-bg: #04101C; --htip-shadow: 0 20px 44px -22px rgba(0,0,0,.9);
  --hnote: var(--sp-300);   /* v11: sp-400 was 4.1:1 on the band — under the floor for 11px notes */
}
@media (max-width: 899px) { .hero { padding: 22px; gap: 18px; } }
.hero .eyebrow { color: var(--signal-text); }
.hero-title-row { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.hero-title-row .tip-btn {
  margin-top: var(--sp-4); width: 22px; height: 22px;
  border-color: var(--hbtn-line); background: var(--hbtn-bg); color: var(--hfg-2);
}
.hero-title-row .tip-btn:hover { border-color: var(--signal); color: var(--signal-text); }
.hero-title-row .tip-panel {
  top: 46px; width: min(430px, 84vw); padding: 18px;
  border-color: var(--line-signal); background: var(--htip-bg); color: var(--hfg-2);
  box-shadow: var(--htip-shadow);
}
.tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tip-head .eyebrow { letter-spacing: .1em; color: var(--signal-text); }

.hero-body > p { margin: var(--sp-3) 0 0; max-width: 62ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--hfg-2); }
.hero-body strong { color: var(--hfg); font-weight: 600; }
.tier-head + .hero { margin-top: 0; }
.lead-id { display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline; }
.lead-id .mono { font-size: var(--t-body); color: var(--hfg); }

/* the hero figures, each carrying a one-word state chip */

.fig-label {
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--hfg-3);
  text-transform: uppercase; letter-spacing: .12em;
}
.figchip {
  font-family: var(--mono); font-size: var(--fs-1); letter-spacing: .12em;
  padding: 2px 5px; border: 1px solid var(--hchip-line); color: var(--hfg-3);
  white-space: nowrap; flex: none;
}
.figchip:empty { display: none; }
.figchip.breached { border-color: var(--h-breach-line); color: var(--h-breach); }
.figchip.tight { border-color: var(--h-tight-line); color: var(--h-tight); }
.figchip.clear { border-color: var(--h-clear-line); color: var(--h-clear); }

/* =====================================================================
   01 · the pulse — both engines, live. Same deep-space band as .hero,
   but a single column: headline over a PoW | PoS split.
   ===================================================================== */
.hero.pulse { position: relative; overflow: hidden; grid-template-columns: 1fr; gap: var(--sp-5); }
/* a block arriving: a 1px signal line runs the width of the band's top edge,
   once (motion.css `.sweep`). The band clips at its border, so the line sits
   on the inside of the edge (top: 0) rather than over it (the system's -1px). */
.sweep::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--signal);
  transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none;
}
.sweep.block-in::after { animation: head-sweep var(--sweep); }
@keyframes head-sweep { 0% { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.pulse-glow { position: absolute; inset: 0; pointer-events: none; }
[data-theme="dark"] .pulse-glow {
  background: radial-gradient(55% 100% at 92% 0%, rgba(4,253,207,.13) 0%, rgba(6,15,27,0) 70%);
}
.pulse-head, .pulse-grid { position: relative; }
.pulse-live { display: flex; align-items: center; gap: 9px; }
.pulse-live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--h-clear);
  animation: pulse-dot var(--breathe);
}
.pulse-live span {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .14em;
  text-transform: uppercase; color: var(--h-clear);
}
.pulse-head h2 { margin-top: var(--sp-3); font-size: var(--t-fig); line-height: var(--lh-tight);
  letter-spacing: -.025em; max-width: 30ch; color: var(--hfg); }

.pulse-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--hline);
}
/* the window drops under the two engines rather than squeezing all three */
@media (max-width: 1180px) {
  .pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-win { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--hline); }
}
@media (max-width: 720px) { .pulse-grid { grid-template-columns: 1fr; } .pulse-win { grid-column: auto; } }
.pulse-col { display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-5); min-width: 0; }
.pulse-col + .pulse-col { border-left: 1px solid var(--hline); }
@media (max-width: 720px) {
  .pulse-col + .pulse-col { border-left: 0; border-top: 1px solid var(--hline); }
}
.pulse-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pulse-tag {
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--hfg-3);
  text-transform: uppercase; letter-spacing: .12em;
}
.pulse-big { display: flex; align-items: baseline; gap: 10px; margin: var(--sp-3) 0 var(--sp-2); flex-wrap: wrap; }
.pulse-big .v {
  font-family: var(--mono); font-size: var(--t-fig);
  font-weight: 500; letter-spacing: -.02em; color: var(--hfg); font-variant-numeric: tabular-nums;
}
.pulse-big .u {
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--hfg-3);
  text-transform: uppercase; letter-spacing: .12em;
}
.pkv {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: 7px 0; border-top: 1px solid var(--hline);
  font-size: var(--t-meta); color: var(--hfg-3);
}
.pkv b { font-family: var(--mono); font-size: var(--t-body); font-weight: 500; color: var(--hfg-2); white-space: nowrap; }
.pkv b.clear { color: var(--h-clear); } .pkv b.tight { color: var(--h-tight); } .pkv b.breached { color: var(--h-breach); }
.pkv b .dim { color: var(--hfg-3); font-weight: 400; }

/* the bonding window, as the pulse band's third column: a state chip, the
   countdown, and the cycle in miniature. Every figure comes from the
   configured window and period — nothing here knows 70 or 150.

   The voting bar in the Finality column is the same drawing: the ⅓ line from
   the other side. Its fill is the bonded stake this node hears voting, the
   tick is the ⅔ it takes, and the fill takes the column's clear / tight /
   breached tone, so under ⅔ it is the breach colour and nothing else on the
   band has to say so twice.

   One rule set draws both tracks (design system, 2026-09-03). Each column is
   a flex column with its track pinned to the bottom, so the two bars share
   one baseline although Finality carries one more .pkv row than the window;
   and the middle scale label sits under its tick — it reads --at, which
   render.js sets to the tick's own percentage — where space-between had
   centred it at 50% while the tick stood at ⅔ (66.67%) or at the window's
   edge (46.67%). */
.pulse-big .v.clear { color: var(--h-clear); }
.pulse-col .pulse-col-head, .pulse-col .pulse-big, .pulse-col .pkv { flex: none; }
.pulse-col .pkv:has(+ .wtrack:not([hidden])) { margin-bottom: 11px; }
.pulse-col .wtrack { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hline); }
.pulse-col .wtrack[hidden] { display: none; }
.pulse-col .wbar {
  position: relative; display: block; flex: none; width: auto; min-width: 0; height: 10px;
  background: var(--hbtn-bg); border: 1px solid var(--hline);
}
.pulse-col .wbar i {
  background: var(--live-bg);
  background: color-mix(in oklab, var(--h-clear) 20%, transparent);
  border-right: 2px solid var(--h-clear);
}
.pulse-col .wbar i.tight { background: color-mix(in oklab, var(--h-tight) 22%, transparent); border-right-color: var(--h-tight); }
.pulse-col .wbar i.breached { background: color-mix(in oklab, var(--h-breach) 26%, transparent); border-right-color: var(--h-breach); }
.pulse-col .wbar u { top: -4px; bottom: -4px; background: var(--hfg); }
.pulse-col .wscale {
  position: relative; margin-top: 7px; display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .06em;
  text-transform: uppercase; color: var(--hfg-3); white-space: nowrap;
}
.pulse-col .wscale > span:nth-child(2) { position: absolute; left: var(--at, 50%); transform: translateX(calc(-1 * var(--at, 50%))); }
/* the ⅔ tick is always past the middle: its label ends at the tick, leaving
   the right third to "100% = all bonded" */
.pulse-col .vtrack .wscale > span:nth-child(2) { left: auto; right: calc(100% - var(--at, 66.67%)); transform: none; }
.pulse-col .wscale .wopen { color: var(--h-clear); }
/* the exact ⅔ figure and the "100% = all bonded" end only where the labels
   have room; the bar itself and the "of bonded" row above say the same thing.
   Room is the track's own width, not the viewport's: the page is capped, so a
   desktop track is 330px at 1360 and at 1500 alike, and the end label (123px)
   never fits in the third that the ⅔ label leaves it there. It does where
   the Finality column is half the page (720–1180) and the track passes 400. */
.pulse-col .wtrack { container-type: inline-size; }
.pulse-col .vtrack .wscale .long, .pulse-col .vtrack .wscale > span:last-child { display: none; }
@container (min-width: 220px) { .pulse-col .vtrack .wscale .long { display: inline; } }
@container (min-width: 400px) { .pulse-col .vtrack .wscale > span:last-child { display: inline; } }
@media (max-width: 720px) {
  /* on a phone the count lives in the i panel and the method page */
  #ps-voting .count { display: none; }
}

/* =====================================================================
   02 · the verdict, compact — a second deep-space band (design v2): the
   coefficient is a badge beside the eyebrow, never a display numeral.
   Inherits the .hero band palette; only the layout differs.
   ===================================================================== */
.hero.verdict { grid-template-columns: 1fr; padding: 22px 30px 24px; }
[data-theme="dark"] .hero.verdict { background: #0B1828; }
.verdict .pbody { padding: 0; }
.verdict-row { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.verdict-row .eyebrow { color: var(--signal-text); letter-spacing: .14em; }
.verdict-row .tip-btn { border-color: var(--hbtn-line); background: var(--hbtn-bg); color: var(--hfg-2); }
.verdict-row .tip-panel { background: var(--htip-bg); color: var(--hfg-2); box-shadow: var(--htip-shadow); }

.verdict .hero-title-row h2 { margin-top: var(--sp-3); font-size: var(--t-fig);
  line-height: var(--lh-tight); letter-spacing: -.025em; max-width: 28ch; color: var(--hfg); }
.verdict #hero-lead { margin: var(--sp-3) 0 0; max-width: 62ch; font-size: var(--t-body);
  line-height: var(--lh-body); color: var(--hfg-2); }
.verdict #hero-lead strong { color: var(--hfg); }

.coef {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 13px; border: 1px solid var(--line-signal); background: var(--bg-sunken);
}
.coef b {
  font-family: var(--display); font-size: var(--fs-5); font-weight: 700;
  line-height: var(--lh-fig); letter-spacing: -.04em; color: var(--signal-text);
}
.coef i {
  font-style: normal; font-family: var(--mono); font-size: var(--fs-1); text-align: center;
  color: var(--hfg-3); text-transform: uppercase; letter-spacing: .1em; line-height: var(--lh-meta);
}

/* =====================================================================
   03 · delegate, design v3 — one strip, one suggestion, one fold
   ===================================================================== */
.wstrip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px var(--sp-5); border-bottom: 1px solid var(--line); background: var(--bg-inset);
}
.weta { font-family: var(--mono); font-size: var(--fs-4); color: var(--fg); white-space: nowrap; }
.wtext { font-size: var(--t-meta); color: var(--fg-2); }
.wbar {
  position: relative; flex: 1; min-width: 120px; height: 8px;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.wbar i { position: absolute; inset: -1px auto -1px -1px; background: var(--live-bg); border-right: 1px solid var(--live-line); }
.wbar.closed i { background: var(--bg-inset); border-right-color: var(--line-strong); }
.wbar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fg); }
.wmeta {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
}

.sug {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px;
  align-items: center; padding: 22px var(--sp-5);
}
@media (max-width: 720px) {
  .sug { grid-template-columns: 1fr; }
  /* the glyph belongs beside the name, not centred against three wrapped lines */
  .sug .sug-who, .sug-empty .se-who { align-items: flex-start; }
  .sug-act { justify-content: stretch; }
  .sug-act button, .sug-act .sug-go, .sug-act .se-go { flex: 1; justify-content: center; }
}
.sug-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sug-icon canvas, .sug-icon svg { display: block; }
.sug-id { min-width: 0; }
.sug-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sug-name .mono { font-family: var(--mono); font-size: var(--fs-4); color: var(--fg); }
.sug-meta {
  margin-top: 7px; font-family: var(--mono); font-size: var(--fs-row-meta);
  line-height: var(--lh-body); color: var(--fg-3);
}
.sug-meta + .sug-meta { margin-top: 3px; }
.sug-meta .ok { color: var(--live); }
.sug-meta .cap { text-transform: uppercase; letter-spacing: .08em; }

/* liveness is a gate, not a grade — it gets its own token beside the standing */
.livechip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 9px;
  border: 1px solid var(--live-line); background: var(--live-bg); color: var(--live);
  font-family: var(--mono); font-size: var(--row-chip); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.livechip i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--live);
  animation: pulse-dot var(--breathe);
}

/* nothing clears both halves: say so in one sentence, and point at the table */
.sug-empty {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px;
  align-items: center; padding: 22px var(--sp-5);
}
.sug-empty[hidden] { display: none; }
@media (max-width: 720px) { .sug-empty { grid-template-columns: 1fr; } }
.se-who { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.se-icon {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px dashed var(--line-strong); color: var(--fg-3);
  font-family: var(--mono); font-size: var(--fs-4);
}
.se-title {
  margin-top: 7px; max-width: 62ch; font-family: var(--display); font-size: var(--t-title);
  font-weight: 600; line-height: var(--lh-title); letter-spacing: -.015em; color: var(--fg);
}
.se-body { margin-top: var(--sp-2); max-width: 76ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }
.se-body strong { color: var(--fg); }
.se-go {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .06em;
  border-radius: var(--r-1); text-decoration: none;
  transition: border-color var(--snap), color var(--snap);
}
.se-go:hover { border-color: var(--signal); color: var(--signal-text); text-decoration: none; }
.sug-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.sug-act button {
  display: inline-flex; align-items: center; height: 38px; padding: 0 13px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .06em;
  border-radius: var(--r-1); cursor: pointer;
  transition: border-color var(--snap), color var(--snap);
}
.sug-act button:hover { border-color: var(--signal); color: var(--signal-text); }
.sug-go {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border: 1px solid var(--gold-700); background: var(--signal); color: var(--on-signal);
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 600; letter-spacing: .06em;
  border-radius: var(--r-1); transition: background var(--snap); text-decoration: none;
}
.sug-go:hover { background: var(--gold-300); text-decoration: none; }
.sug-rewards {
  padding: 0 var(--sp-5) 18px; max-width: 88ch;
  font-size: var(--fs-2); line-height: var(--lh-body); color: var(--fg-2);
}
.sug-rewards .tip-wrap { vertical-align: middle; margin-left: var(--sp-2); }
.sug-rewards .tip-panel { width: min(360px, 84vw); }
.se-body { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sug-rewards b.mono { font-family: var(--mono); font-weight: 500; }

.pool { padding: 4px var(--sp-5) 14px; border-top: 1px solid var(--line); }
.pool-row {
  display: grid; grid-template-columns: minmax(0,1fr) 90px 76px auto;
  gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) { .pool-row { grid-template-columns: minmax(0,1fr) auto; } .pool-row > :nth-child(2), .pool-row > :nth-child(3) { display: none; } }
.pool-row .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pool-row .who .mono { font-family: var(--mono); font-size: var(--t-body); color: var(--fg-2); }
.pool-row .mono.dim { font-family: var(--mono); font-size: var(--t-meta); color: var(--fg-3); }
.pool-row .mono.dim .ok { color: var(--live); }
.pool-foot { margin-top: 12px; font-size: var(--t-body); color: var(--fg-3); }

/* the verdict's remedy line + the last-24h flow sentence */
.verdict-remedy { margin-top: var(--sp-4); max-width: 70ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--hfg-2); }
.verdict-remedy strong { color: var(--hfg); }
.verdict-remedy a { font-family: var(--mono); font-size: var(--t-body); white-space: nowrap; color: var(--signal-text); }
.flow {
  padding: 14px var(--sp-5); max-width: 96ch; border-top: 1px solid var(--line);
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2);
}
.flow strong { color: var(--fg); }
.flow .dim { color: var(--fg-3); }

/* =====================================================================
   03 · delegate — the window clock and the candidate cards, one band
   ===================================================================== */
/* what it takes: the one actionable number, drawn to scale */

/* =====================================================================
   staking window cycle track
   ===================================================================== */

/* =====================================================================
   trends — DOM bar strips
   ===================================================================== */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; }
.strip-head .eyebrow { letter-spacing: .12em; }
.strip-head b { font-family: var(--mono); font-size: var(--t-meta); font-weight: 400; color: var(--fg-2); }
.strip-head b.ok { color: var(--live); }
.strip { margin-top: 14px; display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.strip span { flex: 1; min-height: 2px; }

.segmented {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: var(--r-1); overflow: hidden;
}
.segmented button {
  height: 28px; padding: 0 var(--sp-3); border: 0; border-radius: 0; background: var(--bg-raised);
  color: var(--fg-2); font-family: var(--mono); font-size: var(--t-eyebrow); line-height: 1;
}
.segmented button + button { border-left: 1px solid var(--line-strong); }
.segmented button.on { background: var(--signal); color: var(--on-signal); font-weight: 600; }

/* =====================================================================
   scoreboard — div grid with folds
   ===================================================================== */
.tablepanel { border: 1px solid var(--line); background: var(--bg-raised); }

.search {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 30px; padding: 0 11px;
  border: 1px solid var(--line-strong); background: var(--bg-inset); color: var(--fg-3);
  border-radius: var(--r-1);
}
.search input {
  background: none; border: 0; outline: none; color: var(--fg);
  font-family: var(--mono); font-size: var(--t-meta); width: 11ch;
}
.search input::placeholder { color: var(--fg-3); }
.search:focus-within { border-color: var(--signal); }

.srow {
  position: relative;
  /* the six token columns, then Now — a seventh the design system's token
     does not carry yet, so it is added here beside the token, not inside it */
  display: grid; grid-template-columns: var(--grid-row) 156px; gap: var(--sp-4);
  align-items: center; padding: var(--row-pad) var(--sp-5);
  border-bottom: 1px solid var(--line); transition: background var(--snap);
}
.srow.head {
  position: sticky; top: 0; z-index: 6; background: var(--bg-raised);
  padding: 10px var(--sp-5); border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-3);
}
.srow.clickable { cursor: pointer; }
.srow.clickable:hover { background: var(--bg-inset); }
.srow.clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.namecell { min-width: 0; }
.namecell .fin-link, .tname a { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.hexname { font-size: var(--fs-row-key); color: var(--fg-2); letter-spacing: -.01em; }
a.fin-link:hover .hexname { color: var(--signal-text); }

/* two-layer last-10 strip: top = certificates, bottom = votes seen (v4) */
.mm2 { display: inline-flex; flex-direction: column; gap: 2px; cursor: help; }
.mm2 .lane { display: flex; gap: 1.5px; height: var(--row-strip); }
.mm2 .lane span { width: 5px; height: 100%; background: var(--bg-sunken); }
.mm2 .cert span.on { background: var(--live); }
.mm2 .vote span.on { background: var(--bar-1); }
.voteslink {
  border: 0; border-radius: 0; background: transparent; padding: 0 0 1px 2px;
  font-family: var(--mono); font-size: var(--fs-row); color: var(--fg);
  cursor: pointer; border-bottom: 1px dotted var(--line-strong);
}
.voteslink .dimpct { color: var(--fg-3); font-weight: 400; }
.voteslink:hover { color: var(--signal-text); border-bottom-color: var(--signal); background: transparent; }
.voteslink.none { color: var(--fg-3); font-size: var(--fs-row-meta); }
.tip-panel.row-tip { top: calc(100% - 6px); left: auto; right: var(--sp-4); width: min(320px, 84vw); }

.claim-strip {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); font-size: var(--t-body); color: var(--fg-3);
}
.claim-strip a { font-family: var(--mono); font-size: var(--t-meta); }
/* gold edge = inside the ⅓ set — a location, not a verdict */
.srow.above { box-shadow: inset 3px 0 0 var(--gold-500); }
.srow .rank { font-family: var(--mono); font-size: var(--fs-row-meta); color: var(--fg-3); }
.srow .r { text-align: right; }
.sharecell.sharehead { display: block; }
.srow .c { text-align: center; }
.srow .num { font-family: var(--mono); font-size: var(--fs-row); }
.srow .num.dim { color: var(--fg-2); }
.fin-name {
  font-family: var(--display); font-size: var(--fs-row-name); font-weight: 600; letter-spacing: -.015em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

a.fin-link { color: inherit; text-decoration: none; }
a.fin-link:hover .fin-name, a.fin-link:hover .key { color: var(--signal-text); }
/* A key in a row is the row's identity, not an annotation on it: same step as
   the name and the stake (15px), told apart by face. The contextual rules
   below — .rd-key .key, .keyrow .key — still win on specificity where a
   64-character key needs its own size. */
.key { font-family: var(--mono); font-size: var(--fs-row-key); color: var(--fg-2); }

.sharecell { display: flex; align-items: center; gap: var(--sp-2); }
.sharebar { flex: 1; height: 6px; background: var(--bg-sunken); border: 1px solid var(--line); }
.sharebar i { display: block; width: 0; height: 100%; background: var(--bar-1); }
.srow.above .sharebar i { background: var(--gold-500); }
.sharenum { font-family: var(--mono); font-size: var(--fs-row-meta); width: 46px; text-align: right; flex: none; }

.votescell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  /* layout: kills the inline gap under the sprite strip */

/* grade + evidence bar: how much of the grading window the grade rests on (v4) */

/* below-table lines: the accruing third signal + terminated identities (v4) */

.schip.terminated { border-color: var(--warn-line); color: var(--warn); flex: none; }
[data-theme="dark"] .schip.terminated { border-color: rgba(255,138,92,.42); }

/* Now — what this node hears from a finalizer at this moment: a dot and a
   word. voting is quiet (a green dot, dim text); missing and offline are red
   because they are the one thing on the row that changes in minutes; no
   votes is dashed, like the grade's dash. Red here is a fact about the last
   few blocks, never a grade: the letter two cells left does not move. */
.nowcell { display: flex; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; }
.nowhead { text-align: left; }
.nowchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 3px 8px 3px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  font-family: var(--mono); font-size: var(--row-chip); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap; cursor: help;
  transition: border-color var(--snap), color var(--snap), background var(--snap);
}
.nowchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); flex: none; }
.nowchip .nd { color: inherit; font-weight: 600; letter-spacing: .02em; text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.nowchip.voting { border-color: var(--live-line); color: var(--fg-2); }
.nowchip.voting i { background: var(--live); }
.nowchip.missing, .nowchip.offline { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.nowchip.missing i { background: var(--warn); animation: pulse-dot var(--breathe-fast); }
.nowchip.offline i { background: var(--warn); }
.nowchip.novotes { border-style: dashed; color: var(--fg-3); }
.nowchip.novotes i { background: transparent; border: 1px solid var(--fg-3); }
.nowchip.unknown i { background: var(--line-strong); }
.nowchip.dotonly { padding: 0; border: 0; background: transparent; }
.nowchip.dotonly + .nowchip.dotonly { margin-left: 2px; }
.srow.summary .nowcell { gap: 0; }

/* the change itself, shown once: a row whose facts moved, a chip whose state
   moved, a numeral that ticked. One tick per element at a time — restart by
   removing the class, reading offsetWidth, adding it back (ui.js `tick`),
   never by cloning. Reduced-motion turns every one of these off. */
@keyframes row-tick { 0% { background: var(--signal-bg); } 100% { background: transparent; } }
@keyframes chip-tick { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes text-tick { 0% { color: var(--signal-text); } 100% { color: inherit; } }
.srow.changed { animation: row-tick var(--tick-row); }
.nowchip.changed { animation: chip-tick var(--tick-chip); }
.ticked { animation: text-tick var(--tick); }
.board-tally .bad { color: var(--warn); }
.board-tally .grades { color: var(--fg-2); }
.board-legend .lg-now .nowchip { padding: 0; border: 0; background: transparent; cursor: default; }

/* The fold — ONE object for every place the board hides rows behind a line:
   the ⅓ stall line, the paging fold at the tail of the list, and the pool
   fold in the delegate band. The whole bar is the target and never shorter
   than 44px; the eyebrow names the boundary; the description is dropped,
   not truncated, on a phone; a second action appears only when the
   remainder is more than one page. (design v7) */
.fold {
  width: 100%; min-height: 44px; display: flex; gap: 14px; align-items: center;
  padding: var(--sp-2) var(--sp-5); cursor: pointer; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--bg-inset); font: inherit; color: inherit;
  transition: background var(--snap);
}
.fold:hover { background: var(--bg-sunken); }
.fold:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.fold.stall {
  background: var(--signal-bg);
  border-top: 1px solid var(--signal); border-bottom: 1px solid var(--line-signal);
}
.fold.stall:hover { background: var(--gold-300); }
[data-theme="dark"] .fold.stall:hover { background: rgba(244,183,40,.22); }
.fold .tag {
  font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); flex-shrink: 0;
}
.fold.stall .tag { color: var(--signal-text); }
.fold .desc {
  flex: 1; min-width: 0; font-size: var(--fs-row-meta); color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fold.stall .desc { color: var(--fg-2); }
.fold .desc.mono { font-family: var(--mono); color: var(--fg-3); }
.fold .toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; min-width: 112px; padding: 0 12px; margin-left: auto;
  border: 1px solid var(--line-strong); color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .08em;
  border-radius: var(--r-1); flex-shrink: 0; white-space: nowrap;
}
.fold .toggle.all { height: 34px; min-width: 0; padding: 0 12px; }
.fold.stall .toggle { border-color: var(--gold-700); color: var(--signal-text); }

/* "show more" below the ⅓ line: one fold, one or two actions — each its own
   button, so SHOW ALL is reachable from the keyboard */
.fold.more { cursor: default; }
.fold.more .toggle { background: transparent; cursor: pointer; font: inherit; font-family: var(--mono); font-size: var(--t-eyebrow); }
.fold.more .toggle.all { margin-left: 0; }
.fold.more .toggle:hover, .fold.more .toggle:focus-visible { border-color: var(--signal); color: var(--signal-text); outline: 0; }

/* the board before data, and an empty search */
.board-loading { padding: var(--sp-4) var(--sp-5); font-size: var(--t-meta); color: var(--fg-3); }

/* what the grade colours mean, once, under the tally */
.board-legend {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line);
  font-size: var(--t-meta); color: var(--fg-2);
}
.board-legend > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.board-legend a { margin-left: auto; font-family: var(--mono); font-size: var(--t-meta); }

/* folded ⅓-set summary row */
.srow.summary { background: var(--bg-inset); }
.srow.summary .names { font-family: var(--sans); font-size: var(--t-body); font-weight: 600; color: var(--fg-2); }

/* expanded tail: compact three-column list */

/* Row detail (design v7) — five full-width bands, in the order a delegator
   reads: the 64-character key with COPY, four vitals across one row, votes
   for blocks over the last 60, bonded stake over 7 days, and the way out to
   the full page. The old 258px side column is gone; at 560 the same five
   stack and the vitals fall to 2-up — nothing hidden, nothing spilling. */
.srow-detail {
  border-bottom: 1px solid var(--line); background: var(--bg-inset);
  box-shadow: inset 3px 0 0 var(--line-strong);
}
.rd-eyebrow {
  font-family: var(--mono); font-size: var(--row-chip); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); flex: 0 0 auto;
}
.rd-key {
  display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap;
  padding: 13px var(--sp-5); border-bottom: 1px solid var(--line);
}
.rd-key .key {
  flex: 1 1 320px; min-width: 0; font-family: var(--mono); font-size: var(--t-body);
  line-height: var(--lh-meta); color: var(--fg); overflow-wrap: anywhere; word-break: break-all;
}
.rd-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; height: 34px; min-width: 96px; padding: 0 13px;
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .1em;
  border-radius: var(--r-1); cursor: pointer;
  transition: border-color var(--snap), color var(--snap);
}
.rd-copy:hover { border-color: var(--signal); color: var(--signal-text); }

/* four vitals, one row — 1px gaps over the line colour draw the hairlines */
.rd-vitals {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.rd-fact { background: var(--bg-inset); padding: 13px var(--sp-5) 14px; }
.rd-fact b {
  display: block; margin-top: 7px; font-family: var(--mono); font-size: var(--fs-4);
  font-weight: 400; line-height: var(--lh-tight); color: var(--fg);
}
.rd-fact b.live { color: var(--live); }
.rd-fact b.warn { color: var(--warn); }
.rd-fact b.dim { color: var(--fg-3); }
.rd-fact small { display: block; margin-top: 4px; font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--fg-3); }

.rd-votes {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 14px var(--sp-5); border-top: 1px solid var(--line);
}
.rd-strip { flex: 1 1 220px; min-width: 0; line-height: 0; }  /* layout: same */
.rd-strip svg { max-width: none; height: 16px; }
.rd-count { flex: 0 0 auto; font-family: var(--mono); font-size: var(--t-body); color: var(--fg-2); }

.rd-stake { padding: 14px var(--sp-5) 16px; border-top: 1px solid var(--line); }
.rd-head { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; }
.rd-now { margin-left: auto; font-family: var(--mono); font-size: var(--fs-4); color: var(--fg); }
.rd-delta { font-family: var(--mono); font-size: var(--t-meta); color: var(--fg-3); }
.rd-delta.ok { color: var(--live); }
.rd-delta.warn { color: var(--warn); }
.rd-svg { margin-top: 12px; }
.rd-foot { margin-top: 6px; display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-eyebrow); color: var(--fg-3); }

.rd-out {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 11px var(--sp-5); border-top: 1px solid var(--line); background: var(--bg-raised);
}
.rd-out span { flex: 1 1 260px; min-width: 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }
.rd-out a { flex: 0 0 auto; font-family: var(--mono); font-size: var(--t-meta); }

/* the open row keeps its own edge: gold inside the ⅓ set, quiet elsewhere */
.srow.open { background: var(--bg-inset); }
.srow.open:not(.above) { box-shadow: inset 3px 0 0 var(--fg-2); }

@media (max-width: 900px) {
  .rd-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-key, .rd-fact, .rd-votes, .rd-stake, .rd-out { padding-left: var(--row-pad); padding-right: var(--row-pad); }
}
@media (max-width: 560px) {
  .rd-key { align-items: flex-start; }
  .rd-key .key { font-size: var(--t-meta); }
  .rd-copy { width: 100%; }
}

/* =====================================================================
   finalizer page — the verdict first, then the evidence
   ===================================================================== */
a.backlink { color: var(--fg-2); text-decoration: none; }
a.backlink:hover { color: var(--signal-text); }
.topbar .pagename {
  font-family: var(--display); font-size: var(--t-title); font-weight: 700;
  letter-spacing: -0.02em;
}

/* the finalizer hero: grade beside the verdict, two columns on desktop */
@media (min-width: 900px) {
  .hero.fhero { grid-template-columns: auto minmax(0,1fr); gap: 36px; align-items: start; }
  .fhero .hero-figure { padding-right: 36px; border-right: 1px solid var(--hline); text-align: center; }
}
@media (max-width: 899px) {
  .fhero .hero-figure { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hline); padding-bottom: var(--sp-4); }
  .fhero .fstack { margin-top: 0; align-items: flex-start; }
  .fhero .hero-figure .l { text-align: left; }
}
.fhero .hero-figure .n {
  display: block; font-family: var(--display); font-size: var(--t-letter);
  font-weight: 700; line-height: var(--lh-letter); letter-spacing: -.05em;
}
.fhero .hero-figure .n.unrated, .fhero .hero-figure .n.bad {
  font-size: var(--t-fig); line-height: var(--lh-fig); letter-spacing: -.03em; max-width: 7ch;
}
.fhero .hero-figure .n.bad { color: var(--warn); }
.fhero .fstack { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: var(--sp-3); }
.fhero .hero-figure .l {
  display: block; text-align: center;
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--hfg-3);
  text-transform: uppercase; letter-spacing: var(--tr-label);
}
[data-theme="dark"] .fhero .schip.reliable { border-color: rgba(4,253,207,.45); color: var(--cy); }
[data-theme="dark"] .fhero .schip.uneven { border-color: rgba(244,183,40,.5); color: var(--gold-500); }
[data-theme="dark"] .fhero .schip.notseen { border-color: rgba(255,255,255,.28); color: var(--fg-3); }
.fhero .hero-body h2 { margin-top: var(--sp-3); font-size: var(--t-fig); line-height: var(--lh-tight);
  letter-spacing: -.025em; max-width: 30ch; color: var(--hfg); }
/* the grade figure inside the hero band */
/* The letter is 88px, but 88px of #04FDCF on white is 1.3:1 — "large text"
   does not rescue a colour that was only ever picked for a dark ground. These
   route through the themed roles instead, so light gets the audited values
   (6.5 / 6.7 / 6.4 : 1) and dark keeps the exact cyan and gold it had. */
.fgrade.gA { color: var(--live); }
.fgrade.gB { color: var(--signal-text); }
.fgrade.gC { color: var(--warn); }
.fgrade.none { color: var(--hfg-3); }
.fgrade.unrated {
  font-size: var(--t-fig); line-height: var(--lh-fig); letter-spacing: -.03em;
  color: var(--hfg-3); max-width: 6ch;
}
.fhero-chips {
  margin-top: var(--sp-5); display: flex; flex-wrap: wrap;
  gap: var(--sp-2) 26px; align-items: center;
}
.fchip {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .06em; text-transform: uppercase; color: var(--hfg-3);
}
.fchip b { color: var(--hfg); font-weight: 500; font-size: var(--t-body); letter-spacing: 0; }
.setchip {
  display: inline-flex; align-items: center; padding: var(--sp-1) 10px;
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: .08em; text-transform: uppercase;
}
.setchip.outside { border: 1px solid var(--live-line); background: var(--live-bg); color: var(--live); }
.setchip.inside { border: 1px solid var(--line-signal); background: var(--signal-bg); color: var(--signal-text); }

/* identity — full width now that the delegate card is the window strip */
.ident-card { margin-top: var(--gap-grid); padding: 22px var(--sp-6); }
.ident-name-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ident-name-row h2 { font-size: var(--t-title); letter-spacing: -.025em; display: inline-flex; align-items: center; gap: 10px; }
#fin-name.unclaimed { color: var(--fg-2); }
.tenure {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.tenure:empty { display: none; }
.ident-desc {
  margin: 10px 0 0; font-size: var(--t-body); line-height: var(--lh-body);
  max-width: 70ch; color: var(--fg-2); text-wrap: pretty;
}
.linkchips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.linkchips:empty { display: none; }
.linkchips a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
  border: 1px solid var(--line-strong); background: var(--bg-inset);
  font-family: var(--mono); font-size: var(--t-meta); color: var(--fg-2);
}
.linkchips a:hover { border-color: var(--signal); color: var(--signal-text); text-decoration: none; }
.keyblock { margin-top: 18px; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.keyrow { margin-top: 7px; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.keyrow .key { font-size: var(--t-meta); line-height: var(--lh-meta); word-break: break-all; }
.copybtn {
  flex-shrink: 0; height: 28px; padding: 0 10px; background: var(--bg-inset);
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: .06em; text-transform: uppercase;
}
.copybtn:hover { border-color: var(--signal); color: var(--signal-text); }

/* the bonding window on the finalizer page: the network strip + one sentence */
.window-sec { margin-top: var(--gap-grid); }
.window-sec[hidden] { display: none; }
.window-sec .wstrip { border-bottom: 0; padding: 14px var(--sp-5); }
.wcta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; flex: 0 0 auto;
  border: 1px solid var(--gold-700); background: var(--signal); color: var(--on-signal);
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 600; letter-spacing: .06em;
  border-radius: var(--r-1); transition: background var(--snap);
}
.wcta:hover { background: var(--gold-300); color: var(--on-signal); text-decoration: none; }
.wfine { padding: 11px var(--sp-5); border-top: 1px solid var(--line); font-size: var(--t-body); color: var(--fg-2); }

/* removed is a page state */
.removed-banner {
  margin-top: var(--sp-6); padding: 18px 22px;
  border: 1px solid var(--warn); background: var(--warn-bg);
}
.removed-banner[hidden] { display: none; }
.removed-banner + .hero { margin-top: var(--gap-grid); }
.rb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rb-title { font-family: var(--display); font-size: var(--t-title); font-weight: 700; letter-spacing: -.02em; }
.removed-banner p { margin: 10px 0 0; max-width: 78ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }

/* the standing vital: score beside its word */
.vlead.standing { display: flex; align-items: center; gap: 12px; }
.vlead.standing .score { font-family: var(--display); font-size: var(--t-fig); font-weight: 700; letter-spacing: -.035em; line-height: var(--lh-fig); }
.vlead .n.ok { color: var(--live); }
.kv b small { font-size: var(--t-eyebrow); color: var(--fg-3); font-weight: 400; }
.kv b a { color: var(--fg-3); }

/* the grid reads itself — one designed line under the vote grid */
.gridread {
  margin-top: var(--sp-4); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); background: var(--bg-inset);
}
.gr-label {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3); flex: 0 0 auto;
}
.gr-word { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .06em; flex: 0 0 auto; color: var(--fg-2); }
.gr-word.ok { color: var(--live); } .gr-word.warn { color: var(--signal-text); } .gr-word.dim { color: var(--fg-3); }
.gr-text { flex: 1; min-width: 220px; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }

/* the finalizer page's short sheet */
.fsheet { margin-top: var(--gap-grid); }
.fsheet .readlist { margin-top: 0; }
.fsheet .readlist > div:first-child { border-top: 0; }

/* stake history head + shared chart furniture */
.stake-headline {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}
.stake-headline .big {
  font-family: var(--display); font-size: var(--t-fig); font-weight: 700;
  letter-spacing: -.035em;
}
.delta.ok { color: var(--live); }
.delta.warn { color: var(--warn); }
.chart-legend {
  margin-top: 10px; display: flex; align-items: center; gap: var(--sp-3) var(--sp-5);
  flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--fg-3);
}
.chart-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend .sw { width: 8px; height: 8px; display: inline-block; flex: none; }
.chart-legend .sw.tall { height: 10px; }
.chart-legend .sw.low { height: 5px; }

.record-grid {
  margin-top: var(--gap-grid); display: grid; gap: var(--gap-grid);
  grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); align-items: start;
}
@media (max-width: 980px) { .record-grid { grid-template-columns: 1fr; } }

.notes-strip {
  margin-top: var(--gap-grid); padding: 18px var(--sp-5);
  border: 1px solid var(--line); background: var(--bg-inset);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8);
  font-size: var(--t-body); color: var(--fg-2);
}

.identity h2 { font-size: var(--t-title); }
.identity .key { overflow-wrap: anywhere; margin-top: var(--sp-1); }
.identity p { max-width: var(--measure); font-size: var(--t-body); color: var(--fg-2); margin: var(--sp-3) 0 0; }
.links { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--t-meta); flex-wrap: wrap; }

 

.vitals > .note { grid-column: 1 / -1; background: var(--bg-raised); margin: 0; padding: var(--sp-3) 22px; }

/* =====================================================================
   03 · network internals
   ===================================================================== */
/* Concentration takes the width it needs and keeps the "held by the top N"
   readout beside it; the 24h strip is its own full-width panel below. (v7) */
.conc-split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.conc-split .conc-side { border-left: 1px solid var(--line); }
@media (max-width: 1040px) {
  .conc-split { grid-template-columns: 1fr; }
  .conc-split .conc-side { border-left: 0; border-top: 1px solid var(--line); }
}

.kv.stack { align-items: flex-start; }

.kv b.warn-neutral { color: var(--signal-text); }

.conc-chart {
  margin-top: 4px; position: relative; height: 146px;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.conc-bars {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  gap: 2px; padding-left: 2px;
}
.conc-bars span { flex: 1; min-width: 2px; }
.conc-line { position: absolute; z-index: 2; left: 0; right: 0; height: 1px; background: var(--gold-700); }
.conc-chip {
  position: absolute; z-index: 2; right: 3px; padding: 2px 6px;
  background: var(--bg-raised); border: 1px solid var(--line-signal);
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .06em;
  color: var(--signal-text);
}

b.ok, span.ok { color: var(--live); }
b.warn, span.warn { color: var(--signal-text); }
b.bad, span.bad { color: var(--warn); }

/* ── design v5: the three standings ──────────────────────────────────── */
.schip.reliable { border-color: var(--live-line); color: var(--live); }
.schip.uneven { border-color: var(--line-signal); color: var(--signal-text); }
.schip.notseen { border-style: dashed; border-color: var(--line-strong); color: var(--fg-3); }
.stcell { position: relative; display: inline-block; }
.stbtn { cursor: pointer; background: transparent; padding: 3px 7px; border-radius: var(--r-1); font-size: var(--row-chip); }
.stbtn:hover, .stbtn[aria-expanded="true"] { background: var(--bg-inset); }
.gpop {
  position: absolute; z-index: 9; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: min(300px, 84vw); padding: 12px 14px; text-align: left;
  border: 1px solid var(--line-signal); background: var(--bg-raised); box-shadow: var(--tip-shadow);
  display: grid; gap: 6px; font-size: var(--t-meta); color: var(--fg-2); cursor: default;
}
.gpop[hidden] { display: none; }
.gp-row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.gp-row b { font-family: var(--mono); font-weight: 500; color: var(--fg); white-space: nowrap; }
.gp-row b.ok { color: var(--live); } .gp-row b.warn { color: var(--signal-text); } .gp-row b.dim { color: var(--fg-3); }
.gp-ev { display: block; height: 2px; margin-top: 2px; background: var(--bg-sunken); }
.gp-ev i { display: block; width: 0; height: 100%; background: var(--live); }
.gp-ev i.uneven { background: var(--signal); }
.gp-ev i.notseen { background: transparent; }
.gp-note { font-size: var(--t-eyebrow); color: var(--fg-3); line-height: var(--lh-meta); }
.gp-note.warn { color: var(--signal-text); }
.gpop > a { font-family: var(--mono); font-size: var(--t-meta); margin-top: 2px; }
.srow .c .stcell { text-align: center; }
.board-tally {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-inset);
  font-family: var(--mono); font-size: var(--fs-row-meta); letter-spacing: .04em;
  color: var(--fg-2);
}
.board-tally .tal { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--fg); }
.board-tally .sep, .board-tally .faint { color: var(--fg-3); }
.board-tally .dim { color: var(--fg-2); }

/* the verdict's one figure: held vs the fixed ⅓, drawn as a bar */
.vfig { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hline); }
.vfig-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.vfig-row { margin-top: 7px; display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.vfig-val { font-family: var(--mono); font-size: var(--t-fig); font-weight: 500; letter-spacing: -.02em; color: var(--warn); }
.vfig-note { font-size: var(--t-body); color: var(--hfg-3); }
.vfig-note b { color: var(--hfg-2); font-weight: 500; }
.vbar { position: relative; margin-top: 12px; height: 10px; background: var(--bg-sunken); border: 1px solid var(--hline); }
.vbar-fill { position: absolute; inset: -1px auto -1px -1px; background: var(--warn); opacity: .85; }
.vbar-tick { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--gold-500); }
.vbar-scale {
  margin-top: 8px; display: flex; justify-content: space-between;
  gap: var(--sp-1) var(--sp-3); flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .06em; color: var(--hfg-3);
}
/* the reading and its scale get a line each rather than collide */
@media (max-width: 560px) { .vbar-scale > * { flex: 1 1 100%; } }
.vbar-scale span:first-child { color: var(--signal-text); }

/* the attention section: band + what-was-checked fold */
.drift-sec { border: 1px solid var(--line); background: var(--bg-raised); }
.drift-sec .drift { border: 0; }
.greens-fold { border-top: 1px solid var(--line); }
.greens { padding: 4px var(--sp-5) var(--sp-4); border-top: 1px solid var(--line); }
.greens .note { margin-top: var(--sp-3); }

/* the reading sheet's three bands: the questions, the two glossaries, the
   disclaimers — each ruled off from the next (design v7) */
.read-answers { border-bottom: 1px solid var(--line); }
.why-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-8); margin-top: 14px;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.why-grid h4 {
  margin: 0; font-family: var(--display); font-size: var(--t-body);
  font-weight: 600; letter-spacing: -.01em;
}
.why-grid p { margin: 5px 0 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }
.read-not { border-top: 1px solid var(--line); background: var(--bg-inset); }
.not-grid {
  margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8);
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2);
}
.not-grid span { flex: 1 1 240px; }
.not-grid strong { color: var(--fg); }

/* still climbing to the tip: a caveat over the whole page, not one panel.
   Quiet, not gold — it is this node's own state, not a network warning. */
.syncnote {
  margin-top: var(--sp-4); padding: 13px 18px 14px;
  border: 1px solid var(--line-strong); background: var(--bg-inset);
}
.syncnote[hidden] { display: none; }
.syncnote .sline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.syncnote .stag {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2);
}
.syncnote .stag i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
  animation: pulse-dot var(--breathe);
}
.syncnote .stext {
  flex: 1; min-width: 260px; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2);
}
.syncnote .stext strong { font-family: var(--mono); font-weight: 400; color: var(--fg); }
.syncnote .stext .faint { font-family: var(--mono); color: var(--fg-3); }
.syncnote .sbar {
  position: relative; margin-top: 11px; height: 6px;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.syncnote .sbar i {
  position: absolute; inset: -1px auto -1px -1px;
  background: var(--bar-2); border-right: 1px solid var(--line-strong);
}

/* first-visit primer strip */
.primer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: var(--sp-4); padding: 11px var(--sp-4);
  border: 1px solid var(--line-signal); background: var(--signal-bg);
}
.primer[hidden] { display: none; }
.primer .ptag {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal-text); flex: 0 0 auto;
}
.primer .ptext { flex: 1; min-width: 220px; font-size: var(--t-body); line-height: var(--lh-meta); color: var(--fg-2); }
.primer .ptext strong { color: var(--fg); }
.primer > a { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .04em; flex: 0 0 auto; }
.primer button {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; background: transparent;
}

/* trends: strips with a hover value chip and honest end labels */
.strip-wrap { position: relative; margin-top: 14px; }
.strip-chip {
  position: absolute; z-index: 4; bottom: calc(100% + 4px); transform: translateX(-50%);
  white-space: nowrap; padding: 3px 7px; border-radius: var(--r-1);
  background: var(--fg); color: var(--bg-raised);
  font-family: var(--mono); font-size: var(--t-eyebrow);
}
.strip-scale {
  margin-top: 7px; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--fg-3);
}

/* delegation activity tiles */

/* =====================================================================
   prose pages
   ===================================================================== */
.prose article { padding: var(--sp-6) clamp(var(--sp-5), 3vw, var(--sp-10)) var(--sp-10); }
.prose h2 { font-size: var(--t-title); margin: var(--sp-8) 0 var(--sp-3); }
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose li { font-size: var(--t-body); color: var(--fg-2); line-height: var(--lh-body); }
.prose strong { color: var(--fg); }
.prose li { margin-bottom: var(--sp-1); }
.prose ul { padding-left: var(--sp-5); margin: 0 0 var(--sp-3); }
.prose pre {
  font-family: var(--mono); font-size: var(--t-meta); background: var(--bg-sunken);
  border: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); overflow-x: auto; color: var(--fg);
}

/* =====================================================================
   footer — one line
   ===================================================================== */
footer {
  margin-top: 34px; padding-top: var(--sp-5); border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px var(--sp-10); flex-wrap: wrap;
  font-size: var(--t-body); color: var(--fg-3);
}
footer p { margin: 0; }
footer .sep { color: var(--line-strong); }
.fnotes { display: grid; gap: 7px; line-height: var(--lh-meta); }
/* the operator's mark — the one place an instance names itself */
.fbrand {
  flex: 1 1 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: var(--t-body); font-weight: 600; color: var(--fg);
}
.fbrand .brand-mark { width: 18px; height: 18px; }
.fbrand a { color: inherit; }
.fbrand a:hover { color: var(--signal-text); text-decoration: none; }
.fgo {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .06em;
  border-radius: var(--r-1); transition: border-color var(--snap), color var(--snap);
}
.fgo:hover { border-color: var(--signal); color: var(--signal-text); text-decoration: none; }

/* =====================================================================
   mobile — drop columns, not data
   ===================================================================== */
@media (max-width: 900px) {
  /* five cells: rank · name · standing · votes · now — nothing a phone needs is hidden */
  :root { --grid-row: 34px minmax(0,1fr) 72px 84px; }
  .srow { grid-template-columns: var(--grid-row) 92px; }
  .nowchip .nd { display: none; }
  .srow { gap: 10px; padding: var(--row-pad) var(--sp-4); }
  .srow.head .hfull { display: none; }
  .voteslink.none { white-space: nowrap; }
  .srow .stakecell, .srow .sharecell, .votescell .mm2 { display: none; }
  .fold .desc { display: none; }
  .fold { flex-wrap: wrap; }
  .fold .tag { flex: 1 1 auto; min-width: 0; }
  .fold, .tier-fold { min-height: 44px; }
  
  /* candidate cards become a snap carousel instead of a tall stack */
}
@media (max-width: 700px) {
  /* the hero figures compress to one row of stat pairs */

  

  /* the state chip stacks under its label instead of colliding sideways */

  
}
@media (max-width: 560px) {
  /* the four cells a phone needs, and a key step that fits beside them */
  /* the now column keeps its dot; the word is in the title and the tally */
  :root { --grid-row: 30px minmax(0,1fr) 64px 72px; }
  .srow { gap: var(--sp-2); grid-template-columns: var(--grid-row) 22px; }
  .nowchip .nw, .nowhead { display: none; }
  .nowchip { padding: 0; border: 0; background: transparent; }
  .voteslink.none .dimpct { display: none; }   /* "not seen" alone; the days are in the readout */
}
@media (min-width: 901px) { .srow.head .hshort { display: none; } }

/* method page: numbered sections, contents rail, plain-language callouts */
.prose .toc {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line); background: var(--bg-raised);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px;
}
.prose .toc a {
  display: flex; gap: 10px; align-items: baseline; padding: 4px 0;
  font-size: var(--t-meta); color: var(--fg-2); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.prose .toc a:hover { color: var(--signal-text); }
.prose .toc .n {
  font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--fg-3); flex: none; width: 18px;
}
.prose h2 { display: flex; gap: 12px; align-items: baseline; scroll-margin-top: 16px; }
.prose h2 .n {
  font-family: var(--mono); font-size: var(--t-meta); font-weight: 600;
  color: var(--signal-text); flex: none;
}
.prose h2 a.anchor { margin-left: auto; font-family: var(--mono); font-size: var(--t-meta);
  color: var(--fg-3); text-decoration: none; opacity: 0; }
.prose h2:hover a.anchor { opacity: 1; }
.prose .plain {
  margin: 0 0 var(--sp-3); padding: 10px 14px;
  border-left: 2px solid var(--signal); background: var(--signal-bg);
  font-size: var(--t-body); color: var(--fg); line-height: var(--lh-body);
}
.prose .plain b { font-weight: 600; }
.prose .checklist { list-style: none; padding-left: 0; }
.prose .checklist li { padding: 9px 0 9px 26px; position: relative; border-top: 1px solid var(--line); }
.prose .checklist li::before {
  content: "→"; position: absolute; left: 2px; font-family: var(--mono); color: var(--signal-text);
}
.prose .srcnote { font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--fg-3); }

/* =====================================================================
   design v8 — the text budget, the split verdict, the bonding cycle and
   the method sheet. Field feedback #5: what a delegator acts on stays on
   the surface; the why goes behind an `i` or into the sheet. Nothing here
   sets a raw font-size, and every colour is a token.
   ===================================================================== */

/* --- shared utilities: what used to be a style attribute --------------
   The production CSP is `style-src 'self'` with no 'unsafe-inline', so a
   style attribute is refused outright. Everything that was one is a class. */
.eyebrow.wide, .glabel.wide { letter-spacing: .12em; }
.panel.spaced { margin-top: var(--gap-grid); }
.fold.ruled { border-top: 1px solid var(--line); }
.push { margin-left: auto; }
.mono.step { font-size: var(--t-meta); }
.mono.vcount { font-size: var(--t-meta); color: var(--fg-2); }
.vrows.snug { margin-top: var(--sp-3); }
.conc-kvs { margin-top: 10px; }
.chart-legend .sw.bond { background: var(--gold-700); }
.chart-legend .sw.unbond { background: var(--warn); }
.chart-legend .sw.seen { background: var(--live); }
.chart-legend .sw.miss { background: var(--bar-3); }

/* the identicon's four brand tones — a class, because var() needs CSS and
   an inline style attribute never survives the CSP */
.idg.ic1 { fill: var(--ic-1); }
.idg.ic2 { fill: var(--ic-2); }
.idg.ic3 { fill: var(--ic-3); }
.idg.ic4 { fill: var(--ic-4); }
.idg.idg-blank { fill: none; }

/* a panel head that stacks an eyebrow over its title */
.phead.stack { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.phead-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.phead .hint { font-size: var(--t-body); color: var(--fg-3); }
.phead .tip-wrap { align-self: center; }
@media (max-width: 900px) { .phead .hint { display: none; } }

/* --- 01 · the pulse: the third vital of each engine moved behind an `i` */
.pulse-tag { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pulse-col-head .tip-btn {
  width: 18px; height: 18px; letter-spacing: 0; text-transform: none;
  border-color: var(--hbtn-line); background: var(--hbtn-bg); color: var(--hfg-3);
}
.pulse-col-head .tip-btn:hover { border-color: var(--signal); color: var(--signal-text); }
.pulse-col-head .tip-panel {
  background: var(--htip-bg); color: var(--hfg-2); box-shadow: var(--htip-shadow);
  width: min(340px, 84vw);
}
.pulse-col-head .tip-panel b { font-family: var(--mono); font-weight: 500; color: var(--hfg); }
.pulse-col + .pulse-col .tip-panel { left: auto; right: 0; }

/* --- 02 · the verdict: what it says, beside what it rests on ----------
   The sentence and its remedy read down the left; the figure, its bar and
   the fixed ⅓ sit to the right of a rule. One band, two jobs, no scroll. */
.verdict-split {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  margin-top: var(--sp-4); padding-top: 18px; border-top: 1px solid var(--hline);
}
.verdict-say { min-width: 0; padding-right: 30px; }
.verdict-side { min-width: 0; padding-left: 30px; border-left: 1px solid var(--hline); }
.verdict-say .hero-title-row h2 { margin-top: 0; max-width: none; }
.verdict-side .vfig { margin-top: 0; padding-top: 0; border-top: 0; }
.verdict-remedy .tip-wrap { vertical-align: middle; margin-left: var(--sp-2); }
.verdict-remedy .tip-btn { border-color: var(--hbtn-line); background: var(--hbtn-bg); color: var(--hfg-2); }
.verdict-remedy .tip-btn:hover { border-color: var(--signal); color: var(--signal-text); }
.verdict-remedy .tip-panel {
  background: var(--htip-bg); color: var(--hfg-2); box-shadow: var(--htip-shadow);
  width: min(360px, 84vw);
}

/* the coefficient badge is the way to what raises it */
a.coef { text-decoration: none; transition: border-color var(--snap), background var(--snap); }
a.coef:hover { border-color: var(--signal); background: var(--signal-bg); text-decoration: none; }
a.coef:hover b { color: var(--gold-800); }
[data-theme="dark"] a.coef:hover b { color: var(--gold-300); }

/* the ⅓ label under the bar is the reading, and its own explanation */
.tip-btn.line {
  width: auto; height: auto; padding: 0; display: inline; border: 0; border-radius: 0;
  background: transparent; color: var(--signal-text);
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .06em;
  border-bottom: 1px dotted var(--line-signal);
}
.tip-btn.line:hover { color: var(--gold-800); border-bottom-color: var(--signal); background: transparent; }
[data-theme="dark"] .tip-btn.line:hover { color: var(--gold-300); }
.vbar-scale .tip-panel {
  background: var(--htip-bg); color: var(--hfg-2); box-shadow: var(--htip-shadow);
  width: min(340px, 84vw);
}

/* the delegate band's one sentence reads at body size, like every other */
.sug-rewards { font-size: var(--t-body); }

/* --- the method sheet: the page's own documentation, set apart --------- */
.sheet-rule { display: flex; align-items: center; gap: 18px; padding: 56px 0 0; }
.sheet-rule-line { flex: 1; height: 1px; background: var(--line-strong); }
.sheet-rule-tag {
  flex: 0 0 auto; font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3);
}
.sheet-lede { padding-top: var(--sp-6); border-bottom: 1px solid var(--line); }
.sheet-lede h3 {
  margin-top: 10px; font-family: var(--display); font-size: var(--fs-5);
  line-height: var(--lh-tight); letter-spacing: -.025em;
}
.sheet-lede p {
  margin: 10px 0 0; max-width: 62ch; font-size: var(--t-body);
  line-height: var(--lh-body); color: var(--fg-2);
}
.sheet-nav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sheet-nav a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .08em;
  text-transform: uppercase; border-radius: var(--r-1);
  transition: border-color var(--snap), color var(--snap);
}
.sheet-nav a:hover { border-color: var(--signal); color: var(--signal-text); text-decoration: none; }

/* --- the band collapses before the columns get too narrow to read ------ */
@media (max-width: 1040px) {
  .verdict-split { grid-template-columns: 1fr; }
  .verdict-say { padding-right: 0; }
  .verdict-side {
    padding-left: 0; border-left: 0;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hline);
  }
}
@media (max-width: 720px) {
  .sheet-rule { padding-top: var(--sp-10); }
  footer { align-items: flex-start; }
}

/* Row detail: five vitals since the Now fact joined (now · last vote · share ·
   since · blocks voted for); the 2-up fall at 900 is unchanged. */
.rd-vitals { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Outages — the register behind the red marks, on the finalizer page: one
   line per silence long enough to count as offline, newest first. Dates and
   durations in mono, the reason it counted in the meta step. */
.outages { display: grid; gap: 0; margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.outages:empty { display: none; }
.outage {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--fg-2);
}
.outage b { font-weight: 500; color: var(--fg); }
.outage .open { color: var(--warn); }
.outage.head { font-size: var(--t-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line-strong); }
.outages-none { padding: var(--sp-3) 0 0; font-size: var(--t-meta); color: var(--fg-3); }
.outages-note { margin-top: var(--sp-2); font-size: var(--t-meta); color: var(--fg-3); }
@media (max-width: 560px) { .outage { grid-template-columns: minmax(0, 1fr) auto; } .outage > :nth-child(3) { display: none; } }
.record-grid .wide { grid-column: 1 / -1; }

/* A vote arriving: the newest mark on a strip or a tile on the grid glows
   once in the signal colour and settles. Reduced-motion turns it off. */
@keyframes tile-in { 0% { opacity: 1; } 100% { opacity: 0; } }
.tile-new { fill: var(--signal); animation: tile-in 1.4s ease-out forwards; pointer-events: none; }
@keyframes mark-in { 0% { transform: scaleY(1.9); background: var(--signal); } 100% { transform: scaleY(1); } }
.mm2 .lane span.fresh { animation: mark-in var(--sweep); transform-origin: bottom; }

/* Now keeps its distance: a hairline off the votes cell, and air on both
   sides, so the strip, the rate and the state read as three things. */
.srow .nowcell { padding-left: var(--sp-4); border-left: 1px solid var(--line); min-height: 26px; }
.srow.head .nowhead { padding-left: var(--sp-4); border-left: 1px solid transparent; }
@media (max-width: 900px) {
  .srow .nowcell { padding-left: var(--sp-2); }
  .srow.head .nowhead { padding-left: var(--sp-2); }
}
@media (max-width: 560px) {
  .srow .nowcell { padding-left: 0; border-left: 0; justify-content: center; }
}

/* Footer, two columns and a way out (2026-09-03): who made the dashboard
   (Staker Space) and who makes Crosslink (Shielded Labs, with their page, FAQ
   and book). Same voice as the rest of the page: a name in the display face,
   a by-line in the meta step, links in mono. The old one-line endorsement
   credited Crosslink to the wrong house. */
.fcol { flex: 1 1 280px; min-width: 0; display: grid; gap: var(--sp-2); align-content: start; }
.fline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.fname { font-family: var(--display); font-size: var(--t-body); font-weight: 600; color: var(--fg); }
.fby { font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--fg-3); }
.fby a { color: var(--fg-2); }
.fby a:hover { color: var(--signal-text); }
.fnotes a { font-family: var(--mono); font-size: var(--t-meta); }
footer .fgo { align-self: flex-end; }
@media (max-width: 720px) { footer .fgo { align-self: flex-start; } }

/* a second strip under the first: the bonded stake voting now, recorded by
   the collector at every snapshot — the day's closest call against ⅔ */
.strip-block { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.strip-block[hidden] { display: none; }
.strip-head b.bad { color: var(--warn); }