/*!
 * minnesota.css — Minnesota State Profile (Eviction Research Network).
 *
 * Brand spec: evictionresearch/library/BRAND.md
 * Colors:    accent #F9322B · navy #19222C · medium-blue #223754 · light-blue #e8eef4
 * Font:      Inter — single canonical ERN brand family.
 *            Display headlines: Inter 200 (Extra Light, hairline)
 *            Body / nav / pills: Inter 400/500/600/700
 *
 * Design lineage: v5b prototype (sticky logo header, white background,
 * red pill primaries, navy hairline rules, restrained sans typography,
 * interactive Fig 1 + Fig 2 charts, MapLibre-driven county map, 87-county
 * searchable table). First production deployment 2026-04-29.
 */
:root {
  --paper:      #ffffff;
  --tint:       rgba(232, 238, 244, 0.45);
  --navy:       #19222C;
  --navy-soft:  #223754;
  --steel:      #8BA3BE;
  --accent:     #F9322B;
  --accent-deep:#D6231C;
  --rule:       rgba(25, 34, 44, 0.18);
  --rule-fine:  rgba(25, 34, 44, 0.10);
  --muted:      #6c7a89;
  --sans:       "Inter", -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter:     24px;
  --transition: 220ms ease;
  --header-h:   84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 16px;
  line-height: 1.6; font-weight: 400;
  color: var(--navy); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
a {
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
a:hover, a:focus { color: var(--accent); border-color: var(--accent); outline: none; }
a.unstyled { border: none; padding: 0; }
a.unstyled:hover { color: var(--accent); border: none; }

.page { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .page { padding: 0 20px; } }

/* ─── Sticky header ─── */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
header.site.scrolled {
  border-bottom-color: var(--rule-fine);
  box-shadow: 0 4px 14px rgba(25, 34, 44, 0.04);
}
header.site .inner {
  max-width: 1320px; margin: 0 auto;
  padding: 18px 40px;
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: var(--gutter);
  min-height: var(--header-h);
}
@media (max-width: 720px) { header.site .inner { padding: 14px 20px; } }
header.site .logo { border: none; display: inline-flex; align-items: center; }
header.site .logo img { display: block; height: 44px; width: auto; }
@media (max-width: 720px) { header.site .logo img { height: 34px; } }
header.site nav {
  justify-self: end; font-size: 14px;
  display: flex; gap: 28px; font-weight: 500;
}
header.site nav a { border: none; padding: 0; }
header.site nav a:hover { border-bottom: 1px solid var(--accent); }
@media (max-width: 900px) { header.site nav { display: none; } }

/* Nav dropdowns (Maps & Profiles, Resources) — hover/focus reveals the panel. */
header.site nav .dropdown { position: relative; }
header.site nav .dropdown > .dropdown-toggle {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
header.site nav .dropdown > .dropdown-toggle .caret {
  font-size: 9px; line-height: 1;
  transition: transform 180ms ease;
}
header.site nav .dropdown:hover > .dropdown-toggle .caret,
header.site nav .dropdown:focus-within > .dropdown-toggle .caret {
  transform: rotate(180deg);
}
header.site nav .dropdown-panel {
  position: absolute;
  top: 100%; left: -12px;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--rule-fine);
  box-shadow: 0 10px 28px rgba(25, 34, 44, 0.08);
  padding: 8px 0;
  z-index: 60;
  /* Hidden by default; revealed via hover/focus-within. Using
     opacity+visibility (rather than display:none) lets the panel be
     keyboard-focusable for accessibility. */
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
header.site nav .dropdown:hover > .dropdown-panel,
header.site nav .dropdown:focus-within > .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
header.site nav .dropdown-panel a {
  display: block;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--navy);
  white-space: nowrap;
  border: none;
}
header.site nav .dropdown-panel a:hover {
  background: var(--tint);
  color: var(--accent);
  border: none;
}
header.site nav .dropdown-panel a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* ─── Hero ─── */
.hero { padding: 32px 0 96px; position: relative; }
.hero::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 75%; height: 1px; background: var(--navy);
}
.hero .row {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 88px; align-items: center; padding-top: 80px;
}
@media (max-width: 900px) {
  .hero .row { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; }
}
/* State outline — rendered at runtime from US Census TIGER/Line data
   via D3 + us-atlas. The viewBox is set on the SVG by JS based on
   the projected bounding box, so the figure adapts to any state. */
.hero .state-outline {
  width: 100%; max-width: 460px;
  justify-self: center; margin: 0;
  display: block;
  /* Reserve a vertical slot while D3 + us-atlas load so the page
     doesn't reflow. fitSize will produce a state-specific shape; the
     min-height keeps the slot even before the JS runs. */
  min-height: 360px;
}
.hero .state-outline svg {
  width: 100%; height: auto; display: block; overflow: visible;
}
.hero .state-outline .state-shape {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 600ms ease;
}
.hero .state-outline:hover .state-shape {
  stroke: var(--accent);
}
.hero .state-outline .state-mark {
  fill: var(--accent);
}
.hero .text { display: flex; flex-direction: column; gap: 22px; }
.hero .kicker {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.hero h1 {
  font-weight: 200;
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
  line-height: 1.04; letter-spacing: -0.025em;
  margin: 0; color: var(--navy); max-width: 14ch;
}
.hero h1 em { font-style: normal; font-weight: 600; }
.hero .lede {
  font-size: 17px; line-height: 1.65;
  max-width: 56ch; color: var(--navy); margin: 0;
}
.hero .byline {
  margin-top: 4px; padding-top: 14px;
  border-top: 1px solid var(--rule-fine);
  font-size: 13px; color: var(--muted);
  display: flex; gap: 24px; flex-wrap: wrap;
}
.hero .byline strong { color: var(--navy); font-weight: 600; }

/* ─── Buttons ─── */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 24px; border-radius: 4px;
  text-decoration: none;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 12px;
  border: 1.5px solid transparent;
}
.btn::after { content: "→"; font-size: 15px; transition: transform var(--transition); letter-spacing: 0; }
.btn:hover::after { transform: translateX(4px); }
.btn-red { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-red:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Stats row ─── */
.stats {
  padding: 48px 0;
  border-top: 1px solid var(--rule-fine);
  border-bottom: 1px solid var(--rule-fine);
}
.stats .row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
@media (max-width: 720px) { .stats .row { grid-template-columns: 1fr 1fr; gap: 32px; } }
.stat { display: flex; flex-direction: column; gap: 12px; }
.stat .num {
  font-weight: 200;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -0.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.stat .num em { font-style: normal; font-weight: 600; color: var(--accent); }
.stat .num .small { font-size: 0.5em; font-weight: 500; opacity: 0.85; }
.stat .num .delta { color: var(--accent); margin-right: 4px; font-weight: 400; }
.stat .label { font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 22ch; }

/* ─── Section ─── */
section.section { padding: 96px 0; }
section.section + section.section { border-top: 1px solid var(--rule-fine); }
section.section.tinted { background: var(--tint); }
section.section.tinted.inset {
  margin: 0 -40px; padding: 96px 80px;
}
@media (max-width: 1100px) {
  section.section.tinted.inset { padding: 96px 64px; }
}
@media (max-width: 720px) {
  section.section.tinted.inset { margin: 0 -20px; padding: 72px 32px; }
}

.two-col {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 72px; align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

h2.section-title {
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.022em;
  margin: 0 0 24px;
  color: var(--navy); max-width: 20ch;
}
h2.section-title em { font-style: normal; font-weight: 600; }
.lead-paragraph {
  font-weight: 400;
  font-size: 22px; line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 32ch; color: var(--navy);
  margin: 0 0 24px;
}
.two-col .body p {
  font-size: 16px; line-height: 1.7;
  max-width: 56ch; margin: 0 0 16px; color: var(--navy);
}
.two-col .body p strong { font-weight: 600; }

/* ─── Bare-on-page chart figure ─── */
.figure { margin-top: 56px; }
.figure svg { width: 100%; height: auto; display: block; }
.figure .caption {
  max-width: 100%;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 70px 1fr 220px;
  gap: var(--gutter);
  font-size: 12.5px; color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .figure .caption { grid-template-columns: 70px 1fr; }
  .figure .caption .src { grid-column: 2; margin-top: 4px; }
}
.figure .caption .num {
  font-weight: 600; color: var(--navy);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 11px;
}
.figure .caption .desc { font-style: italic; color: var(--navy); font-size: 13.5px; }
.figure .caption .src {
  color: var(--muted); text-align: right;
  letter-spacing: 0.02em; text-transform: lowercase;
  font-size: 11px;
}
@media (max-width: 720px) { .figure .caption .src { text-align: left; } }

.charts-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; margin-top: 56px;
}
@media (max-width: 900px) { .charts-pair { grid-template-columns: 1fr; gap: 56px; } }

.figure h3 {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px; color: var(--navy);
}
.figure .desc-lead {
  font-size: 13.5px; line-height: 1.55;
  color: var(--muted); margin: 0 0 18px; max-width: 64ch;
}

/* ─── Plate header (Du Bois lineage; see methodology for citation).
   Each chart is numbered (Plate I…) and titled with a claim sentence,
   followed by a one-or-two sentence interpretive description.
   Uses Inter only (no display companion font) — all-caps + tracked
   letter-spacing carries the display register on cross-platform Inter. */
.figure .plate-num {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.figure h3.plate-claim {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
  max-width: 52ch;
}
.figure h3.plate-claim em {
  font-style: normal;
  color: var(--accent);
}
.figure p.plate-desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 22px;
  max-width: 66ch;
}
.figure p.plate-desc strong { font-weight: 600; }
.figure p.plate-desc em { font-style: italic; }

/* ─── "What can be done" action list (Plate VII scaffold).
   Numbered grid of evidence-based interventions; placeholder
   content is Tim-fillable.  Same restrained Inter palette as
   the rest of the page. */
.action-list {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 56px;
}
@media (max-width: 800px) {
  .action-list { grid-template-columns: 1fr; gap: 28px; }
}
.action-list li {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  align-items: start;
}
.action-list .action-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 1;
  margin-top: 2px;
}
.action-list h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 6px;
}
.action-list p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0;
}
.action-list p em {
  font-style: italic;
}

