/* ==========================================================================
   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 beide

   Das Blitzflag sitzt unter der Radar-Pille, mit demselben Abstand, den die
   Radar-Pille zum oberen Rand hat. Beide Zahlen stehen deshalb als Token da:
   `responsive.css` dreht sie je Breakpoint, und die Lage des Blitzflags folgt
   mit, ohne dass jemand sie nachrechnet.
   -------------------------------------------------------------------------- */
:root {
  --status-top: 20px;
  --status-h:   40px;
}

/* --------------------------------------------------------------------------
   Radar-Status und Blitzflag -- Pillen oben-mitte

   Gemeinsame Gestalt, getrennte Lage: alles außer `top` teilen sich beide,
   damit sie nicht auseinander laufen.
   -------------------------------------------------------------------------- */
.radar-status,
.lightning-flag {
  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(--space-5);
  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);
}

.radar-status  { top: var(--status-top); }

/* Der HALBE Abstand der Radar-Pille zum Bildschirmrand -- die beiden gehören
   zusammen und sollen kompakt stehen, sich aber nicht berühren. */
.lightning-flag { top: calc(var(--status-top) * 1.5 + var(--status-h)); }

/* 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;
}

@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; }
}

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

.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] {
  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;
}