/*
 * Keep Leaflet maps underneath dialogs.
 *
 * Leaflet 1.9.4 gives its own subtree very high stacking values: panes run 200–700
 * (`.leaflet-tile-pane` 200 … `.leaflet-popup-pane` 700), `.leaflet-control` is 800 and the
 * `.leaflet-top` / `.leaflet-bottom` control rails are 1000. Nothing around the map competes
 * at that scale — Filament 4 puts its dialog at `.fi-modal-window-ctn { z-index: 50 }` over a
 * `.fi-modal-close-overlay { z-index: 40 }`, and the public site's overlays sit lower still.
 * Because the map's subtree was not isolated, those 400–1000 values were resolved against the
 * page's root stacking context and the map painted straight through any modal opened over it.
 *
 * `isolation: isolate` makes each map its own stacking context: Leaflet's internal ordering is
 * untouched inside it (tiles below markers below popups below controls), but the whole subtree
 * now participates in the page as a single box at z-index 0, so any dialog above 0 covers it.
 * Scoping to `.leaflet-container` — the class Leaflet puts on whatever element it initialises —
 * covers the organiser map, the public live map and the event page's GPX viewer at once.
 */
.leaflet-container {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/*
 * Fullscreen fallback for the public live map.
 *
 * iOS Safari on iPhone has no element-level Fullscreen API — `requestFullscreen` is absent and the
 * webkit-prefixed one exists only on <video>. Since a spectator at a finish line is the likeliest
 * user of this button, the fallback has to be as good as the real thing rather than an apology.
 *
 * `100dvh` (not `100vh`): on mobile Safari the visual viewport shrinks as the toolbars slide in,
 * and `vh` keeps the old value, so the bottom of the map — where the follow card sits — ends up
 * under the browser chrome.
 */
.live-map-faux-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #09090b;
    margin: 0;
    padding: 0;
}

.live-map-faux-fullscreen [data-gpx-map] {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
}

/* Stop the page behind scrolling under the overlay. */
html.live-map-faux-open,
html.live-map-faux-open body {
    overflow: hidden;
}

/* Native fullscreen: the shell fills the screen, so the map must too. */
[data-map-shell]:fullscreen [data-gpx-map],
[data-map-shell]:-webkit-full-screen [data-gpx-map] {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

[data-map-shell]:fullscreen,
[data-map-shell]:-webkit-full-screen {
    background: #09090b;
}


/*
 * Bib labels on the live maps (public page and the organiser's page alike). The Leaflet tooltip
 * is stripped to nothing and the chip inside it carries the per-participant colour that
 * public/js/live-tracking.js assigns, so the number is the one thing on the map that identifies
 * a runner while the marker colour keeps meaning "live / delayed / lost / finished".
 */
.leaflet-tooltip.live-bib-label {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.leaflet-tooltip.live-bib-label::before {
    display: none;
}

.live-bib-chip {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}