/* ==========================================================================
   EWB Radar -- status.css
   Radar-Status-Pill (oben-mitte) inkl. pulsierender LED.
   Den Zustand -- ok, warn oder error -- setzt status.js am Element.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Maße der Pillen -- eine Quelle für alle

   Die Spalte der Pillen steht `--status-top` unter dem oberen Rand, und die
   Pillen darin haben den halben Abstand zueinander. Beide Zahlen stehen deshalb
   als Token da: `responsive.css` dreht sie je Breakpoint, und die Lage jeder
   Pille folgt mit, ohne dass jemand sie nachrechnet.

   `--status-pad` ist das seitliche Polster jeder Pille. Auch es steht als Token
   da: die Mindestbreite des Radar-Status weiter unten rechnet damit, und sie
   stimmte sonst nur in der Stufe, deren Polster jemand dort eingetragen hat.
   -------------------------------------------------------------------------- */
:root {
  --status-top: 20px;
  --status-h:   40px;
  --status-pad: var(--space-5);
}

/* --------------------------------------------------------------------------
   Radar-Status, Blitzflag und Max/Min -- Pillen oben-mitte

   Gemeinsame Gestalt für alle Pillen, damit sie nicht auseinander laufen. Die
   Lage gibt die Spalte `#status-stack` weiter unten.
   -------------------------------------------------------------------------- */
.radar-status,
.lightning-flag,
.extremes-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  height: var(--status-h);
  padding: 0 var(--status-pad);
  border-radius: var(--radius-full);

  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;

  box-shadow: var(--shadow-md);
  pointer-events: none;

  transition:
    color var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
}

/* --------------------------------------------------------------------------
   Die Spalte der Pillen

   Radar-Status, Blitzflag und Max/Min stehen untereinander in `#status-stack`.
   Eine versteckte Pille nimmt keinen Platz ein, die folgenden rücken nach: so
   gibt es kein Loch und keine Überdeckung, gleich welche sichtbar ist, und
   keine Lage muss für jede Kombination nachgerechnet werden. Der Abstand ist
   derselbe halbe Randabstand wie oben beim Blitzflag.

   In der Spalte stehen die Pillen im Fluss; ihre eigene Lage gilt nur außerhalb,
   etwa für die Kopie des Blitzflags im Screenshot (screenshot.css).

   Gestapelt ist die Spalte über der Karte (`.leaflet-pane`) und UNTER den
   Bedienelementen von Leaflet (`.leaflet-top` in vendor/leaflet/leaflet.css):
   reicht eine Pille im schmalen Fenster bis zu den Zoom-Knöpfen, liegen die
   Knöpfe oben. Die Pillen sind Anzeige und fangen keinen Zeiger; ein Knopf, den
   sie verdeckten, wäre zu bedienen, aber nicht zu sehen.

   Breit ist die Spalte wie ihre breiteste Pille, höchstens wie die Karte. Die
   Breite steht ausdrücklich da: die Spalte beginnt in der Mitte der Karte, und
   ohne die Angabe bliebe ihr nur die halbe Breite, sobald der Text der Pille
   schrumpfen darf (`#radar-status-text`).
   -------------------------------------------------------------------------- */
.status-stack {
  position: absolute;
  top: var(--status-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: max-content;
  max-width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--status-top) / 2);
  pointer-events: none;
}

.status-stack > .radar-status,
.status-stack > .lightning-flag,
.status-stack > .extremes-pill {
  position: static;
  top: auto;
  transform: none;
}

/* Die Pille des Radar-Status ist nie breiter als die Spalte, also nie breiter als
   die Karte. Ein Text, der dann nicht mehr hineinpasst, endet in einer Ellipse:
   dafür steht er in einem eigenen Element, das schrumpfen darf (in der Pille
   selbst, einem Flex-Behälter, griffe `text-overflow` nicht). */
.status-stack > .radar-status {
  max-width: 100%;
}

#radar-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pulsierende Status-LED */
.radar-status::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: pulse-led 2.4s ease-in-out infinite;
}

/* Wer wenig Bewegung will, bekommt ein stehendes Licht. Die globale Dämpfung
   (style.css) kürzt allein die Dauer einer Animation und lässt ihre endlose
   Wiederholung bestehen; das Licht steht deshalb ausdrücklich still. Der Puls
   trägt hier keine Auskunft: den Zustand nennen Farbe und Text der Pille. */
@media (prefers-reduced-motion: reduce) {
  .radar-status::before {
    animation: none !important;
  }
}

@keyframes pulse-led {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%       { box-shadow: 0 0 8px 3px currentColor; opacity: 0.8; }
}

