:root {
  /* ---- classic theme (the warm palette) ---- */
  --background: #eef0f3;
  --surface: #ffffff;
  --surface-muted: #f3f5f8;
  --surface-strong: #0b7892;
  --surface-raised: #ffffff;
  --surface-overlay: rgb(255 255 255 / 92%);
  --text: #1c2433;
  --muted-text: #5b6472;
  --border: #e2e6ec;
  --hair: #edf0f4;
  --brand-accent: #0b7892;
  --brand-accent-dark: #095f74;
  --brand-wash: #e9f5f7;
  --action: #0b7892;
  --action-hover: #095f74;
  --on-accent: #ffffff;
  --hue: #0b7892;
  --hue-bright: #095f74;
  --hue-soft: #e9f5f7;
  --warm: #df8000;
  --selected-ward: #1c2433;
  --map-fill: #cfd5dd;
  --map-stroke: #ffffff;
  --map-fill-opacity: 0.9;
  --map-fill-opacity-selected: 1;
  --score-high: #0f766e;
  --score-mid: #e7dcc9;
  --score-low: #d97757;
  --delta-up: #15803d;
  --delta-down: #b91c1c;
  --header-bg: #ffffff;
  --header-text: #1c2433;
  --header-muted: #5b6472;
  --logo-hue: #0b7892;
  --logo-ink: #1c2433;
  --page-glow-a: transparent;
  --page-glow-b: transparent;
  /* charts (mini report, full report, comparison) */
  --chart-ahead: #0f766e;
  --chart-behind: #d97757;
  --chart-neutral: #b8bfc6;
  --chart-you: #0b7892;
  --chart-b: #df8000;
  --chart-median: #6f7683;
  --chart-tick: #d5d8df;
  --gold-ink: #8a6d1f;
  --gold-wash: #fbf1d2;
  --gold-edge: #e2c469;
  --silver-ink: #4a5260;
  --silver-wash: #eef1f6;
  --silver-edge: #c3cad6;
  --bronze-ink: #7c4318;
  --bronze-wash: #f9e6d6;
  --bronze-edge: #d9a175;
  /* editorial pages and verdict colours */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --positive: #2c7a4b;
  --negative: #b4482e;
  /* menu-money categories (streets, lighting, sidewalks, alleys, parks, cameras, schools, active transport) */
  --menu-cat-1: #155e75;
  --menu-cat-2: #d9a441;
  --menu-cat-3: #6b8e23;
  --menu-cat-4: #7c4318;
  --menu-cat-5: #0f766e;
  --menu-cat-6: #7c3aed;
  --menu-cat-7: #c55f2c;
  --menu-cat-8: #2563eb;
  --menu-cat-other: #d5d8df;
  --shadow-ink: #1c2433;
  --shadow: 0 10px 30px rgb(28 36 51 / 8%);
  --radius-lg: 1.75rem;
  --radius-md: 0.75rem;
  background: var(--background);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- dark theme: ink and violet, after Connor's redesign. Orange only where it means "behind". ---- */
:root[data-theme="dark"] {
  --background: #17181c;
  --surface: #1e2025;
  --surface-muted: #262930;
  --surface-strong: #5b21b6;
  --surface-raised: #24262d;
  --surface-overlay: rgb(30 32 37 / 92%);
  --text: #f3f2f7;
  --muted-text: #a3a7b3;
  --border: #33363f;
  --hair: #2b2e36;
  --brand-accent: #8b5cf6;
  --brand-accent-dark: #7c3aed;
  --brand-wash: #2e1f4d;
  --action: #a78bfa;
  --action-hover: #c4b5fd;
  --on-accent: #ffffff;
  --hue: #a78bfa;
  --hue-bright: #8b5cf6;
  --hue-soft: #2e1f4d;
  --warm: #fb923c;
  --selected-ward: #ede9fe;
  --map-fill: #3a3d46;
  --map-stroke: #9ea3b2;
  --map-fill-opacity: 0.7;
  --map-fill-opacity-selected: 0.88;
  --score-high: #a78bfa;
  --score-mid: #4b4f5a;
  --score-low: #c2410c;
  --delta-up: #4ade80;
  --delta-down: #f87171;
  --header-bg: #111216;
  --header-text: #f3f2f7;
  --header-muted: #a3a7b3;
  --logo-hue: #a78bfa;
  --logo-ink: #f3f2f7;
  --page-glow-a: rgb(139 92 246 / 14%);
  --page-glow-b: rgb(76 29 149 / 12%);
  --chart-ahead: #a78bfa;
  --chart-behind: #c2410c;
  --chart-neutral: #4b4f5a;
  --chart-you: #c4b5fd;
  --chart-b: #fb923c;
  --chart-median: #8b8f9a;
  --chart-tick: #3a3d46;
  --gold-ink: #e2c469;
  --gold-wash: rgb(226 196 105 / 12%);
  --gold-edge: #e2c469;
  --silver-ink: #c3cad6;
  --silver-wash: rgb(195 202 214 / 12%);
  --silver-edge: #c3cad6;
  --bronze-ink: #d9a175;
  --bronze-wash: rgb(217 161 117 / 12%);
  --bronze-edge: #d9a175;
  --shadow-ink: #000000;
  --shadow: 0 16px 40px rgb(0 0 0 / 45%);
  --positive: #6fcf97;
  --negative: #f0876b;
  --menu-cat-1: #67c3dc;
  --menu-cat-2: #e2c469;
  --menu-cat-3: #a3d16a;
  --menu-cat-4: #d9a175;
  --menu-cat-5: #5eead4;
  --menu-cat-6: #c4b5fd;
  --menu-cat-7: #fb923c;
  --menu-cat-8: #93c5fd;
  --menu-cat-other: #3a3d46;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at top right, var(--page-glow-a), transparent 26rem),
    radial-gradient(circle at top left, var(--page-glow-b), transparent 28rem),
    var(--background);
  margin: 0;
}

a {
  color: var(--action);
}

button,
input,
select {
  font: inherit;
}

.site-header {
  align-items: center;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--header-text);
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0.75rem clamp(0.75rem, 3vw, 2rem) 0;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
}

.site-brand,
.nav-link {
  color: var(--header-text);
  text-decoration: none;
}

.site-brand {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  gap: 0.65rem;
  line-height: 1;
  white-space: nowrap;
}

/* The mark is a self-contained SVG in the theme's own colors: no plate, no border, no crop box. */
.brand-mark {
  align-items: center;
  display: flex;
  height: 34px;
  justify-content: center;
  overflow: visible;
  width: 34px;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
}

.brand-copy {
  display: grid;
  gap: 0.1rem;
}

.brand-kicker {
  color: var(--header-muted);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-name {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.site-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.5rem 0.7rem;
}

.nav-link:hover,
.nav-link.is-active {
  background: color-mix(in srgb, var(--brand-wash) 18%, transparent);
  border-color: color-mix(in srgb, var(--brand-wash) 32%, transparent);
}

/* Account menu: one avatar button holds identity + admin, so the nav reads as three
   destinations (Explore / Reports / Support) whoever is signed in. */
.nav-account { position: relative; }

.nav-account-button {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--brand-wash) 32%, transparent);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  padding: 0.2rem;
}

.nav-account-button:hover,
.nav-account-button[aria-expanded="true"] { background: color-mix(in srgb, var(--brand-wash) 18%, transparent); }

.nav-avatar {
  align-items: center;
  background: color-mix(in srgb, var(--brand-wash) 22%, transparent);
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 800;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.nav-account-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  display: grid;
  min-width: 12rem;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 60;
}

.nav-account-menu[hidden] { display: none; }

.nav-account-menu .nav-account-email {
  border-bottom: 1px solid var(--border);
  color: var(--muted-text);
  font-size: 0.75rem;
  margin: 0;
  overflow: hidden;
  padding: 0.4rem 0.55rem 0.5rem;
  text-overflow: ellipsis;
}

.nav-account-menu a {
  border-radius: 7px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 0.55rem;
  text-decoration: none;
}

.nav-account-menu a:hover { background: var(--surface-muted); }

.eyebrow {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.explorer-layout {
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  /* Three columns on desktop: [map | ranker] (the visualizer holds both) + the metrics panel. */
  grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
  height: calc(100vh - 3.75rem); /* header renders 60px; a smaller constant overflows the viewport and clips the equation row */
  overflow: hidden;
  padding: 1rem;
}

.visualizer-panel {
  display: grid;
  gap: 0.75rem;
  /* ONE row on desktop: the mobile-view-toggle is display:none here, so a leading `auto` row
     makes the cards auto-place into it and size to CONTENT — an empty leaderboard (deselect all)
     collapsed the whole map row to ~140px. The mobile media query restores auto+1fr when the
     toggle actually renders. */
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.visualizer-cards {
  display: grid;
  /* Map and Ranker side by side, equal width (the Timeline card is hidden — moving to metric views
     + Trends); the equation spans both columns beneath them. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  min-height: 0;
  position: relative;
}

.visualizer-cards .wellbeing-equation {
  grid-column: 1 / -1;
}

/* Loading: the cards keep their full reserved size (visibility, not display, so nothing jumps)
   behind a single quiet line until the map's first render reveals everything at once. */
.visualizer-cards.is-loading > * {
  visibility: hidden;
}

.visualizer-cards.is-loading::after {
  color: var(--muted-text);
  content: "Illuminating Chicago…";
  display: grid;
  font-size: 0.85rem;
  inset: 0;
  letter-spacing: 0.14em;
  place-content: center;
  position: absolute;
  text-transform: uppercase;
}

/* Starts hidden and appears with the map's first render — without this rule the class's
   display: grid would override the hidden attribute. */
.wellbeing-equation[hidden] {
  display: none;
}

.visualizer-header {
  align-items: start;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--brand-wash) 54%, transparent) 48%, color-mix(in srgb, var(--surface) 88%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 16%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  padding: 0.85rem;
  position: relative;
}

.visualizer-header::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent);
  content: "";
  height: 4rem;
  pointer-events: none;
  position: absolute;
  right: 10%;
  top: -0.8rem;
  transform: rotate(-12deg);
  width: 22rem;
}

.visualizer-title-group {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.visualizer-header h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.05;
  margin: 0;
  white-space: nowrap;
}

.visualizer-header p:not(.eyebrow) {
  color: var(--muted-text);
  margin: 0.5rem 0 0;
  max-width: 54rem;
}

.visualizer-tabs {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, transparent);
  border-radius: 999px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: min(24rem, 100%);
  padding: 0.25rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 650;
}

.visualizer-tabs button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted-text);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 0.7rem;
}

.visualizer-tabs button.is-active {
  background: var(--brand-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent-dark) 18%, transparent);
  color: white;
}

.map-card,
.panel {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.visualizer-card {
  min-height: 0;
  position: relative;
}

.visualizer-card[hidden] {
  display: none !important;
}

#map {
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--action) 10%, transparent), transparent 20rem),
    radial-gradient(circle at 74% 78%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 88%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
  height: 100%;
  min-height: 0;
}

#map .leaflet-interactive {
  transition: fill 180ms ease, fill-opacity 180ms ease, stroke 180ms ease, stroke-width 180ms ease;
}

.map-card.is-shading-loading #map .leaflet-interactive {
  animation: map-shade-pulse 900ms ease-in-out infinite;
}

.map-shade-loading {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--action) 16%, transparent);
  border-radius: 999px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  color: var(--action);
  display: flex;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 0.65rem;
  left: 1rem;
  padding: 0.7rem 0.95rem;
  pointer-events: none;
  position: absolute;
  top: 1rem;
  white-space: nowrap;
  z-index: 660;
}

.map-shade-loading[hidden] {
  display: none;
}

.map-detail-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 999px;
  bottom: 1rem;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  color: var(--muted-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.45rem;
  left: 1rem;
  padding: 0.45rem 0.65rem;
  position: absolute;
  z-index: 650;
}

.map-detail-toggle:hover,
.map-detail-toggle:focus-within {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-color: color-mix(in srgb, var(--action) 22%, transparent);
  color: var(--action);
}

/* Ward / Neighborhood / χGRID geography switch — segmented control over the map */
/* Connected segmented control: one rounded bar; only the outer corners round, inner segments
   (incl. Neighborhoods) are square so they lead into their neighbors. overflow:hidden clips the
   active fill to the bar's rounded corners. */
.area-type-toggle {
  /* Floats over the Explore map (clears the Leaflet zoom control at top-left). */
  position: absolute;
  top: 1rem;
  left: 3.75rem;
  z-index: 650;
  display: inline-flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
}
/* On the Metrics page the toggle lives in normal flow, on its own row directly under the
   metric selector(s) — not floated over a map. flex-basis:100% breaks it onto a new line;
   max-width keeps the segmented control at its natural compact width. */
.metric-tool-controls .area-type-toggle {
  position: static;
  flex-basis: 100%;
  max-width: max-content;
  box-shadow: none;
}
.area-type-toggle button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); /* divider between segments */
  background: none;
  border-radius: 0;
  padding: 0.4rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted-text);
  cursor: pointer;
}
.area-type-toggle button:first-child {
  border-left: 0;
}
.area-type-toggle button:hover {
  color: var(--brand-accent);
}
.area-type-toggle button.is-active {
  background: var(--brand-accent);
  border-left-color: var(--brand-accent);
  color: #fff;
}
.area-type-toggle button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}
.area-type-toggle[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.area-type-toggle button:disabled { cursor: progress; }
/* The precinct lens swaps the three peers for one exit button in the same slot. */
.area-type-toggle button[hidden] { display: none; }
.area-type-toggle button.area-type-lens-exit { border-left: 0; }

/* the map's furniture, top-right: the one-line hint and the legend for THIS list's colours */
.map-overlays-tr {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 3.6rem; /* below the geography toggle's row, so a narrow map card never overlaps the two */
  z-index: 650;
}
/* In the precinct lens the ward fills the frame, so the hint and legend sit in the bottom-right
   corner (above Leaflet's attribution) and fitFullCity keeps the ward clear of them. */
.map-card.is-lens .map-overlays-tr {
  bottom: 2.1rem;
  top: auto;
}
.map-hint {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
}
.map-hint::before { color: var(--selected-ward); content: "●"; margin-right: 0.35rem; }
.map-hint[hidden] { display: none; }
.map-legend {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  color: var(--muted-text);
  font-size: 0.68rem;
  padding: 0.55rem 0.7rem;
  width: 11.5rem;
}
.map-legend[hidden] { display: none; }
.map-legend-title { color: var(--text); display: block; font-size: 0.74rem; }
.map-legend-gradient {
  background: linear-gradient(90deg, var(--score-low), var(--score-mid), var(--score-high));
  border-radius: 6px;
  height: 8px;
  margin: 0.4rem 0;
}
.map-legend.is-delta .map-legend-gradient { background: linear-gradient(90deg, var(--delta-down), var(--score-mid), var(--delta-up)); }
.map-legend-labels { display: flex; font-variant-numeric: tabular-nums; gap: 0.3rem; justify-content: space-between; }
/* the precinct lens's range switch: the ward's own precincts, or all 1,291 */
/* the overlay passes pointer events through to the map; this switch must catch its own clicks */
.map-legend-scope { display: flex; gap: 0.25rem; margin-top: 0.45rem; pointer-events: auto; }
.map-legend-scope[hidden] { display: none; }
.map-legend-scope button {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted-text);
  cursor: pointer;
  flex: 1;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.22rem 0.3rem;
}
.map-legend-scope button:hover { color: var(--brand-accent); }
.map-legend-scope button.is-active { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }

/* a failed fetch, where the reader is looking, with a way back */
.comparison-error {
  background: var(--surface-raised);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--negative);
  display: grid;
  font-size: 0.86rem;
  font-weight: 700;
  gap: 0.5rem;
  justify-items: start;
  padding: 0.85rem;
}
.comparison-error p { margin: 0; }

.map-detail-toggle input {
  accent-color: var(--action);
  cursor: pointer;
  height: 0.9rem;
  margin: 0;
  width: 0.9rem;
}

@keyframes map-shade-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.64;
  }
}

.input-panel {
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem;
}

.input-card {
  align-content: start;
}

/* Desktop: only the metric rows scroll — the heading and the selection buttons (Surprise me /
   Select all / Deselect all / Change time) stay pinned while you browse the domains. */
@media (min-width: 641px) {
  .input-card { overflow: hidden; }
  .input-card > .input-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }
  .input-card #metric-weights {
    min-height: 0;
    overflow-y: auto;
  }
  /* Curated mode hides the metric grid, so the tray of lists must be the thing that scrolls —
     otherwise the last rows of chips sit clipped under the card's overflow:hidden. */
  .input-card #preset-tray {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0.25rem;
  }
}

.input-card > .input-section {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.input-section {
  display: grid;
  gap: 0.7rem;
}

.ranker-card {
  padding: 1.25rem;
}

.timeline-card {
  padding-top: 4.75rem;
}

.ranker-card .panel-heading,
.timeline-card .panel-heading {
  display: grid;
  gap: 0.15rem;
}

.ranker-card .panel-heading h2,
.timeline-card .panel-heading h2 {
  font-size: 1.45rem;
  margin: 0;
}

.panel h2,
.panel h3,
.panel p {
  margin-top: 0;
}

.panel section + section {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.panel-heading h2 {
  font-size: 1.45rem;
  margin: 0;
}

.ward-navigator {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  display: grid;
  gap: 0.25rem;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  padding: 0.25rem;
}

.ward-navigator select,
.control-label + select {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
  padding: 0.65rem 0.9rem;
}

.icon-button {
  align-items: center;
  background: var(--surface-muted);
  border: 0;
  border-radius: 999px;
  color: var(--action);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 900;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.icon-button:hover {
  background: var(--action);
  color: white;
}

.alder-card {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.alder-photo {
  border-radius: 1rem;
  height: 6rem;
  object-fit: cover;
  width: 6rem;
}

.profile-link {
  font-weight: 800;
}

.metric-breakdown {
  display: grid;
  gap: 0.6rem;
}

.metric-breakdown small {
  color: var(--muted-text);
}

.metric-component-list {
  display: grid;
  gap: 0.45rem;
}

.metric-component-row {
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.65rem;
}

.metric-component-row div:last-child {
  text-align: right;
}

.metric-component-row span {
  color: var(--muted-text);
  display: block;
  font-size: 0.82rem;
}

.metric-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.metric-chip {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.4rem 0.6rem;
  text-transform: capitalize;
}

.overlap-list {
  display: grid;
  gap: 0.65rem;
}

.overlap-row {
  display: grid;
  gap: 0.35rem;
}

.overlap-row div:first-child {
  display: flex;
  font-size: 0.9rem;
  justify-content: space-between;
}

.overlap-row span {
  color: var(--muted-text);
}

.overlap-bar {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 0.45rem;
  overflow: hidden;
}

.overlap-bar span {
  background: var(--selected-ward);
  display: block;
  height: 100%;
}

.metric-selection-intro {
  display: grid;
  gap: 0.65rem;
}

.metric-weight-hint {
  color: var(--muted-text);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
}

.metric-selection-actions {
  display: grid;
  gap: 0.45rem;
}

.metric-bulk-actions {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-button-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr; /* one wellbeing-domain row per line */
  position: relative;
}

.metric-domain-active { color: var(--hue); font-size: 0.7rem; font-weight: 700; margin-left: auto; margin-right: 0.5rem; white-space: nowrap; }
.metric-domain-active[hidden] { display: none; }
.metric-domain-row.is-list .metric-domain-head { border-bottom: 1px solid var(--hair); margin-bottom: 0.35rem; padding-bottom: 0.25rem; }
.metric-rows { display: grid; gap: 0.3rem; margin-bottom: 0.7rem; }
.metric-row {
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.5rem 0.6rem;
}
.metric-row.is-off { opacity: 0.62; }
.metric-row.is-off:hover, .metric-row.is-off:focus-within { opacity: 1; }
.metric-row-icon { color: var(--hue); display: inline-flex; }
.metric-row-icon svg { height: 1.25rem; width: 1.25rem; }
.metric-row-copy { display: grid; gap: 0.1rem; min-width: 0; }
.metric-row-title { font-size: 0.86rem; font-weight: 750; }
.metric-row-inverse { background: var(--surface-muted); border-radius: 0.35rem; color: var(--muted-text); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; margin-left: 0.35rem; padding: 0.05rem 0.35rem; text-transform: uppercase; vertical-align: middle; }
.metric-row-desc { -webkit-box-orient: vertical; color: var(--muted-text); display: -webkit-box; font-size: 0.74rem; -webkit-line-clamp: 2; line-height: 1.35; overflow: hidden; }
.metric-weight-control { border: 1px solid var(--border); border-radius: 999px; display: inline-flex; overflow: hidden; }
.metric-weight-choice { background: var(--surface-muted); border: 0; border-right: 1px solid var(--border); color: var(--muted-text); cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 800; padding: 0.3rem 0.55rem; }
.metric-weight-choice:last-child { border-right: 0; }
.metric-weight-choice.is-active { background: var(--hue-bright); color: var(--on-accent); }
.metric-weight-choice.is-priority.is-active { background: var(--gold-ink); }
.metric-weight-choice:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.metric-search { margin-top: 0.5rem; }
.metric-search-empty { color: var(--muted-text); font-size: 0.85rem; margin: 0.5rem 0; }
#metric-weights.is-searching .metric-domain-row:not(.is-expanded) .metric-domain-tiles { grid-auto-rows: auto; overflow: visible; row-gap: 0.25rem; }
.input-panel[data-picker="curated"]:not(.is-customizing) .metric-search { display: none; }
/* Curated mode is about picking a list; the time controls belong to the advanced picker. */
.input-panel[data-picker="curated"]:not(.is-customizing) #open-time-modal { display: none; }

.metric-domain-head {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.metric-domain-label {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.metric-domain-expand {
  background: transparent;
  border: 0;
  color: var(--muted-text);
  cursor: pointer;
  display: none; /* shown only when the domain overflows its first row */
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 0.15rem;
}

.metric-domain-row.has-overflow .metric-domain-expand {
  display: inline-block;
}

.metric-domain-expand:hover {
  color: var(--text);
}

/* Collapsed: exactly one tile row — row 1 is explicit (auto-sized), all implicit rows collapse
   to zero height and clip. */
.metric-domain-row:not(.is-expanded) .metric-domain-tiles {
  grid-template-rows: auto;
  grid-auto-rows: 0;
  overflow: hidden;
  row-gap: 0;
}

/* Mobile only: selections surface into the strip's visible first row. On desktop tiles stay
   put — reordering on every tap made the grid feel like it was squirming under the cursor. */
@media (max-width: 640px) {
  .metric-domain-tiles .metric-toggle.is-on,
  .metric-domain-tiles .metric-toggle.is-high {
    order: -1;
  }
}

/* The tiles within a domain keep the original fixed-ish small-tile wrap. */
.metric-domain-tiles,
.metric-button-grid-loading {
  display: grid;
  gap: 0.25rem;
  /* Fixed-ish small tiles (~3rem) that wrap — roughly a dozen per row on desktop — instead of stretching
     to fill the column width (which made the icons too big when the panel widened). */
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
}

/* "Change time" button reflects an active year/delta view; the controls live in a modal. */
.metric-secondary-action.is-active {
  background: var(--action, #155e75);
  color: #fff;
  border-color: var(--action, #155e75);
}
.time-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-modal[hidden] { display: none; }
.time-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.time-modal-box {
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  width: min(26rem, calc(100vw - 2rem));
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.9rem;
  padding: 1.25rem 1.4rem 1.5rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.time-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.time-modal-head h3 { margin: 0; font-size: 1.1rem; }
.time-modal-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-text);
}
.time-modal-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-text);
}
.time-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.time-control-label { min-width: 4rem; }
.time-control-toggle { cursor: pointer; }
.time-select {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 0.5rem;
  background: var(--surface, #fff);
}
.delta-year-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--border, #e2e8f0);
}
.delta-year-controls[hidden] { display: none; }

.metric-loading-status {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--action) 16%, transparent);
  border-radius: 999px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  color: var(--action);
  display: flex;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 0.65rem;
  justify-content: center;
  left: 50%;
  padding: 0.7rem 0.95rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 1;
}

.metric-loading-tile {
  animation: metric-loading-shimmer 1200ms ease-in-out infinite;
  aspect-ratio: 1;
  background:
    linear-gradient(110deg, transparent 24%, color-mix(in srgb, var(--surface) 78%, transparent) 38%, transparent 52%),
    var(--surface-muted);
  background-size: 220% 100%, 100% 100%;
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  display: block;
}

.metric-loading-tile:nth-of-type(3n) {
  animation-delay: 120ms;
}

.metric-loading-tile:nth-of-type(3n + 1) {
  animation-delay: 240ms;
}

.metric-loading-spinner {
  animation: metric-loading-spin 850ms linear infinite;
  border: 0.18rem solid color-mix(in srgb, var(--action) 16%, transparent);
  border-radius: 999px;
  border-top-color: var(--action);
  height: 1.1rem;
  width: 1.1rem;
}

.metric-loading-error {
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface-muted) 72%, transparent));
  border: 1px dashed color-mix(in srgb, var(--score-low) 28%, transparent);
  border-radius: var(--radius-md);
  color: var(--score-low);
  display: flex;
  font-size: 0.86rem;
  font-weight: 800;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.85rem;
}

@keyframes metric-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes metric-loading-shimmer {
  0% {
    background-position: 120% 0, 0 0;
  }

  100% {
    background-position: -120% 0, 0 0;
  }
}

.metric-toggle {
  align-items: center;
  aspect-ratio: 1;
  background: var(--surface-muted);
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  color: var(--muted-text);
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  width: 100%;
}

.metric-toggle svg {
  flex-shrink: 0;
  height: 1.25rem;
  width: 1.25rem;
}

.metric-toggle.is-on {
  background: var(--selected-ward);
  border-color: var(--selected-ward);
  color: white;
}

.metric-toggle.is-high {
  background: var(--surface-strong);
  border-color: var(--surface-strong);
  color: white;
}

.metric-toggle:hover {
  border-color: var(--action);
}

.metric-toggle.is-on:hover {
  background: var(--brand-accent-dark);
  border-color: var(--brand-accent-dark);
}

.metric-toggle.is-high:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}

.wellbeing-equation {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--brand-wash) 42%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
  border-radius: var(--radius-md);
  /* One slim bar: label · formula · methodology link on a shared baseline, wrapping only when
     the formula truly needs it — every pixel here comes out of the map above. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding: 0.4rem 0.75rem;
}

.wellbeing-equation p:not(.eyebrow) {
  flex: 1 1 24rem;
  min-width: 0;
  /* Exactly one line, always — the map above is worth more than a second row of formula. The
     chips scroll sideways; the full text lives behind the "?" button. */
  overflow: hidden;
  white-space: nowrap;
}
.wellbeing-equation-line { align-items: center; display: flex; gap: 0.4rem; }
.eq-chips {
  display: flex;
  flex: 1;
  gap: 0.35rem;
  min-width: 0;
  overflow-x: auto;
  padding: 0.1rem 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.eq-chip {
  align-items: center;
  background: var(--hue-soft);
  border: 1.5px solid transparent;
  border-radius: 999px;
  color: var(--hue);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 700;
  gap: 0.3rem;
  padding: 0.15rem 0.3rem 0.15rem 0.2rem;
}
.eq-chip-w {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.05rem 0.4rem;
}
.eq-chip.is-high { border-color: var(--gold-edge); }
.eq-chip.is-high .eq-chip-w { background: var(--gold-wash); border-color: var(--gold-edge); color: var(--gold-ink); }
.eq-chip-x { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 0.95rem; line-height: 1; opacity: 0.7; padding: 0 0.2rem; }
.eq-chip-x:hover, .eq-chip-x:focus-visible { opacity: 1; }
.eq-chip-w:focus-visible, .eq-chip-x:focus-visible { outline: 2px solid var(--hue-bright); outline-offset: 1px; }
.eq-chip-label { white-space: nowrap; }

.methodology-equation { border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 10%, transparent); padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
/* per-measure notes in the "?" panel: the short how, the source, and the years behind the number */
.methodology-measures { border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 10%, transparent); display: grid; gap: 0.7rem; margin-bottom: 0.7rem; padding-bottom: 0.7rem; }
.methodology-measure h4 { font-size: 0.92rem; margin: 0 0 0.15rem; }
.methodology-measure p { color: var(--muted-text); font-size: 0.82rem; line-height: 1.45; margin: 0; }
.methodology-measure .methodology-source { font-size: 0.76rem; }
.methodology-measure .methodology-time { color: var(--text); font-weight: 600; margin-top: 0.15rem; }
.methodology-equation p:not(.eyebrow) { margin: 0; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }

.wellbeing-equation .delta-info {
  align-self: center;
}

.wellbeing-equation .equation-info {
  cursor: pointer;
  font-style: normal;
  margin-left: auto;
}

.wellbeing-equation p {
  margin: 0;
}

.wellbeing-equation p:not(.eyebrow) {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.wellbeing-equation span {
  overflow-wrap: anywhere;
}

.wellbeing-equation small {
  color: var(--muted-text);
  font-size: 0.72rem;
  line-height: 1.35;
}

.surprise-button {
  background: var(--surface-strong);
  border: 1.5px solid var(--surface-strong);
  border-radius: 999px;
  color: white;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.5rem 1rem;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  width: 100%;
}

.surprise-button:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: white;
}

.metric-secondary-action {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.45rem 0.75rem;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.metric-secondary-action:hover {
  background: var(--brand-wash);
  border-color: color-mix(in srgb, var(--brand-accent) 38%, transparent);
  color: var(--brand-accent-dark);
}

.metric-recommendation-panel {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

.metric-recommendation-panel p {
  color: var(--muted-text);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

.metric-recommendation-link {
  color: var(--action);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.metric-recommendation-link:hover {
  color: var(--brand-accent-dark);
}

.metric-suggestion-layout {
  box-sizing: border-box;
  display: grid;
  margin: 0 auto;
  max-width: 44rem;
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
}

.metric-suggestion-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-wash) 42%, transparent), color-mix(in srgb, var(--surface) 92%, transparent) 32%),
    var(--surface);
  gap: 1.2rem;
  overflow: visible;
}

.metric-suggestion-intro {
  display: grid;
  gap: 0.4rem;
}

.metric-suggestion-intro h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.05;
  margin: 0;
}

.metric-suggestion-intro p:not(.eyebrow) {
  color: var(--muted-text);
  margin: 0;
}

.metric-recommendation-form {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
}

.metric-recommendation-form[hidden] {
  display: none;
}

.metric-recommendation-form .panel-heading {
  gap: 0.2rem;
}

.metric-recommendation-form h3,
.metric-recommendation-form p {
  margin: 0;
}

.metric-recommendation-form .panel-heading p:not(.eyebrow) {
  color: var(--muted-text);
  font-size: 0.84rem;
  line-height: 1.4;
}

.metric-recommendation-form label {
  color: var(--text);
  display: grid;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.3rem;
}

.metric-recommendation-form label > span:not(.recommendation-label-row) {
  color: var(--muted-text);
  font-weight: 700;
}

.metric-recommendation-form input,
.metric-recommendation-form select,
.metric-recommendation-form textarea {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  box-sizing: border-box;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.55rem 0.65rem;
  width: 100%;
}

.metric-recommendation-form textarea {
  resize: vertical;
}

.recommendation-about-you {
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.65rem;
  margin: 0.35rem 0 0;
  padding: 0.75rem;
}

.recommendation-about-you legend {
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0 0.35rem;
  text-transform: uppercase;
}

.recommendation-contact-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recommendation-label-row {
  align-items: baseline;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 800;
}

.metric-recommendation-form label .location-help {
  color: var(--action);
  cursor: help;
  font-size: 0.78rem;
  font-weight: 900;
  position: relative;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.metric-recommendation-form label .location-help-tooltip {
  background: color-mix(in srgb, var(--shadow-ink) 96%, transparent);
  border-radius: 0.65rem;
  bottom: calc(100% + 0.45rem);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--shadow-ink) 24%, transparent);
  color: white;
  display: none;
  font-size: 0.84rem;
  font-weight: 800;
  left: 0;
  line-height: 1.45;
  max-width: min(22rem, 82vw);
  padding: 0.7rem 0.8rem;
  position: absolute;
  width: max-content;
  z-index: 800;
}

.location-help:hover .location-help-tooltip,
.location-help:focus .location-help-tooltip,
.location-help:focus-within .location-help-tooltip {
  display: block;
}

.recommendation-field-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recommendation-checkbox {
  align-items: start;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.recommendation-checkbox input {
  margin-top: 0.2rem;
  width: auto;
}

.metric-recommendation-status {
  border-radius: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.55rem 0.65rem;
}

.metric-recommendation-status.is-success {
  background: rgb(15 118 110 / 10%);
  color: var(--score-high);
}

.metric-recommendation-status.is-error {
  background: color-mix(in srgb, var(--score-low) 10%, transparent);
  color: var(--score-low);
}

.recommendation-submit-button {
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: 999px;
  color: white;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 0.6rem 1rem;
}

.recommendation-submit-button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}

