:root {
  --header-h: 52px;
  --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);
  /* Opaque fallbacks are intentionally readable before backdrop-filter support is known. */
  --map-glass-control: var(--control);
  --map-glass-control-hover: var(--surface-raised);
  --map-glass-control-active: var(--surface-subtle);
  --map-glass-panel: var(--glass-reading-fill);
  --map-glass-label: var(--glass-reading-fill);
  --map-glass-border: rgba(255, 255, 255, .82);
  --map-glass-hairline: rgba(16, 40, 74, .16);
  --map-glass-highlight: rgba(255, 255, 255, .88);
  --map-glass-sheen: rgba(255, 255, 255, .78);
  --map-glass-tint: rgba(61, 139, 255, .18);
  --map-glass-edge: rgba(100, 164, 255, .3);
  --map-glass-refraction: rgba(77, 177, 255, .22);
  --map-glass-prism: rgba(255, 137, 211, .12);
  --map-glass-depth: rgba(8, 37, 78, .2);
  --map-glass-shadow: 0 18px 48px rgba(13, 41, 78, .24), 0 3px 8px rgba(13, 41, 78, .12), inset 0 1.5px 0 rgba(255, 255, 255, .96), inset 1px 0 0 rgba(255, 255, 255, .46), inset 0 -1px 0 rgba(7, 25, 52, .26);
  --map-glass-shadow-compact: 0 10px 28px rgba(13, 41, 78, .2), 0 2px 5px rgba(13, 41, 78, .11), inset 0 1.5px 0 rgba(255, 255, 255, .96), inset 1px 0 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(7, 25, 52, .24);
  --map-icon-glass: rgba(244, 249, 255, .52);
  --map-glass-content-veil: rgba(255, 255, 255, .18);
  --map-glass-filter-control: var(--liquid-glass-fallback-filter);
  --map-glass-filter-panel: none;
  --map-glass-filter-mobile: blur(5px) saturate(122%) brightness(1.01);
  --map-glass-text-shadow: none;
  --map-glass-secondary: #294663;
}

html[data-theme="dark"] {
  --map-glass-control: var(--control);
  --map-glass-control-hover: var(--surface-raised);
  --map-glass-control-active: var(--surface-subtle);
  --map-glass-panel: var(--glass-reading-fill);
  --map-glass-label: var(--glass-reading-fill);
  --map-glass-border: rgba(255, 255, 255, .2);
  --map-glass-hairline: rgba(255, 255, 255, .12);
  --map-glass-highlight: rgba(255, 255, 255, .13);
  --map-glass-sheen: rgba(255, 255, 255, .2);
  --map-glass-tint: rgba(63, 137, 235, .2);
  --map-glass-edge: rgba(151, 198, 255, .24);
  --map-glass-refraction: rgba(91, 190, 255, .2);
  --map-glass-prism: rgba(255, 128, 209, .1);
  --map-glass-depth: rgba(0, 0, 0, .38);
  --map-glass-shadow: 0 20px 52px rgba(0, 0, 0, .62), 0 3px 9px rgba(0, 0, 0, .36), inset 0 1.5px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(111, 169, 246, .18);
  --map-glass-shadow-compact: 0 11px 30px rgba(0, 0, 0, .54), 0 2px 6px rgba(0, 0, 0, .3), inset 0 1.5px 0 rgba(255, 255, 255, .26), inset 1px 0 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(111, 169, 246, .16);
  --map-icon-glass: rgba(20, 29, 43, .56);
  --map-glass-content-veil: rgba(0, 0, 0, .18);
  --map-glass-filter-control: var(--liquid-glass-fallback-filter);
  --map-glass-filter-panel: none;
  --map-glass-filter-mobile: blur(5px) saturate(120%) brightness(.86);
  --map-glass-text-shadow: none;
  --map-glass-secondary: #b8c2cf;
}

html {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-top));
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  background:
    radial-gradient(72rem 34rem at 8% -12%, var(--ambient-blue), transparent 66%),
    radial-gradient(48rem 30rem at 96% 8%, var(--ambient-cyan), transparent 70%),
    radial-gradient(42rem 28rem at 48% 108%, var(--ambient-prism), transparent 72%),
    var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  touch-action: manipulation;
}

.leaflet-container {
  font-family: var(--font-sans);
}

.skipToContent {
  position: fixed;
  z-index: 10003;
  top: calc(6px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  display: flex;
  min-height: 36px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--control);
  box-shadow: 0 4px 14px var(--shadow-color);
  color: var(--link);
  font-size: 14px;
  font-weight: 700;
  line-height: 36px;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--safe-top) - 12px));
}

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

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

/* --- App header --- */
#appHeader {
  --focus: #ffd43b;
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  min-height: calc(var(--header-h) + var(--safe-top));
  align-items: center;
  gap: 24px;
  padding: var(--safe-top) max(18px, calc((100vw - 1120px) / 2)) 0;
  box-sizing: border-box;
  isolation: isolate;
  background: var(--header-background);
  color: var(--header-text);
  z-index: 10001; /* ovanför chip-dock (9999/10000) */
  box-shadow: none;
  max-width: 100%;
  overflow: hidden;
}

#appHeader::before,
#appHeader::after {
  display: none;
  content: none;
}

#appHeader > * {
  position: relative;
  z-index: 2;
}

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

.appHeaderBrand:focus-visible,
.appTab:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.appHeaderLogo {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.appHeaderTitle {
  margin: 0;
  font: inherit;
  color: var(--header-text);
}

/* Kartan ligger under den fasta headern */
.homeMain {
  position: relative;
  display: flow-root;
}

#map {
  height: calc(100vh - var(--header-h) - var(--safe-top));
  height: calc(100dvh - var(--header-h) - var(--safe-top));
  width: 100%;
  margin-top: calc(var(--header-h) + var(--safe-top));
  touch-action: none;
  background: #dbe8f2;
}

.mapLiveStatus {
  position: absolute;
  z-index: 9001;
  top: calc(var(--header-h) + var(--safe-top) + 64px);
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100% - var(--safe-left) - var(--safe-right) - 20px);
  min-height: 38px;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  padding: 8px 13px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass-lens), var(--glass-fill-strong);
  box-shadow: var(--glass-shadow-compact);
  color: var(--ink);
  font: 650 13px/1.35 var(--font-sans);
  overflow-wrap: anywhere;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-backdrop-filter: var(--glass-filter-compact);
  backdrop-filter: var(--glass-filter-compact);
}

.mapLiveStatus[hidden] {
  display: none;
}

.mapLiveStatusMark {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #a44708;
  box-shadow: 0 0 0 4px color-mix(in srgb, #d66a16 19%, transparent);
}

.mapLiveStatus[data-state="retrying"] .mapLiveStatusMark {
  background: var(--link);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 18%, transparent);
}

html[data-theme="dark"] .mapLiveStatusMark {
  background: #ffc46b;
}

html[data-theme="dark"] .mapLiveStatus[data-state="retrying"] .mapLiveStatusMark {
  background: var(--link);
}

.mapAboutCue {
  position: absolute;
  z-index: 9000;
  top: calc(100vh - var(--safe-bottom) - 54px);
  top: calc(100dvh - var(--safe-bottom) - 54px);
  left: 50%;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--control);
  box-shadow: 0 5px 18px var(--shadow-color);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transform: translateX(-50%);
  touch-action: manipulation;
}

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

.mapAboutCue:active {
  background: var(--surface-subtle);
}

.mapAboutCue svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.mapReturnCue {
  position: fixed;
  z-index: 10002;
  right: max(14px, calc(var(--safe-right) + 10px));
  bottom: max(14px, calc(var(--safe-bottom) + 10px));
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(.2, .8, .2, 1);
  touch-action: manipulation;
}

.mapReturnCue.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.mapReturnCue svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.homeEditorial {
  position: relative;
  z-index: 10000;
  scroll-margin-top: 0;
  background:
    radial-gradient(60rem 32rem at 8% 4%, var(--ambient-blue), transparent 70%),
    radial-gradient(46rem 26rem at 96% 28%, var(--ambient-prism), transparent 72%),
    var(--canvas);
  color: var(--text);
}

.homeEditorialInner {
  width: min(100% - 48px, 1040px);
  margin: 0 auto;
}

.homeEditorialLead {
  max-width: 790px;
  padding: 84px 0 64px;
}

.homeEditorialLead h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.homeEditorialLead p {
  max-width: 66ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
}

.homeEditorialSection {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(36px, 7vw, 88px);
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

.homeEditorialSection h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-wrap: balance;
}

.homeEditorialCopy {
  max-width: 70ch;
}

.homeEditorialCopy > :first-child {
  margin-top: 0;
}

.homeEditorialCopy > :last-child {
  margin-bottom: 0;
}

.homeEditorialCopy p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.homeEditorial a,
.homeFooter a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.homeEditorial a {
  color: var(--link);
}

@media (hover: hover) and (pointer: fine) {
  .homeEditorial a:hover {
    color: color-mix(in srgb, var(--link) 72%, var(--ink));
  }
}

.homeToolList > div {
  padding: 0 0 22px;
}

