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

/* The 44 px Leaflet target stays centred on the coordinate while the visible
   sprite uses the exact legacy canvas offset from the main map. */
.journeyMapCanvas .transitVehicleMarker {
  --transit-vehicle-offset-x: 0px;
  --transit-vehicle-offset-y: 0px;
  --vehicle-visual-scale: 1;
  transform: rotate(var(--vehicle-bearing, 0deg)) scale(var(--vehicle-visual-scale)) translate(
    var(--transit-vehicle-offset-x),
    var(--transit-vehicle-offset-y)
  );
}

.journeyMapCanvas .transitVehicleMarker[data-kind="rail"][data-heading="true"] {
  --transit-vehicle-offset-x: -4px;
  --transit-vehicle-offset-y: -4px;
}

.journeyMapCanvas .transitVehicleMarker[data-kind="rail"][data-heading="false"] {
  --transit-vehicle-offset-x: -1px;
  --transit-vehicle-offset-y: -1px;
}

.journeyMapCanvas .transitVehicleMarker[data-kind="unknown"][data-heading="true"] {
  --transit-vehicle-offset-x: -3px;
  --transit-vehicle-offset-y: -3px;
}

.journeyMapCanvas .transitVehicleMarker[data-kind="unknown"][data-heading="false"] {
  --transit-vehicle-offset-x: -4px;
  --transit-vehicle-offset-y: -4px;
}

/* Selection is expressed by the persistent label and shared route, matching
   the main map. Avoid a second, mini-map-only halo around the icon itself. */
.journeyMapCanvas .transitVehicleMarker::before {
  display: none !important;
}

.mapSiteMarkerWrap,
.journeyStationMarkerWrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
}

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

.mapSiteMode {
  display: inline-flex;
  width: var(--map-site-size, 16px);
  height: var(--map-site-size, 16px);
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--map-site-size, 16px);
  box-sizing: border-box;
  border: clamp(1px, calc(var(--map-site-size, 16px) * .1), 2px) solid currentColor;
  border-radius: 50%;
  background: #ffffff;
  color: #071a35;
  font: 800 clamp(7px, calc(var(--map-site-size, 16px) * .56), 9px)/1 var(--font-sans);
  letter-spacing: -.02em;
  box-shadow: 0 3px 9px rgba(13, 41, 78, .24), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.mapSiteMode svg {
  width: 78%;
  height: 78%;
}

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

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

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

.mapSiteMode.is-bus {
  border-color: #17633d;
  color: #124d31;
  transform: scale(.9);
}

