/* County Health Map. Colors are tokens; dark theme by prefers-color-scheme or the manual toggle. */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #0f1b2d;
  --text-2: #36445a;
  --muted: #4f5d72;
  --border: #d8dfe9;
  --rule: #e6ebf2;
  --link: #1d4ed8;
  --link-hover: #1e3a8a;
  --head-bg: #0f1b2d;
  --head-text: #ffffff;
  --head-muted: #c7d2e3;
  --head-input: #1a2a42;
  --head-border: #47566e;
  --accent: #f59e0b;
  --accent-text: #0f1b2d;
  --banner-bg: #fff4d6;
  --banner-border: #e7c873;
  --banner-text: #5c3d00;
  --warm: #9a3412;
  --cool: #1d4ed8;
  --focus: #2563eb;
  --tag-bg: #e8eef8;
  --tag-text: #23395d;
  --tag-warn-bg: #fdf0d5;
  --tag-warn-text: #6b4100;
  /* map classes: lightness falls as hue moves from blue to orange */
  --tone-1: #dce8f5;
  --tone-2: #b4cde8;
  --tone-3: #e99a4f;
  --tone-4: #c8601a;
  --tone-5: #7f3208;
  --nodata-bg: #f1f3f6;
  --nodata-line: #9aa5b5;
  /* counties left out by a population floor: quiet cool grey with fine level lines */
  --floor-bg: #e3e7ed;
  --floor-line: #c2cad6;
  --county-line: #ffffff;
  --state-line: #5b6678;
  /* overlap counts: one orange hue, darker with each measure flagged */
  --ov-0: #f2efea; --ov-1: #fbe1c4; --ov-2: #f5bb84; --ov-3: #e48a3f; --ov-4: #b85514; --ov-5: #6e2c05;
  /* bivariate 3 by 3: blue across, orange up, multiplied; dark where both are high */
  --bv-00: #e8e8e8; --bv-01: #eab585; --bv-02: #d76f28;
  --bv-10: #9dbfdf; --bv-11: #9f9580; --bv-12: #925b27;
  --bv-20: #3a76c0; --bv-21: #3b5c6e; --bv-22: #363821;
  /* county types: blue and orange family, each a different lightness */
  --type-1: #3a76c0; --type-2: #f5bb84; --type-3: #6e2c05; --type-4: #b4cde8; --type-5: #e48a3f; --type-6: #1e3a6e; --type-7: #9aa5b5;
  /* neighbor clusters */
  --hot: #c8601a; --cold: #3a76c0; --notsig: #e4e8ee;
  /* correlation matrix: blue below zero, orange above */
  --div-neg: #2f6db5; --div-mid: #f4f4f2; --div-pos: #c25a12;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1320;
    --surface: #121c2d;
    --surface-2: #1a2639;
    --text: #e6ecf5;
    --text-2: #c9d3e1;
    --muted: #a9b6c9;
    --border: #2c3a52;
    --rule: #223049;
    --link: #8cb4ff;
    --link-hover: #b8d0ff;
    --head-bg: #060c16;
    --head-text: #ffffff;
    --head-muted: #b9c5d8;
    --head-input: #121c2d;
    --head-border: #3a4a64;
    --banner-bg: #3a2a07;
    --banner-border: #7a5a14;
    --banner-text: #ffe3a3;
    --warm: #ffb07a;
    --cool: #8cb4ff;
    --focus: #8cb4ff;
    --tag-bg: #233652;
    --tag-text: #d6e3f7;
    --tag-warn-bg: #4a3608;
    --tag-warn-text: #ffe1a1;
    --tone-1: #23364f;
    --tone-2: #3b5f8c;
    --tone-3: #b0672a;
    --tone-4: #e08a3c;
    --tone-5: #ffc27a;
    --nodata-bg: #172234;
    --nodata-line: #4c5b73;
    --floor-bg: #111a27;
    --floor-line: #2b3a50;
    --county-line: #0b1320;
    --state-line: #9aa8bd;
    --ov-0: #1d2838; --ov-1: #47331f; --ov-2: #7a4a20; --ov-3: #b56a2c; --ov-4: #e8913f; --ov-5: #ffcf96;
    --type-1: #5d95dc; --type-2: #f5bb84; --type-3: #a4501a; --type-4: #b4cde8; --type-5: #e48a3f; --type-6: #2c4f8f; --type-7: #8794a8;
    --hot: #e8823a; --cold: #5d95dc; --notsig: #253247;
  --div-neg: #6aa2e8; --div-mid: #1b2535; --div-pos: #f29a52;
    --div-neg: #6aa2e8; --div-mid: #1b2535; --div-pos: #f29a52;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1320;
  --surface: #121c2d;
  --surface-2: #1a2639;
  --text: #e6ecf5;
  --text-2: #c9d3e1;
  --muted: #a9b6c9;
  --border: #2c3a52;
  --rule: #223049;
  --link: #8cb4ff;
  --link-hover: #b8d0ff;
  --head-bg: #060c16;
  --head-text: #ffffff;
  --head-muted: #b9c5d8;
  --head-input: #121c2d;
  --head-border: #3a4a64;
  --banner-bg: #3a2a07;
  --banner-border: #7a5a14;
  --banner-text: #ffe3a3;
  --warm: #ffb07a;
  --cool: #8cb4ff;
  --focus: #8cb4ff;
  --tag-bg: #233652;
  --tag-text: #d6e3f7;
  --tag-warn-bg: #4a3608;
  --tag-warn-text: #ffe1a1;
  --tone-1: #23364f;
  --tone-2: #3b5f8c;
  --tone-3: #b0672a;
  --tone-4: #e08a3c;
  --tone-5: #ffc27a;
  --nodata-bg: #172234;
  --nodata-line: #4c5b73;
  --floor-bg: #111a27;
  --floor-line: #2b3a50;
  --county-line: #0b1320;
  --state-line: #9aa8bd;
  --ov-0: #1d2838; --ov-1: #47331f; --ov-2: #7a4a20; --ov-3: #b56a2c; --ov-4: #e8913f; --ov-5: #ffcf96;
  --type-1: #5d95dc; --type-2: #f5bb84; --type-3: #a4501a; --type-4: #b4cde8; --type-5: #e48a3f; --type-6: #2c4f8f; --type-7: #8794a8;
  --hot: #e8823a; --cold: #5d95dc; --notsig: #253247;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, .display { font-family: "Space Grotesk", Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