.homeToolList > div + div {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.homeToolList > div:last-child {
  padding-bottom: 0;
}

.homeToolList h3 {
  margin: 0 0 7px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.homeToolList h3 a {
  color: var(--link);
}

.homeFaq details {
  border-bottom: 1px solid var(--border);
}

.homeFaq details:first-child {
  border-top: 1px solid var(--border);
}

.homeFaq summary {
  min-height: 52px;
  padding: 15px 4px;
  box-sizing: border-box;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.35;
}

.homeFaq summary::marker {
  color: var(--brand);
}

.homeFaq details[open] summary {
  color: var(--link);
}

.homeFaq details p {
  max-width: 64ch;
  margin: -2px 0 18px;
  padding-left: 20px;
}

.homeFooter {
  position: relative;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px max(24px, calc((100% - 1040px) / 2 + 24px));
  border-top: 1px solid var(--border);
  background: var(--canvas);
  color: var(--muted);
  font-size: 14px;
}

.homeFooter p {
  margin: 0;
}

.homeFooter nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.homeFooter a {
  color: var(--link);
}

.mapAboutCue:focus-visible,
.mapReturnCue:focus-visible,
.homeEditorial a:focus-visible,
.homeEditorial summary:focus-visible,
.homeFooter a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

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

.noScriptNotice {
  position: fixed;
  z-index: 10002;
  top: calc(var(--header-h) + var(--safe-top) + 20px);
  left: 50%;
  width: min(calc(100% - 32px), 520px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 12px 36px var(--shadow-color);
  color: var(--text);
  transform: translateX(-50%);
}

.noScriptNotice h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.noScriptNotice p {
  margin: 0 0 12px;
}

.noScriptNotice a {
  color: var(--ink);
  font-weight: 700;
}

/* With scripting disabled, show the readable guide without an empty map or
   a fixed notice covering its text. With scripting enabled noscript is text. */
body:has(noscript > .noScriptNotice) #map,
body:has(noscript > .noScriptNotice) .mapAboutCue,
body:has(noscript > .noScriptNotice) .mapReturnCue {
  display: none;
}

body:has(noscript > .noScriptNotice) .noScriptNotice {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  box-sizing: border-box;
  margin: calc(var(--header-h) + var(--safe-top) + 20px) auto 0;
}

body:has(noscript > .noScriptNotice) .homeEditorialLead {
  padding-top: 32px;
}

.vehicleCanvas {
  contain: strict;
}

.trainIconWrap {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  cursor: pointer;
}

.trainMarker{
  transition: transform 160ms ease-out;
}

@keyframes trainPopIn {
  0%   { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

.trainMarkerPopWrap{
  animation: trainPopIn 220ms ease-out;
}

.trainDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #111;
  box-sizing: border-box;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.15);
}

.trainLabelWrap{
  pointer-events:none;
}

.trainLabel {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;

  padding: 4px 8px;
  border-radius: 8px;

  color: #fff;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.trainLabelPos{
  position: relative;
  transform: translate(-50%, calc(-100% - 17px)); /* 10px gap ovanför tåget */
  transform-origin: 0 0;
  display: inline-block;
}

/* Hover och klick använder samma tydliga etikett. */
.trainLabelAction{
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.28);
}

/* --- User location  --- */
.userLocDot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #1a73e8;           /* Blå */
  border: 3px solid #ffffff;     /* vit ring */
  box-shadow:
    0 2px 8px rgba(0,0,0,0.25),
    0 0 0 1px rgba(26,115,232,0.35);
}

.userLocWrap {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.stopIconWrap {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- Fordonsdetaljer --- */
.vehicleDetailPanel {
  --route-accent-text: #ffffff;
  position: fixed;
  z-index: 9998;
  top: calc(var(--header-h) + var(--safe-top) + 58px);
  right: calc(12px + var(--safe-right));
  bottom: 12px;
  width: min(360px, calc(100vw - 24px - var(--safe-left) - var(--safe-right)));
  color: var(--ink);
  font: 400 14px/1.4 var(--font-sans);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 180ms cubic-bezier(.2, .8, .2, 1);
}

.vehicleDetailPanel[hidden] {
  display: none;
}

.vehicleDetailPanel.is-open {
  opacity: 1;
  transform: translateX(0);
}

.vehicleDetailSurface {
  display: flex;
  height: 100%;
  max-height: 100%;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(15, 31, 58, .28);
}

.vehicleDetailGrabber {
  display: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.vehicleDetailHeader {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 10px 10px 10px 14px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 45, 82, .12);
}

.vehicleDetailLine {
  display: inline-flex;
  min-width: 42px;
  height: 34px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 9px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
}

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

.vehicleDetailHeading h2,
.vehicleDetailHeading p {
  margin: 0;
}

.vehicleDetailHeading h2 {
  overflow: visible;
  color: #10284a;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.vehicleDetailHeading p {
  overflow: visible;
  margin-top: 3px;
  color: #52657e;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.vehicleDetailIconButton {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #17345a;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .vehicleDetailIconButton:hover {
    background: #eaf1fb;
  }
}

.vehicleDetailIconButton:active {
  background: #dce8f8;
}

.vehicleDetailIconButton svg {
  width: 22px;
  height: 22px;
}

.vehicleDetailScroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px calc(10px + var(--safe-bottom));
  scrollbar-color: #7690b2 #edf2f8;
  scrollbar-width: thin;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.vehicleDetailScroll::-webkit-scrollbar {
  width: 8px;
}

.vehicleDetailScroll::-webkit-scrollbar-track {
  background: #edf2f8;
}

.vehicleDetailScroll::-webkit-scrollbar-thumb {
  border: 2px solid #edf2f8;
  border-radius: 999px;
  background: #7690b2;
}

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

.vehicleDetailMessage {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid #e2e9f1;
  color: #4d6078;
  font-size: 13px;
  line-height: 1.35;
}

.vehicleDetailMessage.is-error {
  color: #7d2233;
}

.vehicleDetailMessage > span:not(.vehicleDetailSpinner) {
  min-width: 0;
  flex: 1 1 auto;
}

.vehicleDetailSpinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid #d8e1eb;
  border-color: color-mix(in srgb, var(--route-accent) 24%, #d8e1eb);
  border-top-color: var(--route-accent);
  border-radius: 50%;
  animation: vehicleDetailSpin 760ms linear infinite;
}

.vehicleAccessControl {
  width: min(620px, calc(100vw - 24px));
  margin: 0 0 18px 10px !important;
  color: #10284a;
  font: 500 14px/1.35 var(--font-sans);
}

.vehicleAccessActions {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  white-space: normal;
}

.vehicleAccessActions > .vehicleAccessToggle,
.vehicleAccessActions > .mapJourneyLink,
.vehicleAccessActions > .mapNearbyStationsLink,
.vehicleAccessActions > .mapAboutCue {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.vehicleAccessActions > a > span {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.15;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.vehicleAccessToggle {
  white-space: nowrap;
}

.vehicleAccessActions .mapAboutCue {
  position: static;
  top: auto;
  left: auto;
  min-width: 44px;
  justify-content: center;
  flex: 0 0 auto;
  transform: none;
}

.vehicleAccessToggle,
.vehicleAccessClose,
.vehicleAccessItem,
.vehicleAccessMore {
  border: 1px solid #b8c6d8;
  background: #fff;
  color: #10284a;
  font: inherit;
}

.vehicleAccessToggle {
  display: inline-flex;
  min-height: 44px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: 0 16px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(16, 40, 74, .18);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vehicleAccessToggle[aria-expanded="true"] {
  border-color: #0d5cab;
  color: #10284a;
}

.vehicleAccessPanel {
  width: min(360px, 100%);
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid #cad5e3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 34px rgba(16, 40, 74, .24);
}

.vehicleAccessHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 4px 14px;
}

.vehicleAccessHeader h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}

.vehicleAccessClose {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.vehicleAccessStatus {
  margin: 0;
  padding: 0 14px 8px;
  color: #53677f;
  font-size: 12px;
  font-weight: 500;
}

.vehicleAccessList {
  overflow-y: auto;
  max-height: min(44vh, 360px);
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
}

@media (max-height: 480px) and (orientation: landscape) {
  .vehicleAccessList {
    max-height: min(30dvh, 120px);
  }
}

.vehicleAccessItem,
.vehicleAccessMore {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border-width: 1px 0 0;
  border-color: #dce4ee;
  text-align: left;
  cursor: pointer;
}

.vehicleAccessMore {
  color: var(--link);
  font-weight: 650;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .vehicleAccessItem:hover,
  .vehicleAccessMore:hover {
    background: #eef5fc;
  }
}

.vehicleAccessToggle:focus-visible,
.vehicleAccessClose:focus-visible,
.vehicleAccessItem:focus-visible,
.vehicleAccessMore:focus-visible {
  outline: 3px solid #f2c94c;
  outline-offset: 2px;
}

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

.vehicleDetailStop {
  position: relative;
  display: grid;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  padding: 11px 0 11px 24px;
  border-bottom: 1px solid #e6edf4;
}

.vehicleDetailStopLink {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}

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

.vehicleDetailStop.is-linked .vehicleDetailStopName {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .vehicleDetailStop.is-linked:hover {
    background: color-mix(in srgb, var(--route-accent) 8%, var(--surface-raised));
  }

  .vehicleDetailStop.is-linked:hover .vehicleDetailStopName {
    text-decoration-color: currentColor;
  }
}

.vehicleDetailStop::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--route-accent);
  border-color: color-mix(in srgb, var(--route-accent) 52%, #ffffff);
  border-radius: 50%;
  background: #fff;
  content: "";
  transform: translateY(-50%);
}

.vehicleDetailStop::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: var(--route-accent);
  background: color-mix(in srgb, var(--route-accent) 24%, #ffffff);
  content: "";
}

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

.vehicleDetailMessage + .vehicleDetailStop::after {
  top: 50%;
}

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

.vehicleDetailStop.is-passed::after {
  background: var(--route-accent);
}

.vehicleDetailStop.is-current::after,
.vehicleDetailStop.is-next::after {
  background: linear-gradient(to bottom, var(--route-accent) 0 50%, #d4deea 50% 100%);
  background: linear-gradient(
    to bottom,
    var(--route-accent) 0 50%,
    color-mix(in srgb, var(--route-accent) 24%, var(--surface-raised)) 50% 100%
  );
}

.vehicleDetailStop.is-next.is-after-current::after {
  background: var(--route-accent);
  background: color-mix(in srgb, var(--route-accent) 24%, var(--surface-raised));
}

.vehicleDetailStop.is-passed::before {
  border-color: var(--route-accent);
  background: var(--route-accent);
}

.vehicleDetailStop.is-current::before {
  border-color: var(--route-accent);
  background: var(--route-accent);
  box-shadow: 0 2px 5px rgba(15, 79, 184, .28);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--route-accent) 32%, transparent);
}

.vehicleDetailStop.is-next::before {
  width: 10px;
  height: 10px;
  left: 1px;
  border-color: var(--route-accent);
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 79, 184, .2);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--route-accent) 24%, transparent);
}

.vehicleDetailStopContent {
  min-width: 0;
}

.vehicleDetailStopNameRow {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
}

.vehicleDetailStopName {
  display: block;
  min-width: 0;
  overflow: visible;
  flex: 1 1 12ch;
  color: #193351;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.vehicleDetailHeading a {
  color: inherit;
  text-underline-offset: 2px;
}

.vehicleDetailStopBadge {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 5px;
  background: #eaf0f6;
  background: color-mix(in srgb, var(--route-accent) 14%, #ffffff);
  color: #10284a;
  color: color-mix(in srgb, var(--route-accent) 72%, #10284a);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.vehicleDetailStopBadge.is-current {
  background: var(--route-accent);
  color: var(--route-accent-text);
}

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

#appHeader > .languageSwitcher {
  margin-left: 0;
}

#appHeader > .themeToggle {
  flex: 0 0 44px;
  margin-left: 0;
}

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

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

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

