:root {
  --brand: #0ea5a4;
  --brand-hover: #0b8b8a;
  --ink: #0f172a;
  --muted: #64748b;
  --surface: #ffffff;
  --canvas: #f8fafc;
  --border: #e2e8f0;
  --available: #16a34a;
  --in-use: #2563eb;
  --out-of-service: #dc2626;
  --stale: #d97706;
  --no-live-data: #64748b;
  /* Darkened from #94a3b8 so non-text UI meets WCAG 3:1 on white (~4.6:1). */
  --not-published: #64748b;
  --unknown: #94a3b8;
  --source-unavailable: #94a3b8;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --shadow-md: 0 4px 16px rgb(15 23 42 / 10%);
  --radius-card: 12px;
  --radius-pill: 999px;
  /* Shared control tokens (primary / secondary / ghost + chips + icon buttons). */
  --control-min-height: 44px;
  --control-radius: var(--radius-card);
  --header-h: 56px;
  --focus-ring: 2px solid var(--brand);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: var(--canvas);
  --fg: var(--ink);
  --accent: var(--brand);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1f5f9;
    --muted: #94a3b8;
    --surface: #1e293b;
    --canvas: #0f172a;
    --border: #334155;
    --bg: #0f172a;
    --fg: #f1f5f9;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 35%);
  }
  .toast {
    background: #e2e8f0;
    color: #0f172a;
  }
  .filter-drawer__backdrop {
    background: rgb(0 0 0 / 55%);
  }
  .chip[aria-pressed="true"], .chip.is-active {
    color: #fff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand); text-decoration-thickness: 1px; }
a:hover { color: var(--brand-hover); }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 9999;
  background: var(--brand); color: #fff; padding: 8px 16px;
}
.skip-link:focus { inset-inline-start: 8px; top: 8px; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

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

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem;
  color: var(--fg); text-decoration: none;
}
.site-header .logo img { width: 28px; height: 28px; }
.site-header nav { display: flex; align-items: center; gap: 20px; }
.site-header nav a {
  color: var(--fg); text-decoration: none; font-size: 0.933rem;
}
.site-header nav a:hover { color: var(--brand); }
.site-header nav a[aria-current="page"] {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}
.nav-toggle {
  display: none; border: 0; background: transparent; padding: 8px;
  color: var(--fg); cursor: pointer;
}
.header-actions {
  display: flex; align-items: center; gap: 4px; margin-inline-start: auto;
}
.header-lang-menu { position: relative; font-size: 0.867rem; }
.header-lang-menu summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  min-height: var(--control-min-height); padding: 6px 10px; border-radius: var(--control-radius);
  border: 1px solid var(--border); background: var(--surface); font-weight: 600;
}
.header-lang-menu summary::-webkit-details-marker { display: none; }
.header-lang-menu__code { font-size: 0.75rem; letter-spacing: 0.04em; }
.header-lang-menu__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 80;
  min-width: 12rem; max-height: min(60vh, 20rem); overflow: auto;
  display: grid; gap: 2px; padding: 8px; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.header-lang-menu__list a {
  display: block; padding: 6px 8px; color: var(--fg); text-decoration: none; border-radius: 6px;
}
.header-lang-menu__list a:hover { background: rgb(14 165 164 / 10%); color: var(--brand); }
.header-lang-menu__list a[aria-current="true"] { color: var(--brand); font-weight: 600; }
.header-lang-menu--bar { display: none; }
.header-lang-menu--nav { display: none; }
@media (max-width: 767px) {
  .nav-toggle { display: flex; }
  .header-lang-menu--bar { display: block; }
  .site-header nav.is-open .header-lang-menu--nav { display: block; }
  .site-header nav {
    display: none;
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 16px; gap: 12px; z-index: 60;
    box-shadow: var(--shadow-md);
  }
  .site-header nav.is-open { display: flex; }
}
@media (min-width: 768px) {
  .site-header nav .header-lang-menu--nav { display: block; margin-inline-start: 8px; }
}

.lang-switcher--compact .lang-switcher-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.lang-switcher--compact select {
  min-height: var(--control-min-height); max-width: min(16rem, 70vw);
  padding: 6px 10px; border-radius: var(--control-radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit;
}

.filter-open-btn {
  display: none; width: 100%; justify-content: center; gap: 8px;
  margin-top: 8px;
}
/* .btn (later in this file) sets display:inline-flex — keep the phone-only button hidden on desktop */
.btn.filter-open-btn { display: none; }
.filter-active-count[hidden] { display: none; }
.filter-active-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.filter-drawer-quick { border: 0; padding: 0; margin: 0 0 12px; }
.filter-drawer-quick legend { font-weight: 600; margin-bottom: 8px; }
.filter-drawer-chips { flex-wrap: wrap; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }

.site-footer {
  padding: 16px; font-size: 0.867rem; color: var(--muted);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
}
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.site-footer .mt-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.site-footer .mt-note a { text-decoration: underline; }

body.map-page .site-footer { display: none; }
body.map-page main { padding: 0; }

.page-content { max-width: 48rem; margin: 0 auto; padding: 24px 16px 48px; }
.prose { max-width: 72ch; }
.prose p { margin: 12px 0; }
.prose-narrow { max-width: 48rem; margin: 0 auto; }
.muted { color: var(--muted); }

/* Button system: primary (filled), secondary (outline = .btn / .btn-secondary), ghost/icon. */
.btn, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-min-height);
  padding: 10px 16px; border-radius: var(--control-radius);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); font: inherit; cursor: pointer; text-decoration: none;
}
.btn:hover, .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
}
.btn-ghost:hover {
  border-color: var(--border);
  color: var(--brand);
}
.btn-sm { padding: 6px 12px; font-size: 0.867rem; min-height: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--control-min-height);
  padding: 6px 12px; border-radius: var(--control-radius);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg);
  font-size: 0.867rem; white-space: nowrap; cursor: pointer;
}
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  border-width: 2px;
}
/* Pressed state is not colour-only: checkmark + heavier border above. */
.chip[aria-pressed="true"]::before,
.chip.is-active::before {
  content: "✓";
  font-weight: 700;
  line-height: 1;
}
.chip-row {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 0.867rem; font-weight: 600;
}
.status-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
}
.status-pill--available { background: rgb(22 163 74 / 12%); color: var(--available); }
.status-pill--available::before { background: var(--available); }
.status-pill--in-use { background: rgb(37 99 235 / 12%); color: var(--in-use); }
.status-pill--in-use::before { background: var(--in-use); }
.status-pill--out-of-service { background: rgb(220 38 38 / 12%); color: var(--out-of-service); }
.status-pill--out-of-service::before {
  background: transparent; border-radius: 0; width: 8px; height: 8px;
  border: 2px solid var(--out-of-service); transform: rotate(45deg);
}
.status-pill--stale { background: rgb(217 119 6 / 12%); color: var(--stale); }
.status-pill--stale::before { background: var(--stale); }
.status-pill--no-live-data { background: rgb(100 116 139 / 15%); color: var(--no-live-data); }
.status-pill--no-live-data::before { background: var(--no-live-data); }
.status-pill--not-published { background: rgb(100 116 139 / 15%); color: var(--not-published); }
/* Hollow ring (circular) — distinct from solid slate "no live status". */
.status-pill--not-published::before {
  background: transparent;
  border: 2px solid var(--not-published);
  box-sizing: border-box;
}
.status-pill--unknown { background: rgb(148 163 184 / 15%); color: var(--unknown); }
.status-pill--unknown::before { background: var(--unknown); }
.status-pill--source-unavailable {
  background: transparent; color: var(--source-unavailable);
  border: 1px dashed var(--source-unavailable);
}
.status-pill--source-unavailable::before { background: var(--source-unavailable); }

