/* ============================================================
   Torad Design System · Components (atomic)
   All classes read semantic tokens, so they theme automatically.
   Prefix: t-  ·  Requires torad-tokens.css + torad-base.css.
   ============================================================ */

/* ===================== LAYOUT ===================== */
/* NOTE: .t-shell stays at --container (940) ON PURPOSE. Widening it globally to --canvas was tried and
   reverted — it strands single-column heroes (technology, research, …) with a dead right half (verified
   by screenshot). The wide canvas comes PER-PAGE via .t-canvas/.t-spread below (§4.2-4.3), which fill the
   width with inboard-asymmetric content + feature/gloss tracks instead of just stretching the column. */
.t-shell { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); container-type: inline-size; }
/* .t-shell--wide — opt a section UP to the wide canvas. Safe ONLY for self-contained two-column
   blocks (e.g. .t-hero--instrument) whose children self-cap (h1 18ch, .t-lede --measure): the
   second column fills the recovered width instead of stranding it. NOT for single-column prose. */
.t-shell--wide { max-width: var(--canvas); }
/* On the wide canvas, running prose forms ONE CENTERED COLUMN — the book's reading-spine
   law: a held measure in the middle, plates/grids breaking to the full canvas around it.
   The cap is rem-based, NOT ch: a ch cap never bound an h2 (74ch at h2 size exceeds the
   canvas), which left headlines spanning full-left over narrow left-stuck paragraphs
   (the "everything cramped left" bug). Direct children only: bespoke grids/figures keep
   their own geometry and fill the full width. */
.t-shell--wide > .t-sheet:not(.t-sheet--canvas),
.t-shell--wide > h2,
.t-shell--wide > h3,
.t-shell--wide > .t-lede,
.t-shell--wide > p {
  /* !important on all three: page bodies kept re-breaking the spine with inline
     max-inline-size overrides (lede on a different left edge than its headline),
     page-local text-align:center headings, and off-axis labels — four pages had
     four different axis behaviors for the same role. ONE axis, by law. */
  max-inline-size: min(100%, 50rem) !important;
  /* ONE AXIS: prose holds its measure but sits on the canvas-left edge with the
     components below it. The centered "book spine" read as two broken left edges
     the moment a section mixed prose with a full-width grid (audited at 1920). */
  margin-inline: 0 !important;
  text-align: start !important;
}
/* the SECOND sanctioned label position: a t-sheet that introduces a full-width
   bespoke grid sits on the CANVAS axis with that grid, never floating on the
   centered column above content that starts elsewhere. */
.t-shell--wide > .t-sheet--canvas { max-inline-size: none !important; margin-inline: 0 !important; }
@media (max-width: 720px){ .t-shell { padding: 0 var(--space-4); } }

/* ===================== LAYOUT v2 · THE PLATE (breakout grids + primitives) =====================
   Spatial system per docs/features/torad-labs-visual-identity-spatial-system.md §4.
   .t-canvas / .t-spread REPLACE .t-shell at the band level — NEVER nested inside it (a breakout
   grid inside a 940px container cannot break out). All dormant until a page adopts them. */

/* §4.2 — breakout grid. Five named tiers, asymmetric by default (right gutter heavier) so a
   minimally-migrated page reads off-center, not re-centered-but-wider. */
.t-canvas {
  display: grid;
  grid-template-columns:
    [full-start]    var(--track-full)
    [feature-start] var(--track-feature)
    [popout-start]  var(--track-popout)
    [content-start] var(--track-content) [content-end]
    var(--track-popout)  [popout-end]
    minmax(0, calc(8vw + var(--space-7))) [feature-end]
    minmax(var(--space-6), 1.4fr)         [full-end];
  column-gap: var(--gap-track);
  container: canvas / inline-size;
}
.t-canvas > * { grid-column: content; min-width: 0; }
.t--popout       { grid-column: popout; }
.t--feature      { grid-column: feature; }
.t--bleed        { grid-column: full; }
.t--anchor-left  { grid-column: content-start / feature-end; }  /* eats the old right margin */
.t--anchor-right { grid-column: feature-start / content-end; }
.t-canvas--centered { /* opt-IN symmetry — reserved for one manifesto pull-quote per site */
  grid-template-columns: [full-start] 1fr [content-start] var(--track-content) [content-end] 1fr [full-end];
}

/* §4.3 — asymmetric publication grid: left codex rail + body + right living gloss. */
.t-spread {
  display: grid;
  max-inline-size: var(--canvas); margin-inline: auto;
  /* rail (folios) · reading column (the measure) · gloss (margin apparatus). Direct track sizes —
     NOT --track-content, whose 100%-relative min() collapses inside this inline-size container.
     rail-end is explicit so grid-column:rail resolves. justify-content:start keeps it inboard. */
  grid-template-columns:
    [rail-start]            minmax(0, 11rem)
    [rail-end body-start]   minmax(0, var(--measure-text))
    [body-end gloss-start]  minmax(0, 22rem) [gloss-end];
  column-gap: var(--gap-track);
  justify-content: start;
  align-items: start;
  container: spread / inline-size;
}
.t-spread > * { grid-column: body; min-width: 0; }
.t-spread__rail {
  grid-column: rail;
  position: sticky; top: var(--rail-top); align-self: start;
  font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
  display: grid; gap: var(--space-3);
}
.t-spread__gloss { grid-column: gloss; }
.t-gloss {
  font-family: var(--font-body); font-size: var(--text-3); line-height: 1.5;
  color: var(--ink-body); padding-inline-start: var(--space-4);
  border-inline-start: var(--hair) solid var(--line);
}
.t-gloss__src { font-family: var(--font-mono); font-size: var(--text-1);
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }

/* §4.4 — interactive keyed plate: clicking a key reveals that part, dims the rest. Zero JS. */
.t-plate--keyed { grid-column: feature; display: grid; gap: var(--space-4); }
.t-plate--keyed .key { color: var(--accent); cursor: pointer; font-family: var(--font-mono); }
.t-plate--keyed:has(.part:target) .figure :not(:target ~ *) {
  opacity: .4; transition: opacity var(--dur-2) var(--ease-out); }
.t-plate--keyed .part { display: none; }
.t-plate--keyed .part:target { display: block; }

/* §4.8 — supporting placement / typographic primitives (reuse themed tokens; no new colors).
   .t-kicker and .t-prose intentionally NOT here — they already exist (collision); see §4.8 note. */
.t-split { display: grid; gap: var(--gap-track); align-items: stretch; }
.t-split__sticky { position: sticky; top: var(--rail-top); align-self: start; }

.t-deck { font-family: var(--font-display); font-weight: 380; font-size: var(--text-5); line-height: 1.4;
  color: var(--ink-strong); max-inline-size: var(--measure-narrow); margin: 0 0 var(--space-7); text-wrap: balance; }

.t-display { font-family: var(--font-display); font-weight: 340; /* LIGHT — size carries hierarchy */
  font-size: var(--text-10); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-strong);
  margin: 0 0 var(--space-6); text-wrap: pretty; hanging-punctuation: first last; }
.t-display em { font-style: italic; color: var(--accent); }  /* the one gold mark */

.t-ledger { grid-column: feature; font-family: var(--font-mono); border-block: var(--hair) solid var(--line-strong); }
.t-ledger__row { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-track); padding-block: var(--space-3); }
.t-ledger__row + .t-ledger__row { border-top: var(--hair) dashed var(--line-mute); }
.t-ledger__num { color: var(--accent); font-variant-numeric: tabular-nums; }

/* exposed structural reticle — gutter hairlines. clip, NOT hidden (hidden breaks sticky). */
.t-rails { position: relative; overflow-x: clip; }
.t-rails::before, .t-rails::after { content:""; position:absolute; inset-block:0; inline-size: var(--hair);
  background: var(--line-mute); pointer-events:none; }
.t-rails::before { inset-inline-start: max(var(--space-6), calc(50% - var(--canvas)/2)); }
.t-rails::after  { inset-inline-end:  max(var(--space-6), calc(50% - var(--canvas)/2)); }

/* horizontal descent rail — steps GROW: faint proto-sign → large gold owned-model. */
.t-lineage { grid-column: full; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: center; border-block: var(--hair) solid var(--line-strong); }
.t-lineage__step { padding: var(--space-7) var(--space-5); text-align: center; font-family: var(--font-mono); }
.t-lineage__step:nth-child(1){ font-size: var(--text-1); color: var(--ink-mute); opacity:.6; }
.t-lineage__step:nth-child(2){ font-size: var(--text-3); color: var(--ink-body); }
.t-lineage__step:nth-child(3){ font-size: var(--text-5); color: var(--ink-strong); }
.t-lineage__step:last-child  { font-size: var(--text-7); color: var(--accent); }  /* the gold terminus */
.t-lineage__step + .t-lineage__step { border-inline-start: var(--hair) dashed var(--line-mute); }

/* §4.7 — container-query discipline: .t-split queries the NAMED canvas container, never anonymous. */
@container canvas (min-width: 52rem) {
  .t-split { grid-template-columns: 1.6fr 1fr; }
  .t-split--flip { grid-template-columns: 1fr 1.6fr; }
  .t-split > * + * { border-inline-start: var(--hair) dashed var(--line-mute);
    padding-inline-start: var(--gap-track); }
}

/* subgrid card alignment — kills cross-card alignment debt where supported. */
@supports (grid-template-rows: subgrid) {
  .t-bento { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-flow: dense; gap: var(--gap-block); }
  .t-bento > .t-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}

/* §4.6 — mandatory responsive collapses (minmax tracks floor nonzero, so phones need these). */
@media (max-width: 720px) {
  .t-canvas { grid-template-columns: [content-start] minmax(0,1fr) [content-end]; column-gap: var(--space-4); }
  .t-canvas > * { grid-column: content; }
  .t-spread { column-gap: var(--space-4); }
}
@media (max-width: 1120px) {
  .t-spread { grid-template-columns: [body-start] minmax(0, var(--measure-text)) [body-end] minmax(0,1fr); }
  .t-spread__rail { position: static; grid-column: body; display: flex; flex-flow: row wrap;
    gap: var(--space-4); margin-bottom: var(--space-5); }
  .t-spread__gloss { grid-column: body; margin-block-start: var(--space-3); }
  .t-gloss { border-inline-start: 0; border-top: var(--hair) solid var(--line); padding: var(--space-3) 0 0; }
}

.t-band { padding: var(--gap-section) 0; }
/* every section boundary draws one hairline, so sections read as separate plates
   even in the near-black Observatory theme where the bg shift alone is too faint */
.t-band + .t-band { border-top: var(--hair) solid var(--line-strong); }
.t-band--alt { background: var(--surface-raised); }
.t-grid { background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; }

/* ===================== ATOMS ===================== */

/* hairline rule */
.t-rule { border: 0; height: var(--hair); background: var(--line); }

/* mono eyebrow / kicker */
.t-kicker { font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); }
.t-kicker .pipe { color: var(--line-strong); margin: 0 0.4rem; }

/* sheet / figure number */
.t-sheet { font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--space-3); }

/* mono label */
.t-label { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); }

/* gold underline on a word */
.t-ul { background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 92%; padding-bottom: 1px; }

/* status / tag */
.t-tag { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); }
.t-tag--accent { color: var(--accent); }

/* button · secondary (ink outline) is the default; --gold is primary */
.t-btn { font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-strong); background: transparent;
  border: var(--hair) solid var(--ink-strong); border-radius: var(--radius-1);
  padding: 0.7rem 1.25rem; cursor: pointer;
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-snap); }
.t-btn:hover { background: var(--ink-strong); color: var(--surface); }
.t-btn:active { transform: translateY(1px); }
.t-btn:disabled { color: var(--ink-mute); border-color: var(--line-strong); background: transparent; cursor: not-allowed; }
.t-btn.is-loading { color: var(--ink-mute); border-color: var(--line-strong); background: transparent; cursor: progress; }
.t-btn.is-done { color: var(--accent); border-color: var(--accent); background: transparent; }
.t-btn--gold { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.t-btn--gold:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--on-accent); }
.t-btn--gold.is-loading, .t-btn--gold.is-done { background: transparent; }
.t-btn--gold.is-done { color: var(--accent); border-color: var(--accent); }

/* text link with a trailing arrow */
.t-link { font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.08em;
  color: var(--ink-strong); border-bottom: var(--hair) solid var(--line-strong); padding-bottom: 3px;
  transition: color var(--dur-1), border-color var(--dur-1); }
.t-link:hover { color: var(--accent); border-color: var(--accent); }
.t-link:active { color: var(--ink-strong); border-color: var(--ink-strong); } /* press confirmation: a visible step past hover */

/* plate · hairline frame + ink corner registration ticks (the signature primitive) */
.t-plate { position: relative; border: var(--hair) solid var(--line); }
/* padded plate: the default container for a data panel (ladder, compare, readout) */
.t-plate--pad { padding: var(--space-5); }
.t-plate::before, .t-plate::after { content: ""; position: absolute; width: 9px; height: 9px; }
.t-plate::before { top: -1px; left: -1px; border-top: var(--hair) solid var(--line-strong); border-left: var(--hair) solid var(--line-strong); }
.t-plate::after { bottom: -1px; right: -1px; border-bottom: var(--hair) solid var(--line-strong); border-right: var(--hair) solid var(--line-strong); }

/* THE INTAGLIO PLATE-MARK (opt-in) - content pressed INTO the rag, not framed on top of it.
   base .t-plate keeps the corner-registration register; recomposed pages add --intaglio. */
.t-plate--intaglio { border: 0; border-radius: 1px;
  background: radial-gradient(135% 120% at 26% 14%, color-mix(in oklab, var(--surface) var(--plate-well), var(--paper-0)), var(--surface) 72%);
  box-shadow: inset 5px 7px 18px var(--plate-sink), inset -3px -3px 9px var(--plate-rise), 0 1px 0 var(--plate-rise); }
/* repurpose the ::before corner slot as the single bevelled plate-mark line; kill the ::after tick */
.t-plate--intaglio::before { content: ""; inset: clamp(.5rem, 1.3vw, .9rem); top: auto; left: auto; width: auto; height: auto;
  border: var(--hair) solid var(--plate-bevel); border-radius: 1px; pointer-events: none;
  box-shadow: inset 1px 1px 0 var(--plate-sink), inset -.5px -.5px 0 var(--plate-rise); }
.t-plate--intaglio::after { content: none; }

/* THE BURIN GRAMMAR - hand-engraved figures (modifiers self-sufficient so a figure can hatch
   with .t-eng--fine alone). tone = cut-depth via the --bw ladder, never opacity. */
.t-eng, .t-eng--fine, .t-eng--heavy { fill: none; stroke: var(--ink-strong); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.t-eng { stroke-width: var(--bw-4); }
.t-eng--fine { stroke-width: var(--bw-2); }
.t-eng--heavy { stroke-width: var(--bw-5); }
.t-eng-hatch { fill: none; stroke: var(--ink-strong); stroke-width: var(--bw-1); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.t-eng-rubric { fill: none; stroke: var(--accent); stroke-width: var(--bw-4); vector-effect: non-scaling-stroke; }
/* the asserted part is cut hardest - deeper than the in-ink outlines, not just coloured */
.t-eng-rubric--heavy { stroke-width: var(--bw-5); }
.t-eng-live { fill: var(--data-pos); }

/* data dot · one of the three measurement inks */
.t-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.t-dot--pos { background: var(--data-pos); } .t-dot--neg { background: var(--data-neg); } .t-dot--info { background: var(--data-info); }

/* ===================== MOLECULES ===================== */

/* theme toggle · Auto follows the OS; Light/Light force + persist */
.t-theme { display: inline-flex; border: var(--hair) solid var(--line); border-radius: var(--radius-1); overflow: hidden; }
.t-theme button { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); background: transparent; border: 0;
  padding: 0.4rem 0.6rem; cursor: pointer; transition: color var(--dur-1), background var(--dur-1); }
.t-theme button + button { border-left: var(--hair) solid var(--line); }
.t-theme button:hover[aria-pressed="false"] { color: var(--ink-strong); }
.t-theme button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }

/* topbar / faceplate */
.t-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 0.85rem var(--space-6); background: var(--surface); border-bottom: var(--hair) solid var(--line); }
.t-bar .t-brand { font-family: var(--font-display); font-size: var(--text-5); font-weight: 500; color: var(--ink-strong); letter-spacing: 0.01em; }
.t-bar .t-brand .dot { color: var(--accent); }
.t-bar .t-bar-meta { display: flex; gap: var(--space-5); align-items: center; }
@media (max-width: 720px){ .t-bar { padding: 0.8rem var(--space-4); } .t-bar .hide-s { display: none; } }

