/* B7Tracker — 3D terrain view.
 *
 * Everything here is scoped to the single `.b7d-root` element that map3d.js
 * appends inside #map. Leaflet's own DOM belongs to map.js and is never
 * touched: when 3D is active this layer simply paints over it.
 *
 * Stacking: #map is `isolation: isolate`, so Leaflet's internal ladder tops
 * out at 1000 (its .leaflet-top / .leaflet-bottom corners). `.b7d-root` sits
 * at 1100 and therefore covers the Leaflet controls as well as the tiles.
 */

#map .b7d-root {
  position: absolute;
  inset: 0;
  z-index: 1100;
  pointer-events: none;          /* 2D map stays fully interactive underneath */
  font-family: var(--font-sans);
}

/* ------------------------------------------------------------------ *
 * The 3D layer itself
 * ------------------------------------------------------------------ */

#map .b7d-layer {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--bg-2);
  transition: opacity 260ms ease, visibility 260ms linear;
}

#map .b7d-root.is-on .b7d-layer {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* MapLibre's container. It sets `position: relative` on itself; we need it
   to fill the layer instead. */
#map .b7d-canvas {
  position: absolute;
  inset: 0;
  background: var(--bg-2);
}

#map .b7d-canvas canvas { outline: none; }

/* ------------------------------------------------------------------ *
 * 2D / 3D toggle — always visible, in both modes.
 * Parked below Leaflet's zoom bar (44px x 2 + 10px margin) at the top right,
 * which is also exactly below MapLibre's navigation control, so the button
 * never moves when the mode changes.
 * ------------------------------------------------------------------ */

#map .b7d-toggle {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 108px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 4;
  pointer-events: auto;
  min-width: 44px;
  padding: 0 var(--s-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  box-shadow: var(--shadow-1);
}

/* ------------------------------------------------------------------ *
 * Camera bar — 3D only, bottom left, clear of the compact attribution
 * ------------------------------------------------------------------ */

#map .b7d-cam {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-width: calc(100% - 84px);
}

#map .b7d-cam .btn { box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------------ *
 * Replay HUD — top left, only while a replay payload is live
 * ------------------------------------------------------------------ */

#map .b7d-hud {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  background: rgba(20, 24, 31, .92);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  color: var(--fg);
  font-size: var(--fs-1);
  line-height: 1.3;
  white-space: nowrap;
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  #map .b7d-hud {
    background: rgba(20, 24, 31, .72);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

#map .b7d-hud[hidden] { display: none; }

#map .b7d-hud-label {
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#map .b7d-hud-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Checkpoint markers
 * ------------------------------------------------------------------ */

#map .b7d-cp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--surface-2);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, .7);
  transition: transform var(--dur) ease;
}

/* wider tap target than the visible badge */
#map .b7d-cp::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

/* little stem so the badge reads as planted on the slope */
#map .b7d-cp::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  background: linear-gradient(to bottom, var(--line-strong), rgba(0, 0, 0, 0));
}

#map .b7d-cp:hover { transform: scale(1.14); }

#map .b7d-cp[data-state="passed"] {
  background: var(--ok);
  color: #06240f;
  box-shadow: 0 0 0 1px rgba(69, 214, 122, .55), 0 2px 8px rgba(0, 0, 0, .75);
}

#map .b7d-cp[data-state="next"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(255, 122, 31, .55), 0 2px 8px rgba(0, 0, 0, .75);
}

#map .b7d-cp-code { position: relative; top: .5px; pointer-events: none; }

/* ------------------------------------------------------------------ *
 * Racer marker
 * ------------------------------------------------------------------ */

#map .b7d-racer {
  position: relative;
  width: 0;
  height: 0;
  pointer-events: none;
}

#map .b7d-racer-dot,
#map .b7d-racer-pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
}

#map .b7d-racer-dot {
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(255, 122, 31, .7), 0 3px 10px rgba(0, 0, 0, .8);
}

#map .b7d-racer-pulse {
  background: var(--accent);
  opacity: .5;
  animation: b7d-pulse 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes b7d-pulse {
  0%   { transform: scale(.7); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

#map .b7d-racer-tag {
  position: absolute;
  left: 17px;
  top: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  background: rgba(20, 24, 31, .94);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-1);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}

#map .b7d-racer-tag i {
  font-style: normal;
  color: var(--fg-3);
}

/* dimmed while a replay ghost owns the view */
#map .b7d-root.is-replay .b7d-racer { opacity: .38; }
#map .b7d-root.is-replay .b7d-racer-pulse { animation: none; opacity: 0; }

/* ------------------------------------------------------------------ *
 * Replay ghost
 * ------------------------------------------------------------------ */

#map .b7d-ghost {
  position: relative;
  width: 0;
  height: 0;
  pointer-events: none;
}