.status-available { color: var(--available); font-weight: 600; }
.status-out-of-service { color: var(--out-of-service); font-weight: 600; }

.legend-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  vertical-align: -0.05em;
  flex-shrink: 0;
  box-sizing: border-box;
}
.dot-available { background: var(--available); }
.dot-in-use { background: var(--in-use); }
.dot-out-of-service { background: var(--out-of-service); }
.dot-stale {
  background: transparent;
  border: 2px solid var(--stale);
}
.dot-no-live-data {
  background: transparent;
  border: 2px solid var(--no-live-data);
  opacity: 0.85;
}
.dot-not-published {
  background: transparent;
  border: 2px solid var(--not-published);
}
.dot-unknown {
  background: transparent;
  border: 2px solid var(--unknown);
}
.dot-source-unavailable {
  background: transparent;
  border: 2px dashed var(--source-unavailable);
}

.station-card-price-hint { margin: 0.35rem 0 0; font-weight: 600; }
.station-card-price-hint a,
.station-card-price-hint .linkish {
  color: var(--brand); background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* Map shell */
.map-shell {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 320px;
  background: var(--canvas);
}
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* U66 desktop: map sits beside the left column so collapse really grows the canvas (and map.resize() matters).
   calc width (not inset+width:auto): absolute + width:100% ignored the inset and overflowed. Logical props for RTL. */
@media (min-width: 1024px) {
  .map-shell .map-canvas {
    inset-inline-start: 412px; /* 16px gutter + 380px column + 16px gap */
    inset-inline-end: 0;
    width: calc(100% - 412px);
    transition: inset-inline-start 180ms ease, width 180ms ease;
  }
  .map-shell.is-panel-collapsed .map-canvas {
    inset-inline-start: 0;
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .map-shell .map-canvas { transition: none; }
  }
}

.map-left-column {
  position: absolute; top: 16px; inset-inline-start: 16px; bottom: 52px;
  width: 380px; max-width: calc(100vw - 32px);
  z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.map-left-column > * { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .map-left-column { transition: none; }
}
/* U66: desktop — collapse the whole left column so the map uses full width. */
.map-shell.is-panel-collapsed .map-left-column {
  transform: translateX(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}
[dir="rtl"] .map-shell.is-panel-collapsed .map-left-column {
  transform: translateX(calc(100% + 24px));
}
.map-panel-collapse {
  display: none;
  position: absolute;
  top: 50%;
  inset-inline-end: -14px;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px; height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.map-panel-collapse:hover { color: var(--brand); background: rgb(14 165 164 / 10%); }
.map-panel-expand-strip {
  display: none;
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 11;
  flex-direction: column;
  gap: 8px;
}
.map-panel-expand {
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--fg);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.map-panel-expand:hover,
.map-panel-expand-search:hover { color: var(--brand); background: rgb(14 165 164 / 10%); }
.map-panel-expand-search {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.map-panel-expand-strip[hidden] { display: none !important; }
@media (min-width: 1024px) {
  .map-panel-collapse { display: flex; align-items: center; justify-content: center; }
  .map-shell.is-panel-collapsed .map-panel-expand-strip:not([hidden]) {
    display: flex;
  }
}
@media (max-width: 1023px) {
  .map-panel-collapse,
  .map-panel-expand-strip { display: none !important; }
}

/* Isolate Latin/technical fragments inside RTL sentences (counts, connector codes, kW). */
bdi, .bidi-isolate {
  unicode-bidi: isolate;
}

.map-overlay-top {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  max-width: 420px; width: 100%;
}

.search-card {
  width: 100%; background: var(--surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.search-input-wrap {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  min-height: var(--control-min-height);
}
.search-input-wrap svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1; border: 0; background: transparent; font: inherit; min-width: 0;
  color: var(--fg);
  min-height: calc(var(--control-min-height) - 16px);
}
.search-input-wrap input::placeholder { color: var(--muted); opacity: 1; }
.search-input-wrap input:focus { outline: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: transparent; padding: 6px; cursor: pointer;
  color: var(--muted); border-radius: var(--control-radius);
  min-height: var(--control-min-height); min-width: var(--control-min-height);
}
.icon-btn:hover { color: var(--brand); background: rgb(14 165 164 / 10%); }
#near-me {
  align-self: stretch;
  min-height: 100%;
  height: auto;
}
.near-me-label { display: none; font-size: 0.867rem; white-space: nowrap; }
.route-mode-label { display: none; font-size: 0.867rem; white-space: nowrap; }
@media (min-width: 768px) {
  .near-me-label { display: inline; }
  #near-me { padding-inline: 10px; min-width: 0; }
  .route-mode-label { display: inline; }
  #route-mode-toggle { padding-inline: 10px; min-width: 0; }
}
#route-mode-toggle[aria-pressed="true"] {
  color: var(--brand); background: rgb(14 165 164 / 10%);
}

/* U78: Route mode panel (From / To / corridor) under the search card. */
.route-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-top: 1px solid var(--border);
}
.route-panel[hidden] { display: none !important; }
.route-place { position: relative; }
.route-place label,
.route-corridor-row label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--muted); margin-bottom: 4px;
}
.route-place-row { display: flex; align-items: stretch; gap: 4px; }
.route-place input,
.route-corridor-row select {
  width: 100%; min-height: var(--control-min-height); font-size: 16px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--control-radius);
  background: var(--canvas); color: var(--fg); font: inherit;
}
.route-place-row input { flex: 1; min-width: 0; }
.route-place-suggestions {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  max-height: 220px; overflow: auto;
}
.route-corridor-row { display: flex; flex-direction: column; gap: 4px; }
.route-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.route-actions .btn { min-height: var(--control-min-height); flex: 1 1 auto; }
.route-error { margin: 0; font-size: 0.867rem; color: var(--out-of-service); }
.route-meta, .route-attribution, .route-truncated { margin: 0; font-size: 0.8rem; line-height: 1.35; }
.route-abrp {
  display: inline-flex; align-items: center; min-height: var(--control-min-height);
  font-size: 0.867rem; font-weight: 600;
}
.route-abrp[hidden] { display: none !important; }
.btn-route-sheet {
  display: none; flex: 0 0 auto; align-items: center; gap: 4px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); font: inherit; font-size: 0.867rem;
  padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer;
  min-height: var(--control-min-height);
}
.btn-route-sheet[aria-pressed="true"] {
  border-color: var(--brand); color: var(--brand); background: rgb(14 165 164 / 10%);
}
.btn-route-sheet svg { flex-shrink: 0; }
.map-results-list .route-list-km {
  margin-top: 2px; font-size: 0.8rem; color: var(--muted);
}
@media (max-width: 1023px) {
  /* Phones: Route control lives in the sheet; hide the duplicate in the search row. */
  #route-mode-toggle { display: none; }
  .btn-route-sheet { display: inline-flex; }
  .search-card.is-route-open {
    max-height: min(70vh, 520px); overflow: auto;
  }
}