@media (hover: hover) and (pointer: fine) {
  .appTab:hover {
    background: var(--header-control-hover);
    color: var(--header-text);
  }
}

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

.appTabNarrow,
.serviceTabNarrow {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --header-h: 96px;
  }

  #appHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-rows: 48px 48px;
    height: calc(var(--header-h) + var(--safe-top));
    min-height: calc(var(--header-h) + var(--safe-top));
    gap: 0;
    padding: var(--safe-top) var(--safe-right) 0 max(12px, var(--safe-left));
    overflow: hidden;
  }

  #appHeader > .themeToggle {
    grid-area: 1 / 3;
    flex: 0 0 44px;
    margin-right: 0;
  }

  #appHeader > .languageSwitcher {
    grid-area: 1 / 2;
    margin-left: 0;
  }

  .appHeaderBrand {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 48px;
    justify-content: flex-start;
    margin-right: 4px;
    padding: 0;
  }

  .appHeaderTitle {
    display: block;
  }

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

  .appTabs {
    width: 100%;
    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;
  }

  .appTab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0 4px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .appTabs .appTab:first-child {
    display: inline-flex;
  }
}

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

.vehicleDetailStopMeta {
  display: block;
  margin-top: 2px;
  color: #60738b;
  font-size: 11px;
  line-height: 1.2;
}

