:root {
  color-scheme: light;
  --page:           #ffffff;
  --panel:          #fbfaf8;
  --panel-border:   #e4e1da;
  --hairline:       #e4e1da;
  --chip-bg:        #efece4;

  --text-primary:   #1a1a18;
  --text-secondary: #57544c;
  --text-muted:     #8b877c;

  /* Categorical palette — flat, fully saturated, distinct hues (not shades
     of one colour), matched per-category with a legible text colour. */
  --cat-established-fill: #2e8540;
  --cat-established-text: #ffffff;
  --cat-live-mayoral-fill: #f0b429;
  --cat-live-mayoral-text: #1a1a18;
  --cat-live-nonmayoral-fill: #1d3557;
  --cat-live-nonmayoral-text: #ffffff;
  --cat-negotiation-fill: #9e2a3a;
  --cat-negotiation-text: #ffffff;
  --cat-nation-fill: #b7c0dc;
  --cat-nation-text: #1a1a18;
  --cat-nodeal-fill: #e4d2a8;
  --cat-nodeal-text: #1a1a18;

  --selected-stroke: #1a1a18;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
}

/* --- Full-bleed map ------------------------------------------------------ */

.map-pane {
  position: absolute;
  inset: 0;
  background: var(--page);
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-loading { color: var(--text-muted); }

.map-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

.area-interactive {
  cursor: pointer;
}
/* Hover = a lightening overlay; selected = a stroke-weight change. Neither
   swaps the fill colour, so the flat categorical palette stays intact. */
.area-interactive.is-hover {
  filter: brightness(1.16);
}
.area-interactive.is-selected {
  stroke: #1a1a18 !important;
  stroke-width: 13px !important;
}
/* Councils on the focused profile map — stroke width is set inline by
   selectCouncil(), scaled to the zoom. */
.is-council-hover { filter: brightness(1.12); }
.is-council-selected { stroke: var(--selected-stroke) !important; }

/* Floating hover label */
.float-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -130%);
  pointer-events: none;
  background: var(--text-primary);
  color: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  text-align: center;
}
.float-label .fl-name {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}
.float-label .fl-meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.15rem;
}

/* --- Floating card -------------------------------------------------------- */

.card-wrap {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 1000;
  width: 340px;
  max-width: calc(100vw - 28px);
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 3px 20px rgba(26, 26, 24, 0.18);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
}

.section-label {
  margin: 0 0 0.4rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* --- Tabs ------------------------------------------------------------------ */

.tab-bar[hidden] { display: none; }
.tab-bar {
  display: flex;
  gap: 4px;
  margin: 0.7rem 0.8rem;
  background: var(--chip-bg);
  border-radius: 8px;
  padding: 3px;
}
.tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0.45rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}
.tab-btn.active {
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(26, 26, 24, 0.15);
}
.tab-panel[hidden] { display: none; }

/* --- Breadcrumb (profile view) --------------------------------------------- */

.breadcrumb-bar[hidden] { display: none; }
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.8rem 0.5rem;
}
.back-btn {
  background: var(--text-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.back-btn:hover { background: var(--text-secondary); }

.sibling-toggle {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  background: var(--chip-bg);
  border-radius: 8px;
  padding: 3px;
}
.sibling-toggle:empty { display: none; }
.sibling-btn {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}
.sibling-btn.active {
  background: var(--panel);
  color: var(--text-primary);
}

/* --- Map view select --------------------------------------------------------- */

.mode-select-wrap {
  margin: 0 0.8rem 0.8rem;
}
.mode-select-wrap .section-label { display: block; }
#mapModeSelect, #compareLayerSelect {
  width: 100%;
  padding: 0.55rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  border: 1.5px solid var(--panel-border);
  border-radius: 8px;
  font-family: inherit;
  background: var(--page);
  cursor: pointer;
}

/* --- Legend (swatch + label + count) --------------------------------------- */

.legend-box {
  margin: 0 0.8rem 0.8rem;
}
.legend-box #legendList { display: flex; flex-direction: column; gap: 0.3rem; }
.legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.legend-sw {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}

/* --- Search ------------------------------------------------------------------ */

.search-wrap {
  position: relative;
  margin: 0 0.8rem 0.9rem;
}
#search {
  width: 100%;
  padding: 0.6rem 0.7rem;
  /* 16px, not a smaller rem value — below that, iOS Safari auto-zooms the
     whole page on focus, which is jarring when the map fills the screen. */
  font-size: 16px;
  border: 1.5px solid var(--panel-border);
  border-radius: 8px;
  font-family: inherit;
  outline: none;
  background: var(--page);
  color: var(--text-primary);
}
#search:focus { border-color: var(--text-primary); }
#suggestions {
  /* position:fixed with left/top/width set in JS (positionSuggestions() in
     app.js) from #search's own bounding rect — it lives outside #card in
     the DOM specifically so .card's overflow-y:auto can't clip it, which
     position:fixed alone would not have escaped on its own. */
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(26, 26, 24, 0.15);
  max-height: 260px;
  overflow-y: auto;
  display: none;
  z-index: 1400;
}
#suggestions.open { display: block; }
.sugg-row {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}
.sugg-row:hover, .sugg-row.active { background: rgba(0, 0, 0, 0.045); }
.sugg-name { font-weight: 600; color: var(--text-primary); }
.sugg-via { font-size: 0.68rem; color: var(--text-muted); display: block; }
.sugg-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.sugg-empty { padding: 0.6rem 0.7rem; font-size: 0.76rem; color: var(--text-muted); }

