/* LAW Notices — design system.
 *
 * Two rules carry the whole look:
 *
 * 1. COLOUR MEANS CONFIDENCE. The interface itself is ink on paper with a
 *    single slate-blue for links and controls. The only saturated colours in
 *    the product are the verification states, so a green/amber/violet mark
 *    always means "this is how far the source was checked" and never
 *    decoration. Every row and panel carries a 3px rail in its tier colour, so
 *    trustworthiness reads peripherally before you read a word.
 *
 * 2. THREE TYPEFACE ROLES, EACH MEANING SOMETHING.
 *      serif  = words taken from the source document (quotes, charge wording,
 *               conduct summaries) — the prosecutor's voice
 *      sans   = our interface — labels, navigation, our own prose
 *      mono   = identifiers you will copy (ЄРДР, dates, tax ids, counts)
 *    A reader can always tell whose words they are looking at.
 */

/* ------------------------------------------------------------------ tokens */
:root{
  --paper:#f1f1ee; --card:#fff; --card-2:#f8f8f6;
  --ink:#15171b; --ink-2:#5b6270; --ink-3:#868c98;
  --rule:#dcdcd5; --rule-2:#e9e9e3;
  --link:#1f3d63; --link-soft:#e7ecf3;
  --ok:#1f6b45; --warn:#8a6212; --vis:#4f4a94; --bad:#9c2c2c;
  --ok-bg:#e6f0ea; --warn-bg:#f5eeda; --vis-bg:#eceafa; --bad-bg:#f6e6e6;
  --shadow:0 1px 2px rgba(20,24,32,.05);
  --r:8px; --r-sm:5px;
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --doc:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,"Times New Roman",serif;
  --id:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#101216; --card:#181b21; --card-2:#1e222a;
    --ink:#e6e8ec; --ink-2:#98a0ad; --ink-3:#6f7885;
    --rule:#2b303a; --rule-2:#232830;
    --link:#8fb3dd; --link-soft:#1c2531;
    --ok:#63bd90; --warn:#d3aa53; --vis:#9d97e0; --bad:#e08a8a;
    --ok-bg:#16261e; --warn-bg:#2a2415; --vis-bg:#1f1e2f; --bad-bg:#2b1a1a;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme=dark]{
  --paper:#101216; --card:#181b21; --card-2:#1e222a;
  --ink:#e6e8ec; --ink-2:#98a0ad; --ink-3:#6f7885;
  --rule:#2b303a; --rule-2:#232830;
  --link:#8fb3dd; --link-soft:#1c2531;
  --ok:#63bd90; --warn:#d3aa53; --vis:#9d97e0; --bad:#e08a8a;
  --ok-bg:#16261e; --warn-bg:#2a2415; --vis-bg:#1f1e2f; --bad-bg:#2b1a1a;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.55 var(--ui);
  font-variant-numeric:tabular-nums}
::selection{background:var(--link-soft);color:var(--ink)}
a{color:var(--link);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
hr{border:0;border-top:1px solid var(--rule);margin:1.6rem 0}

.skip{position:absolute;left:-999px;top:0;background:var(--card);padding:.5rem .8rem;
  border:1px solid var(--link);border-radius:var(--r-sm);z-index:50}
.skip:focus{left:.6rem;top:.6rem}

/* ------------------------------------------------------------------ header */
header.top{background:var(--card);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20}
.topin{max-width:1240px;margin:0 auto;padding:.55rem 1.1rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.55rem;font-size:.98rem;
  font-weight:660;letter-spacing:-.012em;color:var(--ink);margin-right:.2rem}
.brand:hover{text-decoration:none}
.brand .mark{font-family:var(--id);font-size:.72rem;font-weight:700;letter-spacing:0;
  background:var(--ink);color:var(--paper);padding:.16rem .34rem;border-radius:3px}
.brand em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:.78rem;
  letter-spacing:0}
nav{display:flex;gap:.15rem;flex-wrap:wrap;flex:1}
nav a{color:var(--ink-2);font-size:.875rem;padding:.3rem .42rem;border-radius:var(--r-sm);
  white-space:nowrap}
nav a:hover{background:var(--card-2);color:var(--ink);text-decoration:none}
nav a.on{color:var(--ink);background:var(--link-soft);font-weight:560}
.topsearch{display:flex;align-items:center;gap:.35rem}
.topsearch input{width:8rem;max-width:34vw;font-size:.83rem;padding:.33rem .55rem}
.topsearch kbd{display:none}
@media (min-width:1180px){.topsearch kbd{display:inline-block}}
.iconbtn{background:var(--card);border:1px solid var(--rule);color:var(--ink-2);
  border-radius:var(--r-sm);padding:.3rem;line-height:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.iconbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round}
