/* Full-viewport map for the 'map' display variant (iframe embeds). */
.gtfs-display--map {
  position: fixed;
  inset: 0;
  margin: 0;
}
.gtfs-display--map .gtfs-display__header,
.gtfs-display--map .gtfs-display__footer,
.gtfs-display--map .gtfs-display__staleness,
.gtfs-display--map .gtfs-display__loading {
  display: none;
}
.gtfs-display--map .gtfs-display__content {
  position: absolute;
  inset: 0;
}
.gtfs-display--map [data-gtfs-display="route-map"] {
  position: absolute;
  inset: 0;
  display: block;
}
/* Logic-only region: the overlay draws into the route-map's canvas. */
.gtfs-display--map [data-gtfs-display="live-vehicles"] {
  display: none;
}
.gtfs-display--map .maplibregl-popup-content {
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 8px 12px;
}

/* Vehicle markers: glyph + white heading tooltip (legacy gtfs_nextbus_map
   look). pointer-events: none so stop-dot clicks pass through.
   NO position rule here: MapLibre's .maplibregl-marker class positions the
   element absolutely, and overriding it (same specificity, load-order roulette)
   drops markers into document flow — they stack and every marker after the
   first drifts off its coordinates. The absolute marker element is itself the
   positioning context for the tooltip. */
.rt-vehicle {
  pointer-events: none;
}
.rt-vehicle__icon {
  display: block;
  width: 22px;
  height: 22px;
  /* Maki glyphs are square, but an agency's replacement icon need not be —
     letterbox rather than squash it (see the default_icons alter hook). */
  object-fit: contain;
}
.rt-vehicle__icon--livery {
  width: 60px;
  height: auto;
}
.rt-vehicle__tip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  font: 700 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #000;
  white-space: nowrap;
}
/* Empty for every vehicle but the leading arrivals — the :empty rule drops
   the gap so an unlabeled marker looks exactly as it did before. */
.rt-vehicle__eta {
  font-weight: 400;
  color: #333;
}
.rt-vehicle__eta:empty {
  display: none;
}
.rt-vehicle__arrow {
  width: 18px;
  height: 18px;
  display: block;
}
.rt-vehicle__tip--top    { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.rt-vehicle__tip--bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.rt-vehicle__tip--left   { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.rt-vehicle__tip--right  { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.rt-vehicle__tip--top::after,
.rt-vehicle__tip--bottom::after,
.rt-vehicle__tip--left::after,
.rt-vehicle__tip--right::after {
  content: '';
  position: absolute;
  border: 5px solid transparent;
}
.rt-vehicle__tip--top::after    { top: 100%; left: 50%; margin-left: -5px; border-top-color: #fff; }
.rt-vehicle__tip--bottom::after { bottom: 100%; left: 50%; margin-left: -5px; border-bottom-color: #fff; }
.rt-vehicle__tip--left::after   { left: 100%; top: 50%; margin-top: -5px; border-left-color: #fff; }
.rt-vehicle__tip--right::after  { right: 100%; top: 50%; margin-top: -5px; border-right-color: #fff; }