/* ============================================================================
   Demographic Atlas
   Visual hierarchy, in order: map > active variable > legend > selection > controls.
   Controls stay compact and quiet so the map keeps the space.

   Light is the default and the primary design target. The map background is
   deliberately a cool mid-tone rather than white: the choropleth ramp runs from
   white to near-black, so a white basemap would swallow every low value.
   ========================================================================== */

:root {
  --bg:            #eef1f5;
  --bg-panel:      #ffffff;
  --bg-raised:     #f7f9fb;
  --bg-input:      #ffffff;
  --bg-hover:      #eef2f7;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --text:          #0f172a;
  --text-dim:      #475569;
  --text-faint:    #7c8794;
  --accent:        #3366cc;
  --accent-soft:   #eaf0fb;
  --danger:        #dc2626;

  /* Basemap sits between the ends of the ramp so both extremes read. */
  --map-bg:        #dbe2ea;
  --map-land:      #eef2f6;
  --map-stroke:        rgba(15, 23, 42, 0.28);
  --map-stroke-soft:   rgba(15, 23, 42, 0.13);
  --map-stroke-strong: rgba(15, 23, 42, 0.55);
  --map-nodata:        #c9d3df;
  --map-nodata-hatch:  rgba(15, 23, 42, 0.18);
  --map-label:      rgba(15, 23, 42, 0.94);
  --map-label-halo: rgba(255, 255, 255, 0.92);
  /* Selection, hover and the legend spotlight are the only places the map is
     allowed colour. The ramp is grey, so dimming alone cannot mark anything
     out: a faded grey area is the same as a low-value one. These outline it
     instead, which reads whatever the ramp is doing. */
  --map-selection:  #1d4ed8;
  --map-hover:      rgba(29, 78, 216, 0.55);
  --map-spotlight:  #b91c1c;
  --ramp-lo: #ffffff;
  --ramp-hi: #16202e;

  --shadow:    0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .10);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .07);
  --radius:    8px;
  --radius-sm: 6px;
  --panel-w:   318px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:            #0e1116;
  --bg-panel:      #151a21;
  --bg-raised:     #1c222b;
  --bg-input:      #10151b;
  --bg-hover:      #232b36;
  --border:        #262f3b;
  --border-strong: #35404f;
  --text:          #e8edf4;
  --text-dim:      #97a3b4;
  --text-faint:    #6b7787;
  --accent:        #8ab4f8;
  --accent-soft:   #1a2537;
  --danger:        #ff6b6b;

  --map-bg:        #0b0e13;
  --map-land:      #1a2029;
  --map-stroke:        rgba(255, 255, 255, 0.16);
  --map-stroke-soft:   rgba(255, 255, 255, 0.09);
  --map-stroke-strong: rgba(255, 255, 255, 0.38);
  --map-nodata:        #232a34;
  --map-nodata-hatch:  rgba(255, 255, 255, 0.13);
  --map-label:      rgba(232, 237, 244, 0.92);
  --map-label-halo: rgba(6, 9, 13, 0.85);
  --map-selection:  #ffffff;
  --map-hover:      rgba(255, 255, 255, 0.75);
  --map-spotlight:  #fca5a5;
  --ramp-lo: #f2f4f7;
  --ramp-hi: #0f1319;

  --shadow:    0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

/* Author styles outrank the user-agent [hidden] rule, so any class that sets a
   display value silently defeats the attribute. This restores it. */
[hidden] { display: none !important; }

