/* Map workspace. The two served entry points share this layer. */
body {
  --radar-paper: #141e20;
  --radar-surface: #1c292b;
  --radar-ink: #f3f6f1;
  --radar-muted: #a6b7b6;
  --radar-line: #354547;
  --radar-accent: #92e2bc;
  --radar-tint: #233c33;
  --radar-shadow: 0 4px 16px #102b2424;
  font-family: "Segoe UI", system-ui, sans-serif;
}

body.theme-light {
  --radar-paper: #f5f7f2;
  --radar-surface: #ffffff;
  --radar-ink: #152824;
  --radar-muted: #4b625c;
  --radar-line: #d4ddd6;
  --radar-accent: #135943;
  --radar-tint: #e3efe6;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body #map { background: #172225; }
body.theme-light #map { background: #e5ebe3; }
body #ambient { display: none; }

body #map .leaflet-control-attribution {
  display: block;
  margin: 0 9px 8px 0;
  padding: 0;
  color: #f3f6f1;
  background: transparent;
  text-shadow: 0 0 2px #172225, 0 1px 3px #172225, 0 -1px 3px #172225;
  font: 11px/1.25 "Segoe UI", sans-serif;
}

body.theme-light #map .leaflet-control-attribution {
  color: #152824;
  text-shadow: 0 0 2px #fff, 0 1px 3px #fff, 0 -1px 3px #fff;
}

body #map .leaflet-control-attribution a { color: inherit; }
.radar-map-caption,
.radar-demo-label,
.radar-demo #frAdMapDesktopHost { display: none; }

.radar-demo .radar-demo-label {
  display: block;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--radar-tint);
  color: var(--radar-accent);
  font-size: 11px;
  font-weight: 700;
}

body .sidebar .topbar .brand,
body.theme-light .sidebar .topbar .brand {
  color: var(--radar-ink);
  background: transparent;
  box-shadow: none;
  border: 0;
  backdrop-filter: none;
}

body .topbar .brand img { filter: none; }
body .topbar .brand span,
body.theme-light .topbar .brand span {
  color: var(--radar-ink);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.14;
}

body .topbar .brand b,
body.theme-light .topbar .brand b { color: var(--radar-ink); text-shadow: none; }
body .topbar .brand small {
  display: block;
  margin-top: 3px;
  color: var(--radar-muted);
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 600;
}

body .topbar .search,
body.theme-light .topbar .search,
body .topbar .search:focus-within,
body.theme-light .topbar .search:focus-within,
body .topbar > .home-chip.search-home,
body.theme-light .topbar > .home-chip.search-home,
body .topbar-tools button,
body.theme-light .topbar-tools button,
body .side-controls button,
body.theme-light .side-controls button {
  background: var(--radar-surface);
  border: 1px solid var(--radar-line);
  color: var(--radar-ink);
  border-radius: 11px;
  box-shadow: none;
  text-shadow: none;
}

body .topbar > .home-chip.search-home.is-saved { color: var(--radar-accent); background: var(--radar-tint); }
body .topbar .search input { color: var(--radar-ink); font-size: 15px; font-weight: 550; }
body .topbar .search input::placeholder,
body.theme-light .topbar .search input::placeholder,
body .topbar .search .search-glyph,
body.theme-light .topbar .search .search-glyph { color: var(--radar-muted); }
body .topbar .search:focus-within,
body.theme-light .topbar .search:focus-within { border-color: var(--radar-accent); }
body .topbar .search .search-glyph { font-size: 17px; }
body .side-controls button,
body.theme-light .side-controls button { box-shadow: var(--radar-shadow); }

body .sidebar .top-legal,
body.theme-light .sidebar .top-legal,
body .sidebar .quick-toolbar,
body.theme-light .sidebar .quick-toolbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body .top-legal summary,
body.theme-light .top-legal summary {
  padding: 4px 6px;
  min-height: 30px;
  color: var(--radar-muted);
  font-weight: 600;
  font-size: 12px;
}

body .top-legal .legal-notice-body {
  max-height: min(42dvh, 290px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--radar-muted);
}
body .top-legal .legal-notice-body a { color: var(--radar-accent); text-decoration: underline; }
body .top-legal summary i,
body.theme-light .top-legal summary i { color: var(--radar-accent); background: none; box-shadow: none; }
body .sidebar .quick-toolbar { gap: 5px; padding: 0; }
body .quick-toolbar .quick-tool,
body.theme-light .quick-toolbar .quick-tool {
  min-height: 38px;
  padding: 0 5px;
  color: var(--radar-ink);
  background: var(--radar-surface);
  border: 1px solid var(--radar-line);
  box-shadow: none;
  text-shadow: none;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 650;
}

body .quick-toolbar .quick-tool::before,
body .quick-toolbar .quick-tool::after { display: none; }
body .quick-toolbar .quick-tool i { color: var(--radar-accent); }
body .quick-toolbar .quick-tool.on,
body.theme-light .quick-toolbar .quick-tool.on { background: var(--radar-tint); color: var(--radar-accent); }