/* Normalzustand: die Pille trägt die Uhrzeit des Frames, und die Ziffern der
   Schrift sind verschieden breit -- ohne feste Breite wackelt sie bei jedem
   Wechsel des Frames. Die Mindestbreite liegt knapp über der breitesten
   Fassung, jede schmalere wird nur bis dorthin aufgeweitet, und der Inhalt
   steht in der Mitte.

   Sie rechnet in zwei Teilen, weil die Pille aus zwei Teilen besteht: der Text
   wächst mit der Schrift (in em), und was daneben steht, hat feste Maße --
   das Polster links und rechts (`--status-pad`), der Rahmen auf beiden Seiten,
   die LED und ihre Lücke zum Text. Ein Wert allein in em träfe nur die Stufe,
   an deren Schriftgröße er gemessen ist.

   Die Breite gilt der Fassung ohne Präfix und deckt beide Sprachen der
   Instanzen; die englische ist die breitere. Das Ersatzbild trägt dieselbe
   Mindestbreite: sein Text mit der Zeit ist etwa so lang wie der des
   Normalzustands, und beim Wechsel zwischen beiden springt die Pille so nicht.
   Wo seine Fassung länger ist (mit Präfix), bestimmt der Text die Breite. Der
   Fehler trägt keine und ist so breit wie sein Text. Beides gilt bis zur Breite
   der Karte: darüber endet der Text in einer Ellipse (`#radar-status-text`).

   Breiter als das Fenster wird die Mindestbreite nie (`100vw`; die Seite rollt
   nicht, eine Bildlaufleiste zählt also nicht mit): in einer sehr schmalen
   Einbettung schöbe sie die Pille sonst über beide Ränder hinaus. Dort reicht
   die Pille von Rand zu Rand, und wo selbst der Text nicht mehr hineinpasst,
   endet er in der Ellipse. */
.radar-status--ok,
.radar-status--warn {
  min-width: min(calc(19.77em + 2 * var(--status-pad) + 2px + 8px + var(--space-2)), 100vw);
  justify-content: center;
}

.radar-status--ok {
  color: var(--color-ok);
  border-color: rgba(63, 185, 80, 0.22);
}

/* Nowcast: statt der Beschriftung steht das Präfix des Produkts mit seinem
   Schritt da (setRadarStatus() in status.js setzt die Klasse dazu), und der Text
   ist länger. Eine eigene, größere Breite statt einer für beide: sonst stünde
   die kürzere Fassung in einer Pille, die ihr sichtbar zu weit ist. */
.radar-status--ok.radar-status--nowcast {
  min-width: min(calc(22.36em + 2 * var(--status-pad) + 2px + 8px + var(--space-2)), 100vw);
}

.radar-status--warn {
  color: var(--color-warn);
  border-color: rgba(210, 153, 34, 0.22);
}

.radar-status--error {
  color: var(--color-error);
  border-color: rgba(248, 81, 73, 0.22);
}

/* --------------------------------------------------------------------------
   Blitzflag -- Blitzaktivität im sichtbaren Ausschnitt

   Sichtbar nur, solange der Blitz-Layer an ist; lightning_flag.js schaltet
   dafür `hidden`. Die Regel dafür nimmt Klasse UND Attribut, damit sie die
   gemeinsame Pillen-Regel oben sicher schlägt -- das `display: none` aus dem
   Browser-Standard täte das nicht, ein Autoren-`display` schlägt es.
   -------------------------------------------------------------------------- */
.lightning-flag[hidden],
.extremes-pill[hidden] {
  display: none;
}

/* Das Symbol folgt der Schriftgröße, nicht seiner eigenen Kantenlänge im
   Markup -- und über `currentColor` auch der Zustandsfarbe. */
.lightning-flag__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.lightning-flag__icon svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

/* Blitze im Ausschnitt. */
.lightning-flag--active {
  color: var(--color-warn);
  border-color: rgba(210, 153, 34, 0.22);
}

/* Nachgesehen, keine Blitze -- der ruhige Zustand. */
.lightning-flag--quiet {
  color: var(--color-ok);
  border-color: rgba(63, 185, 80, 0.22);
}

/* Kurz nach neuen Blitzen. Die Klasse schlägt beide Zustände oben: sie steht
   später und wiegt gleich viel.

   ⚠️ Die Dauer EINES Pulsbildes rechnet lightning_flag.js aus der Standzeit und
   setzt sie als `--lightning-flag-blink` am Element: eine feste Zahl passte nur
   zu einer Standzeit, und bei zehn Sekunden ergäbe sie ein Flackern statt eines
   Hinweises. Der Rückfall greift nur, wenn niemand die Eigenschaft gesetzt hat
   -- dann steht die Pille gar nicht. */
