/* BRBA site stylesheet, shared by home, explorer, county and methodology pages.
   Styled after the "BRBA Equity Tool" design system (deliverables/brand/):
   Space Grotesk for headings, Inter for reading text, JetBrains Mono for every
   number and for uppercase eyebrow labels. A night app bar, a cool grey canvas,
   white cards with hairline borders, tight corners, amber for "this one" only.

   Every colour is a token defined on bare :root (light values). The explicit
   data-theme="dark" block redefines the same tokens with the brand's dark
   values; nothing reads prefers-color-scheme, so the site stays light unless a
   page sets data-theme="dark" on <html>. Maps draw their own colours, so the
   dark tokens only restyle the page around them.

   Component rules map the brand components onto the site's own markup:
     AppBar     .bt-appbar        Tabs     .bt-tabs / .bt-tab
     Button     .btn              StatCard .stat
     ScoreBar   .bar, .dv         Tag      .bt-tag (.chip)
     DataTable  table.data        Select   .select, .search */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/SpaceGrotesk-Medium.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/SpaceGrotesk-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/Inter-Medium.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/Inter-SemiBold.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/JetBrainsMono-Medium.woff2") format("woff2")}

:root{
  /* brand colour tokens, light */
  --surface:#f4f7f7;
  --surface-raised:#ffffff;
  --surface-sunken:#eaf0f0;
  --night:#0b1b1e;
  --on-night:#e4efee;
  --line:#dce5e5;
  --line-strong:#788f92;
  --ink:#0e1f22;
  --ink-muted:#4c6164;
  --teal:#1a6b68;
  --teal-soft:#ddf0ed;
  --on-teal:#ffffff;
  --amber:#f2a23a;
  --amber-text:#8a5300;
  --amber-soft:#fdefd6;
  --on-amber:#1b1205;
  --risk:#b23a26;
  --risk-soft:#fbe3de;
  --focus:var(--teal);
  --data-1:#d7eeea;
  --data-2:#9ed6cd;
  --data-3:#57b3a7;
  --data-4:#23827a;
  --data-5:#0f5652;

  /* spacing (4px grid), radius, shadow */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,27,30,0.06);
  --shadow-md:0 8px 24px rgba(11,27,30,0.14);

  /* type families */
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* layout */
  --gutter:clamp(16px,4vw,32px);
  --page-max:1200px;

  /* Legacy names from the wireframe stylesheet, kept so anything that still
     reads them resolves to a brand token. site.css itself uses the brand names. */
  --bg:var(--surface);
  --card:var(--surface-raised);
  --card-hover:var(--teal-soft);
  --inv:var(--surface-raised);
  --text-2:var(--ink);
  --text-3:var(--ink);
  --text-4:var(--ink);
  --mute:var(--ink-muted);
  --line-2:var(--line);
  --line-3:var(--line);
  --line-ctl:var(--line-strong);
  --track:var(--surface-sunken);
  --band:var(--teal);
  --band-ink:var(--on-teal);
  --hatch-a:var(--surface-sunken);
  --hatch-b:var(--surface);
  --dv-low:var(--line-strong);
  --radius:var(--radius-sm);
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --surface:#0b1a1d;
  --surface-raised:#11262a;
  --surface-sunken:#071417;
  --night:#060f11;
  --on-night:#e4efee;
  --line:#1e3539;
  --line-strong:#55777b;
  --ink:#e4efee;
  --ink-muted:#93abad;
  --teal:#4fc9bb;
  --teal-soft:#0f3533;
  --on-teal:#04201e;
  --amber:#f5b04f;
  --amber-text:#f5b04f;
  --amber-soft:#3a2a0c;
  --on-amber:#1b1205;
  --risk:#f2856c;
  --risk-soft:#3d1a13;
  --data-1:#12403c;
  --data-2:#1c6a63;
  --data-3:#2e9b90;
  --data-4:#57c7ba;
  --data-5:#a3e8dd;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 8px 24px rgba(0,0,0,0.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/24px var(--font-sans);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2{font-family:var(--font-display);font-weight:600;color:var(--ink)}