.vehicleDetailStopTimes {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.vehicleDetailStopTime {
  color: #10284a;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.vehicleDetailStopTime.is-live {
  color: #10284a;
}

.vehicleDetailStopPredictionTime,
.vehicleDetailStopScheduledTime,
.vehicleDetailStopDelay {
  margin-top: 1px;
  color: #63758b;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.vehicleDetailStopScheduledTime.is-replaced {
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.vehicleDetailStopDelay.is-late {
  color: #9a3b23;
  font-weight: 500;
}

.vehicleDetailStopDelay.is-early {
  color: #246244;
  font-weight: 500;
}

.vehicleDetailStop.is-passed .vehicleDetailStopName {
  color: #53677f;
}

.vehicleDetailStop.is-passed .vehicleDetailStopTime,
.vehicleDetailStop.is-passed .vehicleDetailStopScheduledTime,
.vehicleDetailStop.is-passed .vehicleDetailStopDelay {
  color: #53677f;
}

.vehicleDetailStop.is-passed .vehicleDetailStopDot,
.vehicleDetailStop.is-passed .vehicleDetailStopLine {
  opacity: .56;
}

.vehicleDetailStop.is-skipped .vehicleDetailStopName,
.vehicleDetailStop.is-skipped .vehicleDetailStopTime {
  color: #60738b;
  text-decoration: line-through;
}

.vehicleDetailRetry {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #b6c6d9;
  border-radius: 8px;
  background: #ffffff;
  color: #10284a;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .vehicleDetailRetry:hover {
    background: #eef5fc;
  }
}

.vehicleDetailRetry:active {
  background: #dfeaf7;
}

.vehicleDetailPanel button:focus-visible,
.vehicleDetailPanel a:focus-visible {
  outline: 3px solid #f2c94c;
  outline-offset: 2px;
}

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

.chipDock {
  position: absolute;
  z-index: 9999;
  top: calc(var(--header-h) + var(--safe-top) + 10px);
  right: calc(10px + var(--safe-right));
  bottom: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  pointer-events: none;
}

.mapFilterToolbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

.transportFilterTrigger,
.mapClearFiltersButton,
.mapLocationButton {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #163454;
  box-shadow: 0 4px 16px rgba(16, 40, 74, .18);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.transportFilterTrigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
}

.mapClearFiltersButton {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #163454;
  box-shadow: 0 4px 16px rgba(16, 40, 74, .18);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .transportFilterTrigger:hover,
  .mapClearFiltersButton:hover,
  .mapLocationButton:hover {
    background: #f2f6fa;
  }
}

.transportFilterTrigger:active,
.mapClearFiltersButton:active,
.mapLocationButton:active {
  background: #e6edf5;
}

.transportFilterTrigger > svg:first-child,
.mapLocationButton > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.transportFilterSummary {
  min-width: 0;
  max-width: 96px;
  flex: 0 0 auto;
  overflow: hidden;
  color: #60738b;
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transportFilterChevron {
  width: 17px;
  height: 17px;
  transition: transform 160ms ease-out;
}

.chipDock.is-open .transportFilterChevron {
  transform: rotate(180deg);
}

.mapLocationButton {
  position: absolute;
  z-index: 4;
  top: auto;
  right: 0;
  bottom: calc(38px + var(--safe-bottom));
  display: inline-flex;
  width: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mapLocationButton.is-loading > svg {
  animation: locationButtonPulse 900ms ease-in-out infinite alternate;
}

.mapLocationButton:disabled {
  cursor: wait;
  opacity: 1;
}

@keyframes locationButtonPulse {
  to { transform: scale(.82); opacity: .55; }
}

.transportFilterSurface {
  position: absolute;
  top: 52px;
  right: 0;
  width: min(360px, calc(100vw - 20px - var(--safe-left) - var(--safe-right)));
  max-height: calc(100dvh - var(--header-h) - var(--safe-top) - 74px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(15, 31, 58, .25);
  pointer-events: auto;
  scrollbar-color: #8195ad #edf2f7;
  scrollbar-width: thin;
}

.transportFilterSurface[hidden],
.transportFilterBackdrop[hidden],
.subPanel[hidden] {
  display: none;
}

.transportFilterGrabber {
  display: none;
}

.transportFilterHeader {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.transportFilterHeader h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.transportFilterClose {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #17345a;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .transportFilterClose:hover {
    background: #edf3f9;
  }
}

.transportFilterClose svg {
  width: 21px;
  height: 21px;
}

.chipSearchWrap {
  display: flex;
  min-height: 44px;
  align-items: center;
  margin: 0;
  border: 1px solid #b9c7d7;
  border-radius: 9px;
  background: #ffffff;
}

.mapLineSearch {
  width: 100%;
  height: 44px;
  min-height: 44px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(16, 40, 74, .18);
  pointer-events: auto;
}

.mapSearchHost {
  position: relative;
  width: clamp(210px, 32vw, 360px);
  min-width: 0;
  max-width: 360px;
  flex: 1 1 280px;
  pointer-events: auto;
}

.mapLineSearch .chipSearch {
  width: 0;
  padding-right: 2px;
  padding-left: 10px;
  font-size: 16px;
}

.chipSearch::-webkit-search-cancel-button {
  display: none;
}

.chipSearchClear[hidden] {
  display: none;
}

.chipSearchClear svg {
  width: 19px;
  height: 19px;
}

.mapLineSearch.is-modal-blocked,
.mapClearFiltersButton.is-modal-blocked,
.mapLocationButton.is-modal-blocked {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.chipSearchWrap:focus-within {
  border-color: #0f4fb8;
  box-shadow: 0 0 0 2px rgba(15, 79, 184, .16);
}

.chipSearch {
  min-width: 0;
  min-height: 44px;
  align-self: stretch;
  flex: 1 1 auto;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  caret-color: #0f4fb8;
  color: #172f4c;
  font: 400 16px/1.2 var(--font-sans);
}

.chipSearch::placeholder {
  color: #65778d;
}

.chipSearchBtn {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #173f70;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .chipSearchBtn:hover {
    background: #edf3f9;
  }
}

.chipSearchIcon {
  width: 18px;
  height: 18px;
}

.mapFilterSearchResults {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  width: min(380px, calc(100vw - 16px - var(--safe-left) - var(--safe-right)));
  max-height: min(56dvh, 420px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  border: 1px solid var(--map-glass-border, var(--border));
  border-radius: 16px;
  background: var(--glass-reading-fill);
  box-shadow: var(--map-glass-shadow);
  color: var(--ink);
  scrollbar-color: color-mix(in srgb, var(--ink) 42%, transparent) transparent;
  scrollbar-width: thin;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
  animation: mapFilterSearchIn 150ms cubic-bezier(.16, 1, .3, 1) both;
}

.mapFilterSearchResults[hidden] {
  display: none;
}

.mapFilterSearchGroup {
  padding: 8px 9px 5px;
  color: var(--map-glass-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
}

.mapFilterSearchOption {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 48px 3px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.mapFilterSearchOption[aria-selected="true"] {
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--link) 16%, transparent), transparent 72%),
    color-mix(in srgb, var(--map-glass-control-hover) 66%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--map-glass-highlight) 54%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .mapFilterSearchOption:hover {
    background:
      linear-gradient(105deg, color-mix(in srgb, var(--link) 13%, transparent), transparent 72%),
      color-mix(in srgb, var(--map-glass-control-hover) 54%, transparent);
  }
}

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

.mapFilterSearchSymbols {
  display: flex;
  width: 48px;
  min-width: 0;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 3px;
}

.mapFilterSearchSymbols .mapSiteMode {
  --map-site-size: 18px;
  flex: 0 0 18px;
}

.mapFilterSearchLineNumber {
  display: inline-flex;
  min-width: 32px;
  height: 28px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.mapFilterSearchAccent {
  align-self: stretch;
  width: 3px;
  min-height: 30px;
  border-radius: 99px;
}

.mapFilterSearchCopy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.mapFilterSearchLabel,
.mapFilterSearchDetail {
  display: block;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.mapFilterSearchLabel {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: normal;
}

.mapFilterSearchOption.is-site .mapFilterSearchLabel {
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.mapFilterSearchDetail {
  display: block;
  color: var(--map-glass-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  white-space: normal;
}

.mapFilterSearchEmpty {
  margin: 0;
  padding: 14px 12px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

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

@keyframes mapFilterSearchIn {
  from {
    opacity: .72;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filterQuickActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.uiMiniBtn {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #b9c7d7;
  border-radius: 6px;
  background: #ffffff;
  color: #24415f;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .uiMiniBtn:hover {
    background: #f1f5f9;
  }
}

.uiMiniBtn[aria-pressed="true"] {
  border-color: #0f4fb8;
  background: #eaf2fd;
  color: #10284a;
}

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

.uiChipBtn {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.uiChipFace {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cbd6e2;
  border-radius: 6px;
  background: #ffffff;
  color: #304761;
  font: 500 13px/1.15 var(--font-sans);
  text-align: left;
}

.uiChipFace::before {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 3px;
  background: var(--chip-color);
  content: "";
}

.uiChipBtn.is-inactive .uiChipFace,
.uiChipBtn.is-unselected .uiChipFace {
  background: #f5f7f9;
  color: #607187;
}

.uiChipBtn.is-inactive .uiChipFace::before,
.uiChipBtn.is-unselected .uiChipFace::before {
  opacity: .42;
}

.uiChipBtn[aria-pressed="true"] .uiChipFace {
  border-color: #0f4fb8;
  background: #eaf2fd;
  color: #10284a;
}

.uiChipBtn.is-activeMode .uiChipFace {
  outline: 2px solid #0f4fb8;
  outline-offset: 2px;
}

.uiChipFace.is-near {
  color: #007A36;
}

.uiChipFace.is-near::before {
  box-sizing: border-box;
  border: 2px dashed #009A44;
  background: #ffffff;
}

.subPanel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #dce4ed;
}

.subPanelTitle {
  display: block;
  margin-bottom: 9px;
  color: #243b59;
  font-size: 13px;
  font-weight: 500;
}

.subPanelChoices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subPanelChoices .uiChipBtn {
  flex: 1 1 72px;
}

/* Skåne category names need room for both their color marker and label. */
.subPanelChoices[data-mode="bus"] .uiChipBtn {
  flex-basis: 130px;
}

.transportFilterTrigger:focus-visible,
.mapClearFiltersButton:focus-visible,
.mapLocationButton:focus-visible,
.transportFilterClose:focus-visible,
.chipSearchBtn:focus-visible,
.uiMiniBtn:focus-visible,
.uiChipBtn:focus-visible {
  outline: 3px solid #f2c94c;
  outline-offset: 2px;
}

.chipSearch::selection,
.transportFilterSurface ::selection {
  background: #c7dcfa;
  color: #0d2b54;
}

.transportFilterBackdrop {
  display: none;
}

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

  .trainMarker {
    transition: none;
  }

  .trainMarkerPopWrap {
    animation: none !important;
  }

  .transportFilterChevron {
    transition: none;
  }

  .mapLocationButton.is-loading > svg {
    animation: none;
  }

  .vehicleDetailPanel {
    transition: none;
  }

  .vehicleDetailSpinner {
    animation: none;
  }
}

@media (max-width: 720px) {
  .homeEditorialInner {
    width: min(100% - 32px, 1040px);
  }

  .homeEditorialLead {
    padding: 56px 0 44px;
  }

  .homeEditorialLead h1 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .homeEditorialLead p {
    margin-top: 18px;
    font-size: 1rem;
  }

  .homeEditorialSection {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 36px 0;
  }

  .homeEditorialSection h2 {
    max-width: 24ch;
  }

  .homeFooter {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px calc(14px + var(--safe-bottom));
  }

  .leaflet-control-zoom {
    display: none;
  }

  .vehicleDetailPanel {
    top: auto;
    right: calc(8px + var(--safe-right));
    bottom: calc(8px + var(--safe-bottom));
    left: calc(8px + var(--safe-left));
    width: auto;
    max-height: 58dvh;
    transform: translateY(12px);
  }

  .vehicleDetailPanel.is-open {
    transform: translateY(0);
  }

  .vehicleDetailSurface {
    height: auto;
    max-height: 58dvh;
  }

  .vehicleDetailGrabber {
    display: flex;
    width: 64px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 auto;
    cursor: ns-resize;
    touch-action: none;
  }

  .vehicleDetailGrabber > span {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #9caabd;
  }

  .vehicleDetailHeader {
    min-height: 58px;
    padding-top: 6px;
  }

  .vehicleDetailScroll {
    padding-top: 0;
  }

  .chipDock {
    top: calc(var(--header-h) + var(--safe-top) + 8px);
    right: calc(8px + var(--safe-right));
  }

  .transportFilterBackdrop:not([hidden]) {
    position: fixed;
    z-index: 1;
    top: calc(var(--header-h) + var(--safe-top));
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(16, 40, 74, .24);
    pointer-events: auto;
  }

  .transportFilterSurface {
    position: fixed;
    z-index: 2;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: min(78dvh, 680px);
    padding: 4px calc(14px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left));
    border-radius: 18px 18px 0 0;
  }

  .transportFilterGrabber {
    display: block;
    width: 38px;
    height: 4px;
    margin: 6px auto 2px;
    border-radius: 999px;
    background: #9caabd;
  }

  .transportFilterHeader {
    margin-bottom: 8px;
  }
}

/* --- Map interaction polish, map sites and theme surfaces --- */

.leaflet-control-attribution {
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 12px);
  box-sizing: border-box;
  margin: 0 calc(4px + var(--safe-right)) calc(4px + var(--safe-bottom)) 0 !important;
  padding: 2px 5px !important;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent) !important;
  box-shadow: 0 2px 7px var(--shadow-color);
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

.leaflet-control-attribution a {
  color: var(--link) !important;
  text-underline-offset: 2px;
}

.mapAboutCue {
  background: var(--control);
  box-shadow: 0 5px 18px var(--shadow-color);
  color: var(--ink);
  transition: opacity 140ms ease-out, visibility 140ms ease-out;
}

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

.is-detail-visible .mapAboutCue,
.is-vehicle-list-visible .mapAboutCue,
.is-transport-filter-visible .mapAboutCue {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.is-transport-filter-visible .mapLocationButton {
  visibility: hidden;
}

.mapSiteMarkerWrap,
.mapSiteChipWrap {
  border: 0 !important;
  background: transparent !important;
}

.mapSiteMarkerWrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.mapSiteMarkerWrap:focus-visible {
  border-radius: 999px;
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.mapSiteMarker {
  display: flex;
  align-items: center;
  gap: 1px;
}

.mapSiteMode {
  display: inline-flex;
  width: var(--map-site-size, 18px);
  height: var(--map-site-size, 18px);
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--map-site-size, 18px);
  box-sizing: border-box;
  border: clamp(1px, calc(var(--map-site-size, 18px) * .1), 2px) solid currentColor;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink);
  font: 800 clamp(7px, calc(var(--map-site-size, 18px) * .56), 9px)/1 var(--font-sans);
  letter-spacing: -.02em;
}

.mapSiteMode svg {
  width: 14px;
  height: 14px;
}

.mapSiteMode.is-metro {
  border-color: #08087a;
  background: #ffffff;
  color: #08087a;
  font-size: clamp(8px, calc(var(--map-site-size, 18px) * .63), 10px);
  font-weight: 900;
}

.mapSiteMode.is-train {
  border-color: #08087a;
  background: #ffffff;
  color: #08087a;
  font-size: clamp(8px, calc(var(--map-site-size, 18px) * .63), 10px);
  font-weight: 900;
}

.mapSiteEntrance {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, #08087a 54%, var(--surface-raised));
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: #08087a;
}

.mapSiteEntrance svg {
  width: 11px;
  height: 11px;
}

.mapSiteMode.is-tram {
  border-color: #516174;
  background: #ffffff;
  color: #516174;
}

.mapSiteMode.is-ship {
  border-color: #073b83;
  background: #ffffff;
  color: #073b83;
}

.mapSiteMode.is-bus {
  border-color: #17633d;
  background: #ffffff;
  color: #124d31;
  font-size: 11px;
  transform: scale(.9);
}

.mapSiteChip {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: min(260px, calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
  min-height: 44px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0 11px 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--control);
  box-shadow: 0 7px 22px var(--shadow-color);
  color: var(--ink);
  font: 500 13px/1.2 var(--font-sans);
  text-decoration: none;
  transform: translate(-50%, calc(-100% - 13px));
  touch-action: manipulation;
}

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

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

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

.mapSiteChip svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.routeStopMarker {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
}

.stopIconWrap.leaflet-interactive .routeStopMarker {
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
}

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

@media (hover: hover) and (pointer: fine) {
  .stopIconWrap.leaflet-interactive:hover .routeStopLabel {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

.routeStopDot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  box-sizing: border-box;
  border: 2px solid var(--stop-accent);
  border-radius: 50%;
  background: var(--surface-raised);
  background-clip: content-box;
  box-shadow: 0 2px 6px var(--shadow-color);
}

.routeStopLabel {
  width: max-content;
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 91%, transparent);
  box-shadow: 0 1px 4px var(--shadow-color);
  color: var(--text);
  font: 500 11px/1.2 var(--font-sans);
}

.vehicleDetailPanel {
  bottom: calc(34px + var(--safe-bottom));
  color: var(--text);
}

.vehicleDetailSurface,
.vehicleDetailHeader {
  background: var(--surface-raised);
}

.vehicleDetailSurface {
  box-shadow: 0 14px 38px var(--shadow-color);
}

.vehicleDetailHeader {
  box-shadow: 0 1px 0 var(--border);
}

.vehicleDetailHeading h2,
.vehicleDetailStopName,
.vehicleDetailStopTime {
  color: var(--ink);
}

.vehicleDetailHeading p,
.vehicleDetailStopMeta,
.vehicleDetailStopPredictionTime,
.vehicleDetailStopScheduledTime,
.vehicleDetailStopDelay {
  color: var(--muted);
}

.vehicleDetailIconButton,
.vehicleDetailRetry {
  background: var(--control);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .vehicleDetailIconButton:hover,
  .vehicleDetailRetry:hover {
    background: var(--control-hover);
  }
}

.vehicleDetailIconButton:active,
.vehicleDetailRetry:active {
  background: var(--surface-subtle);
}

.vehicleDetailScroll {
  scrollbar-color: var(--muted) var(--surface-subtle);
}

.vehicleDetailScroll::-webkit-scrollbar-track {
  background: var(--surface-subtle);
}

.vehicleDetailScroll::-webkit-scrollbar-thumb {
  border-color: var(--surface-subtle);
  background: var(--muted);
}

.vehicleDetailMessage,
.vehicleDetailStop {
  border-color: var(--border);
}

.vehicleDetailMessage {
  color: var(--muted);
}

.vehicleDetailStop::before {
  background: var(--surface-raised);
}

.vehicleDetailStop.is-next::before {
  background: var(--surface-raised);
}

.vehicleDetailStop.is-current {
  background: color-mix(in srgb, var(--route-accent) 13%, var(--surface-raised));
}

.vehicleDetailStop.is-next:not(.is-current) {
  background: color-mix(in srgb, var(--route-accent) 5%, var(--surface-raised));
}

.vehicleDetailStop.is-passed .vehicleDetailStopName,
.vehicleDetailStop.is-passed .vehicleDetailStopTime,
.vehicleDetailStop.is-passed .vehicleDetailStopPredictionTime,
.vehicleDetailStop.is-passed .vehicleDetailStopScheduledTime,
.vehicleDetailStop.is-passed .vehicleDetailStopDelay,
.vehicleDetailStop.is-skipped .vehicleDetailStopName,
.vehicleDetailStop.is-skipped .vehicleDetailStopTime {
  color: var(--muted);
}

.vehicleDetailStop:not(.is-passed):not(.is-skipped) .vehicleDetailStopTime {
  color: var(--ink);
}

.vehicleDetailStopBadge {
  background: color-mix(in srgb, var(--route-accent) 14%, var(--surface-raised));
  color: color-mix(in srgb, var(--route-accent) 72%, var(--ink));
}

.vehicleAccessControl {
  display: flex;
  width: min(620px, calc(100vw - var(--safe-left) - var(--safe-right) - 16px));
  align-items: flex-start;
  flex-direction: column-reverse;
  gap: 8px;
  margin: 0 0 calc(4px + var(--safe-bottom)) calc(8px + var(--safe-left)) !important;
  transition: opacity 140ms ease-out, visibility 140ms ease-out;
}

.vehicleAccessPanel {
  margin-top: 0;
  background: var(--surface-raised);
  box-shadow: 0 12px 34px var(--shadow-color);
}

.vehicleAccessToggle,
.vehicleAccessClose,
.vehicleAccessItem,
.vehicleAccessMore {
  border-color: var(--border);
  background: var(--control);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .vehicleAccessItem:hover,
  .vehicleAccessMore:hover {
    background: var(--control-hover);
  }
}

.vehicleAccessStatus {
  color: var(--muted);
}

.is-detail-visible .vehicleAccessControl {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.is-detail-visible .mapLocationButton {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.transportFilterTrigger,
.mapClearFiltersButton,
.mapLocationButton,
.transportFilterSurface,
.chipSearchWrap,
.uiMiniBtn,
.uiChipFace {
  background: var(--control);
  color: var(--ink);
}

.transportFilterTrigger,
.mapClearFiltersButton,
.mapLocationButton,
.transportFilterSurface {
  box-shadow: 0 4px 16px var(--shadow-color);
}

.mapLineSearch {
  box-shadow: 0 4px 16px var(--shadow-color);
}

.chipSearchWrap:focus-within {
  border-color: var(--link);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 18%, transparent), 0 4px 16px var(--shadow-color);
}

.transportFilterSurface {
  box-shadow: 0 14px 38px var(--shadow-color);
}

@media (hover: hover) and (pointer: fine) {
  .transportFilterTrigger:hover,
  .mapClearFiltersButton:hover,
  .mapLocationButton:hover,
  .transportFilterClose:hover,
  .chipSearchBtn:hover,
  .uiMiniBtn:hover {
    background: var(--control-hover);
  }
}

.transportFilterTrigger:active,
.mapClearFiltersButton:active,
.mapLocationButton:active {
  background: var(--surface-subtle);
}

.transportFilterSummary,
.chipSearch::placeholder,
.uiChipBtn.is-inactive .uiChipFace,
.uiChipBtn.is-unselected .uiChipFace {
  color: var(--muted);
}

.transportFilterHeader h2,
.subPanelTitle,
.chipSearch,
.chipSearchBtn,
.transportFilterClose {
  color: var(--ink);
}

.chipSearchWrap,
.uiMiniBtn,
.uiChipFace,
.subPanel {
  border-color: var(--border);
}

.uiChipBtn.is-inactive .uiChipFace,
.uiChipBtn.is-unselected .uiChipFace {
  background: var(--surface-subtle);
}

.uiChipFace.is-near::before {
  background: var(--surface-raised);
}

.uiMiniBtn[aria-pressed="true"],
.uiChipBtn[aria-pressed="true"] .uiChipFace {
  border-color: var(--link);
  background: color-mix(in srgb, var(--link) 12%, var(--surface-raised));
  color: var(--link);
}

.transportFilterBackdrop:not([hidden]) {
  background: var(--overlay-scrim);
}

@media (max-width: 720px) {
  .vehicleAccessControl {
    margin-bottom: calc(30px + var(--safe-bottom)) !important;
  }

  .chipDock {
    right: calc(8px + var(--safe-right));
    left: calc(8px + var(--safe-left));
    box-sizing: border-box;
  }

  .mapFilterToolbar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    width: 100%;
  }

  .mapLineSearch {
    width: 100%;
    min-width: 0;
  }

  .mapSearchHost {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .mapFilterSearchResults {
    position: fixed;
    top: calc(var(--header-h) + var(--safe-top) + 61px);
    right: calc(8px + var(--safe-right));
    left: calc(8px + var(--safe-left));
    width: auto;
    max-height: min(58dvh, calc(100dvh - var(--header-h) - var(--safe-top) - var(--safe-bottom) - 77px));
  }

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

  .mapLocationButton {
    top: auto;
    right: 0;
    bottom: calc(96px + var(--safe-bottom));
  }

  .transportFilterLabel,
  .transportFilterSummary {
    min-width: 0;
    white-space: nowrap;
  }

  .mapAboutCue {
    top: calc(100vh - var(--safe-bottom) - 132px);
    top: calc(100dvh - var(--safe-bottom) - 132px);
  }

  .vehicleDetailPanel {
    right: calc(8px + var(--safe-right));
    bottom: calc(34px + var(--safe-bottom));
    left: calc(8px + var(--safe-left));
    max-height: min(46dvh, 360px);
  }

  .vehicleDetailSurface {
    max-height: min(46dvh, 360px);
  }

  .vehicleDetailGrabber {
    height: 24px;
    margin: 0 auto;
  }

  .vehicleDetailGrabber > span {
    height: 3px;
    background: var(--muted);
    opacity: .72;
  }

  .vehicleDetailHeader {
    min-height: 50px;
    gap: 8px;
    padding: 4px 6px 6px 10px;
  }

  .vehicleDetailLine {
    min-width: 38px;
    height: 30px;
    padding: 0 8px;
    font-size: 14px;
  }

  .vehicleDetailHeading h2 {
    font-size: 15px;
  }

  .vehicleDetailHeading p {
    margin-top: 2px;
    font-size: 11px;
  }

  .vehicleDetailScroll {
    padding: 0 10px 4px;
  }

  .vehicleDetailStop {
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) minmax(62px, auto);
    gap: 8px;
    padding: 7px 0 7px 21px;
  }

  .vehicleDetailStop::before {
    left: 1px;
  }

  .vehicleDetailStop::after {
    left: 6px;
  }

  .vehicleDetailStopName {
    font-size: 13px;
  }

  .vehicleDetailStopTime {
    font-size: 13px;
  }

  .vehicleDetailStopMeta,
  .vehicleDetailStopPredictionTime,
  .vehicleDetailStopScheduledTime,
  .vehicleDetailStopDelay {
    font-size: 11px;
  }

  .vehicleDetailStopBadge {
    padding: 2px 5px;
    font-size: 11px;
  }

  .vehicleDetailMessage {
    min-height: 44px;
    padding: 9px 2px;
  }

  .transportFilterSurface {
    background: var(--surface-raised);
  }
}

@media (max-width: 420px) {
  .transportFilterTrigger {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
  }

  .transportFilterTrigger > svg:first-child {
    display: block;
  }

  .transportFilterTrigger .transportFilterLabel,
  .transportFilterTrigger .transportFilterSummary {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .transportFilterChevron {
    display: none;
  }

  .mapLineSearch .chipSearchSubmit {
    display: none;
  }
}

@media (max-width: 360px) {
  .mapAboutCue {
    top: calc(100vh - var(--safe-bottom) - 136px);
    top: calc(100dvh - var(--safe-bottom) - 136px);
    min-height: 40px;
    padding: 0 11px;
    font-size: 12px;
  }

  .transportFilterSummary {
    display: none;
  }

  .transportFilterTrigger > svg:first-child {
    display: block;
  }

  .transportFilterTrigger .transportFilterLabel,
  .transportFilterTrigger .transportFilterSummary {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .transportFilterTrigger {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0;
  }

  .transportFilterChevron {
    display: none;
  }

  .mapLineSearch .chipSearchSubmit {
    display: none;
  }

  .mapFilterToolbar {
    gap: 6px;
  }

  .mapLineSearch .chipSearch {
    padding-left: 6px;
  }

  .transportFilterTrigger {
    gap: 6px;
    padding: 0 9px;
  }

  .vehicleDetailPanel,
  .vehicleDetailSurface {
    max-height: min(45dvh, 300px);
  }
}

@media (max-width: 720px), (max-height: 500px) and (max-width: 950px) {
  body.is-detail-visible {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .vehicleDetailPanel {
    --vehicle-detail-default-visible-height: clamp(196px, 26vh, 220px);
    --vehicle-detail-default-visible-height: clamp(196px, 26dvh, 220px);
    --vehicle-detail-rest-y: calc(100% - var(--vehicle-detail-default-visible-height));
    top: auto;
    right: calc(8px + var(--safe-right));
    bottom: 0;
    left: calc(8px + var(--safe-left));
    width: auto;
    height: min(calc(100vh - var(--header-h) - var(--safe-top)), 720px);
    height: min(calc(100dvh - var(--header-h) - var(--safe-top)), 720px);
    max-height: none;
    contain: layout paint;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    transform: translate3d(0, calc(var(--vehicle-detail-rest-y) + 12px), 0);
    transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 180ms cubic-bezier(.2, .8, .2, 1);
  }

  .vehicleDetailPanel.is-open {
    transform: translate3d(0, var(--vehicle-detail-rest-y), 0);
  }

  .vehicleDetailPanel.is-dragging {
    transition: none;
    user-select: none;
    will-change: transform;
  }

  .vehicleDetailSurface {
    height: var(--vehicle-detail-visible-height, var(--vehicle-detail-default-visible-height));
    max-height: var(--vehicle-detail-visible-height, var(--vehicle-detail-default-visible-height));
  }

  .vehicleDetailGrabber {
    position: relative;
    z-index: 1;
    display: flex;
    width: 64px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 auto -20px;
    cursor: ns-resize;
    touch-action: none;
  }

  .vehicleDetailHeader {
    position: relative;
    z-index: 2;
    cursor: ns-resize;
    touch-action: none;
  }

  .vehicleDetailHeader .vehicleDetailIconButton {
    cursor: pointer;
    touch-action: manipulation;
  }

  .vehicleDetailPanel.is-dragging .vehicleDetailScroll {
    pointer-events: none;
  }

  .vehicleDetailScroll {
    contain: layout paint;
  }

  .is-detail-visible .leaflet-control-attribution {
    visibility: hidden;
  }
}

.mapNearbyStationsLink,
.mapJourneyLink {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--control);
  box-shadow: 0 4px 16px var(--shadow-color);
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  text-decoration: none;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .mapNearbyStationsLink:hover,
  .mapJourneyLink:hover {
    background: var(--control-hover);
  }
}

.mapNearbyStationsLink:active,
.mapJourneyLink:active {
  background: var(--surface-subtle);
}

.mapNearbyStationsLink:focus-visible,
.mapJourneyLink:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.mapNearbyStationsLink svg,
.mapJourneyLink svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

html[data-theme="dark"] .mapSiteChip,
html[data-theme="dark"] .mapNearbyStationsLink,
html[data-theme="dark"] .mapJourneyLink,
html[data-theme="dark"] .mapAboutCue,
html[data-theme="dark"] .mapReturnCue {
  color: #ffffff;
}

.vehicleDetailStopPredictionTime {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.vehicleDetailStopPredictionTime .vehicleDetailStopDelay {
  margin-top: 0;
}

html[data-theme="dark"] .vehicleDetailStop:not(.is-passed):not(.is-skipped) .vehicleDetailStopTime,
html[data-theme="dark"] .vehicleDetailStop:not(.is-passed):not(.is-skipped) .vehicleDetailStopPredictionTime,
html[data-theme="dark"] .vehicleDetailStop:not(.is-passed):not(.is-skipped) .vehicleDetailStopScheduledTime {
  color: #ffffff;
}

.vehicleDetailStop.is-passed .vehicleDetailStopName,
.vehicleDetailStop.is-passed .vehicleDetailStopTime,
.vehicleDetailStop.is-passed .vehicleDetailStopPredictionTime,
.vehicleDetailStop.is-passed .vehicleDetailStopScheduledTime,
.vehicleDetailStop.is-passed .vehicleDetailStopDelay {
  color: color-mix(in srgb, var(--ink) 76%, var(--surface-raised));
}

html[data-theme="dark"] {
  --link: #a8c5f7;
  --selection: #a8c5f7;
  --selection-text: #10284a;
}

html[data-theme="dark"] .uiMiniBtn[aria-pressed="true"],
html[data-theme="dark"] .uiChipBtn[aria-pressed="true"] .uiChipFace {
  border-color: #a8c5f7;
  background: #a8c5f7;
  color: #10284a;
}

html[data-theme="dark"] .uiChipBtn.is-activeMode .uiChipFace {
  outline-color: #a8c5f7;
}

html[data-theme="dark"] .vehicleAccessToggle[aria-expanded="true"] {
  border-color: #a8c5f7;
  color: #a8c5f7;
}

@media (prefers-reduced-motion: reduce) {
  .mapAboutCue,
  .mapReturnCue,
  .vehicleAccessControl,
  .vehicleDetailPanel {
    transition: none;
  }
}

@media (forced-colors: active) {
  .mapSiteMode,
  .mapSiteEntrance,
  .mapSiteChip,
  .routeStopDot {
    border-color: ButtonText;
    background: Canvas;
    color: CanvasText;
  }
}

@media (max-width: 480px) {
  .vehicleAccessActions {
    gap: 6px;
  }

  .vehicleAccessToggle {
    padding: 0 6px;
    font-size: 12px;
  }

  .mapNearbyStationsLink,
  .mapJourneyLink {
    gap: 5px;
    padding: 0 8px;
    font-size: 12px;
  }

  .mapNearbyStationsLink svg,
  .mapJourneyLink svg {
    display: none;
  }

  .vehicleAccessActions .mapAboutCue {
    min-height: 44px;
    gap: 4px;
    padding: 0 8px;
    font-size: 12px;
  }

  .vehicleAccessActions .mapAboutCue svg {
    display: none;
  }
}

@media (max-width: 360px) {
  .vehicleAccessActions {
    gap: 4px;
  }

  .vehicleAccessToggle,
  .mapNearbyStationsLink,
  .mapJourneyLink,
  .vehicleAccessActions .mapAboutCue {
    padding-right: 5px;
    padding-left: 5px;
    font-size: 11px;
  }

  .vehicleAccessToggle {
    flex-direction: column;
    gap: 0;
    line-height: 1.05;
    white-space: normal;
  }

  .vehicleAccessCountLabel {
    font-size: 11px;
    line-height: 1;
  }

}

/* --- Liquid glass: map controls, station labels and vehicle schedule --- */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --map-glass-control: rgba(244, 251, 255, .84);
    --map-glass-control-hover: rgba(250, 253, 255, .92);
    --map-glass-control-active: rgba(225, 240, 251, .91);
    --map-glass-panel: rgba(244, 250, 255, .9);
    --map-glass-label: rgba(250, 253, 255, .94);
    --map-glass-border: rgba(255, 255, 255, .72);
    --map-glass-highlight: rgba(255, 255, 255, .96);
    --map-glass-sheen: rgba(255, 255, 255, .58);
    --map-glass-tint: rgba(61, 139, 255, .07);
    --map-glass-refraction: rgba(57, 171, 255, .2);
    --map-glass-prism: rgba(255, 116, 205, .08);
  }

  html[data-theme="dark"] {
    --map-glass-control: rgba(7, 15, 25, .76);
    --map-glass-control-hover: rgba(14, 27, 43, .86);
    --map-glass-control-active: rgba(20, 36, 55, .9);
    --map-glass-panel: rgba(8, 17, 29, .88);
    --map-glass-label: rgba(9, 18, 30, .92);
    --map-glass-highlight: rgba(255, 255, 255, .3);
    --map-glass-sheen: rgba(255, 255, 255, .13);
    --map-glass-tint: rgba(63, 137, 235, .09);
    --map-glass-refraction: rgba(91, 190, 255, .26);
    --map-glass-prism: rgba(255, 128, 209, .11);
  }
}

.transportFilterTrigger,
.mapClearFiltersButton,
.mapLocationButton,
.chipSearchWrap,
.mapNearbyStationsLink,
.mapJourneyLink,
.mapAboutCue,
.mapReturnCue,
.vehicleAccessToggle,
.mapSiteChip,
.leaflet-control-zoom a {
  --glass-optic-background:
    radial-gradient(92% 24% at var(--glass-light-x) var(--glass-light-y), var(--map-glass-highlight) 0 6%, var(--map-glass-sheen) 32%, transparent 78%),
    radial-gradient(64% 28% at 108% 108%, var(--map-glass-refraction) 0, transparent 74%),
    radial-gradient(56% 24% at -8% 104%, var(--map-glass-prism) 0, transparent 72%),
    linear-gradient(145deg, transparent 34%, var(--map-glass-tint) 100%),
    radial-gradient(145% 115% at 50% 52%, var(--map-glass-content-veil) 0 34%, transparent 76%);
  --glass-fill: var(--map-glass-control);
  --glass-light-x: 14%;
  --glass-light-y: -14%;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  background-clip: padding-box;
  border: 1px solid var(--map-glass-border);
  background: var(--glass-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow-compact);
  color: var(--ink);
  text-shadow: none;
  transition: border-color 180ms ease-out, transform 180ms cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}

.chipSearchWrap {
  --glass-fill: var(--glass-reading-fill);
}

.transportFilterTrigger::before,
.mapClearFiltersButton::before,
.mapLocationButton::before,
.chipSearchWrap::before,
.mapNearbyStationsLink::before,
.mapJourneyLink::before,
.mapAboutCue::before,
.mapReturnCue::before,
.vehicleAccessToggle::before,
.mapSiteChip::before,
.leaflet-control-zoom a::before,
.transportFilterTrigger::after,
.mapClearFiltersButton::after,
.mapLocationButton::after,
.chipSearchWrap::after,
.mapNearbyStationsLink::after,
.mapJourneyLink::after,
.mapAboutCue::after,
.mapReturnCue::after,
.vehicleAccessToggle::after,
.mapSiteChip::after,
.leaflet-control-zoom a::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 1px color-mix(in srgb, var(--map-glass-highlight) 88%, transparent),
    inset 1px 0 1px color-mix(in srgb, var(--map-glass-highlight) 42%, transparent),
    inset -1px 0 1px color-mix(in srgb, var(--map-glass-prism) 76%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--map-glass-refraction) 72%, transparent);
  opacity: .82;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms cubic-bezier(.2, .8, .2, 1);
}

.transportFilterTrigger::before,
.mapClearFiltersButton::before,
.mapLocationButton::before,
.chipSearchWrap::before,
.mapNearbyStationsLink::before,
.mapJourneyLink::before,
.mapAboutCue::before,
.mapReturnCue::before,
.vehicleAccessToggle::before,
.mapSiteChip::before,
.leaflet-control-zoom a::before {
  /* Negative local layers stay above the host fill but below anonymous text
     nodes such as "Rensa" and Leaflet's +/- glyphs. */
  z-index: -2;
  background: var(--glass-optic-background);
  -webkit-backdrop-filter: var(--map-glass-filter-control);
  backdrop-filter: var(--map-glass-filter-control);
}

.transportFilterTrigger::after,
.mapClearFiltersButton::after,
.mapLocationButton::after,
.chipSearchWrap::after,
.mapNearbyStationsLink::after,
.mapJourneyLink::after,
.mapAboutCue::after,
.mapReturnCue::after,
.vehicleAccessToggle::after,
.mapSiteChip::after,
.leaflet-control-zoom a::after {
  z-index: -1;
}

.transportFilterTrigger > *,
.mapLocationButton > *,
.chipSearchWrap > *,
.mapNearbyStationsLink > *,
.mapJourneyLink > *,
.mapAboutCue > *,
.mapReturnCue > *,
.vehicleAccessToggle > *,
.mapSiteChip > * {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .transportFilterTrigger:hover,
  .mapClearFiltersButton:hover,
  .mapLocationButton:hover,
  .chipSearchWrap:hover,
  .mapNearbyStationsLink:hover,
  .mapJourneyLink:hover,
  .mapAboutCue:hover,
  .mapReturnCue:hover,
  .vehicleAccessToggle:hover,
  .mapSiteChip:hover,
  .leaflet-control-zoom a:hover {
    --glass-fill: var(--map-glass-control-hover);
    background: var(--glass-fill);
    border-color: color-mix(in srgb, var(--map-glass-border) 72%, var(--ink));
  }

  .transportFilterTrigger:hover::after,
  .mapClearFiltersButton:hover::after,
  .mapLocationButton:hover::after,
  .chipSearchWrap:hover::after,
  .mapNearbyStationsLink:hover::after,
  .mapJourneyLink:hover::after,
  .mapAboutCue:hover::after,
  .mapReturnCue:hover::after,
  .vehicleAccessToggle:hover::after,
  .mapSiteChip:hover::after,
  .leaflet-control-zoom a:hover::after {
    opacity: 1;
    transform: scale(.985);
  }
}

.transportFilterTrigger:active,
.mapClearFiltersButton:active,
.mapLocationButton:active,
.mapNearbyStationsLink:active,
.mapJourneyLink:active,
.mapAboutCue:active,
.mapReturnCue:active,
.vehicleAccessToggle:active,
.chipSearchWrap:active,
.leaflet-control-zoom a:active {
  --glass-fill: var(--map-glass-control-active);
  --glass-light-x: 72%;
  --glass-light-y: 112%;
  background: var(--glass-fill);
  box-shadow: 0 3px 12px var(--shadow-color), inset 0 1px 0 var(--map-glass-highlight);
  transform: translateY(1px) scale(.97);
}

.mapSiteChip:active {
  --glass-fill: var(--map-glass-control-active);
  --glass-light-x: 72%;
  --glass-light-y: 112%;
  background: var(--glass-fill);
  box-shadow: 0 3px 12px var(--shadow-color), inset 0 1px 0 var(--map-glass-highlight);
}

.mapAboutCue:active {
  transform: translateX(-50%);
}

.vehicleAccessActions .mapAboutCue:active {
  transform: none;
}

.transportFilterTrigger,
.mapClearFiltersButton,
.chipSearchWrap,
.mapNearbyStationsLink,
.mapJourneyLink,
.mapAboutCue,
.mapReturnCue,
.vehicleAccessToggle {
  border-radius: 14px;
}

.mapLocationButton {
  /* GPS is a map-corner control, not another item in the top toolbar. This
     late declaration deliberately wins over the shared glass host rule. */
  position: absolute;
  border-radius: 50%;
}

.mapSiteChip {
  border-radius: 18px;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vehicleAccessActions {
    --glass-optic-background:
      radial-gradient(100% 24% at 12% -4%, var(--map-glass-highlight) 0 6%, var(--map-glass-sheen) 32%, transparent 78%),
      radial-gradient(68% 28% at 108% 108%, var(--map-glass-refraction) 0, transparent 74%),
      radial-gradient(58% 24% at -8% 104%, var(--map-glass-prism) 0, transparent 72%),
      linear-gradient(145deg, transparent 34%, var(--map-glass-tint) 100%),
      radial-gradient(145% 115% at 50% 52%, var(--map-glass-content-veil) 0 34%, transparent 76%);
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    gap: 2px;
    overflow: hidden;
    padding: 4px;
    border: 1px solid var(--map-glass-border);
    border-radius: 20px;
    background: var(--map-glass-control);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--map-glass-shadow-compact);
    color: var(--ink);
    text-shadow: none;
  }

  .vehicleAccessActions::before,
  .vehicleAccessActions::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .vehicleAccessActions::before {
    inset: 1px;
    background: var(--glass-optic-background);
    -webkit-backdrop-filter: var(--map-glass-filter-control);
    backdrop-filter: var(--map-glass-filter-control);
    filter: none;
    opacity: .58;
    transform: none;
  }

  .vehicleAccessActions::after {
    z-index: 1;
    inset: 1px;
    box-shadow:
      inset 0 1px 1px var(--map-glass-highlight),
      inset 1px 0 1px color-mix(in srgb, var(--map-glass-highlight) 46%, transparent),
      inset -1px 0 1px color-mix(in srgb, var(--map-glass-prism) 76%, transparent),
      inset 0 -1px 1px color-mix(in srgb, var(--map-glass-refraction) 78%, transparent);
  }

  .vehicleAccessActions > .vehicleAccessToggle,
  .vehicleAccessActions > .mapJourneyLink,
  .vehicleAccessActions > .mapNearbyStationsLink,
  .vehicleAccessActions > .mapAboutCue {
    position: relative;
    z-index: 2;
    min-height: 44px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .vehicleAccessActions > .vehicleAccessToggle::after,
  .vehicleAccessActions > .mapJourneyLink::after,
  .vehicleAccessActions > .mapNearbyStationsLink::after,
  .vehicleAccessActions > .mapAboutCue::after {
    opacity: .42;
  }

  .vehicleAccessActions > .vehicleAccessToggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--map-glass-control-hover) 72%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--map-glass-highlight) 58%, transparent);
  }

  @media (hover: hover) and (pointer: fine) {
    .vehicleAccessActions > .vehicleAccessToggle:hover,
    .vehicleAccessActions > .mapJourneyLink:hover,
    .vehicleAccessActions > .mapNearbyStationsLink:hover,
    .vehicleAccessActions > .mapAboutCue:hover {
      background: color-mix(in srgb, var(--map-glass-control-hover) 72%, transparent);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--map-glass-highlight) 58%, transparent);
    }
  }

  .vehicleAccessActions > .vehicleAccessToggle:active,
  .vehicleAccessActions > .mapJourneyLink:active,
  .vehicleAccessActions > .mapNearbyStationsLink:active,
  .vehicleAccessActions > .mapAboutCue:active {
    background: color-mix(in srgb, var(--map-glass-control-active) 78%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--map-glass-depth) 42%, transparent);
    transform: scale(.96);
  }
}