/* capture / field */
.t-field { max-width: 440px; }
.t-field .t-field-row { display: flex; gap: var(--space-2); align-items: flex-end; }
.t-input { flex: 1; min-width: 0; /* placeholder min-content must never push the button off-canvas */
  font-family: var(--font-mono); font-size: var(--text-3); color: var(--ink-strong);
  background: transparent; border: 0; border-bottom: var(--hair) solid var(--line-strong);
  padding: 0.55rem 0.1rem; transition: border-color var(--dur-1); }
/* phone width: the row wraps and the button takes its own full line under the input */
@media (max-width: 440px){
  .t-field .t-field-row, .t-capture .t-field-row { flex-wrap: wrap; }
  .t-field .t-field-row .t-btn, .t-capture .t-field-row .t-btn { flex: 1 1 100%; justify-content: center; }
  .t-field .t-field-row .t-input, .t-capture .t-field-row .t-input { flex: 1 1 100%; }
}
.t-input::placeholder { color: var(--ink-mute); }
.t-input:focus { outline: none; border-bottom-color: var(--accent); }
.t-field.is-error .t-input { border-bottom-color: var(--data-neg); }
.t-field .t-msg { font-family: var(--font-mono); font-size: var(--text-2); margin-top: var(--space-3); min-height: 1rem; }
.t-field .t-msg.ok { color: var(--data-pos); } .t-field .t-msg.bad { color: var(--data-neg); }

/* spec row (type specimen) */
.t-spec { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5) 0; border-bottom: var(--hair) solid var(--line); }
.t-spec .role { font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.06em; color: var(--ink-mute); text-align: right; }

/* color chip */
.t-chip { border: var(--hair) solid var(--line); border-radius: var(--radius-2); overflow: hidden; }
.t-chip .sw { height: 54px; }
.t-chip .meta { padding: 0.4rem 0.5rem 0.55rem; }
.t-chip .hex { font-family: var(--font-mono); font-size: var(--text-1); color: var(--ink-strong); }
.t-chip .use { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

/* callout (label + leader line) */
.t-callout { position: absolute; font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.04em; color: var(--ink-body); white-space: nowrap; }
.t-callout .k { color: var(--accent); }

/* figure caption */
.t-fig { font-family: var(--font-mono); font-size: var(--text-2); color: var(--ink-mute); line-height: 1.6; }
.t-fig b { color: var(--ink-body); font-weight: 500; }

/* ===================== ORGANISMS ===================== */

/* module plate (product) */
.t-module { padding: var(--space-6) 1.9rem; background: var(--surface); }
.t-module .m-no { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.t-module h3 { font-size: var(--text-7); }
.t-module .fn { color: var(--ink-body); margin: 0.2rem 0 var(--space-5); }
.t-module ul { list-style: none; padding: 0; margin: 0; }
.t-module li { font-family: var(--font-mono); font-size: var(--text-2); color: var(--ink-body);
  padding: 0.46rem 0; border-top: var(--hair) solid var(--line); display: flex; gap: 0.6rem; margin: 0; }
.t-module li::before { content: "+"; color: var(--accent); }

/* section header (sheet number + title) */
.t-sec-head { margin-bottom: var(--space-6); }
.t-lede { font-size: var(--text-5); color: var(--ink-strong); max-width: var(--measure); margin-bottom: var(--space-5); line-height: 1.45; }

/* ============================================================
   EXTENDED COMPONENTS (forms · content · foundations utilities)
   Generated from the DS-expansion workflow (verified set).
   ============================================================ */
/* ===== foundations / tokens-breakpoints ===== */
/* === Breakpoint standard (add to torad-tokens.css, as a comment block) ===
   Torad keys responsiveness at exactly four widths. Use these and no others.

     bp-s   480px   phone -> small tablet
     bp-m   720px   tablet / single-column threshold (already used by .t-shell, .t-bar)
     bp-l   960px   wide tablet / small laptop
     bp-xl  1120px  == --container ; the shell stops growing here

   Runtime note: custom properties (var(--x)) are NOT usable inside @media
   feature queries, so we do NOT emit --bp-* variables (they would be a footgun).
   Hand-write the px literals, OR adopt the @custom-media form below at build time
   (PostCSS preset-env / Lightning CSS):

     @custom-media --bp-s   (min-width: 480px);
     @custom-media --bp-m   (min-width: 720px);
     @custom-media --bp-l   (min-width: 960px);
     @custom-media --bp-xl  (min-width: 1120px);

   PREFER container queries for component-internal layout (see .t-cols): a module
   should respond to its own column width, not the viewport, so it survives being
   dropped into a sidebar. Reserve viewport @media for page-level scaffolding
   (shell padding, nav collapse). */

/* ===== foundations / tokens-z-index ===== */
/* ===== foundations / tokens-motion ===== */
/* The global reset in torad-base.css already neutralizes these under
   prefers-reduced-motion (clamps transition/animation to 0.001s). Authors
   need add nothing extra for transitions; only JS-driven or transform-heavy
   reveals should ALSO guard in script (see .t-skip / interactive components). */

/* ===== foundations / tokens-icon ===== */
/* === Icon utility (add to torad-components.css) ===
   CONVENTION (enforced by this class):
   . inline <svg>, no <img>, never an emoji character
   . stroke="currentColor" fill="none" -> color inherits from the parent's color
   . stroke-width ~1.5 at 24px viewBox for the patent-drawing hairline feel
   . size ONLY via --icon-* (default --icon-2)
   . color via currentColor: it follows --ink-* automatically; opt into gold
     with .t-icon--accent (which just sets color, so the stroke follows). */
.t-icon {
  width: var(--icon-2); height: var(--icon-2);
  flex: 0 0 auto;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.t-icon--s { width: var(--icon-1); height: var(--icon-1); }
.t-icon--l { width: var(--icon-3); height: var(--icon-3); }
.t-icon--accent { color: var(--accent); } /* stroke=currentColor -> turns gold, both themes */

/* ===== foundations / elevation-rule ===== */
/* === Elevation law (documented in torad-components.css) ===
   PROHIBITED, both themes: the GENERIC floating-card shadow (big positive spread,
   neutral/black, no rim) and blur halos. Those are slop, a FAIL.
   THE NICE PLATE is the canonical depth: a struck leaf LIFTING off the desk, ported
   verbatim from the book's .pl-plate (--plate-leaf): a crisp cream rim catching light
   on the near edge + a soft far-edge sink + ONE tight warm drop (-34px negative spread,
   warm-tinted) hugging underneath. It reads raised + letterpress, never a Material card.
   Used via .t-plate--raised / .t-plate--leaf.
   The pressed-IN intaglio deboss (.t-plate--intaglio) is RETIRED from the apex by founder
   taste: it read "odd / pressed in." Keep the class defined for the book, do not use it here.
   Other depth: surface step (--surface-raised/-sunk), hairline edge, corner ticks. */

.t-elevate {                       /* raised plane: card lifted off the paper */
  position: relative;
  background: var(--surface-raised);
  border: var(--hair) solid var(--line);
  padding: var(--space-5);
}
.t-elevate::before, .t-elevate::after { /* reuse the .t-plate tick mechanism */
  content: ""; position: absolute; width: 13px; height: 13px;
}
.t-elevate::before { top: -1px; left: -1px;
  border-top: var(--hair) solid var(--tick); border-left: var(--hair) solid var(--tick); }
.t-elevate::after { bottom: -1px; right: -1px;
  border-bottom: var(--hair) solid var(--tick); border-right: var(--hair) solid var(--tick); }

.t-elevate--sunk {                 /* recessed plane: inset well, input groups */
  background: var(--surface-sunk);
  border-color: var(--line);
}
.t-elevate--flush {                /* same plane as page, hairline only, no step */
  background: transparent;
  border-color: var(--line);
}

/* THE NICE PLATE: a struck leaf lifting off the desk (the book's .pl-plate look).
   --plate-leaf carries the crisp rim + soft far-sink + tight warm drop. Use WITH .t-plate
   so the corner-registration ticks stay (the ticks are what keep it a plate, not a card).
   .t-plate--leaf is the primary name; --raised is kept as an alias. */
.t-plate--raised, .t-plate--leaf {
  background: var(--surface-raised);
  border-radius: 1px;
  box-shadow: var(--plate-leaf);
}

/* ===== foundations / t-cols ===== */
/* === Asymmetric column grid (add to torad-components.css) === */
.t-cols {
  display: grid;
  gap: var(--gap-block) var(--space-8);   /* generous column gutter; row gap stays tight when stacked */
  container-type: inline-size; /* children can @container off this width */
}
.t-cols--1-2 { grid-template-columns: 1fr; }
.t-cols--2-1 { grid-template-columns: 1fr; }
.t-cols--auto { grid-template-columns: 1fr; }

/* Container-query path: respond to the grid's own inline size, not the viewport.
   Asymmetry is intentional · never 1fr 1fr 1fr. */
@container (min-width: 640px) {
  .t-cols--1-2 { grid-template-columns: 5fr 7fr; }  /* rail + main */
  .t-cols--2-1 { grid-template-columns: 7fr 5fr; }  /* main + rail */
  .t-cols--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* Fallback for engines without container queries: key on the standard bp-m (720). */
@supports not (container-type: inline-size) {
  @media (min-width: 720px) {
    .t-cols--1-2 { grid-template-columns: 5fr 7fr; }
    .t-cols--2-1 { grid-template-columns: 7fr 5fr; }
    .t-cols--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  }
}

/* Query-container wrapper. Wrap an adaptive component (t-steps, t-spec-sheet,
   t-person, t-empty) in .t-frame so it responds to the space it actually has,
   not the viewport. Do NOT wrap fixed overlays (t-dialog, t-toast) in it: a
   query container becomes their containing block. */
.t-frame { container-type: inline-size; }

/* opt-in: let the rail align to top while main flows */
.t-cols--top { align-items: start; }
/* opt-in: swap visual order without touching DOM order (keep source order = reading order) */
.t-cols--flip > :first-child { order: 2; }

/* ===== foundations / t-focus-ring ===== */
/* Optionally refactor base to read the tokens (behavior-identical):
   :focus-visible { outline: var(--focus-width) solid var(--focus);
                    outline-offset: var(--focus-offset); } */

/* === Focus-ring utility (add to torad-components.css) ===
   For custom widgets that set outline:none on themselves and manage focus in JS. */
.t-focus-ring:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-1); /* so the ring tracks rounded custom controls */
}
/* Roving-tabindex widgets often move focus to a child that is not :focus-visible;
   force the ring with a data hook the JS sets on the active item. */
.t-focus-ring[data-focus-visible] {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ===== foundations / t-sr-only ===== */
/* === Visually-hidden utilities (add to torad-components.css) === */
.t-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* reveals when focused (e.g. a hidden link that should show on keyboard reach) */
.t-sr-only--focusable:focus,
.t-sr-only--focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; clip-path: none;
  white-space: normal;
}

/* ===== forms / t-select ===== */
/* ===== SELECT · native, underline language ===== */
.t-select-wrap { position: relative; display: block; }
.t-select { width: 100%; min-height: var(--field-control-h);
  font-family: var(--font-mono); font-size: var(--text-3);
  color: var(--ink-strong); background: transparent; border: 0;
  border-bottom: var(--hair) solid var(--line-strong); border-radius: 0;
  padding: 0.55rem 1.6rem 0.55rem 0.1rem; cursor: pointer; appearance: none;
  transition: border-color var(--dur-1) var(--ease-snap); }
.t-select:focus { outline: none; }
/* drafting caret · hairline chevron, recolors on focus, themes via ink token */
.t-select-wrap::after { content: ""; position: absolute; right: 0.25rem; top: 50%;
  width: 0.5rem; height: 0.5rem; transform: translateY(-70%) rotate(45deg);
  border-right: var(--hair) solid var(--ink-mute); border-bottom: var(--hair) solid var(--ink-mute);
  pointer-events: none; transition: border-color var(--dur-1); }
.t-select-wrap:focus-within::after { border-right-color: var(--accent); border-bottom-color: var(--accent); }
.t-select:disabled { color: var(--ink-mute); border-bottom-color: var(--line);
  cursor: not-allowed; opacity: 0.7; }
.t-select option { color: var(--ink-strong); background: var(--surface); }
.t-select option[value=""][disabled] { color: var(--ink-mute); }

/* ===== forms / t-textarea ===== */
/* ===== TEXTAREA · underline language ===== */
.t-textarea { width: 100%; font-family: var(--font-mono); font-size: var(--text-3); line-height: 1.55;
  color: var(--ink-strong); background: transparent; border: 0;
  border-bottom: var(--hair) solid var(--line-strong); border-radius: 0;
  padding: 0.55rem 0.1rem; min-height: 4.4rem; resize: vertical;
  transition: border-color var(--dur-1) var(--ease-snap); }
.t-textarea::placeholder { color: var(--ink-mute); }
.t-textarea:focus { outline: none; border-bottom-color: var(--accent); }
.t-textarea:disabled { color: var(--ink-mute); border-bottom-color: var(--line);
  cursor: not-allowed; opacity: 0.7; resize: none; }
/* live counter row */
.t-textarea__foot { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.t-textarea__count { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.08em;
  color: var(--ink-mute); }
.t-textarea__count.is-over { color: var(--data-neg); }

/* ===== forms / t-checkbox ===== */
/* ===== CHECKBOX · hairline box, gold fill on check ===== */
.t-checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-3);
  font-family: var(--font-body); font-size: var(--text-3); color: var(--ink-body);
  cursor: pointer; line-height: 1.4; }
.t-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); margin: 0; }
.t-checkbox__box { flex: 0 0 auto; width: var(--control-box); height: var(--control-box);
  margin-top: 0.18rem; border: var(--hair) solid var(--line-strong); border-radius: var(--radius-1);
  background: var(--control-surface); position: relative;
  transition: border-color var(--dur-1) var(--ease-snap), background var(--dur-1) var(--ease-snap); }
.t-checkbox__box::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.34rem; height: 0.62rem; border: solid var(--on-accent);
  border-width: 0 var(--hair) var(--hair) 0; transform: translateY(-6%) rotate(45deg) scale(0);
  transform-origin: center; transition: transform var(--dur-1) var(--ease-snap); }
.t-checkbox:hover input:not(:disabled) ~ .t-checkbox__box { border-color: var(--ink-mute); }
.t-checkbox input:checked ~ .t-checkbox__box { background: var(--control-fill); border-color: var(--control-fill); }
.t-checkbox input:checked ~ .t-checkbox__box::after { transform: translateY(-6%) rotate(45deg) scale(1); }
.t-checkbox input[data-indeterminate="true"] ~ .t-checkbox__box { background: var(--control-fill); border-color: var(--control-fill); }
.t-checkbox input[data-indeterminate="true"] ~ .t-checkbox__box::after { width: 0.6rem; height: 0;
  border-width: 0 0 var(--hair) 0; transform: rotate(0) scale(1); }
.t-checkbox:has(input:focus-visible) .t-checkbox__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-checkbox input:disabled ~ .t-checkbox__box { border-color: var(--line); background: var(--surface-sunk); }
.t-checkbox:has(input:disabled) { color: var(--ink-mute); cursor: not-allowed; }

/* ===== forms / t-radio ===== */
/* ===== RADIO · hairline ring, gold center on select ===== */
.t-radio-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.t-radio-group legend { padding: 0; margin-bottom: var(--space-2); }
.t-radio { display: inline-flex; align-items: flex-start; gap: var(--space-3);
  font-family: var(--font-body); font-size: var(--text-3); color: var(--ink-body);
  cursor: pointer; line-height: 1.4; }
.t-radio input { position: absolute; width: 1px; height: 1px; opacity: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); margin: 0; }
.t-radio__ring { flex: 0 0 auto; width: var(--control-box); height: var(--control-box);
  margin-top: 0.18rem; border: var(--hair) solid var(--line-strong); border-radius: 50%;
  background: var(--control-surface); position: relative;
  transition: border-color var(--dur-1) var(--ease-snap); }
.t-radio__ring::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--control-fill);
  transform: scale(0); transition: transform var(--dur-1) var(--ease-snap); }