h3{font:600 16px/24px var(--font-sans);color:var(--ink)}
ul,ol{padding:0}
button{font:inherit;color:inherit}
.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:50;background:var(--ink);color:var(--surface-raised);padding:var(--space-3) var(--space-4);font-size:14px;border-radius:var(--radius-md);text-decoration:none}
.skip:focus{top:var(--space-2)}

/* ── layout ──────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--page-max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-bottom:var(--space-12)}
.section > h2,.sec-title,.sec-head h2,.sec-sm,.sec-md{font-size:22px;line-height:28px;letter-spacing:-.01em}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.eyebrow{font:500 11px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--space-2)}
.src{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.lede{font-size:15px;line-height:24px;color:var(--ink);max-width:72ch}

/* placeholder copy: visibly unfinished text awaiting the client */
.ph-copy{color:var(--ink-muted);text-decoration:underline dashed;text-decoration-thickness:1px;text-underline-offset:4px;font-style:normal}

/* cards: surface-raised, hairline border, radius-lg, a hint of shadow */
.card{border:1px solid var(--line);background:var(--surface-raised);padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card--flush{padding:0;overflow:hidden}
.card h3{margin:0 0 var(--space-2)}
.card p{font-size:15px;line-height:24px;color:var(--ink-muted)}

/* Button: primary (teal) for the one action a view is for, secondary, ghost */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-4);border:1px solid var(--teal);background:var(--teal);color:var(--on-teal);font:500 13px/16px var(--font-sans);border-radius:var(--radius-md);text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none;filter:brightness(1.12)}
.btn--secondary{background:var(--surface-raised);color:var(--ink);border-color:var(--line-strong)}
.btn--secondary:hover{background:var(--teal-soft);filter:none}
.btn--ghost{background:transparent;color:var(--teal);border-color:transparent}
.btn--ghost:hover{background:var(--teal-soft);filter:none}
.btn--sm{min-height:28px;padding:0 var(--space-3);font-size:12px}
.btn--inverse{background:var(--on-teal);color:var(--teal);border-color:var(--on-teal)}
.btn--inverse:hover{filter:none;background:var(--surface-sunken)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
@media (pointer:coarse){.btn{min-height:44px}.btn--sm{min-height:40px}}

/* ── AppBar: the one dark band ───────────────────────────────────────── */
.bt-appbar{background:var(--night);color:var(--on-night)}
.bt-appbar-in{display:flex;align-items:center;gap:var(--space-6);min-height:56px}
.bt-appbar-brand{display:flex;align-items:center;gap:var(--space-2);flex:none;font:600 16px/20px var(--font-display);letter-spacing:-.01em;color:var(--on-night);text-decoration:none}
.bt-appbar-brand:hover{text-decoration:none}
.bt-appbar-brand i,.bt-sq{display:block;flex:none;width:10px;height:10px;border-radius:2px;background:var(--amber)}
.bt-appbar nav{display:flex;flex-wrap:wrap;align-self:stretch;gap:0 var(--space-4);font:500 13px/16px var(--font-sans)}
.bt-appbar nav a{display:flex;align-items:center;min-height:56px;color:var(--on-night);opacity:.72;text-decoration:none}
.bt-appbar nav a:hover{opacity:1;text-decoration:none}
.bt-appbar nav a[aria-current]{opacity:1;box-shadow:inset 0 -2px 0 var(--amber)}
.bt-appbar-meta{margin-left:auto;font:400 11px/16px var(--font-mono);letter-spacing:.06em;color:var(--on-night);opacity:.72;white-space:nowrap}
.bt-appbar :focus-visible{outline-color:var(--on-night)}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{padding-block:var(--space-12) var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.hero > *{max-width:820px}
.hero h1{font-size:clamp(32px,5vw,48px);line-height:1.08;letter-spacing:-.02em}
.hero .sub{font-size:18px;line-height:28px;color:var(--ink);max-width:64ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-2)}
.page-title{padding-block:var(--space-8) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.page-title h1{font-size:32px;line-height:38px;letter-spacing:-.015em}
.page-title p{font-size:15px;line-height:24px;color:var(--ink-muted);max-width:70ch}

/* ── StatCard ────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stat{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.stat .l{font:500 11px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.stat .v{font:500 40px/44px var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── card grids ──────────────────────────────────────────────────────── */
.grid-3,.grid-4{display:grid;gap:var(--space-4)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.more-link{font-size:15px}

/* ── how to read the scores ──────────────────────────────────────────── */
.howto{border:1px solid var(--line);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-8);display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--space-12);align-items:center}
.howto h2{font-size:22px;line-height:28px;letter-spacing:-.01em;margin-bottom:var(--space-2)}
.howto p{font-size:15px;line-height:24px;color:var(--ink)}
.howto .eyebrow{margin-bottom:var(--space-2)}
.scale{display:flex;flex-direction:column;gap:var(--space-2)}
.scale-marks{position:relative;height:var(--space-8)}
.scale-mark{position:absolute;bottom:0;font:400 11px/16px var(--font-mono);white-space:nowrap;transform:translateX(-50%)}
.scale-mark--max{transform:translateX(-90%)}
.scale-mark--min{transform:translateX(-10%)}
/* five equal bins over 60 to 140, the same steps as the regional map legend */
.scale-bar{position:relative;height:12px;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--data-1) 0 20%,var(--data-2) 20% 40%,var(--data-3) 40% 60%,var(--data-4) 60% 80%,var(--data-5) 80% 100%)}
.scale-bar::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink)}
.scale-axis{display:flex;justify-content:space-between;font:400 11px/16px var(--font-mono);color:var(--ink-muted)}
.scale-axis strong{color:var(--ink);font-weight:500}
.scale-dir{display:flex;justify-content:space-between;gap:var(--space-3);font:500 13px/16px var(--font-sans)}

