/* Liquid Glass: one material family, with density matched to the reading task.
   Moving fleet pins deliberately do not use backdrop-filter. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --ink: #20282d;
  --muted: #536168;
  --blue: #3475ac;
  --blue-deep: #245e8c;
  --green: #26805a;
  --amber: #aa701c;
  --glass: rgb(248 250 249 / 64%);
  --glass-border: rgb(255 255 255 / 82%);
  --glass-matte: rgb(248 250 249 / 83%);
  --glass-soft: rgb(249 251 250 / 52%);
  --glass-line: rgb(46 63 68 / 13%);
  --glass-inset: rgb(255 255 255 / 38%);
  --glass-hover: rgb(255 255 255 / 46%);
  --glass-ease: cubic-bezier(.22, 1, .36, 1);
  --glass-motion: 320ms;
  --glass-blur: 24px;
  --shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(255 255 255 / 26%), 0 8px 28px rgb(22 37 40 / 13%), 0 1px 4px rgb(22 37 40 / 7%);
}

/* Keep a stable light reading surface on road, terrain and photographic maps. */
html[data-map-type='satellite'], html[data-map-type='hybrid'] {
  --glass: rgb(248 250 249 / 71%);
  --glass-matte: rgb(248 250 249 / 88%);
  --glass-soft: rgb(249 251 250 / 62%);
}
.map-shell { --island-top: max(16px, env(safe-area-inset-top)); }
html, body, .map-shell { min-height: 0; }
.glass-panel, .vehicle-island, .transit-search, .route-filter {
  color: var(--ink);
  border: 1px solid var(--glass-border);
  background: linear-gradient(150deg, rgb(255 255 255 / 36%), transparent 44%, rgb(255 255 255 / 12%)), var(--glass);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.12);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.12);
  background-clip: padding-box;
}
.vehicle-island, .transit-search, .coverage-info, .layer-menu, .stop-info {
  background: linear-gradient(145deg, rgb(255 255 255 / 26%), transparent 52%), var(--glass-matte);
}
.control-button, .zoom-control, .filter-reset {
  background: linear-gradient(145deg, rgb(255 255 255 / 45%), transparent 54%, rgb(255 255 255 / 14%)), var(--glass-soft);
}
.map-shell button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.control-button, .zoom-control button, .island-close, .search-add, .filter-reset,
.layer-option, .route-filter, .search-scopes button, .search-stop, .place-result {
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, scale 220ms var(--glass-ease);
}
.control-button:active, .zoom-control button:active, .island-close:active,
.search-add:active, .filter-reset:active, .route-filter:active { scale: .93; }
.map-shell button:focus-visible, .map-shell summary:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
}
.island-icon, .control-button svg, .zoom-control svg, .layer-menu-title svg, .layer-check {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Top-level status and compact actions. */
.fleet-status {
  min-height: 46px;
  padding: 10px 17px;
  gap: 11px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.count-divider { background: var(--glass-line); }
#viewCount { color: var(--muted); }
.status-dot { box-shadow: 0 0 0 4px rgb(38 128 90 / 12%); }
.coverage-info { top: 57px; border-radius: 24px; padding: 18px 20px; }
.coverage-info strong { font-size: .9375rem; font-weight: 600; }
.coverage-info p, .coverage-info small { color: var(--muted); }
.coverage-info small { font-size: .8125rem; line-height: 1.5; }
.search-launch { border-radius: 50%; }
.search-launch[aria-expanded='true'], .layer-picker > .control-button[aria-expanded='true'] {
  color: var(--blue-deep);
  background: linear-gradient(145deg, rgb(255 255 255 / 65%), rgb(255 255 255 / 25%)), var(--glass);
  box-shadow: var(--shadow), 0 0 0 3px rgb(52 117 172 / 12%);
}
.search-filter-count { background: #e8f0f5; color: var(--blue-deep); border-color: #f8fbfc; }
.route-filter { font-weight: 600; min-height: 44px; padding: 10px 12px; }
.route-filter .island-icon { color: var(--muted); }
.route-filter { font-size: .875rem; }
.filter-reset { width: 44px; height: 44px; color: var(--ink); }

/* Island: same quiet capsule in its collapsed and expanded states. */
.vehicle-island {
  top: var(--island-top);
  width: 390px;
  max-width: calc(100% - 24px);
  border-radius: 32px;
  animation: none;
  transition: width var(--glass-motion) var(--glass-ease), border-radius var(--glass-motion) var(--glass-ease);
}
.vehicle-island.is-expanded { width: 440px; border-radius: 30px; }
.island-header { grid-template-columns: minmax(0, 1fr) 44px; padding: 10px 10px 10px 12px; }
.island-toggle { min-height: 48px; grid-template-columns: auto minmax(0, 1fr) 20px; gap: 11px; }
.island-route, .search-route-badge {
  height: 44px;
  min-width: 44px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 86%);
  background: linear-gradient(145deg, #fff, rgb(236 241 241 / 85%));
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgb(29 48 54 / 7%);
  color: var(--ink);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.02em;
}
.island-copy { gap: 3px; }
.island-copy strong { font-size: .9375rem; line-height: 22px; font-weight: 650; letter-spacing: -.02em; }
.island-copy small { color: var(--muted); font-size: .875rem; line-height: 20px; }
.island-subline { gap: 7px; }
.island-metric {
  padding: 2px 7px;
  border-radius: 8px;
  background: rgb(52 117 172 / 8%);
  color: #2a5b7f;
  font-size: .75rem;
  line-height: 18px;
  font-weight: 600;
}
.island-chevron { color: var(--muted); width: 20px; height: 20px; }
.island-close { color: var(--muted); width: 44px; height: 44px; }
.island-close:before { inset: 3px; background: var(--glass-inset); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); }
.island-close:hover:before { background: rgb(255 255 255 / 70%); }
.island-expansion { transition: grid-template-rows 380ms var(--glass-ease); }
.island-inner { padding: 0 20px; transition: opacity 230ms ease; }
.vehicle-island.is-expanded .island-inner,
.has-route-filters .vehicle-island.is-expanded .island-inner {
  max-height: calc(100dvh - var(--island-top) - 96px - env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgb(58 75 82 / 30%) transparent;
}
.island-metrics { border-color: var(--glass-line); padding-top: 18px; gap: 20px; }
.island-metrics small, .trip-extras small { color: var(--muted); font-size: .875rem; line-height: 20px; }
.island-metrics strong { color: var(--ink); font-size: .9375rem; line-height: 23px; font-weight: 600; }
.trip-extras { border-color: var(--glass-line); margin-top: 18px; padding-top: 16px; gap: 20px; }
.trip-extras strong { color: var(--ink); font-size: .875rem; line-height: 22px; font-weight: 600; }
.stops-toggle { color: var(--ink); border-color: var(--glass-line); font-size: .9375rem; min-height: 52px; margin-top: 12px; }
.stops-toggle .island-icon { color: var(--muted); width: 20px; height: 20px; }
.position-note { color: #596970; font-size: .75rem; line-height: 1.55; padding: 16px 0 20px; }

/* One geometric axis for times, stop dots and the connecting line. */
.stop-timeline {
  --time-column: 46px;
  --track-column: 18px;
  --stop-gap: 11px;
  margin-top: 14px;
  padding: 0 6px 0 0;
  max-height: min(420px, 43svh);
  scrollbar-color: rgb(58 75 82 / 30%) transparent;
}
.stop-timeline li:before {
  left: calc(var(--time-column) + var(--stop-gap) + var(--track-column) / 2 - 1px);
  top: 17px;
  bottom: -17px;
  background: rgb(68 86 92 / 22%);
}
.stop-timeline button { color: var(--ink); padding: 6px 0 22px; min-height: 54px; }
.stop-timeline time { font-size: .875rem; line-height: 22px; }
.stop-track { height: 22px; }
.stop-dot { width: 12px; height: 12px; border: 2px solid #a2afb2; background: #f6f9f8; }
.stop-name { font-size: .875rem; line-height: 22px; }
.stop-timeline small { color: var(--muted); font-size: .8125rem; line-height: 20px; }
.stop-timeline .is-past { opacity: 1; }
.stop-timeline .is-past button, .stop-timeline .is-past small { color: #69777d; }
.stop-timeline .is-past .stop-dot { width: 9px; height: 9px; background: #c6cecf; border-color: #aebabc; }
.stop-timeline .is-next .stop-dot { background: #417eac; border-color: #e7f2fa; box-shadow: 0 0 0 4px rgb(52 117 172 / 15%); }
.stop-timeline .is-next small { color: var(--blue-deep); font-weight: 500; }
.stop-timeline .is-next .stop-name { font-weight: 600; }

/* Search: frosted reading layer, not another dark screen. */
.transit-search { border-radius: 30px; }
.search-heading { padding: 14px 12px 12px 20px; }
.search-heading strong { color: var(--ink); font-size: 1.0625rem; font-weight: 650; }
.search-heading small { color: var(--muted); font-size: .8125rem; line-height: 20px; }
.search-scopes { background: rgb(73 91 98 / 6%); padding: 4px; border-radius: 17px; }
.search-scopes button { color: var(--muted); border-radius: 13px; min-height: 42px; font-weight: 500; }
.search-scopes button[aria-pressed='true'] { color: var(--ink); background: rgb(255 255 255 / 80%); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgb(28 47 54 / 9%); }
.search-field, .place-search > div:first-of-type {
  color: var(--muted);
  background: rgb(255 255 255 / 47%);
  border: 1px solid rgb(83 105 110 / 14%);
  box-shadow: inset 0 1px 2px rgb(33 52 60 / 3%);
  border-radius: 17px;
}
.search-field:focus-within, .place-search > div:first-of-type:focus-within { border-color: rgb(52 117 172 / 54%); box-shadow: 0 0 0 3px rgb(52 117 172 / 9%); }
.search-field input, .place-search input { color: var(--ink); font-family: inherit; }
.search-field input::placeholder, .place-search input::placeholder { color: #65757e; }
.search-field button, .search-result-meta, .search-section-title { color: var(--muted); }
.search-section-title { font-size: .75rem; letter-spacing: .06em; font-weight: 600; margin: 12px 10px 8px; }
.search-result-meta { font-size: .8125rem; line-height: 20px; }
.search-loading { border-color: rgb(65 86 96 / 18%); border-top-color: var(--blue); }
.transit-results { padding: 0 10px 10px; scrollbar-color: rgb(58 75 82 / 30%) transparent; }
.search-route { border-color: rgb(255 255 255 / 46%); background: rgb(255 255 255 / 21%); border-radius: 20px; margin-bottom: 8px; }
.search-route.is-filtered { border-color: rgb(52 117 172 / 22%); background: rgb(255 255 255 / 42%); }
.search-route-top { padding: 5px 4px 5px 10px; }
.search-result-copy strong { color: var(--ink); font-size: .875rem; line-height: 21px; }
.search-result-copy small { color: var(--muted); font-size: .8125rem; line-height: 20px; }
.search-add { color: var(--muted); }
.search-add[aria-pressed='true'] { color: var(--blue-deep); background: rgb(52 117 172 / 9%); }
.search-trips { border-color: var(--glass-line); }
.search-trips summary { color: var(--muted); font-size: .8125rem; min-height: 44px; padding: 12px 4px; }
.search-trips button { color: var(--ink); border-color: var(--glass-line); }
.search-trips button small { color: var(--blue-deep); }
.search-trips button span, .search-trips summary { font-size: .875rem; }
.search-stop, .place-result { color: var(--ink); border-radius: 17px; }
.search-stop > .island-icon, .place-result > .island-icon { color: var(--muted); }
.search-stop:hover, .place-result:hover, .search-route-main:hover, .search-trips button:hover { background: rgb(255 255 255 / 32%); }
.search-empty strong { color: var(--ink); }
.search-empty p, .search-coverage, .place-search > small, .place-results > p { color: var(--muted); }
.search-empty button { color: var(--ink); background: rgb(255 255 255 / 55%); border: 1px solid var(--glass-border); border-radius: 14px; }
.search-coverage { border-color: var(--glass-line); font-size: .75rem; line-height: 1.5; }
.find-other-stops, .place-search button[type='submit'] { color: var(--blue-deep); }
.place-search label { color: var(--ink); }
.route-filter .island-icon { width: 16px; height: 16px; }

/* Map utilities and lower feedback share the same edges and optical weight. */
.map-controls { gap: 10px; }
.control-button { border: 1px solid var(--glass-border); border-radius: 50%; width: 48px; height: 48px; color: var(--ink); }
.zoom-control { border-radius: 26px; }
.zoom-control button { width: 46px; height: 46px; color: var(--ink); }
.zoom-control > span { background: var(--glass-line); margin: 0 12px; }
.zoom-control button:hover, .control-button:hover { color: var(--ink); background-color: var(--glass-hover); }
.layer-menu { width: 286px; max-width: calc(100vw - 92px); border-radius: 26px; animation: none; }
.layer-menu-title { min-height: 58px; padding: 8px 8px 6px 19px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.layer-menu-title button { width: 44px; height: 44px; color: var(--muted); border-radius: 50%; }
.layer-options { gap: 3px; padding: 0 8px 8px; }
.layer-option { min-height: 64px; grid-template-columns: 44px minmax(0, 1fr) 20px; border-radius: 18px; color: var(--ink); }
.layer-option.is-active { color: var(--ink); background: rgb(255 255 255 / 61%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), 0 2px 7px rgb(36 57 63 / 6%); }
.layer-option strong { font-size: .875rem; font-weight: 600; }
.layer-option small { font-size: .75rem; color: var(--muted); font-weight: 400; }
.layer-preview { border-radius: 14px; border-color: rgb(255 255 255 / 72%); }
.layer-check { width: 19px; height: 19px; color: var(--blue-deep); }
.stop-info { border-radius: 26px; padding: 18px 20px 20px; gap: 7px; animation: none; }
.stop-info > small { color: var(--muted); font-size: .75rem; letter-spacing: .08em; }
.stop-info > strong { color: var(--ink); padding-right: 30px; font-size: 1rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.stop-info > span { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.stop-info > button { width: 44px; height: 44px; top: 6px; right: 7px; display: grid; place-items: center; color: var(--muted); background: transparent; border-radius: 50%; padding: 0; isolation: isolate; }
.stop-info > button:after { inset: 3px; background: rgb(255 255 255 / 30%); z-index: -1; }
.notice { border-radius: 24px; padding: 14px 18px; font-size: .875rem; line-height: 1.5; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.region-note { color: var(--muted); font-size: .8125rem; line-height: 1.5; border-radius: 22px; }
.loading-layer { background: #e9eeec; }
.loader-card { border-radius: 26px; }
.loader-card strong { font-weight: 600; }
.loader-orbit { border-color: rgb(73 97 106 / 15%); border-top-color: var(--blue); }
.loader-orbit i { background: var(--blue); box-shadow: none; }

/* Pearl-like markers: readable on both imagery and streets, no per-pin blur. */
.transit-pin {
  border: 2px solid rgb(255 255 255 / 96%);
  background: linear-gradient(145deg, #fff, #e4ebea);
  color: #26373c;
  box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgb(58 78 85 / 12%), 0 4px 12px rgb(22 45 49 / 22%);
  font-weight: 650;
  letter-spacing: -.02em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cluster-pin { background: linear-gradient(145deg, #fbfdfc, #dfe8e5); box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgb(255 255 255 / 24%), 0 5px 15px rgb(22 45 49 / 20%); }
.vehicle-pin { border-radius: 15px; }
.vehicle-pin.is-selected { color: #194c75; background: linear-gradient(145deg, #fff, #dcebf5); border-color: #fff; box-shadow: 0 0 0 2px #5b8cae, 0 0 0 7px rgb(220 235 245 / 35%), 0 6px 18px rgb(24 53 71 / 22%); }
.transit-arrow:before { border-bottom-color: #38596c; }
.transit-pin.is-stale { color: #66757b; filter: saturate(.25); }
.transit-pin:hover { box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgb(22 45 49 / 24%); }
.vehicle-pin.is-selected:hover { box-shadow: 0 0 0 2px #5b8cae, 0 0 0 7px rgb(220 235 245 / 35%), 0 6px 18px rgb(24 53 71 / 22%); }

@keyframes search-open { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.975); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes search-close { to { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(.985); } }
.transit-search { animation: search-open 320ms var(--glass-ease); }
.transit-search.is-closing { animation: search-close 160ms ease-in forwards; }
.coverage-info { animation: none; }

@media (hover: none) {
  .transit-pin:hover { transform: scale(1); }
  .vehicle-pin.is-selected:hover { transform: scale(1.13); }
  .transit-pin:active { transform: scale(.94); }
}
@media (max-width: 1100px) {
  .map-shell { --island-top: max(74px, calc(env(safe-area-inset-top) + 58px)); }
  .has-route-filters .map-shell { --island-top: max(125px, calc(env(safe-area-inset-top) + 109px)); }
  .has-route-filters .vehicle-island { top: var(--island-top); }
}
@media (max-width: 600px) {
  :root { --glass-blur: 18px; }
  .fleet-status { min-height: 44px; padding: 9px 12px; gap: 8px; font-size: .8125rem; }
  .vehicle-island, .vehicle-island.is-expanded { width: calc(100% - 24px); max-width: 440px; }
  .vehicle-island.is-expanded { border-radius: 28px; }
  .island-header { padding: 9px 8px 9px 10px; }
  .island-toggle { gap: 9px; }
  .island-inner { padding: 0 17px; }
  .island-route { max-width: 70px; }
  .search-launch, .control-button { width: 46px; height: 46px; }
  .zoom-control button { width: 44px; height: 44px; }
  .map-controls { gap: 9px; right: max(12px, env(safe-area-inset-right)); }
  .control-button svg, .zoom-control svg { width: 22px; height: 22px; }
  .transit-search { border-radius: 28px; }
  .filter-dock { top: max(65px, calc(env(safe-area-inset-top) + 53px)); }
  .stop-timeline { --stop-gap: 9px; max-height: 39svh; }
  .position-note { font-size: .75rem; }
  .stop-info { right: 72px; }
}
@media (max-width: 360px) {
  .island-header { padding-left: 8px; grid-template-columns: minmax(0, 1fr) 44px; }
  .island-toggle { gap: 6px; grid-template-columns: auto minmax(0, 1fr) 16px; }
  .island-chevron { width: 16px; }
  .island-route { min-width: 40px; max-width: 58px; height: 42px; padding: 0 5px; }
  .island-copy strong { font-size: .875rem; }
  .island-metric { font-size: .75rem; padding: 2px 5px; }
  .island-inner { padding: 0 14px; }
  .layer-menu { right: 58px; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .map-shell { --island-top: max(12px, env(safe-area-inset-top)); }
  .vehicle-island, .vehicle-island.is-expanded { left: max(12px, env(safe-area-inset-left)); top: 68px; width: min(410px, calc(100vw - 100px)); transform: none; }
  .vehicle-island.is-expanded .island-inner { max-height: calc(100dvh - 158px); }
  .map-controls { gap: 6px; }
  .layer-menu { max-height: calc(100dvh - 46px); overflow-y: auto; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel, .vehicle-island, .transit-search, .route-filter { background: #f5f8f7; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-panel, .vehicle-island, .transit-search, .route-filter { background: #f7f9f8; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #88979d; }
  :root { --muted: #3f4e55; }
}
@media (prefers-reduced-motion: reduce) {
  .map-shell *, .map-shell *:before, .map-shell *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}