/* ===========================================================================
   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 can only ever produce bare elements — no
   author can reach a class. Everything below is therefore scoped to `.prose` and
   selects elements, not classes. `.note`, `.src`, `.course` and `.tbl` are
   reachable only from a renderer in src/build/render or src/design.
   =========================================================================== */

/* 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)}

/* === 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}
@media(min-width:700px){.figs{grid-template-columns:repeat(3,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}
.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}

/* === 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__v{font-family:var(--mono);font-size:.62rem;color:var(--faint)}
.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)}}