.search-suggestions {
  border-top: 1px solid var(--border); max-height: 280px; overflow: auto;
  list-style: none; margin: 0; padding: 4px 0;
}
.search-suggestions:empty { display: none; }
.search-suggestions li.search-suggest-group {
  padding: 8px 12px 4px; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  list-style: none;
}
.search-suggestions li button {
  width: 100%; text-align: start; border: 0; background: transparent;
  padding: 10px 12px; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  color: var(--fg);
}
.search-suggestions li button:hover,
.search-suggestions li button.is-active { background: rgb(14 165 164 / 8%); }
.suggestion-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Chips wrap onto 2–3 rows instead of a thin horizontal scrollbar (owner feedback 2026-10-12). */
#filter-chips {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-height: var(--control-min-height);
}
#filter-chips-dynamic { display: contents; }
#filter-chips [hidden] { display: none; }
#filter-chips .chip {
  flex: 0 0 auto;
  height: var(--control-min-height);
  min-height: var(--control-min-height);
  max-height: var(--control-min-height);
  padding: 0 12px;
  line-height: 1;
}
.map-load-error {
  font-size: 0.867rem; color: var(--out-of-service); margin: 0; padding: 0 4px;
}
.map-mobile-charging {
  margin: 8px 0 0; padding: 10px 12px; font-size: 0.867rem; line-height: 1.4;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand)); color: var(--fg);
  border: 1px solid rgb(14 165 164 / 45%); box-shadow: var(--shadow-md);
  border-radius: var(--radius-card); max-height: 28vh; overflow: auto;
}
.map-mobile-charging[hidden] { display: none !important; }
.map-mobile-charging .mobile-svc-title { margin: 0 0 6px; font-weight: 600; }
.map-mobile-charging .mobile-svc { margin: 0 0 4px; }
@media (max-width: 1023px) {
  .map-mobile-charging {
    max-height: 18vh;
    margin-bottom: 4px;
  }
}
/* Map popups (battery swap pins): MapLibre's default popup is white, but text inherits --fg, which is light in
   dark mode → unreadable on phones in dark mode. Theme the popup itself. */
.maplibregl-popup .maplibregl-popup-content {
  background: var(--surface); color: var(--fg);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  padding: 12px 32px 12px 14px; font-size: 0.933rem; line-height: 1.45;
}
.maplibregl-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.maplibregl-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
.maplibregl-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.maplibregl-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.maplibregl-popup .maplibregl-popup-close-button {
  color: var(--fg); font-size: 1.4rem; width: 32px; height: 32px; line-height: 1;
}
.swap-popup a { color: var(--brand); font-weight: 600; }
.swap-popup .swap-batteries { margin: 6px 0 0; }
.swap-popup .swap-batteries--stale { color: var(--stale); }
.swap-popup .swap-dirs { margin: 8px 0 0; }
.swap-popup .swap-attribution { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
.station-mobile-charging {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 12px 14px; background: var(--surface);
}
.station-mobile-charging--prominent {
  border-color: rgb(14 165 164 / 45%);
  background: rgb(14 165 164 / 6%);
  box-shadow: var(--shadow-sm);
}
.mobile-charging-list { list-style: none; margin: 0; padding: 0; }
.mobile-charging-item + .mobile-charging-item {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.mobile-charging-disclaimer { font-size: 0.867rem; margin: 0 0 10px; }
.mobile-city-note { margin: 0 0 12px; font-size: 0.933rem; }
.connector-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); }

.map-results-panel {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
}
.map-results-scroll {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column;
}
.map-list-footer { padding: 8px 16px; font-size: 0.867rem; margin: 0; }
.map-list-hint {
  padding: 12px 16px; font-size: 0.867rem; color: var(--muted);
  list-style: none; border-bottom: 1px solid var(--border);
}

/* Phones/tablets: keep search + filter chips floating at the top; the list lives in the bottom sheet. */
@media (max-width: 1023px) {
  .map-left-column { top: 12px; inset-inline: 12px; bottom: auto; width: auto; max-width: none; }
  .map-overlay-top { max-width: none; }
  .map-left-column .map-results-panel { display: none; }
}
.map-bottom-sheet[data-snap="peek"] .sheet-list-head { display: none; }
.map-bottom-sheet[data-snap="peek"] .map-legend { display: none; }
.map-results-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  color: var(--fg);
  flex-shrink: 0;
}
#results-count { flex: 1 1 auto; min-width: 0; }
.btn-favourites {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); font: inherit; font-size: 0.867rem;
  padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer;
}
.btn-favourites[aria-pressed="true"] {
  border-color: var(--brand); color: var(--brand); background: rgb(14 165 164 / 10%);
}
.btn-favourites__count {
  display: inline-block; min-width: 1.25em; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.btn-favourites__count[hidden] { display: none; }
.sheet-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.favourites-list .fav-status--stale { color: var(--muted); font-weight: 400; }
.favourites-list .fav-checked { display: inline; }
.list-price-hint {
  margin-top: 4px; font-size: 0.867rem; font-weight: 600; color: var(--fg);
}
.btn-favourite[aria-pressed="true"] {
  border-color: var(--brand); color: var(--brand);
}
.map-results-list {
  flex: 0 0 auto; overflow: visible; margin: 0; padding: 0; list-style: none;
}
.map-results-list li { border-bottom: 1px solid var(--border); }
.map-results-list button {
  width: 100%; text-align: start; border: 0; background: transparent;
  padding: 12px 16px; font: inherit; cursor: pointer;
  color: var(--fg);
}
.map-results-list button strong { color: var(--fg); font-weight: 600; }
.map-results-list button:hover, .map-results-list button.is-highlighted {
  background: rgb(14 165 164 / 8%);
}
.result-meta { font-size: 0.867rem; color: var(--muted); margin-top: 4px; }

.map-preview {
  padding: 16px; border-top: 1px solid var(--border);
  display: none;
}
.map-preview.is-visible { display: block; }
.map-preview__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.swap-batteries { margin: 6px 0 0; font-size: 0.9rem; }
.swap-batteries--stale { color: var(--muted); }

.station-detail-panel {
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100% - 32px);
  z-index: 12; pointer-events: none;
  display: none;
}
.station-detail-panel.is-open {
  display: block; pointer-events: auto;
}
.station-detail-panel.is-full-card {
  width: min(420px, calc(100vw - 32px));
}
.station-detail-panel .station-detail__inner {
  max-height: calc(100vh - var(--header-h) - 32px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  padding: 16px 16px 20px; position: relative;
}
.station-detail-panel.is-full-card .station-detail__inner {
  max-height: calc(100vh - var(--header-h) - 32px);
}
.station-card-full .station-section { margin-top: 16px; }
.station-card-full .station-section h2 { font-size: 1rem; margin: 0 0 8px; }
.station-card-full .connector-card-grid {
  display: grid; gap: 8px;
}
.station-card-full .connector-card {
  padding: 10px; background: var(--canvas); border-radius: 10px;
}
.station-card-full .connector-card h3 { font-size: 0.9rem; margin: 0 0 4px; }
.station-card-actions { margin-top: 12px; }
.station-detail__close {
  position: absolute; top: 8px; inset-inline-end: 8px;
}
.station-detail__title {
  font-size: 1.15rem; margin: 0; margin-block: 0 8px; margin-inline: 0 36px; line-height: 1.3;
  color: var(--fg);
}
.cluster-detail-list {
  list-style: none; margin: 0; padding: 0;
}
.cluster-detail-list li { border-bottom: 1px solid var(--border); }
.cluster-detail-list button {
  width: 100%; text-align: start; border: 0; background: transparent;
  padding: 10px 0; font: inherit; cursor: pointer; color: var(--fg);
}
.cluster-detail-list button:hover { background: rgb(14 165 164 / 8%); }
.station-detail__address { font-size: 0.933rem; margin: 8px 0; }
.station-detail__summary { font-size: 0.933rem; color: var(--muted); margin: 8px 0 12px; }
.connector-rows {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 8px;
}
.connector-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--canvas);
  border-radius: 10px; font-size: 0.867rem;
}
.conn-avail { color: var(--muted); font-variant-numeric: tabular-nums; }
.connector-row .status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-inline-start: auto;
}
.map-truncation-notice {
  font-size: 0.8rem; color: var(--muted); margin: 0; padding: 0 4px;
}
.map-bottom-sheet.is-station-open .sheet-list-head,
.map-bottom-sheet.is-station-open #station-list-mobile,
.map-bottom-sheet.is-station-open #favourites-list-mobile,
.map-bottom-sheet.is-station-open .sheet-peek { display: none !important; }
.map-bottom-sheet.is-station-open { max-height: 72vh !important; }
/* Sheet handle cycles peek → half → full (map_shell.js); full = near full-screen card. */
.map-bottom-sheet.is-station-open[data-snap="full"] {
  max-height: 100dvh !important;
  border-radius: 0;
}
@media (max-width: 1023px) {
  #station-preview-mobile.is-full-card {
    max-height: none; overflow: auto; padding: 0 12px 16px;
  }
}
.sheet-list-head {
  padding: 0 16px 8px; font-weight: 600; font-size: 0.933rem;
  color: var(--fg);
  /* flex alignment set earlier with favourites toggle (U69) */
}
@media (max-width: 1023px) {
  .station-detail-panel { display: none !important; }
  #station-preview-mobile.map-preview.is-visible {
    display: block; padding: 0 0 12px; border-top: 0;
  }
