/* -- shared primitives -- */

mark {
  background: var(--yellow-soft);
  color: var(--yellow-ink);
  padding: 0 3px;
  border-radius: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  font-family: var(--font-stat);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease,
              background-color var(--dur) ease, filter var(--dur) ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }

.btn-primary { background: var(--green-d); color: #fff; }
.btn-primary:hover { background: #3c6b2a; }
[data-theme="dark"] .btn-primary { background: var(--green); color: #10160b; }
[data-theme="dark"] .btn-primary:hover { background: var(--green-d); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line2); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-whatsapp { background: #25d366; color: #06341c; }
.btn-whatsapp:hover { filter: brightness(0.95); }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.icon-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, background-color var(--dur) ease;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); background: var(--surface-2); }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

.loading-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--line2);
  border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.map {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
}
.map-corp { height: 350px; margin: 16px 0; }
.map-ward { height: 430px; margin: 10px 0; }

.map-reset-btn { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; }
/* .wardmap-badge sits at top/right: var(--space-3) on the same box (.wardmap-frame
   tightly wraps #wardMap) — push the reset button below it there only. */
#wardMap .map-reset-btn { top: 52px; }

.map-tip { pointer-events: none; }
.map-tip .maplibregl-popup-content {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}
.map-tip .maplibregl-popup-tip { display: none; }

.ward-popup .maplibregl-popup-content {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}
.ward-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.ward-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.ward-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--surface);
}
.ward-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.ward-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.ward-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--surface);
}
.ward-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.ward-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.ward-popup-body { display: flex; flex-direction: column; gap: var(--space-2); cursor: pointer; }
.ward-popup-name { font-family: var(--font-stat); font-weight: 700; font-size: 0.95rem; }
.ward-popup-btn { width: 100%; }

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.chip-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.sec, .whead, .why-vote {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.sec h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: var(--space-3); }

/* -- cover / home view -- */

.cover { padding: 32px 0 48px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 600; color: var(--green-d);
  text-transform: uppercase; letter-spacing: .04em;
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
[data-theme="dark"] .eyebrow-dot { background: var(--lime); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.15;
  margin: 12px 0;
}
.headline mark { white-space: nowrap; }
.hero-subtitle { color: var(--ink); font-size: 0.95rem; margin: var(--space-3) 0; }
#homeContainer .headline { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }

.why-vote {
  display: flex; flex-direction: column;
  padding: var(--space-3) var(--space-5);
}
.why-vote-head { display: flex; align-items: center; gap: var(--space-1); }
.why-vote-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-s);
  background: var(--surface); color: var(--green-d);
}
[data-theme="dark"] .why-vote-icon { color: var(--green); }
.why-vote-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.why-vote-subtitle { font-weight: 600; font-size: 0.98rem; color: var(--green-d); margin-top: 2px; }
[data-theme="dark"] .why-vote-subtitle { color: var(--green); }
.why-vote-body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-1); }
.why-vote-body p { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.6; }
.why-vote-more {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: max-height .3s ease;
}
.why-vote-actions { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.why-vote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--green-d);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}
[data-theme="dark"] .why-vote-toggle { color: var(--green); }
.why-vote-toggle:hover { color: var(--green); }
[data-theme="dark"] .why-vote-toggle:hover { color: var(--green-d); }
.why-vote-toggle-arrow { display: inline-block; transition: transform var(--dur) var(--ease-out); }
.why-vote-toggle--more:hover .why-vote-toggle-arrow { transform: translateX(2px); }
.why-vote-toggle--less:hover .why-vote-toggle-arrow { transform: translateY(-2px); }

.ward-def { color: var(--ink); font-size: 0.95rem; margin: var(--space-3) 0; }
.hero-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green-d);
  margin-bottom: var(--space-3);
}

.map-caption { color: var(--hint); font-size: 0.85rem; margin: var(--space-2) 0; }

.corp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--space-5); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  margin: var(--space-3) 0;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) ease;
}
.panel:hover, .panel[open] { box-shadow: var(--shadow-2); }
.panel summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.panel p { margin: 10px 0 2px; color: var(--ink); }

/* -- ward search & list (home view) -- */

.find-controls { display: flex; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); flex-wrap: wrap; }
.find-search-wrap { position: relative; flex: 1; min-width: 180px; }
.find-controls input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.find-controls input:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-ring); outline: none; }
[data-theme="dark"] .find-controls input:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 35%, transparent); }
.find-count { color: var(--hint); font-size: 0.85rem; margin: var(--space-2) 0; }