.t-radio:hover input:not(:disabled) ~ .t-radio__ring { border-color: var(--ink-mute); }
.t-radio input:checked ~ .t-radio__ring { border-color: var(--control-fill); }
.t-radio input:checked ~ .t-radio__ring::after { transform: scale(1); }
.t-radio:has(input:focus-visible) .t-radio__ring { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-radio input:disabled ~ .t-radio__ring { border-color: var(--line); background: var(--surface-sunk); }
.t-radio:has(input:disabled) { color: var(--ink-mute); cursor: not-allowed; }

/* ===== forms / t-switch ===== */
/* ===== SWITCH · square thumb, hairline track ===== */
.t-switch { display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); cursor: pointer; }
.t-switch input { position: absolute; width: 1px; height: 1px; opacity: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); margin: 0; }
.t-switch__track { position: relative; flex: 0 0 auto; width: 2.6rem; height: 1.35rem;
  border: var(--hair) solid var(--line-strong); border-radius: var(--radius-1);
  background: var(--control-surface);
  transition: background var(--dur-1) var(--ease-snap), border-color var(--dur-1) var(--ease-snap); }
.t-switch__thumb { position: absolute; top: 50%; left: 0.18rem; width: 0.92rem; height: 0.92rem;
  transform: translateY(-50%); background: var(--ink-mute); border-radius: var(--radius-1);
  transition: transform var(--dur-1) var(--ease-snap), background var(--dur-1) var(--ease-snap); }
.t-switch:hover input:not(:disabled) ~ .t-switch__track { border-color: var(--ink-mute); }
.t-switch input:checked ~ .t-switch__track { background: var(--control-fill); border-color: var(--control-fill); }
.t-switch input:checked ~ .t-switch__track .t-switch__thumb { transform: translateY(-50%) translateX(1.25rem); background: var(--on-accent); }
.t-switch:has(input:focus-visible) .t-switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-switch input:disabled ~ .t-switch__track { border-color: var(--line); background: var(--surface-sunk); }
.t-switch:has(input:disabled) { color: var(--line-strong); cursor: not-allowed; }
/* state word: OFF when unchecked, ON when checked, via data-attr swap */
.t-switch__state[data-on]::after { content: attr(data-off); }
.t-switch input:checked ~ .t-switch__state[data-on]::after { content: attr(data-on); }
.t-switch input:checked ~ .t-switch__state { color: var(--accent); }

/* ===== forms / t-search ===== */
/* ===== SEARCH · leading icon + clearable underline ===== */
.t-search { position: relative; display: flex; align-items: center;
  border-bottom: var(--hair) solid var(--line-strong);
  transition: border-color var(--dur-1) var(--ease-snap); }
.t-search:focus-within { border-bottom-color: var(--accent); }
.t-search__icon { flex: 0 0 auto; width: 1rem; height: 1rem; margin-right: var(--space-2);
  color: var(--ink-mute); pointer-events: none; }
.t-search__icon svg { display: block; width: 100%; height: 100%; }
.t-search__input { flex: 1; min-height: var(--field-control-h);
  font-family: var(--font-mono); font-size: var(--text-3);
  color: var(--ink-strong); background: transparent; border: 0; padding: 0.55rem 0.1rem; }
.t-search__input:focus { outline: none; }
.t-search__input::placeholder { color: var(--ink-mute); }
.t-search__input::-webkit-search-decoration,
.t-search__input::-webkit-search-cancel-button { appearance: none; }
.t-search__clear { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-2);
  letter-spacing: 0.08em; color: var(--ink-mute); background: transparent; border: 0; cursor: pointer;
  padding: 0.2rem 0.35rem; line-height: 1; transition: color var(--dur-1); }
.t-search__clear:hover { color: var(--accent); }
.t-search.is-empty .t-search__clear { visibility: hidden; }
.t-search:has(.t-search__input:disabled) { border-bottom-color: var(--line); }
.t-search__input:disabled { color: var(--ink-mute); cursor: not-allowed; }

/* ===== forms / t-fieldset ===== */
/* ===== FIELDSET · plate-framed engineering sheet ===== */
.t-fieldset { border: 0; margin: 0; padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-5); }
.t-fieldset > legend { padding: 0 var(--space-2); margin-left: calc(var(--space-2) * -1);
  font-family: var(--font-mono); font-size: var(--text-2); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-strong); }
.t-fieldset__fig { font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); margin: calc(var(--space-3) * -1) 0 var(--space-2); }
.t-fieldset.is-disabled > legend { color: var(--ink-mute); }

/* ===== forms / t-capture ===== */
/* ===== CAPTURE · Be first to know (broad) ===== */
.t-capture { max-width: 460px; }
.t-capture .t-field-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.t-capture .t-input { flex: 1; }
.t-capture__result { font-family: var(--font-mono); font-size: var(--text-2);
  margin-top: var(--space-3); min-height: 1rem; color: var(--ink-mute); }
.t-capture__result.ok { color: var(--data-pos); }
.t-capture__result.bad { color: var(--data-neg); }
/* loading button visual reuses the existing .t-btn.is-loading the JS toggles;
   no data-state .t-btn rule is needed (it would duplicate that class). */

/* ===== forms / t-capture--intent ===== */
/* ===== CAPTURE · Start a model (high-intent) ===== */
.t-capture--intent { max-width: 520px; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5); }
.t-capture--intent .t-capture__fig { font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.t-capture--intent .t-capture__head { font-family: var(--font-display); font-size: var(--text-6);
  color: var(--ink-strong); line-height: 1.1; margin: 0; }
.t-capture--intent .t-capture__actions { display: flex; justify-content: flex-end; }
.t-capture--intent .t-capture__result { font-family: var(--font-mono); font-size: var(--text-2);
  min-height: 1rem; color: var(--ink-mute); }
.t-capture--intent .t-capture__result.ok { color: var(--data-pos); }
.t-capture--intent .t-capture__result.bad { color: var(--data-neg); }

/* ===== content / t-card ===== */
/* t-card · slotted container, hairline framed, theme-driven */
.t-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-1);
}
.t-card--raised { background: var(--surface-raised); }
.t-card--sunk   { background: var(--surface-sunk); }
/* flush variant removes the box frame entirely (compose with .t-plate instead) */
/* plate card: a self-framing card — visible hairline + corner registration ticks,
   no need to also add .t-plate. (reveal animates the ticks in; see motion.) */
.t-card--plate { position: relative; border-color: var(--line); }
.t-card--plate::before, .t-card--plate::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; }
.t-card--plate::before { top: -1px; left: -1px; border-top: var(--hair) solid var(--line-strong); border-left: var(--hair) solid var(--line-strong); }
.t-card--plate::after { bottom: -1px; right: -1px; border-bottom: var(--hair) solid var(--line-strong); border-right: var(--hair) solid var(--line-strong); }

.t-card__head,
.t-card__body,
.t-card__foot { padding: var(--space-5); }
.t-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: var(--hair) solid var(--line);
}
.t-card__head h3 { font-size: var(--text-6); margin: 0; }
.t-card__serial { font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
  white-space: nowrap; }
.t-card__body { flex: 1 1 auto; color: var(--ink-body); }
.t-card__body > :last-child { margin-bottom: 0; }
/* plain (non-link) card title: a heading inside the card body */
.t-card__title { font-family: var(--font-display); font-size: var(--text-5); line-height: 1.12; color: var(--ink-strong); margin: 0 0 var(--space-2); }
.t-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  border-top: var(--hair) solid var(--line);
}
.t-card--snug .t-card__head,
.t-card--snug .t-card__body,
.t-card--snug .t-card__foot { padding: var(--space-4); }

/* ---- interactive whole-card link ---- */
.t-card--link { position: relative;
  transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-snap); }
.t-card--link .t-card__title-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.t-card--link:hover { border-color: var(--line-strong); }
.t-card--link:hover .t-card__head h3,
.t-card--link:hover .t-card__title-link { color: var(--accent); }
.t-card--link:active { transform: translateY(1px); }
.t-card--link:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-card--link .t-card__title-link:focus-visible { outline: none; }
.t-card--link .t-card__body a,
.t-card--link .t-card__body button { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){ .t-card--link { transition: none; } }

/* ===== content / t-stat ===== */
/* t-stat · big mono metric + label
   DOM order is valid <dl> (label <dt> before value <dd>); flex `order`
   puts the value visually on top without breaking semantics. */
.t-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.t-stat__value {
  order: -1;
  font-family: var(--font-display);
  font-size: var(--text-8);
  line-height: 0.96;
  color: var(--ink-strong);
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums;
  display: flex; align-items: baseline; gap: 0.1em;
}
.t-stat__unit { font-size: var(--text-5); color: var(--ink-mute); letter-spacing: 0; }
.t-stat__label {
  order: 0;
  font-family: var(--font-mono); font-size: var(--text-2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
/* trend / delta + honesty chip sit below the label */
.t-stat__delta, .t-stat .t-honesty { order: 1; }
/* trend / delta · DATA inks only */
.t-stat__delta {
  font-family: var(--font-mono); font-size: var(--text-2);
  display: inline-flex; align-items: center; gap: 0.3em;
  font-variant-numeric: tabular-nums;
}
.t-stat__delta--pos  { color: var(--data-pos); }
.t-stat__delta--neg  { color: var(--data-neg); }
.t-stat__delta--info { color: var(--data-info); }
.t-stat__delta::before { content: attr(data-arrow); font-size: 0.9em; }
/* size variants */
.t-stat--sm .t-stat__value { font-size: var(--text-7); }
.t-stat--lg .t-stat__value { font-size: var(--text-9); }
/* framed metric: hairline frame + padded. compose with .t-plate to add corner ticks */
.t-stat--framed { padding: var(--space-5); background: var(--surface); border: var(--hair) solid var(--line); }

/* ===== content / t-honesty ===== */
/* t-honesty · measurement-status chip for numeric claims */
/* the claim-mark: a small struck seal, not a default tag. max-content so it can
   NEVER stretch to fill a grid/flex/block parent (it was rendering as an empty
   full-width box inside stacked lists). Plate corner (1px), ink-tinted ground,
   firmer rule + dot so VALIDATED/ASSERTED reads as a mark of the world. */
.t-honesty {
  display: inline-flex; align-items: center; gap: 0.45em;
  inline-size: max-content;
  font-family: var(--font-mono); font-size: var(--text-0);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3em 0.7em 0.3em 0.6em;
  border: 1px solid color-mix(in oklab, currentColor 55%, transparent);
  background: color-mix(in oklab, currentColor 8%, transparent);
  border-radius: 1px;
  line-height: 1.3; vertical-align: middle;
}
.t-honesty::before { content:""; inline-size:0.5em; block-size:0.5em; border-radius:50%; background:currentColor; box-shadow:0 0 0 1px color-mix(in oklab, currentColor 30%, transparent); flex:none; }
.t-honesty--validated { color: var(--data-pos); }
.t-honesty--asserted  { color: var(--data-amber); }
/* a leading dot reuses .t-dot semantics if the author wants a marker */
.t-honesty .t-dot { width: 9px; height: 9px; }

/* ===== content / t-quote ===== */
/* t-quote · editorial blockquote */
.t-quote { margin: var(--space-7) 0; max-width: var(--measure); }
.t-quote blockquote, .t-quote.is-quote, blockquote.t-quote {
  font-family: var(--font-display);
  font-size: var(--text-6);
  line-height: 1.25;
  color: var(--ink-strong);
  text-wrap: pretty;
  padding-left: var(--space-5);
  /* leading gold hairline: rhythm punctuation, not chrome */
  border-left: 2px solid var(--accent);
  margin: 0;
}
.t-quote__cite {
  display: block; margin-top: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-2);
  letter-spacing: 0.08em; color: var(--ink-mute);
  padding-left: var(--space-5);
}
.t-quote__cite b { color: var(--ink-body); font-weight: 500; }
.t-quote__cite::before { content: "\00B7 "; color: var(--accent); }
/* oversized display pull-quote */
.t-quote--pull blockquote, .t-quote--pull.is-quote, blockquote.t-quote--pull { font-size: var(--text-7); letter-spacing: -0.01em; }
/* centered, no rule, for hero-adjacent statements */
.t-quote--center { text-align: center; max-width: 30ch; margin-inline: auto; }

/* t-letter · a single-column reading layout for long-form (the manifesto reads as a letter) */
.t-letter{max-inline-size:42rem;margin-inline:auto}
.t-letter > p{font-size:var(--text-5);line-height:1.68;color:var(--ink-body);margin-bottom:var(--space-5);max-width:none}
.t-letter > p:first-of-type{color:var(--ink-strong)}
.t-letter > h2{font-family:var(--font-display);font-size:var(--text-6);line-height:1.1;color:var(--ink-strong);margin:var(--space-8) 0 var(--space-4)}
.t-letter > h2:first-child{margin-top:0}
.t-letter em{color:var(--ink-strong)}
.t-letter__dateline{font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--space-6)}
.t-letter__fig{margin-block:var(--space-7)}
.t-letter__sign{font-family:var(--font-display);font-size:var(--text-5);color:var(--ink-strong);margin-top:var(--space-7);margin-bottom:0}
.t-letter__sign span{display:block;font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-top:var(--space-2)}

/* footnote superscript + a sourced-fact list (the manifesto register) */
.t-fn { font-family: var(--font-mono); font-size: 0.62em; line-height: 0; vertical-align: super; margin-left: 0.15em; }
.t-fn a { color: var(--accent); text-decoration: none; }
.t-fn a:hover { color: var(--accent-bright); }
.t-sources { list-style: decimal; padding-left: var(--space-6); margin: var(--space-6) 0 0;
  max-width: var(--measure); display: grid; gap: var(--space-3); }
.t-sources li { font-family: var(--font-mono); font-size: var(--text-1); line-height: 1.6; color: var(--ink-mute); }
.t-sources li::marker { color: var(--ink-mute); }
.t-sources a { color: var(--ink-body); border-bottom: var(--hair) solid var(--line-strong); }
.t-sources a:hover { color: var(--accent); border-color: var(--accent); }
.t-sources [id] { scroll-margin-top: calc(var(--nav-h, 4rem) + var(--space-4)); }
.t-quote--center blockquote { border-left: 0; padding-left: 0; }
.t-quote--center .t-quote__cite { padding-left: 0; }

/* ===== content / t-code ===== */
/* t-code · themed code block */
.t-code {
  background: var(--surface-sunk);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-1);
  overflow: hidden;
  margin: var(--space-5) 0;
}
.t-code__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: 0.5rem var(--space-4);
  background: var(--surface-raised);
  border-bottom: var(--hair) solid var(--line);
}
.t-code__name { font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.t-code__copy {
  font-family: var(--font-mono); font-size: var(--text-1); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  background: transparent; border: 0; cursor: pointer; padding: 0.2rem 0.3rem;
  transition: color var(--dur-1);
}
.t-code__copy:hover { color: var(--ink-strong); }
.t-code__copy[data-state="done"] { color: var(--data-pos); }
.t-code__copy[data-state="err"]  { color: var(--data-neg); }
.t-code__copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-code pre {
  margin: 0; padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-3);
  line-height: 1.65; color: var(--ink-body);
  tab-size: 2;
}
.t-code pre code { font-size: inherit; color: inherit; }
.t-code .tok-comment { color: var(--ink-mute); font-style: italic; }
.t-code .tok-key  { color: var(--accent); }
.t-code .tok-str  { color: var(--data-pos); }
.t-code .tok-num  { color: var(--data-info); }
.t-code .tok-err  { color: var(--data-neg); }
/* line-numbered variant */
.t-code--lines pre { counter-reset: ln; }
.t-code--lines pre > .ln { counter-increment: ln; display: block; }
.t-code--lines pre > .ln::before {
  content: counter(ln); display: inline-block; width: 2.5ch; margin-right: var(--space-4);
  color: var(--ink-mute); text-align: right; user-select: none;
}
/* inline code */
.t-code-inline {
  font-family: var(--font-mono); font-size: 0.88em;
  color: var(--ink-strong);
  background: var(--surface-sunk);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-1);
  padding: 0.05em 0.4em;
}

/* ===== content / t-dl ===== */
/* t-dl · definition list (specs / metadata) */
.t-dl { margin: var(--space-5) 0; }
/* stack: each term/desc pair (wrapped in a div) is one full-width block; the value keeps
   the whole column so it never wraps one word per line in a narrow panel */
.t-dl--stack { display: grid; gap: var(--space-5); }
.t-dl--stack > div { display: block; }
.t-dl--stack .t-dl__desc { max-width: none; }
/* stacked: term then definition, flowing */
.t-dl__term {
  font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
  margin-top: var(--space-4);
}
.t-dl__desc { color: var(--ink-body); margin: var(--space-1) 0 0; max-width: var(--measure); }
.t-dl__desc:first-of-type, .t-dl__term:first-child { margin-top: 0; }

