/* ─────────────────────────────────────────────────────────────────────────
   dta.css — URGA shared design system (SINGLE SOURCE OF TRUTH).
   Served at /system/dta.css. Every surface links this; page-specific CSS
   lives in each page's own <style> block. Edit tokens/chrome HERE, once.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── design tokens ─── */
:root {
  color-scheme: light;
  --bg: #F3F2EE; --paper: #FFFFFF; --ink: #111418; --soft: #2B3038;
  --mute: #545D68; --faint: #5E6670; --hair: rgba(17,20,24,0.07);
  --rule: rgba(17,20,24,0.22); --grid: rgba(17,20,24,0.12);
  --line: #7C838D;   /* a control's edge: 3:1 on every surface (WCAG 1.4.11). --rule and --hair rule rows and sections */
  /* red is a fall and the logo's core, nothing else. The rise is a teal-green, so the pair
     still separates for a red-green deficiency (review round 4: dE 19 under deuteranopia, was 10.5) */
  --accent: #B3261E; --up: #007A5E;
  /* the site's own voice: act, prove, focus. Never a direction, never a series. */
  --signal: #0F5196; --on-signal: #FFFFFF;
  /* LED MATERIAL (the signal protocol): the split-flap/LED card "phosphor" —
     a MATERIAL colour, not a semantic one. Scoped to .flap-c / board glyphs;
     never used as text on the page surface. --led-dim = the dimmed unit marker
     beside lit digits (tokenises the stray #c98a2b ANALYST flagged). */
  --led: #ffb22e; --led-dim: #c98a2b;
  --stale: #9A6B00; --stale-ink: #5C4A12;   /* amber: the rule, hatch and tint of a late figure. Its words are --stale-ink; raw --stale is 4.19:1 */
  /* map */
  --land: #ECE7DC; --landstroke: rgba(14,17,22,0.30); --nodata: #D7DBE0;
  --serif: 'DTA Glyphs', 'DTA Serif', Georgia, serif;   /* dta.mn's own (fonts.css): Source Serif 4 at its text cut, every Mongolian letter in the face */
  --display: 'DTA Glyphs', 'DTA Serif Display', 'DTA Serif', Georgia, serif;   /* a heading from 26px: the display cut of the same face */
  --mono: 'DTA Glyphs', 'DTA Mono', ui-monospace, monospace;   /* ▲ ▼ ● ○ ◐ ◷ ✓ are pinned (fonts.css): the glyph that carries direction is the same on every device */
  --font-led: 'Doto', 'DTA Mono', ui-monospace, monospace;  /* dot-matrix LED face — scoped to the /board kiosk (distance-read); dense close-read flappers stay mono for legibility */
  /* surfaces derived from ink, not new hues (DESIGN.md §6.3) */
  --well: color-mix(in srgb, var(--ink) 4%, var(--bg));   /* a recessed panel: verify, answers, converter */
  --lift: var(--paper);                                  /* a raised sheet: the sections sheet, drawers */
  /* the compare ramp: ink, blue, ochre, plum. Ink first, as a lone series is ink. Never red or
     green: those are direction. The fourth line is dashed and every label is ink, so no pair
     rests on hue alone (blue and violet were dE 4 apart under deuteranopia). */
  --c1: #111418; --c2: #4F8CC9; --c3: #9A6B00; --c4: #6B2F7A;
  --pt-mpp: #7A4501; --pt-dp: #2A8DD3; --pt-hun: #A18623; --pt-cwgp: #6335A8; --pt-nc: #D6568A;   /* a party's identity in a figure: the figure kit, DESIGN_SYSTEM.md */
  /* the magnitude ramps (2026-10-29): --seq-* a level on ink, --up-* and --dn-*
     a change by its sign. Validated with the dataviz script in both themes: one
     hue, monotone, steps apart, the palest 2:1 on --bg; each theme sets its own.
     A rise and a fall at one step are 4–9 apart under deuteranopia, so whatever
     shades a change also prints ▲ or ▼ (dta.calendar); the ramp is the size. */
  --seq-1: color-mix(in srgb, var(--ink) 32%, var(--bg)); --seq-2: color-mix(in srgb, var(--ink) 52%, var(--bg));
  --seq-3: color-mix(in srgb, var(--ink) 72%, var(--bg)); --seq-4: color-mix(in srgb, var(--ink) 92%, var(--bg));
  --up-1: color-mix(in srgb, var(--up) 58%, var(--bg)); --up-2: color-mix(in srgb, var(--up) 79%, var(--bg));
  --up-3: var(--up); --up-4: color-mix(in srgb, var(--ink) 32%, var(--up));
  --dn-1: color-mix(in srgb, var(--accent) 52%, var(--bg)); --dn-2: color-mix(in srgb, var(--accent) 76%, var(--bg));
  --dn-3: var(--accent); --dn-4: color-mix(in srgb, var(--ink) 32%, var(--accent));
  /* the type scale (px): 11 is the floor · 12.5 ui · 14 body mono · 17 prose · 22 h2 · h1 · hero */
  --t-1: 11px; --t-2: 12.5px; --t-3: 14px; --t-4: 17px; --t-5: 22px;
  --t-6: clamp(28px, 6.4vw, 44px); --t-hero: clamp(44px, 12vw, 76px);
  /* the space scale, on 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r: 2px;           /* one corner radius: controls, panels, sheets */
  --gutter: 16px;      /* one side gutter; 32px from 900px */
  --tap: 44px;         /* a phone's primary controls; 24px stays the AA floor */
}
@media (min-width: 900px) { :root { --gutter: 32px; } }
:root[data-theme="dark"] {
  color-scheme: dark;   /* the theme is this attribute, not the OS: form controls and scrollbars follow it */
  --bg: #0F1215; --paper: #171B21; --ink: #ECEAE3; --soft: #C7C3B6;
  --mute: #939AA7; --faint: #858D98; --hair: rgba(236,234,227,0.09);
  --rule: rgba(236,234,227,0.20); --grid: rgba(236,234,227,0.12);
  --line: #6B7380;
  --accent: #FF7468; --up: #4FD1A5;
  --signal: #8DBDF5; --on-signal: #0F1215;
  --stale: #E0B040; --stale-ink: #E6CF8F;
  --c1: #ECEAE3; --c2: #3D7CC9; --c3: #E0B040; --c4: #F08CD0;
  --pt-mpp: #9E4B08; --pt-dp: #4892E5; --pt-hun: #AA902D; --pt-cwgp: #7D48BB; --pt-nc: #C5698E;
  --up-1: color-mix(in srgb, var(--up) 46%, var(--bg)); --up-2: color-mix(in srgb, var(--up) 72%, var(--bg));
  --up-4: color-mix(in srgb, var(--ink) 50%, var(--up));
  --dn-1: color-mix(in srgb, var(--accent) 42%, var(--bg)); --dn-2: color-mix(in srgb, var(--accent) 70%, var(--bg));
  --dn-4: color-mix(in srgb, var(--ink) 50%, var(--accent));
  --land: #1C222B; --landstroke: rgba(236,234,227,0.28); --nodata: #2A313B;
}

/* ─── base ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }   /* a control without a face of its own fell back to Arial */
/* the `hidden` attribute must always win: an author display:flex/grid/block rule
   otherwise silently beats the UA [hidden]{display:none} (ANALYST 2026-06-03 — a
   hidden-but-display:flex camera button rendered DEAD on iOS/FF). Guard the whole
   class, not one element. */
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: var(--t-2); line-height: 1.5; -webkit-font-smoothing: antialiased; font-synthesis: small-caps; }   /* no faux bold or slanted mono: a weight or italic not shipped falls to the nearest real one */
h1, h2, h3 { text-wrap-style: balance; }   /* a heading breaks into even lines, never one word left alone */
p, li, dd, figcaption { text-wrap-style: pretty; }   /* the longhand: it leaves a parent's nowrap alone */
a { color: inherit; text-decoration: none; }
/* the type floor (DESIGN_SYSTEM.md): 11px for anything a reader must read, 10px
   only for decorative marks; the phone body steps up so labels stay legible. */
@media (max-width: 560px) { body { font-size: 13.5px; } }
/* two hues, two voices (DESIGN_SYSTEM.md, signal protocol). --accent is the market's:
   ▼ a fall, and the logo's core. --signal is the site's: the primary action, the proof
   (● шалгах, ✓) and the focus ring. A link is ink; hovering it darkens it and firms its underline. */
a:hover { color: var(--ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* sentence case for labels the script writes in lower case */
.dta-sentence::first-letter { text-transform: uppercase; }
/* a figure is DTA Mono with tabular digits, on every page */
.num, .dta-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ─── language reveal (EN/MN dual-span; html[data-lang] flips it) ─── */
[data-lang="en"] .mn-only { display: none !important; }
[data-lang="mn"] .en-only { display: none !important; }

/* Screen-reader-only: names a control for assistive tech without adding visible
   chrome. Bilingual by composition (put en-only/mn-only spans inside) — an
   aria-label can't be language-swapped by CSS, and hard-coding one English
   label would break WCAG 2.5.3 (label-in-name) the moment MN is showing. */
.sr-only { position: absolute; 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; }

/* ── the figure layer (dta.spark / dta.prov → .fig-spark / .fig-prov) — one sparkline, one passport chip,
   on every surface that prints a signed figure. Pages size them; they don't restyle them. */
.fig-spark { display: block; width: 100%; max-width: 132px; height: 22px; margin: 4px 0 2px; overflow: visible; }
.fig-spark polyline { fill: none; stroke: var(--faint); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
/* proof is the signal: ● шалгах reads as something to press, 7:1 or better on every surface */
.fig-prov { display: inline-flex; align-items: baseline; gap: 4px; align-self: flex-start; min-height: 24px; min-width: 24px; padding: 2px 0 3px; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.02em; color: var(--signal); text-decoration: none; }
.fig-prov:hover, .fig-prov:focus-visible { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.fig-prov:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.fig-prov .pd { font-size: 0.82em; line-height: 1; }
.fig-prov.is-stale { color: var(--stale-ink); }
/* self-watch (mig 173): "N хоног шинэчлэгдээгүй" beside a last signed date, on
   /s and /d. The stale amber, no new hue; stopped is the same words held in ink weight. */
.sh-cue { font-weight: 600; white-space: nowrap; color: var(--stale-ink); }
.sh-cue.stopped { font-weight: 600; }
/* a late or stopped figure (source_health; dta.staleTag): stale is a state of the figure, not a
   third colour beside it. The amber tag leads, an amber rule and a hatch mark the block, the
   figure steps down to --soft, and its change keeps ▲ ▼ and loses its hue: a stopped series
   has no direction today. */
.fig-stale { border-left: 2px solid var(--stale); padding: 8px 0 8px 10px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--stale) 9%, transparent) 6px 7px); }
.fig-stale__tag { margin: 0 0 6px; }

/* the figure panel (.pnl): figures in a two-column ruled grid (DESIGN.md §7), on the
   landing and /daily. A figure's name is the link to its series. On the landing its
   value is the button that charts it below (.pnl-pick), and the active one is ink and
   a rule, never red (review L13). */
.pnl-h { font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.04em; color: var(--mute); font-weight: 500; margin: 0 0 6px; }
.pnl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pnl-cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 10px 10px 8px 0; border-bottom: 1px solid var(--grid); box-shadow: inset 0 2px 0 transparent; }
.pnl-cell:nth-child(2n) { padding-left: 10px; padding-right: 0; border-left: 1px solid var(--grid); }
.pnl-cell.is-active { box-shadow: inset 0 2px 0 var(--ink); }
.pnl-l { display: inline-flex; align-items: center; min-height: 24px; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.02em; color: var(--soft); text-decoration: none; line-height: 1.35; }
.pnl-l:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.pnl-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 2px 0 0; margin: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font-family: var(--mono); }
.pnl-pick:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.pnl-v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; font-size: clamp(20px, 2.6vw, 24px); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pnl-v .u { font-size: var(--t-2); font-weight: 400; color: var(--mute); letter-spacing: 0; white-space: nowrap; }
.pnl-d { font-size: var(--t-1); line-height: 1.4; color: var(--mute); }
.pnl-vs { color: var(--mute); }
.pnl-pick .fig-spark { max-width: 140px; height: 18px; margin: 2px 0 0; }
.pnl-pick:hover .fig-spark polyline { stroke: var(--mute); }
.pnl-cell.is-active .fig-spark polyline { stroke: var(--ink); opacity: 1; }
.pnl-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-family: var(--mono); font-size: var(--t-1); color: var(--mute); margin: 2px 0 0; }
.dlt { font-variant-numeric: tabular-nums; color: var(--faint); }
.dlt.up { color: var(--up); }
.dlt.dn { color: var(--accent); }
.pnl-cell > .fig-spark { max-width: 140px; height: 18px; margin: 2px 0 0; }
/* a stale figure steps down and its change loses its hue (.fig-stale); the chip says the word */
.pnl-cell.is-stale .pnl-v { color: var(--soft); }
.pnl-cell.is-stale .dlt { color: var(--mute); }

