/* One popup card for every map pin (bus stop offers, route chips, service stops, bike racks).
   Markup: .map-pop > .map-pop-title, .map-pop-meta, .map-pop-facts, .map-pop-eta, .map-pop-actions > .map-pop-btn(.is-primary).
   The Leaflet chrome (flat card, hairline border, no tip) comes from navig-ui.css (.nv .leaflet-popup-*); this file only styles the content. */
.leaflet-popup.map-pop-wrap .leaflet-popup-content-wrapper,
.leaflet-popup.map-pop-wrap .leaflet-popup-content { width: auto !important; min-width: 0; max-width: none; }
.leaflet-popup.map-pop-wrap .leaflet-popup-content { margin: 12px 14px 14px; }

.map-pop { display: grid; gap: 8px; width: max-content; min-width: 190px; max-width: min(260px, calc(100vw - 64px)); color: var(--nv-ink); font-family: var(--nv-font); }
.map-pop .map-pop-title { margin: 0; padding-right: 30px; font-size: 1rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.map-pop .map-pop-meta { margin: -4px 0 0; color: var(--nv-muted); font-size: .8125rem; line-height: 1.35; }
.map-pop .map-pop-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.map-pop-facts li { white-space: nowrap; }
.map-pop-facts .is-muted { color: var(--nv-muted); font-weight: 500; }
/* Live arrival line: the number carries the meaning, colour only adds to it. */
.map-pop .map-pop-eta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.map-pop-eta small { color: var(--nv-muted); font-size: .75rem; font-weight: 600; }
.map-pop .map-pop-note { margin: 0; color: var(--nv-muted); font-size: .8125rem; line-height: 1.35; }

.map-pop-actions { display: flex; gap: 6px; margin-top: 2px; }
.map-pop-btn { flex: 1 1 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: var(--nv-raised); color: var(--nv-ink); font: 700 .8125rem/1.1 var(--nv-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s var(--nv-ease), background .15s var(--nv-ease); }
.map-pop-btn svg { width: 16px; height: 16px; flex: none; }
.map-pop-btn:hover { background: var(--nv-surface); }
.map-pop-btn:active { transform: scale(.98); }
.map-pop-btn.is-primary { border-color: var(--nv-ink); background: var(--nv-accent); color: var(--nv-ink); }
.map-pop-btn.is-primary:hover { filter: brightness(1.05); }
.map-pop-btn.is-icon { flex: 0 0 44px; padding: 0; }
.map-pop-btn[aria-pressed="true"] { background: var(--nv-accent); border-color: var(--nv-ink); }
.map-pop-btn:focus-visible { outline: 2px solid var(--nv-ink); outline-offset: 2px; }
.map-pop-skeleton { height: 14px; border-radius: var(--nv-r); background: var(--nv-line); }
.map-pop-skeleton:nth-child(2) { width: 70%; }
@media (prefers-reduced-motion: reduce) { .map-pop-btn { transition: none; } }