:root {
  --sl-blue: var(--brand);
  --sl-blue-dark: var(--brand-strong);
  --sl-navy: var(--ink);
  --sl-text: var(--text);
  --sl-muted: var(--muted);
  --sl-line: var(--border);
  --sl-surface: var(--surface);
  --sl-canvas: var(--canvas);
  --sl-focus: var(--focus);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --map-glass-surface: var(--control);
  --map-glass-surface-strong: var(--glass-reading-fill);
  --map-glass-highlight: rgba(255, 255, 255, .94);
  --map-glass-sheen: rgba(255, 255, 255, .38);
  --map-glass-refraction: rgba(61, 161, 255, .24);
  --map-glass-prism: rgba(255, 123, 205, .09);
  --map-glass-content-veil: rgba(255, 255, 255, .16);
  --map-glass-lens: radial-gradient(92% 24% at 8% -4%, var(--map-glass-highlight) 0 6%, var(--map-glass-sheen) 32%, transparent 78%), radial-gradient(64% 28% at 108% 108%, var(--map-glass-refraction), transparent 74%), radial-gradient(56% 24% at -8% 104%, var(--map-glass-prism), transparent 72%), radial-gradient(145% 115% at 50% 52%, var(--map-glass-content-veil) 0 34%, transparent 76%);
  --map-glass-divider: rgba(16, 40, 74, .14);
  --map-glass-hover: rgba(255, 255, 255, .38);
  --map-glass-pressed: rgba(230, 239, 249, .5);
  --map-glass-text: #10284a;
  --map-glass-text-shadow: none;
  --map-glass-backdrop: var(--liquid-glass-fallback-filter);
  --map-glass-backdrop-mobile: blur(5px) saturate(122%) brightness(1.01);
  --map-glass-shadow: 0 10px 28px rgba(13, 41, 78, .2), 0 2px 5px rgba(13, 41, 78, .1), inset 0 1.5px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(15, 64, 122, .18);
  color-scheme: light;
  font-family: var(--font-sans);
}

html[data-theme="dark"] {
  --sl-blue: #a8c5f7;
  --sl-blue-dark: #c2d5f8;
  --sl-focus: #a8c5f7;
  --link: #a8c5f7;
  --map-glass-surface: var(--control);
  --map-glass-surface-strong: var(--glass-reading-fill);
  --map-glass-highlight: rgba(255, 255, 255, .34);
  --map-glass-sheen: rgba(255, 255, 255, .13);
  --map-glass-refraction: rgba(68, 174, 255, .27);
  --map-glass-prism: rgba(255, 112, 203, .11);
  --map-glass-content-veil: rgba(0, 0, 0, .16);
  --map-glass-divider: rgba(255, 255, 255, .14);
  --map-glass-hover: rgba(15, 28, 45, .48);
  --map-glass-pressed: rgba(22, 38, 58, .58);
  --map-glass-text: #ffffff;
  --map-glass-text-shadow: none;
  --map-glass-backdrop: var(--liquid-glass-fallback-filter);
  --map-glass-backdrop-mobile: blur(5px) saturate(120%) brightness(.86);
  --map-glass-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3), inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(73, 162, 255, .16);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --map-glass-surface: rgba(243, 250, 255, .84);
    --map-glass-surface-strong: rgba(250, 253, 255, .98);
  }

  html[data-theme="dark"] {
    --map-glass-surface: rgba(8, 16, 27, .82);
    --map-glass-surface-strong: rgba(10, 19, 31, .98);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--sl-canvas);
  color: var(--sl-text);
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(64rem 32rem at 7% -8%, var(--ambient-blue), transparent 68%),
    radial-gradient(48rem 28rem at 96% 4%, var(--ambient-cyan), transparent 72%),
    radial-gradient(42rem 28rem at 48% 108%, var(--ambient-prism), transparent 74%),
    var(--sl-canvas);
  background-attachment: fixed;
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

::selection {
  background: var(--selection);
  color: var(--selection-text);
}

:focus-visible {
  outline: 3px solid var(--sl-focus);
  outline-offset: 2px;
}

.skipLink {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 12px;
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--sl-navy);
  font-weight: 650;
  transform: translateY(-160%);
}

.skipLink:focus {
  transform: translateY(0);
}

