/* Palette and type follow vaccinedatanavigator.org site.css */
:root {
  --ink: #1f2937; --head: #102a43; --nav: #102a43; --nav-ink: #bcccdc; --muted: #627d98; --line: #d9e2ec;
  --bg: #f9fafb; --panel: #ffffff; --soft: #f0f4f8; --accent: #243b53; --link: #2f6fa3; --chip: #e2e8f0;
  --burden: #b45309; --post: #7c3aed; --eff: #047857; --quote: #f8fafc;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: 'Lexend', 'Inter', system-ui, sans-serif; color: var(--head); line-height: 1.25; }
a { color: var(--link); }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 16px; }
.crumb { margin: 1rem 0 0; font-size: .9rem; }
.lede { max-width: 820px; color: var(--muted); font-size: 1.02rem; }
.stats { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .9rem; min-width: 130px; font-size: .85rem; color: var(--muted); }
.stat .n { font: 600 1.5rem 'Lexend', sans-serif; color: var(--head); }
.filters { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: .6rem 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filters input, .filters select { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--panel); color: var(--ink); }
.filters input { flex: 1 1 260px; }
.bands { display: flex; flex-wrap: wrap; gap: .3rem; }
.band { font: inherit; font-size: .8rem; padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.band.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
h2 { margin-top: 2.2rem; border-bottom: 2px solid var(--line); padding-bottom: .3rem; }
.pathogen { font: italic 400 .9rem 'Inter', sans-serif; color: var(--muted); }
section h3 { margin-bottom: .2rem; }
section.kind-burden h3 { color: var(--burden); }
section.kind-post_acute h3 { color: var(--post); }
section.kind-efficacy h3 { color: var(--eff); }
.count { font: 400 .8rem 'Inter', sans-serif; color: var(--muted); }
.blurb { margin-top: 0; color: var(--muted); font-size: .88rem; }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel); }
table.ev { border-collapse: collapse; width: 100%; font-size: .84rem; min-width: 980px; }
table.ev th { text-align: left; background: var(--soft); color: var(--head); font-weight: 600; padding: .5rem; position: sticky; top: 0; }
table.ev td { padding: .5rem; border-top: 1px solid var(--line); vertical-align: top; }
table.ev td:nth-child(1) { width: 17%; } table.ev td:nth-child(2) { width: 22%; } table.ev td:nth-child(3) { width: 17%; }
table.ev td:nth-child(4) { width: 13%; } table.ev td:nth-child(5) { width: 10%; }
.sub { color: var(--muted); font-size: .78rem; }
.est .v { font: 600 1.05rem 'Lexend', sans-serif; color: var(--head); }
.ci { color: var(--ink); white-space: nowrap; }
.chip { display: inline-block; background: var(--chip); border-radius: 999px; padding: 0 .45rem; margin: .2rem .2rem 0 0; font-size: .72rem; }
.j { color: var(--muted); font-size: .78rem; }
details summary { cursor: pointer; color: var(--link); font-size: .78rem; margin-top: .3rem; }
blockquote { margin: .3rem 0; padding: .4rem .6rem; background: var(--quote); border-left: 3px solid var(--line); font-size: .8rem; }
.note { font-size: .78rem; margin-top: .3rem; }
.gaps li { margin-bottom: .3rem; }
details.log { margin: 2rem 0; font-size: .85rem; }
.wrap .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; margin: 1.5rem 0; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--accent); }
.card h3 { margin: 0 0 .3rem; }
.mini { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }
.prose { max-width: 820px; }

/* ---- preflight compensation, scoped to .wrap ------------------------------
   /site-tailwind.css carries Tailwind preflight, which sets heading size and
   weight to inherit, zeroes every margin, and strips list markers and padding.
   The rest of the site works around that with utility classes; this content
   uses bare elements, so the defaults are restored here. Scoped to .wrap so
   the nav injected by shared-nav.js and the shared footer are not restyled. */
.wrap h1 { font-size: 1.85rem; font-weight: 700; margin: 1.1rem 0 .5rem; letter-spacing: -.01em; }
.wrap h2 { font-size: 1.32rem; font-weight: 600; margin: 2.2rem 0 .8rem; border-bottom: 2px solid var(--line); padding-bottom: .3rem; }
.wrap h3 { font-size: 1.05rem; font-weight: 600; margin: 1.1rem 0 .2rem; }
.wrap h4 { font-size: .95rem; font-weight: 600; margin: .8rem 0 .2rem; }
.wrap p { margin: .55rem 0; }
.wrap ul, .wrap ol { list-style: disc; margin: .5rem 0 .9rem; padding-left: 1.4rem; }
.wrap ol { list-style: decimal; }
.wrap li { margin: .25rem 0; }
.wrap b, .wrap strong { font-weight: 700; }
.wrap i, .wrap em { font-style: italic; }
.wrap code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.wrap pre { margin: 0; }
.wrap table { border-collapse: collapse; }
.wrap th { text-align: left; }
.wrap caption { caption-side: bottom; text-align: left; }
.wrap summary { cursor: pointer; }
.wrap .crumb { margin: 1rem 0 0; }
.wrap .lede { margin: .4rem 0 1rem; }
.wrap .stats { margin: 1rem 0; }
.wrap .blurb { margin-top: 0; }
.wrap .note { margin: .3rem 0; }
.wrap .gaps li { margin-bottom: .3rem; }
.wrap .prose { max-width: 820px; }

/* country explorer panel on the hub (added by scripts/integrate_disease_risk.py) */
.wrap .dr-countries { background: #f0f4f8; border: 1px solid #d9e2ec; border-radius: 12px; padding: 1rem 1.2rem; margin: 1.5rem 0; }
.wrap .dr-countries h2 { margin: 0 0 .4rem; border: 0; padding: 0; font-size: 1.2rem; }
.wrap .dr-countries p { margin: .4rem 0; }
.wrap .dr-cta { display: inline-block; background: #102a43; color: #fff !important; padding: .55rem .9rem; border-radius: 8px; text-decoration: none; font-weight: 600; min-height: 44px; }
.wrap .dr-cta:hover { background: #243b53; }