h1 { margin: 0; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.1; font-weight: 700; }
h2 { margin: 0; font-size: 22px; line-height: 1.25; }
h3 { margin: 0; font-size: 17px; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* header */
.site-head { background: var(--head-bg); color: var(--head-text); }
.site-head .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.brand { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 22px; color: var(--head-text); text-decoration: none; }
.brand:hover { color: var(--head-text); text-decoration: underline; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.site-nav a { color: var(--head-text); text-decoration: none; padding: 10px 0; display: inline-block; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-nav a:hover { color: var(--head-text); text-decoration: underline; }
.head-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search { display: flex; gap: 8px; align-items: center; position: relative; flex-wrap: wrap; }
.search label { font-size: 14px; color: var(--head-muted); }
.search input { width: 220px; max-width: 60vw; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--head-border); background: var(--head-input); color: var(--head-text); font: inherit; }
.search input::placeholder { color: var(--head-muted); }
.btn { height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--head-text); border-color: var(--head-border); }
.search-results { position: absolute; top: 48px; left: 0; right: 0; min-width: 280px; z-index: 20; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); margin: 0; padding: 4px 0; list-style: none; }
.search-results li a, .search-results li span { display: block; padding: 10px 12px; color: var(--text); text-decoration: none; }
.search-results li a:hover, .search-results li a:focus { background: var(--surface-2); }
.search-results small { color: var(--muted); }

.banner { background: var(--banner-bg); border-bottom: 1px solid var(--banner-border); color: var(--banner-text); font-size: 14px; }
.banner .wrap { padding-top: 8px; padding-bottom: 8px; }

