/* ===========================================================================
   Municorn design system · 5 · reference (class B)
   ---------------------------------------------------------------------------
   Loaded only by rendered-markdown pages: glossary, methodology, the water-loss
   index. Class B carries no brick, no rake and no ambient loop — one fade and
   an 8px rise per section, one pass, then still. Motion.css still supplies the
   .rise mechanics; nothing in this file loops.

   src/build/content.ts renders authored markdown with markdown-it and
   `html: false`, so a content file cannot write a class of its own. Most of
   what follows is therefore scoped to `.prose` and selects elements.

   The exception is a closed vocabulary of three fenced blocks — ```margin,
   ```note and ```key — which content.ts maps to .side, .note and .key. An
   author reaches those three and nothing else, which is the point: a reference
   page gets somewhere to put a qualification other than the end of a sentence,
   without content/ becoming a place where anybody can write markup.
   =========================================================================== */

/* class B reveal budget: one fade and a short rise per section, then still */
.doc .rise{transition-duration:.55s;transform:translateY(calc(8px * var(--motion)))}

/* === long-form prose ======================================================
   68ch measure. No paragraph runs the full 78rem. */
.prose{max-width:68ch}
.prose>*+*{margin-top:1.05rem}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);max-width:22ch;margin-top:2.6rem;
  padding-top:1.4rem;border-top:1px solid var(--rule)}
.prose h3{font-size:1.24rem;max-width:22ch;margin-top:1.9rem}
.prose p{color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:500}
.prose a{text-decoration:none;border-bottom:1px solid var(--brass)}
.prose a:hover{color:var(--brick);border-color:var(--brick)}
.prose ul,.prose ol{padding-left:1.15rem;color:var(--ink-soft)}
.prose li+li{margin-top:.35rem}
.prose li::marker{color:var(--brass)}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--rule);padding:.1em .35em}
/* An indented block in a content file — the water balance identity in
   methodology/water-loss-index.md is one — renders as pre > code. */
.prose pre{font-family:var(--mono);font-size:.8rem;line-height:1.62;background:var(--lime);
  border-left:2px solid var(--rule);padding:.9rem 1.1rem;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:inherit}
/* content.ts gives every h2 and h3 an id, so a deep link lands under the nav
   rather than behind it. */
.prose h2,.prose h3{scroll-margin-top:5rem}
.prose blockquote{border-left:2px solid var(--rule);padding-left:1.1rem;color:var(--ink-soft)}

/* === note: the one caveat =================================================
   2px brick left rule. One per section. */
.note{border-left:2px solid var(--brick);padding:.15rem 0 .15rem 1.1rem;margin-top:1.4rem;
  max-width:60ch;color:var(--ink-soft)}
.slab--dark .note{color:var(--lime-mute)}

/* === src: provenance ======================================================
   Facts only. An argument in a source line is a note in disguise. */
.src{font-family:var(--mono);font-size:.66rem;line-height:1.6;letter-spacing:.06em;
  color:var(--ink-soft);margin-top:1rem;max-width:60ch}
.src a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.slab--dark .src{color:var(--lime-mute)}

/* === exhibit: a sample deliverable on a service page =======================
   A service page describes what it hands back and, until now, showed none of
   it. This is the block that shows it.

   `figure` carries a browser default margin-inline of 40px, and reference.css
   deliberately styles no bare figure (see the note above .ledger), so the
   margin is zeroed here rather than left to a default that indents the table
   away from the prose around it.

   The provenance line under it is .src, the same treatment every other source
   note on the site gets, because it is the same kind of statement: this is
   where the figures came from, or an admission that they came from nowhere.
   It is not decorative and it is not small print by accident — it is the
   sentence the exhibit is only publishable because of. */
.exhibit--doc{margin:var(--head-gap) 0 0}
.exhibit--doc figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);padding-bottom:.2rem}
.exhibit--doc table{margin-top:.8rem}
.exhibit--doc .src{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--rule)}

/* === table ================================================================
   Declare column widths with <colgroup> — auto layout wraps headers, cramps
   numerics and gives a ragged right edge. */