/* ── section heads ───────────────────────────────────────────────────── */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4) var(--space-6);flex-wrap:wrap}
.sec-head p{font-size:15px;line-height:24px;color:var(--ink-muted);margin-top:var(--space-2);max-width:64ch}

/* ── Tabs: a segmented control ───────────────────────────────────────── */
.bt-tabs{display:inline-flex;flex-wrap:wrap;padding:3px;gap:2px;background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-md)}
.bt-tab{font:500 13px/16px var(--font-sans);min-height:30px;padding:0 var(--space-3);border:0;border-radius:4px;background:transparent;color:var(--ink-muted);cursor:pointer}
.bt-tab:hover{color:var(--ink)}
.bt-tab[aria-selected="true"],.bt-tab[aria-checked="true"]{background:var(--surface-raised);color:var(--teal);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
@media (pointer:coarse){.bt-tab{min-height:36px}}
.seg-label,.flabel{font:500 11px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.rankby{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}

/* ── DataTable ───────────────────────────────────────────────────────── */
.tbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);font:500 11px/16px var(--font-mono);letter-spacing:.08em;color:var(--ink-muted);text-transform:uppercase}
.tbar span:last-child{text-transform:none;letter-spacing:0;font-weight:400}
.tscroll{overflow:auto;scrollbar-color:var(--line-strong) var(--surface-sunken)}
.tscroll:focus-visible{outline-offset:-2px}
table.data{border-collapse:collapse;width:100%;font-size:13px;line-height:20px}
table.data th{text-align:left;font:500 11px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-sunken);box-shadow:inset 0 -1px 0 var(--line);padding:var(--space-2) var(--space-3);white-space:nowrap;vertical-align:bottom}
table.data td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:var(--surface)}
table.data th.n,table.data td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.data td:first-child,table.data td.rank,table.data td.is-key{font-weight:600}
table.data td.rank{font-size:13px}
table.data tbody tr.is-selected td{background:var(--teal-soft)}
table.data tbody tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
table.data td.f{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.tscroll thead th{position:sticky;top:0;z-index:1}
.sort{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;white-space:nowrap}
.sort:hover{color:var(--ink);text-decoration:underline}
.sort.on{color:var(--ink);font-weight:500}
.th-scale{text-transform:none;letter-spacing:0;font-weight:400;margin-left:var(--space-1)}
.clink{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rank-wide{min-width:560px}
.t-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-4)}
.t-foot a{font-size:13px}

