/* ==========================================================================
   EWB Radar -- hover_select.css
   Auswahl an einem Feature-Knopf. Der Bauplan steht im Kopf von
   frontend/js/hover_select.js; hier steht allein die Darstellung.

   Drei Dinge, die hier tragen und deshalb erklärt gehören:

   1. Es gibt EINE Bahn für alle Knöpfe, und sie hängt an #map-shell -- nicht in
      der Leiste. Grund: features.js verschiebt die Knöpfe zur Laufzeit zwischen
      Leiste und Dreipunkt-Menü. Alles, was hier an einer Gruppe hinge, wäre nach
      dem ersten Resize an der falschen Stelle.

   2. Weil die Bahn nicht in #controls liegt, greift KEINE der Container-Regeln
      aus tooltips.css. Dort setzt "[data-t-tooltip]::after" nur das Aussehen und
      lässt die Deckkraft auf 0; sichtbar wird eine Blase erst durch eine Regel je
      Container. Ohne die Regeln weiter unten stünde der Text im Attribut, sähe im
      Quelltext vollständig richtig aus und wäre am Bildschirm unsichtbar.
      Die Regeln hier wiegen (1,2,1) und konkurrieren mit nichts -- #map-shell
      taucht in tooltips.css nicht auf.

   3. Der Abstand zwischen Knopf und Bahn steht HIER, nicht im Skript. Das Skript
      setzt nur den Ankerpunkt an der Kante des Knopfes; die Lücke entsteht als
      margin. Damit bleibt der Abstand eine Sache des Stylesheets und ein
      Inline-Wert kann ihn nicht still schlagen.
   ========================================================================== */

#hover-select {
  /* Abstand zwischen Knopf und Bahn, und die Pufferzone rundherum. Beide so
     breit wie der Abstand zwischen zwei Knöpfen in der Leiste (controls.css
     setzt dort gap: var(--space-2)) -- die Bedienung soll sich anfühlen wie die
     Leiste, an der sie hängt. */
  --hs-gap: var(--space-2);
  --hs-buffer: var(--space-2);
  /* Kantenlänge des Zusatzknopfes. Sie geht in die Lage der Bahn ein: mit ihm
     rückt sie um seine Kantenlänge plus eine zweite Lücke weiter weg. */
  --hs-extra-size: 40px;

  position: absolute;
  /* Geschlossen ist die Bahn nicht vorhanden -- kein unsichtbares Element, das
     Zeigerereignisse über der Karte abfängt. */
  display: none;
  box-sizing: border-box;
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: none;
  /* Über allem, was in #map-shell liegt: #controls (20001), #controls-overflow
     (20002), #right-controls (20003) und die aufgeklappte Attributionsleiste
     (20004, right_controls.css). Gemessen, nicht geschätzt -- die Bahn geht aus
     einem dieser Knöpfe auf und läge sonst hinter seiner eigenen Leiste. */
  z-index: 20005;
}
#hover-select[data-open="true"] { display: block; }

/* Senkrecht: über dem Knopf, Stufe 0 unten -- die Leseordnung der Skizze.
   48 = Ring 40 + zweimal 3 px Luft + zweimal 1 px Rand. Dieselbe Rechnung führt
   trackLengthPx() in hover_select.js für die LÄNGE der Bahn (RING_SIZE_PX,
   RING_EDGE_PAD_PX, TRACK_BORDER_PX) -- so ist der Rand rundherum gleich breit.
   Wer hier ändert, ändert dort mit.

   Das Skript setzt left auf die MITTE des Knopfes und bottom auf dessen
   Oberkante; die Zentrierung quer dazu und die Lücke stehen hier. */
#hover-select[data-orientation="vertical"] {
  width: 48px;
  transform: translateX(-50%);
  margin-bottom: var(--hs-gap);
}
/* Mit Zusatzknopf steht zwischen Knopf und Bahn noch ein Element: Lücke,
   Zusatzknopf, Lücke. Die Maße stehen HIER und nicht im Skript -- dort wäre der
   Abstand ein Inline-Wert, der jede Regel schlüge. */