.tbl,.prose table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  margin-top:1.4rem}
/* Declared widths need fixed layout; a markdown table has none to declare. */
.tbl{table-layout:fixed}
.prose table{display:block;overflow-x:auto}
.tbl caption{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);padding-bottom:.6rem}
.tbl th,.prose th{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);text-align:left;vertical-align:bottom;
  padding:0 .9rem .55rem 0;border-bottom:1px solid var(--rule)}
.tbl td,.prose td{font-size:.9rem;color:var(--ink-soft);padding:.62rem .9rem .62rem 0;
  border-bottom:1px solid var(--rule);vertical-align:baseline}
/* Generated index tables are bare <table> inside .doc, same treatment. */
.doc main table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.doc main th,.doc main td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--rule);
  vertical-align:baseline}
.doc main th{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass)}
.doc main td.n,.doc main th.n{text-align:right;font-family:var(--mono)}
.doc main tbody tr:hover{background:var(--wash-brick)}
.doc main caption{text-align:left}
.scroll{overflow-x:auto;margin-top:1rem}
.tbl th:last-child,.tbl td:last-child,
.prose th:last-child,.prose td:last-child{padding-right:0}
/* a right-aligned numeric column keeps its right padding unless it is last, or
   the figure collides into the next column */
.tbl .num{text-align:right;white-space:nowrap}
.tbl th.num{white-space:nowrap}
.tbl td.lbl{color:var(--ink);font-family:var(--serif);font-size:1.02rem}
/* every figure carries its standing: verified, assumed, dated, open */
.tbl .std{font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brass);white-space:nowrap}
.tbl__scroll{overflow-x:auto}
@media(max-width:560px){.tbl{font-size:.86rem}}

/* === course: ordered steps ================================================ */
.course{border-top:1px solid var(--rule);margin-top:var(--head-gap)}
.course>li{display:grid;gap:.2rem .9rem;padding:.95rem 0;border-bottom:1px solid var(--rule);
  list-style:none}
.course>li>b{font-family:var(--serif);font-weight:300;font-size:1.24rem}
.course>li>span{color:var(--ink-soft);font-size:.93rem}
.course>li::before{content:counter(step,decimal-leading-zero);counter-increment:step;
  font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--brass);opacity:.75}
.course{counter-reset:step}
@media(min-width:700px){.course>li{grid-template-columns:3rem 15rem 1fr;align-items:baseline}}

/* === page header =========================================================
   Eyebrow, h1, serif lede, then one content block. Scoped to body.doc, which
   src/design/shell.ts sets for every class B page, so the reading rhythm applies
   to the page body without reaching the nav or the footer. */
.doc main{padding-bottom:4rem}
/* figure is deliberately absent: .ledger is a figure and sets its own spacing,
   and a bare-element rule would outrank it. */
.doc main p,.doc main ul,.doc main ol,.doc main table{margin-top:1rem}
.doc main ul,.doc main ol{padding-left:1.3rem}
.doc main li{margin-top:.3rem}
.doc main h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.08}
.doc main h2{font-size:clamp(1.4rem,3vw,2rem);margin-top:2.6rem;line-height:1.08}
.doc main h3{font-size:1.2rem;margin-top:1.8rem;line-height:1.08}
.page{padding:1.4rem 0 2rem;border-bottom:1px solid var(--rule);margin-bottom:var(--head-gap)}
.crumb{font-size:.72rem;letter-spacing:.06em;color:var(--faint);padding:1.1rem 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.mdlink{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em}

/* === figs: the headline figures ==========================================
   Three at most, each carrying its own basis line. A figure without a basis is
   a claim. */
/* rules on the cells, not painted behind them — see .asks in components.css for
   why a container-painted grid breaks on any incomplete row */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  border-bottom:1px solid var(--rule);margin-top:1.6rem}
.fig{padding:1rem 1.1rem 1.15rem;border-top:1px solid var(--rule);
  border-left:1px solid var(--rule)}
.fig dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass)}
.fig dd{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.05;margin-top:.35rem}
.fig .basis{display:block;font-family:var(--sans);font-size:.72rem;color:var(--faint);
  margin-top:.4rem;line-height:1.45}
/* auto-fit, not repeat(3,1fr). Three figures still lay out as equal thirds —
   78rem of container fits three 15rem tracks and no more — but a state with no
   published loss standard now carries two, and repeat(3) left the third track
   as an empty stub of bottom border. */