/* aligned: two-column spec grid */
.t-dl--rows { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0; }
.t-dl--rows .t-dl__term,
.t-dl--rows .t-dl__desc {
  margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-top: var(--hair) solid var(--line);
  align-self: start;
}
.t-dl--rows > .t-dl__term:first-of-type,
.t-dl--rows > .t-dl__desc:nth-of-type(1) { border-top: 0; }
.t-dl--rows .t-dl__desc { padding-left: var(--space-4); }
/* mono values for serials/measurements */
.t-dl__desc--mono { font-family: var(--font-mono); font-size: var(--text-3);
  color: var(--ink-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 560px){
  .t-dl--rows { grid-template-columns: 1fr; }
  .t-dl--rows .t-dl__term { padding-bottom: 0; border-top: var(--hair) solid var(--line); }
  .t-dl--rows .t-dl__desc { padding-top: var(--space-1); padding-left: 0; border-top: 0; }
}

/* ===== content / t-divider ===== */
/* t-divider · section breaks (extends .t-rule semantics) */
.t-divider { border: 0; height: var(--hair); background: var(--line); margin: var(--space-7) 0; }
.t-divider--strong { background: var(--line-strong); }
.t-divider--dashed {
  height: 0; background: none;
  border-top: var(--hair) dashed var(--line-strong);
}
/* labeled divider · hairline interrupted by a mono label */
.t-divider-label {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-4); margin: var(--space-7) 0;
}
.t-divider-label::before, .t-divider-label::after {
  content: ""; height: var(--hair); background: var(--line);
}
.t-divider-label__text {
  font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  white-space: nowrap;
}
/* leading-label variant: label at the start, rule fills the rest */
.t-divider-label--lead { grid-template-columns: auto 1fr; }
.t-divider-label--lead::before { display: none; }
/* ticked divider · single registration tick on the line (drafting cue) */
.t-divider-tick { position: relative; border: 0; height: var(--hair); background: var(--line); margin: var(--space-7) 0; }
.t-divider-tick::before {
  content: ""; position: absolute; left: 0; top: -4px; width: var(--hair); height: 9px; background: var(--tick);
}

/* ===== content / t-hero ===== */
/* t-hero · page hero patterns */
.t-hero { padding: var(--space-9) 0 var(--space-7); }
.t-hero .t-kicker { margin-bottom: var(--space-4); display: inline-block; }
.t-hero h1 { max-width: 18ch; margin: 0 0 var(--space-5); }
.t-hero .t-lede { margin-bottom: var(--space-6); }
.t-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* (1) text-only editorial hero */
.t-hero--text { max-width: var(--container); }
.t-hero--text .t-lede { max-width: 44ch; }

/* (2) asymmetric instrument hero · copy left, framed panel right */
.t-hero--instrument {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
.t-hero__copy { min-width: 0; }
.t-hero__panel {
  position: relative;
  padding: var(--space-7) var(--space-6);
  background: var(--surface);
  min-height: 16rem;
}
.t-hero__panel .t-sheet { position: absolute; top: var(--space-4); left: var(--space-5); margin: 0; }
.t-hero__panel .t-serial {
  position: absolute; bottom: var(--space-4); right: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.t-hero__panel .t-fig { position: absolute; bottom: var(--space-4); left: var(--space-5); max-width: 22ch; }
@media (max-width: 860px){
  .t-hero--instrument { grid-template-columns: 1fr; gap: var(--space-6); }
  .t-hero__panel { min-height: 12rem; }
  .t-hero h1 { max-width: 22ch; }
}

/* ===== content / t-proofgrid ===== */
/* t-proofgrid · asymmetric primary + small grid (NOT three equal cards) */
.t-proofgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-5);
}
/* the lead cell occupies a 2x2 block, breaking the equal-card rhythm */
.t-proofgrid__primary { grid-column: span 2; grid-row: span 2; }
.t-proofgrid__primary .t-card__head h3 { font-size: var(--text-7); }
.t-proofgrid__primary .t-card__body { font-size: var(--text-5); }
/* secondaries are the smaller supporting cells */
.t-proofgrid__cell { grid-column: span 1; }
/* a split variant (primary + tall stacked cells) */
.t-proofgrid--split { grid-template-columns: 1.6fr 1fr; grid-auto-rows: auto; }
.t-proofgrid--split .t-proofgrid__primary { grid-column: 1; grid-row: span 2; }
.t-proofgrid--split .t-proofgrid__cell { grid-column: 2; }
/* an equal pair: two proof stats of the same evidentiary weight, side by side */
.t-proofgrid--pair { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
@media (max-width: 860px){
  .t-proofgrid, .t-proofgrid--split { grid-template-columns: 1fr 1fr; }
  .t-proofgrid__primary { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px){
  .t-proofgrid, .t-proofgrid--split, .t-proofgrid--pair { grid-template-columns: 1fr; }
  .t-proofgrid__primary { grid-column: 1; }
}

/* ===== content / t-feature ===== */
/* t-feature · compact proof row (serial gutter + prose) */
.t-feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.t-feature__no {
  font-family: var(--font-mono); font-size: var(--text-2);
  letter-spacing: 0.16em; color: var(--ink-mute);
  padding-top: 0.35em; white-space: nowrap;
}
.t-feature__no .k { color: var(--accent); }
.t-feature__body { min-width: 0; }
.t-feature__title { font-family: var(--font-display); font-size: var(--text-6); color: var(--ink-strong); margin: 0 0 var(--space-2); line-height: 1.1; }
.t-feature__text { color: var(--ink-body); margin: 0; max-width: var(--measure); }
/* stacked variant: serial above title, for narrow cells */
.t-feature--stack { grid-template-columns: 1fr; gap: var(--space-2); }
/* gold + marker variant, echoing .t-module li */
.t-feature--mark .t-feature__title::before { content: "+ "; color: var(--accent); font-family: var(--font-mono); }

/* vertical stack utility: even, generous rhythm between stacked blocks
   (was referenced by /home Sheet 01 but never defined, so features collided).
   Hairline separators sit centered between two equal gaps. */
.ds-stack { display: grid; align-content: start; }
.ds-stack > * + * { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--hair) solid var(--line-mute); }

/* ============================================================
   RECOVERED COMPONENTS (disclosure/overlay/feedback/data/longform/process)
   29 components from the DS-recovery workflow (verified set).
   ============================================================ */
/* ===== disclosure / t-disclosure ===== */
/* Disclosure: hairline-framed expandable region. Theme via semantic tokens only. */
.t-disclosure{display:block;background:var(--surface);border-radius:var(--radius-1);overflow:clip}
.t-disclosure__item{border-block-end:var(--hair) solid var(--line-mute)}
.t-disclosure__item:last-child{border-block-end:0}
/* header is a real button, full-width, display title, ink-strong text */
.t-disclosure__head{appearance:none;-webkit-appearance:none;width:100%;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--space-4);padding:var(--space-4) var(--space-5);margin:0;background:transparent;border:0;text-align:start;cursor:pointer;color:var(--ink-strong);font-family:var(--font-display);font-size:var(--text-3);line-height:1.25;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.t-disclosure__head:hover{background:var(--surface-raised);color:var(--ink-strong)}
.t-disclosure__head:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:calc(-1 * var(--focus-offset))}
.t-disclosure__head[aria-expanded="true"]{color:var(--ink-strong)}
/* serial slot: mono, muted, sits before the title */
.t-disclosure__serial{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.t-disclosure__title{display:block}
.t-disclosure__sub{display:block;margin-block-start:var(--space-1);font-family:var(--font-body);font-size:var(--text-1);color:var(--ink-mute)}
/* registration tick: two hairlines forming a plus that becomes a minus when open. Pure CSS. */
.t-disclosure__tick{position:relative;inline-size:var(--icon-1);block-size:var(--icon-1);flex:0 0 auto;align-self:center;margin-block-start:var(--space-1)}
.t-disclosure__tick::before,.t-disclosure__tick::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:50%;background:var(--ink-body);transition:transform var(--dur-2) var(--ease-snap),opacity var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.t-disclosure__tick::before{inline-size:var(--hair);block-size:100%;transform:translate(-50%,-50%)}/* vertical */
.t-disclosure__tick::after{inline-size:100%;block-size:var(--hair);transform:translate(-50%,-50%)}/* horizontal */
.t-disclosure__head[aria-expanded="true"] .t-disclosure__tick::before{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.t-disclosure__head[aria-expanded="true"] .t-disclosure__tick::after{background:var(--accent)}/* single gold voltage marks the open state */
.t-disclosure__head:hover .t-disclosure__tick::before,.t-disclosure__head:hover .t-disclosure__tick::after{background:var(--ink-strong)}
.t-disclosure__head[aria-expanded="true"]:hover .t-disclosure__tick::after{background:var(--accent)}
/* region: collapsed via hidden attr (no animation flash). Body uses measure + body type. */
.t-disclosure__region{padding:0 var(--space-5) var(--space-5);color:var(--ink-body);font-family:var(--font-body);font-size:var(--text-2);line-height:1.6;max-inline-size:var(--measure)}
.t-disclosure__region[hidden]{display:none}
.t-disclosure__region>:first-child{margin-block-start:0}
.t-disclosure__region>:last-child{margin-block-end:0}
/* compact density modifier */
.t-disclosure--snug .t-disclosure__head{padding:var(--space-3) var(--space-4);font-size:var(--text-2)}
.t-disclosure--snug .t-disclosure__region{padding:0 var(--space-4) var(--space-4)}
@media (prefers-reduced-motion:reduce){.t-disclosure__tick::before,.t-disclosure__tick::after,.t-disclosure__head{transition:none}}

/* ===== disclosure / t-tabs ===== */
/* Tabs: ARIA tablist. Selected tab wears the gold underline tick (navlink idiom). */
.t-tabs{display:block}
.t-tabs__list{display:flex;gap:var(--space-5);align-items:stretch;border-block-end:var(--hair) solid var(--line-mute);overflow-x:auto;scrollbar-width:thin}
.t-tabs__tab{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;background:transparent;border:0;margin:0;padding:var(--space-3) var(--space-1);cursor:pointer;color:var(--ink-mute);font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.06em;text-transform:uppercase;line-height:1.2;transition:color var(--dur-1) var(--ease-out)}
/* underline tick: hairline now, gold + thicker when selected (reuses navlink underline idiom) */
.t-tabs__tab::after{content:"";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--hair));block-size:var(--hair);background:var(--line-mute);transform-origin:center;transition:background var(--dur-1) var(--ease-out),block-size var(--dur-1) var(--ease-out)}
.t-tabs__tab:hover{color:var(--ink-body)}
.t-tabs__tab:hover::after{background:var(--ink-mute)}
.t-tabs__tab:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.t-tabs__tab[aria-selected="true"]{color:var(--ink-strong)}
.t-tabs__tab[aria-selected="true"]::after{background:var(--accent);block-size:calc(var(--hair) * 2)}
.t-tabs__tab[disabled]{color:var(--ink-mute);opacity:.5;cursor:not-allowed}
.t-tabs__tab[disabled]::after{background:transparent}
/* panels */
.t-tabs__panel{padding-block-start:var(--space-5);color:var(--ink-body);font-family:var(--font-body);font-size:var(--text-2);line-height:1.6;max-inline-size:var(--measure)}
.t-tabs__panel[hidden]{display:none}
.t-tabs__panel:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.t-tabs__panel>:first-child{margin-block-start:0}
/* SEGMENTED variant: tabs inside one hairline-framed bar, dividers between, no underline tick */
.t-tabs--segmented .t-tabs__list{gap:0;border:var(--hair) solid var(--line);border-radius:var(--radius-1);overflow:clip;background:var(--control-surface)}
.t-tabs--segmented .t-tabs__tab{flex:1 1 0;justify-content:center;text-align:center;padding:var(--space-2) var(--space-4);border-inline-start:var(--hair) solid var(--line-mute)}
.t-tabs--segmented .t-tabs__tab:first-child{border-inline-start:0}
.t-tabs--segmented .t-tabs__tab::after{display:none}
.t-tabs--segmented .t-tabs__tab[aria-selected="true"]{background:var(--control-fill);color:var(--on-accent)}
.t-tabs--segmented .t-tabs__tab:hover:not([aria-selected="true"]):not([disabled]){background:var(--surface-raised);color:var(--ink-strong)}
.t-tabs--segmented .t-tabs__tab:focus-visible{outline-offset:calc(-1 * var(--focus-offset))}
@media (prefers-reduced-motion:reduce){.t-tabs__tab,.t-tabs__tab::after{transition:none}}

/* ===== overlay-pop / t-tooltip ===== */
/* TOOLTIP. dotted-underline trigger + plate bubble */
.t-tooltip{position:relative;display:inline-block}
.t-tooltip__trigger{
  font:inherit;color:inherit;cursor:help;
  /* dotted underline = "there is more here" voltage, drawn in line ink not accent */
  text-decoration:underline dotted var(--line-strong);
  text-underline-offset:.18em;text-decoration-thickness:1px;
  border-radius:var(--radius-0);
}
/* button-as-trigger reset (when trigger is a <button>) */
.t-tooltip__trigger:where(button){background:none;border:0;padding:0}
.t-tooltip__trigger:focus-visible{
  outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-offset);
}
.t-tooltip__bubble{
  /* plate framing supplied by .t-plate on the same element */
  position:absolute;left:50%;bottom:calc(100% + var(--space-2));
  transform:translateX(-50%);
  z-index:var(--z-flyout);
  min-width:max-content;max-width:min(20rem,80vw);
  padding:var(--space-2) var(--space-3);
  background:var(--surface);color:var(--ink-body);
  font-family:var(--font-mono);font-size:var(--text-0);line-height:1.45;
  letter-spacing:.01em;
  /* hidden by default; revealed by [data-open] for both hover + focus */
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-1) var(--ease-out),visibility var(--dur-1) var(--ease-out);
  pointer-events:none;
}
/* hover + focus-within both open it; data-open lets JS force it for touch/long-press if wired */
.t-tooltip:hover .t-tooltip__bubble,
.t-tooltip:focus-within .t-tooltip__bubble,
.t-tooltip__bubble[data-open]{opacity:1;visibility:visible}
/* registration tick: tiny pointer hairline anchoring bubble to trigger */
.t-tooltip__bubble::after{
  content:"";position:absolute;top:100%;left:50%;
  width:1px;height:var(--space-2);
  transform:translateX(-50%);background:var(--line-strong);
}
@media (prefers-reduced-motion:reduce){
  .t-tooltip__bubble{transition:none}
}

/* ===== t-term · inline glossary ===== */
/* a defined word: gold dotted underline, plain-language definition on hover / focus / tap.
   use for any technical term, especially ours (TQ4, bf16, cosine similarity). */
.t-term{position:relative;display:inline-block}
.t-term__word{font:inherit;color:inherit;cursor:help;background:none;border:0;padding:0;
  text-decoration:underline dotted var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
.t-term__word:hover{color:var(--accent)}
.t-term__word:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:2px;border-radius:var(--radius-0)}
.t-term__def{position:absolute;left:50%;bottom:calc(100% + var(--space-2));
  /* --term-shift: viewport-edge clamp, set by ToradTerm in torad-ui.js; the ::after tick compensates to stay on the word */
  transform:translateX(calc(-50% + var(--term-shift,0px)));
  z-index:var(--z-flyout);inline-size:max-content;max-inline-size:min(24rem,82vw);
  padding:var(--space-3) var(--space-4);background:var(--surface);border:var(--hair) solid var(--line-strong);
  border-radius:var(--radius-1);color:var(--ink-body);font-family:var(--font-body);font-size:var(--text-3);
  line-height:1.55;letter-spacing:0;text-align:left;text-transform:none;
  opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease-out),visibility var(--dur-1) var(--ease-out);
  transition-delay:150ms; /* hover-intent grace: crossing the gap between word and bubble must not close it */
  pointer-events:none}
