/* LAW Broadcasts design system, carried over from LAW Notices.
 *
 * 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:focus-visible{border-radius:20px}
.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}
/* A press should be felt: one pixel down and a touch darker, gone on release.
   Disabled reads as disabled and does not react. */
button:active,.btn:active,.chip:active,.pager a:active{transform:translateY(1px);filter:brightness(.96)}
button:disabled,button[aria-disabled=true],.btn[aria-disabled=true]{
  opacity:.45;cursor:not-allowed;filter:none;transform: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}
/* The theme switch and the sign-out are a pair at the bar's edge; one bare and
   one boxed read as two different kinds of thing. Both bare, same hover. */
#theme,.whoami .iconbtn{align-self:center;flex:none;border:0;background:none;color:var(--ink-3)}
#theme:hover,.whoami .iconbtn:hover{color:var(--ink);background:var(--card-2)}
.whoami{display:flex;align-items:center;flex: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-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.9rem;margin:.9rem 0 .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-heroes .acc-hero{margin:0}
.acc-hero.all{border-left-color:var(--ink-2)}
.acc-hero .k{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:.35rem}
.acc-hero .v{display:block;font-size:clamp(2.6rem,7vw,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}

/* ------------------------------------------------- the Accused page (wall)
   2026-09-10: an introduction, a filter rail on the left, a wall of document
   thumbnails on the right with the table on a toggle. */
.listhead{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 1rem}
.listhead form{display:flex;gap:.4rem;flex:1;min-width:16rem;max-width:32rem}
.listhead form input[type=search]{flex:1}
.listhead .count{color:var(--ink-2);font-size:.9rem;font-variant-numeric:tabular-nums}
.listhead .views{margin-left:auto;display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.listhead .views button{border:0;border-radius:0;background:var(--card-2);color:var(--ink-2);padding:.3rem .7rem;font-size:.8rem;font-weight:550}
.listhead .views button[aria-pressed=true]{background:var(--link);color:#fff}
/* The dark-mode rule for solid buttons paints text near-black; the
   inactive half of the toggle must keep the ordinary text colour. */
:root[data-theme=dark] .listhead .views button[aria-pressed=false],
:root:not([data-theme=light]) .listhead .views button[aria-pressed=false]{color:var(--ink-2);background:var(--card-2)}
:root[data-theme=dark] .listhead .views button[aria-pressed=true]{color:#0f1216}
.listhead .views button[aria-pressed=false]:hover{color:var(--ink);filter:none}
.railpage{display:grid;grid-template-columns:260px 1fr;gap:1.2rem;align-items:start}
.railpage>div{min-width:0}
/* Units and Institutions open their column with a section heading. The
   heading and each table become grid items of their own (display:contents),
   and the rail starts on the table's row, so its top is level with the
   table's top rather than the heading's (Ben, 2026-09-11). Row gap is zero
   because the rail spans rows it does not fill; the headings carry the
   spacing instead. */
.railpage.sections{row-gap:0}
.railpage.sections>div{display:contents}
.railpage.sections>div>*{grid-column:2;min-width:0}
.railpage.sections>div>h3:first-child{margin-top:0}
.railpage.sections>.rail{grid-column:1;grid-row:2 / span 40}
.rail{position:sticky;top:64px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:.6rem .8rem .8rem;box-shadow:var(--shadow);font-size:.84rem}
.rail .railhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .3rem}
.rail .railhead b{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.rail details{border-top:1px solid var(--rule);padding:.35rem 0}
.rail summary{cursor:pointer;font-weight:600;font-size:.82rem;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;align-items:center;padding:.25rem 0}
.rail summary::-webkit-details-marker{display:none}
.rail summary::after{content:"⌄";color:var(--ink-3);font-size:.9rem;transition:transform .15s}
.rail details[open] summary::after{transform:rotate(180deg)}
.rail label{display:grid;grid-template-columns:auto 1fr auto;gap:.45rem;align-items:center;
  padding:.18rem .2rem;border-radius:5px;color:var(--ink-2);cursor:pointer}
.rail label:hover{background:var(--card-2);color:var(--ink)}
.rail label.on{color:var(--ink)}
.rail label .n{font-family:var(--id);font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rail input[type=checkbox]{margin:0;accent-color:var(--link)}
.rail .apply{margin-top:.6rem;width:100%}
.rail details.more{border:0;padding:0 0 .1rem}
.rail details.more>summary{font-weight:500;font-size:.78rem;color:var(--link);padding:.2rem .2rem}
.rail details.more>summary::after{content:"";}
.rail details.more[open]>summary{display:none}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.9rem}
.card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  color:var(--ink);box-shadow:var(--shadow);position:relative}
.card:hover{text-decoration:none;border-color:var(--link)}
.card .page{display:block;position:relative;aspect-ratio:3/4;background:var(--card-2);overflow:hidden}
.card .page img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.2) contrast(.95)}
:root[data-theme=dark] .card .page img{filter:saturate(.2) brightness(.82)}
.card:hover .page img{filter:none}
.card .page .nothumb{display:none;position:absolute;inset:0;padding:2.2rem .7rem .9rem;font-size:.72rem;
  color:var(--ink-3);line-height:1.35;overflow:hidden;text-align:center}
.card .page:not(:has(img)) .nothumb{display:block}
.card.nothumb .page img{display:none}
.card.nothumb .page .nothumb{display:block}
.card .page .pill{position:absolute;left:.45rem;top:.45rem;background:var(--card);backdrop-filter:blur(6px)}
.card .body{display:block;padding:.55rem .65rem .7rem}
.card .name{display:block;font-weight:600;font-size:.86rem;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .meta{display:block;font-size:.74rem;color:var(--ink-3);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill.status.charged_438{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.pill.status.charged_other{color:var(--vis);border-color:var(--vis);background:var(--vis-bg)}
.pill.status.summons_only,.pill.status.no_charging_doc{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.pill.status.no_case{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.statusline{margin:-.4rem 0 .8rem}
.people[data-view=cards] .tbl-wrap,.people[data-view=cards] .pager.tablepager{display:none}
.people[data-view=table] .wall,.people[data-view=table] .pager.wallpager{display:none}
@media (max-width:900px){
  .railpage{grid-template-columns:1fr}
  .railpage.sections>div>*{grid-column:1}
  .railpage.sections>.rail{grid-column:1;grid-row:auto;margin-bottom:1rem}
  .rail{position:static}
  .wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ================================================================ broadcasts
 *
 * The search screen. Everything above adds nothing to the Notices design
 * system; what follows is only what this product has and that one does not:
 * a provenance tag with two states, a month timeline, and the hit row.
 *
 * The one rule that carries the screen: a hit row is a LOCATOR, so the
 * timecode and the provenance tag come before the words, and the words are
 * set in the document face because they are somebody else's speech, not our
 * interface.
 */

/* main already carries the page measure; the search screen only wants a
   tighter top, because the box is the first thing on it. */
.searchpage{padding-top:1rem}

/* The inherited rule hides the brand tagline at every width, because Notices
   has nine nav items and a search box in the bar. This bar has six items and
   no box, so the room exists and the tagline says what the corpus is, which
   is not obvious from "Broadcasts". Still hidden when it would crowd. */
@media (min-width:1100px){ .brand .btag{display:inline} }
.sform{margin:0 0 1.2rem}
.searchbar input[type=search]{font-family:var(--ui)}
label.inline{display:inline-flex;align-items:center;gap:.32rem;font-size:.82rem;
  margin-right:.9rem;white-space:nowrap}
label.inline input{margin:0}

/* What actually ran. Small, monospaced, and always present: an analyst who
   cannot see the compiled expression cannot tell a wide search from a
   mistyped one. */
.qline{margin:-.5rem 0 .9rem;font-size:.78rem;color:var(--ink-3)}
.qline code{font-family:var(--id);font-size:.76rem;color:var(--ink-2);
  background:var(--card-2);border:1px solid var(--rule-2);border-radius:3px;
  padding:.05rem .3rem}
.qline.bad{color:var(--bad)}

.filterpanel{border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow)}
.filterpanel>summary{cursor:pointer;padding:.5rem .8rem;font-size:.82rem;
  font-weight:600;color:var(--ink-2)}
.filterbody{padding:.2rem .8rem .8rem;border-top:1px solid var(--rule-2)}
.filterpanel fieldset{border:0;margin:.6rem 0 0;padding:0}
.filterpanel legend{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);padding:0}
.progs label.inline{margin:.18rem .9rem .18rem 0}
.fcols{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:flex-end;margin:.7rem 0}
/* Breaks the row so the caveat sits under the two date boxes it is
   about, rather than beside whichever control happened to wrap. */
.fcols .datenote{flex:0 0 100%;margin:0;font-size:.78rem;color:var(--ink-3)}
.fchecks{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin:.5rem 0 0}
.picks{font-size:.78rem;color:var(--ink-3);margin:.6rem 0 0}

.resulthead{margin:1.2rem 0 1rem}
.count{margin:0 0 .7rem;font-size:.95rem}
.facetrow{display:grid;grid-template-columns:1fr 18rem;gap:1rem;align-items:start}
.tlfig{margin:0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:.6rem .7rem .35rem;box-shadow:var(--shadow)}

/* Bars are links, so a month reads as somewhere to go. preserveAspectRatio
   is none on purpose: the bars stretch to the panel and the height is the
   only thing carrying meaning. */
svg.timeline{display:block;width:100%;height:92px}
svg.timeline rect{fill:var(--link);opacity:.82}
svg.timeline a:hover rect{opacity:1}
.tlfig figcaption{display:flex;justify-content:space-between;font-size:.7rem;
  color:var(--ink-3);padding-top:.25rem;font-family:var(--id)}
.tlfig figcaption span:nth-child(2){font-family:var(--ui)}

table.facets{width:100%;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);border-collapse:collapse;box-shadow:var(--shadow);
  font-size:.82rem}
table.facets caption{text-align:left;padding:.5rem .7rem .3rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
table.facets td{padding:.22rem .7rem;border-top:1px solid var(--rule-2)}
table.facets td.num{text-align:right;font-family:var(--id);color:var(--ink-2)}

/* A result group is one broadcast. The header names the unit ("N lines"),
   because a broadcast holding forty hits and one holding one look the same
   from the top of the group otherwise. */
article.group{background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow);margin:0 0 .8rem;overflow:hidden}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  padding:.5rem .8rem;background:var(--card-2);border-bottom:1px solid var(--rule-2)}
.ghead .gtitle{font-weight:620}
.ghead .gwhen{font-family:var(--id);font-size:.78rem;color:var(--ink-2)}
.ghead .gchan{font-size:.78rem;color:var(--ink-3)}
.ghead .gmsk{font-family:var(--id);font-size:.74rem;color:var(--ink-3)}
.ghead .ghits{margin-left:auto;font-size:.74rem;color:var(--ink-3)}
.ghead audio{flex:0 0 100%;width:100%;height:32px;margin-top:.35rem}

/* The tag column is a fixed width, not auto: grid tracks are per-row, so an
   auto column makes "third party" push its line further right than "LAW"
   pushes the line above it, and a column of transcript text stops being a
   column. */
.hit{display:grid;grid-template-columns:5.4rem 5.4rem 1fr;gap:.2rem .55rem;
  align-items:baseline;padding:.45rem .8rem;border-top:1px solid var(--rule-2)}
.hit:first-of-type{border-top:0}
.hit .tc{grid-column:1;font-family:var(--id);font-size:.76rem;color:var(--ink-2)}
.hit>.tag{grid-column:2;justify-self:start}
.hit .line{grid-column:3;margin:0;font-family:var(--doc);font-size:1rem;
  line-height:1.5}
.hit .line mark{background:var(--link-soft);color:inherit;
  border-radius:2px;padding:0 .08em}
.hit .acts{grid-column:3;display:flex;flex-wrap:wrap;gap:.7rem;
  font-size:.74rem;padding-top:.15rem}
.hit .ctx{grid-column:3;margin:.3rem 0 .1rem;padding:.35rem .6rem;
  border-left:2px solid var(--rule);background:var(--card-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.86rem}
.hit .ctx.bad{color:var(--bad);border-left-color:var(--bad)}
.hit .ctx.tr{font-family:var(--doc);font-size:.95rem}
.ctxline{margin:.1rem 0;font-family:var(--doc);color:var(--ink-2)}
.ctxline.on{color:var(--ink);font-weight:500}
.ctxline .tc{font-family:var(--id);font-size:.72rem;color:var(--ink-3);
  margin-right:.4rem}

/* A button that behaves like a link is written like a link: these sit in a
   row of actions beside real anchors and must not read as four grey boxes. */
/* "and N more in this broadcast": quiet, because it is a way out of a group
   and not a result of its own. */
.gmore{margin:0;padding:.35rem .8rem .5rem 6rem;font-size:.78rem;
  border-top:1px solid var(--rule-2);background:var(--card-2)}

.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--link);
  cursor:pointer;text-underline-offset:2px}
.linkbtn:hover{text-decoration:underline}
.linkbtn.on{font-weight:600}
/* The shared rule above inverts the label of every solid button in dark mode.
   These are not solid buttons, they are links, and the inversion painted them
   near-black on near-black. Matched at the same specificity so the exception
   is stated rather than forced with !important. */
:root[data-theme=dark] button.linkbtn:not(.ghost):not(.iconbtn):not(.copy){color:var(--link)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) button.linkbtn:not(.ghost):not(.iconbtn):not(.copy){color:var(--link)}
}

/* Provenance. Two states only, because the GROUP is what changes how a line
   may be used; the kind behind it is the tag's title and the help page. */
.tag.law{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.tag.third{color:var(--vis);border-color:var(--vis);background:var(--vis-bg)}

dialog.savedlg{border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);color:var(--ink);padding:1rem 1.1rem;min-width:18rem}
dialog.savedlg::backdrop{background:rgba(20,24,32,.35)}
.collist{list-style:none;margin:.4rem 0;padding:0}
.collist li{padding:.15rem 0}
.newcol{display:flex;gap:.4rem;margin:.6rem 0}

table.grammar td:first-child{white-space:nowrap}
table.grammar code,.prose code,main code{font-family:var(--id);font-size:.86em}

@media (max-width:900px){
  .facetrow{grid-template-columns:1fr}
  .hit{grid-template-columns:5rem 5.4rem;}
  .hit .line,.hit .acts,.hit .ctx{grid-column:1 / -1}
}

/* ------------------------------------------------- the reader and the line
 *
 * The broadcast page is a transcript, so it is set as one: a numbered column
 * of lines in the document face, with the timecode and the speaker cluster
 * held in fixed columns to their left. The numbers are the list's own, and
 * they are what the span bar names.
 */
.bhead{margin:.4rem 0 1rem}
.bhead h1{margin:0 0 .3rem}
.bwhen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:0 0 .7rem;
  font-size:.82rem;color:var(--ink-2)}
.bwhen .d{font-family:var(--id)}
.bwhen .stampnote{font-size:.78rem;color:var(--ink-3)}
.readerpage .note,.linepage .note{font-size:.8rem;padding:.45rem .7rem}

.assets td.id{font-family:var(--id);font-size:.8rem}
/* These two screens put their tables inside a panel, which is already a card.
   The wrapper is there for the horizontal scroll alone: a long source URL
   must scroll its own table at phone width, not widen the page. */
.readerpage .panel>.tbl-wrap,.linepage .panel>.tbl-wrap{background:none;border:0;
  border-radius:0;box-shadow:none}

/* One tab per transcript. The provenance is IN the tab, not beside it: the
   choice a reader makes here is which machine's reading of the broadcast to
   believe, and a tab labelled "2" would hide that. */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 .3rem}