/* Coda below the action list — short closing prose:
   eviction-in-the-displacement-system framing + the 3 P's.  */
.action-coda {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-fine);
  max-width: 78ch;
}
.action-coda h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--navy);
  margin: 22px 0 8px;
}
.action-coda h4:first-child { margin-top: 0; }
.action-coda p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--navy);
  margin: 0 0 14px;
}
/* In the coda, em is doing emphasis-as-keyword duty for the 3 P's
   (production / preservation / protections) — give them weight + the
   ERN accent color, no italic. */
.action-coda p em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

/* ─── Chart legend strip ─── */
.figure .chart-legend {
  display: flex; flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 12px; line-height: 1.4;
  color: var(--muted); font-style: italic;
  margin: -6px 0 14px;
}
/* Variant: legend sitting below the SVG instead of above */
.figure .chart-legend.chart-legend-below { margin: 28px 0 12px; }
/* Variant: subtitle sitting below the SVG (after legend, before caption) */
.figure .desc-lead.desc-lead-below { margin: 0; max-width: none; }
.figure .chart-legend .legend-item {
  display: inline-flex; align-items: center; gap: 8px;
}
.figure .chart-legend .legend-mark {
  display: inline-block; flex-shrink: 0;
  width: 22px; height: 10px;
}
.figure .chart-legend .legend-mark-baseline {
  height: 0; border-top: 1px dashed #6c7a89;
}
.figure .chart-legend .legend-mark-band {
  background: rgba(25, 34, 44, 0.06);
  border-left: 1px solid rgba(25, 34, 44, 0.18);
  border-right: 1px solid rgba(25, 34, 44, 0.18);
}

