/*
 * map -- eine Karte aus Leaflet. Die Karte einer Tour: Hintergrundkacheln, die Punkte am
 * Weg als Marker, der Wegverlauf als Linie und die eigene Position
 * (karte_und_wegverlauf.md). In der Verwaltung dieselbe Fläche für die Lage einer
 * Sehenswürdigkeit: Markierung und Radiuskreis.
 * Ausprägung: --location für diese Lage in der Verwaltung -- flacher, weil die Karte dort
 * in einem Formular steht und nicht die Seite ist.
 * map__canvas ist die Fläche, die Leaflet bespielt; map__bar trägt den Knopf zur
 * eigenen Position und die Meldung dazu (fehlt, wo die Karte keinen Standort zeigt).
 * map__marker ist ein Punkt am Weg mit Nummer, --stamp eine Stempelstelle (hellgrün wie
 * in der Liste daneben), --plain ein Punkt ohne Nummer auf der Übersicht aller
 * Sehenswürdigkeiten.
 * Keine Zustände -- was sichtbar ist, entscheidet Leaflet.
 */

.map {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Die Höhe muss hier stehen: Leaflet braucht eine Fläche mit Maß, sonst zeichnet es
   in einen Kasten der Höhe null */
.map__canvas {
  /* Leaflet legt seine Schichten auf z-index 400 bis 1000. Ohne eigenen Stapelkontext
     gelten die gegenüber der ganzen Seite, und die Karte schiebt sich beim Scrollen über
     den Header (z-index 5). isolate sperrt sie in diesen Kasten. */
  isolation: isolate;
  block-size: 60svh;
  min-block-size: 18rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  /* Kacheln und Bedienelemente sitzen sonst über der abgerundeten Ecke */
  overflow: hidden;
  /* Die Karte fängt Wischgesten ab; ohne das scrollt die Seite beim Ziehen mit */
  touch-action: none;
  background-color: var(--color-surface);
}

/* Die Höhe folgt der Breite statt dem Bildschirm: Am Desktop ist die Spalte breit, und
   60 % der Bildschirmhöhe schöben die Felder darunter aus dem Blick */
.map--location .map__canvas {
  block-size: auto;
  aspect-ratio: 16 / 7;
  min-block-size: 14rem;
}

.map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.map__status {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Der Marker eines Punktes am Weg: ein Kreis mit der Nummer aus der Liste. Die Größe
   steht auch in map.js (MARKER_SIZE), Leaflet setzt sie selbst an das Element */
.map__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-decorative);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
  background-color: oklch(100% 0 0);
  color: oklch(22% 0.012 var(--accent-hue));
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* Hellgrün heißt „Hier wird gestempelt"; Schrift darauf fast schwarz (10:1). Die
   Kacheln bleiben im dunklen Schema hell, die Marker deshalb auch. */
.map__marker--stamp {
  border-color: var(--color-brand-light);
  background-color: var(--color-brand-light);
  color: var(--color-on-brand-light);
}

/* Ohne Tour keine Nummer: ein dunkelgrüner Punkt mit weißem Rand, auch im dunklen
   Schema -- die Kacheln bleiben hell */
.map__marker--plain {
  border: 0.3125rem solid oklch(100% 0 0);
  background-color: var(--color-brand-dark);
}

/* Leaflet zeichnet den Weg in seinem Blau; hier in Dunkelgrün, auch im dunklen Schema --
   die Kacheln bleiben hell. CSS schlägt das stroke-Attribut von Leaflet. */
.map__canvas .leaflet-overlay-pane path {
  stroke: var(--color-brand-dark);
}

/* Leaflet zeichnet seine Bedienelemente und Sprechblasen in eigenen Klassen; hier
   bekommen sie die Schrift der Anwendung statt der eingebauten */
.map__canvas .leaflet-container {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
}