/* State Insight. Night mode swaps these variables. */
:root {
  --ink: #1c2430;
  --muted: #5c6770;
  --line: #d5dbe0;
  --paper: #f4f6f7;
  --panel: #ffffff;
  --water: #d5e0ea;
  --state: #f7f5f1;
  --state-line: #8ea0ae;
  --hover: #f3e2c4;
  --county: #fbfaf7;
  --county-line: #c5ced6;
  --selected: #1f4b6e;
  --label: #1c2430;
  --label-on: #f4f7fb;
}
body.night {
  --ink: #e7eef4;
  --muted: #b7c3ce;
  --line: #31404d;
  --paper: #10161c;
  --panel: #1a232c;
  --water: #0c1218;
  --state: #243140;
  --state-line: #8aa0b4;
  --hover: #3a4a3c;
  --county: #1c2833;
  --county-line: #6d7c8a;
  --selected: #8fb4d4;
  --label: #e7eef4;
  --label-on: #10202c;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.wordmark a { color: inherit; text-decoration: none; }
.wordmark.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.brand-mark { display: block; flex: 0 0 auto; width: 32px; height: 32px; }
.wordmark {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
#theme, .map-reset {
  appearance: none;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#theme[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 400px;
}
#map, .leaflet-container { height: 100%; background: var(--water); font: inherit; }
.leaflet-bar a { background: var(--panel); color: var(--ink); border-bottom-color: var(--line); }
aside {
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow: auto;
  padding: 22px 22px 32px;
}
.kicker {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h1#place {
  margin: 4px 0 8px;
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hint { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.metric { border-top: 1px solid var(--line); }
.metric summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  cursor: pointer;
}
.metric summary::-webkit-details-marker { display: none; }
.ico { width: 20px; height: 20px; flex: 0 0 20px; color: var(--ink); }
.ico svg { display: block; width: 20px; height: 20px; }
.metric h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.base {
  margin-left: auto;
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.caret {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--ink);
}
details[open] > summary .caret {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--ink);
  border-bottom: 0;
}
.sub { margin-top: 8px; border-top: 1px solid var(--line); }
.sub summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  cursor: pointer;
}
.sub summary::-webkit-details-marker { display: none; }
.sub-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub .base { font-size: 14px; }
.sub > summary .caret {
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 5px;
}
.sub[open] > summary .caret {
  border-left-width: 3px;
  border-right-width: 3px;
  border-top-width: 5px;
}
.sub-body { padding: 0 0 8px 12px; }
.detail { padding: 0 0 12px 28px; }
.rate {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
}
.rate b { font-weight: 600; font-variant-numeric: tabular-nums; }
.what, .source { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.source a { color: var(--ink); }
.group {
  margin: 12px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}
.leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 450;
  overflow: visible;
}
.leaders text { font-family: "Segoe UI", system-ui, sans-serif; fill: var(--ink); }
.leaders text.callout { fill: #1c2430; }
.leaders rect.leader-back { fill: #ffffff; stroke: #d5dbe0; stroke-width: 1; }
.leaders line { stroke: var(--ink); stroke-width: 1; opacity: 0.7; }
.map-moving .leaders { visibility: hidden; }
.neighbors { padding-top: 14px; border-top: 1px solid var(--line); }
.neighbors h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.neighbors p { margin: 8px 0 0; line-height: 1.45; }
.foot { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.leaflet-tooltip, .map-label {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--label);
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--water), 0 0 3px var(--water);
}
.map-label.on-fill { color: var(--label-on); text-shadow: none; }
.map-label b, .map-label span { display: block; font-weight: 650; }
.map-label span { font-weight: 550; }
.leaflet-tooltip { background: var(--ink); color: var(--panel); font-size: 12px; padding: 4px 6px; text-shadow: none; }
.leaflet-tooltip:before { display: none; }
.leaflet-top.leaflet-right { margin-top: 8px; margin-right: 8px; }
.leaflet-control.map-reset-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.city-symbol {
  background: transparent;
  border: 0;
}
.city-symbol svg { display: block; overflow: visible; }
/* Set for one hit-test while a city tap is passed to the shape below it. */
.city-probe .city-symbol { pointer-events: none !important; }
/* Capital star halo: none on light surfaces (the #737d8a fill already clears 3:1),
   white on the light selected fill, near-white on dark surfaces,
   and dark on the dark selected fill. */
.star-halo { stroke: none; }
.city-symbol.capital.on-selected .star-halo { stroke: #ffffff; }
body.night .star-halo { stroke: #e6ebf0; }
body.night .city-symbol.capital.on-selected .star-halo { stroke: #10161c; }

.city-key {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow: none;
  line-height: 1;
}
.city-key p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.city-key p + p { margin-top: 4px; }
.city-key-mark {
  display: flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
}
.city-key-mark svg { display: block; overflow: visible; }
.city-key.is-hidden { display: none; }

.city-toggle {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.city-toggle[aria-pressed="false"] {
  background: var(--ink);
  color: var(--panel);
}

.leaflet-top.leaflet-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.leaflet-top.leaflet-left .leaflet-control {
  float: none;
  clear: none;
}
.label-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 0 0;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow: none;
}
/* The list is transparent to the flex layout on desktop, so the box looks as before. */
.label-toggle-list { display: contents; }
.layers-btn { display: none; }
.check-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.check-toggle input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  pointer-events: none;
}
.check-toggle input::before,
.check-toggle input::after,
.check-toggle input:checked + .check-box::before,
.check-toggle input:checked + .check-box::after {
  content: none;
}
.check-box {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--ink);
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}
.check-toggle input:checked + .check-box {
  background: var(--ink);
}
.check-toggle input:focus-visible + .check-box {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.map-label span.gdp-line,
.map-label span.pop-line,
.map-label span.housing-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.map-label span.gdp-line svg,
.map-label span.pop-line svg,
.map-label span.housing-line svg {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
}
.bin-note {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

.rate.industry { flex-wrap: nowrap; }
.rate.industry span { min-width: 0; }
.rate.industry b { white-space: nowrap; flex: none; }
.group { display: flex; align-items: center; gap: 6px; }
.info-dot {
  appearance: none;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--muted);
  font: 700 10px/1 Georgia, "Iowan Old Style", serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
  flex: none;
}
.rate .info-dot { margin-left: 6px; vertical-align: 1px; }
.site-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 20px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.site-foot p { margin: 0; color: var(--muted); }
.site-foot a, .sources a { color: var(--ink); }
body.sources-page { height: auto; min-height: 100%; }
.sources {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 22px 64px;
}
.sources h1 {
  margin: 8px 0 12px;
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sources p { line-height: 1.5; }
.sources ul { padding-left: 18px; }
.sources li { margin: 12px 0; line-height: 1.45; }
.sources .back { color: var(--muted); font-size: 14px; }

.sub-body:has(> .rate.age) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.rate.age { display: contents; }
.rate.age b { white-space: nowrap; text-align: right; }
.age-track {
  width: 100%;
  height: 8px;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  box-sizing: border-box;
}
.age-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  max-width: 100%;
}
.sub-body:has(> .rate.race) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.rate.race { display: contents; }
.rate.race b { white-space: nowrap; text-align: right; }
.race-track {
  width: 100%;
  height: 8px;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  box-sizing: border-box;
}
.race-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  max-width: 100%;
}
details.metric.is-muted,
details.metric.is-muted .ico,
details.metric.is-muted h2,
details.metric.is-muted .base,
details.metric.is-muted .what,
details.metric.is-muted .source,
details.metric.is-muted .source a {
  color: var(--muted);
}

/* Narrow screens (below the 1024px desktop layout): stack the sidebar under a full-width map. */
@media (max-width: 1023px) {
  html, body { height: auto; }
  .layout {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
  }
  #map { height: 60vh; min-height: 320px; }
  aside {
    border-left: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  /* Keep the map credit on one short line and lift the city legend above it. */
  .leaflet-control-attribution { font-size: 10px; line-height: 14px; }
  .leaflet-bottom.leaflet-left .city-key { margin-bottom: 26px; }
}

/* Short landscape phones: keep the whole map on screen under the header. */
@media (max-width: 1023px) and (max-height: 500px) {
  #map { height: 80vh; min-height: 240px; }
}

/* Small or short screens: the layer box starts collapsed behind a "Layers" button. */
@media (max-width: 700px), (max-width: 1023px) and (max-height: 500px) {
  .label-toggles .layers-btn {
    display: block;
    appearance: none;
    background: transparent;
    color: var(--ink);
    border: 0;
    padding: 2px 4px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
  }
  .label-toggles .layers-caret::after { content: " \25BE"; }
  .label-toggles.is-open .layers-caret::after { content: " \25B4"; }
  .label-toggles .layers-btn:focus-visible { outline: 2px solid var(--selected); outline-offset: 2px; }
  .label-toggles:not(.is-open) .label-toggle-list { display: none; }
  .label-toggles.is-open .label-toggle-list { display: flex; flex-direction: column; gap: 4px; }
}

/* Sidebar filters ("Customize"). Sidebar only; the map never reads them. */
:root {
  --si-navy: #0f3d6e;
  --si-blue: #1e5fa8;
  --si-tint: #e8f0f9;
  --si-tint-line: #c3d4e8;
  --si-quiet: #f1f3f5;
  --si-on-navy: #ffffff;
}
body.night {
  --si-navy: #d6e4f5;
  --si-blue: #9cc2f0;
  --si-tint: #1d2d3d;
  --si-tint-line: #3a5673;
  --si-quiet: #222d38;
  --si-on-navy: #10161c;
}
.filter-row [hidden], .filter-empty[hidden], .filter-note[hidden], .filter-panel[hidden],
.filter-scrim[hidden], .filter-stats[hidden], #bar [data-stat][hidden], #bar [data-stat-fallback][hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  min-height: 44px;
  margin: -6px 0 12px;
}
.filter-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  background: var(--panel);
  color: var(--si-navy);
  border: 1.5px solid var(--si-blue);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.filter-btn svg { display: block; flex: none; }
.filter-btn[aria-expanded="true"] { background: var(--si-tint); }
.filter-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.filter-btn[aria-expanded="true"] .filter-caret { border-top: 0; border-bottom: 5px solid currentColor; }
.filter-count { color: var(--muted); font-size: 13px; }
.filter-count.is-filtered { color: var(--si-navy); font-weight: 650; }
.filter-showall { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.filter-dot { color: var(--muted); }
.link-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  color: var(--si-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.filter-btn:focus-visible, .link-btn:focus-visible, .primary-btn:focus-visible, .ghost-btn:focus-visible,
.filter-exp:focus-visible, .filter-check input:focus-visible, .filter-panel h2:focus-visible {
  outline: 2px solid var(--si-blue);
  outline-offset: 2px;
}
.filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.filter-note.is-all {
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 0 4px 0 12px;
  background: var(--si-quiet);
  border-radius: 4px;
  font-style: normal;
}
.filter-empty {
  margin: 0 0 16px;
  padding: 18px 16px;
  text-align: center;
  background: var(--si-tint);
  border: 1px solid var(--si-tint-line);
  border-radius: 8px;
}
.filter-empty p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.filter-empty .filter-empty-title { margin-bottom: 6px; color: var(--si-navy); font-size: 15px; font-weight: 700; }
.filter-empty .filter-empty-alt { margin: 6px 0 0; color: var(--muted); }
.primary-btn, .ghost-btn {
  appearance: none;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn { background: var(--si-navy); color: var(--si-on-navy); border: 1.5px solid var(--si-navy); }
.ghost-btn { background: var(--panel); color: var(--si-blue); border: 1.5px solid var(--si-blue); }
.filter-panel {
  position: fixed;
  z-index: 1200;
  overflow: auto;
  padding: 12px 14px 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--si-tint-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 22, 28, 0.22);
  overscroll-behavior: contain;
}
.filter-handle { display: none; }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.filter-panel h2 { margin: 0; color: var(--si-navy); font-size: 16px; font-weight: 700; }
.filter-help { margin: 2px 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.filter-panel-count { margin: 0 0 6px; color: var(--si-navy); font-size: 13px; font-weight: 650; }
.filter-list { border-top: 1px solid var(--line); }
.filter-cat { border-bottom: 1px solid var(--line); }
.filter-cat-row { display: flex; align-items: center; gap: 6px; }
.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}
.filter-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--si-blue); cursor: pointer; }
.filter-cat-label .filter-name { font-weight: 700; }
.filter-k { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.filter-exp {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
}
.filter-tri {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}
.filter-exp[aria-expanded="true"] .filter-tri {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
  border-bottom: 0;
}
.filter-stats { margin: 0; padding: 0 0 6px 28px; list-style: none; }
.filter-tag, .filter-new {
  flex: none;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.filter-tag { margin-left: auto; background: var(--si-tint); color: var(--si-navy); }
.filter-new { border: 1px solid var(--si-blue); color: var(--si-blue); }
.filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
/* Popover: the panel itself scrolls, and Done / Show all stay pinned to its
   bottom edge. The negative offset covers the panel's bottom padding. */
.filter-panel:not(.is-sheet) .filter-foot {
  position: sticky;
  bottom: -14px;
  margin: 0 -14px -14px;
  padding: 12px 14px 14px;
  background: var(--panel);
  border-top: 1px solid transparent;
}
.filter-panel.is-overflowing:not(.is-sheet) .filter-foot { border-top-color: var(--line); }
/* Popover footer, like the sheet's: Show all and Done side by side, the Esc
   hint on its own line above them. Its scroll padding is set from its height
   in markOverflow(). */
.filter-panel:not(.is-sheet) .filter-foot { flex-wrap: wrap; row-gap: 8px; }
.filter-panel:not(.is-sheet) .filter-foot-hint { flex-basis: 100%; }
.filter-panel:not(.is-sheet) .filter-foot-all, .filter-panel:not(.is-sheet) .filter-foot .primary-btn { flex: 1 1 0; }
.filter-panel:not(.is-sheet) { scroll-padding-top: 6px; }
.filter-foot-hint { margin: 0; color: var(--muted); font-size: 12px; font-style: italic; }
.filter-scrim { position: fixed; inset: 0; z-index: 1190; background: rgba(16, 22, 28, 0.5); }

@media (max-width: 1023px) {
  /* The Customize row stays in view while the stacked sidebar scrolls. */
  .filter-row {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -6px -22px 12px;
    padding: 0 22px;
    background: var(--panel);
  }
  html.sheet-open, html.sheet-open body { overflow: hidden; }
  .filter-panel.is-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    padding: 0 18px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .filter-panel.is-sheet .filter-handle {
    display: flex;
    justify-content: center;
    flex: none;
    padding: 8px 0 6px;
    cursor: grab;
    touch-action: none;
  }
  .filter-panel.is-sheet .filter-handle span { width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
  .filter-panel.is-sheet .filter-foot-hint { display: none; }
  .filter-panel.is-sheet .filter-help { display: block; margin: 0; font-size: 12px; }
  /* The sheet shows only "Saved on this device only."; the first sentence
     stays in the dialog's description. */
  .filter-panel.is-sheet .filter-help-what { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filter-panel.is-sheet h2 { font-size: 17px; }
  /* The list scrolls, so it clips: 6px of room on each side (margin pulled
     back, so nothing moves) and scroll-padding at both ends keep the
     2px + 2px focus ring visible (4px on top for the first row). The top
     rule is drawn at the old width. */
  .filter-panel.is-sheet .filter-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding: 6px 0;
    margin: 0 -6px;
    padding: 4px 6px 0;
    border-top: 0;
    background: linear-gradient(var(--line), var(--line)) 6px 0 / calc(100% - 12px) 1px no-repeat;
  }
  .filter-panel.is-sheet .filter-foot { flex: none; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .filter-panel.is-sheet .filter-foot-all { flex: 1 1 0; }
  .filter-panel.is-sheet .filter-foot .primary-btn { flex: 1 1 0; }
}

/* "N hidden" on a collapsed category row: shown before the headline figure,
   but after it in the DOM so the figure is read first. */
.metric summary.has-hidden .filter-hint { order: 1; }
.metric summary.has-hidden .base { order: 2; }
.metric summary.has-hidden .caret { order: 3; }
/* Expanded, the in-list "hidden by you" note says it; the hint (and its
   comma) leave the row and its accessible name. */
.metric[open] > summary .filter-hint { display: none; }
/* The row's name comes from its text: "Housing $329,300, 7 hidden". The comma
   is generated content, so it is read but not drawn, and copying the figure
   does not pick it up. */
.metric:not([open]) > summary.has-hidden > .base::after { content: ","; font-size: 0; }

.filter-hint {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Small phones: keep Customize, the count and "Show all" on one sticky line. */
@media (max-width: 400px) {
  .filter-row { column-gap: 6px; }
  .filter-btn { padding: 0 8px; }
  .filter-count { font-size: 12px; }
  .filter-dot { display: none; }
}

/* Small phones: the hint gets its own line under the category name, so the
   headline figure keeps its full width. */
@media (max-width: 400px) {
  .metric summary.has-hidden { flex-wrap: wrap; row-gap: 0; }
  .metric summary.has-hidden .filter-hint { order: 4; flex-basis: 100%; padding-left: 28px; }
}