/* ─── Interactive chart shared chrome ─── */
.chart-interactive {
  position: relative;
  cursor: crosshair;
  /* SVG text scales with the viewBox, so on narrow viewports the in-SVG
     `font-size: 11px` collapses to ~6-7 actual CSS pixels and becomes
     illegible. Cap the minimum chart width so the SVG can't compress past
     readability — anything narrower triggers a horizontal scroll on this
     wrapper rather than shrinking the text. */
  overflow-x: auto;
  overflow-y: visible;
}
.chart-interactive svg {
  display: block;
  min-width: 540px;
}
/* Race-pair container also needs the floor so the two side-by-side
   charts (race trend + race bars) don't compress past readability. */
.charts-pair > .chart-interactive svg { min-width: 360px; }
/* On phones the floor would force a horizontal scroll, which is fine for
   data integrity but a touch annoying. iPhone SE is 320 px; most others
   are 360-414 px. Drop to 320 so the chart fits without scroll on the
   narrowest devices. */
@media (max-width: 480px) {
  .chart-interactive svg { min-width: 320px; }
  .charts-pair > .chart-interactive svg { min-width: 300px; }
}
.chart-interactive .hover-grid {
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.chart-interactive:hover .hover-grid { opacity: 1; }
.chart-interactive .hover-grid .grid-line {
  stroke: #19222C; stroke-width: 0.5;
  stroke-dasharray: 2 3; opacity: 0.22;
}
.chart-interactive .hover-grid .grid-label {
  font-family: 'Inter', sans-serif; font-size: 12px;
  fill: #6c7a89; letter-spacing: 0.02em;
}
.chart-interactive .hover-indicator {
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.chart-interactive .hover-indicator.active { opacity: 1; }
.chart-interactive .hover-vguide {
  stroke: #F9322B; stroke-width: 1;
  stroke-dasharray: 2 3; opacity: 0.7;
}
.chart-interactive .hover-dot {
  fill: #F9322B; stroke: #fff; stroke-width: 2;
}
.chart-interactive .hover-tooltip {
  position: absolute;
  background: #19222C; color: #fff;
  padding: 8px 12px; border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.4;
  pointer-events: none; white-space: nowrap;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 14px));
  box-shadow: 0 4px 14px rgba(25,34,44,0.18);
  opacity: 0; transition: opacity 120ms ease;
}
.chart-interactive .hover-tooltip.active { opacity: 1; }
.chart-interactive .hover-tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: #19222C;
}
.chart-interactive .tip-date {
  font-weight: 500; font-size: 11px;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 2px;
}
.chart-interactive .tip-value {
  font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.chart-interactive .tip-rows {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.chart-interactive .tip-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px; align-items: center;
}
.chart-interactive .tip-row .swatch {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(255,255,255,0.5);
}
.chart-interactive .tip-row .swatch.focal { background: #F9322B; border-color: #F9322B; }
.chart-interactive .tip-row .swatch.muted { background: #8BA3BE; border-color: #8BA3BE; }
.chart-interactive .tip-row .swatch.dashed {
  background: transparent; border: 1px dashed #fff;
}
.chart-interactive .tip-row .tip-num { font-weight: 600; }

/* Bar-chart variants */
.chart-interactive[data-chart-type="bar"] { cursor: default; }
.chart-interactive[data-chart-type="bar"] rect[data-key] {
  cursor: pointer;
  transition: opacity 220ms ease;
}
.chart-interactive[data-chart-type="bar"]:hover rect[data-key] { opacity: 0.45; }
.chart-interactive[data-chart-type="bar"] rect[data-key].bar-active { opacity: 1; }

/* ─── Map UI (MapLibre + PMTiles) ─── */
.map-section {
  width: 100%;
  /* Square-ish on desktop — closer to MN's actual proportions and tall
     enough to roughly match the narrative text height in the adjacent
     column without overflowing it. Tune via aspect-ratio if a future
     copy edit makes the text column much taller or shorter. */
  aspect-ratio: 1 / 1;
  /* No top margin so the map's top edge aligns with the headline text
     in the adjacent column. */
  margin-top: 0;
  background: var(--tint);
  border: 1px solid var(--rule-fine);
  overflow: hidden;
  position: relative;
}
@media (max-width: 1100px) {
  /* Stacked layout below 1100px — text and map are full-width separately,
     so fall back to a portrait aspect-ratio + small top margin. */
  .map-section { aspect-ratio: 4 / 5; margin-top: 24px; }
}
#state-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: var(--tint);
}
.map-toolbar {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  display: flex; align-items: center; gap: 0;
  background: #fff;
  border: 1px solid var(--rule-fine);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: calc(100% - 110px);
}
.map-toolbar input {
  border: none; outline: none;
  padding: 8px 10px;
  font-family: var(--sans); font-size: 13px;
  color: var(--navy);
  width: 240px; min-width: 0;
  background: transparent;
}
.map-toolbar button {
  border: none; background: var(--accent); color: #fff;
  padding: 8px 14px;
  font-family: var(--sans); font-size: 12px;
  font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer; flex-shrink: 0;
}
.map-toolbar button:hover { background: var(--accent-deep); }
@media (max-width: 720px) {
  .map-toolbar input { width: 150px; font-size: 12px; }
  .map-toolbar { max-width: calc(100% - 90px); }
}
.map-help-btn {
  position: absolute;
  top: 12px; right: 56px;
  z-index: 6;
  width: 32px; height: 32px;
  border-radius: 4px;
  border: 1px solid var(--rule-fine);
  background: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--navy); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.map-help-btn:hover { color: var(--accent); }
.map-help-panel {
  position: absolute;
  top: 52px; right: 12px;
  z-index: 6;
  width: 280px; max-width: calc(100% - 24px);
  background: #fff;
  border: 1px solid var(--rule-fine);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 16px 18px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--navy);
}
.map-help-panel h4 {
  margin: 0 0 10px;
  font-family: var(--sans); font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.map-help-panel ul { margin: 0; padding-left: 18px; }
.map-help-panel li { margin-bottom: 5px; }
.map-help-panel[hidden] { display: none; }
.map-onboarding {
  position: absolute;
  bottom: 64px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 86%;
  background: var(--navy); color: #fff;
  padding: 10px 14px; border-radius: 4px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: mapBounceIn 0.4s ease-out;
}
.map-onboarding::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--navy);
}
.map-onboarding .close { margin-left: 10px; cursor: pointer; opacity: 0.7; font-weight: 700; }
.map-onboarding .close:hover { opacity: 1; }
@keyframes mapBounceIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.map-legend {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--sans); font-size: 11.5px;
  color: var(--navy);
}
.map-legend .key {
  display: inline-flex; align-items: center; gap: 5px;
  margin-right: 10px;
  padding: 2px 4px; border-radius: 2px;
  cursor: pointer; user-select: none;
  transition: opacity 0.15s, background 0.15s;
}
.map-legend .key.key-title { font-weight: 600; cursor: default; }
.map-legend .key:not(.key-title):hover { background: var(--tint); }
.map-legend .key.key-inactive { opacity: 0.35; }
.map-legend .key.key-inactive .swatch-box { filter: saturate(0); }
.map-legend .swatch-box {
  display: inline-block; width: 14px; height: 14px;
  border: 1px solid rgba(0,0,0,0.18);
}
.map-legend .key-reset {
  font-family: var(--sans); font-size: 11px;
  color: var(--muted); cursor: pointer;
  margin-left: 6px; text-decoration: underline;
}
.map-legend .key-reset:hover { color: var(--accent); }
.map-help-inline {
  margin-top: 10px;
  font-family: var(--sans); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--muted);
  padding: 6px 0;
  border-top: 1px dashed var(--rule-fine);
}
.map-help-disclosure {
  margin-top: 12px;
  font-size: 13px; color: var(--navy);
}
.map-help-disclosure summary {
  cursor: pointer; font-weight: 600; font-size: 13px;
  padding: 4px 0;
}
.map-help-disclosure summary:hover { color: var(--accent); }
.map-help-disclosure ul {
  margin: 8px 0 4px 16px; padding: 0;
  font-size: 13px; line-height: 1.6;
}
.map-help-disclosure li { margin-bottom: 3px; }