#emptyView .empty-hero h1 {
  color: var(--radar-ink);
  font-size: clamp(24px, 2.5vw, 33px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0;
}

#emptyView .empty-hero p { color: var(--radar-muted); font-size: 13px; line-height: 1.35; margin: 5px 0 0; }
body .nearest-mini { margin: 14px 0 0; gap: 7px; }
.nearest-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nearest-context { display: grid; gap: 2px; color: var(--radar-muted); font-size: 11px; line-height: 1.25; }
.nearest-context strong { font-size: 13px; font-weight: 720; color: var(--radar-ink); font-variant-numeric: tabular-nums; }
.nearest-sort-label select,
body .nearest-filter-line .nearest-fresh,
body.theme-light .nearest-filter-line .nearest-fresh,
body .nearest-mini .nearest-more {
  padding: 0 10px;
  min-height: 36px;
  color: var(--radar-ink);
  background: var(--radar-surface);
  border: 1px solid var(--radar-line);
  border-radius: 8px;
  box-shadow: none;
  font: 600 12px/1.2 "Segoe UI", sans-serif;
}

.nearest-sort-label select { color-scheme: dark; }
body.theme-light .nearest-sort-label select { color-scheme: light; }
body .nearest-filter-line .nearest-fresh.on,
body.theme-light .nearest-filter-line .nearest-fresh.on { color: var(--radar-accent); background: var(--radar-tint); border-color: var(--radar-accent); }
.nearest-fresh i { margin-right: 3px; }
.nearest-message { margin: 0; padding: 16px 12px; border: 1px dashed var(--radar-line); border-radius: 10px; color: var(--radar-ink); font-size: 13px; }
.nearest-message p { margin: 5px 0 0; color: var(--radar-muted); }
body .nearest-mini-list { gap: 6px; max-height: none; }
body .nearest-mini-list .nearest-item[data-id],
body.theme-light .nearest-mini-list .nearest-item[data-id] {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 80px;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  box-shadow: none;
  background: var(--radar-surface);
  color: var(--radar-ink);
}

body .nearest-mini-list .nearest-item[data-id]::before,
body .nearest-mini-list .nearest-item[data-id]::after { display: none; }
body .nearest-mini-list .nearest-item[data-id].is-hover,
body.theme-light .nearest-mini-list .nearest-item[data-id].is-hover { border-color: var(--radar-accent); background: var(--radar-tint); transform: none; }
body .nearest-item .nearest-logo,
body.theme-light .nearest-item .nearest-logo { width: 40px; height: 40px; border-radius: 8px; background: #edf2ee; border: 1px solid #d4ddd6; box-shadow: none; }
body .nearest-item strong,
body .nearest-item .nearest-dist,
body.theme-light .nearest-item strong,
body.theme-light .nearest-item .nearest-dist { color: var(--radar-ink); font-weight: 720; }
body .nearest-item small,
body.theme-light .nearest-item small,
body .nearest-item .nearest-meta { color: var(--radar-muted) !important; font-size: 11.5px !important; font-weight: 500; }
body .nearest-item .nearest-dist { font-variant-numeric: tabular-nums; }
body .nearest-item .nearest-status,
body.theme-light .nearest-item .nearest-status {
  color: var(--radar-ink);
  background: var(--radar-paper);
  border: 1px solid var(--radar-line);
  box-shadow: none;
  border-radius: 5px;
  text-shadow: none;
  font-size: 10px;
}

body .nearest-item .nearest-status::before { background: var(--c); box-shadow: none; }

.radar-discovery-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
body .quick-toolbar .radar-discovery-tool,
body.theme-light .quick-toolbar .radar-discovery-tool {
  background: var(--radar-tint);
  color: var(--radar-accent);
  min-height: 40px;
  font-size: 13px;
  border-color: transparent;
}
body .quick-toolbar .radar-discovery-tool[aria-expanded="true"] {
  border-color: var(--radar-accent);
}
body #emptyView .add-station-cta,
body.theme-light #emptyView .add-station-cta {
  background: var(--radar-surface);
  color: var(--radar-ink);
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  box-shadow: none;
}

body #emptyView .add-station-cta > span,
body.theme-light #emptyView .add-station-cta > span {
  color: var(--radar-accent);
  background: var(--radar-tint);
  border-radius: 8px;
  box-shadow: none;
}

body #emptyView .add-station-cta b { color: var(--radar-ink); font-weight: 700; }
body #emptyView .add-station-cta small { color: var(--radar-muted); font-weight: 500; }

body .tabbar,
body.theme-light .tabbar {
  background: var(--radar-surface);
  border: 1px solid var(--radar-line);
  box-shadow: var(--radar-shadow);
  border-radius: 12px;
  padding: 4px;
}
body .tabbar button,
body.theme-light .tabbar button {
  min-height: 52px;
  border-radius: 8px;
  color: var(--radar-muted);
}
body .tabbar button.on,
body.theme-light .tabbar button.on { background: var(--radar-tint); color: var(--radar-accent); box-shadow: none; }
body .tabbar .tab-icon-wrap,
body .tabbar button.on .tab-icon-wrap,
body.theme-light .tabbar button.on .tab-icon-wrap { width: 22px; height: 22px; background: none; box-shadow: none; transform: none; }
body .tabbar button .tab-icon-wrap::before { display: none; }
body .tabbar button svg,
body .tabbar button.on svg,
body.theme-light .tabbar button.on svg { color: inherit; width: 20px; height: 20px; filter: none; }
body .tabbar button b { font-size: 11px; font-weight: 680; letter-spacing: 0; }