/* ScoreBar: the county meter (.bar) and the ranking table's diverging bar (.dv)
   share one set of rules. Track surface-sunken, fill teal (line-strong for a
   .dv bar below the baseline), 2px ink tick that
   overhangs the track by 4px. The tick marks the 100 baseline. Inside a
   selected row, or when a bar carries .is-selected, the fill turns amber. */
.bar,.dv{position:relative;display:block;height:var(--space-2);background:var(--surface-sunken);border-radius:var(--radius-sm)}
.bar i,.dv-bar{position:absolute;inset-block:0;left:0;display:block;background:var(--teal);border-radius:var(--radius-sm)}
.bar u,.dv-mid{position:absolute;inset-block:-4px;width:2px;margin-left:-1px;background:var(--ink);text-decoration:none}
.dv-mid{left:50%}
/* Below the baseline (the good side) the fill is line-strong, so direction does not rest on position alone. */
.dv-bar.low{background:var(--line-strong)}
.is-selected .dv-bar,.is-selected .bar i,.bar.is-selected i{background:var(--amber)}
/* a value beyond the drawn range ends in a hatched cap */
.dv-clip{position:absolute;top:0;bottom:0;width:var(--space-2);background:repeating-linear-gradient(135deg,var(--surface-raised) 0 2px,transparent 2px 4px);border:1px solid var(--ink)}
.dv-clip--hi{right:0}
.dv-clip--lo{left:0}
.scorecell{display:flex;align-items:center;gap:var(--space-3)}
.scorecell .n{width:48px;flex:none;text-align:right;font:500 13px/20px var(--font-mono);font-variant-numeric:tabular-nums}
.scorecell .dv{min-width:96px;flex:1}

/* map cards */
.mapcard{display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-4)}
.mapcard h3{margin-top:var(--space-1)}
.mapcard p{font-size:13px;line-height:20px;color:var(--ink-muted)}
.thumb{display:block;width:100%;aspect-ratio:14/9;object-fit:cover;background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink-muted);font-size:11px}

/* ── CTA band ────────────────────────────────────────────────────────── */
.cta{margin-bottom:var(--space-12)}
.cta-band{padding:var(--space-8) var(--space-8);color:var(--on-teal);background:var(--teal);border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-6)}
.cta-band h2{font-size:22px;line-height:28px;max-width:734px;color:var(--on-teal)}
.cta-band :focus-visible{outline-color:var(--on-teal)}

/* ── footer ──────────────────────────────────────────────────────────── */
.site-footer{background:var(--surface-raised);border-top:1px solid var(--line)}
.foot-main{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-8);padding-block:var(--space-8)}
.foot-brand{display:flex;flex-direction:column;gap:var(--space-2);max-width:280px}
.foot-name{display:flex;align-items:center;gap:var(--space-2);font:600 14px/20px var(--font-display);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.foot-name:hover{text-decoration:none}
.foot-brand p{font-size:13px;color:var(--ink-muted);line-height:20px}
.foot-col{display:flex;flex-direction:column;gap:var(--space-2)}
.foot-col .eyebrow{margin:0 0 var(--space-1)}
.foot-col a,.foot-col .ph-copy{font-size:13px;line-height:20px}
.badges{display:flex;gap:var(--space-2)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);background:var(--ink);color:var(--surface-raised);font:500 11px/16px var(--font-mono);text-decoration:none}
a.badge:hover{text-decoration:none;opacity:.85}
.badge--ph{background:transparent;color:var(--ink-muted);border:1px dashed var(--ink-muted)}
.foot-legal{border-top:1px solid var(--line)}
.foot-legal .wrap{padding-block:var(--space-4);font:400 11px/16px var(--font-mono);letter-spacing:.06em;color:var(--ink-muted)}