#station-preview-mobile .station-detail__title { font-size: 1.05rem; }
}
@media (min-width: 1024px) {
  .maplibregl-ctrl-bottom-right,
  .maplibregl-ctrl-bottom-left { margin-bottom: 48px !important; }
}

.map-bottom-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
  background: var(--surface); border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  display: flex; flex-direction: column;
  max-height: 92vh;
}
@media (min-width: 1024px) { .map-bottom-sheet { display: none; } }
.sheet-handle {
  width: 40px; height: 4px; background: var(--border);
  border-radius: var(--radius-pill); margin: 8px auto;
}
.sheet-peek { padding: 0 16px 12px; font-weight: 600; cursor: pointer; color: var(--fg); }
.sheet-body { overflow: auto; padding: 0 16px 16px; flex: 1; }

.map-lang-menu {
  position: absolute; bottom: 16px; inset-inline-end: 16px; z-index: 10;
  background: var(--surface); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  font-size: 0.8rem; padding: 6px 12px; max-width: min(16rem, calc(100% - 32px));
}
.map-lang-menu summary { cursor: pointer; list-style: none; font-weight: 600; }
.map-lang-menu summary::-webkit-details-marker { display: none; }
.map-lang-menu__list {
  display: grid; gap: 4px; margin-top: 8px; max-height: 40vh; overflow: auto;
}
.map-lang-menu__list a {
  display: block; padding: 4px 0; color: var(--fg); text-decoration: none;
}
.map-lang-menu__list a[aria-current="true"] { color: var(--brand); font-weight: 600; }
@media (max-width: 1023px) {
  .map-lang-menu { bottom: 44px; inset-inline-end: 12px; }
}

/* U66: legend sits under the station list (panel / mobile sheet) — not a floating map overlay. */
.map-legend {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md); /* kept for U38 visual weight parity with the old pill */
  font-size: 0.875rem;
  color: var(--fg);
  flex-shrink: 0;
}
.map-legend__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-min-height);
}
.map-legend__title {
  font-weight: 600;
  flex-shrink: 0;
}
.map-legend__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.map-legend__dots .legend-dot { margin: 0; }
.map-legend__toggle {
  flex-shrink: 0;
  margin-inline-start: auto;
}
.map-legend__chevron {
  display: inline-block;
  transition: transform 160ms ease;
  font-size: 0.85rem;
  line-height: 1;
}
.map-legend.is-open .map-legend__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .map-legend__chevron { transition: none; }
}
.map-legend-expanded { margin-top: 8px; display: grid; gap: 4px; color: var(--fg); }
.map-legend__body[hidden] { display: none; }
.map-live-coverage {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  max-width: min(22rem, calc(100% - 24px));
  margin: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}
.map-live-coverage[hidden] { display: none; }
@media (max-width: 1023px) {
  .map-live-coverage { bottom: 48px; }
}
/* Desktop: sit just right of the left column when the panel is open; full-bleed left when collapsed. */
@media (min-width: 1024px) {
  .map-live-coverage {
    left: 412px;
    max-width: min(22rem, calc(100% - 560px));
  }
  .map-shell.is-panel-collapsed .map-live-coverage {
    left: 12px;
    max-width: min(22rem, calc(100% - 24px));
  }
}

.map-controls-note {
  position: absolute; bottom: 8px; right: 8px; z-index: 10;
  font-size: 0.75rem; color: var(--muted);
}
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left { margin-bottom: 40px !important; }

.no-webgl-panel {
  position: absolute; inset: 0; z-index: 20;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: var(--canvas);
}
.no-webgl-panel.is-visible { display: flex; }
.no-webgl-panel .card {
  max-width: 28rem; padding: 24px; background: var(--surface);
  border-radius: var(--radius-card); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.map-empty-state {
  position: absolute; inset: 0; z-index: 8;
  display: none; align-items: center; justify-content: center;
  padding: 24px; pointer-events: none; text-align: center;
}
.map-empty-state.is-visible { display: flex; }
.map-empty-state .card {
  pointer-events: auto; max-width: 24rem; padding: 20px;
  background: var(--surface); border-radius: var(--radius-card);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
}

.filter-drawer {
  position: fixed; inset: 0; z-index: 100; display: none;
}
.filter-drawer.is-open { display: block; }
.filter-drawer__backdrop {
  position: absolute; inset: 0; background: rgb(15 23 42 / 40%);
}
.filter-drawer__panel {
  position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: min(100%, 360px);
  background: var(--surface); padding: 16px; overflow: auto;
  box-shadow: var(--shadow-md);
}
@media (max-width: 767px) {
  .filter-drawer__panel {
    inset-inline: 0; top: auto; width: 100%;
    max-height: 85vh; border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}
.filter-drawer label { display: block; margin: 12px 0; font-size: 0.933rem; }
.filter-drawer select, .filter-drawer input[type="text"],
.filter-drawer input[type="number"] {
  width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit;
}
.filter-drawer select.is-filled,
.filter-drawer input.is-filled {
  border-color: var(--brand);
  background: rgb(14 165 164 / 8%);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.filter-drawer__actions { display: flex; gap: 8px; margin-top: 16px; }
.filter-operator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.filter-operator-row input { flex: 1; min-width: 0; }
.live-badge {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--available);
  background: color-mix(in srgb, var(--available) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--available) 45%, transparent);
}
.live-badge[hidden] { display: none; }
.map-attr-filters {
  margin: 12px 0;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid var(--border, #ddd);
}
.map-attr-filters legend {
  font-weight: 600;
  padding: 0;
  margin: 0 0 4px;
}
.map-attr-filters .checkbox {
  margin: 8px 0;
  font-size: 0.933rem;
}
.filter-attr-hint { margin: 4px 0 0; font-size: 0.85rem; }
.map-hidden-missing {
  margin: 4px 12px 0;
  font-size: 0.85rem;
  color: var(--muted, #666);
}
.my-car-fieldset {
  margin: 16px 0 0;
  padding: 12px 12px 4px;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: var(--radius-card);
}
.my-car-fieldset legend {
  padding: 0 4px;
  font-size: 0.933rem;
  font-weight: 600;
}
.my-car-hint { margin: 0 0 8px; font-size: 0.85rem; }
.my-car-actions { margin-top: 8px; margin-bottom: 8px; }

.toast-region {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 10px 16px; background: var(--ink); color: var(--surface);
  border-radius: var(--radius-pill); font-size: 0.867rem;
  box-shadow: var(--shadow-md);
}

.list-skeleton li {
  height: 56px; margin: 8px 16px; border-radius: 8px;
  background: linear-gradient(90deg, var(--border), transparent, var(--border));
  background-size: 200% 100%; animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Station page */
.station-page { max-width: 56rem; }
.station-hero {
  display: grid; gap: 16px; margin-bottom: 24px;
}
@media (min-width: 768px) {
  .station-hero { grid-template-columns: 1fr 280px; align-items: start; }
}
.station-hero h1 { margin: 0 0 8px; font-size: 1.6rem; }
.breadcrumbs { font-size: 0.867rem; color: var(--muted); margin-bottom: 8px; }
.breadcrumbs a { color: var(--muted); }
.connector-card {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 16px; background: var(--surface);
}
.connector-card-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.connector-card-grid .connector-card:only-child {
  grid-column: 1 / -1;
  max-width: 32rem;
}
.station-status-summary {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--text);
}
.connector-group-list { display: grid; gap: 12px; }
.connector-group {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 16px; background: var(--surface);
}
.connector-group__heading { margin: 0 0 6px; font-size: 1.05rem; }
.connector-group__counts {
  margin: 0 0 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 0.867rem;
}
.connector-group__counts .status-pill { font-weight: 500; }
.connector-group__details summary {
  cursor: pointer;
  color: var(--link, var(--accent));
  font-size: 0.9rem;
}
.connector-group__evse-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 6px;
  max-height: 24rem; overflow: auto;
}
.connector-group__evse {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  align-items: baseline;
  font-size: 0.867rem;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.connector-group__evse-id { font-family: ui-monospace, monospace; }
.station-hero-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.connector-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 8px; background: var(--canvas);
  font-size: 0.867rem; margin: 4px 4px 0 0;
}
.mini-map {
  width: 100%; aspect-ratio: 4 / 3; min-height: 180px; max-height: 220px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border); overflow: hidden;
  position: relative;
}
.mini-map.mini-map-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center; background: var(--surface);
}
.mini-map.mini-map-fallback p { margin: 0; }
.mini-map .maplibregl-ctrl-bottom-right {
  margin: 2px !important;
}
.mini-map .maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 0; margin: 0;
}
.mini-map .maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner {
  display: none;
}
.mini-map .maplibregl-ctrl-attrib-button {
  width: 22px; height: 22px;
}
.facility-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.facility-chips span {
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--canvas); font-size: 0.867rem;
}
.station-section { margin: 32px 0; }
.station-section h2 { font-size: 1.15rem; margin: 0 0 12px; }
/* U32: operator-published price (OCPI tariffs / open-data price_text) */
.price-block { margin-top: 8px; }
.price-block__title { font-weight: 600; margin: 0 0 4px; font-size: 0.9rem; }
.price-block__line { margin: 0 0 2px; }
.price-block__alt, .price-block__link, .price-block__note { margin: 4px 0 0; font-size: 0.9rem; }
.price-block--connector { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border, #ddd); }
.report-collapsible summary { cursor: pointer; font-weight: 600; }
.report-collapsible form { margin-top: 12px; }

/* Marketing */
.landing-hero {
  text-align: center; padding: 48px 16px 32px;
  background: linear-gradient(180deg, rgb(14 165 164 / 8%), transparent);
}
.landing-hero h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 12px; }
.steps { display: grid; gap: 16px; margin: 32px 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* Four cards (What you get): 2×2 on tablet, 4 across on wide screens */
.steps:has(> .step-card:nth-child(4):last-child) {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .steps:has(> .step-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .steps:has(> .step-card:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}
.step-card {
  padding: 20px; border-radius: var(--radius-card);
  border: 1px solid var(--border); background: var(--surface);
}
.dq-banner {
  margin: 0 0 20px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: rgb(14 165 164 / 8%); font-size: 0.95rem;
}
.dq-banner a { font-weight: 600; }
.dq-report .dq-metrics { list-style: none; padding: 0; margin: 24px 0; }
.dq-report .dq-metrics li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.dq-report .dq-metrics .dq-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dq-report .dq-sources { list-style: none; padding: 0; }
.dq-report .dq-sources li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.dq-report .dq-tips { margin: 16px 0 24px; padding-inline-start: 1.25rem; }
.dq-report .dq-cta { margin: 28px 0 8px; }
.dq-report .dq-score { font-size: 1.25rem; font-weight: 600; margin: 8px 0 16px; }
.dq-report .reliability-sparkline-wrap { color: var(--brand); margin: 8px 0 12px; }
.dq-report .dq-trend-table { font-size: 0.9rem; max-width: 20rem; }
.reliability-page .table-wrap { overflow-x: auto; margin: 12px 0 28px; }
.callout {
  padding: 16px; border-inline-start: 4px solid var(--brand);
  background: rgb(14 165 164 / 8%);
  border-start-start-radius: 0; border-start-end-radius: var(--radius-card);
  border-end-end-radius: var(--radius-card); border-end-start-radius: 0;
  margin: 24px 0;
}
.faq details { border-bottom: 1px solid var(--border); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; }

/* Forms / submit */
.submit-layout { display: grid; gap: 24px; }
@media (min-width: 900px) { .submit-layout { grid-template-columns: 1fr 18rem; } }
.submit-form label { display: block; margin: 12px 0; }
.submit-form input[type=text], .submit-form input[type=email], .submit-form input[type=url],
.submit-form input[type=password], .submit-form select, .submit-form textarea {
  width: 100%; max-width: 36rem; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--fg); font: inherit;
}
.form-error { color: var(--out-of-service); display: block; font-size: 0.867rem; }
/* Honeypot: off-screen, not focusable via normal tab (inputs also tabindex=-1). */
.hp-field {
  position: absolute;
  inset-inline-start: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}
.checkbox { display: flex; gap: 8px; align-items: flex-start; }
.hub-callout {
  display: none; margin: 12px 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: rgb(14 165 164 / 6%); font-size: 0.933rem;
}
.hub-callout.is-active { display: block; }
.submit-aside {
  background: var(--surface); border: 1px solid var(--border);
  padding: 16px; border-radius: var(--radius-card);
}
textarea { width: 100%; min-height: 6rem; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: var(--surface); color: var(--fg); }

.dev-api-list { list-style: none; padding: 0; }
.dev-api-list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: 0.867rem; }

.panel-toggle { display: none; }
@media (max-width: 1023px) { .panel-toggle { display: inline-flex; } }

.status-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.867rem; }
.data-table th, .data-table td {
  border: 1px solid var(--border); padding: 6px 8px; text-align: start;
}
.manage-action { margin: 16px 0; padding: 16px 0; border-top: 1px solid var(--border); }

.marketing-hero { padding-top: 24px; }
.marketing-hero .lead { font-size: 1.067rem; color: var(--muted); max-width: 42rem; }
.hero-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; max-width: 36rem; }
.hero-search input { flex: 1 1 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.stats-grid { display: flex; flex-wrap: wrap; gap: 16px 32px; list-style: none; padding: 0; margin: 20px 0 8px; }
.stats-grid strong { display: block; font-size: 1.6rem; color: var(--brand); }
.stats-grid span { color: var(--muted); font-size: 0.867rem; }
.marketing-columns { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.link-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.link-grid a { padding: 6px 0; }
.home-mini-map, .seo-listing .mini-map { min-height: 220px; margin: 16px 0; border-radius: var(--radius-card); border: 1px solid var(--border); }
.faq-block details { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface); }
.seo-stats { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; padding: 0; color: var(--muted); }
.station-list-seo { padding-inline-start: 1.25rem; }
.guide-index { list-style: none; padding: 0; }
.guide-index li { margin: 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.guide-body h2 { margin-top: 1.5rem; font-size: 1.133rem; }
.guide-body h3 { margin-top: 1.1rem; font-size: 1rem; }
.guide-body .table-wrap { overflow-x: auto; margin: 1rem 0; }
.guide-body table { border-collapse: collapse; width: 100%; font-size: 0.933rem; }
.guide-body th, .guide-body td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.guide-body th { background: var(--surface); }
.breadcrumbs { font-size: 0.867rem; color: var(--muted); margin-bottom: 12px; }
.breadcrumbs a { color: var(--muted); }
.pagination { display: flex; gap: 16px; align-items: center; margin: 16px 0; }
.listing-area-map { min-height: 260px; margin: 16px 0 24px; border-radius: var(--radius-card); border: 1px solid var(--border); }
.seo-station-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.seo-station-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.seo-station-card:hover,
.seo-station-card:focus-within {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.seo-station-card h3 { margin: 0 0 4px; font-size: 1.067rem; }
.seo-station-card h3 a { text-decoration: none; color: inherit; }
.seo-station-card h3 a:hover { color: var(--brand); }
/* Stretched link: whole card is the hit target. */
.seo-station-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.seo-station-card .operator-line { margin: 0 0 8px; font-size: 0.867rem; }
.seo-station-card .address-line { margin: 0 0 8px; font-size: 0.867rem; color: var(--muted); }
.seo-station-card .connector-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Admin UI (U6) — same tokens as public site, noindex pages */
.admin-body { background: var(--canvas); color: var(--fg); min-height: 100vh; }
.admin-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.admin-header .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fg); text-decoration: none; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 12px 16px; flex: 1; }
.admin-nav a { color: var(--fg); text-decoration: none; font-size: 0.933rem; }
.admin-nav a:hover { color: var(--brand); }
.admin-main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 12px 0 20px; }
.admin-inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.933rem; margin: 12px 0; }
.admin-table th, .admin-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: start; vertical-align: top; }
/* long URLs / ids in cells (approval bodies, run summaries) must wrap, not widen the table past the page */
.admin-table td { overflow-wrap: anywhere; }
.admin-table td.nowrap { white-space: nowrap; }
.admin-table th { background: var(--surface); }
.admin-panel { margin: 24px 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }

/* U67/U70 — collapsible sections + date/text filter toolbar on admin agent/CRM/contacts */
.crm-activity-flag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; margin: 0 8px 0 0;
}
.admin-agent-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end;
  margin: 16px 0 8px; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.admin-agent-range { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; flex: 1 1 320px; }
.admin-agent-range__label { font-size: 0.9rem; font-weight: 600; width: 100%; margin: 0; }
.admin-agent-range__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-agent-range label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.admin-agent-range input[type="date"] {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--canvas); color: var(--fg);
}
.admin-agent-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.admin-agent-filter { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; min-width: 180px; }
.admin-agent-filter input {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--canvas); color: var(--fg); min-width: 200px;
}
.admin-section {
  margin: 16px 0; padding: 0 12px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.admin-section > summary {
  cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 700;
  padding: 12px 4px; margin: 0 -4px;
}
.admin-section > summary::-webkit-details-marker { display: none; }
.admin-section > summary::before {
  content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); font-weight: 400;
}
.admin-section[open] > summary::before { content: "▾"; }
.admin-section > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.admin-dl { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 8px 16px; }
.admin-dl dt { color: var(--muted); margin: 0; }
.admin-dl dd { margin: 0; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.admin-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px; min-width: 140px; }
.admin-stat__n { display: block; font-size: 1.5rem; font-weight: 700; color: var(--brand); }
.admin-form label, .admin-form-inline label { display: block; margin: 12px 0; }
.admin-form input, .admin-form select, .admin-form-inline input { max-width: 320px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--canvas); color: var(--fg); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-login-card { max-width: 400px; margin: 48px auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.admin-warn { color: #b45309; background: rgb(217 119 6 / 12%); padding: 10px 12px; border-radius: 8px; }
@media (prefers-color-scheme: dark) {
  .admin-warn { color: #fbbf24; background: rgb(251 191 36 / 12%); }
}
.admin-flash { padding: 10px 12px; background: var(--surface); border: 1px solid var(--brand); border-radius: 8px; }

/* Legal pages (privacy, terms) */
.legal h2 { margin-top: 2rem; scroll-margin-top: calc(var(--header-h) + 12px); }
.legal h3 { margin-top: 1.25rem; }
.legal ul { padding-inline-start: 1.25rem; }
.legal li { margin: 6px 0; }
.legal-locale-note {
  padding: 12px 14px; margin: 0 0 16px; border-inline-start: 4px solid var(--brand);
  background: rgb(14 165 164 / 8%); border-radius: var(--radius-card);
}
.legal-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px; margin: 16px 0 8px; }
.legal-toc ol { margin: 0; padding-inline-start: 1.25rem; columns: 2; column-gap: 24px; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.933rem; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: start; vertical-align: top; }
.legal-table th { background: var(--surface); }

/* U13a — phone-only "Add to home screen" banner */
.install-app {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); font-size: 0.875rem;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.install-app[hidden], .install-app [hidden] { display: none; }
/* on the map: at the top, under the header, so it never covers the station sheet; hides itself after 15 s */
.install-app.install-app--top { top: calc(var(--header-h, 56px) + 8px); bottom: auto; padding-bottom: 10px; }
.nav-install[hidden] { display: none; }
.nav-install { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.install-app img { border-radius: 8px; flex: none; width: 32px; height: 32px; }
.install-app p { margin: 0; flex: 1 1 180px; }
.install-app .install-app__actions { flex: 0 0 auto; font-size: 1rem; display: flex; gap: 8px; margin-inline-start: auto; }
.directions-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* U13c — station report form: objection select + hint */
.report-collapsible select, .report-collapsible input[type="email"] { width: 100%; max-width: 100%; }
.report-collapsible .hint { margin: 4px 0 12px; font-size: 0.875rem; color: var(--muted); }

/* Home: charge points by status (colours = map). Scoped to the bar/swatch: the same .status-* classes colour the
   status text on station pages and the map card (text on its own colour was unreadable). */
.status-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--unknown); margin: 16px 0 12px; }
.status-bar-seg { display: block; height: 100%; min-width: 2px; }
:is(.status-bar-seg, .status-swatch).status-available { background: var(--available); }
:is(.status-bar-seg, .status-swatch).status-in-use { background: var(--in-use); }
:is(.status-bar-seg, .status-swatch).status-out-of-service { background: var(--out-of-service); }
:is(.status-bar-seg, .status-swatch).status-stale { background: var(--stale); }
:is(.status-bar-seg, .status-swatch).status-unknown { background: var(--unknown); }
:is(.status-bar-seg, .status-swatch).status-no-live-data { background: var(--no-live-data); }
/* Next to the solid "no live status" segment (same slate): hatched, so the two never merge into one block. */
.status-bar-seg.status-not-published {
  background: repeating-linear-gradient(135deg, var(--not-published) 0 3px, rgb(100 116 139 / 20%) 3px 7px);
}
/* Home legend swatch: hollow ring matching map/pill (bar segment stays solid fill). */
.status-swatch.status-not-published {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--not-published);
}
:is(.status-bar-seg, .status-swatch).status-source-unavailable { background: var(--source-unavailable); background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.18) 4px 8px); }
.status-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.status-legend li { display: grid; grid-template-columns: 14px auto 1fr; column-gap: 8px; align-items: baseline; }
.status-legend .muted { grid-column: 2 / -1; font-size: 0.867rem; }
.status-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.status-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.freshness-note { margin-top: 16px; padding: 12px 16px; border-left: 4px solid var(--available); background: color-mix(in srgb, var(--available) 7%, transparent); border-radius: 4px; }
.freshness-note h3 { margin: 0 0 4px; font-size: 1rem; }
.freshness-note p { margin: 0; }