/* ─── chrome / topbar (identical on every surface) ─── */
.chrome { position: sticky; top: 0; z-index: 50; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 0.5px solid var(--rule); background: var(--bg); font-family: var(--mono); font-size: var(--t-1); }
/* mobile: ONE non-wrapping opaque row. Wrapping (the old fix for the .ws nav
   overflow) let the 2nd row spill BELOW the chrome's background onto the board —
   BOB's "transparent top bar overlapping content". The section links live in
   their own row under the bar (.secnav), so hide the chrome's .ws links + the
   search label; the bar fits one row. */
@media (max-width: 720px) {
  .chrome { flex-wrap: nowrap; }
  .chrome .ws { display: none; }
  .chrome .brand { min-width: 0; }
  .chrome .sb-lbl { display: none; }
  .chrome .crumb { min-width: 0; }
}
.chrome .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: 0.07em; color: var(--ink); flex-shrink: 0; font-size: var(--t-3); }
.chrome .brand svg { transition: transform 0.4s cubic-bezier(0.2,0.7,0.3,1); }
.chrome .brand:hover svg { transform: rotate(45deg); }
/* full name beside the DTA wordmark (BOB) — muted tagline, hidden on the tight
   mobile bar (the acronym + logo carry the brand there). */
.chrome .brand .full { font-size: 0.82em; font-weight: 400; letter-spacing: 0.01em; color: var(--mute); white-space: nowrap; }
@media (max-width: 720px) { .chrome .brand .full { display: none; } }
/* brand mark: the "alive" press logo — a radar dish that slowly SCANS (rotates),
   a red core that BEATS, and a ripple that flashes on each live signed obs. The
   beat + scan are AUTONOMOUS (run on every page, not gated on a live WS) so the
   logo is alive site-wide; the landing's stream adds the per-obs ripple on top.
   The core eases toward the cursor (compass-needle, dta.js brandMark). */
.chrome .brand .logo { transition: transform 0.4s cubic-bezier(0.2,0.7,0.3,1); overflow: visible; }
.chrome .brand:hover .logo { transform: rotate(45deg); }
.logo-core, .logo-ripple, .logo-scan { transform-box: fill-box; transform-origin: center; }
.logo-aim { transition: transform 0.18s cubic-bezier(0.2,0.7,0.3,1); }   /* dta.js eases this toward the cursor */
.logo-core { fill: var(--accent); transition: fill 0.5s ease; }   /* ALWAYS bright + beating — a brand mark, not a status light (so it never dims when the press sleeps overnight); the live-data signal is the ripple, not a dim core */
.logo-ripple { opacity: 0; stroke: var(--accent); }   /* flashes on each live obs (landing stream) */
@media (prefers-reduced-motion: no-preference) {
  .logo-core { animation: logo-beat 2.6s ease-in-out infinite; }
  .logo-ripple.tick { animation: logo-ripple 0.9s ease-out; }
}
@keyframes logo-beat { 0%,100% { transform: scale(1); } 10% { transform: scale(1.22); } 20% { transform: scale(1); } 30% { transform: scale(1.10); } 42% { transform: scale(1); } }
@keyframes logo-ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(5.5); opacity: 0; } }
/* click/tap feedback — a quick press punch; dta.js also fires the hearth RIPPLE
   burst on pointerdown, so a click reads as a signed-pulse (the motion carries the
   "alive/signed" meaning the old hover tooltip used to spell out). */
.chrome .brand:active .logo { transform: scale(0.9) rotate(45deg); transition-duration: 0.1s; }
.chrome .sep { color: var(--faint); flex-shrink: 0; }
.chrome .ws { color: var(--mute); white-space: nowrap; }
.chrome .ws a { color: var(--mute); }
.chrome .ws a:hover { color: var(--ink); }
.chrome .ws.now { color: var(--ink); }
.chrome .prompt { color: var(--ink); font-weight: 500; font-size: var(--t-2); flex-shrink: 0; }
.chrome .cmd-input { flex: 1 1 60px; min-width: 0; font-family: var(--mono); font-size: var(--t-2); color: var(--ink); background: transparent; border: 0; outline: none; padding: 0; caret-color: var(--ink); }
.chrome .cmd-input::placeholder { color: var(--faint); }
/* at phone widths the separators are what the chrome can spare, not the toggles */
@media (max-width: 360px) { .chrome .sep, .chrome .prompt { display: none; } }
.chrome .crumb { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: min(24ch, 28%); }   /* the series name keeps room beside the command bar */
.chrome .crumb b { color: var(--ink); }
.chrome .right { margin-left: auto; display: flex; gap: 12px; align-items: center; color: var(--mute); flex-shrink: 0; }
.chrome .clock { color: var(--soft); font-variant-numeric: tabular-nums; }
/* live "online now" — ○ hollow at 0 (shown honestly), ● green at ≥1. The poll
   that feeds it IS the presence heartbeat (dta.js). */
.presence { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-1); color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.presence .pdot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--faint); box-sizing: border-box; flex: 0 0 auto; }
.presence.on .pdot { background: var(--up); border-color: var(--up); }
.presence .pn { color: var(--soft); font-weight: 600; }
.presence.on .pn { color: var(--ink); }
.presence .plbl { color: var(--mute); letter-spacing: 0.04em; }
/* narrow phones: drop the presence label, and tighten the .right cluster gap so the
   optional watchlist ★ (28px) fits without tipping the bar into horizontal overflow
   (the command bar is already at its min width here, so there's no flex left to give). */
@media (max-width: 520px) { .presence .plbl { display: none; } .chrome .right { gap: 7px; } }

/* ─── the section menu (.secnav) — the chrome's second row, on every base page
   (base.html.j2 renders it from `nav`). Text links in the glossary's words, not
   icons: a reader from search can name the sections without tapping anything.
   It scrolls away with the page (only the top bar is sticky), and at phone
   widths it scrolls sideways; the scroll shadows (background-attachment: local
   over scroll) show there is more only when there is. The current page is ink
   with an ink underline: the accent is direction, not "you are here". ─── */
