/* ============================================================================
   site-plates.css — SIGNATURE PLATES: each page's argument, drawn (2026-10-04x)
   ----------------------------------------------------------------------------
   A plate sits under a page's headline and IS that headline as a picture, built only from the
   page's own authored example (no new claims). Inlined into each rendered page by
   render-site-pages.py (one source of truth: this file); site-plates.js wires them.

   ONE NUMBER PER PLATE. `--q` (0 → 1) is how far the plate has played. Its REGISTERED initial
   value is 1, so with no JS, reduced motion, print or an unsupported browser every plate is
   simply FINISHED — the never-blank rule holds by construction, not by fallback. Motion only
   exists under `.sg[data-live]`, which site-plates.js sets when motion is welcome: a CSS scroll
   timeline animates --q where supported, a rAF fallback writes it elsewhere, and a "Play again"
   control drives it from JS (inline --q, with the scroll animation switched off).
   There is no duration literal here except the replay, which is token-timed in JS.

   COLOUR IS SIGNAL — DARK IS AN ACCENT, NEVER A PANEL (owner-delegated decision 2026-10-04y, built
   2026-10-04ad). Every plate is ivory. Where a plate shows something being JUDGED, that one moment
   carries a small, solid night element inside the stage: analytics puts its alert on a night ribbon,
   execution draws the gate's outcome column as a night strip. Nothing else is dark. Flat throughout:
   no gradient, no glow, no halo — a plate is one surface with a hairline border, and the pricing meter
   is ONE solid signal (owner calls, 2026-10-04y; clay until 2026-10-05a).
   ========================================================================== */
/* ── THE SIGNAL RAMP (2026-10-05a, owner: "change the clay outside the logo also").
   Under the one palette (P2A/P2C) clay means FAILURE and nothing else, so every emphasis this file used
   to draw in clay steps onto this ramp instead, step for step (--clay-N -> --sig-N). It is built on P2A
   --signal-emphasis #27506B (= 600). The rules that DO mean failure — a tampered record, a refused
   verdict, a live threat — keep --clay-*, and say so where they sit. ── */
:root {
  --sig-50:#EEF3F7; --sig-100:#DDE7EF; --sig-200:#BCD0DF; --sig-300:#8FB0C8; --sig-400:#5E8AAA;
  --sig-500:#3A6A8C; --sig-600:#27506B; --sig-700:#1F4058; --sig-800:#172F41;
}
@property --q { syntax: '<number>'; inherits: true; initial-value: 1; }

.sg {
  /* the night ACCENT — only ever a small element inside a judging stage, never a plate's ground */
  --sg-night: #101114; --sg-night-line: #292A30;
  --sg-night-text: #F5F5F3; --sg-night-muted: #A9AAAF;
  --sg-ok: #5E8B6B; --sg-warn: #B7791F;
  position: relative; max-width: 1240px; margin: 8px auto 28px; padding: 0 20px;
}
.sg-in {
  position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 4vw, 52px);
  background: var(--hearth-surface);   /* one solid surface — no corner wash (owner, 2026-10-04y: no colour fading into another) */
  border: 1px solid var(--hearth-border);   /* flat and hairline: no halo shadow either (owner, 2026-10-04y) */
}
.sg-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(20px, 3vw, 36px); }
.sg .sg-k { margin: 0 0 10px; font: 700 10.5px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.sg .sg-h { margin: 0; font: 400 clamp(28px, 3.6vw, 46px)/1.04 var(--font-display); letter-spacing: -.02em; max-width: 22ch; color: var(--hearth-text);
  text-wrap: balance; /* 22ch display title — balance so it never ends on a lonely word */ }
.sg .sg-h em { font-style: normal; color: var(--sig-600); }
.sg .sg-note { margin: 0; max-width: 38ch; font: 400 14px/1.55 var(--font-sans); color: var(--hearth-text-secondary); }
.sg-stage { position: relative; }
.sg .sg-cap { margin: clamp(18px, 2.4vw, 28px) 0 0; font: 400 13px/1.6 var(--font-sans); color: var(--hearth-text-muted); max-width: 80ch; }
.sg-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sg-btn { appearance: none; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 600 13px/1 var(--font-sans);
  border: 1px solid var(--hearth-border-strong); background: var(--hearth-raised); color: var(--hearth-text);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.sg-btn:hover, .sg-btn:focus-visible { border-color: var(--sig-400); }
.sg-btn[aria-pressed="true"] { background: var(--accent-subtle-bg); border-color: var(--sig-400); color: var(--sig-700); }
.sg-ctl[hidden] { display: none; }
.sg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═════ P1 · SUBSTRATE — five dialects in, one shape out, chained ═════ */
.sg-p1 .sg-stage { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 0 18px; align-items: center; }
.sg-raws, .sg-cards { display: grid; gap: 12px; }
.sg-raw {
  --a: clamp(0, var(--q) * 1.7 - var(--r) * .17, 1);
  font: 500 11.5px/1.35 var(--font-mono); color: var(--hearth-text-secondary);
  padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--hearth-border-strong); background: var(--hearth-canvas);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateX(calc(var(--a) * 40px)); opacity: calc(1 - var(--a) * .55);
}
.sg-raw b { display: block; font: 700 9.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hearth-text-muted); margin-bottom: 5px; }
.sg-loom { position: relative; align-self: stretch; display: grid; place-items: center; }
.sg-loom::before { content: ""; position: absolute; top: 4%; bottom: 4%; left: 50%; width: 2px; transform: translateX(-50%);
  background: var(--sig-300); }   /* one solid line: no fade, no glow (owner, 2026-10-04y) */
.sg-loom ol { position: relative; margin: 0; padding: 8px 6px; list-style: none; display: grid; gap: 6px; background: var(--hearth-surface); border-radius: 10px; border: 1px solid var(--hearth-border); }
.sg-loom li { font: 700 9px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sig-700); text-align: center; }
.sg-card {
  --a: clamp(0, var(--q) * 1.7 - var(--r) * .17 - .12, 1);
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--hearth-raised); border: 1px solid var(--hearth-border);
  box-shadow: 0 10px 24px -18px rgba(60,35,15,.4);
  opacity: var(--a); transform: translateX(calc((1 - var(--a)) * -70px)) scale(calc(.95 + var(--a) * .05));
}
.sg-f { min-width: 0; font: 500 12px/1.25 var(--font-mono); color: var(--hearth-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-f i { display: block; font: 700 9px/1 var(--font-sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--hearth-text-muted); margin-bottom: 3px; }
.sg-seal { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-sans);
  color: #fff; background: var(--sg-ok); }
.sg-seal .x { display: none; }
.sg-clk { grid-column: 1 / 4; font: 500 10.5px/1 var(--font-mono); color: var(--hearth-text-muted); }
/* the chain: a link from each card to the one below */
.sg-card + .sg-card::before { content: ""; position: absolute; right: 24px; top: -13px; height: 12px; border-left: 2px solid var(--hearth-border-strong); }
.sg-v .alt { display: none; }
/* tampered (site-plates.js sets data-tampered on the plate) */
.sg-p1[data-tampered] .sg-card[data-i="2"] { border-color: var(--clay-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay-400) 25%, transparent); }
.sg-p1[data-tampered] .sg-card[data-i="2"] .sg-v .orig { display: none; }
.sg-p1[data-tampered] .sg-card[data-i="2"] .sg-v .alt { display: inline; color: var(--clay-700); text-decoration: underline wavy var(--clay-500); text-underline-offset: 3px; }
.sg-p1[data-tampered] .sg-card[data-i="2"] .sg-seal { background: var(--clay-600); }
.sg-p1[data-tampered] .sg-card[data-i="2"] .sg-seal .ok { display: none; }
.sg-p1[data-tampered] .sg-card[data-i="2"] .sg-seal .x { display: inline; }
.sg-p1[data-tampered] .sg-card[data-i="3"]::before { border-left: 2px dashed var(--clay-500); }
.sg-p1[data-tampered] .sg-card[data-i="3"]::after { content: "link no longer matches"; position: absolute; right: 34px; top: -14px;
  font: 600 10px/1 var(--font-mono); color: var(--sig-700); background: var(--hearth-surface); padding: 1px 4px; }

/* ═════ P2 · ANALYTICS — an alert unfolds into the evidence it rests on ═════
   The alert is the judged moment, so it alone sits on night: one flat ribbon, the evidence below it
   on ivory. clay-600 (not 500) under white keeps the 14px alert text above 4.5:1. */
.sg-p2 .sg-rib { position: relative; z-index: 1; display: flex; justify-content: center; padding: 12px;
  border-radius: 16px; background: var(--sg-night); }
.sg-p2 .sg-alert { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: center; width: max-content; max-width: 100%;
  padding: 11px 18px; border-radius: 999px; background: var(--sig-600); color: #fff; font: 600 14px/1.3 var(--font-sans); text-align: center; }
.sg-p2 .sg-alert small { font: 500 11px/1 var(--font-mono); }
.sg-wires { display: block; width: 100%; height: 90px; overflow: visible; }
.sg-wires path { fill: none; stroke: var(--sig-400); stroke-width: 1.5; stroke-dasharray: 1; }
.sg-wires path { --a: clamp(0, var(--q) * 1.8 - var(--i) * .16, 1); stroke-dashoffset: calc(1 - var(--a)); opacity: calc(.25 + var(--a) * .75); }
.sg-ev-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sg-ev {
  --a: clamp(0, var(--q) * 1.8 - var(--i) * .16 - .1, 1);
  display: grid; gap: 8px; align-content: start; padding: 14px 12px; border-radius: 14px;
  background: var(--hearth-raised); border: 1px solid var(--hearth-border);
  opacity: calc(.2 + var(--a) * .8); transform: translateY(calc((1 - var(--a)) * 18px));
}
.sg .sg-ev-t { font: 500 11px/1 var(--font-mono); color: var(--hearth-text-muted); }
.sg .sg-ev-n { font: 600 14px/1.3 var(--font-sans); color: var(--hearth-text); }
.sg .sg-ev-k { font: 700 9px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.sg .sg-ev-r { font: 500 10.5px/1.45 var(--font-mono); color: var(--hearth-text-secondary); word-break: break-word; padding-top: 8px; border-top: 1px solid var(--hearth-border); }
.sg-ev-r::before { content: "✓ sealed · "; color: var(--status-healthy-fg); font-weight: 600; }
.sg-ev--moment { border-color: var(--sig-400); background: var(--accent-subtle-bg); }

/* ═════ P3 · EXECUTION — four actions, four guards, one gate ═════
   The guards answer on ivory; the GATE — where the outcome is judged — is one night strip down the
   last column. It is the grid's own absolutely-positioned ::before, placed by grid lines (an abspos
   child of a grid takes its grid area as containing block and never enters auto-placement), so the
   strip spans header + four lanes without disturbing a single cell. Verdict words are printed in
   every cell: colour is never the only cue. */
.sg-gate { position: relative; display: grid; grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(0, 1fr)) minmax(130px, 1.15fr); gap: 8px; align-items: center; }
.sg-gate::before { content: ""; position: absolute; grid-column: 6; grid-row: 1 / 6; inset: -10px -12px; border-radius: 16px; background: var(--sg-night); }
.sg .sg-gh { font: 700 9.5px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hearth-text-muted); text-align: center; padding-bottom: 6px; }
.sg .sg-gh:first-child { text-align: left; }
.sg .sg-gh--gate { position: relative; text-align: left; padding-left: 12px; color: var(--sg-night-muted); }
.sg-lane { display: contents; }
.sg-act { font: 600 13.5px/1.3 var(--font-sans); color: var(--hearth-text); padding: 12px 0; }
.sg-g {
  --a: clamp(0, (var(--q) * 1.6 - var(--l) * .12 - var(--c) * .2) * 6, 1);
  display: grid; place-items: center; height: 44px; border-radius: 10px; border: 1px solid var(--hearth-border-strong);
  font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; color: transparent; background: transparent;
}
.sg-g::after { content: attr(data-v); color: color-mix(in oklab, var(--hearth-text) calc(var(--a) * 100%), transparent); transform: scale(calc(1.25 - var(--a) * .25)); }
.sg-g[data-v="PASS"] { background: color-mix(in oklab, var(--sg-ok) calc(var(--a) * 18%), transparent); border-color: color-mix(in oklab, var(--sg-ok) calc(var(--a) * 80%), var(--hearth-border-strong)); }
.sg-g[data-v="HOLD"] { background: color-mix(in oklab, var(--sg-warn) calc(var(--a) * 26%), transparent); border-color: color-mix(in oklab, var(--sg-warn) calc(var(--a) * 100%), var(--hearth-border-strong)); }
.sg-g[data-v="REFUSE"] { background: color-mix(in oklab, var(--clay-600) calc(var(--a) * 100%), transparent); border-color: color-mix(in oklab, var(--clay-700) calc(var(--a) * 100%), var(--hearth-border-strong)); }
.sg-g[data-v="REFUSE"]::after { color: color-mix(in oklab, #fff calc(var(--a) * 100%), transparent); }
.sg-out {
  --a: clamp(0, (var(--q) * 1.6 - var(--l) * .12 - .82) * 6, 1);
  position: relative; font: 600 13px/1.3 var(--font-sans); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sg-night-line);
  color: color-mix(in oklab, var(--sg-night-text) calc(var(--a) * 100%), transparent);
  transform: translateX(calc((1 - var(--a)) * -14px));
}
.sg-out[data-o="held"] { border-color: color-mix(in oklab, var(--sg-warn) calc(var(--a) * 100%), var(--sg-night-line)); }
.sg-out[data-o="refused"] { border-color: color-mix(in oklab, var(--clay-400) calc(var(--a) * 100%), var(--sg-night-line)); }
.sg-out[data-o="allowed"] { border-color: color-mix(in oklab, var(--sg-ok) calc(var(--a) * 100%), var(--sg-night-line)); }
.sg .sg-out small { display: block; font: 500 10.5px/1.3 var(--font-mono); color: var(--sg-night-muted); opacity: var(--a); margin-top: 3px; }

/* ═════ P4 · IDENTITY — decided once, enforced at every machine ═════ */
.sg-p4 .sg-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.sg-ring { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; overflow: visible; }
.sg-hub { fill: var(--sig-500); }
.sg-hub-t { font: 600 11px/1 var(--font-sans); fill: #fff; letter-spacing: .04em; }
.sg-wave { fill: none; stroke: var(--sig-400); stroke-width: 2; transform-box: fill-box; transform-origin: center;
  transform: scale(calc(.08 + var(--q) * 1.1)); opacity: calc((1 - var(--q)) * 1.4); }
.sg-m { --a: clamp(0, (var(--q) - var(--d) * .7) * 7, 1); stroke-width: 1.6; }
.sg-m[data-s="on"] { fill: color-mix(in oklab, var(--sg-ok) calc(var(--a) * 100%), var(--hearth-raised)); stroke: color-mix(in oklab, var(--sg-ok) calc(var(--a) * 100%), var(--hearth-border-strong)); }
.sg-m[data-s="old"] { fill: color-mix(in oklab, var(--sg-warn) calc(var(--a) * 35%), var(--hearth-raised)); stroke: color-mix(in oklab, var(--sg-warn) calc(var(--a) * 100%), var(--hearth-border-strong)); }
.sg-m[data-s="silent"] { fill: var(--hearth-raised); stroke: var(--hearth-text-muted); stroke-dasharray: 2 2.4; }
.sg-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sg-legend li { display: grid; grid-template-columns: 22px auto 1fr; gap: 12px; align-items: baseline; font: 400 14px/1.5 var(--font-sans); color: var(--hearth-text-secondary); }
.sg-legend b { font: 400 34px/1 var(--font-display); color: var(--hearth-text); }
.sg-legend .g { width: 14px; height: 14px; border-radius: 50%; align-self: center; border: 1.6px solid; }
.sg-legend .g-on { background: var(--sg-ok); border-color: var(--sg-ok); }
.sg-legend .g-old { background: color-mix(in oklab, var(--sg-warn) 35%, transparent); border-color: var(--sg-warn); }
.sg-legend .g-silent { border-style: dashed; border-color: var(--hearth-text-muted); }

/* ═════ PR · PRICING — the one meter, beside the two that are not (2026-10-04y) ═════
   Supersedes Motion S3's `.meterfig`. Stations are the plans site.js renders, read by
   site-plates.js from window.AetherSite.plans (live-folded from the rate card), so no ceiling or
   price is typed here. The app chips sit OUTSIDE the stage and never animate: that stillness is the
   claim. Inside a `.wrap` the plate drops its own gutter (`.sg--flush`). */
.sg--flush { padding: 0; margin: 4px auto 30px; }
.sg-pr .sg-stage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 28px 52px; align-items: center; }
.sg-rails { display: grid; gap: 26px; }
.sg-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 16px; align-items: baseline; }
.sg-rl { font: 600 13.5px/1.2 var(--font-sans); color: var(--hearth-text); }
.sg-rv { font: 500 11px/1.2 var(--font-mono); color: var(--hearth-text-muted); text-align: right; white-space: nowrap; }
.sg-rt { grid-column: 1 / -1; position: relative; display: block; }
.sg-rail--off .sg-rl { font-weight: 500; color: var(--hearth-text-muted); }
.sg-rail--off .sg-rt { height: 2px; margin: 5px 0; background: repeating-linear-gradient(90deg, var(--hearth-border-strong) 0 6px, transparent 6px 12px); }
.sg-rail--on { padding-bottom: 38px; }
.sg-rail--on .sg-rv { color: var(--sig-700); font-weight: 600; }
.sg-rail--on .sg-rt { height: 14px; border-radius: 999px; background: var(--hearth-sunken); border: 1px solid var(--hearth-border); }
/* ONE solid colour (owner, 2026-10-04y: no two-shade gradient on this meter) — it is one number. */
.sg-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--q));
  background: var(--sig-600); }
