/* ── Tokens ───────────────────────────────────────────────────────────────
   Ledger palette: ink ground, ink-blue accent, stamp red for flags only.

   Follows the viewer's OS. The bare :root carries dark (also the no-preference
   default); a light OS swaps the tokens via the media query, guarded so an
   explicit dark stamp still wins; and [data-theme] wins over both, in either
   direction. Style components only through these tokens, never inside a media
   or [data-theme] block, or the un-stamped state loses that color.           */
:root{
  --paper:#12151A; --card:#191E26; --sunk:#0E1116;
  --ink:#E7ECF2; --ink-2:#B7C2CF; --muted:#94A0AE;
  --rule:#28303A; --rule-2:#39434F;
  --accent:#7FB0EE; --accent-soft:#1A2634;
  --flag:#E0745F; --flag-soft:#2C1D1A;
  --good:#4FBE7B;
  /* confidence: single-hue sequential ramp (validated monotonic) + grey */
  --c-high:#8FBEEF; --c-medium:#5B93CE; --c-low:#35618F; --c-none:#6B7480;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --paper:#F5F6F7; --card:#FFFFFF; --sunk:#EDEFF2;
    --ink:#141A21; --ink-2:#3D4A59; --muted:#5A6675;
    --rule:#DDE2E8; --rule-2:#C8D0DA;
    --accent:#1B4F8F; --accent-soft:#E7EEF7;
    --flag:#B3402F; --flag-soft:#F7EAE7;
    --good:#0F7A3D;
    --c-high:#1B4F8F; --c-medium:#4E86C4; --c-low:#9CBEE0; --c-none:#B9C0C9;
    --shadow:0 1px 2px rgba(20,26,33,.06), 0 4px 16px rgba(20,26,33,.05);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --paper:#F5F6F7; --card:#FFFFFF; --sunk:#EDEFF2;
  --ink:#141A21; --ink-2:#3D4A59; --muted:#5A6675;
  --rule:#DDE2E8; --rule-2:#C8D0DA;
  --accent:#1B4F8F; --accent-soft:#E7EEF7;
  --flag:#B3402F; --flag-soft:#F7EAE7;
  --good:#0F7A3D;
  --c-high:#1B4F8F; --c-medium:#4E86C4; --c-low:#9CBEE0; --c-none:#B9C0C9;
  --shadow:0 1px 2px rgba(20,26,33,.06), 0 4px 16px rgba(20,26,33,.05);
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Iowan Old Style",Palatino,"Book Antiqua",Georgia,serif}
.mono,.num{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums}
.wrap{max-width:1500px;margin:0 auto;padding:0 24px}

/* ── Masthead ─────────────────────────────────────────────────────────── */
header{border-bottom:1px solid var(--rule);background:var(--card)}
.mast{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;
  justify-content:space-between;padding-block:26px 20px}
h1{font-size:29px;line-height:1.15;margin:0 0 6px;letter-spacing:-.015em;
  text-wrap:balance;font-weight:600}
.sub{color:var(--muted);font-size:14px;max-width:62ch;margin:0}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 8px}

.stats{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--rule)}
.stat{flex:1 1 150px;padding:13px 18px 15px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:25px;line-height:1.1;font-weight:600;letter-spacing:-.02em}
.stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;
  letter-spacing:.04em;text-transform:uppercase}

/* ── Tabs + toolbar ───────────────────────────────────────────────────── */
nav{display:flex;gap:2px;border-bottom:1px solid var(--rule);background:var(--card)}
nav button{appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  font-size:13.5px;padding:11px 16px;color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1px}
nav button:hover{color:var(--ink)}
nav button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
nav button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,
tr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-block:14px}
input[type="search"],select{font:inherit;font-size:13.5px;padding:7px 10px;
  border:1px solid var(--rule-2);border-radius:5px;background:var(--card);color:var(--ink)}
input[type="search"]{min-width:250px;flex:1 1 250px}
.btn{font:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--rule-2);
  border-radius:5px;background:var(--card);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.count{color:var(--muted);font-size:13px;margin-left:auto}

/* ── Table ────────────────────────────────────────────────────────────── */
.scroll{position:relative;overflow-x:auto;background:var(--card);
  border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow)}