html, body {
  margin: 0; min-height: 100%; overflow-x: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; padding: 8px 14px;
  border-radius: var(--radius); text-decoration: none;
  transition: top .16s;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─────────────────────────────── layout ─────────────────────────────── */

.app {
  /* The panel overlays the map rather than occupying a grid column. Resizing
     the stage would reproject the map, so collapsing the panel used to shift
     the whole country sideways. Floating it means the map never moves. */
  position: relative;
  /* The map fills exactly one screen and the page continues below it. dvh
     rather than vh because a mobile address bar otherwise pushes the map
     taller than the screen it is meant to fill. */
  height: 100vh;
  height: 100dvh;
}

/* The panel keeps its own width rather than inheriting the grid column: a
   zero-width panel cannot slide itself off screen, and its overflowing
   contents show through as slivers. */
.panel {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: var(--panel-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
  z-index: 20;
  transition: transform .28s cubic-bezier(.32, .72, 0, 1),
              box-shadow .28s ease;
  will-change: transform;
}
.app.panel-hidden .panel {
  transform: translateX(-100%);
  box-shadow: none;
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 12px 10px 14px;
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  text-decoration: none; color: var(--text);
  border-radius: 7px; margin: -3px -5px; padding: 3px 5px;
  transition: background .15s, color .15s;
}
.brand:hover { background: var(--bg-hover); color: var(--accent); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The mark is the product's own map: contour bands of a density surface,
   in the same grayscale the data is drawn in. */
.brand-mark {
  width: 19px; height: 19px; border-radius: 5px; flex: none;
  overflow: hidden; position: relative;
  background: var(--map-bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.brand-mark::before,
.brand-mark::after {
  content: ''; position: absolute; border-radius: 50%;
}
.brand-mark::before {
  inset: 22% -18% -30% 8%;
  background: var(--text-dim);
  opacity: .5;
}
.brand-mark::after {
  left: 26%; top: 44%; width: 62%; height: 46%;
  background: var(--ramp-hi);
  border-radius: 50%;
}
.brand-text {
  font-family: var(--serif);
  font-weight: 400; font-size: 16px; letter-spacing: .005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  position: relative;
}
/* Slides between tabs rather than the underline jumping, which is what makes
   the panes feel like one surface instead of separate screens. */
.tab-indicator {
  position: absolute; bottom: -1px; left: 0; height: 2px;
  background: var(--accent); border-radius: 1px;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.tab {
  background: none; border: 0; cursor: pointer;
  padding: 9px 4px 8px; font-size: 12.5px; font-weight: 500;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); font-weight: 600; }

.panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.tabpane { display: none; }
.tabpane:not([hidden]) {
  display: block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s cubic-bezier(.4, 0, .2, 1);
}
.tabpane.is-active { opacity: 1; transform: none; }

.panel-foot {
  border-top: 1px solid var(--border);
  padding: 8px 12px; font-size: 10.8px; color: var(--text-faint);
  line-height: 1.45;
}
.source-line b { color: var(--text-dim); font-weight: 600; }

.panel-expand { flex: none; animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateX(-6px); } }

.stage {
  position: absolute; inset: 0;
  overflow: hidden; background: var(--map-bg);
}
/* The top bar starts where the panel ends. The opener lives inside the bar's
   flex flow rather than floating over it, so the two can never overlap however
   the panel is animated. */
.map-topbar {
  transition: left .28s cubic-bezier(.32, .72, 0, 1);
}
.app:not(.panel-hidden) .map-topbar { left: calc(var(--panel-w) + 14px); }

#map-canvas, #overlay-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
#overlay-canvas { pointer-events: none; }
#map-canvas { cursor: grab; }
#map-canvas.is-panning { cursor: grabbing; }
#map-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ─────────────────────────────── fields ─────────────────────────────── */

.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 4px; }
.field-label {
  display: block; font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); margin-bottom: 6px;
}
.hint { margin: 6px 0 0; font-size: 11.2px; color: var(--text-faint); line-height: 1.45; }

input[type="text"], input[type="search"], input[type="number"], select {
  width: 100%; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 9px; font-size: 13px; color: var(--text);
}
input:focus, select:focus { border-color: var(--accent); outline: none; }
select { cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 26px;
}

.segmented {
  display: flex; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px; gap: 2px;
}
.segmented button {
  flex: 1; background: none; border: 0; cursor: pointer;
  padding: 5px 2px; font-size: 11.5px; font-weight: 550;
  color: var(--text-dim); border-radius: 4px; white-space: nowrap;
}
.segmented button:hover { background: var(--bg-hover); color: var(--text); }
.segmented button[aria-checked="true"] { background: var(--accent); color: #fff; }
.segmented button:disabled { opacity: .38; cursor: not-allowed; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; flex: none;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.solid {
  background: var(--bg-panel); border-color: var(--border);
  box-shadow: var(--shadow); width: 30px; height: 30px;
}
.icon-btn.solid:hover { background: var(--bg-hover); }
.icon-btn.ghost { background: color-mix(in srgb, var(--bg-panel) 88%, transparent); backdrop-filter: blur(8px); border-color: var(--border); }
[data-theme="dark"] .icon-btn.ghost { background: rgba(0,0,0,.28); }

.btn {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 11px; cursor: pointer;
  font-size: 12.2px; font-weight: 550; color: var(--text);
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.tiny { padding: 3px 7px; font-size: 11px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.row { display: flex; gap: 7px; align-items: center; }
.row > * { min-width: 0; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ────────────────────────── variable picker ────────────────────────── */

.picker { position: relative; }
.picker-trigger {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  display: flex; align-items: center; gap: 9px;
}
.picker-trigger:hover { border-color: var(--border-strong); }
.picker-swatch { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.picker-name { font-weight: 600; font-size: 13px; line-height: 1.25; }
.picker-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.picker-caret { margin-left: auto; color: var(--text-faint); flex: none; }

.picker-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; max-height: min(60vh, 460px);
}
.picker-search { padding: 8px; border-bottom: 1px solid var(--border); }
.picker-list { overflow-y: auto; padding: 4px; }
.picker-group {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); padding: 9px 8px 4px;
  position: sticky; top: 0; background: var(--bg-panel);
}
.picker-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-sm);
  padding: 6px 8px; color: var(--text);
}
.picker-item:hover, .picker-item.is-cursor { background: var(--bg-hover); }
.picker-item[aria-selected="true"] { background: var(--accent-soft); }
.picker-item-name { font-size: 12.8px; font-weight: 550; }
.picker-item-name mark { background: none; color: var(--accent); font-weight: 700; }
.picker-item-desc {
  font-size: 11px; color: var(--text-faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-empty { padding: 18px 12px; text-align: center; color: var(--text-faint); font-size: 12px; }
.picker-star {
  float: right; background: none; border: 0; cursor: pointer;
  color: var(--text-faint); font-size: 12px; padding: 0 2px; line-height: 1;
}
.picker-star:hover, .picker-star.on { color: #fbbf24; }

/* ───────────────────────────── legend ───────────────────────────── */

/* Bottom-left belongs to the Alaska and Hawaii insets, so the legend and the
   zoom controls live on the right and step aside when the inspector opens. */
.legend {
  position: absolute; right: 14px; bottom: 56px; z-index: 12;
  transition: right .2s cubic-bezier(.4, 0, .2, 1);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px 11px;
  max-width: 300px; min-width: 208px;
}
.legend[hidden] { display: none; }
.legend-title {
  font-family: var(--serif);
  font-size: 14.5px; font-weight: 400; line-height: 1.25;
}
.legend-sub { font-size: 10.8px; color: var(--text-faint); margin-top: 2px; }
.legend-ramp { display: flex; margin-top: 9px; height: 11px; border-radius: 2px; overflow: hidden; }
.legend-ramp i { flex: 1; display: block; }
.legend-scale {
  display: flex; justify-content: space-between;
  font-size: 10.2px; color: var(--text-dim); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.legend-classes { margin-top: 8px; display: grid; gap: 3px; }
.legend-class {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11.4px; padding: 1px 3px; border-radius: 3px;
  background: none; border: 0; width: 100%; text-align: left; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.legend-class:hover { background: var(--bg-hover); }
.legend-class.is-muted { opacity: .38; }
.legend-chip { width: 13px; height: 13px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.25); }
.legend-count { margin-left: auto; color: var(--text-faint); font-size: 10.2px; }
.legend-note {
  margin-top: 8px; font-size: 10.4px; color: var(--text-faint);
  line-height: 1.4; border-top: 1px solid var(--border); padding-top: 7px;
}
.legend-note strong { color: var(--text-dim); font-weight: 600; }

.legend-bivariate { margin-top: 9px; display: flex; gap: 8px; align-items: flex-end; }
.bv-grid { display: grid; gap: 1.5px; }
.bv-cell { width: 19px; height: 19px; border-radius: 2px; }
.bv-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9.6px; color: var(--text-dim); }
.bv-axis-x { font-size: 9.6px; color: var(--text-dim); margin-top: 3px; }

/* ───────────────────────────── tooltip ───────────────────────────── */

.tooltip {
  position: absolute; z-index: 40; pointer-events: none;
  background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 9px 11px; min-width: 178px; max-width: 268px;
}
.tt-name { font-size: 12.6px; font-weight: 650; line-height: 1.25; }
.tt-parent { font-size: 10.6px; color: var(--text-faint); margin-top: 1px; }

/* The official tract identity, under its readable label. Set small and dim:
   it is what you cite, not what you read. */
.tt-official,
.insp-official {
  font-size: 10.5px;
  color: var(--text-faint, var(--text-dim));
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  letter-spacing: .01em;
}
.insp-official { margin-bottom: 2px; }

.tt-value {
  font-size: 21px; font-weight: 660; margin-top: 7px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tt-var { font-size: 10.8px; color: var(--text-dim); margin-top: 3px; }
.tt-moe { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.tt-compare { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; display: grid; gap: 3px; }
.tt-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11.2px; }
.tt-row span:first-child { color: var(--text-faint); }
.tt-row span:last-child { font-variant-numeric: tabular-nums; }
.tt-pct {
  margin-top: 7px; font-size: 10.8px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.tt-pct-bar { flex: 1; height: 3px; background: var(--bg-hover); border-radius: 2px; position: relative; }
.tt-pct-bar i { position: absolute; top: -2px; width: 2px; height: 7px; background: var(--accent); border-radius: 1px; }
.tt-hint { margin-top: 7px; font-size: 10px; color: var(--text-faint); }

/* ─────────────────────────── map furniture ─────────────────────────── */

.map-topbar {
  position: absolute; top: 12px; left: 14px; right: 14px; z-index: 15;
  display: flex; gap: 10px; align-items: flex-start; pointer-events: none;
}
.map-topbar > * { pointer-events: auto; }
.map-topbar-right { margin-left: auto; display: flex; gap: 7px; align-items: center; }

.mode-badge {
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 100px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 7px;
}
.mode-badge button { background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; padding: 0; font-size: 13px; line-height: 1; }
.mode-badge button:hover { opacity: 1; }

.search-box { position: relative; width: min(330px, 46vw); }
.search-input {
  width: 100%; background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px 11px 8px 32px; font-size: 13px;
}
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7;
}
.search-results {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto; padding: 4px;
}
.search-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 7px 8px;
  border-radius: var(--radius-sm); color: var(--text);
}
.search-item:hover, .search-item.is-cursor { background: var(--bg-hover); }
.search-kind {
  font-size: 9.4px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); background: var(--bg-raised);
  padding: 2px 5px; border-radius: 3px; flex: none; min-width: 46px; text-align: center;
}
.search-name { font-size: 12.8px; font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-sub { font-size: 10.6px; color: var(--text-faint); }
.search-note { padding: 7px 10px; font-size: 10.6px; color: var(--text-faint); border-top: 1px solid var(--border); }

.map-controls {
  position: absolute; right: 14px; bottom: 14px; z-index: 12;
  display: flex; flex-direction: row; gap: 6px;
  transition: right .2s cubic-bezier(.4, 0, .2, 1);
}

.app.inspector-open .legend,
.app.inspector-open .map-controls { right: 334px; }

.status {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 14; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 14px; font-size: 11.5px; color: var(--text-dim);
  box-shadow: var(--shadow); opacity: 0; transition: opacity .18s; pointer-events: none;
}
.status.is-on { opacity: 1; }

.swipe-handle {
  position: absolute; top: 0; bottom: 0; width: 22px; margin-left: -11px;
  z-index: 16; cursor: col-resize; display: flex; align-items: center; justify-content: center;
}
.swipe-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.swipe-grip {
  width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); position: relative;
}
.swipe-grip::before, .swipe-grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  margin-top: -4px;
}
.swipe-grip::before { left: 5px; border-right: 5px solid #333; }
.swipe-grip::after  { right: 5px; border-left: 5px solid #333; }

/* ─────────────────────────── inspector ─────────────────────────── */

.inspector {
  position: absolute; right: 14px; top: 58px; bottom: 14px; width: 306px; z-index: 18;
  background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.inspector[hidden] { display: none; }
.insp-head { padding: 12px 13px 10px; border-bottom: 1px solid var(--border); }
.insp-title {
  font-family: var(--serif);
  font-size: 17.5px; font-weight: 400; line-height: 1.18; letter-spacing: 0;
}
.insp-sub { font-size: 11.2px; color: var(--text-faint); margin-top: 3px; }
.insp-actions { display: flex; gap: 6px; margin-top: 9px; }
.insp-body { flex: 1; overflow-y: auto; padding: 11px 13px 14px; }
.insp-hero { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.insp-hero-label { font-size: 11px; color: var(--text-dim); }
.insp-hero-value {
  font-size: 27px; font-weight: 660; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 3px;
}
.insp-hero-moe { font-size: 10.6px; color: var(--text-faint); margin-top: 3px; }
.insp-rank { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11.4px; color: var(--text-dim); }
.insp-rank-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-hover); position: relative; }
.insp-rank-bar i { position: absolute; top: -3px; width: 3px; height: 10px; background: var(--accent); border-radius: 2px; }
.insp-section { margin-top: 14px; }
.insp-section h4 {
  margin: 0 0 7px; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.insp-stat { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.2px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.insp-stat:last-child { border-bottom: 0; }
.insp-stat span:first-child { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-stat span:last-child { font-variant-numeric: tabular-nums; font-weight: 550; flex: none; }
.insp-compare { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; font-size: 11.8px; align-items: center; }
.insp-compare .lbl { color: var(--text-dim); }
.insp-compare .val { font-variant-numeric: tabular-nums; text-align: right; }
.insp-compare .delta { font-size: 10.6px; text-align: right; font-variant-numeric: tabular-nums; }
.delta.up { color: #4ade80; }
.delta.down { color: #f87171; }
.insp-src { margin-top: 14px; font-size: 10.2px; color: var(--text-faint); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 9px; }

/* ─────────────────────────── layers & filters ─────────────────────────── */

.card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 10px; margin-bottom: 8px;
}
.card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.card-title { font-size: 12.2px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.swatch-btn {
  width: 100%; height: 17px; border-radius: 3px; border: 1px solid var(--border);
  cursor: pointer; padding: 0; overflow: hidden; display: flex;
}
.swatch-btn i { flex: 1; }
.swatch-btn[aria-checked="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }

.chipset { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 100px; padding: 3px 9px; font-size: 11.4px; cursor: pointer; color: var(--text-dim);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.filter-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; margin-bottom: 7px; }
.filter-cond { font-size: 11.6px; color: var(--text-dim); margin-bottom: 4px; }
.filter-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filter-count {
  font-size: 11.6px; color: var(--text-dim); padding: 7px 9px;
  background: var(--accent-soft); border-radius: var(--radius-sm); margin-bottom: 9px;
}
.filter-count b { color: var(--text); }

.range-wrap { position: relative; height: 26px; }
.dual-range { position: relative; height: 4px; background: var(--bg-hover); border-radius: 2px; margin: 11px 0; }
.dual-range .fill { position: absolute; height: 100%; background: var(--accent); border-radius: 2px; }
.dual-range input[type="range"] {
  position: absolute; top: -9px; left: 0; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none; height: 22px;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: grab;
}
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); cursor: grab;
}

.match-list { display: grid; gap: 4px; margin-top: 9px; }
.match-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: var(--radius-sm); background: var(--bg-input); cursor: pointer;
  border: 1px solid transparent; width: 100%; text-align: left; color: var(--text);
}
.match-item:hover { border-color: var(--border-strong); }
.match-rank { font-size: 10.4px; color: var(--text-faint); width: 17px; flex: none; font-variant-numeric: tabular-nums; }
.match-name { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-score { font-size: 10.6px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 860px) {
  /* The panel becomes a fixed bottom sheet, so it no longer occupies a grid
     cell — the stage must keep the full width in both collapsed and open
     states, or the map ends up zero pixels wide. */
  /* The sheet spans the viewport and sits at the bottom; the map is already
     full-bleed behind it, so nothing needs to be re-laid out. */
  .panel {
    /* Full width as a bottom sheet, rather than the desktop side panel. */
    position: absolute; inset: auto 0 0 0; width: auto; height: min(72vh, 560px);
    border-right: 0; border-top: 1px solid var(--border-strong);
    border-radius: 14px 14px 0 0; transform: translateY(0);
    box-shadow: 0 -8px 30px rgba(0,0,0,.4);
  }
  .app.panel-hidden .panel { transform: translateY(calc(100% - 46px)); }
  .app .map-topbar,
  .app:not(.panel-hidden) .map-topbar { left: 14px; }
  .panel-body { padding-bottom: 24px; }
  .panel-head { cursor: grab; }
  .panel-head::before {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 3px; border-radius: 2px; background: var(--border-strong);
  }
  .panel-expand { display: none !important; }
  .inspector {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    max-height: 58vh; border-radius: 14px 14px 0 0; z-index: 30;
  }
  .legend { bottom: 58px; left: 10px; max-width: 62vw; }
  .map-controls { bottom: 58px; right: 10px; }
  .search-box { width: 100%; }
  .status { bottom: 62px; }
  .icon-btn.solid { width: 36px; height: 36px; }
  .btn { padding: 8px 12px; }
  .segmented button { padding: 8px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ─────────────────────── category browser ─────────────────────── */

.browser-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; max-height: min(66vh, 520px);
}
.browser-body { overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.browser-group {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); padding: 10px 8px 5px;
}

/* Letter index for long alphabetical lists. Sticks to the top of the list so
   the way back to another letter never scrolls out of reach. */
.alpha-index {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 8px 8px 6px; position: sticky; top: 0; z-index: 2;
  background: var(--bg-raised); border-bottom: 1px solid var(--border);
}
.alpha-key {
  min-width: 20px; padding: 2px 4px; border: 0; border-radius: 5px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 11.5px; font-weight: 640; cursor: pointer;
  transition: background .12s, color .12s;
}
.alpha-key:hover { background: var(--bg-sunken); color: var(--text); }
.alpha-head {
  position: sticky; top: 34px; z-index: 1;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  color: var(--text-faint); background: var(--bg-raised);
  padding: 6px 8px 4px; border-bottom: 1px solid var(--border);
}

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 7px 9px; border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.crumb {
  background: none; border: 0; cursor: pointer; padding: 2px 5px;
  font-size: 11.4px; color: var(--accent); border-radius: 4px;
}
.crumb:hover { background: var(--bg-hover); }
.crumb.is-current { color: var(--text); font-weight: 620; cursor: default; }
.crumb.is-current:hover { background: none; }
.crumb-sep { color: var(--text-faint); font-size: 10.5px; }

.category-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 2px 4px 6px;
}
.category-card {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; text-align: left;
}
.category-card:hover { border-color: var(--accent); background: var(--bg-hover); }
.category-name { font-size: 12.6px; font-weight: 600; color: var(--text); line-height: 1.2; }
.category-count { font-size: 10.4px; color: var(--text-faint); }

.browse-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 8px;
  border-radius: var(--radius-sm); color: var(--text); text-align: left;
}
.browse-row:hover { background: var(--bg-hover); }
.browse-label { flex: 1; font-size: 12.8px; font-weight: 520; }
.browse-count {
  font-size: 10.2px; color: var(--text-faint); background: var(--bg-raised);
  padding: 1px 6px; border-radius: 100px; font-variant-numeric: tabular-nums;
}
.browse-chevron { color: var(--text-faint); font-size: 13px; }

.stat-row {
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--radius-sm); padding-right: 6px;
}
.stat-row:hover { background: var(--bg-hover); }
.stat-row.is-selected { background: var(--accent-soft); }
.stat-main {
  flex: 1; min-width: 0; background: none; border: 0; cursor: pointer;
  padding: 7px 8px; text-align: left; color: var(--text);
}
.stat-name { display: block; font-size: 12.8px; font-weight: 550; line-height: 1.25; }
.stat-detail {
  display: block; font-size: 10.6px; color: var(--text-faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.unit-toggle {
  display: flex; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden;
}
.unit-btn {
  background: none; border: 0; cursor: pointer; padding: 3px 7px;
  font-size: 11px; font-weight: 650; color: var(--text-faint); line-height: 1.3;
}
.unit-btn:hover { background: var(--bg-hover); color: var(--text); }
.unit-btn.is-on { background: var(--accent); color: #fff; }

@media (max-width: 860px) {
  .browser-pop { max-height: 62vh; }
  .category-grid { grid-template-columns: 1fr; }
  .browse-row, .stat-main { padding-top: 11px; padding-bottom: 11px; }
  .unit-btn { padding: 6px 10px; }
}

.stat-warning {
  display: block; font-size: 10.4px; margin-top: 2px;
  color: #b45309;
}
[data-theme="dark"] .stat-warning { color: #fbbf24; }

/* Provenance: present on every statistic, never shouting. */
.legend-source {
  font-size: 10px; color: var(--text-faint); margin-top: 3px;
  letter-spacing: .02em;
}

/* ─────────────── selected statistics: additive, no mode ─────────────── */

.layer-list { display: grid; gap: 5px; margin-bottom: 8px; }

.layer-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  grid-template-areas: "main dir weight remove" "slider slider slider slider";
  align-items: center; gap: 6px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 8px 6px;
}
.layer-main { grid-area: main; min-width: 0; }
.layer-name {
  font-size: 12.6px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.layer-meta { font-size: 10px; color: var(--text-faint); margin-top: 1px; }

.dir-btn {
  grid-area: dir;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 100px; padding: 3px 8px; cursor: pointer;
  font-size: 10.6px; font-weight: 600; color: var(--text-dim); white-space: nowrap;
}
.dir-btn:hover { border-color: var(--accent); color: var(--text); }
.dir-btn.is-low { color: #f59e0b; border-color: rgba(245, 158, 11, .45); }

.layer-weight {
  grid-area: weight; font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; min-width: 30px; text-align: right;
}
.layer-remove { grid-area: remove; width: 22px; height: 22px; font-size: 15px; }
.layer-remove:disabled { opacity: .25; cursor: not-allowed; }

.weight-slider {
  grid-area: slider; width: 100%; margin: 4px 0 0; height: 3px;
  -webkit-appearance: none; appearance: none;
  background: var(--bg-hover); border-radius: 2px; cursor: pointer;
}
.weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); cursor: grab;
}
.weight-slider::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; border: 0;
  background: var(--accent); cursor: grab;
}

.add-statistic { width: 100%; border-style: dashed; color: var(--text-dim); }
.add-statistic:hover { color: var(--text); border-color: var(--accent); }

.tray-note {
  margin-top: 8px; font-size: 10.8px; color: var(--text-faint);
  line-height: 1.45; padding: 7px 8px;
  background: var(--bg-raised); border-radius: var(--radius-sm);
}
.tray-note strong { color: var(--text-dim); }

.composite-advanced { margin-top: 9px; }
.composite-advanced summary {
  cursor: pointer; font-size: 11.2px; color: var(--text-dim);
  padding: 4px 0; list-style: none;
}
.composite-advanced summary::-webkit-details-marker { display: none; }
.composite-advanced summary::before { content: '▸ '; color: var(--text-faint); }
.composite-advanced[open] summary::before { content: '▾ '; }
.composite-advanced summary:hover { color: var(--text); }
.composite-advanced .field { margin: 8px 0 0; }

.stat-tick { float: right; color: var(--accent); font-size: 12px; font-weight: 700; }

/* composite breakdown, in the hover card and the panel */
.tt-breakdown {
  margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px;
  display: grid; gap: 3px;
}
.tt-part {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  font-size: 11px; align-items: baseline;
}
.tt-part-name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-part-value { font-variant-numeric: tabular-nums; }
.tt-part-pct { color: var(--text-faint); font-size: 10.2px; min-width: 46px; text-align: right; }

.insp-breakdown { width: 100%; border-collapse: collapse; font-size: 11.6px; }
.insp-breakdown th {
  text-align: left; font-size: 9.6px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); font-weight: 700;
  padding: 0 0 4px; border-bottom: 1px solid var(--border);
}
.insp-breakdown th:not(:first-child), .insp-breakdown td:not(:first-child) { text-align: right; }
.insp-breakdown td {
  padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.insp-breakdown td:first-child { color: var(--text-dim); }
.bd-dir { color: var(--text-faint); }
.insp-bd-note { margin: 7px 0 0; font-size: 10.4px; color: var(--text-faint); line-height: 1.45; }

/* No-data hatch: must never be mistaken for a value on a grayscale ramp. */



/* ───────────────── statistic browser: a modal, not a slot ───────────────── */

.browser-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 20px;
  animation: backdrop-in .14s ease-out;
}
[data-theme="dark"] .browser-backdrop { background: rgba(6, 9, 13, .62); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.browser-modal {
  width: min(720px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  overflow: hidden;
  animation: modal-in .16s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.browser-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.browser-title { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }

.browser-modal .picker-search { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.browser-modal .search-input,
.browser-modal input[type="search"] { font-size: 14px; padding: 9px 12px; }
.browser-modal .crumbs { padding: 9px 16px; }
.browser-modal .browser-body { padding: 6px 10px 12px; }
.browser-modal .category-grid { grid-template-columns: repeat(3, 1fr); padding: 2px 6px 8px; }
.browser-modal .browser-group { padding: 11px 8px 5px; }

/* a roomier row now there is space for it */
.browser-modal .stat-row { padding-right: 8px; }
.browser-modal .stat-main { padding: 9px 10px; }
.browser-modal .stat-name { font-size: 13.4px; }
.browser-modal .browse-row { padding: 10px; }
.browser-modal .browse-label { font-size: 13.4px; }

@media (max-width: 860px) {
  .browser-backdrop { padding: 0; align-items: flex-end; }
  .browser-modal {
    width: 100%; max-height: 88vh;
    border-radius: 14px 14px 0 0; border-bottom: 0;
  }
  .browser-modal .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Only the mobile ramp uses these; the desktop legend labels each class. */
.legend-scale-ends { display: none; }

/* Notes sit behind a disclosure so the legend stays a legend. */
.legend-notes { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.legend-notes summary {
  cursor: pointer; font-size: 10.4px; color: var(--text-faint);
  list-style: none; padding: 1px 0;
}
.legend-notes summary::-webkit-details-marker { display: none; }
.legend-notes summary::before { content: '▸ '; }
.legend-notes[open] summary::before { content: '▾ '; }
.legend-notes summary:hover { color: var(--text-dim); }
.legend-notes .legend-note { margin-top: 5px; border-top: 0; padding-top: 0; }

@media (max-width: 860px) {
  /* On a phone the legend is a strip along the bottom, not a panel over the
     map. Classes read left-to-right as a ramp with the ends labelled. */
  .legend {
    left: 10px; right: 10px; bottom: 56px; max-width: none;
    padding: 8px 10px 9px;
  }
  .legend-classes {
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: 7px;
  }
  .legend-class {
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    font-size: 0;
  }
  .legend-class:hover { background: none; }
  .legend-chip {
    width: auto; height: 12px; border-radius: 0; border-left: 0; border-right: 0;
  }
  .legend-class:first-child .legend-chip { border-radius: 3px 0 0 3px; }
  .legend-class:last-child .legend-chip { border-radius: 0 3px 3px 0; }
  .legend-class span:not(.legend-chip) { display: none; }
  .legend-scale-ends {
    display: flex; justify-content: space-between; margin-top: 4px;
    font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  }
  /* The legend now spans the bottom, so the zoom controls move to the side
     rather than fighting it for the same corner. */
  .map-controls {
    top: 50%; bottom: auto; right: 10px;
    transform: translateY(-50%);
    flex-direction: column;
  }
  .status { bottom: 200px; }
}

/* The age builder folds away; it is powerful but rarely the first thing wanted. */

/* ── filter panel ─────────────────────────────────────────────────────────
   A condition is a small sentence: which statistic, which comparison, which
   threshold. The statistic is a button because it can be any of the 1,105,
   and the typical values below it exist because an empty number box asks the
   reader to already know the scale of what they are filtering. */

.filter-var {
  flex: 1;
  min-width: 0;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--border-strong);
  padding: 1px 0 2px;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.filter-var:hover { color: var(--accent); border-bottom-color: var(--accent); }

.filter-spread {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.filter-spread-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-right: 2px;
}
.filter-spread button {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.filter-spread button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.filter-results {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.filter-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .01em;
}
.filter-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}
.filter-rank li + li { border-top: 1px solid var(--border); }
.filter-rank button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  padding: 6px 10px;
  cursor: pointer;
}
.filter-rank button:hover { background: var(--accent-soft); color: var(--accent); }
.rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 640;
  color: var(--text-faint);
}
.filter-note {
  margin: 0;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}
.filter-count .dim { color: var(--text-faint); font-weight: 400; }

/* The panel note while tract or ZIP shards are still arriving. A quiet pulse:
   enough to say the map is not finished, not enough to pull the eye off it. */
.is-loading {
  color: var(--accent);
  animation: note-pulse 1.4s ease-in-out infinite;
}
@keyframes note-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .is-loading { animation: none; }
}

/* ───────────────────────── about, below the map ───────────────────────── */

/* The map fills the first screen; this is what a reader finds under it. It is
   styled to read like the rest of the site rather than like the app chrome,
   because that is what it is: a page about the map, not part of its controls. */
/* Shut unless asked for. The panel's "About this map" link is the only way in
   and the only way it should be: the map page is the map. :target rather than a
   class because the reveal then costs no JavaScript and cannot break with it. */
.map-about {
  display: none;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  color: var(--text);
}
.map-about:target { display: block; }
.about-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 34px 24px 48px;
  position: relative;
}
.about-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
  color: var(--text-faint);
  text-decoration: none;
  border-radius: var(--radius);
}
.about-close:hover { background: var(--bg-hover); color: var(--text); }
.map-about h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.24;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.about-lede {
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-dim);
  margin: 0 0 8px;
  max-width: 68ch;
}
.about-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4px 38px;
  margin-top: 12px;
}
.map-about h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  margin: 26px 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.map-about p {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--text-dim);
  margin: 0 0 9px;
}
.map-about a { color: var(--accent); text-decoration: none; }
.map-about a:hover { text-decoration: underline; }
.about-links {
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.9;
}
.about-foot {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-faint);
}
@media (max-width: 640px) {
  .about-inner { padding: 30px 18px 40px; }
  .map-about h1 { font-size: 23px; }
}
.about-jump {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
}
.about-jump:hover { text-decoration: underline; }