/* ── map slots: white cards, whatever the map draws inside them ──────── */
.mapstage{position:relative}
.mapframe{position:relative;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--surface-raised)}
.mapframe[data-mount="region"]{height:640px}
.mapframe[data-mount="county"]{aspect-ratio:1/1}
.mapstage[data-state="county"] .mapframe[data-mount]{height:500px;aspect-ratio:auto}
.stage-bar{position:absolute;left:var(--space-4);right:var(--space-4);top:var(--space-4);z-index:5;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-2);pointer-events:none}
.stage-bar > *{pointer-events:auto}
.ovl,.ovl-btn{background:var(--surface-raised);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);font:500 13px/16px var(--font-sans);padding:0 var(--space-3);min-height:36px;display:inline-flex;align-items:center}
.ovl-btn{cursor:pointer}
.ovl-btn:hover{background:var(--teal-soft)}
a.ovl{color:var(--teal);text-decoration:none}
a.ovl:hover{background:var(--teal-soft);text-decoration:none}
#exp-badge{font:500 12px/16px var(--font-mono);padding-block:var(--space-2)}
#exp-profile{margin-left:auto}
/* Top-left: the viewer's legend takes bottom-left and its attribution bottom-right. */
.stage-link{position:absolute;left:var(--space-3);top:var(--space-3);z-index:5}
/* The viewer's failure and lost-context notice is centred vertically in its
   frame. At the top edge it sat under the stage link (county page) and under
   the stage bar (explorer), which wraps to two rows between 601 and about
   715 px; the middle of the frame is clear of both at every width. */
.mapstage .mapframe .b3-notice{top:50%;transform:translateY(-50%)}
.map-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin-top:var(--space-2);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}

/* ── explorer ────────────────────────────────────────────────────────── */
.filterbar{padding:var(--space-3) var(--space-4);border:1px solid var(--line);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);align-items:center}
.fgroup{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.explorer{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-6);padding-block:var(--space-6) var(--space-8);align-items:start}
.rail-col{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}

