/* bus-map.css — the map module's OWN styling (N3, phase review).
 *
 * Previously duplicated verbatim between bus.html's and drive.html's own
 * page-scoped <style> blocks; this is now the ONE copy both pages <link>
 * to. Split of ownership: each page's own CSS keeps ONLY its box geometry
 * (bus.html's `.tracker-map-placeholder`/`.tracker-map` sizing rule inside
 * the hero frame; drive.html's `.drive-map-panel`/`.drive-map-mount` sizing
 * rules inside the split-screen column) — this file owns everything
 * bus-map.mjs itself draws INSIDE that box: stop pins, the bus marker, and
 * Leaflet's own marker/popup chrome. Both pages' Leaflet mount elements
 * carry the shared `.tracker-map` class (tracker.js's `ensureMapEl` on
 * /bus; a static class on /drive's `#drive-map-mount`) so these selectors
 * apply identically on both pages without either page re-deriving them.
 *
 * `.tracker-map.leaflet-container` is a COMPOUND selector (no space) —
 * Leaflet adds its own `leaflet-container` class directly to the element
 * YOU pass as `L.map(container)`, not to a wrapping child, so the mount
 * element itself carries both classes at once.
 */
.tracker-map.leaflet-container{font-family:var(--sans,inherit);border-radius:16px}
.tracker-map .leaflet-popup-content-wrapper{border-radius:12px}
/* DR-9c popup fix — the reported bug: a single-line label+time shared the
   close button's row. Reserve the X's gutter (30px right margin) and give
   the close button its own top-right padding; stopPopupHtml/homePopupHtml
   now render two lines so the time/address can never share that row. */