.sg-tick { --lit: clamp(0, (var(--q) - var(--s)) * 40, 1);
  position: absolute; top: -6px; bottom: -6px; left: calc(var(--x) * 100%); width: 2px; margin-left: -1px; border-radius: 2px;
  background: color-mix(in oklab, var(--sig-700) calc(var(--lit) * 100%), var(--hearth-border-strong)); }
.sg-tick b { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center;
  font: 600 11.5px/1.25 var(--font-sans); color: color-mix(in oklab, var(--hearth-text) calc(40% + var(--lit) * 60%), transparent); }
.sg-tick b small { display: block; font: 500 10.5px/1.3 var(--font-mono); color: var(--hearth-text-muted); }
.sg-tick:first-child b { left: 0; transform: none; text-align: left; }
.sg-read { display: grid; min-height: 156px; align-content: center; }
.sg-st { --v: calc(clamp(0, (var(--q) - var(--s)) * 30, 1) * clamp(0, (var(--e) - var(--q)) * 30, 1));
  grid-area: 1 / 1; align-self: center; opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 10px)); }
.sg-st b { display: block; font: 300 clamp(46px, 5.4vw, 72px)/.95 var(--font-display); letter-spacing: -.03em; color: var(--hearth-text);
  font-variant-numeric: lining-nums tabular-nums; }
.sg-st b small { margin-left: 6px; font: 400 15px/1 var(--font-sans); letter-spacing: 0; color: var(--hearth-text-muted); }
.sg-st span { display: block; margin-top: 12px; font: 600 14px/1.3 var(--font-sans); color: var(--sig-700); }
.sg-st i { display: block; margin-top: 4px; font: 400 13.5px/1.45 var(--font-sans); font-style: normal; color: var(--hearth-text-secondary); }
.sg .sg-apps-k { margin: clamp(22px, 3vw, 32px) 0 10px; font: 700 10px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hearth-text-muted); }
.sg .sg-apps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: none; }
.sg .sg-apps li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font: 600 12px/1.2 var(--font-sans);
  border: 1px solid var(--status-healthy-fg); background: var(--status-healthy-bg); color: var(--hearth-text); }
.sg .sg-apps li span { color: var(--status-healthy-fg); }
.sg .sg-apps li.sg-apps-more { border-style: dashed; background: transparent; font-weight: 500; color: var(--hearth-text-secondary); }

/* ═════ LIM · LIMITS — fifteen pages of limits, reassembled into four kinds (2026-10-04y) ═════
   61 tiles, numbered as the ledger numbers its rows. At --q 0 they stand in the columns of the pages
   that publish them; at 1 (the base) they are sorted by kind. Positions are build-time data
   (render-site-pages.py `plate_limits`) in TILE UNITS: --sx/--sy where a tile starts, --fx/--fy where
   it ends, both relative to its kind block, so the finished layout needs no motion to exist. --u is
   one tile pitch, sized from the plate's width where container units exist. */
.sg-lim .sg-in { container-type: inline-size; }
.sg-lim .sg-stage { --u: 40px; }
@supports (width: 1cqw) { .sg-lim .sg-stage { --u: min(46px, 100cqw / 23); } }
.sg-kinds { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 5)); column-gap: var(--u); }
.sg-kb { transition: opacity var(--duration-base) var(--ease-standard); }
.sg-kh { display: grid; gap: 4px; min-height: 64px; align-content: end; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hearth-border);
  opacity: calc(.2 + var(--q) * .8); }
.sg-kh b { font: 300 36px/1 var(--font-display); letter-spacing: -.02em; color: var(--hearth-text); font-variant-numeric: lining-nums tabular-nums; }
.sg-kh span { font: 600 12.5px/1.25 var(--font-sans); color: var(--hearth-text-secondary); }
.sg-tiles { position: relative; height: calc(var(--u) * 5); }
/* each tile leaves at its own moment (--o, its place in the sorted order) and eases in (smoothstep),
   so mid-scroll the ledger reads as being SORTED, kind by kind, rather than as one swarm */
.sg-lt { --t: clamp(0, (var(--q) - var(--o) * .5) / .5, 1); --m: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  position: absolute; left: 0; top: 0; width: calc(var(--u) * .86); height: calc(var(--u) * .86); border-radius: calc(var(--u) * .16);
  display: grid; place-items: center; font: 600 calc(var(--u) * .27)/1 var(--font-mono); font-variant-numeric: tabular-nums;
  transform: translate(calc((var(--sx) + (var(--fx) - var(--sx)) * var(--m)) * var(--u)), calc((var(--sy) + (var(--fy) - var(--sy)) * var(--m)) * var(--u)));
  transition: opacity var(--duration-base) var(--ease-standard); }
.sg-lt[data-k="physics"] { background: var(--hearth-text); color: var(--hearth-canvas); }
.sg-lt[data-k="absent"] { background: var(--hearth-raised); border: 1.5px solid var(--sig-500); color: var(--sig-700); }
.sg-lt[data-k="measured"] { background: var(--sig-200); border: 1px solid var(--sig-300); color: var(--sig-800); }
.sg-lt[data-k="yours"] { background: transparent; border: 1.5px dashed var(--hearth-text-muted); color: var(--hearth-text-secondary); }
.sg-lim[data-want] .sg-kb:not([data-on]) { opacity: .22; }
.sg-lim[data-pg] .sg-lt:not(.is-pg) { opacity: .18; }
.sg-lim[data-wired] .sg-kb { cursor: pointer; }
.sg-lim[data-wired] .sg-kb:hover .sg-kh span { color: var(--sig-700); }
.sg-lim[data-wired] .sg-lt { cursor: pointer; }
.sg-lim[data-wired] .sg-lt:hover { box-shadow: 0 0 0 2px var(--sig-600); z-index: 2; }
.ledger-row { scroll-margin-top: calc(var(--sitehead-h, 92px) + 18px); transition: background var(--duration-base) var(--ease-standard); }
.ledger-row.is-picked { background: var(--hearth-editorial-warm); border-radius: var(--radius-md); padding-left: 14px; padding-right: 14px; margin-left: -14px; margin-right: -14px; }
.lim-verify { display: block; margin-top: 8px; padding: 7px 11px; border-left: 2px solid var(--sig-600); background: var(--hearth-sunken); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 12.5px; line-height: 1.5; color: var(--hearth-text-secondary); }
.lim-verify b { font-family: var(--font-mono), monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin-right: 6px; }

/* ═════ TR · TRUST — what we do not get to see (2026-10-04y) ═════
   One device-management record's fields, followed from arrival to storage to an analyst's read, from
   the page's own collection and erasure copy. "Fulfil an erasure" (site-plates.js) sets data-erased. */
.sg-tg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 44px); }
.sg-th { font: 700 10px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hearth-text-muted); padding: 0 0 12px; }
.sg-trow { display: contents; }
.sg-tc { --a: clamp(0, (var(--q) * 1.7 - var(--c) * .42 - var(--r) * .05) * 5, 1);
  display: grid; gap: 3px; align-content: center; min-height: 54px; padding: 9px 0; border-top: 1px solid var(--hearth-border); }
.sg-tc[data-c="0"] { --a: 1; }
.sg-tc > * { opacity: var(--a); transform: translateX(calc((1 - var(--a)) * -10px)); }
.sg-pill { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font: 600 12.5px/1.2 var(--font-sans); color: var(--hearth-text); background: var(--hearth-raised); border: 1px solid var(--hearth-border-strong); }
.sg-tc small { font: 400 12px/1.45 var(--font-sans); color: var(--hearth-text-secondary); }
.sg-tc small b { font-weight: 600; color: var(--hearth-text); }
.sg-tc .sg-nil { color: var(--hearth-text-muted); }   /* text-faint is a NON-TEXT token (guard 26) */
.sg-drop .sg-tc[data-c="1"] .sg-pill { text-decoration: line-through; text-decoration-color: var(--sig-500); color: var(--hearth-text-muted); border-style: dashed; background: transparent;
  transform: translateY(calc(var(--a) * 3px)) rotate(calc(var(--a) * -2deg)); }
.sg-mask { font: 600 16px/1 var(--font-mono); letter-spacing: .06em; color: var(--sig-700); }
.sg-key::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; margin-right: 1px; }
.sg-pill.sg-key { color: var(--sig-700); border-color: var(--sig-300); background: var(--sig-50); }
.sg-tr .sg-gone { display: none; }
.sg-tr[data-erased] .sg-held { display: none; }
.sg-tr[data-erased] .sg-gone { display: inline-flex; }
.sg-tr[data-erased] small.sg-gone { display: block; }
.sg-gone.sg-pill { color: var(--hearth-canvas); background: var(--hearth-text); border-color: var(--hearth-text); }
.sg-survive { grid-column: 1 / -1; margin-top: 4px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--hearth-border-strong);
  font: 400 12.5px/1.5 var(--font-sans); color: var(--hearth-text-secondary); opacity: calc(.35 + var(--q) * .65); }
.sg-survive b { color: var(--hearth-text); }
.sg-tr[data-erased] .sg-survive { border-style: solid; border-color: var(--sg-ok); background: color-mix(in oklab, var(--sg-ok) 9%, transparent); }

/* ═════ IX · CAPABILITIES — four layers, exploded; one meter, on the floor (2026-10-04y) ═════
   Each slab is a layer, each tile a capability family from the ONE catalogue the page lists. --q 0 is
   the stack pressed flat; 1 (the base) is the exploded view, labels riding beside their slabs. */
.sg-ix .sg-stage { position: relative; height: 470px; }
.sg-iso { position: absolute; inset: 0; --sep: 104px; --x: 34%; }
.sg-slab { position: absolute; left: var(--x); top: 50%; width: 268px; margin: -62px 0 0 -134px; padding: 14px; z-index: var(--n);
  display: grid; grid-template-columns: repeat(5, 40px); gap: 8px; border-radius: 16px;
  background: var(--hearth-raised); border: 1px solid var(--hearth-border-strong);
  box-shadow: 9px 9px 0 -1px color-mix(in oklab, var(--sig-200) 70%, var(--hearth-sunken));   /* a crisp edge, no blur */
  transform: translateY(calc((1.5 - var(--n)) * (12px + (var(--sep) - 12px) * var(--q)))) rotateX(56deg) rotateZ(-42deg); }
.sg-slab:first-child { background: color-mix(in oklab, var(--sig-100) 55%, var(--hearth-raised)); }
.sg-tl { width: 40px; height: 40px; border-radius: 9px; background: var(--hearth-canvas); border: 1px solid var(--hearth-border-strong);
  box-shadow: 3px 3px 0 color-mix(in oklab, var(--hearth-border-strong) 70%, transparent); transition: opacity var(--duration-base) var(--ease-standard); }
.sg-tl[data-pv] { background: transparent; border: 1.5px dashed var(--hearth-text-muted); box-shadow: none; }
.sg-tl[data-f="volume"] { background: var(--sig-500); border-color: var(--sig-700); box-shadow: 3px 3px 0 var(--sig-700); }
.sg-sl { position: absolute; left: calc(var(--x) + 168px); top: 50%; max-width: 30ch;
  transform: translateY(calc(-50% + (1.5 - var(--n)) * (12px + (var(--sep) - 12px) * var(--q)))); opacity: clamp(0, (var(--q) - .45) * 2.2, 1); }
.sg-sl i { display: block; font: 700 9.5px/1 var(--font-sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--hearth-text-muted); }
.sg-sl b { display: block; margin-top: 5px; font: 400 21px/1.15 var(--font-display); color: var(--hearth-text); }
.sg-sl span { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--font-sans); color: var(--hearth-text-secondary); }
.sg-sl span em { font-style: normal; font-weight: 600; color: var(--sig-700); }
.sg-keys { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; padding: 0; list-style: none; font: 500 12.5px/1.4 var(--font-sans); color: var(--hearth-text-secondary); }
.sg .sg-keys li { display: flex; align-items: center; gap: 8px; }
.sg-keys i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--hearth-border-strong); background: var(--hearth-canvas); }
.sg-keys i.k-pv { background: transparent; border: 1.5px dashed var(--hearth-text-muted); }
.sg-keys i.k-vol { background: var(--sig-500); border-color: var(--sig-700); }
.sg-ix .sg-layers { display: none; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.sg .sg-layers li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font: 400 13px/1.4 var(--font-sans); color: var(--hearth-text-secondary); }
.sg-layers b { font: 600 13px/1.4 var(--font-sans); color: var(--hearth-text); }
.sg-ix[data-want="included"] .sg-tl[data-f="volume"],
.sg-ix[data-want="volume"] .sg-tl:not([data-f="volume"]),
.sg-ix[data-want="preview"] .sg-tl:not([data-pv]) { opacity: .16; }

@media (max-width: 860px) {
  .sg-pr .sg-stage { grid-template-columns: 1fr; gap: 18px; }
  .sg-read { min-height: 120px; order: -1; }
  .sg-tick b { display: none; }
  .sg-rail--on { padding-bottom: 6px; }
  .sg-kinds { grid-template-columns: 1fr; row-gap: 20px; }
  .sg-kh { min-height: 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; opacity: 1; }
  .sg-tiles { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 5px; }
  .sg-lt { position: static; transform: none; width: 32px; height: 32px; font-size: 10.5px; border-radius: 6px; }
  .sg-tg { grid-template-columns: 1fr; }
  .sg-th { display: none; }
  .sg-tc { min-height: 0; padding: 4px 0; border-top: 0; }
  .sg-tc[data-c="0"] { padding-top: 14px; border-top: 1px solid var(--hearth-border); }
  .sg-tc[data-c="1"]::before, .sg-tc[data-c="2"]::before { content: attr(data-h); font: 700 10px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hearth-text-muted); opacity: var(--a); }
  /* a dropped field has nothing to keep and nothing to read: on a phone it is one line, not three */
  .sg-drop .sg-tc[data-c="1"]::before { content: none; }
  .sg-drop .sg-tc[data-c="1"] .sg-pill, .sg-drop .sg-tc[data-c="2"] { display: none; }
  .sg-drop .sg-tc[data-c="0"] { padding-bottom: 0; }
  .sg-ix .sg-stage { height: auto; }
  .sg-iso { position: relative; height: 360px; --x: 50%; --sep: 84px; transform: scale(.82); transform-origin: 50% 50%; }
  .sg-sl { display: none; }
  .sg-ix .sg-layers { display: grid; }
}