#hover-select.hs-track--extra[data-orientation="vertical"] {
  margin-bottom: calc(2 * var(--hs-gap) + var(--hs-extra-size));
}
#hover-select.hs-track--extra[data-orientation="horizontal"] {
  margin-right: calc(2 * var(--hs-gap) + var(--hs-extra-size));
}
/* Waagerecht: links neben dem Knopf, Stufe 0 rechts -- die um 90 Grad gedrehte
   untere Leiste. Gilt für die rechte Leiste und das Dreipunkt-Menü. */
#hover-select[data-orientation="horizontal"] {
  height: 48px;
  transform: translateY(-50%);
  margin-right: var(--hs-gap);
}

/* Brücke über den Abstand zwischen Knopf und Bahn.

   Ohne sie verlässt der Zeiger auf dem Weg zur Auswahl kurz beide Elemente,
   pointerleave feuert und die Auswahl schließt sich genau in dem Moment, in dem
   man sie benutzen will. Der Nachlauf von 250 ms im Skript fängt den Rest.

   ⚠️ Sie deckt nicht nur den Spalt ab, sondern die ganze Bahn samt Puffer
   rundherum. Zwei Gründe: der Innenraum der Bahn ist um ihren eigenen Rand
   schmaler als der Knopf darunter -- wer an dessen Kante entlangfährt, wäre
   sonst daneben --, und wer beim Wandern über die Stufen seitlich abkommt,
   müsste unten neu ansetzen.

   Sie ist ein ::before und liegt damit in der Baumordnung VOR den Stufen und
   dem Griff. Diese bekommen ihre Klicks also weiterhin selbst; die Pufferzone
   fängt nur, was daneben liegt. Ein ::after läge darüber und schluckte sie. */
#hover-select::before { content: ""; position: absolute; }
#hover-select[data-orientation="vertical"]::before {
  left:   calc(-1 * var(--hs-buffer));
  right:  calc(-1 * var(--hs-buffer));
  top:    calc(-1 * var(--hs-buffer));
  bottom: calc(-1 * (var(--hs-gap) + var(--hs-buffer)));
}
#hover-select[data-orientation="horizontal"]::before {
  top:    calc(-1 * var(--hs-buffer));
  bottom: calc(-1 * var(--hs-buffer));
  left:   calc(-1 * var(--hs-buffer));
  right:  calc(-1 * (var(--hs-gap) + var(--hs-buffer)));
}
/* Mit Zusatzknopf muss die Zone auch ihn und die zweite Lücke überspannen --
   sonst verlässt der Zeiger auf dem Weg zum Knopf die Gruppe und die Auswahl
   schließt sich beim Hingreifen. */
#hover-select.hs-track--extra[data-orientation="vertical"]::before {
  bottom: calc(-1 * (2 * var(--hs-gap) + var(--hs-extra-size) + var(--hs-buffer)));
}
#hover-select.hs-track--extra[data-orientation="horizontal"]::before {
  right: calc(-1 * (2 * var(--hs-gap) + var(--hs-extra-size) + var(--hs-buffer)));
}

/* --------------------------------------------------------------------------
   Zusatzknopf -- eine zweite Einstellung derselben Ebene
   -------------------------------------------------------------------------- */

/* Er sitzt ZWISCHEN Knopf und Bahn und sieht aus wie ein Knopf der Leiste, ist
   aber keiner: ein echtes <button> brächte in #controls die Vorgaben aus
   buttons.css mit. Hier liegt er zwar in #map-shell, aber aus demselben Grund
   wie die Stufen bleibt er ein div.

   ⚠️ Über der Bahn (z-index 1 am Griff): die Pufferzone ist ein ::before der
   Bahn und reicht bis zum Hauptknopf hinunter, also über diesen Knopf hinweg.
   Bei gleichem Gewicht entschiede die DOM-Reihenfolge -- er läge darunter und
   bekäme keinen einzigen Klick, während er völlig normal aussieht. */