.tabs .tab{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .65rem;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  font-size:.82rem;color:var(--ink);text-decoration:none}
.tabs .tab:hover{border-color:var(--link)}
.tabs .tab.on{border-color:var(--link);box-shadow:inset 0 -2px 0 var(--link);
  font-weight:600}
.readernote{margin:.5rem 0 .8rem;font-size:.78rem;color:var(--ink-3)}
.readerbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  margin:0 0 .8rem}
.readerbar audio.reader{height:34px;min-width:min(100%,26rem)}
.readerbar p{margin:0}

ol.lines{margin:0;padding:0 0 3.5rem 3.4rem;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);
  list-style:decimal}
/* The <li> stays a list item so the browser draws the number, and the grid
   that lays a line out sits on an inner wrapper. The span bar names lines by
   these numbers; a reader who cannot see them cannot check what it names. */
ol.lines li.rline{display:list-item;padding:.3rem .8rem .3rem .2rem;
  border-top:1px solid var(--rule-2);color:var(--ink-3);font-size:.74rem}
ol.lines li.rline::marker{font-family:var(--id);font-size:.72rem;color:var(--ink-3)}
ol.lines li.rline:first-child{border-top:0}
ol.lines .rrow{display:grid;grid-template-columns:5.4rem var(--spkcol,2.6rem) 1fr auto;
  gap:.2rem .55rem;align-items:baseline}