.serviceHeader {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  min-height: calc(52px + var(--safe-top));
  align-items: center;
  gap: 24px;
  padding: var(--safe-top) max(18px, calc((100vw - 1120px) / 2)) 0;
  isolation: isolate;
  background: var(--header-background);
  box-shadow: 0 1px 0 var(--glass-line), 0 9px 28px color-mix(in srgb, var(--shadow-color) 52%, transparent);
  color: var(--header-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-width: 100%;
  overflow: hidden;
}

.serviceBrand {
  display: inline-flex;
  min-width: max-content;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding-left: var(--safe-left);
  color: var(--header-text);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: .1px;
  text-decoration: none;
}

.serviceBrand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.serviceTabs {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  gap: 2px;
  overflow-x: auto;
  padding-right: var(--safe-right);
  scrollbar-width: none;
}

.serviceTabs::-webkit-scrollbar {
  display: none;
}

.serviceTab {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  min-inline-size: 44px;
  min-height: 44px;
  align-items: center;
  padding: 0 13px;
  color: var(--header-muted);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.serviceHeader::before,
.serviceHeader::after,
.searchSurface::before,
.searchSurface::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.serviceHeader::before,
.searchSurface::before {
  z-index: 0;
  background: var(--glass-optic-layer);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.searchSurface::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.serviceHeader::after,
.searchSurface::after {
  z-index: 1;
  background: var(--glass-specular-layer);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  opacity: .56;
}

.serviceHeader > *,
.searchSurface > * {
  position: relative;
  z-index: 2;
}

.serviceTab:hover {
  background: var(--header-control-hover);
  color: var(--header-text);
}

.serviceTab[aria-current="page"] {
  color: var(--header-active);
}

.serviceTab[aria-current="page"]::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--header-active);
  content: "";
}

.serviceMain {
  flex: 1 1 auto;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 28px max(20px, calc(var(--safe-right) + 12px)) calc(48px + var(--safe-bottom)) max(20px, calc(var(--safe-left) + 12px));
}

.serviceIntro {
  max-width: 720px;
}

.serviceIntro h1 {
  max-width: 24ch;
  margin: 0;
  color: var(--sl-navy);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.serviceTabNarrow {
  display: none;
}

.serviceIntro p {
  max-width: 66ch;
  margin: 14px 0 0;
  color: var(--sl-muted);
  font-size: 16px;
}

.searchSurface {
  position: relative;
  width: min(100%, 800px);
  min-width: 0;
  max-width: 100%;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  isolation: isolate;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--glass-shadow-compact);
}

.liquidGlassReading,
.searchSurface,
.autocompleteList,
.departureList,
.trafficList,
.journeyCard,
.emptyState,
.featuredStations,
.stationGuide,
.journeyMapLegend,
.journeyMapCanvas .leaflet-control-attribution,
.journeyMapCanvas .leaflet-tooltip.stationMapLabel,
.journeyMapCanvas .leaflet-tooltip.routeStopLabel,
.secondaryRouteStopIconWrap .routeStopLabel,
.stationLineLegend {
  background-color: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}

.fieldGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.stationSearchHelp {
  margin-top: 8px;
}

.journeyEndpoints {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* Autocomplete panels must escape the shared form-section paint order. The
   glass surface gives every direct child its own stacking context, so the
   endpoint/search rows need to sit above later date, time and action rows. */
.searchSurface > .fieldGrid,
.searchSurface > .journeyEndpoints {
  z-index: 3;
}

.journeyEndpoints > .iconButton {
  align-self: start;
  margin-top: 26px;
}

.journeyOptions {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(150px, .8fr) minmax(145px, .6fr) minmax(120px, .45fr);
  gap: 12px;
  margin-top: 18px;
}

.formActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.field {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.field label,
.fieldLabel {
  display: block;
  margin: 0 0 7px;
  color: var(--sl-navy);
  font-size: 13px;
  font-weight: 600;
}

.fieldHelp {
  margin: 7px 0 0;
  color: var(--sl-muted);
  font-size: 12px;
}

.textInput,
.selectInput {
  display: block;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
  min-height: 48px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass-reading-fill);
  color: var(--sl-navy);
  caret-color: var(--sl-blue);
  padding: 0 13px;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.textInput[type="search"] {
  padding-right: 48px;
  font-size: 16px;
}

.textInput[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.searchInputControl {
  position: relative;
  min-width: 0;
}

.searchClearButton {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 2px;
  display: inline-grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sl-muted);
  cursor: pointer;
  touch-action: manipulation;
}

.searchClearButton[hidden] {
  display: none;
}

.searchClearButton svg {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .searchClearButton:hover {
    background: var(--control-hover);
    color: var(--sl-navy);
  }
}

.journeyOptions input[type="date"],
.journeyOptions input[type="time"] {
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.journeyOptions input[type="date"]::-webkit-date-and-time-value,
.journeyOptions input[type="time"]::-webkit-date-and-time-value,
.journeyOptions input[type="date"]::-webkit-datetime-edit,
.journeyOptions input[type="time"]::-webkit-datetime-edit {
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: center;
}

.textInput::placeholder {
  color: var(--sl-muted);
  opacity: 1;
}

.textInput:hover,
.selectInput:hover {
  border-color: #7189a4;
}

.textInput:focus,
.selectInput:focus {
  border-color: var(--sl-blue);
  box-shadow: 0 0 0 3px rgba(15, 79, 184, .14);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.textInput[aria-invalid="true"] {
  border-color: #a6263e;
  box-shadow: 0 0 0 3px rgba(166, 38, 62, .12);
}

.autocompleteList {
  position: absolute;
  z-index: 50;
  right: 0;
  left: 0;
  max-height: 290px;
  margin: 6px 0 0;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass-reading-fill);
  box-shadow: var(--glass-shadow-compact);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
  list-style: none;
  scrollbar-color: var(--sl-muted) var(--surface-subtle);
  scrollbar-width: thin;
}

.autocompleteList[hidden] {
  display: none;
}

.autocompleteOption {
  display: grid;
  min-height: 48px;
  align-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--sl-text);
  cursor: pointer;
}

.autocompleteGroup {
  padding: 10px 10px 5px;
  color: var(--sl-muted);
  font-size: 11px;
  font-weight: 550;
}

.autocompleteOption:hover,
.autocompleteOption[aria-selected="true"] {
  background: var(--control-hover);
  color: var(--sl-navy);
}

.autocompleteOption strong,
.autocompleteOption span {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.autocompleteOption strong {
  font-size: 14px;
  font-weight: 500;
}

.autocompleteOption span {
  margin-top: 1px;
  color: var(--sl-muted);
  font-size: 12px;
}

.autocompleteOption[aria-disabled="true"] {
  color: var(--sl-muted);
  cursor: default;
}

.primaryButton,
.secondaryButton,
.iconButton {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.primaryButton {
  min-height: 48px;
  padding: 0 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sl-blue) 88%, white), var(--sl-blue));
  color: #ffffff;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--sl-blue) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.primaryButton:hover {
  background: var(--sl-blue-dark);
}

.secondaryButton,
.iconButton {
  padding: 0 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass-lens), var(--glass-fill);
  color: var(--link);
}

.secondaryButton:hover,
.iconButton:hover {
  background: var(--surface-subtle);
}

.iconButton {
  width: 44px;
  padding: 0;
}

.iconButton svg,
.secondaryButton svg {
  width: 19px;
  height: 19px;
}

.refreshButton .buttonIcon {
  flex: 0 0 auto;
  transform-origin: center;
}

.refreshButton.isLoading .buttonIcon,
.locationButton.isLoading .buttonIcon {
  animation: serviceSpin 800ms linear infinite;
}

.locationFieldAction {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 6px;
}

.locationTextButton {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--link);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.locationTextButton:hover {
  background: var(--control-hover);
}

.locationButton .buttonIcon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transform-origin: center;
}

.locationStatus {
  min-width: 0;
  color: var(--sl-muted);
  font-size: 12px;
  line-height: 1.4;
}

.locationStatus:empty {
  display: none;
}

.locationStatus[data-tone="error"] {
  color: #a6263e;
}

.locationStatus[data-tone="success"] {
  color: #187044;
}

.nearbyStations {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sl-line);
}

.nearbyStations > .locationStatus {
  display: block;
  margin: 8px 0 0;
}

.nearbyStations > .locationStatus:empty {
  display: none;
}

.nearbyStationList {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.nearbyStationList[hidden] {
  display: none;
}

.nearbyStationItem {
  min-width: 0;
}

.nearbyStationOption {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  align-content: center;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--sl-line);
  border-radius: 10px;
  background: var(--control);
  color: var(--sl-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.nearbyStationOption:hover,
.nearbyStationOption[aria-current="true"] {
  border-color: var(--sl-blue);
  background: var(--control-hover);
}

.nearbyStationOption strong,
.nearbyStationOption span {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.nearbyStationOption strong {
  color: var(--sl-navy);
  font-size: 14px;
  font-weight: 600;
}

.nearbyStationOption span {
  color: var(--sl-muted);
  font-size: 12px;
}

button:disabled {
  cursor: wait;
  opacity: .64;
}

.buttonSpinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: serviceSpin 700ms linear infinite;
}

@keyframes serviceSpin {
  to { transform: rotate(1turn); }
}

.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.notice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  max-width: 800px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-subtle);
  color: var(--sl-text);
  font-size: 13px;
}

.notice[hidden] {
  display: none;
}

.notice[data-tone="loading"] .noticeMark {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 2px solid rgba(15, 79, 184, .25);
  border-top-color: var(--sl-blue);
  border-radius: 50%;
  animation: serviceSpin 700ms linear infinite;
}

.notice[data-tone="warning"] {
  background: #fff2d9;
  color: #704500;
}

.notice[data-tone="error"] {
  background: #fdebed;
  color: #85172d;
}

.notice[data-tone="success"] {
  background: #e5f5ec;
  color: #175c3b;
}

.noticeMark {
  font-weight: 650;
  text-align: center;
}

.noticeText strong,
.noticeText span {
  display: block;
}

.noticeText strong {
  font-size: 13px;
}

.noticeText span {
  margin-top: 1px;
}

.resultsSection {
  margin-top: 28px;
  scroll-margin-top: calc(76px + var(--safe-top));
}

body[data-service-page="traffic"] #trafficSection {
  min-block-size: clamp(360px, 55svh, 620px);
}

body[data-service-page="traffic"] #trafficSection > .emptyState {
  min-block-size: 240px;
  align-content: center;
}