.t-term:hover .t-term__def,.t-term:focus-within .t-term__def,.t-term__def[data-open]{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.t-term__def strong{color:var(--ink-strong);font-weight:600}
.t-term__def::after{content:"";position:absolute;top:100%;left:calc(50% - var(--term-shift,0px));inline-size:1px;block-size:var(--space-2);transform:translateX(-50%);background:var(--line-strong)}
/* near the right edge, pin the bubble to the right so it never clips off-screen */
.t-term--end .t-term__def{left:auto;right:0;transform:none}
.t-term--end .t-term__def::after{left:auto;right:1.2em}
@media (prefers-reduced-motion:reduce){.t-term__def{transition:none}}

/* ===== overlay-pop / t-popover ===== */
/* POPOVER. anchored plate panel, Esc / outside-click dismiss */
.t-popover{position:relative;display:inline-block}
.t-popover__panel{
  position:absolute;left:0;top:calc(100% + var(--space-2));
  z-index:var(--z-flyout);
  min-width:16rem;max-width:min(24rem,90vw);
  padding:var(--space-4);
  background:var(--surface);color:var(--ink-body);
  /* .t-plate supplies hairline frame + corner ticks; no shadow */
}
.t-popover__panel[hidden]{display:none}
.t-popover__panel{
  opacity:0;transform:translateY(calc(-1 * var(--space-1)));
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.t-popover.is-open .t-popover__panel{opacity:1;transform:none}
/* serial/figure label inside panel reads as patent-drawing caption */
.t-popover__head{
  font-family:var(--font-mono);font-size:var(--text-0);
  color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 var(--space-2);
}
.t-popover__body{font-family:var(--font-body);font-size:var(--text-1);line-height:1.5;color:var(--ink-body)}
.t-popover__body > * + *{margin-top:var(--space-2)}
/* anchor-right modifier for triggers near the viewport edge */
.t-popover--end .t-popover__panel{left:auto;right:0}
@media (prefers-reduced-motion:reduce){
  .t-popover__panel{transition:none;transform:none}
}

/* ===== overlay-pop / t-menu ===== */
/* MENU / DROPDOWN. role=menu plate list, roving focus via arrow keys */
.t-menu{position:relative;display:inline-block}
.t-menu__list{
  position:absolute;left:0;top:calc(100% + var(--space-2));
  z-index:var(--z-dropdown);
  min-width:12rem;max-width:min(20rem,90vw);
  padding:var(--space-1);
  background:var(--surface);color:var(--ink-body);
  /* .t-plate frames the list; no shadow */
}
.t-menu__list[hidden]{display:none}
.t-menu__list{
  opacity:0;transform:translateY(calc(-1 * var(--space-1)));
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.t-menu.is-open .t-menu__list{opacity:1;transform:none}
.t-menu--end .t-menu__list{left:auto;right:0}
.t-menu__item{
  display:flex;align-items:center;gap:var(--space-2);width:100%;
  padding:var(--space-2) var(--space-3);
  font-family:var(--font-body);font-size:var(--text-1);line-height:1.3;
  text-align:left;color:var(--ink-body);
  background:none;border:0;border-radius:var(--radius-0);
  cursor:pointer;text-decoration:none;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.t-menu__item:hover{background:var(--surface-sunk);color:var(--ink-strong)}
/* roving tabindex: only the focused item is reachable; show focus clearly */
.t-menu__item:focus-visible{
  outline:var(--focus-width) solid var(--focus);
  outline-offset:calc(-1 * var(--focus-width));
  background:var(--surface-sunk);color:var(--ink-strong);
}
.t-menu__item:active{background:var(--surface-sunk)}
.t-menu__item[disabled],.t-menu__item[aria-disabled="true"]{
  color:var(--ink-mute);cursor:not-allowed;background:none;
}
/* leading data-ink dot marks status items (measurement ink, not gold) */
.t-menu__item .t-dot{flex:0 0 auto}
.t-menu__sep{height:var(--hair);margin:var(--space-1) 0;background:var(--line-mute);border:0}
.t-menu__label{
  display:block;padding:var(--space-1) var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-0);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
}
@media (prefers-reduced-motion:reduce){
  .t-menu__list{transition:none;transform:none}
}

/* ===== dialog / t-dialog ===== */
/* Dialog: scrim + plated panel. Color only from semantic tokens. */
.t-dialog{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;padding:var(--space-4);
  /* scrim: translucent ink over transparent, themes via the token */
  background:color-mix(in oklab, var(--ink-strong) 56%, transparent);
  opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-out),visibility var(--dur-2) var(--ease-out);}
.t-dialog[data-open="true"]{opacity:1;visibility:visible;}

/* Panel: surface-raised, plated frame supplied by .t-plate in markup */
.t-dialog__panel{position:relative;z-index:var(--z-modal);width:min(var(--measure),100%);max-height:calc(100dvh - var(--space-8));
  display:flex;flex-direction:column;background:var(--surface-raised);color:var(--ink-body);
  border-radius:var(--radius-1);overflow:hidden;
  transform:translateY(var(--space-2)) scale(.985);opacity:0;
  transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);}
.t-dialog[data-open="true"] .t-dialog__panel{transform:none;opacity:1;}

.t-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) var(--space-5) var(--space-3);}
.t-dialog__serial{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}
.t-dialog__title{margin:var(--space-1) 0 0;font-family:var(--font-display);font-size:var(--text-5);line-height:1.1;color:var(--ink-strong);}
.t-dialog__body{padding:0 var(--space-5) var(--space-5);overflow-y:auto;font-family:var(--font-body);font-size:var(--text-2);line-height:1.55;color:var(--ink-body);max-width:var(--measure);}
.t-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-top:var(--hair) solid var(--line-mute);background:var(--surface);}

/* Close affordance: hairline box, ink only, gold focus ring */
.t-dialog__close{display:grid;place-items:center;width:var(--icon-3);height:var(--icon-3);flex:0 0 auto;
  background:transparent;color:var(--ink-mute);border:var(--hair) solid var(--line);border-radius:var(--radius-0);
  cursor:pointer;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);}
.t-dialog__close:hover{color:var(--ink-strong);border-color:var(--line-strong);}
.t-dialog__close:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);}

@media (prefers-reduced-motion: reduce){
  .t-dialog,.t-dialog__panel{transition-duration:1ms;}
  .t-dialog__panel{transform:none;}
}

/* ===== dialog / t-dialog--confirm ===== */
/* Confirm variant: centered, status-led. Inherits .t-dialog base. */
.t-dialog--confirm .t-dialog__panel{width:min(34rem,100%);}
.t-dialog--confirm .t-dialog__head{flex-direction:column;align-items:flex-start;padding-bottom:var(--space-2);}
.t-dialog--confirm .t-dialog__body{font-size:var(--text-2);color:var(--ink-body);}

/* status row: data-ink dot + mono label (text carries the meaning, not color alone) */
.t-dialog__status{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}
.t-dialog__status::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--data-amber);flex:0 0 auto;}
.t-dialog--confirm[data-tone="danger"] .t-dialog__status::before{background:var(--data-neg);}
.t-dialog--confirm[data-tone="danger"] .t-dialog__status{color:var(--data-neg);}

/* danger confirm button: filled with data-neg, on-accent text for contrast */
.t-dialog__confirm-danger{background:var(--data-neg);color:var(--on-accent);border:var(--hair) solid var(--data-neg);
  border-radius:var(--radius-0);padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-1);
  cursor:pointer;transition:filter var(--dur-1) var(--ease-out);}
.t-dialog__confirm-danger:hover{opacity:.9;}
.t-dialog__confirm-danger:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);}

@media (prefers-reduced-motion: reduce){.t-dialog__confirm-danger{transition:none;}}

/* ===== alerts / t-alert ===== */
/* t-alert: left data-ink rule + stroke icon. No fill beyond the neutral surface step, no shadow, no glow. */
.t-alert{
  display:grid;
  grid-template-columns:var(--icon-2) 1fr;
  column-gap:var(--space-3);
  row-gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  padding-left:calc(var(--space-4) - 2px);
  /* left rule is the only color edge; surface stays hairline-quiet */
  border-left:2px solid var(--data-info);
  background:var(--surface-raised);
  color:var(--ink-body);
  font-family:var(--font-body);
  font-size:var(--text-2);
  line-height:1.5;
  border-radius:0 var(--radius-1) var(--radius-1) 0;
}
.t-alert__icon{
  grid-row:1;grid-column:1;
  width:var(--icon-2);height:var(--icon-2);
  color:var(--data-info);
}
.t-alert__icon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.t-alert__title{
  grid-row:1;grid-column:2;
  align-self:center;
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--text-1);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-strong);
}
.t-alert__body{grid-row:2;grid-column:2;margin:0;max-width:var(--measure);}
.t-alert__body :where(p):first-child{margin-top:0;}
.t-alert__body :where(p):last-child{margin-bottom:0;}
.t-alert__body a{color:var(--accent);text-decoration:underline;text-underline-offset:.15em;border-radius:var(--radius-0);}
.t-alert__body a:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);}
/* title-only: collapse the body row */
.t-alert:not(:has(.t-alert__body)){grid-template-rows:auto;}
/* Intents: swap the single data ink on rule + icon. Title/body stay neutral. */
.t-alert--note{border-left-color:var(--data-info);}
.t-alert--note .t-alert__icon{color:var(--data-info);}
.t-alert--caution{border-left-color:var(--data-amber);}
.t-alert--caution .t-alert__icon{color:var(--data-amber);}
.t-alert--danger{border-left-color:var(--data-neg);}
.t-alert--danger .t-alert__icon{color:var(--data-neg);}
.t-alert--success{border-left-color:var(--data-pos);}
.t-alert--success .t-alert__icon{color:var(--data-pos);}
/* static by design; explicit no-op guard for the contract */
@media (prefers-reduced-motion:reduce){.t-alert,.t-alert__icon{transition:none;animation:none;}}

/* ===== alerts / t-validation-summary ===== */
/* t-validation-summary: errors batched, role=alert, links focus their field. */
.t-validation-summary{
  display:grid;
  grid-template-columns:var(--icon-2) 1fr;
  column-gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  padding-left:calc(var(--space-4) - 2px);
  border-left:2px solid var(--data-neg);
  background:var(--surface-raised);
  color:var(--ink-body);
  font-family:var(--font-body);
  font-size:var(--text-2);
  line-height:1.5;
  border-radius:0 var(--radius-1) var(--radius-1) 0;
}
.t-validation-summary[hidden]{display:none;}
.t-validation-summary__icon{width:var(--icon-2);height:var(--icon-2);color:var(--data-neg);}
.t-validation-summary__icon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.t-validation-summary__head{
  margin:0 0 var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--text-1);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-strong);
}
.t-validation-summary__list{margin:0;padding-left:var(--space-4);list-style:decimal;}
.t-validation-summary__list li{margin:0 0 var(--space-1);}
.t-validation-summary__list li:last-child{margin-bottom:0;}
.t-validation-summary__list a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.15em;
  border-radius:var(--radius-0);
}
.t-validation-summary__list a:focus-visible{
  outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-offset);
}
.t-validation-summary:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);}
@media (prefers-reduced-motion:reduce){.t-validation-summary{transition:none;animation:none;}}

/* ===== transient / t-toast ===== */
/* Stack container - fixed, top-right, hairline-gapped, above modal layer */
.t-toast-stack{position:fixed;top:var(--space-5);right:var(--space-5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-3);width:min(360px,calc(100vw - var(--space-8)));pointer-events:none}
.t-toast-stack>*{pointer-events:auto}

/* Toast - paper plate, hairline frame, no shadow. Depth from --surface-raised + --line. */
.t-toast{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-raised);border:var(--hair) solid var(--line);border-radius:var(--radius-1);font-family:var(--font-body);color:var(--ink-body);overflow:hidden}
/* Registration ticks - engineering frame, not a colored accent */
.t-toast::before,.t-toast::after{content:"";position:absolute;width:6px;height:6px;border:var(--hair) solid var(--tick);pointer-events:none}
.t-toast::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.t-toast::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.t-toast__icon{margin-top:.15em}
.t-toast__icon .t-dot{display:block}
.t-toast__body{min-width:0}
.t-toast__title{font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-strong);margin:0 0 var(--space-1)}
.t-toast__msg{font-size:var(--text-2);line-height:1.4;margin:0;overflow-wrap:break-word}

.t-toast__close{flex:none;display:grid;place-items:center;width:var(--icon-2);height:var(--icon-2);padding:0;background:none;border:0;border-radius:var(--radius-0);color:var(--ink-mute);cursor:pointer;font:inherit;line-height:1;transition:color var(--dur-1) var(--ease-out)}
.t-toast__close:hover{color:var(--ink-strong)}
.t-toast__close:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}

/* Status inks are DATA inks (measurement/status only), surfaced through the dot + title - frame stays neutral */
.t-toast--info .t-toast__title{color:var(--data-info)}
.t-toast--pos .t-toast__title{color:var(--data-pos)}
.t-toast--neg .t-toast__title{color:var(--data-neg)}

/* Enter */
@keyframes t-toast-in{from{opacity:0;transform:translateY(calc(var(--space-2) * -1))}to{opacity:1;transform:none}}
/* Auto-dismiss progress hairline - drives the CSS-only timer (animationend -> JS removes node) */
@keyframes t-toast-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.t-toast{animation:t-toast-in var(--dur-2) var(--ease-out)}
.t-toast__life{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);animation:t-toast-life var(--toast-life,6s) linear forwards}
/* Hover/focus pauses the life animation - gives users reading time */
.t-toast:hover .t-toast__life,.t-toast:focus-within .t-toast__life{animation-play-state:paused}
/* Leave */
@keyframes t-toast-out{to{opacity:0;transform:translateY(calc(var(--space-2) * -1));height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}}
.t-toast[data-leaving]{animation:t-toast-out var(--dur-2) var(--ease-in-out) forwards;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .t-toast{animation:none}
  /* Keep the auto-dismiss timer (structural, not decorative) but make it a non-moving countdown */
  .t-toast__life{transition:none;animation:t-toast-life var(--toast-life,6s) linear forwards}
  .t-toast[data-leaving]{animation:none;opacity:0}
}

/* ===== transient / t-spinner ===== */
.t-spinner{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);vertical-align:middle}
.t-spinner__mark{flex:none;width:var(--icon-2);height:var(--icon-2);border:2px solid var(--line-mute);border-top-color:var(--accent);border-radius:50%;animation:t-spin var(--dur-3,.8s) linear infinite}
.t-spinner--s .t-spinner__mark{width:var(--icon-1);height:var(--icon-1);border-width:var(--hair)}
@keyframes t-spin{to{transform:rotate(1turn)}}
/* Static fallback glyph shown only when motion is reduced */
.t-spinner__static{display:none}
@media (prefers-reduced-motion:reduce){
  .t-spinner__mark{display:none}
  .t-spinner__static{display:inline;color:var(--accent)}
}

/* ===== transient / t-progress ===== */
.t-progress{display:grid;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.04em;color:var(--ink-mute)}
.t-progress__head{display:flex;justify-content:space-between;align-items:baseline;text-transform:uppercase}
.t-progress__val{color:var(--ink-strong);font-variant-numeric:tabular-nums}
.t-progress__track{position:relative;height:6px;border-radius:var(--radius-0);background:var(--surface-sunk);border:var(--hair) solid var(--line-mute);overflow:hidden}
.t-progress__fill{height:100%;width:var(--t-progress,0%);background:var(--accent);border-radius:inherit;transition:width var(--dur-3) var(--ease-out)}
/* Indeterminate: a fixed-width voltage segment sweeping the channel */
.t-progress--indeterminate .t-progress__fill{width:35%;animation:t-progress-sweep 1.2s var(--ease-in-out) infinite}
@keyframes t-progress-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
  .t-progress__fill{transition:none}
  /* Indeterminate cannot honestly show a value - render a calm static fill, no sweep, not gold */
  .t-progress--indeterminate .t-progress__fill{animation:none;width:100%;background:var(--line-strong)}
}