/* ─── Counties section: text-left, MapLibre map-right ─── */
.counties-map-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1100px) {
  .counties-map-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* (Retired May 2026: top-10 chart removed; visual ranking lives in the
   table itself via inline rate bars — see `table.county-table td.rate`
   below.) The standalone table block sits in its own .section flow
   with no special grid wrapper needed. */

/* ─── County table ─── */
.table-wrap {
  margin-top: 24px;
  border-top: 1px solid var(--navy);
}
.table-search {
  padding: 14px 0;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--rule-fine);
}
.table-search input {
  flex: 1; max-width: 360px;
  padding: 10px 14px;
  border: 1px solid var(--rule-fine);
  border-radius: 4px;
  font-family: var(--sans); font-size: 14px;
  color: var(--navy); background: #fff;
  outline: none;
  transition: border-color var(--transition);
}
.table-search input:focus { border-color: var(--accent); }
.table-search .count {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Scroll container — sticky header + max-height so all 87 counties
   are accessible without taking over the page. */
.table-scroll {
  max-height: 480px;
  overflow-y: auto;
  /* With the new per-row sparkline the table runs ~440 px wide; let
     mobile readers swipe horizontally instead of clipping. */
  overflow-x: auto;
  border-bottom: 1px solid var(--navy);
  /* Custom scrollbar for webkit browsers */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  -webkit-overflow-scrolling: touch;
}
.table-scroll::-webkit-scrollbar { width: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--navy-soft); }
table.county-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.county-table thead {
  /* sticky is applied to each <th> below — applying it to thead leaves
     the cell-gap area transparent with border-collapse, so scrolled
     rows show through. Each th sticks individually and paints its own
     background. */
  background: var(--paper);
}
table.county-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: left;
  padding: 12px 16px 12px 0;
  font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-fine);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: var(--paper);
  /* Solid box-shadow under the header so the rule reads continuously
     across the cell gaps. */
  box-shadow: 0 1px 0 var(--rule-fine);
}
table.county-table th:hover { color: var(--accent); }
table.county-table th.sort-asc::after { content: " ▲"; color: var(--accent); font-size: 9px; }
table.county-table th.sort-desc::after { content: " ▼"; color: var(--accent); font-size: 9px; }
table.county-table th.num-col { text-align: right; padding-right: 16px; }
table.county-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--rule-fine);
  color: var(--navy); font-variant-numeric: tabular-nums;
}
table.county-table td.county-name { font-weight: 500; }
table.county-table td.num { text-align: right; padding-right: 16px; }
table.county-table tr.hi td.county-name { color: var(--accent); font-weight: 600; }
table.county-table tr.hi td.rate { color: var(--accent); font-weight: 600; }
table.county-table tbody tr:hover td { background: var(--tint); }