.chipSearchWrap:focus-within {
  border-color: var(--link);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--link) 22%, transparent),
    var(--map-glass-shadow-compact);
}

.transportFilterSurface {
  border: 1px solid var(--map-glass-border);
  border-radius: 22px;
  background: var(--glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow);
  color: var(--ink);
  text-shadow: none;
}

.chipSearch {
  color: var(--ink);
  font-weight: 550;
  text-shadow: none;
}

.chipSearch::placeholder {
  color: var(--map-glass-secondary);
  opacity: 1;
}

.transportFilterSurface .uiMiniBtn,
.transportFilterSurface .uiChipFace {
  background-color: color-mix(in srgb, var(--map-glass-control) 62%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.transportFilterSurface .chipSearchWrap,
.chipSearchWrap:hover,
.chipSearchWrap:active {
  --glass-fill: var(--glass-reading-fill);
  background-color: var(--glass-reading-fill);
}

.leaflet-control-zoom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  border-radius: 13px;
  background: var(--map-glass-control);
  box-shadow: var(--map-glass-shadow-compact) !important;
}

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

.leaflet-control-zoom::before {
  z-index: 0;
  background: var(--glass-optic-background, var(--liquid-glass-optic-layer));
  -webkit-backdrop-filter: var(--map-glass-filter-control);
  backdrop-filter: var(--map-glass-filter-control);
}

.leaflet-control-zoom::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);
}