.journeyStationMarkerWrap:focus-visible,
.mapSiteMarkerWrap:focus-visible {
  border-radius: 999px;
  outline: 3px solid var(--focus, var(--sl-focus, #805d00));
  outline-offset: 3px;
}

.transitRouteStopIconWrap,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap {
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  pointer-events: none !important;
}

.transitRouteStopIconWrap .routeStopMarker,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker {
  position: relative;
  display: block;
  width: 44px;
  min-width: 44px;
  max-width: none;
  height: 44px;
  min-height: 44px;
  color: var(--text, var(--map-glass-text));
  pointer-events: none !important;
  white-space: nowrap;
}

.transitRouteStopIconWrap.is-label-left .routeStopMarker,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap.is-label-left .routeStopMarker {
  transform: none;
}

.transitRouteStopIconWrap .routeStopDot,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopDot {
  position: absolute;
  z-index: 1;
  top: 17px;
  left: 17px;
  width: 10px;
  min-width: 10px;
  height: 10px;
  min-height: 10px;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid var(--stop-accent, #0b4da8);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopDot::before,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopDot::after {
  display: none;
  content: none;
}

.transitRouteStopIconWrap .routeStopLabel,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopLabel {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 33px;
  display: block;
  width: max-content;
  min-width: 0;
  max-width: min(var(--route-label-max, 230px), calc(100vw - var(--safe-left) - var(--safe-right) - 72px));
  overflow: hidden;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  box-shadow: none;
  color: #070e1f !important;
  font: 600 11px var(--font-sans);
  hyphens: none;
  overflow-wrap: normal;
  pointer-events: none;
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: none;
  transform: translateY(-50%);
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.transitRouteStopIconWrap.is-label-left .routeStopLabel,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap.is-label-left .routeStopMarker .routeStopLabel {
  right: 33px;
  left: auto;
  text-align: right;
}

.transitRouteStopIconWrap.leaflet-interactive .routeStopMarker,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap.leaflet-interactive .routeStopMarker {
  cursor: pointer;
  pointer-events: auto !important;
}

.transitRouteStopIconWrap a.routeStopLabel,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker a.routeStopLabel {
  cursor: pointer;
  pointer-events: auto;
}

.transitRouteStopIconWrap a.routeStopLabel:hover,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker a.routeStopLabel:hover {
  background: rgba(7, 14, 31, .85);
  color: #ffffff !important;
  text-decoration: none;
}

.transitRouteStopIconWrap a.routeStopLabel:focus-visible,
.journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker a.routeStopLabel:focus-visible {
  outline: 3px solid var(--focus, var(--sl-focus, #805d00));
  outline-offset: 2px;
}

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

.journeyMapCanvas .leaflet-tooltip.transitStationMapLabel {
  width: max-content;
  max-width: min(240px, calc(100vw - var(--safe-left) - var(--safe-right) - 72px));
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #070e1f;
  font: 600 11px var(--font-sans);
  hyphens: none;
  overflow-wrap: normal;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  writing-mode: horizontal-tb;
}

.journeyMapCanvas .leaflet-tooltip.transitStationMapLabel > span,
.journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink {
  display: block;
  overflow: hidden;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  color: #070e1f !important;
  font: 600 11px var(--font-sans);
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink {
  cursor: pointer;
  pointer-events: auto;
}

.journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink:hover {
  background: rgba(7, 14, 31, .85);
  color: #ffffff !important;
  text-decoration: none;
}

.journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--focus, var(--sl-focus, #805d00));
  outline-offset: 2px;
}

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

@media (max-width: 420px) {
  .transitVehicleLabel,
  .vehicleMapLabelContent.transitVehicleLabel {
    max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 20px);
    overflow: visible;
    text-overflow: clip;
  }

  .transitRouteStopIconWrap .routeStopLabel,
  .journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopLabel,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel {
    max-width: min(140px, max(72px, calc(100vw - var(--safe-left) - var(--safe-right) - 72px)));
  }
}

@media (max-width: 720px), (pointer: coarse), (update: slow) {
  .transitRouteStopIconWrap .routeStopLabel,
  .journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopLabel,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel > span,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink {
    background: var(--glass-reading-fill, rgba(255, 255, 255, .96));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .transitRouteStopIconWrap .routeStopLabel,
  .journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopLabel,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel > span,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink {
    background: var(--surface-raised, #ffffff);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

html[data-theme="dark"] .transitRouteStopIconWrap .routeStopLabel,
html[data-theme="dark"] .journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopLabel,
html[data-theme="dark"] .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel,
html[data-theme="dark"] .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel > span,
html[data-theme="dark"] .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink {
  border-color: #bdcedf;
  background: #ffffff;
  color: #071d3b;
  text-shadow: none;
}

html[data-theme="dark"] .mapSiteMode:not(.is-ship),
html[data-theme="dark"] .mapSiteEntrance {
  background-color: #ffffff;
}

@media (forced-colors: active) {
  .mapSiteMode,
  .transitRouteStopIconWrap .routeStopDot {
    border-color: ButtonText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none;
  }

  .transitVehicleLabel,
  .transitRouteStopIconWrap .routeStopLabel,
  .journeyMapCanvas .secondaryRouteStopIconWrap.transitRouteStopIconWrap .routeStopMarker .routeStopLabel,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel > span,
  .journeyMapCanvas .leaflet-tooltip.transitStationMapLabel .transitStationLabelLink {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}