/* Inline bar on the Rate column only. Bar length is set via the
   `--bar-pct` custom property (computed in JS from RATE_MAX). Implemented
   as a ::before pseudo-element so the bar lives behind the number; the
   `> span` rule lifts the digits above it. Hidden when the table carries
   the .bars-off class (toggled by the "Hide bars" button). */
table.county-table td.num {
  position: relative;
  min-width: 110px;
}
table.county-table td.num.rate::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: var(--bar-pct, 0%);
  height: 16px;
  transform: translateY(-50%);
  background: rgba(25, 34, 44, 0.12);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
  transition: width 220ms ease;
}
table.county-table tr.hi td.rate::before {
  background: rgba(249, 50, 43, 0.20);
}
table.county-table td.num > span { position: relative; z-index: 1; }
/* Hide the rate bar when the user toggles bars off */
table.county-table.bars-off td.num.rate::before { display: none; }

/* Bars on/off toggle button — sits next to the search input + count. */
.table-search .bars-toggle {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}
.table-search .bars-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.table-search .bars-toggle[aria-pressed="false"] {
  background: var(--tint);
  color: var(--muted);
}

/* ─── Methodology ─── */
.methodology {
  padding: 64px 0;
  border-top: 1px solid var(--rule-fine);
  display: grid; grid-template-columns: 200px 1fr;
  gap: 64px;
}
@media (max-width: 720px) { .methodology { grid-template-columns: 1fr; gap: 24px; } }
.methodology h3 {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0; color: var(--navy);
}
.methodology p {
  font-size: 14px; line-height: 1.65;
  color: var(--muted); margin: 0 0 12px;
  max-width: 64ch;
}
.methodology p strong { color: var(--navy); font-weight: 600; }