body .sidebar :is(a, button, select, summary):focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 2px;
}

@media (min-width: 820px) {
  :root { --rail-w: clamp(324px, 29vw, 430px); }
  body .sidebar,
  body.theme-light .sidebar {
    background: var(--radar-paper);
    border-color: var(--radar-line);
    padding: 18px 16px 12px;
    gap: 9px;
    box-shadow: 4px 0 14px #102b241a;
  }

  body .topbar { gap: 9px; }
  body .topbar .brand { gap: 9px; }
  body .topbar .brand img { width: 40px; height: 40px; }
  body .topbar .search { height: 45px; }
  body .sidebar .search-popover { top: 125px; }
  body .sidebar .top-legal { grid-row: 3; }
  body .sidebar .quick-toolbar { grid-row: 2; }
  body .tabbar .tab-list { display: none; }
  body .sidebar .sheet:has(#emptyView.show),
  body.theme-light .sidebar .sheet:has(#emptyView.show) {
    padding-top: 12px;
    border-top: 1px solid var(--radar-line);
    background: transparent;
    box-shadow: none;
  }
  body .sheet:has(#emptyView.show) .sheet-drag-zone { display: none; }
  body #emptyView .empty-hero { display: block; }
  .radar-map-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    z-index: 4;
    left: calc(var(--rail-w) + 18px);
    top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--radar-line);
    border-radius: 10px;
    background: var(--radar-surface);
    color: var(--radar-ink);
    box-shadow: var(--radar-shadow);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
  }
  .radar-map-caption i { color: var(--radar-accent); }
}

@media (max-width: 819px) {
  body .mobile-header { gap: 6px; pointer-events: none; }
  body .mobile-header :is(.topbar, .quick-toolbar, .top-legal, .city-summary-card) { pointer-events: auto; }
  body .topbar .brand,
  body.theme-light .topbar .brand { background: var(--radar-surface); border: 1px solid var(--radar-line); border-radius: 10px; }
  body .topbar .search { height: 44px; }
  body .topbar .search input { font-size: 16px; }
  body .radar-demo-label { order: 2; align-self: flex-start; }
  body .sidebar .top-legal { order: 3; align-self: flex-start; width: auto; max-width: 100%; border-radius: 8px; background: var(--radar-surface); }
  body .sidebar .top-legal summary { font-size: 11px; min-height: 34px; }
  body .sidebar .top-legal[open] { width: 100%; }
  body .sidebar .quick-toolbar { order: 1; }
  body .topbar { order: 0; }
  body .sheet:has(#emptyView.show),
  body.theme-light .sheet:has(#emptyView.show) {
    color: var(--radar-ink);
    background: var(--radar-paper);
    border: 1px solid var(--radar-line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 20px #102b2426;
    padding: 4px 13px calc(78px + env(safe-area-inset-bottom));
    max-height: min(48dvh, 440px);
  }
  body .sheet:has(#emptyView.show) .sheet-drag-zone { background: var(--radar-paper); }
  body #emptyView { position: relative; }
  body #emptyView .empty-hero { padding-right: 46px; }
  body #emptyView .empty-hero h1 { font-size: 24px; }
  body #emptyView .empty-close,
  body.theme-light #emptyView .empty-close { color: var(--radar-ink); background: var(--radar-surface); border: 1px solid var(--radar-line); border-radius: 9px; width: 36px; height: 36px; top: 0; right: 9px; }
  body .sheet.sheet-expanded:has(#emptyView.show) {
    max-height: min(74dvh, 660px) !important;
  }
  body:has(.sheet.show #emptyView.show) .tabbar { z-index: 42; }
  body .tabbar {
    bottom: calc(8px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body #map .leaflet-control-attribution { margin-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body:has(.sheet.show #emptyView.show) #map .leaflet-bottom { bottom: min(48dvh, 440px); }
  body:has(.sheet.show #emptyView.show) #map .leaflet-control-attribution { margin-bottom: 6px; }
  body:has(.sheet.show.sheet-expanded #emptyView.show) #map .leaflet-bottom { bottom: min(74dvh, 660px); }
  body:has(.sheet.show.sheet-expanded #emptyView.show) .side-controls { visibility: hidden; }
}

@media (max-width: 819px) and (min-height: 640px) {
  body:has(.sheet.show #emptyView.show) .side-controls {
    top: auto;
    bottom: calc(min(48dvh, 440px) + 22px);
    transform: none;
  }
}

@media (max-width: 380px) {
  body .quick-toolbar .quick-tool.support .support-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .sidebar *,
  body .sidebar *::before,
  body .sidebar *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.radar-filter-count:not([hidden]) {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 5px;
  background: var(--radar-accent);
  color: var(--radar-paper);
  font-variant-numeric: tabular-nums;
}

body #map .station-cluster,
body.theme-light #map .station-cluster {
  box-shadow: 0 2px 8px #102b2459;
  font-weight: 750;
}

body #map .station-cluster::before {
  inset: 17%;
  background: #19342b;
  box-shadow: none;
}

body #map .station-cluster::after,
body #map .station-cluster-ring::after { display: none; }
body #map .station-cluster span { text-shadow: none; }
body #map .station-cluster-ring { filter: saturate(.73); }
body.tile-filter #map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.52) brightness(.8); }
.radar-demo body.theme-light #map .leaflet-tile-pane { filter: saturate(.65); }

body .nearest-item .nearest-fuel,
body.theme-light .nearest-item .nearest-fuel {
  color: var(--radar-ink);
  background: var(--radar-surface);
  border-color: var(--radar-line);
  box-shadow: none;
  opacity: 1;
}
body .nearest-item .nearest-fuel.unknown,
body.theme-light .nearest-item .nearest-fuel.unknown { color: var(--radar-muted); border-style: dashed; }
body .nearest-item :is(.nearest-fuel.ok, .nearest-status[data-status="ok"]),
body.theme-light .nearest-item :is(.nearest-fuel.ok, .nearest-status[data-status="ok"]) {
  background: var(--radar-tint);
  color: var(--radar-accent);
}
body .nearest-item :is(.nearest-fuel.out, .nearest-status[data-status="out"]) { color: #ffb6b0; background: #3a2629; }
body.theme-light .nearest-item :is(.nearest-fuel.out, .nearest-status[data-status="out"]) { color: #9b3028; background: #fae9e6; }

@media (max-width: 819px) {
  body .mobile-header .quick-toolbar .quick-tool:is(.max, .support),
  body.theme-light .mobile-header .quick-toolbar .quick-tool:is(.max, .support),
  body .sidebar .top-legal,
  body.theme-light .sidebar .top-legal {
    background: var(--radar-surface);
    border: 1px solid var(--radar-line);
  }
}

/* The signal sits on the map, outside Leaflet's animated marker transform. */
body #map .fuel-pin.sel .pin-aura { animation: none; opacity: .42; }
body #map .fuel-pin.sel .pin-aura::before,
body #map .fuel-pin.sel .pin-aura::after,
body #map .fuel-pin.hover::after { display: none; }

.radar-station-signal { pointer-events: none; }
.radar-station-signal span::before,
.radar-station-signal span::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--signal-color);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #10251c73, inset 0 0 0 1px #10251c4d;
  opacity: 0;
}

.radar-route-line {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px #152b2280);
}
body:not(.theme-light) .radar-route-line {
  stroke: #8bf0bd;
  filter: drop-shadow(0 0 1px #091e18) drop-shadow(0 1px 1px #091e18);
}

.radar-route-preview {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: var(--radar-surface);
  color: var(--radar-accent);
  font-size: 13px;
  font-weight: 750;
}

body #discoveryResults,
body #discoveryResults .discovery-station {
  background: var(--radar-surface) !important;
  border-color: var(--radar-line) !important;
  box-shadow: none !important;
}
body #discoveryResults .discovery-station > button {
  background: transparent;
  color: var(--radar-ink);
}
body #discoveryResults .discovery-station > a {
  background: var(--radar-tint);
  color: var(--radar-accent);
}
body #discoveryResults :is(.discovery-reason, .discovery-recommended-header) {
  color: var(--radar-accent);
}
body #discoveryResults :is(.discovery-results-head small, .discovery-station em, .trip-fuel-note) {
  color: var(--radar-muted);
}
body #discoveryResults .discovery-results-head button {
  min-width: 36px;
  min-height: 36px;
}
body #discoveryResults .trip-fuel-inline {
  background: var(--radar-tint) !important;
  border-color: var(--radar-line) !important;
  box-shadow: none !important;
}
body #discoveryResults .trip-fuel-row,
body #discoveryResults .trip-fuel-row b { color: var(--radar-ink); }
body #discoveryResults .trip-fuel-ok { color: var(--radar-accent); font-weight: 700; }
body #discoveryResults .trip-fuel-result.fuel-danger { background: transparent !important; }
body.theme-light #discoveryResults .fuel-warn { color: #9b3028; }
body :is(#discoveryResults .discovery-full-route, .radar-discovery-submit) {
  background: var(--radar-accent);
  color: var(--radar-paper);
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: none;
  font-weight: 750;
}

.radar-trip-overview:not([hidden]) {
  position: fixed;
  z-index: 35;
  left: calc(var(--rail-w) + 18px);
  bottom: 22px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: min(340px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid #527565;
  border-radius: 14px;
  background: #112b22;
  color: #effaf4;
  box-shadow: 0 8px 22px #0b221b50;
}
.radar-trip-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #234738;
  color: #9be7be;
  font-size: 20px;
}
.radar-trip-copy :is(strong, span) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radar-trip-copy strong { font-size: 14px; }
.radar-trip-copy span {
  margin-top: 2px;
  color: #bddbcb;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.radar-trip-overview button {
  min-height: 44px;
  padding: 0 9px;
  border: 1px solid #527565;
  border-radius: 9px;
  background: #234738;
  color: #effaf4;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 819px) {
  .radar-trip-overview:not([hidden]) {
    left: 10px;
    bottom: calc(83px + env(safe-area-inset-bottom));
  }
  body:has(#sheet.show) .radar-trip-overview { display: none; }
}

.radar-discovery-submit .radar-busy-label,
.radar-discovery-submit[aria-busy="true"] .radar-idle-label { display: none; }
.radar-discovery-submit[aria-busy="true"] {
  cursor: progress;
  opacity: 1;
}
.radar-discovery-submit[aria-busy="true"] .radar-busy-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.radar-busy-label::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
}

body :is(.trip-drawer, .filter-drawer) .filter-scrim {
  background: rgb(10 23 19 / .42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body :is(.trip-drawer .trip-card, .filter-drawer .filter-card) {
  background: var(--radar-paper);
  border-color: var(--radar-line);
  box-shadow: 0 18px 56px #06171055;
}
body .trip-card-head span { color: var(--radar-accent); text-shadow: none; }
body .trip-card .trip-destination,
body.theme-light .trip-card .trip-destination {
  background: var(--radar-tint);
  border-color: var(--radar-line);
  color: var(--radar-ink);
}
body .trip-card .trip-destination b { color: var(--radar-ink); }
body .trip-card .trip-destination small { color: var(--radar-muted); }

@media (prefers-reduced-motion: no-preference) {
  :root { --radar-ease-out: cubic-bezier(.22, .72, .28, 1); }

  body .sheet-view.show {
    animation: radar-enter 210ms var(--radar-ease-out) backwards;
  }
  :is(.trip-drawer, .filter-drawer):not([hidden]) .filter-scrim {
    animation: radar-fade 200ms ease-out backwards;
  }
  .trip-drawer:not([hidden]) .trip-card,
  .filter-drawer:not([hidden]) .filter-card {
    --radar-entry-distance: 20px;
    animation: radar-enter 260ms var(--radar-ease-out) backwards;
  }
  .smart-config:not([hidden]),
  .discovery-results:not([hidden]),
  .radar-trip-overview:not([hidden]) {
    --radar-entry-distance: 8px;
    animation: radar-enter 220ms var(--radar-ease-out) backwards;
  }
  .discovery-list > .discovery-station:nth-child(-n+4) {
    animation: radar-enter 200ms var(--radar-ease-out) backwards;
  }
  .discovery-list > .discovery-station:nth-child(2) { animation-delay: 25ms; }
  .discovery-list > .discovery-station:nth-child(3) { animation-delay: 50ms; }
  .discovery-list > .discovery-station:nth-child(4) { animation-delay: 75ms; }

  body :is(.nearest-item, .tabbar button, .radar-discovery-submit, .radar-route-preview, .quick-tool, .side-controls button) {
    transition: scale 140ms var(--radar-ease-out), background-color 140ms ease, border-color 140ms ease;
  }
  body :is(.nearest-item, .tabbar button, .radar-discovery-submit, .radar-route-preview, .quick-tool, .side-controls button):active:not(:disabled) {
    scale: .975;
    transition-duration: 80ms;
  }
  .radar-discovery-submit[aria-busy="true"] .radar-busy-label::before {
    animation: radar-spin .85s linear infinite;
  }
  .radar-station-signal span::before,
  .radar-station-signal span::after {
    animation: radar-wave 680ms var(--radar-ease-out) both;
  }
  .radar-station-signal span::after { animation-delay: 100ms; }

  @media (max-width: 819px) {
    body .sheet.sheet-expanded #emptyView.show {
      --radar-entry-distance: 12px;
      animation-name: radar-list-enter;
    }
  }
}

@keyframes radar-enter {
  from { opacity: 0; translate: 0 var(--radar-entry-distance, 10px); }
}
@keyframes radar-list-enter {
  from { opacity: .72; translate: 0 var(--radar-entry-distance); }
}
@keyframes radar-fade { from { opacity: 0; } }
@keyframes radar-spin { to { rotate: 1turn; } }
@keyframes radar-wave {
  0% { opacity: .92; scale: .55; }
  72% { opacity: .24; }
  100% { opacity: 0; scale: 2.25; }
}

/* Station details use the same palette as the map controls. */
#stationView {
  --station-ok: #9ae6bc;
  --station-out: #ffb6b0;
  --station-caution: #ffda95;
  --station-route: #9ae6bc;
  --station-route-ink: #142f23;
  color: var(--radar-ink);
}

body.theme-light #stationView {
  --station-ok: #176347;
  --station-out: #a13732;
  --station-caution: #79501c;
  --station-route: #17553f;
  --station-route-ink: #fff;
}

#stationView .gemini-head { gap: 8px; margin: 0 0 17px; }
#stationView .gemini-head > div:first-child { min-width: 0; }
body #stationView h1 {
  max-width: none;
  color: var(--radar-ink);
  font-size: 1.625rem;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

body #stationView .station-location {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
  color: var(--radar-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#stationView .gemini-actions { gap: 4px; }
body #stationView .icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--radar-surface);
  color: var(--radar-ink);
  box-shadow: none;
}

body #stationView .icon-btn.active {
  background: var(--radar-tint);
  color: var(--radar-accent);
}