#map .b7d-ghost-dot,
#map .b7d-ghost-ring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
}

#map .b7d-ghost-dot {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--accent-2);
  border: 3px solid #2a1403;
  box-shadow: 0 0 0 1px var(--accent-2), 0 0 22px rgba(255, 180, 105, .85), 0 3px 10px rgba(0, 0, 0, .8);
}

#map .b7d-ghost-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(255, 180, 105, .5);
  background: rgba(255, 180, 105, .1);
}

/* ------------------------------------------------------------------ *
 * Hover cursor (driven by the shared "hover" event)
 * ------------------------------------------------------------------ */

/* The marker element itself, so MapLibre's anchor:center already centres it —
   no negative margins here (unlike the dots nested in a 0x0 wrapper above). */
#map .b7d-cursor {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent-2);
  background: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Popups
 * ------------------------------------------------------------------ */

#map .b7d-pop .maplibregl-popup-content {
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: 1.45;
}

#map .b7d-pop .maplibregl-popup-close-button {
  top: 2px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--fg-3);
  font-size: 18px;
  line-height: 1;
}

#map .b7d-pop .maplibregl-popup-close-button:hover {
  background: var(--surface-2);
  color: var(--fg);
}

/* Tip colour, one rule per anchor — MapLibre paints it with border-*-color. */
#map .b7d-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip,
#map .b7d-pop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
#map .b7d-pop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--line-strong);
}

#map .b7d-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
#map .b7d-pop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
#map .b7d-pop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--line-strong);
}

#map .b7d-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--line-strong);
}

#map .b7d-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--line-strong);
}

#map .b7d-pop-h {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  padding-right: var(--s-4);
}

#map .b7d-pop-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

#map .b7d-pop-h strong {
  font-size: var(--fs-3);
  font-weight: 700;
}

#map .b7d-pop-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 2px 0;
}

#map .b7d-pop-row span { color: var(--fg-3); font-size: var(--fs-1); }

#map .b7d-pop-row b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#map .b7d-pop-row.is-passed b { color: var(--ok); }
#map .b7d-pop-row.is-eta b { color: var(--accent-2); }

/* ------------------------------------------------------------------ *
 * MapLibre chrome, retinted for the dark shell.
 * The vendor icons are dark-on-light data URIs and flip with the OS colour
 * scheme, so they are replaced outright rather than filtered.
 * ------------------------------------------------------------------ */

#map .b7d-canvas .maplibregl-ctrl-group {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

#map .b7d-canvas .maplibregl-ctrl-group:not(:empty) { box-shadow: var(--shadow-1); }

#map .b7d-canvas .maplibregl-ctrl-group button {
  width: 44px;
  height: 44px;
  background: var(--surface);
}

#map .b7d-canvas .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }

#map .b7d-canvas .maplibregl-ctrl-group button:hover { background: var(--surface-2); }

#map .b7d-canvas .maplibregl-ctrl-group button:focus,
#map .b7d-canvas .maplibregl-ctrl-attrib-button:focus { box-shadow: none; }

#map .b7d-canvas .maplibregl-ctrl-group button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

#map .b7d-canvas .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23f2f5f8' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
}

#map .b7d-canvas .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23f2f5f8' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
}

#map .b7d-canvas .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath fill='%23ff7a1f' d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%237d8798' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
}

#map .b7d-canvas .maplibregl-ctrl.maplibregl-ctrl-attrib {
  padding: 0 5px;
  background: rgba(20, 24, 31, .82);
  border-top-left-radius: var(--r-1);
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.5;
}

#map .b7d-canvas .maplibregl-ctrl-attrib a { color: var(--fg-2); text-decoration: none; }
#map .b7d-canvas .maplibregl-ctrl-attrib a:hover { color: var(--accent); text-decoration: underline; }

#map .b7d-canvas .maplibregl-ctrl-attrib-button {
  background-color: var(--surface);
  border-radius: var(--r-full);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23b3bdcb' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
}

#map .b7d-canvas .maplibregl-ctrl-attrib.maplibregl-compact-show { background: rgba(20, 24, 31, .95); }

/* ------------------------------------------------------------------ *
 * Small screens
 * ------------------------------------------------------------------ */

/* Buttons stay at the 44px touch target Leaflet's own bar uses, so the
   toggle sits the same distance below the zoom control in either mode. */
@media (max-width: 599px) {
  #map .b7d-cam { gap: 6px; max-width: calc(100% - 72px); }
  #map .b7d-cam .btn { padding: 0 10px; }
  #map .b7d-hud { font-size: 11px; padding: 5px var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  #map .b7d-racer-pulse { animation: none; opacity: .32; }
  #map .b7d-layer { transition: none; }
  #map .b7d-cp { transition: none; }
}