/* Know Your ZIP: styles for the national ZIP pages and hubs (etl/pages/theme.py), served as /assets/national.css.
   Tokens, base, header and footer are copied from site/index.html; keep them in step when the site's design changes. */
:root {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F6F7F9; --surface-3: #EEF0F3;
  --ink: #1A1D23; --ink-2: #4A5260; --ink-3: #687180;
  --rule: #E2E5EA; --rule-2: #EEF0F3; --rule-strong: #CBD1D9; --control-border: #8A94A3;
  --accent: #1A5FD6; --accent-hover: #144CB0;
  --accent-strong: #1A5FD6; --accent-strong-hover: #144CB0;
  --accent-soft: #EAF1FD; --accent-ink: #0F3F94; --on-accent: #FFFFFF;
  --good: #1E7B45; --good-soft: #E7F5EC;
  --warn: #9A5B00; --warn-soft: #FFF4E0;
  --bad:  #B42318; --bad-soft:  #FDECEA;
  --z-a: #3E4756; --z-b: var(--accent); --chart-bar: #7890B8;
  --land: #F3F2EE; --bldg: #E4E2DC; --water: #C7E1F5; --water-2: #A7CBE8; --water-ink: #2B5F8A;
  --park: #D4ECC8; --road: #FFFFFF; --road-edge: #D9DCE1;
  --zip-line: var(--accent); --zip-halo: #FFFFFF; --mask-o: .55;
  --lb-bg: #0B0D10; --lb-ink: #E8EBF0; --lb-ink-2: #AEB6C2;
  --c-identity: #6A4C93; --c-demographics: #2F6690; --c-income: #8A5A12; --c-housing: #A0442A;
  --c-economy: #3E6259; --c-places: #A3156F; --c-transport: #1C5FAE; --c-education: #9A7B00;
  --c-health: #2E7D4F; --c-safety: #C2410C; --c-environment: #0F766E; --c-climate: #036C9E;
  --c-hazards: #6D28D9; --c-connectivity: #475569; --c-politics: #9D174D; --c-pulse: #57534E;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-h1: clamp(28px, 4.2vw, 44px); --fs-h2: clamp(22px, 2.6vw, 28px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-2: 0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06);
  --sh-3: 0 12px 32px rgba(16,24,40,.16);
  --nav-h: 64px; --nav-off: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  --maxw: 1240px; --gutter: clamp(16px, 3vw, 32px);
}
@media (max-width: 640px) { :root { --nav-h: 56px; } }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme: dark;
  --bg: #0F1216; --surface: #171B21; --surface-2: #1D222A; --surface-3: #252B34;
  --ink: #E8EBF0; --ink-2: #AEB6C2; --ink-3: #8B95A3;
  --rule: #2A3039; --rule-2: #22272F; --rule-strong: #3A424D; --control-border: #6B7684;
  --accent: #6EA8FF; --accent-hover: #93BFFF; --accent-strong: #2F6FE4; --accent-strong-hover: #2560CC;
  --accent-soft: #182B4A; --accent-ink: #CFE0FF;
  --good: #5CC98A; --good-soft: #13261C; --warn: #E8A94A; --warn-soft: #2B2010; --bad: #F2877A; --bad-soft: #2E1714;
  --z-a: #A9B3C1; --chart-bar: #62779B;
  --land: #161A20; --bldg: #222831; --water: #10263B; --water-2: #1D3D5C; --water-ink: #86B2D6;
  --park: #183024; --road: #2C333D; --road-edge: #1E242C; --zip-halo: #0F1216; --mask-o: .5;
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --sh-2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --sh-3: 0 12px 32px rgba(0,0,0,.6);
  --c-identity: #B59BE0; --c-demographics: #7FB2DD; --c-income: #D9A85A; --c-housing: #E58E70;
  --c-economy: #8DB8AC; --c-places: #E471BB; --c-transport: #7DB0F0; --c-education: #E0C24A;
  --c-health: #6CC48F; --c-safety: #F39257; --c-environment: #4FC2B5; --c-climate: #5CB8E6;
  --c-hazards: #B394F5; --c-connectivity: #A7B4C6; --c-politics: #EE7FAE; --c-pulse: #B8B0A8;
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0F1216; --surface: #171B21; --surface-2: #1D222A; --surface-3: #252B34;
  --ink: #E8EBF0; --ink-2: #AEB6C2; --ink-3: #8B95A3;
  --rule: #2A3039; --rule-2: #22272F; --rule-strong: #3A424D; --control-border: #6B7684;
  --accent: #6EA8FF; --accent-hover: #93BFFF; --accent-strong: #2F6FE4; --accent-strong-hover: #2560CC;
  --accent-soft: #182B4A; --accent-ink: #CFE0FF;
  --good: #5CC98A; --good-soft: #13261C; --warn: #E8A94A; --warn-soft: #2B2010; --bad: #F2877A; --bad-soft: #2E1714;
  --z-a: #A9B3C1; --chart-bar: #62779B;
  --land: #161A20; --bldg: #222831; --water: #10263B; --water-2: #1D3D5C; --water-ink: #86B2D6;
  --park: #183024; --road: #2C333D; --road-edge: #1E242C; --zip-halo: #0F1216; --mask-o: .5;
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --sh-2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --sh-3: 0 12px 32px rgba(0,0,0,.6);
  --c-identity: #B59BE0; --c-demographics: #7FB2DD; --c-income: #D9A85A; --c-housing: #E58E70;
  --c-economy: #8DB8AC; --c-places: #E471BB; --c-transport: #7DB0F0; --c-education: #E0C24A;
  --c-health: #6CC48F; --c-safety: #F39257; --c-environment: #4FC2B5; --c-climate: #5CB8E6;
  --c-hazards: #B394F5; --c-connectivity: #A7B4C6; --c-politics: #EE7FAE; --c-pulse: #B8B0A8;
}
img,svg{max-width:100%}
::selection{background:var(--accent-soft)}
.meta,.prov dd,.sources > div,.caveats li,.legend dd{overflow-wrap:anywhere}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
#view{overflow-x:clip}                       /* new; clip, not hidden: sticky still works */
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.25;letter-spacing:-.01em}
h3{font-size:18px;font-weight:600;line-height:1.35}
h4{font-size:15px;font-weight:600;line-height:1.4}
p{margin:0 0 12px}
button{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:inherit;font-variant-numeric:tabular-nums}
.eyebrow{font-size:13px;font-weight:600;color:var(--ink-2)}   /* survives only in the source card and calculator cards */
.muted{color:var(--ink-3)} .small{font-size:13px}
.sec p,.sec li,.sec dd,.block p,.block li{font-size:16px;line-height:1.65}
.loading{padding:64px 0;text-align:center;color:var(--ink-3)}
.mast{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0px)}
.mast .wrap{height:var(--nav-h);display:flex;align-items:center;gap:16px}
.wordmark{display:inline-block;white-space:nowrap;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wordmark:hover{color:var(--ink);text-decoration:none}
.wordmark .wm-a{color:var(--accent)}
.nav{margin-left:auto;display:flex;align-self:stretch;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;padding:0 12px;font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.theme-toggle{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);cursor:pointer}
.theme-toggle:hover{background:var(--surface-2);color:var(--ink)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (max-width:640px){.mast .wrap{gap:8px}.nav a{font-size:14px;padding:0 6px}.theme-toggle{width:36px;height:36px}}
/* phones: logo and theme button on top, the five nav links on their own full-width row */
@media (max-width:560px){:root{--nav-h:88px}.mast .wrap{flex-wrap:wrap;height:auto;gap:0}.wordmark{line-height:48px}
.theme-toggle{margin-left:auto}.nav{order:3;flex:1 0 100%;height:40px;margin:0 calc(-1 * var(--gutter));padding:0 calc(var(--gutter) - 6px);border-top:1px solid var(--rule-2)}}
@media (max-width:480px){.wordmark{font-size:17px}}
footer{margin-top:72px;padding:32px 0 calc(48px + env(safe-area-inset-bottom,0px));background:var(--surface-2);border-top:1px solid var(--rule);
  font-size:13px;line-height:1.6;color:var(--ink-2)}
footer p{max-width:80ch;margin:0}

/* ---------- national ZIP pages and hubs (etl/pages) ---------- */
main.np{padding-top:20px;padding-bottom:8px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 16px;padding:0;list-style:none;font-size:14px;color:var(--ink-3)}
.crumbs li+li::before{content:"›";margin:0 8px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.crumbs li:last-child a{color:var(--ink);font-weight:600}
.np-head{margin-bottom:20px}
.np-head .sub{margin:8px 0 0;font-size:17px;color:var(--ink-2)}
.np-head .sub a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong)}
.kf{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px;margin:20px 0 8px;padding:0;list-style:none}
.kf li{padding:16px 18px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.kf b{display:block;font-family:var(--f-display);font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kf span{display:block;margin-top:4px;font-size:14px;color:var(--ink-2)}
.kf small{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.toc{position:sticky;top:var(--nav-off);z-index:20;margin:16px calc(-1 * var(--gutter)) 0;padding:10px var(--gutter);background:var(--bg);border-bottom:1px solid var(--rule-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.toc .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.toc .chips::-webkit-scrollbar{display:none}
.chips a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap}
.chips a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.chips a small{color:var(--ink-3);font-size:12.5px}
.chips a.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.blk{margin-top:36px;scroll-margin-top:calc(var(--nav-off) + 64px)}
.blk>h2{margin-bottom:6px}
.blk>.lead{color:var(--ink-2);margin-bottom:14px}
.stand{margin:0;padding:16px 20px 16px 36px;background:var(--accent-soft);border-radius:var(--r-md);color:var(--accent-ink)}
.stand li{margin:4px 0}
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
table.dt{width:100%;border-collapse:collapse;font-size:15px}
.dt th,.dt td{padding:10px 14px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
.dt tr:last-child th,.dt tr:last-child td{border-bottom:0}
.dt thead th{background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.dt tbody th{font-weight:500;color:var(--ink);width:38%}
.dt .v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt .cmp{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);white-space:normal}
.dt .src{font-size:13px;color:var(--ink-3)}
.dt .src a{color:var(--ink-2)}
.dt td.num{text-align:right;font-variant-numeric:tabular-nums}
.grid-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.grid-links a{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-weight:500}
.grid-links a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.grid-links small{color:var(--ink-3);font-weight:400;white-space:nowrap}
.rule{font-size:14px;color:var(--ink-2);max-width:80ch}
.note{font-size:14px;color:var(--ink-3);max-width:80ch}
.zipmap{margin:16px 0}
.zipmap svg{display:block;max-height:min(70vh,620px);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-md)}
.zipmap path{fill:var(--accent-soft)!important;stroke:var(--accent)!important;stroke-width:.8}
.zipmap a:hover path{fill:var(--accent)!important;fill-opacity:.35}
.zipmap text{fill:var(--ink)!important}
.zipmap figcaption{margin-top:6px;font-size:13px;color:var(--ink-3)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:15px}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-strong-hover);color:var(--on-accent)}
footer .wrap p+p{margin-top:8px}
@media (max-width:640px){.dt th,.dt td{padding:8px 10px}.dt tbody th{width:auto}.dt .src{display:block}.kf b{font-size:24px}}