/* ==========================================================================
   MapLibre GL theming — controls, attribution and custom markers must follow
   the application theme. Map TILES stay provider-styled on purpose; the
   basemap choice is independent from the light/dark appearance.
   ========================================================================== */

.maplibregl-map {
  font: inherit;
  background: var(--surface-muted);
}

/* MapLibre's built-in cooperative-gesture banner duplicates the app's own
   .map-gesture-hint overlay (js/map/gestures.js) — keep only the latter. */
.maplibregl-cooperative-gesture-screen { display: none; }

/* The zoom pair keeps MapLibre's single two-button group — the bordered
   vertical column with the internal divider, unchanged in structure and
   size. Its COLORS are not decided here: js/map/mapView.js puts the shared
   .btn/.btn-elevated classes on the two buttons — the same component
   classes that color the #map-fit column — so both themes always follow
   one source. This file owns only the group's geometry and frame, plus
   the stacking: the corner container swaps the vendor z-index 2 for
   --z-map-controls, the level #map-fit already uses, so the two columns
   stack identically against the map markers. */
.maplibregl-ctrl-bottom-right {
  z-index: var(--z-map-controls);
}

.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  margin-inline-end: 12px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-m) !important;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  /* MapLibre hard-codes the group's background white. The buttons cover it
     except a hairline at the rounded corners, invisible in the light theme
     and a white fleck in the dark one — read the token instead. */
  background: var(--surface-elevated);
}

/* Hovering either button deepens the shared frame — the group-frame
   equivalent of .btn:hover's border-color. */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group:has(button:hover) {
  border-color: var(--border-strong) !important;
}

/* Geometry only: the frame owns the border and radius, and the buttons keep
   the vendor 32px squares (.btn's 34px height, padding, inline-flex display
   and per-button border do not apply inside the group). */
.maplibregl-ctrl-group .btn {
  display: block;
  width: 32px !important;
  height: 32px !important;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* The divider is the one border a button carries, so it must out-rank
   .btn's border: 0 above. */
.maplibregl-ctrl-group .btn + .btn {
  border-block-start: 1px solid var(--border);
}

/* The zoom glyphs join the app's Lucide icon family (plus/minus, 24-grid,
   2px stroke — same set the #map-fit buttons use) via a mask so they take
   the themed `color`; MapLibre's built-in fills are hard-coded. The stroke
   color in the data URI is inert — a mask only reads alpha. */
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* MapLibre paints keyboard focus with a hard-coded blue ring — a migration
   leftover the Leaflet anchors never had. Follow the global :focus-visible
   outline instead (vendor `outline: none` needs the !important). The inset
   offset keeps the ring inside the group's overflow:hidden. */
.maplibregl-ctrl-group button:focus { box-shadow: none !important; }
.maplibregl-ctrl-group button:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: -2px;
}

.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--surface-elevated) 86%, transparent) !important;
  color: var(--foreground-faint) !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-start-start-radius: var(--radius-s);
}

.maplibregl-ctrl-attrib a { color: var(--foreground-muted) !important; }

/* No track, no map chrome: while the state overlay is up the map area shows
   only the state card. (components.css carries the counterpart that hides
   the app's own #map-fit column.) Attribution stays — tiles render beneath
   it and the providers require the credit. */
#map-pane:has(#overlay-state:not([hidden])) .maplibregl-ctrl-group {
  display: none;
}

/* Sector boundary handles ---------------------------------------------------- */

.map-handle-icon { background: none; border: none; touch-action: none; }

.map-handle {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: var(--handle-color, var(--accent));
  border: 2.5px solid var(--map-handle-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.map-handle:active { cursor: grabbing; }

/* Enlarged invisible hit area for touch. */
.map-handle::after {
  content: "";
  position: absolute;
  inset: -14px;
}

.map-handle-grip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--handle-core);
}

.map-handle-icon:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Hover dot (profile ⇄ map sync) --------------------------------------------- */

/* MapLibre's vendor CSS fades every marker in and out (opacity .2s); the
   dot mirrors the pointer and the mobile probe, so it must switch instantly
   like Leaflet's setOpacity did — a fade leaves it semi-transparent for
   200 ms after every hover and probe move. */