/* Public /stats */
.stats-page .stats-headlines { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.stats-page .stats-headlines li { padding: 12px 16px; border-left: 4px solid var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); border-radius: 4px; }
.stats-page .license-note { font-size: 0.9rem; }
.stats-page .table-wrap { overflow-x: auto; margin: 12px 0 28px; }
.stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.stats-table th, .stats-table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); }
.stats-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.stats-table tbody th { font-weight: 500; }
.stats-chart { margin: 12px 0 28px; max-width: 40rem; }
.stats-chart-label { font-size: 12px; fill: currentColor; }
.stats-chart-track { fill: color-mix(in srgb, var(--unknown) 45%, transparent); }
.stats-chart-bar { fill: var(--unknown); }
.stats-chart-pct { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.stats-table--util { font-size: 0.85rem; }
.stats-table--util th, .stats-table--util td { white-space: nowrap; }
@media (max-width: 420px) {
  .stats-table--util { font-size: 0.78rem; }
  .stats-table--util th, .stats-table--util td { padding: 6px 6px; }
}

/* Public /contact */
.contact-page { max-width: 40rem; }
.contact-intro { color: var(--muted); margin: 0 0 1.25rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form-status:empty { display: none; }
.contact-topics {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.contact-topics legend {
  padding: 0;
  margin: 0 0 0.75rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
}
.contact-topics__grid {
  display: grid;
  gap: 10px;
}
.contact-topic-tile {
  display: block;
  position: relative;
  cursor: pointer;
  margin: 0;
}
.contact-topic-tile input {
  position: absolute;
  opacity: 0;
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 1px;
}
.contact-topic-tile__body {
  display: block;
  padding: 14px 16px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-topic-tile__label {
  display: block;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.contact-topic-tile__hint {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.4;
}
.contact-topic-tile__hint a { font-weight: 500; }
.contact-topic-tile:hover .contact-topic-tile__body {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
}
.contact-topic-tile input:checked + .contact-topic-tile__body {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.contact-topic-tile input:focus-visible + .contact-topic-tile__body {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field label {
  font-weight: 600;
  color: var(--fg);
}
.contact-help { margin: 0; font-size: 0.875rem; color: var(--muted); }
.contact-optional { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.contact-required { color: var(--out-of-service); margin-inline-start: 2px; }
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
}
.contact-field textarea { min-height: 9rem; resize: vertical; }
.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
  border-color: var(--out-of-service);
}
.contact-char-count {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.contact-char-count--near { color: var(--stale); }
.contact-char-count--full { color: var(--out-of-service); font-weight: 600; }
.contact-submit {
  align-self: stretch;
  min-height: 48px;
  font-weight: 600;
}
.contact-thanks p { margin: 0.75rem 0; }
.contact-thanks .btn { margin-top: 0.5rem; }
@media (min-width: 560px) {
  .contact-topics__grid { grid-template-columns: 1fr 1fr; }
  .contact-submit { align-self: flex-start; min-width: 12rem; }
}

/* ── U26 mobile UX fixes (review 2026-10-18) ─────────────────────────────────────────────────────────── */
/* Batch 1: tap targets ≥ 44 × 44 px (Apple/Google guidance) */
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
@media (max-width: 1023px) {
  #filter-chips .chip { height: var(--control-min-height); min-height: var(--control-min-height); max-height: var(--control-min-height); padding: 0 14px; font-size: 0.9rem; }
  #near-me { min-width: var(--control-min-height); min-height: var(--control-min-height); display: inline-flex; align-items: center; justify-content: center; }
  .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
  .station-detail__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
    justify-content: center; }
}
/* Station card forms: big tappable outcomes, 44 px fields, 16 px text (iOS does not zoom into 16 px inputs) */
.community-form fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.community-form fieldset > label:has(input[type="radio"]) {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; margin: 6px 0;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface);
}
.community-form fieldset > label:has(input[type="radio"]:checked) {
  border-color: var(--brand); background: rgb(14 165 164 / 10%); font-weight: 600;
}
.community-form input[type="radio"], .community-form input[type="checkbox"],
.report-collapsible input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--brand); }
.community-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
.community-form textarea, .report-collapsible textarea, .report-collapsible select,
.report-collapsible input[type="email"], .report-collapsible input[type="text"] {
  display: block; width: 100%; min-height: 44px; font-size: 16px; padding: 10px 12px; margin: 4px 0 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg);
}
.community-form input[type="file"] { display: block; min-height: 44px; font-size: 16px; margin: 4px 0 10px; }
.community-form .btn, .report-collapsible .btn { min-height: 44px; }
.community-form.inline .btn { min-width: 64px; }
/* Operator forms (/submit, /partner, manage page): labels above full-width fields on phones */
@media (max-width: 767px) {
  .form-stack label { display: block; margin: 0 0 12px; font-weight: 600; }
  .form-stack label.checkbox, .form-stack label:has(> input[type="checkbox"]) {
    display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
  .form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .form-stack select,
  .form-stack textarea {
    display: block; width: 100%; min-height: 44px; font-size: 16px; margin-top: 4px; font-weight: 400; }
  .form-stack .btn { min-height: 44px; width: 100%; justify-content: center; }
}
/* the home-screen offer must never cover the last form fields */
body:has(#install-app:not([hidden]):not(.install-app--top)) .page-content { padding-bottom: 140px; }

/* Batch 2: phones use the Filters button (U90); desktop keeps the chip row */
@media (max-width: 1023px) {
  #filter-chips { display: none !important; }
  .btn.filter-open-btn { display: inline-flex; }
}
@media (min-width: 1024px) {
  #filter-chips {
    flex-wrap: wrap;
  }
}
button.sheet-handle {
  display: block; border: 0; padding: 0; cursor: grab; touch-action: none;
  width: 100%; height: 28px; min-height: 28px; flex: none; margin: 0; background: transparent; position: relative;
}
.map-bottom-sheet > .sheet-peek, .map-bottom-sheet > .sheet-list-head { flex: none; }
button.sheet-handle::before {
  content: ""; position: absolute; inset-inline-start: 50%; top: 12px; width: 44px; height: 5px;
  margin-inline-start: -22px; border-radius: var(--radius-pill); background: var(--border);
}
button.sheet-handle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.map-bottom-sheet:not([data-snap="peek"]) .sheet-peek { display: none; }
.map-bottom-sheet { transition: max-height 0.18s ease-out; }
.map-bottom-sheet.is-dragging { transition: none; }

/* Batch 3: "Near me" denied — a visible note under the search card instead of a short toast */
.map-inline-note {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--fg);
}
.map-inline-note[hidden] { display: none; }
.search-suggestions li.search-suggest-empty { padding: 12px; color: var(--muted); list-style: none; }
.map-preview__actions [data-action="full-details"] { flex-basis: 100%; justify-content: center; }
/* phone landscape: keep the map visible — compact search, no zoom buttons (pinch-zoom), chips stay one row */
@media (max-width: 1023px) and (orientation: landscape) {
  .map-left-column { top: 6px; }
  .search-input-wrap { padding: 0 8px; }
  .search-input-wrap input { min-height: 40px; }
  .map-overlay-top { gap: 6px; }
  .maplibregl-ctrl-group { display: none; }
}
/* iPhone home-screen app (owner 2026-10-18: a dark block at the bottom): viewport-fit=cover lets the page draw under
   the home bar and the landscape notch; keep controls and the last content line out of those areas */
.map-bottom-sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.site-header { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 1023px) {
  .map-left-column { inset-inline-start: max(12px, env(safe-area-inset-left, 0px));
                     inset-inline-end: max(12px, env(safe-area-inset-right, 0px)); }
}
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
body.map-page { padding-bottom: 0; overflow: hidden; overscroll-behavior: none; }


/* Station forms legibility (owner 2026-10-19, iPhone full details: "the submit boxes are not really legible"):
   native controls follow the theme (dark mode drew white text on a white select), fields stand out from the card,
   each form is its own box with a full-width Send button */
:root { color-scheme: light dark; --field-bg: #f1f5f9; --field-border: #94a3b8; --brand-strong: #0f766e; }
@media (prefers-color-scheme: dark) {
  :root { --field-bg: #0f172a; --field-border: #64748b; --brand-strong: #0d9488; }
}
.community-form:not(.inline), .report-collapsible > form:not(.community-form) {
  padding: 14px; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg);
}
.community-form legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 4px; }
.community-form label, .report-collapsible label { color: var(--fg); font-weight: 600; }
.community-form fieldset > label:has(input[type="radio"]) { font-weight: 500; border-color: var(--field-border);
  background: var(--field-bg); }
.community-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
.community-form textarea, .report-collapsible textarea, .report-collapsible select,
.report-collapsible input[type="email"], .report-collapsible input[type="text"] {
  border-color: var(--field-border); background-color: var(--field-bg); color: var(--fg); font-weight: 400;
}
.community-form textarea, .report-collapsible textarea { min-height: 96px; resize: vertical; }
.community-form ::placeholder, .report-collapsible ::placeholder { color: var(--muted); opacity: 1; }
.community-form input:focus, .community-form textarea:focus, .report-collapsible select:focus,
.report-collapsible textarea:focus, .report-collapsible input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(14 165 164 / 30%);
}
/* select: own arrow, so the text never sits on a native white box */
.report-collapsible select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
[dir="rtl"] .report-collapsible select { background-position: left 14px center; }
/* consent checkbox: its own line, text beside the box */
.community-form label:has(> input[type="checkbox"]), .report-collapsible label:has(> input[type="checkbox"]) {
  display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 12px; font-weight: 400; line-height: 1.4;
}
.community-form label:has(> input[type="checkbox"]) input { margin-top: 1px; }
.community-form input[type="file"] { width: 100%; color: var(--fg); }
.community-form input[type="file"]::file-selector-button,
.community-form input[type="file"]::-webkit-file-upload-button {
  min-height: 44px; margin-inline-end: 12px; padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--field-border); border-radius: 10px; background: var(--field-bg); color: var(--fg);
}
/* Send: a clear, full-width primary button */
.community-form:not(.inline) button[type="submit"], .report-collapsible > form button[type="submit"] {
  display: flex; width: 100%; margin-top: 4px; font-weight: 600;
  background: var(--brand-strong); border-color: var(--brand-strong); color: #fff;
}
.community-form:not(.inline) button[type="submit"]:hover, .report-collapsible > form button[type="submit"]:hover {
  background: var(--brand-hover); border-color: var(--brand-hover); color: #fff;
}
/* "Is the map marker on the charging station?": question on its own line, Yes / No side by side */
.community-form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.community-form.inline > span { flex-basis: 100%; font-weight: 600; }
.community-form.inline .btn { flex: 1 1 0; font-weight: 600; border-color: var(--field-border); }
.community-form.inline .cf-turnstile { flex-basis: 100%; }
.report-collapsible > summary { padding: 10px 0; }

