/* FluHub — a field guide to the U.S. flu season.
   Layout: one reading column (~68ch) with figures and tables breaking out to a wide measure; persistent top bar. */
:root {
  --paper: #f5f7f6;
  --surface: #ffffff;
  --ink: #14211d;
  --ink-2: #44514c;
  --muted: #66726e;
  --rule: #d8dfdc;
  --rule-strong: #b7c2be;
  --accent: #1c5b4c;
  --accent-ink: #ffffff;
  --accent-soft: #e3efea;
  --link: #1a5a8f;

  /* data */
  --s1: #2a78d6;           /* this season */
  --s2: #eb6834;           /* last season */
  --s3: #1baf7a;
  --past: #b8c2be;         /* earlier seasons */
  --band: rgba(42, 120, 214, 0.12);
  --grid: #e6ebe9;

  /* ARI activity ordinal ramp, Very Low -> Very High */
  --lv1: #f5dcc6; --lv2: #eda274; --lv3: #d9693a; --lv4: #a5421a; --lv5: #62240e;
  --lv1-t: #4a2a14; --lv2-t: #2a1408; --lv3-t: #ffffff; --lv4-t: #ffffff; --lv5-t: #ffffff;
  --lv0: #e4e8e6; --lv0-t: #44514c;

  /* status (fixed) */
  --critical: #c23434;
  --critical-soft: #fbeaea;
  --warn: #9a6400;
  --warn-soft: #fdf3dc;
  --good: #1f7a3a;
  --good-soft: #e5f3e8;

  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 68ch;
  --wide: 1120px;
  --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1513; --surface: #161e1b; --ink: #e8eeeb; --ink-2: #b4c0bb; --muted: #8b9893;
    --rule: #28332f; --rule-strong: #3b4843; --accent: #74c4a9; --accent-ink: #0c1512; --accent-soft: #1b2b26; --link: #8cc2f0;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --past: #44514c; --band: rgba(57, 135, 229, 0.18); --grid: #222c29;
    --lv1: #3d2a1f; --lv2: #8a3d1c; --lv3: #c95e2c; --lv4: #ee935f; --lv5: #f8c09a;
    --lv1-t: #e8c9b2; --lv2-t: #ffffff; --lv3-t: #ffffff; --lv4-t: #1a0b04; --lv5-t: #1a0b04;
    --lv0: #26302d; --lv0-t: #b4c0bb;
    --critical: #f07070; --critical-soft: #2e1717; --warn: #f0b84a; --warn-soft: #2b2312; --good: #6fcf8a; --good-soft: #15281b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1513; --surface: #161e1b; --ink: #e8eeeb; --ink-2: #b4c0bb; --muted: #8b9893;
  --rule: #28332f; --rule-strong: #3b4843; --accent: #74c4a9; --accent-ink: #0c1512; --accent-soft: #1b2b26; --link: #8cc2f0;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --past: #44514c; --band: rgba(57, 135, 229, 0.18); --grid: #222c29;
  --lv1: #3d2a1f; --lv2: #8a3d1c; --lv3: #c95e2c; --lv4: #ee935f; --lv5: #f8c09a;
  --lv1-t: #e8c9b2; --lv2-t: #ffffff; --lv3-t: #ffffff; --lv4-t: #1a0b04; --lv5-t: #1a0b04;
  --lv0: #26302d; --lv0-t: #b4c0bb;
  --critical: #f07070; --critical-soft: #2e1717; --warn: #f0b84a; --warn-soft: #2b2312; --good: #6fcf8a; --good-soft: #15281b;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  font-feature-settings: "kern", "liga";
}
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--s1); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem); letter-spacing: -0.015em; font-weight: 500; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem); letter-spacing: -0.01em; font-weight: 500; }
h3 { font-size: 1.25rem; font-family: var(--f-body); font-weight: 700; letter-spacing: -0.005em; }
h4 { font-size: 1rem; font-family: var(--f-body); font-weight: 700; }
p { margin: 0; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.num, .tab { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-data); font-size: 0.86em; }
.eyebrow { font: 600 0.74rem/1.2 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 1.18rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* ---------- shell ---------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--surface); padding: 8px 12px; }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in { max-width: var(--wide); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; min-height: 58px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { font: 600 1.35rem/1 var(--f-display); letter-spacing: -0.01em; }
.brand-mark i { font-style: italic; font-weight: 400; color: var(--accent); }
.brand-week { font: 500 0.72rem/1 var(--f-data); color: var(--muted); letter-spacing: 0.04em; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: auto; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--ink-2); font-size: 0.92rem; font-weight: 500; padding: 8px 10px; border-radius: var(--r); }
.nav a:hover { background: var(--accent-soft); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.theme-btn { flex: none; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.theme-btn svg { width: 16px; height: 16px; }

.alertbar { background: var(--critical-soft); color: var(--ink); border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.alertbar .wrap { padding-block: 8px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.alertbar strong { color: var(--critical); }

.wrap { max-width: var(--wide); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
main { padding-block: 32px 72px; }
.col { max-width: var(--measure); }
.section { margin-top: 56px; }
.section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; max-width: var(--measure); }
.page-head { display: grid; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.crumbs { font-size: 0.86rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.86rem; color: var(--muted); }
.byline b { color: var(--ink-2); font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; align-items: start; }
.grid-2 > *, .grid-3 > * { min-width: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }

/* ---------- components ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r); font: 600 0.96rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--surface); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px; }
.callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 16px; border-radius: 0 var(--r) var(--r) 0; }
.callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.callout.crit { border-color: var(--critical); background: var(--critical-soft); }
.callout > * + * { margin-top: 0.5em; }
.callout-title { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ico { width: 18px; height: 18px; flex: none; }

.task-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.task { background: var(--surface); padding: 18px 18px 20px; text-decoration: none; color: var(--ink); display: grid; gap: 6px; align-content: start; }
.task:hover { background: var(--accent-soft); }
.task h3 { font-size: 1.05rem; }
.task p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.5; }
.task .go { color: var(--accent); font-weight: 600; font-size: 0.9rem; }

/* status strip: this week's numbers */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.stat { padding: 16px 16px 16px 0; display: grid; gap: 4px; align-content: start; }
.stat + .stat { border-left: 1px solid var(--rule); padding-left: 16px; }
.stat-label { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.stat-value { font: 500 2rem/1.05 var(--f-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.stat-value small { font: 500 0.95rem var(--f-body); color: var(--muted); margin-left: 2px; }
.stat-ctx { font-size: 0.84rem; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 520px) { .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }

.delta { font: 600 0.78rem/1 var(--f-data); padding: 3px 6px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }

.level { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.86rem; white-space: nowrap; }
.level i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lv-0 { background: var(--lv0); color: var(--lv0-t); }
.lv-1 { background: var(--lv1); color: var(--lv1-t); }
.lv-2 { background: var(--lv2); color: var(--lv2-t); }
.lv-3 { background: var(--lv3); color: var(--lv3-t); }
.lv-4 { background: var(--lv4); color: var(--lv4-t); }
.lv-5 { background: var(--lv5); color: var(--lv5-t); }
.ladder { display: flex; gap: 2px; align-items: stretch; flex-wrap: wrap; }
.ladder span { font: 600 0.72rem/1 var(--f-data); padding: 6px 8px; letter-spacing: 0.02em; }
.ladder span:first-child { border-radius: 4px 0 0 4px; }
.ladder span:last-child { border-radius: 0 4px 4px 0; }

/* tile map */
.tilemap-wrap { overflow-x: auto; }
.tilemap { display: grid; grid-template-columns: repeat(11, minmax(34px, 1fr)); gap: 3px; min-width: 400px; max-width: 760px; }
.tile { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; text-decoration: none; font: 600 0.78rem/1 var(--f-data); position: relative; transition: transform .12s; }
.tile:hover, .tile:focus-visible { transform: scale(1.08); z-index: 2; box-shadow: 0 0 0 2px var(--ink); }
.tile.lv-0 { background-image: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--lv0-t) 18%, transparent) 4px 5px); }
.terr-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 0.84rem; color: var(--muted); align-items: center; }
.terr-row .tile { width: 36px; aspect-ratio: 1; }

/* charts */
.chart { margin: 0; display: grid; gap: 8px; min-width: 0; }
.chart figcaption { display: grid; gap: 2px; }
.chart-title { font-weight: 700; font-size: 1rem; }
.chart-sub { font-size: 0.86rem; color: var(--muted); }
.chart-box { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart .xtick { stroke: var(--rule-strong); }
.chart .tick { fill: var(--muted); font: 500 11px var(--f-data); }
.chart .tick.na { font-size: 9px; }
.chart .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .ref { stroke: var(--ink-2); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .ref-label { fill: var(--ink-2); font: 500 11px var(--f-data); }
.chart .band { fill: var(--band); stroke: none; }
.chart .dlabel { font: 600 11.5px var(--f-body); fill: var(--ink); }
.chart .bar-val { fill: var(--ink-2); font: 500 10.5px var(--f-data); }
.chart-note { font-size: 0.82rem; color: var(--muted); max-width: var(--measure); }
.line.s1, .key.s1 { stroke: var(--s1); }
.line.s2, .key.s2 { stroke: var(--s2); }
.line.s3, .key.s3 { stroke: var(--s3); }
.line.past, .key.past { stroke: var(--past); }
.line.ink, .key.ink { stroke: var(--ink-2); }
.dot.s1 { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.dot.s2 { fill: var(--s2); stroke: var(--surface); stroke-width: 2; }
.dot.ink { fill: var(--ink-2); stroke: var(--surface); stroke-width: 2; }
.bar.s1 { fill: var(--s1); } .bar.s2 { fill: var(--s2); } .bar.past { fill: var(--past); } .bar.s3 { fill: var(--s3); }
.bar:hover { filter: brightness(1.12); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.84rem; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.key { width: 18px; height: 0; border-top: 2.5px solid; display: inline-block; border-color: var(--past); }
.key.s1 { border-color: var(--s1); } .key.s2 { border-color: var(--s2); } .key.s3 { border-color: var(--s3); } .key.ink { border-color: var(--ink-2); }
.key-band { height: 10px; border: 0; background: var(--band); border-radius: 2px; }
.hover-layer .xh { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.tip { position: absolute; pointer-events: none; z-index: 5; background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 8px 10px; font-size: 0.82rem; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.12); min-width: 150px; max-width: 240px; }
.tip b { display: block; font: 600 0.74rem var(--f-data); color: var(--muted); margin-bottom: 4px; letter-spacing: 0.02em; }
.tip .row { display: flex; justify-content: space-between; gap: 12px; }
.tip .row span:first-child { display: flex; align-items: center; gap: 6px; }
.tip .row i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.tip .row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.sw-s1 { background: var(--s1); } .sw-s2 { background: var(--s2); } .sw-past { background: var(--past); } .sw-ink { background: var(--ink-2); } .sw-s3 { background: var(--s3); }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font: 600 0.74rem/1.3 var(--f-data); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--paper); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
th button.sort { all: unset; cursor: pointer; }
th button.sort::after { content: " ↕"; opacity: .4; }
caption { caption-side: bottom; text-align: left; font-size: 0.8rem; color: var(--muted); padding: 8px 12px; }

/* accordions (FAQ, clinician detail) */
details.acc { border-bottom: 1px solid var(--rule); }
details.acc:first-of-type { border-top: 1px solid var(--rule); }
details.acc summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; font-weight: 600; position: relative; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 400 1.4rem var(--f-data); color: var(--muted); }
details.acc[open] summary::after { content: "–"; }
details.acc .acc-body { padding: 0 0 18px; color: var(--ink-2); }
details.acc .acc-body > * + * { margin-top: 0.7em; }
details.clin { border: 1px dashed var(--rule-strong); border-radius: var(--r); padding: 0 16px; background: var(--surface); }
details.clin summary { cursor: pointer; padding: 12px 0; font: 600 0.82rem var(--f-data); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
details.clin[open] { padding-bottom: 16px; }

.cite { font-size: 0.78em; vertical-align: super; line-height: 0; }
.cite a { text-decoration: none; font-family: var(--f-data); }
.sources { font-size: 0.86rem; color: var(--ink-2); }
.sources ol { padding-left: 1.4em; }
.sources li + li { margin-top: 4px; }
.reviewed { display: inline-flex; gap: 6px; align-items: center; font-size: 0.82rem; color: var(--good); font-weight: 600; }

/* symptom checker */
.checker { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .checker { grid-template-columns: 1fr; } }
.q { display: grid; gap: 12px; }
.q + .q { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.q legend, .q-title { font: 700 1.05rem var(--f-body); padding: 0; }
.q fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.q-hint { font-size: 0.88rem; color: var(--muted); margin-top: -6px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); font-size: 0.93rem; cursor: pointer; user-select: none; }
.opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.opt input:focus-visible + span { outline: 3px solid var(--s1); outline-offset: 2px; }
.opt.red input:checked + span { background: var(--critical); border-color: var(--critical); color: #fff; }
.result { border-radius: var(--r); padding: 20px; border: 1px solid var(--rule); background: var(--surface); position: sticky; top: 76px; display: grid; gap: 12px; }
.result[data-tier="er"] { border-color: var(--critical); box-shadow: inset 4px 0 0 var(--critical); }
.result[data-tier="today"] { border-color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.result[data-tier="call"] { border-color: var(--s1); box-shadow: inset 4px 0 0 var(--s1); }
.result[data-tier="home"] { box-shadow: inset 4px 0 0 var(--good); }
.result-tier { font: 600 0.74rem var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; }
.result[data-tier="er"] .result-tier { color: var(--critical); }
.result[data-tier="today"] .result-tier { color: var(--warn); }
.result[data-tier="call"] .result-tier { color: var(--s1); }
.result[data-tier="home"] .result-tier { color: var(--good); }
.result h3 { font: 600 1.45rem/1.2 var(--f-display); }
.result ul { margin: 0; padding-left: 1.2em; font-size: 0.93rem; }
.result .why { font-size: 0.86rem; color: var(--muted); }
.cta-box { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 8px; font-size: 0.9rem; }

/* locator */
.loc-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.field { display: grid; gap: 4px; }
.field label { font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select { font: 500 1rem var(--f-body); padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); min-width: 0; }
.field input#zip { width: 8.5em; font-family: var(--f-data); letter-spacing: 0.05em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 600 0.72rem/1 var(--f-body); padding: 5px 8px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--paper); }
.loc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.loc { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.loc h4 { font-size: 1rem; }
.loc .dist { font: 600 0.9rem var(--f-data); color: var(--ink-2); text-align: right; }
.loc .addr { font-size: 0.9rem; color: var(--ink-2); grid-column: 1 / -1; }
.loc .row2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 0.88rem; }

/* footer */
footer.site { border-top: 1px solid var(--rule); background: var(--surface); padding-block: 36px 48px; font-size: 0.88rem; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 24px; }
.foot-grid h4 { font: 600 0.74rem var(--f-data); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.disclaimer { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 90ch; color: var(--muted); font-size: 0.82rem; }

.state-index { columns: 4 170px; column-gap: 24px; list-style: none; padding: 0; margin: 0; }
.state-index li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.state-index a { text-decoration: none; color: var(--ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand-week { display: none; }
  .topbar-in { gap: 10px; }
  main { padding-block: 22px 56px; }
  .section { margin-top: 44px; }
}
.tile.lv-1 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv1-t) 25%, transparent); }
.h-small { font-size: 1.2rem; margin-bottom: 10px; }
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  aside[style*="sticky"], .result { position: static !important; }
}
@media (max-width: 640px) {
  .chart .tick, .chart .ref-label { font-size: 19px; }
  .chart .dlabel { font-size: 19px; }
  .chart .bar-val { font-size: 16px; }
  .chart .line { vector-effect: non-scaling-stroke; }
  .tilemap { min-width: 340px; }
  .tile { font-size: 0.68rem; }
}