#hover-select .hs-extra {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: var(--hs-extra-size); height: var(--hs-extra-size);
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg-2);
  cursor: pointer;
  z-index: 2;
}
#hover-select.hs-track--extra .hs-extra { display: flex; }
#hover-select .hs-extra img,
#hover-select .hs-extra svg { display: block; width: 24px; height: 24px; }

/* Senkrecht sitzt er UNTER der Bahn (Richtung Knopf), waagerecht rechts davon
   -- in beiden Lagen also auf dem Weg vom Knopf zur Bahn. */
#hover-select[data-orientation="vertical"] .hs-extra {
  top: calc(100% + var(--hs-gap));
  left: 50%; transform: translateX(-50%);
}
#hover-select[data-orientation="horizontal"] .hs-extra {
  left: calc(100% + var(--hs-gap));
  top: 50%; transform: translateY(-50%);
}

/* Rückmeldung wie an den Knöpfen der Leiste. Am Gerät gibt es kein :hover --
   dort setzt das Skript data-hover, solange der ziehende Finger auf ihm liegt;
   ohne diese Rückmeldung wäre nicht zu sehen, dass hier etwas zu wählen ist.
   ⚠️ Das scale steht ZUSAMMEN mit dem translate der Zentrierung: transform
   ersetzt, es ergänzt nicht, und der Knopf spränge sonst zur Seite. */
#hover-select .hs-extra:hover,
#hover-select .hs-extra[data-hover="true"] {
  background: var(--color-accent-dim);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
#hover-select[data-orientation="vertical"] .hs-extra:hover,
#hover-select[data-orientation="vertical"] .hs-extra[data-hover="true"] {
  transform: translateX(-50%) scale(1.06);
}
#hover-select[data-orientation="horizontal"] .hs-extra:hover,
#hover-select[data-orientation="horizontal"] .hs-extra[data-hover="true"] {
  transform: translateY(-50%) scale(1.06);
}

/* Die Linie zwischen den Punkten -- ein Schieberegler, kein Punktehaufen.
   Sie verbindet die Mitten der äußeren Ringe und läuft nicht bis an die Enden;
   Länge und Versatz rechnet das Skript. */
#hover-select .hs-rail {
  position: absolute;
  background: var(--color-border);
  border-radius: var(--radius-full);
}
#hover-select[data-orientation="vertical"]   .hs-rail { left: 50%; width: 2px; transform: translateX(-50%); }
#hover-select[data-orientation="horizontal"] .hs-rail { top: 50%; height: 2px; transform: translateY(-50%); }

/* Trefferfläche einer Stufe: entlang der Bahn ihr voller Abstand, quer dazu der
   ganze Innenraum. Sie ist bewusst viel größer als alles Gezeichnete -- ein
   Punkt von 10 px ist mit dem Finger nicht zuverlässig zu treffen.

   ⚠️ Sie ist quadratisch und sitzt auf ihrer MITTE. Eine Fläche, die stattdessen
   den Innenraum der Bahn spannte, hinge an dessen Rand -- und der Rand der Bahn
   zählt zu ihrer Breite, die Fläche stünde also seitlich über. Die Kantenlänge
   entspricht dem Abstand der Stufen (STOP_SPACING_PX in hover_select.js). */
#hover-select .hs-stop {
  position: absolute;
  box-sizing: border-box;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border: 0; padding: 0; background: none;
  cursor: pointer;
}
#hover-select[data-orientation="vertical"]   .hs-stop { left: 50%; }
#hover-select[data-orientation="horizontal"] .hs-stop { top: 50%; }

/* Jede Stufe zeigt einen Ring in der Kantenlänge der Knöpfe darunter und darin
   einen Punkt in der Farbe ihrer Stufe.

   ⚠️ Der Ring ist NICHT die Trefferfläche: die spannt quer zur Bahn den ganzen
   Innenraum, ist damit kein Kreis, und ein Ring aus ihrem eigenen Rand wäre eine
   Ellipse. Deshalb zeichnet ein eigenes, mittig gesetztes Element den Ring.

   ⚠️ Der Punkt ist ein echtes Kind und KEIN ::after. Das ::after einer Stufe
   gehört der Sprechblase aus tooltips.css -- beides an derselben Stelle ergäbe
   einen Punkt, der zum Textkasten wird. Der Ring darf ::before bleiben. */