@media(min-width:700px){.figs{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}

/* === verdict ============================================================= */
.verdict{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;padding:.32rem .6rem;border:1px solid currentColor}
.v-closed{color:var(--closed)}
.v-failed{color:var(--failed)}
.v-insufficient{color:var(--insufficient)}
.v-inapplicable{color:var(--inapplicable)}

/* === ledger: system input decomposed, the residual drawn as a void =======
   The signature element of a reference page. Segment colours come from tokens
   that already carry the meaning. */
.ledger{margin-top:1.4rem;border:1px solid var(--rule);background:var(--card);padding:1.1rem}
.ledger .bar{display:flex;height:2.6rem;border:1px solid var(--ink);overflow:hidden}
.seg{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:.6rem;color:var(--lime);min-width:0}
.seg-billed{background:var(--closed)}
.seg-unbilled{background:var(--seg-unbilled)}
.seg-apparent{background:var(--brass)}
.seg-real{background:var(--brick)}
.seg-residual{background:repeating-linear-gradient(45deg,var(--ink),var(--ink) 4px,
  transparent 4px,transparent 8px);border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.ledger .key{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.8rem;font-family:var(--mono);
  font-size:.63rem;color:var(--ink-soft)}
.ledger .key i{display:inline-block;width:.7rem;height:.7rem;margin-right:.35rem;vertical-align:-1px}
.void{margin-top:.9rem;padding:.7rem .85rem;border-left:3px solid var(--failed);
  background:var(--tint-failed);font-size:.88rem}
.void b{font-family:var(--mono);font-size:.85rem}
.void--insufficient{border-left-color:var(--insufficient);background:var(--tint-insufficient)}

/* === sortable table toolbar ==============================================
   Progressive enhancement over a table that is already complete: js/table.js
   only adds the sorting and the filtering. */
.srt{margin-top:1.2rem}
.srt__f{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.2rem}
.chip{font:inherit;font-size:.72rem;letter-spacing:.02em;padding:.34rem .7rem;cursor:pointer;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-soft)}
.chip:hover{border-color:var(--brass)}
.chip.is-on{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.srt__q{font:inherit;font-size:.8rem;padding:.34rem .6rem;border:1px solid var(--rule);
  background:var(--card);margin-left:auto;min-width:11rem}
.srt__n{font-size:.72rem;font-family:var(--mono)}
th.srt__h{cursor:pointer;user-select:none;white-space:nowrap}
th.srt__h:hover{color:var(--brick)}
.srt__a{font-family:var(--mono)}
tbody tr[hidden]{display:none}

/* === lists of links ====================================================== */
.cols{display:grid;gap:1.6rem}
.cols ul{list-style:none;padding:0;margin:0}
.cols li{border-bottom:1px solid var(--rule);padding:.4rem 0}
.cols a{text-decoration:none}
.cols a:hover{text-decoration:underline}
@media(min-width:860px){.cols{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}}

/* === closing block ======================================================= */
.cta{margin-top:2.4rem;border:1px solid var(--ink);background:var(--lime);padding:1.4rem 1.5rem}
.cta h2{margin-top:0;font-size:1.5rem}
/* The rule above has never applied. `.doc main h2` two blocks up is (0,1,2) and
   `.cta h2` is (0,1,1), so the closing block on every reference page opened with
   its own 1.4rem of padding and then 2.6rem of the heading's margin on top of
   it: 65px of empty ink above "Is your system on here?" and above "Where is it
   going?" on 4,272 pages. `.sources` had the same shape at 36px, its first
   paragraph adding 1rem under a padding that was already the separation.

   A box's padding IS the gap. The first child inside it must not add a second
   one, and the selector has to outrank the element rule that sets it. */
.doc main .cta>:first-child,
.doc main .sources>:first-child{margin-top:0}
.cta p{max-width:52ch}
.cta .btn{margin-top:1rem}
.searchbox{margin-top:1.2rem}
.searchbox input{font:inherit;padding:.6rem .8rem;border:1px solid var(--rule);background:var(--card);
  width:min(26rem,100%)}
.sources{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.82rem;
  color:var(--ink-soft)}
.sources li{margin-top:.45rem}

/* === the citation block ===================================================
   On every generated page, carrying the canonical URL, the retrieval date, the
   licence and the caveat. Quiet by design: it is the last thing a reader needs
   and the first thing a copy should keep, so it earns a rule and a smaller size
   rather than any emphasis. Word-break on the URL because a canonical is long
   and must not push a phone into a horizontal scroll. */
.cite{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:.8rem;
  color:var(--ink-soft)}
.cite h2{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5rem;
  color:var(--ink-soft)}
.cite p{margin:.35rem 0;max-width:64ch}
.cite a{overflow-wrap:anywhere}

/* The A–Z roster: every system in the state, grouped by county, names only.
   Column count is content-driven rather than fixed, so a state with two counties
   does not render two very long columns. */
.roster{columns:2 22rem;column-gap:2rem}
.roster li{break-inside:avoid;border-bottom:0;padding:.5rem 0;font-size:.86rem}
.roster b{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft)}

/* === stretchers: one destination per state ================================
   A stretcher is the long face of a brick, and this is the full-width row that
   carries a course. The whole row is the link: the state name is the anchor and
   its ::after covers the row, so there is one link per destination for a screen
   reader and a 4rem target for a thumb. */
.stretchers{list-style:none;padding:0;margin-top:1.4rem;border-top:1px solid var(--rule)}
.stretcher{position:relative;display:grid;gap:.7rem;padding:1.2rem 0;
  border-bottom:1px solid var(--rule);align-items:baseline;
  transition:background .2s,padding-left .2s}
.stretcher:hover{background:var(--wash-brick);padding-left:.6rem}
.stretcher__id{margin:0}
.stretcher__id a{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.05;
  text-decoration:none;border-bottom:0}
.stretcher__id a::after{content:'';position:absolute;inset:0}
.stretcher:hover .stretcher__id a{color:var(--brick)}
.stretcher__id span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);margin-top:.3rem}
.stretcher__f{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1.2rem;margin:0}
.stretcher__f dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass)}
.stretcher__f dd{font-family:var(--serif);font-size:1.3rem;line-height:1.1;margin:0}
@media(min-width:860px){
  .stretcher{grid-template-columns:17rem 1fr;gap:1.4rem}
  .stretcher__f{grid-template-columns:repeat(4,1fr)}
}