/* Select and search: 40px, line-strong border, radius-md */
.search,.select{width:100%;min-height:40px;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:0 var(--space-3);font:400 15px/20px var(--font-sans);background:var(--surface-raised);color:var(--ink)}
.search::placeholder{color:var(--ink-muted);opacity:1}
.select{appearance:none;padding-right:40px;background:var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23788f92' stroke-width='1.75'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center}
.rail{position:relative;list-style:none;margin:0;padding:0;border:1px solid var(--line);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.rail li{border-bottom:1px solid var(--line)}
.rail li:last-child{border-bottom:0}
.rail a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:13px;line-height:20px;text-decoration:none;color:var(--ink)}
.rail a:hover{background:var(--teal-soft);text-decoration:none}
.rail a:focus-visible{outline-offset:-2px}
.rail a[aria-current]{background:var(--teal-soft);box-shadow:inset 3px 0 0 var(--amber);font-weight:600}
.rail .sc{font:400 12px/16px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.rail a[aria-current] .sc{color:var(--ink)}
.rail-note{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.map-col{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}

/* ── county profile ──────────────────────────────────────────────────── */
.profile{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-6);padding-block:var(--space-8) var(--space-12);align-items:start}
.profile .rail-col{position:sticky;top:var(--space-6);max-height:calc(100vh - 48px);overflow-y:auto}
.profile-main{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--space-2);font:500 11px/16px var(--font-mono);letter-spacing:.08em;color:var(--ink-muted);text-transform:uppercase}
.crumb a{color:var(--ink-muted)}
.crumb li + li::before{content:"/";margin-right:var(--space-2)}
.title-row{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-6);align-items:end;margin-top:var(--space-2)}
.title-row > div:first-child{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.title-row h1{font-size:32px;line-height:38px;letter-spacing:-.015em}
.title-row .sub{font-size:15px;line-height:24px;color:var(--ink-muted)}
/* Tag: mono caps with a leading dot; the rank chip is the neutral kind */
.bt-tag,.chip{display:inline-flex;align-items:center;gap:6px;font:500 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:2px var(--space-2);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink-muted)}
.bt-tag::before,.chip::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}
.bt-tag--high{background:var(--teal-soft);color:var(--teal)}
.bt-tag--medium{background:var(--amber-soft);color:var(--amber-text)}
.bt-tag--low{background:var(--risk-soft);color:var(--risk)}
/* The locator has no frame: counties sit straight on the page canvas. */
.locator{width:100%;aspect-ratio:2/1;border:0;background:transparent}
.locator svg{display:block;width:100%;height:100%}
.profile-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.profile-right{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.score-card{display:flex;flex-direction:column}
.score-sentence{font:600 15px/24px var(--font-sans);margin-bottom:var(--space-4)}
.comp{padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.comp:first-of-type{padding-top:var(--space-2)}
.comp:last-of-type{border-bottom:0;padding-bottom:0}
.barrow{display:grid;grid-template-columns:72px minmax(0,1fr) 56px;gap:var(--space-3);align-items:center}
.barrow .lbl{font:500 11px/16px var(--font-mono);letter-spacing:.08em;color:var(--ink-muted)}
.barrow .val{font:500 13px/20px var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.comp--overall .lbl{color:var(--ink)}
.comp--overall .val{font-size:15px}
.comp p{margin-top:var(--space-3);font-size:13px;line-height:20px;color:var(--ink-muted)}
.explain{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--space-2)}
.explain .q{font:600 13px/20px var(--font-sans);color:var(--ink)}
.explain p{font-size:13px;line-height:20px;color:var(--ink-muted)}
.explain a{font-size:13px}
.cov{display:flex;flex-direction:column;gap:var(--space-3)}
.cov-note{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.tlinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.tlink{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border:1px solid var(--line);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink)}
.tlink:hover{border-color:var(--teal);background:var(--teal-soft);text-decoration:none}
.tlink .id{font:500 13px/20px var(--font-mono)}
.tlink .nm{font-size:13px;line-height:20px;color:var(--ink)}
.tlink .go{font:400 11px/16px var(--font-mono);color:var(--ink-muted)}
.census p.lede{font-size:13px;line-height:20px;color:var(--ink-muted)}
details.notes{border:1px solid var(--line);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-3) var(--space-4)}
details.notes summary{cursor:pointer;font:600 16px/24px var(--font-sans);padding-block:var(--space-1)}
details.notes ul{margin-top:var(--space-3);padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);font-size:13px;color:var(--ink-muted);max-width:80ch;line-height:20px}

/* ── methodology ─────────────────────────────────────────────────────── */
.doc-title{padding-block:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.doc-title > *{max-width:820px}
.doc-title h1{font-size:32px;line-height:38px;letter-spacing:-.015em}
.doc-title p{font-size:15px;line-height:24px;color:var(--ink-muted)}
.section-sm{padding-bottom:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.section-sm > h2{font-size:22px;line-height:28px;letter-spacing:-.01em}
.vars h3{margin:0 0 var(--space-3)}
.vars .it{font-size:13px;line-height:20px;color:var(--ink);margin-bottom:var(--space-3)}
.vars .it .f{display:block;font:400 12px/16px var(--font-mono);color:var(--ink-muted);margin-top:var(--space-1);overflow-wrap:anywhere}
.formula p.h{font:600 13px/20px var(--font-sans);color:var(--ink);margin:0 0 var(--space-2)}
.formula p.eq{font:400 15px/32px var(--font-mono);color:var(--ink)}
.prose{font-size:15px;line-height:24px;color:var(--ink);max-width:80ch}
dl.meth{display:grid;gap:var(--space-4);margin:0}
dl.meth dt{font:600 15px/24px var(--font-sans)}
dl.meth dd{font-size:15px;line-height:24px;color:var(--ink);max-width:80ch;margin:var(--space-1) 0 0}
dl.meth code,.prose code,.faq code,.caveats code{font:400 12px/16px var(--font-mono)}
.tcell-wrap{overflow-x:auto}
.caveats{display:flex;flex-direction:column;gap:var(--space-3);padding-left:var(--space-6);font-size:15px;line-height:24px;color:var(--ink);max-width:84ch}
.faq{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-sm);overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3) var(--space-4);cursor:pointer;font-size:15px;line-height:24px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface)}
.faq summary:focus-visible{outline-offset:-2px}
.faq summary .qn{font:500 12px/16px var(--font-mono);color:var(--ink-muted);margin-right:var(--space-2)}
.faq summary::after{content:"EXPAND \2193";font:500 11px/16px var(--font-mono);letter-spacing:.08em;color:var(--ink-muted);flex:none}
.faq details[open] summary::after{content:"COLLAPSE \2191"}
.faq .ans{padding:0 var(--space-4) var(--space-4) var(--space-12);font-size:15px;line-height:24px;color:var(--ink);max-width:calc(80ch + var(--space-12) + var(--space-4))}
.faq .ans p + p{margin-top:var(--space-2)}
.contact{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:var(--space-2)}
.contact h3{margin:0 0 var(--space-1)}
.contact p{font-size:15px;color:var(--ink-muted)}
.contact .mail{font:500 13px/20px var(--font-mono)}