.ward-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 4px;
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}
.ward-suggest-row {
  display: flex; justify-content: space-between; align-items: baseline;
  min-height: 44px;
  padding: 10px var(--space-3);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background-color var(--dur) ease;
}
.ward-suggest-row:hover, .ward-suggest-row:focus-visible { background: var(--surface-2); }

.ward-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  max-height: 400px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--radius-m);
}
.ward-row {
  display: flex; justify-content: space-between; align-items: baseline;
  min-height: 44px;
  padding: 12px var(--space-3);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, padding-left var(--dur) var(--ease-out);
}
.ward-row:hover { background: var(--surface-2); border-left-color: var(--green); padding-left: calc(var(--space-3) + 4px); }
.ward-row:active { background: var(--green-soft); }
.ward-row-name { font-weight: 600; }
.ward-row-meta { color: var(--muted); font-size: 0.82rem; }

/* -- ward view -- */

.whead h2 { font-family: var(--font-display); font-weight: 700; margin: 4px 0 2px; font-size: 1.6rem; }
.whead .kn { color: var(--muted); font-weight: 400; font-size: 1rem; }
.whead-meta { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; }
.whead-origin { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.whead-origin-block .label {
  display: block; text-transform: uppercase; font-size: 0.7rem; letter-spacing: .05em;
  color: var(--hint); margin-bottom: 3px;
}
.whead-origin-block p { margin: 0; font-size: 0.9rem; }

.candgrid h3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pill-soon { background: var(--yellow-soft); color: var(--yellow-ink); }
.cand-intro { color: var(--ink); font-size: 0.9rem; margin: 0 0 var(--space-3); }
.candgrid-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.candcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--space-4); text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.candcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--green-ring); }
.candphoto {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px;
  background: repeating-linear-gradient(135deg, var(--inset), var(--inset) 8px, var(--line2) 8px, var(--line2) 16px);
}
.candname { font-weight: 600; font-family: var(--font-stat); }
.candparty { color: var(--muted); font-size: 0.82rem; margin: 2px 0 8px; }
.cand-detail { text-align: left; font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.cand-detail .k { display: block; text-transform: uppercase; font-size: 0.68rem; letter-spacing: .05em; color: var(--hint); }

.wardmap-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin: var(--space-3) 0;
}
.buffer-toggle { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; min-height: 36px; }

.amenity-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3);
}
.legend-btn {
  display: flex; align-items: center; gap: var(--space-2); text-align: left;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--radius-m);
  min-height: 44px;
  padding: var(--space-2) var(--space-3); cursor: pointer; color: var(--muted);
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease,
              transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}
.legend-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--green-ring); }
.legend-btn.active { background: var(--green-soft); color: var(--green-d); border-color: var(--green-ring); }
[data-theme="dark"] .legend-btn.active { color: var(--green); }
.amenity-card-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--radius-s);
  background: var(--surface-2);
}
.amenity-card-icon svg { width: 16px; height: 16px; }
.amenity-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.amenity-card-name { font-size: 0.72rem; }
.amenity-card-count { font-family: var(--font-stat); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.legend-btn.active .amenity-card-count { color: var(--green-d); }
[data-theme="dark"] .legend-btn.active .amenity-card-count { color: var(--green); }

.wardmap-frame { position: relative; }
.wardmap-badge {
  position: absolute; top: var(--space-3); right: var(--space-3);
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - var(--space-5));
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.wardmap-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.amgrid { display: flex; flex-direction: column; }
.amrow, .amrow-static {
  min-height: 44px;
  padding: 10px var(--space-2); border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  cursor: default;
  transition: background-color var(--dur) ease, border-color var(--dur) ease;
}
.amrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; row-gap: var(--space-1); }
/* Deliberately a distinct class, not an .amrow modifier: wireLayerClicks() selects
   `.amrow` to wire map-layer clicks, and would throw on a row with no data-layer.
   Flex (not grid) since this row's content is a wrapping sentence, not a fixed
   label+count pair — same pattern as .callout's icon+paragraph layout. */