.station-board,
.station-fuel-grid li {
  --station-tone: var(--radar-muted);
}

#stationView [data-status="ok"] { --station-tone: var(--station-ok); }
#stationView [data-status="out"] { --station-tone: var(--station-out); }
#stationView :is([data-status="queue"], [data-status="limit"], [data-status="low"]) {
  --station-tone: var(--station-caution);
}

.station-board {
  padding: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 15px;
  background: var(--radar-surface);
}

.station-board-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.station-board-head > i,
#stationView .quick-confirm-copy > i {
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 19px;
}

.station-board-head > i { color: var(--station-tone); }
body #stationView .station-board h2 {
  margin: 0;
  color: var(--radar-ink);
  font-size: 1.0625rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-transform: none;
}

body #stationView .station-board p {
  margin: 3px 0 0;
  color: var(--radar-muted);
  font-size: .8125rem;
  line-height: 1.35;
}

.station-fuel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  margin: 13px 0 0;
  list-style: none;
}

.station-fuel-grid li {
  padding: 8px 2px;
  border-radius: 8px;
  background: var(--radar-paper);
  text-align: center;
}

.station-fuel-grid li[data-status="ok"] {
  background: color-mix(in srgb, var(--station-ok) 10%, var(--radar-surface));
}

.station-fuel-grid b {
  display: block;
  font-size: .875rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.station-fuel-grid span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--station-tone);
  font-size: .6875rem;
  font-weight: 650;
  line-height: 1.2;
}