.secnav { border-bottom: 0.5px solid var(--rule); background: var(--bg); font-family: var(--mono); }
.secnav ul { display: flex; margin: 0; padding: 0 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  background:
    linear-gradient(to right, var(--bg) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 40%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(to right, var(--rule), transparent) left / 10px 100% no-repeat scroll,
    linear-gradient(to left, var(--rule), transparent) right / 10px 100% no-repeat scroll,
    var(--bg); }
.secnav ul::-webkit-scrollbar { display: none; }
.secnav li { flex: none; }
.secnav a { display: flex; align-items: center; min-height: 36px; padding: 0 8px; font-size: var(--t-2); color: var(--mute); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -0.5px; }
.secnav a:hover { color: var(--ink); }
.secnav a:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.secnav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.secnav a[aria-current="page"] { font-weight: 600; }
.secnav a { gap: 6px; }
.secnav a .ic { font-size: 14px; }   /* the registry's icon before the word; ink with it when current */
@media print { .secnav { display: none; } }

/* ─── the phone top bar (≤560px): one row of what a reader needs, the logo, the
   command bar with its word ("хайх"), language and theme. The online count and
   the UB clock (the phone already shows the time) go; so does the breadcrumb,
   which had one letter's room left ("› m…"). The section menu below says where
   the reader is. The menu grows to 44px tap targets, each its icon over its word. ─── */
@media (max-width: 560px) {
  .chrome .presence, .chrome .clock, .chrome .crumb, .chrome .sep { display: none !important; }
  .secnav ul { padding: 0 4px; }
  .secnav a { min-height: 44px; padding: 0 5px; flex-direction: column; justify-content: center; gap: 3px; font-size: var(--t-1); }   /* a tab bar: the icon over the word; six and Цэс fit at 390px */
  .secnav a .ic { font-size: 16px; }
  .secnav-all { margin-right: 6px; }
}

/* ─── theme + language toggles (inline, in the chrome .right cluster) ─── */
.lang-toggle, .dt-toggle { font-family: var(--mono); color: var(--mute); background: transparent; border: 0; cursor: pointer; line-height: 1; white-space: nowrap; flex-shrink: 0; min-width: 24px; min-height: 24px; }   /* WCAG 2.5.8 target size */
.lang-toggle { font-size: var(--t-1); letter-spacing: 0.08em; padding: 4px 4px; }
.dt-toggle { font-size: var(--t-3); padding: 2px 2px; }
.lang-toggle:hover, .lang-toggle:focus, .dt-toggle:hover, .dt-toggle:focus { color: var(--ink); }
.lang-toggle .seg { color: var(--faint); }
.lang-toggle .seg-sep { color: var(--faint); margin: 0 1px; }
[data-lang="en"] .lang-toggle .seg-en, [data-lang="mn"] .lang-toggle .seg-mn { color: var(--ink); font-weight: 500; }
@media (max-width: 800px) { .lang-toggle, .dt-toggle { padding: 6px 5px; } }
/* watchlist ★ — hidden until you follow ≥1 series; the lit star + count = "your
   follows, reachable here". Ink: a count is not one of the accent's jobs. */
.wl-toggle { font-family: var(--mono); color: var(--ink); background: transparent; border: 0; cursor: pointer; line-height: 1; white-space: nowrap; flex-shrink: 0; font-size: var(--t-2); padding: 3px 3px; display: inline-flex; align-items: center; gap: 3px; }
.wl-toggle:hover { color: var(--ink); }
.wl-toggle .wl-n { font-size: var(--t-1); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .wl-toggle { padding: 6px 4px; } }
/* ─── icon system — inline Phosphor sprite (build.py injects the <symbol> defs;
   use <svg class="ic"><use href="#i-NAME"/></svg>). Phosphor is fill-based, em-sized,
   currentColor-tinted, so an icon inherits its parent's colour + font-size. ─── */
.ic { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; }

/* ─── COVER masthead (system component) — the shared editorial header that fronts
   every Terminal surface (/a /s /c /fx …). It grades the jump from the calm landing
   Cover (the full-size .lead-* variant) into the dense tool: a serif title + a
   one-line "read" + a hairline. One design language, two sizes — so the whole
   product reads as one system, not a redesigned page bolted onto an old site. ─── */
.cover { padding: clamp(20px, 3.4vh, 40px) 16px clamp(13px, 2vh, 20px); border-bottom: 1px solid var(--rule); }
.cover-ttl { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
/* a sentence is DTA Serif at 16-17px in --soft; a label, a figure, a code or a date is mono. Grey
   monospace sets Mongolian's long words as a picket fence (review round 4, change 4). */
.cover-read { font-family: var(--serif); font-size: var(--t-4); line-height: 1.45; color: var(--soft); margin: 9px 0 0; max-width: 64ch; }
@media (max-width: 560px) { .cover-read { font-size: var(--t-4); } }
.cover-read b { font-family: var(--mono); font-size: 0.86em; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }   /* a figure or a name in the sentence stays mono */
.cover-read a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.cover-read a:hover { color: var(--ink); text-decoration-color: currentColor; }   /* links in ink: red is direction, the signal is proof */
/* a note: the sentence under a table or a figure (a definition, a caveat, a source), a size under the
   lede. DTA Serif like every sentence; a figure in it stays mono (.num), a name it marks is ink */
.dta-note { font-family: var(--serif); font-size: var(--t-3); line-height: 1.5; color: var(--soft); max-width: 68ch; margin: var(--s-3) 0 0; }
.dta-note .num { font-size: 0.86em; color: var(--ink); white-space: nowrap; }
.dta-note b { font-weight: 600; color: var(--ink); }
.dta-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.dta-note a:hover { text-decoration-color: currentColor; }
/* a region's state before its data: loading (with .dta-dots, the one working ellipsis) or "× did not
   load", a sentence in DTA Serif. --wide is a feed or a list with nothing to show, centred in its room, with
   __big its line and __sub what to do (a retry, a way out). A page does not invent its own */
.dta-state { font-family: var(--serif); font-size: var(--t-4); line-height: 1.4; color: var(--soft); padding: var(--s-5) 0; margin: 0; }
.dta-state--wide { padding: var(--s-7) var(--s-4); text-align: center; }
.dta-state__big { color: var(--ink); }
.dta-state__sub { margin: var(--s-3) auto 0; max-width: 32em; font-family: var(--mono); font-size: var(--t-2); line-height: 1.6; color: var(--mute); }
.dta-state b { font-family: var(--mono); font-size: 0.86em; color: var(--ink); }
.dta-state a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
/* context: full-bleed above a tool (/a) the cover carries its own gutter; nested
   in a centred .sheet (/compare, /news) the sheet already gutters — don't double it. */
.sheet > .cover { padding-left: 0; padding-right: 0; }

/* ─── bottom CONSOLE HANDLE (.conbar) — the command bar moved UP into the top
   chrome (it duplicated the top bar). The bottom is the live signed-obs
   console's COLLAPSED handle: a slim dark strip (matches the #console terminal)
   that expands the console up over it on click or the ` key. A developer tool:
   rendered only under html[data-dev] (?dev=1 or localStorage dta.dev, set in
   base.html.j2's head), so it never covers a reader's content. ─── */
.conbar {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 79;
  height: 30px; padding: 0 14px; padding-bottom: env(safe-area-inset-bottom);
  background: #0E1116; color: rgba(236,234,227,0.72);
  border: 0; border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.06em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
html:not([data-dev]) .conbar { display: none; }
html[data-dev] body { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.conbar:hover { color: #ECEAE3; }
.conbar .cb-prompt { flex: none; color: #F2675C; font-weight: 600; }  /* fixed coral — the bar is always dark, so don't use the light-theme accent (dark-red on near-black is invisible) */
.conbar .cb-lbl { letter-spacing: 0.02em; }
.conbar .cb-hint { margin-left: auto; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conbar .cb-chev { flex: none; color: rgba(255,255,255,0.5); transition: transform 0.15s ease; }
.conbar[aria-expanded="true"] .cb-chev { transform: rotate(180deg); }
@media (max-width: 420px) { .conbar .cb-lbl { display: none; } }
/* dev console: a captured JS/fetch fault flashes the collapsed handle red (the
   prompt pulses + the top hairline reddens) until the console is opened — a fault
   is impossible to miss even closed (the cb-hint already ticks the message). */
.conbar.has-err { border-top-color: #F2675C; color: #F2C7C2; }
.conbar.has-err .cb-prompt { animation: cb-err 1s ease-in-out infinite; }
@keyframes cb-err { 0%,100% { color: #F2675C; } 50% { color: #ECEAE3; } }
@media (prefers-reduced-motion: reduce) { .conbar.has-err .cb-prompt { animation: none; } }
/* the command-bar caret blink (used by .topcmd in the top chrome) */

/* scan / verify bottom sheet */
.scansheet[hidden] { display: none; }
.scansheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; }
.scansheet .ss-back { position: absolute; inset: 0; background: rgba(14,17,22,0.45); }
.scansheet .ss-panel { position: relative; width: 100%; background: var(--paper); border-radius: var(--r) var(--r) 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 24px rgba(14,17,22,0.22); animation: ss-up 0.22s ease-out; }
@keyframes ss-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.scansheet .ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: var(--serif); font-size: var(--t-4); color: var(--ink); }
.scansheet .ss-x { background: transparent; border: 0; color: var(--mute); font-size: var(--t-4); cursor: pointer; padding: 4px 6px; }
.scansheet .ss-note { font-size: var(--t-1); color: var(--mute); line-height: 1.55; margin: 0 0 14px; }
.scansheet .ss-paste { display: flex; gap: 8px; }
.scansheet .ss-paste input { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--t-2); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; outline: none; }
.scansheet .ss-paste input:focus { border-color: var(--signal); }
.scansheet .ss-paste button { font-family: var(--mono); font-size: var(--t-2); color: var(--bg); background: var(--ink); border: 0; border-radius: var(--r); padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.scansheet .ss-err { color: var(--ink); font-size: var(--t-1); margin-top: 8px; }
.scansheet .ss-err::before { content: "× "; }   /* a failure is a glyph and a word, not a colour */
.scansheet .ss-cam-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: var(--mono); font-size: var(--t-2); color: var(--on-signal); background: var(--signal); border: 0; border-radius: var(--r); padding: 12px; cursor: pointer; margin-bottom: 12px; }
.scansheet .ss-cam-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scansheet .ss-cam { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.scansheet .ss-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scansheet .ss-ret { position: absolute; inset: 16% 20%; border: 2px solid rgba(255,255,255,0.9); border-radius: var(--r); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.28); }
.scansheet .ss-or { text-align: center; font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); margin-bottom: 10px; }
@media (min-width: 560px) { .scansheet { align-items: center; justify-content: center; } .scansheet .ss-panel { max-width: 420px; border-radius: var(--r); } }
@media (prefers-reduced-motion: reduce) { .scansheet .ss-panel { animation: none; } }

/* ─── backtick console — live signed-obs feed (HLDS-style, always-dark) ─── */
.console[hidden] { display: none; }
.console { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom); z-index: 80; height: 46vh; max-height: 460px; display: flex; flex-direction: column; background: #0E1116; color: #ECEAE3; border-top: 2px solid var(--signal); box-shadow: 0 -8px 28px rgba(0,0,0,0.4); font-family: var(--mono); animation: con-up 0.18s ease-out; }
html[data-dev] .console { bottom: calc(30px + env(safe-area-inset-bottom)); }
@keyframes con-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.console .con-head { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,0.14); font-size: var(--t-1); letter-spacing: 0.04em; flex-shrink: 0; }
.console .con-title { color: #ECEAE3; font-weight: 600; }
.console .con-health { color: #5FE08D; letter-spacing: 0.03em; text-transform: none; }
.console .con-health .dn { color: #F2675C; }
.console .con-hint { color: rgba(255,255,255,0.4); font-size: 9px; letter-spacing: 0.03em; text-transform: none; }
.console .con-x { background: transparent; border: 0; color: rgba(255,255,255,0.55); cursor: pointer; font-size: var(--t-2); padding: 2px 4px; }
.console .con-x:hover { color: #ECEAE3; }
.console .con-log { flex: 1; overflow-y: auto; padding: 8px 14px 14px; font-size: var(--t-1); line-height: 1.7; }
.console .con-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(236,234,227,0.82); }
.console .con-line .t { color: rgba(255,255,255,0.38); }
.console .con-line .op { color: #5B9BD5; }
.console .con-line .val { color: #5FE08D; font-weight: 600; }
/* the session journal lines (conLog) — interleaved above the server pulse */
.console .con-line.jr .jk { display: inline-block; min-width: 34px; font-size: 8.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.45); }
.console .jr-cmd .jk, .console .jr-win .jk { color: #F2675C; }
.console .jr-sig .jk { color: #5FE08D; }
.console .jr-err .jk { color: #F2675C; }
.console .jr-sys .jk { color: #5B9BD5; }
.console .con-div { padding: 6px 0 2px; font-size: 8.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.35); }
.console .con-line a { color: #F2675C; border: 0; }
.console .con-line a:hover { text-decoration: underline; }
.console .con-empty { color: rgba(255,255,255,0.4); font-size: var(--t-1); padding: 6px 0; }
/* dev tools in the con-head — filter chips (all·dev·err·pulse) + copy; the net/obs
   line colours. Chips are ≥24px tap targets (WCAG 2.2). */
.console .con-filters { display: inline-flex; gap: 3px; }
.console .con-f, .console .con-tool { background: transparent; border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.55); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; padding: 3px 8px; min-height: 24px; border-radius: var(--r); cursor: pointer; }
.console .con-f:hover, .console .con-tool:hover { color: #ECEAE3; border-color: rgba(255,255,255,0.34); }
.console .con-f.on { color: #0E1116; background: #ECEAE3; border-color: #ECEAE3; }
.console .con-fn { margin-left: 4px; color: #F2675C; font-weight: 600; }
.console .con-f.on .con-fn { color: #B2201A; }
.console .con-tool.ok { color: #5FE08D; border-color: #5FE08D; }
.console .jr-err { color: #F2A39B; }
.console .jr-net .jk { color: #E8B34B; }
.console .jr-obs .jk { color: #5FE08D; }
@media (max-width: 560px) { .console .con-f, .console .con-tool { padding: 3px 6px; } .console .con-health { display: none; } .console .con-head { gap: 7px; } }
/* ≤420: drop the title text (the chips self-label) so all·dev·err·pulse + copy + ✕
   fit one row without overflowing the viewport on a phone. */
@media (max-width: 420px) { .console .con-head { gap: 5px; padding: 7px 9px; } .console .con-title { display: none; } .console .con-f, .console .con-tool { padding: 3px 5px; letter-spacing: 0.02em; } }

/* ─── popup-window system (the "popwindow").
   Desktop: floating draggable window. Mobile (≤700px): full-screen bottom
   sheet, swipe-down to dismiss. See web/INTERACTION.md §L2.2. ─── */
#win-layer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
#win-layer .win { pointer-events: auto; }
.win {
  position: fixed; display: flex; flex-direction: column; overflow: hidden;
  min-width: 280px; min-height: 160px; max-width: 96vw; resize: both;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-left: 2px solid var(--ink);
  box-shadow: 0 10px 40px rgba(14,17,22,0.18);
}
:root[data-theme="dark"] .win { box-shadow: 0 12px 48px rgba(0,0,0,0.55); }
.win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 30px; flex-shrink: 0; padding: 0 5px 0 11px; cursor: move; user-select: none;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.02em;
}
.win-title { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.win-close { color: var(--mute); cursor: pointer; font-size: var(--t-3); line-height: 1; padding: 4px 7px; border-radius: var(--r); }
.win-close:hover { color: var(--ink); background: var(--hair); }
.win-body { flex: 1; overflow-y: auto; padding: 13px 15px; min-height: 0; font-family: var(--mono); font-size: var(--t-2); }
.win-body::-webkit-scrollbar { width: 6px; }
.win-body::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r); }
/* series-island summoned into a window (window.dta.openSeries) — a nervous-system node */
.sw { font-family: var(--mono); }
.sw-load { color: var(--mute); font-size: var(--t-2); padding: 6px 0; }
.sw-val { font-size: 30px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sw-val .u { font-size: var(--t-2); font-weight: 400; color: var(--mute); margin-left: 3px; }
.sw-d { font-size: var(--t-2); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-d.up { color: var(--up); } .sw-d.dn { color: var(--accent); } .sw-d.eq { color: var(--mute); }
/* window chart = the atlas 'tik' figure look (axes + ticks + labels + terminal marker) */
.swc { width: 100%; height: clamp(124px, 26vh, 182px); display: block; margin: 12px 0 10px; font-family: var(--mono); }
.swc .ar { fill: var(--ink); fill-opacity: 0.055; stroke: none; }   /* the area ribbon under the line — pro-terminal weight */
.swc .ar.ar2 { fill-opacity: 0.13; }   /* the filled-LEVEL vocab (area) */
.swc .br { fill: var(--ink); }
.swc .br.neg { fill: var(--accent); }   /* bipolar negatives — the signal protocol's down */
.swc .ax { stroke: var(--ink); stroke-width: 0.5; fill: none; }
.swc .gr { stroke: var(--hair); stroke-width: 0.4; stroke-dasharray: 1 2; }
.swc .ln { stroke: var(--ink); stroke-width: 0.9; fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.swc .pt { fill: var(--ink); }
.swc .lbl { font-size: 7.5px; fill: var(--mute); letter-spacing: 0.03em; }
.swc .it { font-size: 8.5px; font-weight: 500; fill: var(--ink); }
/* shugam v2 — the terminal chart signatures */
.swc .vtag { fill: var(--ink); }   /* the last value, boxed: data is ink (red means "fell") */
.swc .vtagt { font-family: var(--mono); font-size: 7.5px; font-weight: 600; fill: var(--bg); }
.swc .xh line { stroke: var(--ink); stroke-width: 0.5; stroke-dasharray: 2 2; }
.swc .xh circle { fill: var(--ink); stroke: var(--bg); stroke-width: 1; }
.swc .mk { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.swc .mean { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }   /* dta.chart {mean}: the record's average */
.swc .mm { fill: var(--mute); }   /* dta.chart {extremes}: the highest and lowest point */   /* the datum-in-context ring: ink, a mark is not a fall */
/* rank — a series among its siblings (dta.rank): place, name, dot, value */
.rk, .cal { margin: var(--s-3) 0 var(--s-5); }
.rk figcaption, .cal figcaption { font-family: var(--mono); font-size: var(--t-1); color: var(--mute); margin: 0 0 var(--s-2); }
.rk-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rk-r a, .rk-ax { display: grid; grid-template-columns: 2em minmax(7em, 14em) minmax(64px, 1fr) minmax(5.5em, auto); gap: 0 var(--s-3); align-items: center; }
.rk-r a { min-height: 26px; padding: 1px 0; border-bottom: 1px solid var(--grid); color: var(--ink); text-decoration: none; }
.rk-r a:hover .rk-n { text-decoration: underline; }
.rk-r a:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.rk-i { font-family: var(--mono); font-size: var(--t-1); color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.rk-n { font-family: var(--serif); font-size: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-v { font-family: var(--mono); font-size: var(--t-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-v .old { font-size: var(--t-1); color: var(--stale-ink); margin-left: 6px; }
.rk-t { position: relative; height: 14px; background: linear-gradient(var(--grid), var(--grid)) 0 50% / 100% 1px no-repeat; }
.rk-l .rk-t::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: var(--med); border-left: 1px dashed var(--faint); }
.rk-t i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--soft); }
.rk-r.is-cur a { background: var(--well); }
.rk-r.is-cur .rk-n, .rk-r.is-cur .rk-v { font-weight: 600; }
.rk-r.is-cur .rk-t i { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.rk-gap { font-family: var(--mono); font-size: var(--t-1); color: var(--mute); padding-left: 2.6em; line-height: 18px; border-bottom: 1px solid var(--grid); }
.rk:not(.is-all) .rk-more, .rk.is-all .rk-gap { display: none; }
.rk-ax { font-family: var(--mono); font-size: var(--t-1); color: var(--mute); margin: 4px 0 0; }
.rk-ax .rk-t { display: flex; justify-content: space-between; height: auto; background: none; }
.rk-all { margin-top: var(--s-2); }
@media (max-width: 560px) {
  .rk-r a, .rk-ax { grid-template-columns: 1.6em minmax(5.5em, 1fr) minmax(56px, 32%) auto; gap: 0 var(--s-2); }
  .rk-ax > span:nth-child(2) { grid-column: 2; }
}

/* calendar — a series' months, a year a row (dta.calendar). A change prints
   ▲ ▼ on its shade (the sign); the ramp step is the size */
.cal-s { overflow-x: auto; }
.cal-t { width: 100%; min-width: 300px; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-family: var(--mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.cal-t th { font-weight: 400; color: var(--mute); padding: 0 0 2px; text-align: center; }
.cal-t thead th:first-child, .cal-t tbody th { width: 3.2em; text-align: left; padding-right: 4px; }
.cal-t td { height: 22px; padding: 0; text-align: center; line-height: 22px; background: var(--well); color: var(--ink); }
.cal-t td[data-tip] { cursor: crosshair; }
.cal-t td.nil { background: none; }
.cal .u1 { background: var(--up-1); } .cal .u2 { background: var(--up-2); } .cal .u3 { background: var(--up-3); color: var(--bg); } .cal .u4 { background: var(--up-4); color: var(--bg); }
.cal .d1 { background: var(--dn-1); } .cal .d2 { background: var(--dn-2); } .cal .d3 { background: var(--dn-3); color: var(--bg); } .cal .d4 { background: var(--dn-4); color: var(--bg); }
.cal .l1 { background: var(--seq-1); } .cal .l2 { background: var(--seq-2); } .cal .l3 { background: var(--seq-3); } .cal .l4 { background: var(--seq-4); }
.cal-k { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-family: var(--mono); font-size: var(--t-1); color: var(--mute); margin: 6px 0 0; }
.cal-k i { display: inline-block; width: 16px; height: 11px; }
.cal-k .cal-cuts { margin-left: var(--s-3); }

/* spread — a bank's buy (○) to sell (●) on its table's shared scale, the
   official rate a tick (dta.spread) */
.sb { display: block; position: relative; height: 9px; margin: 4px 0 0; background: linear-gradient(var(--grid), var(--grid)) 0 50% / 100% 1px no-repeat; }
.sb-r { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px solid var(--mute); }
.sb-s { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); }
.sb-s::before, .sb-s::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.sb-s::before { left: 0; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sb-s::after { left: 100%; background: var(--ink); }

svg.swc[data-v] { cursor: crosshair; }
#swcTip { position: fixed; z-index: 120; pointer-events: none; font-family: var(--mono); font-size: var(--t-1);
  padding: 3px 8px; background: var(--ink); color: var(--bg); border-radius: var(--r);
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 10px rgba(0,0,0,0.3); white-space: nowrap; }
.sw-meta { font-size: var(--t-1); color: var(--mute); letter-spacing: 0.04em; }
.sw-meta .sw-sig { color: var(--ink); }
.sw-act { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
/* the function-pack windows: i (profile) · stat · t (history table) */
.kv { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 0.5px solid var(--hair); font-size: var(--t-2); }
.kv-k { flex: 0 0 96px; font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); }
.kv-k::first-letter { text-transform: uppercase; }
.kv-v { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.kv-u { color: var(--mute); font-size: var(--t-1); }
.kv-sub { color: var(--faint); font-size: var(--t-1); }
.kv-name { font-size: var(--t-2); font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 8px; }
.kv-name .kv-en { display: block; font-weight: 400; font-size: var(--t-1); color: var(--mute); }
.kv-blk { padding: 8px 0 4px; border-bottom: 0.5px solid var(--hair); }
.kv-blk .kv-k { display: block; margin-bottom: 4px; }
.kv-txt { font-size: var(--t-1); line-height: 1.6; color: var(--soft); }
.htbl { font-variant-numeric: tabular-nums; }
.htbl-hd, .htbl-r { display: grid; grid-template-columns: 1fr 1fr 0.8fr 24px; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 0.5px solid var(--hair); }
.htbl-hd { font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); }
.htbl-hd > *::first-letter { text-transform: uppercase; }
.htbl-r { font-size: var(--t-2); color: var(--soft); }
.htbl-v { color: var(--ink); font-weight: 500; text-align: right; }
.htbl-d { text-align: right; font-size: var(--t-1); }
.htbl-d.up { color: var(--up); } .htbl-d.dn { color: var(--accent); } .htbl-d.eq { color: var(--faint); }
.htbl-sid { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; font-size: var(--t-1); }
/* civic entity window (window.dta.openEntity) — an object that's a lens onto data */
.ew-kind { font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); margin-bottom: 8px; }
.ew-kind::first-letter, .ew-lbl::first-letter, .ew-sec::first-letter, .cal-in::first-letter, .cal-v::first-letter, .al-sev::first-letter { text-transform: uppercase; }
.ew-desc { font-family: var(--serif); font-size: var(--t-3); line-height: 1.55; color: var(--soft); margin: 0 0 14px; }
.ew-lbl { font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); margin-bottom: 7px; }
.ew-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ew-chip { font-family: var(--mono); font-size: var(--t-1); color: var(--soft); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 9px; cursor: pointer; }
.ew-chip:hover { border-color: var(--ink); color: var(--ink); }
.ew-list { display: flex; flex-direction: column; }
.ew-sec { display: block; font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); padding: 15px 4px 6px; }
.ew-sec:first-child { padding-top: 2px; }
.ew-sec-n { font-family: var(--mono); font-size: var(--t-1); color: var(--ink); margin-left: 7px; font-variant-numeric: tabular-nums; }
.ew-li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 4px; border-bottom: 0.5px solid var(--hair); background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; text-align: left; width: 100%; }
.ew-li:hover { background: var(--hair); }
.ew-li:hover .ew-li-go { color: var(--ink); transform: translateX(2px); }
.ew-ic { width: 17px; height: 17px; flex-shrink: 0; color: var(--soft); margin-top: 1px; }
.ew-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ew-li-nm { font-family: var(--mono); font-size: var(--t-2); color: var(--ink); line-height: 1.3; }
.ew-li-d { font-size: var(--t-1); line-height: 1.4; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-li-go { width: 14px; height: 14px; flex-shrink: 0; color: var(--faint); margin-top: 2px; transition: transform .12s ease, color .12s ease; }
/* release calendar window (window.dta.openCalendar) — upcoming scheduled prints */
.cal { display: flex; flex-direction: column; }
.cal-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 4px; border-bottom: 0.5px solid var(--hair); background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; text-align: left; width: 100%; font-family: var(--mono); }
.cal-row[data-code]:hover { background: var(--hair); }
.cal-when { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; width: 96px; }
.cal-d { font-size: var(--t-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-in { display: block; font-size: var(--t-1); letter-spacing: 0.02em; color: var(--ink); }
.cal-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-t { font-size: var(--t-2); color: var(--soft); }
.cal-v { display: block; font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); }
/* alerts window (window.dta.openAlerts) — the efferent reflex, signed */
.al-quiet { color: var(--up); font-size: var(--t-2); padding: 10px 2px; }
.al { display: flex; flex-direction: column; }
.al-row { display: flex; align-items: baseline; gap: 11px; padding: 11px 4px; border-bottom: 0.5px solid var(--hair); border-left: 2px solid var(--rule); padding-left: 10px; }
.al-row.al-alert, .al-row.al-high, .al-row.al-critical { border-left-color: var(--ink); border-left-width: 3px; }
.al-row.al-warn, .al-row.al-medium { border-left-color: var(--stale); }
.al-row.al-info, .al-row.al-low { border-left-color: var(--line); }
.al-sev { font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); flex-shrink: 0; width: 56px; }
.al-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-b { font-size: var(--t-2); color: var(--ink); line-height: 1.4; }
.al-m { font-size: var(--t-1); letter-spacing: 0.04em; color: var(--faint); font-variant-numeric: tabular-nums; }
.al-m .sw-sig { color: var(--ink); }
@media (max-width: 700px) {
  .win {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: 100vw !important; max-width: 100vw; height: 86vh !important;
    border-left: 0; border-right: 0; border-bottom: 0; border-radius: var(--r) var(--r) 0 0;
    resize: none; transition: transform 0.18s ease;
  }
  .win-bar { height: 42px; padding-top: 9px; position: relative; font-size: var(--t-1); }
  .win-bar::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: var(--r); background: var(--rule); }
  .win-close { font-size: 20px; padding: 6px 11px; }
  .win-body { padding: 12px 14px; font-size: var(--t-2); }
}
@media (prefers-reduced-motion: reduce) { .win { transition: none; } }

/* ─── watchlist popwindow body — your followed series (the "follow" set) ─── */
.wl { font-family: var(--mono); }
.wl-load, .wl-empty { padding: 26px 14px; text-align: center; color: var(--mute); font-size: var(--t-2); line-height: 1.6; }
.wl-row { display: grid; grid-template-columns: 1fr auto 80px auto; align-items: center; gap: 10px; padding: 9px 12px; border-top: 0.5px solid var(--hair); }
.wl-row:first-child { border-top: 0; }
.wl-nm { min-width: 0; font-size: var(--t-2); color: var(--ink); overflow: hidden; }
.wl-nm small { display: block; color: var(--faint); font-size: var(--t-1); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-v { font-size: var(--t-2); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.wl-d { font-size: var(--t-1); font-weight: 600; margin-left: 3px; }
.wl-d.up { color: var(--up); } .wl-d.dn { color: var(--accent); } .wl-d.eq { color: var(--mute); }
.wl-sk { width: 80px; height: 22px; display: block; }
.wl-sk polyline { fill: none; stroke: var(--faint); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.wl-sk polyline.up { stroke: var(--up); } .wl-sk polyline.dn { stroke: var(--accent); }
.wl-sk-x { display: inline-block; width: 80px; }
.wl-act { display: flex; gap: 2px; }
.wl-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border: none; background: none; color: var(--mute); font-size: var(--t-2); cursor: pointer; text-decoration: none; border-radius: var(--r); }
.wl-x:hover { color: var(--ink); background: var(--hair); }
.wl-foot { padding: 13px 12px; margin-top: 4px; border-top: 0.5px solid var(--rule); text-align: center; font-size: var(--t-1); line-height: 1.5; color: var(--mute); }
.wl-foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
@media (max-width: 400px) { .wl-row { grid-template-columns: 1fr auto 54px auto; gap: 7px; } .wl-sk, .wl-sk-x { width: 54px; } }

/* ─── search overlay — the shared command palette (⌕ chrome trigger + ⌘K) ─── */
/* the command bar — lives in the top chrome (BOB: top bar IS the command line);
   a prominent prompt that opens the CLI. Grows to fill the chrome between brand + meta. */
.topcmd { flex: 1 1 auto; min-width: 24px; display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; margin: 0 6px;
  border: 0.5px solid var(--soft); border-radius: var(--r); background: var(--paper);
  color: var(--ink); cursor: text; font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.01em; }
.topcmd:hover { border-color: var(--ink); }
.topcmd:focus-visible { border-color: var(--signal); outline: none; }   /* the focus ring */
.topcmd .tc-prompt { flex: none; color: var(--ink); font-weight: 500; }
.topcmd .tc-ph { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mute); }
.topcmd .tc-min { display: none; }  /* short placeholder — shown only on narrow (see ≤560 below) */
.topcmd .tc-caret { flex: none; width: 6px; height: 1.05em; background: var(--ink); opacity: 0.55; }
.topcmd .tc-k { flex: none; margin-left: auto; font-size: var(--t-1); color: var(--faint); border: 0.5px solid var(--rule); border-radius: var(--r); padding: 1px 5px; }
/* the verbose "command · search · run" triplet (158px) can't fit the starved
   mobile bar — it clipped mid-word to a meaningless fragment ("comman▍"). The bar
   is flex:1 so it loses width fastest; text can't shrink gracefully. So show the
   MOST that fits at each width, never clip (mirrors the logo's .wm/.full pattern):
   full triplet > 560 · the short word ("хайх") at ≤ 560, down to 320. */
@media (max-width: 560px) {
  .topcmd .tc-k { display: none; }
  .topcmd { margin: 0 4px; gap: 6px; padding: 0 9px; }
  .topcmd .tc-full { display: none; }
  .topcmd .tc-min { display: inline; }
}
@media (max-width: 560px) {
  /* the word stays at every width ("хайх" / "search"): with the online count and
     the clock gone from the phone bar there is room for it down to 320px, so the
     box never shrinks below its word (flex-shrink 0); a page's own filter in the
     bar (/a) gives way instead. */
  .topcmd { flex: 1 0 auto; }
}
.searchsheet { position: fixed; inset: 0; z-index: 80; }
.search-panel { position: relative; max-width: 640px; margin: 8vh auto 0; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 16px 56px rgba(0,0,0,0.32); overflow: hidden; }
.search-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 0.5px solid var(--hair); }
.search-bar .search-ic { color: var(--mute); font-size: var(--t-4); flex-shrink: 0; }
/* the LOADED CONTEXT chip — the Bloomberg loaded-security model: a picked
   series locks here; everything typed then filters its function menu */
.cmd-ctx { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; max-width: 40%;
  border: 1px solid var(--ink); border-radius: var(--r); padding: 2px 4px 2px 8px;
  font-family: var(--mono); font-size: var(--t-1); font-weight: 500; color: var(--ink);
  background: var(--hair); }   /* a loaded context is a selection: ink with a rule */
.cmd-ctx .cmd-ctx-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-ctx .cmd-ctx-x { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: var(--t-2); line-height: 1; padding: 1px 4px; }
.cmd-ctx .cmd-ctx-x:hover { color: var(--soft); }
.search-bar .cmd-input { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--t-3); color: var(--ink); background: transparent; border: 0; outline: none; caret-color: var(--ink); }
.search-bar .cmd-input::placeholder { color: var(--faint); letter-spacing: 0.02em; }
.search-x { background: none; border: 0; color: var(--mute); cursor: pointer; font-size: var(--t-4); line-height: 1; padding: 2px 6px; flex-shrink: 0; }
.search-x:hover { color: var(--ink); }
.cmd-dropdown { max-height: 60vh; overflow-y: auto; }
.cmd-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 0.5px solid var(--hair); cursor: pointer; font-family: var(--mono); font-size: var(--t-2); color: var(--ink); }
.cmd-row:first-child { border-top: 0; }
.cmd-row.active, .cmd-row:hover { background: var(--hair); }
.cmd-row.active { border-left: 2px solid var(--ink); padding-left: 12px; }
.cmd-row .num { flex-shrink: 0; width: 12px; text-align: right; font-size: var(--t-1); color: var(--faint); font-variant-numeric: tabular-nums; }   /* the Reuters menu number — digits execute */
.cmd-row.active .num { color: var(--ink); }
.cmd-row .kind { font-size: var(--t-1); letter-spacing: 0.04em; color: var(--faint); background: var(--hair); padding: 2px 4px; border-radius: var(--r); flex-shrink: 0; }
/* leading civic icon for the command-bar home menu (a pro terminal function-list);
   subtle by default, ink when the row is active/hovered. */
.cmd-row .cmd-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; color: var(--soft); }
.cmd-row .cmd-ic .ic { width: 17px; height: 17px; }
.cmd-row.active .cmd-ic, .cmd-row:hover .cmd-ic { color: var(--ink); }
.cmd-row .main { flex: 1; min-width: 0; overflow: hidden; }
.cmd-row .main .label { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cmd-row .main .label mark { background: transparent; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.cmd-row .main .sec { color: var(--mute); font-size: var(--t-1); margin-top: 1px; letter-spacing: 0.02em; }
.cmd-row .arrow { color: var(--faint); flex-shrink: 0; }
.cmd-dropdown .empty-state { padding: 16px 14px; color: var(--mute); font-size: var(--t-1); }
.cmd-dropdown .empty-state .acc { color: var(--ink); }
.cmd-dropdown .cmd-hint { padding: 11px 14px; color: var(--mute); font-size: var(--t-1); line-height: 1.55; border-bottom: 0.5px solid var(--hair); }
.cmd-dropdown .cmd-hint b { color: var(--ink); font-weight: 500; }


@media print { .chrome, .dt-toggle, .lang-toggle, .conbar, .scansheet, .console, #win-layer, .dta-sheet, .dta-menu-btn, .dta-foot, .dta-toast, .dta-drawer, .dta-mine { display: none; } }

/* ============================================================
   DTA UI KIT — design-system primitives ported to our tokens.
   Button · Field · Switch · StatusTag. Theme-aware (light/dark),
   keeps our accent/DTA Serif; the spec is the DS .jsx/.prompt.md.
   ============================================================ */
/* — Button — */
.dta-btn { --_bg: var(--signal); --_fg: var(--on-signal); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-weight: 500; font-size: var(--t-2); letter-spacing: 0.01em; white-space: nowrap;   /* sentence case: tracked uppercase Cyrillic is hard to read (review T3) */
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--r); height: 36px; padding: 0 16px; cursor: pointer; text-decoration: none;
  -webkit-appearance: none; appearance: none; transition: background .12s, box-shadow .12s, color .12s, border-color .12s, transform .08s; }
.dta-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.dta-btn:active { transform: translateY(1px); }
/* off is an outline, not a paler primary */
.dta-btn[disabled], .dta-btn[aria-disabled="true"] { --_bg: transparent; --_fg: var(--mute); --_bd: var(--line); border-style: dashed; box-shadow: none; filter: none; cursor: not-allowed; pointer-events: none; }
.dta-btn--primary { }   /* a lit key, not a flat chip */
.dta-btn--primary:hover { filter: brightness(1.07); }
.dta-btn--secondary { --_bg: transparent; --_fg: var(--ink); --_bd: var(--rule); }
.dta-btn--secondary:hover { --_bd: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dta-btn--secondary[aria-pressed="true"] { --_bd: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--hair); }   /* a selection: ink with a rule */
.dta-btn--ghost { --_bg: transparent; --_fg: var(--soft); --_bd: transparent; }
.dta-btn--ghost:hover { background: var(--hair); color: var(--ink); }
.dta-btn--sm { height: 28px; padding: 0 12px; font-size: var(--t-1); }
.dta-btn--lg { height: 44px; padding: 0 24px; font-size: var(--t-3); }
.dta-btn--block { width: 100%; }
.dta-btn__ico { display: inline-flex; width: 1.05em; height: 1.05em; flex: none; }
.dta-btn__ico svg { width: 100%; height: 100%; }
/* — Field — */
.dta-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dta-field__label { font-family: var(--mono); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.02em; color: var(--soft); }
.dta-field__wrap { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--hair); border-radius: var(--r); transition: border-color .12s, box-shadow .12s; }
.dta-field__wrap:focus-within { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.dta-field__ico { display: inline-flex; color: var(--mute); flex: none; }
.dta-field__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--mono); font-size: var(--t-2); color: var(--ink); }
.dta-field__input::placeholder { color: var(--faint); }
.dta-field__hint { font-family: var(--mono); font-size: var(--t-1); color: var(--faint); }
/* an error is a heavier ink rule and a word with ×, not the accent (it is not a fall) */
.dta-field--error .dta-field__wrap { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dta-field--error .dta-field__hint { color: var(--ink); }
.dta-field--error .dta-field__hint::before { content: "× "; }
.dta-field--sm .dta-field__wrap { height: 36px; padding: 0 10px; }
/* a select: the field's row, a drawn chevron (no glyph a face might lack) */
.dta-field__wrap--select { position: relative; padding-right: 30px; }
.dta-field__wrap--select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); pointer-events: none; }
.dta-field__select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-2); color: var(--ink); -webkit-appearance: none; appearance: none; }
/* what a reader types takes the face of what it is: a figure or a code in mono (the input above), a sentence in serif */
.dta-field__wrap--area { height: auto; padding: 10px 12px; align-items: stretch; }
.dta-field__area { flex: 1 1 auto; min-width: 0; min-height: 5.5em; resize: vertical; border: 0; outline: 0; background: transparent;
  font-family: var(--serif); font-size: var(--t-4); line-height: 1.5; color: var(--ink); }
/* — Chip: a filter or a toggle among several, 28px, mono at the eyebrow size. On is ink and a rule, never the
   accent (as a pressed secondary button). Pages drew five of these (fuel, news, map, the cluster loader). — */
.dta-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dta-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-1); font-weight: 400; letter-spacing: 0; color: var(--soft);
  background: none; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; text-decoration: none;
  -webkit-appearance: none; appearance: none; transition: color .12s, border-color .12s, background .12s; }
.dta-chip:hover { color: var(--ink); border-color: var(--ink); }
.dta-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--hair); font-weight: 500; }
.dta-chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.dta-chip i { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }   /* a count, quieter than its name */
.dta-chip[aria-pressed="true"] i { color: var(--ink); }
/* — Segmented: one choice among two to six, joined (a range, a currency, a method). The edge is --line,
   the dividers --rule; the chosen one is ink and a rule. A choice the data cannot give is struck, not hidden. — */
.dta-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; vertical-align: middle; }
.dta-seg > button { height: 28px; padding: 0 12px; white-space: nowrap; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0;
  color: var(--soft); background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .12s, background .12s; }
.dta-seg > button + button { border-left: 1px solid var(--rule); }
.dta-seg > button:hover { color: var(--ink); background: var(--hair); }
.dta-seg > button[aria-pressed="true"], .dta-seg > button[aria-selected="true"] { color: var(--ink); background: var(--hair); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; }   /* a toggle presses, a tab is selected: one look */
.dta-seg > button[aria-disabled="true"] { color: var(--faint); background: none; text-decoration: line-through; text-decoration-thickness: 1px; cursor: default; }
.dta-seg > button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.dta-seg--md > button { height: 36px; padding: 0 14px; font-size: var(--t-2); }
/* — Select: a choice from a list in a row of controls: the control's edge and height, a drawn chevron.
   A select takes no ::after, so the span around it draws one. In a form, .dta-field__wrap--select. — */
.dta-select { position: relative; display: inline-flex; max-width: 100%; min-width: 0; }
.dta-select select { height: 36px; max-width: 100%; min-width: 0; padding: 0 30px 0 10px; font-family: var(--mono); font-size: var(--t-2);
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.dta-select select:hover { border-color: var(--ink); }
.dta-select select:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.dta-select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); pointer-events: none; }
/* — Switch — */
.dta-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.dta-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dta-switch__track { position: relative; width: 42px; height: 22px; flex: none; border-radius: var(--r); background: color-mix(in srgb, var(--ink) 10%, transparent); border: 1px solid var(--rule); transition: background .12s, border-color .12s, box-shadow .12s; }   /* a square LED slot, not an iOS pill */
.dta-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r); background: var(--mute); transition: transform .14s cubic-bezier(0.3,0.8,0.4,1), background .12s; }   /* a key that travels */
/* on is ink: a selection, not a signal */
.dta-switch input:checked + .dta-switch__track { background: var(--hair); border-color: var(--ink); }
.dta-switch input:checked + .dta-switch__track .dta-switch__thumb { transform: translateX(20px); background: var(--ink); }
.dta-switch input:focus-visible + .dta-switch__track { outline: 2px solid var(--signal); outline-offset: 2px; }
.dta-switch--disabled { opacity: .45; cursor: not-allowed; }
.dta-switch__label { font-family: var(--mono); font-size: var(--t-2); color: var(--soft); }
/* — StatusTag — */
.dta-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  font-family: var(--mono); font-size: var(--t-1); font-weight: 500; letter-spacing: 0.02em; white-space: nowrap;
  border-radius: var(--r); border: 1px solid var(--_bd, var(--rule)); color: var(--_fg, var(--soft)); background: var(--_bg, transparent); }
.dta-tag__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
/* text mixed toward --ink so it passes AA on the tint in BOTH themes (darkens in light, lightens in dark) — ANALYST a11y */
.dta-tag--ok { --_fg: color-mix(in srgb, var(--signal) 62%, var(--ink)); --_bd: color-mix(in srgb, var(--signal) 45%, transparent); --_bg: color-mix(in srgb, var(--signal) 12%, transparent); }   /* live, verified: the signal. Green is a rise. */
.dta-tag--alert { --_fg: var(--ink); --_bd: var(--ink); --_bg: transparent; }   /* an alert is ink with a full rule; the accent is not a warning colour */
.dta-tag--info { --_fg: var(--soft); --_bd: var(--line); --_bg: transparent; }   /* information is ink; no hue of its own */
.dta-tag--amber { --_fg: var(--stale-ink); --_bd: color-mix(in srgb, var(--stale) 48%, transparent); --_bg: color-mix(in srgb, var(--stale) 14%, transparent); }

/* — Readers and the two clocks (web/design/next/DESIGN.md §2, §4) — the citizen
   WRITE controls and what comes back. Every action is signed by the device key
   (interaction:v0, /system/sign.js) and sent to /ingest. Pending and signed are
   a SHAPE grammar, never a new hue: ○ hollow + a dashed rule = pending (counted
   at once); ● filled + a solid rule = in the signed record (after the next
   sync). The reader's own choice is ink with a rule and aria-pressed. ─── */
.dta-readers { display: grid; gap: var(--s-2); font-family: var(--mono); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 0.5px solid var(--hair); }
.dta-readers[hidden] { display: none; }
.dta-readers.busy { opacity: 0.6; pointer-events: none; }
.dta-readers__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s-3); }
.dta-readers__lbl { font-size: var(--t-1); color: var(--mute); flex: none; }
.dta-readers__st, .dta-readers__avg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); font-size: var(--t-1); color: var(--mute); font-variant-numeric: tabular-nums; }
.dta-readers__avg .num { color: var(--ink); }
.dta-readers__first { color: var(--soft); }
.dta-readers__note { font-size: var(--t-1); color: var(--ink); }
.dta-readers__note .err { font-weight: 600; }
/* ✓ зөв / ? маргаантай: one segmented pair */
.dta-sig { display: inline-flex; align-items: center; }
.dta-sig button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); background: transparent;
  cursor: pointer; font-family: var(--mono); font-size: var(--t-1); color: var(--soft); font-variant-numeric: tabular-nums; }
