/* ==========================================================================
   EWB Radar -- floating_panel.css
   Das schwebende Feld. Der Bauplan steht im Kopf von
   frontend/js/floating_panel.js; hier steht allein die Darstellung.

   ⚠️ Am Feld selbst steht keine `display`-Angabe und kein `z-index`. Das Feld
   ist ein Popover: geschlossen blendet es die Regel des Browsers für
   `[popover]` aus, und eine eigene `display`-Angabe schlüge diese Regel.

   ⚠️ Das Feld ist so hoch wie sein Inhalt und scrollt nicht: nirgends hier
   steht eine Höhe am Feld oder an seinem Inhaltsbereich, eine `max-height`,
   eine Einheit der Fensterhöhe oder ein `overflow` mit `auto` oder `scroll`.
   Wie hoch der Inhalt ist, gestaltet der Aufrufer.
   ========================================================================== */

.floating-panel {
  --floating-panel-header: 44px;
  /* Der Rand um den Inhalt: Griff zum Verschieben, an allen vier Seiten. */
  --floating-panel-rim: 12px;

  /* Die Lage schreibt das Skript als `left` und `top`, gegen das Fenster. Die
     Vorgaben des Browsers für ein Popover (mittig über `inset` und `margin`,
     dazu Innenabstand und Rahmen) verschöben sie und stehen deshalb hier
     ausdrücklich zurückgesetzt, statt sich auf eine Regel in einem anderen
     Stylesheet zu verlassen. */
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;

  width: clamp(300px, 30vw, 480px);
  max-width: calc(100vw - 20px);

  /* Das Kreuz steht über der oberen Kante, außerhalb des Feldes; die Vorgabe
     des Browsers für ein Popover schnitte es ab. */
  overflow: visible;

  /* Über dem Feld soll eine Berührung die Seite weder schieben noch
     vergrößern. Die Angabe steht am Feld und nicht an seinen Teilen; die
     Bedienelemente darin bekommen keine eigene. */
  touch-action: none;

  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--glass-bg-solid);
  border-radius: var(--radius-lg);
  /* Die Umrandung ist ein Schatten und kein Rahmen: sie nimmt keinen Platz. */
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-lg);
}

/* Wer wenig Bewegung will, bekommt ein Feld ohne Übergang. Die globale
   Dämpfung (style.css) gibt jedem Element eine Übergangsdauer, und sie träfe
   hier `left` und `top`, die das Skript bei jedem Schritt eines Zugs schreibt:
   das Feld soll dem Zeiger unmittelbar folgen. Die Regel gilt nur dem Feld,
   seine Teile behalten ihre Übergänge. */
@media (prefers-reduced-motion: reduce) {
  .floating-panel {
    transition: none !important;
  }
}

.floating-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: var(--floating-panel-header);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.floating-panel__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.floating-panel__actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.floating-panel__action {
  /* Symbol und Text stehen in einer Reihe, beide auf der Mitte des Knopfes. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-2);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.floating-panel__action:hover {
  background: var(--glass-bg-2h);
  color: var(--color-text);
}

/* Das Symbol eines Knopfes der Kopfzeile: an die Schrift des Knopfes gebunden
   und so groß, wie die Zeile seines Textes es trägt. Es schrumpft nicht, wenn
   der Platz in der Kopfzeile knapp wird. */
.floating-panel__action-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.floating-panel__body {
  margin: var(--floating-panel-rim);
}

/* Das Kreuz: über der oberen Kante, rechtsbündig mit dem Feld. Der Knopf ist
   die Trefferfläche; die sichtbare Scheibe darin ist kleiner, ohne dass die
   Fläche unter dem Finger schrumpft. */
.floating-panel__close {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.floating-panel__close-disc {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-close);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm);
  /* Die Farbe der zwei Striche: sie zeichnen mit `currentColor` und behalten
     sie in jedem Zustand; überfahren und gedrückt wechselt allein die Füllung. */
  color: var(--color-close-mark);
  transition: background-color var(--transition-fast);
}

.floating-panel__close:hover .floating-panel__close-disc,
.floating-panel__close:active .floating-panel__close-disc {
  background-color: var(--color-close-active);
}

/* Die zwei Striche. Ihre Fläche steht über `place-items` mittig in der Scheibe;
   wie die Striche in ihr liegen, legt das Skript fest (floating_panel.js). */
.floating-panel__close-icon {
  width: 14px;
  height: 14px;
}