/* A named voice puts the presenter's name in the chip, which is far wider than
   the bare cluster number the 2.6rem track was cut for. Each row is its own
   grid, so sizing the track to content would make the text start in a
   different place on every line -- the one thing the fixed track exists to
   prevent. Widen the track for the whole transcript instead, and only when
   some line in it actually carries a name. */
ol.lines:has(.spk.named){--spkcol:10.5rem}
ol.lines li.rline:hover{background:var(--card-2)}
ol.lines li.rline.sel{background:var(--link-soft)}
ol.lines li.rline.focus{box-shadow:inset 3px 0 0 var(--link)}
ol.lines .tc{font-family:var(--id);font-size:.76rem;color:var(--ink-2)}
ol.lines button.tc.seek{background:none;border:0;padding:0;cursor:pointer;
  color:var(--link);text-align:left;font-family:var(--id);font-size:.76rem}
:root[data-theme=dark] ol.lines button.tc.seek{color:var(--link)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) ol.lines button.tc.seek{color:var(--link)}
}
/* The cluster chip keeps its column even when a line has no label, so the
   text starts in the same place on every line and the column reads as a
   column. */
ol.lines .spk{font-family:var(--id);font-size:.72rem;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:3px;padding:0 .25rem;
  justify-self:start;
  /* Backstop: an unusually long name clips at the column edge rather than
     painting over the transcript, which is what it did before. */
  min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
ol.lines .spk.empty{border:0}
ol.lines .line{grid-column:3;margin:0;font-family:var(--doc);font-size:1rem;
  line-height:1.55;color:var(--ink)}
ol.lines .line mark{background:var(--link-soft);color:inherit;border-radius:2px;
  padding:0 .08em}
/* One cite link per line is noise on a screen of them, so it waits for the
   row to be hovered or the link to be focused by keyboard. */
ol.lines .citelink{opacity:0;font-size:.72rem}
ol.lines li.rline:hover .citelink,ol.lines .citelink:focus{opacity:1}

/* The span bar floats because a span is chosen while reading, and a bar that
   pushed the lines down would move the line under the pointer. */
.spanbar{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;max-width:min(92vw,46rem);
  padding:.5rem .8rem;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow);font-size:.8rem}
