/**
 * Stacking corrections and shared controls.
 *
 * Loaded after the page's own inline styles so equal-specificity rules win.
 *
 * The problem this fixes: Leaflet builds its own stacking context — map panes go up
 * to z-index 400 and its controls to 1000. Every piece of our chrome that has to sit
 * over the map was numbered in the 3-60 range, so the map covered the site nav, the
 * address search and the app bar. Anything meant to float above a map has to clear
 * 1000, so the layers are named here in one place instead of being guessed at
 * individually.
 */

:root {
  --z-map: 0;          /* the map itself, and Leaflet's internal 0-1000 */
  --z-map-chrome: 1100; /* search, hints, legends drawn on top of the map */
  --z-app-bar: 1200;    /* the in-app top bar and its buttons */
  --z-nav: 1250;        /* the site header */
  --z-sheet: 1300;      /* the bottom sheet and the back-to-map button */
  --z-drawer: 1400;     /* the slide-over menu */
  --z-overlay: 1500;    /* modals and toasts */
}

/* The map sits at the bottom of everything and keeps its panes to itself. */
.mapwrap,
#map,
#app-map {
  z-index: var(--z-map);
}
#map {
  isolation: isolate;
}

nav {
  z-index: var(--z-nav);
}

.app-map .map-bar,
.app-map .place-search,
.app-map .name-place,
.place-search,
#place-search-wrap,
#map-hint,
.legend {
  z-index: var(--z-map-chrome);
}

.app-top,
#app-menu,
#app-sos,
#app-exit {
  z-index: var(--z-app-bar);
}

.sheet,
.back-map {
  z-index: var(--z-sheet);
}

.drawer {
  z-index: var(--z-drawer);
}

/* Autocomplete has to clear whatever field it drops out of, map chrome included. */
.sugg {
  z-index: calc(var(--z-map-chrome) + 10);
}

/* ---------------------------------------------------------- locate control -- */

/**
 * "Where am I" button. Riders arrive with the map on the last place they looked at,
 * and the single most common thing they want is to get back to themselves — so it is
 * a permanent control rather than something that only happens on load.
 */
.sc-locate {
  background: #fff;
  border: 0;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 59, 46, 0.28);
  color: #0F3B2E;
  padding: 0;
}
.sc-locate:hover {
  background: #E9F3EC;
}
.sc-locate:focus-visible {
  outline: 3px solid #FFB612;
  outline-offset: 2px;
}
.sc-locate[aria-busy='true'] svg {
  animation: sc-spin 1s linear infinite;
}
.sc-locate.on {
  color: #007A4D;
}
@keyframes sc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Leaflet's control container is transparent; ours provides its own surface. */
.leaflet-control.sc-locate-control {
  border: 0;
  background: none;
  box-shadow: none;
}