.tracker-map .leaflet-popup-content{font-size:.86rem;margin:10px 30px 10px 12px}
.tracker-map .leaflet-popup-close-button{padding:6px 8px 0 0}
.tracker-popup-time{color:var(--ink-3,#666);font-size:.82em}
/* NO transition on the stop markers' transform (Founder bug report
   2026-08-10): Leaflet repositions every marker via that same transform on
   zoom/pinch, so an eased transition here made the pins float to their new
   screen positions AFTER the tiles/polyline had already settled — they read
   as moving independently of the map. Stop positions never change between
   renders, so the ease bought nothing. */
.tracker-stop-pin{display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:22px;height:22px;border-radius:50%;
  background:var(--magenta);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.tracker-stop-pin.is-skipped{background:var(--ink-3);opacity:.55}

/* On-map live context (design 2026-08-02) — the pin encodes run progress.
   Upcoming keeps the plain magenta dot above (no class), so nothing changes
   for a page with no active run. */
.tracker-stop-pin.is-visited{background:var(--ink-3,#666);opacity:.7}
.tracker-stop-pin.is-visited::after{content:"✓";display:block;color:#fff;
  font-size:12px;line-height:1;font-weight:700}
/* The bus's current target. Stays BRAND MAGENTA like every other stop pin
   (Founder call): cyan is the bus's own colour, and a cyan target pin put two
   cyan circles on one map that read as two buses at a glance. The pulsing
   ring alone carries "the bus is heading here" — motion distinguishes it from
   the static upcoming pins without borrowing the bus's identity.
   The ring is box-shadow, not a real border, so the pin's 16px box (and
   therefore its Leaflet anchor) never changes size as the state flips. */
.tracker-stop-pin.is-current{
  /* Road-test ruling 2026-08-09: the next stop must be UNMISSABLE on a phone
     — grow the dot ~40% via transform (the 16px layout box and the Leaflet
     anchor stay untouched; scale is visual-only and centered on the dot) and
     widen the pulse ring. */
  transform:scale(1.4);
  box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 4px rgba(207,40,140,.45);
  animation:tracker-pin-pulse 1.8s ease-in-out infinite}
@keyframes tracker-pin-pulse{
  0%,100%{transform:scale(1.4);box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 4px rgba(207,40,140,.55)}
  50%{transform:scale(1.4);box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 12px rgba(207,40,140,.08)}
}
/* Vestibular safety + battery on the iPad that runs /drive all morning.
   The size bump stays (it's static), only the motion goes. */
@media (prefers-reduced-motion:reduce){
  .tracker-stop-pin.is-current{animation:none}
}

/* DR-9 — stop name label pill, positioned above the pin by the divIcon's own
   box (iconAnchor stays at the dot; this span is a sibling inside the same
   HTML, absolutely positioned relative to it). pointer-events:none is
   load-bearing — the label must never steal the popup click from the pin
   beneath it. Pins never hide; only this element toggles is-label-hidden
   (bus-map.mjs's recomputeLabelVisibility, DR-9b). */
.tracker-stop-label{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:4px;padding:2px 6px;border-radius:999px;white-space:nowrap;
  pointer-events:none;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.25);
  font-size:.72rem;font-weight:600;color:var(--ink-1,#1a1a1a)}
.tracker-stop-label.is-label-hidden{display:none}

.tracker-bus-pin{position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--cyan);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:opacity .3s ease}
.tracker-bus-pin.is-stale{opacity:.4}
.tracker-bus-glyph{width:60%;height:60%}

/* The marker's status ride-along pill (design 2026-08-02) was retired
   2026-08-14 (checkpoint remediation, s22) in favor of the shared
   .tracker-status-card readout below. */

/* DR-8c — HQ marker: logo floats above a true-location dot (iconAnchor is
   the dot, not the logo). */
.tracker-home-pin{position:relative;display:flex;flex-direction:column;align-items:center}
.tracker-home-logo{display:block;width:28px;height:28px;object-fit:contain;
  border-radius:6px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);padding:2px;
  margin-bottom:4px}
.tracker-home-dot{display:block;width:14px;height:14px;border-radius:50%;
  background:var(--ink-1,#1a1a1a);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* ── Floating status card (road-test ruling 2026-08-09) ─────────────────
   The status sentence as a sibling box UNDER the schedule card — replaces
   the pill that rode the bus marker on /bus/track. Unlike the schedule
   card it stays visible on phones: it IS the live status for a family
   waiting at the curb. */
.tracker-status-card{display:flex;align-items:center;gap:.7rem;
  width:13.5rem;max-width:60vw;border-radius:14px;
  background:rgba(255,255,255,.97);box-shadow:0 4px 16px rgba(0,0,0,.22);
  padding:.6rem .75rem;font-size:.82rem;line-height:1.3;color:var(--ink-1,#1a1a1a)}
.tracker-status-card-main{flex:1 1 auto;min-width:0}
.tracker-status-card-line{display:block;font-weight:700;font-size:.88rem}
.tracker-status-card-time{display:block;color:var(--ink-2,#444);margin-top:.1rem;font-size:.74rem}
/* Nav-app ETA: the biggest thing on the card, brand magenta, right-aligned. */
.tracker-status-card-eta{flex:none;font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--magenta,#CF288C);white-space:nowrap}
.tracker-status-card.is-stale{opacity:.7}

/* Stop-order number inside the pin dot (road-test ruling 2026-08-09) —
   parents count stops ("Stop 2"), not route geometry. The pin itself is a
   flex box that centers this span (Founder 2026-08-10: the old fixed
   line-height sat the digit against the dot's bottom edge). */
.tracker-stop-pin .tracker-stop-num{display:block;
  font-size:11px;font-weight:700;line-height:1;color:#fff;user-select:none}
/* The visited ✓ replaces the number (both center in the same 16px dot). */
.tracker-stop-pin.is-visited .tracker-stop-num{display:none}

/* ── Floating schedule card (design 2026-08-02) ─────────────────────────
   Desktop-only overlay listing the day's stops with the same states the
   pins carry. Hidden under 700px per the design: on a phone the map is
   already the smaller half of the screen, and the page's own textual
   schedule section is a few scrolls away. */
.tracker-schedule-card{width:13.5rem;max-width:42vw;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(0,0,0,.25);
  font-size:.78rem;line-height:1.3;color:var(--ink-1,#1a1a1a)}
@media (max-width:699px){ .tracker-schedule-card{display:none} }

.tracker-schedule-toggle{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;width:100%;padding:.5rem .65rem;border:0;background:transparent;
  font:inherit;font-weight:700;color:inherit;cursor:pointer;text-align:left}
/* Visible focus ring — this is the one interactive element the map overlay
   adds, and it must be reachable and obvious by keyboard. */
.tracker-schedule-toggle:focus-visible{outline:2px solid var(--magenta,#CF288C);
  outline-offset:-2px}
.tracker-schedule-chevron{flex:none;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--ink-2,#444);transition:transform .18s ease}
.tracker-schedule-card.is-collapsed .tracker-schedule-chevron{transform:rotate(-90deg)}

.tracker-schedule-rows{list-style:none;margin:0;padding:0 .65rem .55rem;
  max-height:13rem;overflow-y:auto}
.tracker-schedule-card.is-collapsed .tracker-schedule-rows{display:none}
.tracker-schedule-row{display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:.4rem;padding:.2rem 0}
.tracker-schedule-dot{width:8px;height:8px;border-radius:50%;
  background:var(--magenta,#CF288C)}
.tracker-schedule-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --ink-3 on white is the token the popup time already uses; kept for the
   secondary time column so the card matches the rest of the map chrome. */
.tracker-schedule-win{flex:none;color:var(--ink-3,#666);font-size:.92em;white-space:nowrap}

.tracker-schedule-row.is-visited{color:var(--ink-3,#666)}
/* The ✓ replaces the dot rather than sitting beside it — the row is narrow
   and a dot plus a tick reads as two separate marks. */
.tracker-schedule-row.is-visited .tracker-schedule-dot{position:relative;background:transparent}
.tracker-schedule-row.is-visited .tracker-schedule-dot::after{content:"✓";position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:700;
  color:var(--ink-3,#666)}
.tracker-schedule-row.is-current{font-weight:700}
.tracker-schedule-row.is-current .tracker-schedule-dot{
  box-shadow:0 0 0 3px rgba(207,40,140,.3)}
.tracker-schedule-row.is-skipped{color:var(--ink-3,#666);text-decoration:line-through}
.tracker-schedule-row.is-skipped .tracker-schedule-dot{background:var(--ink-3,#666);opacity:.55}

/* ── Follow / overview view toggle (Founder request 2026-08-10) ──────────
   Two-segment pill, bottom-left corner: "Follow bus" keeps the map centered
   on the bus like a nav app; "Whole route" fits the full route. A manual
   drag exits follow (Google-Maps behavior); zooming does not. */
.tracker-view-toggle{display:flex;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tracker-view-btn{border:0;background:transparent;font:inherit;cursor:pointer;
  font-size:.76rem;font-weight:700;line-height:1;padding:.55em .85em;
  color:var(--ink-2,#444);white-space:nowrap}
.tracker-view-btn.is-active{background:var(--magenta,#CF288C);color:#fff}
.tracker-view-btn:focus-visible{outline:2px solid var(--magenta,#CF288C);outline-offset:-2px}