.trafficSkeleton {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  padding: 20px;
}

.trafficSkeleton + .trafficSkeleton {
  border-top: 1px solid var(--sl-line);
}

.trafficSkeleton::before,
.trafficSkeleton::after {
  display: block;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sl-muted) 18%, transparent);
  content: "";
}

.trafficSkeleton::before {
  width: min(64%, 420px);
  height: 14px;
}

.trafficSkeleton::after {
  width: min(88%, 620px);
  height: 10px;
  margin-top: 16px;
}

#trafficSection[aria-busy="true"] .trafficSkeleton::after {
  animation: traffic-skeleton-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes traffic-skeleton-pulse {
  to { opacity: .38; }
}

.resultsSection[hidden] {
  display: none;
}

.resultsHeading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.resultsHeading h2 {
  margin: 0;
  color: var(--sl-navy);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.resultsMeta {
  margin: 5px 0 0;
  color: var(--sl-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.departureList,
.journeyList,
.trafficList {
  margin: 0;
  padding: 0;
  background: var(--glass-reading-fill);
  border: 1px solid var(--glass-line);
  text-shadow: none;
  list-style: none;
}

.trafficLoadMore {
  display: block;
  margin: 18px auto 0;
}

.trafficLoadMore[hidden] {
  display: none;
}

.departureList,
.trafficList {
  border-radius: 16px;
  overflow: hidden;
}

.departureRow {
  display: grid;
  min-height: 72px;
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr) minmax(108px, auto);
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
}

.departureRow + .departureRow,
.trafficItem + .trafficItem {
  border-top: 1px solid var(--sl-line);
}

.lineBadge {
  display: inline-flex;
  min-width: 36px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 8px;
  border: var(--line-border-width, 1px) var(--line-border-style, solid) var(--line-border, transparent);
  background: var(--line-background, #243b5a);
  color: var(--line-text, #ffffff);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1;
}

.departureMain {
  min-width: 0;
}

.departureDestination {
  display: block;
  overflow: visible;
  color: var(--sl-navy);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.departureDetail {
  display: block;
  overflow: visible;
  margin-top: 3px;
  color: var(--sl-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.departureDeviation {
  display: block;
  margin-top: 4px;
  color: #8a4a00;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.departureTime {
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

.departureTime strong,
.departureTime span {
  display: block;
  font-variant-numeric: tabular-nums;
}

.departureTime strong {
  color: var(--sl-navy);
  font-size: 16px;
  font-weight: 600;
}

.departureTime strong.isLive {
  color: var(--sl-navy);
}

.departureTime span {
  margin-top: 2px;
  color: var(--sl-muted);
  font-size: 11px;
}

.departureTime .departureCurrentTime {
  color: var(--sl-navy);
  font-size: 12px;
  font-weight: 600;
}

.departureDelay {
  margin-right: 5px;
  color: #96351f;
  font-weight: 650;
}

.departureCurrentTime .departureDelay {
  display: inline;
  margin-top: 0;
}

.departureTime .departureScheduledTime {
  color: var(--sl-muted);
}

.departureScheduledTime s {
  text-decoration-thickness: 1.5px;
}

.modeTabs {
  display: flex;
  max-width: 100%;
  gap: 7px;
  margin: 0 0 14px;
  padding: 2px 2px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--sl-muted) transparent;
  scrollbar-width: thin;
}

.modeTabs[hidden] {
  display: none;
}

.modeTab {
  display: inline-flex;
  min-width: max-content;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--sl-line);
  border-radius: 999px;
  background: var(--sl-surface);
  color: var(--sl-navy);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.modeTab:hover {
  border-color: var(--sl-blue);
  background: var(--control-hover);
}

.modeTab[aria-selected="true"] {
  border-color: var(--sl-blue);
  background: var(--sl-blue);
  color: #ffffff;
}

.departureRow.isCancelled .departureDestination,
.departureRow.isCancelled .departureScheduledTime {
  color: #8b1f35;
  text-decoration: line-through;
}

.departureRow.isCancelled .departureCancelled {
  color: #8b1f35;
}

.deviationBlock {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.deviationMessage {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff2d9;
  color: #694100;
  font-size: 13px;
}

.sourceLanguageNote {
  margin: 0;
  color: var(--sl-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

.deviationBlock > .sourceLanguageNote {
  margin: 2px 2px 0;
}

.trafficSourceLanguage {
  margin-top: 6px;
}

.emptyState {
  max-width: 800px;
  padding: 34px 24px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: var(--glass-reading-fill);
  color: var(--sl-muted);
  text-shadow: none;
  text-align: center;
}

.emptyState[hidden] {
  display: none;
}

.emptyState strong,
.emptyState span {
  display: block;
}

.emptyState strong {
  color: var(--sl-navy);
  font-size: 17px;
}

.emptyState span {
  margin-top: 5px;
}

.journeyList {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.journeyPagination {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.journeyPagination--earlier {
  justify-content: flex-start;
  margin: 0 0 14px;
}

.journeyPagination--later {
  justify-content: flex-end;
}

.journeyPagination[hidden] {
  display: none;
}

.journeyPagination .secondaryButton {
  min-width: 0;
  flex: 0 1 auto;
}

.journeyCard {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: var(--glass-reading-fill);
  text-shadow: none;
}

.journeyCard details {
  min-width: 0;
  max-width: 100%;
}

.journeySummary {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(115px, auto) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 82px;
  padding: 15px 18px;
  color: var(--sl-text);
  cursor: pointer;
  list-style: none;
}

.journeySummary::-webkit-details-marker {
  display: none;
}

.journeySummary::after {
  width: 9px;
  height: 9px;
  border-right: 2px solid #47617f;
  border-bottom: 2px solid #47617f;
  content: "";
  transform: rotate(45deg) translateY(-3px);
  transition: transform 150ms ease-out;
}

.journeyCard details[open] .journeySummary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.journeyClock {
  color: var(--sl-navy);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.journeyClock span,
.journeyOverviewMeta {
  display: block;
  margin-top: 3px;
  color: var(--sl-muted);
  font-size: 11px;
  font-weight: 500;
}

.journeyClock .journeyCountdown {
  color: var(--sl-blue);
  font-size: 12px;
  font-weight: 500;
}

.journeyModes {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.journeyModes .lineBadge {
  min-width: 30px;
  min-height: 26px;
  font-size: 11px;
}

.journeyOverviewMeta {
  margin-top: 6px;
}

.journeyLegs {
  margin: 0 18px 18px;
  padding: 2px 0 0;
  border-top: 1px solid var(--sl-line);
  list-style: none;
}

.journeyLeg {
  display: block;
  padding: 14px 0;
}

.journeyLeg + .journeyLeg {
  border-top: 1px solid var(--sl-line);
}

.journeyLegTitle {
  margin: 0 0 8px 20px;
  color: var(--sl-text);
  font-size: 13px;
  font-weight: 500;
}

.journeyLegMessage {
  margin: 0 0 8px 20px;
  color: var(--sl-muted);
  font-size: 12px;
}

.journeyLegMessage {
  color: #744a00;
}

.journeyStops {
  margin: 0;
  padding: 0;
  list-style: none;
}

.journeyStopsDisclosure {
  position: relative;
  min-height: 44px;
  padding-left: 20px;
  list-style: none;
}

.journeyStopsDisclosure::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: color-mix(in srgb, var(--leg-color, #52749c) 68%, var(--sl-surface));
  content: "";
}

.journeyIntermediateDetails > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 6px;
  border-radius: 8px;
  color: var(--sl-blue-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  touch-action: manipulation;
}

.journeyIntermediateDetails > summary::-webkit-details-marker {
  display: none;
}

.journeyIntermediateDetails > summary svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
}

.journeyIntermediateHide {
  display: none;
}

.journeyIntermediateDetails[open] .journeyIntermediateShow {
  display: none;
}

.journeyIntermediateDetails[open] .journeyIntermediateHide {
  display: inline;
}

.journeyIntermediateDetails[open] > summary svg {
  transform: rotate(180deg);
}

.journeyIntermediateStops {
  margin: 0;
  width: calc(100% + 20px);
  margin-inline-start: -20px;
  padding: 0;
  list-style: none;
}

.journeyIntermediateStops .journeyStop:first-child::after {
  top: 0;
}

.journeyIntermediateStops .journeyStop:last-child::after {
  bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .journeyIntermediateDetails > summary:hover {
    background: var(--control-hover);
  }
}

.journeyStop {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 8px 0 8px 20px;
}

.journeyStop + .journeyStop {
  border-top: 1px solid color-mix(in srgb, var(--sl-line) 72%, transparent);
}

.journeyStop::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 2px solid var(--leg-color, #52749c);
  border-radius: 50%;
  background: var(--sl-surface);
  content: "";
  transform: translateY(-50%);
}

.journeyStop::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: color-mix(in srgb, var(--leg-color, #52749c) 68%, var(--sl-surface));
  content: "";
}

.journeyStop:first-child::after {
  top: 50%;
}

.journeyStop:last-child::after {
  bottom: 50%;
}

.journeyStop.is-origin::before,
.journeyStop.is-destination::before {
  width: 11px;
  height: 11px;
  left: 0;
  background: var(--leg-color, #52749c);
}

.journeyStopCopy,
.journeyStopTiming {
  min-width: 0;
}

.journeyStopCue,
.journeyStopName,
.journeyStopCurrentTime,
.journeyStopScheduledTime,
.journeyStopRelative {
  display: block;
}

.journeyStopCue {
  color: var(--sl-blue);
  font-size: 11px;
  font-weight: 500;
}

.journeyStopName {
  margin-top: 1px;
  overflow-wrap: anywhere;
  color: var(--sl-navy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.journeyStopTiming {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.journeyStopCurrentTime {
  color: var(--sl-navy);
  font-size: 13px;
  font-weight: 500;
}

.journeyStopCurrentTime.isLive {
  color: var(--sl-navy);
}

.journeyStopScheduledTime,
.journeyStopRelative {
  margin-top: 2px;
  color: var(--sl-muted);
  font-size: 11px;
  font-weight: 500;
}

.journeyStopScheduledTime s {
  text-decoration-thickness: 1.5px;
}

.journeyStopRelative {
  color: var(--sl-blue);
  font-weight: 500;
}

.journeyMapRegion {
  position: relative;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 18px 6px;
  overflow: hidden;
  border: 1px solid var(--sl-line);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  contain: layout paint;
  isolation: isolate;
}

.journeyMapRegion[hidden] {
  display: none;
}

.journeyMapCanvas {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 210px;
  height: clamp(210px, 30vw, 280px);
}

.journeyMapCanvas.leaflet-container {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
}

.journeyMapLegend {
  position: absolute;
  z-index: 500;
  top: 8px;
  right: 8px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--map-glass-highlight);
  border-radius: 10px;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--map-glass-text);
  text-shadow: var(--map-glass-text-shadow);
  font-size: 11px;
  line-height: 1.3;
  box-shadow: var(--map-glass-shadow);
}

.journeyMapRegion[data-state="error"] .journeyMapCanvas {
  display: none;
}

.journeyMapRegion[data-state="error"] .journeyMapLegend {
  position: static;
  max-width: none;
  padding: 14px;
  background: #fdebed;
  color: #85172d;
  box-shadow: none;
}

.journeyMapCanvas .leaflet-control-attribution {
  font: 400 11px/1.25 var(--font-sans);
}

.stationMapRegion {
  margin: 0 0 14px;
}

.stationMapRegion .journeyMapCanvas {
  min-height: 240px;
  height: clamp(240px, 36vw, 320px);
}

.stationMapRegion .journeyMapLegend {
  position: static;
  max-width: none;
  min-height: 34px;
  padding: 7px 10px;
  border-top: 1px solid var(--sl-line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.transitVehicleMarkerWrap,
.transitStopMarkerWrap,
.secondaryRouteStopIconWrap {
  border: 0;
  background: transparent;
}

.secondaryVehicleTarget {
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}

.secondaryVehicleTarget:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.secondaryVehicleTarget:focus-visible {
  outline: 3px solid var(--sl-focus);
  outline-offset: 2px;
}

.transitVehicleMarker {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  transform: rotate(var(--vehicle-bearing, 0deg));
  transform-origin: center;
  isolation: isolate;
}

.transitVehicleMarker::before {
  position: relative;
  z-index: 0;
  width: 30px;
  height: 30px;
  grid-area: 1 / 1;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  content: "";
  pointer-events: none;
  transition: background-color 140ms cubic-bezier(.16, 1, .3, 1), border-color 140ms cubic-bezier(.16, 1, .3, 1), box-shadow 140ms cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .secondaryVehicleTarget:hover .transitVehicleMarker::before {
    border-color: #073b83;
    border-color: color-mix(in srgb, var(--vehicle-color, var(--route-accent, #0b4da8)) 72%, #071d3b);
    background: rgba(250, 253, 255, .88);
    background: color-mix(in srgb, var(--map-glass-surface-strong) 76%, transparent);
    box-shadow: 0 3px 10px rgba(7, 29, 59, .26);
  }
}

.secondaryVehicleTarget[aria-pressed="true"] .transitVehicleMarker::before,
.secondaryVehicleTarget[data-vehicle-selected="true"] .transitVehicleMarker::before,
.transitVehicleMarker[data-selected="true"]::before {
  border-color: var(--vehicle-color, var(--route-accent, #0b4da8));
  background: rgba(250, 253, 255, .94);
  background: color-mix(in srgb, var(--map-glass-surface-strong) 88%, transparent);
  box-shadow: 0 0 0 2px #ffffff, 0 3px 11px rgba(7, 29, 59, .34);
}

html[data-theme="dark"] .secondaryVehicleTarget[aria-pressed="true"] .transitVehicleMarker::before,
html[data-theme="dark"] .secondaryVehicleTarget[data-vehicle-selected="true"] .transitVehicleMarker::before,
html[data-theme="dark"] .transitVehicleMarker[data-selected="true"]::before {
  background: rgba(10, 19, 31, .96);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .secondaryVehicleTarget:not([aria-pressed="true"]):hover .transitVehicleMarker::before {
    background: rgba(10, 19, 31, .9);
    background: color-mix(in srgb, var(--map-glass-surface-strong) 76%, transparent);
  }
}

.transitVehicleMarker svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  grid-area: 1 / 1;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .42));
}

.transitVehicleMarker[data-kind~="bus"] svg {
  width: 20px;
  height: 20px;
}

.transitVehicleMarker[data-kind~="boat"] svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .48));
}

.transitVehicleMarker[data-kind="unknown"] svg {
  width: 15px;
  height: 15px;
}

.transitVehicleMarker[data-heading="false"][data-kind="rail"] svg,
.transitVehicleMarker[data-heading="false"][data-kind="unknown"] svg {
  width: 30px;
  height: 30px;
}

.vehicleShapeFill,
.vehicleShapeDot {
  fill: var(--vehicle-color, var(--route-accent));
  stroke: color-mix(in srgb, var(--vehicle-color, var(--route-accent)) 99%, #000000);
  stroke-linejoin: round;
  stroke-width: 4;
}

.vehicleShapeDot {
  stroke-width: 2;
}

.transitVehicleMarker[data-kind="unknown"] .vehicleShapeFill {
  stroke: #0b1220;
  stroke-width: 5;
}

.transitVehicleMarker[data-kind~="bus"] .vehicleShapeFill {
  stroke: none;
}

.vehicleShapeBoat {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 14;
}

.transitVehicleMarker[data-kind="boat"] .vehicleShapeBoat {
  stroke: var(--vehicle-color, #007db8);
}

.transitStopMarker {
  display: flex;
  width: max-content;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.transitStopSymbol {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--stop-color, var(--route-accent));
  border-radius: 50%;
  background: #ffffff;
  color: #071a35;
  font: 700 12px/1 var(--font-sans);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.transitStopMarker[data-stop-shape="line-node"] .transitStopSymbol[data-kind="DOT"] {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--stop-color, #526a85);
  background: #ffffff;
  color: transparent;
  font-size: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

.transitStopMarker[data-stop-variant="journey"] {
  position: relative;
  isolation: isolate;
}

.transitStopMarker[data-stop-variant="journey"]::before {
  display: none;
}

.transitStopMarker[data-stop-variant="journey"] .transitStopSymbol[data-kind="DOT"] {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 1px solid #ffffff;
  background: var(--stop-color, #526a85);
  box-shadow: 0 0 0 1px #28415d, 0 2px 5px rgba(7, 29, 59, .32);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--stop-color, #526a85) 76%, #071d3b), 0 2px 5px rgba(7, 29, 59, .32);
}

.secondaryRouteStopIconWrap {
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px;
  box-sizing: border-box;
}

.secondaryRouteStopIconWrap .routeStopMarker {
  display: grid;
  width: max-content;
  min-width: 44px;
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 8px);
  min-height: 44px;
  grid-template-columns: 44px minmax(0, max-content);
  align-items: center;
  color: var(--map-glass-text);
  pointer-events: none;
  white-space: nowrap;
}

.secondaryRouteStopIconWrap.is-label-left .routeStopMarker {
  grid-template-columns: minmax(0, max-content) 44px;
  transform: translateX(calc(44px - 100%));
}

.secondaryRouteStopIconWrap .routeStopDot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--stop-accent, var(--route-accent, #0b4da8));
  box-shadow: 0 0 0 1px #28415d, 0 2px 5px rgba(7, 29, 59, .34);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--stop-accent, var(--route-accent, #0b4da8)) 78%, #071d3b), 0 2px 5px rgba(7, 29, 59, .34);
}

.secondaryRouteStopIconWrap.is-label-left .routeStopDot {
  grid-column: 2;
}

.secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="first"] .routeStopDot,
.secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="last"] .routeStopDot,
.secondaryRouteStopIconWrap .routeStopMarker[data-stop-terminal="first"] .routeStopDot,
.secondaryRouteStopIconWrap .routeStopMarker[data-stop-terminal="last"] .routeStopDot {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="first"] .routeStopDot::before,
.secondaryRouteStopIconWrap .routeStopMarker[data-stop-terminal="first"] .routeStopDot::before {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 4px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
  content: "";
  transform: translateX(-50%);
}

.secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="last"] .routeStopDot::after,
.secondaryRouteStopIconWrap .routeStopMarker[data-stop-terminal="last"] .routeStopDot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transform: translate(-50%, -50%);
}

.secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="current"] .routeStopDot {
  width: 16px;
  height: 16px;
  border-width: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--stop-accent, var(--route-accent, #0b4da8)), 0 3px 8px rgba(7, 29, 59, .4);
}

.secondaryRouteStopIconWrap .routeStopMarker[data-stop-label="hidden"] .routeStopLabel {
  display: none;
}

.secondaryRouteStopIconWrap .routeStopLabel {
  width: max-content;
  min-width: 0;
  max-width: min(var(--route-label-max, 230px), calc(100vw - var(--safe-left) - var(--safe-right) - 72px));
  grid-row: 1;
  grid-column: 2;
  overflow: hidden;
  padding: 3px 6px;
  border: 1px solid var(--map-glass-highlight);
  border-radius: 7px;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 7px rgba(7, 29, 59, .22);
  color: var(--map-glass-text);
  font: 550 11px/1.2 var(--font-sans);
  hyphens: none;
  overflow-wrap: normal;
  pointer-events: none;
  text-overflow: ellipsis;
  text-shadow: var(--map-glass-text-shadow);
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.secondaryRouteStopIconWrap.is-label-left .routeStopLabel {
  grid-column: 1;
  text-align: right;
}

.secondaryRouteStopIconWrap.leaflet-interactive {
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}

.secondaryRouteStopIconWrap.leaflet-interactive:focus-visible {
  outline: 3px solid var(--sl-focus);
  outline-offset: 2px;
}

.selectedVehicleRoute {
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.transitStopSymbol[data-kind="T"],
.transitStopSymbol[data-kind="J"] {
  border-color: #08087a;
  color: #08087a;
  font-size: 15px;
  font-weight: 850;
}

.transitStopSymbol[data-kind="B"] {
  font-size: 13px;
  font-weight: 850;
}

.transitStopSymbol + .transitStopSymbol {
  margin-left: -8px;
}

.transitStopSymbol[data-kind="BOAT"] svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.journeyMapCanvas .leaflet-bar a,
.journeyMapCanvas .leaflet-control-attribution,
.journeyMapCanvas .leaflet-tooltip {
  border-color: var(--map-glass-highlight);
  background: var(--map-glass-surface-strong);
  color: var(--map-glass-text);
}

.journeyMapCanvas .leaflet-tooltip::before {
  border-top-color: var(--map-glass-surface-strong);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--map-glass-highlight);
  border-radius: 14px;
  background: var(--map-glass-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before,
.journeyMapCanvas .leaflet-control-zoom.leaflet-bar::after {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before {
  z-index: 0;
  background: var(--map-glass-lens);
  -webkit-backdrop-filter: var(--map-glass-backdrop);
  backdrop-filter: var(--map-glass-backdrop);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar::after {
  z-index: 1;
  box-shadow:
    inset 0 1px 1px var(--map-glass-highlight),
    inset -1px 0 1px var(--liquid-glass-edge-warm),
    inset 0 -1px 1px var(--liquid-glass-edge-cool);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar a {
  position: relative;
  z-index: 2;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--map-glass-text);
  font: 450 24px/1 var(--font-sans);
  touch-action: manipulation;
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar a + a {
  border-top: 1px solid var(--map-glass-divider);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar a:hover {
  background: var(--map-glass-hover);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar a:active {
  background: var(--map-glass-pressed);
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--sl-focus);
  outline-offset: -3px;
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar a.leaflet-disabled {
  background: transparent;
  color: var(--sl-muted);
  cursor: default;
  opacity: .62;
}

.journeyMapCanvas .leaflet-control-attribution {
  border: 1px solid var(--map-glass-highlight);
  border-radius: 9px 0 0 0;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(13, 41, 78, .14);
  color: var(--map-glass-text);
}

.journeyMapCanvas .leaflet-control-attribution a {
  color: inherit;
  font-weight: 550;
  text-underline-offset: 2px;
}

.journeyMapCanvas .leaflet-tooltip.vehicleMapLabel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.journeyMapCanvas .leaflet-tooltip.vehicleMapLabel::before {
  display: none;
}

.vehicleMapLabelContent {
  display: inline-block;
  width: max-content;
  max-width: min(260px, calc(100vw - var(--safe-left) - var(--safe-right) - 32px));
  overflow: hidden;
  padding: 4px 8px;
  border: var(--vehicle-label-border, 1px solid rgba(0, 0, 0, .25));
  border-radius: 8px;
  background: var(--vehicle-label-background, var(--route-accent));
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  color: var(--vehicle-label-color, #ffffff);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  hyphens: none;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.journeyMapCanvas .leaflet-tooltip.stationMapLabel {
  width: max-content;
  max-width: min(240px, calc(100vw - var(--safe-left) - var(--safe-right) - 72px));
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid var(--map-glass-highlight);
  border-radius: 10px;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow);
  color: var(--map-glass-text);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.2;
  hyphens: none;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.journeyMapCanvas .leaflet-tooltip.stationMapLabel::before {
  display: none;
}

.journeyMapCanvas .leaflet-tooltip.routeStopLabel {
  width: max-content;
  max-width: min(230px, calc(100vw - var(--safe-left) - var(--safe-right) - 40px));
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid var(--map-glass-highlight);
  border-radius: 10px;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow);
  color: var(--map-glass-text);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.2;
  hyphens: none;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.journeyMapCanvas .leaflet-tooltip.routeStopLabel::before {
  display: none;
}

.stationLineLegend {
  display: flex;
  max-width: min(66vw, 420px);
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 5px 7px;
  border: 1px solid var(--map-glass-highlight);
  border-radius: 10px;
  background: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow);
  color: var(--map-glass-text);
  pointer-events: none;
}

.journeyMapCanvas .leaflet-control-zoom.leaflet-bar,
.journeyMapCanvas .leaflet-control-attribution,
.journeyMapCanvas .leaflet-tooltip.stationMapLabel,
.journeyMapCanvas .leaflet-tooltip.routeStopLabel,
.stationLineLegend {
  text-shadow: var(--map-glass-text-shadow);
}

.stationLineLegendLabel {
  margin-right: 2px;
  color: var(--sl-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.stationLineLegendItem {
  display: inline-flex;
  min-width: 24px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-bottom: 3px solid var(--station-line-color, var(--route-accent));
  color: var(--sl-navy);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1;
}

html[data-theme="dark"] .notice[data-tone="warning"],
html[data-theme="dark"] .deviationMessage {
  background: #2b2109;
  color: #ffd98a;
}

html[data-theme="dark"] .notice[data-tone="error"],
html[data-theme="dark"] .journeyMapRegion[data-state="error"] .journeyMapLegend {
  background: #2b0d14;
  color: #ff9caf;
}

html[data-theme="dark"] .notice[data-tone="success"] {
  background: #0b2518;
  color: #8ee0b2;
}

html[data-theme="dark"] .departureDeviation,
html[data-theme="dark"] .journeyLegMessage,
html[data-theme="dark"] .trafficUpcoming {
  color: #f2c66d;
}

html[data-theme="dark"] .departureTime strong,
html[data-theme="dark"] .departureTime .departureCurrentTime,
html[data-theme="dark"] .departureTime .departureCurrentTime.isLive {
  color: var(--sl-navy);
}

html[data-theme="dark"] .departureDelay {
  color: #ff9c86;
}

html[data-theme="dark"] .primaryButton,
html[data-theme="dark"] .primaryLinkButton {
  color: #020b14;
}

html[data-theme="dark"] .modeTab[aria-selected="true"] {
  color: #10284a;
}

html[data-theme="dark"] body[data-service-page="station"] .serviceTab[href="/station"],
html[data-theme="dark"] body[data-service-page="station"] .secondaryButton,
html[data-theme="dark"] body[data-service-page="station"] .nearbyStationOption strong,
html[data-theme="dark"] body[data-service-page="station"] .nearbyStationOption span {
  color: #fff;
}

html[data-theme="dark"] .locationStatus[data-tone="error"] {
  color: #ff9caf;
}

html[data-theme="dark"] .locationStatus[data-tone="success"] {
  color: #9ce4bd;
}

html[data-theme="dark"] .departureRow.isCancelled .departureDestination,
html[data-theme="dark"] .departureRow.isCancelled .departureScheduledTime,
html[data-theme="dark"] .departureRow.isCancelled .departureCancelled {
  color: #ff8da1;
}

html[data-theme="dark"] .trafficDetails {
  color: var(--sl-muted);
}

.trafficToolbar {
  display: grid;
  max-width: 1040px;
  grid-template-columns: minmax(145px, 1.15fr) repeat(3, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
}

.trafficToolbar .field {
  width: 100%;
}

.trafficItem {
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
  padding: 0;
}

.trafficDisclosure > summary {
  position: relative;
  padding: 15px 18px;
  padding-right: 46px;
  cursor: pointer;
  list-style: none;
}

.trafficDisclosure > summary::-webkit-details-marker {
  display: none;
}

.trafficDisclosure > summary::after {
  position: absolute;
  top: 21px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #526a85;
  border-bottom: 2px solid #526a85;
  content: "";
  transform: rotate(45deg);
  transition: transform 140ms ease-out;
}

.trafficDisclosure[open] > summary::after {
  transform: rotate(225deg);
}

.trafficSummary .trafficScopes {
  margin-top: 9px;
}

.trafficBody {
  padding: 0 18px 16px;
  border-top: 1px solid var(--sl-line);
}

.trafficItemHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.trafficItem h3 {
  margin: 0;
  color: var(--sl-navy);
  font-size: 17px;
  line-height: 1.25;
}

.trafficImportance {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 6px;
  background: #fff0d2;
  color: #734700;
  font-size: 11px;
  font-weight: 650;
}

.trafficDetails {
  max-width: 72ch;
  margin: 9px 0 0;
  color: #435b76;
  font-size: 14px;
  white-space: pre-line;
}

.trafficScopes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.scopeTag {
  padding: 4px 8px;
  border-radius: 7px;
  border: var(--line-border-width, 1px) var(--line-border-style, solid) var(--line-border, transparent);
  background: var(--line-background, #e8f0fa);
  color: var(--line-text, #1b508e);
  font-size: 11px;
  font-weight: 650;
}

.trafficMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 12px;
  color: var(--sl-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.trafficUpcoming {
  color: #78510a;
  font-weight: 600;
}

.serviceAttribution {
  max-width: 800px;
  margin: 28px 0 0;
  color: var(--sl-muted);
  font-size: 12px;
}

.serviceAttribution a {
  font-weight: 600;
}

.featuredStations,
.stationGuide {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: var(--glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  text-shadow: none;
}

.featuredStationsCopy h2,
.stationGuide h2,
.stationGuide h3 {
  margin: 0;
  color: var(--sl-navy);
  font-weight: 650;
  letter-spacing: -.02em;
}

.featuredStationsCopy h2,
.stationGuide h2 {
  font-size: clamp(21px, 2.4vw, 26px);
}

.stationGuide h3 {
  margin-top: 20px;
  font-size: 17px;
}

.featuredStationsCopy p,
.stationGuide p {
  max-width: 72ch;
  margin: 8px 0 0;
  color: var(--sl-muted);
}

.featuredStationLinks,
.stationGuideLinks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.featuredStationLinks a,
.stationGuideLinks a {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-fill-strong) 90%, transparent);
  color: var(--sl-navy);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.featuredStationLinks a:hover,
.stationGuideLinks a:hover {
  border-color: var(--sl-blue);
  color: var(--sl-blue-dark);
}

.stationFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.stationFact {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--sl-line);
  border-radius: var(--radius-sm);
}

.stationFact dt {
  color: var(--sl-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.stationFact dd {
  margin: 4px 0 0;
  color: var(--sl-navy);
  font-weight: 600;
}

.infoMain {
  width: min(100%, 820px);
}

.infoPage {
  max-width: 720px;
}

.infoIntro {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--sl-line);
}

.infoIntro .infoUpdated {
  margin-top: 12px;
  color: var(--sl-muted);
  font-size: 13px;
}

.infoContent > section {
  padding: 26px 0;
  border-bottom: 1px solid var(--sl-line);
}

.infoContent > section:last-child {
  border-bottom: 0;
}

.infoContent h2 {
  margin: 0 0 10px;
  color: var(--sl-navy);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.25;
}

.infoContent p {
  max-width: 68ch;
  margin: 0 0 12px;
}

.infoContent p:last-child {
  margin-bottom: 0;
}

.analyticsToken {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.serviceFooter {
  flex: 0 0 auto;
  margin-top: auto;
  background: var(--liquid-glass-reading-fill);
  box-shadow: 0 -1px 0 var(--glass-line), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.serviceFooterInner {
  display: flex;
  width: min(100%, 1040px);
  min-height: 48px;
  margin: 0 auto;
  padding: 8px max(16px, calc(var(--safe-right) + 10px)) calc(8px + var(--safe-bottom)) max(16px, calc(var(--safe-left) + 10px));
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--sl-muted);
  font-size: 13px;
}

.serviceFooterLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
}

.serviceFooterLinks a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 600;
}

.errorMain {
  display: grid;
  min-height: calc(100vh - 117px - var(--safe-top) - var(--safe-bottom));
  min-height: calc(100dvh - 117px - var(--safe-top) - var(--safe-bottom));
  place-items: center;
}

.errorPage {
  width: min(100%, 620px);
  padding: 36px 0;
}

.errorCode {
  margin: 0 0 6px;
  color: var(--sl-blue);
  font-size: clamp(52px, 10vw, 84px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
}

.errorPage h1 {
  margin: 0;
  color: var(--sl-navy);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.025em;
  line-height: 1.12;
}

.errorPage > p:not(.errorCode) {
  max-width: 56ch;
  margin: 16px 0 0;
  color: var(--sl-muted);
}

.errorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.primaryLinkButton,
.secondaryLinkButton {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  text-decoration: none;
}

.primaryLinkButton {
  background: var(--sl-blue);
  color: #ffffff;
}

.primaryLinkButton:hover {
  background: var(--sl-blue-dark);
}

.secondaryLinkButton {
  border: 1px solid var(--sl-line);
  background: var(--sl-surface);
  color: var(--sl-navy);
}

@media (max-width: 760px) {
  .resultsSection {
    scroll-margin-top: calc(64px + var(--safe-top));
  }

  .serviceHeader {
    display: flex;
    height: calc(48px + var(--safe-top));
    min-height: calc(48px + var(--safe-top));
    gap: 0;
    padding: var(--safe-top) 0 0 max(12px, var(--safe-left));
    overflow: hidden;
  }

  .serviceHeader .themeToggle {
    flex: 0 0 44px;
    margin-right: var(--safe-right);
  }

  .serviceHeader .languageSwitcher {
    margin-left: 0;
  }

  .serviceBrand {
    width: 44px;
    min-width: 44px;
    min-height: 48px;
    justify-content: center;
    margin-right: 4px;
    padding: 0;
  }

  .serviceBrand img {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }

  .serviceBrand span {
    display: none;
  }

  .serviceTabs {
    width: 0;
    min-width: 0;
    min-height: 48px;
    flex: 1 1 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px 0 0;
    scroll-padding-inline: 10px;
  }

  .serviceTab {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 13px;
  }

  .serviceMain {
    padding-top: 22px;
  }

  .searchSurface {
    padding: 18px;
  }

  .featuredStationLinks,
  .stationGuideLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journeyEndpoints {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .journeyEndpoints .field:last-child {
    grid-column: auto;
  }

  .journeyEndpoints .iconButton {
    position: absolute;
    z-index: 2;
    top: 25px;
    right: 3px;
    margin: 0;
    border: 1px solid var(--sl-line);
    background: var(--surface-raised);
  }

  .journeyEndpoints > .field:first-child .textInput {
    padding-right: 96px;
  }

  .journeyEndpoints > .field:first-child .searchClearButton {
    right: 46px;
  }

  .journeyOptions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .journeyOptions .field:last-child {
    grid-column: 1 / -1;
  }

  .trafficToolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .trafficToolbar .secondaryButton {
    width: 100%;
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .featuredStationLinks,
  .stationGuideLinks,
  .stationFacts {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 540px) {
  .serviceMain {
    padding-right: max(14px, calc(var(--safe-right) + 8px));
    padding-left: max(14px, calc(var(--safe-left) + 8px));
  }

  .fieldGrid {
    grid-template-columns: 1fr;
  }

  .fieldGrid .primaryButton {
    width: 100%;
  }

  .formActions {
    align-items: stretch;
    flex-direction: column;
  }

  .formActions .primaryButton {
    width: 100%;
  }

  .searchSurface {
    padding: 14px;
  }

  .journeyOptions {
    grid-template-columns: minmax(0, 1fr) minmax(0, .74fr);
    gap: 8px;
    margin-top: 13px;
  }

  .journeyOptions .field:first-child {
    grid-column: 1 / -1;
  }

  .journeyOptions .field:last-child {
    grid-column: auto;
  }

  .journeyOptions .field label {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .journeyOptions .textInput,
  .journeyOptions .selectInput {
    min-height: 44px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 16px;
  }

  .formActions {
    margin-top: 13px;
  }

  .formActions .fieldHelp {
    display: none;
  }

  .journeyPagination .secondaryButton {
    flex: 1 1 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  .locationFieldAction .locationStatus {
    flex-basis: 100%;
  }

  .resultsHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .departureRow {
    grid-template-columns: minmax(38px, auto) minmax(0, 1fr) minmax(88px, auto);
    gap: 9px;
    padding-right: 13px;
    padding-left: 13px;
  }

  .journeySummary {
    grid-template-columns: minmax(0, 1fr) 10px;
    gap: 10px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .journeySummary .journeyClock {
    grid-row: 1;
    grid-column: 1;
  }

  .journeySummary > :nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .journeySummary::after {
    grid-row: 1;
    grid-column: 2;
  }

  .journeyLegs {
    margin-right: 14px;
    margin-left: 14px;
  }

  .journeyLeg {
    padding: 12px 0;
  }

  .journeyStop {
    grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
    gap: 8px;
  }

  .journeyStopScheduledTime {
    white-space: nowrap;
  }

  .trafficToolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .trafficToolbar .secondaryButton {
    width: 100%;
    grid-column: 1 / -1;
  }

  .trafficItem {
    padding: 0;
  }

  .journeyMapRegion {
    margin-right: 14px;
    margin-left: 14px;
  }

  .stationMapRegion {
    margin-right: 0;
    margin-left: 0;
  }

  .serviceFooterInner {
    flex-wrap: wrap;
  }

  .serviceFooterLinks {
    justify-content: flex-end;
  }
}

@media (max-width: 420px) {
  .vehicleMapLabelContent,
  .journeyMapCanvas .leaflet-tooltip.stationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.routeStopLabel {
    max-width: min(140px, max(72px, calc(100vw - var(--safe-left) - var(--safe-right) - 72px)));
  }

  .secondaryRouteStopIconWrap .routeStopLabel {
    max-width: min(var(--route-label-max, 140px), min(140px, max(72px, calc(100vw - var(--safe-left) - var(--safe-right) - 72px))));
  }

  .trafficToolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .trafficToolbar .secondaryButton {
    grid-column: auto;
  }
}

/* URL displacement is isolated to the zoom shell background. Leaflet links,
   labels and every reading surface remain sharp and independently stacked. */
html[data-liquid-glass-tier="true"] [data-liquid-glass="compact"][data-liquid-glass-active="true"]::before {
  -webkit-backdrop-filter: var(--liquid-glass-filter, var(--map-glass-backdrop));
  backdrop-filter: var(--liquid-glass-filter, var(--map-glass-backdrop));
}

html[data-liquid-glass-tier="true"] [data-liquid-glass="compact"][data-liquid-glass-active="true"] > * {
  position: relative;
  z-index: 2;
  filter: none;
}

html[data-liquid-glass-tier="off"] .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #trafficSection[aria-busy="true"] .trafficSkeleton::after,
  .buttonSpinner,
  .notice[data-tone="loading"] .noticeMark,
  .refreshButton.isLoading .buttonIcon,
  .locationButton.isLoading .buttonIcon {
    animation: none;
  }

  .journeySummary::after,
  .trafficDisclosure > summary::after,
  .journeyIntermediateDetails > summary svg {
    transition: none;
  }

  .transitVehicleMarker::before {
    transition: none;
  }

  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 720px), (pointer: coarse), (update: slow) {
  :root,
  html[data-theme="dark"] {
    --map-glass-surface: var(--glass-reading-fill);
    --map-glass-surface-strong: var(--glass-reading-fill);
    --map-glass-backdrop: var(--map-glass-backdrop-mobile);
  }

  body {
    background-attachment: scroll;
  }

  .serviceHeader,
  .searchSurface,
  .serviceFooter {
    background: var(--glass-reading-fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .serviceHeader::before,
  .searchSurface::before,
  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar,
  .journeyMapCanvas .leaflet-control-attribution,
  .journeyMapLegend,
  .stationLineLegend,
  .journeyMapCanvas .leaflet-tooltip.stationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.routeStopLabel,
  .secondaryRouteStopIconWrap .routeStopLabel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (update: slow) {
  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (pointer: coarse) {
  .secondaryVehicleTarget,
  .secondaryRouteStopIconWrap {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    min-height: 44px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --map-glass-surface: #ffffff;
    --map-glass-surface-strong: #ffffff;
  }

  html[data-theme="dark"] {
    --map-glass-surface: #151619;
    --map-glass-surface-strong: #151619;
  }

  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar,
  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before,
  .journeyMapCanvas .leaflet-control-attribution,
  .journeyMapLegend,
  .stationLineLegend,
  .journeyMapCanvas .leaflet-tooltip.stationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.routeStopLabel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .secondaryRouteStopIconWrap .routeStopLabel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .secondaryVehicleTarget[aria-pressed="true"] .transitVehicleMarker::before,
  .secondaryVehicleTarget[data-vehicle-selected="true"] .transitVehicleMarker::before,
  .transitVehicleMarker[data-selected="true"]::before {
    background: var(--surface-raised);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .serviceHeader,
  .serviceFooter,
  .searchSurface,
  .departureList,
  .trafficList,
  .journeyCard,
  .emptyState,
  .featuredStations,
  .stationGuide,
  .autocompleteList {
    background: var(--glass-reading-fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .serviceHeader::before,
  .serviceHeader::after,
  .searchSurface::before,
  .searchSurface::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .serviceHeader::before,
  .serviceHeader::after,
  .searchSurface::before,
  .searchSurface::after,
  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before,
  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::after {
    display: none;
  }

  .serviceHeader,
  .searchSurface {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .textInput:focus,
  .selectInput:focus {
    outline: 2px solid CanvasText;
  }

  .serviceTab[aria-current="page"]::after,
  .lineBadge {
    border: 1px solid currentColor;
  }

  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar,
  .journeyMapCanvas .leaflet-control-attribution,
  .journeyMapLegend,
  .stationLineLegend,
  .vehicleMapLabelContent,
  .journeyMapCanvas .leaflet-tooltip.stationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.routeStopLabel,
  .secondaryRouteStopIconWrap .routeStopLabel {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar a {
    color: CanvasText;
  }

  .transitStopMarker[data-stop-variant="journey"]::before {
    display: none;
  }

  .transitStopMarker[data-stop-variant="journey"] .transitStopSymbol[data-kind="DOT"] {
    border-color: CanvasText;
    background: CanvasText;
    box-shadow: none;
  }

  .secondaryVehicleTarget:focus-visible {
    outline-color: Highlight;
  }

  .secondaryVehicleTarget[aria-pressed="true"] .transitVehicleMarker::before,
  .secondaryVehicleTarget[data-vehicle-selected="true"] .transitVehicleMarker::before,
  .transitVehicleMarker[data-selected="true"]::before {
    border-color: Highlight;
    background: Canvas;
    box-shadow: 0 0 0 2px CanvasText;
  }

  .secondaryRouteStopIconWrap .routeStopDot {
    border-color: Canvas;
    background: CanvasText;
    box-shadow: 0 0 0 1px CanvasText;
  }

  .secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="current"] .routeStopDot {
    box-shadow: 0 0 0 2px Canvas, 0 0 0 4px Highlight;
  }

  .secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="first"] .routeStopDot::before,
  .secondaryRouteStopIconWrap .routeStopMarker[data-stop-terminal="first"] .routeStopDot::before,
  .secondaryRouteStopIconWrap .routeStopMarker[data-stop-role="last"] .routeStopDot::after,
  .secondaryRouteStopIconWrap .routeStopMarker[data-stop-terminal="last"] .routeStopDot::after {
    background: Canvas;
  }
}

@media (prefers-contrast: more) {
  .vehicleMapLabelContent,
  .journeyMapCanvas .leaflet-tooltip.stationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.routeStopLabel,
  .secondaryRouteStopIconWrap .routeStopLabel {
    border-width: 2px;
  }

  .transitStopMarker[data-stop-variant="journey"] .transitStopSymbol[data-kind="DOT"],
  .secondaryRouteStopIconWrap .routeStopDot {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #071d3b;
  }

  .journeyMapCanvas .leaflet-control-zoom.leaflet-bar::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}