:root{
  --bg:#fafaf7;
  --paper:#ffffff;
  --ink:#111;
  --muted:#666;
  --rule:#e3e3dd;
  --good:#1a9850;
  --bad:#d73027;
  --warn:#b22222;
  --baseline:#999;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.masthead, .hero, .reading-guide, .composite-chart, .breakdown, .map-section, .bexar-strip, footer,
.mega-hero, .mega-controls, .mega-map-section, .mega-table-section, .mega-note{
  max-width:960px;margin:0 auto;padding-left:32px;padding-right:32px;
}

/* ── masthead ─────────────────────────────────────────────────────── */
.masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:18px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.brand{font:600 17px/1 ui-serif,Georgia,serif;letter-spacing:0.01em}
.release{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;text-align:right}

/* tabs */
.tabs{display:flex;gap:0;margin-left:24px}
.tab{font:inherit;font-size:13px;background:transparent;border:1px solid var(--rule);padding:6px 14px;cursor:pointer;color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif}
.tab + .tab{border-left:none}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* map mode toggle (Index vs Cases) */
.map-mode{display:flex}
.map-mode button{font:inherit;font-size:11px;background:transparent;border:1px solid var(--rule);padding:3px 10px;cursor:pointer;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.map-mode button + button{border-left:none}
.map-mode button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* mega-evictors view */
.mega-hero{padding-top:32px;padding-bottom:8px}
.mega-label{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px}
.mega-meta{font:600 22px/1.1 ui-serif,Georgia,serif;letter-spacing:-0.01em;margin-bottom:8px}
.mega-blurb{font-size:14px;color:var(--muted);margin:0;max-width:680px}
.mega-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.mega-filter{display:flex}
.mega-filter button{font:inherit;font-size:12px;background:transparent;border:1px solid var(--rule);padding:5px 12px;cursor:pointer;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mega-filter button + button{border-left:none}
.mega-filter button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.mega-stats{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-align:right;font-feature-settings:"tnum"}
/* mega-evictors map */
.mega-map-section{padding-top:18px;padding-bottom:8px}
#mega-map{height:380px;border:1px solid var(--rule);background:var(--paper)}
.mega-map-popup{font:12px/1.4 ui-sans-serif,system-ui,sans-serif}
.mega-map-popup .pop-addr{font-weight:600;font-size:13px;margin-bottom:1px}
.mega-map-popup .pop-plaintiff{color:var(--muted);font-size:11px;margin-bottom:6px}
.mega-map-popup .pop-row{display:flex;justify-content:space-between;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum"}
.mega-map-popup .pop-row .label{color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif}

.mega-table-section{padding-top:0}
.mega-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.mega-table th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.mega-table td{padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.mega-table .rank{width:36px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;text-align:right;padding-right:14px}
.mega-table .metro-col{width:80px;color:var(--muted);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:0.04em}
.mega-table .filings-col{width:160px;text-align:right}
.mega-table .filings-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";font-size:13px;font-weight:600}
.mega-table .filings-bar{display:inline-block;height:6px;background:var(--warn);margin-left:8px;vertical-align:middle;border-radius:1px}
.mega-table .property{font-weight:500}
.mega-table .plaintiff{color:var(--muted);font-size:12px}
.mega-table tr:hover td{background:#f5f5ee}
.mega-note{margin-top:24px;padding:12px 0;color:var(--muted);font-size:12px}

/* ── hero (the index number) ──────────────────────────────────────── */
.hero{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end;
  padding-top:36px;padding-bottom:24px}
.hero-label{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px}
.hero-value{font:600 88px/0.95 ui-serif,Georgia,serif;letter-spacing:-0.02em;color:var(--ink);font-feature-settings:"tnum"}
.hero-wow{font:14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin-top:10px;font-feature-settings:"tnum"}
.hero-wow.up{color:var(--bad)}
.hero-wow.down{color:var(--good)}
.hero-context{display:grid;grid-template-columns:1fr;gap:6px;border-left:1px solid var(--rule);padding-left:24px;align-self:end}
.ctx-row{display:flex;justify-content:space-between;gap:24px;font-size:13px;line-height:1.4}
.ctx-label{color:var(--muted)}
.ctx-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum";color:var(--ink)}

/* ── reading guide strip ──────────────────────────────────────────── */
.reading-guide{display:flex;flex-wrap:wrap;gap:24px;padding-top:14px;padding-bottom:18px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:13px;color:var(--muted)}
.reading-guide strong{color:var(--ink);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rg-meta{margin-left:auto;font-size:12px;max-width:480px;text-align:right}

/* ── composite chart ──────────────────────────────────────────────── */
.composite-chart{padding-top:24px;padding-bottom:8px}
.detail-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
h2{font:600 16px/1 ui-sans-serif,system-ui,sans-serif;margin:0;letter-spacing:0.005em;text-transform:uppercase;color:var(--ink);font-size:13px;letter-spacing:0.08em}
.freq-toggle button{font:inherit;font-size:11px;background:transparent;border:1px solid var(--rule);padding:3px 10px;cursor:pointer;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.freq-toggle button + button{border-left:none}
.freq-toggle button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
#composite-chart-svg{width:100%;height:280px;display:block;background:var(--paper);border:1px solid var(--rule)}
.chart-note{font-size:12px;color:var(--muted);margin:6px 0 0}

/* ── county breakdown cards ───────────────────────────────────────── */
.breakdown{padding-top:24px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.card{background:var(--paper);border:1px solid var(--rule);padding:14px}
.card .name{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card .index{font:600 30px/1 ui-serif,Georgia,serif;letter-spacing:-0.01em;margin:6px 0 4px;font-feature-settings:"tnum"}
.card .delta{font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);font-feature-settings:"tnum"}
.card.up .index{color:var(--bad)}
.card.down .index{color:var(--good)}

/* ── map ──────────────────────────────────────────────────────────── */
.map-section{padding-top:32px}
.map-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:8px;flex-wrap:wrap}
.map-controls select{font:inherit;font-size:13px;padding:3px 8px;border:1px solid var(--rule);background:#fff}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);font-weight:600;margin-right:auto}
.legend-bar{display:flex;align-items:center;gap:6px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.swatch{display:inline-block;width:18px;height:14px;border:1px solid rgba(0,0,0,0.1)}
#map{height:520px;border:1px solid var(--rule)}

.maplibregl-popup-content{font:12px/1.4 ui-sans-serif,system-ui,sans-serif;padding:10px 12px;border-radius:0}
.popup-zip{font-weight:600;font-size:13px;margin-bottom:1px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.popup-county{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.popup-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"tnum"}
.popup-row .label{color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif}
.popup-spark{margin-top:6px}

/* ── Bexar strip ──────────────────────────────────────────────────── */
.bexar-strip{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  margin-top:32px;padding:18px 24px;background:var(--paper);border:1px solid var(--rule)}
.bx-label{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.bx-value{font:600 32px/1 ui-serif,Georgia,serif;margin:6px 0 2px;font-feature-settings:"tnum"}
.bx-meta{font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.bx-note{font-size:13px;color:var(--muted);max-width:480px;justify-self:end}

/* ── footer ───────────────────────────────────────────────────────── */
footer{margin-top:48px;padding-top:16px;padding-bottom:32px;border-top:1px solid var(--rule);color:var(--muted);font-size:12px}
footer a{color:var(--muted);text-decoration:underline}
.footer-method{margin-top:6px;font-size:11px;line-height:1.4}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:24px}
  .hero-context{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:14px}
  .hero-value{font-size:64px}
  .cards{grid-template-columns:repeat(2,1fr)}
  #map{height:420px}
  .reading-guide{font-size:12px}
  .rg-meta{margin-left:0;text-align:left}
  .bexar-strip{grid-template-columns:1fr}
  .bx-note{justify-self:start}
}