.dta-sig button + button { margin-left: -1px; }
.dta-sig button:hover { border-color: var(--ink); color: var(--ink); position: relative; }
.dta-sig button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; position: relative; }
.dta-sig button[aria-pressed="true"] { border: 1px dashed var(--ink); color: var(--ink); font-weight: 500; position: relative; }
.dta-sig button[aria-pressed="true"].is-signed { border-style: solid; }
.dta-sig .gl { font-size: var(--t-2); }
.dta-sig .num { color: var(--ink); }
.dta-sig .num:empty { display: none; }
@media (max-width: 560px) { .dta-sig button { min-height: 36px; padding: 0 12px; } }
/* the 1–5 rating: a level meter in ink; the reader's own level dashed while pending */
.dta-rate { display: inline-flex; align-items: center; gap: 3px; }
.dta-rate button { position: relative; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  background: color-mix(in srgb, var(--ink) 7%, transparent); -webkit-tap-highlight-color: transparent; }
.dta-rate button::after { content: attr(data-r); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--t-1); color: var(--mute); }
.dta-rate button:hover { border-color: var(--soft); }
.dta-rate button:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.dta-rate button.on { background: var(--ink); border-color: var(--ink); }
.dta-rate button.on::after { color: var(--bg); }
.dta-rate button.on.is-pending { background: var(--hair); border: 1px dashed var(--ink); }
.dta-rate button.on.is-pending::after { color: var(--ink); }
@media (max-width: 560px) { .dta-rate button { width: 32px; height: 32px; } }
/* a dispute is a correction: the reason form under the pair */
.dta-fix { display: grid; gap: var(--s-3); padding: var(--s-3); background: var(--well); border-left: 2px solid var(--ink); }
.dta-fix[hidden] { display: none; }
.dta-fix__q { margin: 0; font-family: var(--serif); font-size: var(--t-3); line-height: 1.4; color: var(--ink); }
.dta-fix__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.dta-fix__full { grid-column: 1 / -1; }
@media (max-width: 520px) { .dta-fix__grid { grid-template-columns: minmax(0, 1fr); } }
.dta-fix__act { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* ○ pending · ● signed · × not taken: shape plus a word */
.dta-pend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-1); color: var(--soft); font-variant-numeric: tabular-nums; }
.dta-pend::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.dta-pend.is-signed::before { background: currentColor; }
.dta-pend.is-refused::before { content: "×"; width: auto; height: auto; border: 0; border-radius: 0; line-height: 1; }
a.dta-pend { color: var(--soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; min-height: 24px; }
a.dta-pend:hover { color: var(--ink); }
/* the receipt: five steps, reader clock then record clock */
.dta-receipt { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.dta-receipt li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; font-size: var(--t-1); line-height: 1.45; color: var(--mute); }
.dta-receipt li::before { content: ""; width: 9px; height: 9px; margin: 3px 0 0 1px; border-radius: 50%; border: 1.5px solid var(--faint); box-sizing: border-box; }
.dta-receipt li.done { color: var(--ink); }
.dta-receipt li.done::before { background: var(--ink); border-color: var(--ink); }
.dta-receipt li.now::before { border-color: var(--ink); }
.dta-receipt li.refused { color: var(--ink); }
.dta-receipt li.refused::before { border-style: dashed; border-color: var(--ink); }
.dta-receipt li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -4px; width: 1px; background: var(--grid); }
.dta-receipt .t, .dta-receipt .num { font-variant-numeric: tabular-nums; color: var(--mute); }
.dta-receipt .num { word-break: break-all; }
/* the pending counter in the top bar: exists only while the reader has something in flight */
.dta-mine { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 28px; padding: 0 8px; border: 1px dashed var(--ink); background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: var(--t-2); font-variant-numeric: tabular-nums; cursor: pointer; }
.dta-mine[hidden] { display: none; }
.dta-mine:hover { background: var(--hair); }
.dta-mine .dta-pend { color: var(--ink); }
@media (max-width: 560px) { .dta-mine { min-height: 36px; } }
/* the toast: the page's one polite live region; empty, it takes no room */
.dta-toast { position: fixed; left: 50%; bottom: var(--s-4); z-index: 90; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--s-4));
  font-family: var(--mono); font-size: var(--t-2); line-height: 1.45; }