/* ===== page-states / t-skeleton ===== */
/* t-skeleton :: loading placeholder. shimmer = surface-sunk -> surface-raised sweep, semantic tokens only */
.t-skeleton{display:flex;flex-direction:column;gap:var(--space-3)}
.t-skel{position:relative;overflow:hidden;border-radius:var(--radius-1);background:var(--surface-sunk);background-image:linear-gradient(90deg,transparent 0,var(--surface-raised) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;background-position:-150% 0;animation:t-skel-sweep var(--dur-3) var(--ease-in-out) infinite}
.t-skel--line{height:var(--text-2)}
.t-skel--head{height:var(--text-5);width:60%}
.t-skel--label{height:var(--text-0);width:30%;border-radius:var(--radius-0)}
.t-skel--block{height:8rem}
.t-skel--media{aspect-ratio:16/9;border-radius:var(--radius-1)}
.t-skel--w90{width:90%}.t-skel--w75{width:75%}.t-skel--w50{width:50%}
.t-skeleton--lines .t-skel:last-child{width:55%}
@keyframes t-skel-sweep{from{background-position:-150% 0}to{background-position:250% 0}}
@media (prefers-reduced-motion:reduce){
  .t-skel{animation:none;background-image:none;background:var(--surface-raised)}
}

/* ===== page-states / t-empty ===== */
/* t-empty :: empty / no-results state. composes .t-plate frame, semantic tokens only */
.t-empty{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:start;padding:var(--space-7) var(--space-6);max-width:var(--measure)}
.t-empty__mark{position:relative;display:grid;place-items:center;inline-size:var(--space-9);block-size:var(--space-9);color:var(--ink-mute);border-radius:var(--radius-1);background:var(--surface-sunk)}
/* corner registration ticks via hairlines + --tick */
.t-empty__mark::before,.t-empty__mark::after{content:"";position:absolute;inline-size:var(--space-2);block-size:var(--space-2);border:var(--hair) solid var(--tick)}
.t-empty__mark::before{inset-block-start:calc(var(--space-1)*-1);inset-inline-start:calc(var(--space-1)*-1);border-inline-end:0;border-block-end:0}
.t-empty__mark::after{inset-block-end:calc(var(--space-1)*-1);inset-inline-end:calc(var(--space-1)*-1);border-inline-start:0;border-block-start:0}
.t-empty__mark .t-icon,.t-empty__mark svg{inline-size:var(--icon-2);block-size:var(--icon-2)}
.t-empty__body{display:flex;flex-direction:column;gap:var(--space-3)}
.t-empty__kicker{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.t-empty__title{font-family:var(--font-display);font-size:var(--text-5);line-height:1.1;color:var(--ink-strong);margin:0}
.t-empty__text{font-family:var(--font-body);font-size:var(--text-2);color:var(--ink-body);margin:0}
.t-empty__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-2)}
@container (min-width:26rem){.t-empty{grid-template-columns:auto 1fr;gap:var(--space-4) var(--space-5)}}

/* ===== page-states / t-error-page ===== */
/* t-error-page :: 404/500/offline terminal pattern. semantic + data tokens only */
.t-error-page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);max-width:var(--container);margin-inline:auto;padding:var(--space-9) var(--space-6);min-block-size:60vh;align-content:center}
.t-error-page__code{font-family:var(--font-mono);font-size:var(--text-8);line-height:1;letter-spacing:-.02em;color:var(--ink-mute)}
.t-error-page__code [data-error-status]{color:var(--ink-strong)}
.t-error-page__head{font-family:var(--font-display);font-size:var(--text-7);line-height:1.05;color:var(--ink-strong);margin:0;max-width:var(--measure)}
.t-error-page__meta{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-0);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute)}
.t-error-page__path{display:block;font-family:var(--font-mono);font-size:var(--text-1);text-transform:none;letter-spacing:0;color:var(--ink-body);background:var(--surface-sunk);border-radius:var(--radius-0);padding:var(--space-1) var(--space-2);overflow-wrap:anywhere}
.t-error-page__note{font-family:var(--font-body);font-size:var(--text-2);color:var(--ink-body);margin:0;max-width:var(--measure)}
.t-error-page__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-block-start:var(--space-2)}
.t-error-page__actions .t-search{flex:1 1 16rem;min-inline-size:12rem}
/* status row: DATA ink dot, paired with text, never a border-color card */
.t-error-page__status{display:inline-flex;align-items:center;gap:var(--space-2)}
.t-error-page__status::before{content:"";inline-size:var(--space-2);block-size:var(--space-2);border-radius:50%;background:var(--data-info)}
.t-error-page[data-error="offline"] .t-error-page__status::before{background:var(--data-amber)}
.t-error-page[data-error="500"] .t-error-page__status::before{background:var(--data-neg)}

/* ===== table / t-table ===== */
/* scroll wrap = the responsive frame; caption is the sheet label */
.t-table-wrap{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.t-table-wrap:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.t-table-wrap .t-table{min-width:560px} /* the wrap scrolls; the ledger never crushes to one word a line */
.t-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:var(--text-2);color:var(--ink-body);background:var(--surface)}
.t-table caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:0 0 var(--space-3)}
.t-table thead th{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-mute);text-align:left;padding:var(--space-2) var(--space-3);border-bottom:var(--hair) solid var(--line-strong);background:var(--surface);white-space:nowrap}
.t-table tbody td{padding:var(--space-2) var(--space-3);border-bottom:var(--hair) solid var(--line-mute);vertical-align:top}
.t-table tbody tr:last-child td{border-bottom:0}
/* zebra: faint sunk wash, hairlines still read */
.t-table--zebra tbody tr:nth-child(even) td{background:color-mix(in oklab,var(--surface-sunk) 55%,var(--surface))}
/* numeric columns: mono, right, tabular figures for ledger alignment */
.t-table [data-num],.t-table th[data-num]{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* sticky raised header */
.t-table--sticky thead th{position:sticky;top:0;z-index:var(--z-raised);background:var(--surface-raised);border-bottom:var(--hair) solid var(--line-strong)}
.t-table--sticky thead th[data-num]{font-family:var(--font-mono)}
/* hover row read-aid (no color, just sunk step) */
.t-table tbody tr:hover td{background:var(--surface-sunk)}
.t-table--zebra tbody tr:hover td{background:var(--surface-sunk)}
/* compact variant */
.t-table--snug thead th,.t-table--snug tbody td{padding:var(--space-1) var(--space-2)}
/* row-header identifier cell */
.t-table th[scope=row]{font-weight:600;color:var(--ink-strong)}
@media (prefers-reduced-motion:reduce){.t-table tbody tr{transition:none}}

/* ===== table / t-compare ===== */
/* shares the scroll wrap pattern; built as a semantic table */
.t-compare-wrap{position:relative;overflow-x:auto}
.t-compare-wrap:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.t-compare{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:var(--text-2);color:var(--ink-body);background:var(--surface)}
.t-compare caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:0 0 var(--space-3)}
.t-compare thead th{font-family:var(--font-mono);font-size:var(--text-1);font-weight:600;color:var(--ink-strong);text-align:center;padding:var(--space-3) var(--space-3) var(--space-2);border-bottom:var(--hair) solid var(--line-strong);position:relative;white-space:nowrap}
.t-compare thead th:first-child{text-align:left;color:var(--ink-mute);font-weight:500}
/* feature label cells */
.t-compare tbody th[scope=row]{text-align:left;font-weight:500;color:var(--ink-strong);padding:var(--space-2) var(--space-3);border-bottom:var(--hair) solid var(--line-mute)}
.t-compare tbody td{text-align:center;padding:var(--space-2) var(--space-3);border-bottom:var(--hair) solid var(--line-mute)}
.t-compare tbody tr:last-child th,.t-compare tbody tr:last-child td{border-bottom:0}
/* the marks: sized by icon scale, inks from data tokens only */
.t-compare__mark{display:inline-flex;width:var(--icon-1);height:var(--icon-1);vertical-align:middle}
.t-compare__mark svg{width:100%;height:100%;display:block}
.t-compare__mark--yes{color:var(--data-pos)}
.t-compare__mark--no{color:var(--data-neg)}
/* emphasised column: gold tick on top of the header cell + faint raised wash down the column, NO border */
.t-compare [data-emph]{background:var(--surface-raised)}
.t-compare thead th[data-emph]{color:var(--ink-strong)}
.t-compare thead th[data-emph]::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--space-6);height:2px;background:var(--accent);border-radius:var(--radius-0)}
/* partial / coming-soon cell text */
.t-compare__na{font-family:var(--font-mono);font-size:var(--text-0);color:var(--ink-mute)}
@media (prefers-reduced-motion:reduce){.t-compare *{transition:none}}

/* ===== recipes-proof / t-ladder ===== */
/* t-ladder: cosine verdict ladder. Verdict word leads, score is the receipt, baseline at 1.00. */
.t-ladder{
  display:grid;
  gap:var(--space-3);
  margin-block:var(--space-6);
  font-family:var(--font-body);
}
.t-ladder__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-3);
  padding-bottom:var(--space-2);
  border-bottom:var(--hair) solid var(--line);
}
/* long unit strings crush the title beside them on phones */
@media (max-width:520px){.t-ladder__head{flex-wrap:wrap}}
.t-ladder__title{
  font-family:var(--font-display);
  font-size:var(--text-4);
  color:var(--ink-strong);
  margin:0;
  letter-spacing:-0.01em;
}
.t-ladder__unit{
  font-family:var(--font-mono);
  font-size:var(--text-0);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
/* rung */
.t-ladder__rung{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  column-gap:var(--space-5);
  row-gap:var(--space-1);
  padding-block:var(--space-4);
}
.t-ladder__rung + .t-ladder__rung{
  border-top:var(--hair) solid var(--line-mute);
}
.t-ladder__verdict{
  font-family:var(--font-display);
  font-size:var(--text-3);
  line-height:1.1;
  color:var(--ink-strong);
  grid-column:1;
}
/* verdict ink: meaning lives in the word, color reinforces it */
.t-ladder__rung--worse .t-ladder__verdict{color:var(--data-neg);}
.t-ladder__rung--down  .t-ladder__verdict{color:var(--data-amber);}
.t-ladder__rung--same  .t-ladder__verdict{color:var(--data-pos);}
.t-ladder__rung--better .t-ladder__verdict{color:var(--data-info);}
.t-ladder__label{
  grid-column:1;
  font-size:var(--text-1);
  color:var(--ink-body);
}
.t-ladder__score{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  font-family:var(--font-display);
  font-size:var(--text-7);
  letter-spacing:-0.02em;
  font-variant-numeric:lining-nums;
  color:var(--ink-strong);
  white-space:nowrap;
}
.t-ladder__note{
  grid-column:1;
  grid-row:2;
  font-family:var(--font-mono);
  font-size:var(--text-0);
  color:var(--ink-mute);
  text-align:left;
  white-space:normal;
  max-width:52ch;
}
/* fill: a measured bar against the 1.00 baseline, no fanfare */
.t-ladder__track{
  grid-column:1 / -1;
  grid-row:3;
  position:relative;
  height:var(--space-1);
  margin-top:var(--space-1);
  background:var(--surface-sunk);
  border:var(--hair) solid var(--line-mute);
  border-radius:var(--radius-0);
  overflow:hidden;
}
.t-ladder__fill{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:calc(var(--t-ladder-val, 0) * 100%);
  background:var(--ink-mute);
  transition:width 1.05s var(--ease-out) 0.15s;
}
/* grow the bar from zero to its value as the ladder scrolls into view */
.t-reveal .t-ladder__fill, .t-reveal--up .t-ladder__fill { width:0; }
.t-reveal.is-drawn .t-ladder__fill, .t-reveal--up.is-drawn .t-ladder__fill { width:calc(var(--t-ladder-val, 0) * 100%); }
.t-ladder__rung--worse .t-ladder__fill{background:var(--data-neg);}
.t-ladder__rung--down  .t-ladder__fill{background:var(--data-amber);}
.t-ladder__rung--same  .t-ladder__fill{background:var(--data-pos);}
.t-ladder__rung--better .t-ladder__fill{background:var(--data-info);}

/* ===== t-align · interactive bit-exact instrument =====
   step the quantization method, watch the shrunk trace converge onto the original.
   data inks carry the verdict; gold is the reference (the original). */
.t-align__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}
.t-align__title{font-family:var(--font-display);font-size:var(--text-5);line-height:1.1;color:var(--ink-strong);margin:0}
.t-align__read{font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}
.t-align__cos{font-family:var(--font-display);font-size:var(--text-7);letter-spacing:-.02em;color:var(--ink-strong);font-variant-numeric:lining-nums}
.t-align__viz{display:block;inline-size:100%;block-size:auto;background:var(--surface-sunk);border:var(--hair) solid var(--line-mute);border-radius:var(--radius-1)}
.t-align__ref{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.9}
.t-align__cmp{fill:none;stroke:var(--ink-mute);stroke-width:1.5;transition:stroke var(--dur-2) var(--ease-out)}
.t-align[data-verdict="worse"] .t-align__cmp{stroke:var(--data-neg)}
.t-align[data-verdict="down"]  .t-align__cmp{stroke:var(--data-amber)}
.t-align[data-verdict="same"]  .t-align__cmp{stroke:var(--data-pos)}
.t-align[data-verdict="worse"] .t-align__cos{color:var(--data-neg)}
.t-align[data-verdict="down"]  .t-align__cos{color:var(--data-amber)}
.t-align[data-verdict="same"]  .t-align__cos{color:var(--data-pos)}
.t-align__steps{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--space-4);border:var(--hair) solid var(--line-strong);border-radius:var(--radius-1);overflow:hidden}
.t-align__step{flex:1 1 0;min-inline-size:8rem;font-family:var(--font-mono);font-size:var(--text-1);letter-spacing:.04em;color:var(--ink-mute);background:transparent;border:0;border-inline-start:var(--hair) solid var(--line-strong);padding:var(--space-3) var(--space-4);cursor:pointer;text-align:center;transition:color var(--dur-1),background var(--dur-1)}
.t-align__step:first-child{border-inline-start:0}
.t-align__step:hover{color:var(--ink-body);background:var(--surface-raised)}
.t-align__step[aria-selected="true"]{color:var(--ink-strong);background:var(--surface-raised)}
.t-align__step[aria-selected="true"]::before{content:"";display:inline-block;inline-size:.42em;block-size:.42em;border-radius:50%;background:currentColor;margin-inline-end:.5em;vertical-align:middle}
.t-align__step:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:-2px}
.t-align__note{font-family:var(--font-mono);font-size:var(--text-1);color:var(--ink-mute);margin:var(--space-4) 0 0;min-block-size:2.6em}
.t-align__legend{display:flex;gap:var(--space-5);margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.t-align__key{display:inline-flex;align-items:center;gap:.5em}
.t-align__key::before{content:"";inline-size:1.4em;block-size:var(--hair);background:currentColor}
.t-align__key--ref{color:var(--accent)}
/* the 1.00 baseline: a hairline the bars are read against */
.t-ladder__baseline{
  position:relative;
  margin-top:var(--space-2);
  padding-top:var(--space-1);
  border-top:var(--hair) solid var(--line-strong);
  display:flex;
  justify-content:flex-end;
  font-family:var(--font-mono);
  font-size:var(--text-0);
  letter-spacing:0.04em;
  color:var(--ink-mute);
}
@media (prefers-reduced-motion: reduce){
  .t-ladder__fill{transition:none;}
}

/* ===== recipes-proof / t-timeline ===== */
/* t-timeline: dated chronology on a dashed rail. Vertical spine is the default;
   snake/boustrophedon is an opt-in horizontal variant (commented below). */
.t-timeline{
  --t-tl-rail: var(--space-4); /* gutter where the rail sits */
  list-style:none;
  margin:var(--space-6) 0;
  padding:0;
  position:relative;
  font-family:var(--font-body);
}
.t-timeline__item{
  position:relative;
  padding-inline-start:calc(var(--t-tl-rail) + var(--space-4));
  padding-block:var(--space-3);
}
/* the dashed rail: drawn once, behind the dots */
.t-timeline__item::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:var(--t-tl-rail);
  border-inline-start:var(--hair) dashed var(--line);
}
.t-timeline__item:first-child::before{inset-block-start:50%;}
.t-timeline__item:last-child::before{inset-block-end:50%;}
/* the dot, registered on the rail */
.t-timeline__item::after{
  content:"";
  position:absolute;
  inset-block-start:calc(var(--space-3) + 0.35em);
  inset-inline-start:var(--t-tl-rail);
  inline-size:var(--space-2);
  block-size:var(--space-2);
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--surface);
  border:var(--hair) solid var(--line-strong);
}
.t-timeline__date{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-0);
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:var(--space-1);
}
.t-timeline__label{
  display:block;
  font-size:var(--text-2);
  color:var(--ink-body);
  line-height:1.4;
}
.t-timeline__detail{
  display:block;
  margin-top:var(--space-1);
  font-size:var(--text-1);
  color:var(--ink-mute);
  max-inline-size:var(--measure-text); /* full-sentence details must not run ~150ch on wide shells */
}
/* key moments: heavier dot + ink, no second voltage (single gold accent stays the accent) */
.t-timeline__item--key::after{
  inline-size:var(--space-3);
  block-size:var(--space-3);
  background:var(--accent);
  border-color:var(--accent);
}
.t-timeline__item--key .t-timeline__label{
  font-family:var(--font-display);
  font-size:var(--text-3);
  color:var(--ink-strong);
  letter-spacing:-0.01em;
}
.t-timeline__item--key .t-timeline__date{color:var(--ink-body);}
/* status dot inheritance: pair with .t-dot--pos/neg/info inline if a moment
   reports a measurement, otherwise leave neutral. */