#hover-select .hs-stop::before,
#hover-select .hs-dot {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  box-sizing: border-box;
}
/* Der Ring erscheint NUR unter dem Zeiger. Er ist die Rückmeldung "hier würde
   dein Tipp landen", kein Dauerschmuck -- ständig sichtbar konkurriert er mit
   den Punkten, die die eigentliche Auskunft tragen. Seine Farbe nimmt er vom
   Punkt darunter auf, stark verdünnt; ohne Stufenfarbe (die Grenzen) bleibt es
   beim neutralen Grund der Leiste. */
#hover-select .hs-stop::before {
  width: 40px; height: 40px;
  border: 1px solid color-mix(in srgb, var(--hs-stop-color, var(--color-border)) 45%, transparent);
  background: color-mix(in srgb, var(--hs-stop-color, var(--color-text-muted)) 16%, transparent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
#hover-select .hs-stop:hover::before,
#hover-select .hs-stop:focus-visible::before { opacity: 1; }

/* Der Punkt der aktiven Stufe wird größer statt andersfarbig -- die Farbe gehört
   der Stufe, nicht dem Zustand. */
#hover-select .hs-dot {
  width: 10px; height: 10px;
  background: var(--hs-stop-color, var(--color-text-muted));
  transition: background var(--transition-fast), width var(--transition-fast), height var(--transition-fast);
}
#hover-select .hs-stop[data-active="true"] .hs-dot {
  width: 14px; height: 14px;
  background: var(--hs-stop-color, var(--color-accent));
}

/* Stufen mit gezeichnetem Symbol statt Punkt: das Skript setzt das Symbol
   anstelle des Punktes ein. Der Ring bleibt. */
#hover-select .hs-stop--icon svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Der Griff sitzt auf der aktiven Stufe und ist deutlich größer als ein Punkt.

   ⚠️ Quer zur Bahn zentriert er sich per transform, nicht über einen gerechneten
   Abstand: sein Rand zählt bei content-box zur Breite HINZU, der Innenraum der
   Bahn ist um ihren eigenen Rand schmaler, und aus beidem zusammen wurde er
   sichtbar aus der Mitte geschoben. Mit box-sizing und transform hängt die Lage
   an keiner dieser Zahlen mehr. */
#hover-select .hs-knob {
  position: absolute;
  box-sizing: border-box;
  /* ⚠️ ÜBER den Stufen. Beide sind positionierte Geschwister ohne eigene
     Stapelebene, und bei Gleichstand entscheidet die DOM-Reihenfolge -- die
     Stufen entstehen bei JEDEM Öffnen neu und hängen sich damit hinter den
     Griff, der nur einmal gebaut wird. Er läge also unter ihnen, und ein Druck
     auf ihn träfe die Stufe darüber: der Griff sähe normal aus und ließe sich
     nicht ziehen. Das Muster kommt ohne diese Regel aus, weil es den Griff dort
     als LETZTES einhängt; hier trägt sie das Gewicht, nicht die Reihenfolge. */
  z-index: 1;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  background: var(--hs-knob-color, var(--color-accent));
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  transition: top var(--transition-fast), left var(--transition-fast);
  cursor: grab;
}
#hover-select[data-orientation="vertical"]   .hs-knob { left: 50%; }
#hover-select[data-orientation="horizontal"] .hs-knob { top:  50%; }
/* Beim Ziehen folgt der Griff dem Finger ohne Nachlauf -- die Übergangszeit gilt
   dem Einrasten, nicht der Bewegung. */
#hover-select[data-dragging="true"] .hs-knob { transition: none; }

/* Stufen mit Symbol kommen ohne Griff aus: die gewählte Stufe behält einfach
   ihren Ring, als wäre der Zeiger dort stehen geblieben. Eine gefüllte Scheibe
   deckte genau das zu, worum es geht. */