.amrow-static { display: flex; align-items: flex-start; gap: 10px; }
.amrow.is-clickable { cursor: pointer; }
.amrow.is-clickable:hover { background: var(--surface); border-left-color: var(--green); }
.am-icon { display: flex; color: var(--muted); }
.am-icon svg { width: 18px; height: 18px; }
.amrow-static .am-icon { flex-shrink: 0; margin-top: 2px; }
.cnt { font-family: var(--font-stat); font-weight: 700; }
.am-temp-text { color: var(--ink); }
.am-temp-delta { color: var(--muted); }

/* Amenities-only grid instance: benchmark blocks give rows variable heights, so
   this modifier stops CSS Grid's default row-stretch from vertically centering
   a short row (e.g. Parks' bar) against a taller neighbour in the same visual
   row (e.g. Bus stops' long description) at the >=900px multi-column layout.
   Scoped to this modifier, not .amgrid itself, so Vulnerability hotspots keeps
   its own (unaffected, no benchmark blocks) grid behavior. */
@media (min-width: 900px) {
  .amgrid-benchmarks { align-items: start; }
}

/* Benchmark sub-row: spans columns 2-3 of .amrow's existing 3-col grid (auto 1fr
   auto), auto-placed into a new implicit row — column 1 (icon) stays empty on
   this row, which is what indents it under the label instead of the icon. */
.am-benchmark { grid-column: 2 / -1; display: flex; flex-direction: column; gap: var(--space-1); }
.am-benchmark-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Neutral gray tint (color-mix from --gray, not the brand's green-tinted
   --inset) — the unfilled portion of a benchmark progress bar reads as plain
   "not yet filled" track, not a green-brand surface. */
.am-benchmark-track {
  display: inline-block; flex: 0 1 120px; min-width: 60px;
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--gray) 25%, var(--surface-2));
}
.am-benchmark-fill { display: block; height: 100%; border-radius: 999px; }
/* Performance-tier fill colors: >=100% of recommended, 75-99%, 40-74%, <40%
   (see progressTone() in ward-view.js) — never a flat color regardless of
   how close the ward actually is to the benchmark. */
.am-benchmark-fill--green { background: var(--green); }
.am-benchmark-fill--light-green { background: var(--light-green); }
.am-benchmark-fill--orange { background: var(--orange); }
.am-benchmark-fill--red { background: var(--red); }
.am-benchmark-ratio { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* A new tier-2 component, not .pill reused: .pill's background (--surface) is
   identical to .amrow.is-clickable:hover's background, so a .pill-based badge
   would visually vanish on row hover. The color-mix() tint (same convention
   already used elsewhere in this codebase, e.g. the dark-theme search-input
   focus ring) keeps the badge legible in both states. */
.am-benchmark-badge {
  display: inline-block; align-self: flex-start;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, var(--surface-2));
  font-size: 0.78rem; font-weight: 600;
}
/* Category -> tone (see BADGE_TONES in ward-view.js) — not every tone is
   reachable with today's benchmarks_for_WID.csv data (only blue/cyan are),
   the rest are defined for categories no current row uses yet. */
.am-benchmark-badge--blue { color: var(--blue); }
.am-benchmark-badge--teal { color: var(--teal); }
.am-benchmark-badge--indigo { color: var(--indigo); }
.am-benchmark-badge--cyan { color: var(--cyan); }
.am-benchmark-badge--gray { color: var(--gray); }
.am-benchmark-badge--orange { color: var(--orange); }
.am-benchmark-badge--green { color: var(--green); }

/* Clamped to (and, via the explicit height below, always reserved at exactly)
   2 lines — so a long CSV description still gets its "…" ellipsis from
   -webkit-line-clamp, but a short 1-line description no longer collapses its
   box either: every row's description area is the same height regardless of
   actual text length, which is what keeps every Amenities row the same total
   height (see .amgrid-benchmarks .amrow below). The full text is reachable via
   the "Read more" toggle (wireBenchmarkToggles in ward-view.js), which only
   appears when the text actually overflows this fixed box. position:relative
   is the positioning context for that toggle, which is this element's own
   child (see .am-benchmark-more) so it can sit flush at the bottom-right
   corner of line 2 rather than adding a line of its own underneath. */
.am-benchmark-desc {
  position: relative;
  margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted);
  height: 2.9em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.am-benchmark-desc--expanded {
  display: block;
  height: auto;
  -webkit-line-clamp: unset; line-clamp: unset;
  overflow: visible;
}