.dta-toast__m { display: block; padding: 10px 14px; background: var(--ink); color: var(--bg); }
.dta-toast a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 24px; align-items: center; }
.dta-toast .dta-pend { color: var(--bg); vertical-align: middle; }
/* the drawer: «Миний оролцоо»; a bottom sheet on a phone, a right sheet from 900px */
.dta-drawer { position: fixed; inset: 0; z-index: 86; }
.dta-drawer[hidden] { display: none; }
.dta-drawer__back { position: absolute; inset: 0; background: rgba(14,17,22,0.36); }
:root[data-theme="dark"] .dta-drawer__back { background: rgba(0,0,0,0.55); }
.dta-drawer__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--lift); color: var(--ink); border-top: 1px solid var(--rule); font-family: var(--mono); }
@media (min-width: 900px) { .dta-drawer__panel { left: auto; top: 0; width: 460px; max-height: none; border-top: 0; border-left: 1px solid var(--rule); } }
.dta-drawer__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  height: 56px; padding: 0 var(--s-4); background: var(--lift); border-bottom: 1px solid var(--rule); }
.dta-drawer__head h2 { margin: 0; font: 500 var(--t-3) var(--mono); }
.dta-drawer__body { padding: var(--s-3) var(--s-4) var(--s-6); }
.dta-drawer__lede, .dta-drawer__empty { margin: 0 0 var(--s-3); font-size: var(--t-2); line-height: 1.5; color: var(--soft); }
.dta-drawer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grid); }
.dta-drawer__list > li { padding: var(--s-3) 0; border-bottom: 1px solid var(--grid); }
.dta-drawer__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--t-2); }
.dta-drawer__row b { font-weight: 500; }
.dta-drawer__lbl { margin: 2px 0 0; font-family: var(--serif); font-size: var(--t-3); line-height: 1.35; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .dta-drawer:not([hidden]) .dta-drawer__panel { animation: dta-sheet-in 0.18s cubic-bezier(0.2,0.7,0.3,1); }
}