.hint{font-size:12px;color:var(--muted);padding:8px 2px 0}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);
  white-space:nowrap;vertical-align:top}
/* The last column otherwise sits flush against the scroller edge and reads as
   truncated even when the value is complete. */
th:last-child,td:last-child{padding-right:26px}
/* Freeze the district column so you keep track of which row you are reading
   once the table scrolls sideways. Only the first column is frozen -- freezing
   a second would require hard-coding the first one's width. */
tbody td:first-child{position:sticky;left:0;background:var(--card);z-index:1;
  border-right:1px solid var(--rule-2)}
tbody tr:hover td:first-child{background:var(--accent-soft)}
thead th:first-child{left:0;z-index:4;border-right:1px solid var(--rule-2)}
thead th{position:sticky;top:0;background:var(--card);z-index:2;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;cursor:pointer;border-bottom:1px solid var(--rule-2)}
thead th:hover{color:var(--accent)}
thead th.grp{border-left:1px solid var(--rule-2)}
td.grp{border-left:1px solid var(--rule)}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
.dname{font-weight:600;white-space:normal;min-width:200px;max-width:230px}
.dname small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px}
.val{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--muted)}

/* ── Chips ────────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 7px;
  border-radius:4px;border:1px solid var(--rule-2);color:var(--ink-2);white-space:nowrap;
  letter-spacing:.02em}
.chip.sep{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.chip.flag{border-color:var(--flag);color:var(--flag);background:var(--flag-soft)}
.meta.docs{margin-top:8px}
a.chip.doc{font-size:12px;padding:5px 11px;border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);font-weight:600;text-decoration:none;cursor:pointer}
a.chip.doc:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
a.chip.doc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dot{width:8px;height:8px;border-radius:2px;flex:none}
.d-high{background:var(--c-high)} .d-medium{background:var(--c-medium)}
.d-low{background:var(--c-low)} .d-not_found{background:var(--c-none)}

/* ── Detail panel ─────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.42);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
aside{position:fixed;top:0;right:0;height:100%;width:min(640px,94vw);background:var(--card);
  border-left:1px solid var(--rule);box-shadow:var(--shadow);z-index:50;
  transform:translateX(100%);transition:transform .22s ease;overflow-y:auto}
aside.on{transform:none}
@media (prefers-reduced-motion:reduce){aside,.scrim{transition:none}}
.phead{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--rule);
  padding:20px 24px 16px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.phead h2{margin:0 0 6px;font-size:20px;letter-spacing:-.01em;text-wrap:balance}
.x{appearance:none;border:1px solid var(--rule-2);background:none;color:var(--muted);
  cursor:pointer;font-size:18px;line-height:1;padding:4px 9px;border-radius:5px;flex:none}
.x:hover{color:var(--flag);border-color:var(--flag)}
.pbody{padding:6px 24px 40px}
.pcat{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.field{padding:11px 0;border-bottom:1px solid var(--rule)}
.field:last-child{border-bottom:0}
.frow{display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.fname{font-size:12px;color:var(--muted);flex:none;width:180px}
.fval{font-weight:600;font-size:14px;text-align:right;flex:1}
.fval.none{font-weight:400;color:var(--muted)}
.quote{margin:9px 0 0;padding:9px 12px;background:var(--sunk);border-left:2px solid var(--rule-2);
  border-radius:0 5px 5px 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.quote cite{display:block;font-style:normal;color:var(--muted);font-size:11px;margin-top:6px;
  letter-spacing:.03em}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ── Coverage ─────────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:18px 20px 20px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 4px;font-size:15px;font-weight:600}
.panel p.note{margin:0 0 16px;font-size:12.5px;color:var(--muted)}
.bar{display:grid;grid-template-columns:190px 1fr 48px;gap:12px;align-items:center;
  padding:5px 0;font-size:12.5px}
.track{display:block;height:9px;background:var(--sunk);border-radius:0 4px 4px 0;
  overflow:hidden}
.fill{display:block;height:100%;min-width:2px;background:var(--accent);
  border-radius:0 4px 4px 0}
.bar .num{text-align:right;color:var(--muted);font-size:12px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.stack{display:flex;height:26px;border-radius:4px;overflow:hidden;gap:2px;background:var(--sunk)}
.stack i{display:block}

/* ── Review ───────────────────────────────────────────────────────────── */
/* Identity, top right of the masthead. Auth is a page-level concern, not a
   Lists-tab one, so other features can be gated against it later. */