/* Absolutely positioned at the description's own bottom-right corner (a
   child of .am-benchmark-desc, appended there by wireBenchmarkToggles) rather
   than a block-level sibling underneath it — this is what puts "Read more" at
   the end of line 2 instead of on a line of its own, and adds no height to
   the row. Its own background matches the card so it cleanly overlays
   whatever trailing characters would otherwise sit underneath, rather than
   the two visually colliding. Same 44x44 invisible hit-slop technique as
   .temp-info-link (::before, absolutely centered) for the tappable area. */
.am-benchmark-more {
  position: absolute;
  right: 0; bottom: 0;
  padding: 0 0 0 var(--space-2);
  border: none; background: var(--surface-2);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--green-d);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.am-benchmark-more::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* Fixed row height, Amenities-grid-only (Vulnerability hotspots' plain .amrow
   is untouched): forces every row — badge or progress-bar header, 1-line or
   2-line description — to the exact same height, so a short description
   doesn't leave its row visibly shorter than a neighbour with a long one.
   align-content:start collects any resulting slack space at the row's own
   bottom rather than letting the grid's default stretch spread it between
   the icon/label/count line and the benchmark block. */
.amgrid-benchmarks .amrow {
  min-height: 132px;
  align-content: start;
}

.temp-info-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  vertical-align: middle;
  color: var(--muted);
  border-radius: var(--radius-s);
  transition: background-color var(--dur) ease, color var(--dur) ease;
}
/* Invisible hit-slop: keeps the real touch target at 44x44px without
   inflating the visible box (which previously threw off vertical
   alignment against the surrounding text). */
.temp-info-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.temp-info-link svg { width: 16px; height: 16px; }
.temp-info-link:hover, .temp-info-link:focus-visible { color: var(--ink); background: var(--surface); }

.factslist { display: flex; flex-direction: column; gap: var(--space-2); }
.fact {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green-ring);
  border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); font-size: 0.92rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}
.fact:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.fact .k {
  display: block; text-transform: uppercase; font-size: 0.7rem; letter-spacing: .05em;
  color: var(--hint); margin-bottom: 3px;
}
.fact.warn { border-left-color: var(--yellow); }
.fact.bad { border-left-color: var(--red); }