/* — Text figure (.txtwin) — shugam·text set in the SURFACE'S material (BOB:
   "the plot shall be TeX-like"): on PAPER pages + workspace windows it is INK
   ON PAPER — a TeX figure set in type (braille + box rules, hairline framing).
   PHOSPHOR is reserved for the true display surfaces (/led styles its own pre;
   /board). The material follows the surface, never the renderer. */
.txtwin { margin: 0; padding: 14px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--grid); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t-2); line-height: 1.35; white-space: pre; overflow: auto;
  font-variant-numeric: tabular-nums; }
.txtwin .dim { color: var(--mute); }

/* — Fit controls — standalone display surfaces (led/embeds on a wall): quiet
   corner buttons, full opacity on hover; never shown inside an iframe */
.fitctl { position: fixed; right: 10px; bottom: 10px; z-index: 90; display: flex; gap: 4px; opacity: 0.25; transition: opacity 0.2s; }
.fitctl:hover, .fitctl:focus-within { opacity: 1; }
.fitctl button { font-family: var(--mono); font-size: var(--t-1); min-width: 30px; height: 26px; cursor: pointer;
  color: var(--mute); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
.fitctl button:hover { color: var(--ink); border-color: var(--soft); }

/* — Distro — Display · Embed · Share (the distribution affordance) */
.distro { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ─── THE SIGNAL PROTOCOL · motion vocabulary (canonical: web/DESIGN_SYSTEM.md).
   Every animation signals a STATE — nothing loops decoratively. The closed set:
     dta-flip   "this value CHANGED"     — per-digit flap flip, fires once
     cs-blink   "ready for input"        — the command-bar caret only
     dta-blink  "connected / receiving"  — the live dot (one per surface max)
     figflash   "new signed obs arrived" — cell flash, once per event
     dta-dots   "working"                — loading ellipsis
   Durations: state flips ≤ 350ms; blinks ≥ 1.15s period; nothing in between.
   Every member dies under prefers-reduced-motion. ─── */
@keyframes dta-flip { 0% { transform: rotateX(-90deg); } 55% { transform: rotateX(7deg); } 100% { transform: rotateX(0); } }
.flap-c.flip { animation: dta-flip 0.32s cubic-bezier(0.3,0.8,0.4,1) both; }
.dta-dots::after { content: '···'; display: inline-block; overflow: hidden; vertical-align: bottom; animation: dta-dots 1.2s steps(4, jump-none) infinite; width: 0; }
@keyframes dta-dots { to { width: 1.4em; } }
@media (prefers-reduced-motion: reduce) {
  .flap-c.flip { animation: none !important; }
  .dta-dots::after { animation: none; width: 1.4em; }
}

/* ─── STORY CARD — the atomic comprehension unit (ANALYST spec 2026-06-19).
   Self-contained on dta.css tokens so it ports to landing panels, /c heroes,
   /d, /board. icon · big number (count-up) · direction glyph (NEVER colour-
   alone — the ▲/▼ carries it, colour reinforces) · spark (draw-in) · plain-MN
   so-what · relatable signed-anchor units (tap to cycle) · verify→/d. Every
   motion dies under prefers-reduced-motion. ─── */
.story-card { position: relative; }
.sc-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.sc-ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--soft); align-self: center; }
.sc-lbl { font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.01em; color: var(--ink); font-weight: 500; }
.sc-aside { margin-left: auto; text-align: right; font-family: var(--mono); }
.sc-numrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sc-num { font-family: var(--mono); font-weight: 600; font-size: clamp(30px, 6.2vw, 46px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-unit { font-family: var(--mono); font-size: 0.4em; color: var(--mute); font-weight: 400; margin-left: 3px; }
.sc-dir { font-family: var(--mono); font-size: var(--t-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.sc-gl { font-size: 0.85em; }
.sc-dir.up { color: var(--up); }       /* rose — direction only, never "good" */
.sc-dir.dn { color: var(--accent); }   /* fell — direction only, never "bad" */
.sc-dir-w { color: var(--faint); font-size: 0.85em; }
.sc-spark { display: block; width: 100%; height: 34px; margin: 11px 0 2px; color: var(--mute); }
.sc-spark.up { color: var(--up); } .sc-spark.dn { color: var(--accent); }   /* tint = the sign of the move, nothing else */
.sc-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.sc-line { font-family: var(--serif); font-size: var(--t-3); line-height: 1.45; color: var(--soft); margin: 8px 0 0; }
.sc-line .sc-draft { font-style: italic; color: var(--faint); }   /* MN copy pending BOB-commit */
/* the relatable bridge — the bass: a ₮ value spoken in things people hold */
.sc-rel { display: inline-flex; align-items: baseline; gap: 7px; margin: 11px 0 0; padding: 7px 11px; background: var(--well); border: 1px solid var(--grid); border-radius: var(--r); font-family: var(--mono); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 24px; }
.sc-rel:hover { border-color: var(--rule); }
.sc-rel:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.sc-rel-ap { color: var(--mute); font-size: var(--t-2); }
.sc-rel-n { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sc-rel-u { font-size: var(--t-2); color: var(--soft); }
.sc-rel-cyc { margin-left: 4px; color: var(--mute); font-size: var(--t-2); }
.sc-rel.swap .sc-rel-n, .sc-rel.swap .sc-rel-u { animation: sc-relswap 0.34s ease; }
.sc-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-family: var(--mono); font-size: var(--t-1); letter-spacing: 0.02em; color: var(--mute); }
.sc-foot .sc-verify { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); text-decoration: none; }
.sc-foot .sc-verify:hover { color: var(--ink); }
.sc-foot .sc-qr { width: 13px; height: 13px; }
.sc-foot .sc-asof { margin-left: auto; }
.sc-foot .sc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; }
.sc-foot .sc-dot.stale { background: var(--faint); }
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sc-relswap { 0% { opacity: 0.25; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sc-spark.draw polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-draw 0.9s ease 0.05s forwards; }
}

/* a shugam figure drawn in its box's own pixels (dta.chart {fit}, dta.geom):
   one user unit = one CSS px, so labels hold the 11px floor at any width */
.swc.fit { width: 100%; height: auto; }
.swc.fit .lbl { font-size: var(--t-1); letter-spacing: 0; }
.swc.fit .vtagt { font-size: var(--t-1); }
.swc.fit .ax { stroke-width: 0.6; }
.swc.fit .ln { stroke-width: 1.5; }
.swc.fit .gr { stroke-width: 0.6; }

/* ─── the registry chrome (web/sections.json → base.html.j2) ──────────────────
   Цэс (the row's, or the top bar's once the row is gone) opens .dta-sheet, every section grouped; the
   breadcrumb (.crumb) is the page's parent chain; .dta-foot closes every page.
   On a phone, language and theme leave the top bar for the sheet. ─── */
.dta-menu-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 28px; min-width: 28px; padding: 0 6px;
  background: transparent; border: 1px solid transparent; color: var(--ink); font-family: var(--mono); font-size: var(--t-2); cursor: pointer; }
.dta-menu-btn:hover { border-color: var(--rule); }
.dta-menu-btn .ic { width: 16px; height: 16px; }
.dta-menu-btn[aria-expanded="true"] { border-color: var(--ink); }
/* one menu: the row ends in its own ≡, and the top bar's ≡ shows only once the row
   has scrolled away (dta.js sectionSheet): one trigger on screen at a time */
.secnav { display: flex; align-items: center; }
.secnav ul { flex: 1 1 auto; min-width: 0; }
.secnav-all { margin: 0 10px 0 2px; }
.chrome .dta-menu-btn { display: none; }
html.secnav-off .chrome .dta-menu-btn { display: inline-flex; }
@media (max-width: 560px) {
  .dta-menu-btn { min-width: 36px; min-height: 36px; justify-content: center; }
  .dta-menu-btn .w { display: none; }
  .chrome .lang-toggle, .chrome .dt-toggle { display: none; }
}
/* the breadcrumb's ancestors need room; below 1100px the page's own name stands alone */
.chrome .crumb a { color: var(--mute); }
.chrome .crumb a:hover { color: var(--ink); }
@media (max-width: 1099px) { .chrome .crumb .up { display: none; } }

.dta-sheet { position: fixed; inset: 0; z-index: 85; }
.dta-sheet__back { position: absolute; inset: 0; background: rgba(14,17,22,0.36); }
:root[data-theme="dark"] .dta-sheet__back { background: rgba(0,0,0,0.55); }
.dta-sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--lift); color: var(--ink); border-left: 1px solid var(--rule); font-family: var(--mono); }
@media (min-width: 900px) { .dta-sheet__panel { width: 760px; } }
.dta-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  height: 56px; padding: 0 var(--s-4); background: var(--lift); border-bottom: 1px solid var(--rule); }
.dta-sheet__head h2 { margin: 0; font: 500 var(--t-3) var(--mono); }
.dta-sheet__x { min-width: var(--tap); min-height: var(--tap); background: transparent; border: 1px solid transparent; color: var(--ink); font-size: var(--t-4); cursor: pointer; }
.dta-sheet__x:hover { border-color: var(--rule); }
.dta-sheet__groups { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--s-2) var(--s-4) var(--s-5); }
@media (min-width: 900px) { .dta-sheet__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
.dta-sheet__group h3 { margin: var(--s-5) 0 var(--s-2); font: 400 var(--t-1) var(--mono); letter-spacing: 0.04em; color: var(--mute); }
.dta-sheet__group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grid); }
.dta-sheet__group a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); min-height: var(--tap); padding: 10px 0;
  border-bottom: 1px solid var(--grid); color: var(--ink); text-decoration: none; }
