/* Itinerary Map — feature-flagged UI (issue #732 Part B, see
   js/features/itinerary-map/). Hidden by default; itinerary-map.js only
   reveals the tab/panel once FEATURE_ITINERARY_MAP is on AND a Stadia key
   is configured — see itineraryMapEnabled() there. Safe to leave this
   markup in index.html indefinitely even while the feature is off, same
   convention as css/features/weather-forecast.css's .feature-weather. */
.feature-itinerary-map {
  display: none;
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.map-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.map-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-sm);
  border: 2px solid var(--df-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: var(--df-panel);
  color: var(--df-ink-soft);
  font-family: inherit;
  transition: background var(--dur-feedback) var(--ease-out), color var(--dur-feedback) var(--ease-out), border-color var(--dur-feedback) var(--ease-out);
}

.map-chip.sel {
  background: var(--df-ink);
  border-color: var(--df-ink);
  color: var(--df-panel);
}

.map-day-route-btn {
  min-height: var(--tap-min);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 2px solid var(--df-ink);
  background: var(--df-panel);
  color: var(--df-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}

.map-day-route-btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* vh first, dvh override right after — same fallback order as every other
   viewport-sized surface in this app (css/style.css). A fixed, generous
   height rather than a computed "100dvh minus chrome" figure: the chip
   rows above it can wrap to a second line on a narrow phone, and a precise
   subtraction would drift out of sync with that. */
.map-canvas-wrap {
  position: relative;
  width: 100%;
  height: 60vh;
  height: 60dvh;
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--df-panel);
}

@media (min-width: 681px) {
  .map-canvas-wrap {
    height: 70vh;
    height: 70dvh;
  }
}

.map-canvas {
  width: 100%;
  height: 100%;
}

/* Leaflet's own zoom control buttons default to ~26px — below --tap-min. */
.map-canvas .leaflet-control-zoom a {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  line-height: var(--tap-min);
}

.map-canvas .leaflet-control-attribution {
  font-size: var(--fs-xs);
}

.map-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* A stop's pin. Built as an L.divIcon (not an image marker) so its fill
   color can be one of the existing --vn-* category tokens (js side reads
   getComputedStyle, never a new palette) with no extra asset request. */
.map-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--df-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Quick Ideas (day = null, parentId = null) — outlined, not filled, so a
   pin reads as "not yet on a day" at a glance next to a scheduled stop's
   solid fill (issue #732 Part B's own layer spec). */
.map-pin-idea {
  background: var(--df-panel) !important;
  border-width: 3px;
}

.map-popup .leaflet-popup-content {
  margin: var(--space-md);
  font-size: var(--fs-sm);
}

.map-popup-title {
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.map-popup-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.map-popup-actions a,
.map-popup-actions button {
  font-size: var(--fs-xs);
}

/* prefers-reduced-motion is handled entirely in JS (itinerary-map.js reads
   prefersReducedMotion() before choosing fitBounds/setView's own animate
   option) — Leaflet's pan/zoom transitions are its internal CSS transforms,
   not something this stylesheet can target, so there is nothing to add to
   style.css's shared reduced-motion block for this feature. */