#map .leaflet-control-zoom a {
  position: relative;
  z-index: 2;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border-right: 1px solid var(--map-glass-border) !important;
  border-bottom: 1px solid var(--map-glass-hairline) !important;
  font-weight: 500;
  line-height: 42px;
}

.leaflet-control-zoom a:last-child {
  border-bottom: 0 !important;
}

.mapLocationButton > svg,
.transportFilterTrigger > svg,
.mapNearbyStationsLink svg,
.mapJourneyLink svg,
.mapAboutCue svg,
.mapReturnCue svg {
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--ink) 16%, transparent));
}

.leaflet-control-zoom a {
  text-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 16%, transparent);
}

.mapSiteMode:not(.is-ship),
.mapSiteEntrance {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .16) 52%),
    var(--map-icon-glass);
  box-shadow:
    0 3px 9px rgba(13, 41, 78, .24),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(13, 41, 78, .1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mapSiteMode.is-ship {
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(7, 59, 131, .28), inset 0 1px 0 rgba(255, 255, 255, .98);
}

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

.mapSiteChip {
  max-width: min(228px, calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
  gap: 6px;
  padding-right: 9px;
  padding-left: 11px;
  font-size: 12px;
}

.mapSiteChip svg {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.routeStopLabel {
  width: max-content;
  max-width: min(230px, var(--route-label-max, calc(100vw - var(--safe-left) - var(--safe-right) - 72px)));
  overflow: hidden;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background:
    radial-gradient(92% 24% at 10% -4%, var(--map-glass-highlight), transparent 78%),
    linear-gradient(145deg, transparent 52%, var(--map-glass-refraction) 140%),
    var(--map-glass-label);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--map-glass-highlight) 58%, transparent);
  color: var(--ink);
  font: 500 11px var(--font-sans);
  text-shadow: var(--map-glass-text-shadow);
  hyphens: none;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

html[data-theme="dark"] .mapSiteMode:not(.is-ship),
html[data-theme="dark"] .mapSiteEntrance {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .2) 52%),
    rgba(244, 249, 255, .56);
}