.qlist { padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.sahaaya-sub { color: var(--muted); font-size: 0.9rem; margin: 4px 0 10px; }
.sahaaya-cats { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

.feedback-actions { display: flex; justify-content: flex-end; margin-top: var(--space-4); }

/* -- methodology view -- */

.callout {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--yellow-soft); color: var(--yellow-ink);
  border: 1px solid var(--yellow-line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.callout-icon { flex-shrink: 0; margin-top: 2px; }
.callout p { margin: 0; font-size: 0.92rem; line-height: 1.55; }

.meth-list {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-left: 20px; margin: 0; color: var(--ink);
  font-size: 0.95rem; line-height: 1.6;
}
.meth-list a { color: var(--green-d); overflow-wrap: anywhere; }
.meth-list a:hover { color: var(--green); }
[data-theme="dark"] .meth-list a { color: var(--green); }

#methodologyContainer .sec { margin: var(--space-4) 0; padding-top: var(--space-3); padding-bottom: var(--space-3); }
#methodologyContainer .sec h3 { margin-bottom: var(--space-2); }
#methodologyContainer .callout { margin: var(--space-3) 0 var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
#methodologyContainer .meth-list { gap: var(--space-2); }

/* -- voter faq view -- */

.faq-lede { color: var(--ink); font-size: 0.95rem; max-width: 64ch; margin: var(--space-3) 0 0; }
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

.faq-section { padding-bottom: var(--space-4); }
.faq-intro { max-width: 60ch; margin-bottom: var(--space-5); }
.faq-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 var(--space-2); }
.faq-intro p { color: var(--muted); font-size: 0.9rem; margin: 0; }

.faq-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cat-nav {
  /* Sticky at every width, not just desktop — the same layout/offset
     formula everywhere is what makes mobile and desktop behave identically.
     Docks flush against the true top (env(safe-area-inset-top) is 0 outside
     a notched/PWA context, matching .topcluster's own safe-area handling) —
     a nonzero offset here left a gap where content showed through above the
     docked bar. No separate clearance from .topcluster is needed: this nav
     lives inside #voterFaqContainer.container, whose own right padding
     already keeps all content at least ~34px short of the toggle's left
     edge at every width, so there's nothing for it to collide with. */
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  padding: var(--space-2) 0;
  margin: 0 0 var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.cat-nav::-webkit-scrollbar { display: none; } /* Chrome, Chromium Edge, Safari */
.cat-nav button {
  cursor: pointer; box-sizing: border-box; flex-shrink: 0; white-space: nowrap;
  min-height: 44px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--muted);
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: var(--space-2) var(--space-3);
  transition: color var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease;
}
.cat-nav button:hover { background: var(--surface); color: var(--ink); }
.cat-nav button.active { color: var(--green-d); background: var(--surface); border-bottom-color: var(--green-d); font-weight: 700; }
[data-theme="dark"] .cat-nav button.active { color: var(--green); border-bottom-color: var(--green); }

/* Set from JS (voter-faq-view.js, via ResizeObserver on .cat-nav) to the
   nav's actual rendered height plus its sticky offset — the nav can wrap
   onto a variable number of rows at different desktop widths, so a fixed
   guess here would leave the clicked-to category partly hidden behind the
   docked nav at some widths. 70px is a sensible single-row fallback for the
   instant before the observer's first measurement lands. */
.category { scroll-margin-top: var(--faq-nav-clearance, 70px); }

.accordion-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.accordion-item:last-child { margin-bottom: 0; }
.accordion-trigger {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--ink);
  min-height: 44px;
}
.accordion-trigger:hover { background: var(--surface-2); }
.accordion-trigger .chevron { width: 9px; height: 9px; flex-shrink: 0; color: var(--green-d); transition: transform var(--dur) var(--ease-out); }
[data-theme="dark"] .accordion-trigger .chevron { color: var(--green); }
.accordion-item[data-open="true"] .chevron { transform: rotate(90deg); }
.accordion-item[data-open="true"] .accordion-trigger { border-bottom: 1px solid var(--line); }

.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.accordion-panel-inner { padding: 0 var(--space-4) var(--space-4); font-size: 0.92rem; color: var(--ink); line-height: 1.6; }
.accordion-panel-inner p { margin: var(--space-3) 0 0; }
.accordion-panel-inner p:first-child { margin-top: var(--space-3); }
.accordion-panel-inner ul { margin: var(--space-2) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-2); }
.accordion-panel-inner a { color: var(--green-d); font-weight: 600; overflow-wrap: anywhere; }
.accordion-panel-inner a:hover { color: var(--green); }
[data-theme="dark"] .accordion-panel-inner a { color: var(--green); }

.rule-chip {
  display: inline-block; background: var(--yellow-soft); color: var(--yellow-ink);
  border-radius: var(--radius-s); padding: 7px 11px; font-size: 0.82rem; font-weight: 700;
  margin: var(--space-2) 0 0;
}

/* Denser than the shared .sec/.cover/.callout defaults (ward-detail and
   methodology use those at full size) — scoped to this page only, an ID
   selector so it also wins inside the @media(min-width:900px) .sec padding
   bump without needing a duplicate media query. */
#voterFaqContainer .cover { padding-bottom: var(--space-5); }
#voterFaqContainer .callout { margin-top: var(--space-3); margin-bottom: var(--space-4); }

#voterFaqContainer .category { margin: var(--space-4) 0; padding-top: var(--space-4); padding-bottom: var(--space-4); }
#voterFaqContainer .category:first-child { margin-top: 0; }
#voterFaqContainer .category:last-child { margin-bottom: 0; }
#voterFaqContainer .category h3 { margin-bottom: var(--space-2); }

.faq-search { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); }
.faq-search-box { position: relative; width: 100%; max-width: 640px; }
.faq-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hint); pointer-events: none; }
.faq-search-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 12px 44px 12px 42px;
  border-radius: var(--radius-m); border: 1px solid var(--line2);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.faq-search-input:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-ring); outline: none; }
[data-theme="dark"] .faq-search-input:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 35%, transparent); }
.faq-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--hint); cursor: pointer; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; padding: 0;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}
.faq-search-clear:hover { background: var(--surface-2); color: var(--ink); }
.faq-search-clear[hidden] { display: none; }
.faq-search-summary { color: var(--hint); font-size: 0.85rem; text-align: center; margin: 0; }
.faq-search-summary[hidden] { display: none; }