.lightning-flag--new {
  color: var(--color-error);
  border-color: rgba(248, 81, 73, 0.35);
  animation: lightning-flag-pulse var(--lightning-flag-blink, 0.6s)
             ease-in-out infinite;
}

@keyframes lightning-flag-pulse {
  0%, 100% { opacity: 1;    box-shadow: var(--shadow-md); }
  50%      { opacity: 0.55; box-shadow: 0 0 10px 2px currentColor; }
}

/* Wer wenig Bewegung will, bekommt dasselbe Blinken -- nur in Farbe statt in
   Deckkraft und Leuchten.

   Die globale Dämpfung (style.css) hielte die Animation sonst im schwächsten
   Bild ihrer Kurve an: die Pille sähe blasser aus als im Ruhezustand und bliebe
   rot stehen. Beides ist keine Meldung mehr, sondern ein Darstellungsfehler.
   Die Dauer wird deshalb ausdrücklich zurückgeholt -- dieselbe bewusste Ausnahme
   wie beim Puls der Feature-Knöpfe (buttons.css), und aus demselben Grund: der
   Hinweis IST hier die Information.

   Reduziert heißt: die Fläche bleibt ruhig, es wechselt nur die Schriftfarbe,
   in harten Schritten statt weich. Das TEMPO ist dasselbe wie beim vollen Puls
   -- es folgt der Standzeit. Die Deckkraft rührt keine dieser Stufen an, sie
   bleibt bei ihrem Wert. */
@media (prefers-reduced-motion: reduce) {
  .lightning-flag--new {
    animation-name:            lightning-flag-blink;
    /* Dieselbe gerechnete Dauer wie oben -- reduziert heißt hier Farbe statt
       Deckkraft, nicht ein anderes Tempo. Das `!important` holt sie gegen die
       globale Dämpfung zurück. */
    animation-duration:        var(--lightning-flag-blink, 0.9s) !important;
    animation-timing-function: steps(1, end);
  }
}

/* Zurück auf die Farbe des aktiven Zustands: bei neuen Blitzen liegt immer
   mindestens einer im Ausschnitt, die Pille ist dort also gelb. */
@keyframes lightning-flag-blink {
  0%,  49%  { color: var(--color-error); }
  50%, 100% { color: var(--color-warn); }
}

/* --------------------------------------------------------------------------
   Störung -- die Quelle trägt gerade keine Aussage über den Ausschnitt

   Dieselben Werte wie `.radar-status--error`: es ist dieselbe Pillenfamilie und
   dieselbe Art Nachricht, und zwei Rottöne für denselben Sachverhalt wären eine
   Unterscheidung, die keine ist.

   ⚠️ OHNE Animation, und das ist der Unterschied zu `--new`: rot mit Puls heißt
   "neue Blitze", rot und ruhig heißt "gestört". Trüge die Störung denselben
   Puls, hätte dieselbe Erscheinung zwei Bedeutungen -- lightning_flag.js hält
   die beiden Klassen deshalb auseinander, und diese Regel steht zusätzlich
   HINTER `--new`, damit sie bei gleichem Gewicht gewönne, falls doch einmal
   beide am Element stehen. */
.lightning-flag--error {
  color: var(--color-error);
  border-color: rgba(248, 81, 73, 0.22);
  animation: none;
}

/* --------------------------------------------------------------------------
   Max/Min -- Pille unter dem Blitzflag

   Sichtbar, solange MIN oder MAX am Inspector-Knopf an ist (extremes_pill.js
   schaltet `hidden`). Je Zweig Symbol und Wert; die Symbole sind SVG mit
   currentColor und bekommen ihre Farbe hier: Max rot, Min blau, ein Zweig ohne
   Wert weiß; die feine Kontur hält das Weiß auf hellem Grund sichtbar.
   -------------------------------------------------------------------------- */
.extremes-pill__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.extremes-pill__icon {
  display: inline-flex;
  flex-shrink: 0;
}

/* Eine Farbstufe aus dem Bild statt eines Werts aus der Wertedatei: kursiv wie die Blase
   des Inspectors (.inspector-tooltip--approx). */
.extremes-pill__item--approx .extremes-pill__value {
  font-style: italic;
}

.extremes-pill__icon svg {
  width: 0.95em;
  height: 0.95em;
  display: block;
}

.extremes-pill__icon--max  { color: var(--color-error); }
.extremes-pill__icon--min  { color: #3b82f6; }
.extremes-pill__icon--none {
  color: #ffffff;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}