/* small utilities that replace inline styles */
.eyebrow--flush{margin:0}
.lede--sm{font-size:13px;line-height:20px;color:var(--ink-muted)}
.minw-520{min-width:520px}.minw-560{min-width:560px}.minw-640{min-width:640px}
.src--tight{margin-top:var(--space-2)}
.prose--tight{margin-top:var(--space-1)}
.census{gap:var(--space-3)}
table.data th.rowhead{text-transform:none;letter-spacing:0;color:var(--ink);font:600 13px/20px var(--font-sans);background:none;box-shadow:none;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr:last-child th.rowhead{border-bottom:0}

/* ── breakpoints ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .howto{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlinks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .explorer,.profile{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  /* the rail becomes a horizontal strip above the content */
  .profile .rail-col{position:static;max-height:none;overflow:visible}
  .profile .rail{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .profile .rail li{border-bottom:0;border-right:1px solid var(--line);flex:none}
  .profile .rail a[aria-current]{box-shadow:inset 0 -3px 0 var(--amber)}
  .explorer .rail{max-height:240px;overflow-y:auto}
  .mapframe[data-mount="region"],.mapstage[data-state="county"] .mapframe[data-mount]{height:auto;aspect-ratio:3/2}
  .title-row{grid-template-columns:minmax(0,1fr)}
  .title-row .locator-wrap{max-width:360px}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-block:var(--space-8) var(--space-6)}
}
@media (max-width:720px){
  /* brand and vintage on the first row, the links on a second row below */
  .bt-appbar-in{flex-wrap:wrap;gap:0 var(--space-4);min-height:0}
  .bt-appbar-brand{padding-block:var(--space-3)}
  .bt-appbar-meta{padding-block:var(--space-3)}
  .bt-appbar nav{order:3;flex-basis:100%;gap:0 var(--space-4)}
  .bt-appbar nav a{min-height:0;padding:var(--space-3) 0}
}
@media (max-width:600px){
  .grid-4,.tlinks{grid-template-columns:minmax(0,1fr)}
  .card,.stat,.score-card{padding:var(--space-4)}
  .stats{gap:var(--space-3)}
  .stat .v{font-size:32px;line-height:36px}
  .cta-band{padding:var(--space-6) var(--space-4)}
  .howto{padding:var(--space-4)}
  .barrow{grid-template-columns:56px minmax(0,1fr) 48px;gap:var(--space-2)}
  .mapframe[data-mount="region"],.mapstage[data-state="county"] .mapframe[data-mount]{aspect-ratio:4/3}
  .faq .ans{padding-left:var(--space-4)}
  .filterbar{padding:var(--space-3);gap:var(--space-3)}
  /* On phones the bar wraps to three rows, so it sits above the map instead of over it. */
  .mapstage{display:flex;flex-direction:column}
  .mapstage .stage-link{position:static;display:inline-flex;margin-top:var(--space-2)}
  .stage-bar{position:static;order:-1;margin-bottom:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}