html[data-theme="dark"] .mapSiteEntrance {
  border-color: rgba(8, 8, 122, .54);
  color: #08087a;
}

html[data-theme="dark"] .mapSiteMode.is-ship {
  border-color: #073b83;
  background: #ffffff;
  color: #073b83;
}

.routeStopDot {
  background: #fff;
  background-clip: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.vehicleDetailSurface {
  box-sizing: border-box;
  border: 1px solid var(--map-glass-border);
  border-radius: 22px;
  background: var(--glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--map-glass-shadow);
  background-clip: padding-box;
}

.liquidGlassReading,
.transportFilterSurface,
.mapFilterSearchResults,
.vehicleDetailSurface,
.vehicleDetailHeader,
.vehicleDetailScroll,
.vehicleDetailStop {
  background-color: var(--liquid-glass-reading-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}

.vehicleDetailHeader {
  background: var(--glass-reading-fill);
  box-shadow: inset 0 -1px 0 var(--map-glass-hairline);
}

.vehicleDetailScroll,
.vehicleDetailStop {
  background-color: var(--glass-reading-fill);
  text-shadow: none;
}

.vehicleDetailStop,
.vehicleDetailMessage {
  border-color: var(--map-glass-hairline);
}

.vehicleDetailStop.is-current {
  background: color-mix(in srgb, var(--route-accent) 13%, transparent);
}

.vehicleDetailStop.is-next:not(.is-current) {
  background: color-mix(in srgb, var(--route-accent) 6%, transparent);
}

.vehicleDetailIconButton {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--map-glass-border) 72%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(92% 26% at 18% -4%, var(--map-glass-highlight), transparent 76%),
    radial-gradient(64% 28% at 108% 108%, var(--map-glass-refraction), transparent 74%),
    color-mix(in srgb, var(--map-glass-control) 72%, transparent);
  -webkit-backdrop-filter: var(--map-glass-filter-control);
  backdrop-filter: var(--map-glass-filter-control);
  box-shadow: var(--map-glass-shadow-compact);
}

@media (hover: hover) and (pointer: fine) {
  .vehicleDetailIconButton:hover {
    background:
      radial-gradient(92% 26% at var(--glass-light-x, 18%) var(--glass-light-y, -4%), var(--map-glass-highlight), transparent 76%),
      var(--map-glass-control-hover);
  }
}

.vehicleDetailIconButton:active {
  background:
    radial-gradient(92% 26% at 72% 112%, var(--map-glass-highlight), transparent 76%),
    radial-gradient(64% 28% at -8% -8%, var(--map-glass-refraction), transparent 74%),
    var(--map-glass-control-active);
}

.transportFilterSummary,
.vehicleDetailHeading p,
.vehicleDetailStopMeta,
.vehicleDetailStopPredictionTime,
.vehicleDetailStopScheduledTime,
.vehicleDetailMessage,
.vehicleDetailStop.is-passed .vehicleDetailStopName,
.vehicleDetailStop.is-passed .vehicleDetailStopTime,
.vehicleDetailStop.is-passed .vehicleDetailStopPredictionTime,
.vehicleDetailStop.is-passed .vehicleDetailStopScheduledTime {
  color: var(--map-glass-secondary);
  opacity: 1;
}

.leaflet-container .mapNearbyStationsLink,
.leaflet-container .mapJourneyLink,
.leaflet-container .mapAboutCue {
  color: var(--ink);
}

html[data-theme="dark"] .leaflet-container .mapNearbyStationsLink,
html[data-theme="dark"] .leaflet-container .mapJourneyLink,
html[data-theme="dark"] .leaflet-container .mapAboutCue {
  color: #ffffff;
}

@media (max-width: 720px) {
  .transportFilterSurface {
    border-radius: 26px 26px 0 0;
    background: var(--glass-reading-fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .vehicleDetailPanel .vehicleDetailSurface {
    border-radius: 24px 24px 0 0;
    background: var(--surface-raised);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent), transparent 72px),
      var(--surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
      0 -18px 44px color-mix(in srgb, var(--shadow-color) 86%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--glass-highlight) 88%, transparent);
  }

  .vehicleDetailHeader {
    background: var(--surface-raised);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--surface-raised)), var(--surface-raised));
  }

  .vehicleDetailScroll,
  .vehicleDetailSchedule,
  .vehicleDetailStop {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 720px), (pointer: coarse) {
  :root,
  html[data-theme="dark"] {
    --map-glass-control: var(--control);
    --map-glass-control-hover: var(--control-hover);
    --map-glass-control-active: var(--surface-subtle);
    --map-glass-panel: var(--glass-reading-fill);
    --map-glass-label: var(--glass-reading-fill);
    --map-glass-filter-control: var(--map-glass-filter-mobile);
  }

  body {
    background-attachment: scroll;
  }

  #appHeader::before,
  .mapLiveStatus,
  .transportFilterSurface,
  .vehicleDetailSurface,
  .mapFilterSearchResults {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (update: slow) {
  .transportFilterTrigger::before,
  .mapClearFiltersButton::before,
  .mapLocationButton::before,
  .chipSearchWrap::before,
  .mapNearbyStationsLink::before,
  .mapJourneyLink::before,
  .mapAboutCue::before,
  .mapReturnCue::before,
  .vehicleAccessToggle::before,
  .mapSiteChip::before,
  .leaflet-control-zoom::before,
  .leaflet-control-zoom a::before,
  .vehicleAccessActions::before,
  .vehicleDetailIconButton {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .transportFilterTrigger,
  .mapClearFiltersButton,
  .mapLocationButton,
  .chipSearchWrap,
  .mapNearbyStationsLink,
  .mapJourneyLink,
  .mapAboutCue,
  .mapReturnCue,
  .mapLiveStatus,
  .vehicleAccessToggle,
  .mapSiteChip,
  .leaflet-control-zoom a,
  .vehicleAccessActions,
  .transportFilterSurface,
  .mapFilterSearchResults,
  .routeStopLabel,
  .vehicleDetailSurface {
    background: var(--control);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .vehicleDetailSurface,
  .transportFilterSurface,
  .mapFilterSearchResults {
    background: var(--surface-raised);
  }

  #appHeader::before,
  #appHeader::after,
  .transportFilterTrigger::before,
  .mapClearFiltersButton::before,
  .mapLocationButton::before,
  .chipSearchWrap::before,
  .mapNearbyStationsLink::before,
  .mapJourneyLink::before,
  .mapAboutCue::before,
  .mapReturnCue::before,
  .vehicleAccessToggle::before,
  .mapSiteChip::before,
  .leaflet-control-zoom a::before,
  .transportFilterTrigger::after,
  .mapClearFiltersButton::after,
  .mapLocationButton::after,
  .chipSearchWrap::after,
  .mapNearbyStationsLink::after,
  .mapJourneyLink::after,
  .mapAboutCue::after,
  .mapReturnCue::after,
  .vehicleAccessToggle::after,
  .mapSiteChip::after,
  .leaflet-control-zoom a::after,
  .vehicleAccessActions::before,
  .vehicleAccessActions::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appHeader::before,
  #appHeader::after,
  .transportFilterTrigger::before,
  .mapClearFiltersButton::before,
  .mapLocationButton::before,
  .chipSearchWrap::before,
  .mapNearbyStationsLink::before,
  .mapJourneyLink::before,
  .mapAboutCue::before,
  .mapReturnCue::before,
  .vehicleAccessToggle::before,
  .mapSiteChip::before,
  .leaflet-control-zoom a::before,
  .transportFilterTrigger::after,
  .mapClearFiltersButton::after,
  .mapLocationButton::after,
  .chipSearchWrap::after,
  .mapNearbyStationsLink::after,
  .mapJourneyLink::after,
  .mapAboutCue::after,
  .mapReturnCue::after,
  .vehicleAccessToggle::after,
  .mapSiteChip::after,
  .leaflet-control-zoom a::after,
  .transportFilterTrigger,
  .mapClearFiltersButton,
  .mapLocationButton,
  .chipSearchWrap,
  .mapNearbyStationsLink,
  .mapJourneyLink,
  .mapAboutCue,
  .mapReturnCue,
  .mapLiveStatus,
  .vehicleAccessToggle,
  .mapSiteChip,
  .vehicleAccessActions,
  .leaflet-control-zoom a,
  .mapFilterSearchResults {
    transition: none;
  }

  .mapFilterSearchResults {
    animation: none;
  }

  .transportFilterTrigger:active,
  .mapClearFiltersButton:active,
  .mapLocationButton:active,
  .mapNearbyStationsLink:active,
  .mapJourneyLink:active,
  .mapAboutCue:active,
  .mapReturnCue:active,
  .vehicleAccessToggle:active,
  .leaflet-control-zoom a:active {
    transform: none;
  }

  .transportFilterTrigger::before,
  .mapClearFiltersButton::before,
  .mapLocationButton::before,
  .chipSearchWrap::before,
  .mapNearbyStationsLink::before,
  .mapJourneyLink::before,
  .mapAboutCue::before,
  .mapReturnCue::before,
  .vehicleAccessToggle::before,
  .mapSiteChip::before,
  .leaflet-control-zoom::before,
  .vehicleAccessActions::before,
  .vehicleDetailIconButton {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  #appHeader::before,
  #appHeader::after,
  .transportFilterTrigger::before,
  .mapClearFiltersButton::before,
  .mapLocationButton::before,
  .chipSearchWrap::before,
  .mapNearbyStationsLink::before,
  .mapJourneyLink::before,
  .mapAboutCue::before,
  .mapReturnCue::before,
  .vehicleAccessToggle::before,
  .mapSiteChip::before,
  .leaflet-control-zoom a::before,
  .transportFilterTrigger::after,
  .mapClearFiltersButton::after,
  .mapLocationButton::after,
  .chipSearchWrap::after,
  .mapNearbyStationsLink::after,
  .mapJourneyLink::after,
  .mapAboutCue::after,
  .mapReturnCue::after,
  .vehicleAccessToggle::after,
  .mapSiteChip::after,
  .leaflet-control-zoom a::after,
  .vehicleAccessActions::before,
  .vehicleAccessActions::after {
    display: none;
  }

  .transportFilterTrigger,
  .mapClearFiltersButton,
  .mapLocationButton,
  .chipSearchWrap,
  .mapNearbyStationsLink,
  .mapJourneyLink,
  .mapAboutCue,
  .mapReturnCue,
  .mapLiveStatus,
  .vehicleAccessToggle,
  .mapSiteChip,
  .vehicleAccessActions,
  .leaflet-control-zoom a,
  .transportFilterSurface,
  .mapFilterSearchResults,
  .mapFilterSearchOption,
  .routeStopLabel,
  .vehicleDetailSurface,
  .vehicleDetailIconButton,
  .mapSiteMode,
  .mapSiteEntrance,
  .routeStopDot {
    border-color: ButtonText !important;
    background: Canvas !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: CanvasText;
  }
}

/* The costly URL filter is a post-load enhancement. It only ever paints on
   a compact host's background pseudo-element; text/icons remain separate. */
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-filter-control));
  backdrop-filter: var(--liquid-glass-filter, var(--map-glass-filter-control));
}

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"] .transportFilterTrigger::before,
html[data-liquid-glass-tier="off"] .mapClearFiltersButton::before,
html[data-liquid-glass-tier="off"] .mapLocationButton::before,
html[data-liquid-glass-tier="off"] .chipSearchWrap::before,
html[data-liquid-glass-tier="off"] .mapNearbyStationsLink::before,
html[data-liquid-glass-tier="off"] .mapJourneyLink::before,
html[data-liquid-glass-tier="off"] .mapAboutCue::before,
html[data-liquid-glass-tier="off"] .mapReturnCue::before,
html[data-liquid-glass-tier="off"] .vehicleAccessToggle::before,
html[data-liquid-glass-tier="off"] .mapSiteChip::before,
html[data-liquid-glass-tier="off"] .leaflet-control-zoom::before,
html[data-liquid-glass-tier="off"] .vehicleAccessActions::before,
html[data-liquid-glass-tier="off"] .vehicleDetailIconButton {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-contrast: more) {
  .transportFilterTrigger::before,
  .mapClearFiltersButton::before,
  .mapLocationButton::before,
  .chipSearchWrap::before,
  .leaflet-control-zoom::before,
  .vehicleAccessActions::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}