.dta-sheet__group a:focus-visible { outline-offset: -2px; }
.dta-sheet__group .n { font-family: var(--serif); font-size: var(--t-4); line-height: 1.25; }
.dta-sheet__group .u { align-self: center; font-size: var(--t-1); color: var(--mute); white-space: nowrap; }
.dta-sheet__group .d { grid-column: 1 / -1; font-size: var(--t-1); line-height: 1.45; color: var(--mute); }
.dta-sheet__group a:hover .n { text-decoration: underline; text-underline-offset: 4px; }
.dta-sheet__group a[aria-current] .n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dta-sheet__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-4) var(--s-6); }
@media (max-width: 560px) { .dta-sheet__tools .dta-btn { height: var(--tap); } }
html.dta-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .dta-sheet:not([hidden]) .dta-sheet__panel { animation: dta-sheet-in 0.18s cubic-bezier(0.2,0.7,0.3,1); }
}
@keyframes dta-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.dta-foot { margin: var(--s-7) 0 0; padding: var(--s-4) 14px var(--s-5); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-1); color: var(--mute); }
.dta-foot p { margin: 0; max-width: 72ch; line-height: 1.5; font-family: var(--serif); font-size: var(--t-3); color: var(--soft); }   /* a sentence is DTA Serif */
/* ─── the figure kit (dta.viz; /kit has a specimen of each) ─── a mark takes its colour from --pt, set by
   the class its entity carries; with none it is ink. Words stay in text tokens: a colour is never on a word. */
