: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;
}

/* 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;
  }
}

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

/* 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; 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; }
}

/* 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 0.9rem; }
.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: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;
  margin-left: 0.9rem;
  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; }

/* 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.4rem; margin: 0.6rem 0; }
.near-address-form input { border: 1px solid var(--border, #d9dee6); border-radius: 8px; flex: 1; font: inherit; max-width: 22rem; padding: 0.35rem 0.6rem; }
.near-address-bar { margin: 0; }
.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; }
}

@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%; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 0.35rem; }
.team-card strong { font-weight: 600; }
.team-card span { color: var(--muted-text); }
.team-card a { font-size: 0.85rem; }