/*
    THE SITE MAP'S OWN STYLESHEET.

    Everything Components/Shared/SiteMap.razor needs and nothing else: the Leaflet host box, its
    fallback, and the overrides that drag Leaflet's own chrome onto this product's surfaces.

    LEAFLET SHIPS ITS OWN LIGHT CHROME. Without the overrides at the foot of this file a bright
    white zoom control and a white attribution strip sit on top of satellite imagery in both themes.
    They are written as descendants of .sv-map rather than on the bare Leaflet classes, so a map
    this component does not draw is left alone.

    NOT CSS ISOLATION. Leaflet creates these elements itself, so the scoping attribute never reaches
    them, which is the same reason the canvas modules are styled from a stylesheet rather than a
    .razor.css.
*/

.sv-map {
  position: relative;

  /* LEAFLET'S STACK IS CONFINED TO THIS BOX. Leaflet numbers its own panes from 400 and its
     controls from 800, against a sticky page head at 21 and a top bar at 20 - so a map scrolling
     under the chrome painted straight over it, tiles and zoom control included. `position: relative`
     alone does not stop that: without a z-index it establishes no stacking context, so those
     numbers are still measured against the page. `isolation` forces one with no z-index of its own,
     which leaves the map exactly where it sits in the document order and contains every number
     Leaflet invents inside this element.

     NOT A z-index ON THE CHROME. Raising the header above 1000 would win here and lose to the next
     library that picks a bigger number; the defect is unbounded numbers escaping a box, and this is
     the box. The designer is deliberately unaffected - its own overlay sits at 1001 over a canvas
     that is the whole screen, and it draws no .sv-map. */
  isolation: isolate;

  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-card);
  overflow: hidden;

  /* The handoff has a token for exactly this surface - the ground behind the
     tiles, visible while they load and beyond the imagery's coverage. */
  background: var(--sv-map-canvas);
}

.sv-map__canvas {
  width: 100%;

  /* An explicit height, because Leaflet measures its container on creation and
     a percentage height inside a flex or grid parent resolves to zero. A map
     that renders as a grey box is nearly always this. */
  height: var(--sv-map-height, 380px);
}

.sv-map--tall .sv-map__canvas {
  height: var(--sv-map-height-tall, 560px);
}

.sv-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  padding: var(--sv-space-4);
  text-align: center;
  background: var(--sv-bg-raised);
}

.sv-map .leaflet-container {
  background: var(--sv-map-canvas);
  font-family: var(--sv-font-sans);
}

.sv-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--sv-bg) 82%, transparent);
  color: var(--sv-text-tertiary);
  font: 400 10px/1.4 var(--sv-font-sans);
}

.sv-map .leaflet-control-attribution a {
  color: var(--sv-text-secondary);
}

.sv-map .leaflet-bar a {
  background: var(--sv-bg-raised);
  color: var(--sv-text);
  border-bottom-color: var(--sv-border);
}

.sv-map .leaflet-bar a:hover {
  background: var(--sv-bg-overlay);
  color: var(--sv-accent);
}