/* map.css: Leaflet overrides and controls, vehicle markers, pins, vehicle card, empty-state card. */
.leaflet-tile-pane{filter:var(--tile-filter)}
.leaflet-container{font-family:var(--f-body);background:var(--map-bg)}
.leaflet-control-attribution{font-size:10px;background:color-mix(in srgb,var(--panel) 80%,transparent)!important;color:var(--mute)!important}
.leaflet-control-attribution a{color:var(--mute)!important}
.leaflet-bar a{background:var(--panel);color:var(--ink);border-color:var(--line)}
.leaflet-bar a:hover{background:var(--paper)}
.leaflet-bar a,.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px}
.leaflet-touch .leaflet-bar a:first-child,.leaflet-touch .leaflet-bar a:last-child{width:44px;height:44px;line-height:44px}
#empty{position:absolute;z-index:1050;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100% - 32px));text-align:center;padding:18px 18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
#empty h3{margin:0 0 4px;font:700 22px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
#empty p{margin:0 0 12px;color:var(--mute)}
.pin .stp{display:block;box-sizing:border-box;width:24px;height:24px;border-radius:50%;background:var(--accent);border:5px solid var(--panel);box-shadow:0 0 0 2px var(--ink),var(--shadow)}
#detail .dh #starBtn[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
#detail{position:absolute;z-index:1100;left:12px;bottom:12px;width:min(372px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
#detail .dh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 12px 10px;border-bottom:1px solid var(--line)}
#detail .rbadge{grid-row:auto;font-size:20px;min-width:46px;padding:5px 8px}
#detail .dt{flex:1 1 8em;min-width:0}
#detail .dt b{display:block;font:700 20px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.03em;overflow-wrap:break-word}
#detail .dt span{color:var(--mute);font-size:12.5px}
#detail dl{margin:0;padding:8px 12px 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
#detail dt{color:var(--mute);font-size:12.5px}
#detail dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:500}
#detail .dsub{display:block;color:var(--mute);font-size:12.5px;font-weight:400}
#detail .mono{font-family:var(--f-mono);font-size:12.5px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:600;font-size:13px}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.info{background:var(--info-bg);color:var(--info)}
.pill.unk{background:var(--unk-bg);color:var(--unk)}
#detail .gone{padding:0 12px 12px;color:var(--warn);font-weight:600}

/* Vehicle markers. Leaflet moves .veh-wrap with transform, so a transform transition glides it. */
.veh-wrap{background:none;border:0;transition:transform 1.6s cubic-bezier(.25,.1,.25,1)}
#map.noglide .veh-wrap{transition:none!important}
.veh-wrap{width:44px;height:44px}
/* The icon box is 40x40 and centred in the 44x44 marker; only this box rotates (.f-N 0, .f-E 90, .f-S 180, .f-W 270). */
.veh-wrap .vb{position:absolute;left:2px;top:2px;overflow:visible;z-index:0;transform-origin:50% 50%} /* Leaflet gives map-pane svgs z-index:200, which would hide the badges */
.veh-wrap .vb.f-N{transform:rotate(0deg)} .veh-wrap .vb.f-E{transform:rotate(90deg)}
.veh-wrap .vb.f-S{transform:rotate(180deg)} .veh-wrap .vb.f-W{transform:rotate(270deg)}
.veh-wrap .vb .bd{fill:var(--c);stroke:#0f1c2c;stroke-opacity:.55;stroke-width:.9}
.veh-wrap .vb .wn{fill:#fff;opacity:.88}
.veh-wrap .vb .rf{fill:#fff;opacity:.2}
.veh-wrap .vb .wh{fill:#0f1c2c}
.veh-wrap .vb .ln{stroke:#0f1c2c;stroke-width:.8;fill:none;opacity:.45}
.veh-wrap .vb .hl{fill:#ffe27a}
.veh-wrap .vb .pole{stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;fill:none}
/* The route number stays upright in the middle. The direction badge sits above and right of it, clear of the pill at every
   width (the pill is 15px tall around the centre; the badge ends 1.5px above it) and clear of the drawing at every facing. */
.veh-wrap .rt{z-index:1;position:absolute;left:22px;top:22px;transform:translate(-50%,-50%);min-width:18px;max-width:56px;padding:0 3px;border-radius:4px;background:#fff;color:#0f1c2c;font:700 12px/15px var(--f-display);text-align:center;letter-spacing:.02em;box-shadow:0 0 0 1px rgba(15,28,44,.35);white-space:nowrap}
.veh-wrap .rt.long{font-size:11px;padding:0 2px;letter-spacing:0}
.veh-wrap .dr{z-index:1;position:absolute;left:30px;top:-8px;width:21px;height:21px;border-radius:50%;background:#0f1c2c;color:#fff;border:2px solid #fff;font:700 9px/17px var(--f-body);text-align:center;letter-spacing:-.02em}
.veh-wrap .dr.none{background:#566676} /* white glyph on this gray is 5.9:1; the old #6b7a8a was 4.4:1 */
.veh-wrap.stale{opacity:.4;filter:grayscale(1)}
.veh-wrap.sel .vb{filter:drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 2px var(--accent))}
.pin{background:none;border:0}
.pin .me{display:block;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(0,0,0,.4)}
.pin .hm{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#0f1c2c;color:#fff;border:2px solid #fff;font:700 14px var(--f-display);box-shadow:0 2px 8px rgba(0,0,0,.4)}
path.rad{stroke:var(--accent);fill:var(--accent);fill-opacity:.06;stroke-width:1.5}
path.gmhline{stroke:var(--accent);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;fill:none}
@media (prefers-reduced-motion:reduce){.veh-wrap{transition:none!important}}
/* Narrow or short screens: the cards leave the right-hand column free for the zoom buttons (44px wide, 10px in) and sit above the
   attribution strip, so no card ever covers a Leaflet control. */
@media (max-width:820px),(max-height:500px){
  /* The card never grows past the strip that select() reserves above it for the selected marker. */
  #detail{left:8px;right:64px;width:auto;bottom:26px;max-height:calc(100% - 90px)}
  #detail .dh{padding:8px 10px 8px;gap:8px}
  #detail dl{padding:6px 10px 8px;gap:3px 12px}
  #stage:has(#banner:not([hidden])) #detail,#stage:has(#idleBar:not([hidden])) #detail{max-height:calc(100% - 122px)}
  /* The zoom buttons live bottom-right; keep the empty-state card clear of them. */
  #empty{left:8px;right:64px;width:auto;transform:translateY(-50%)}
}