.mast-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:flex-end}
.idbox{display:flex;align-items:center;gap:9px;font-size:13px;
  border:1px solid var(--rule);border-radius:7px;padding:5px 10px;background:var(--card)}
.idbox .nm{font-weight:600;max-width:210px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.idbox .role{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.idbox.admin .role{color:var(--accent);font-weight:700}
.idbox.guest .nm{font-weight:500;color:var(--muted)}
.linkbtn{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--accent);cursor:pointer;text-decoration:underline}
.linkbtn:hover{opacity:.8}

/* Sign-in */
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.who .em{color:var(--muted)}
.who b{font-weight:600}
.badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:2px 7px;border-radius:4px;border:1px solid var(--accent);color:var(--accent);
  background:var(--accent-soft)}
.gate{border:1px dashed var(--rule-2);border-radius:8px;padding:20px;text-align:center;
  color:var(--muted);font-size:13.5px}
.gate strong{color:var(--ink);display:block;margin-bottom:6px;font-size:14.5px}
#gbtn{display:flex;justify-content:center;margin-top:16px;min-height:44px}

/* District picker */
.picker{columns:280px 4;column-gap:22px;margin-top:6px}
.pick{display:flex;gap:9px;align-items:flex-start;padding:5px 0;
  break-inside:avoid;font-size:13.5px;cursor:pointer}
.pick input{margin:2px 0 0;flex:none;width:15px;height:15px;accent-color:var(--accent)}
.pick small{display:block;color:var(--muted);font-size:11.5px}
.pick.on{color:var(--accent)}
.saved{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.saved button{font:inherit;font-size:12.5px;padding:5px 10px;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:5px;background:var(--card);color:var(--ink)}
.saved button:hover{border-color:var(--accent);color:var(--accent)}
.tagl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin-left:6px}
.saved button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);font-weight:600}
/* A list and the actions that act on it read as one unit, so "delete" can
   never be mistaken for belonging to the list next to it -- hence the wider
   gap between groups than within one. */
.saved{gap:18px}
.listchip{display:inline-flex;align-items:baseline;gap:7px}
/* .saved button would otherwise give these the same box as the list itself,
   making "delete" look as load-bearing as the list it destroys. */
.saved .listchip .linkbtn{border:0;background:none;padding:0;border-radius:0;
  font-size:11.5px;color:var(--muted);text-decoration:underline;
  text-underline-offset:2px}
.saved .listchip .linkbtn:hover{color:var(--accent);opacity:1}
.saved .listchip .linkbtn[data-del]:hover{color:var(--flag)}
/* The whole group highlights, button included -- the button carries its own
   card background, so it has to be made transparent or only the links tint. */
.listchip.editing{background:var(--accent-soft);border-radius:6px;
  padding:3px 9px;margin:-3px -9px}
.listchip.editing button[data-use]{background:transparent;border-color:var(--accent);
  color:var(--accent)}
.editbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;
  padding:9px 12px;border-radius:5px;margin-bottom:12px;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.msg{font-size:13px;padding:9px 12px;border-radius:5px;margin-top:12px}
.msg.err{background:var(--flag-soft);color:var(--flag);border:1px solid var(--flag)}
.msg.good{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.sev{width:3px;border-radius:2px;align-self:stretch;flex:none}
.sev-critical{background:var(--flag)} .sev-warn{background:var(--c-medium)}
.sev-info{background:var(--rule-2)}
.ritem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:stretch}
.ritem:last-child{border-bottom:0}
.rbody{flex:1;min-width:0}
.rwhy{font-size:12.5px;color:var(--muted);margin-top:3px}
.rval{font-size:13px;margin-top:4px;word-break:break-word}
footer{border-top:1px solid var(--rule);margin-top:44px;padding-block:20px 40px;
  color:var(--muted);font-size:12.5px}
footer a{color:var(--accent)}
.hidden{display:none}