/* U33 operator panel v2 — feed cards (mobile-first, site tokens, dark mode) */
.partner-panel .partner-totals {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 20px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); font-size: 0.9rem;
}
.partner-feed-cards { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }
.partner-feed-card {
  margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); border-inline-start: 4px solid var(--border);
}
.partner-feed-card.partner-status-active { border-inline-start-color: var(--brand); }
.partner-feed-card.partner-status-failing { border-inline-start-color: #c0392b; }
.partner-feed-card.partner-status-paused { border-inline-start-color: #b8860b; }
.partner-feed-card.partner-status-pending { border-inline-start-color: var(--muted); }
.partner-feed-card__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
}
.partner-feed-card__head h2 { margin: 0; font-size: 1.1rem; }
.partner-feed-card__meta {
  display: grid; gap: 10px; margin: 14px 0 0; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .partner-feed-card__meta { grid-template-columns: 1fr 1fr; }
}
.partner-feed-card__meta dt { margin: 0; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.partner-feed-card__meta dd { margin: 2px 0 0; }
.partner-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); color: var(--fg);
  background: var(--bg);
}
.partner-badge--active { border-color: var(--brand); color: var(--brand); }
.partner-badge--failing { border-color: #c0392b; color: #c0392b; }
.partner-badge--paused { border-color: #b8860b; color: #b8860b; }
.partner-badge--problem { border-color: #c0392b; color: #c0392b; }
.partner-next-steps { margin-top: 12px; }
.partner-next-steps h3 { margin: 0 0 6px; font-size: 0.95rem; }
.partner-next-steps ul { margin: 0; padding-inline-start: 1.2em; }
.partner-feed-card__links { margin: 12px 0 0; font-size: 0.9rem; }
.notice-demo { border-color: #b8860b; background: color-mix(in srgb, #b8860b 12%, var(--surface)); }
.partner-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.partner-station-list { list-style: none; margin: 0; padding: 0; }
.partner-station-row {
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.partner-station-row__main { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.partner-station-row__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; font-size: 0.85rem; }
.partner-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.partner-dq-kinds { list-style: none; margin: 0; padding: 0; }
.partner-dq-kind { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.partner-dq-kind h2 { margin: 0 0 6px; font-size: 1rem; }
.admin-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 16px 0; }
.admin-search label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.admin-search input[type="search"] { min-width: 16rem; min-height: 40px; padding: 8px 10px; }

/* U86: site-wide driver feedback dialog */
.nav-feedback {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.nav-feedback:hover { color: var(--brand); }
.nav-feedback:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
.map-feedback-btn {
  font: inherit;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.map-feedback-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.map-feedback-btn--peek { display: none; }
.map-bottom-sheet[data-snap="peek"]:not(.is-station-open) > .map-feedback-btn--peek {
  display: block;
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  font-size: 0.85rem;
  min-height: 32px;
  z-index: 1;
}
.map-bottom-sheet[data-snap="peek"] > .sheet-peek { padding-inline-end: 112px; }
.map-feedback-btn--sheet {
  margin-inline-start: auto;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.sheet-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feedback-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  max-width: min(28rem, calc(100vw - 24px));
  box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
}
.feedback-dialog::backdrop { background: rgb(15 23 42 / 45%); }
.feedback-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
}
.feedback-dialog__head h2 { margin: 0; font-size: 1.15rem; }
.feedback-form__panel { padding: 12px 16px 16px; }
.feedback-rating { border: 0; margin: 12px 0; padding: 0; }
.feedback-rating__choices { display: flex; gap: 8px; flex-wrap: wrap; }
.feedback-rating__btn {
  flex: 1;
  min-width: 5rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  cursor: pointer;
}
.feedback-rating__btn.is-selected,
.feedback-rating__btn[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.feedback-rating__btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.feedback-form textarea,
.feedback-form input[type="email"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.feedback-dialog__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.feedback-thanks { margin: 8px 0 16px; font-size: 1.05rem; }

/* Owner 2026-11-01: on phones the collapsed sheet is only the drag handle (36px) — no "N stations in view" line,
   no Feedback link (it is in the menu) and no legend (status colours are on every station card). Tap or drag the
   handle to open the list. The count stays for screen readers. */
.map-bottom-sheet[data-snap="peek"]:not(.is-station-open) > .sheet-peek {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.map-bottom-sheet[data-snap="peek"]:not(.is-station-open) > .map-feedback-btn--peek { display: none !important; }
.map-bottom-sheet[data-snap="peek"]:not(.is-station-open) > .sheet-body { display: none; }
.mobile-area-popup .mobile-area-title { margin: 0 0 6px; font-weight: 600; }
.mobile-area-popup .mobile-area-item { margin: 0; }
.mobile-area-popup .mobile-area-item + .mobile-area-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.mobile-area-popup .mobile-area-note { font-size: 0.8rem; color: var(--muted); }