:root{
  --page:#f7f7f4; --surface:#fcfcfb; --sunk:#f1f1ec;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --rule:rgba(11,11,11,.12); --accent:#2a78d6;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --panel:360px;
}
@media (prefers-color-scheme:dark){:root{
  --page:#0d0d0d; --surface:#1a1a19; --sunk:#141413;
  --ink:#fff; --ink-2:#c3c2b7; --muted:#898781;
  --rule:rgba(255,255,255,.14); --accent:#3987e5;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);background:var(--page);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden}
/* flex-wrap so the header's brand + cross-page link + panel toggle drop to a second
   line on a phone rather than clipping against body{overflow:hidden}. */
.bar{display:flex;align-items:center;gap:8px 16px;padding:10px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);background:var(--surface);flex:none}
.brand{display:flex;flex-direction:column;line-height:1.2}
.mark{font-family:var(--serif);font-size:1.15rem}
.sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
.ghost{font:inherit;font-size:.82rem;background:transparent;border:1px solid var(--rule);
  color:var(--ink-2);border-radius:8px;padding:6px 12px;cursor:pointer}
.ghost:hover{color:var(--ink);border-color:var(--muted)}
.ghost.wide{width:100%;margin-top:8px}
/* The header carries .ghost anchors (cross-links between index.html and trends.html)
   as well as .ghost buttons — strip the default underline so the two match. */
a.ghost{display:inline-block;text-decoration:none;white-space:nowrap}
.intro{flex:none;padding:14px 20px;border-bottom:1px solid var(--rule);background:var(--surface)}
/* One column spanning the full width, not the multi-column split tried first —
   reads as one continuous banner line-wrapping edge-to-edge rather than being split
   into separate vertical blocks. A single ~960px-wide paragraph on a 1500px+ viewport
   was the original problem (a blank strip beside it); this fixes that by letting the
   line itself stretch, not by splitting it into columns. */
.intro p{margin:0;width:100%;font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.intro b{color:var(--ink)}
/* Fatal data-load banner (a 404 on any data file). Deliberately loud and on top of
   the map: a silently blank or silently-wrong map is the failure mode to avoid. */
.loaderr{position:fixed;z-index:9999;left:50%;top:14px;transform:translateX(-50%);
  max-width:min(680px,calc(100vw - 28px));background:var(--surface);color:var(--ink);
  border:1px solid #c14e28;border-left:4px solid #c14e28;border-radius:9px;
  padding:12px 16px;font-size:.85rem;line-height:1.5;box-shadow:0 8px 30px rgba(0,0,0,.28)}
main{flex:1;display:flex;min-height:0}
/* #mapCol wraps the map so the click-readout can float over it (bottom-left) instead
   of living in the aside, where it used to land below several other sections and
   needed scrolling past the fold to see — reported as "blocked out of view". */
#mapCol{flex:1;min-width:0;position:relative}
#map{position:absolute;inset:0}
aside{width:var(--panel);flex:none;overflow-y:auto;background:var(--surface);
  border-left:1px solid var(--rule);padding:16px}
body.nopanel aside{display:none}
/* Floating county readout, anchored to the map's own corner so it's always visible
   the instant a county is clicked, with no aside-scrolling required. */
.map-readout{position:absolute;left:16px;bottom:16px;z-index:5;width:300px;
  max-width:calc(100% - 32px);max-height:60%;overflow-y:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;box-shadow:0 10px 34px rgba(0,0,0,.25)}
.map-readout[hidden]{display:none}
.ro-close{position:absolute;top:8px;right:8px;width:26px;height:26px;line-height:24px;
  text-align:center;font-size:1.05rem;background:transparent;border:1px solid var(--rule);
  border-radius:7px;color:var(--ink-2);cursor:pointer;padding:0}
.ro-close:hover{color:var(--ink);border-color:var(--muted)}
.grp{margin-bottom:22px}
.grp h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:400}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button{font:inherit;font-size:.82rem;background:var(--sunk);border:1px solid transparent;
  color:var(--ink-2);border-radius:999px;padding:6px 12px;cursor:pointer}
.pills button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}
.note{font-size:.82rem;color:var(--muted);line-height:1.5;margin:10px 0 0}
/* .warn: same shape as .note but the loaderr banner's orange, for a caveat that's a
   step above routine (e.g. "this period has thin reporting coverage") without being
   the full-alarm treatment of a failed data load. */
.warn{font-size:.82rem;color:#c14e28;line-height:1.5;margin:8px 0 0;font-weight:500}
.select{width:100%;font:inherit;font-size:.85rem;padding:8px 10px;border-radius:8px;
  border:1px solid var(--rule);background:var(--page);color:var(--ink)}
.row{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-2);margin-top:10px}
.row input[type=range]{flex:1}
/* #timeSlider (year/week sliders) sits outside a .row, unlike #opacity — same
   range-input look, just full width instead of flex:1 in a row. */
#timeGrp input[type=range]{width:100%}
.tiny{font-size:.78rem;color:var(--muted)}
#search{width:100%;font:inherit;font-size:.85rem;padding:8px 10px;border-radius:8px;
  border:1px solid var(--rule);background:var(--page);color:var(--ink)}
dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:.85rem}
dt{color:var(--ink-2)} dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
#roName{font-family:var(--serif);font-size:1.05rem;text-transform:none;letter-spacing:0;
  color:var(--ink);margin-bottom:10px;padding-right:28px}
#roSpark{display:block;width:100%;height:60px;margin-top:12px;color:var(--accent)}
.lgrow{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2);margin-bottom:5px}
.sw{width:22px;height:12px;border-radius:3px;border:1px solid var(--rule);flex:none}
.tip{position:fixed;z-index:9;pointer-events:none;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:9px;padding:8px 10px;font-size:.82rem;
  box-shadow:0 6px 22px rgba(0,0,0,.18);opacity:0;transition:opacity .1s;max-width:240px}
.tip.on{opacity:1}
.tip b{font-variant-numeric:tabular-nums}
.maplibregl-ctrl-attrib{font-size:10px}
@media (max-width:820px){
  main{flex-direction:column}
  aside{width:100%;max-height:44vh;border-left:0;border-top:1px solid var(--rule)}
  #mapCol{min-height:46vh}
  .map-readout{width:calc(100% - 32px);max-height:70%}
}