/* ==========================================================================
   EWB Radar -- screenshot.css
   Format-Flyout neben #screenshot-btn.
   Gehört zu: frontend/js/screenshot.js

   Layout-Konzept (wie beim Geocoder-Suchfeld daneben):
   Das Flyout ist position:absolute und nimmt damit keinen Platz in der
   Flex-Spalte von #right-controls ein -- die übrigen Buttons rücken beim
   Aufklappen nicht.

   --screenshot-top wird per JS (buildFlyout) auf den vertikalen Offset des
   #screenshot-btn gesetzt und bei window:resize aktualisiert.
   right: 52px = Button-Breite (40px) + Gap (8px) + Rand → links des Buttons.
   ========================================================================== */

.screenshot-flyout {
  position: absolute;
  top: var(--screenshot-top, 0px);
  right: 52px;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Gleiche Höhe wie ein Button der Spalte: mit top am Button-Oberrand
     sitzen die Format-Pillen damit auf dessen Mittellinie. */
  height: 40px;

  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    opacity   160ms ease,
    transform 160ms ease;
}

.screenshot-flyout--open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Mit #right-controls qualifiziert: die Basisregel in buttons.css
   (#right-controls button) erzwingt 40×40 und gewänne sonst über die
   Spezifität. Glas-Hintergrund und Hover/Active kommen von dort bzw. aus
   right_controls.css und bleiben unangetastet. */
#right-controls .screenshot-format {
  width: auto;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);

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

/* --------------------------------------------------------------------------
   Zeitstempel im Kartenbild -- oben mittig, angelehnt an die Status-Pille
   (status.css). Das Element hängt nur für den Moment der Aufnahme in #map;
   zu sehen bekommt es niemand, weil Einfügen, Zeichnen und Entfernen in
   derselben Aufgabe laufen (screenshot.js, drawTimestamp).

   Farben und Schrift kommen aus den Tokens und folgen damit dem Theme.
   Kein backdrop-filter: auf Canvas nicht reproduzierbar, der halbtransparente
   Grund bleibt als solide Näherung -- dieselbe wie bei der Attribution-Bar.
   Keine pulsierende LED: die ist am Vorbild ein ::before, und der Komposer
   läuft über childNodes -- eigens nachgerechnet wird dort nur der Zipfel der
   Leaflet-Infofenster.
   -------------------------------------------------------------------------- */
.screenshot-stamp {
  position:       absolute;
  top:            20px;
  left:           50%;
  transform:      translateX(-50%);

  display:        inline-flex;
  align-items:    center;
  height:         40px;
  padding:        0 var(--space-5);
  border-radius:  var(--radius-full);

  background:     var(--glass-bg);
  border:         1px solid var(--color-border);
  color:          var(--color-text);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.03em;
  white-space:    nowrap;
  pointer-events: none;
}