/* --- Selection panel (appended below the persistent controls) -------------- */

.selection-panel {
  position: relative;
  margin: 0 0.8rem 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}
.sel-close {
  position: absolute;
  top: 0.75rem;
  right: 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: 1;
  border-radius: 4px;
  font-family: inherit;
}
.sel-close:hover { background: var(--chip-bg); color: var(--text-primary); }

.sel-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sel-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
}
.sel-photo[hidden] { display: none; }
.sel-head-text { min-width: 0; flex: 1 1 auto; }
.sel-name {
  margin: 0 1.6rem 0.3rem 0;
  font-size: 1rem;
  font-weight: 700;
}
.sel-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.sel-facts { margin: 0; }
.sel-facts .fact-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid var(--hairline);
}
.sel-facts .fact-row:last-child { border-bottom: none; }
.sel-facts .fact-k { color: var(--text-muted); }
.sel-facts .fact-v { color: var(--text-primary); font-weight: 600; text-align: right; }

.sel-cta[hidden] { display: none; }
.sel-cta {
  display: block;
  width: 100%;
  background: var(--text-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  margin-top: 0.7rem;
}
.sel-cta:hover { background: var(--text-secondary); }

/* --- Latest developments tab ------------------------------------------------ */

.developments-list {
  list-style: none;
  margin: 0;
  padding: 0 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.dev-item { border-bottom: 1px solid var(--hairline); padding-bottom: 0.85rem; }
.dev-item:last-child { border-bottom: none; padding-bottom: 0; }
.dev-date {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.dev-headline {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
}
.dev-body {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.dev-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.dev-area-chip {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  background: var(--page);
  cursor: pointer;
}
.dev-area-chip:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* --- Profile body (full text, scrolls within the card) ---------------------- */

.profile-body { padding: 0 0.9rem 0.9rem; }

/* The area's own name opens the profile, with a small status chip right
   underneath it in the exact colour the area gets on the main map
   (CATEGORY_META). */
.pf-header { margin: 0 0 0.9rem; }
.pf-area-name {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pf-status-chip {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}
.pf-formed {
  margin: 0 0 0.9rem;
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.pf-no-leader {
  margin: 0 0 0.9rem;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

/* Leader photo + short bio — one card per person (Northern Ireland has
   two, everyone else one). Sits between the institutional facts and the
   funding/history content, since this is about the person, not the
   authority. */
.pf-leaders {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.pf-leader-card {
  border: 1px solid var(--hairline);
  background: var(--page);
  padding: 0.8rem;
}
.pf-leader-card summary { display: flex; align-items: flex-start; gap: 0.8rem; }
.pf-leader-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
}
.pf-leader-text { display: flex; flex-direction: column; min-width: 0; }
.pf-leader-name {
  margin: 0 0 0.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pf-leader-role {
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.pf-leader-term {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.pf-leader-bio {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.45;
}
.pf-leader-deputy {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.pf-funding {
  border: 1px solid var(--hairline);
  background: var(--page);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.9rem;
}
.pf-funding summary { display: flex; flex-direction: column; }
.pf-funding .pf-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 0.3rem;
}
.pf-funding .pf-amount {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pf-funding .pf-caption {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0;
}
.pf-budget .pf-amount { font-size: 1.05rem; line-height: 1.25; }
.pf-budget .pf-eyebrow:not(:first-child) { margin-top: 0.6rem; }
.pf-budget-parts {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}
.pf-budget .pf-caption + .pf-caption { margin-top: 0.4rem; }

.pf-verify {
  border-left: 3px solid var(--cat-nodeal-fill);
  background: var(--page);
  padding: 0.7rem 0.8rem;
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 1rem;
}
.pf-verify strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pf-prose h3 {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.pf-prose h3:not(:first-child) { margin-top: 1rem; }
.pf-prose p {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.pf-prose > .pf-collapsible { margin-top: 1rem; }
.pf-prose > .pf-collapsible:first-child { margin-top: 0; }
.pf-prose > .pf-collapsible p:last-child { margin-bottom: 0; }

.pf-board-wrap { overflow-x: auto; }
.pf-board {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}
.pf-board th {
  text-align: left;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline);
  padding: 0.35rem 0.5rem;
}
.pf-board td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.pf-board td.pf-unconfirmed { color: var(--text-muted); font-style: italic; }
.pf-board .dp-role { display: block; font-size: 0.68rem; color: var(--text-muted); }

.pf-source {
  margin-top: 1.1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* --- Collapsible profile sections -------------------------------------------
   Plain <details>/<summary> (see renderCollapsible() in app.js) — closed by
   default, no JS: the leader card's photo + headline, the election result's
   bar + legend, and each prose/board subsection heading are all a <summary>;
   the rest only renders once expanded. The chevron is positioned outside
   normal flow, so it never disturbs whatever layout (flex row, stacked
   block) the summary's own content needs. */
.pf-collapsible > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding-right: 1.5rem;
}
.pf-collapsible > summary::-webkit-details-marker { display: none; }
.pf-collapsible > summary::marker { content: ""; }
.pf-collapsible > summary:hover { opacity: 0.8; }
.pf-toggle-chevron {
  position: absolute;
  top: 0.1rem;
  right: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.pf-collapsible[open] > summary .pf-toggle-chevron { transform: rotate(90deg); }
.pf-collapsible-detail { margin-top: 0.6rem; }

.pf-subsection-heading {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.pf-subsection-count {
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

/* --- Mayoral election-result bar --------------------------------------------
   One shared component at two sizes: compact (.sel-result, in the floating
   selection panel) and detailed (.pf-result, in the full profile) — a
   single unified stacked bar rather than two different chart types.
   Segments sit flush against each other (no gap), rounded only at the
   bar's two outer ends via the container's own overflow:hidden +
   border-radius. A segment wide enough to hold one (>=15% share) carries
   its own bold percentage, in a text colour already chosen per party for
   contrast; every segment's party name is always reachable as text either
   way — inline where it fits, in the legend/vote-list below where it
   doesn't — the mandatory secondary encoding for this palette's
   Green/Lib-Dem CVD floor case (see election-results.json's
   _meta.partyKeyNote). */
.result-bar {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.result-seg {
  flex: 0 0 auto;
  min-width: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-seg-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.result-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 0.45rem;
}

.result-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  margin-top: 0.55rem;
}
.result-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.result-chip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.sel-result[hidden] { display: none; }
.sel-result { margin: 0.7rem 0 0.15rem; }
.sel-result .result-bar { height: 20px; }
.sel-result .result-seg-value { font-size: 0.72rem; }

.pf-result {
  border: 1px solid var(--hairline);
  background: var(--page);
  padding: 0.8rem 0.85rem;
  margin-bottom: 0.9rem;
}
.result-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0 0 0.7rem;
}
.result-bar--detailed { height: 22px; }
.result-bar--detailed .result-seg-value { font-size: 0.8rem; }

.result-round-label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 1rem 0 0.4rem;
}
.result-round-label:first-of-type { margin-top: 0; }
.result-round-note { text-transform: none; font-weight: 400; letter-spacing: normal; }

.result-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.result-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--hairline);
}
.result-row:last-child { border-bottom: none; }
.result-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 0.28rem;
}
.result-row-body { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.result-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.result-elected {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cat-established-fill);
  margin-left: 0.3rem;
}
.result-meta-line {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.result-note {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0.7rem 0 0;
  font-style: italic;
}

/* --- Card footer (sourcing/attribution) ------------------------------------- */

.card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--hairline);
}
.sources-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.sources-toggle:hover { color: var(--text-primary); }
.card-footer p {
  margin: 0.6rem 0 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.card-footer a { color: var(--text-secondary); }

/* --- Mobile: card becomes a bottom sheet ------------------------------------ */

@media (max-width: 720px) {
  .card-wrap {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1300;
  }
  .card {
    border-radius: 16px 16px 0 0;
    max-height: 40vh;
    max-height: 40dvh;
    box-shadow: 0 -4px 28px rgba(26, 26, 24, 0.22);
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  /* Sheet heights, set in app.js (updateSheetRaised): low by default,
     half for a selection or profile (the area stays visible above it),
     full for reading pages or when the reader taps the handle. */
  .card-wrap.is-half .card {
    max-height: 55vh;
    max-height: 55dvh;
  }
  .card-wrap.is-raised .card {
    max-height: 85vh;
    max-height: 85dvh;
  }
  /* Room at the top of the card for the handle, which sits over it. */
  .card::before {
    content: "";
    display: block;
    height: 18px;
  }
  .sheet-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 72px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sheet-handle span {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--panel-border);
  }
  .sheet-handle:hover span, .sheet-handle:focus-visible span { background: var(--text-muted); }
  .sheet-handle[hidden] { display: none; }
}
/* The handle only exists on phones. */
@media (min-width: 721px) {
  .sheet-handle { display: none; }
}

/* Powers: chips (card + profile header), tiles and bus tracker (profile) */
:root { --power-held: #0b4f6c; --power-held-bg: #e3eff5; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sel-badge-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin-bottom: 0.6rem; }
.sel-badge-line .sel-badge { margin-bottom: 0; }
.sel-type { font-size: 0.72rem; color: var(--text-secondary); }
.pw-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.7rem; }
.pw-chips[hidden] { display: none; }
.pw-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 600;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--text-muted); background: var(--page);
}
.pw-chip-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1.5px solid currentColor; }
.pw-chip.is-held { color: var(--power-held); background: var(--power-held-bg); border-color: transparent; }
.pw-chip.is-held .pw-chip-dot { background: currentColor; }
.pf-formed + .pf-chips { margin-top: -0.4rem; margin-bottom: 0.9rem; }

.pf-block { margin: 0 0 1rem; }
.pf-block-label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin: 0 0 0.4rem;
}
.pf-block .pf-funding { margin-bottom: 0.5rem; }
.pw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.pw-footnote { margin-top: 0.5rem; }
.pw-tile { border: 1px solid var(--hairline); background: var(--page); padding: 0.6rem 0.7rem; }
.pw-tile.is-held { border-color: var(--power-held); }
.pw-eyebrow {
  display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.2rem;
}
.pw-status { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.pw-tile.is-held .pw-status { color: var(--power-held); }
.pw-detail { font-size: 0.72rem; color: var(--text-secondary); margin: 0.3rem 0 0; }
.bus-track { margin-top: 0.7rem; }
.bus-steps { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.bus-step {
  font-size: 0.66rem; padding: 0.2rem 0.5rem; border-radius: 3px;
  background: var(--chip-bg); color: var(--text-muted);
}
.bus-step.is-past { color: var(--text-secondary); }
.bus-step.is-current { background: var(--power-held); color: #ffffff; font-weight: 700; }

/* --- Compare tab (compare.js): real-geography boundary comparison --------- */
.map-container[hidden] { display: none; }
.compare-container { position: relative; }
.cmp-svg { width: 100%; height: 100%; display: block; }
.cmp-atom { stroke: none; cursor: pointer; transition: opacity 0.15s; }
.cmp-atom.is-dim { opacity: 0.35; }
.cmp-lad-mesh { fill: none; stroke: #ffffff; stroke-opacity: 0.55; stroke-width: 0.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.cmp-msa-mesh { fill: none; stroke: #ffffff; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.cmp-layer-mesh { fill: none; stroke: #1a1a18; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.cmp-selected { fill: none; stroke: #1a1a18; stroke-width: 3; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.cmp-labels text {
  font-family: inherit; font-weight: 700; fill: #1a1a18; text-anchor: middle;
  paint-order: stroke; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.cmp-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px));
  background: var(--page); border: 1px solid var(--hairline); padding: 0.35rem 0.55rem;
  font-size: 0.72rem; pointer-events: none; display: flex; flex-direction: column; gap: 0.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); white-space: nowrap;
}
.cmp-tip[hidden] { display: none; }
.cmp-tip .fl-name { font-weight: 700; }
.cmp-tip .fl-meta { color: var(--text-secondary); }
.legend-line { display: inline-block; width: 14px; height: 0; border-top: 2px solid #1a1a18; margin-right: 0.1rem; vertical-align: middle; }
.compare-hint { font-size: 0.72rem; color: var(--text-muted); margin: 0.2rem 0.8rem 0.6rem; }
.compare-hint[hidden] { display: none; }
.compare-card { margin: 0.2rem 0.8rem 0.6rem; border-top: 1px solid var(--hairline); padding-top: 0.7rem; }
.compare-card[hidden] { display: none; }
.cmp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.cmp-card-head h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.cmp-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.85rem; }
.cmp-row { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.cmp-row:last-child { border-bottom: none; }
.cmp-row.is-current { background: var(--chip-bg); }
.cmp-row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.cmp-row-label { font-size: 0.72rem; font-weight: 700; margin: 0; }
.cmp-badge { font-size: 0.62rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.cmp-units { font-size: 0.72rem; color: var(--text-secondary); margin: 0.2rem 0 0; }
.cmp-part { color: var(--text-muted); }
.cmp-note { font-size: 0.66rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.cmp-list { list-style: none; padding: 0; margin: 0.3rem 0 0; font-size: 0.75rem; }
.cmp-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; }
.legend-box[hidden], .search-wrap[hidden], #compareControls[hidden] { display: none; }
.wip-note {
  margin: 0 0.8rem 0.7rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-secondary);
  background: var(--chip-bg);
  border-left: 3px solid #e2b553;
}

/* --- Council control (profile view) ----------------------------------------
   Legend + picker + the selected council's composition: one horizontal bar
   per party on a shared scale, with the majority threshold as a dashed line
   through every row. Party names are always printed beside the bar, so
   identity never rests on colour alone (Green / Lib Dem CVD floor case). */
.pf-councils { border: 1px solid var(--hairline); background: var(--page); padding: 0.8rem 0.85rem; }
.council-legend { margin: 0 0 0.6rem; }
.council-picker-label { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.council-picker {
  width: 100%; font: inherit; font-size: 0.8rem; padding: 0.35rem 0.4rem;
  border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-primary);
}
.council-detail-slot[hidden] { display: none; }
.council-detail-slot { margin-top: 0.8rem; }
.council-detail + .council-detail { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.council-tier {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin: 0 0 0.3rem;
}
.council-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.council-name { font-size: 0.92rem; margin: 0; }
.council-type { font-size: 0.72rem; color: var(--text-muted); margin: 0.2rem 0 0.5rem; }
.council-leader { font-size: 0.8rem; margin: 0 0 0.7rem; }
.council-leader--none { color: var(--text-muted); }
.council-leader-role {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-right: 0.25rem;
}
.council-note { font-size: 0.72rem; color: var(--text-secondary); margin: -0.45rem 0 0.7rem; }
.seat-chart { display: grid; gap: 0.3rem; }
.seat-row {
  display: grid; grid-template-columns: 8.6rem 1fr 2rem; align-items: center; gap: 0.5rem;
  font-size: 0.74rem;
}
.seat-party { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-track { position: relative; height: 14px; }
.seat-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 2px 2px 0; min-width: 2px; }
.seat-line {
  position: absolute; top: -3px; bottom: -3px; width: 0;
  border-left: 1.5px dashed var(--text-primary);
}
.seat-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.seat-key { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--text-secondary); margin: 0.55rem 0 0; }
.seat-key-line { display: inline-block; height: 12px; border-left: 1.5px dashed var(--text-primary); }
.council-source { font-size: 0.68rem; color: var(--text-muted); margin: 0.6rem 0 0; }

/* --- Indicators (selection panel + profile "Area in numbers") ---------------- */
.ind-stats[hidden] { display: none; }
.ind-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }
.ind-stat { border: 1px solid var(--hairline); background: var(--page); padding: 0.45rem 0.5rem; min-width: 0; }
.ind-stat-label, .ind-tile-label {
  display: block; font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.ind-stat-value { display: block; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.1rem; }
.ind-stat-sub { display: block; font-size: 0.66rem; color: var(--text-secondary); }

.ind-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.ind-tile { border: 1px solid var(--hairline); background: var(--page); padding: 0.55rem 0.65rem 0.6rem; min-width: 0; }
.ind-tile.is-empty .ind-tile-value { color: var(--text-muted); font-size: 0.9rem; }
.ind-period { font-weight: 400; letter-spacing: normal; text-transform: none; }
.ind-tile-value { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0.15rem 0 0.1rem; }
.ind-tile-sub { display: block; font-size: 0.66rem; color: var(--text-secondary); }
.ind-strip { position: relative; height: 12px; margin-top: 0.45rem; border-bottom: 1px solid var(--hairline); }
.ind-tick { position: absolute; bottom: 0; width: 1px; height: 7px; background: var(--text-muted); opacity: 0.45; }
.ind-bench { position: absolute; bottom: -2px; height: 14px; border-left: 1.5px dashed var(--text-primary); }
.ind-dot {
  position: absolute; bottom: -1px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--text-primary); box-shadow: 0 0 0 2px var(--page);
}
.ind-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; font-size: 0.66rem; color: var(--text-secondary); margin: 0.45rem 0 0.8rem; }
.ind-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-primary); }
.ind-key-tick { width: 1px; height: 8px; background: var(--text-muted); margin-left: 0.4rem; }
.ind-key-bench { height: 10px; border-left: 1.5px dashed var(--text-primary); margin-left: 0.4rem; }
.pf-prose .ind-census-label { font-size: 0.66rem; color: var(--text-secondary); margin: 0 0 0.5rem; }
.ind-rows { display: grid; gap: 0.3rem; }
.ind-row { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr 2.8rem 2.8rem; align-items: center; gap: 0.5rem; font-size: 0.74rem; }
.ind-row-head { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ind-row-head span:nth-child(n+3), .ind-row-value, .ind-row-ew { text-align: right; font-variant-numeric: tabular-nums; }
.ind-row-value { font-weight: 700; }
.ind-row-ew { color: var(--text-muted); }
.ind-row-track { position: relative; height: 10px; background: var(--chip-bg); }
.ind-row-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cat-live-nonmayoral-fill); }
.ind-row-bench { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px dashed var(--text-primary); }
.ind-table td:not(:first-child), .ind-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ind-census > .pf-collapsible { margin-bottom: 0.5rem; }
@media (max-width: 720px) {
  .ind-row { grid-template-columns: minmax(0, 7.5rem) 1fr 2.6rem 2.6rem; }
}

/* --- Sources pane ------------------------------------------------------------
   A full-card page: while open, every other child of the card is hidden
   (they keep their own hidden state underneath, so closing restores them). */
.card.is-pane > :not(.sources-pane:not([hidden])) { display: none !important; }
.sources-pane[hidden] { display: none; }
.sources-body { padding: 0.2rem 0.95rem 1.2rem; }
.sources-body .pf-area-name { margin-bottom: 0.4rem; }
.src-intro { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 1rem; }
.src-group { border-top: 1px solid var(--hairline); padding: 0.8rem 0 0.2rem; }
.src-group h3 {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 0 0 0.4rem;
}
.src-group p, .src-list { font-size: 0.78rem; line-height: 1.5; color: var(--text-primary); margin: 0 0 0.5rem; }
.src-list { padding-left: 1.1rem; }
.src-list li { margin-bottom: 0.3rem; }
.src-group .src-meta { font-size: 0.7rem; color: var(--text-muted); }
.sources-body a { color: inherit; }
/* "Area in numbers" summary: the block label doubles as the toggle. */
.pf-indicators > .pf-collapsible > summary .pf-block-label { margin: 0; }

/* --- About pane + feedback form ------------------------------------------- */
.card-footer { display: flex; align-items: center; gap: 0.45rem; }
.footer-sep { color: var(--text-muted); font-size: 0.7rem; }
.about-lede { font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.7rem; }
.about-text { font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); margin: 0 0 0.7rem; }
.sources-body a { color: inherit; }
.feedback-form { display: grid; gap: 0.6rem; }
.fb-field { display: grid; gap: 0.25rem; font-size: 0.74rem; font-weight: 600; }
.fb-field em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.fb-field input, .fb-field textarea {
  font: inherit; font-size: 0.84rem; font-weight: 400; padding: 0.45rem 0.55rem;
  border: 1px solid var(--panel-border); border-radius: 6px; background: var(--page); color: var(--text-primary);
  width: 100%; box-sizing: border-box;
}
.fb-field textarea { resize: vertical; min-height: 6rem; }
.fb-field input:focus, .fb-field textarea:focus { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.fb-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-submit { margin-top: 0.2rem; }
.fb-submit:disabled { opacity: 0.6; cursor: default; }
.fb-status { font-size: 0.78rem; margin: 0; min-height: 1em; }

/* Compare: back out to the full map after zooming into a selection. */
.cmp-reset {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 5;
  background: var(--text-primary); color: #fff; border: none; border-radius: 8px;
  padding: 0.5rem 0.8rem; font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 10px rgba(26, 26, 24, 0.2);
}
.cmp-reset:hover { background: var(--text-secondary); }
.cmp-reset[hidden] { display: none; }