.iconbtn:hover{background:var(--card-2);color:var(--ink);border-color:var(--ink-3)}
kbd{font-family:var(--id);font-size:.68rem;border:1px solid var(--rule);
  border-bottom-width:2px;border-radius:4px;padding:.05rem .3rem;color:var(--ink-3);
  background:var(--card-2)}

main{max-width:1240px;margin:0 auto;padding:1.5rem 1.1rem 4rem}
/* The document reader gets the screen: a PDF beside its OCR text is not
   readable in half of 1240px. Prose on the page keeps its own measure. */
main.wide{max-width:1920px}
.docview{grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.docview{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.docframe{display:block;width:100%;height:calc(100vh - 150px);min-height:520px;
  border:0;background:#fff}
.docview .pagetext{max-height:calc(100vh - 215px);overflow:auto}

/* -------------------------------------------------------------- typography */
h1{font-size:1.4rem;font-weight:660;margin:0 0 .35rem;letter-spacing:-.02em;
  max-width:68ch}
h2{font-size:.95rem;font-weight:640;margin:2.2rem 0 .7rem;letter-spacing:-.005em;
  padding-top:.7rem;border-top:1px solid var(--rule)}
h2:first-child{border-top:0;padding-top:0;margin-top:0}
h2 .aside{font-weight:400;color:var(--ink-3);font-size:.8rem;margin-left:.5rem}
h3{font-size:.7rem;font-weight:620;margin:1.15rem 0 .5rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em}
h3:first-child,.panel>h3:first-child{margin-top:0}
.lede{color:var(--ink-2);max-width:74ch;margin:.25rem 0 1.1rem;font-size:.92rem}
.lede.small{font-size:.85rem;margin-bottom:.6rem}
.muted{color:var(--ink-2)}
.small{font-size:.85rem}
.tiny{font-size:.745rem;line-height:1.4}
.doc{font-family:var(--doc);font-size:1rem;line-height:1.6}
.id{font-family:var(--id);font-size:.82em;letter-spacing:-.01em}
b,strong{font-weight:620}

/* ------------------------------------------------------------ layout parts */
.panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:.95rem 1.05rem;box-shadow:var(--shadow)}
.grid{display:grid;gap:.75rem}
/* Panels size to their own content — a 5-row chart beside a 12-row one should
   not grow a screen of empty card to match it. */
.cols2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  align-items:start}
.cols3{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.cols4{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.push{margin-left:auto}
.stack>*+*{margin-top:.5rem}

/* --------------------------------------------------------- the trust spine */
/* The signature element. One bar = the whole corpus, split by how far each
   notice was checked against its source. Repeated in miniature as the rail on
   every row, so the same colour always answers the same question.            */
.spine{display:flex;height:16px;border-radius:4px;overflow:hidden;
  border:1px solid var(--rule);background:var(--card);margin:.15rem 0 .55rem}
.spine a,.spine span{display:block;height:100%;min-width:3px;transition:filter .15s}
.spine a:hover{filter:brightness(1.12) saturate(1.3)}
.spine .seg-verified{background:var(--ok)}
.spine .seg-flagged{background:var(--warn)}
.spine .seg-vision_only{background:var(--vis)}
.spine .seg-unverifiable,.spine .seg-unknown{background:var(--bad)}
/* The verification LEVELS, on the accuracy summary only: a different
   taxonomy from the checking bands above, so different segment names.
   Ascending strength reads grey, then slate, then green, and each tier
   block below the bar carries the same colour as its rail. */
.spine .seg-lvl-transcription{background:var(--ink-3)}
.spine .seg-lvl-independent{background:var(--link)}
.spine .seg-lvl-pageread{background:var(--ok)}
.hero.lvl-t{border-left:3px solid var(--ink-3)}
.hero.lvl-i{border-left:3px solid var(--link)}
.hero.lvl-p{border-left:3px solid var(--ok)}
.hero.lvl-u{border-left:3px solid var(--bad)}
.spinekey{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.78rem;color:var(--ink-2)}
.spinekey a{color:inherit;display:flex;align-items:center;gap:.35rem}
.spinekey a:hover{color:var(--ink)}
.spinekey i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.spinekey b{color:var(--ink);font-family:var(--id);font-size:.8rem}

/* ----------------------------------------------------------------- figures */
.hero{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow)}
.hero .fig{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.hero .big{font-size:clamp(2.5rem,7vw,3.6rem);font-weight:680;letter-spacing:-.04em;
  line-height:.95;font-variant-numeric:tabular-nums}
.hero .cap{font-size:.9rem;color:var(--ink-2)}
.hero .span{font-family:var(--id);font-size:.78rem;color:var(--ink-3)}

.figs{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr));
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
.figs .f{padding:.8rem .95rem;border-left:1px solid var(--rule-2)}
.figs .f:first-child{border-left:0}
.figs .n{font-size:1.5rem;font-weight:660;letter-spacing:-.025em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.figs .k{font-size:.78rem;color:var(--ink-2);margin-top:.1rem}
.figs .sub{font-size:.72rem;color:var(--ink-3);margin-top:.25rem}
a.f:hover{background:var(--card-2);text-decoration:none}
a.f:hover .n{color:var(--link)}

.stat{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:.8rem .9rem;box-shadow:var(--shadow)}
.stat .n{font-size:1.45rem;font-weight:660;letter-spacing:-.025em;line-height:1.1}
.stat .k{font-size:.77rem;color:var(--ink-2);margin-top:.1rem}
.stat .sub{font-size:.72rem;color:var(--ink-3);margin-top:.3rem}

/* -------------------------------------------------------------------- bars */
.barrow{display:block;margin:.42rem 0;color:inherit}
a.barrow:hover{text-decoration:none}
.barlabel{display:flex;justify-content:space-between;gap:.7rem;font-size:.82rem;
  align-items:baseline;margin-bottom:.18rem}
.barlabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.barrow:hover .barlabel span{text-decoration:underline}
.barlabel b{font-family:var(--id);font-size:.78rem;font-weight:600;flex:none;
  color:var(--ink-2)}
.bartrack{height:6px;background:var(--rule-2);border-radius:3px;overflow:hidden}
.bar{display:block;height:100%;background:var(--link);border-radius:3px;min-width:2px}
a.barrow:hover .bar{filter:brightness(1.15)}
.bar.ok{background:var(--ok)} .bar.warn{background:var(--warn)}
.bar.vis{background:var(--vis)} .bar.bad{background:var(--bad)}

/* meter — a percentage with its own track, used for grounding rates */
.meter .pct{font-size:1.35rem;font-weight:660;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.meter .k{font-size:.76rem;color:var(--ink-2);margin:.05rem 0 .35rem}

/* ------------------------------------------------------------------ tables */
.tbl-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.87rem}
thead th,tr>th{text-align:left;font-weight:600;color:var(--ink-3);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.075em;padding:.5rem .6rem;
  border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--card);
  position:sticky;top:0;z-index:2}
thead th a{color:inherit;display:inline-flex;gap:.25rem;align-items:center}
thead th a:hover{color:var(--ink);text-decoration:none}
thead th .dir{color:var(--link);font-size:.85rem;margin-left:.1rem}
thead th[aria-sort] a{color:var(--ink)}
td{padding:.52rem .6rem;border-bottom:1px solid var(--rule-2);vertical-align:top}
tbody tr:last-child td,table tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--card-2)}
.num{text-align:right;font-family:var(--id);font-size:.78rem;color:var(--ink-2);
  white-space:nowrap}