.station-fuel-grid span i {
  flex: 0 0 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.station-fuel-grid [data-status="unknown"] span i { display: none; }
.station-board-notes { display: grid; gap: 6px; margin-top: 11px; }
.station-note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--radar-muted);
  font-size: .8125rem;
  line-height: 1.35;
}

.station-note[hidden] { display: none; }
#stationPauseRow { color: var(--station-caution); }

.station-trust {
  --trust-tone: var(--radar-muted);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--radar-line);
}

.station-board-notes:not(:has(.station-note:not([hidden]))) { display: none; }
.station-trust[data-level="1"] { --trust-tone: var(--station-caution); }
.station-trust:is([data-level="2"], [data-level="3"]) { --trust-tone: var(--station-ok); }

.station-trust-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: .8125rem;
  line-height: 1.35;
}

.station-trust-head span { color: var(--radar-ink); font-weight: 650; }
.station-trust-head i { margin-right: 4px; color: var(--trust-tone); }
.station-trust-head b { color: var(--trust-tone); font-weight: 700; }
.station-trust small { color: var(--radar-muted); font-size: .75rem; line-height: 1.35; }

.station-trust-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 7px 0 4px;
}

.station-trust-bar > span {
  height: 5px;
  border-radius: 99px;
  background: var(--radar-line);
}

.station-trust[data-level="1"] .station-trust-bar > span:first-child::after,
.station-trust[data-level="2"] .station-trust-bar > span:nth-child(-n+2)::after,
.station-trust[data-level="3"] .station-trust-bar > span::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--trust-tone);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes station-trust-fill { from { transform: scaleX(0); } }

  #stationView.show .station-trust-bar > span::after {
    animation: station-trust-fill 230ms var(--radar-ease-out) backwards;
  }
  #stationView.show .station-trust-bar > span:nth-child(2)::after { animation-delay: 35ms; }
  #stationView.show .station-trust-bar > span:nth-child(3)::after { animation-delay: 70ms; }
}

.station-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  margin-top: 13px;
}

.station-controls :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--radar-ink);
  font-size: .875rem;
  font-weight: 670;
  text-align: center;
}

.station-controls .station-route-link {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 49px;
  padding: 8px 14px;
  background: var(--station-route);
  color: var(--station-route-ink);
  font-size: .9375rem;
  text-align: start;
  text-decoration: none;
}

.station-route-link i { font-size: 17px; }
.station-route-link i:last-child { opacity: .76; }

body #stationView .quick-confirm {
  gap: 10px;
  padding: 14px 0 0;
  margin: 7px 0 0;
  border: 0;
  border-top: 1px solid var(--radar-line);
  border-color: var(--radar-line) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

#stationView .quick-confirm::before,
#stationView .quick-confirm::after { content: none; }

#stationView .quick-confirm-copy { display: flex; align-items: center; gap: 10px; }
body #stationView .quick-confirm-copy > i { color: var(--radar-accent) !important; }
body #stationView .quick-confirm-copy b {
  margin-bottom: 2px;
  color: var(--radar-ink) !important;
  font-size: 1rem;
  font-weight: 740;
  line-height: 1.25;
}