.pt-mpp { --pt: var(--pt-mpp); } .pt-dp { --pt: var(--pt-dp); } .pt-hun { --pt: var(--pt-hun); } .pt-cwgp { --pt: var(--pt-cwgp); } .pt-nc { --pt: var(--pt-nc); } .pt-other { --pt: var(--faint); }
.tone-1 { --pt: var(--c1); } .tone-2 { --pt: var(--c2); } .tone-3 { --pt: var(--c3); } .tone-4 { --pt: var(--c4); }
.vz svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.vz text { font-family: var(--mono); font-size: var(--t-1); fill: var(--mute); }
.vz .lb { fill: var(--soft); }
.vz .base { stroke: var(--grid); }
.vz .tick { stroke: var(--grid); stroke-dasharray: 2 3; }
.vz .rule { stroke: var(--mute); }
.vz .half { stroke: var(--mute); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.vz .dot, .vz .seat { fill: var(--pt, var(--ink)); stroke: var(--pt, var(--ink)); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.vz .dot[data-k], .vz .seat[data-k], .vz .reg[data-k], .vz .hit { cursor: pointer; }
.vz .dot.open { fill: var(--bg); }
.vz .dot.sep { stroke: var(--bg); stroke-width: 1.5px; }   /* marks that may overlap keep a ring of the surface */
.vz .dot.pick { fill: var(--ink); stroke: var(--ink); }
.vz .dot[data-k]:hover, .vz .seat[data-k]:hover { stroke: var(--ink); stroke-width: 2.4px; }
.vz .me { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.vz .cell { fill: var(--pt, var(--ink)); }
.vz .cell.open { fill: var(--bg); stroke: var(--pt, var(--ink)); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.vz .vz-grid.narrow .cell.open { fill: color-mix(in srgb, var(--pt, var(--ink)) 40%, var(--bg)); stroke: none; }
.vz .cell.soft { fill: var(--rule); }
.vz .cell.none { fill: none; stroke: var(--rule); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.vz .hit { fill: var(--ink); fill-opacity: 0; }
.vz .hit:hover { fill-opacity: 0.1; }
.vz .reg { fill: var(--well); stroke: var(--bg); stroke-width: 0.8px; }
.vz .reg.tint { fill: color-mix(in srgb, var(--pt, var(--ink)) 24%, var(--bg)); }
.vz .reg[data-k]:hover { stroke: var(--ink); }
.vz .mk { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; fill: var(--ink); }
.vz-leg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: var(--t-2); }
.vz-leg li { display: flex; align-items: center; gap: 6px; }
.vz-leg svg { width: 11px; height: 11px; flex: none; overflow: visible; }
.vz-leg .n { font-variant-numeric: tabular-nums; color: var(--soft); }
.vz-sw { display: inline-block; width: 8px; height: 8px; margin-right: 5px; background: var(--pt, var(--ink)); vertical-align: 0; }
.vz-dots { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.vz-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--pt, var(--ink)); }
.vz-bars { border-top: 1px solid var(--ink); }
.vz-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 40px; gap: 4px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.vz-bar .t { font-family: var(--serif); font-size: var(--t-3); line-height: 1.35; min-width: 0; }
.vz-bar .t a { color: inherit; text-decoration: none; display: inline-block; }
.vz-bar .t a:hover { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.vz-bar .t small { display: block; font-size: var(--t-2); color: var(--soft); margin-top: 1px; }
.vz-bar .b { display: flex; gap: 2px; height: 10px; min-width: 3px; }
.vz-bar .b i { display: block; min-width: 2px; background: var(--pt, var(--ink)); }
.vz-bar .n { text-align: right; font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.vz-many { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-5); }
.vz-fig { margin: 0; min-width: 0; }
.vz-fig figcaption { font-size: var(--t-2); margin-bottom: var(--s-2); }
.vz-fig figcaption a { color: var(--ink); text-decoration: none; }
.vz-fig figcaption a:hover { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.vz-fig .m { font-family: var(--mono); font-size: var(--t-1); color: var(--mute); }
.vz-fig .swc .ln { stroke: var(--pt, var(--ink)); stroke-width: 1.4; }
.vz-fig .swc .ar { fill: var(--pt, var(--ink)); fill-opacity: 0.1; }
.vz-fig .swc .pt { fill: var(--pt, var(--ink)); }
@media (max-width: 720px) {
  .vz-bar { grid-template-columns: minmax(0, 1fr) 40px; }
  .vz-bar .t { grid-column: 1 / -1; }
}
.vz .reg.shade { fill: var(--ink); fill-opacity: calc(0.06 + 0.5 * var(--k, 0)); }   /* a magnitude: one hue, light to dark, --k in 0..1 */
.vz-leg li.ramp svg { width: 40px; }
/* lines: several series on one axis, a tone each, named at the end */
.vz .vl { fill: none; stroke: var(--pt, var(--ink)); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.vz .vl.dash, .vz .vle.dash { stroke-dasharray: 5 3; }
.vz .vle { stroke: var(--pt, var(--ink)); stroke-width: 2px; }
.vz .vlp { fill: var(--pt, var(--ink)); }
.vz .vlt { fill: var(--ink); font-weight: 600; }
.vz .vlt[data-k] { cursor: pointer; }
.vz .vlt[data-k]:hover { text-decoration: underline; }
.vz .ax { stroke: var(--ink); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
.vz .gr { stroke: var(--hair); stroke-width: 0.5px; stroke-dasharray: 1 2; vector-effect: non-scaling-stroke; }
.vz .base.ref { stroke: var(--rule); stroke-dasharray: 3 3; }
.vz .col { fill: var(--ink); fill-opacity: 0; }
.vz .col:hover { fill-opacity: 0.07; }
.vz .reg.me { stroke: var(--ink); stroke-width: 2px; }
.vz-famap { max-width: 620px; margin-top: var(--s-3); }
.vz .halo { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }   /* a word over lines keeps a ring of the surface */