/* tone dots: a directional status (the lock tightening vs being pried open). data inks,
   not decoration. --lock = closing (neg), --open = prying open (pos), --tight = the rented drift. */
.t-timeline__item--lock::after  { background:var(--data-neg);   border-color:var(--data-neg); }
.t-timeline__item--open::after  { background:var(--data-pos);   border-color:var(--data-pos); }
.t-timeline__item--tight::after { background:var(--data-amber); border-color:var(--data-amber); }
/* a key moment keeps its larger dot but takes the tone colour */
.t-timeline__item--key.t-timeline__item--lock::after { background:var(--data-neg); border-color:var(--data-neg); }
.t-timeline__item--key.t-timeline__item--open::after { background:var(--data-pos); border-color:var(--data-pos); }

/* ===== t-snake · horizontal boustrophedon timeline, clickable nodes =====
   Authored as an <ol class="t-timeline" data-snake> (the vertical spine is the no-JS /
   narrow fallback). ToradSnake folds it into an S-shaped dotted path on wide screens and
   wires each node to a detail panel. Tone (open/tight/lock) colours the dots + segments. */
.t-snake__svg{display:block;inline-size:100%;block-size:auto;overflow:visible;margin-block:var(--space-4) var(--space-5)}
.t-snake__seg{fill:none;stroke-width:1.5;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.7}
.t-snake__seg--open{stroke:var(--data-pos)} .t-snake__seg--tight{stroke:var(--data-amber)} .t-snake__seg--lock{stroke:var(--data-neg)} .t-snake__seg--none{stroke:var(--line-strong)}
.t-snake__node{cursor:pointer}
.t-snake__node:focus-visible{outline:none}
.t-snake__hit{fill:transparent}
.t-snake__dot{stroke:var(--surface);stroke-width:2;transition:r var(--dur-1) var(--ease-out)}
.t-snake__dot--open{fill:var(--data-pos)} .t-snake__dot--tight{fill:var(--data-amber)} .t-snake__dot--lock{fill:var(--data-neg)} .t-snake__dot--none{fill:var(--ink-mute)}
.t-snake__node:hover .t-snake__dot{r:9}
.t-snake__node:focus-visible .t-snake__ring,.t-snake__node[aria-current="true"] .t-snake__ring{opacity:1}
.t-snake__ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;transition:opacity var(--dur-1)}
.t-snake__date{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;fill:var(--ink-mute);text-transform:uppercase}
.t-snake__node[aria-current="true"] .t-snake__date{fill:var(--ink-strong)}
/* the detail panel: shows the selected moment */
.t-snake__panel{margin-top:var(--space-4);min-block-size:7.5rem}
.t-snake__panel-date{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.t-snake__panel-label{font-family:var(--font-display);font-size:var(--text-5);line-height:1.1;color:var(--ink-strong);margin:var(--space-1) 0 var(--space-2)}
.t-snake__panel-detail{color:var(--ink-body);max-width:var(--measure)}
.t-snake__hint{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--space-3)}
/* when JS renders the snake, the authored vertical list is hidden but kept for screen readers */
.t-snake__src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.t-snake__dot,.t-snake__ring{transition:none}}

/* ===== commerce / t-price ===== */
/* t-price - tier/plan card. Composes .t-plate for the hairline frame.
   No number is ever shown. 'coming soon' stands in for price. */
.t-price{
  display:flex;flex-direction:column;
  padding:var(--space-6);
  background:var(--surface-raised);
  position:relative;
  border-radius:var(--radius-1);
}
/* gold recommended tick - single voltage, a hairline + tick at the sheet top,
   never a colored border on the whole card */
.t-price--rec{ background:var(--surface); }
.t-price--rec::before{
  content:"";position:absolute;left:var(--space-6);right:var(--space-6);top:0;
  height:var(--hair);background:var(--accent);
}
.t-price--rec::after{
  content:"";position:absolute;left:50%;top:0;width:var(--space-4);height:var(--hair);
  transform:translateX(-50%) translateY(calc(var(--space-1) * -1));
  /* registration tick rising off the gold rule */
  background:var(--accent);
}
.t-price__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-2);
}
.t-price__name{
  font-family:var(--font-display);font-size:var(--text-5);
  line-height:1.05;color:var(--ink-strong);
}
/* the recommended flag - mono label in gold, sits in the head */
.t-price__flag{
  font-family:var(--font-mono);font-size:var(--text-0);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.t-price__for{
  font-family:var(--font-body);font-size:var(--text-2);
  color:var(--ink-mute);margin-bottom:var(--space-5);
}
/* price slot - coming soon, never a number */
.t-price__cost{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-3) 0;
  margin-bottom:var(--space-5);
  border-top:var(--hair) solid var(--line-mute);
  border-bottom:var(--hair) solid var(--line-mute);
}
.t-price__soon{
  font-family:var(--font-display);font-size:var(--text-4);
  color:var(--ink-body);line-height:1;
}
.t-price__soonnote{
  font-family:var(--font-mono);font-size:var(--text-0);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
}
.t-price__list{
  list-style:none;margin:0 0 var(--space-6);padding:0;
  display:flex;flex-direction:column;gap:var(--space-3);
  flex:1 1 auto;
}
.t-price__item{
  display:grid;grid-template-columns:var(--icon-1) 1fr;gap:var(--space-3);
  align-items:start;
  font-family:var(--font-body);font-size:var(--text-2);color:var(--ink-body);
  line-height:1.4;
}
/* engineering check tick - drawn as a small data-pos mark, not an emoji */
.t-price__tick{
  width:var(--icon-1);height:var(--icon-1);
  margin-top:.15em;color:var(--data-pos);flex:0 0 auto;
}
.t-price__foot{ margin-top:auto; }
@media (prefers-reduced-motion:reduce){
  .t-price{transition:none;}
}

/* ===== commerce / t-badge ===== */
/* t-badge - status/count bubble. Mono, neutral chrome, data-ink dot.
   Distinct from .t-tag (which is presentational). Never uses --accent gold
   so the single voltage stays reserved. */
.t-badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-family:var(--font-mono);font-size:var(--text-0);
  line-height:1;letter-spacing:.04em;
  padding:.32em .55em;
  color:var(--ink-body);
  background:var(--surface-sunk);
  border:var(--hair) solid var(--line-mute);
  border-radius:var(--radius-0);
  white-space:nowrap;vertical-align:baseline;
}
/* numeric count variant - tabular, slightly tighter */
.t-badge--count{ font-variant-numeric:tabular-nums;letter-spacing:0; }
/* the data dot - color is the only status signal that needs a token */
.t-badge__dot{
  width:.5em;height:.5em;border-radius:50%;
  background:var(--ink-mute);flex:0 0 auto;
}
.t-badge--live   .t-badge__dot{ background:var(--data-pos); }
.t-badge--new    .t-badge__dot{ background:var(--data-info); }
.t-badge--coming .t-badge__dot{ background:var(--data-amber); }
/* label text echoes status verbally so dot color is never the sole signal */
.t-badge--live{   color:var(--ink-strong); }

/* ===== longform / t-prose ===== */
/* t-prose : longform body. Color via semantic tokens only. */
.t-prose{
  max-inline-size:var(--measure);
  color:var(--ink-body);
  font-family:var(--font-body);
  font-size:var(--text-3);
  line-height:1.65;
  counter-reset:t-fig;
  --t-prose-anchor-offset:calc(var(--space-9) + var(--space-2)); /* clears sticky bar */
}
/* vertical rhythm: lobotomized-owl flow */
.t-prose>*+*{margin-block-start:var(--space-5)}
.t-prose>*+:is(h2,h3,h4){margin-block-start:var(--space-8)}

.t-prose :is(h2,h3,h4){
  color:var(--ink-strong);
  font-family:var(--font-display);
  line-height:1.15;
  text-wrap:balance;
  scroll-margin-block-start:var(--t-prose-anchor-offset);
}
.t-prose h2{font-size:var(--text-6);letter-spacing:-0.01em}
.t-prose h3{font-size:var(--text-5)}
.t-prose h4{font-size:var(--text-4);font-family:var(--font-mono);font-weight:600;letter-spacing:0.01em}

.t-prose p{margin-block:0}
.t-prose strong{color:var(--ink-strong);font-weight:600}
.t-prose em{font-style:italic}

/* links inherit .t-link semantics inline */
.t-prose a:not([class]){
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:0.18em;
  text-decoration-thickness:1px;
  transition:text-decoration-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.t-prose a:not([class]):hover{color:var(--accent-bright);text-decoration-color:var(--accent)}
.t-prose a:not([class]):focus-visible{
  outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-0);
}

/* lists */
.t-prose :is(ul,ol){margin-block:0;padding-inline-start:var(--space-6)}
.t-prose li+li{margin-block-start:var(--space-2)}
.t-prose li::marker{color:var(--ink-mute)}
.t-prose ol{list-style:decimal}
.t-prose ol li::marker{font-family:var(--font-mono);font-size:0.9em}
.t-prose ul{list-style:none;padding-inline-start:var(--space-5)}
.t-prose ul>li{position:relative}
.t-prose ul>li::before{
  content:"";position:absolute;inline-size:var(--space-2);block-size:var(--hair);
  inset-inline-start:calc(-1 * var(--space-5));inset-block-start:0.7em;
  background:var(--accent); /* single gold voltage as the tick */
}

/* inline code (composes .t-code-inline visual language) */
.t-prose :not(pre)>code{
  font-family:var(--font-mono);font-size:0.875em;
  padding:0.1em 0.35em;border-radius:var(--radius-0);
  background:var(--surface-sunk);color:var(--ink-strong);
  border:var(--hair) solid var(--line-mute);
}

/* blockquote : hairline rule, no colored bar */
.t-prose blockquote{
  margin-inline:0;padding-inline-start:var(--space-5);
  border-inline-start:var(--hair) solid var(--line-strong);
  color:var(--ink-mute);font-style:italic;
}
.t-prose blockquote cite{
  display:block;margin-block-start:var(--space-2);
  font-family:var(--font-mono);font-style:normal;font-size:var(--text-1);
  color:var(--ink-mute);letter-spacing:0.02em;
}
.t-prose blockquote cite::before{content:"/ "}

.t-prose hr{
  border:0;block-size:var(--hair);background:var(--line);
  margin-block:var(--space-8);
}

/* opt-in drop-cap on first paragraph */
.t-prose--dropcap>p:first-of-type::first-letter{
  float:inline-start;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-9);line-height:0.8;
  padding-inline-end:var(--space-3);padding-block-start:0.05em;
  color:var(--accent); /* the one voltage */
}

@media (prefers-reduced-motion:reduce){
  .t-prose a:not([class]){transition:none}
}

/* ===== longform / t-figure ===== */
/* t-figure : numbered framed media. Counter shared with .t-prose. */
.t-figure{
  margin-block:var(--space-7);
}

.t-figure__frame{
  /* compose existing .t-plate for ticks+hairline; this only sizes/pads */
  padding:var(--space-3);
  background:var(--surface-raised);
  display:flex;
}
.t-figure__frame>:is(img,svg,picture,video){
  display:block;inline-size:100%;block-size:auto;
  border-radius:var(--radius-0);
}

.t-figure figcaption,
.t-figure__cap{
  margin-block-start:var(--space-3);
  display:flex;gap:var(--space-2);align-items:baseline;
  font-family:var(--font-body);font-size:var(--text-2);
  line-height:1.5;color:var(--ink-mute);
}
.t-figure__cap::before{
  /* numbered by ToradFigs (torad-ui.js) in document order. CSS counters cannot do
     this here: .t-frame is a query container, and container-type implies
     contain:style, which makes every frame its own counter scope ("Fig. 1"
     everywhere). No-JS clients see an unnumbered "Fig." label. */
  content:"Fig. " attr(data-fig);
  flex:none;
  font-family:var(--font-mono);font-size:var(--text-1);
  letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink-strong);
  padding-block-start:0.05em;
}
.t-figure__cap b,.t-figure__cap strong{color:var(--ink-body);font-weight:600}

/* wide variant breaks the --measure clamp inside prose */
.t-figure--wide{
  max-inline-size:none;
  margin-inline:calc(-1 * var(--space-6));
}

/* ===== longform / t-anchor-link ===== */
/* t-anchor-link : heading permalink. */
.t-anchor-link{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--icon-2);block-size:var(--icon-2);
  margin-inline-start:calc(-1 * (var(--icon-2) + var(--space-2)));
  margin-inline-end:var(--space-2);
  color:var(--ink-mute);text-decoration:none;
  font-family:var(--font-mono);font-size:var(--text-3);line-height:1;
  vertical-align:baseline;
  opacity:0;
  transition:opacity var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.t-anchor-link::before{content:"#"}

/* reveal: when the heading is hovered, or this link is focused */
:is(h2,h3,h4):hover>.t-anchor-link,
.t-anchor-link:hover,
.t-anchor-link:focus-visible{opacity:1}

.t-anchor-link:hover{color:var(--accent)}
.t-anchor-link:focus-visible{
  opacity:1;color:var(--accent);
  outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-0);
}
/* brief confirmation after copy (toggled by JS) */
.t-anchor-link[data-copied="true"]{color:var(--data-pos)}
.t-anchor-link[data-copied="true"]::before{content:"\2713"} /* check */

/* always visible for keyboard/touch where hover is unreliable */
@media (hover:none){.t-anchor-link{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .t-anchor-link{transition:none}
}

/* ===== process / t-steps ===== */
/* t-steps :: process sequence (Sheet 1..N). Color from semantic tokens only. */
.t-steps{--t-steps-node:var(--space-7);display:grid;gap:var(--space-5);margin-block:var(--gap-block);counter-reset:t-step;grid-template-columns:1fr;list-style:none;padding:0}
.t-steps__step{position:relative;display:grid;grid-template-columns:var(--t-steps-node) 1fr;column-gap:var(--space-4);align-items:start;counter-increment:t-step;padding-block:var(--space-1)}
/* vertical spine connector (narrow) */
.t-steps__step::before{content:"";position:absolute;left:calc(var(--t-steps-node)/2 - var(--hair)/2);top:var(--t-steps-node);bottom:calc(var(--space-5)*-1);width:var(--hair);background:var(--line-mute)}
.t-steps__step:last-child::before{display:none}
/* mono index node */
.t-steps__index{position:relative;z-index:var(--z-raised);inline-size:var(--t-steps-node);block-size:var(--t-steps-node);display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--text-1);font-weight:600;line-height:1;color:var(--ink-strong);background:var(--surface-raised);border:var(--hair) solid var(--line-strong);border-radius:var(--radius-2)}
.t-steps__index::after{content:counter(t-step,decimal-leading-zero)}
.t-steps__index[data-done="true"]{color:var(--data-pos);border-color:var(--data-pos)}
.t-steps__body{min-inline-size:0;padding-top:var(--space-1)}
.t-steps__sheet{display:block;font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--space-1)}
.t-steps__title{font-family:var(--font-display);font-size:var(--text-4);line-height:1.15;color:var(--ink-strong);margin:0 0 var(--space-2)}
.t-steps__text{font-family:var(--font-body);font-size:var(--text-2);line-height:1.5;color:var(--ink-body);max-inline-size:var(--measure);margin:0}
/* wide: horizontal flow, hairline-framed cells + corner tick connector.
   Keyed to the COMPONENT's own width (@container), not the viewport, so it
   only goes horizontal when it actually has room. Needs a .t-frame ancestor. */
@container (min-width:40rem){
  .t-steps{grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;gap:0}
  /* align-content:start: stretched equal-height cells must not split surplus between the rows (ragged baselines) */
  .t-steps__step{grid-template-columns:1fr;row-gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-5);border:var(--hair) solid var(--line);border-left-width:0;align-content:start}
  .t-steps__step:first-child{border-left-width:var(--hair)}
  .t-steps__step::before{left:auto;right:calc(var(--space-3)*-1);top:calc(var(--space-4) + var(--t-steps-node)/2 - var(--hair)/2);bottom:auto;inline-size:var(--space-3);block-size:var(--hair);background:var(--tick)}
  .t-steps__step:last-child::before{display:none}
  .t-steps__index{margin-bottom:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){.t-steps *{transition:none;animation:none}}