/* ─── Footer ─── */
footer.site {
  padding: 64px 0 32px;
  border-top: 1px solid var(--rule-fine);
}
footer.site .grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
}
@media (max-width: 720px) { footer.site .grid { grid-template-columns: 1fr 1fr; } }
footer.site .col h4 {
  font-size: 13px; font-weight: 600; margin: 0 0 14px;
  color: var(--navy);
}
footer.site .col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
}
footer.site .col ul a { border: none; color: var(--navy-soft); }
footer.site .col ul a:hover { color: var(--accent); }
footer.site .about p {
  font-size: 14px; line-height: 1.55;
  color: var(--muted); margin: 14px 0 0;
  max-width: 36ch;
}
footer.site .about img { max-height: 32px; width: auto; display: block; }
footer.site .imprint {
  grid-column: 1 / -1; margin-top: 36px;
  padding-top: 18px; border-top: 1px solid var(--rule-fine);
  font-size: 12px; color: var(--muted);
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

/* ─── Map time-window explorer ──────────────────────────────────────────────
   Sits directly under the choropleth. Stats card on top, histogram + dual-
   handle slider + date pickers below. Vertical layout — works on mobile.
   The PDA pattern (cidrlab.org/pda/...) was the structural model; the
   look-and-feel is tuned to MN brand tokens. */
.map-explorer {
  margin: 36px 0 0;
  background: var(--paper);
}

/* Stats card. White card with thin border, generous padding. */
.explorer-card {
  border: 1px solid var(--rule-fine);
  border-radius: 8px;
  padding: 22px 24px 18px;
  background: var(--paper);
  margin-bottom: 16px;
}
.explorer-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-fine);
}
.explorer-place { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.explorer-kicker {
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  color: var(--navy); letter-spacing: -0.005em;
}
.explorer-sub {
  font-size: 12px; color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 500;
}
.explorer-window {
  font-family: var(--sans); font-size: 12.5px; color: var(--muted);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

/* Four stat tiles in a row. Collapse to 2x2 on small screens, then to a
   single column on tiny ones. */
.explorer-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 18px;
  align-items: stretch;
}
.explorer-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0;
}
.explorer-tile-num {
  font-family: var(--sans);
  font-size: 30px; font-weight: 600; color: var(--navy);
  line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.explorer-tile-label {
  font-size: 11.5px; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.35;
  font-weight: 500;
}
.explorer-tile-sublabel {
  font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: 11px; color: var(--muted);
}
/* Sparkline tile renders a wider area for the chart */
.explorer-tile-spark svg { width: 100%; height: 56px; display: block; }

@media (max-width: 880px) {
  .explorer-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .explorer-tiles { grid-template-columns: 1fr; }
}

/* Race breakdown row — one row per race, label + horizontal bar + value */
.explorer-race {
  display: grid; grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-fine);
}
.explorer-race-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px;
  align-items: center; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.explorer-race-label {
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  letter-spacing: 0.02em;
}
.explorer-race-bar {
  position: relative; display: block;
  height: 10px; background: var(--rule-fine);
  border-radius: 2px; overflow: hidden;
}
.explorer-race-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--navy);
  width: 0%;
  transition: width 250ms ease;
}
/* Color-code the highlight to match the eviction-page palette */
.explorer-race-fill[data-race="black"]  { background: var(--navy); }
.explorer-race-fill[data-race="latine"] { background: var(--navy-soft); }
.explorer-race-fill[data-race="other"]  { background: var(--steel); }
.explorer-race-fill[data-race="white"]  { background: #aab4be; }
.explorer-race-value {
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  text-align: right;
}
.explorer-race-note {
  font-size: 11.5px; color: var(--muted); font-style: italic;
  margin: 10px 0 0;
  line-height: 1.5;
}
/* When the panel shows a tract (no race breakdown), the note replaces bars */
.explorer-race.tract-mode .explorer-race-row { display: none; }
.explorer-race.tract-mode .explorer-race-note { display: block; }

/* Histogram + slider + pickers, in a tinted panel under the stats card. */
.explorer-controls {
  padding: 22px 28px 18px;
  background: var(--tint);
  border: 1px solid var(--rule-fine);
  border-radius: 8px;
}
.explorer-controls .trend-stack {
  display: flex; flex-direction: column;
  padding: 0 7px;
  gap: 6px;
}
.explorer-controls .trend-stack svg {
  width: 100%; height: 64px; display: block;
  background: transparent;
}
.explorer-controls .trend-stack #explorer-slider { width: 100%; }
.explorer-controls .trend-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.explorer-controls .date-pickers-row {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin-top: 18px;
}
@media (max-width: 720px) {
  .explorer-controls .date-pickers-row { flex-direction: column; align-items: stretch; gap: 14px; }
}
.explorer-controls .date-pickers {
  display: flex; gap: 12px; align-items: end;
  flex-wrap: wrap;
}
.explorer-controls .date-pickers label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.explorer-controls .date-pickers input[type="date"] {
  padding: 8px 10px; font-family: var(--sans);
  font-size: 13px; color: var(--navy);
  border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; outline: none; min-width: 140px;
  font-variant-numeric: tabular-nums;
}
.explorer-controls .date-pickers input[type="date"]:focus { border-color: var(--accent); }
.explorer-controls .ghost-btn {
  font-family: var(--sans); font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px; border-radius: 4px;
  border: 1px solid var(--navy); background: transparent; color: var(--navy);
  cursor: pointer; transition: all var(--transition);
}
.explorer-controls .ghost-btn:hover { color: var(--accent); border-color: var(--accent); }
.explorer-controls .hint {
  font-size: 11.5px; color: var(--muted);
  font-style: italic; margin: 0;
  max-width: 56ch;
}

/* noUiSlider — match brand */
#explorer-slider.noUi-target { background: rgba(25,34,44,0.12); border: none; box-shadow: none; height: 4px; }
#explorer-slider .noUi-connect { background: var(--navy); cursor: grab; }
#explorer-slider .noUi-connect:active { cursor: grabbing; }
#explorer-slider .noUi-handle {
  width: 14px !important; height: 14px !important;
  right: -7px !important; top: -5px !important;
  border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  cursor: grab;
}
#explorer-slider .noUi-handle::before,
#explorer-slider .noUi-handle::after { display: none; }
#explorer-slider .noUi-handle:active { cursor: grabbing; }
#explorer-slider .noUi-tooltip {
  background: var(--navy); color: #fff; border: none;
  padding: 4px 8px; font-family: var(--sans); font-size: 11px;
  font-weight: 600; letter-spacing: 0.02em; border-radius: 3px;
  font-variant-numeric: tabular-nums;
  display: none;
}
#explorer-slider .noUi-handle:hover .noUi-tooltip,
#explorer-slider .noUi-handle.noUi-active .noUi-tooltip,
#explorer-slider .noUi-handle:focus .noUi-tooltip { display: block; }