body #stationView .quick-confirm-copy span { color: var(--radar-muted) !important; }
#stationView .quick-confirm-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body #stationView .quick-confirm-actions button {
  min-height: 46px;
  padding: 6px;
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: var(--radar-surface) !important;
  color: var(--radar-ink) !important;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.25;
}

body #stationView .quick-confirm-actions .quick-yes {
  background: var(--radar-tint) !important;
  color: var(--radar-accent) !important;
}

body #stationView .quick-confirm.is-change-only { margin-bottom: 0; }
#stationView .quick-confirm.is-change-only .quick-confirm-actions { grid-template-columns: 1fr; }
body #stationView .quick-confirm.is-change-only .quick-change {
  justify-self: stretch;
  min-height: 44px;
  padding: 0 5px;
  border-radius: 8px;
  background: transparent !important;
  color: var(--radar-accent) !important;
  font-size: .875rem;
  text-align: start;
}

#quickConfirmChange i { display: none; }
#quickConfirmChange[aria-expanded="true"] i { display: inline-block; margin-inline-end: 5px; }

/* Driver report. Availability and road conditions are separate decisions. */
.station-report {
  --report-ease: cubic-bezier(.16, 1, .3, 1);
  margin-top: 12px;
}

#quickConfirm.is-change-only + .station-report { margin-top: 4px; }
#quickConfirm.is-change-only + .station-report .report-back { display: none; }

#stationView .station-report h2 {
  margin: 0 0 13px;
  color: var(--radar-ink);
  font-size: 1.3125rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-transform: none;
}

.report-options,
.report-fuels,
.report-limit-tags {
  display: grid;
  gap: 7px;
}

.report-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-fuels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-limit-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.report-section-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 16px 0 7px;
  font-size: .875rem;
  font-weight: 730;
}

.report-section-label small,
.report-condition small {
  color: var(--radar-muted);
  font-size: .75rem;
  font-weight: 550;
}

.station-report :is(.report-choice, .report-fuels button, .report-tag, .report-back, .report-limit-input) {
  border: 1px solid var(--radar-line);
  border-radius: 10px;
  background: var(--radar-surface);
  color: var(--radar-ink);
}

.report-choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  column-gap: 6px;
  min-height: 52px;
  padding: 8px;
  text-align: start;
}

.report-choice > i {
  color: var(--station-tone);
  font-size: 18px;
}

.report-choice > b { font-size: .875rem; font-weight: 720; line-height: 1.2; }
.report-choice.report-condition { min-height: 65px; }
.report-condition small { grid-column: 2 / -1; line-height: 1.25; }

.station-report .report-choice.on {
  border-color: var(--station-tone);
  background: color-mix(in srgb, var(--station-tone) 10%, var(--radar-surface));
}

.report-tick {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid var(--radar-line);
  border-radius: 50%;
}

.report-tick::after,
.report-result-icon::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

.report-tick::after { clip-path: inset(100% 0 0); }
.report-choice.on .report-tick { border-color: var(--station-tone); color: var(--station-tone); }
.report-choice.on .report-tick::after { clip-path: inset(0); }

.report-limit-panel { display: grid; grid-template-rows: 0fr; }
.report-limit-panel.is-open { grid-template-rows: 1fr; }
.report-limit-clip { min-height: 0; overflow: hidden; }

.report-limit {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--station-caution) 6%, var(--radar-surface));
}

.report-limit label { color: var(--station-caution); font-size: .875rem; font-weight: 700; }
.station-report .report-limit-input { min-width: 0; min-height: 44px; padding: 0 10px; font-size: 1rem; }
.report-limit-input::placeholder { color: var(--radar-muted); }
.report-limit-input:focus-visible { outline: 2px solid var(--radar-accent); outline-offset: -2px; }

.report-fuels button,
.report-tag {
  min-height: 44px;
  padding: 4px 2px;
  font-size: .875rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.station-report .report-fuels button[aria-pressed="true"] {
  border-color: var(--radar-accent);
  background: var(--radar-tint);
  color: var(--radar-accent);
}

.station-report .report-tag.selected {
  border-color: var(--station-caution);
  color: var(--station-caution);
}

.report-actions { display: flex; gap: 7px; margin-top: 13px; }
.report-back { display: grid; flex: 0 0 46px; place-items: center; font-size: 17px; }
.report-submit {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px;
  border: 0;
  border-radius: 11px;
  background: var(--station-route);
  color: var(--station-route-ink);
  font-size: .9375rem;
  font-weight: 730;
}

.report-submit:disabled { cursor: progress; opacity: .8; }
.report-submit-pending,
.report-submit:disabled .report-submit-label { display: none; }
.report-submit:disabled .report-submit-pending { display: inline; }

.report-result:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 12px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: var(--radar-surface);
}

.report-result-icon {
  display: grid;
  flex: 0 0 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: var(--radar-tint);
  color: var(--radar-accent);
}

.report-result-icon::after { width: 7px; height: 12px; border-width: 0 2px 2px 0; }
.report-result.is-repeat .report-result-icon { color: var(--station-caution); }
.report-result.is-repeat .report-result-icon::after {
  width: 2px;
  height: 12px;
  border: 0;
  background: linear-gradient(currentColor 65%, transparent 65% 81%, currentColor 81%);
  transform: none;
}