#hover-select.hs-track--icons .hs-knob { display: none; }
#hover-select.hs-track--icons .hs-stop[data-active="true"]::before { opacity: 1; }

/* --------------------------------------------------------------------------
   Sprechblase an der Stufe -- siehe Punkt 2 im Kopf dieser Datei
   -------------------------------------------------------------------------- */

/* ⚠️ Mehrzeiliger Text steht mittig, und dafür braucht es hier eine eigene
   Regel. In der Leiste steht keine: die Blase ist ein ::after, ihre Träger sind
   <button>-Elemente, und Buttons bringen die Zentrierung aus dem Browser-
   Standard mit; das Pseudo-Element erbt sie. Die Stufen hier sind divs und erben
   deshalb linksbündig. Ein grep über die Stylesheets sieht den Browser-Standard
   nicht -- gemessen, nicht geschlossen. */
#hover-select .hs-stop[data-t-tooltip]::after,
#hover-select .hs-extra[data-t-tooltip]::after { text-align: center; }

/* Lage. Senkrecht steht die Blase LINKS neben ihrer Stufe -- daneben ist Platz,
   über der Stufe säße sie auf der nächsten. Waagerecht steht sie darüber, weil
   links und rechts die Nachbarstufen liegen. */
#hover-select[data-orientation="vertical"] .hs-stop[data-t-tooltip]::after,
#hover-select[data-orientation="vertical"] .hs-extra[data-t-tooltip]::after {
  bottom: auto; top: 50%;
  left: auto; right: calc(100% + 10px);
  transform: translateY(-50%);
}
/* Der Zusatzknopf zeigt seine Blase nur beim Hover -- sein Zustand steht in
   seinem eigenen Symbol, sie ist die Erklärung, nicht die Auskunft. */
#hover-select[data-open="true"] .hs-extra[data-t-tooltip]:hover::after {
  opacity: 1;
}
#hover-select[data-orientation="horizontal"] .hs-stop[data-t-tooltip]::after {
  bottom: calc(100% + 10px); top: auto;
  left: 50%; right: auto;
  transform: translateX(-50%);
}

/* Sichtbarkeit. Zwei Fälle, und der erste hängt NICHT an :hover -- am Gerät gibt
   es keinen Zeiger:
     - die GEWÄHLTE Stufe zeigt ihre Blase dauerhaft, solange die Auswahl offen
       ist. Sie beantwortet "was ist gerade eingestellt".
     - die Stufe unter dem Zeiger zeigt ihre zusätzlich. Sie beantwortet "was
       passiert, wenn ich hier tippe". */
#hover-select[data-open="true"][data-orientation="vertical"] .hs-stop[data-active="true"][data-t-tooltip]::after,
#hover-select[data-open="true"][data-orientation="vertical"] .hs-stop[data-t-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%);
}
#hover-select[data-open="true"][data-orientation="horizontal"] .hs-stop[data-active="true"][data-t-tooltip]::after,
#hover-select[data-open="true"][data-orientation="horizontal"] .hs-stop[data-t-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%);
}

/* Es steht immer nur EINE Blase. Zeigt der Zeiger auf eine Stufe, schweigt die
   der gewählten -- zwei Kästen nebeneinander lesen sich wie ein Fehler.
   :not(:hover) nimmt den Fall aus, dass die gewählte Stufe selbst unter dem
   Zeiger liegt: sonst verstummte sie genau dort, wo sie gemeint ist.

   ⚠️ Die Bedingung hängt an einem ZUSTAND, nicht am :hover der Bahn. Zur Bahn
   gehört auch ihre Pufferzone -- beim Hinfahren läge der Zeiger auf ihr, ohne
   dass eine Stufe gemeint ist, und die Blase der Auswahl verschwände für einen
   Moment ohne Grund. Das Skript setzt data-hovering nur, wenn wirklich eine
   Stufe unter dem Zeiger liegt. */
#hover-select[data-open="true"][data-hovering="true"] .hs-stop[data-active="true"]:not(:hover)[data-t-tooltip]::after {
  opacity: 0;
}