/* ===== process / t-spec-sheet ===== */
/* t-spec-sheet :: tabular key/value/status block. Color from semantic tokens only. */
.t-spec-sheet{display:grid;gap:0;margin-block:var(--gap-block);border:var(--hair) solid var(--line);background:var(--surface-sunk);border-radius:var(--radius-1);max-inline-size:min(100%,50rem)}
.t-spec-sheet__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--hair) solid var(--line)}
.t-spec-sheet__title{font-family:var(--font-display);font-size:var(--text-3);line-height:1.1;color:var(--ink-strong);margin:0}
.t-spec-sheet__sheet{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
/* narrow (default): key label on top, then a leading status light + the value.
   the dot always sits right before the value, never stranded at the far edge */
.t-spec-sheet__row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-2);align-items:baseline;padding:var(--space-4) var(--space-4)}
.t-spec-sheet__row + .t-spec-sheet__row{border-top:var(--hair) solid var(--line-mute)}
.t-spec-sheet__key{grid-column:1 / -1;grid-row:1;font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0}
.t-spec-sheet__status{grid-column:1;grid-row:2;inline-size:var(--space-2);block-size:var(--space-2);border-radius:50%;align-self:center;justify-self:start;background:var(--ink-mute)}
.t-spec-sheet__val{grid-column:2;grid-row:2;font-family:var(--font-body);font-size:var(--text-2);line-height:1.45;color:var(--ink-strong);margin:0}
.t-spec-sheet__val--data{font-family:var(--font-mono)}
.t-spec-sheet__status--pos{background:var(--data-pos)}
.t-spec-sheet__status--neg{background:var(--data-neg)}
.t-spec-sheet__status--info{background:var(--data-info)}
.t-spec-sheet__status--amber{background:var(--data-amber)}
/* wide (container >= 30rem): key | status-light | value on one tabular line */
@container (min-width:30rem){
  .t-spec-sheet__row{grid-template-columns:minmax(5rem,8rem) auto 1fr;column-gap:var(--space-3)}
  .t-spec-sheet__key{grid-column:1;grid-row:1}
  .t-spec-sheet__status{grid-column:2;grid-row:1;justify-self:center}
  .t-spec-sheet__val{grid-column:3;grid-row:1}
}

/* ===== recipes-page / t-person ===== */
/* t-person · bio plate. Frame via .t-plate on the avatar; no shadows, no colored borders. */
.t-person{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:start;padding:var(--space-5);background:var(--surface)}
.t-person__avatar{position:relative;inline-size:var(--space-12);block-size:var(--space-12);overflow:hidden;border-radius:var(--radius-1);background:var(--surface-sunk)}
.t-person__avatar img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* mono serial sits above the name like a sheet number */
.t-person__serial{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.t-person__name{font-family:var(--font-display);font-size:var(--text-5);line-height:1.05;color:var(--ink-strong);margin:var(--space-1) 0 0}
.t-person__role{font-family:var(--font-body);font-size:var(--text-2);color:var(--ink-body);margin:var(--space-1) 0 0}
.t-person__handle{font-family:var(--font-mono);font-size:var(--text-1);color:var(--ink-mute);margin-block-start:var(--space-2)}
.t-person__links{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-3);list-style:none;padding:0}
.t-person__link{font-family:var(--font-mono);font-size:var(--text-1);color:var(--accent);text-decoration:none;border-block-end:var(--hair) solid var(--line-mute);transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.t-person__link:hover{color:var(--accent-bright);border-block-end-color:var(--accent)}
.t-person__link:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--radius-0)}
@container (min-width:24rem){.t-person{grid-template-columns:auto 1fr;gap:var(--space-5)}}
@media (prefers-reduced-motion:reduce){.t-person__link{transition:none}}

/* ===== recipes-page / t-gallery ===== */
/* t-gallery · framed screenshot grid. Frame via .t-plate per tile; depth from hairlines plus surface, never shadow. */
.t-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-6);margin:0;padding:0;list-style:none}
.t-gallery__item{margin:0}
.t-gallery__fig{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
/* the focusable surface: a button wrapping the shot */
.t-gallery__frame{display:block;position:relative;inline-size:100%;padding:0;border:0;background:var(--surface-sunk);border-radius:var(--radius-1);cursor:pointer;overflow:hidden;transition:transform var(--dur-1) var(--ease-out)}
.t-gallery__frame img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover}
.t-gallery__frame:hover{transform:translateY(-2px)}
.t-gallery__frame:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.t-gallery__cap{font-family:var(--font-mono);font-size:var(--text-0);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.t-gallery__cap b{color:var(--ink-body);font-weight:inherit}
@media (prefers-reduced-motion:reduce){.t-gallery__frame{transition:none}.t-gallery__frame:hover{transform:none}}

/* ===== recipes-page / t-pagination ===== */
/* t-pagination · numbered index pager plus load-more. Current page via --accent plus aria-current, not color alone. */
.t-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding-block:var(--space-4);font-family:var(--font-mono);font-size:var(--text-1)}
.t-pagination__status{color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase;font-size:var(--text-0)}
.t-pagination__list{display:flex;flex-wrap:wrap;gap:var(--space-1);list-style:none;margin:0;padding:0}
.t-pagination__link{display:inline-grid;place-items:center;min-inline-size:var(--space-7);block-size:var(--space-7);padding-inline:var(--space-2);color:var(--ink-body);text-decoration:none;border:var(--hair) solid var(--line-mute);border-radius:var(--radius-1);background:var(--surface);transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.t-pagination__link:hover{color:var(--ink-strong);border-color:var(--line-strong)}
.t-pagination__link:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
/* current page: filled accent chip plus aria-current so it reads without color */
.t-pagination__link[aria-current="page"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.t-pagination__gap{color:var(--ink-mute);padding-inline:var(--space-1);align-self:center}
.t-pagination__more{margin-inline-start:auto;font-family:var(--font-mono);font-size:var(--text-1);color:var(--accent);background:none;border:var(--hair) solid var(--line-mute);border-radius:var(--radius-1);padding:var(--space-2) var(--space-4);cursor:pointer;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.t-pagination__more:hover{color:var(--accent-bright);border-color:var(--accent)}
.t-pagination__more:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.t-pagination__more[aria-busy="true"]{color:var(--ink-mute);cursor:progress}
.t-pagination__more:disabled{color:var(--ink-mute);border-color:var(--line-mute);cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.t-pagination__link,.t-pagination__more{transition:none}}

/* ── manifesto hero: the gradient-field canvas (ToradField) ── */
.t-fieldhero{position:relative;overflow:hidden;min-height:clamp(420px,62vh,600px);display:grid;place-items:center}
.t-fieldhero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.t-fieldhero>.t-shell{position:relative;z-index:1;width:100%}
/* gently dim the field behind the reading column so the title stays crisp (does not erase it) */
.t-fieldhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 46% 54% at 50% 50%,color-mix(in srgb,var(--surface) 62%,transparent) 0%,color-mix(in srgb,var(--surface) 22%,transparent) 52%,transparent 76%)}

/* ===================== SECTION ANATOMY · .t-sec (rebuild 2026-06) =====================
   Every section is the same five slots with one spacing contract: eyebrow (.t-sheet) ->
   claim (h2, <=24ch, balanced) -> lede (<=25 words, 56ch) -> ONE __body component ->
   __foot (facts + chips + method link). Rides the .t-shell--wide left-axis law. */
.t-sec > .t-sheet { margin: 0 0 var(--space-3); }
.t-sec > h2 { margin: 0 0 var(--space-4); max-inline-size: 24ch; text-wrap: balance; }
.t-sec > .t-lede { margin: 0; max-inline-size: var(--measure-narrow); }
.t-sec > .t-sec__body { margin-block-start: var(--space-6); }
.t-sec > .t-sec__foot { margin-block-start: var(--space-5); font-family: var(--font-mono);
  font-size: var(--text-2); line-height: 1.7; color: var(--ink-mute);
  max-inline-size: var(--measure-text); }
.t-sec--dense > .t-sec__body { margin-block-start: var(--space-5); }
.t-sec--dense > .t-sec__foot { margin-block-start: var(--space-4); }
.t-sec--chapter > h2 { font-size: var(--text-8); }
.t-sec--chapter > .t-sec__body { margin-block-start: var(--space-7); }
/* band tempo (base .t-band padding untouched during migration) */
.t-band--chapter { padding-block: var(--pad-chapter); }
.t-band--overture { padding-block: var(--pad-overture); }

/* ===================== FIGURE RULE · words live in HTML, never in the SVG ============
   --fig-w (unitless viewBox width) locks the frame to ~1 CSS px per SVG unit, so a
   stroke drawing can never balloon its (single-letter) keys. All words render in page
   type via __key / __legend / figcaption. */
.t-figure--lock .t-figure__frame { max-inline-size: calc(var(--fig-w, 480) * 1px + 2 * var(--space-3)); }
.t-figure--lock svg { inline-size: 100%; }
svg .t-eng-ltr { font: 600 12px/1 var(--font-mono); fill: var(--ink-mute); letter-spacing: .08em; }
.t-figure__key { list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--space-2); font-size: var(--text-3); color: var(--ink-body); }
.t-figure__key > li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--space-3); align-items: baseline; }
.t-figure__key b { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-2);
  color: var(--ink-mute); border: var(--hair) solid var(--line-strong); border-radius: 50%;
  inline-size: 1.45rem; block-size: 1.45rem; display: grid; place-items: center; }
.t-figure__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: var(--text-1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
/* keyed figure: key buttons + plate, two columns from 52rem (container query via .t-frame) */
.t-figure--keyed { display: grid; gap: var(--space-5); align-items: start; }
@container (min-width: 52rem) { .t-figure--keyed { grid-template-columns: minmax(14rem, .45fr) 1fr; } }
.t-keyfig__btn { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--space-3);
  align-items: baseline; text-align: start; inline-size: 100%; background: transparent;
  border: var(--hair) solid var(--line); border-radius: var(--radius-1);
  padding: var(--space-3) var(--space-4); cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--dur-1), background var(--dur-1); }
.t-keyfig__btn + .t-keyfig__btn { margin-block-start: var(--space-3); }
.t-keyfig__btn:hover { border-color: var(--line-strong); }
.t-keyfig__btn[aria-selected="true"] { border-color: var(--data-info);
  background: color-mix(in oklab, var(--data-info) 8%, transparent); }
.t-keyfig__btn b { font-family: var(--font-display); font-weight: 600; color: var(--ink-strong); }
.t-keyfig__btn small { display: block; font-size: var(--text-2); color: var(--ink-mute); margin-top: .15rem; }
.t-keyfig__account { border-top: var(--hair) solid var(--line); padding-top: var(--space-4);
  margin-top: var(--space-4); color: var(--ink-body); line-height: 1.55; min-block-size: 4.2rem;
  transition: opacity var(--dur-1) var(--ease-out); }
.t-keyfig__account.is-swapping { opacity: 0; } /* ToradKeyedFig crossfades the copy swap */
.t-keyfig__btn:active { transform: translateY(1px); } /* press feedback, matching .t-btn */
/* keyed stroke states: chosen part re-cut, rest faint (cut-depth, never opacity) */
.is-keyed .t-keyfig__part :is(path, line, rect, circle, polyline) { stroke: var(--ink-mute); stroke-width: var(--bw-1); }
.is-keyed .t-keyfig__part.is-cut :is(path, line, rect, circle, polyline) { stroke: var(--data-info); stroke-width: var(--bw-5); }
.is-keyed .t-keyfig__part.is-cut .t-eng-ltr { fill: var(--data-info); }

/* ===================== PROMOTIONS (page CSS that was really framework) ================ */
/* stat strip: a row of .t-stat readings on one ruled line */
.t-statline { display: grid; grid-template-columns: repeat(var(--statline-n, 4), minmax(0, 1fr));
  border-block: var(--hair) solid var(--line-strong); max-inline-size: min(100%, 80rem); }
.t-statline > .t-stat { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.t-statline > .t-stat + .t-stat { border-inline-start: var(--hair) solid var(--line); padding-inline-start: var(--space-5); }
.t-statline .t-stat__value { font-size: var(--text-7); color: var(--data-info); }
@media (max-width: 900px) { .t-statline { grid-template-columns: 1fr 1fr; }
  .t-statline > .t-stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .t-statline > .t-stat:nth-child(n+3) { border-block-start: var(--hair) solid var(--line); } }
@media (max-width: 520px) { .t-statline { grid-template-columns: 1fr; }
  /* + .t-stat selector: must match the base divider rule's specificity or the un-border loses the cascade */
  .t-statline > .t-stat + .t-stat { border-inline-start: 0; padding-inline-start: 0;
    border-block-start: var(--hair) solid var(--line); } }

/* FAQ: details-based accordion on the reading measure */
.t-faq { border-block-start: var(--hair) solid var(--line-strong); max-inline-size: min(100%, 50rem); }
.t-faq > details { border-block-end: var(--hair) solid var(--line); }
.t-faq summary { cursor: pointer; list-style: none; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline;
  padding: var(--space-5) 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-5); line-height: 1.2; color: var(--ink-strong); }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-mute); }
.t-faq details[open] summary::after { content: "-"; }
.t-faq details > p { max-inline-size: var(--measure-text); margin: 0 0 var(--space-5);
  line-height: 1.6; color: var(--ink-body); }

/* terminal lines: a prompt session (composes .t-code chrome-free) */
.t-code--term { background: var(--surface-sunk); border: var(--hair) solid var(--line-strong);
  border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--text-3);
  line-height: 1.75; max-inline-size: min(100%, 62rem); }
.t-code--term .t-term__bar { display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-block-end: var(--hair) solid var(--line);
  font-size: var(--text-1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.t-code--term .t-term__body { padding: var(--space-5); display: grid; gap: var(--space-3); }
.t-code--term .t-term__body p { margin: 0; max-inline-size: none; overflow-wrap: anywhere; }
.t-code--term .tok-you { color: var(--ink-strong); }
.t-code--term .tok-you::before { content: "you  "; color: var(--accent); }
.t-code--term .tok-bot { color: var(--ink-body); }
.t-code--term .tok-bot::before { content: var(--term-bot, "etch "); color: var(--data-info); }
.t-code--term .tok-ps::before { content: "$ "; color: var(--accent); }
.t-code--term .tok-run { color: var(--data-info); }
.t-code--term .tok-ok { color: var(--data-pos); }

/* the cosine gauge (shipped twice as g2-/pro-; one home now) */
.t-gauge { inline-size: clamp(12rem, 26vw, 16rem); height: auto; display: block; }
.t-gauge .dial { fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.t-gauge .tick { stroke: var(--data-info); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.t-gauge .needle { stroke: var(--ink-strong); stroke-width: 3; stroke-linecap: round; }
.t-gauge .hub { fill: var(--ink-strong); }
.t-gauge .num { font-family: var(--font-display); font-weight: 600; fill: var(--ink-strong); }
.t-gauge .cap { font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-mute); }
/* gauge readings ledger */
.t-gauge-reads { display: flex; flex-direction: column; }
.t-gauge-read { display: grid; grid-template-columns: 8rem 6.5rem 1fr; gap: var(--space-3);
  align-items: baseline; padding-block: .55rem; border-block-start: var(--hair) solid var(--line); }
.t-gauge-read:first-child { border-block-start: 0; }
.t-gauge-read__v { font-family: var(--font-display); font-weight: 600; color: var(--ink-mute); }
.t-gauge-read__s { font-family: var(--font-mono); font-size: var(--text-6); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.t-gauge-read__n { font-size: var(--text-2); color: var(--ink-body); line-height: 1.45; }
.t-gauge-read--struck .t-gauge-read__v, .t-gauge-read--struck .t-gauge-read__s { color: var(--accent); }
@media (max-width: 560px) { .t-gauge-read { grid-template-columns: 1fr; gap: var(--space-1); } }

/* hero furniture: the top rule and the struck-word squiggle */
.t-hero__rule { display: flex; justify-content: space-between; gap: var(--space-4);
  align-items: baseline; padding-block-end: var(--space-3);
  border-block-end: var(--hair) solid var(--line); font-family: var(--font-mono);
  font-size: var(--text-1); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); }
.t-rubric { position: relative; display: inline-block; white-space: nowrap; color: var(--accent); }
.t-rubric > svg { position: absolute; inset-inline: 0; inset-block-end: -.08em;
  inline-size: 100%; block-size: .3em; overflow: visible; pointer-events: none; }
.t-rubric > svg path { fill: none; stroke: var(--accent); stroke-width: 4;
  stroke-linecap: round; vector-effect: non-scaling-stroke; }