/* The index is a directory, so its search field is the primary control rather
   than a footnote under three figures. */
.page .searchbox input{width:min(34rem,100%);padding:.7rem .9rem;font-size:1rem}

@media print{.nav,.foot,.cta{display:none}}

/* === prov: the click path from a figure to the bytes ======================
   Rendered by whence() in src/build/render/entity.ts, under a headline figure.
   Closed it is one word in brass, the same weight as a dt; open it is the
   formula, each input with its cell, and the archived file with its hash. It
   inherits .fig's padding and adds no border, so a figure without provenance —
   a row predating it — looks exactly as it did before.

   No literal here: every value is a token, and the two type scales match
   .fig .basis and .tbl .std respectively. */
.prov{margin-top:.55rem}
.prov>summary{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);cursor:pointer;list-style:none;display:inline-block}
.prov>summary::-webkit-details-marker{display:none}
.prov>summary::after{content:' +'}
.prov[open]>summary::after{content:' \2013'}
.prov>summary:hover{color:var(--brick)}
.prov__f{font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--ink-soft);
  background:var(--lime);border-left:2px solid var(--rule);padding:.5rem .7rem;margin-top:.55rem;
  overflow-x:auto}
.prov__l{list-style:none;padding:0;margin-top:.55rem}
.prov__l li{font-size:.76rem;line-height:1.5;color:var(--ink-soft);padding:.32rem 0;
  border-bottom:1px solid var(--rule)}
.prov__l b{color:var(--ink);font-weight:500}
.prov__c{font-family:var(--mono);font-size:.68rem;color:var(--brass);white-space:nowrap}
.prov__t{font-family:var(--mono);font-size:.6rem;line-height:1.65;letter-spacing:.04em;
  color:var(--faint);margin-top:.55rem;word-break:break-all}
.prov__t a{color:inherit;border-bottom:1px solid var(--rule)}
/* A director carrying the page into a meeting should carry the citation too. */
@media print{.prov[open]>summary,.prov__t{color:var(--ink-soft)}}

/* === rt: the router strip =================================================
   On every generated page, between the content and the footer. Quiet on
   purpose: it is a signpost for a reader who has finished, not an interruption
   for one who has not. */
.rt{border-top:1px solid var(--rule);margin-top:clamp(2.5rem,6vw,4rem);
  padding:1.4rem 0 1.6rem}
.rt__in{display:grid;gap:.75rem}
/* Sentence case at body scale. It used to be a tracked uppercase label over a
   list of three audience names; the list is gone (see chrome.ts) and what is
   left is a sentence, which is not a label and should not be set as one. */
.rt__k{font-size:.92rem;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin:0}
.rt__go{justify-self:start;font-family:var(--sans);font-weight:500;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass);text-decoration:none;
  border-bottom:1px solid var(--brass);padding-bottom:.2rem}
.rt__go:hover{color:var(--brick);border-bottom-color:var(--brick)}
@media(min-width:700px){
  .rt__in{grid-template-columns:1fr auto;align-items:baseline;gap:1.8rem}
}

/* === map: a state's service areas ==========================================
   Server-rendered SVG, one <path> per system inside an <a>. No map library, no
   tiles, no third-party request — the page is the map, and it works with
   JavaScript off because there is no JavaScript.

   Hover raises a shape rather than recolouring it: the fill IS the datum, so
   changing it on hover would be changing the number under the cursor. */
.map{margin:clamp(1.5rem,4vw,2.5rem) 0 0}
/* No border-radius anywhere: base.css zeroes it on * and the one exception in the
   system is a circle. A softened corner on a map frame would be the first square
   edge on this site to go round for decoration. */
.map svg{display:block;width:100%;height:auto;background:var(--joinery);
  border:1px solid var(--rule)}
.map__state{fill:var(--paper);stroke:var(--mortar);stroke-width:1.6}
/* No transition. The hover stroke is feedback, not motion, and it reads the same
   arriving instantly — so this is not worth the argument about whether a
   reference page has a motion budget. */
/* The band colour arrives as --f rather than a fill attribute; see the comment
   in src/build/render/map.ts. --map-none is the fallback, so a shape whose
   property somehow did not arrive is drawn as "no figure" rather than black. */
.map .mapa path{fill:var(--f,var(--map-none))}
.map path{stroke:var(--map-line);stroke-width:.6;stroke-linejoin:round}
.mapa:hover path,.mapa:focus path{stroke:var(--ink);stroke-width:2.2}
.mapa:focus{outline:none}
.mapa:focus-visible path{stroke:var(--brass);stroke-width:2.6}

/* === the atlas: the map's controls ==========================================
   Every one of these is a real element the server rendered, and every one is
   hidden until html.js is set. The boot script in src/design/head.ts swaps
   html.no-js for html.js before first paint, so this is not a flash of an
   empty panel — it is the two-gates rule in src/design/README.md: this file
   hides only what js/atlas.js will operate, so a reader with no JavaScript is
   never shown a slider that does nothing. */
.map__ctl{display:none}
html.js .map__ctl{display:flex;flex-wrap:wrap;align-items:end;gap:.7rem 1.6rem;
  margin:0 0 .8rem;padding:.7rem .85rem;border:1px solid var(--rule-2);
  background:var(--joinery);font-family:var(--mono);font-size:.72rem}
.map__ctl label{color:var(--ink-soft);display:block}
.map__yr{display:flex;align-items:end;gap:.55rem;flex-wrap:wrap}
.map__yr>label{flex-basis:100%}
/* Wide enough that a fifteen-year span has a stop per year the thumb can land
   on, and it is the one control on this page worth giving room to. */
.map__slider{width:min(20rem,52vw);accent-color:var(--brick)}
.map__yrv{min-width:9.5rem;color:var(--ink);letter-spacing:.02em}
.map__v{font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);padding:.22rem .45rem}
.map__filt{display:flex;align-items:end;gap:.55rem 1rem;flex-wrap:wrap}
.map__cb{display:flex;align-items:center;gap:.35rem;max-width:22rem;line-height:1.35}
.map__cb input{accent-color:var(--brick)}