.spanbar .what{font-weight:600}
.spanbar .sep{color:var(--ink-3)}
.spanbar .msg{color:var(--ink-2)}
.spanbar .msg.bad{color:var(--bad)}

/* The line page. The single line is the page's subject, so it is set larger
   than the reader's and the grid of the search row is undone. */
.linecard{display:block;margin:0 0 1rem}
.linecard .line{font-family:var(--doc);font-size:1.15rem;line-height:1.6;margin:0 0 .5rem}
.linecard .acts{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.78rem}
.linepage .panel{margin:0 0 1rem}
.linepage .tbl th{text-align:left;white-space:nowrap;width:12rem}
.linepage audio.reader{height:34px;width:min(100%,26rem)}
.citeblock{margin:0;padding:.6rem .7rem;background:var(--card-2);
  border:1px solid var(--rule-2);border-radius:var(--r-sm);font-family:var(--id);
  font-size:.78rem;white-space:pre-wrap;word-break:break-word}

@media (max-width:900px){
  ol.lines{padding-left:2.6rem}
  /* The text drops to its own row here, so the chip has the rest of the line
     to itself and takes the width its name needs. */
  ol.lines .rrow{grid-template-columns:5rem max-content 1fr}
  ol.lines .spk{max-width:none}
  ol.lines .line,ol.lines .citelink{grid-column:1 / -1}
  ol.lines .citelink{opacity:1}
}

/* The collection page message line, written by app.js after "Translate all". */
.colmsg:empty{display:none}
.colmsg{margin:.4rem 0;color:var(--ink-2)} .colmsg.bad{color:var(--bad)}

/* ------------------------------------------------ coverage and the crew
 *
 * The grid is a month per column and a programme per row, so the cells are
 * small and the shade does the reading: five steps from "nothing captured"
 * to "every expected edition holds text". The steps are one colour diluted
 * into the card, never red-to-green: a pale month is a gap in the capture,
 * not a verdict.
 */
table.cov{font-size:.78rem}
table.cov caption{text-align:left;padding:.5rem .7rem .3rem;font-size:.72rem;
  color:var(--ink-3)}
/* The shared rule sticks every th to the top of the scroller, which is right
   for the header and wrong for a row label: a label that slid up the page
   would name a row that is no longer under it. The row labels stick to the
   LEFT instead, so the programme stays readable across fifty columns. */
table.cov tbody th.pname{position:sticky;left:0;top:auto;z-index:1;
  text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:600;
  color:var(--ink);background:var(--card);border-right:1px solid var(--rule);
  min-width:14rem;white-space:normal;vertical-align:middle}
table.cov thead th.pname{left:0;z-index:4;min-width:14rem}
table.cov tbody tr:hover th.pname{background:var(--card-2)}
table.cov th.pname .chans,table.cov th.pname .span{display:block;font-weight:400;
  font-size:.72rem;color:var(--ink-3)}
table.cov th.pname .span{font-family:var(--id);font-size:.68rem}
table.cov th.yr{text-align:center;font-size:.66rem;border-left:1px solid var(--rule-2)}
table.cov th.mo{padding:.3rem .2rem;font-size:.62rem;letter-spacing:.02em;
  text-align:center;font-family:var(--id)}
table.cov td.c{padding:0;text-align:center;border-left:1px solid var(--rule-2)}
table.cov td.c a{display:block;padding:.34rem .2rem;font-family:var(--id);
  font-size:.62rem;color:var(--ink-2)}
table.cov td.c a:hover{text-decoration:none;color:var(--ink)}
table.cov tbody tr:hover td{background:none}

/* The five steps. color-mix keeps one colour and one card token in play, so
   the ramp follows the theme instead of being redrawn for dark mode. */
.c0{background:var(--card)}
.c1{background:color-mix(in srgb,var(--link) 14%,var(--card))}
.c2{background:color-mix(in srgb,var(--link) 30%,var(--card))}
.c3{background:color-mix(in srgb,var(--link) 46%,var(--card))}
.c4{background:color-mix(in srgb,var(--link) 64%,var(--card))}
.c5{background:color-mix(in srgb,var(--link) 82%,var(--card))}
.c4 a,.c5 a,.c4,.c5{color:var(--card)}
:root[data-theme=dark] .c4 a,:root[data-theme=dark] .c5 a{color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .c4 a,:root:not([data-theme=light]) .c5 a{color:var(--ink)}
}
/* More editions held than the weekday's usual number. An outline, not a sixth
   step: the bar stops at 100% and the cell says why. */
.c.over{box-shadow:inset 0 0 0 2px var(--warn)}
.c.off{background:var(--card-2)}
/* On the list, nothing collected yet: hatched, so an empty row is never read
   as a run of months that held nothing. */
.c.none{background:repeating-linear-gradient(135deg,var(--card-2) 0 3px,var(--card) 3px 7px)}
table.cov tr.net th.pname{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);background:var(--card-2);padding-top:.6rem}
table.cov tr.net td{background:var(--card-2)}

.covsince{font-size:.82rem;color:var(--ink-2);margin:.2rem 0 .9rem}
.legend{font-size:.76rem;color:var(--ink-2);margin:.7rem 0 1.4rem;line-height:2}
.legend .c{display:inline-block;width:1.4rem;height:.85rem;vertical-align:-.1rem;
  border:1px solid var(--rule);border-radius:2px;margin:0 .1rem}
.stamp{font-size:.78rem;color:var(--ink-3)}

/* The day view. A day with nothing held where something was expected is the
   point of the screen, so it carries a rail; a day nothing was expected on is
   quiet. */
table.days td.dday .d{font-family:var(--id);font-size:.8rem}
table.days td.dday .wd{color:var(--ink-3);font-size:.74rem;margin-left:.4rem}
table.days tr.gap td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.days tr.off td{color:var(--ink-3)}
table.days .ed{display:inline-flex;align-items:baseline;gap:.35rem;
  margin:0 .9rem .2rem 0;white-space:nowrap}
table.days .miss{color:var(--warn)}
.tag.both{color:var(--ok);border-color:var(--vis);background:var(--ok-bg)}
.tag.none{color:var(--ink-3);border-color:var(--rule);background:var(--card-2)}