td.num,th.num{text-align:right}
table.plain th{position:static;text-transform:none;letter-spacing:0;font-size:.76rem}
table.bare td{border:0;padding:.24rem .5rem .24rem 0}
table.bare td+td{padding-left:.9rem}
table.bare tr:hover td{background:none}
.clip{display:block;max-width:46ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Soaks up leftover table width so short columns stay next to each other
   instead of drifting to opposite edges of a wide screen. */
th.slack,td.slack{width:100%;padding:0}

/* the rail: tier colour on the leading edge of every row and panel */
[data-tier] > td:first-child,[data-tier].panel{box-shadow:inset 3px 0 0 var(--rule)}
[data-tier=verified] > td:first-child,[data-tier=verified].panel{box-shadow:inset 3px 0 0 var(--ok)}
[data-tier=flagged] > td:first-child,[data-tier=flagged].panel{box-shadow:inset 3px 0 0 var(--warn)}
[data-tier=vision_only] > td:first-child,[data-tier=vision_only].panel{box-shadow:inset 3px 0 0 var(--vis)}
[data-tier=unverifiable] > td:first-child,[data-tier=unverifiable].panel{box-shadow:inset 3px 0 0 var(--bad)}
[data-tier] > td:first-child{padding-left:.75rem}
[data-tier].panel{padding-left:1.15rem}

/* ------------------------------------------------------------------- pills */
.pill{display:inline-block;font-size:.7rem;line-height:1.5;padding:.08rem .42rem;
  border-radius:20px;border:1px solid var(--rule);color:var(--ink-2);
  white-space:nowrap;background:var(--card)}
.pill.verified{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.pill.flagged{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.pill.vision_only{color:var(--vis);border-color:var(--vis);background:var(--vis-bg)}
.pill.unverifiable,.pill.unknown{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.pill.stat-charge{font-family:var(--id);font-size:.7rem;border-radius:var(--r-sm);
  color:var(--ink);border-color:var(--rule)}
.pill.cat{border-radius:var(--r-sm);background:var(--card-2)}
.pill.sc{border-style:dashed;color:var(--ink-3)}

/* chips — filter toggles that read as data, not as buttons */
.chips{display:flex;gap:.35rem;flex-wrap:wrap;margin:.7rem 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;
  padding:.24rem .6rem;border:1px solid var(--rule);border-radius:20px;
  background:var(--card);color:var(--ink-2);white-space:nowrap}
.chip:hover{border-color:var(--link);color:var(--ink);text-decoration:none}
.chip.on{background:var(--link);border-color:var(--link);color:#fff;font-weight:550}
:root[data-theme=dark] .chip.on{color:#0f1216}
.chip .c{font-family:var(--id);font-size:.72rem;opacity:.72}
.chip.clear{border-style:dashed}
.chip .x{font-size:.9rem;line-height:1;opacity:.75}

/* ------------------------------------------------------------------- forms */
form.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:.75rem .85rem;box-shadow:var(--shadow);margin:.2rem 0 .8rem}
label.f{display:flex;flex-direction:column;gap:.22rem;font-size:.7rem;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
select,input[type=text],input[type=search],textarea{
  font:inherit;font-size:.86rem;padding:.38rem .5rem;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);
  font-variant-numeric:tabular-nums}
select{cursor:pointer}
input::placeholder{color:var(--ink-3)}
textarea{width:100%;font-family:var(--id);font-size:.83rem;line-height:1.5;
  resize:vertical}
button,.btn{font:inherit;font-size:.85rem;font-weight:550;padding:.4rem .85rem;
  border:1px solid var(--link);background:var(--link);color:#fff;
  border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;display:inline-block}
button:hover,.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn.ghost{background:var(--card);color:var(--link)}
.btn.ghost:hover{background:var(--link-soft);filter:none}
.btn.sm{font-size:.78rem;padding:.26rem .6rem}
/* Dark mode inverts the label on SOLID buttons only. Scoped away from .ghost,
   which keeps a card background and would otherwise go near-black on near-black. */
:root[data-theme=dark] button:not(.ghost):not(.iconbtn):not(.copy),
:root[data-theme=dark] .btn:not(.ghost){color:#0f1216}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) button:not(.ghost):not(.iconbtn):not(.copy),
  :root:not([data-theme=light]) .btn:not(.ghost),
  :root:not([data-theme=light]) .chip.on{color:#0f1216}}
.searchbar{display:flex;gap:.5rem;margin:.7rem 0 1rem;flex-wrap:wrap}
.searchbar input[type=search]{flex:1;min-width:12rem;font-size:.95rem;padding:.5rem .7rem}

/* --------------------------------------------------------------- documents */
mark{background:var(--link-soft);color:inherit;padding:0 .12em;border-radius:2px;
  font-weight:560}
.quote{font-family:var(--doc);font-size:.95rem;line-height:1.6;
  border-left:2px solid var(--rule);padding:.15rem 0 .15rem .85rem;color:var(--ink-2);
  white-space:pre-wrap;max-height:13rem;overflow:auto;margin:.2rem 0}
.quote.tall{max-height:26rem}
/* Deliberately NOT the document serif: the summary is the model's prose, and
   the typeface is what tells a reader whose words they are looking at. */
.summary{font-size:.92rem;line-height:1.62;max-width:72ch;margin:.2rem 0}

.kv{display:grid;grid-template-columns:minmax(120px,168px) 1fr;gap:.05rem .9rem;
  font-size:.87rem;margin:0}
.kv dt{color:var(--ink-3);font-size:.75rem;padding-top:.28rem;
  border-top:1px solid var(--rule-2)}
.kv dd{margin:0;padding-top:.2rem;border-top:1px solid var(--rule-2);
  padding-bottom:.2rem}
.kv dt:first-of-type,.kv dd:first-of-type{border-top:0}
@media (max-width:520px){.kv{grid-template-columns:1fr}
  .kv dd{border-top:0;padding-top:0;margin-bottom:.35rem}}

/* grounding marks — attached to the datum, never a separate column */
.gr{font-size:.78em;margin-left:.3em;cursor:help;font-variant-numeric:normal}
.gr-yes{color:var(--ok)} .gr-no{color:var(--bad)} .gr-na{color:var(--ink-3)}
.g-ok{color:var(--ok)} .g-no{color:var(--bad)}

.note{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--link);
  border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.86rem;margin:.9rem 0;
  color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note.bad{border-left-color:var(--bad);background:var(--bad-bg)}
code{font-family:var(--id);font-size:.85em;background:var(--card-2);
  border:1px solid var(--rule-2);padding:.05em .32em;border-radius:4px}
pre code{display:block;padding:.55rem .65rem;white-space:pre-wrap;line-height:1.5}

.copy{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:0 .25rem;
  font-size:.78rem;line-height:1;border-radius:3px}
.copy:hover{color:var(--link);background:var(--link-soft)}
.copy.done{color:var(--ok)}
/* In a long table the copy affordance is noise on 50 rows at once, so it waits
   for the row. Focus still reveals it, so it stays reachable from the keyboard. */
td .copy{opacity:0;transition:opacity .12s}
tr:hover td .copy,td .copy:focus-visible,td .copy.done{opacity:1}
@media (hover:none){td .copy{opacity:1}}

/* ------------------------------------------------------------------- empty */
.empty{background:var(--card);border:1px dashed var(--rule);border-radius:var(--r);
  padding:2rem 1.2rem;text-align:center;color:var(--ink-2)}
.empty h4{margin:0 0 .3rem;font-size:.95rem;font-weight:620;color:var(--ink)}
.empty p{margin:0 auto;max-width:46ch;font-size:.86rem}
.empty .row{justify-content:center;margin-top:.8rem}

/* ------------------------------------------------------------------ paging */
.pager{display:flex;gap:.4rem;align-items:center;margin:1rem 0;font-size:.84rem;
  flex-wrap:wrap}
.pager a{padding:.28rem .6rem;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);color:var(--link)}
.pager a:hover{border-color:var(--link);text-decoration:none}
.pager .at{color:var(--ink-2);font-family:var(--id);font-size:.78rem}

.crumb{font-size:.82rem;color:var(--ink-3);margin:0 0 .7rem}
.crumb a{color:var(--ink-2)}

footer{max-width:1240px;margin:0 auto;padding:1.2rem 1.1rem 3rem;color:var(--ink-3);
  font-size:.775rem;border-top:1px solid var(--rule);line-height:1.6}
footer a{color:var(--ink-2)}

@media (max-width:820px){
  /* Brand, search and the theme toggle share the top line; navigation takes
     the second. Without the explicit ordering the toggle orphans onto a line
     of its own between them. */
  .topin{gap:.5rem}
  .brand{flex:none;order:1}
  .brand em{display:none}
  .topsearch{order:2;flex:1;min-width:0;margin-left:auto}
  .topsearch input{width:100%;max-width:none;min-width:5rem}
  #theme{order:2;flex:none}
  .whoami{order:2}
  nav{order:3;width:100%;flex:auto;gap:.05rem}
  nav a{padding:.28rem .45rem}
  main{padding-top:1.1rem}
  h2{margin-top:1.7rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------------- print */
.printonly{display:none}
@media print{
  .printonly{display:block}
  :root{--paper:#fff;--card:#fff;--ink:#000;--ink-2:#333;--ink-3:#555;
        --rule:#bbb;--rule-2:#ddd;--shadow:none}
  header.top,.topsearch,.iconbtn,.pager,.chips,form,.copy,.noprint{display:none!important}
  main{max-width:none;padding:0}
  .panel,.tbl-wrap,.hero,.figs{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .quote{max-height:none;overflow:visible}
  a{color:#000;text-decoration:none}
  thead th{position:static}
  footer{border-top:1px solid #ccc;color:#555}
}

/* ---------------------------------------------- the checking bar (rebuilt)
   The old trust spine coloured rows by a verification tier that no longer
   exists in the data. This is its descendant, and it splits every checked
   value by HOW it was checked. Violet keeps its old meaning: a person read the
   original page, which is now the strongest evidence on the site rather than a
   caveat. */
.spine .seg-verified{background:var(--vis)}
.spine .seg-exact{background:var(--ok)}
.spine .seg-assembled{background:var(--link)}
.spine .seg-partial{background:var(--warn)}
.spine .seg-absent{background:var(--bad)}
.spinekey span{display:flex;align-items:center;gap:.35rem}

/* ------------------------------------------------ rendered source documents
   The accuracy statement is the release's own markdown. It is the one place a
   long document is shown whole, so it gets real prose measure and readable
   tables rather than a wall of monospace. */
.prose{max-width:74ch;font-size:.93rem;line-height:1.62}
.prose h1{font-size:1.3rem;margin:0 0 .6rem}
.prose h2{font-size:1rem;margin:1.8rem 0 .6rem;padding-top:.7rem;border-top:1px solid var(--rule)}
.prose h3{font-size:.86rem;text-transform:none;letter-spacing:0;color:var(--ink);margin:1.2rem 0 .4rem}
.prose p{margin:.6rem 0}
.prose ul,.prose ol{margin:.6rem 0;padding-left:1.3rem}
.prose li{margin:.25rem 0}
.prose table{width:auto;min-width:min(100%,32rem);margin:.9rem 0;font-size:.86rem}
.prose th{position:static;background:none}
.prose td,.prose th{padding:.35rem .7rem;border-bottom:1px solid var(--rule-2)}
.prose code{font-size:.84em}
.prose pre{background:var(--card-2);border:1px solid var(--rule-2);border-radius:var(--r-sm);
  padding:.6rem .75rem;overflow-x:auto;margin:.7rem 0}
.prose pre code{border:0;background:none;padding:0;white-space:pre}
.prose hr{margin:1.6rem 0}
.prose strong{font-weight:620;color:var(--ink)}
.prose blockquote{border-left:2px solid var(--rule);margin:.7rem 0;padding-left:.9rem;color:var(--ink-2)}

/* A row that highlights on hover promises it can be clicked. Where the primary
   cell is a link that promise is kept; where a table is purely a reference
   listing, the highlight is removed rather than left to mislead. */
table.static tbody tr:hover td{background:none}
td > a.clip{display:block}
.nowrap{white-space:nowrap}

/* The publication timeline. Each bar is a link to that month's cases: a chart
   that responds to the pointer has to go somewhere when clicked. */
.tl{display:flex;align-items:flex-end;gap:2px;height:92px}
.tlbar{flex:1;min-width:2px;display:flex;align-items:flex-end;height:100%;
  border-radius:2px 2px 0 0}
.tlbar span{display:block;width:100%;background:var(--link);border-radius:2px 2px 0 0;
  transition:filter .12s}
.tlbar:hover{background:var(--link-soft);text-decoration:none}
.tlbar:hover span{filter:brightness(1.25)}

/* A mark on a value has to be readable without hovering. Short words, in the
   tier colour, sized so a column of them stays quiet. */
.tag{display:inline-block;font-size:.66rem;line-height:1.5;padding:.02rem .34rem;
  border-radius:3px;border:1px solid var(--rule);color:var(--ink-3);
  background:var(--card-2);white-space:nowrap;vertical-align:.08em;
  letter-spacing:.01em}
.tag.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.tag.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.tag.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}

/* The OCR pane sits beside the document and holds the WHOLE page's text. In a
   short scroll box it read as a preview of something longer, so it matches the
   document pane's height and says what it is underneath. */
.pagetext{font-family:var(--doc);font-size:.95rem;line-height:1.6;
  white-space:pre-wrap;height:78vh;overflow:auto;
  border-left:2px solid var(--rule);padding:.15rem 0 .15rem .85rem;
  color:var(--ink-2)}

/* A link that leaves the site says so and opens in a new tab, so a reader
   never loses the record they were working on. */
a.ext::after{content:"↗";font-size:.78em;margin-left:.22em;opacity:.65;
  vertical-align:.08em}

/* Name variants cluster by spelling; the documents behind each are one click
   away rather than twenty rows of repetition. */
tr.sub td{padding-top:0;border-bottom:1px solid var(--rule-2)}
tr.sub summary{cursor:pointer;color:var(--link);list-style:none;
  padding:.15rem 0 .3rem}
tr.sub summary::-webkit-details-marker{display:none}
tr.sub summary::before{content:"▸ ";font-size:.8em}
tr.sub details[open] summary::before{content:"▾ "}
ul.doclist{margin:.1rem 0 .5rem;padding-left:1.1rem;font-size:.85rem}
ul.doclist li{margin:.18rem 0}
.pager a.off{opacity:.35;pointer-events:none}

/* ------------------------------------------------------- the bar, rebuilt
   It wrapped onto two lines, the tagline competed with the navigation, and a
   filled pill for the current section read as a button rather than a place.
   Tighter, one line to well under a laptop width, and the current section is
   marked with a rule rather than a block of colour. */
header.top{background:var(--card);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20}
.topin{max-width:1240px;margin:0 auto;padding:0 1.1rem;height:52px;
  display:flex;align-items:stretch;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);flex:none;
  font-weight:640;letter-spacing:-.012em}
.brand:hover{text-decoration:none}
.brand .mark{font-family:var(--id);font-size:.7rem;font-weight:700;
  background:var(--ink);color:var(--paper);padding:.14rem .32rem;border-radius:3px;
  letter-spacing:0;line-height:1}
.brand .bname{font-size:.95rem;white-space:nowrap}
.brand .btag{font-size:.75rem;color:var(--ink-3);font-weight:400;
  letter-spacing:0;white-space:nowrap;padding-left:.55rem;margin-left:.1rem;
  border-left:1px solid var(--rule)}
nav{display:flex;align-items:stretch;gap:.1rem;flex:1;min-width:0}
nav a{display:flex;align-items:center;padding:0 .62rem;font-size:.855rem;
  color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent;
  border-radius:0}
nav a:hover{color:var(--ink);background:none;text-decoration:none;
  border-bottom-color:var(--rule)}
nav a.on{color:var(--ink);background:none;font-weight:560;
  border-bottom-color:var(--link)}
.topsearch{display:flex;align-items:center;flex:none;position:relative}
.topsearch .si{position:absolute;left:.5rem;width:13px;height:13px;fill:none;
  stroke:var(--ink-3);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.topsearch input{width:12rem;font-size:.82rem;padding:.34rem .5rem .34rem 1.65rem;
  border-radius:var(--r-sm)}
.topsearch input:focus{width:16rem;transition:width .14s}
#theme{align-self:center;flex:none;border:0;background:none;color:var(--ink-3)}
#theme:hover{color:var(--ink);background:none}

/* Hidden at every width since 2026-08-18: the bar is capped at 1240px and
   the Validation link needs the room; the tagline is decorative and every
   page's own lede carries the context. Was: hidden under 1180px only. */
.brand .btag{display:none}
@media (max-width:900px){
  .topin{height:auto;padding:.5rem 1.1rem;flex-wrap:wrap;gap:.6rem}
  .brand{order:1} .topsearch{order:2;margin-left:auto} #theme{order:3}
  nav{order:4;width:100%;flex:auto;overflow-x:auto}
  nav a{padding:.3rem .5rem;border-bottom-width:2px}
  .topsearch input{width:10rem}
}

/* Article numbers are identifiers, not prose. Set as chips so a row of them
   scans, with the substantive charge first: "28, 438" read as though 28 were
   the charge, when 438 is and 28 only says he acted with others. */
.art{display:inline-block;font-family:var(--id);font-size:.72rem;
  padding:.04rem .3rem;margin-right:.22rem;border-radius:3px;
  background:var(--card-2);border:1px solid var(--rule-2);color:var(--ink-2)}
/* Long source sentences land in narrow cells. Clipped with the whole value on
   hover, so a table stays a table. */
td .clip{max-width:38ch}
/* A continuation row shares the reason above it, so the rule is stated once. */
table tr.cont td{border-top:0}
table tr.cont td:first-child{border-right:0}
/* A table needs a title of its own when a section holds more than one. */
h3 + .tbl-wrap, h3 + .lede + .tbl-wrap{margin-top:.5rem}
/* Sticky column headers on long listings. thead th is sticky at top:0
   globally, but two things defeat it: the site header is itself sticky
   at top:0 (z-index 20 against 2, so the column row slides underneath),
   and .tbl-wrap's overflow-x:auto makes the wrapper the scroll
   container, so the row sticks to a box that never scrolls vertically.
   On screens wide enough that the table cannot need horizontal scroll,
   let the wrapper overflow visibly and pin the row just under the site
   header (53px tall, measured 2026-09-02). Narrow screens keep the
   horizontal scroll and give up stickiness, which is the right trade. */
@media (min-width: 960px){
  .sticky-head{overflow-x:visible}
  .sticky-head thead th{top:53px}
}
/* --------------------------------------------------- category tag chips */
.catchips{display:inline-flex;gap:.3rem;flex-wrap:wrap;vertical-align:middle}
.catchips .cat{font-size:.72rem;padding:.08rem .45rem;border:1px solid var(--rule);
  border-radius:99px;background:var(--card-2);color:var(--ink-2);white-space:nowrap}
.catchips .cat:hover{border-color:var(--link);color:var(--link);text-decoration:none}
/* ------------------------------------------------- unit-page bar charts */
.ubars{display:flex;flex-direction:column;gap:.3rem;max-width:640px;
  margin:.4rem 0 1rem}
/* .ubar, not .bar: the overview's own .bar (line ~202) is a filled block
   and painted these rows solid blue when the name collided. */
.ubar{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.ubar .lbl{flex:0 0 46%;text-align:right;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubar .track{flex:1;background:var(--rule);border-radius:2px;height:.65rem}
.ubar .fill{display:block;height:100%;background:var(--link);
  border-radius:2px;opacity:.75}
.ubar .num{flex:0 0 2.2rem;font-variant-numeric:tabular-nums;
  color:var(--ink-3)}
/* Force-share bar on /units: one segment per force, same counts as the
   chips. Colors stay muted; this is proportion, not decoration. */
.tbl-wrap + h3{margin-top:1.6rem}
.arts{display:block;white-space:nowrap}
.art.more{background:none;border-style:dashed;cursor:help}

/* ------------------------------------------------------------- glossary */
.jumps{display:flex;flex-wrap:wrap;gap:.35rem;margin:.9rem 0 .4rem}
.jumps a{padding:.26rem .6rem;border:1px solid var(--rule);border-radius:var(--r-sm);
  font-size:.8rem;color:var(--ink-2)}
.jumps a:hover{border-color:var(--link);color:var(--link);text-decoration:none}
.gloss{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:0 1.2rem;margin:.4rem 0 .6rem}
.gloss dt{font-weight:620;font-size:.92rem;padding:.55rem 0;border-top:1px solid var(--rule-2);
  scroll-margin-top:70px}
.gloss dd{margin:0;padding:.55rem 0;border-top:1px solid var(--rule-2);font-size:.92rem;
  line-height:1.55;max-width:74ch;color:var(--ink-2)}
.gloss dt:first-of-type,.gloss dd:first-of-type{border-top:0}
@media (max-width:600px){.gloss{grid-template-columns:1fr}
  .gloss dd{border-top:0;padding-top:0}}
.legend .tag{margin-right:.15rem}

/* ------------------------------------------------------------- accuracy */
.acc-steps{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin:1rem 0 .4rem}
.acc-steps .step{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:.85rem .95rem}
.acc-steps .n{font-size:1.5rem;font-weight:660;letter-spacing:-.025em;line-height:1.1}
.acc-steps .k{font-size:.8rem;font-weight:620;margin-top:.15rem}
.acc-steps p{margin:.35rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.acc-headline{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 .8rem}
.acc-headline .big{flex:1 1 160px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:.85rem 1rem}
.acc-headline .big.ok{border-left:3px solid var(--ok)}
.acc-headline .v{display:block;font-size:2.2rem;font-weight:680;letter-spacing:-.04em;line-height:1.05}
.acc-headline .c{display:block;font-size:.8rem;color:var(--ink-2);margin-top:.2rem}
.conf{display:inline-block;font-size:.7rem;font-weight:620;line-height:1.6;padding:.02rem .5rem;border-radius:999px;border:1px solid var(--rule);white-space:nowrap}
.conf.measured{color:var(--ok);border-color:var(--ok)}
.conf.unsampled{color:var(--warn);border-color:var(--warn)}
.conf.withheld{color:var(--ink-3)}
.conf.prose{color:var(--link);border-color:var(--link)}
.legend .conf{margin:0 .2rem 0 .6rem}
.legend .conf:first-child{margin-left:0}
table.acc tr.fam th{background:var(--card-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding-top:.7rem}
table.acc td{vertical-align:top}
.mbar{display:inline-block;width:64px;height:.45rem;background:var(--rule-2);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:.3rem}
.mbar span{display:block;height:100%;background:var(--ok)}
h2.major{font-size:1.25rem;font-weight:660;letter-spacing:-.02em;margin-top:2.4rem}
.acc-hero{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--ok);border-radius:var(--r);padding:1.1rem 1.3rem;margin:.9rem 0 .4rem}
.acc-hero .v{display:block;font-size:clamp(3rem,8vw,4.4rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.acc-hero .c{display:block;font-size:.95rem;color:var(--ink);margin-top:.35rem;max-width:60ch}
.acc-hero .sub{margin:.5rem 0 0;font-size:.85rem;color:var(--ink-2);max-width:70ch}
.whoami{display:flex;align-items:center;margin:0}

/* Header on one line at a 1340px window with eleven sections, search, the
   theme toggle and sign-out (2026-09-04): the bar may run wider than the
   content column, links sit tighter, the search box is narrower. */
.topin{max-width:1440px}
nav a{font-size:.85rem;padding:.3rem .36rem}
.topsearch input{width:7rem}