.recommendation-submit-button:disabled {
  cursor: wait;
  opacity: 0.64;
}

.auth-layout {
  box-sizing: border-box;
  display: grid;
  margin: 0 auto;
  max-width: 42rem;
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
}

.auth-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-wash) 42%, transparent), color-mix(in srgb, var(--surface) 92%, transparent) 32%),
    var(--surface);
  gap: 1.2rem;
  overflow: visible;
}

.auth-intro {
  display: grid;
  gap: 0.4rem;
}

.auth-intro h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.05;
  margin: 0;
}

.auth-intro p:not(.eyebrow) {
  color: var(--muted-text);
  margin: 0;
}

.auth-form,
.auth-status,
.auth-dev-link,
.auth-admin-links,
.auth-account-summary {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.auth-form {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.auth-form label {
  color: var(--text);
  display: grid;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.3rem;
}

.auth-form input {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.55rem 0.65rem;
  width: 100%;
}

.auth-form button,
.auth-button {
  align-items: center;
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: 999px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  justify-content: center;
  margin: 0;
  padding: 0.6rem 1rem;
  text-decoration: none;
  width: 100%;
}

.auth-form button:hover,
.auth-button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: white;
}

.auth-status,
.auth-dev-link,
.auth-admin-links {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
}

.auth-status h2,
.auth-status p,
.auth-dev-link h2,
.auth-dev-link p,
.auth-admin-links h2,
.auth-admin-links p {
  margin: 0;
}

.auth-status h2,
.auth-dev-link h2,
.auth-admin-links h2 {
  font-size: 1rem;
}

.auth-status p,
.auth-dev-link p,
.auth-admin-links p {
  color: var(--muted-text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.auth-dev-link a {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.auth-account-summary {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.auth-account-summary span {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-account-summary strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.auth-actions {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-button-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--action);
}

.auth-button-secondary:hover {
  background: var(--brand-wash);
  border-color: color-mix(in srgb, var(--brand-accent) 38%, transparent);
  color: var(--brand-accent-dark);
}

.metric-button-tooltip {
  background: var(--surface-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-ink) 20%, transparent);
  box-sizing: border-box;
  color: white;
  display: grid;
  font-size: 0.8rem;
  gap: 0.2rem;
  left: 0;
  max-width: 220px;
  padding: 0.6rem 0.75rem;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 220px;
  z-index: 1000;
}

.metric-button-tooltip[hidden] {
  display: none;
}

.metric-button-tooltip strong {
  font-size: 0.85rem;
}

.metric-button-tooltip span {
  color: rgb(255 255 255 / 76%);
  font-size: 0.78rem;
}

.metric-button-tooltip small {
  color: rgb(255 255 255 / 60%);
  font-size: 0.72rem;
}

.metric-tooltip-row {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.metric-tooltip-row .metric-status-badge {
  font-size: 0.62rem;
}

.metric-tooltip-row small {
  color: rgb(255 255 255 / 60%);
  font-size: 0.72rem;
}

.metric-status-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.25rem 0.45rem;
  text-transform: uppercase;
  width: fit-content;
}

.metric-status-badge.is-populated {
  background: rgb(15 118 110 / 12%);
  color: var(--selected-ward);
}

.metric-status-badge.is-partially_populated {
  background: color-mix(in srgb, var(--score-low) 12%, transparent);
  color: #9a3412;
}

.metric-status-badge.is-source_pending {
  background: rgb(148 163 184 / 16%);
  color: var(--muted-text);
}

.metric-status-badge.is-source_unavailable {
  background: rgb(185 28 28 / 10%);
  color: #991b1b;
}

.metric-status-badge.is-ingestion_not_implemented {
  background: rgb(107 114 128 / 14%);
  color: #4b5563;
}

.metric-status-badge.is-zero_records_observed {
  background: rgb(202 138 4 / 12%);
  color: #854d0e;
}

.metric-transparency-content,
.transparency-meta {
  color: var(--muted-text);
}

.metric-transparency-content {
  display: grid;
  gap: 1rem;
  padding: 0.85rem;
}

.calculation-note,
.metric-domain-panel,
.metric-definition-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

.calculation-note p:last-child {
  margin-bottom: 0;
}

.metric-domain-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
}

.metric-domain-toc {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  position: sticky;
  top: 1rem;
}

.metric-domain-toc .eyebrow {
  margin-bottom: 0.25rem;
}

.metric-domain-toc-link {
  align-items: center;
  border-radius: 0.55rem;
  color: var(--text);
  display: flex;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 0.45rem;
  justify-content: space-between;
  padding: 0.45rem 0.5rem;
  text-decoration: none;
}

.metric-domain-toc-link:hover,
.metric-domain-toc-link:focus {
  background: var(--surface-muted);
  color: var(--action);
}

.metric-domain-toc-link strong {
  background: var(--surface-muted);
  border-radius: 999px;
  color: var(--action);
  font-size: 0.74rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.metric-domain-panels {
  display: grid;
  gap: 1rem;
}

.metric-domain-panel {
  display: grid;
  gap: 0.85rem;
  scroll-margin-top: 1rem;
}

.metric-domain-heading {
  display: grid;
  gap: 0.35rem;
}

.metric-domain-heading h4,
.metric-domain-heading p {
  margin: 0;
}

.metric-definition-list {
  display: grid;
  gap: 0.55rem;
}

.metric-definition-card {
  display: block;
  overflow: hidden;
  padding: 0;
}

.metric-definition-card[open] {
  border-color: color-mix(in srgb, var(--action) 34%, transparent);
}

.metric-definition-summary {
  cursor: pointer;
  display: grid;
  gap: 0.35rem;
  list-style: none;
  padding: 0.85rem;
}

.metric-definition-summary::-webkit-details-marker {
  display: none;
}

.metric-definition-summary > span:last-child {
  color: var(--muted-text);
  font-size: 0.9rem;
}

.metric-definition-body {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.metric-definition-body p {
  margin: 0;
}

.metric-nominator-attribution {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem;
}

.metric-nominator-attribution h5,
.metric-nominator-attribution p {
  margin: 0;
}

.metric-nominator-attribution h5 {
  color: var(--text);
  font-size: 0.95rem;
}

.metric-definition-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: space-between;
}

.metric-definition-title {
  color: var(--text);
  font-weight: 900;
}

.metric-definition-meta {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.metric-definition-meta div {
  display: grid;
  gap: 0.1rem;
}

.metric-definition-meta dt {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-definition-meta dd {
  font-size: 0.86rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.metric-definition-meta a {
  font-weight: 800;
}

.metric-technical-details {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.metric-technical-details summary {
  color: var(--text);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
}

.metric-definition-meta-admin {
  margin-top: 0.75rem;
}

.metric-technical-details pre {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0.75rem 0 0;
  max-height: 18rem;
  overflow: auto;
  padding: 0.75rem;
}

.control-label {
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: -0.5rem;
}

.score-card,
.history-card {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.score-card strong {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
}

.score-card span {
  color: var(--muted-text);
}

.metric-score-card {
  border-left: 0.45rem solid var(--score-accent);
}

.comparison-table {
  display: grid;
  gap: 0.35rem;
}

.comparison-header,
.comparison-row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.comparison-header {
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 0.5rem;
}

.comparison-row {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  padding: 0.75rem;
  text-align: left;
}

.comparison-row.is-selected {
  border-color: var(--selected-ward);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 18%, transparent);
}

/* Elevated when the matching area is hovered on the map. */
.comparison-row.is-hovered {
  border-color: var(--action);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  transform: translateY(-1px);
}

.comparison-row-main {
  align-items: center;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto auto minmax(0, 1fr);
  min-width: 0;
}

.comparison-row-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.comparison-row-title {
  font-weight: 800;
}

.comparison-row-community-areas {
  color: var(--muted-text);
  display: block;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ward-signifier-thumb,
.ward-signifier-fallback {
  border-radius: 0.75rem;
  flex-shrink: 0;
  height: 3.25rem;
  object-fit: cover;
  width: 3.25rem;
}

.ward-signifier-fallback {
  align-items: center;
  background: var(--surface-muted);
  color: var(--action);
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 900;
  justify-content: center;
}

.ward-signifier-fallback--code {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ranker-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

/* the leaderboard's head row: title + a filter that knows neighborhood names */
.ranker-head { align-items: center; display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.ranker-head .ranker-heading { flex: 1; margin: 0; }
.ranker-head[hidden] { display: none; }
.ranker-search,
.metric-search {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  display: flex;
  flex: 0 1 12rem;
  gap: 0.35rem;
  height: 2rem;
  min-width: 0;
  padding: 0 0.6rem;
}
.ranker-search input,
.metric-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  min-width: 0;
  width: 100%;
}
.ranker-search input:focus-visible,
.metric-search input:focus-visible { outline: 2px solid var(--hue-bright); outline-offset: 2px; }
.ranker-search input::-webkit-search-cancel-button { cursor: pointer; }

/* rank numeral, score bar and "why it ranks" tags on every row */
.comparison-row-rank { color: var(--muted-text); font-size: 0.78rem; font-weight: 800; min-width: 1.5rem; text-align: right; }
.comparison-row-bar { background: var(--hair); border-radius: 2px; grid-column: 1 / -1; height: 3px; overflow: hidden; }
.comparison-row-bar i { background: var(--chart-ahead); display: block; height: 100%; }
.comparison-row-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; grid-column: 1 / -1; }
.comparison-row-tag {
  background: var(--surface-muted);
  border-radius: 0.45rem;
  color: var(--muted-text);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}
.comparison-row-tag.m-gold { background: var(--gold-wash); color: var(--gold-ink); }
.comparison-row-tag.m-silver { background: var(--silver-wash); color: var(--silver-ink); }
.comparison-row-tag.m-bronze { background: var(--bronze-wash); color: var(--bronze-ink); }

/* the mini report's at-a-glance trio and top contributors */
.mini-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0.8rem 0 0; }
.mini-stat {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  text-align: center;
}
.mini-stat small { color: var(--muted-text); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mini-stat b { color: var(--hue); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.mini-stat .num small { color: var(--muted-text); font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
.mini-stat .mini-stat-name { color: var(--text); font-size: 0.85rem; line-height: 1.2; overflow-wrap: anywhere; }
.mini-contrib { border-top: 1px solid var(--hair); display: grid; gap: 0.25rem; margin-top: 0.6rem; padding-top: 0.55rem; }
.mini-contrib-row { align-items: baseline; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr) auto auto; }
.mini-contrib-label { font-size: 0.8rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-contrib-row b { font-size: 0.85rem; }
/* the number behind the score: raw value, count and population, under the label */
.comparison-note { color: var(--muted-text); font-size: 0.72rem; margin: 0.15rem 0 0.35rem; }
.mini-contrib-head { color: var(--muted-text); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.mini-contrib-raw { color: var(--muted-text); font-size: 0.72rem; grid-column: 1 / -1; line-height: 1.3; margin-top: -0.15rem; }
.mini-weight { background: var(--surface-muted); border-radius: 999px; color: var(--muted-text); font-size: 0.66rem; font-weight: 800; padding: 0.1rem 0.45rem; }
.mini-weight.is-high { background: var(--gold-wash); color: var(--gold-ink); }

/* Visual signifiers provenance page */
.signifiers-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.signifiers-header h1 {
  margin: 0.2rem 0;
}
.signifiers-header p {
  max-width: 64ch;
  color: rgb(74 92 89);
}
.signifier-group h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.15rem;
  margin: 0 0 0.8rem;
}
.signifier-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgb(107 124 121);
}
.signifier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
}
.signifier-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.signifier-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgb(233 239 238);
}
.signifier-card figcaption {
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.signifier-area {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(107 124 121);
}
.signifier-subject {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}
.signifier-credit {
  font-size: 0.7rem;
  color: rgb(122 138 135);
  line-height: 1.35;
}
.signifier-credit a {
  color: inherit;
  text-decoration: underline;
}

/* Methodology notes (caveat compiler) */
.methodology-link {
  margin-top: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: rgb(107 124 121);
  text-decoration: underline;
  cursor: pointer;
}
.methodology-link:hover {
  color: rgb(42 59 56);
}
.methodology-body { overflow-wrap: anywhere; }
.metric-row-also,
.metric-toggle-also { color: var(--muted-text); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.metric-row-also { margin-left: 0.35rem; }
.methodology-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.methodology-caveat h4 {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
}
.methodology-caveat p {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  color: rgb(74 92 89);
}
.methodology-metrics {
  font-size: 0.74rem;
  color: rgb(107 124 121);
}
.methodology-empty {
  font-size: 0.85rem;
  color: rgb(107 124 121);
}

.sparkline {
  color: var(--selected-ward);
  height: 9rem;
  width: 100%;
}

.timeline-series {
  cursor: default;
  transition: opacity 120ms ease;
}

.timeline-series.is-hovered {
  opacity: 1;
}

.sparkline circle {
  fill: var(--brand-accent-dark);
}

.timeline-range {
  color: var(--text);
  font-size: 0.92rem;
  margin: 0.25rem 0 0.35rem;
}

.timeline-note {
  color: var(--muted-text);
  font-size: 0.9rem;
}

.history-card {
  position: relative;
}

.timeline-tooltip {
  background: color-mix(in srgb, var(--shadow-ink) 94%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  color: white;
  display: grid;
  font-size: 0.82rem;
  gap: 0.15rem;
  max-width: 12rem;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.timeline-tooltip[hidden] {
  display: none;
}

.timeline-tooltip span,
.timeline-tooltip small {
  color: rgb(255 255 255 / 78%);
}

.observation-list {
  display: grid;
  gap: 0.5rem;
}

.observation-list article {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem;
}

.observation-list span,
.observation-list small {
  color: var(--muted-text);
}

.ward-label {
  background: var(--surface-strong);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow-ink) 20%, transparent);
  color: white;
  font-weight: 900;
  padding: 0.25rem 0.5rem;
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/* Metrics page */

.metrics-layout {
  box-sizing: border-box;
  display: grid;
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 64rem;
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
}

.metrics-header {
  display: grid;
  gap: 0.5rem;
}

.metrics-header h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.05;
  margin: 0;
}

.metrics-header p {
  color: var(--muted-text);
  margin: 0;
  max-width: 48rem;
}

.metrics-panel {
  overflow: visible;
  padding: 1.5rem;
}

.metrics-panel .metric-transparency-content {
  padding: 0;
}

.metrics-panel .metric-domain-toc {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.metric-recommendations-content {
  display: grid;
  gap: 1rem;
}

.admin-users-content {
  display: grid;
  gap: 0.75rem;
}

.admin-metadata-selector-label {
  color: var(--text);
  display: grid;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 0.35rem;
}

.admin-metadata-selector-label select {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  color: var(--text);
  font: inherit;
  padding: 0.65rem 0.7rem;
}

.admin-metric-metadata-form {
  background: transparent;
  border: 0;
  padding: 0;
}

.admin-metric-metadata-form fieldset {
  margin-inline: 0;
}

.admin-metric-suggestions {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.admin-metric-suggestions[hidden] {
  display: none;
}

.admin-metric-suggestion-list {
  display: grid;
  gap: 0.55rem;
}

.admin-metric-suggestion-card {
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.admin-metric-suggestion-card div {
  display: grid;
  gap: 0.2rem;
}

.admin-metric-suggestion-card span,
.admin-metric-suggestion-card small {
  color: var(--muted-text);
  font-size: 0.82rem;
}

.admin-user-card {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem;
}

.admin-user-card h3,
.admin-user-card p {
  margin: 0;
}

/* the access chips reuse .accessreq-chip from the request queue so both pages name a role alike */
.admin-user-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.admin-users-roles legend {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-users-roles legend span {
  color: var(--muted-text);
  font-weight: 500;
}

/* the shared .access-choice cards sit inside a .metric-recommendation-form, whose label rules
   would otherwise stack and mute them */
.admin-users-roles .access-choice {
  font-size: inherit;
  font-weight: 400;
}

.admin-users-roles .access-choice > span.access-choice-face {
  color: var(--text);
  font-weight: 500;
  /* the label is a grid here, so the face stretches on its own; the shared height:100% would
     overflow the row instead */
  height: auto;
}

.admin-user-card small {
  color: var(--muted-text);
  display: block;
  margin-top: 0.4rem;
}

.danger-button {
  background: color-mix(in srgb, var(--score-low) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--score-low) 18%, transparent);
  border-radius: 999px;
  color: var(--score-low);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.45rem 0.75rem;
}

.danger-button:hover {
  background: var(--score-low);
  border-color: var(--score-low);
  color: white;
}

.danger-button:disabled {
  cursor: wait;
  opacity: 0.64;
}

.metric-recommendation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.metric-recommendation-card header {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.metric-recommendation-card h2,
.metric-recommendation-card h3,
.metric-recommendation-card p,
.metric-recommendation-card dl {
  margin: 0;
}

.metric-recommendation-card h2 {
  font-size: 1.1rem;
}

.metric-recommendation-card h3 {
  font-size: 0.9rem;
}

.metric-recommendation-card time {
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.metric-submissions-summary {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.35fr);
  padding: 1rem;
}

.submission-summary-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.submission-summary-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.submission-summary-list li {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.metric-submission-list,
.metric-submission-edit-form {
  display: grid;
  gap: 1rem;
}

.metric-submission-edit-form select {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  color: var(--text);
  font: inherit;
  padding: 0.65rem 0.7rem;
}

.metric-recommendation-meta {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-recommendation-meta div {
  background: var(--surface-muted);
  border-radius: 0.65rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem;
}

.metric-recommendation-meta dt {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-recommendation-meta dd {
  font-size: 0.9rem;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .map-card.is-shading-loading #map .leaflet-interactive,
  .metric-loading-spinner,
  .metric-loading-tile {
    animation: none;
  }
  #map .leaflet-interactive,
  .metric-toggle,
  .preset-chip,
  .comparison-row,
  .surprise-button,
  .metric-secondary-action {
    transition: none;
  }
  .comparison-row.is-hovered { transform: none; }
}

@media (max-width: 960px) {
  .explorer-layout {
    height: auto;
    /* minmax(0, …), never bare 1fr: a bare track's auto minimum cannot shrink below its
       content, so one unwrappable child (the equation line, a ranker row) widens the whole
       column past the phone viewport and the map "thinks" it is 800px wide. */
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .metric-domain-layout {
    grid-template-columns: 1fr;
  }

  .metric-domain-toc {
    position: static;
  }

  #visualizer-map.visualizer-card {
    min-height: 55vh;
  }

  #map {
    min-height: 55vh;
  }


  .visualizer-header {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .visualizer-tabs {
    min-width: 0;
    right: 0.75rem;
    top: 0.75rem;
  }

  .input-panel {
    overflow: visible;
  }
}

/* Display-settings gear in the input panel heading. */
.input-panel-heading {
  position: relative;
}

.settings-button {
  background: transparent;
  border: 0;
  color: var(--muted-text);
  cursor: pointer;
  height: 1.6rem;
  width: 1.6rem;
  padding: 0.15rem;
  position: absolute;
  right: 0;
  top: 0;
}

.settings-button:hover {
  color: var(--text);
}

.settings-field {
  border: 0;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.settings-field legend {
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.settings-option {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
}

/* inside the suggestion forms the shared label rule makes labels grids and inputs 100% wide,
   which stacks the checkbox above its sentence */
.metric-recommendation-form .settings-option {
  align-items: flex-start;
  display: flex;
}

.metric-recommendation-form .settings-option input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  width: auto;
}

/* Change-over-time coverage: a small info icon beside the equation; detail lives in its tooltip. */
.delta-info {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted-text);
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  height: 1.1rem;
  width: 1.1rem;
  margin-left: 0.35rem;
  padding: 0;
  vertical-align: text-bottom;
}

.delta-info[hidden] {
  display: none;
}

/* Mobile-only controls stay out of the desktop layout entirely. */
.mobile-view-toggle,
.mobile-strip-bar,
.mobile-equation {
  display: none;
}

@media (max-width: 640px) {
  /* --- Simplified phone layout: one card at a time + a bottom metric strip. --- */

  .visualizer-panel {
    /* the toggle is visible on phones — give it back its own row */
    grid-template-rows: auto minmax(0, 1fr);
  }

  .mobile-view-toggle {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: grid;
    gap: 0.25rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0.75rem;
    padding: 0.25rem;
  }

  .mobile-view-toggle button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--muted-text);
    font-weight: 700;
    padding: 0.5rem 0.75rem;
  }

  .mobile-view-toggle button.is-active {
    background: var(--brand-accent);
    color: white;
  }

  /* One card at a time: collapse the desktop two-column map+ranker grid. */
  .visualizer-cards {
    grid-template-columns: minmax(0, 1fr);  /* same auto-minimum trap as .explorer-layout */
  }

  .visualizer-cards[data-mobile-view="map"] .ranker-card,
  .visualizer-cards[data-mobile-view="ranker"] .map-card {
    display: none;
  }

  /* Room for the fixed metric strip at the bottom of the viewport. */
  .explorer-layout {
    padding-bottom: 6.5rem;
  }

  /* The input panel becomes a fixed bottom sheet, collapsed to a single tile strip. */
  .input-panel {
    background: var(--surface);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -10px 28px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
    left: 0;
    position: fixed;
    right: 0;
    z-index: 900;
  }

  .input-panel .input-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0.5rem 0.75rem 0.75rem;
  }

  /* Compact hero: the site header already says "Ward Wise Penlight", so the phone keeps only the
     one-line instruction — more useful than the brand statement in limited space. */
  .visualizer-title-group .eyebrow,
  .visualizer-title-group h1 {
    display: none;
  }

  .visualizer-header {
    margin-bottom: 0.5rem;
    padding: 0.9rem 1rem;
  }

  .visualizer-title-group p {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0;
  }

  /* The wellbeing equation, surfaced between the map/leaderboard and the metric strip. */
  .mobile-equation {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: block;
    font-size: 0.88rem;
    line-height: 1.45;
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
  }

  /* Compact action bar above the tile strip: Random / All / None + the sheet expander. */
  .mobile-strip-bar {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem 0;
  }

  .mobile-strip-pill {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
  }

  .input-panel-expander {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    padding: 0.3rem 0.85rem;
  }

  .input-panel-expander .expander-close-label,
  .input-panel.is-expanded .input-panel-expander .expander-open-label {
    display: none;
  }

  .input-panel.is-expanded .input-panel-expander .expander-close-label {
    display: inline;
  }

  /* The sheet already has full-size selection actions; keep only Done in the bar there. */
  .input-panel.is-expanded .mobile-strip-pill {
    display: none;
  }

  /* Selected tiles group to the front of the strip so the active set is glanceable. */
  .input-panel:not(.is-expanded) .metric-button-grid .metric-toggle.is-on,
  .input-panel:not(.is-expanded) .metric-button-grid .metric-toggle.is-high {
    order: -1;
  }

  /* Expanded, the pill moves inside the sheet and stays pinned while the metrics scroll. */
  .input-panel.is-expanded .input-panel-expander {
    left: auto;
    margin: 0.5rem auto 0;
    position: sticky;
    top: 0.5rem;
    transform: none;
    width: fit-content;
    z-index: 5;
  }

  /* Collapsed: hide everything but the tile strip. */
  .input-panel:not(.is-expanded) .panel-heading,
  .input-panel:not(.is-expanded) .metric-selection-intro,
  .input-panel:not(.is-expanded) .wellbeing-equation,
  .input-panel:not(.is-expanded) .metric-recommendation-panel {
    display: none;
  }

  /* The strip: the same metric tiles in one horizontally scrollable row. */
  .input-panel:not(.is-expanded) .metric-button-grid {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .input-panel:not(.is-expanded) .metric-button-grid > * {
    flex: 0 0 auto;
  }

  /* Collapsed strip stays one flat scroll row: the domain sections dissolve (display: contents
     promotes their tiles to flex items of the strip) and domain labels wait for the expanded sheet. */
  .input-panel:not(.is-expanded) .metric-domain-row,
  .input-panel:not(.is-expanded) .metric-domain-tiles {
    display: contents;
  }

  .input-panel:not(.is-expanded) .metric-domain-label {
    display: none;
  }

  /* Tiles need an explicit size in the flex strip (the grid normally sizes them). */
  .input-panel:not(.is-expanded) .metric-button-grid .metric-toggle {
    flex: 0 0 auto;
    height: 3rem;
    width: 3rem;
  }

  /* Expanded: a scrollable sheet with the full panel. */
  .input-panel.is-expanded {
    max-height: 85vh;
    overflow-y: auto;
  }

  .site-header,
  .admin-user-card,
  .admin-metric-suggestion-card,
  .metric-definition-meta,
  .metric-recommendation-card header,
  .metric-recommendation-meta,
  .auth-actions,
  .recommendation-contact-grid,
  .recommendation-field-grid {
    grid-template-columns: 1fr;
  }

  .metric-button-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .site-nav {
    justify-content: flex-start;
  }

  .visualizer-header h1 {
    white-space: normal;
  }

  .visualizer-tabs {
    left: 0.75rem;
    right: 0.75rem;
  }
}

/* !important on the box properties: form-field rules such as .fd-theme input[type="text"] are more
   specific and otherwise stretch a hidden input back to full width, which scrolled the page sideways. */
.visually-hidden {
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px !important; width: 1px !important;
  margin: -1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  white-space: nowrap;
}

/* Support page: action cards + nomination coverage + metric growth */
.support-link { font-weight: 700; }
.support-cta-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.support-cta { flex-shrink: 0; padding: 0.55rem 1rem; border: 1.5px solid currentColor; border-radius: 999px; }
.signifier-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.signifier-example { margin: 0; display: grid; gap: 0.35rem; }
.signifier-example img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.signifier-example figcaption { display: grid; font-size: 0.8rem; line-height: 1.3; }
.signifier-example figcaption span { color: var(--muted-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signifier-see-all { font-size: 0.9rem; margin: 0; }

/* About page: nomination coverage + metric growth */
.about-layout { gap: 1.25rem; }
.about-panel { display: grid; gap: 1rem; }
.about-progress { display: grid; gap: 0.6rem; }
.about-progress-stat { display: flex; align-items: baseline; gap: 0.5rem; }
.about-progress-count { color: var(--brand-accent-dark); font-size: 2.4rem; font-weight: 600; line-height: 1; }
.about-progress-of { color: var(--muted-text); font-size: 1rem; }
.about-progress-bar { background: var(--surface-muted); border-radius: 999px; height: 0.6rem; overflow: hidden; }
.about-progress-bar > span { background: var(--brand-accent); border-radius: 999px; display: block; height: 100%; transition: width 400ms ease; }
.about-progress-note { color: var(--muted-text); font-size: 0.95rem; margin: 0; }
.ward-grid { display: grid; gap: 0.35rem; grid-template-columns: repeat(10, 1fr); }
.ward-cell {
  align-items: center; aspect-ratio: 1 / 1; background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px); color: var(--muted-text); display: flex; font-size: 0.82rem;
  font-variant-numeric: tabular-nums; justify-content: center;
}
.ward-cell.is-nominated { background: var(--brand-accent); border-color: var(--brand-accent-dark); color: white; font-weight: 600; }
.about-growth-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; }
.about-sparkline { color: var(--selected-ward, var(--brand-accent)); height: 10rem; width: 100%; }
.about-sparkline circle { fill: var(--brand-accent-dark); }
.about-growth-axis { color: var(--muted-text); display: flex; font-size: 0.85rem; justify-content: space-between; margin-top: 0.25rem; }
/* Growth sparkline hover: tiny dots get full-height transparent bands so any point in a
   day's column triggers its tooltip; days that added a metric get a brighter, larger dot. */
.about-growth-plot { position: relative; }
.about-sparkline .spark-band { fill: transparent; cursor: pointer; }
.about-sparkline .spark-dot.is-add { fill: var(--brand-accent); }
.spark-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 9px));
  pointer-events: none;
  min-width: 9rem;
  max-width: 15rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 9px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-ink) 16%, transparent);
  font-size: 0.78rem;
  line-height: 1.32;
  text-align: left;
}
.spark-tip.below { transform: translate(-50%, 9px); }
.spark-tip[hidden] { display: none; }
.spark-tip-date { color: var(--muted-text); font-size: 0.72rem; font-weight: 700; }
.spark-tip-head { font-weight: 700; margin-top: 0.05rem; }
.spark-tip-empty { color: var(--muted-text); margin-top: 0.1rem; }
.spark-tip-list { display: grid; gap: 0.15rem; list-style: none; margin: 0.3rem 0 0; padding: 0; }
.spark-tip-list li { color: var(--text); }
.spark-tip-list li.spark-tip-more { color: var(--muted-text); font-weight: 600; }
.about-metric-now { color: var(--text); font-size: 1.1rem; }
.about-error { color: var(--muted-text); }
@media (max-width: 560px) { .ward-grid { grid-template-columns: repeat(5, 1fr); } }

/* Metrics tab: subtabs + deep-dive + comparison biplot */
.metric-subtabs { display: flex; gap: 0.4rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }

/* Ward report */
.wardreport-context { color: var(--muted-text); font-size: 0.85rem; align-self: center; }
.panel .wardreport-domain { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text); }

/* Ward report header: identity + coverage + the one-line read, so the top of the report says
   what you are looking at instead of echoing the picker. */
.wardreport-controls { align-items: center; }
.wardreport-controls #wardreport-ward { max-width: 22rem; }
.wardreport-header {
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
}
.wardreport-identity { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.wardreport-identity h2 { font-size: 1.5rem; margin: 0; }
.wardreport-areas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wardreport-area {
  background: var(--surface-muted);
  border-radius: 999px;
  color: var(--muted-text);
  font-size: 0.76rem;
  padding: 0.2rem 0.6rem;
}
.wardreport-area em { font-style: normal; margin-left: 0.35rem; opacity: 0.7; }
.wardreport-readout { color: var(--muted-text); font-size: 0.88rem; margin: 0; }

/* The snapshot bloom: one petal per domain, radius = equal-weight index. Minimal on purpose —
   shape and colour carry the story; numbers wait in tooltips and the accordions below. */
.wardreport-bloom {
  display: block;
  margin: 0 auto;
  max-width: 27rem;
  width: 100%;
}
.wardreport-bloom .bloom-ring { fill: none; stroke: var(--border); stroke-width: 0.75; opacity: 0.55; }
.wardreport-bloom .bloom-petal {
  cursor: pointer;
  fill: var(--text);
  fill-opacity: 0.14;
  stroke: var(--text);
  stroke-opacity: 0.25;
  stroke-width: 1;
  transition: fill-opacity 140ms ease;
}
.wardreport-bloom .bloom-petal.is-strong { fill: var(--positive, #2c7a4b); fill-opacity: 0.42; stroke: var(--positive, #2c7a4b); stroke-opacity: 0.5; }
.wardreport-bloom .bloom-petal.is-weak { fill: var(--negative, #b4482e); fill-opacity: 0.34; stroke: var(--negative, #b4482e); stroke-opacity: 0.5; }
.wardreport-bloom .bloom-petal.is-muted { fill: none; stroke-dasharray: 3 3; }
.wardreport-bloom .bloom-petal:hover { fill-opacity: 0.6; }
.wardreport-bloom .bloom-label {
  fill: var(--muted-text);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.wardreport-bloom .bloom-center {
  fill: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wardreport-topline-note { color: var(--muted-text); font-size: 0.78rem; margin: 0.2rem 0 1rem; text-align: center; }

/* Domain accordions: index + tallies stay visible in the summary; metric rows unfold below. */
.wardreport-accordion { border-top: 1px solid var(--border); }
/* Grid, not flex: every column starts at the same x down the whole page, so the eye can read
   indices, ranks, bars and arrows as columns instead of ragged inline runs. */
.wardreport-accordion summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  /* every column fixed except the name: an `auto` trend column widened for two-digit
     counts (▼11) and shifted the whole row out of alignment */
  grid-template-columns: 0.9rem minmax(0, 1fr) 3.2rem 5.6rem 4.4rem 3.6rem;
  gap: 0.55rem;
  list-style: none;
  padding: 0.7rem 0.15rem;
}
.wardreport-accordion summary::-webkit-details-marker { display: none; }
.wardreport-accordion summary::before {
  content: "\25B8";
  color: var(--muted-text);
  font-size: 0.7rem;
}
.wardreport-accordion[open] summary::before { content: "\25BE"; }
.wardreport-accordion .accordion-index {
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.wardreport-accordion .accordion-rank {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wardreport-accordion .accordion-index.is-strong,
.wardreport-accordion .accordion-rank.is-strong { color: var(--positive, #2c7a4b); }
.wardreport-accordion .accordion-index.is-weak,
.wardreport-accordion .accordion-rank.is-weak { color: var(--negative, #b4482e); }
.wardreport-accordion .accordion-index.is-muted,
.wardreport-accordion .accordion-rank.is-muted { opacity: 0.55; }
/* Numeric table: label + 3 level columns + 3 change columns. Colour carries good/bad so the
   cells can stay pure figures. */
.wardreport-row { display: grid; grid-template-columns: minmax(9rem, 1.6fr) repeat(6, minmax(3.4rem, 0.7fr)); gap: 0.5rem; align-items: center; padding: 0.26rem 0; border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 5%, transparent); font-size: 0.84rem; }
.wardreport-head { border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 12%, transparent); color: var(--muted-text); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 0.3rem; }
.wardreport-label { display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }
.wardreport-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wardreport-label svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted-text); }
.wardreport-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wardreport-avg { color: var(--muted-text); }
.wardreport-na { color: color-mix(in srgb, var(--shadow-ink) 32%, transparent); }
.wardreport-rel, .wardreport-trend { font-weight: 600; }
/* rank fallback: a different encoding, so it reads a little differently */
.wardreport-rank { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.92; }
.wardreport-trend em { font-style: normal; font-weight: 400; color: var(--muted-text); font-size: 0.7rem; display: block; line-height: 1.1; }
.is-good { color: #166534; }
.is-bad { color: #9f1239; }
.is-flat { color: var(--muted-text); }
.wardreport-footnote { color: var(--muted-text); font-size: 0.72rem; margin: 0.9rem 0 0; max-width: 46rem; }
.wardreport-bestlight { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.88rem; }
.wardreport-bestlight-note { color: var(--muted-text); font-size: 0.85rem; margin: 0.2rem 0 0.4rem; }
@media (max-width: 720px) {
  .wardreport-row { grid-template-columns: minmax(7rem, 1.4fr) repeat(3, minmax(2.8rem, 1fr)); font-size: 0.78rem; }
  .wardreport-row > :nth-child(3), .wardreport-row > :nth-child(6), .wardreport-row > :nth-child(7) { display: none; }
}

/* Reports subtabs: reference group behind an info toggle */
.metric-subtab-divider { width: 1px; align-self: stretch; background: color-mix(in srgb, var(--shadow-ink) 12%, transparent); margin: 0 0.15rem; }
.reference-toggle { font-style: italic; font-family: Georgia, serif; min-width: 2rem; }
.reference-tabs { display: inline-flex; gap: 0.4rem; }
.reference-tabs[hidden] { display: none; }
.metric-definition-card.is-highlighted { outline: 2px solid color-mix(in srgb, var(--brand-accent) 55%, transparent); outline-offset: 3px; border-radius: var(--radius-md); }
.wardreport-label a { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--shadow-ink) 25%, transparent); }
.wardreport-label a:hover { border-bottom-color: currentColor; }
/* Partner deep link (e.g. Electrify Chicago) — quiet enough not to compete with the metric name,
   visible enough that a reader who wants the underlying records can find it. */
.wardreport-explore { flex-shrink: 0; font-size: 0.72rem; color: var(--muted-text); white-space: nowrap; }
.wardreport-label a.wardreport-explore { border-bottom: 0; }
.wardreport-label a.wardreport-explore:hover { color: var(--brand-accent-dark); text-decoration: underline; }
.metric-explore-note { display: block; color: var(--muted-text); font-size: 0.78rem; margin-top: 0.15rem; }

/* Term report (alderpeople) */
/* Collapsed by default: the caveats matter, but they shouldn't stand between the reader and the plot. */
.alder-honesty { margin: 0.1rem 0 0.7rem; }
.alder-honesty > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted-text); font-size: 0.8rem; width: fit-content; }
.alder-honesty > summary::-webkit-details-marker { display: none; }
.alder-honesty-mark { display: inline-grid; place-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-muted); font-family: Georgia, serif; font-style: italic; font-size: 0.72rem; }
.alder-honesty > summary:hover { color: var(--text); }
.alder-honesty-body { color: var(--muted-text); font-size: 0.82rem; max-width: 54rem; display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.alder-honesty-body p { margin: 0; }
.alder-biplot { width: 100%; max-width: 46rem; height: auto; display: block; }
.alder-zero { stroke: color-mix(in srgb, var(--shadow-ink) 18%, transparent); stroke-dasharray: 4 3; }
.alder-quad { fill: var(--muted-text); font-size: 11px; font-style: italic; }
.alder-axis { fill: var(--muted-text); font-size: 11px; }
.alder-ring { fill: none; stroke: color-mix(in srgb, var(--brand-accent) 55%, transparent); stroke-width: 1.5; }
.alder-fallback { fill: var(--surface-muted); stroke: var(--border); }
.alder-marker text { font-size: 10px; text-anchor: middle; fill: var(--text); }
.attribution-lead { color: var(--muted-text); font-size: 0.85rem; margin: 0.2rem 0 0.7rem; }
.attribution-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
/* Own grid context — .alder-card in common.js is the two-column alderperson profile block. */
.attribution-card { border: 1px solid color-mix(in srgb, var(--brand-accent) 16%, transparent); border-radius: var(--radius-md); padding: 0.85rem; display: block; }
.attribution-card h4 { margin: 0; font-size: 0.95rem; }
.attribution-note { color: var(--muted-text); font-size: 0.75rem; margin: 0.15rem 0 0.6rem; }
.attribution-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.attribution-card li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.attribution-card img, .attribution-num { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.attribution-num { display: inline-grid; place-content: center; background: var(--surface-muted); border: 1px solid var(--border); font-size: 0.75rem; }
.attribution-card em { display: block; font-style: normal; color: var(--muted-text); font-size: 0.75rem; }
.alder-tally { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: baseline; margin: 0.5rem 0 1.4rem; font-size: 0.85rem; }
.alder-tally strong { font-size: 1.15rem; color: var(--brand-accent-dark, #155e75); }
.alder-tally-note { color: var(--muted-text); font-size: 0.75rem; }

/* Data-years availability grid */
.yearsgrid-controls { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 0.75rem; font-size: 0.85rem; }
.yearsgrid-controls select { margin-left: 0.35rem; }
.yearsgrid-legend { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--muted-text); margin-bottom: 0.6rem; }
.yearsgrid-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.panel .yearsgrid-domain { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text); margin: 2rem 0 0.3rem; }
#yearsgrid-content > .yearsgrid-domain:first-child { margin-top: 0.4rem; }
.yearsgrid-row { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, max-content) max-content; gap: 0.9rem; justify-content: start; align-items: center; padding: 1px 0; }
.yearsgrid-head { color: var(--muted-text); font-size: 0.7rem; }
.yearsgrid-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.yearsgrid-cells { display: flex; gap: 2px; }
.yearsgrid-cell, .yearsgrid-year { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.yearsgrid-year { font-style: normal; font-size: 0.65rem; text-align: center; height: auto; }
.yearsgrid-cell.is-measured { background: var(--brand-accent-dark, #155e75); }
.yearsgrid-cell.is-carried { background: color-mix(in srgb, var(--action) 28%, transparent); }
.yearsgrid-cell.is-constant { background: color-mix(in srgb, var(--brand-accent) 45%, transparent); }
.yearsgrid-cell.is-empty { background: color-mix(in srgb, var(--shadow-ink) 8%, transparent); }
.yearsgrid-note { font-size: 0.72rem; color: var(--muted-text); white-space: nowrap; }
@media (max-width: 640px) {
  .yearsgrid-row { grid-template-columns: minmax(7rem, 9rem) 1fr; }
  .yearsgrid-note { display: none; }
}
.metric-subtab {
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted-text); cursor: pointer; font-size: 0.92rem; padding: 0.4rem 1rem;
}
.metric-subtab.is-active { background: var(--surface-strong); border-color: var(--surface-strong); color: #fff; }
.metric-tool-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.metric-tool-controls label { color: var(--muted-text); display: grid; font-size: 0.82rem; gap: 0.25rem; }
.metric-tool-controls select { font-size: 0.95rem; min-width: 12rem; padding: 0.35rem 0.5rem; }
.metric-corr { color: var(--text); font-size: 1rem; margin: 0 0 0.75rem; }
.metric-tool-hint { color: var(--muted-text); }
.compare-scatter { color: var(--brand-accent); width: 100%; max-width: 100%; height: auto; }
.compare-axis { stroke: var(--border); stroke-width: 1; }
.compare-tick { fill: var(--muted-text); font-size: 9px; }
.compare-axis-label { fill: var(--text); font-size: 11px; }
.compare-regline { stroke: var(--muted-text); stroke-dasharray: 4 3; stroke-width: 1.2; }
.compare-dot { fill: var(--brand-accent); fill-opacity: 0.7; stroke: var(--brand-accent-dark); stroke-width: 0.6; }
.compare-dot:hover { fill: var(--brand-accent-dark); fill-opacity: 1; }
.deepdive-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; }
.deepdive-stats > div { display: grid; }
.deepdive-stat-label { color: var(--muted-text); font-size: 0.78rem; }
.deepdive-stat-num { color: var(--brand-accent-dark); font-size: 1.5rem; font-weight: 600; }
.deepdive-stat-sub { color: var(--muted-text); font-size: 0.8rem; }
.deepdive-list { display: grid; gap: 0.3rem; }
.deepdive-row { align-items: center; display: grid; gap: 0.6rem; grid-template-columns: 9rem 1fr 3rem; }
.deepdive-name { color: var(--text); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deepdive-bar { background: var(--surface-muted); border-radius: 999px; height: 0.55rem; overflow: hidden; }
.deepdive-bar > span { background: var(--brand-accent); border-radius: 999px; display: block; height: 100%; }
.deepdive-val { color: var(--muted-text); font-size: 0.82rem; font-variant-numeric: tabular-nums; text-align: right; }

/* Deep-dive: title + share button, then narrative sections */
.deepdive-header { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; margin-bottom: 0.5rem; }
.deepdive-title { color: var(--text); font-size: 1.5rem; margin: 0; }
.deepdive-section { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1.25rem; }
.deepdive-section:first-of-type { border-top: 0; margin-top: 0.75rem; padding-top: 0; }
.deepdive-h { color: var(--muted-text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.75rem; text-transform: uppercase; }
.deepdive-about { color: var(--text); font-size: 1rem; line-height: 1.55; margin: 0 0 0.6rem; }
.deepdive-line { color: var(--text); font-size: 0.9rem; line-height: 1.5; margin: 0.35rem 0; }
.deepdive-line-label { color: var(--muted-text); font-weight: 600; margin-right: 0.35rem; }
.deepdive-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.deepdive-chip { background: var(--surface-muted); border-radius: 999px; color: var(--muted-text); font-size: 0.78rem; padding: 0.25rem 0.7rem; }
.deepdive-corr-sub { color: var(--muted-text); font-size: 0.85rem; margin: 0 0 0.75rem; }

/* legacy: deep-dive header that paired stats + share (kept harmless) */
.deepdive-top { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.deepdive-top .deepdive-stats { margin-bottom: 0.75rem; }
.deepdive-share {
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px;
  color: var(--brand-accent-dark); cursor: pointer; font-size: 0.82rem; font-weight: 600;
  padding: 0.4rem 0.85rem; white-space: nowrap;
}
.deepdive-share:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.deepdive-list-head { color: var(--muted-text); font-size: 0.82rem; font-weight: 600; margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Strongest-correlated-metrics panel (reuses the deepdive bar idiom) */
.deepdive-corr { margin: 0.5rem 0 0.5rem; }
.deepdive-corr-head { color: var(--text); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; }
.deepdive-corr-head span { color: var(--muted-text); font-size: 0.8rem; font-weight: 400; }
.corr-cols { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.corr-col-label { color: var(--muted-text); font-size: 0.78rem; font-weight: 600; margin: 0 0 0.4rem; }
.corr-row {
  align-items: center; background: none; border: 0; cursor: pointer; display: grid; gap: 0.6rem;
  grid-template-columns: 8.5rem 1fr 2.6rem; padding: 0.18rem 0.25rem; text-align: left; width: 100%;
  border-radius: 6px;
}
.corr-row:hover { background: var(--surface-muted); }
.corr-name { color: var(--text); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corr-track { background: var(--surface-muted); border-radius: 999px; height: 0.5rem; overflow: hidden; }
.corr-row:hover .corr-track { background: var(--border); }
.corr-fill { border-radius: 999px; display: block; height: 100%; }
.corr-fill.corr-pos { background: var(--brand-accent); }
.corr-fill.corr-neg { background: var(--surface-strong); }
.corr-r { color: var(--muted-text); font-size: 0.8rem; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* Methodology footer (shared by deep-dive and comparison) */
.metric-methodology { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; }
.metric-method-head { color: var(--muted-text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; margin: 0 0 0.6rem; text-transform: uppercase; }
.metric-method-card { margin-bottom: 0.9rem; }
.metric-method-card:last-child { margin-bottom: 0; }
.metric-method-name { color: var(--brand-accent-dark); font-size: 0.9rem; font-weight: 600; margin: 0 0 0.2rem; }
.metric-method-text { color: var(--text); font-size: 0.85rem; line-height: 1.5; margin: 0; }
.metric-method-src { color: var(--muted-text); font-size: 0.78rem; margin: 0.2rem 0 0; }
.metric-method-src a { color: var(--brand-accent-dark); }

.metric-subpanel[hidden] { display: none !important; }

/* Comparison scatter markers: ward photo (or area number), rank-view style */
.compare-marker { cursor: default; }
.compare-marker-ring { fill: none; stroke: var(--surface); stroke-width: 1.5; }
.compare-marker image { opacity: 0.95; }
.compare-marker:hover image { opacity: 1; }
.compare-marker:hover .compare-marker-ring { stroke: var(--brand-accent-dark); stroke-width: 2; }
.compare-marker-num-bg { fill: var(--brand-accent); fill-opacity: 0.85; stroke: var(--surface); stroke-width: 1.2; }
.compare-marker:hover .compare-marker-num-bg { fill: var(--brand-accent-dark); fill-opacity: 1; }
.compare-marker-num { fill: #fff; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-marker-dot { fill: var(--brand-accent); fill-opacity: 0.8; stroke: var(--surface); stroke-width: 0.8; }
.compare-marker:hover .compare-marker-dot { fill: var(--brand-accent-dark); fill-opacity: 1; }
.compare-scatter { max-width: 560px; }

/* API docs + admin API keys */
.api-docs-layout .metrics-panel { display: grid; gap: 0.6rem; }
.api-code { background: color-mix(in srgb, var(--shadow-ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--shadow-ink) 8%, transparent); border-radius: var(--radius-md); padding: 0.8rem 0.9rem; font-size: 0.78rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
.api-note { color: var(--muted-text); font-size: 0.85rem; margin: 0; max-width: 52rem; }
.api-note code, .api-docs-layout h2 code { background: color-mix(in srgb, var(--shadow-ink) 5%, transparent); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.92em; }
.api-list { color: var(--muted-text); font-size: 0.85rem; margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; max-width: 52rem; }
.apikey-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.apikey-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-text); padding-bottom: 0.4rem; }
.apikey-table td { padding: 0.5rem 0.6rem 0.5rem 0; border-top: 1px solid color-mix(in srgb, var(--shadow-ink) 7%, transparent); vertical-align: top; }
.apikey-table tr.is-revoked { opacity: 0.55; }
.apikey-id { display: block; font-size: 0.72rem; color: var(--muted-text); }
.apikey-contact { display: block; font-size: 0.72rem; color: var(--muted-text); }
.api-key-reveal { border: 1.5px solid color-mix(in srgb, var(--brand-accent) 45%, transparent); border-radius: var(--radius-md); padding: 0.9rem; display: grid; gap: 0.6rem; background: color-mix(in srgb, var(--brand-wash) 25%, transparent); }
.apikey-token { display: block; word-break: break-all; background: var(--surface); border-radius: 6px; padding: 0.6rem; font-size: 0.82rem; }
.apikey-reveal-actions { display: flex; gap: 0.5rem; }
.alder-good-quadrant { fill: rgb(22 101 52 / 6%); }
.alder-quad-label { fill: #166534; font-size: 11px; font-style: italic; opacity: 0.75; }
.alder-why { display: grid; gap: 0.35rem; margin: 0.6rem 0 0.2rem; font-size: 0.82rem; }
.alder-why p { margin: 0; }
.alder-why span { color: var(--muted-text); }
.alder-why em { font-style: normal; color: var(--muted-text); font-size: 0.75rem; display: block; }

.alder-term-note { color: var(--muted-text); font-size: 0.8rem; margin: 0.4rem 0 0; max-width: 52rem; }

/* Leaderboard empty state (deselect all): the row keeps its height, the message fills the card. */
.comparison-empty {
  align-items: center;
  color: var(--muted-text);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.comparison-empty p {
  margin: 0;
  max-width: 22rem;
}

.comparison-empty-surprise {
  background: none;
  border: none;
  color: var(--action);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

/* Ward report per-domain tallies */
.wardreport-domain-summary {
  color: var(--muted-text);
  font-size: 0.85rem;
  margin: 0.1rem 0 0.5rem;
}

.wardreport-tally.is-good { color: var(--positive, #2c7a4b); font-weight: 600; }
.wardreport-tally.is-bad { color: var(--negative, #b4482e); font-weight: 600; }
.wardreport-tally-divider { margin: 0 0.4rem; opacity: 0.45; }

/* Accordion-summary glyphs: stacked lead/lag bar + trend arrow pair (numbers in the titles). */
.wardreport-domain-summary { align-items: center; display: contents; }
.wardreport-domain-summary > .tally-bar { justify-self: start; }
.tally-bar {
  border-radius: 999px;
  display: inline-flex;
  height: 0.42rem;
  overflow: hidden;
  width: 4.2rem;
}
.tally-bar.is-empty { visibility: hidden; }

/* Phones: the six-column summary won't fit, so the bar and arrows wrap under the name while the
   index/rank pair stays on the title line. */
@media (max-width: 640px) {
  .wardreport-accordion summary {
    grid-template-columns: 0.9rem minmax(0, 1fr) 3.2rem 5.6rem;
    row-gap: 0.35rem;
  }
  .wardreport-accordion summary .tally-bar { grid-column: 2 / 4; }
  .wardreport-accordion summary .tally-trend { grid-column: 4 / 5; }
}

.tally-lead { background: var(--positive, #2c7a4b); opacity: 0.75; }
.tally-lag { background: var(--negative, #b4482e); opacity: 0.6; }
.tally-trend {
  display: inline-flex;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  gap: 0.45rem;
  justify-self: start;
}
.tally-trend .t-up { color: var(--positive, #2c7a4b); }
.tally-trend .t-down { color: var(--negative, #b4482e); }

/* "How this neighborhood is changing": long-run business-mix charts. Sources keep distinct
   strokes (licences solid, CBP dashed, sweep diamonds) and are never merged into one line;
   the ward is the accent colour, the average ward grey. */
.wardreport-character { position: relative; }
.charchange-sub { color: var(--muted-text); font-size: 0.78rem; }
.charchange-loading { color: var(--muted-text); font-size: 0.85rem; }
.charchange-headline {
  display: grid;
  gap: 0.9rem 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.6rem;
}
@media (max-width: 720px) { .charchange-headline { grid-template-columns: minmax(0, 1fr); } }
/* a lone headline chart (before churn data exists) still reads centered, not lopsided */
.charchange-headline .charchange-chart:only-child { grid-column: 1 / -1; max-width: 34rem; margin: 0 auto; }
.charchange-h {
  color: var(--muted-text);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin: 1.1rem 0 0.3rem;
  text-transform: uppercase;
}
.charchange-grid {
  display: grid;
  gap: 0.9rem 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.5rem;
}
@media (max-width: 720px) { .charchange-grid { grid-template-columns: minmax(0, 1fr); } }
.charchange-chart { margin: 0; }
.charchange-chart figcaption { font-size: 0.84rem; font-weight: 600; }
.charchange-chart figcaption small { color: var(--muted-text); font-weight: 400; margin-left: 0.3rem; }
.charchange-chart svg { display: block; width: 100%; height: auto; }
.cc-grid { stroke: var(--border); stroke-width: 0.6; opacity: 0.7; }
.cc-baseline { stroke: var(--muted-text); stroke-width: 0.8; opacity: 0.5; }
.cc-axis { fill: var(--muted-text); font-size: 9px; font-variant-numeric: tabular-nums; }
.cc-remap { stroke: var(--muted-text); stroke-width: 0.8; stroke-dasharray: 2 4; opacity: 0.5; }
.cc-line { stroke-linejoin: round; stroke-linecap: round; }
.cc-line.cc-licenses { stroke-width: 2.4; }
.cc-line.cc-cbp { stroke-width: 1.4; stroke-dasharray: 4 3; }
.cc-line.cc-ward.cc-licenses { stroke: var(--brand-accent); }
.cc-line.cc-ward.cc-cbp { stroke: var(--brand-accent-dark); }
.cc-line.cc-avg { stroke: var(--muted-text); opacity: 0.55; }
.cc-point { fill: var(--surface); stroke-width: 1.4; }
.cc-point.cc-ward.cc-licenses { stroke: var(--brand-accent); }
.cc-point.cc-ward.cc-cbp { stroke: var(--brand-accent-dark); }
.cc-point.cc-avg { stroke: var(--muted-text); opacity: 0.55; }
.cc-point:hover { stroke-width: 2.4; }
.cc-marker { fill: var(--surface); stroke-width: 1.6; }
.cc-marker.cc-ward { stroke: var(--brand-accent); }
.cc-marker.cc-avg { stroke: var(--muted-text); opacity: 0.6; }
.cc-endlabel { fill: var(--muted-text); font-size: 8.5px; }
.cc-endlabel.cc-licenses { fill: var(--brand-accent-dark); font-weight: 600; }
.charchange-turnover { font-size: 0.92rem; margin: 0.9rem 0 0.2rem; }
.charchange-turnover strong { font-size: 1.15rem; }
.charchange-turnover span { color: var(--muted-text); }
.charchange-trends {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.5rem;
}
@media (max-width: 560px) { .charchange-trends { grid-template-columns: minmax(0, 1fr); } }
.charchange-col h4 {
  border-bottom: 1px solid var(--border);
  color: var(--muted-text);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.3rem;
  padding-bottom: 0.25rem;
  text-transform: uppercase;
}
.charchange-col ul { list-style: none; margin: 0; padding: 0; }
.charchange-col li {
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 5%, transparent);
  display: grid;
  font-size: 0.84rem;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 0.24rem 0;
}
/* Character change is not good or bad — tobacco "growing" must not read green — so the columns
   stay in one neutral hue, unlike the judgment colouring in the metric table above. */
.charchange-col .cc-delta { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.charchange-col .cc-avg-note { color: var(--muted-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.charchange-col .cc-none { color: var(--muted-text); font-size: 0.82rem; }
.charchange-window { color: var(--muted-text); font-size: 0.76rem; margin: 0.4rem 0 0; }
.charchange-more summary { grid-template-columns: 0.9rem minmax(0, 1fr) 0 0 0 0; }
.charchange-legend {
  color: var(--muted-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 0.9rem;
  margin-top: 0.8rem;
}
.charchange-legend span { align-items: center; display: inline-flex; gap: 0.35rem; }
.cc-swatch { border-top: 2.4px solid var(--brand-accent); display: inline-block; width: 1.1rem; }
.cc-swatch.cc-cbp { border-top-style: dashed; border-top-width: 1.6px; border-top-color: var(--brand-accent-dark); }
.cc-swatch.cc-avg { border-top-color: var(--muted-text); opacity: 0.65; }
.cc-swatch.cc-sweep-swatch {
  border: 1.6px solid var(--brand-accent);
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}

/* Admin liveness queue: a plain, dense, scrollable table — it's a worklist, not a chart. */
.admin-table-scroll { overflow-x: auto; }
.admin-table { border-collapse: collapse; font-size: 0.84rem; width: 100%; }
.admin-table th {
  border-bottom: 1px solid var(--border);
  color: var(--muted-text);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.6rem 0.35rem 0;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-table td { border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 6%, transparent); padding: 0.3rem 0.6rem 0.3rem 0; }
.admin-table code { font-size: 0.78rem; }

/* Print: the ward report as a document — everything else disappears, accordions are opened by
   the beforeprint hook, colour is kept for the bloom/tallies (print backgrounds permitting). */
.print-only { display: none; }
.wardreport-print-button { margin-left: auto; }
@media print {
  header, nav, .site-header, .metrics-header, .metric-subtabs, .metric-tool-controls,
  .wardreport-topline-note, .site-footer, .report-controls, .report-ctas, .report-share,
  .report-editor, .report-mix .preset-chips,
  .ww-changes-controls,
  .ww-catchips, .mini-peeknote { display: none !important; }
  .report-layout { max-width: none; padding: 0; }
  .report-card { border: none; box-shadow: none; padding: 0 0 0.8rem; }
  .print-only { display: block; }
  .wardreport-print-title { font-size: 1.05rem; margin: 0 0 0.6rem; }
  body, .metrics-layout, .metrics-panel { background: #fff !important; box-shadow: none !important; }
  .metrics-panel { border: none !important; padding: 0 !important; }
  .wardreport-bloom { max-width: 3.2in; }
  .wardreport-accordion { break-inside: avoid-page; border-top-color: #ccc; }
  .wardreport-accordion summary::before { content: none; }
  .charchange-chart { break-inside: avoid; }
  .wardreport-character { break-inside: auto; }
  .metric-subpanel[hidden] { display: none !important; }
}

/* Term report advanced options: standards tucked away so the biplot sits above the fold */
.alder-advanced summary {
  color: var(--muted-text);
  cursor: pointer;
  font-size: 0.85rem;
  padding-top: 1.2rem;
}

.alder-advanced-body {
  display: flex;
  gap: 0.75rem;
}

/* hidden must beat the flex display (the /dictionary page hides the report subtab bar) */
.metric-subtabs[hidden] {
  display: none;
}

/* Six-digit login code form */
.auth-code-form input[name="code"] {
  font-size: 1.3rem;
  letter-spacing: 0.35em;
  max-width: 9.5rem;
  text-align: center;
}

.auth-code-error {
  color: var(--negative, #b4482e);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* --- Data years: measurement tier + portability icons ------------------------------------- */
/* Icons, not words: at 182 rows the text badges crowded out the year cells. Full wording is in
   the title/aria-label on each. */
.yearsgrid-row {
  grid-template-columns: minmax(9rem, 1.6fr) auto minmax(0, 3fr) auto;
}

.yearsgrid-prov {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  white-space: nowrap;
}

.yearsgrid-head .yearsgrid-prov {
  color: var(--muted-text);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.yearsgrid-tier,
.yearsgrid-port {
  align-items: center;
  border-radius: 5px;
  cursor: help;
  display: inline-flex;
  height: 1.35rem;
  justify-content: center;
  width: 1.35rem;
}

/* The tier ladder reads by weight: confident ink where nothing was estimated, faded where the
   number is a model's opinion. */
.tier-direct { background: color-mix(in srgb, var(--action) 15%, transparent); color: #0f4c5c; }
.tier-point { background: color-mix(in srgb, var(--action) 9%, transparent); color: #14667a; }
.tier-polygon { background: color-mix(in srgb, var(--brand-accent) 9%, transparent); color: #8a4520; }
.tier-modeled { background: color-mix(in srgb, var(--brand-accent) 16%, transparent); color: #7a3c1c; }
.tier-unknown { background: var(--surface-muted); color: var(--muted-text); }

/* Portability is context, not quality — kept quiet so it never competes with the tier. */
.yearsgrid-port { color: var(--muted-text); }
.port-us_wide { color: var(--action); }
.port-anywhere { color: var(--action-hover); }

.yearsgrid-legend-tiers {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.yearsgrid-legend-tiers span {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
}

.yearsgrid-legend-sep {
  background: var(--border);
  height: 1rem;
  width: 1px;
}

.yearsgrid-legend-note {
  color: var(--muted-text);
  flex-basis: 100%;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.yearsgrid-count,
.yearsgrid-empty {
  color: var(--muted-text);
  font-size: 0.85rem;
  margin: 0.25rem 0 0.5rem;
}

@media (max-width: 960px) {
  /* the badges are the first thing to go when the row can't hold four columns */
  .yearsgrid-prov { display: none; }
  .yearsgrid-row { grid-template-columns: minmax(8rem, 1.5fr) minmax(0, 3fr) auto; }
}

@media (max-width: 640px) {
  /* Must follow the 960px rule: the earlier phone override lost to it, so the row kept three
     columns for two visible cells (badge and note are hidden). */
  .yearsgrid-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Cross-reference between metrics that measure the same thing from different sources. */
.metric-family-note {
  background: var(--surface-muted);
  border-left: 3px solid color-mix(in srgb, var(--action) 35%, transparent);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  color: var(--muted-text);
  font-size: 0.88rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
}

/* --- Request access: the front door for readers who aren't approved yet -------------------- */
.access-layout { display: flex; justify-content: center; padding: 2.5rem 1rem 3.5rem; }
.access-card { max-width: 40rem; padding: 2rem; width: 100%; }

.access-intro h1 { margin: 0 0 0.5rem; }
.access-lede { color: var(--muted-text); margin: 0 0 1rem; }
.access-dev-note {
  align-items: flex-start;
  background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, transparent);
  border-radius: var(--radius-md, 10px);
  color: var(--text);
  display: flex;
  font-size: 0.85rem;
  gap: 0.55rem;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0.85rem;
}
.access-dev-note svg { flex: none; height: 1.15rem; margin-top: 0.05rem; width: 1.15rem; color: var(--action); }

.access-form { display: grid; gap: 1.25rem; }
.access-field { display: grid; gap: 0.35rem; }
.access-field > label,
.access-field legend { font-size: 0.9rem; font-weight: 700; }
.access-field legend span { color: var(--muted-text); font-weight: 500; }
.access-field input[type="text"],
.access-field input[type="email"],
.access-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
  padding: 0.6rem 0.7rem;
  width: 100%;
}
.access-field input:focus, .access-field textarea:focus { border-color: var(--action); outline: none; }
.access-field.has-error input, .access-field.has-error textarea { border-color: var(--negative, #b4482e); }
.access-error { color: var(--negative, #b4482e); font-size: 0.82rem; margin: 0; }

.access-contrib { border: none; margin: 0; padding: 0; }
.access-choices {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: 0.5rem;
}
.access-choice input { position: absolute; opacity: 0; pointer-events: none; }
.access-choice-face {
  align-content: start;
  background: var(--surface-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 0.9rem 0.8rem;
  transition: border-color 120ms ease, background 120ms ease;
}
.access-choice-face svg { color: var(--action); height: 1.5rem; width: 1.5rem; }
.access-choice-label { font-size: 0.9rem; font-weight: 700; }
.access-choice-note { color: var(--muted-text); font-size: 0.78rem; line-height: 1.3; }
.access-choice:hover .access-choice-face { border-color: var(--action); }
.access-choice input:checked + .access-choice-face {
  background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  border-color: var(--action);
}
.access-choice input:focus-visible + .access-choice-face { outline: 2px solid var(--action); outline-offset: 2px; }

.access-submit {
  background: var(--text);
  border: none;
  border-radius: 999px;
  color: var(--surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
}
.access-submit:hover { opacity: 0.9; }
.access-foot { color: var(--muted-text); font-size: 0.82rem; margin: 0; text-align: center; }

.access-done { display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.access-done-mark { color: var(--positive, #2c7a4b); height: 3.5rem; width: 3.5rem; }
.access-done h1 { margin: 0.3rem 0 0; }
.access-meanwhile { color: var(--muted-text); font-size: 0.9rem; }

/* Nav dropdowns (Explore views + account) share one look. */
.nav-menu { position: relative; }
.nav-menu-button {
  align-items: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  gap: 0.25rem;
}
.nav-menu-button svg { height: 0.85rem; width: 0.85rem; }
.nav-menu-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--brand-wash) 18%, transparent);
  border-color: color-mix(in srgb, var(--brand-wash) 32%, transparent);
}
.nav-menu-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  display: grid;
  left: 0;
  min-width: 14rem;
  padding: 0.35rem;
  position: absolute;
  top: calc(100% + 0.4rem);
  z-index: 60;
}
.nav-menu-panel[hidden] { display: none; }
.nav-menu-panel a {
  border-radius: 7px;
  color: var(--text);
  display: grid;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.42rem 0.55rem;
  text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--surface-muted); }
.nav-menu-heading {
  border-top: 1px solid var(--border);
  color: var(--muted-text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0.35rem 0 0.15rem;
  padding: 0.5rem 0.55rem 0.2rem;
  text-transform: uppercase;
}
.nav-menu-lock { font-size: 0.7rem; letter-spacing: 0; }

/* Admin: access request queue */
.accessreq-list { display: grid; gap: 0.9rem; }
.accessreq {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
}
.accessreq.is-approved { opacity: 0.7; }
.accessreq.is-declined { opacity: 0.55; }
.accessreq-head { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.accessreq-head h2 { font-size: 1.05rem; margin: 0; }
.accessreq-email { color: var(--muted-text); font-size: 0.85rem; margin: 0.1rem 0 0; }
.accessreq-status {
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  text-transform: uppercase;
}
.accessreq-status.is-pending { background: color-mix(in srgb, var(--brand-accent) 14%, transparent); color: var(--action); }
.accessreq-status.is-approved { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive, #2c7a4b); }
.accessreq-status.is-declined { background: rgb(180 72 46 / 12%); color: var(--negative, #b4482e); }
.accessreq-purpose { margin: 0; }
.accessreq-contrib { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.accessreq-chip {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
}
.accessreq-meta { color: var(--muted-text); font-size: 0.78rem; margin: 0; }
.accessreq-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.accessreq-actions input {
  border: 1px solid var(--border);
  border-radius: 8px;
  flex: 1 1 12rem;
  font: inherit;
  padding: 0.45rem 0.6rem;
}
.accessreq-approve, .accessreq-decline {
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  padding: 0.45rem 1rem;
}
.accessreq-approve { background: var(--positive, #2c7a4b); color: #fff; }
.accessreq-decline { background: var(--surface-muted); border: 1px solid var(--border); color: var(--text); }

/* --- Values survey: what a reader weighs, turned into their equation --------------------- */
.survey-layout { display: flex; justify-content: center; padding: 2.5rem 1rem 3.5rem; }
.survey-card { max-width: 46rem; padding: 2rem; width: 100%; }
.survey-intro h1, .survey-done h1 { margin: 0 0 0.5rem; }
.survey-lede { color: var(--muted-text); margin: 0 0 1.5rem; max-width: 34rem; }
.survey-error {
  background: rgb(180 72 46 / 8%);
  border: 1px solid rgb(180 72 46 / 30%);
  border-radius: 8px;
  color: var(--negative, #b4482e);
  margin: 0 0 1.2rem;
  padding: 0.6rem 0.8rem;
}
.survey-step { border-top: 1px solid var(--border); margin-top: 1.6rem; padding-top: 1.4rem; }
.survey-step:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.survey-step h2 {
  align-items: center;
  display: flex;
  font-size: 1.05rem;
  gap: 0.55rem;
  margin: 0 0 0.3rem;
}
.survey-step-num {
  align-items: center;
  background: var(--action);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}
.survey-step-note { color: var(--muted-text); font-size: 0.88rem; margin: 0 0 1rem; }

/* Domain importance: icon + label + a three-stop scale, one row each. */
.survey-domains { display: grid; gap: 0.5rem; }
.survey-domain {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  padding: 0.6rem 0.75rem;
}
.survey-domain legend {
  align-items: center;
  display: grid;
  float: left;              /* legend in a grid fieldset needs taking out of flow */
  gap: 0 0.6rem;
  grid-template-areas: "icon label" "icon prompt";
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0;
  width: 100%;
}
.survey-domain-icon { grid-area: icon; color: var(--action); }
.survey-domain-icon svg { height: 1.4rem; width: 1.4rem; }
.survey-domain-label { font-weight: 700; grid-area: label; }
.survey-domain-prompt { color: var(--muted-text); font-size: 0.8rem; grid-area: prompt; }
.survey-scale { display: inline-flex; gap: 0.25rem; grid-column: 2; }
.survey-scale-option input { position: absolute; opacity: 0; pointer-events: none; }
.survey-scale-option span {
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.32rem 0.7rem;
  white-space: nowrap;
}
.survey-scale-option input:checked + span {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  font-weight: 700;
}
.survey-scale-option input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }

/* Contested directions: a good/bad pair per question. */
.survey-directions { display: grid; gap: 0.6rem; }
.survey-direction {
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
}
.survey-direction legend { float: left; font-weight: 600; padding: 0; width: 100%; }
.survey-choice-pair { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; }
.survey-choice input { position: absolute; opacity: 0; pointer-events: none; }
.survey-choice-face {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
}
.survey-choice-mark { color: var(--muted-text); display: inline-flex; }
.survey-choice-mark svg { height: 1.15rem; width: 1.15rem; }
.survey-choice-label { font-size: 0.86rem; }
.survey-choice:hover .survey-choice-face { border-color: var(--action); }
.survey-choice input:checked + .survey-choice-face {
  background: color-mix(in srgb, var(--action) 8%, transparent);
  border-color: var(--action);
}
.survey-choice input:checked + .survey-choice-face .survey-choice-mark { color: var(--action); }
.survey-choice input:focus-visible + .survey-choice-face { outline: 2px solid var(--action); outline-offset: 2px; }

.survey-fields { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 1rem; }
.survey-fields label { display: grid; font-size: 0.85rem; font-weight: 600; gap: 0.3rem; }
.survey-fields input, .survey-fields select {
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  padding: 0.5rem 0.6rem;
}
.survey-optional { color: var(--muted-text); font-weight: 500; }
.survey-primary {
  background: var(--action);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.65rem 1.4rem;
  text-decoration: none;
}
.survey-secondary {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  display: inline-block;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
}
.survey-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1rem; }
.survey-fineprint { color: var(--muted-text); font-size: 0.8rem; margin: 0.8rem 0 0; }
.survey-equation {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.9rem 1rem;
  word-break: break-word;
}

@media (max-width: 640px) {
  .survey-domain { grid-template-columns: minmax(0, 1fr); }
  .survey-scale { grid-column: 1; }
  .survey-choice-pair { grid-template-columns: 1fr; }
}

/* MaxDiff deep-dive: four quality cards a screen, most/least picks, then the personal ranking. */
.maxdiff-progress {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 0.4rem;
  margin-top: 0.4rem;
  overflow: hidden;
}
.maxdiff-progress-fill {
  background: var(--action);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: width 220ms ease;
  width: 0;
}
.maxdiff-progress-text { color: var(--muted-text); font-size: 0.8rem; margin: 0.3rem 0 0.9rem; }

.maxdiff-cards {
  display: grid;
  gap: 0.7rem;
  /* always 2x2: a symmetric grid reads as one trade-off, not a row plus a straggler */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.maxdiff-card {
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md, 10px);
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  padding: 1rem 0.8rem 0.8rem;
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease;
}
.maxdiff-card.is-best { background: color-mix(in srgb, var(--positive) 8%, transparent); border-color: var(--positive, #2c7a4b); }
.maxdiff-card.is-worst { background: rgb(180 72 46 / 7%); border-color: var(--negative, #b4482e); }
.maxdiff-card-icon svg { height: 2rem; width: 2rem; }
.maxdiff-card-label { font-size: 0.92rem; font-weight: 700; min-height: 2.4em; }
.maxdiff-card-choices { display: flex; gap: 0.4rem; }
.maxdiff-choice {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.32rem 0.85rem;
}
.maxdiff-choice.maxdiff-most.is-active { background: var(--positive, #2c7a4b); border-color: var(--positive, #2c7a4b); color: #fff; }
.maxdiff-choice.maxdiff-least.is-active { background: var(--negative, #b4482e); border-color: var(--negative, #b4482e); color: #fff; }
.maxdiff-nav { display: flex; justify-content: flex-start; margin-top: 0.9rem; }
.maxdiff-finish { margin-top: 0.6rem; }

.maxdiff-ranking { display: grid; gap: 0.35rem; list-style: none; margin: 1rem 0; padding: 0; counter-reset: maxdiff; }
.maxdiff-rank-row {
  align-items: center;
  counter-increment: maxdiff;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1.4rem minmax(9rem, 1fr) minmax(0, 1.4fr) 3.2rem;
  font-size: 0.88rem;
}
.maxdiff-rank-row::before { color: var(--muted-text); content: counter(maxdiff); font-size: 0.78rem; text-align: right; }
.maxdiff-rank-bar { background: var(--surface-muted); border-radius: 999px; height: 0.5rem; overflow: hidden; }
.maxdiff-rank-fill { background: var(--muted-text); border-radius: 999px; display: block; height: 100%; opacity: 0.55; }
.maxdiff-rank-row.is-up .maxdiff-rank-fill { background: var(--positive, #2c7a4b); opacity: 0.8; }
.maxdiff-rank-row.is-down .maxdiff-rank-fill { background: var(--negative, #b4482e); opacity: 0.7; }
.maxdiff-rank-util { color: var(--muted-text); font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: right; }
/* ---- Near you (address-centered term comparison) ---- */
.near-layout { max-width: 900px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.near-intro h1 { margin-bottom: 0.35rem; }
.near-privacy { color: var(--muted, #667); font-size: 0.85rem; }
.near-map { height: 230px; border-radius: 10px; border: 1px solid var(--border, #d9dee6); }
/* the picker is its own page now, so give it the room to aim with */
.near-map-panel { margin-bottom: 1rem; }
.near-map-panel .near-map { height: min(74vh, 780px); }
.near-map-panel .near-map-controls { margin-bottom: 0; }
body:has(#near-picker:not([hidden])) .near-layout { max-width: 1180px; }
.near-map-controls { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1.25rem; }

/* overlay toggles: one chip per activity layer, dot-colored to match its markers */
.near-overlay-bar {
  border-bottom: 1px solid var(--border, #d9dee6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1.6rem;
  padding-bottom: 1rem;
}
.near-overlay-chip {
  align-items: center;
  border: 1px solid var(--border, #d9dee6);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
}
.near-overlay-chip input { accent-color: var(--chip, #555); margin: 0; }
.near-overlay-chip span::before {
  background: var(--chip, #555);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.55rem;
  margin-right: 0.3rem;
  width: 0.55rem;
}
.near-overlay-chip em { color: var(--muted, #667); font-style: normal; margin-left: 0.25rem; }

/* term verdicts: which terms were best and worst for this circle */
.near-verdicts { margin: 0 0 1rem; }
.near-verdicts h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.near-verdict-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.near-verdict-chip {
  align-items: baseline;
  border: 1px solid var(--border, #d9dee6);
  border-radius: 10px;
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
}
.near-verdict-chip span { color: var(--muted, #667); font-variant-numeric: tabular-nums; }
.near-verdict-chip.is-best { border-color: #15803d; }
.near-verdict-chip.is-worst { border-color: #b91c1c; }
.near-verdict-badge { border-radius: 999px; font-size: 0.7rem; padding: 0.1rem 0.5rem; }
.near-verdict-badge.is-best { background: #15803d1a; color: #15803d; }
.near-verdict-badge.is-worst { background: #b91c1c14; color: #b91c1c; }
.near-verdict-note { color: var(--muted, #667); font-size: 0.78rem; margin: 0.45rem 0 0; }

/* era strip: the circle under each ward map, side by side */
.near-era-strip { margin: 0 0 1rem; }
.near-era-strip h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.near-era-panels { display: flex; flex-wrap: wrap; gap: 1rem; }
.near-era-panel { margin: 0; text-align: center; width: 130px; }
.near-era-panel svg { background: #f7f8fa; border-radius: 50%; display: block; width: 100%; }
.near-era-panel figcaption { font-size: 0.74rem; margin-top: 0.3rem; }
.near-era-panel figcaption span { color: var(--w, #555); font-weight: 700; }
.near-era-panel figcaption em { color: var(--muted, #667); font-style: normal; }
.near-mark { color: var(--w, #555); font-weight: 600; }

/* the measures x terms matrix */
.near-table-scroll { overflow-x: auto; }
.near-matrix { border-collapse: collapse; font-size: 0.84rem; width: 100%; }
.near-matrix thead th {
  border-bottom: 1px solid var(--border, #d9dee6);
  font-size: 0.82rem;
  padding: 0.3rem 0.55rem;
  text-align: right;
  white-space: nowrap;
}
.near-matrix thead th small { color: var(--muted, #667); display: block; font-weight: 400; }
.near-matrix tbody th {
  color: var(--text, #223);
  font-weight: 500;
  padding: 0.26rem 0.55rem 0.26rem 0;
  text-align: left;
  white-space: nowrap;
}
.near-matrix tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 5%, transparent);
  font-variant-numeric: tabular-nums;
  padding: 0.26rem 0.55rem;
  text-align: right;
  white-space: nowrap;
}
.near-matrix .near-unit { color: var(--muted, #667); font-size: 0.72rem; margin-left: 0.1rem; }
.near-matrix .near-na { color: var(--muted, #99a); }
.near-matrix .near-best { box-shadow: inset 0 0 0 2px #15803d55; border-radius: 6px; }
.near-matrix .near-worst { box-shadow: inset 0 0 0 2px #b91c1c4d; border-radius: 6px; }
.near-best-key { color: #15803d; font-weight: 700; }
.near-worst-key { color: #b91c1c; font-weight: 700; }

/* detail explorer */
.near-detail h2 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.near-detail-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.near-detail-chip {
  background: none;
  border: 1px solid var(--border, #d9dee6);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.2rem 0.7rem;
}
.near-detail-chip.is-active { border-color: var(--action, #155e75); color: var(--action, #155e75); font-weight: 600; }
.near-detail-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.near-detail-col h3 { border-bottom: 2px solid var(--chip, #888); font-size: 0.86rem; margin: 0 0 0.35rem; padding-bottom: 0.2rem; }
.near-detail-col h3 em { color: var(--muted, #667); font-style: normal; font-weight: 400; }
.near-detail-col ul {
  list-style: none;
  margin: 0;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0 0.4rem 0 0;
  scrollbar-width: thin;
}
.near-detail-col li { border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 5%, transparent); font-size: 0.8rem; padding: 0.22rem 0; }
.near-detail-col li em { color: var(--muted, #667); font-style: normal; }
.near-detail-year { color: var(--muted, #667); font-variant-numeric: tabular-nums; margin-right: 0.35rem; }
.near-detail-more { color: var(--muted, #667); }
.near-detail-cat { color: var(--muted, #667); font-size: 0.72rem; }

/* selector-first flow */
.near-report-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.6rem; }
.near-report-bar .near-areas { flex: 1; min-width: 12rem; }
.near-radius { color: var(--muted, #667); font-size: 0.82rem; }
.near-radius select { margin-left: 0.3rem; }
.near-change {
  background: none;
  border: none;
  color: var(--action, #155e75);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
}
.near-panel-stats span { color: var(--w, #555); font-variant-numeric: tabular-nums; font-weight: 700; margin: 0 0.15rem; }

/* detail map + emoji pins */
.near-detail-map { border: 1px solid var(--border, #d9dee6); border-radius: 10px; height: 300px; margin-bottom: 0.7rem; }
.near-emoji-pin span {
  align-items: center;
  /* tinted fill, not just an outline: the colour reads at a glance on a crowded map */
  background: #fff;
  background: color-mix(in srgb, var(--pin, #555) 22%, #fff);
  border: 2px solid var(--pin, #555);
  box-shadow: 0 1px 2px rgb(15 23 42 / 25%);
  border-radius: 50%;
  display: flex;
  font-size: 12px;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.near-locate { padding: 0.35rem 0.8rem; border-radius: 6px; border: 1px solid var(--border, #c8cfd9);
  background: var(--panel, #f5f7fa); cursor: pointer; }
.near-status { font-size: 0.9rem; color: var(--muted, #667); }
.near-term { border: 1px solid var(--border, #e2e6ec); border-radius: 10px; padding: 0.9rem 1.1rem;
  margin-bottom: 1rem; }
.near-term h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.near-term-map { font-weight: normal; font-size: 0.8rem; color: var(--muted, #778); }
.near-ward { display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0; }
.near-ward-share { display: inline-block; min-width: 3.2rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  background: linear-gradient(90deg, #b7d3ee var(--share, 50%), #eef2f7 var(--share, 50%));
  font-variant-numeric: tabular-nums; font-size: 0.85rem; text-align: center; }
.near-ward-primary .near-ward-name { font-weight: 600; }
.near-ward-other { color: var(--muted, #778); font-size: 0.85rem; }
.near-metrics { width: 100%; margin-top: 0.6rem; border-collapse: collapse; font-size: 0.92rem; }
.near-metrics th { text-align: left; font-weight: 500; padding: 0.25rem 0.5rem 0.25rem 0; width: 60%; }
.near-metrics td { text-align: right; font-variant-numeric: tabular-nums; }
.near-covered { color: var(--muted, #889); font-size: 0.8rem; }
.near-badge { font-size: 0.7rem; padding: 0.05rem 0.3rem; border-radius: 4px;
  background: #f3e8d2; color: #7a5b1e; vertical-align: middle; }
.near-breakdown td { text-align: left; padding: 0 0.5rem 0.4rem 1rem; }
.near-perward { color: var(--muted, #667); font-size: 0.82rem; }
.near-empty { color: var(--muted, #778); font-style: italic; }
.near-honesty { margin-top: 1.25rem; }

/* annual series chart: the year-by-year shape behind a term-averaged row */
.near-row-openable { cursor: pointer; }
.near-row-openable:hover th, .near-row-openable:hover td { background: color-mix(in srgb, var(--action) 5%, transparent); }
.near-row-openable th::after {
  color: var(--muted, #99a);
  content: " ▸";
  font-size: 0.7rem;
}
.near-row.is-open th::after { content: " ▾"; }
.near-row.is-open th { color: var(--action, #155e75); font-weight: 700; }
.near-chart {
  border: 1px solid var(--border, #d9dee6);
  border-radius: 10px;
  margin: 0.8rem 0 1.2rem;
  padding: 0.7rem 0.9rem 0.4rem;
}
.near-chart-head { align-items: baseline; display: flex; gap: 0.8rem; justify-content: space-between; }
.near-chart-head h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
.near-chart-close {
  background: none;
  border: none;
  color: var(--action, #155e75);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
}
.near-chart-svg { display: block; width: 100%; }
.near-tip-where { color: #cbd5e1; font-size: 0.72rem; }

/* location-first chooser: the map is the fallback, not the toll gate */
.near-choose { margin: 0 0 1.5rem; max-width: 34rem; }
.near-choose-lead { color: var(--muted-text, #667); font-size: 1rem; margin: 0 0 1.25rem; }
.near-locate-primary {
  background: var(--action, #155e75);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
}
.near-locate-primary { margin-top: 0.5rem; }
.near-locate-primary:disabled { cursor: default; opacity: 0.65; }
.near-choose-alt {
  background: none;
  border: none;
  color: var(--action, #155e75);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  display: block;
  margin: 0.25rem 0 0;
  padding: 0;
  text-decoration: underline;
}
.near-choose-privacy { color: var(--muted, #667); font-size: 0.8rem; margin: 0.8rem 0 0; }

/* ---- Where funding moved (period-comparison heat grid) ---- */
.near-change-layout { max-width: 1080px; }
.near-change-lead { color: var(--muted, #667); margin: 0 0 0.8rem; }
.near-change-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.6rem; }
.near-change-controls label { color: var(--muted, #667); display: inline-flex; flex-direction: column; font-size: 0.8rem; gap: 0.2rem; }
.near-change-period { border: 1px solid var(--border, #d9dee6); border-radius: 8px; display: inline-flex; gap: 0.25rem; padding: 0.3rem 0.55rem; }
.near-change-period legend { color: var(--muted, #667); font-size: 0.75rem; padding: 0 0.25rem; }
.near-change-presets { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.near-change-map { border: 1px solid var(--border, #d9dee6); border-radius: 10px; height: 620px; }
.near-change-legend { align-items: center; color: var(--muted, #667); display: flex; flex-wrap: wrap; font-size: 0.8rem; gap: 0.5rem; margin: 0.5rem 0; }
.near-change-swatches { background: linear-gradient(90deg, #dc2626, #f5f0f0, #2d90b4); border-radius: 4px; display: inline-block; height: 0.7rem; width: 9rem; }
.near-change-note { flex-basis: 100%; }
.near-change-link { font-size: 0.85rem; margin: 0.8rem 0 0.4rem; }

/* ---- Data notes ---- */
.notes-root h2 { font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }
.notes-root h3 { font-size: 0.9rem; margin: 0.6rem 0 0.3rem; }
.notes-list { color: var(--muted, #667); font-size: 0.85rem; margin: 0 0 0.8rem 1.1rem; padding: 0; }
.notes-cols { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.notes-table { border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; width: 100%; }
.notes-table th { border-bottom: 1px solid var(--border, #d9dee6); padding: 0.2rem 0.5rem; text-align: left; }
.notes-table td { border-bottom: 1px solid color-mix(in srgb, var(--shadow-ink) 6%, transparent); padding: 0.2rem 0.5rem; vertical-align: top; }
.notes-families td:last-child { max-width: 30rem; }
/* The tables are built by data_notes.js with no wrapper, so the table itself scrolls sideways on a phone. */
@media (max-width: 640px) {
  .notes-table { display: block; overflow-x: auto; }
}

/* methodology modal */
.near-methodology { border: 1px solid var(--border, #d9dee6); border-radius: 12px; max-width: 640px; padding: 1.1rem 1.3rem; }
.near-methodology::backdrop { background: rgb(15 23 42 / 40%); }
.near-methodology h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.near-methodology ul { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.near-methodology li { font-size: 0.85rem; margin-bottom: 0.4rem; }

/* address lookup */
.near-address-form { display: flex; gap: 0.5rem; margin: 1rem 0 0.9rem; }
.near-address-form button { border-radius: 8px; flex: 0 0 auto; padding-inline: 1rem; }
.near-address-form input { border: 1px solid var(--border, #d9dee6); border-radius: 8px; flex: 1; font: inherit; max-width: 22rem; min-width: 0; padding: 0.5rem 0.7rem; text-overflow: ellipsis; }
.near-address-bar { margin: 0; }
.near-address-bar button { padding-inline: 0.6rem; }
.near-address-bar input { font-size: 0.82rem; max-width: 13rem; padding: 0.25rem 0.5rem; }


/* ==== theme toggle in the header ==== */
.nav-icon-button {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  height: 2.1rem;
  justify-content: center;
  padding: 0;
  width: 2.1rem;
}

.nav-icon-button:hover { border-color: rgb(255 255 255 / 35%); }
.nav-icon-button .theme-icon { height: 1.15rem; width: 1.15rem; }
.nav-icon-button .theme-icon-moon { display: none; }
:root[data-theme="dark"] .nav-icon-button .theme-icon-sun { display: none; }
:root[data-theme="dark"] .nav-icon-button .theme-icon-moon { display: inline; }

/* ==== curated lists: the tray above the metric grid ==== */
.preset-tray[hidden] { display: none; }
.preset-mixbar { margin-bottom: 0.55rem; }

.preset-mixhead {
  color: var(--muted-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preset-mixhead b { color: var(--text); }

.preset-mixhead span {
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-left: 0.5rem;
  text-transform: none;
}

.preset-note {
  color: var(--muted-text);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.2rem 0 0;
}

.preset-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.preset-chip {
  align-items: center;
  background: var(--hue-soft);
  border: 1.5px solid transparent;
  border-radius: 999px;
  color: var(--hue);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.preset-chip em { color: var(--muted-text); font-size: 0.7rem; font-style: normal; font-weight: 600; }
.preset-chip:hover:not(:disabled) { border-color: var(--hue-bright); }
.preset-chip:disabled { cursor: not-allowed; opacity: 0.45; }
.preset-chip.is-on { background: var(--hue-bright); border-color: var(--hue-bright); color: var(--on-accent); }
.preset-chip.is-on em { color: rgb(255 255 255 / 75%); }
.preset-chip-short { display: none; }
.preset-chip-icon { display: inline-flex; flex: 0 0 auto; height: 1.05rem; margin-left: -0.15rem; opacity: 0.85; width: 1.05rem; }
.preset-chip-icon svg { height: 100%; width: 100%; }
.preset-chip.is-on .preset-chip-icon { opacity: 1; }
.preset-chip-create { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
.preset-chip-mine { border-color: var(--hue); border-style: dashed; text-decoration: none; }
.preset-chip-mine.is-on { border-style: solid; }
.preset-chip-create[aria-expanded="true"] { border-color: var(--hue-bright); color: var(--hue); }

/* metric grid stays hidden in curated mode until "Create your own" */
#metric-weights[hidden] { display: none; }

/* ==== dark theme: chrome the tokens alone don't reach ==== */
:root[data-theme="dark"] .site-header .nav-link.is-active { background: var(--hue-soft); color: var(--hue); }
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .map-card { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .comparison-row { background: var(--surface-raised); color: var(--text); }
:root[data-theme="dark"] .comparison-row.is-selected { box-shadow: inset 0 0 0 2px var(--hue-bright); }
:root[data-theme="dark"] .metric-toggle { background: var(--surface-raised); border-color: var(--border); color: var(--muted-text); }
:root[data-theme="dark"] .metric-toggle.is-on { background: var(--hue-soft); border-color: var(--hue-bright); color: var(--hue); }
:root[data-theme="dark"] .metric-toggle.is-high { background: var(--hue-bright); border-color: var(--hue-bright); color: var(--on-accent); }
:root[data-theme="dark"] .wellbeing-equation { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .surprise-button { background: var(--hue-bright); border-color: var(--hue-bright); color: var(--on-accent); }
:root[data-theme="dark"] .metric-secondary-action { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .metric-secondary-action.is-active { background: var(--hue-soft); color: var(--hue); }
:root[data-theme="dark"] .area-type-toggle,
:root[data-theme="dark"] .map-detail-toggle,
:root[data-theme="dark"] .map-shade-loading { background: var(--surface-overlay); color: var(--text); }
:root[data-theme="dark"] .area-type-toggle button { color: var(--muted-text); }
:root[data-theme="dark"] .area-type-toggle button.is-active { background: var(--hue-bright); color: var(--on-accent); }
:root[data-theme="dark"] .mobile-view-toggle button.is-active { background: var(--hue-bright); color: var(--on-accent); }
:root[data-theme="dark"] .input-panel { box-shadow: 0 -10px 28px rgb(0 0 0 / 45%); }
:root[data-theme="dark"] .time-modal-box { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .time-modal-backdrop { background: rgb(0 0 0 / 65%); }
:root[data-theme="dark"] .metric-button-tooltip { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .leaflet-container { background: var(--surface-muted); }
:root[data-theme="dark"] .leaflet-tooltip { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .leaflet-control-attribution { background: var(--surface-overlay); color: var(--muted-text); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--action); }
:root[data-theme="dark"] .metric-loading-tile { background: var(--surface-raised); }

/* ==== phone: curated strip under the map ==== */
@media (max-width: 640px) {
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-mixbar { display: none; }
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-chips {
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-chip { flex: 0 0 auto; }
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-chip-name,
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-chip-icon,
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-chip-create { display: none; }
  .input-panel[data-picker="curated"]:not(.is-expanded) .preset-chip-short { display: inline; }
  .input-panel[data-picker="curated"] .mobile-advanced-only { display: none; }
  .input-panel:not([data-picker="curated"]) .mobile-curated-only { display: none; }
  .input-panel[data-picker="curated"].is-expanded .mobile-curated-only { display: none; }
}

@media (min-width: 641px) {
  .mobile-curated-only { display: none; }
}

/* curated mode: "Select all" / "Deselect all" only make sense once the per-metric picker is open */
.input-panel[data-picker="curated"]:not(.is-customizing) #select-all-metrics,
.input-panel[data-picker="curated"]:not(.is-customizing) #deselect-all-metrics { display: none; }
:root[data-theme="dark"] #map {
  background:
    radial-gradient(circle at 28% 24%, rgb(139 92 246 / 10%), transparent 20rem),
    var(--surface-muted);
}


/* ==== mini report (the leaderboard card once an area is selected) ==== */
#comparison-table[hidden],
.mini-report[hidden],
.ranker-heading[hidden] { display: none; }

.mini-head { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }

.mini-ident {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.mini-ident-copy { display: grid; gap: 0.2rem; min-width: 0; }
.mini-sub { color: var(--muted-text); display: block; font-size: 0.8rem; line-height: 1.35; }
.mini-sub .mini-chip { margin: 0.15rem 0.3rem 0 0; }

.mini-chip {
  background: var(--hue-soft);
  border: 0;
  border-radius: 999px;
  color: var(--hue);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
}

.mini-chip:hover { text-decoration: underline; }

.mini-alder { color: var(--text); font-size: 0.85rem; margin: 0.6rem 0 0; }
.mini-alder .soft,
.ww-lede .soft { color: var(--muted-text); }

.mini-peeknote { color: var(--muted-text); font-size: 0.72rem; margin: 0.5rem 0 0; }

.mini-movers { display: grid; gap: 0.35rem; margin-top: 0.5rem; }

.mini-mover {
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.15rem 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.55rem 0.7rem;
}

.mini-mover .lbl { font-size: 0.8rem; font-weight: 700; }
.mini-mover .vals { color: var(--muted-text); font-size: 0.72rem; grid-column: 1; }
.mini-mover b { font-size: 1rem; grid-column: 2; grid-row: 1 / span 2; }
.mini-mover b.up,
.ww-hero-big.up { color: var(--delta-up); }
.mini-mover b.down,
.ww-hero-big.down { color: var(--delta-down); }

/* hover tip on the map: "Name · 14th of 50" */
.ward-hover-tip {
  background: var(--text);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--background);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
}

.ward-hover-tip::before { border-top-color: var(--text); }

:root[data-theme="dark"] .map-legend { box-shadow: 0 8px 20px rgb(0 0 0 / 45%); }
@media (max-width: 640px) {
  .map-legend { width: 9.5rem; }
  .map-overlays-tr { right: 0.6rem; }
  /* On a phone the top-right sits on the north-side wards; the lower-left corner of the frame is
     empty (the city leans toward the lake), so park the key there, above the Map details switch. */
  .map-card:not(.is-lens) .map-overlays-tr {
    bottom: 4.2rem;
    justify-items: start;
    left: 0.6rem;
    right: auto;
    top: auto;
  }
}

@media (max-width: 640px) {
  .ranker-search { flex-basis: 9rem; }
  .mini-stats { gap: 0.35rem; }
  .mini-stat b { font-size: 1.05rem; }
}

:root[data-theme="dark"] .eq-chip-w { background: var(--surface-muted); }
@media (max-width: 640px) {
  /* the flattened strip shows tiles only: heads (and their counters) wait for the sheet */
  .input-panel:not(.is-expanded) .metric-domain-head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-chip, .eq-chip-w, .metric-row, .metric-weight-choice { transition: none; }
}

/* the nav's active link and menu on a light header */
.site-header .nav-link.is-active { background: var(--hue-soft); color: var(--hue); }
.site-header .nav-menu-panel { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); }
.site-header .nav-menu-panel a { color: var(--text); }
.site-header .nav-menu-heading { color: var(--muted-text); }
/* the formula bar reads as the mockup's ACTIVE FORMULA strip */
.wellbeing-equation-line > strong { color: var(--muted-text); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

/* ==== build-your-own-index wizard ==== */
.wizard-dots { display: flex; gap: 0.45rem; list-style: none; margin: 0 0 1.4rem; padding: 0; }
.wizard-dots li { background: var(--border); border-radius: 999px; height: 0.5rem; transition: background-color 0.14s ease, width 0.14s ease; width: 0.5rem; }
.wizard-dots li.is-done { background: var(--hue); }
.wizard-dots li.is-current { background: var(--hue-bright); width: 1.6rem; }
.wizard-step h2 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.wizard-step h2:focus { outline: none; }
.wizard-cards { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); margin-top: 0.9rem; }
.wizard-cards-3 { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.wizard-card {
  align-items: flex-start;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md, 0.9rem);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 0.3rem;
  min-height: 5.4rem;
  padding: 0.75rem 0.85rem;
  text-align: left;
  transition: border-color 0.14s ease, background-color 0.14s ease, opacity 0.14s ease;
}
.wizard-card:hover { border-color: var(--hue-bright); }
.wizard-card.is-selected { background: var(--hue-soft); border-color: var(--hue-bright); color: var(--hue); }
.wizard-card.is-dimmed { opacity: 0.55; }
.wizard-card-icon { color: var(--hue); display: inline-flex; height: 1.4rem; width: 1.4rem; }
.wizard-card-icon svg, .wizard-legend-icon svg, .wizard-group-icon svg, .wizard-metric-icon svg { height: 100%; width: 100%; }
.wizard-card-label { font-weight: 700; line-height: 1.25; }
.wizard-card-note { color: var(--muted-text); font-size: 0.78rem; line-height: 1.35; }
.wizard-card.is-selected .wizard-card-note { color: var(--hue); opacity: 0.85; }
.wizard-domain-panel { border: 0; margin: 0 0 1.1rem; padding: 0; }
.wizard-domain-panel legend { align-items: center; display: flex; font-weight: 700; gap: 0.4rem; padding: 0; }
.wizard-legend-icon { color: var(--hue); display: inline-flex; height: 1.15rem; width: 1.15rem; }
.wizard-cards-sub { margin-top: 0.55rem; }
.likert { display: grid; gap: 0.35rem; grid-template-columns: repeat(7, 1fr); margin-top: 1rem; }
.likert-stop {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.6rem 0;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.likert-stop:hover { border-color: var(--hue-bright); }
.likert-stop.is-selected { background: var(--hue-bright); border-color: var(--hue-bright); color: var(--on-accent); }
.likert-anchors { color: var(--muted-text); display: flex; font-size: 0.78rem; justify-content: space-between; margin-top: 0.4rem; }
.likert-anchors span { flex: 1; }
.likert-anchors span:nth-child(2) { text-align: center; }
.likert-anchors span:last-child { text-align: right; }
.wizard-identity { margin-top: 1.4rem; }
.wizard-footer { align-items: center; border-top: 1px solid var(--hair); display: flex; gap: 0.6rem; justify-content: space-between; margin-top: 1.4rem; padding-top: 1rem; }
.wizard-count { color: var(--muted-text); flex: 1; font-size: 0.82rem; text-align: center; }
.wizard-notice { background: var(--hue-soft); border-radius: var(--radius-md, 0.9rem); color: var(--hue); font-size: 0.88rem; padding: 0.6rem 0.85rem; }
.wizard-groups { display: grid; gap: 1rem; margin: 1.2rem 0; }
.wizard-group h2 { align-items: center; display: flex; font-size: 1rem; gap: 0.4rem; margin: 0 0 0.4rem; }
.wizard-group-icon { color: var(--hue); display: inline-flex; height: 1.15rem; width: 1.15rem; }
.wizard-group-domain { color: var(--muted-text); font-size: 0.78rem; font-weight: 500; margin-left: 0.2rem; }
.wizard-metrics { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.wizard-metric { align-items: center; background: var(--surface-muted); border-radius: 999px; display: inline-flex; font-size: 0.82rem; gap: 0.35rem; padding: 0.3rem 0.7rem; }
.wizard-metric.is-priority { background: var(--hue-soft); color: var(--hue); font-weight: 700; }
.wizard-metric em { color: var(--warm); font-size: 0.72rem; font-style: normal; font-weight: 700; }
.wizard-metric-icon { display: inline-flex; height: 1rem; width: 1rem; }
.wizard-dropped { color: var(--muted-text); font-size: 0.84rem; margin: 0.6rem 0 1rem; }
.wizard-dropped summary { cursor: pointer; font-weight: 600; }
.wizard-dropped p { margin: 0.35rem 0 0; }
.wizard-save { border-top: 1px solid var(--hair); display: grid; gap: 0.5rem; margin-top: 1.2rem; padding-top: 1rem; }
.wizard-save input { font: inherit; padding: 0.55rem 0.7rem; }
@media (max-width: 640px) {
  .wizard-cards, .wizard-cards-3 { grid-template-columns: 1fr 1fr; }
  .wizard-card { min-height: 4.6rem; }
  .wizard-footer { background: var(--surface); bottom: 0; padding-bottom: 0.6rem; position: sticky; }
  .likert-stop { padding: 0.5rem 0; }
}
.wizard-footer [hidden] { display: none !important; }

/* ==== desktop: curated lists as a grid of icon tiles, labels beneath ==== */
@media (min-width: 641px) {
  #preset-tray .preset-chips {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  }
  #preset-tray .preset-chip {
    align-items: center;
    border-radius: var(--radius-md, 0.9rem);
    flex-direction: column;
    gap: 0.35rem;
    justify-content: flex-start;
    line-height: 1.2;
    min-height: 5.2rem;
    padding: 0.7rem 0.5rem 0.6rem;
    text-align: center;
  }
  #preset-tray .preset-chip-icon { height: 1.7rem; margin: 0; opacity: 0.9; width: 1.7rem; }
  #preset-tray .preset-chip-name { font-size: 0.78rem; }
  #preset-tray .preset-chip em { font-size: 0.66rem; }
  #preset-tray .preset-chip-create { border-style: dashed; }
  #preset-tray .preset-chip-create[aria-expanded="true"] { border-style: solid; }
}

/* Support page: the team. Square photos so the row reads as one line of faces; the GitHub handle
   is the only link, because that is where a reader can actually reach the person. */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem 1.25rem; }
.team-card { display: grid; gap: 0.2rem; font-size: 0.9rem; line-height: 1.35; }
.team-card img { width: 100%; height: auto; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 0.35rem; }  /* height:auto beats the img's height attribute, or the photo stretches to 240px tall in a narrower column */
.team-card strong { font-weight: 600; }
.team-card span { color: var(--muted-text); }
.team-card a { font-size: 0.85rem; }


/* ==========================================================================
   The redesign (Connor Florczyk): global nav + footer, and the fd-theme pages (home, the
   report cards, alerts, dictionary, about). The theme is scoped to body.fd-theme so the map and dictionary keep
   their own look. Apple-style restraint: white, one blue, type does the work.
   ========================================================================== */

/* --- Color tokens: light by default, dark when <html> has .is-dark ------------------------
   The inline script in base.html sets .is-dark from the saved choice (Auto, Light, Dark) and,
   on Auto, from the system setting. New rules should use these tokens instead of raw colors. */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #707075; /* Apple's #86868b is 3.6:1 on white. This is the lightest gray that passes 4.5:1 on #f5f5f7. */
  --ink-soft: #424245;
  --line: #d2d2d7;
  --hair: #e8e8ed;
  --bg: #fff;
  --fill: #f5f5f7;
  --fill-2: #e8e8ed;
  --card: #fff;
  --field: #fff;
  --thumb: #fff;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link: #0066cc;
  --blue-wash: rgb(0 113 227 / 10%);
  --blue-wash-2: rgb(0 113 227 / 16%);
  --focus: rgb(0 113 227 / 40%);
  --good: #1f7a35; /* #248a3d is 4.4:1 on white, just under the bar */
  --weak: #b64400;
  --glass: rgb(255 255 255 / 82%);
  --glass-strong: rgb(255 255 255 / 92%);
  --glass-line: rgb(0 0 0 / 8%);
  --edge: transparent;
  --shadow-sm: 0 1px 4px rgb(0 0 0 / 12%);
  --shadow-lg: 0 30px 80px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 4%);
  --shadow-pop: 0 24px 60px rgb(0 0 0 / 18%), 0 0 0 1px rgb(0 0 0 / 6%);
  --skel-a: #f2f2f5;
  --skel-b: #e7e7ec;
  --skel-fill-a: #e9e9ee;
  --skel-fill-b: #dedee4;
  --logo-hue: #0071e3;
  --logo-ink: #1c2433;
}

html.is-dark {
  color-scheme: dark;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --ink-soft: #c7c7cc;
  --line: #48484a;
  --hair: #2c2c2e;
  --bg: #000;
  --fill: #161617;
  --fill-2: #2c2c2e;
  --card: #1d1d1f;
  --field: #1c1c1e;
  --thumb: #636366;
  --blue: #0071e3;
  --blue-hover: #0a84ff;
  --link: #2997ff;
  --blue-wash: rgb(41 151 255 / 16%);
  --blue-wash-2: rgb(41 151 255 / 24%);
  --focus: rgb(41 151 255 / 55%);
  --good: #30d158;
  --weak: #ff9f0a;
  --glass: rgb(22 22 23 / 80%);
  --glass-strong: rgb(36 36 38 / 94%);
  --glass-line: rgb(255 255 255 / 10%);
  --edge: rgb(255 255 255 / 8%);
  --shadow-sm: 0 1px 4px rgb(0 0 0 / 50%);
  --shadow-lg: 0 30px 80px rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 8%);
  --shadow-pop: 0 24px 60px rgb(0 0 0 / 60%), 0 0 0 1px rgb(255 255 255 / 10%);
  --skel-a: #1c1c1e;
  --skel-b: #2c2c2e;
  --skel-fill-a: #232325;
  --skel-fill-b: #313134;
  --logo-hue: #2997ff;
  --logo-ink: #f5f5f7;
}

/* Older scripts (about.js, metric_details.js, metric_icons.js) still draw markup that reads the
   original theme's variables and .eyebrow labels. On new-design pages, point those variables at
   the new tokens so nothing warm, teal or orange leaks in, in either theme. */
body.fd-theme {
  --background: var(--bg);
  --surface: var(--card);
  --surface-muted: var(--fill);
  --surface-strong: var(--ink);
  --text: var(--ink);
  --muted-text: var(--ink-2);
  --border: var(--hair);
  --brand-accent: var(--blue);
  --brand-accent-dark: var(--link);
  --brand-wash: var(--blue-wash);
  --action: var(--link);
  --action-hover: var(--blue-hover);
  --selected-ward: var(--blue);
}
.fd-theme .eyebrow { color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }

/* Header light/dark button and the footer's Auto, Light, Dark choice */
.gn-theme { align-items: center; background: none; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; display: inline-flex; flex: none; height: 30px; justify-content: center; opacity: 0.8; padding: 0; transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease; width: 30px; }
.gn-theme:hover { background: var(--fill); opacity: 1; }
.gn-theme:active { transform: scale(0.92); }
.gn-theme:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gn-theme svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 17px; }
.gn-theme .gn-theme-sun, html.is-dark .gn-theme .gn-theme-moon { display: none; }
html.is-dark .gn-theme .gn-theme-sun { display: block; animation: gn-spin 0.5s var(--ease-out, ease) both; }
html:not(.is-dark) .gn-theme .gn-theme-moon { animation: gn-spin 0.5s var(--ease-out, ease) both; }
@keyframes gn-spin { from { opacity: 0; transform: rotate(-60deg) scale(0.7); } }
/* The header's flex gap is 2rem. Pull the button and Join in so the three sit as one group. */
.gn-ward + .gn-theme { margin-left: calc(4px - var(--gn-gap)); }
.gn-theme + .gn-cta { margin-left: calc(6px - var(--gn-gap)); }
.fd-appearance { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 14px 0; }
.fd-appearance-seg { background: var(--fill-2); border-radius: 980px; display: inline-flex; padding: 2px; }
.fd-appearance-seg button { background: transparent; border: 0; border-radius: 980px; color: var(--ink-soft); cursor: pointer; font: inherit; padding: 5px 12px; transition: background 0.2s ease, color 0.2s ease; }
.fd-appearance-seg button[aria-pressed="true"] { background: var(--thumb); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 600; }
.fd-appearance-seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .gn-theme svg { animation: none !important; } }

/* Switching themes fades colors instead of snapping. The class is only on for a moment. */
html.is-theming, html.is-theming * { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important; }

.gn {
  position: sticky;
  top: 0;
  z-index: 1100;
}

/* Keep the header frost on a sibling layer.  A backdrop-filter on .gn itself
   becomes the backdrop root for its dropdowns, preventing them from sampling
   the page behind them. */
.gn::before {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: var(--glass);
  border-bottom: 1px solid var(--glass-line);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.gn-inner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  --gn-gap: 2rem;
  gap: var(--gn-gap);
  height: 52px;
  margin: 0 auto;
  max-width: 1080px;
  padding: 0 22px;
  position: relative;
  z-index: 1;
}

.gn .gn-brand {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  color: var(--ink);
  font: 600 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.gn-brand span { color: var(--ink-3); font-weight: 400; margin-left: 0.3em; }

.gn-links {
  display: flex;
  flex: 1;
  gap: 1.75rem;
  justify-content: center;
}

.gn .gn-links a {
  color: var(--ink);
  font: 400 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  opacity: 0.8;
  text-decoration: none;
  white-space: nowrap;
}

.gn .gn-links a:hover { opacity: 1; text-decoration: none; }
.gn-links a.is-active { font-weight: 600; opacity: 1; }

.gn .gn-cta {
  background: var(--blue);
  border-radius: 980px;
  color: white;
  font: 400 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 7px 14px;
  text-decoration: none;
  white-space: nowrap;
}

.gn .gn-cta:hover { background: var(--blue-hover); text-decoration: none; }

/* The map is a full-height app, so its layout subtracts this bar's 52px. */
@media (min-width: 961px) {
  .explorer-layout { height: calc(100vh - 52px); }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .explorer-layout { height: calc(100vh - 78px); }
}

/* Eight links plus the ward pill, theme button and Join stop fitting on one row below about
   1100px, so first tighten, then move the links to their own scrolling row. */
@media (max-width: 1180px) {
  .gn-inner { --gn-gap: 1.25rem; }
  .gn-links { gap: 1.25rem; }
}

@media (max-width: 1040px) {
  .gn-inner { --gn-gap: 1rem; flex-wrap: wrap; height: auto; padding: 10px 16px 0; row-gap: 0; }
  .gn-brand { flex: 1; }
  .gn-links {
    flex-basis: 100%;
    gap: 1.25rem;
    justify-content: flex-start;
    order: 3;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }
  .gn-links::-webkit-scrollbar { display: none; }
  /* Links keep their 13px type but get ~44px tap areas from padding. */
  .gn .gn-links a { padding: 15px 0; }
  /* "More" is pinned to the right edge of the strip so it never scrolls out of sight; the rest of
     the links scroll under it. The opaque background hides them, the left shadow is the swipe cue. */
  .gn .gn-more { background: var(--bg); box-shadow: -12px 0 10px -4px var(--bg); flex: none; padding-left: 4px; position: sticky; right: 0; }
  .gn .gn-more .gn-more-toggle { padding: 15px 4px; }
  /* Pull the 44px tap area out of the layout so the top row keeps its height. */
  .gn .gn-theme, .gn .gn-account .nav-account-button { height: 44px; margin-block: -7px; width: 44px; }
}

/* --- Theme ---------------------------------------------------------------- */

body.fd-theme {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.022em;
  line-height: 1.47;
}

.fd-theme a { color: var(--link); text-decoration: none; }
.fd-theme a:hover { text-decoration: underline; }
.fd-theme h1, .fd-theme h2, .fd-theme h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  text-wrap: balance;
}
.fd-theme p { margin: 0; }
.fd-theme .tnum, .fd-theme [data-tnum] { font-variant-numeric: tabular-nums; }

.fd-wrap { box-sizing: border-box; margin: 0 auto; max-width: 1080px; padding: 0 22px; }
.fd-narrow { max-width: 760px; }

.fd-section { padding: 96px 0; }
.fd-section-tight { padding: 56px 0; }
.fd-fill { background: var(--fill); }

.fd-eyebrow { color: var(--ink-2); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.fd-display { font-size: clamp(44px, 7vw, 80px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.fd-h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.07; }
.fd-h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.fd-h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.fd-sub { color: var(--ink-2); font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.35; max-width: 40ch; }
.fd-body { color: var(--ink-2); max-width: 62ch; }
.fd-small { color: var(--ink-2); font-size: 14px; letter-spacing: -0.01em; line-height: 1.45; }
.fd-center { text-align: center; }
.fd-center .fd-sub, .fd-center .fd-body { margin-left: auto; margin-right: auto; }
.fd-stack { align-content: start; display: grid; gap: 16px; }
.fd-stack-lg { align-content: start; display: grid; gap: 40px; }

.fd-sr { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; }

/* Buttons and links */
.fd-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.fd-center .fd-actions { justify-content: center; }
.fd-btn {
  background: var(--blue);
  border: 0;
  border-radius: 980px;
  color: #fff !important;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 12px 22px;
  text-decoration: none !important;
  white-space: nowrap;
}
.fd-btn:hover { background: var(--blue-hover); }
.fd-btn:disabled { cursor: progress; opacity: 0.5; }
.fd-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--link); color: var(--link) !important; }
.fd-btn-ghost:hover { background: var(--blue); color: #fff !important; }
.fd-more { font-size: 17px; white-space: nowrap; }
.fd-more::after { content: " \203A"; }

/* Form controls */
.fd-theme select,
.fd-theme input[type="text"],
.fd-theme input[type="email"],
.fd-theme input[type="url"],
.fd-theme textarea {
  -webkit-appearance: none;
  appearance: none;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  /* `font: inherit` pulls in the bold weight of an enclosing form label, so reset it here */
  font-weight: 400;
  max-width: 100%;
  min-height: 48px;
  min-width: 0;
  overflow: hidden;
  padding: 12px 16px;
  text-overflow: ellipsis;
  width: 100%;
}
/* placeholders read as hints, not typed text */
.fd-theme input::placeholder,
.fd-theme textarea::placeholder { color: var(--muted-text); font-weight: 400; opacity: 1; }
/* the single-line ellipsis above would stop a long textarea entry from scrolling */
.fd-theme textarea { overflow: auto; text-overflow: clip; }
.fd-theme select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.fd-theme textarea { resize: vertical; }
.fd-theme select:focus, .fd-theme input:focus, .fd-theme textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash-2); outline: none; }
.fd-field { border: 0; display: grid; gap: 8px; margin: 0; min-width: 0; padding: 0; }
.fd-field-error { color: var(--weak); font-size: 13px; margin: 2px 0 0; }
.fd-choice:has(> .fd-field-error) { flex-wrap: wrap; }
.fd-choice > .fd-field-error { flex-basis: 100%; margin-left: 30px; }
.fd-theme [aria-invalid="true"] { border-color: var(--weak); }
.fd-field > label, .fd-field > legend { color: var(--ink); font-size: 14px; font-weight: 600; padding: 0; }
.fd-row-form { align-items: end; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fd-choice { align-items: center; cursor: pointer; display: flex; gap: 12px; min-height: 40px; }
.fd-choice input { accent-color: var(--blue); flex: 0 0 auto; height: 18px; margin: 0; width: 18px; }
.fd-choice span { line-height: 1.35; }
.fd-picker { align-items: center; display: inline-flex; gap: 12px; }
.fd-picker select { min-width: 200px; width: auto; }

/* Surfaces */
.fd-panel { background: var(--fill); border-radius: 28px; padding: clamp(24px, 4vw, 48px); }
.fd-card { background: var(--card); border-radius: 18px; box-shadow: 0 0 0 1px var(--edge); padding: 28px; }
.fd-fill .fd-card { background: var(--card); }
.fd-grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-grid-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A feature that is built but not yet doing what its page describes (penlight_site.SITE_FLAGS). */
.fd-notice { background: color-mix(in srgb, #f5b400 16%, var(--bg, #fff)); border-bottom: 1px solid color-mix(in srgb, #f5b400 45%, transparent); color: var(--ink, #1d1d1f); font-size: 15px; line-height: 1.5; padding: 14px 0; }
.fd-notice strong { font-weight: 650; }
.gn-badge { border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; margin-left: 4px; opacity: 0.75; padding: 0 5px; text-transform: uppercase; vertical-align: 1px; }
.fd-proposal { border-bottom: 1px solid var(--hair); color: var(--ink-2); font-size: 12px; padding: 10px 0; text-align: center; }
/* honeypot: off-screen, never focusable by keyboard users */
.fd-hp { height: 1px; left: -9999px; opacity: 0; position: absolute; width: 1px; }
.fd-ab-privacy { color: var(--ink-3); margin-top: 6px; }
.fd-ab-note-ok { color: var(--green, #1a7f37); }

/* --- Home ----------------------------------------------------------------- */

.fd-hero { padding: 88px 0 40px; }
.fd-hero .fd-actions { margin-top: 28px; }

.fd-figures { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }
.fd-figure { border-right: 1px solid var(--line); padding: 28px 24px 0 0; }
.fd-figure + .fd-figure { padding-left: 24px; }
.fd-figure:last-child { border-right: 0; }
.fd-figure strong { display: block; font-size: clamp(36px, 5vw, 56px); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.fd-figure span { color: var(--ink-2); display: block; font-size: 15px; margin-top: 8px; }

.fd-lane { display: grid; gap: 12px; grid-template-rows: auto auto auto 1fr auto; }
.fd-lane .fd-price { color: var(--ink); font-size: 15px; font-weight: 600; }
.fd-tag { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

.fd-loop { counter-reset: loop; display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.fd-loop li { border-top: 2px solid var(--ink); counter-increment: loop; display: grid; gap: 8px; align-content: start; padding: 20px 24px 0 0; position: relative; }
.fd-loop li::before { color: var(--ink-3); content: counter(loop, decimal-leading-zero); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; }
.fd-loop li p { color: var(--ink-2); font-size: 15px; }
.fd-loop-note { color: var(--ink-2); font-size: 15px; margin-top: 24px; }

.fd-principles { display: grid; gap: 0 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-principle { border-top: 1px solid var(--line); display: grid; gap: 6px; padding: 24px 0; }
.fd-principle p { color: var(--ink-2); font-size: 15px; }

.fd-sources { display: flex; flex-wrap: wrap; gap: 10px; }
.fd-sources span { background: #fff; border-radius: 980px; color: var(--ink); font-size: 14px; padding: 8px 16px; }

/* --- Data rows (report card, snapshot, home preview) ------------------------ */

.fd-report-head { align-items: end; display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; margin-bottom: 28px; }
.fd-report-head .fd-small { margin-top: 6px; }
.fd-summary { display: flex; gap: 32px; }
.fd-summary div { display: grid; gap: 2px; }
.fd-summary strong { font-size: 32px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.fd-summary span { color: var(--ink-2); font-size: 13px; }

.fd-table-head, .fd-row {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.6fr);
}
.fd-table-head { border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; padding: 0 0 10px; }
.fd-rows { display: grid; }
.fd-row { border-bottom: 1px solid var(--hair); padding: 18px 0; }
.fd-row-name { display: grid; gap: 2px; min-width: 0; }
.fd-row-name a { color: var(--ink) !important; font-weight: 600; }
.fd-row-name small { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row-value { white-space: nowrap; font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.02em; }
.fd-row-rank { display: grid; gap: 2px; font-size: 15px; font-variant-numeric: tabular-nums; }
.fd-row-rank small { color: var(--ink-3); font-size: 13px; }
.fd-band-good { color: var(--good); font-weight: 600; }
.fd-band-weak { color: var(--weak); font-weight: 600; }
.fd-band-mid { color: var(--ink-2); font-weight: 600; }

.fd-track { background: var(--hair); border-radius: 980px; height: 6px; position: relative; }
.fd-track::after { background: var(--ink-3); content: ""; height: 14px; left: 50%; position: absolute; top: -4px; width: 1px; }
.fd-dot { background: var(--ink); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); height: 10px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; z-index: 1; }
.fd-dot-good { background: var(--good); box-shadow: 0 0 0 1px var(--good); }
.fd-dot-weak { background: var(--weak); box-shadow: 0 0 0 1px var(--weak); }
.fd-track-ends { color: var(--ink-3); display: flex; font-size: 11px; justify-content: space-between; margin-top: 6px; }
.fd-loading { color: var(--ink-3); padding: 40px 0; }
.fd-fail { align-content: start; background: var(--fill); border-radius: 18px; display: grid; gap: 6px; justify-items: start; padding: 24px 28px; }
.fd-fail-title { color: var(--ink); font-size: 17px; font-weight: 600; }
.fd-fail .fd-link-btn { margin-top: 6px; padding: 0; }
.fd-fill .fd-fail { background: var(--card); }

.fd-preview { background: #fff; border-radius: 28px; box-shadow: 0 30px 80px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 4%); padding: clamp(24px, 4vw, 44px); }
.fd-preview .fd-table-head, .fd-preview .fd-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr); }

/* --- Planning --------------------------------------------------------------- */

.fd-list { counter-reset: none; display: grid; list-style: none; margin: 0; padding: 0; }
.fd-list li { border-bottom: 1px solid var(--hair); display: flex; font-variant-numeric: tabular-nums; justify-content: space-between; padding: 14px 0; }
.fd-list li:last-child { border-bottom: 0; }
.fd-list li span { color: var(--ink-3); margin-right: 12px; }
.fd-list li strong { font-weight: 600; }

/* --- Membership ------------------------------------------------------------- */

.fd-tier { background: #fff; border-radius: 18px; display: grid; gap: 14px; grid-template-rows: auto auto auto 1fr; padding: 28px 24px; }
.fd-tier-featured { box-shadow: inset 0 0 0 2px var(--blue); }
.fd-tier .fd-tag { min-height: 2.6em; }
.fd-amount { font-size: 40px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.fd-amount small { color: var(--ink-2); font-size: 15px; font-weight: 400; letter-spacing: -0.01em; }
.fd-ticks { align-content: start; display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fd-ticks li { border-top: 1px solid var(--hair); color: var(--ink); font-size: 15px; line-height: 1.35; padding-top: 10px; }

.fd-calc { display: grid; gap: 48px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.fd-calc-inputs { display: grid; gap: 24px; }
.fd-calc-result { background: #fff; border-radius: 18px; display: grid; gap: 12px; padding: 32px; }
.fd-calc-result .fd-amount { font-size: 48px; }
.fd-note { color: var(--ink-2); font-size: 14px; }

.fd-split-bar { border-radius: 8px; display: flex; gap: 3px; height: 44px; overflow: hidden; }
.fd-split-bar span { align-items: center; color: #fff; display: flex; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 12px; }
.fd-s1 { background: #1d1d1f; }
.fd-s2 { background: #0071e3; }
.fd-s3 { background: #6e6e73; }
.fd-s4 { background: #b8b8bd; color: #1d1d1f !important; } /* light segment in both themes, so dark text in both */
.fd-key { border-radius: 3px; display: inline-block; height: 10px; margin-right: 10px; width: 10px; }

.fd-table-wrap { overflow-x: auto; }
.fd-table { border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 560px; width: 100%; }
.fd-table th { border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; padding: 0 16px 10px 0; text-align: left; }
.fd-table td { border-bottom: 1px solid var(--hair); padding: 16px 16px 16px 0; vertical-align: top; }
.fd-table td:first-child { font-weight: 600; white-space: nowrap; }
.fd-table td.fd-dim { color: var(--ink-2); }

.fd-rules { counter-reset: rule; display: grid; gap: 0 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.fd-rules li { border-top: 1px solid var(--line); counter-increment: rule; display: grid; gap: 6px; padding: 24px 0 24px 44px; position: relative; }
.fd-rules li::before { color: var(--ink-3); content: counter(rule, decimal-leading-zero); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; left: 0; position: absolute; top: 27px; }
.fd-rules p { color: var(--ink-2); font-size: 15px; }

.fd-seats { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fd-seat { background: #fff; border-radius: 14px; display: grid; gap: 4px; padding: 18px 14px; }
.fd-seat strong { font-size: 15px; }
.fd-seat span { color: var(--ink-2); font-size: 13px; }

.fd-founders { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fd-founder { border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-3) !important; display: grid; font-size: 14px; gap: 4px; padding: 18px; text-decoration: none !important; }
.fd-founder strong { color: var(--ink); font-size: 21px; font-variant-numeric: tabular-nums; }
.fd-founder:hover { border-color: var(--blue); color: var(--link) !important; }

.fd-faq { border-top: 1px solid var(--line); }
.fd-faq details { border-bottom: 1px solid var(--line); }
.fd-faq summary { cursor: pointer; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; list-style: none; padding: 22px 40px 22px 0; position: relative; }
.fd-faq summary::-webkit-details-marker { display: none; }
.fd-faq summary::after { color: var(--link); content: "+"; font-size: 24px; font-weight: 300; position: absolute; right: 4px; top: 16px; }
.fd-faq details[open] summary::after { content: "\2212"; }
.fd-faq details p { color: var(--ink-2); max-width: 64ch; padding: 0 0 24px; }

/* --- Join ------------------------------------------------------------------ */

.fd-steps { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 0 32px; padding: 0; }
.fd-steps li { border-top: 3px solid var(--hair); color: var(--ink-3); font-size: 13px; font-weight: 600; padding-top: 10px; }
.fd-steps li.is-done { border-color: var(--ink); color: var(--ink); }
.fd-steps li.is-current { border-color: var(--blue); color: var(--link); }
.fd-steps[hidden] { display: none; }
.fd-step { border: 0; display: grid; gap: 22px; margin: 0; min-width: 0; padding: 0; }
.fd-step[hidden] { display: none; }
.fd-step > legend { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 4px; padding: 0; }
.fd-tierline { background: var(--fill); border-radius: 12px; font-size: 15px; padding: 14px 16px; }
.fd-review { display: grid; margin: 0; }
.fd-review div { border-bottom: 1px solid var(--hair); display: grid; gap: 16px; grid-template-columns: 140px minmax(0, 1fr); padding: 12px 0; }
.fd-review dt { color: var(--ink-2); font-size: 15px; }
.fd-review dd { margin: 0; overflow-wrap: anywhere; }
#fd-join[hidden], .fd-done[hidden] { display: none; }
.fd-done { outline: none; }
.fd-signup-note { color: var(--good); flex-basis: 100%; font-size: 15px; min-height: 1.4em; }
.fd-signup { align-items: start; display: flex; flex-wrap: wrap; gap: 12px; }
.fd-signup input[type="email"] { flex: 1 1 240px; width: auto; }
.fd-signup select { flex: 0 0 150px; width: auto; }

/* --- Footer ------------------------------------------------------------------ */

.fd-footer { background: var(--fill); color: var(--ink-2); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -0.01em; line-height: 1.4; }
.fd-footer-inner { box-sizing: border-box; margin: 0 auto; max-width: 1080px; padding: 36px 22px 28px; }
.fd-footer-cols { border-bottom: 1px solid var(--line); display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 24px; }
.fd-footer h2 { color: var(--ink); font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.fd-footer ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fd-footer a { color: var(--ink-soft); text-decoration: none; }
.fd-footer a:hover { text-decoration: underline; }
.fd-footer-legal { padding-top: 16px; }

/* --- Responsive ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .fd-grid-3, .fd-grid-4, .fd-calc, .fd-principles, .fd-rules { grid-template-columns: minmax(0, 1fr); }
  .fd-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .fd-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-figure:nth-child(2) { border-right: 0; }
  .fd-figure:nth-child(3) { padding-left: 0; }
  .fd-seats, .fd-founders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fd-calc-result { position: static; }
  .fd-grid-4.fd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .fd-section { padding: 64px 0; }
  .fd-hero { padding-top: 56px; }
  .fd-grid-2, .fd-grid-4.fd-tiers, .fd-loop { grid-template-columns: minmax(0, 1fr); }
  .fd-table-head { display: none; }
  .fd-row, .fd-preview .fd-row { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .fd-row-value { white-space: normal; }
  .fd-row-rank { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
  .fd-seats, .fd-founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-review div { gap: 2px; grid-template-columns: minmax(0, 1fr); }
  .fd-footer-cols { grid-template-columns: minmax(0, 1fr); }
  .fd-picker { display: grid; width: 100%; }
  .fd-picker select { width: 100%; }
}

@media print {
  .gn, .fd-footer, .fd-proposal, .fd-no-print { display: none !important; }
  .fd-section { padding: 24px 0; }
  .fd-row { break-inside: avoid; }
}

.fd-fill-cards .fd-card { background: var(--fill); }

.gn .gn-brand:hover { text-decoration: none; }
.fd-footer .fd-footer-inner a { color: var(--ink-soft); }

.gn-logo { display: block; flex: 0 0 auto; height: 30px; width: 30px; }
.gn .gn-brand span { margin-left: 0; }

/* --- Civic: feeds, contact card, links, alerts ---------------------------------- */

.fd-activity .fd-card { align-content: start; }
.fd-feed { display: grid; list-style: none; margin: 0; padding: 0; }
.fd-feed li { border-top: 1px solid var(--hair); display: grid; gap: 14px; grid-template-columns: 92px minmax(0, 1fr); padding: 14px 0; }
.fd-feed time { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.4; padding-top: 1px; }
.fd-feed-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.fd-feed-title a { color: var(--ink) !important; }
.fd-feed-title a:hover { color: var(--link) !important; }
.fd-feed-meta { color: var(--ink-2); font-size: 13px; line-height: 1.4; margin-top: 2px !important; }

.fd-bars { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.fd-bars li { display: grid; font-size: 15px; gap: 6px 12px; grid-template-columns: minmax(0, 1fr) auto; }
.fd-bars strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.fd-bars i { background: var(--blue); border-radius: 980px; grid-column: 1 / -1; height: 6px; }

.fd-contact-head { align-items: center; display: flex; gap: 16px; }
.fd-contact-head img { background: var(--fill); border-radius: 50%; flex: 0 0 auto; height: 64px; object-fit: cover; width: 64px; }
.fd-contact-head .fd-tag { margin-bottom: 2px; }
.fd-contact-list { display: grid; margin: 0; }
.fd-contact-list div { border-top: 1px solid var(--hair); display: grid; gap: 12px; grid-template-columns: 96px minmax(0, 1fr); padding: 12px 0; }
.fd-contact-list dt { color: var(--ink-2); font-size: 14px; }
.fd-contact-list dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.fd-contact-head + .fd-actions .fd-btn { font-size: 15px; padding: 10px 18px; }

.fd-links { border-top: 1px solid var(--line); display: grid; list-style: none; margin: 0; padding: 0; }
.fd-links li { border-bottom: 1px solid var(--line); }
.fd-links a { display: grid; gap: 2px; padding: 16px 28px 16px 0; position: relative; text-decoration: none !important; }
.fd-links a::after { color: var(--link); content: "\2197"; position: absolute; right: 4px; top: 18px; }
.fd-links strong { color: var(--ink); font-weight: 600; }
.fd-links span { color: var(--ink-2); font-size: 14px; }
.fd-links a:hover strong { color: var(--link); }

.fd-alert-form { display: grid; gap: 32px; }
.fd-choices { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-choices .fd-choice { align-items: flex-start; background: #fff; border-radius: 14px; min-height: 0; padding: 16px; }
.fd-choices .fd-choice input { margin-top: 2px; }
.fd-choices .fd-choice span { display: grid; gap: 4px; }
.fd-choices .fd-choice strong { font-size: 15px; font-weight: 600; }
.fd-choices .fd-choice small { color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.fd-alert-form .fd-signup-note { flex-basis: auto; }

.fd-dates { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-dates div { border-top: 2px solid var(--ink); display: grid; gap: 6px; padding-top: 16px; }
.fd-dates time { font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.03em; }
.fd-dates p { color: var(--ink-2); }

/* --- About ------------------------------------------------------------------------ */

.fd-about-logo { display: block; height: 112px; margin: 0 auto; width: 112px; }
.fd-about-wordmark { color: var(--ink); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin: -8px 0 12px !important; }
.fd-about-split { align-items: center; gap: 64px; }
.fd-card-line { box-shadow: inset 0 0 0 1px var(--hair); }

.fd-about .about-progress-count { color: var(--ink); font-size: 56px; font-weight: 700; letter-spacing: -0.035em; }
.fd-about .about-progress-of { color: var(--ink-2); font-size: 17px; }
.fd-about .about-progress-bar { background: var(--hair); height: 6px; }
.fd-about .about-progress-bar > span { background: var(--blue); }
.fd-about .about-progress-note { color: var(--ink-2); font-size: 15px; }
.fd-about .about-progress { gap: 14px; margin-bottom: 20px; }
.fd-about .ward-grid { gap: 6px; }
.fd-about .ward-cell { background: var(--fill); border: 0; border-radius: 8px; color: var(--ink-3); font-size: 12px; }
.fd-about .ward-cell.is-nominated { background: var(--blue); color: #fff; }
.fd-about .about-growth-head { margin-bottom: 16px; }
.fd-about .about-sparkline { color: var(--blue); height: 180px; }
/* The chart stretches to fit its box, which turns its dots into ovals. The line reads fine alone,
   and hover still works through the full-height bands. */
.fd-about .about-sparkline circle, .fd-about .about-sparkline .spark-dot { display: none; }
.fd-about .about-growth-axis { color: var(--ink-3); font-size: 13px; }
.fd-about .spark-tip { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / 14%); }
.fd-about .signifier-examples { gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-about .signifier-example img { border-radius: 18px; }
.fd-about .signifier-example figcaption { font-size: 14px; gap: 2px; margin-top: 6px; }
.fd-about .signifier-example figcaption span { color: var(--ink-2); }
.fd-about .about-error { color: var(--ink-2); }
/* The 2024 talk: a linked thumbnail rather than an embed, so the page loads nothing from YouTube
   until someone clicks. */
.fd-about-video { color: var(--ink); display: grid; gap: 4px; text-decoration: none; }
.fd-about-origin { margin-bottom: 48px; }
.fd-about-video strong { font-size: 17px; margin-top: 10px; }
.fd-about-video > span:last-child { color: var(--ink-2); font-size: 14px; }
.fd-about-video-frame { aspect-ratio: 16 / 9; border-radius: 18px; display: block; overflow: hidden; position: relative; }
.fd-about-video-frame img { display: block; height: 100%; object-fit: cover; transition: transform 0.3s ease; width: 100%; }
.fd-about-video:hover .fd-about-video-frame img { transform: scale(1.03); }
.fd-about-video-play { background: rgb(0 0 0 / 62%); border-radius: 50%; height: 64px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; }
.fd-about-video-play::after { border-color: transparent transparent transparent #fff; border-style: solid; border-width: 11px 0 11px 18px; content: ""; left: 25px; position: absolute; top: 21px; }
.fd-about-video:hover .fd-about-video-play { background: rgb(0 0 0 / 80%); }

@media (max-width: 900px) {
  .fd-choices { grid-template-columns: minmax(0, 1fr); }
  .fd-about .signifier-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .fd-dates { grid-template-columns: minmax(0, 1fr); }
  .fd-feed li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fd-about .ward-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.fd-section:not(.fd-fill) .fd-activity .fd-card { box-shadow: inset 0 0 0 1px var(--hair); }

/* --- Civic map (civic_map.js) ----------------------------------------------------- */

.cm { position: relative; }
.cm-svg { display: block; height: auto; overflow: visible; width: 100%; }
.cm-area {
  cursor: pointer;
  fill: #e8e8ed;
  outline: none;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 1.2;
  transition: fill 350ms ease, opacity 150ms ease;
  vector-effect: non-scaling-stroke;
}
.cm-area.is-empty { fill: #f2f2f4 !important; }
.cm-area.is-hover { stroke: #1d1d1f; stroke-width: 1.6; }
.cm-area:focus-visible { stroke: #0071e3; stroke-width: 2.5; }
.cm-area.is-selected { stroke: #1d1d1f; stroke-width: 2.6; }

.cm-tip {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: rgb(255 255 255 / 88%);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 14%), 0 0 0 1px rgb(0 0 0 / 5%);
  display: grid;
  font-size: 13px;
  gap: 2px;
  line-height: 1.3;
  min-width: 120px;
  padding: 10px 12px;
  pointer-events: none;
  position: absolute;
  transform: translate(14px, -50%);
  white-space: nowrap;
  z-index: 5;
}
.cm-tip.is-left { transform: translate(calc(-100% - 14px), -50%); }
.cm-tip[hidden] { display: none; }
.cm-tip strong { color: #1d1d1f; font-size: 14px; font-weight: 600; }
.cm-tip span { color: #1d1d1f; font-variant-numeric: tabular-nums; }
.cm-tip em { color: #6e6e73; font-style: normal; }

/* --- Home explorer ------------------------------------------------------------------ */

.fd-explore {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 4%);
  display: grid;
  gap: 24px;
  padding: clamp(20px, 3vw, 36px);
}
.fd-explore-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.fd-seg { background: var(--fill); border-radius: 980px; display: inline-flex; padding: 3px; }
.fd-seg button {
  background: transparent;
  border: 0;
  border-radius: 980px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 7px 16px;
}
.fd-seg button[aria-pressed="true"] { background: var(--thumb); box-shadow: var(--shadow-sm); font-weight: 600; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-chips button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 980px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.fd-chips button:hover { border-color: var(--ink-3); }
.fd-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fd-seg button:focus-visible, .fd-chips button:focus-visible, .fd-pick button:focus-visible, .fd-back:focus-visible { outline: 3px solid rgb(0 113 227 / 40%); outline-offset: 2px; }

.fd-explore-body { align-items: start; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fd-explore-map { display: grid; gap: 14px; }
.fd-map-canvas { margin: 0 auto; max-width: 520px; width: 100%; }
.fd-explore.is-loading .fd-map-canvas { opacity: 0.4; }
.fd-legend { align-items: center; color: var(--ink-3); display: flex; font-size: 12px; gap: 4px; justify-content: center; }
.fd-legend i { border-radius: 3px; display: block; height: 10px; width: 28px; }
.fd-legend span { margin: 0 6px; }

.fd-explore-panel { align-content: start; display: grid; gap: 14px; min-height: 520px; }
.fd-explore-median { color: var(--ink-2); font-size: 15px; }
.fd-explore-median strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-explore-lists { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.fd-pick { display: grid; list-style: none; margin: 6px 0 0; padding: 0; }
.fd-pick button {
  align-items: baseline;
  background: none;
  border: 0;
  border-top: 1px solid var(--hair);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 15px;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 0;
  text-align: left;
  width: 100%;
}
.fd-pick button:hover span { color: var(--link); }
.fd-pick strong { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.fd-explore-hint { border-top: 1px solid var(--hair); padding-top: 14px !important; }
.fd-back { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; font-size: 15px; justify-self: start; padding: 0; }
.fd-back::before { content: "\2039  "; }
.fd-explore-stat { border-top: 1px solid var(--hair); display: grid; gap: 8px; padding-top: 16px; }
.fd-explore-value { font-size: 44px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }

/* --- Report pages with a mini map ---------------------------------------------------- */

.fd-report-layout { align-items: start; display: grid; gap: 48px; grid-template-columns: 240px minmax(0, 1fr); }
.fd-minimap { position: sticky; top: 76px; }
.fd-minimap .cm-area.is-selected { fill: var(--blue) !important; stroke: #fff; stroke-width: 1.2; }
.fd-minimap .cm-area.is-hover:not(.is-selected) { fill: #cfd9e6 !important; stroke: #fff; }

@media (max-width: 900px) {
  .fd-explore-body { grid-template-columns: minmax(0, 1fr); }
  .fd-explore-panel { min-height: 0; }
  .fd-report-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fd-minimap { margin: 0 auto; max-width: 220px; position: static; width: 100%; }
}

@media (max-width: 640px) {
  .fd-chips { flex-wrap: nowrap; margin: 0 -4px; overflow-x: auto; padding: 0 4px 4px; scrollbar-width: none; }
  .fd-chips::-webkit-scrollbar { display: none; }
  .fd-chips button { flex: 0 0 auto; }
  .fd-explore-lists { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: none) {
  .cm-tip { display: none; }
}

/* Beside a mini map the table is narrower, so values may wrap. */
.fd-report-main .fd-table-head, .fd-report-main .fd-row { gap: 20px; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.3fr); }
.fd-report-main .fd-row-value { font-size: 19px; white-space: normal; }
@media (max-width: 640px) {
  .fd-report-main .fd-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.fd-explore { grid-template-columns: minmax(0, 1fr); }
.fd-explore-bar > * { max-width: 100%; min-width: 0; }


/* ==========================================================================
   Motion and loading. Everything here switches off under prefers-reduced-motion.
   ========================================================================== */

:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); }

/* Skeletons: a soft shimmer that holds the exact space the content will take. */
@keyframes fd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.fd-skel {
  animation: fd-shimmer 1.6s linear infinite;
  background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-a) 30%, var(--skel-b) 50%, var(--skel-a) 70%, var(--skel-a) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  display: block;
}
.fd-fill .fd-skel, .fd-panel .fd-skel { background: linear-gradient(90deg, var(--skel-fill-a) 0%, var(--skel-fill-a) 30%, var(--skel-fill-b) 50%, var(--skel-fill-a) 70%, var(--skel-fill-a) 100%); background-size: 200% 100%; }
.fd-card .fd-skel { background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-a) 30%, var(--skel-b) 50%, var(--skel-a) 70%, var(--skel-a) 100%); background-size: 200% 100%; }
.fd-skel-line { height: 12px; }
.fd-skel-line.is-lg { height: 22px; }
.fd-skel-line.is-xl { height: 40px; border-radius: 10px; }
.fd-skel-dot { border-radius: 50%; }
.fd-skel-stack { display: grid; gap: 10px; }
.fd-row.is-skel { pointer-events: none; }
.fd-feed li.is-skel { grid-template-columns: 92px minmax(0, 1fr); }
.fd-map-skel { aspect-ratio: 600 / 733; border-radius: 24px; margin: 0 auto; max-width: 520px; width: 100%; }

/* Content arriving: a short rise and fade. */
@keyframes fd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fd-in { animation: fd-in 0.5s var(--ease-out) both; }
.fd-swap > * { animation: fd-in 0.45s var(--ease-out) both; }
.fd-swap > *:nth-child(2) { animation-delay: 40ms; }
.fd-swap > *:nth-child(3) { animation-delay: 80ms; }
.fd-swap > *:nth-child(4) { animation-delay: 120ms; }
.fd-swap > *:nth-child(5) { animation-delay: 160ms; }
.fd-swap > *:nth-child(n+6) { animation-delay: 200ms; }
.fd-rows > .fd-row:not(.is-skel), .fd-feed > li:not(.is-skel), .fd-bars > li, .fd-list > li { animation: fd-in 0.5s var(--ease-out) both; }
.fd-rows > .fd-row:nth-child(2), .fd-feed > li:nth-child(2), .fd-bars > li:nth-child(2), .fd-list > li:nth-child(2) { animation-delay: 45ms; }
.fd-rows > .fd-row:nth-child(3), .fd-feed > li:nth-child(3), .fd-bars > li:nth-child(3), .fd-list > li:nth-child(3) { animation-delay: 90ms; }
.fd-rows > .fd-row:nth-child(4), .fd-feed > li:nth-child(4), .fd-bars > li:nth-child(4), .fd-list > li:nth-child(4) { animation-delay: 135ms; }
.fd-rows > .fd-row:nth-child(5), .fd-feed > li:nth-child(5), .fd-bars > li:nth-child(5), .fd-list > li:nth-child(5) { animation-delay: 180ms; }
.fd-rows > .fd-row:nth-child(n+6) { animation-delay: 225ms; }

/* Position dots and bars glide to their place once they're on screen. */
.fd-dot { transition: left 0.9s var(--ease-spring); }
.fd-bars i { transform-origin: left center; animation: fd-grow 0.8s var(--ease-out) both; }
@keyframes fd-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fd-split-bar span { transform-origin: left center; }
.fd-split-bar.is-visible span { animation: fd-grow 0.9s var(--ease-out) both; }
.fd-split-bar.is-visible span:nth-child(2) { animation-delay: 80ms; }
.fd-split-bar.is-visible span:nth-child(3) { animation-delay: 160ms; }
.fd-split-bar.is-visible span:nth-child(4) { animation-delay: 240ms; }

/* Sections rise into view as you scroll. Only when JS is running, so nothing stays hidden. */
.fd-js .fd-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.fd-js .fd-reveal.is-visible { opacity: 1; transform: none; }

/* The hero settles in on load. */
.fd-hero .fd-wrap > * { animation: fd-in 0.7s var(--ease-out) both; }
.fd-hero .fd-wrap > *:nth-child(2) { animation-delay: 70ms; }
.fd-hero .fd-wrap > *:nth-child(3) { animation-delay: 140ms; }
.fd-hero .fd-wrap > *:nth-child(4) { animation-delay: 210ms; }
.fd-hero .fd-wrap > *:nth-child(n+5) { animation-delay: 280ms; }

/* Press and hover feedback. */
.fd-btn, .fd-chips button, .fd-seg button, .gn-cta, .fd-pick button, .fd-founder, .fd-choices .fd-choice { transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.fd-btn:active, .fd-chips button:active, .gn .gn-cta:active, .fd-founder:active { transform: scale(0.96); }
.fd-lane, .fd-tier, .fd-offer, .fd-card-line { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.fd-lane:hover, .fd-card-line:hover, .fd-grid-4 > .fd-card:hover { box-shadow: 0 18px 44px rgb(0 0 0 / 9%); transform: translateY(-4px); }
.fd-grid-4 > .fd-card { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.fd-choices .fd-choice:hover { box-shadow: 0 6px 18px rgb(0 0 0 / 7%); }
.fd-more::after { content: "\203A"; display: inline-block; margin-left: 0.3em; transition: transform 0.2s ease; }
.fd-more:hover::after { transform: translateX(3px); }

/* Segmented control with a sliding thumb, like iOS. */
.fd-seg { position: relative; }
.fd-seg::before {
  background: var(--thumb);
  border-radius: 980px;
  box-shadow: var(--shadow-sm);
  content: "";
  height: calc(100% - 6px);
  left: 0;
  position: absolute;
  top: 3px;
  transform: translateX(var(--seg-x, 3px));
  transition: transform 0.35s var(--ease-spring), width 0.35s var(--ease-spring);
  width: var(--seg-w, 0);
}
.fd-seg button { position: relative; z-index: 1; }
.fd-seg.has-thumb button[aria-pressed="true"] { background: transparent; box-shadow: none; }

/* Map: shapes draw in north to south, then recolor in a wave when the measure changes. */
@keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }
.cm-area { transition: fill 0.5s ease var(--cm-delay, 0ms), stroke 0.12s ease, stroke-width 0.12s ease; }
.cm.is-entering .cm-area { animation: cm-in 0.6s var(--ease-out) both; animation-delay: var(--cm-delay, 0ms); }
@keyframes cm-pop { from { opacity: 0; transform: translate(14px, -50%) scale(0.96); } }
.cm-tip:not([hidden]) { animation: cm-pop 0.16s ease-out; }
.cm-tip.is-left:not([hidden]) { animation-name: cm-pop-left; }
@keyframes cm-pop-left { from { opacity: 0; transform: translate(calc(-100% - 14px), -50%) scale(0.96); } }
.fd-explore-value { transition: color 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .fd-theme *, .fd-theme *::before, .fd-theme *::after, .cm * { animation: none !important; transition: none !important; }
  .fd-js .fd-reveal { opacity: 1; transform: none; }
  .fd-skel { animation: none; }
}

.fd-minimap .cm-area { transition: fill 0.25s ease, stroke 0.12s ease !important; }

/* ==========================================================================
   Your ward (my_ward.js). Literal colors: this sits on every page, themed or not.
   ========================================================================== */

.gn-ward { margin-left: auto; position: relative; }
.gn-ward + .gn-cta { margin-left: 10px; }
.mw-button {
  align-items: center;
  background: var(--fill);
  border: 0;
  border-radius: 980px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  gap: 6px;
  padding: 7px 10px 7px 9px;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.mw-button:hover { background: var(--fill-2); }
.mw-button:active { transform: scale(0.96); }
.mw-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mw-button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 14px; }
.mw-button .mw-chev { height: 8px; opacity: 0.6; transition: transform 0.25s ease; width: 10px; }
.mw-button[aria-expanded="true"] .mw-chev { transform: rotate(180deg); }
.mw-button.is-set { background: var(--blue-wash); color: var(--link); }
.mw-button.is-set:hover { background: var(--blue-wash-2); }

.mw-menu {
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background: var(--glass-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  display: grid;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  gap: 10px;
  padding: 18px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  transform-origin: top right;
  width: 320px;
  z-index: 1200;
}
.mw-menu[hidden] { display: none; }
@keyframes mw-open { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.mw-menu:not([hidden]) { animation: mw-open 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mw-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.mw-sub { color: var(--ink-2); font-size: 12px; margin: -6px 0 2px; }
.mw-label { color: var(--ink-2); font-size: 12px; font-weight: 600; margin: 4px 0 0; }
.mw-status { color: var(--ink-2); font-size: 12px; margin: -4px 0 0; min-height: 0; }
.mw-status:empty { display: none; }
.mw-locate {
  align-items: center;
  background: var(--blue);
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  gap: 8px;
  justify-content: center;
  padding: 11px 14px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mw-locate:hover { background: var(--blue-hover); }
.mw-locate:active { transform: scale(0.98); }
.mw-locate svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 16px; }
.mw-grid { display: grid; gap: 4px; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.mw-grid button {
  aspect-ratio: 1;
  background: var(--fill);
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.mw-grid button:hover { background: var(--blue-wash); color: var(--link); }
.mw-grid button:active { transform: scale(0.92); }
.mw-grid button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.mw-grid button:focus-visible, .mw-locate:focus-visible, .mw-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mw-help { color: var(--link); font-size: 12px; text-decoration: none; }
.mw-help:hover { text-decoration: underline; }
.mw-clear { background: none; border: 0; color: var(--ink-2); cursor: pointer; font: 400 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; justify-self: start; padding: 2px 0; }
.mw-clear:hover { color: var(--ink); }

/* The same picker, inline on a page with nothing to show yet. */
.mw-inline { display: grid; gap: 12px; max-width: 520px; }
.mw-inline .mw-locate { justify-self: start; padding: 12px 20px; }
.mw-inline .mw-grid { gap: 6px; }
.mw-inline .mw-grid button { font-size: 14px; border-radius: 10px; }
.fd-fill .mw-inline .mw-grid button { background: var(--card); }

.fd-empty { display: grid; gap: 14px; padding: 8px 0 24px; }
.fd-empty[hidden], [data-fd-body][hidden], [data-fd-civic-body][hidden] { display: none; }
.fd-viewing { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.fd-viewing[hidden] { display: none; }
.fd-chip-btn {
  background: rgb(0 113 227 / 10%);
  border: 0;
  border-radius: 980px;
  color: #0066cc;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.fd-chip-btn:hover { background: rgb(0 113 227 / 16%); }
.fd-chip-btn:active { transform: scale(0.96); }
.fd-chip-btn.is-quiet { background: var(--fill); color: var(--ink); }
.fd-your-ward { align-items: center; background: rgb(36 138 61 / 10%); border-radius: 980px; color: var(--good); display: inline-flex; font-size: 14px; font-weight: 600; padding: 8px 14px; }
.fd-link-btn { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; padding: 0 0 0 6px; }
.fd-link-btn:hover { text-decoration: underline; }
.fd-alert-ward { font-size: 17px; }

@media (max-width: 1040px) {
  .gn-ward { order: 2; }
  .gn-theme { order: 2; }
  .gn .gn-cta { order: 2; }
  .mw-menu { position: fixed; left: 12px; right: 12px; top: 96px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-menu:not([hidden]) { animation: none; }
  .mw-button .mw-chev { transition: none; }
}

@media (max-width: 480px) {
  .gn-inner { gap: 0 8px; }
  .gn .gn-brand span { display: none; }
  .gn-ward + .gn-cta { margin-left: 0; }
}

/* --- Alert builder: topics on the left, the live email on the right --------------------- */

.fd-ab-hero { padding: 72px 0 40px; }
.fd-ab { padding: 0 0 96px; }
.fd-ab-grid { align-items: start; display: grid; gap: 56px; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.fd-ab-controls { display: grid; gap: 32px; }
.fd-ab-block { border: 0; display: grid; gap: 12px; margin: 0; min-width: 0; padding: 0; }
.fd-ab-label { color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 0; }
.fd-ab-ward { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 40px; }
.fd-ab-ward strong { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.fd-ab-ward span { color: var(--ink-2); font-size: 15px; }
.fd-ab-ward .fd-link-btn { padding: 0; }

.fd-ab-topics { background: var(--fill); border-radius: 18px; list-style: none; margin: 0; overflow: hidden; padding: 0; }
.fd-ab-topics li { position: relative; }
.fd-ab-topics li + li::before { background: #e3e3e8; content: ""; height: 1px; left: 58px; position: absolute; right: 0; top: 0; }
.fd-ab-topic { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 30px minmax(0, 1fr) auto auto; padding: 12px 14px 12px 16px; transition: background 0.15s ease; }
.fd-ab-topic:hover { background: #ededf0; }
.fd-ab-icon { background: #fff; border-radius: 8px; color: var(--blue); display: grid; height: 30px; place-items: center; width: 30px; }
.fd-ab-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 18px; }
.fd-ab-text { display: grid; gap: 1px; min-width: 0; }
.fd-ab-text strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.fd-ab-text small { color: var(--ink-2); font-size: 13px; letter-spacing: -0.005em; line-height: 1.35; }
.fd-ab-count { color: var(--link); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 20px; text-align: right; white-space: nowrap; }
.fd-ab-count.is-zero, .fd-ab-count.is-wait { color: var(--ink-3); font-weight: 400; }
.fd-ab-count.is-pop { animation: fd-pop 0.4s var(--ease-spring) both; }
@keyframes fd-pop { from { opacity: 0; transform: scale(0.6); } }

/* iOS-style switch */
.fd-switch {
  -webkit-appearance: none;
  appearance: none;
  background: #d9d9de;
  border-radius: 14px;
  cursor: pointer;
  flex: none;
  height: 28px;
  margin: 0;
  position: relative;
  transition: background 0.25s ease;
  width: 46px;
}
.fd-switch::before {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
  content: "";
  height: 24px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.32s var(--ease-spring);
  width: 24px;
}
.fd-switch:checked { background: var(--blue); }
.fd-switch:checked::before { transform: translateX(18px); }
.fd-switch:focus-visible { outline: 3px solid rgb(0 113 227 / 40%); outline-offset: 2px; }

.fd-ab-urgent { align-items: center; background: var(--fill); border-radius: 14px; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; margin-top: 4px; padding: 14px 16px; }
.fd-ab-urgent span { display: grid; gap: 2px; }
.fd-ab-urgent strong { font-size: 15px; font-weight: 600; }
.fd-ab-urgent small { color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.fd-ab-send-row { display: flex; gap: 10px; }
.fd-ab-send-row input { flex: 1; min-width: 0; }
.fd-ab-send-row .fd-btn { flex: none; }
.fd-ab-send .fd-small:empty { display: none; }

.fd-ab-preview { display: grid; gap: 14px; min-width: 0; }
.fd-mail { background: #fff; border: 1px solid var(--hair); border-radius: 22px; box-shadow: 0 30px 80px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 4%); overflow: hidden; }
.fd-mail-bar { display: flex; gap: 7px; padding: 14px 16px 0; }
.fd-mail-bar i { background: #e3e3e8; border-radius: 50%; display: block; height: 11px; width: 11px; }
.fd-mail-head { border-bottom: 1px solid var(--hair); display: grid; font-size: 14px; gap: 4px; margin: 0; padding: 12px 24px 14px; }
.fd-mail-head div { display: grid; gap: 8px; grid-template-columns: 64px minmax(0, 1fr); }
.fd-mail-head dt { color: var(--ink-3); }
.fd-mail-head dd { color: var(--ink); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-mail-head .fd-mail-subject dd { font-weight: 600; white-space: normal; }
.fd-mail-body { background: #f5f5f7; min-height: 120px; }
.fd-mail-body.is-empty { display: none; }
.fd-ab-noward { display: grid; gap: 16px; padding: 28px 24px; }
.fd-ab-under { align-items: baseline; display: flex; gap: 16px; justify-content: space-between; padding: 0 8px; }
.fd-ab-under .fd-link-btn { flex: none; padding: 0; }
.fd-swap-text { animation: fd-in 0.4s var(--ease-out) both; }

@media (max-width: 960px) {
  .fd-ab-grid { gap: 40px; grid-template-columns: minmax(0, 1fr); }
  .fd-ab-hero { padding: 48px 0 28px; }
}
@media (max-width: 480px) {
  .fd-ab-topic { padding: 12px; }
  .fd-ab-send-row { flex-direction: column; }
  .fd-mail-head { padding: 12px 16px 14px; }
  .fd-ab-under { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-switch, .fd-switch::before { transition: none; }
  .fd-ab-count.is-pop, .fd-swap-text { animation: none; }
}

/* --- Metric dictionary ------------------------------------------------------------------
   metric_details.js draws the entries with the old class names. These rules give them the
   front door look on this page only; the map page's tooltips keep the old styles. */

.fd-dict-hero { padding: 72px 0 32px; }
.fd-dict-search { align-items: center; background: var(--fill); border-radius: 14px; display: flex; gap: 10px; margin-top: 12px; max-width: 560px; padding: 0 16px; }
.fd-dict-search svg { fill: none; flex: none; height: 18px; stroke: var(--ink-3); stroke-linecap: round; stroke-width: 1.8; width: 18px; }
.fd-theme .fd-dict-search input { background: transparent; border: 0; box-shadow: none; flex: 1; min-height: 48px; min-width: 0; padding: 0; }
.fd-theme .fd-dict-search input:focus { box-shadow: none; }
.fd-dict-search:focus-within { box-shadow: 0 0 0 3px rgb(0 113 227 / 20%); }
.fd-dict-search input::-webkit-search-cancel-button { cursor: pointer; }
.fd-dict-count { color: var(--ink-3); flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.fd-dict-sort { align-items: center; color: var(--ink-3); display: inline-flex; font-size: 14px; gap: 10px; margin-top: 14px; }
.fd-theme .fd-dict-sort select { background: var(--fill); border: 0; border-radius: 10px; color: var(--ink); font-size: 14px; min-height: 36px; padding: 0 12px; width: auto; }
.fd-dict-sort select:disabled { opacity: 0.5; }
.fd-dict-body { padding: 8px 0 96px; }
.fd-dict-none { background: var(--fill); border-radius: 18px; color: var(--ink-2); padding: 24px 28px; }
.fd-dict-none[hidden] { display: none; }
/* metric_details.js writes a bare paragraph when the catalog can't load. Give it a real message box. */
.fd-dict .metric-transparency-content > p:only-child { background: var(--fill); border-radius: 18px; color: var(--ink-2); padding: 24px 28px; }

.fd-dict-skel { display: grid; gap: 56px; grid-template-columns: 220px minmax(0, 1fr); }
.fd-dict-skel .fd-skel-stack { align-content: start; gap: 18px; }
.fd-dict-skel-row { border-top: 1px solid var(--hair); display: grid; gap: 10px; padding-top: 18px; }

.fd-dict .metric-transparency-content { color: var(--ink); display: block; padding: 0; }
.fd-dict .metric-transparency-content.is-drawn { animation: fd-in 0.45s var(--ease-out) both; }

/* Method note */
.fd-dict .calculation-note { background: var(--fill); border: 0; border-radius: 18px; color: var(--ink-2); display: grid; font-size: 15px; gap: 8px; line-height: 1.5; margin-bottom: 48px; max-width: 760px; padding: 20px 24px; }
.fd-dict .calculation-note p { margin: 0; }
.fd-dict .transparency-meta { color: var(--ink-3); font-size: 14px; }

/* Layout: domain list on the left, entries on the right */
.fd-dict .metric-domain-layout { display: grid; gap: 56px; grid-template-columns: 220px minmax(0, 1fr); }
.fd-dict .metric-domain-toc { align-self: start; background: none; border: 0; border-radius: 0; gap: 2px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 0; position: sticky; top: 84px; }
.fd-dict .metric-domain-toc .eyebrow { color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: 0; margin: 0 0 8px 10px; text-transform: none; }
.fd-dict .metric-domain-toc-link { border-radius: 10px; color: var(--ink); font-size: 15px; font-weight: 400; padding: 7px 10px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.fd-dict .metric-domain-toc-link:hover, .fd-dict .metric-domain-toc-link:focus-visible { background: var(--fill); color: var(--ink); text-decoration: none; }
.fd-dict .metric-domain-toc-link[aria-current] { background: var(--fill); font-weight: 600; }
.fd-dict .metric-domain-toc-link strong { background: none; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 400; padding: 0; }
.fd-dict .metric-domain-toc-link.is-empty { opacity: 0.35; }

.fd-dict .metric-domain-panels { display: grid; gap: 72px; }
.fd-dict .metric-domain-panel { background: none; border: 0; border-radius: 0; display: grid; gap: 20px; padding: 0; scroll-margin-top: 84px; }
.fd-dict .metric-domain-panel[hidden] { display: none; }
.fd-dict .metric-domain-heading { gap: 6px; }
.fd-dict .metric-domain-heading .eyebrow { color: var(--ink-2); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; text-transform: none; }
.fd-dict .metric-domain-heading h4 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.fd-dict .metric-domain-heading p:not(.eyebrow):not(.transparency-meta) { color: var(--ink-2); font-size: 17px; }

/* Entries: ruled rows that open in place */
.fd-dict .metric-definition-list { border-bottom: 1px solid var(--hair); display: block; }
.fd-dict .metric-definition-card { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--hair); overflow: visible; padding: 0; }
.fd-dict .metric-definition-card[hidden] { display: none; }
.fd-dict .metric-definition-card[open] { border-color: var(--hair); }
.fd-dict .metric-definition-summary { border-radius: 12px; display: grid; gap: 4px; margin: 0 -12px; padding: 18px 44px 18px 12px; position: relative; transition: background 0.15s ease; }
.fd-dict .metric-definition-summary:hover { background: #fafafc; }
.fd-dict .metric-definition-summary:focus-visible { outline: 3px solid rgb(0 113 227 / 40%); outline-offset: -3px; }
.fd-dict .metric-definition-summary::after {
  border-bottom: 1.8px solid var(--ink-3);
  border-right: 1.8px solid var(--ink-3);
  content: "";
  height: 8px;
  position: absolute;
  right: 18px;
  top: 26px;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out);
  width: 8px;
}
.fd-dict .metric-definition-card[open] > .metric-definition-summary::after { transform: translateY(3px) rotate(225deg); }
.fd-dict .metric-definition-heading { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; }
.fd-dict .metric-definition-dates { color: var(--ink-3); display: inline-flex; flex-wrap: wrap; font-size: 13px; font-variant-numeric: tabular-nums; gap: 0 14px; margin-left: auto; }
.fd-dict .metric-definition-domain { display: none; }
/* Ranked view: one flat list, no domain rail; each card names its domain instead. */
.fd-dict .metric-transparency-content:not(.is-ranked) .metric-ranked-panel { display: none; }
.fd-dict .is-ranked .metric-domain-panel:not(.metric-ranked-panel), .fd-dict .is-ranked .metric-domain-toc { display: none; }
.fd-dict .is-ranked .metric-domain-layout { grid-template-columns: minmax(0, 1fr); }
.fd-dict .is-ranked .metric-definition-domain { display: inline; }
.fd-dict .metric-definition-title { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.fd-dict .metric-definition-summary > span:last-child { color: var(--ink-2); font-size: 15px; line-height: 1.45; max-width: 68ch; }

/* Every live measure used to say "Available". Only the exceptions get a label now. */
.fd-dict .metric-status-badge { background: var(--fill); border: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 4px 9px; text-transform: none; }
.fd-dict .metric-status-badge.is-populated { display: none; }

.fd-dict .metric-definition-body { animation: fd-in 0.35s var(--ease-out) both; border: 0; color: var(--ink-2); font-size: 15px; gap: 14px; line-height: 1.55; max-width: 760px; padding: 0 0 24px; }
.fd-dict .metric-definition-body strong { color: var(--ink); font-weight: 600; }
.fd-dict .metric-definition-meta { background: var(--fill); border-radius: 14px; gap: 16px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 20px; }
.fd-dict .metric-definition-meta div { align-content: start; gap: 3px; }
.fd-dict .metric-definition-meta dt { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.fd-dict .metric-definition-meta dd { color: var(--ink); font-size: 14px; line-height: 1.4; margin: 0; }
.fd-dict .metric-definition-meta a { color: var(--link); font-weight: 400; text-decoration: none; }
.fd-dict .metric-definition-meta a:hover { text-decoration: underline; }
.fd-dict .metric-nominator-attribution { background: none; border: 1px solid var(--hair); border-radius: 14px; padding: 14px 18px; }
.fd-dict .metric-nominator-attribution .eyebrow { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.fd-dict .metric-nominator-attribution h5 { font-size: 15px; font-weight: 600; }
.fd-dict .metric-definition-card.is-highlighted > .metric-definition-summary { background: rgb(0 113 227 / 8%); }

@media (max-width: 960px) {
  .fd-dict .metric-domain-layout, .fd-dict-skel { gap: 32px; grid-template-columns: minmax(0, 1fr); }
  .fd-dict-skel > .fd-skel-stack:first-child { display: none; }
  .fd-dict .metric-domain-toc { display: flex; gap: 6px; margin: 0 -22px; max-height: none; overflow-x: auto; padding: 4px 22px 8px; position: static; scrollbar-width: none; }
  .fd-dict .metric-domain-toc::-webkit-scrollbar { display: none; }
  .fd-dict .metric-domain-toc .eyebrow { display: none; }
  .fd-dict .metric-domain-toc-link { background: var(--fill); border-radius: 980px; flex: none; gap: 8px; font-size: 14px; padding: 7px 14px; white-space: nowrap; }
  .fd-dict .metric-definition-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-dict-hero { padding: 48px 0 24px; }
}
@media (max-width: 640px) {
  .fd-dict .metric-definition-dates { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
  .fd-dict .metric-definition-meta { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fd-dict .metric-definition-body, .fd-dict .metric-transparency-content.is-drawn { animation: none; }
  .fd-dict .metric-definition-summary::after { transition: none; }
}

/* ==========================================================================
   Dark mode, page by page. Tokens above do most of the work; these rules cover what raw
   colors, images and older markup need. Dark-only rules start with html.is-dark. The map
   page section also restyles /map in light mode (scoped to body:not(.fd-theme)).
   ========================================================================== */

/* --- Home page and the SVG maps ------------------------------------------------------------ */

/* Map ramp and empty-fill colors, used by civic_map.js and the map-painting code in
   frontdoor.js (RAMP, the map.paint placeholder) plus the legend swatches below. Light values
   equal the exact hex already in frontdoor.js and the home.html legend, so light mode is
   unchanged. Raw hex, not the shared tokens, because these are chart-style ramp colors, not UI
   surface colors. */
:root {
  --map-empty: #e8e8ed;
  --ramp-0: #e3eefc;
  --ramp-1: #b7d3f7;
  --ramp-2: #7fb1ee;
  --ramp-3: #3f86e0;
  --ramp-4: #0a5cc2;
}
html.is-dark {
  --map-empty: #3a3a3c;
  --ramp-0: #33404e;
  --ramp-1: #2c5478;
  --ramp-2: #2f74ad;
  --ramp-3: #2f97e0;
  --ramp-4: #0a84ff;
}

/* Civic map (civic_map.js): shape fill, boundary strokes and the hover tooltip. The light strokes
   read as seams against a white card or page. On black they need to be tokens instead. */
html.is-dark .cm-area { fill: var(--map-empty); stroke: var(--bg); }
html.is-dark .cm-area.is-empty { fill: #48484a !important; } /* raw: a hair lighter than --map-empty so "no data" still reads as its own shade */
html.is-dark .cm-area.is-hover { stroke: var(--ink); }
html.is-dark .cm-area.is-selected { stroke: var(--ink); }

html.is-dark .cm-tip { background: var(--glass-strong); box-shadow: var(--shadow-pop); }
html.is-dark .cm-tip strong { color: var(--ink); }
html.is-dark .cm-tip span { color: var(--ink); }
html.is-dark .cm-tip em { color: var(--ink-2); }

/* Home explorer: the card was still a hardcoded white box with a light shadow, and the chips sat
   on that same white with no dark background of their own, which is what made them unreadable. */
html.is-dark .fd-explore { background: var(--card); box-shadow: var(--shadow-lg); }
html.is-dark .fd-chips button { background: var(--card); }
html.is-dark .fd-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Legend swatches are inline-styled in home.html, so !important is needed to switch them; order
   matches the RAMP array in frontdoor.js, worst to best. */
html.is-dark .fd-legend i:nth-of-type(1) { background: var(--ramp-0) !important; }
html.is-dark .fd-legend i:nth-of-type(2) { background: var(--ramp-1) !important; }
html.is-dark .fd-legend i:nth-of-type(3) { background: var(--ramp-2) !important; }
html.is-dark .fd-legend i:nth-of-type(4) { background: var(--ramp-3) !important; }
html.is-dark .fd-legend i:nth-of-type(5) { background: var(--ramp-4) !important; }

/* Source chips ("How it stays free" section) are a hardcoded white pill inside a fill section,
   matching the fd-fill card pattern used elsewhere in dark mode. */
html.is-dark .fd-sources span { background: var(--card); }

/* Mini maps on /for/residents and /for/business: the hover fill was a light blue that glowed on
   black, and the hover and selected strokes were hardcoded white to match a white page. */
html.is-dark .fd-minimap .cm-area.is-selected { stroke: var(--bg); }
html.is-dark .fd-minimap .cm-area.is-hover:not(.is-selected) { fill: var(--ramp-2) !important; stroke: var(--bg); }

/* --- Report card and neighborhood snapshot ------------------------------------------------- */

/* Rank dot: the white ring is a light-page cutout, so it has to switch with the page. */
html.is-dark .fd-dot { border-color: var(--bg); }

/* Plan comparison cards on /for/business (free vs $120 a year). */
html.is-dark .fd-tier { background: var(--card); }

/* Mini map beside the report: swap the selection ring and hover tint for a dark page. */
html.is-dark .fd-minimap .cm-area.is-selected { stroke: var(--bg); }
html.is-dark .fd-minimap .cm-area.is-hover:not(.is-selected) { fill: var(--blue-wash-2) !important; stroke: var(--bg); }

/* Viewing bar chips, shown for a shared ward link like #ward=42. */
html.is-dark .fd-chip-btn { background: var(--blue-wash); color: var(--link); }
html.is-dark .fd-chip-btn:hover { background: var(--blue-wash-2); }

/* Green "your ward" pill: no wash token for --good, so hand-match its dark value at low opacity. */
html.is-dark .fd-your-ward { background: rgb(48 209 88 / 16%); }

/* Print stays light even in dark mode. The snapshot's print button on /for/business is the only
   print feature on the site, and a dark page wastes ink. Resetting the tokens back to their light
   values for print covers every element that reads them, not just this lane's own rules. */
@media print {
  html.is-dark {
    --bg: #fff;
    --blue: #0071e3;
    --blue-hover: #0077ed;
    --blue-wash: rgb(0 113 227 / 10%);
    --blue-wash-2: rgb(0 113 227 / 16%);
    --card: #fff;
    --edge: transparent;
    --field: #fff;
    --fill: #f5f5f7;
    --fill-2: #e8e8ed;
    --focus: rgb(0 113 227 / 40%);
    --glass: rgb(255 255 255 / 82%);
    --glass-line: rgb(0 0 0 / 8%);
    --glass-strong: rgb(255 255 255 / 92%);
    --good: #1f7a35;
    --hair: #e8e8ed;
    --ink: #1d1d1f;
    --ink-2: #6e6e73;
    --ink-3: #707075;
    --ink-soft: #424245;
    --line: #d2d2d7;
    --link: #0066cc;
    --shadow-lg: 0 30px 80px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 4%);
    --shadow-pop: 0 24px 60px rgb(0 0 0 / 18%), 0 0 0 1px rgb(0 0 0 / 6%);
    --shadow-sm: 0 1px 4px rgb(0 0 0 / 12%);
    --skel-a: #f2f2f5;
    --skel-b: #e7e7ec;
    --skel-fill-a: #e9e9ee;
    --skel-fill-b: #dedee4;
    --thumb: #fff;
    --weak: #b64400;
  }
  /* The green pill's wash isn't a token (see above), so match it back by hand too. */
  html.is-dark .fd-your-ward { background: rgb(36 138 61 / 10%); }
  /* The mini map's own fill isn't a token either (it's the home lane's ramp color, not ours), and
     it printed solid black during testing. Put back the light values here too so the map prints
     the way it does today, since this snapshot page is the only print feature on the site. */
  html.is-dark .fd-minimap .cm-area { fill: #e8e8ed !important; stroke: #fff !important; }
  html.is-dark .fd-minimap .cm-area.is-empty { fill: #f2f2f4 !important; }
  html.is-dark .fd-minimap .cm-area.is-selected { fill: #0071e3 !important; stroke: #fff !important; }
  html.is-dark .fd-minimap .cm-area.is-hover:not(.is-selected) { fill: #cfd9e6 !important; stroke: #fff !important; }
}

/* --- Planners, membership and join --------------------------------------------------------- */

/* Pages: /for/planning, /guild, /guild/join. */

/* --- Planning ------------------------------------------------------------ */
/* fd-list (the housing "Most"/"Fewest" lists) already runs on tokens (--hair, --ink-3, --ink),
   so nothing in this section needs a color fix. */

/* --- Membership: tiers, calc, split bar, table, rules, seats, founders, faq -------- */

/* guild.html always sets an inline background on .fd-tier, so this only matters if that
   inline style is ever dropped, or on another page that renders .fd-tier without it. */
html.is-dark .fd-tier { background: var(--card); }
html.is-dark .fd-calc-result { background: var(--card); }
html.is-dark .fd-seat { background: var(--card); }

/* Split bar segments and their legend dots: raw colors, because these four blocks sit right
   on the page background (#000) and need to stay visually distinct there, not just on white. */
html.is-dark .fd-s1 { background: #48484a; }
html.is-dark .fd-s2 { background: var(--blue); }
html.is-dark .fd-s3 { background: #8e8e93; }
html.is-dark .fd-s4 { background: #d1d1d6; }

/* s3 and s4 are light enough that the white label text from styles.css fails contrast, so
   those two segments switch to dark text. s1 and s2 stay dark and keep the white text. */
html.is-dark .fd-s3, html.is-dark .fd-s4 { color: #1d1d1f; }

/* --- Join ------------------------------------------------------------------ */
/* fd-steps, fd-step, fd-tierline, fd-review and the done panel already run on tokens
   (--hair, --ink, --blue, --fill, --good), so nothing in this section needs a color fix. */

/* --- Alert builder ------------------------------------------------------------------------- */

/* Topic list: icon tile and divider were plain white or light gray, give them a dark surface */
html.is-dark .fd-ab-icon { background: var(--fill-2); }
html.is-dark .fd-ab-topic:hover { background: var(--fill-2); }
html.is-dark .fd-ab-topics li + li::before { background: var(--hair); }

/* Count badge blue read under 4.5:1 on the dark fill, the site's brighter link blue clears it */
html.is-dark .fd-ab-count { color: var(--link); }

/* iOS switch: off track was near invisible on dark, the raised-surface token gives it contrast */
html.is-dark .fd-switch { background: var(--thumb); }
html.is-dark .fd-switch:checked { background: var(--blue); }
html.is-dark .fd-switch:focus-visible { outline-color: var(--focus); }

/* Mail window chrome goes dark. The email card inside stays light on purpose, it is what gets
   mailed and its own padding is set inline so a mail client's theme renders it, not ours. */
html.is-dark .fd-mail { background: var(--card); }
html.is-dark .fd-mail-bar i { background: var(--thumb); }
html.is-dark .fd-mail-body { background: var(--fill-2); }

/* --- About and the metric dictionary ------------------------------------------------------- */

/* --- About: metric growth tooltip (about.js old classes) ------------------ */

html.is-dark .fd-about .spark-tip { background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--edge); }
html.is-dark .fd-about .spark-tip-date { color: var(--ink-2); }
html.is-dark .fd-about .spark-tip-empty { color: var(--ink-2); }
html.is-dark .fd-about .spark-tip-list li { color: var(--ink); }
html.is-dark .fd-about .spark-tip-list li.spark-tip-more { color: var(--ink-2); }
html.is-dark .fd-about .about-metric-now { color: var(--ink); }

/* --- Metric dictionary: entry rows, focus states, nominator (metric_details.js old classes) --- */

html.is-dark .fd-dict .metric-definition-summary:hover { background: var(--fill); }
html.is-dark .fd-dict .metric-definition-summary:focus-visible { outline-color: var(--focus); }
html.is-dark .fd-dict .metric-definition-card.is-highlighted > .metric-definition-summary { background: var(--blue-wash); }
html.is-dark .fd-dict .metric-nominator-attribution h5 { color: var(--ink); }
html.is-dark .fd-dict-search:focus-within { box-shadow: 0 0 0 3px var(--blue-wash-2); }

/* --- The map page (/map): new-design look in both themes, plus dark ------------------------ */

/* Dark mode + light restyle: map-app lane (/map, templates/explorer.html + static/explorer.js).
   Scope change from the swarm coordinator: /map is being restyled to the new look in BOTH themes,
   not just darkened. Dark-only rules start with html.is-dark. Rules that also change light mode
   are scoped to body:not(.fd-theme) instead: /map is the one template with no fd-theme body
   class, so that selector reaches this page only and can never leak into another lane's page. */

/* Old map-app tokens, remapped onto the new site tokens so one change covers both themes (the new
   tokens already switch with html.is-dark). Set on <html>, not body: explorer.js reads several of
   these via getComputedStyle(document.documentElement) for the Leaflet choropleth, and a property
   set on body is invisible to that read even though it would inherit fine into body's own
   descendants. html:has(body:not(.fd-theme)) keeps this to /map for both consumers. */
html:has(body:not(.fd-theme)) {
  --action: var(--blue);
  --action-hover: var(--blue-hover);
  --background: var(--bg);
  --border: var(--line);
  --brand-accent: var(--blue);
  --brand-accent-dark: var(--blue-hover);
  --brand-wash: var(--blue-wash);
  --map-fill: #86868b; /* matches --ink-3, which is the same hex in both themes */
  --muted-text: var(--ink-2);
  --score-high: #0a5cc2; /* home page's blue ramp, darkest step: highest score */
  --score-low: #e3eefc; /* home page's blue ramp, lightest step: lowest score */
  --score-mid: #7fb1ee; /* home page's blue ramp, middle step */
  --selected-ward: #0071e3; /* site blue; a plain hex, not var(--blue), for the JS read above */
  --shadow: var(--shadow-lg);
  --surface: var(--card);
  --surface-muted: var(--fill);
  --surface-strong: #3a3a3c; /* fixed dark chip for the "high priority" toggle state, kept apart
    from the blue "selected" state so the two stay visually distinct in both themes */
  --text: var(--ink);
  --ward-outline: #86868b; /* unselected ward border on the map; see explorer.js wardStyle() */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Score ramp only: the light steps above would nearly disappear on a darkened basemap at the
   choropleth's low fill-opacity (0.44/0.72), so dark mode runs a brighter band of the same blue
   instead of reusing the light ramp's near-black high end. Everything else in the block above
   already switches on its own (it points at tokens like var(--card) that flip with html.is-dark),
   so only the three literal ramp steps need a second definition here. */
html.is-dark:has(body:not(.fd-theme)) {
  /* A wider band plus a stronger fill. At the light theme's 0.44 opacity over the dark basemap the
     whole ramp collapsed into one slate blue and wards couldn't be told apart. */
  --score-high: #5eb0ff;
  --score-low: #1f3148;
  --score-mid: #2f74ad;
  --ward-fill-opacity: 0.85;
}

/* The page background itself, not just the --background token: the original rule layers two
   hardcoded warm/cool radial gradients on top of the variable, so remapping the token alone still
   left faint orange and teal glows bleeding through in both themes. */
body:not(.fd-theme) { background: var(--bg); }

/* --- Header bar, tabs above the map ----------------------------------------------------- */

body:not(.fd-theme) .visualizer-header { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }
body:not(.fd-theme) .visualizer-header::after { background: none; } /* was a warm diagonal accent stripe */
body:not(.fd-theme) .visualizer-tabs { background: var(--fill); border-color: var(--line); box-shadow: var(--shadow-sm); }
body:not(.fd-theme) .visualizer-tabs button { font-weight: 600; }
body:not(.fd-theme) .visualizer-tabs button.is-active { box-shadow: var(--shadow-sm); }

body:not(.fd-theme) .eyebrow,
body:not(.fd-theme) .metric-domain-label { font-weight: 600; letter-spacing: normal; text-transform: none; }

/* --- Map card, floating map controls ----------------------------------------------------- */

body:not(.fd-theme) .map-card,
body:not(.fd-theme) .panel { border-color: var(--line); }
body:not(.fd-theme) #map { background: var(--fill); }

body:not(.fd-theme) .map-shade-loading,
body:not(.fd-theme) .metric-loading-status { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); font-weight: 600; }

body:not(.fd-theme) .map-detail-toggle { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); font-weight: 600; }
body:not(.fd-theme) .map-detail-toggle:hover,
body:not(.fd-theme) .map-detail-toggle:focus-within { background: var(--fill); border-color: var(--blue); }

body:not(.fd-theme) .area-type-toggle { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }
body:not(.fd-theme) .area-type-toggle button { border-left-color: var(--line); }

body:not(.fd-theme) .metric-toggle.is-high:hover { background: #4a4a4d; border-color: #4a4a4d; }

/* --- Metric loading state ------------------------------------------------------------------ */

body:not(.fd-theme) .metric-loading-tile {
  background: linear-gradient(110deg, transparent 24%, color-mix(in srgb, var(--card) 78%, transparent) 38%, transparent 52%), var(--fill);
  border-color: var(--line);
}
body:not(.fd-theme) .metric-loading-spinner { border-color: color-mix(in srgb, var(--blue) 16%, transparent); }
body:not(.fd-theme) .metric-loading-error { background: var(--fill); }

/* --- Wellbeing equation bar + methodology modal content ----------------------------------- */

body:not(.fd-theme) .wellbeing-equation { background: var(--fill); border-color: var(--line); }
body:not(.fd-theme) .methodology-equation { border-bottom-color: var(--hair); }
body:not(.fd-theme) .methodology-caveat p,
body:not(.fd-theme) .methodology-metrics,
body:not(.fd-theme) .methodology-empty { color: var(--ink-2); }

/* --- Metric panel: buttons, chips, tooltip, status badges --------------------------------- */

body:not(.fd-theme) .metric-secondary-action { font-weight: 600; }
body:not(.fd-theme) .metric-secondary-action:hover { background: var(--blue-wash); border-color: color-mix(in srgb, var(--blue) 38%, transparent); color: var(--blue-hover); }
body:not(.fd-theme) .details-close { font-weight: 600; }
body:not(.fd-theme) .metric-chip { font-weight: 600; }
body:not(.fd-theme) .metric-component-row { background: var(--card); }
body:not(.fd-theme) .metric-recommendation-link { color: var(--link); font-weight: 600; }
body:not(.fd-theme) .surprise-button { font-weight: 600; }

/* Floating tooltips read as small popover cards, matching the rest of the site, instead of a
   permanently dark chat bubble. The old bubble used --surface-strong for its background and a
   hardcoded white for its text; remapping --surface-strong for the "high priority" toggle above
   would have made this bubble go light with still-white text in dark mode, so it gets its own
   rule instead of inheriting that variable. */
body:not(.fd-theme) .metric-button-tooltip,
body:not(.fd-theme) .timeline-tooltip { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); color: var(--ink); }
body:not(.fd-theme) .metric-button-tooltip span,
body:not(.fd-theme) .timeline-tooltip span { color: var(--ink-2); }
body:not(.fd-theme) .metric-button-tooltip small,
body:not(.fd-theme) .metric-tooltip-row small,
body:not(.fd-theme) .timeline-tooltip small { color: var(--ink-3); }

/* .metric-status-badge is shared with the dictionary page (rendered there by the same
   metric_details.js helper), so every rule for it stays inside body:not(.fd-theme), which cannot
   match dictionary.html (body class "fd-theme fd-dict"). */
body:not(.fd-theme) .metric-status-badge { font-weight: 600; letter-spacing: normal; text-transform: none; }
body:not(.fd-theme) .metric-status-badge.is-populated { background: var(--blue-wash); color: var(--link); }
body:not(.fd-theme) .metric-status-badge.is-partially_populated,
body:not(.fd-theme) .metric-status-badge.is-zero_records_observed { background: color-mix(in srgb, var(--weak) 16%, transparent); color: var(--weak); }
body:not(.fd-theme) .metric-status-badge.is-source_pending,
body:not(.fd-theme) .metric-status-badge.is-ingestion_not_implemented { background: var(--fill-2); color: var(--ink-2); }
body:not(.fd-theme) .metric-status-badge.is-source_unavailable { background: rgb(215 0 21 / 12%); color: #d70015; } /* no red token on this site; Apple's system red */
html.is-dark body:not(.fd-theme) .metric-status-badge.is-source_unavailable { background: rgb(255 69 58 / 16%); color: #ff453a; } /* dark-mode system red */

/* --- Leaderboard (ranker) + ward details popover ------------------------------------------ */

body:not(.fd-theme) .ward-details-popover { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-lg); }
body:not(.fd-theme) .comparison-header,
body:not(.fd-theme) .comparison-row-title { font-weight: 600; }
body:not(.fd-theme) .comparison-row { background: var(--card); }
body:not(.fd-theme) .comparison-row.is-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 24%, transparent); }
body:not(.fd-theme) .comparison-row.is-hovered { box-shadow: var(--shadow-sm); }
body:not(.fd-theme) .observation-list article { background: var(--card); }
body:not(.fd-theme) .ward-label { box-shadow: var(--shadow-sm); font-weight: 600; }

/* --- Settings / time / methodology modals -------------------------------------------------- */

body:not(.fd-theme) .settings-field legend { font-weight: 600; }
body:not(.fd-theme) input[type="radio"],
body:not(.fd-theme) input[type="checkbox"] { accent-color: var(--blue); }

/* Bug fix, not a theme change: this rule referenced --text-muted, a token that is never defined
   anywhere in styles.css (the real one is --muted-text), so it always fell back to a hardcoded
   slate gray regardless of theme. Pointing it at the real, now-remapped token fixes both modes. */
body:not(.fd-theme) .time-modal-close,
body:not(.fd-theme) .time-modal-hint { color: var(--ink-2); }

/* --- Mobile bottom sheet ------------------------------------------------------------------- */

@media (max-width: 640px) {
  body:not(.fd-theme) .input-panel { box-shadow: var(--shadow-lg); }
}

/* --- Leaflet chrome ------------------------------------------------------------------------- */

/* No zoom control renders (the map has dragging/zoom/scroll all disabled) and there is no
   Leaflet popup (ward details use the custom #ward-details-popover panel instead), so the
   attribution pill is the only stock Leaflet control on this page. */
body:not(.fd-theme) .leaflet-control-attribution { background: var(--glass); border-radius: 6px; font-size: 10px; padding: 2px 6px; }
body:not(.fd-theme) .leaflet-control-attribution,
body:not(.fd-theme) .leaflet-control-attribution a { color: var(--ink-2); }

/* Darkens the OpenStreetMap raster tiles only. The choropleth renders in Leaflet's SVG overlay
   pane, a separate element from the tile pane, so it is never touched by this filter. Values
   tuned so street lines and labels stay readable against the near-black page. */
html.is-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9); }

/* --- The map page, Apple layout ------------------------------------------------------------
   Same app, same behavior. Panels float as borderless white cards on the gray page (dark: dark
   cards on black), the leaderboard is a ruled list, and every control uses the site's own
   segmented control, pills, switches and tiles. Scoped to body:not(.fd-theme), which only /map has. */

body:not(.fd-theme) { background: var(--fill); }
html.is-dark body:not(.fd-theme) { background: var(--bg); }
body:not(.fd-theme) .explorer-layout { gap: 16px; padding: 16px; }

/* Panels */
body:not(.fd-theme) .map-card,
body:not(.fd-theme) .panel { background: var(--card); border: 0; border-radius: 22px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px rgb(0 0 0 / 4%); }
body:not(.fd-theme) #map { background: var(--card); }
body:not(.fd-theme) .panel { gap: 16px; padding: 22px 24px; }
body:not(.fd-theme) .input-card > .input-section { border-top: 0; padding-top: 0; }
body:not(.fd-theme) .panel section + section { border-top-color: var(--hair); }

/* Headings */
body:not(.fd-theme) .panel h2,
body:not(.fd-theme) .ranker-heading { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
body:not(.fd-theme) .input-panel-heading .eyebrow { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
body:not(.fd-theme) .metric-weight-hint { color: var(--ink-2); font-size: 14px; letter-spacing: -0.01em; line-height: 1.45; text-wrap: pretty; }
body:not(.fd-theme) .settings-button { border-radius: 50%; color: var(--ink-3); height: 30px; padding: 5px; width: 30px; }
body:not(.fd-theme) .settings-button:hover { background: var(--fill); color: var(--ink); }

/* Wards / Neighborhoods / χGRIDs: the site's segmented control */
body:not(.fd-theme) .area-type-toggle { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background: var(--glass); border: 0; border-radius: 980px; box-shadow: 0 0 0 1px var(--glass-line); gap: 2px; left: 16px; padding: 3px; top: 16px; }
body:not(.fd-theme) .area-type-toggle button { border: 0; border-radius: 980px; color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; padding: 6px 14px; transition: background 0.2s ease, box-shadow 0.2s ease; }
body:not(.fd-theme) .area-type-toggle button:hover { background: var(--fill); color: var(--ink); }
body:not(.fd-theme) .area-type-toggle button.is-active { background: var(--thumb); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 600; }
body:not(.fd-theme) .area-type-toggle button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Map details: a pill holding the site's switch */
body:not(.fd-theme) .map-detail-toggle { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background: var(--glass); border: 0; box-shadow: 0 0 0 1px var(--glass-line); color: var(--ink); font-size: 13px; font-weight: 500; gap: 10px; padding: 5px 5px 5px 14px; }
body:not(.fd-theme) .map-detail-toggle:hover,
body:not(.fd-theme) .map-detail-toggle:focus-within { background: var(--glass-strong); border: 0; color: var(--ink); }
body:not(.fd-theme) .map-detail-toggle .fd-switch { height: 22px; width: 36px; }
body:not(.fd-theme) .map-detail-toggle .fd-switch::before { height: 18px; width: 18px; }
body:not(.fd-theme) .map-detail-toggle .fd-switch:checked::before { transform: translateX(14px); }
body:not(.fd-theme) .leaflet-control-attribution { background: transparent; }

/* Top wards: a ruled list with rank numbers */
body:not(.fd-theme) .comparison-table { gap: 0; }
body:not(.fd-theme) .comparison-header { border-bottom: 1px solid var(--hair); color: var(--ink-2); font-size: 13px; font-weight: 600; margin: 12px 0 0; padding: 0 8px 8px 38px; }
body:not(.fd-theme) .comparison-row { background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; color: var(--ink); gap: 12px; grid-template-columns: 22px minmax(0, 1fr) auto; padding: 10px 8px; transform: none; transition: background 0.15s ease; }
body:not(.fd-theme) .comparison-row:last-child { border-bottom: 0; }
body:not(.fd-theme) .comparison-row:hover,
body:not(.fd-theme) .comparison-row.is-hovered { background: var(--fill); border-radius: 12px; box-shadow: none; transform: none; }
body:not(.fd-theme) .comparison-row.is-selected { background: var(--blue-wash); border-radius: 12px; box-shadow: none; }
body:not(.fd-theme) .comparison-row:focus-visible { border-radius: 12px; outline: 3px solid var(--focus); outline-offset: -3px; }
body:not(.fd-theme) .comparison-row-rank { color: var(--ink-3); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
body:not(.fd-theme) .comparison-row-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
body:not(.fd-theme) .comparison-row-community-areas { color: var(--ink-2); font-size: 13px; }
body:not(.fd-theme) .comparison-row > strong { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.01em; }
body:not(.fd-theme) .comparison-row-main img { border-radius: 10px; }
/* The row markup nests rank + photo + title in .comparison-row-main; flatten it so each gets its own
   column (rank · photo · name · score). Without this the three spilled out of the 22px rank column
   and the name and score landed on top of the photo. */
body:not(.fd-theme) .comparison-row { grid-template-columns: 22px 48px minmax(0, 1fr) auto; }
body:not(.fd-theme) .comparison-row-main { display: contents; }
body:not(.fd-theme) .comparison-row-main .ward-signifier-thumb,
body:not(.fd-theme) .comparison-row-main .ward-signifier-fallback { height: 48px; width: 48px; }
body:not(.fd-theme) .comparison-row-copy { min-width: 0; }
body:not(.fd-theme) .comparison-row-title,
body:not(.fd-theme) .comparison-row-community-areas { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.fd-theme) .comparison-row > strong { justify-self: end; }
body:not(.fd-theme) .comparison-row-bar,
body:not(.fd-theme) .comparison-row-tags { grid-column: 2 / -1; }

/* Measure picker: one blue button, soft gray pills, borderless tiles */
body:not(.fd-theme) .metric-selection-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
body:not(.fd-theme) .metric-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body:not(.fd-theme) .surprise-button { background: var(--blue); border: 0; color: #fff; flex: 0 0 auto; font-size: 14px; font-weight: 500; padding: 8px 16px; width: auto; }
body:not(.fd-theme) .surprise-button:hover { background: var(--blue-hover); border: 0; color: #fff; }
body:not(.fd-theme) .metric-secondary-action { background: var(--fill); border: 0; color: var(--ink); font-size: 14px; font-weight: 500; padding: 8px 14px; }
body:not(.fd-theme) .metric-secondary-action:hover { background: var(--fill-2); border: 0; color: var(--ink); }
body:not(.fd-theme) .metric-secondary-action.is-active { background: var(--blue-wash); color: var(--link); }
body:not(.fd-theme) .surprise-button:focus-visible,
body:not(.fd-theme) .metric-secondary-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

body:not(.fd-theme) .metric-domain-label { color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
body:not(.fd-theme) .metric-domain-expand { color: var(--ink-3); font-size: 13px; font-weight: 500; }
body:not(.fd-theme) .metric-domain-tiles { gap: 6px; }
body:not(.fd-theme) .metric-toggle { background: var(--fill); border: 0; border-radius: 12px; color: var(--ink-2); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
body:not(.fd-theme) .metric-toggle:hover { background: var(--fill-2); border: 0; color: var(--ink); }
body:not(.fd-theme) .metric-toggle:active { transform: scale(0.94); }
body:not(.fd-theme) .metric-toggle.is-on,
body:not(.fd-theme) .metric-toggle.is-on:hover { background: var(--blue); border: 0; color: #fff; }
/* Top priority: the same blue with a ring, so there is still only one accent color. */
body:not(.fd-theme) .metric-toggle.is-high,
body:not(.fd-theme) .metric-toggle.is-high:hover { background: var(--blue); border: 0; box-shadow: inset 0 0 0 2px var(--card), 0 0 0 2px var(--blue); color: #fff; }
body:not(.fd-theme) .metric-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body:not(.fd-theme) .metric-recommendation-panel p { color: var(--ink-2); font-size: 14px; }

/* Your score bar: readable measure names in soft chips */
body:not(.fd-theme) .wellbeing-equation { align-items: center; background: var(--card); border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--edge), 0 1px 2px rgb(0 0 0 / 4%); padding: 10px 12px 10px 16px; }
body:not(.fd-theme) .wellbeing-equation p:not(.eyebrow) { color: var(--ink); font-size: 14px; }
body:not(.fd-theme) .wellbeing-equation strong { font-weight: 600; margin-right: 6px; }
body:not(.fd-theme) .eq-term { background: var(--fill); border-radius: 980px; display: inline-block; padding: 2px 10px; }
body:not(.fd-theme) .eq-term b { color: var(--link); font-weight: 600; }
body:not(.fd-theme) .eq-op { color: var(--ink-3); font-weight: 600; }
body:not(.fd-theme) .delta-info { background: var(--fill); border: 0; color: var(--ink-2); font-style: normal; font-weight: 600; height: 24px; width: 24px; }
body:not(.fd-theme) .delta-info:hover { background: var(--fill-2); color: var(--ink); }

/* Pop-up windows */
body:not(.fd-theme) .time-modal-box { background: var(--card); border: 0; border-radius: 22px; box-shadow: var(--shadow-pop); }
body:not(.fd-theme) .time-modal-head h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
body:not(.fd-theme) .time-modal-close { border-radius: 50%; font-size: 22px; }
body:not(.fd-theme) .time-modal-close:hover { background: var(--fill); color: var(--ink); }
body:not(.fd-theme) .time-control-toggle { align-items: center; display: flex; justify-content: space-between; }
body:not(.fd-theme) .time-control-toggle .fd-switch { height: 28px; width: 46px; }
body:not(.fd-theme) .settings-option span { display: grid; gap: 2px; }
body:not(.fd-theme) .settings-option strong { color: var(--ink); font-weight: 600; }
body:not(.fd-theme) .time-select { background-color: var(--field); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }

/* Phone: the tab switch and the bottom sheet in the same language */
@media (max-width: 640px) {
  body:not(.fd-theme) .mobile-view-toggle { background: var(--card); border: 0; box-shadow: 0 0 0 1px var(--edge); padding: 3px; }
  body:not(.fd-theme) .mobile-view-toggle button { border-radius: 980px; color: var(--ink); font-weight: 500; }
  body:not(.fd-theme) .mobile-view-toggle button.is-active { background: var(--fill-2); color: var(--ink); font-weight: 600; }
  body:not(.fd-theme) .input-panel { background: var(--card); border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgb(0 0 0 / 12%), 0 0 0 1px var(--edge); }
  body:not(.fd-theme) .mobile-strip-pill { background: var(--fill); border: 0; color: var(--ink); font-weight: 500; }
  body:not(.fd-theme) .input-panel-expander { background: var(--fill); border: 0; color: var(--ink); }
}

/* Ward details: a frosted card with a ruled list, like the rest of the page */
body:not(.fd-theme) .ward-details-popover { -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); background: var(--glass-strong); border: 0; border-radius: 22px; box-shadow: var(--shadow-pop); padding: 20px; }
body:not(.fd-theme) .ward-details-popover h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }
body:not(.fd-theme) .ward-details-popover .eyebrow { color: var(--ink-2); font-size: 13px; font-weight: 600; margin: 0 0 2px; }
body:not(.fd-theme) .ward-details-popover section + section { border-top: 0; padding-top: 6px; }
body:not(.fd-theme) .details-close { background: var(--fill); border: 0; color: var(--ink); font-size: 13px; font-weight: 500; padding: 5px 12px; }
body:not(.fd-theme) .details-close:hover { background: var(--fill-2); color: var(--ink); }
body:not(.fd-theme) .score-card { background: var(--fill); border: 0; border-radius: 14px; padding: 14px 16px; }
body:not(.fd-theme) .metric-score-card { border-left: 0; }
body:not(.fd-theme) .ward-details-popover .score-card strong { font-size: 34px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0; }
body:not(.fd-theme) .score-card span { color: var(--ink-2); font-size: 14px; }
body:not(.fd-theme) .metric-component-list { gap: 0; }
body:not(.fd-theme) .metric-component-row { background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 10px 0; }
body:not(.fd-theme) .metric-component-row:last-child { border-bottom: 0; }
body:not(.fd-theme) .metric-component-row strong { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
body:not(.fd-theme) .metric-component-row div:last-child strong { font-variant-numeric: tabular-nums; }
body:not(.fd-theme) .metric-component-row span { color: var(--ink-2); font-size: 13px; }
body:not(.fd-theme) .wellbeing-equation { flex-wrap: nowrap; }
body:not(.fd-theme) .comparison-row.is-selected .comparison-row-rank { color: var(--ink); }
body:not(.fd-theme) .comparison-row.is-selected .comparison-row-community-areas { color: var(--ink-soft); }
/* The card that follows the cursor on the map is look-only. If it could take the mouse, it would
   steal the hover from the area under it and close itself, which is the flicker. */
.ward-details-popover.is-preview { pointer-events: none; }

/* --- Connect (MCP) — the /connect page, owned by the MCP-connector feature -------------------- */

.fd-copybox { align-items: center; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px var(--edge); box-sizing: border-box; display: flex; gap: 12px; min-width: 0; padding: 8px 8px 8px 20px; width: 100%; }
.fd-copybox code { color: var(--ink); flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; min-width: 0; overflow-x: auto; white-space: nowrap; }
.fd-copybox button { flex: none; }
.fd-copybox button.is-copied { box-shadow: inset 0 0 0 1px var(--good); color: var(--good) !important; }

.fd-cli { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px var(--edge); box-sizing: border-box; margin: 0; max-width: 100%; overflow-x: auto; padding: 18px 20px; }
.fd-cli code { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; white-space: pre; }

@media (max-width: 640px) {
  .fd-copybox { flex-wrap: wrap; padding: 14px 14px 14px 18px; }
  .fd-copybox code { flex-basis: 100%; }
  .fd-copybox button { margin-left: auto; }
}


/* ---- Home: Ward Wise in Claude ----
   An integrations card with one tile per way to connect, so it reads as a feature you plug in
   and not as another centered pitch like the alerts block above it. */
.fd-mcp .fd-mcp-card {
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 0 0 1px var(--edge), var(--shadow-sm);
  padding: 44px 48px;
  display: grid;
  gap: 36px;
}
.fd-mcp .fd-mcp-top { align-items: flex-start; display: flex; gap: 20px; min-width: 0; }
.fd-mcp .fd-mcp-icon {
  align-items: center;
  background: var(--fill);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--hair);
  display: flex;
  flex: none;
  height: 60px;
  justify-content: center;
  width: 60px;
}
.fd-mcp .fd-mcp-copy { display: grid; gap: 8px; min-width: 0; }
.fd-mcp .fd-mcp-kicker { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.fd-mcp .fd-mcp-title { color: var(--ink); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.fd-mcp .fd-mcp-sub { color: var(--ink-2); font-size: 17px; line-height: 1.45; margin: 0; max-width: 48ch; }
.fd-mcp .fd-mcp-tiles { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.fd-mcp .fd-mcp-tile {
  background: var(--fill);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--hair);
  color: inherit;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 18px 20px;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fd-mcp a.fd-mcp-tile:hover { box-shadow: inset 0 0 0 1px var(--line); transform: translateY(-2px); }
.fd-mcp .fd-mcp-tile-label { color: var(--ink); font-size: 15px; font-weight: 600; margin: 0; }
.fd-mcp .fd-mcp-tile-meta { color: var(--ink-2); font-size: 13px; margin: 0; }
.fd-mcp .fd-mcp-tile-url {
  color: var(--ink-2);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.fd-mcp .fd-mcp-tile-cta { color: var(--link); font-size: 13px; font-weight: 600; margin-top: 2px; }
.fd-mcp .fd-mcp-tile-cta::after { content: " \203A"; }
.fd-mcp .fd-mcp-tile-code { cursor: default; }
.fd-mcp .fd-mcp-code-row {
  align-items: center;
  background: var(--card);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--hair);
  display: flex;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
  padding: 8px 10px;
}
.fd-mcp .fd-mcp-code-row code {
  color: var(--ink);
  display: block;
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-mcp .fd-mcp-copy-btn {
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--link);
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}
.fd-mcp .fd-mcp-copy-btn:hover { background: var(--blue-wash); }
.fd-mcp .fd-mcp-copy-btn.is-copied { box-shadow: inset 0 0 0 1px var(--good); color: var(--good); }
@media (max-width: 900px) {
  .fd-mcp .fd-mcp-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fd-mcp .fd-mcp-card { border-radius: 22px; padding: 28px 22px; }
  .fd-mcp .fd-mcp-top { flex-direction: column; }
  .fd-mcp .fd-mcp-icon { height: 52px; width: 52px; }
}


/* About: the team, four cards with photos (same people and roles as the live site). */
.fd-team { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.fd-team-card { align-content: start; display: grid; gap: 4px; justify-items: start; }
.fd-team-card img { aspect-ratio: 1; border-radius: 18px; height: auto; margin-bottom: 10px; object-fit: cover; width: 100%; }
.fd-team-card strong { color: var(--ink); font-size: 17px; font-weight: 600; }
.fd-team-card span { color: var(--ink-2); font-size: 14px; }
/* Profile links under each team member: the network's mark plus the handle, so it's clear the link
   goes to GitHub (or LinkedIn) rather than some other profile. */
.fd-team-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.fd-team-card a.fd-team-link { align-items: center; color: var(--ink-2); display: inline-flex; font-size: 14px; gap: 6px; text-decoration: none; }
.fd-team-card a.fd-team-link svg { fill: currentColor; flex: none; height: 16px; width: 16px; }
.fd-team-card a.fd-team-link span { color: inherit; font-size: inherit; }
.fd-team-card a.fd-team-link:hover { color: var(--link); }
.fd-team-card a.fd-team-link:hover span { text-decoration: underline; }
@media (max-width: 760px) { .fd-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* For organizations: underline tabs shared by the planner and business pages.
   Tabs switch sections of one area. Pills (.fd-seg) stay for in-place filters. */
.fd-tabs { border-bottom: 1px solid var(--hair); display: flex; gap: 28px; justify-self: start; margin-bottom: 8px; max-width: 100%; }
.fd-tabs a { align-items: center; box-shadow: inset 0 -2px 0 transparent; color: var(--ink-2); display: inline-flex; font-size: 15px; min-height: 44px; text-decoration: none; }
.fd-tabs a:hover { color: var(--ink); }
.fd-tabs a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blue); color: var(--ink); font-weight: 600; }
.fd-tabs a:focus-visible { border-radius: 4px; outline: 3px solid var(--focus); outline-offset: 2px; }
.fd-tab-short { display: none; }
@media (max-width: 520px) { .fd-tab-long { display: none; } .fd-tab-short { display: inline; } }
[data-fd-chain-geo] { justify-self: start; max-width: 100%; }


/* --- Header additions after the port: the "More" menu for the registry views, and the account
   avatar for signed-in readers. Both dress like the "Your ward" menu (.mw-menu) so the header has
   one kind of dropdown. Selectors start with .gn to outrank .gn .gn-links a and .fd-theme p. ------- */
.gn-more { position: relative; display: flex; align-items: center; }
.gn .gn-more-toggle {
  align-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; display: inline-flex; gap: 5px;
  font: 400 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em; opacity: 0.8; padding: 0; white-space: nowrap;
}
.gn .gn-more-toggle:hover { opacity: 1; }
.gn .gn-more-toggle.is-active { font-weight: 600; opacity: 1; }
.gn-more-chev { fill: none; height: 6px; opacity: 0.6; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform 0.25s ease; width: 9px; }
.gn-more-toggle[aria-expanded="true"] .gn-more-chev { transform: rotate(180deg); }

.gn .gn-more-menu,
.gn .gn-account .nav-account-menu {
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  background: var(--glass-strong); border: 0; border-radius: 18px; box-shadow: var(--shadow-pop); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 8px 0; position: absolute; right: 0; top: calc(100% + 10px); transform-origin: top right; z-index: 1200;
}
.gn .gn-more-menu { left: 50%; right: auto; transform: translateX(-50%); max-height: min(70vh, 640px); overflow: auto; width: 280px; }
.gn .gn-account .nav-account-menu { width: 240px; }
.gn .gn-more-menu[hidden], .gn .gn-account .nav-account-menu[hidden] { display: none; }
.gn .gn-more-menu:not([hidden]), .gn .gn-account .nav-account-menu:not([hidden]) { animation: gn-menu-open 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes gn-menu-open { from { opacity: 0; translate: 0 -6px; scale: 0.97; } to { opacity: 1; translate: 0 0; scale: 1; } }

.gn .gn-more-group + .gn-more-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.gn .gn-more-menu .gn-more-heading {
  color: var(--ink-2); font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em; margin: 10px 18px 4px; text-transform: uppercase;
}
.gn .gn-more-menu a,
.gn .gn-account .nav-account-menu a {
  border-radius: 8px; color: var(--ink); display: block; font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em; margin: 0 6px; opacity: 1; padding: 7px 12px; text-decoration: none; white-space: normal;
}
.gn .gn-more-menu a:hover, .gn .gn-account .nav-account-menu a:hover { background: var(--fill); }
.gn .gn-more-menu a[aria-current="page"] { background: var(--fill); font-weight: 600; }

.gn-account { position: relative; display: flex; align-items: center; }
/* display:flex above would otherwise beat [hidden], showing an empty circle to signed-out visitors. */
.gn-account[hidden] { display: none; }
.gn-account .nav-account-button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); font: 600 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; cursor: pointer; display: grid; place-items: center; }
.gn .gn-account .nav-account-email { color: var(--ink-2); font-size: 12px; margin: 8px 18px 6px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1040px) {
  .gn .gn-more-menu, .gn .gn-account .nav-account-menu { left: 12px; position: fixed; right: 12px; top: 96px; transform: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gn .gn-more-menu:not([hidden]), .gn .gn-account .nav-account-menu:not([hidden]) { animation: none; }
}

/* ==========================================================================
   Metric relationship, causal and impact reports (2026-10). Hierarchy: the question bar is a
   compact sentence, the answer is the loudest text on the page, the chart is the visual centre,
   the over-time evidence and fine print follow. Selectors start with .fd-theme where they must
   beat the redesign's global form styles (.fd-theme select is 17px / 48px / width 100%).
   ========================================================================== */
.rel-page { margin: 0 auto; max-width: 1080px; padding: 40px 22px 80px; }
.rel-head { margin-bottom: 18px; }
.rel-title { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 14px; }
.rel-question { align-items: center; color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: 17px; gap: 8px 10px; }
.fd-theme .rel-picker select {
  background-color: var(--fill); background-position: right 10px center; border: 0; border-radius: 10px;
  color: var(--ink); font-size: 15px; font-weight: 600; max-width: 22rem; min-height: 36px; padding: 6px 30px 6px 12px; width: auto;
}
.fd-theme .rel-picker select:focus-visible { outline: 3px solid rgb(0 113 227 / 40%); outline-offset: 2px; }
.rel-picker { display: inline-flex; max-width: 100%; min-width: 0; }
.rel-swap { background: none; border: 0; border-radius: 50%; color: var(--ink-2); cursor: pointer; font-size: 17px; height: 32px; width: 32px; }
.rel-swap:hover { background: var(--fill); color: var(--ink); }
.rel-seg button { font-size: 13px; padding: 6px 12px; }

.rel-answer { margin: 6px 0 18px; max-width: 46rem; }
.rel-answer-text { color: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; }
.rel-stats { color: var(--ink-2); font-size: 14px; margin: 0; }
.rel-muted { color: var(--ink-2); font-size: 15px; }

.rel-chart { background: var(--card); border-radius: 18px; box-shadow: var(--shadow-sm); min-height: 300px; padding: 12px; }
.rel-chart-note { color: var(--ink-3); font-size: 13px; margin: 8px 4px 0; }

/* The scatter itself (WardWiseCharts.scatter). Sizes are real pixels: no viewBox shrinking. */
.wwc-scatter-wrap { position: relative; width: 100%; }
.wwc-scatter { display: block; overflow: visible; }
.wwc-grid { stroke: var(--line); stroke-opacity: 0.55; stroke-width: 1; }
.wwc-axis { stroke: var(--ink-3); stroke-width: 1; }
.wwc-median { stroke: var(--ink-3); stroke-dasharray: 3 4; stroke-width: 1; }
.wwc-trend { stroke: var(--blue); stroke-dasharray: 6 5; stroke-opacity: 0.7; stroke-width: 2; }
.wwc-tick { fill: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.wwc-axis-label { fill: var(--ink); font-size: 13px; font-weight: 600; }
.wwc-ring { fill: none; stroke: var(--card); stroke-width: 2; }
.wwc-num-bg { fill: var(--blue); fill-opacity: 0.85; stroke: var(--card); stroke-width: 1.5; }
.wwc-num { fill: #fff; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.wwc-dot { fill: var(--blue); fill-opacity: 0.65; }
.wwc-mark { cursor: pointer; outline: none; }
.wwc-mark:hover .wwc-ring, .wwc-mark:focus-visible .wwc-ring { stroke: var(--blue); stroke-width: 3; }
.wwc-mark:hover .wwc-num-bg, .wwc-mark:focus-visible .wwc-num-bg { fill-opacity: 1; }
.wwc-mine { fill: none; stroke: #ff9f0a; stroke-width: 3; }
.wwc-mine-label { fill: var(--ink); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.wwc-scatter-card {
  background: var(--glass-strong); border-radius: 12px; box-shadow: var(--shadow-pop); color: var(--ink); display: grid; font-size: 13px;
  gap: 2px; max-width: 260px; padding: 10px 12px; pointer-events: none; position: absolute; z-index: 5;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.wwc-scatter-card[hidden] { display: none; }
.wwc-scatter-card span { color: var(--ink-2); }
.wwc-scatter-card em { color: var(--link, var(--blue)); font-style: normal; margin-top: 2px; }

.rel-evidence { margin-top: 40px; }
/* "Every place, every year": the lag grid on the relationship page */
.rel-lag { margin-top: 40px; }
.rel-lag-head { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-bottom: 16px; }
.rel-lag-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.rel-lag-head p { color: var(--ink-2); font-size: 15px; margin: 0; max-width: 46rem; }
.wwc-lg-grid { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wwc-lg-legend { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0 0 10px; max-width: 60rem; }
.wwc-lg-legend b { color: var(--ink); }
/* One grid: the big panel spans both rows and stretches to their height (its SVG fills what's left
   under its caption, scaling uniformly so dots stay round); rows use display: contents on desktop. */
.wwc-lg-layout { display: grid; gap: 8px; grid-template-columns: minmax(0, 2.1fr) 18px repeat(5, minmax(0, 1fr)); }
.wwc-lg-main { display: flex; grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
.wwc-lg-main .wwc-lg-cell { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 10px; }
.wwc-lg-main .wwc-lg { aspect-ratio: auto; flex: 1 1 0; height: auto; min-height: 0; }
.wwc-lg-main .wwc-lg-cell figcaption { font-size: 13px; }
.wwc-lg-main .wwc-lg-corner { font-size: 9px; }
.wwc-lg-main .wwc-lg-dot { stroke-width: 4.5; }
.wwc-lg-row { display: contents; }
.wwc-lg-row .wwc-lg-cell { gap: 4px; padding: 6px; }
.wwc-lg-row .wwc-lg-cell figcaption { display: flex; flex-wrap: wrap; font-size: 11px; gap: 0 6px; justify-content: space-between; }
.wwc-lg-tag { align-self: center; color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; transform: rotate(180deg); white-space: nowrap; writing-mode: vertical-rl; }
@media (max-width: 900px) {
  .wwc-lg-layout { display: block; }
  .wwc-lg-main { margin: 0 auto 12px; max-width: 420px; }
  .wwc-lg-main .wwc-lg { aspect-ratio: 1; flex: none; }
  .wwc-lg-row { display: grid; gap: 8px; grid-auto-columns: minmax(118px, 1fr); grid-auto-flow: column; margin-bottom: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .wwc-lg-row .wwc-lg-cell { grid-row: 2; scroll-snap-align: start; }
  .wwc-lg-tag { grid-column: span 5; grid-row: 1; text-align: left; transform: none; writing-mode: horizontal-tb; }
}
.wwc-lg-cell { align-content: start; background: var(--fill); border-radius: 14px; display: grid; gap: 6px; margin: 0; padding: 8px; }
.wwc-lg-cell figcaption { display: grid; font-size: 12px; gap: 2px; line-height: 1.35; }
.wwc-lg-cell figcaption span { color: var(--ink-2); }
.wwc-lg-cell.is-empty { align-content: center; min-height: 140px; }
.wwc-lg { aspect-ratio: 1; display: block; height: auto; width: 100%; }
.wwc-lg-quad { fill: var(--blue); fill-opacity: 0.05; }
.wwc-lg-dot { fill: none; stroke-linecap: round; stroke-opacity: 0.55; stroke-width: 6; }
.wwc-lg-dot.is-same { stroke: var(--blue); }
.wwc-lg-dot.is-opp { stroke: var(--chart-b); }
.wwc-lg-dot.is-tie { stroke: var(--ink-3); stroke-opacity: 0.35; }
.wwc-lg-you { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-width: 11; stroke-opacity: 0.9; }
.wwc-lg-corner { fill: var(--ink-3); font-size: 15px; }
.rel-lag-summary { align-items: center; display: grid; gap: 18px; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); margin: 18px 0 8px; }
.rel-lag-summary p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0; max-width: 40rem; }
.wwc-lg-strip { display: block; height: auto; width: 100%; }
.wwc-lg-share { fill: var(--ink-3); fill-opacity: 0.45; }
.wwc-lg-share.is-best { fill: var(--blue); fill-opacity: 0.85; }
@media (max-width: 1000px) { .wwc-lg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .wwc-lg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-lag-summary { grid-template-columns: 1fr; }
}
.rel-evidence-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.rel-evidence-head p { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; max-width: 46rem; }
.rel-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rel-card { background: var(--fill); border-radius: 16px; display: grid; gap: 8px; align-content: start; padding: 16px 18px; }
.rel-card h3 { font-size: 15px; font-weight: 700; margin: 0; }
.rel-card p { font-size: 14px; line-height: 1.45; margin: 0; }
.rel-card-foot { color: var(--ink-3); font-size: 12px !important; }
.rel-big { font-size: 28px !important; font-weight: 700; letter-spacing: -0.02em; }
.rel-conf, .rel-flags { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rel-conf li { display: grid; font-size: 14px; gap: 2px; }
.rel-conf span { color: var(--ink-2); font-size: 13px; }
.rel-flags li { border-left: 3px solid #ff9f0a; color: var(--ink-2); font-size: 13px; padding-left: 8px; }
.rel-sub { font-size: 17px; font-weight: 700; margin: 28px 0 8px; }

.rel-grade { border-radius: 980px; display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; white-space: nowrap; }
.rel-grade-none { background: var(--fill); color: var(--ink-2); }
.rel-grade-weak { background: rgb(255 159 10 / 16%); color: #b25000; }
.rel-grade-suggestive { background: rgb(0 113 227 / 12%); color: #0058b0; }
.rel-grade-moderate { background: rgb(52 199 89 / 16%); color: #1b7f37; }
html.is-dark .rel-grade-weak { color: #ffb340; }
html.is-dark .rel-grade-suggestive { color: #64aaff; }
html.is-dark .rel-grade-moderate { color: #4cd964; }

.rel-checklist { display: grid; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.rel-checklist li { align-items: start; display: grid; font-size: 14px; gap: 10px; grid-template-columns: 22px 1fr; }
.rel-check { border-radius: 50%; display: grid; font-size: 12px; font-weight: 700; height: 22px; place-items: center; width: 22px; }
.is-pass .rel-check { background: rgb(52 199 89 / 18%); color: #1b7f37; }
.is-fail .rel-check { background: var(--fill); color: var(--ink-3); }
.rel-check-detail { color: var(--ink-2); }
.rel-check-why { color: var(--ink); display: block; font-size: 13px; margin-top: 2px; }
.rel-check-caveat, .rel-caveat { border-left: 3px solid #ff9f0a; color: var(--ink-2); display: block; font-size: 13px; margin-top: 4px; padding-left: 8px; }
.rel-caveat { font-size: 13px !important; }
.rel-contrib-note { color: var(--ink-2); font-size: 13px; margin: 6px 0 0; }
.rel-conf-table th[scope="row"] span { color: var(--ink-3); display: block; font-size: 11px; font-weight: 400; }

.wwc-lagbars, .wwc-event { display: block; height: auto; width: 100%; }
.wwc-lag { fill: var(--ink-3); fill-opacity: 0.45; }
.wwc-lag.is-later { fill: var(--blue); fill-opacity: 0.55; }
.wwc-lag.is-lead { fill-opacity: 1; }
.wwc-lag-k { fill: var(--ink-2); font-size: 11px; }
.wwc-event-line { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.wwc-event-control { fill: none; stroke: var(--ink-3); stroke-dasharray: 4 4; stroke-width: 1.5; }
.wwc-event-band { fill: var(--ink-3); fill-opacity: 0.16; }

/* dynamics/2: tests and the raw data under each check (relationship page) */
.rel-dirs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 8px; }
.rel-dir { background: var(--fill); border-radius: 16px; display: grid; gap: 8px; align-content: start; padding: 16px 18px; }
.rel-dir h3 { font-size: 15px; font-weight: 700; margin: 0; }
.rel-dir p { margin: 0; }
.rel-dir .rel-checklist { margin: 4px 0 0; }
.rel-dir-stats, .rel-stat-list { color: var(--ink-2); display: grid; font-size: 13px; gap: 4px; line-height: 1.45; margin: 0; padding-left: 16px; }
.rel-dir-stats b { color: var(--ink); }
.rel-viz-label { color: var(--ink-2); font-size: 12px !important; font-weight: 600; margin-top: 6px !important; }
.rel-viz-key { align-items: center; color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: 12px !important; gap: 4px 12px; }
.rel-viz-key i { align-items: center; display: inline-flex; font-style: normal; gap: 5px; white-space: nowrap; }
.rel-viz-key span { display: inline-block; height: 10px; width: 14px; }
.rel-viz-key .key-line { border-top: 2.5px solid var(--blue); height: 0; }
.rel-viz-key .key-dash { border-top: 1.5px dashed var(--ink-3); height: 0; }
.rel-viz-key .key-band { background: var(--ink-3); border-radius: 2px; opacity: 0.25; }
.rel-viz-key .key-same { background: var(--blue); border-radius: 2px; }
.rel-viz-key .key-opp { background: var(--chart-b); border-radius: 2px; }
.rel-conf-table { border-collapse: collapse; font-size: 13px; table-layout: auto; width: 100%; }
.rel-conf-table td { white-space: nowrap; }
.rel-conf-table th, .rel-conf-table td { border-bottom: 1px solid var(--hair, var(--line)); padding: 5px 4px; text-align: right; vertical-align: top; }
.rel-conf-table th[scope="row"], .rel-conf-table thead th:first-child { text-align: left; }
.rel-conf-table thead th { color: var(--ink-2); font-weight: 600; }
.rel-conf-table td span { color: var(--ink-3); display: block; font-size: 11px; }
.rel-conf-table tr.is-fade td:last-child { color: var(--chart-b); }
.rel-formula { color: var(--ink-2); font-size: 12px !important; line-height: 1.5 !important; }
.wwc-rstrip, .wwc-jumps, .wwc-yc-chart { display: block; height: auto; width: 100%; }
.wwc-rstrip-stem { stroke: var(--ink-3); stroke-width: 1.5; }
.wwc-rstrip-dot { stroke: var(--blue); stroke-linecap: round; stroke-width: 7; }
.wwc-jump { fill: none; stroke-linecap: round; stroke-opacity: 0.85; stroke-width: 5; }
.wwc-jump.is-up { stroke: var(--blue); }
.wwc-jump.is-down { stroke: var(--chart-b); }
.wwc-jump-col { fill: var(--ink-3); fill-opacity: 0.07; }
.wwc-lg-null { fill: var(--ink-3); fill-opacity: 0.22; }
.wwc-lg-ci { stroke: var(--ink-2); stroke-width: 1.5; }
.wwc-lg-obs { stroke: var(--ink-2); stroke-linecap: round; stroke-width: 9; }
.wwc-lg-obs.is-sig { stroke: var(--blue); }
.wwc-lg-cell figcaption .wwc-lg-p { color: var(--ink-3); }
.wwc-lg-cell figcaption .wwc-lg-p.is-sig { color: var(--blue); font-weight: 600; }
.wwc-lg-cell.is-sig { box-shadow: inset 0 0 0 2px var(--blue); }
.wwc-lg-cell.is-inband .wwc-lg { opacity: 0.4; }
.wwc-lg-cell.is-inband figcaption { color: var(--ink-3); }
.wwc-lg-sub { color: var(--ink-3) !important; }
.rel-lag-verdict { font-size: 15px; margin: 0 0 10px !important; max-width: 52rem; }
.rel-lag-verdict { color: var(--ink) !important; margin-top: 8px !important; }
.rel-contrib-wrap { background: var(--fill); border-radius: 14px; margin: 6px 0 14px; max-width: 640px; padding: 12px 16px; }
.rel-contrib-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.rel-contrib-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.rel-contrib-head label { align-items: center; color: var(--ink-2); display: flex; font-size: 13px; gap: 8px; }
.fd-theme .rel-contrib-head select {
  background-color: var(--card); background-position: right 10px center; border: 0; border-radius: 10px;
  color: var(--ink); font-size: 14px; font-weight: 600; min-height: 32px; padding: 4px 30px 4px 10px; width: auto;
}
.wwc-yc.is-same { fill: var(--blue); fill-opacity: 0.8; }
.wwc-yc.is-opp { fill: var(--chart-b); fill-opacity: 0.8; }

.rel-more { margin-top: 36px; }
.rel-links { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 18px; }
.rel-links .fd-more { font-size: 15px; }
.rel-table table { font-size: 14px; }

/* Ranked lists on the driver and impact analyses. */
.rel-rank { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rel-rank li a {
  align-items: center; background: var(--fill); border-radius: 14px; color: var(--ink); display: grid; gap: 4px 14px;
  grid-template-columns: 1fr auto 120px; padding: 12px 16px; text-decoration: none;
}
.rel-rank li a:hover { background: var(--card); box-shadow: var(--shadow-sm); }
.rel-rank-name { font-size: 16px; font-weight: 600; }
.rel-rank-why { color: var(--ink-2); font-size: 13px; grid-column: 1 / 3; }
.rel-rank .wwc-event { grid-column: 3; grid-row: 1 / 3; }
.rel-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 22px; }
.rel-fact strong { display: block; font-size: 24px; letter-spacing: -0.02em; }
.rel-fact span { color: var(--ink-2); font-size: 13px; }

@media (max-width: 640px) {
  .rel-page { padding-top: 24px; }
  .rel-title { font-size: 26px; }
  .rel-answer-text { font-size: 21px; }
  .rel-question { font-size: 15px; }
  .rel-picker { flex: 1 1 100%; }
  .fd-theme .rel-picker select { max-width: 100%; width: 100%; }
  .rel-chart { padding: 6px; }
  .rel-rank li a { grid-template-columns: 1fr auto; }
  .rel-rank .wwc-event { display: none; }
}


/* The methodology page (/reports/methodology). */
.method-page { max-width: 52rem; }
.method-lead { color: var(--ink-2); font-size: 17px; line-height: 1.55; margin: 6px 0 14px; }
.method-callout { background: var(--fill); border-left: 3px solid var(--blue); border-radius: 10px; font-size: 15px; line-height: 1.5; margin: 0 0 14px; padding: 10px 14px; }
.method-toc { display: flex; flex-wrap: wrap; font-size: 14px; gap: 6px 16px; margin-bottom: 8px; }
.method-section { margin-top: 34px; scroll-margin-top: 80px; }
.method-section h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.method-section h3 { font-size: 16px; font-weight: 700; margin: 22px 0 6px; }
.method-section p, .method-section li, .method-section dd { font-size: 15px; line-height: 1.6; }
.method-section p { margin: 0 0 10px; }
.method-kind { background: var(--fill); border-radius: 980px; color: var(--ink-2); font-size: 11px; font-weight: 600; margin-left: 6px; padding: 2px 8px; text-transform: uppercase; vertical-align: middle; }
.method-note { color: var(--ink-2); font-size: 14px !important; }
.method-formula { background: var(--fill); border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px !important; overflow-x: auto; padding: 10px 14px; }
.method-table { border-collapse: collapse; font-size: 14px; margin: 6px 0 4px; width: 100%; }
.method-table th, .method-table td { border-bottom: 1px solid var(--hair, var(--line)); padding: 7px 6px; text-align: left; vertical-align: top; }
.method-table thead th { color: var(--ink-2); font-weight: 600; }
.method-table th[scope="row"] { font-weight: 600; }
.method-defs dt { font-weight: 700; margin-top: 12px; }
.method-defs dd { color: var(--ink); margin: 2px 0 0; }
.method-list { display: grid; gap: 8px; padding-left: 18px; }

/* "How to read this" on the analysis toolkit pages. */
.rel-howto { background: var(--fill); border-radius: 14px; margin: 10px 0 18px; max-width: 46rem; padding: 10px 16px; }
.rel-howto summary { color: var(--link, var(--blue)); cursor: pointer; font-size: 15px; font-weight: 600; }
.rel-howto[open] summary { margin-bottom: 8px; }
.rel-howto-body { color: var(--ink); display: grid; font-size: 14px; gap: 8px; line-height: 1.5; }
.rel-howto-body p, .rel-howto-body ul { margin: 0; }
.rel-howto-body ul { padding-left: 18px; }
.rel-howto-example { color: var(--ink-2); }

/* /for/financing: one report split into headed sections, then the dictionary's notes on each measure. */
.fd-report-section { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 32px 0 12px; }
.fd-appendix { margin-top: 40px; }
.fd-appendix .fd-report-section { margin-top: 0; }
.fd-appendix-entry { margin-top: 20px; }
.fd-appendix-entry h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.fd-appendix-entry p + p { margin-top: 4px; }