:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
  color-scheme: light dark;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8faff;
  --surface-3: #eef3fb;
  --text: #172033;
  --muted: #68758a;
  --muted-2: #8b96a8;
  --border: #dfe5ee;
  --border-strong: #cfd8e6;
  --accent: #315efb;
  --accent-hover: #244ce0;
  --accent-soft: #edf2ff;
  --success: #087a55;
  --success-soft: #e9f7f1;
  --warning: #9a5b0a;
  --warning-soft: #fff5df;
  --danger: #c3362b;
  --danger-soft: #fff0ee;
  --shadow: 0 10px 32px rgba(23, 32, 51, .06);
  --shadow-soft: 0 2px 8px rgba(23, 32, 51, .04);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--bg); }
body { margin: 0; min-height: 100vh; width: 100%; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .42; cursor: not-allowed; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.topbar-inner {
  width: min(1440px, calc(100% - 40px));
  height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #315efb 0%, #6a79ff 100%);
  box-shadow: 0 6px 18px rgba(49, 94, 251, .24);
  font-weight: 900;
  font-size: 1.05rem;
}
.brand-name { font-size: 1.05rem; font-weight: 820; letter-spacing: -.025em; }
.version-tag { color: var(--muted-2); font-size: .72rem; font-weight: 750; }
.topbar-status { display: flex; align-items: center; gap: 8px; }

.app-shell {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: 38px 0 64px;
  display: grid;
  gap: 18px;
  min-width: 0;
}
.app-shell > * { min-width: 0; }

.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 2px 10px;
}
.kicker, .section-label {
  margin: 0 0 6px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .15em;
}
h1, h2 { color: var(--text); }
h1 { margin: 0; font-size: clamp(2.25rem, 4.4vw, 4.35rem); line-height: .96; letter-spacing: -.055em; font-weight: 800; }
h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.025em; font-weight: 760; }
.intro-actions { display: flex; align-items: center; gap: 10px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.connection-panel, .setup-panel, .map-panel, .observations-panel { padding: 24px; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; min-width: 0; }
.panel-title-row > * { min-width: 0; }

.button, .primary, .danger {
  appearance: none;
  border: 0;
  border-radius: 11px;
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 750;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.button:not(:disabled):active, .primary:not(:disabled):active, .danger:not(:disabled):active { transform: translateY(1px); }
.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 14px rgba(49, 94, 251, .18); }
.primary:not(:disabled):hover { background: var(--accent-hover); }
.danger { background: var(--danger-soft); color: var(--danger); }
.danger:not(:disabled):hover { background: color-mix(in srgb, var(--danger-soft) 72%, var(--danger) 8%); }
.subtle { background: var(--surface-3); color: var(--text); border: 1px solid transparent; }
.subtle:not(:disabled):hover { border-color: var(--border-strong); background: var(--surface-2); }
.compact { min-height: 34px; padding: 0 12px; font-size: .79rem; }
.button-lg { min-height: 46px; min-width: 126px; padding: 0 21px; }

.connection-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.field { display: grid; gap: 8px; min-width: 0; }
.field > span, .field-title { color: var(--muted); font-size: .78rem; font-weight: 760; }
input, select {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background-color: var(--surface);
  color: var(--text);
  padding: 0 13px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder { color: var(--muted-2); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.connect-button { height: 46px; min-width: 108px; }
.inline-status { margin-top: 12px; min-height: 20px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.inline-status.ok { color: var(--success); }
.inline-status.error { color: var(--danger); }

.route-controls {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(150px, .7fr) minmax(210px, .95fr) minmax(180px, .8fr);
  gap: 14px;
  align-items: end;
}

.mode-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.mode-field > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 760;
}
.segmented {
  height: 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
}
.segmented label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.segmented span {
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 780;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.segmented input:checked + span {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(16, 28, 48, .12);
}
.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.segmented input:disabled + span {
  opacity: .55;
  cursor: not-allowed;
}

.switch-field {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  min-width: 0;
}
.switch-field input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch-ui { width: 34px; height: 20px; flex: 0 0 auto; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .18s ease; }
.switch-ui::after { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .18s ease; }
.switch-field input:checked + .switch-ui { background: var(--accent); }
.switch-field input:checked + .switch-ui::after { transform: translateX(14px); }
.switch-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 730; color: var(--text); }

.stops-head { margin: 22px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stops-head > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.field-meta { color: var(--muted-2); font-size: .73rem; }
.mini-actions, .export-actions, .map-actions { display: flex; align-items: center; gap: 8px; }
.stop-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  max-height: 390px;
  background: var(--surface-2);
  min-width: 0;
  scrollbar-width: thin;
}
.stop-row {
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .14s ease;
}
.stop-row:last-child { border-bottom: 0; }
.stop-row:hover { background: var(--surface); }
.stop-row input { width: 17px; height: 17px; accent-color: var(--accent); }
.seq, .distance { color: var(--muted-2); font-size: .73rem; font-variant-numeric: tabular-nums; }
.distance { text-align: right; }
.stop-main { min-width: 0; font-size: .83rem; font-weight: 710; }
.stop-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--muted); font-size: .72rem; font-weight: 500; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric { padding: 18px 20px; display: grid; gap: 7px; }
.metric span { color: var(--muted); font-size: .75rem; font-weight: 730; }
.metric strong { font-size: 1.65rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.map-title-row { align-items: center; }
.live-map {
  width: 100%;
  height: clamp(420px, 48vw, 650px);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-3);
  position: relative;
  z-index: 0;
}
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: .86rem; text-align: center; }
.map-legend { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: .73rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 9px; height: 9px; display: inline-block; border-radius: 999px; }
.legend-swatch.bus { width: 13px; height: 13px; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); }
.legend-swatch.selected-stop { background: var(--accent); }
.legend-swatch.route-stop { background: #fff; border: 1px solid #75829a; }

.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; max-width: 100%; background: var(--surface); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; height: 48px; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: .79rem; }
th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: .7rem; font-weight: 760; letter-spacing: .01em; }
th small, td small { display: block; margin-top: 2px; color: var(--muted-2); font-size: .64rem; font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.empty { color: var(--muted-2); text-align: center; padding: 28px 16px !important; font-weight: 500; }
.quality { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: .62rem; font-weight: 820; letter-spacing: .04em; }
.quality.high { color: var(--success); background: var(--success-soft); }
.quality.medium, .quality.done { color: var(--accent); background: var(--accent-soft); }
.quality.low { color: var(--warning); background: var(--warning-soft); }
.observation-table td:not(:first-child) small { font-size: .59rem; }

.status-pill, .wake-pill {
  min-height: 30px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 790;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.status-pill.running, .wake-pill.active { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 18%, var(--border)); }
.wake-pill.warning, .wake-pill.unavailable { background: var(--warning-soft); color: var(--warning); }

.bus-div-icon { background: transparent; border: 0; }
.bus-map-marker {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 16px rgba(16, 28, 48, .28);
  font-size: .69rem;
  font-weight: 900;
  line-height: 1;
}
.bus-map-marker span { transform: rotate(45deg); }
.bus-map-marker.high { background: var(--success); }
.bus-map-marker.medium { background: var(--accent); }
.bus-map-marker.acquiring { background: #a36214; }
.bus-map-marker.low { background: #7b4a97; }
.map-popup { line-height: 1.45; min-width: 160px; }
.map-popup small { color: #5f6c80; }
.bus-popup { min-width: 210px; }
.leaflet-container { font: inherit; color: #172033; }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-tooltip { font-family: inherit; font-weight: 750; }

.app-footer { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 42px; display: flex; justify-content: center; gap: 8px; color: var(--muted-2); font-size: .72rem; }
.app-footer span:first-child { color: var(--muted); font-weight: 760; }

@media (max-width: 980px) {
  .route-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mode-field, .switch-field { grid-column: auto; }
}

@media (max-width: 720px) {
  .topbar-inner, .app-shell, .app-footer { width: calc(100% - 24px); }
  .topbar-inner { height: 62px; }
  .version-tag { display: none; }
  .topbar-status { gap: 5px; }
  .status-pill, .wake-pill { min-height: 28px; padding: 0 9px; font-size: .65rem; }
  .app-shell { padding-top: 24px; gap: 14px; }
  .page-intro { align-items: flex-start; flex-direction: column; gap: 18px; }
  .intro-actions { width: 100%; }
  .intro-actions button { flex: 1; }
  h1 { font-size: clamp(2.3rem, 12vw, 3.4rem); }
  .connection-panel, .setup-panel, .map-panel, .observations-panel { padding: 18px; border-radius: 18px; }
  .connection-grid { grid-template-columns: 1fr; }
  .connect-button { width: 100%; }
  .panel-title-row { margin-bottom: 16px; }
  .route-controls { grid-template-columns: 1fr; }
  .switch-field { grid-column: auto; }
  .export-actions { width: 100%; }
  .setup-panel > .panel-title-row { align-items: flex-start; flex-direction: column; }
  .export-actions button { flex: 1; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 15px 16px; border-radius: 16px; }
  .metric strong { font-size: 1.4rem; }
  .map-title-row { align-items: flex-start; flex-direction: column; }
  .map-actions { width: 100%; }
  .map-actions button { flex: 1; }
  .live-map { height: 430px; border-radius: 14px; }
  .stop-row { grid-template-columns: 26px 34px minmax(0, 1fr); }
  .distance { display: none; }
  .stops-head { align-items: flex-end; }
  .stops-head > div:first-child { display: grid; gap: 2px; }
  .footer-dot, .app-footer span:last-child { display: none; }
}

@media (max-width: 430px) {
  .brand-mark { width: 31px; height: 31px; border-radius: 9px; }
  .brand-name { font-size: .98rem; }
  .wake-pill { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .connection-panel, .setup-panel, .map-panel, .observations-panel { padding: 15px; }
  .stop-list { max-height: 340px; }
  .live-map { height: 380px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #edf2fb;
    background: #0b111b;
    --bg: #0b111b;
    --surface: #111a28;
    --surface-2: #151f2e;
    --surface-3: #1b2636;
    --text: #edf2fb;
    --muted: #9ba8ba;
    --muted-2: #718095;
    --border: #273346;
    --border-strong: #344257;
    --accent: #7698ff;
    --accent-hover: #8aa7ff;
    --accent-soft: #1b2c54;
    --success: #41c991;
    --success-soft: #143729;
    --warning: #e7a447;
    --warning-soft: #3a2b18;
    --danger: #ff857c;
    --danger-soft: #3b2022;
    --shadow: none;
    --shadow-soft: none;
  }
  .brand-mark { background: linear-gradient(135deg, #557cff 0%, #8a79ff 100%); box-shadow: 0 6px 18px rgba(85, 124, 255, .2); }
  .leaflet-container { color: #172033; }
  .legend-swatch.route-stop { border-color: #8894a5; }
}

/* v13 modules */
.module-view { display: grid; gap: 18px; min-width: 0; }
.module-view[hidden] { display: none !important; }
.module-nav {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.module-tab {
  appearance: none;
  border: 0;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 780;
}
.module-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 5px rgba(23,32,51,.10); }

.connection-checker-setup, .your-bus-panel, .connection-arrivals-panel { padding: 24px; }
.connection-route-grid {
  display: grid;
  grid-template-columns: minmax(120px,.7fr) minmax(120px,.6fr) minmax(210px,1.15fr) minmax(210px,1.15fr) minmax(140px,.7fr) minmax(130px,.65fr);
  gap: 14px;
  align-items: end;
}
.input-suffix { position: relative; min-width: 0; }
.input-suffix input { padding-right: 52px; }
.input-suffix > span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .75rem; font-weight: 720; pointer-events: none; }
.inline-badge { min-height: 32px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--surface-3); color: var(--muted); font-size: .73rem; font-weight: 760; white-space: nowrap; }
.inline-badge.live { background: var(--success-soft); color: var(--success); }
.inline-badge.error { background: var(--danger-soft); color: var(--danger); }

.connection-summary-grid { display: grid; grid-template-columns: 1.35fr repeat(3,minmax(0,1fr)); gap: 14px; }
.connection-verdict-card, .connection-summary-card { padding: 20px; display: grid; gap: 7px; align-content: center; min-height: 128px; }
.summary-label { color: var(--muted); font-size: .72rem; font-weight: 780; }
.connection-summary-card strong { font-size: 1.7rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.connection-verdict { font-size: 1.95rem; line-height: 1; letter-spacing: -.045em; }
.connection-verdict.good { color: var(--success); }
.connection-verdict.tight { color: var(--warning); }
.connection-verdict.bad { color: var(--danger); }
.connection-verdict.idle { color: var(--text); }
.summary-detail { color: var(--muted); font-size: .74rem; line-height: 1.35; }

.bus-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.bus-choice-card { border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); padding: 15px; display: grid; gap: 11px; min-width: 0; }
.bus-choice-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent); background: var(--accent-soft); }
.bus-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bus-choice-top strong { font-size: .92rem; letter-spacing: -.02em; }
.bus-choice-meta { color: var(--muted); font-size: .74rem; line-height: 1.45; }
.bus-choice-actions { display: flex; gap: 8px; }
.bus-choice-actions .button { width: 100%; }
.trip-chip { border-radius: 999px; padding: 4px 8px; background: var(--surface-3); color: var(--muted); font-size: .66rem; font-weight: 800; }
.trip-chip.high { background: var(--success-soft); color: var(--success); }
.trip-chip.medium { background: var(--warning-soft); color: var(--warning); }
.compact-empty { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface-2); }

.arrival-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.arrival-card { border: 1px solid var(--border); border-radius: 15px; padding: 16px; background: var(--surface-2); display: grid; gap: 7px; }
.arrival-card.best { border-color: var(--accent); background: var(--accent-soft); }
.arrival-card.missed { opacity: .58; }
.arrival-rank { color: var(--muted); font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.arrival-time { font-size: 1.65rem; font-weight: 820; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.arrival-countdown { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.arrival-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.arrival-tag { border-radius: 999px; padding: 4px 7px; background: var(--surface-3); color: var(--muted); font-size: .64rem; font-weight: 780; }
.arrival-tag.live { background: var(--success-soft); color: var(--success); }

@media (max-width: 1180px) {
  .connection-route-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .connection-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bus-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .topbar-inner { width: min(100% - 24px, 1440px); height: auto; min-height: 64px; padding: 10px 0; flex-wrap: wrap; }
  .module-nav { order: 3; width: 100%; grid-template-columns: 1fr 1fr; }
  .module-tab { width: 100%; }
  .topbar-status { margin-left: auto; }
  .connection-route-grid { grid-template-columns: 1fr; }
  .connection-summary-grid { grid-template-columns: 1fr 1fr; }
  .bus-choice-grid, .arrival-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .connection-summary-grid { grid-template-columns: 1fr; }
  .connection-verdict-card, .connection-summary-card { min-height: 108px; }
}
.arrival-tag.warning { background: var(--warning-soft); color: var(--warning); }
.arrival-tag.danger { background: var(--danger-soft); color: var(--danger); }


/* v15 projected connection horizon */
.arrival-card.projected { border-style: dashed; }
.arrival-tag.projected { background: var(--accent-soft); color: var(--accent); }

/* Journey Tracking / PIDS v16 */
.module-nav { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); }
.module-tab { appearance:none; border:0; border-radius:9px; padding:8px 13px; background:transparent; color:var(--muted); font-weight:760; font-size:.82rem; }
.module-tab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-soft); }
.journey-config-panel { padding:26px; }
.journey-mode-row { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:20px; }
.journey-mode { width:min(340px, 100%); }
.journey-flow { display:grid; gap:12px; }
.journey-leg-card { border:1px solid var(--border); background:var(--surface-2); border-radius:17px; padding:17px; }
.journey-leg-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:.92rem; }
.leg-number { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:#fff; font-size:.76rem; font-weight:850; }
.journey-fields { display:grid; grid-template-columns:minmax(110px,.62fr) minmax(120px,.65fr) minmax(230px,1.35fr) minmax(230px,1.35fr); gap:12px; }
.connection-leg-fields { grid-template-columns:minmax(130px,.65fr) minmax(130px,.65fr) minmax(260px,1.5fr) minmax(150px,.7fr); }
.field em { font-style:normal; font-weight:600; color:var(--muted-2); }
.journey-config-footer { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.journey-feature-chips { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.journey-feature-chips span { padding:6px 9px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:.7rem; font-weight:760; }
.your-bus-panel { padding:24px; }

.pids-shell { --pids-bg:#071017; --pids-panel:#0d1821; --pids-panel-2:#111f2a; --pids-line:#32434d; --pids-text:#f7fbff; --pids-muted:#93a5b0; --pids-green:#65f0a5; --pids-yellow:#ffd95a; --pids-cyan:#6ee7f2; background:var(--pids-bg); color:var(--pids-text); border-radius:24px; overflow:hidden; min-height:680px; border:1px solid #223440; box-shadow:0 18px 50px rgba(0,0,0,.24); }
.pids-toolbar { min-height:82px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:#0a151d; border-bottom:1px solid #223440; }
.pids-brand-block { display:flex; align-items:center; gap:14px; min-width:0; }
.pids-service-badge, .mini-service-badge { display:grid; place-items:center; background:#f4f8fb; color:#071017; font-weight:900; line-height:1; letter-spacing:-.04em; }
.pids-service-badge { min-width:68px; height:54px; border-radius:10px; padding:0 13px; font-size:1.75rem; }
.mini-service-badge { min-width:44px; height:34px; border-radius:7px; padding:0 9px; font-size:1rem; }
.pids-brand-block > div { min-width:0; display:grid; gap:3px; }
.pids-eyebrow { color:var(--pids-muted); text-transform:uppercase; font-size:.65rem; font-weight:850; letter-spacing:.15em; }
.pids-brand-block strong { color:var(--pids-text); font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pids-toolbar-actions { display:flex; align-items:center; gap:8px; }
.pids-status-pill { border-radius:999px; padding:8px 11px; font-size:.72rem; font-weight:800; background:#182731; color:var(--pids-muted); white-space:nowrap; }
.pids-status-pill.good { background:#113b2b; color:#7ff1ae; }
.pids-status-pill.warning { background:#3d3215; color:#ffe27c; }
.pids-status-pill.bad { background:#43201f; color:#ff9994; }
.pids-tool-button { appearance:none; border:1px solid #2b3f4c; background:#13222d; color:#eaf3f8; border-radius:10px; min-height:38px; padding:0 12px; font-weight:780; }
.pids-tool-button.primary { background:#f2f6f8; color:#081017; border-color:#f2f6f8; }
.pids-layout { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(420px,1.35fr); min-height:598px; }
.pids-summary-column { padding:20px; border-right:1px solid #223440; display:grid; align-content:start; gap:14px; min-width:0; }
.pids-next-card { padding:22px; border-radius:18px; background:linear-gradient(160deg,#132633,#0f1d26); border:1px solid #29424f; }
.pids-label { display:block; color:var(--pids-yellow); font-size:.7rem; font-weight:900; letter-spacing:.16em; }
.pids-next-stop { display:block; margin-top:9px; color:#fff; font-size:clamp(1.75rem,3.2vw,3rem); line-height:.98; letter-spacing:-.045em; }
.pids-next-time-row { display:flex; align-items:baseline; gap:14px; margin-top:18px; }
.pids-countdown { color:var(--pids-green); font-size:clamp(1.6rem,3vw,2.5rem); font-weight:900; }
.pids-clock { color:#d8e3e9; font-size:1rem; font-variant-numeric:tabular-nums; }
.pids-motion { display:block; color:var(--pids-muted); font-size:.76rem; margin-top:8px; }
.pids-info-card { padding:16px; border-radius:15px; background:var(--pids-panel); border:1px solid #253a46; }
.pids-info-card.destination { border-color:#275661; }
.pids-info-card.connection { border-color:#304653; }
.pids-info-head, .pids-connection-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--pids-muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.pids-info-head { justify-content:flex-start; }
.pids-icon { color:var(--pids-cyan); }
.pids-info-card > strong { display:block; margin-top:9px; color:#fff; font-size:1.05rem; }
.pids-info-time { margin-top:10px; display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.pids-info-time span:first-child { color:var(--pids-cyan); font-size:1.35rem; font-weight:850; }
.pids-info-time span:last-child { color:#dbe5ea; font-variant-numeric:tabular-nums; }
.pids-connection-head { display:flex; align-items:center; gap:10px; margin-top:10px; }
.pids-connection-head .connection-verdict { font-size:1rem; }
.pids-connection-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.pids-connection-metrics > div { padding:10px; border-radius:10px; background:#101d26; display:grid; gap:2px; min-width:0; }
.pids-connection-metrics span { color:var(--pids-muted); font-size:.63rem; }
.pids-connection-metrics strong { color:#fff; font-size:1rem; }
.pids-connection-metrics small { color:var(--pids-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pids-connection-list-head { margin:14px 0 8px; }
.compact-arrivals { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pids-info-card .arrival-card { padding:10px; min-height:0; background:#101d26; border-color:#243946; }
.pids-info-card .arrival-time { font-size:1.15rem; }
.pids-info-card .arrival-rank, .pids-info-card .arrival-countdown { font-size:.63rem; }
.second-bus-chooser { margin-top:12px; }
.compact-grid { display:grid; gap:7px; }
.second-bus-choice { width:100%; border:1px solid #2c4655; background:#101e28; color:#fff; border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; text-align:left; }
.second-bus-choice span { display:grid; gap:2px; }
.second-bus-choice span:last-child { text-align:right; }
.second-bus-choice small { color:var(--pids-muted); font-size:.65rem; }
.pids-route-board { min-width:0; background:#08131a; display:grid; grid-template-rows:auto 1fr; }
.pids-route-header { display:grid; grid-template-columns:1fr auto; gap:20px; padding:15px 22px; border-bottom:1px solid #1e313c; color:var(--pids-muted); text-transform:uppercase; font-size:.65rem; font-weight:850; letter-spacing:.12em; }
.pids-stop-list { overflow:auto; overscroll-behavior:contain; padding:9px 14px 28px; scroll-behavior:smooth; }
.pids-stop-row { display:grid; grid-template-columns:32px minmax(0,1fr) minmax(120px,auto); min-height:74px; align-items:center; border-radius:12px; padding:0 10px 0 0; transition:background .2s ease, opacity .2s ease; }
.pids-stop-row.next { background:#142733; outline:1px solid #315060; }
.pids-stop-row.destination:not(.passed) { background:color-mix(in srgb,#17404a 55%, transparent); }
.pids-stop-row.passed { opacity:.37; }
.pids-line-cell { height:100%; position:relative; display:grid; place-items:center; }
.pids-route-dot { z-index:2; width:11px; height:11px; border-radius:50%; background:#d7e1e6; border:2px solid #d7e1e6; }
.pids-route-line { position:absolute; width:3px; top:0; bottom:0; background:var(--pids-line); }
.pids-stop-row:first-child .pids-route-line { top:50%; }
.pids-stop-row:last-child .pids-route-line { bottom:50%; }
.pids-stop-row.next .pids-route-dot { width:17px; height:17px; background:var(--pids-yellow); border:4px solid #5d5126; box-shadow:0 0 0 3px rgba(255,217,90,.13); }
.pids-stop-row.destination .pids-route-dot { background:var(--pids-cyan); border-color:var(--pids-cyan); }
.pids-stop-name { min-width:0; display:grid; gap:4px; padding:11px 6px; }
.pids-stop-name strong { color:#edf5f8; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pids-stop-name span { color:var(--pids-muted); font-size:.68rem; font-weight:650; }
.pids-stop-eta { display:grid; justify-items:end; gap:3px; padding-left:10px; font-variant-numeric:tabular-nums; }
.pids-stop-eta strong { color:#f7fbff; font-size:1rem; }
.pids-stop-row.next .pids-stop-eta strong { color:var(--pids-yellow); font-size:1.15rem; }
.pids-stop-eta span { color:var(--pids-muted); font-size:.67rem; }
.pids-empty { color:var(--pids-muted); padding:30px; text-align:center; }
.pids-focus-mode { position:fixed !important; inset:0 !important; z-index:100000 !important; width:100vw !important; height:100dvh !important; border-radius:0 !important; min-height:0 !important; }
.pids-focus-mode .pids-layout { height:calc(100dvh - 82px); min-height:0; }
.pids-body-focus { overflow:hidden !important; }

@media (max-width: 900px) {
  .journey-fields, .connection-leg-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pids-layout { grid-template-columns:1fr; min-height:0; }
  .pids-summary-column { border-right:0; border-bottom:1px solid #223440; padding:14px; grid-template-columns:1fr 1fr; }
  .pids-next-card { grid-column:1/-1; padding:17px; }
  .pids-route-board { min-height:520px; }
  .pids-stop-list { max-height:56vh; }
}

@media (max-width: 620px) {
  .topbar-inner { width:min(100% - 20px, 1440px); gap:8px; }
  .brand-name { display:none; }
  .module-nav { flex:1; }
  .module-tab { flex:1; padding:8px 7px; font-size:.74rem; }
  .version-tag { display:none; }
  .topbar-status .wake-pill { display:none; }
  .app-shell { width:min(100% - 20px, 1440px); padding-top:20px; }
  .journey-mode-row { align-items:flex-start; flex-direction:column; }
  .journey-mode { width:100%; }
  .journey-config-panel { padding:16px; }
  .journey-leg-card { padding:13px; }
  .journey-fields, .connection-leg-fields { grid-template-columns:1fr; gap:10px; }
  .journey-config-footer { align-items:flex-start; flex-direction:column; }
  .journey-feature-chips { justify-content:flex-start; }
  .journey-intro { align-items:center; }
  .journey-intro h1 { font-size:2rem; }
  .pids-shell { border-radius:16px; min-height:calc(100dvh - 170px); }
  .pids-toolbar { min-height:68px; padding:10px; gap:8px; }
  .pids-service-badge { min-width:54px; height:46px; font-size:1.4rem; }
  .pids-brand-block strong { font-size:.84rem; }
  .pids-toolbar-actions { gap:5px; }
  .pids-status-pill { padding:7px 8px; font-size:.64rem; }
  .pids-tool-button { min-height:34px; padding:0 9px; font-size:.7rem; }
  .pids-summary-column { grid-template-columns:1fr; padding:10px; gap:9px; }
  .pids-next-card { grid-column:auto; }
  .pids-next-stop { font-size:2rem; }
  .pids-connection-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .compact-arrivals { grid-template-columns:repeat(3,minmax(105px,1fr)); overflow-x:auto; }
  .pids-route-board { min-height:430px; }
  .pids-stop-list { max-height:none; height:48vh; padding-inline:7px; }
  .pids-stop-row { grid-template-columns:28px minmax(0,1fr) 102px; min-height:68px; padding-right:6px; }
  .pids-stop-name strong { font-size:.92rem; }
  .pids-stop-eta strong { font-size:.9rem; }
  .pids-stop-eta span { font-size:.61rem; }
  .pids-focus-mode .pids-toolbar { min-height:62px; }
  .pids-focus-mode .pids-layout { height:calc(100dvh - 62px); }
  .pids-focus-mode .pids-summary-column { max-height:42vh; overflow:auto; }
  .pids-focus-mode .pids-route-board { min-height:0; }
  .pids-focus-mode .pids-stop-list { height:auto; max-height:none; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .pids-shell, .pids-focus-mode { min-height:100dvh; }
  .pids-toolbar { min-height:58px; padding:7px 12px; }
  .pids-service-badge { height:42px; min-width:55px; font-size:1.35rem; }
  .pids-layout { grid-template-columns:minmax(270px,.72fr) minmax(440px,1.5fr); height:calc(100dvh - 58px); min-height:0; }
  .pids-summary-column { display:flex; flex-direction:column; border-right:1px solid #223440; border-bottom:0; padding:10px; overflow:auto; }
  .pids-next-card { padding:13px; }
  .pids-next-stop { font-size:1.7rem; }
  .pids-next-time-row { margin-top:9px; }
  .pids-countdown { font-size:1.45rem; }
  .pids-info-card { padding:11px; }
  .pids-route-board { min-height:0; }
  .pids-stop-list { height:auto; max-height:none; }
  .pids-stop-row { min-height:58px; }
}
.journey-intro-copy { color:var(--muted); font-size:.8rem; font-weight:700; }
.journey-config-footer > div:first-child { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.journey-start-actions { display:flex; gap:9px; margin-left:auto; }
@media (max-width:620px) {
  .journey-config-footer > div:first-child { align-items:flex-start; }
  .journey-start-actions { width:100%; margin-left:0; position:sticky; bottom:10px; z-index:5; padding-top:6px; }
  .journey-start-actions .primary, .journey-start-actions .danger { flex:1; }
}

/* ==========================================================================\n   routescraper v18 — neutral black interface\n   ========================================================================== */
:root {
  color-scheme: dark;
  --bg:#000;
  --surface:#0a0a0a;
  --surface-2:#0f0f0f;
  --surface-3:#151515;
  --text:#f4f4f4;
  --muted:#9a9a9a;
  --muted-2:#6f6f6f;
  --border:#242424;
  --border-strong:#343434;
  --accent:#f5f5f5;
  --accent-hover:#fff;
  --accent-soft:#171717;
  --success:#67d391;
  --success-soft:#10251a;
  --warning:#e0bd63;
  --warning-soft:#2a2110;
  --danger:#ff7770;
  --danger-soft:#2a1110;
  --shadow:none;
  --shadow-soft:none;
  --radius-xl:16px;
  --radius-lg:14px;
  --radius-md:10px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:#000;
}
html, body { background:#000 !important; color:var(--text); }
body { min-height:100dvh; }
body::selection { background:#eee; color:#000; }

.topbar {
  height:58px;
  background:rgba(0,0,0,.94);
  border-bottom:1px solid #1f1f1f;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.topbar-inner { width:min(1360px,calc(100% - 28px)); height:58px; gap:14px; }
.brand { gap:9px; }
.brand-mark { width:30px; height:30px; border-radius:8px; background:#f3f3f3; color:#050505; box-shadow:none; font-size:.95rem; }
.brand-name { font-size:.95rem; font-weight:720; letter-spacing:-.02em; }
.version-tag { color:#666; font-size:.67rem; }
.module-nav { padding:2px; gap:2px; border:1px solid #252525; border-radius:10px; background:#0b0b0b; }
.module-tab { min-height:30px; border-radius:7px; padding:0 13px; color:#8d8d8d; font-size:.74rem; font-weight:650; }
.module-tab.active { background:#202020; color:#fff; box-shadow:none; }
.topbar-status { gap:6px; }
.status-pill,.wake-pill { min-height:28px; padding:0 9px; border-radius:7px; border:1px solid #242424; background:#0b0b0b; color:#8c8c8c; font-size:.67rem; font-weight:650; }
.status-pill.running,.wake-pill.active { color:#9be1b5; border-color:#244533; background:#0b1710; }

.app-shell { width:min(1360px,calc(100% - 28px)); margin:0 auto; padding:20px 0 48px; gap:14px; }
.panel { background:#090909; border:1px solid #242424; border-radius:14px; box-shadow:none; }
.connection-panel,.setup-panel,.map-panel,.observations-panel,.your-bus-panel { padding:18px; }
.connection-panel { display:grid; grid-template-columns:minmax(180px,.48fr) minmax(360px,1fr); gap:18px; align-items:end; }
.connection-compact-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.connection-compact-head > div { display:flex; align-items:baseline; gap:10px; min-width:0; }
.utility-title { font-size:.83rem; font-weight:720; color:#f0f0f0; }
.connection-panel .inline-status { margin:0; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.7rem; }
.connection-grid { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.connection-panel .field > span { display:none; }
.connection-panel input { height:40px; }
.connect-button { height:40px; min-width:92px; }
body.datamall-ready .connection-panel { grid-template-columns:1fr auto; align-items:center; padding:10px 14px; }
body.datamall-ready .connection-grid { display:none; }
body.datamall-ready .connection-compact-head { grid-column:1/-1; }
body.datamall-ready .connection-compact-head .utility-title::after { content:" connected"; color:#70cf93; font-weight:600; }

.page-intro { padding:6px 2px 2px; align-items:center; }
.compact-intro { min-height:54px; }
.eyebrow { display:block; margin:0 0 4px; color:#7e7e7e; font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.kicker,.section-label { color:#858585; letter-spacing:.08em; font-size:.64rem; text-transform:uppercase; }
h1 { font-size:clamp(1.8rem,3vw,2.45rem); line-height:1; letter-spacing:-.045em; font-weight:720; }
h2 { font-size:1rem; font-weight:690; letter-spacing:-.015em; }
.compact-panel-head { margin-bottom:14px; align-items:center; }

.button,.primary,.danger { min-height:40px; border-radius:9px; padding:0 14px; font-weight:680; box-shadow:none; }
.primary { background:#f1f1f1; color:#050505; }
.primary:not(:disabled):hover { background:#fff; }
.danger { background:#181010; border:1px solid #3c1e1c; color:#ff8a83; }
.quiet,.subtle { background:#111; border:1px solid #2b2b2b; color:#d0d0d0; }
.quiet:not(:disabled):hover,.subtle:not(:disabled):hover { background:#181818; border-color:#3a3a3a; }
.compact { min-height:32px; padding:0 10px; font-size:.72rem; }
.button-lg { min-height:42px; min-width:104px; padding:0 18px; }

.field { gap:6px; }
.field > span,.field-title,.mode-field > span { color:#919191; font-size:.69rem; font-weight:650; }
.field em { color:#626262; font-style:normal; font-weight:550; }
input,select { height:42px; border:1px solid #303030; border-radius:9px; background-color:#050505; color:#f0f0f0; padding:0 11px; }
input:focus,select:focus { border-color:#6b6b6b; box-shadow:0 0 0 2px #1d1d1d; }
input::placeholder { color:#555; }
select { background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); }
.segmented { height:42px; padding:2px; gap:2px; border:1px solid #303030; border-radius:9px; background:#050505; }
.segmented span { border-radius:6px; font-size:.72rem; font-weight:650; color:#777; }
.segmented input:checked + span { background:#202020; color:#fff; box-shadow:none; }
.switch-field { height:42px; border-color:#303030; border-radius:9px; background:#050505; }
.switch-ui { background:#333; }
.switch-field input:checked + .switch-ui { background:#ddd; }
.switch-field input:checked + .switch-ui::after { background:#111; }
.switch-copy { font-size:.73rem; font-weight:620; }

.route-controls { grid-template-columns:minmax(120px,.6fr) minmax(120px,.6fr) minmax(180px,.8fr) minmax(150px,.7fr); gap:10px; }
.stops-head { margin:16px 0 8px; }
.stop-list { border-color:#242424; background:#050505; }
.stop-row { border-color:#202020; }
.stop-row:hover { background:#0f0f0f; }
.stats-grid { gap:10px; }
.metric { padding:14px 16px; }
.metric span { color:#7c7c7c; }
.metric strong { font-size:1.35rem; }
.live-map { border-radius:10px; border-color:#222; }
.table-wrap { border-color:#242424; border-radius:10px; }
table { color:#ddd; }
th { background:#0c0c0c; color:#858585; border-color:#242424; }
td { border-color:#1f1f1f; }

/* Journey configuration: one compact path, no card-within-card treatment. */
.journey-intro { min-height:50px; }
.journey-config-panel { padding:18px; }
.journey-config-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.journey-mode { width:270px; }
.journey-flow { display:grid; grid-template-columns:1fr; gap:0; border:1px solid #242424; border-radius:11px; overflow:hidden; background:#050505; }
.journey-leg-card { border:0; border-radius:0; padding:14px; background:transparent; }
.journey-leg-card + .journey-leg-card { border-top:1px solid #242424; }
.journey-leg-head { margin-bottom:10px; gap:8px; font-size:.78rem; color:#d8d8d8; }
.leg-number { width:22px; height:22px; border-radius:6px; background:#262626; color:#fff; font-size:.66rem; font-weight:700; }
.journey-fields { grid-template-columns:minmax(90px,.45fr) minmax(100px,.5fr) minmax(220px,1.3fr) minmax(220px,1.3fr); gap:9px; }
.connection-leg-fields { grid-template-columns:minmax(100px,.48fr) minmax(100px,.48fr) minmax(220px,1.35fr) minmax(120px,.55fr); }
.journey-config-footer { margin-top:12px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.journey-config-note { color:#6f6f6f; font-size:.69rem; line-height:1.35; }
.journey-start-actions { display:flex; gap:8px; margin-left:auto; }
.inline-badge { min-height:28px; border-radius:7px; background:#111; color:#8b8b8b; border:1px solid #262626; font-size:.67rem; }
.inline-badge.live { background:#0c1811; color:#78d49a; border-color:#1f3c2b; }
.inline-badge.error { background:#1d1010; color:#ef8580; border-color:#3d1e1d; }

.bus-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.bus-choice-card { border:1px solid #262626; border-radius:10px; background:#070707; padding:12px; gap:8px; }
.bus-choice-card.selected { border-color:#707070; box-shadow:none; background:#111; }
.bus-choice-top strong { font-size:.84rem; }
.bus-choice-meta { color:#7d7d7d; font-size:.69rem; }
.trip-chip { border-radius:5px; padding:3px 6px; background:#141414; color:#8b8b8b; font-size:.59rem; }
.trip-chip.high { background:#102118; color:#73d498; }
.trip-chip.medium { background:#241d0f; color:#d4b866; }
.compact-empty { background:#050505; border:1px solid #242424; border-radius:9px; }

/* PIDS — deliberately flat, black, transit-display typography. */
.pids-shell {
  --pids-bg:#000;
  --pids-panel:#080808;
  --pids-panel-2:#0d0d0d;
  --pids-line:#3a3a3a;
  --pids-text:#f8f8f8;
  --pids-muted:#8a8a8a;
  --pids-green:#6ee49b;
  --pids-yellow:#f5d45e;
  --pids-cyan:#9edee2;
  --pids-toolbar-h:64px;
  background:#000;
  color:#f7f7f7;
  border-radius:14px;
  overflow:hidden;
  min-height:620px;
  border:1px solid #262626;
  box-shadow:none;
}
.pids-toolbar { min-height:var(--pids-toolbar-h); height:var(--pids-toolbar-h); padding:8px 12px; background:#050505; border-bottom:1px solid #242424; gap:12px; }
.pids-brand-block { gap:11px; flex:1 1 auto; min-width:0; }
.pids-service-badge,.mini-service-badge { background:#f2f2f2; color:#050505; border-radius:7px; box-shadow:none; }
.pids-service-badge { min-width:62px; height:46px; padding:0 11px; font-size:1.55rem; }
.mini-service-badge { min-width:40px; height:31px; padding:0 8px; font-size:.94rem; }
.pids-route-title { min-width:0; display:grid; gap:3px; }
.pids-route-title strong { color:#f2f2f2; font-size:.91rem; font-weight:670; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pids-status-line { color:#757575; font-size:.65rem; font-weight:600; }
.pids-status-line.good { color:#75d498; }
.pids-status-line.warning { color:#d5b65f; }
.pids-status-line.bad { color:#ef7b75; }
.pids-toolbar-actions { gap:5px; flex:0 0 auto; }
.pids-tool-button { min-height:34px; height:34px; padding:0 10px; border:1px solid #303030; background:#0d0d0d; color:#d8d8d8; border-radius:7px; font-size:.69rem; font-weight:650; }
.pids-tool-button:hover { background:#171717; }
.pids-tool-button.primary { background:#ededed; color:#050505; border-color:#ededed; }
.pids-tool-button.connection-edit { border-color:#3a3a3a; }

.pids-layout { display:grid; grid-template-columns:minmax(290px,.7fr) minmax(430px,1.4fr); min-height:556px; }
.pids-summary-column { padding:12px; border-right:1px solid #242424; display:grid; align-content:start; gap:8px; background:#030303; }
.pids-next-card { padding:16px; border-radius:10px; background:#0a0a0a; border:1px solid #2a2a2a; }
.pids-next-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pids-label { color:#d8bd61; font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.pids-motion { margin:0; color:#6e6e6e; font-size:.62rem; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pids-next-stop { margin-top:7px; color:#fff; font-size:clamp(1.55rem,2.6vw,2.45rem); line-height:1.02; letter-spacing:-.038em; font-weight:720; }
.pids-next-time-row { margin-top:12px; gap:11px; }
.pids-countdown { color:#6ee49b; font-size:clamp(1.35rem,2.4vw,2rem); font-weight:760; }
.pids-clock { color:#b8b8b8; font-size:.9rem; }
.pids-info-card { padding:12px; border-radius:9px; background:#070707; border:1px solid #242424; }
.pids-info-card.destination,.pids-info-card.connection { border-color:#2a2a2a; }
.pids-info-head,.pids-connection-list-head { color:#767676; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:none; }
.pids-info-card > strong { margin-top:6px; font-size:.91rem; font-weight:680; }
.pids-info-time { margin-top:7px; }
.pids-info-time span:first-child { color:#d8d8d8; font-size:1.05rem; font-weight:720; }
.pids-info-time span:last-child { color:#8d8d8d; font-size:.78rem; }
.pids-connection-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pids-connection-head { display:flex; align-items:center; gap:9px; margin:0; min-width:0; }
.pids-connection-head > div { display:grid; gap:2px; min-width:0; }
.pids-info-kicker { color:#6f6f6f; font-size:.58rem; font-weight:650; }
.pids-connection-head .connection-verdict { font-size:.86rem; font-weight:690; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pids-inline-action { border:0; background:transparent; color:#bdbdbd; font-size:.67rem; font-weight:650; padding:5px 2px; }
.summary-detail { display:block; margin-top:7px; color:#747474; font-size:.66rem; }
.pids-connection-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:9px; }
.pids-connection-metrics > div { padding:8px; border-radius:6px; background:#0d0d0d; border:1px solid #1f1f1f; }
.pids-connection-metrics span { color:#6f6f6f; font-size:.57rem; }
.pids-connection-metrics strong { font-size:.88rem; font-weight:700; }
.pids-connection-metrics small { color:#666; font-size:.57rem; }
.pids-connection-list-head { margin:9px 0 6px; }
.compact-arrivals { grid-template-columns:repeat(3,minmax(92px,1fr)); gap:5px; overflow-x:auto; scrollbar-width:none; }
.compact-arrivals::-webkit-scrollbar { display:none; }
.pids-info-card .arrival-card { min-width:92px; padding:8px; border-radius:7px; background:#0d0d0d; border-color:#252525; }
.pids-info-card .arrival-card.best { border-color:#606060; background:#151515; }
.pids-info-card .arrival-time { font-size:1rem; }
.pids-info-card .arrival-rank,.pids-info-card .arrival-countdown { font-size:.56rem; }
.arrival-tag { border-radius:4px; padding:3px 5px; background:#171717; color:#888; font-size:.55rem; }
.arrival-tag.live { background:#102119; color:#6fce92; }
.arrival-card.projected { border-style:solid; }
.second-bus-chooser { margin-top:8px; }
.compact-grid { gap:5px; }
.second-bus-choice { border:1px solid #2b2b2b; background:#0c0c0c; border-radius:7px; padding:8px 9px; font-size:.68rem; }
.second-bus-choice small { color:#717171; font-size:.57rem; }

.pids-route-board { background:#000; grid-template-rows:39px 1fr; }
.pids-route-header { padding:0 17px; align-items:center; border-bottom:1px solid #242424; color:#717171; font-size:.59rem; font-weight:700; letter-spacing:.08em; }
.pids-stop-list { padding:5px 9px 18px; background:#000; }
.pids-stop-row { grid-template-columns:26px minmax(0,1fr) minmax(105px,auto); min-height:62px; border-radius:8px; padding-right:7px; }
.pids-stop-row.next { background:#101010; outline:1px solid #393939; }
.pids-stop-row.destination:not(.passed) { background:#0c1212; }
.pids-stop-row.passed { opacity:.30; }
.pids-route-dot { width:9px; height:9px; background:#aaa; border-color:#aaa; }
.pids-route-line { width:2px; background:#323232; }
.pids-stop-row.next .pids-route-dot { width:14px; height:14px; background:#e0c35e; border:3px solid #554b27; box-shadow:none; }
.pids-stop-row.destination .pids-route-dot { background:#9edee2; border-color:#9edee2; }
.pids-stop-name { gap:2px; padding:8px 5px; }
.pids-stop-name strong { color:#e9e9e9; font-size:.88rem; font-weight:650; }
.pids-stop-name span { color:#646464; font-size:.6rem; font-weight:550; }
.pids-stop-eta { gap:2px; padding-left:8px; }
.pids-stop-eta strong { color:#dedede; font-size:.84rem; font-weight:650; }
.pids-stop-row.next .pids-stop-eta strong { color:#e4ca6a; font-size:.93rem; }
.pids-stop-eta span { color:#666; font-size:.58rem; }

/* Reliable app-style full-screen focus mode, used on iOS and as fallback. */
.pids-focus-mode {
  position:fixed !important;
  z-index:2147483000 !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  padding-top:env(safe-area-inset-top) !important;
  padding-bottom:env(safe-area-inset-bottom) !important;
  background:#000 !important;
}
.pids-focus-mode .pids-toolbar { flex:0 0 var(--pids-toolbar-h); }
.pids-focus-mode .pids-layout { height:calc(100dvh - var(--pids-toolbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:0; }
.pids-body-focus { overflow:hidden !important; overscroll-behavior:none !important; background:#000 !important; }
.pids-body-focus .topbar,.pids-body-focus .app-footer { visibility:hidden; }

/* Live connection selector */
.journey-sheet[hidden] { display:none !important; }
.journey-sheet { position:fixed; inset:0; z-index:2147483500; display:grid; place-items:center; padding:20px; }
.journey-sheet-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.journey-sheet-panel { position:relative; z-index:1; width:min(620px,100%); max-height:min(680px,calc(100dvh - 40px)); overflow:auto; background:#090909; border:1px solid #303030; border-radius:14px; padding:18px; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.journey-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
.sheet-close { width:34px; height:34px; border-radius:8px; border:1px solid #303030; background:#111; color:#bbb; font-size:1.4rem; line-height:1; }
.journey-switch-transfer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; margin-bottom:12px; border:1px solid #242424; border-radius:8px; background:#050505; }
.journey-switch-transfer span { color:#707070; font-size:.67rem; }
.journey-switch-transfer strong { font-size:.78rem; font-weight:650; text-align:right; }
.journey-switch-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.journey-switch-grid .wide-field { grid-column:1/-1; }
.journey-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #222; }
body.journey-sheet-open { overflow:hidden; }

.app-footer { color:#4e4e4e; }

@media (max-width:980px) {
  .connection-panel { grid-template-columns:1fr; align-items:stretch; }
  .route-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journey-fields,.connection-leg-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pids-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); min-height:0; }
  .pids-summary-column { border-right:0; border-bottom:1px solid #242424; grid-template-columns:minmax(0,1.5fr) minmax(220px,.8fr); padding:8px; }
  .pids-next-card { grid-row:1 / span 2; }
  .pids-info-card.connection { grid-column:2; }
  .pids-route-board { min-height:430px; }
  .pids-stop-list { max-height:54vh; }
}

@media (max-width:680px) {
  .topbar { height:auto; }
  .topbar-inner { width:calc(100% - 20px); min-height:54px; height:auto; padding:7px 0; gap:7px; flex-wrap:nowrap; }
  .brand-mark { width:28px; height:28px; }
  .brand-name,.version-tag,.topbar-status .wake-pill { display:none; }
  .module-nav { flex:1; }
  .module-tab { flex:1; padding:0 8px; }
  .status-pill { max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-shell { width:calc(100% - 16px); padding:12px 0 28px; gap:10px; }
  .connection-panel { padding:10px; gap:8px; border-radius:11px; }
  .connection-compact-head > div { gap:7px; }
  .connection-compact-head .quiet { display:none; }
  .connection-grid { grid-template-columns:1fr 84px; }
  .page-intro { min-height:44px; padding:2px 1px; }
  .compact-intro h1 { font-size:1.65rem; }
  .connection-panel,.setup-panel,.map-panel,.observations-panel,.your-bus-panel { padding:12px; }
  .route-controls { grid-template-columns:1fr 1fr; gap:7px; }
  .route-controls .mode-field,.route-controls .switch-field { grid-column:auto; }
  input,select,.segmented,.switch-field { height:40px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .map-panel .live-map { min-height:360px; }
  .bus-choice-grid { grid-template-columns:1fr; }

  .journey-intro { display:none; }
  .journey-config-panel { padding:12px; border-radius:11px; }
  .journey-config-top { margin-bottom:10px; gap:10px; }
  .journey-config-top h2 { font-size:.92rem; }
  .journey-mode { width:210px; }
  .journey-flow { border-radius:9px; }
  .journey-leg-card { padding:10px; }
  .journey-leg-head { margin-bottom:8px; }
  .journey-fields,.connection-leg-fields { grid-template-columns:1fr 1fr; gap:7px; }
  .journey-fields .wide-field,.connection-leg-fields .wide-field { grid-column:1/-1; }
  .journey-config-footer { margin-top:9px; align-items:center; }
  .journey-config-note { display:none; }
  .journey-start-actions { width:auto; position:static; padding:0; }
  .journey-start-actions .primary { min-width:128px; }
  .journey-start-actions .danger { display:none; }
  .your-bus-panel .panel-title-row { margin-bottom:9px; }

  .pids-shell { --pids-toolbar-h:58px; border-radius:0; min-height:calc(100dvh - 78px); border-left:0; border-right:0; }
  .pids-toolbar { padding:6px 7px; gap:6px; }
  .pids-service-badge { min-width:52px; height:42px; padding:0 8px; font-size:1.28rem; }
  .pids-brand-block { gap:8px; }
  .pids-route-title strong { font-size:.76rem; }
  .pids-status-line { font-size:.56rem; }
  .pids-toolbar-actions { gap:3px; }
  .pids-tool-button { width:34px; min-width:34px; height:34px; min-height:34px; padding:0; font-size:0; }
  #journeyConnectionEditBtn::after { content:"↗"; font-size:16px; }
  #journeyChangeBusBtn::after { content:"⇄"; font-size:17px; }
  #journeyEndBtn::after { content:"×"; font-size:20px; font-weight:400; }
  #pidsFullscreenBtn::after { content:"⛶"; font-size:16px; }
  .pids-focus-mode #pidsFullscreenBtn::after { content:"×"; font-size:20px; font-weight:400; }
  #pidsFullscreenBtn .fullscreen-label { display:none; }

  .pids-layout { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:calc(100dvh - 142px); min-height:0; }
  .pids-summary-column { display:grid; grid-template-columns:1fr; gap:6px; padding:6px; border-right:0; border-bottom:1px solid #222; max-height:none; overflow:visible; }
  .pids-next-card { grid-row:auto; grid-column:auto; padding:11px 12px; }
  .pids-next-stop { font-size:1.45rem; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pids-next-time-row { margin-top:8px; }
  .pids-countdown { font-size:1.28rem; }
  .pids-clock { font-size:.8rem; }
  .pids-info-card { padding:9px 10px; }
  .pids-info-card.destination { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 10px; }
  .pids-info-card.destination .pids-info-head { grid-column:1; }
  .pids-info-card.destination > strong { grid-column:1; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pids-info-card.destination .pids-info-time { grid-column:2; grid-row:1 / span 2; margin:0; display:grid; justify-items:end; gap:1px; }
  .pids-info-card.connection { grid-column:auto; }
  .pids-connection-metrics { margin-top:7px; }
  .pids-connection-list-head { margin:7px 0 5px; }
  .summary-detail { display:none; }
  .pids-route-board { min-height:0; height:auto; }
  .pids-stop-list { height:auto; max-height:none; min-height:0; overflow:auto; padding:3px 5px 14px; }
  .pids-stop-row { grid-template-columns:23px minmax(0,1fr) 86px; min-height:55px; }
  .pids-stop-name strong { font-size:.82rem; }
  .pids-stop-name span { font-size:.55rem; }
  .pids-stop-eta strong { font-size:.79rem; }
  .pids-stop-eta span { font-size:.53rem; }
  .pids-route-header { height:34px; padding:0 10px; font-size:.55rem; }

  .pids-focus-mode { --pids-toolbar-h:calc(56px + env(safe-area-inset-top)); padding-top:0 !important; }
  .pids-focus-mode .pids-toolbar { padding-top:env(safe-area-inset-top); height:var(--pids-toolbar-h); min-height:var(--pids-toolbar-h); }
  .pids-focus-mode .pids-layout { height:calc(100dvh - var(--pids-toolbar-h) - env(safe-area-inset-bottom)); }

  .journey-sheet { place-items:end center; padding:0; }
  .journey-sheet-panel { width:100%; max-height:min(76dvh,680px); border-radius:16px 16px 0 0; border-left:0; border-right:0; border-bottom:0; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .journey-switch-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .journey-switch-grid .wide-field { grid-column:1/-1; }
  .journey-sheet-actions { position:sticky; bottom:0; background:#090909; padding-bottom:2px; }
}

@media (max-width:430px) {
  .connection-panel .inline-status { max-width:145px; }
  .journey-config-top { align-items:flex-start; flex-direction:column; }
  .journey-mode { width:100%; }
  .journey-fields,.connection-leg-fields { grid-template-columns:1fr 1fr; }
  .journey-fields .wide-field,.connection-leg-fields .wide-field { grid-column:1/-1; }
  .pids-route-title { display:none; }
  .pids-brand-block { flex:0 0 auto; }
  .pids-toolbar-actions { margin-left:auto; }
  .pids-summary-column { padding:5px; }
  .pids-next-card { padding:10px; }
  .pids-next-stop { font-size:1.32rem; }
  .pids-info-card.connection .compact-arrivals { grid-template-columns:repeat(3,100px); }
}

@media (orientation:landscape) and (max-height:700px) {
  .pids-shell { --pids-toolbar-h:52px; min-height:100dvh; }
  .pids-toolbar { height:var(--pids-toolbar-h); min-height:var(--pids-toolbar-h); padding:5px 9px; }
  .pids-service-badge { height:38px; min-width:50px; font-size:1.2rem; }
  .pids-layout,.pids-focus-mode .pids-layout { grid-template-columns:minmax(250px,.62fr) minmax(430px,1.38fr); grid-template-rows:1fr; height:calc(100dvh - var(--pids-toolbar-h) - env(safe-area-inset-bottom)); min-height:0; }
  .pids-summary-column { display:flex; flex-direction:column; gap:6px; padding:6px; overflow:auto; border-right:1px solid #222; border-bottom:0; }
  .pids-next-card { padding:10px; }
  .pids-next-stop { font-size:1.35rem; }
  .pids-info-card { padding:8px; }
  .pids-route-board { min-height:0; }
  .pids-stop-list { height:auto; max-height:none; }
  .pids-stop-row { min-height:50px; }
}
@media (max-width:680px) {
  #pidsFullscreenBtn.expanded::after { content:"×"; font-size:20px; font-weight:400; }
}

/* v18 · local DataMall storage */
.data-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
body:not(.datamall-ready) #forgetKeyBtn:disabled { display:none; }
@media (max-width: 700px) {
  .connection-compact-head { align-items:center; }
  .data-actions { gap:4px; }
  .data-actions .compact { min-height:30px; padding:0 8px; font-size:.66rem; }
  body.datamall-ready .connection-panel { padding:9px 10px; }
}

/* v19 · journey bus identification */
.bus-choice-location {
  display:grid;
  gap:3px;
  padding:9px 10px;
  border:1px solid #222;
  border-radius:8px;
  background:#040404;
}
.bus-choice-location > span {
  color:#626262;
  font-size:.58rem;
  font-weight:760;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.bus-choice-location > strong {
  color:#ededed;
  font-size:.78rem;
  font-weight:680;
  line-height:1.28;
}
.bus-choice-location > small {
  color:#777;
  font-size:.63rem;
  line-height:1.3;
}
.bus-choice-facts {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) .55fr .65fr;
  gap:6px;
}
.bus-choice-facts > span {
  min-width:0;
  display:grid;
  gap:2px;
  padding:6px 8px;
  border-left:1px solid #222;
}
.bus-choice-facts > span:first-child { border-left:0; padding-left:0; }
.bus-choice-facts small {
  color:#5f5f5f;
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.bus-choice-facts strong {
  min-width:0;
  color:#9a9a9a;
  font-size:.64rem;
  font-weight:620;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:680px) {
  .bus-choice-card { padding:10px; }
  .bus-choice-location { padding:8px 9px; }
  .bus-choice-location > strong { font-size:.75rem; }
  .bus-choice-facts { grid-template-columns:minmax(0,1.6fr) .5fr .65fr; }
  .bus-choice-facts > span { padding:5px 6px; }
  .bus-choice-facts > span:first-child { padding-left:0; }
}

/* v20 · DataMall-driven service picker */
.service-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.service-picker-host { min-width: 0; width: 100%; }
.service-picker-trigger,
.service-manual-input {
  width: 100%;
  height: 46px;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.service-picker-trigger {
  padding: 0 12px 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-weight: 680;
}
.service-picker-trigger:not(:disabled):hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text) 40%); }
.service-picker-trigger:focus-visible,
.service-manual-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}
.service-picker-trigger:disabled,
.service-manual-input:disabled { opacity: .48; cursor: not-allowed; }
.service-picker-trigger-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-picker-trigger-icon { color: var(--muted); font-size: 1rem; line-height: 1; }
.service-manual-input { padding: 0 13px; text-transform: uppercase; }
.service-manual-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); }

body.service-picker-open { overflow: hidden; }
.service-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  align-items: end;
}
.service-picker-sheet[hidden] { display: none !important; }
.service-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.service-picker-panel {
  position: relative;
  width: min(680px, calc(100% - 20px));
  margin: 0 auto max(10px, env(safe-area-inset-bottom));
  padding: 18px;
  border: 1px solid #292929;
  border-radius: 24px;
  background: #080808;
  box-shadow: 0 -12px 60px rgba(0, 0, 0, .58);
  color: #f4f4f4;
}
.service-picker-header,
.service-picker-readout-row,
.service-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.service-picker-kicker {
  display: block;
  margin-bottom: 4px;
  color: #777;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.service-picker-header h2 { color: #f7f7f7; font-size: 1.12rem; }
.service-picker-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #2b2b2b;
  border-radius: 999px;
  background: #111;
  color: #ddd;
  font-size: 1.65rem;
  line-height: 1;
}
.service-picker-readout-row {
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 1px solid #242424;
  border-radius: 14px;
  background: #0d0d0d;
}
.service-picker-readout {
  min-width: 0;
  color: #fff;
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  line-height: 1;
  font-weight: 790;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.service-picker-match-count { color: #777; font-size: .75rem; font-weight: 680; white-space: nowrap; }
.service-picker-keyboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, .42fr);
  gap: 10px;
}
.service-picker-number-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.service-picker-number-pad button:last-child { grid-column: 2; }
.service-picker-letter-pad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
}
.service-picker-number-pad button,
.service-picker-letter-pad button,
.service-picker-candidates button {
  appearance: none;
  border: 1px solid #2d2d2d;
  background: #171717;
  color: #f8f8f8;
  font: inherit;
  font-weight: 760;
}
.service-picker-number-pad button,
.service-picker-letter-pad button {
  min-height: 58px;
  border-radius: 12px;
  font-size: 1.35rem;
}
.service-picker-number-pad button:active:not(:disabled),
.service-picker-letter-pad button:active:not(:disabled) { background: #272727; transform: translateY(1px); }
.service-picker-number-pad button:disabled,
.service-picker-letter-pad button:disabled {
  color: #383838;
  border-color: #171717;
  background: #0d0d0d;
}
.service-picker-no-suffix {
  grid-column: 1 / -1;
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px dashed #242424;
  border-radius: 12px;
  color: #555;
  font-size: .72rem;
  font-weight: 680;
}
.service-picker-candidates {
  min-height: 42px;
  margin-top: 10px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.service-picker-candidates::-webkit-scrollbar { display: none; }
.service-picker-candidates button {
  min-width: 58px;
  height: 38px;
  padding: 0 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: .82rem;
}
.service-picker-candidates > span { align-self: center; color: #666; font-size: .75rem; }
.service-picker-actions { margin-top: 12px; }
.service-picker-actions button {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 760;
}
.service-picker-clear,
.service-picker-backspace {
  min-width: 72px;
  padding: 0 14px;
  border: 1px solid #292929;
  background: #111;
  color: #ddd;
}
.service-picker-backspace { font-size: 1.2rem; }
.service-picker-use { margin-left: auto; min-width: 150px; }
.service-picker-actions button:disabled { opacity: .32; }

@media (min-width: 760px) {
  .service-picker-sheet { align-items: center; }
  .service-picker-panel { margin-bottom: 0; }
}

@media (max-width: 520px) {
  .service-picker-panel {
    width: 100%;
    margin: 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
  }
  .service-picker-keyboard { grid-template-columns: minmax(0, 1fr) 108px; }
  .service-picker-number-pad button,
  .service-picker-letter-pad button { min-height: 54px; }
  .service-picker-use { min-width: 132px; }
}


/* v20.0.1 · portrait service picker containment */
.service-picker-sheet {
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}
.service-picker-panel,
.service-picker-keyboard,
.service-picker-number-pad,
.service-picker-letter-pad,
.service-picker-actions,
.service-picker-candidates {
  min-width: 0;
  max-width: 100%;
}
.service-picker-panel {
  box-sizing: border-box;
  overflow-x: hidden;
}
.service-picker-keyboard > * { min-width: 0; }

@media (max-width: 520px) and (orientation: portrait) {
  .service-picker-panel {
    max-height: calc(100dvh - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .service-picker-keyboard {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .service-picker-number-pad {
    width: 100%;
  }
  .service-picker-letter-pad {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .service-picker-letter-pad button,
  .service-picker-no-suffix {
    min-height: 46px;
  }
  .service-picker-no-suffix {
    grid-column: 1 / -1;
  }
  .service-picker-candidates {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  .service-picker-actions {
    display: grid;
    grid-template-columns: 68px 68px minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }
  .service-picker-clear,
  .service-picker-backspace,
  .service-picker-use {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding-inline: 8px;
  }
}


/* v20.0.2 · mobile PIDS scrolling / connection overflow fix */
@media (max-width: 680px) and (orientation: portrait) {
  /* Normal Journey mode belongs to the document flow. A tall connection card
     must grow the page instead of being clipped by the PIDS viewport. */
  .pids-shell:not(.pids-focus-mode) {
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .pids-shell:not(.pids-focus-mode) .pids-layout {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .pids-shell:not(.pids-focus-mode) .pids-summary-column {
    max-height: none;
    overflow: visible;
  }
  .pids-shell:not(.pids-focus-mode) .pids-route-board {
    min-height: 430px;
    height: auto;
  }
  .pids-shell:not(.pids-focus-mode) .pids-stop-list {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Full-screen/focus mode deliberately has one vertical scroller for the
     entire PIDS body. This avoids nested scroll traps on iOS Safari. */
  .pids-focus-mode {
    overflow: hidden !important;
  }
  .pids-focus-mode .pids-layout {
    display: block;
    height: calc(100dvh - var(--pids-toolbar-h) - env(safe-area-inset-bottom));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .pids-focus-mode .pids-summary-column {
    max-height: none;
    overflow: visible;
  }
  .pids-focus-mode .pids-route-board {
    min-height: 430px;
    height: auto;
  }
  .pids-focus-mode .pids-stop-list {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Keep the live toolbar available while scrolling a long connection PIDS. */
  .pids-focus-mode .pids-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Long second-bus lists should extend naturally instead of creating another
     nested scroll region inside the connection card. */
  .pids-info-card.connection,
  .second-bus-chooser,
  .compact-grid {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
}


/* ==========================================================================
   routescraper v21 · route-variant selector
   Service and direction are selected as one human-readable route.
   ========================================================================== */
.route-picker-native,
.route-direction-internal {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
  pointer-events:none !important;
}
.route-picker-field { min-width:0; }
.route-picker-host { width:100%; min-width:0; }
.route-picker-trigger {
  width:100%;
  min-width:0;
  min-height:52px;
  padding:6px 10px;
  display:grid;
  grid-template-columns:minmax(46px,auto) minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  border:1px solid #303030;
  border-radius:9px;
  background:#050505;
  color:#f2f2f2;
  text-align:left;
}
.route-picker-trigger:not(:disabled):hover { border-color:#494949; background:#090909; }
.route-picker-trigger:focus-visible,
.route-picker-manual:focus,
.route-picker-manual-summary:focus-visible {
  outline:none;
  border-color:#6b6b6b;
  box-shadow:0 0 0 2px #1d1d1d;
}
.route-picker-trigger-code {
  font-size:1.08rem;
  font-weight:790;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.route-picker-trigger-route {
  min-width:0;
  display:grid;
  gap:2px;
}
.route-picker-trigger-route strong,
.route-picker-trigger-route small {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-picker-trigger-route strong { font-size:.72rem; font-weight:690; color:#ededed; }
.route-picker-trigger-route small { font-size:.58rem; color:#747474; font-weight:560; }
.route-picker-trigger-chevron { color:#666; font-size:1.25rem; text-align:right; }
.route-picker-trigger:disabled,
.route-picker-manual:disabled,
.route-picker-manual-summary:disabled { opacity:.42; cursor:not-allowed; }

.route-picker-host.desktop {
  display:grid;
  grid-template-columns:minmax(105px,.38fr) minmax(0,1fr);
  gap:6px;
}
.route-picker-manual {
  width:100%;
  min-width:0;
  height:42px;
  border:1px solid #303030;
  border-radius:9px;
  background:#050505;
  color:#f2f2f2;
  padding:0 11px;
  text-transform:uppercase;
  font:inherit;
  font-weight:700;
}
.route-picker-manual-summary {
  width:100%;
  min-width:0;
  height:42px;
  padding:0 11px;
  border:1px solid #303030;
  border-radius:9px;
  background:#080808;
  color:#9a9a9a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
  font-size:.68rem;
  font-weight:620;
}

body.route-picker-open { overflow:hidden; }
.route-picker-sheet {
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:grid;
  place-items:center;
  padding:16px;
}
.route-picker-sheet[hidden] { display:none !important; }
.route-picker-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.route-picker-panel {
  position:relative;
  z-index:1;
  width:min(720px,100%);
  height:min(790px,calc(100dvh - 32px));
  min-height:420px;
  min-width:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid #303030;
  border-radius:16px;
  background:#070707;
  box-shadow:0 28px 100px rgba(0,0,0,.7);
  color:#f3f3f3;
}
.route-picker-head {
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px 10px;
}
.route-picker-kicker {
  display:block;
  margin-bottom:3px;
  color:#727272;
  font-size:.61rem;
  font-weight:760;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.route-picker-head h2 { font-size:1.08rem; font-weight:700; }
.route-picker-close {
  width:36px;
  height:36px;
  flex:0 0 36px;
  border:1px solid #303030;
  border-radius:999px;
  background:#101010;
  color:#cfcfcf;
  font-size:1.45rem;
  line-height:1;
}
.route-picker-search-wrap {
  margin:0 16px 10px;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border:1px solid #303030;
  border-radius:10px;
  background:#030303;
}
.route-picker-search {
  width:100%;
  min-width:0;
  height:46px;
  padding:0 12px;
  border:0;
  background:transparent;
  color:#fff;
  box-shadow:none !important;
  text-transform:uppercase;
  font-size:1rem;
  font-weight:720;
  letter-spacing:.01em;
}
.route-picker-search:focus { border:0; box-shadow:none !important; }
.route-picker-count {
  padding-right:12px;
  color:#686868;
  font-size:.63rem;
  font-weight:650;
  white-space:nowrap;
}

.route-picker-results {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid #202020;
  border-bottom:1px solid #202020;
  background:#030303;
  scrollbar-width:thin;
}
.route-picker-row {
  width:100%;
  min-width:0;
  min-height:66px;
  padding:9px 14px;
  display:grid;
  grid-template-columns:86px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  border:0;
  border-bottom:1px solid #181818;
  background:#030303;
  color:#eee;
  text-align:left;
}
.route-picker-row:last-child { border-bottom:0; }
.route-picker-row:not(.selected):hover { background:#0b0b0b; }
.route-picker-row.selected { background:#111; box-shadow:inset 3px 0 0 #e6e6e6; }
.route-picker-code { min-width:0; display:grid; gap:2px; }
.route-picker-code strong {
  color:#f5f5f5;
  font-size:1.32rem;
  font-weight:780;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.route-picker-code small {
  color:#777;
  font-size:.6rem;
  font-weight:620;
  text-transform:uppercase;
}
.route-picker-route { min-width:0; display:grid; gap:4px; }
.route-picker-route strong,
.route-picker-route small {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.route-picker-route strong { color:#eeeeee; font-size:.82rem; font-weight:680; }
.route-picker-route small { color:#888; font-size:.67rem; font-weight:570; }
.route-picker-route em { color:#696969; font-style:normal; font-weight:560; }
.route-picker-chevron { color:#4e4e4e; font-size:1.25rem; text-align:right; }
.route-picker-empty { padding:36px 18px; color:#666; text-align:center; font-size:.78rem; }

.route-picker-touch-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#070707;
}
.route-picker-sheet.desktop .route-picker-touch-controls { display:none; }
.route-picker-keyboard {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(84px,.34fr);
  gap:8px;
}
.route-picker-number-pad {
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.route-picker-number-pad button:last-child { grid-column:2; }
.route-picker-letter-pad {
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:6px;
}
.route-picker-number-pad button,
.route-picker-letter-pad button,
.route-picker-clear,
.route-picker-backspace {
  appearance:none;
  min-width:0;
  min-height:44px;
  border:1px solid #303030;
  border-radius:9px;
  background:#151515;
  color:#f2f2f2;
  font:inherit;
  font-weight:760;
}
.route-picker-number-pad button,
.route-picker-letter-pad button { font-size:1rem; }
.route-picker-number-pad button:active:not(:disabled),
.route-picker-letter-pad button:active:not(:disabled),
.route-picker-clear:active:not(:disabled),
.route-picker-backspace:active:not(:disabled) { background:#232323; }
.route-picker-number-pad button:disabled,
.route-picker-letter-pad button:disabled,
.route-picker-clear:disabled,
.route-picker-backspace:disabled {
  color:#333;
  border-color:#171717;
  background:#0b0b0b;
}
.route-picker-no-letters {
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:44px;
  padding:4px;
  border:1px dashed #222;
  border-radius:9px;
  color:#494949;
  font-size:.55rem;
  text-align:center;
}
.route-picker-edit-row {
  width:64px;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:6px;
}
.route-picker-clear,
.route-picker-backspace {
  width:64px;
  padding:0 5px;
  font-size:.62rem;
}
.route-picker-backspace { font-size:1rem; }

.route-controls {
  grid-template-columns:minmax(240px,1.3fr) minmax(150px,.6fr) minmax(160px,.55fr);
}
.primary-leg-fields {
  grid-template-columns:minmax(220px,.9fr) minmax(240px,1.1fr) minmax(240px,1.1fr);
}
.connection-leg-fields {
  grid-template-columns:minmax(220px,1fr) minmax(260px,1.2fr) minmax(120px,.5fr);
}
.journey-switch-grid .route-picker-field { grid-column:1/-1; }

@media (max-width:980px) {
  .route-controls { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
  .route-controls .switch-field { grid-column:1/-1; }
  .primary-leg-fields,
  .connection-leg-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .primary-leg-fields .route-picker-field,
  .connection-leg-fields .route-picker-field { grid-column:1/-1; }
}

@media (max-width:680px) {
  .route-picker-sheet {
    place-items:end center;
    padding:0;
  }
  .route-picker-panel {
    width:100%;
    height:min(92dvh,820px);
    max-height:calc(100dvh - max(0px,env(safe-area-inset-top)));
    min-height:520px;
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:17px 17px 0 0;
  }
  .route-picker-head { padding:12px 12px 8px; }
  .route-picker-search-wrap { margin:0 12px 8px; }
  .route-picker-row {
    min-height:62px;
    padding:8px 12px;
    grid-template-columns:70px minmax(0,1fr) 14px;
    gap:9px;
  }
  .route-picker-code strong { font-size:1.18rem; }
  .route-picker-route strong { font-size:.78rem; }
  .route-picker-route small { font-size:.62rem; }
  .route-picker-touch-controls {
    grid-template-columns:minmax(0,1fr) 58px;
    gap:7px;
    padding:8px 9px calc(8px + env(safe-area-inset-bottom));
  }
  .route-picker-keyboard { grid-template-columns:minmax(0,1fr) 82px; gap:6px; }
  .route-picker-number-pad,
  .route-picker-letter-pad { gap:5px; }
  .route-picker-number-pad button,
  .route-picker-letter-pad button { min-height:40px; border-radius:8px; }
  .route-picker-edit-row { width:58px; gap:5px; }
  .route-picker-clear,
  .route-picker-backspace { width:58px; min-height:40px; border-radius:8px; }
  .route-picker-trigger { min-height:50px; }
  .route-controls { grid-template-columns:1fr 1fr; }
  .route-controls .route-picker-field,
  .route-controls .switch-field { grid-column:1/-1; }
  .journey-fields.primary-leg-fields,
  .journey-fields.connection-leg-fields { grid-template-columns:1fr 1fr; }
  .journey-fields.primary-leg-fields .route-picker-field,
  .journey-fields.connection-leg-fields .route-picker-field { grid-column:1/-1; }
}

@media (max-width:390px) {
  .route-picker-keyboard { grid-template-columns:minmax(0,1fr) 72px; }
  .route-picker-edit-row,
  .route-picker-clear,
  .route-picker-backspace { width:54px; }
  .route-picker-number-pad button,
  .route-picker-letter-pad button { min-height:38px; }
}


/* ==========================================================================
   routescraper v22 · moving-block bus selector
   ========================================================================== */
.your-bus-panel { overflow: hidden; }
.bus-choice-grid > .bus-diagram,
.compact-grid > .bus-diagram { grid-column: 1 / -1; }

.bus-diagram {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #242424;
  border-radius: 12px;
  background: #050505;
}
.bus-diagram-header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #202020;
  background: #080808;
}
.bus-diagram-header > div { min-width: 0; display: grid; gap: 2px; }
.bus-diagram-header span {
  color: #6f6f6f;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.bus-diagram-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #efefef;
  font-size: .78rem;
  font-weight: 680;
}
.bus-diagram-header small {
  flex: 0 0 auto;
  color: #777;
  font-size: .61rem;
  font-weight: 620;
}

.bus-diagram-scroll {
  position: relative;
  max-height: min(66dvh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bus-diagram-scroll.compact { max-height: min(48dvh, 460px); }

.bus-diagram-canvas {
  position: relative;
  width: 100%;
  min-width: 0;
}
.bus-diagram-stops {
  position: absolute;
  inset: 0;
}
.bus-diagram-stop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  padding-right: min(53%, 360px);
  border-bottom: 1px solid #111;
}
.bus-diagram-stop:last-child { border-bottom: 0; }
.bus-diagram-stop.boarding { background: #0a1012; }

/* Stops whose scheduled last bus has already passed remain visible on the
   route diagram, but are clearly marked as outside service hours. */
.bus-diagram-stop.service-ended::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(92, 35, 35, .025), rgba(92, 35, 35, .025)),
    repeating-linear-gradient(
      135deg,
      rgba(220, 92, 92, 0) 0 22px,
      rgba(220, 92, 92, .045) 22px 27px
    );
}
.bus-diagram-stop.service-ended > * {
  position: relative;
  z-index: 1;
}
.bus-diagram-stop.service-ended .bus-diagram-dot {
  border-color: #745e5e;
  background: #0b0808;
}
.bus-diagram-stop.service-ended .bus-diagram-stop-copy strong { color: #aaa0a0; }
.bus-diagram-stop.service-ended .bus-diagram-stop-copy span { color: #8d6868; }
.bus-diagram-stop.boarding.service-ended {
  background: #0d0909;
}
.bus-diagram-stop.boarding.service-ended .bus-diagram-dot {
  border-color: #ad7474;
  background: #ad7474;
  box-shadow: 0 0 0 4px rgba(173, 116, 116, .07);
}
.bus-diagram-stop.boarding.service-ended .bus-diagram-stop-copy strong { color: #dfd2d2; }
.bus-diagram-stop.boarding.service-ended .bus-diagram-stop-copy span { color: #b77a7a; }

.bus-diagram-line-cell {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
}
.bus-diagram-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #343434;
}
.bus-diagram-stop:first-child .bus-diagram-line { top: 50%; }
.bus-diagram-stop:last-child .bus-diagram-line { bottom: 50%; }

.bus-diagram-dot {
  position: relative;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #777;
  background: #050505;
}
.bus-diagram-stop.boarding .bus-diagram-dot {
  width: 13px;
  height: 13px;
  border-color: #8adfe4;
  background: #8adfe4;
  box-shadow: 0 0 0 4px rgba(138,223,228,.09);
}

.bus-diagram-stop-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 7px 8px 0;
}
.bus-diagram-stop-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #bdbdbd;
  font-size: .72rem;
  font-weight: 640;
}
.bus-diagram-stop-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5f5f5f;
  font-size: .56rem;
  font-weight: 640;
}
.bus-diagram-stop.boarding .bus-diagram-stop-copy strong { color: #f2f2f2; }
.bus-diagram-stop.boarding .bus-diagram-stop-copy span { color: #8adfe4; }

.bus-diagram-blocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.moving-bus-block {
  position: absolute;
  right: 10px;
  z-index: 6;
  width: min(48%, 330px);
  min-width: 178px;
  transform: translateY(-50%);
  pointer-events: auto;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid #3a3a3a;
  border-left: 3px solid #dedede;
  border-radius: 9px;
  background: rgba(17,17,17,.97);
  color: #f3f3f3;
  text-align: left;
  box-shadow: 0 5px 16px rgba(0,0,0,.32);
  transition: top .35s ease, right .2s ease, border-color .15s ease, background .15s ease;
}
.moving-bus-block.lane-1 { right: 18px; }
.moving-bus-block.lane-2 { right: 26px; }
.moving-bus-block:hover,
.moving-bus-block:focus-visible {
  z-index: 20;
  outline: none;
  border-color: #777;
  border-left-color: #fff;
  background: #171717;
}
.moving-bus-block:active { transform: translateY(-50%) scale(.992); }

.moving-bus-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.moving-bus-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .01em;
}
.moving-bus-head em {
  flex: 0 0 auto;
  color: #fff;
  font-size: .76rem;
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.moving-bus-position {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9b9b9b;
  font-size: .59rem;
  font-weight: 610;
}
.moving-bus-facts {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.moving-bus-facts b,
.moving-bus-facts i {
  min-width: 0;
  padding: 2px 5px;
  border-radius: 5px;
  background: #202020;
  color: #aaa;
  font-size: .50rem;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}
.moving-bus-facts b { color: #d3d3d3; }
.moving-bus-facts .load.seats { color: #74d69d; background: #102019; }
.moving-bus-facts .load.standing { color: #e5ca76; background: #211d0f; }
.moving-bus-facts .load.limited { color: #e58a8a; background: #231313; }
.moving-bus-facts .load.unknown { color: #777; }

.moving-bus-foot {
  color: #5f5f5f;
  font-size: .48rem;
  font-weight: 680;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.second-bus-chooser .bus-diagram {
  border-color: #263640;
  background: #071017;
}
.second-bus-chooser .bus-diagram-header { background: #09141c; border-color: #21303a; }
.second-bus-chooser .bus-diagram-scroll { background: #071017; }
.second-bus-chooser .bus-diagram-stop { border-color: #0d1b24; }
.second-bus-chooser .bus-diagram-line { background: #29404c; }
.second-bus-chooser .bus-diagram-dot { border-color: #70828c; background: #071017; }
.second-bus-chooser .moving-bus-block {
  background: rgba(14,29,38,.98);
  border-color: #34505f;
  border-left-color: #dce8ed;
}
.second-bus-chooser .moving-bus-position { color: #9cb0ba; }
.second-bus-chooser .moving-bus-foot { color: #667d88; }

@media (max-width: 680px) {
  .your-bus-panel { padding: 12px; }
  .your-bus-panel .compact-panel-head { padding-inline: 2px; }
  .bus-diagram-header { align-items: start; padding: 10px 11px; }
  .bus-diagram-header small { display: none; }
  .bus-diagram-scroll { max-height: 67dvh; }
  .bus-diagram-scroll.compact { max-height: 46dvh; }

  .bus-diagram-stop {
    grid-template-columns: 30px minmax(0,1fr);
    padding-right: 57%;
  }
  .bus-diagram-stop-copy strong { font-size: .67rem; }
  .bus-diagram-stop-copy span { font-size: .52rem; }

  .moving-bus-block {
    right: 7px;
    width: 54%;
    min-width: 168px;
    max-width: 224px;
    padding: 6px 7px;
    gap: 2px;
    border-radius: 8px;
  }
  .moving-bus-block.lane-1 { right: 13px; }
  .moving-bus-block.lane-2 { right: 19px; }
  .moving-bus-head strong { font-size: .68rem; }
  .moving-bus-head em { font-size: .70rem; }
  .moving-bus-position { font-size: .55rem; }
  .moving-bus-facts b,
  .moving-bus-facts i { font-size: .47rem; padding: 2px 4px; }
  .moving-bus-foot { font-size: .44rem; }
}

@media (max-width: 390px) {
  .bus-diagram-stop { padding-right: 59%; }
  .moving-bus-block { width: 56%; min-width: 158px; }
  .moving-bus-facts b { display: none; }
}

.bus-selector-hint {
  display:block;
  margin-top:3px;
  color:#6f6f6f;
  font-size:.61rem;
  font-weight:600;
}

/* v22.0.1 · preserve moving-board scroll */
.bus-diagram-scroll {
  overflow-anchor: none;
}

/* v22.1 · scheduled preselection near route origin */
.moving-bus-block.scheduled {
  border-style: dashed;
  border-color: #4a4a4a;
  border-left: 3px solid #8d8d8d;
  background: rgba(12,12,12,.98);
}
.moving-bus-block.scheduled .moving-bus-head strong { color:#d7d7d7; }
.moving-bus-block.scheduled .moving-bus-position { color:#858585; }
.moving-bus-block.scheduled .moving-bus-foot { color:#8c8c8c; }
.moving-bus-block.scheduled::before {
  content:'';
  position:absolute;
  left:-7px;
  top:50%;
  width:7px;
  height:1px;
  background:#5b5b5b;
}
.moving-bus-block.scheduled.preselected {
  border-style:solid;
  border-color:#66868a;
  border-left-color:#8adfe4;
  background:#0b1719;
  box-shadow:0 0 0 2px rgba(138,223,228,.08), 0 5px 16px rgba(0,0,0,.32);
}
.moving-bus-block.scheduled.preselected .moving-bus-foot { color:#8adfe4; }

/* v22.2 · schedule-only preselection */
.moving-bus-block.scheduled {
  border-style: dashed;
  border-color: #4a4a4a;
  border-left: 3px solid #8d8d8d;
  background: rgba(12,12,12,.98);
}
.moving-bus-block.scheduled .moving-bus-head strong { color:#d7d7d7; }
.moving-bus-block.scheduled .moving-bus-position { color:#858585; }
.moving-bus-block.scheduled .moving-bus-foot { color:#8c8c8c; }
.moving-bus-block.scheduled::before {
  content:'';
  position:absolute;
  left:-7px;
  top:50%;
  width:7px;
  height:1px;
  background:#5b5b5b;
}
.moving-bus-block.scheduled.preselected {
  border-style:solid;
  border-color:#66868a;
  border-left-color:#8adfe4;
  background:#0b1719;
  box-shadow:0 0 0 2px rgba(138,223,228,.08), 0 5px 16px rgba(0,0,0,.32);
}
.moving-bus-block.scheduled.preselected .moving-bus-foot { color:#8adfe4; }

/* v22.2.1 · scheduled departure queue */
.scheduled-departure-queue {
  border-bottom: 1px solid #202020;
  background: #080808;
}
.scheduled-departure-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px 7px;
}
.scheduled-departure-title span {
  color:#9a9a9a;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.scheduled-departure-title small {
  color:#5f5f5f;
  font-size:.55rem;
  font-weight:600;
}
.scheduled-departure-list {
  display:flex;
  gap:7px;
  padding:0 9px 9px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.scheduled-departure-list::-webkit-scrollbar { display:none; }
.scheduled-departure {
  flex:0 0 min(76%, 285px);
  min-width:220px;
  display:grid;
  gap:4px;
  padding:8px 9px;
  border:1px dashed #3c3c3c;
  border-radius:9px;
  background:#0d0d0d;
  color:#ececec;
  text-align:left;
}
.scheduled-departure.selected {
  border-style:solid;
  border-color:#66868a;
  background:#0b1719;
  box-shadow:inset 3px 0 0 #8adfe4;
}
.scheduled-departure > span {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.scheduled-departure b {
  color:#9b9b9b;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.scheduled-departure strong {
  color:#f4f4f4;
  font-size:.82rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.scheduled-departure em {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b0b0b0;
  font-size:.61rem;
  font-style:normal;
  font-weight:620;
}
.scheduled-departure small {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  color:#696969;
}
.scheduled-departure small i {
  padding:2px 5px;
  border-radius:5px;
  background:#1b1b1b;
  color:#888;
  font-size:.48rem;
  font-style:normal;
  font-weight:760;
}
.scheduled-departure small i.load.seats { color:#74d69d; background:#102019; }
.scheduled-departure small i.load.standing { color:#e5ca76; background:#211d0f; }
.scheduled-departure small i.load.limited { color:#e58a8a; background:#231313; }
.scheduled-departure small i.selected { color:#8adfe4; background:#102124; }

@media (max-width:680px) {
  .scheduled-departure { flex-basis:82%; min-width:210px; }
}


/* v22.2.2 · contain moving-board width on narrow viewports */
.bus-choice-grid,
.compact-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bus-choice-grid > *,
.compact-grid > * {
  min-width: 0;
  max-width: 100%;
}

.scheduled-departure-queue {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.scheduled-departure-title {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.scheduled-departure-title > * { min-width: 0; }
.scheduled-departure-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scheduled-departure-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
}

.bus-diagram,
.bus-diagram-scroll,
.bus-diagram-canvas,
.bus-diagram-stops,
.bus-diagram-blocks {
  max-width: 100%;
  min-width: 0;
}
.bus-diagram {
  contain: inline-size;
}

@media (max-width: 680px) {
  .bus-choice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
  }
  .scheduled-departure {
    flex: 0 0 min(82%, 285px);
    min-width: min(210px, calc(100% - 18px));
    max-width: calc(100% - 18px);
  }
  .moving-bus-block {
    width: clamp(156px, 54%, 224px);
    min-width: 0;
    max-width: calc(100% - 44px);
  }
  .moving-bus-block.lane-1 { right: 13px; }
  .moving-bus-block.lane-2 { right: 19px; }
}

@media (max-width: 390px) {
  .scheduled-departure {
    flex-basis: min(86%, 270px);
    min-width: min(196px, calc(100% - 14px));
    max-width: calc(100% - 14px);
  }
  .moving-bus-block {
    width: clamp(148px, 56%, 210px);
    min-width: 0;
    max-width: calc(100% - 38px);
  }
}

/* v22.3 · pre-boarding selected vehicle state */
.moving-bus-block.selected-live {
  z-index: 18;
  border-color: #66868a;
  border-left-color: #8adfe4;
  background: #0b1719;
  box-shadow: 0 0 0 2px rgba(138,223,228,.09), 0 7px 20px rgba(0,0,0,.4);
}
.moving-bus-block.selected-live .moving-bus-head strong,
.moving-bus-block.selected-live .moving-bus-foot {
  color: #8adfe4;
}
.moving-bus-block.selected-live::after {
  content: 'LOCKED';
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 2px 5px;
  border: 1px solid #43676b;
  border-radius: 4px;
  background: #0b1719;
  color: #8adfe4;
  font-size: .42rem;
  font-weight: 850;
  letter-spacing: .08em;
}


/* ==========================================================================
   Onward v23 · passenger-first app shell
   ========================================================================== */
:root {
  --onward-green: #8de8b2;
  --onward-green-soft: #0f2117;
}

body.tools-open { overflow: hidden; }

.onward-brand {
  gap: 10px;
}
.onward-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f2f2f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-size: 1.1rem;
  font-weight: 900;
}
.onward-brand .brand-name {
  font-size: 1.08rem;
  font-weight: 790;
  letter-spacing: -.035em;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-tool-button {
  appearance: none;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #2d2d2d;
  border-radius: 9px;
  background: #0d0d0d;
  color: #d9d9d9;
  font-size: .73rem;
  font-weight: 700;
}
.topbar-tool-button:hover { background: #151515; border-color: #3b3b3b; }
.topbar-tool-button:focus-visible {
  outline: 2px solid #5b5b5b;
  outline-offset: 2px;
}

#connectionModule {
  width: min(1040px, 100%);
  margin-inline: auto;
}
#surveyModule {
  width: 100%;
}
.onward-journey-intro {
  min-height: 56px;
}
.onward-journey-intro h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -.05em;
}
.journey-data-strip {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #242424;
  border-radius: 12px;
  background: #080808;
  color: #aaa;
  text-align: left;
}
.journey-data-strip:hover { background: #0c0c0c; border-color: #313131; }
.journey-data-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #666;
  box-shadow: 0 0 0 3px rgba(255,255,255,.025);
}
.journey-data-strip.ready .journey-data-dot { background: #72d69a; }
.journey-data-strip.cached .journey-data-dot { background: #d0ad67; }
.journey-data-strip.error .journey-data-dot { background: #ee827c; }
.journey-data-strip.loading .journey-data-dot {
  background: #8d8d8d;
  animation: onward-pulse 1.2s ease-in-out infinite;
}
@keyframes onward-pulse { 50% { opacity: .35; transform: scale(.8); } }
#journeyDataSummary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9a9a9a;
  font-size: .69rem;
  font-weight: 620;
}
.journey-data-strip.ready #journeyDataSummary { color: #78ca96; }
.journey-data-strip.error #journeyDataSummary { color: #df837e; }
.journey-data-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #767676;
  font-size: .63rem;
  font-weight: 660;
  white-space: nowrap;
}
.journey-data-action b {
  color: #aaa;
  font-size: 1rem;
  font-weight: 450;
}

.journey-config-panel {
  border-color: #252525;
  background: #080808;
}
.journey-config-top h2 { font-size: 1.08rem; }
.journey-leg-card {
  background: #050505;
  border-color: #222;
}
.leg-number {
  background: #efefef !important;
  color: #050505 !important;
  box-shadow: none !important;
}
.journey-config-note { color: #666; }
.survey-intro .intro-actions { flex-wrap: wrap; }

/* Tools is an auxiliary layer, not primary navigation. */
.tools-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  display: grid;
  justify-items: end;
}
.tools-sheet[hidden] { display: none !important; }
.tools-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tools-panel {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100% - 18px));
  height: 100%;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  border-left: 1px solid #292929;
  background: #070707;
  box-shadow: -20px 0 70px rgba(0,0,0,.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tools-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tools-head h2 { font-size: 1.18rem; }
.tools-close {
  appearance: none;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  background: #101010;
  color: #d7d7d7;
  font-size: 1.5rem;
  line-height: 1;
}
.tools-section {
  display: grid;
  gap: 9px;
}
.tools-section-label {
  color: #676767;
  font-size: .61rem;
  font-weight: 780;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tools-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tool-launch-card {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #272727;
  border-radius: 12px;
  background: #0b0b0b;
  color: #eaeaea;
  text-align: left;
}
.tool-launch-card:hover { border-color: #3a3a3a; background: #101010; }
.tool-launch-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #303030;
  border-radius: 9px;
  background: #111;
  color: #cfcfcf;
  font-size: 1rem;
}
.tool-launch-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.tool-launch-card strong {
  font-size: .78rem;
  font-weight: 720;
}
.tool-launch-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #727272;
  font-size: .61rem;
  font-weight: 560;
}
.tool-launch-card > b {
  color: #686868;
  font-size: 1.15rem;
  font-weight: 450;
}

.tools-panel .connection-panel {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 13px;
  border-radius: 12px;
  background: #090909;
}
.tools-panel .connection-compact-head {
  display: grid;
  gap: 8px;
  align-items: start;
}
.tools-panel .connection-compact-head > div:first-child {
  display: grid;
  gap: 4px;
}
.tools-panel .connection-panel .utility-title {
  color: #d7d7d7;
  font-size: .72rem;
}
.tools-panel .connection-panel .inline-status {
  white-space: normal;
  line-height: 1.35;
}
.tools-panel .connection-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
}
body.datamall-ready .tools-panel .connection-panel {
  grid-template-columns: 1fr;
  padding: 13px;
}
body.datamall-ready .tools-panel .connection-grid { display: none; }
body.datamall-ready .tools-panel .connection-compact-head { grid-column: auto; }
.tools-panel .data-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.tools-system-status {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #1f1f1f;
  color: #616161;
  font-size: .61rem;
  font-weight: 650;
}
.tools-system-status .status-pill,
.tools-section-head .wake-pill {
  min-height: 26px;
  padding: 0 8px;
  font-size: .57rem;
}

body.survey-tool-open .topbar-tool-button::before {
  content: 'Survey · ';
  color: #777;
}

/* Onward keeps the utility survey visually secondary. */
body.survey-tool-open #surveyModule {
  animation: onward-tool-in .16s ease-out;
}
@keyframes onward-tool-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .topbar-inner {
    width: calc(100% - 28px);
    height: 60px;
  }
  .onward-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .onward-brand .brand-name { font-size: 1.02rem; }
  .topbar-tool-button {
    min-height: 34px;
    padding-inline: 11px;
    font-size: .69rem;
  }
  #connectionModule { width: 100%; }
  .onward-journey-intro { min-height: 48px; }
  .onward-journey-intro h1 { font-size: 2rem; }
  .journey-data-strip {
    min-height: 44px;
    padding: 0 11px;
    grid-template-columns: 8px minmax(0,1fr) auto;
    gap: 8px;
  }
  .journey-data-action { font-size: 0; gap: 0; }
  .journey-data-action b { font-size: 1.05rem; }
  .journey-config-panel { padding: 14px; }
  .journey-config-top {
    align-items: center;
    gap: 10px;
  }
  .journey-config-top h2 { font-size: .98rem; }
  .journey-mode { width: min(250px, 62vw); }
  .journey-leg-card { padding: 12px; border-radius: 12px; }
  .journey-leg-head { margin-bottom: 10px; }
  .tools-sheet { align-items: end; justify-items: stretch; }
  .tools-panel {
    width: 100%;
    height: auto;
    max-height: min(88dvh, 760px);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid #292929;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 70px rgba(0,0,0,.5);
  }
  .survey-intro .intro-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .survey-intro #surveyBackBtn { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .journey-mode { width: 58vw; }
  .journey-mode span { padding-inline: 8px; font-size: .68rem; }
  .journey-data-strip { border-radius: 10px; }
}


/* ==========================================================================
   Onward v23.1 · tracking source + explicit DataMall controls
   ========================================================================== */
.tools-setting-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #272727;
  border-radius: 12px;
  background: #0a0a0a;
}
.tools-setting-copy {
  display: grid;
  gap: 3px;
}
.tools-setting-copy strong {
  color: #e6e6e6;
  font-size: .75rem;
  font-weight: 720;
}
.tools-setting-copy small,
.tools-setting-help {
  color: #707070;
  font-size: .60rem;
  font-weight: 560;
  line-height: 1.45;
}
.tools-setting-help {
  margin: 0;
}
.tools-setting-value {
  color: #9b9b9b;
  font-size: .60rem;
  font-weight: 700;
}
.tools-segmented {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tools-segmented span {
  min-height: 38px;
  display: grid;
  place-items: center;
}

.datamall-settings-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 11px !important;
  padding: 13px !important;
}
.datamall-status-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.datamall-status-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.datamall-key-state {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #121212;
  color: #777;
  font-size: .53rem;
  font-weight: 760;
  letter-spacing: .03em;
}
body.datamall-ready .datamall-key-state {
  background: #102018;
  color: #76cf98;
}
.datamall-primary-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.datamall-primary-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  white-space: normal;
  line-height: 1.2;
}
.datamall-key-editor {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
.datamall-key-editor-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.datamall-key-editor-actions .connect-button,
.datamall-key-editor-actions .button {
  min-height: 40px;
}
.datamall-remove-key {
  appearance: none;
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #686868;
  font: inherit;
  font-size: .56rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.datamall-remove-key:not(:disabled):hover { color: #aaa; }
.datamall-remove-key:disabled { opacity: .35; }

/* Existing ready-state CSS hides the API editor. Explicit key editing overrides it. */
body.datamall-ready:not(.datamall-key-editing) .tools-panel .datamall-key-editor {
  display: none !important;
}
body.datamall-ready.datamall-key-editing .tools-panel .datamall-key-editor {
  display: grid !important;
}
body.datamall-key-editing .datamall-primary-actions {
  opacity: .62;
}

/* Bus-only is intentionally a non-error PIDS state. */
.pids-status-line.bus {
  color: #b9b9b9;
}

@media (max-width: 420px) {
  .datamall-primary-actions {
    grid-template-columns: 1fr;
  }
  .datamall-key-editor-actions {
    grid-template-columns: 1fr;
  }
  .datamall-key-editor-actions #cancelKeyChangeBtn {
    width: 100%;
  }
}


/* ==========================================================================
   Onward v23.2 · wordmark + About sheet
   ========================================================================== */
body.about-open { overflow: hidden; }

.onward-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
.onward-header-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 218, 222, .12));
}
.onward-wordmark {
  display: inline-block;
  color: #f4f4f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3.5vw, 2.15rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
  text-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.onward-brand:hover .onward-wordmark { color: #fff; }
.onward-brand:focus-visible {
  outline: 2px solid #555;
  outline-offset: 6px;
  border-radius: 4px;
}
.onward-brand .version-tag {
  color: #555;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* The Journey setup footer now contains actions only. */
.journey-config-footer {
  justify-content: flex-end;
}
.journey-start-actions {
  margin-left: 0;
}

/* Footer wordmark doubles as the About entry point. */
.app-footer {
  justify-content: center;
}
.footer-about-button {
  appearance: none;
  border: 0;
  padding: 5px 10px;
  background: transparent;
  color: #777;
  font: inherit;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .01em;
  cursor: pointer;
}
.footer-about-button:hover,
.footer-about-button:focus-visible {
  color: #d0d0d0;
}
.footer-about-button:focus-visible {
  outline: 1px solid #444;
  outline-offset: 3px;
  border-radius: 5px;
}

/* About Onward */
.about-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483550;
  display: grid;
  align-items: end;
  justify-items: center;
}
.about-sheet[hidden] { display: none !important; }
.about-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(88dvh, 760px);
  display: grid;
  gap: 22px;
  padding: 26px 26px calc(26px + env(safe-area-inset-bottom));
  border: 1px solid #2a2a2a;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.045), transparent 40%),
    #0a0a0a;
  box-shadow: 0 -22px 70px rgba(0,0,0,.55);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.about-handle {
  justify-self: center;
  width: 54px;
  height: 5px;
  margin-top: -10px;
  border-radius: 999px;
  background: #4d4d4d;
}
.about-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #303030;
  border-radius: 999px;
  background: #151515;
  color: #bdbdbd;
  font-size: 1.45rem;
  line-height: 1;
}
.about-close:hover { background: #1b1b1b; color: #fff; }
.about-copy {
  display: grid;
  gap: 13px;
  padding-right: 42px;
}
.about-kicker {
  color: #777;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
}
.about-copy h2 {
  margin: 0;
  color: #f4f4f4;
  font-size: clamp(1.55rem, 4vw, 2rem);
  font-weight: 760;
  letter-spacing: -.035em;
}
.about-copy p {
  margin: 0;
  max-width: 58ch;
  color: #a5a5a5;
  font-size: .76rem;
  font-weight: 520;
  line-height: 1.65;
}
.about-copy .about-credit {
  color: #e0e0e0;
  font-size: .82rem;
  font-weight: 620;
}
.about-copy .about-disclaimer {
  color: #6f6f6f;
  font-size: .66rem;
}
.about-contact {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid #252525;
  color: inherit;
  text-decoration: none;
}
.about-contact:hover { background: #0e0e0e; }
.about-contact-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #303030;
  border-radius: 10px;
  background: #151515;
  color: #dedede;
  font-size: 1rem;
}
.about-contact > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.about-contact small {
  color: #6d6d6d;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.about-contact strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ededed;
  font-size: .72rem;
  font-weight: 650;
}
.about-contact b {
  color: #777;
  font-size: 1.1rem;
  font-weight: 450;
}

@media (min-width: 760px) {
  .about-sheet {
    align-items: center;
    padding: 24px;
  }
  .about-panel {
    border-bottom: 1px solid #2a2a2a;
    border-radius: 24px;
    padding-bottom: 26px;
  }
}

@media (max-width: 700px) {
  .topbar-inner {
    min-height: 72px;
  }
  .onward-wordmark {
    font-size: 2rem;
  }
  .about-panel {
    gap: 18px;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
  .about-copy {
    padding-right: 36px;
  }
  .about-copy p {
    font-size: .72rem;
  }
}

@media (max-width: 390px) {
  .onward-wordmark { font-size: 1.8rem; }
  .about-panel { padding-inline: 16px; }
  .about-contact { padding-inline: 8px; }
}


/* ==========================================================================
   Onward v23.4 · pre-boarding vehicle timetable
   ========================================================================== */
body.vehicle-timetable-open {
  overflow: hidden;
}

.moving-bus-block.has-timetable {
  padding-right: 43px;
}
.moving-bus-timetable-button {
  position: absolute;
  right: 15px;
  z-index: 32;
  width: 31px;
  height: 31px;
  transform: translateY(-50%);
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #4b6265;
  border-radius: 8px;
  background: #102124;
  color: #8adfe4;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.moving-bus-timetable-button.lane-1 { right: 23px; }
.moving-bus-timetable-button.lane-2 { right: 31px; }
.moving-bus-timetable-button:hover,
.moving-bus-timetable-button:focus-visible {
  outline: none;
  border-color: #8adfe4;
  background: #14292c;
  color: #c2f5f7;
}
.moving-bus-timetable-button:active {
  transform: translateY(-50%) scale(.94);
}
.moving-bus-timetable-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pre-boarding timetable is a temporary full-screen view. Polling and the
   underlying moving-block selector continue to run behind it. */
.vehicle-timetable-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  min-width: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  background: #030303;
  color: #f2f2f2;
  overflow: hidden;
}
.vehicle-timetable-sheet[hidden] {
  display: none !important;
}

.vehicle-timetable-toolbar {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  border-bottom: 1px solid #262626;
  background: #070707;
}
.vehicle-timetable-back {
  appearance: none;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 8px;
  border: 1px solid #303030;
  border-radius: 10px;
  background: #101010;
  color: #e5e5e5;
}
.vehicle-timetable-back span {
  margin-top: -2px;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 350;
}
.vehicle-timetable-back strong {
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}
.vehicle-timetable-back:hover,
.vehicle-timetable-back:focus-visible {
  outline: none;
  border-color: #555;
  background: #161616;
}

.vehicle-timetable-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.vehicle-timetable-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.vehicle-timetable-title small {
  color: #6f6f6f;
  font-size: .54rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.vehicle-timetable-title strong {
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eaeaea;
  font-size: .78rem;
  font-weight: 750;
}
.vehicle-timetable-state {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9f8e5c;
  font-size: .58rem;
  font-weight: 700;
  text-align: right;
}
.vehicle-timetable-state.live {
  color: #6bcf93;
}

.vehicle-timetable-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 16px 18px 12px;
  padding: 15px 16px;
  border: 1px solid #292929;
  border-radius: 13px;
  background: #090909;
}
.vehicle-timetable-summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.vehicle-timetable-summary span {
  color: #6d6d6d;
  font-size: .56rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vehicle-timetable-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0f0f0;
  font-size: .9rem;
  font-weight: 720;
}
.vehicle-timetable-board-eta {
  text-align: right;
}
.vehicle-timetable-board-eta strong {
  color: #8adfe4;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.vehicle-timetable-board-eta small {
  color: #8b8b8b;
  font-size: .62rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.vehicle-timetable-route-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 9px 24px;
  border-top: 1px solid #1e1e1e;
  border-bottom: 1px solid #1e1e1e;
  color: #686868;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vehicle-timetable-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.vehicle-timetable-row {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(92px, auto);
  align-items: center;
  padding: 0 22px 0 8px;
  border-bottom: 1px solid #121212;
  background: #030303;
}
.vehicle-timetable-row.passed {
  opacity: .38;
}
.vehicle-timetable-row.current {
  background: #080b0c;
}
.vehicle-timetable-row.boarding {
  background: #081113;
}
.vehicle-timetable-row.destination {
  background: #08100e;
}
.vehicle-timetable-line {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
}
.vehicle-timetable-line span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #343434;
}
.vehicle-timetable-row:first-child .vehicle-timetable-line span {
  top: 50%;
}
.vehicle-timetable-row:last-child .vehicle-timetable-line span {
  bottom: 50%;
}
.vehicle-timetable-line b {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #8b8b8b;
  border-radius: 50%;
  background: #030303;
}
.vehicle-timetable-row.current .vehicle-timetable-line b {
  border-color: #e2ce72;
  background: #e2ce72;
  box-shadow: 0 0 0 4px rgba(226,206,114,.08);
}
.vehicle-timetable-row.boarding .vehicle-timetable-line b {
  width: 13px;
  height: 13px;
  border-color: #8adfe4;
  background: #8adfe4;
  box-shadow: 0 0 0 4px rgba(138,223,228,.09);
}
.vehicle-timetable-row.destination .vehicle-timetable-line b {
  border-color: #77d8a0;
}

.vehicle-timetable-stop {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 10px 10px 0;
}
.vehicle-timetable-stop strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dedede;
  font-size: .73rem;
  font-weight: 690;
}
.vehicle-timetable-stop small {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #646464;
  font-size: .55rem;
  font-weight: 620;
}
.vehicle-timetable-stop small i {
  padding: 2px 5px;
  border-radius: 5px;
  background: #102124;
  color: #8adfe4;
  font-size: .44rem;
  font-style: normal;
  font-weight: 780;
  letter-spacing: .05em;
}
.vehicle-timetable-row.destination .vehicle-timetable-stop small i:last-child {
  background: #102019;
  color: #77d8a0;
}

.vehicle-timetable-time {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}
.vehicle-timetable-time strong {
  color: #f1f1f1;
  font-size: .76rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}
.vehicle-timetable-time span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #696969;
  font-size: .53rem;
  font-weight: 590;
  font-variant-numeric: tabular-nums;
}
.vehicle-timetable-row.boarding .vehicle-timetable-time strong {
  color: #8adfe4;
}

@media (min-width: 900px) {
  .vehicle-timetable-sheet {
    inset: 3vh max(6vw, calc((100vw - 1000px) / 2));
    height: 94vh;
    border: 1px solid #292929;
    border-radius: 18px;
    box-shadow: 0 25px 80px rgba(0,0,0,.65);
  }
}

@media (max-width: 680px) {
  .moving-bus-block.has-timetable {
    padding-right: 40px;
  }
  .moving-bus-timetable-button {
    right: 10px;
    width: 29px;
    height: 29px;
    border-radius: 7px;
  }
  .moving-bus-timetable-button.lane-1 { right: 16px; }
  .moving-bus-timetable-button.lane-2 { right: 22px; }

  .vehicle-timetable-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding-inline: 12px;
  }
  .vehicle-timetable-back {
    min-height: 40px;
    padding-right: 9px;
  }
  .vehicle-timetable-back strong {
    font-size: .62rem;
  }
  .vehicle-timetable-title {
    justify-content: flex-start;
  }
  .vehicle-timetable-title strong {
    max-width: 42vw;
  }
  .vehicle-timetable-state {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    padding-left: 2px;
    margin-top: -4px;
    text-align: left;
  }
  .vehicle-timetable-summary {
    margin: 12px;
    padding: 13px;
  }
  .vehicle-timetable-row {
    min-height: 68px;
    grid-template-columns: 32px minmax(0, 1fr) minmax(84px, auto);
    padding-right: 12px;
  }
  .vehicle-timetable-stop strong {
    font-size: .69rem;
  }
  .vehicle-timetable-time strong {
    font-size: .72rem;
  }
  .vehicle-timetable-time span {
    max-width: 118px;
    font-size: .49rem;
  }
  .vehicle-timetable-route-head {
    padding-inline: 18px;
  }
}


/* v23.4.2 · explicit service-hours state on the moving board */
.bus-board-status {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-bottom: 1px solid #202020;
  background: #090909;
}
.bus-board-status strong {
  color: #c6c6c6;
  font-size: .66rem;
  font-weight: 760;
}
.bus-board-status span {
  color: #747474;
  font-size: .56rem;
  font-weight: 600;
  line-height: 1.35;
}
.bus-board-status.service-ended {
  border-color: #2b2020;
  background:
    linear-gradient(rgba(80, 25, 25, .045), rgba(80, 25, 25, .045)),
    repeating-linear-gradient(
      135deg,
      rgba(220, 90, 90, 0) 0 24px,
      rgba(220, 90, 90, .035) 24px 29px
    );
}
.bus-board-status.service-ended strong { color: #c48b8b; }
.bus-board-status.service-ended span { color: #927070; }


@media (max-width: 520px) {
  .onward-header-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}