/* ═════ COVERAGE FIELD (homepage "Measured, not claimed") ═════ */
.cov { display: grid; grid-template-columns: repeat(41, minmax(0, 1fr)); gap: 3px; margin-top: 26px; max-width: 760px; }
.cov i { display: block; aspect-ratio: 1; border-radius: 2px; background: transparent; border: 1px solid var(--hearth-border);
  opacity: clamp(.12, (var(--q) * 800 - var(--n)) / 60, 1); }
.cov i.t { background: var(--sig-600); border-color: var(--sig-600); }
.cov i.d { background: var(--sig-300); border-color: var(--sig-300); }
.cov i.b { background: repeating-linear-gradient(135deg, var(--hearth-text-muted) 0 1px, transparent 1px 3px); border-color: var(--hearth-text-muted); }
.cov-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none; font: 500 12.5px/1.4 var(--font-sans); color: var(--hearth-text-secondary); }
.cov-legend li { display: flex; align-items: center; gap: 8px; }
.cov-legend i { width: 11px; height: 11px; border-radius: 2px; border: 1px solid var(--hearth-border); display: inline-block; }
.cov-legend i.t { background: var(--sig-600); border-color: var(--sig-600); }
.cov-legend i.d { background: var(--sig-300); border-color: var(--sig-300); }
.cov-legend i.b { background: repeating-linear-gradient(135deg, var(--hearth-text-muted) 0 1px, transparent 1px 3px); border-color: var(--hearth-text-muted); }
.cov-legend b { color: var(--hearth-text); font-weight: 700; }

/* ═════ CONTENT FLOW — a panel a reader asks for arrives in order, not all at once ═════ */
@media (prefers-reduced-motion: no-preference) {
  .sg-enter { animation: sg-enter calc(var(--duration-slower) * 1.1) var(--ease-emphasized) calc(var(--ord, 0) * var(--duration-fast)) backwards; }
}
@keyframes sg-enter { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* ═════ LIVE: the scroll timeline drives --q (site-plates.js sets data-live) ═════ */
.sg[data-live] .sg-stage, .cov-wrap[data-live] .cov { --q: 0; }
.sg[data-live], .cov-wrap[data-live] { view-timeline: --sg block; }
@supports (animation-timeline: view()) {
  .sg[data-live]:not([data-js-q]) .sg-stage, .cov-wrap[data-live]:not([data-js-q]) .cov {
    animation: sg-q linear both; animation-timeline: --sg; animation-range: entry 20% contain 40%;
  }
}
.sg[data-js-q] .sg-stage, .cov-wrap[data-js-q] .cov { --q: var(--jq, 1); }
@keyframes sg-q { from { --q: 0; } to { --q: 1; } }

/* ═════ the sound control (site-sound.js) ═════ */
.snd { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: color-mix(in oklab, var(--hearth-raised) 88%, transparent); border: 1px solid var(--hearth-border);
  box-shadow: var(--shadow-sm); color: var(--hearth-text-secondary); backdrop-filter: blur(6px); }
.snd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.snd svg path:first-child { fill: currentColor; stroke: none; }
.snd[aria-pressed="false"] .snd-w { opacity: .18; }
.snd[aria-pressed="false"]::after { content: ""; position: absolute; width: 22px; height: 1.7px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.snd:hover, .snd:focus-visible { color: var(--sig-600); border-color: var(--sig-300); }

@media (max-width: 860px) {
  .sg-p1 .sg-stage { grid-template-columns: 1fr; gap: 14px; }
  .sg-loom { display: none; }
  .sg-raws { display: none; }
  .sg-ev-row { grid-template-columns: 1fr; }
  .sg-wires { display: none; }
  .sg-p2 .sg-rib { margin-bottom: 18px; }
  /* a phone cannot hold five column headers: each verdict carries its guard's name instead */
  .sg-gate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sg-gh { display: none; }
  .sg-act { grid-column: 1 / -1; padding: 14px 0 2px; }
  /* no column to strip on a phone: each lane's outcome becomes its own small night strip */
  .sg-gate::before { display: none; }
  .sg-out { grid-column: 1 / -1; background: var(--sg-night); }
  .sg-g { height: auto; min-height: 44px; padding: 6px 8px; justify-items: start; text-align: left; }
  .sg-g::after { content: attr(data-gn) " · " attr(data-v); font-size: 10px; }
  .sg-f { white-space: normal; }
  .sg-p4 .sg-stage { grid-template-columns: 1fr; }
  .cov { gap: 2px; }
}
@media print {
  .sg[data-live] .sg-stage, .cov-wrap[data-live] .cov { animation: none !important; --q: 1 !important; }
  .sg-ctl, .snd { display: none !important; }
  .sg-enter { animation: none !important; }
}