/* Dimmed, never removed. A filtered-out shape that disappears leaves a hole,
   and a state map with holes in it reads as missing data rather than as a
   filter somebody switched on. */
.map .is-off path{opacity:.16}
.map .is-off{pointer-events:none}
/* The hatch overlay is a sibling subtree rather than a descendant of the
   anchors, so the rule above cannot reach it and js/atlas.js sets this class on
   the <use> itself. Without it a filter dims 439 Texas shapes and leaves their
   brass at full strength on top, which reads as the filter having selected the
   systems it just excluded. */
.map__hatch use.is-off{opacity:.16}

/* NO TRANSITION ON THE FILL, and the reason is a measurement rather than the
   budget argument this rule was first defended with. A 0.18s crossfade over
   Texas's 2,645 paths, scrubbed across the whole range in Chromium: median
   frame 50.0ms against 16.7ms without it, p95 100ms against 16.7ms, worst
   183.3ms, and 20 frames over 33ms against none. The state recolours on a
   dragged thumb, so a transition that turns 60fps into 20fps is paid on every
   frame of the one interaction this layer exists for.

   This is the same conclusion the rule under .mapa:hover reached for the hover
   stroke, by a different route: it reads the same arriving instantly. */

/* The defaulted overlay. Solid fill is measured, a 45 degree hatch is the
   regulator's default — the vocabulary src/design/primitives.ts defines, used
   here for the same quantity it means everywhere else. The layer is <use>
   references to the shapes already drawn, so it costs no second copy of any
   geometry, and it paints nothing until it is asked for. */
.map__hatch{display:none;pointer-events:none}
.map--hatch .map__hatch{display:block}
.map__hatch use{fill:url(#hatch);stroke:var(--brass);stroke-width:.8}

/* One line, reserved whether or not anything is in it, so pointing at a shape
   does not move the map under the pointer. */
.map__card{min-height:1.5rem;margin:.7rem 0 0;font-family:var(--mono);
  font-size:.72rem;line-height:1.5;color:var(--ink-soft)}
.map__mode{display:block;margin-top:.35rem;color:var(--ink-soft)}

.map__key{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.35rem 1.1rem;font-family:var(--mono);font-size:.7rem;color:var(--ink-soft)}
.map__key li{display:flex;align-items:center;gap:.4rem}
.map__key i{width:.85rem;height:.85rem;border:1px solid var(--rule-2)}
.map figcaption{margin-top:.8rem;font-size:.8rem;line-height:1.6;color:var(--faint);
  max-width:62ch}

/* === viol: the open compliance record ======================================
   A list, not a table: what a reader needs is what is open and since when, and
   a table of two columns is a list with rules drawn on it. The health-based
   marker is a word rather than a colour, because the distinction has to survive
   being printed, being read aloud, and being seen by somebody who cannot tell
   the accent from the body text. */
.viol{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem}
.viol li{padding-left:.9rem;border-left:2px solid var(--rule-2);line-height:1.5}
/* Square, like everything else: base.css zeroes border-radius on * and the one
   exception in the system is a circle. */
.viol__hb{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brick);border:1px solid var(--brick);
  padding:.06rem .3rem;margin-left:.3rem;white-space:nowrap}


/* === the margin note ======================================================
   The one thing on a reference page that says a person set it.

   Below 1000px it is an indented aside in the flow, which is the only honest
   thing to do on a phone. At 1000px — the breakpoint the wins grid already
   uses, so this adds none — .prose widens beyond its own measure and the note
   floats into the space that opens on the right. The body stays at 68ch, so
   nothing reflows around the float and the measure a reader is following does
   not change width halfway down the page.

   `clear:right` so two notes in quick succession stack instead of colliding. */
.side{border-left:1px solid var(--rule-2);padding-left:.9rem;margin-top:1.2rem;
  max-width:60ch;color:var(--faint);font-size:.86rem;line-height:1.6}
.side>*+*{margin-top:.5rem}
.side p{color:inherit}
.side a{border-bottom-color:var(--rule-2)}

/* === the key figure =======================================================
   One number the page turns on, set out of the flow. Serif and large, because
   it is read as a quantity and not as a word. */
.key{margin-top:1.6rem;border-top:1px solid var(--rule);padding-top:1rem;max-width:60ch}
.key b{display:block;font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.05;color:var(--ink)}
.key span{display:block;margin-top:.4rem;color:var(--faint);font-size:.86rem;line-height:1.55}

/* === the opening line =====================================================
   Small caps on the first few words of a reference page. Not a drop cap: a drop
   cap is a costume, and this is a document about filings. It marks where the
   reading starts and it is one rule.

   content.ts puts the class on. This was `.prose>p:first-of-type`, which was
   wrong in a way no page happened to trigger: `note` and `key` both render as
   <p>, and :first-of-type matches the first <p> among its siblings whatever its
   class, so a ```note authored above the opening line would have taken the small
   caps and left the opening line plain. A selector cannot express "the first
   paragraph that is not one of the components"; the renderer already knows. */
.prose>p.lead::first-line{font-variant-caps:small-caps;letter-spacing:.03em;
  color:var(--ink)}

/* Hanging punctuation: an opening quote or a bullet hangs into the margin so
   the text edge stays optically straight. One line, supported where it is
   supported, ignored where it is not, and wrong nowhere. */
.prose{hanging-punctuation:first last}

/* The two spacings that used to be inline style attributes on a renderer's
   markup. A margin-top typed into a template literal is a value nobody can find
   later and the one place the "styling lives in public/css" rule was broken. */
.after-table{margin-top:1.6rem}
/* A table caption sits left, above the rule, like a figure label. Was an inline
   style attribute inside a template literal in indexes.ts. */
.tbl__cap{text-align:left;margin-bottom:.5rem}
.mdlink{margin-top:1.4rem}
.page .mdlink{margin-top:1rem}

@media(min-width:1000px){
  /* The note floats out of the measure on its own negative margin rather than by
     widening .prose and re-capping every child.

     Capping the children was the first attempt and it was wrong: `.doc main
     .prose>*` out-specifies `.prose h2{max-width:22ch}`, so every heading
     silently lost its 22ch cap and the hairline above each h2 grew from a
     third of the measure to the whole of it. A rule that has to restate every
     other rule's max-width is a rule in the wrong place.

     .prose keeps its 68ch. The float sits in the gutter to its right, and
     because the negative margin takes its own width back out of the flow, no
     line box shortens and the measure a reader is following never changes.

     clear:right so two notes close together stack instead of colliding. */
  .doc main .prose>.side{float:right;clear:right;width:20ch;max-width:20ch;
    margin:.4rem calc(-20ch - 3rem) 1.1rem 3rem;border-left:0;padding-left:0}
  /* The note keeps its brick rule and its place in the column; only the margin
     note moves out. Two things in the margin is a sidebar, not an aside. */
}

/* ===========================================================================
   Benchmark distributions
   One box per metric: the tenth to ninetieth percentile as a whisker, the
   middle half as a box, the median as a rule. Inline SVG drawn at build time —
   no charting library, no client JavaScript, no layout shift. Every colour and
   face is a token; tokens.css states that a hex outside that file is a defect.
   =========================================================================== */
.dist { margin: 1.5rem 0; }
.dist svg { display: block; overflow: visible; }
.dist__w { stroke: var(--rule-2); stroke-width: 1.5; }
/* --wash is the row hover for a dark slab: lime at 3.5%, which over --paper is
   a lighter box than the page it is drawn on. The middle half of a
   distribution is the part a reader is being asked to locate themselves
   against, so it takes the light-surface wash instead. --wash-brick is the
   same value this file already gives a table row under the pointer. */
.dist__b { fill: var(--wash-brick); stroke: var(--rule-2); stroke-width: 1; }
.dist__m { stroke: var(--ink); stroke-width: 2; }
.dist__you { stroke: var(--brass); stroke-width: 2; }
.dist__t { fill: var(--faint); font: 400 0.75rem var(--mono); }
.dist figcaption { color: var(--faint); font-size: 0.875rem; margin-top: 0.25rem; }
.dist__row { margin-bottom: 2rem; }
.dist__row p { margin-top: 0; }