.hover-dot-icon { background: none; border: none; pointer-events: none; transition: none; }

.hover-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid var(--map-handle-border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Waypoints (GPX <wpt>) ------------------------------------------------------- */

.map-waypoint-icon { background: none; border: none; }

.map-waypoint {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--waypoint-color, var(--accent));
  border: 2.5px solid var(--map-handle-border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* The pinned waypoint (js/map/mapView.js adds a lucide pin glyph when the
   profile reports the pin): the glyph OVERLAYS the circle — the circle
   keeps its full styling — with its purple fill and its outline + needle
   in the waypoint border color, no extra ring or shadow of its own. The
   needle is elongated so the body clears the circle's top edge by 3px, and
   the whole glyph is enlarged for a chunkier body. It anchors at its
   bottom tip: the needle's round-capped tip sits at (50%, 96.15%) of the
   20×26 box, so the translate plants that point (not the box center)
   exactly on the 50%/50% origin — the circle's center; symmetric borders
   keep the 50% origin on the center at any width. */
.map-waypoint-icon.is-pinned .map-waypoint {
  position: relative;
}

.map-waypoint-icon.is-pinned .map-waypoint svg {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -96.1538%);
}

/* Enlarged invisible hit area for touch, so the name plate is reachable. */
.map-waypoint::after {
  content: "";
  position: absolute;
  inset: -12px;
}

/* Name plate for named waypoints (in place of Leaflet's bindTooltip
   direction: top, offset [0, -8]): self-drawn div above the pin, shown while
   the pin is hovered. The form replicates Leaflet's tooltip-top — the box
   with the V-shaped caret descending from its bottom border, the caret
   always centered and its tip pointing at the waypoint — while the colors
   follow the theme like every other floating surface (elevated background,
   hairline border, themed text). */
.map-waypoint-label {
  display: none;
  position: absolute;
  inset-block-end: calc(50% + 14px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--foreground);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

.map-waypoint-icon:hover .map-waypoint-label { display: block; }

/* Arrow pointing at the pin — Leaflet's tooltip-top caret geometry: a 12px
   border box centered on the plate (left 50%, pulled back half its width),
   its block-start border colored like the plate's background so the visible
   triangle descends from the plate's bottom border in both themes; the
   plate sits 14px above the pin center, which puts the tip 8px above it —
   on the pin, like the old offset [0, -8]. */
.map-waypoint-label::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  margin-inline-start: -6px;
  border: 6px solid transparent;
  border-block-start-color: var(--surface-elevated);
}

/* Waypoint markers are keyboard buttons (Tab + Enter/Space, js/map/mapView.js):
   focus wears the app's focus ring like the map handles, and a named
   waypoint's plate shows on focus exactly as on hover. */
.map-waypoint-icon:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.map-waypoint-icon:focus-visible .map-waypoint-label { display: block; }

/* A hovered (or keyboard-focused) pin rises above the sector handles so its
   name plate paints over them — Leaflet showed the plate from tooltipPane
   (650), above the whole marker pane (600). The plate lives inside the
   pin's transform stacking context now, so the pin itself has to move; it
   stays under the button columns (800). !important beats the inline
   z-index: 300 the marker is created with. */
.map-waypoint-icon:hover,
.map-waypoint-icon:focus-visible {
  z-index: 750 !important;
}

/* The handle bridge (js/map/mapView.js): a sector handle parked on a named
   waypoint owns the pointer there — it is the drag affordance at that exact
   spot — so it surfaces the shadowed pin's name plate itself. The pin rises
   like on hover but turns pointer-transparent: a hoverable pin above the
   handle would steal the pointer back and flap between the two. */
.map-waypoint-icon.is-bridged .map-waypoint-label { display: block; }

.map-waypoint-icon.is-bridged {
  z-index: 750 !important;
  pointer-events: none;
}

/* Cooperative-gestures hint (touch devices): one finger scrolls the page,
   two fingers move the map. Purely informational — never blocks touches. */

.map-gesture-hint {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  width: fit-content;
  max-width: min(88%, 320px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 550;
  pointer-events: none;
}

.map-gesture-hint .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }