/* ── app-core.css ── */
/* ── /about/physics — the instrument. The paper's type and ink on a working surface: a
   rail of flows, a stage, and a bar that searches every number in the study. The panels
   are a warm neutral biased a shade toward the accent, so the ground reads as chosen and
   the one red stays the only colour that means anything. ── */
:root {
  --accent: #8a2f2f;
  --blue: #326891;
  --panel: #f7f6f4;      /* rail and instrument ground: warm, a hair toward the accent */
  --hair: #e6e3e0;       /* hairline on the panel */
  --appbar-h: 56px;
}
body.appbody-host { background: var(--paper); }
#app { min-height: 100vh; }

/* the bar ------------------------------------------------------------------- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto;
  align-items: center; gap: 20px;
  height: var(--appbar-h); padding: 0 20px;
  background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--rule-strong);
}
.brand { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--ink); }
.brand .bmark { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.1; letter-spacing: -.01em; }
.brand .bsub { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.brand:hover .bmark { color: var(--accent); }
.askwrap { position: relative; }
input.ask {
  width: 100%; height: 34px; padding: 0 12px;
  font: 400 14px var(--sans); color: var(--ink);
  background: var(--panel); border: 1px solid var(--hair); border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
input.ask:focus { outline: none; border-color: var(--ink); background: var(--paper); }
input.ask::placeholder { color: var(--faint); }
.askout {
  position: absolute; top: 38px; left: 0; right: 0; z-index: 50;
  max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.askrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 12px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.askrow:last-child { border-bottom: 0; }
.askrow:hover, .askrow.on { background: var(--panel); }
.askrow .atype { font: 500 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.askrow .alabel { font: 500 13.5px var(--sans); }
.askrow .avalue { font: 500 13.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); }
.askrow .asub { grid-column: 2 / -1; font: 400 12px var(--sans); color: var(--gray); }
.askmiss { padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.askmiss .amlabel { font: 600 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.askmiss p { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--ink-2); }
.askempty { padding: 12px; font: 400 13px var(--sans); color: var(--gray); }
.barlinks { display: flex; gap: 18px; }
.barlinks a { font: 500 12px var(--sans); letter-spacing: .02em; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.barlinks a:hover { color: var(--accent); }

/* the rail ------------------------------------------------------------------ */
.appbody { display: grid; grid-template-columns: 258px minmax(0, 1fr); max-width: 1360px; margin: 0 auto; }
.rail {
  position: sticky; top: var(--appbar-h); align-self: start;
  height: calc(100vh - var(--appbar-h)); overflow-y: auto;
  padding: 16px 14px 40px; border-right: 1px solid var(--rule);
  background: linear-gradient(to right, var(--panel), var(--panel) 96%, transparent);
}
.railhead { font: 600 10px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 18px 0 6px; padding-left: 8px; }
.railhome, .railrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 6px 8px; text-decoration: none; color: var(--ink-2); border-left: 2px solid transparent;
}
.railhome { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.railrow .rname { font: 400 13.5px var(--sans); line-height: 1.3; }
.railrow .rnum { font: 500 12px var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); text-align: right; }
.railrow:hover, .railhome:hover { color: var(--ink); background: rgba(255, 255, 255, .8); }
.railrow.here, .railhome.here { border-left-color: var(--accent); color: var(--ink); background: var(--paper); }
.railrow.here .rname { font-weight: 500; }
.railrow.here .rnum { color: var(--accent); }
.railfoot { font: 400 11px/1.5 var(--sans); color: var(--faint); margin: 26px 0 0; padding-left: 8px; }

/* the stage ----------------------------------------------------------------- */
.stage { padding: 30px 34px 100px; max-width: 940px; min-width: 0; }
.stage:focus { outline: none; }
.stage h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 10px; text-wrap: balance; }
.stage .question { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--ink-2); max-width: 62ch; margin: 0 0 18px; }
.stage .headline { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong); }
.stage .hnum { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5.2vw, 50px); line-height: 1; }
.stage .hlabel { font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 54ch; }
.stage .section-label { font: 600 10.5px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gray); margin: 0 0 10px; }
.stage .muted { font-family: var(--sans); font-size: 13px; color: var(--gray); }
.stage .loading { font-style: italic; }

/* the console --------------------------------------------------------------- */
.console .chead { margin-bottom: 22px; }
.console .clede { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; margin: 0; }
.livestrip { border: 1px solid var(--ink); background: var(--panel); padding: 14px 16px 12px; margin: 0 0 26px; }
.liveheadline { font: 600 10.5px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.liveheadline::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: middle; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px 18px; }
.tile { padding: 4px 0 2px; }
.tile.empty { opacity: .35; }
.tile .tvalue { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .tlabel { font: 400 11px var(--sans); letter-spacing: .04em; color: var(--gray); margin-top: 1px; }
.tile .tspark { height: 26px; margin-top: 2px; }
.tile .tspark svg { width: 100%; height: 26px; display: block; }
.livestamp { font: 400 11.5px var(--sans); color: var(--gray); margin: 10px 0 0; }
.livestamp a { color: var(--accent); text-decoration: none; }
.flowgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.flowcard { display: block; padding: 14px 16px 16px; background: var(--paper); text-decoration: none; color: var(--ink); }
.flowcard:hover { background: var(--panel); }
.flowcard .fckicker { font: 600 9.5px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.flowcard h2 { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.15; margin: 3px 0 8px; letter-spacing: -.01em; }
.flowcard .fcnum { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.flowcard .fclabel { font: 400 12px/1.45 var(--sans); color: var(--gray); margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.flowcard .fcspark { height: 40px; margin-top: 10px; }
.flowcard .fcspark svg { width: 100%; height: 40px; display: block; }
.flowcard .fcwidgets { font: 500 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.questions { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule-strong); }
.qlist { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 9px 2px; background: var(--paper); text-decoration: none; }
.qrow:hover { background: var(--panel); }
.qrow .qq { font-family: var(--serif); font-size: 16px; line-height: 1.35; color: var(--ink); }
.qrow .qc { font: 400 11.5px var(--sans); color: var(--faint); text-align: right; white-space: nowrap; }
.nots { margin-top: 26px; }
.nots p { font: 400 13px/1.55 var(--sans); color: var(--gray); max-width: 76ch; margin: 0; }

/* a flow -------------------------------------------------------------------- */
.flowhead { margin-bottom: 24px; }
.models { margin: 0 0 30px; }
.model { border: 1px solid var(--ink); background: var(--panel); padding: 16px 18px 18px; margin-bottom: 14px; position: relative; }
.model .mtitle { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.15; margin: 0 0 4px; }
.model .mquestion { font: 400 13px var(--sans); color: var(--gray); margin: 0 0 14px; }
.model .mbody { position: relative; }
.dial { margin: 0 0 14px; position: relative; }
.dialhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* the site's map sheet claims .dlabel for a round day marker; the instrument's dial label
   is a word, so it is reset here once for every widget rather than in each of their sheets */
#app .dlabel {
  display: block; width: auto; height: auto; min-width: 0; border-radius: 0;
  background: none; border: 0; text-align: left;
  font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
}
.dial .dout { font-family: var(--sans); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
input.drange { width: 100%; height: 22px; margin: 2px 0 0; background: transparent; appearance: none; -webkit-appearance: none; }
input.drange:focus { outline: none; }
input.drange::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
input.drange::-moz-range-track { height: 2px; background: var(--ink); }
input.drange::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 11px; height: 18px; background: var(--accent); border: 0; border-radius: 0; margin-top: -8px; cursor: ew-resize; }
input.drange::-moz-range-thumb { width: 11px; height: 18px; background: var(--accent); border: 0; border-radius: 0; cursor: ew-resize; }
input.drange:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.dmarks { position: relative; height: 15px; }
.dmark { position: absolute; transform: translateX(-50%); top: 0; background: none; border: 0; padding: 0 3px; cursor: pointer; font: 400 10px var(--sans); color: var(--faint); white-space: nowrap; }
.dmark::before { content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px; background: var(--faint); }
.dmark:hover { color: var(--accent); }
.dnote, .pnote { font: 400 12px/1.5 var(--sans); color: var(--gray); margin: 8px 0 0; max-width: 76ch; }
.readout { margin: 0 22px 10px 0; display: inline-block; vertical-align: top; }
.readout .rvalue { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.readout .rlabel { font: 400 11.5px/1.35 var(--sans); color: var(--gray); max-width: 26ch; margin-top: 2px; }
.readout.accent .rvalue { color: var(--accent); }
.panel { border: 1px solid var(--hair); background: var(--paper); padding: 12px 14px; margin: 0 0 14px; }
.panel .phead h3 { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); margin: 0 0 8px; }
.stage .reading { margin: 26px 0 0; }
.stage .reading p { font-family: var(--body); font-size: 17.5px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; margin: 0 0 13px; }
.stage .limits { margin: 22px 0 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; }
.stage .limits ul { margin: 6px 0 0; padding-left: 1.2em; }
.stage .limits li { margin-bottom: 5px; }
.stage .numbers { margin: 22px 0 0; font-family: var(--sans); font-size: 13px; }
.stage .numbers summary { cursor: pointer; color: var(--gray); }
.stage .numbers summary:hover { color: var(--ink); }
.sfacts div.flash { background: #fbf1f1; }
.flowfoot { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.flowfoot .method { font: 400 12.5px/1.55 var(--sans); color: var(--gray); max-width: 80ch; margin: 0 0 8px; }
.flowfoot .sources { font: 400 11.5px var(--sans); color: var(--gray); margin: 0 0 10px; }
.flowfoot .lawchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.flowfoot .lawchips a { font: 400 11.5px var(--sans); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; color: var(--ink-2); text-decoration: none; }
.flowfoot .lawchips a:hover { border-color: var(--ink); }
.flownav { display: flex; justify-content: space-between; gap: 16px; margin: 34px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.flownav a { font-family: var(--serif); font-size: 16px; color: var(--ink); text-decoration: none; }
.flownav a:hover { color: var(--accent); }
.flownav .next { margin-left: auto; text-align: right; }

/* figures inside the app inherit the paper's rules; only the frame differs */
.stage figure.fig { margin: 20px 0 26px; }
.model figure.fig { margin: 12px 0 0; }

@media (max-width: 1000px) {
  .appbody { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; height: auto; overflow: visible;
    display: flex; gap: 2px; align-items: center; overflow-x: auto;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--rule);
    -webkit-overflow-scrolling: touch;
  }
  .rail .railhead, .rail .railfoot { display: none; }
  .railhome, .railrow { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; padding: 5px 10px; }
  .railrow .rnum { display: none; }
  .railrow.here, .railhome.here { border-left: 0; border-bottom-color: var(--accent); }
  .stage { padding: 22px 18px 80px; }
  .qrow { grid-template-columns: 1fr; gap: 2px; }
  .qrow .qc { text-align: left; }
  .qrow .qq { font-size: 15.5px; }
  .appbar { grid-template-columns: 1fr auto; gap: 10px; height: auto; padding: 8px 14px; }
  .askwrap { grid-column: 1 / -1; grid-row: 2; }
  .barlinks a:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .liveheadline::before { animation: none; } }

/* ── app-explorers.css ── */
/* ── app-explorers.css — the record explorers ────────────────────────────────────
   Working tools, so the density is high: hairlines instead of boxes, tabular figures,
   agate labels in small caps, one accent. Everything is scoped to .model and
   .instrument so no other widget inherits it. */

.model .exnote, .instrument .exnote {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--gray);
  max-width: 82ch; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--hair, var(--rule));
}
.model .exsmall, .instrument .exsmall { font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--gray); margin: 6px 0 0; max-width: 84ch; }
.model .exmuted, .instrument .exmuted { font-family: var(--sans); font-size: 12.5px; color: var(--gray); margin: 8px 0; }
.model .exwarn, .instrument .exwarn { color: var(--accent, #8a2f2f); }
.model .exdim, .instrument .exdim { color: var(--gray); font-weight: 400; }
.model .chart, .instrument .chart { width: 100%; height: auto; display: block; }
.model .exsmall .sw, .instrument .exsmall .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }

/* the tooltip the shell hands out, in the house style, outside a figure */
.model .figtip, .instrument .figtip {
  position: absolute; z-index: 6; pointer-events: none; background: var(--ink); color: #fff;
  font: 12px/1.45 var(--sans); padding: 6px 9px; border-radius: 4px; max-width: 280px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.model .figtip .sw, .instrument .figtip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.model .figtip .muted, .instrument .figtip .muted { color: #bbb; }

/* ── controls ─────────────────────────────────────────────────────────────────── */
.model .exctls, .instrument .exctls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin: 0 0 12px; }
.model .exctl, .instrument .exctl { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.model .exctl.exwide, .instrument .exctl.exwide { min-width: 260px; flex: 1 1 260px; }
.model .exlab, .instrument .exlab {
  font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gray); white-space: nowrap;
}
.model .exinput, .instrument .exinput {
  font: 400 13.5px var(--sans); color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  padding: 4px 18px 4px 0; width: 100%; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.model input.exinput, .instrument input.exinput { background-image: none; padding-right: 4px; }
.model .exinput:focus, .instrument .exinput:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.model .exbtn, .instrument .exbtn {
  font: 500 12.5px var(--sans); color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 14px; cursor: pointer;
}
.model .exbtn:hover, .instrument .exbtn:hover { border-color: var(--ink); color: var(--ink); }
.model .exmore, .instrument .exmore { margin: 10px 0 0; }

/* ── the live count line ──────────────────────────────────────────────────────── */
.model .excount, .instrument .excount {
  font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: 4px 0 18px; padding: 9px 0;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--hair, var(--rule));
}
.model .excount b, .instrument .excount b { font-family: var(--serif); font-size: 20px; font-weight: 600; }

/* ── the agreement matrix ─────────────────────────────────────────────────────── */
.model .exmatwrap, .instrument .exmatwrap { position: relative; margin: 14px 0 2px; max-width: 700px; }
.model .exmatrix .cell, .instrument .exmatrix .cell { font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.model .exmatrix .exdimcell, .instrument .exmatrix .exdimcell { fill: var(--faint); font-size: 10px; }

/* ── tables ───────────────────────────────────────────────────────────────────── */
/* the stage is a grid track, so a wide table would widen the whole page through its
   min-content; zero width with a 100 % floor keeps the scrolling inside the box */
.model .tablewrap, .instrument .tablewrap { width: 0; min-width: 100%; overflow-x: auto; }
.model .figtable, .instrument .figtable { font-variant-numeric: tabular-nums; }
.model .exnowrap, .instrument .exnowrap { white-space: nowrap; }
.model .exmotion, .instrument .exmotion { min-width: 22em; max-width: 44em; color: var(--ink-2); }
.model .exnoes, .instrument .exnoes { color: var(--gray); }
.model tr.exsplit .exnoes, .instrument tr.exsplit .exnoes { color: var(--accent, #8a2f2f); }
.model .exprops, .instrument .exprops { margin-top: 4px; }
.model .exgap, .instrument .exgap { font-weight: 600; }

/* ── the city strip and the district buttons ──────────────────────────────────── */
.model .excity, .instrument .excity {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 26px;
  padding: 10px 0; margin: 0 0 12px;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--hair, var(--rule));
}
.model .exciter, .instrument .exciter {
  font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink);
}
.model .excitem, .instrument .excitem { display: flex; flex-direction: column; }
.model .excitem b, .instrument .excitem b { font-family: var(--serif); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.model .excitem i, .instrument .excitem i { font-family: var(--sans); font-style: normal; font-size: 11px; color: var(--gray); }
.model .exdrow, .instrument .exdrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.model .exdrow .exlab, .instrument .exdrow .exlab { margin-right: 4px; }
.model .exdbtn, .instrument .exdbtn {
  font: 500 13px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule); padding: 4px 12px; cursor: pointer;
}
.model .exdbtn:hover, .instrument .exdbtn:hover { border-color: var(--ink); }
.model .exdbtn[aria-pressed="true"], .instrument .exdbtn[aria-pressed="true"] {
  background: var(--accent, #8a2f2f); border-color: var(--accent, #8a2f2f); color: #fff;
}

/* ── map beside panel ─────────────────────────────────────────────────────────── */
.model .exsplit2, .instrument .exsplit2 { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 8px 28px; align-items: start; }
.model .exmapwrap, .instrument .exmapwrap { position: relative; }
.model .exmap, .instrument .exmap { max-height: 540px; }
.model .expanel, .instrument .expanel { min-width: 0; }
.model .exhead, .instrument .exhead {
  font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--ink);
}
.model h4.exhead, .instrument h4.exhead { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 0 0 2px; }
.model .exballot, .instrument .exballot { font-family: var(--sans); font-size: 12.5px; color: var(--gray); margin: 0 0 8px; }
.model .exballot.exon, .instrument .exballot.exon { color: var(--accent, #8a2f2f); font-weight: 600; }
.model .exsub2, .instrument .exsub2 {
  font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink); margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--rule-strong);
}

/* ── definition rows ──────────────────────────────────────────────────────────── */
.model .exdl, .instrument .exdl { margin: 0; font-family: var(--sans); font-size: 13px; }
.model .exrow, .instrument .exrow {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--hair, var(--rule));
}
.model .exrow dt, .instrument .exrow dt { color: var(--gray); }
.model .exrow dd, .instrument .exrow dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.model .exsub, .instrument .exsub { display: block; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── a council contest ────────────────────────────────────────────────────────── */
.model .excontest, .instrument .excontest { margin: 0 0 12px; }
.model .exyear, .instrument .exyear { font-family: var(--sans); font-size: 12px; color: var(--gray); margin-bottom: 3px; }
.model .excand, .instrument .excand {
  display: grid; grid-template-columns: minmax(9em, 13em) 1fr 4.2em; gap: 8px; align-items: center;
  font-family: var(--sans); font-size: 12.5px; padding: 2px 0; color: var(--ink-2);
}
.model .excand.exwon, .instrument .excand.exwon { color: var(--ink); font-weight: 600; }
.model .excbar, .instrument .excbar { display: block; height: 9px; background: var(--tile); position: relative; }
.model .excbar::after, .instrument .excbar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--gray); }
.model .excand.exwon .excbar::after, .instrument .excand.exwon .excbar::after { background: var(--accent, #8a2f2f); }
.model .excshare, .instrument .excshare { text-align: right; font-variant-numeric: tabular-nums; }

/* ── the placebo bars: buttons, so the keyboard reaches every city ────────────── */
.model .exclaim, .instrument .exclaim {
  font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 84ch;
  margin: 0 0 14px; padding: 9px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--hair, var(--rule));
}
.model .exbars, .instrument .exbars { display: flex; flex-direction: column; }
.model .exbar, .instrument .exbar {
  display: grid; grid-template-columns: 1.8em minmax(6.5em, 9em) 1fr 4.4em; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair, var(--rule));
  padding: 3px 2px; cursor: pointer; font-family: var(--sans); font-size: 12.5px; color: var(--ink-2);
}
.model .exbar:hover, .instrument .exbar:hover { background: var(--tile); }
.model .exbrank, .instrument .exbrank { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.model .exbname, .instrument .exbname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model .exbtrack, .instrument .exbtrack { position: relative; display: block; height: 11px; }
.model .exbtrack::before, .instrument .exbtrack::before { content: ''; position: absolute; left: var(--zero, 0%); top: -3px; bottom: -3px; border-left: 1px solid var(--rule-strong); opacity: .45; }
.model .exbtrack i, .instrument .exbtrack i { position: absolute; top: 0; bottom: 0; background: var(--ink); opacity: .45; }
.model .exbval, .instrument .exbval { text-align: right; font-variant-numeric: tabular-nums; }
.model .exbar.extreated, .instrument .exbar.extreated { color: var(--ink); font-weight: 600; }
.model .exbar.extreated .exbtrack i, .instrument .exbar.extreated .exbtrack i { opacity: .9; }
/* the accent marks what the reader has picked; the treated city is the darker bar */
.model .exbar[aria-pressed="true"], .instrument .exbar[aria-pressed="true"] { background: var(--tile); color: var(--ink); }
.model .exbar[aria-pressed="true"] .exbtrack i, .instrument .exbar[aria-pressed="true"] .exbtrack i { background: var(--accent, #8a2f2f); opacity: 1; }

.model .expdetail, .instrument .expdetail { margin-top: 18px; }
.model .expcols, .instrument .expcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.model .expcol .exhead, .instrument .expcol .exhead { padding-bottom: 5px; border-bottom: 1px solid var(--rule-strong); }
.model .expcol.exsel .exhead, .instrument .expcol.exsel .exhead { color: var(--accent, #8a2f2f); }
.model .exchart, .instrument .exchart { position: relative; margin: 18px 0 0; }

@media (max-width: 720px) {
  .model .exsplit2, .instrument .exsplit2 { grid-template-columns: 1fr; }
  .model .exctl, .instrument .exctl { min-width: 130px; flex: 1 1 130px; }
  .model .exmotion, .instrument .exmotion { min-width: 14em; }
  .model .excand, .instrument .excand { grid-template-columns: minmax(7em, 10em) 1fr 4em; }
}

/* ── app-instruments.css ── */
/* ── /about/physics — the five instruments. Working surfaces rather than pages: hairlines,
   tabular numerals, agate labels in the caps of a legend, and the one accent kept for what
   is live or what is selected. Everything here is scoped under .instrument, the host the
   shell builds for a widget at #/i/<id>. ── */

.instrument { font-family: var(--sans); }
.instrument .chart { width: 100%; height: auto; display: block; }
.instrument .ilabel { font: 600 10px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.instrument .inote { font: 400 12.5px/1.6 var(--sans); color: var(--gray); max-width: 82ch; margin: 0 0 12px; }
.instrument .inote a { color: var(--ink-2); border-bottom: 1px solid var(--rule); text-decoration: none; }
.instrument .inote a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.instrument .fnone { color: var(--faint); }
/* a chart scrolls inside its own box rather than shrinking its type to nothing on a phone;
   size containment keeps its width off the page's */
.instrument .chartbox { position: relative; overflow-x: auto; contain: inline-size; }
/* the tooltip the shell hands out: the same dark house card the figures use, restated here
   in full so an instrument reads the same whichever sheet loads with it */
.instrument .figtip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--ink); color: #fff; border: 0; border-radius: 4px; padding: 6px 9px;
  font: 400 11.5px/1.45 var(--sans); font-variant-numeric: tabular-nums; max-width: 280px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.instrument .figtip b { font-weight: 600; }

/* 1 · now ------------------------------------------------------------------- */
.instrument .nowstamp { max-width: 88ch; }
.instrument .nowthin { color: var(--accent); }
.instrument .nowgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin: 4px 0 16px; }
.instrument .npanel { background: var(--paper); padding: 11px 13px 9px; }
.instrument .nhead { display: flex; flex-direction: column; gap: 1px; min-height: 30px; }
.instrument .ntitle { font: 600 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.instrument .nsub { font: 400 10.5px/1.35 var(--sans); color: var(--faint); }
.instrument .nnow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; margin: 6px 0 2px; }
.instrument .nvalue { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.instrument .nwhen { font: 400 10.5px/1.3 var(--sans); color: var(--gray); }
.instrument .nchart { margin-top: 2px; }
/* the y range reads over the lines it labels, not under them */
.instrument .nchart .tick { paint-order: stroke; stroke: var(--paper); stroke-width: 2.5px; stroke-linejoin: round; }
.instrument .nlegend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.instrument .nkey { display: inline-flex; align-items: baseline; gap: 4px; font: 400 10px var(--sans); color: var(--gray); }
.instrument .ndot { width: 6px; height: 6px; background: var(--c); border-radius: 50%; display: inline-block; }
.instrument .nid { color: var(--ink-2); }
.instrument .nval { font-variant-numeric: tabular-nums; color: var(--faint); }
.instrument .nowfoot { border-top: 1px solid var(--rule); padding-top: 12px; }

/* 2 · compare --------------------------------------------------------------- */
.instrument .presets { margin: 0 0 14px; }
.instrument .pbtn {
  font: 400 12px var(--sans); color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--hair); border-radius: 999px; padding: 3px 11px; margin: 0 6px 6px 0; cursor: pointer;
}
.instrument .pbtn:hover { border-color: var(--ink); color: var(--ink); }
.instrument .pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 22px; margin: 0 0 16px; }
.instrument .picker { border-top: 2px solid var(--ink); padding-top: 8px; }
.instrument .picker.p-b { border-top-color: var(--accent); }
.instrument .picker.p-b .ilabel { color: var(--accent); }
.instrument .prow { display: flex; flex-wrap: wrap; gap: 6px; }
.instrument select.psel {
  font: 400 12.5px var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); border-radius: 0; padding: 4px 6px; max-width: 100%; flex: 1 1 auto; min-width: 92px;
}
.instrument select.psel:focus { outline: none; border-color: var(--ink); }
.instrument select.pchapter { flex: 2 1 150px; }
.instrument .pshape { font: 400 11px var(--sans); color: var(--faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.instrument .ckeys { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 6px; }
.instrument .ckey { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--ink); }
.instrument .cdot { width: 8px; height: 8px; background: var(--c); display: inline-block; }
.instrument .cname { font: 500 12.5px var(--sans); }
.instrument .csub { font: 400 11.5px var(--sans); color: var(--gray); font-variant-numeric: tabular-nums; }
.instrument .ckey:hover .cname { color: var(--accent); }
.instrument .cstats { display: flex; flex-wrap: wrap; gap: 0 34px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding: 10px 0 9px; margin: 6px 0 10px; }
.instrument .cstat.empty .cvalue { color: var(--faint); }
.instrument .cvalue { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.instrument .clabel { font: 400 11px var(--sans); color: var(--gray); margin-top: 2px; }
.instrument .cchart { min-width: 520px; }
.instrument .cchart .tick.accent { fill: var(--accent); }

/* 3 · spectrum -------------------------------------------------------------- */
.instrument .schart { min-width: 620px; }
.instrument .schart .slabel { font: 400 11.5px var(--sans); fill: var(--ink); }
.instrument .schart .svalue { font: 500 11px var(--sans); font-variant-numeric: tabular-nums; fill: var(--gray); }
.instrument .schart .srow { cursor: pointer; }
.instrument .schart .srow:hover .slabel { fill: var(--accent); }
.instrument .schart .srow:hover .svalue { fill: var(--ink); }
.instrument .schart .srow:focus-visible { outline: 2px solid var(--ink); }
.instrument .slegend { font: 400 11.5px var(--sans); color: var(--gray); margin: 2px 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.instrument .slegend .sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.instrument .slegend .sw.bar { width: 22px; height: 4px; border-radius: 2px; background: var(--faint); }
.instrument .slegend .sw.sq { border-radius: 0; width: 8px; height: 8px; }
.instrument .brush { border-top: 1px solid var(--rule-strong); padding-top: 12px; margin-bottom: 6px; }
/* the map page keeps a .dlabel that is a 26 px circle (styles.css); a dial's label is a word,
   so inside an instrument the circle is undone rather than inherited */
.instrument .dial .dlabel {
  display: inline-block; width: auto; height: auto; border: 0; border-radius: 0;
  background: none; white-space: nowrap;
}
.instrument .brush .dmarks { height: 18px; }
/* the last stop sits at the end of the track: hang its label inside the box, tick still on the mark */
.instrument .brush .dmark:last-child { transform: translateX(-100%); }
.instrument .brush .dmark:last-child::before { left: auto; right: 1px; }
.instrument .brushread {
  font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--ink);
  border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin: 4px 0 16px; max-width: 74ch;
}

/* 4 · frame ----------------------------------------------------------------- */
.instrument .fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 14px; }
.instrument .fbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.instrument .fbtn {
  display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  font: 400 12px var(--sans); color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--hair); border-radius: 0; padding: 4px 10px;
}
.instrument .fbtn .fbcount { font-variant-numeric: tabular-nums; color: var(--faint); }
.instrument .fbtn:hover { border-color: var(--ink); }
.instrument .fbtn.on { border-color: var(--accent); color: var(--accent); }
.instrument .fbtn.on .fbcount { color: var(--accent); }
.instrument input.fsearch {
  font: 400 12.5px var(--sans); color: var(--ink); background: var(--panel);
  border: 1px solid var(--hair); border-radius: 0; padding: 5px 9px; min-width: 240px; flex: 1 1 240px; appearance: none;
}
.instrument input.fsearch:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.instrument .fshown { font: 400 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.instrument .frametable { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 30px; }
.instrument .frametable thead th {
  font: 600 9.5px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 0 12px 6px 0; border-bottom: 1px solid var(--ink);
}
.instrument tr.flevel th {
  font: 600 10px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  text-align: left; padding: 16px 0 5px; border-bottom: 1px solid var(--rule-strong);
}
.instrument tr.flaw td { vertical-align: top; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); line-height: 1.45; overflow-wrap: anywhere; }
.instrument tr.flaw:hover td { background: var(--panel); }
.instrument tr.flaw.flash td { background: #fbf1f1; }
.instrument .fname { width: 27%; }
.instrument .fname a { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule); }
.instrument .fname a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.instrument .fcite { font: 400 11px/1.4 var(--sans); color: var(--faint); margin-top: 2px; }
.instrument .fgoverns { color: var(--ink-2); }
.instrument .fchaps { width: 20%; }
.instrument .fchaps a { display: block; color: var(--gray); font-size: 11.5px; line-height: 1.5; text-decoration: none; }
.instrument .fchaps a:hover { color: var(--accent); }
.instrument .matsec { border-top: 1px solid var(--rule-strong); padding-top: 16px; }
/* the matrix is wider than a phone: it scrolls inside its own box, and size containment
   keeps its width from pushing the stage out from under the rest of the page */
.instrument .matwrap { overflow-x: auto; padding-bottom: 4px; contain: inline-size; }
.instrument table.matrix { border-collapse: collapse; font-size: 11px; }
.instrument table.matrix th.corner { font: 600 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); text-align: left; vertical-align: bottom; padding-bottom: 6px; }
.instrument table.matrix th.mcol { width: 19px; padding: 0; vertical-align: bottom; border-bottom: 1px solid var(--ink); }
.instrument table.matrix th.mcol a {
  writing-mode: vertical-rl; transform: rotate(180deg); display: block;
  height: 186px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 10.5px var(--sans); color: var(--gray); text-decoration: none; padding: 0 0 4px;
}
.instrument table.matrix th.mcol a:hover { color: var(--accent); }
.instrument table.matrix th.mrow { text-align: left; font: 400 11.5px var(--sans); font-weight: 400; white-space: nowrap; padding: 0 14px 0 0; border-bottom: 1px solid var(--rule); }
.instrument table.matrix th.mrow a { color: var(--ink); text-decoration: none; }
.instrument table.matrix th.mrow a:hover { color: var(--accent); }
.instrument table.matrix td.mcell { width: 19px; height: 20px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--hair); text-align: center; }
.instrument table.matrix td.mcell .mdot { width: 8px; height: 8px; background: var(--ink); display: inline-block; vertical-align: middle; }
.instrument table.matrix td.mcell.lvl-state .mdot { background: var(--accent); }
.instrument table.matrix td.mcell.lvl-local .mdot { background: var(--blue); }
.instrument table.matrix tbody tr:hover td.mcell { background: var(--panel); }
.instrument table.matrix .mtot { font: 500 10.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); text-align: center; padding: 3px 0 0 8px; border-bottom: 1px solid var(--rule); }
.instrument table.matrix tfoot .mtot { border-bottom: 0; border-top: 1px solid var(--ink); color: var(--ink-2); }
.instrument table.matrix tfoot th.mrow { border-bottom: 0; border-top: 1px solid var(--ink); font: 600 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }

/* 5 · data ------------------------------------------------------------------ */
.instrument .dhint { font: 400 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 2px; }
.instrument .dlist { margin-bottom: 26px; }
.instrument .dchap { border-top: 1px solid var(--rule-strong); padding: 12px 0 6px; }
.instrument .dhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.instrument .dtitle { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; }
.instrument .dtitle:hover { color: var(--accent); }
.instrument .dcad { font: 400 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.instrument .dexp {
  font: 500 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; border: 1px solid var(--hair); padding: 2px 8px; margin-right: 6px;
}
.instrument .dexp:hover { border-color: var(--accent); color: var(--accent); }
.instrument .dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.instrument .dtable td { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.instrument .dtable tr:hover td { background: var(--panel); }
.instrument .dname { width: 16%; font-weight: 500; color: var(--ink); }
.instrument .dn { width: 8%; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.instrument .dcols { color: var(--faint); font-size: 11px; line-height: 1.5; }
.instrument .dcsv { width: 46px; text-align: right; }
.instrument .dcsv a { font: 500 10.5px var(--sans); letter-spacing: .06em; color: var(--gray); text-decoration: none; }
.instrument .dcsv a:hover { color: var(--accent); }
.instrument tr.dempty .dname, .instrument tr.dempty .dn { color: var(--faint); font-weight: 400; }
.instrument .dgeo, .instrument .dcite { border-top: 1px solid var(--rule-strong); padding-top: 14px; margin-bottom: 22px; }
.instrument .citeline { font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; max-width: 70ch; }

@media (max-width: 700px) {
  .instrument .nowgrid { grid-template-columns: 1fr; }
  .instrument .brush .dmark { font-size: 9.5px; }
  .instrument .brush .dmark:nth-last-child(2) { display: none; }
  .instrument .cstats { gap: 0 22px; }
  .instrument .cvalue { font-size: 22px; }
  .instrument .fname, .instrument .fchaps { width: auto; }
  .instrument .frametable, .instrument .dtable { font-size: 12px; }
  .instrument .frametable .fgoverns { display: none; }
}

/* ── app-models.css ── */
/* ── app-models.css ── the five models pinned to the top of a flow. The app sheet already
   gives .model its frame and .panel, .dial, .readout their type; what is left is the shape
   of an instrument: the dials laid across a control panel, the answers set large in a row,
   the drawing under them, the assumptions in agate at the foot. Scoped under .model
   throughout, so nothing here can reach a figure, the console or the rail. */

/* the control panel across the top */
.model .panel { padding: 11px 13px 12px; background: var(--paper); }
.model .panel .phead h3 { margin: 0 0 9px; }
.model .mdials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 30px; align-items: start; }
.model .mdials .dial { margin: 0; min-width: 0; }
.model .dialhead { flex-wrap: wrap; gap: 2px 10px; }
/* .dlabel is a 26 px map-marker chip in the base sheet; inside a model it is only a word */
.model .dial .dlabel { display: block; width: auto; height: auto; border-radius: 0; background: none; border: 0; }
.model .mdials .dial .dout { font-family: var(--serif); font-weight: 600; font-size: 15.5px; }
.model .dmarks { height: 16px; }
/* a mark at either end of a dial hangs inside the track, not over the edge of the panel */
.model .dmark[style*="left: 0%"] { transform: none; }
.model .dmark[style*="left: 0%"]::before { left: 0; }
.model .dmark[style*="left: 100%"] { transform: translateX(-100%); }
.model .dmark[style*="left: 100%"]::before { left: auto; right: 0; }

/* a toggle between two fits of the same law */
.model .mtoggle { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.model .mtoggle .tlabel { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-right: 2px; }
.model .tbtn { appearance: none; background: var(--paper); border: 1px solid var(--hair); padding: 4px 10px; cursor: pointer; color: var(--ink-2); font: 400 12px/1.3 var(--sans); }
.model .tbtn:hover { border-color: var(--gray); }
.model .tbtn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.model .mtoggle .tnote { font: 400 11.5px var(--sans); color: var(--gray); }

/* the answers */
.model .mreads { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 26px; margin: 14px 0 2px; padding-bottom: 13px; border-bottom: 1px solid var(--hair); }
.model .mreads .readout { display: block; margin: 0; min-width: 0; }
.model .mreads .readout .rvalue { font-size: clamp(21px, 2.9vw, 28px); letter-spacing: -.01em; }
.model .mreads .readout:first-child .rvalue { color: var(--accent); }
.model .mreads .readout .rlabel { max-width: 33ch; }

/* the drawing */
.model .mchart { position: relative; margin: 12px 0 0; }
.model .maxis { font: 400 11px/1.35 var(--sans); color: var(--gray); margin: 0 0 5px; }
.model .mkey { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 7px 0 0; }
.model .mkeyitem { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px var(--sans); color: var(--gray); }
.model .mkeyitem .sw { width: 15px; height: 0; border-top: 2px solid var(--c, #121212); }
.model .mkeyitem .sw.dash { border-top-style: dashed; }
.model .mkeyitem .sw.fill { height: 9px; border: 0; background: var(--c, #121212); opacity: .2; }

/* what the instrument assumes */
.model .mfoot { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--hair); }
.model .mnote { font: 400 12.5px/1.55 var(--sans); color: var(--ink-2); margin: 0; max-width: 80ch; }
.model .mn { font: 400 11.5px/1.5 var(--sans); color: var(--gray); margin: 7px 0 0; max-width: 84ch; }
.model .mmiss { font: 400 13px/1.55 var(--sans); color: var(--gray); margin: 0; max-width: 70ch; }

@media (max-width: 620px) {
  .model .mdials { grid-template-columns: 1fr; gap: 14px; }
  .model .mreads { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .model .mreads .readout .rvalue { font-size: 21px; }
  .model .mreads .readout .rlabel { max-width: none; }
}