.crewfilter{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:flex-end;
  margin:0 0 .9rem}
.crewcount{font-size:.82rem;color:var(--ink-2);margin:0 0 .7rem}
table.crew td.num{text-align:right}
table.crew tbody td:first-child{font-weight:500}

@media (max-width:900px){
  table.cov tbody th.pname,table.cov thead th.pname{min-width:9rem;position:static}
  .crewfilter{gap:.4rem .6rem}
}

/* ------------------------------------------- collections, excerpts, themes
 *
 * A collection is an evidence file, so an excerpt is a card and the Russian
 * inside it is set in the document serif: it is the record, and the English
 * beside it is a machine's reading of it, set smaller in the interface sans.
 * The provenance tag sits in the excerpt's header, as it does everywhere
 * else a line appears.
 */
.colpage .pagehead{margin:0 0 .4rem}
.colacts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.2rem 0 1rem}
.colacts form{margin:0}
.colacts .danger{background:var(--card);color:var(--bad);border:1px solid var(--rule)}
.colacts .danger:hover{background:var(--bad-bg);filter:none}
.newcolform{margin:0 0 1.2rem}
.newcolform h2{margin:0 0 .5rem;font-size:.95rem}
.newcolform .stack{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.newcolform label.f{flex:1 1 16rem}
.newcolform input{width:100%}

.item{margin:0 0 .9rem;padding:.8rem .95rem}
.itemhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem;
  font-size:.8rem;color:var(--ink-2)}
.itemhead .gtitle{font-weight:600;font-size:.86rem;color:var(--link)}
.itemhead .tc{font-family:var(--id);font-size:.76rem;color:var(--ink-3)}
.itemsrc,.itemcheck{margin:.45rem 0 0;font-size:.78rem;color:var(--ink-2);
  word-break:break-word}
.itemsrc .sep,.itemcheck .sep{color:var(--ink-3);margin:0 .15rem}
.item .ru{font-family:var(--doc);font-size:1rem;line-height:1.6;color:var(--ink);
  margin:.7rem 0 .5rem;padding:0 0 0 .8rem;border-left:3px solid var(--rule)}
.item .en{margin:0 0 .6rem;font-size:.86rem;color:var(--ink-2)}
.item .en strong{color:var(--ink);font-weight:600}
.item .drift{margin:0 0 .6rem;font-size:.8rem;color:var(--bad)}
.notef{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:.2rem 0}
.notef label.f{flex:1 1 20rem}
.notef input{width:100%}
.removef{display:inline-block;margin:.2rem 0 0}
.item .small{margin:.35rem 0 0;font-size:.74rem}

/* Saving the current search as a theme sits under the search box, so it is a
   row rather than a panel: it is one field and one button. */
.savetheme{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;
  margin:.6rem 0 1.1rem}
.savetheme label.f{flex:0 1 22rem}
.savetheme input{width:100%}

table.themes td{vertical-align:top}
table.themes code{word-break:break-word}
table.themes .num{white-space:nowrap}
.themeacts{display:flex;align-items:baseline;gap:.8rem;white-space:nowrap}
.inlinef{display:inline;margin:0}
/* Rename, on a collection and on a theme row. A details element and nothing
   else: closed it is one word, open it is the name as it stands now. */
.renamer{margin:.5rem 0 0}
.renamer>summary{display:inline-block;cursor:pointer;color:var(--link);
  font-size:.82rem;list-style:none}
.renamer>summary::-webkit-details-marker{display:none}
.renamer[open]>summary{font-weight:600}
.renamer form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;
  margin:.5rem 0 0;max-width:46rem}
.renamer label.f{flex:1 1 16rem}
.renamer label.f input{width:100%}
.themeacts .renamer{margin:.2rem 0 0}
.themeacts .renamer input{width:12rem}

@media (max-width:900px){
  .colacts{gap:.4rem}
  .itemhead{gap:.3rem .5rem}
  .notef label.f,.newcolform label.f,.savetheme label.f,
  .renamer label.f{flex:1 1 100%}
}

/* A named voice: the chip keeps its label and carries the presenter after it. */
.spk.named{white-space:nowrap}
.spk .spkname{font-weight:600;color:var(--ink)}