main { padding: 32px 0 56px; }
main > .wrap { display: flex; flex-direction: column; gap: 32px; }
.kicker { font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lede { font-size: 18px; color: var(--text-2); max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 16px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }

/* headline cards (three, not a dense listing) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.card-title { font-size: 14px; font-weight: 600; color: var(--muted); }
.card-value { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 30px; line-height: 1.15; }
.card-value.warm { color: var(--warm); }
.card-value.cool { color: var(--cool); }
.card-value.mixed { color: var(--text); }
.card-value.empty { font-size: 20px; color: var(--muted); }
.card-text { font-size: 15px; color: var(--text-2); }
.card-src { font-size: 13px; color: var(--muted); }
.card-value .tag { font-family: Inter, sans-serif; font-size: 12px; vertical-align: middle; }
.card-list { margin: 0; padding-left: 18px; font-size: 15px; color: var(--text); }
.card-list li { margin: 2px 0; }
.card-state { font-size: 14px; color: var(--text-2); border-top: 1px solid var(--rule); padding-top: 8px; }
.card-missing { font-size: 14px; color: var(--text-2); border-top: 1px solid var(--rule); padding-top: 8px; }
.card-missing .card-list { color: var(--text-2); }
.card-sub { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.card-also { font-size: 14px; border-top: 1px solid var(--rule); padding-top: 8px; }
.card-also summary { cursor: pointer; color: var(--text-2); font-weight: 500; }
.signals { display: flex; flex-direction: column; gap: 8px; }
.signals-title { font-size: 20px; margin: 0; }
.readings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-width: 72ch; }
.readings p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.readings .tag { font-size: 12px; }
.banner[hidden] { display: none; }

/* tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: 4px; }
.table-scroll:focus-visible { outline-offset: 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--border); white-space: nowrap; }
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.value { font-weight: 600; }
td.value.missing, td .missing { font-weight: 400; color: var(--muted); font-style: italic; }
tr.group-row th { background: var(--surface-2); color: var(--text); font-size: 14px; padding: 8px 12px; }
.data-table { min-width: 560px; }
.compact { min-width: 0; }
.nowrap { white-space: nowrap; }
details > summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
details[open] > summary { margin-bottom: 8px; }
.wide-table { min-width: 760px; }
.sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.sort-btn:hover { color: var(--text); text-decoration: underline; }
.fn { font-size: 12px; vertical-align: super; line-height: 0; margin-left: 2px; }
.fn a { text-decoration: none; }
.about { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* tags */
.tag { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 2px 8px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-text); margin: 2px 4px 2px 0; white-space: nowrap; font-style: normal; }
.tag-warn { background: var(--tag-warn-bg); color: var(--tag-warn-text); }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--border); }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab:hover { color: var(--text); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
select { height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; max-width: 100%; }
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.toggle button { background: var(--surface); color: var(--text); border: 0; padding: 0 14px; height: 42px; font: inherit; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--text); color: var(--surface); font-weight: 600; }

/* map */
.map-box { position: relative; width: 100%; }
.map-box svg { width: 100%; height: auto; display: block; }
.county { stroke: var(--county-line); stroke-width: 0.25; cursor: pointer; }
.county:hover, .county.hover { stroke: var(--text); stroke-width: 1.2; }
.state-borders { fill: none; stroke: var(--state-line); stroke-width: 0.6; pointer-events: none; }
.t1 { fill: var(--tone-1); } .t2 { fill: var(--tone-2); } .t3 { fill: var(--tone-3); } .t4 { fill: var(--tone-4); } .t5 { fill: var(--tone-5); }
.tooltip { position: absolute; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-width: 280px; z-index: 5; }
.tooltip strong { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); margin: 0; padding: 0; list-style: none; }
.legend li { display: flex; gap: 8px; align-items: center; }
.swatch { width: 16px; height: 16px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); flex: none; }
.s1 { background: var(--tone-1); } .s2 { background: var(--tone-2); } .s3 { background: var(--tone-3); } .s4 { background: var(--tone-4); } .s5 { background: var(--tone-5); }
.s-nodata { background: repeating-linear-gradient(45deg, var(--nodata-bg) 0 3px, var(--nodata-line) 3px 4px); }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }

.empty-state { padding: 16px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-2); background: var(--surface-2); }
.note { font-size: 14px; color: var(--text-2); border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
ul.plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.doc h2 { margin-top: 24px; } .doc h3 { margin-top: 16px; } .doc h4 { margin: 12px 0 0; font-size: 15px; }
.doc p, .doc ul, .doc ol { margin: 8px 0; color: var(--text-2); }
.doc code { font-size: 13px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.doc pre { overflow-x: auto; background: var(--surface-2); padding: 12px; border-radius: 8px; }
.doc table { font-size: 14px; min-width: 600px; }
.toc { columns: 2 220px; margin: 0; padding-left: 20px; }

.site-foot { background: var(--head-bg); color: var(--head-muted); font-size: 14px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.site-foot a { color: var(--head-text); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.prose > .panel, .prose > .lede, .prose > .stack { max-width: 760px; }
.prose .panel p, .prose .panel li { color: var(--text-2); line-height: 1.6; }
.prose .panel h2 { margin-top: 0; }
.prose .panel + .panel { margin-top: 16px; }
.prose ul.plain { gap: 10px; }
.corrections-log time { font-variant-numeric: tabular-nums; color: var(--text); }

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  main { padding-top: 20px; }
  .panel { padding: 16px; }
  .search input { width: 100%; max-width: none; flex: 1 1 160px; }
  .search { width: 100%; }
  .head-tools { width: 100%; }
  .card-value { font-size: 26px; }
}
/* Coverage table: keep the measure readable on phones; the other columns scroll sideways. */
#coverage-table th[scope="row"] { min-width: 11rem; }

/* ---------------------------------------------------------------- county page, charts first */
.county-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
.county-main { min-width: 0; }
.section-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.section-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.section-nav a:hover { border-color: var(--text-2); }
@media (min-width: 1100px) {
  .county-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
  .section-nav { position: sticky; top: 16px; align-self: start; }
  .section-nav ul { flex-direction: column; gap: 2px; }
  .section-nav a { border: 0; border-left: 3px solid var(--border); border-radius: 0; background: none; padding: 6px 10px; min-height: 32px; color: var(--text-2); }
  .section-nav a:hover { border-left-color: var(--accent); color: var(--text); }
}
.county-main section[id] { scroll-margin-top: 16px; }
.county-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: start; }
.county-head .head-text { display: flex; flex-direction: column; gap: 10px; }
.head-pop { font-size: 16px; color: var(--text-2); }
.head-pop .big-num { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 26px; color: var(--text); }
.county-head .lede { font-size: 16px; }
@media (max-width: 760px) { .county-head { grid-template-columns: 1fr; } }
.locator { min-width: 0; }
.locator-map { position: relative; }
.locator svg { display: block; width: 100%; height: auto; }
.loc-county { fill: var(--surface-2); stroke: var(--text-2); stroke-width: 1.2; }
.loc-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }
.loc-legend li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; }
.loc-n { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.pt { stroke-width: 1; }
.pt-air { fill: var(--tone-2); stroke: var(--text); }
.pt-tri { fill: var(--tone-3); stroke: var(--surface); stroke-width: 0.6; }
.pt-sf { fill: var(--tone-5); stroke: var(--surface); }
.pt-dc { fill: var(--cool); stroke: var(--surface); }
.pt-dcp { fill: var(--text); stroke: var(--surface); stroke-width: 0.5; }
.pt-ww-line { stroke: var(--muted); stroke-width: 1.5; }

.cards-tight { gap: 12px; }
.cards-tight .card { padding: 14px 18px; gap: 6px; }
.cards-tight .card-value { font-size: 24px; }
.cards-tight .card-list, .cards-tight .card-text { font-size: 14px; }
.cards-tight .card-state { font-size: 13px; }

/* what stands out */
.standouts { display: flex; flex-direction: column; }
.standout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.standout:last-of-type { border-bottom: 0; }
.standout-text { font-size: 15px; line-height: 1.45; }
@media (max-width: 700px) { .standout { grid-template-columns: 1fr; } }
.strip { display: block; overflow: visible; }
.strip-track { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.strip-tail { fill: var(--tone-3); opacity: 0.45; }
.strip-tick { stroke: var(--muted); stroke-width: 1; }
.strip-county { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.strip-state { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.strip-ends text { font-size: 11px; fill: var(--muted); }
.strip-none { font-size: 13px; color: var(--muted); font-style: italic; }
.strip-key { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 0; }
.strip-key > span { white-space: nowrap; }
@media (max-width: 600px) { .strip-key > span { white-space: normal; } }
.key-dot, .key-tri, .key-tick, .key-tail { display: inline-block; vertical-align: middle; margin-right: 4px; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.key-tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--muted); }
.key-tick { width: 2px; height: 12px; background: var(--muted); }
.key-tail { width: 18px; height: 6px; border-radius: 3px; background: var(--tone-3); opacity: 0.6; }

/* chart frames */
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px 20px; }
.multiples-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.span-all { grid-column: 1 / -1; }
figure.chart { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
figure.chart figcaption { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.chart-title { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600; font-size: 16px; color: var(--text); }
.chart-sub { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.chart-body { position: relative; width: 100%; min-width: 0; }
.chart-body svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.chart-body svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chart-note, .chart-src { font-size: 12px; color: var(--muted); margin: 0; }
.chart-empty .empty-chart, .empty-chart { padding: 18px 14px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-size: 14px; min-height: 80px; display: flex; align-items: center; }
#outbreak h3, #environment h3 { margin-top: 8px; }
.axis text { font-size: 11px; fill: var(--muted); font-family: Inter, system-ui, sans-serif; }
.axis line, .axis path { stroke: var(--border); }
.grid line { stroke: var(--rule); stroke-width: 1; }
.grid line.grid-zero { stroke: var(--muted); stroke-dasharray: 3 3; }
.baseline { stroke: var(--muted); }
.ln { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ln-main { stroke: var(--cool); stroke-width: 2.2; }
.ln-site { stroke: var(--tone-2); stroke-width: 1.2; }
.ln-ref { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ln-cat { stroke-width: 2; }
.ln-tail { stroke-dasharray: 2 3; opacity: 0.7; }
.s-a { stroke: var(--cool); } .s-a-text { fill: var(--cool); }
.s-b { stroke: var(--tone-3); stroke-width: 2.6; } .s-b-text { fill: var(--warm); }
.s-c { stroke: var(--muted); } .s-c-text { fill: var(--muted); }
.dot-on { fill: var(--cool); stroke: var(--surface); stroke-width: 1; }
.dot-off { fill: var(--surface); stroke: var(--cool); stroke-width: 1.3; }
.hl { fill: none; stroke: var(--text); stroke-width: 1.5; pointer-events: none; }
.annot { stroke: var(--muted); stroke-dasharray: 2 2; }
.annot-text, .direct, .ref-text, .val-text, .row-label, .bar-name, .cal-label { font-size: 11px; fill: var(--text-2); font-family: Inter, system-ui, sans-serif; }
.direct { font-weight: 600; fill: var(--cool); }
.direct-ref { fill: var(--muted); font-weight: 500; }
.direct.s-a-text { fill: var(--cool); } .direct.s-b-text { fill: var(--warm); } .direct.s-c-text { fill: var(--muted); }
.row-label { font-size: 12px; fill: var(--text); }
.val-text { font-weight: 600; fill: var(--text); }
.bar { fill: var(--cool); }
.incomplete-zone { fill: var(--surface-2); }
.ref { stroke: var(--warm); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ref-text { fill: var(--warm); font-weight: 600; }
.track { stroke: var(--surface-2); stroke-width: 8; stroke-linecap: round; }
.range-seg { stroke: var(--tone-2); stroke-width: 8; stroke-linecap: round; }
.mk-county { fill: var(--cool); stroke: var(--surface); stroke-width: 2; }
.mk-state { fill: var(--surface); stroke: var(--text-2); stroke-width: 2; }
.big-figure { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 6px; }
.big-figure .big-num { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 34px; line-height: 1; }
.big-label { font-size: 14px; color: var(--text-2); }
.measles-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

/* calendars: air quality categories and smoke classes, lightness rising with the class */
.cal { stroke: none; }
.q1 { fill: var(--tone-1); background: var(--tone-1); }
.q2 { fill: var(--tone-2); background: var(--tone-2); }
.q3 { fill: var(--tone-3); background: var(--tone-3); }
.q4 { fill: var(--tone-4); background: var(--tone-4); }
.q5 { fill: var(--tone-5); background: var(--tone-5); }
.q6 { fill: var(--text); background: var(--text); }
.q-none, .k-none { fill: var(--surface); stroke: var(--border); stroke-width: 1; background: var(--surface); }
.q-after { fill: none; stroke: var(--rule); stroke-width: 0.6; stroke-dasharray: 1 1; }
.k0 { fill: var(--surface-2); background: var(--surface-2); }
.k1 { fill: var(--tone-2); background: var(--tone-2); }
.k2 { fill: var(--tone-3); background: var(--tone-3); }
.k3 { fill: var(--tone-5); background: var(--tone-5); }
.legend .swatch.q-none, .legend .swatch.k-none { border: 1px solid var(--border); }
.legend-aqi { margin-top: 4px; }

/* compact figures with rank strips */
.fig-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.fig { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; background: var(--surface); }
.fig-num { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.15; }
.fig-num-long { font-size: 18px; }
.fig-num.missing { font-size: 16px; font-weight: 500; color: var(--muted); font-style: italic; }
.fig-label { font-size: 13px; color: var(--text-2); min-height: 2.6em; }
.fig-meta { font-size: 12px; color: var(--muted); }
.fig-strip { min-height: 38px; }

/* who represents: same table, tighter rows */
#officials td, #officials tbody th { padding-top: 7px; padding-bottom: 7px; }
#officials .about { display: inline; margin-left: 6px; }
#officials tr.group-row th { padding-top: 6px; padding-bottom: 6px; }

/* all data */
details.all-data { border-top: 1px solid var(--rule); }
details.all-data > summary { font-family: "Space Grotesk", Inter, sans-serif; font-size: 17px; }
.sub-block { display: flex; flex-direction: column; gap: 12px; }
.tooltip { line-height: 1.4; }
.tooltip strong { margin-bottom: 2px; }
.row-val { font-weight: 700; }
.section-nav a { min-height: 32px; font-size: 13px; padding: 2px 10px; }
@media (max-width: 600px) { .section-nav ul { gap: 6px; } .county-head .lede { display: none; } }

/* A section with no data for this county collapses to one line. */
.empty-line { margin: 4px 0 12px; padding: 8px 12px; border-left: 3px solid var(--border); color: var(--text-2); background: var(--surface-2); border-radius: 0 6px 6px 0; font-size: 14px; }
.not-reported { margin: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); }

/* ---------------------------------------------------------------- national map views */
.mode-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-switch button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.mode-switch button:disabled { opacity: 0.5; cursor: not-allowed; }
.mode-controls { display: flex; flex-direction: column; gap: 12px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field.check label { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; color: var(--text); font-weight: 500; }
.field.check input { width: 18px; height: 18px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface-2); }
.picker > summary { font-size: 15px; }
.picker-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 24px; }
.picker-list fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; margin: 0; min-width: 0; }
.picker-list legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.pick { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; padding: 6px 0; font-size: 14px; cursor: pointer; }
.pick input { width: 18px; height: 18px; align-self: center; }
.pick input:disabled + span { color: var(--muted); }
.view-head { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-end; }
.view-head .stack { flex: 1 1 520px; min-width: 0; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.map-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.side-col:empty { display: none; }
@media (min-width: 980px) { .map-layout.has-side { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); } }
.side-block { display: flex; flex-direction: column; gap: 10px; }
.side-block h3 { font-size: 18px; }
.side-block h4 { margin: 8px 0 0; font-size: 14px; }
.side-fig { font-size: 15px; color: var(--text-2); }
.side-fig .big-num { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 28px; color: var(--text); margin-right: 4px; }
.side-table { max-height: 460px; overflow: auto; border: 1px solid var(--rule); }
.side-table table { font-size: 13px; min-width: 520px; }
.side-table th, .side-table td { padding: 6px 8px; }
.side-table thead th { position: sticky; top: 0; background: var(--surface); white-space: normal; min-width: 92px; vertical-align: bottom; line-height: 1.25; }
.side-table tbody th { min-width: 120px; }
.unit { font-weight: 400; color: var(--muted); }
.s-dots { background: radial-gradient(circle, var(--muted) 1.1px, var(--surface) 1.3px) 0 0 / 5px 5px; }
.s-floor { background: repeating-linear-gradient(0deg, var(--floor-bg) 0 3px, var(--floor-line) 3px 4px); }
.field.check .floor-pick { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.field.check .floor-pick select { width: auto; min-height: 36px; }
.floor-pick .floor-num { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 14px; }
.legend-title { font-weight: 600; color: var(--text); }
.map-hl { fill: none; stroke: var(--text); stroke-width: 2; pointer-events: none; }
.nation-border { fill: none; stroke: var(--state-line); stroke-width: 0.8; pointer-events: none; }
.state-borders { stroke-width: 0.8; }
.tip-list { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
.tip-pop { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.hist { margin: 4px 0 0; max-width: 460px; }
.hist svg { width: 100%; height: auto; display: block; }
.hist-base { stroke: var(--border); }
.hist-tick { font-size: 11px; fill: var(--muted); font-family: Inter, system-ui, sans-serif; }
.bv-axis { font-size: 10.5px; font-weight: 600; fill: var(--text-2); font-family: Inter, system-ui, sans-serif; }
.bv-tick { font-size: 10px; fill: var(--muted); font-family: Inter, system-ui, sans-serif; }
.stat-list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.stat-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; border-bottom: 1px solid var(--rule); padding: 4px 0; }
.stat-list dt { font-size: 14px; color: var(--text-2); }
.stat-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.assoc-note { border: 2px solid var(--accent); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.assoc-note strong { color: var(--text); font-size: 15px; }
.scatter-fig .chart-body svg { width: 100%; }
.dot { stroke: var(--surface); stroke-width: 0.5; opacity: 0.8; }
.dot-ring { fill: none; stroke: var(--text); stroke-width: 2; pointer-events: none; }
.guide { stroke: var(--muted); stroke-dasharray: 3 3; stroke-width: 1; opacity: 0.6; }
.axis-title { font-size: 11px; fill: var(--text-2); font-weight: 600; font-family: Inter, system-ui, sans-serif; }
.type-prof { margin: 6px 0 0; border-top: 1px solid var(--rule); padding-top: 8px; }
.type-prof figcaption .swatch { vertical-align: -3px; }
.type-prof svg { width: 100%; height: auto; display: block; margin-top: 4px; }
.pbar-up { fill: var(--tone-4); } .pbar-down { fill: var(--cold); }
.zero-line { stroke: var(--muted); stroke-width: 1; }
@media (max-width: 600px) {
  .mode-switch button { flex: 1 1 calc(50% - 6px); padding: 0 8px; }
  .controls { flex-direction: column; align-items: stretch; }
  .controls select { width: 100%; }
  .view-head { flex-direction: column; align-items: stretch; }
  .view-head .stack { flex: none; }
}
.bv-legend { display: flex; flex-direction: column; gap: 2px; max-width: 340px; margin: 8px 0 0; }
.bv-legend .bv-y, .bv-legend .bv-x { font-size: 12px; font-weight: 600; color: var(--text-2); }
.bv-arrow { font-weight: 700; }
.bv-grid svg { display: block; }

/* explore: correlation matrix */
.matrix-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.matrix-host svg { display: block; }
.mx-label { font-size: 11px; fill: var(--text-2); font-family: Inter, system-ui, sans-serif; }
.mx-cell { stroke: none; }
.mx-on { stroke: var(--text); stroke-width: 2; }
.mx-diag { fill: var(--surface-2); }
.mx-nc { stroke: var(--rule); stroke-width: 0.5; }
.mx-cav { pointer-events: none; fill: var(--text); opacity: 0.55; }
.cav-line { stroke: var(--text); stroke-width: 0.9; opacity: 0.35; }
.mx-hit { fill: transparent; }
.mx-scale { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mx-ramp { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.mx-ramp span { width: 20px; height: 14px; display: inline-block; }
.s-cav { background: linear-gradient(225deg, var(--text) 0 32%, var(--surface-2) 32%); }
.toggle { flex-wrap: wrap; max-width: 100%; }
.toggle button { white-space: nowrap; }
.map-marks { fill: none; stroke: var(--text); stroke-width: 1.6; pointer-events: none; }

/* ---- 2026-11-12: neighbor clusters, context bar, evidence tags ---- */
#map .county, #map .state-borders, #map .nation-border, #map .map-hl, #map .map-marks { vector-effect: non-scaling-stroke; }
#map { transition: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.callout { border-left: 3px solid var(--tone-4, var(--rule)); background: var(--surface-2, var(--surface)); padding: 8px 12px; margin: 8px 0; }
.evidence-list { font-size: 13px; color: var(--text-2); margin-top: 4px; width: 100%; }
.evidence-list summary { cursor: pointer; }
.ev { display: inline-block; font-size: 12px; color: var(--muted); border: 1px solid var(--rule); border-radius: 4px; padding: 0 6px; margin-left: 4px; white-space: normal; }
.came-from { border: 2px solid var(--tone-4, var(--rule)); }
.came-from .came-text { font-size: 16px; margin: 0; }
.came-from .came-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.page-evidence { font-size: 14px; color: var(--text-2); margin: 0; }
.flash { outline: 3px solid var(--tone-4, #c8601a); outline-offset: 4px; border-radius: 6px; transition: outline-color 2s; }
.btn-plain { background: var(--surface); color: var(--text); border-color: var(--rule); }
.card-value.plain { color: var(--text); }