.report-result b, .report-result span { display: block; }
.report-result b { font-size: .9375rem; }
.report-result span { margin-top: 3px; color: var(--radar-muted); font-size: .8125rem; line-height: 1.4; }

@media (hover: hover) {
  .station-report :is(.report-choice, .report-fuels button, .report-tag, .report-back):hover {
    border-color: var(--radar-accent);
  }

  .report-submit:hover:not(:disabled) { filter: brightness(1.1); }
}

@media (prefers-reduced-motion: no-preference) {
  #stationView.show .station-report:not([hidden]) > :is(h2, .report-status, #reportFuelBlock, .report-actions),
  #stationView.show .report-result:not([hidden]) { animation: report-reveal 245ms var(--report-ease, var(--radar-ease-out)) backwards; }
  #stationView.show .station-report:not([hidden]) > #reportFuelBlock { animation-delay: 30ms; }
  #stationView.show .station-report:not([hidden]) > .report-actions { animation-delay: 55ms; }
  .report-limit-panel { transition: grid-template-rows 230ms var(--report-ease); }
  .report-tick::after { transition: clip-path 175ms var(--report-ease); }
  .report-result:not(.is-repeat) .report-result-icon::after { animation: report-draw-tick 240ms var(--radar-ease-out) 55ms backwards; }
  .station-report button { transition: scale 130ms var(--report-ease), background-color 140ms ease, border-color 140ms ease; }
  .station-report button:active:not(:disabled) { scale: .97; }
}

@keyframes report-reveal {
  from { opacity: .45; transform: translateY(7px); }
}

@keyframes report-draw-tick {
  from { clip-path: inset(100% 0 0); }
}

body #stationView :is(button, a):focus-visible {
  outline: 2px solid var(--radar-accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  #stationView .station-controls button:hover,
  body #stationView .icon-btn:hover { background: var(--radar-tint); }
  #stationView .station-route-link:hover { filter: brightness(1.1); }
  body #stationView .quick-confirm-actions button:hover { border-color: var(--radar-accent); }
}

@media (min-width: 820px) {
  body .sidebar .sheet:has(#stationView.show) {
    padding-top: 13px;
    border-top: 1px solid var(--radar-line);
    background: transparent;
    box-shadow: none;
  }

  body .sheet:has(#stationView.show) .sheet-drag-zone { display: none; }
}

@media (max-width: 819px) {
  body .sheet:has(#stationView.show),
  body.theme-light .sheet:has(#stationView.show) {
    max-height: calc(100dvh - 65px - env(safe-area-inset-top));
    padding: 0 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 19px 19px 0 0;
    background: var(--radar-paper);
    border-color: var(--radar-line);
    box-shadow: 0 -5px 24px #122d2633;
    backdrop-filter: none;
  }

  body .sheet:has(#stationView.show) .sheet-drag-zone {
    z-index: 3;
    margin: 0 -14px 7px;
    padding: 8px 0 5px;
    background: var(--radar-paper);
  }

  body .sheet:has(#stationView.show) .grab {
    display: block;
    background: var(--radar-line);
  }

  body .sheet.sheet-compact,
  body.theme-light .sheet.sheet-compact {
    inset-inline: 8px;
    bottom: calc(77px + env(safe-area-inset-bottom));
    padding: 0 9px 3px;
    overflow: hidden;
    border: 1px solid var(--radar-line);
    border-radius: 13px;
    background: var(--radar-paper);
    box-shadow: var(--radar-shadow);
    backdrop-filter: none;
    transition: none;
  }

  body .sheet.sheet-compact .sheet-view.show { display: none; }
  body .sheet.sheet-compact .sheet-drag-zone { margin: 0; padding: 8px 0 2px; background: var(--radar-paper); }
  body .sheet.sheet-compact .grab { background: var(--radar-line); }

  body .sheet.sheet-compact .sheet-resume:not([hidden]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--radar-ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }

  .sheet-resume i { color: var(--radar-accent); }
  .sheet-resume span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has(.sheet.show.sheet-compact) #map .leaflet-bottom { bottom: calc(140px + env(safe-area-inset-bottom)); }
  body:has(.sheet.show.sheet-compact) #map .leaflet-control-attribution { margin-bottom: 5px; }
  body:has(.sheet.show.sheet-compact) .side-controls {
    top: auto;
    bottom: calc(161px + env(safe-area-inset-bottom));
    transform: none;
    visibility: visible;
  }
}

.sheet-resume[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .report-limit-panel,
  .report-tick::after { transition-property: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet.sheet-compact .sheet-resume:not([hidden]) {
    animation: radar-enter 165ms var(--radar-ease-out) backwards;
  }

  #stationView .station-controls :is(a, button),
  #stationView .quick-confirm-actions button {
    transition: scale 140ms var(--radar-ease-out), border-color 140ms ease;
  }

  #stationView .station-controls :is(a, button):active,
  #stationView .quick-confirm-actions button:active:not(:disabled) { scale: .98; }
}