.faq-empty { text-align: center; padding: var(--space-6) var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-l); }
.faq-empty[hidden] { display: none; }
.faq-empty-icon { font-size: 2rem; }
.faq-empty h3 { font-family: var(--font-display); font-weight: 600; margin: var(--space-2) 0 var(--space-1); }
.faq-empty p { color: var(--muted); margin: 0 0 var(--space-3); }
.faq-empty-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.faq-empty-chip { cursor: pointer; border: 1px solid var(--line2); }
.faq-empty-chip:hover { background: var(--surface-2); }

/* .cat-nav's own display:flex would otherwise beat the native [hidden] UA
   rule (author rules always win over UA styles) — same fix already used for
   .voter-faq-fab[hidden] in base.css. */
.cat-nav[hidden] { display: none; }

/* -- footer -- */

/* Extra bottom clearance so the fixed, always-visible #voterFaqFab (bottom
   offset up to 28px + ~51px own height) never sits on top of real footer
   content once the page is scrolled to the bottom — it hovers over this
   blank strip of the footer's own background instead. */
.site-footer { margin-top: var(--space-7); border-top: 1px solid var(--line); background: var(--surface); padding-bottom: 100px; }
.footer-inner { padding-top: var(--space-5); padding-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.footer-utility { justify-content: space-between; }

.footer-methodology {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
  min-height: 44px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.footer-methodology:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--green-ring); }
.footer-methodology-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-s);
  background: var(--green-soft); color: var(--green-d);
}
[data-theme="dark"] .footer-methodology-icon { color: var(--green); }
.footer-methodology-text { display: flex; flex-direction: column; gap: 2px; }
.footer-methodology-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.footer-methodology-desc { font-size: 0.82rem; color: var(--muted); }

.footer-share { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.footer-share[hidden] { display: none; }
.footer-share-label { font-size: 0.85rem; color: var(--hint); }
.footer-share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.footer-share-actions .btn { flex-shrink: 0; }
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: 0.85rem; }
.btn-sm svg { flex-shrink: 0; }
.footer-heart-line { color: var(--muted); font-size: 0.88rem; }
.footer-heart { font-size: 0.9em; }

.footer-attribution { border-top: 1px solid var(--line); padding-top: var(--space-4); }

.footer-orgs {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: var(--space-4); margin-top: var(--space-1);
}
.footer-org-group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.footer-org-divider { align-self: stretch; width: 1px; background: var(--line2); }
.footer-org-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; background: var(--footer-logo-bg);
  border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-1);
}
.footer-logo { height: 22px; width: auto; display: block; }
.footer-org-fallback {
  display: none; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--footer-logo-fallback-ink);
}
.footer-org-social { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--muted);
  transition: color var(--dur) ease, background-color var(--dur) ease;
}
.footer-social-link:hover { color: var(--green-d); background: var(--surface-2); }

@media (max-width: 519px) {
  .footer-orgs { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-org-divider { width: 100%; height: 1px; }
  .footer-methodology { width: 100%; }
  .footer-share { width: 100%; }
}

/* -- responsive -- */

@media (min-width: 640px) {
  .whead h2 { font-size: 1.9rem; }
}

@media (min-width: 900px) {
  .container { max-width: 960px; }
  .amgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--space-5); }
  .factslist { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .ward-list { max-height: 480px; }
  .sec, .whead { padding: var(--space-6); }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

@media (max-width: 520px) {
  .cover { padding: 24px 0 40px; }
  .why-vote { padding: var(--space-2) var(--space-4); }
  .find-controls { flex-direction: column; }
  .find-search-wrap, #findLocate { width: 100%; }
  .map-corp { height: 270px; }
  .map-ward { height: 350px; }
  .ward-list { max-height: 320px; }
  .amenity-filters { gap: var(--space-1) var(--space-2); }
  .legend-btn { padding: var(--space-1) var(--space-2); gap: var(--space-1); }
  .amenity-card-icon { width: 24px; height: 24px; }
  .amenity-card-icon svg { width: 14px; height: 14px; }
  .amenity-card-name { font-size: 0.68rem; }
  .amenity-card-count { font-size: 0.85rem; }
  .feedback-actions { justify-content: center; }
  .feedback-actions .btn { width: 100%; }
}

@media (max-width: 380px) {
  .headline { font-size: clamp(1.7rem, 7vw, 2rem); }
  #homeContainer .headline { font-size: clamp(1.5rem, 6.5vw, 1.8rem); }
  .container { padding-left: 12px; padding-right: 12px; }
}