/* ─── Mini sparkline hover (4th tile in the explorer card) ─── */
.spark-wrap { position: relative; }
.spark-wrap svg { width: 100%; height: 64px; display: block; cursor: crosshair; }
/* Faint dashed top line (inside the SVG) — visible only on hover. */
.spark-wrap .spark-axis {
  opacity: 0; transition: opacity 120ms ease; pointer-events: none;
}
.spark-wrap:hover .spark-axis { opacity: 1; }
/* Vertical guide line stays in the SVG (lines stretch fine). */
.spark-wrap .spark-guide {
  opacity: 0; transition: opacity 120ms ease; pointer-events: none;
}
.spark-wrap:hover .spark-guide { opacity: 1; }
/* HTML hover dot — kept outside the SVG so it stays a true circle. */
.spark-dot {
  position: absolute; pointer-events: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.spark-dot[hidden] { display: none; }
/* Caption row under the chart: "max X" by default, "max X · MMM YYYY · N filings" on hover. */
.spark-caption {
  font-family: var(--sans); font-size: 11.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
  margin-top: 6px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.spark-caption .spark-caption-max  { font-weight: 600; color: var(--muted); }
.spark-caption .spark-caption-sep[hidden],
.spark-caption .spark-caption-tip[hidden] { display: none; }
.spark-caption .spark-caption-tip { color: var(--navy); font-weight: 600; }
.spark-caption .spark-tip-date  { letter-spacing: 0.06em; text-transform: uppercase; }
.spark-caption .spark-tip-value { font-weight: 700; }

/* ─── Tbl 01 — sparkline + tightened columns ───
   The Filings cell hosts a small per-county sparkline next to its
   number. Renter HH gets less right padding so the row breathes. */
table.county-table td.col-renters { min-width: 70px; padding-right: 10px; }
table.county-table th.col-renters { padding-right: 10px; }
table.county-table td.col-filings,
table.county-table th.col-filings { min-width: 260px; padding-right: 14px; }
table.county-table .filings-cell-inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px;
}
table.county-table .filings-spark {
  flex: 1 1 auto; max-width: 200px; height: 24px; display: inline-block;
  opacity: 0.95;
}
table.county-table .filings-spark svg {
  width: 100%; height: 100%; display: block;
}
table.county-table .filings-num {
  min-width: 50px; text-align: right;
  font-variant-numeric: tabular-nums;
}
table.county-table tr.hi .filings-spark { opacity: 1; }

/* Small reset / refresh hint right under the map legend. */
.map-refresh-hint {
  font-size: 12px; color: var(--muted);
  font-style: italic;
  margin: 8px 0 0;
  text-align: center;
  line-height: 1.5;
}
.map-refresh-hint a { color: var(--accent); border-color: var(--accent); }

/* Mobile portrait — table is ~520 px wide with the sparkline; the rate
   column ends up off-screen on a 360–414 px phone. Hide the sparkline
   below 600 px so County + Renter HH + Filings + Rate all fit without
   horizontal scroll. The full table is still available on rotate /
   tablet / desktop. */
@media (max-width: 600px) {
  table.county-table .filings-spark { display: none; }
  table.county-table td.col-filings,
  table.county-table th.col-filings { min-width: 80px; padding-right: 10px; }
  table.county-table .filings-cell-inner { gap: 0; }
}

/* Map button strip — sits below the map onboarding hint, hosts the
   county-outline toggle (and any future per-map toggles). */
.map-toggle-row {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 6px 0 0;
}
.map-toggle-row .map-toggle-btn {
  font-family: var(--sans); font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px; border-radius: 4px;
  border: 1px solid var(--rule); background: #fff; color: var(--navy);
  cursor: pointer; transition: all var(--transition);
}
.map-toggle-row .map-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
.map-toggle-row .map-toggle-btn[aria-pressed="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}

/* Loading overlay shown while the choropleth fill-opacity is 0
   (initial load, basemap visible). Hidden via [hidden] the moment
   the first ckmeans paint lands. Pointer-events disabled so it
   doesn't block map interaction (search box, zoom, etc.). */
.map-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--rule-fine);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-family: var(--sans); font-size: 12.5px;
  font-weight: 600; letter-spacing: 0.03em;
  color: var(--navy);
  pointer-events: none;
  z-index: 30;
}
.map-loading[hidden] { display: none; }
.map-loading-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: map-spin 0.8s linear infinite;
}
@keyframes map-spin {
  to { transform: rotate(360deg); }
}