/* ==========================================================================
   EWB Radar -- extremes.css
   Flyout MIN/MAX neben #inspector-btn.
   Gehört zu: frontend/js/extremes_flyout.js

   Dasselbe Muster wie das Format-Flyout des Screenshots (screenshot.css): absolut
   positioniert, nimmt keinen Platz in der Flex-Spalte von #right-controls ein.
   --extremes-top setzt initExtremesFlyout() auf den vertikalen Offset des Knopfes.
   right: 52px = Knopfbreite (40px) + Abstand (8px) + Rand -> links neben dem Knopf.
   ========================================================================== */

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

  /* Spalten gleicher Breite: jeder Schalter ist so breit wie der mit dem längsten Text.
     width: max-content gehört dazu: das Flyout steht absolut in der schmalen Spalte und
     nähme sonst seine kleinste Breite an, in der jede Spalte nur so breit ist wie ihr
     eigener Text. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  align-items: center;
  gap: var(--space-2);
  height: 40px;

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

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

/* Mit #right-controls qualifiziert, aus demselben Grund wie .screenshot-format: die
   Basisregel #right-controls button erzwingt sonst 40 × 40. */
#right-controls .extremes-switch {
  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;
}

/* Gesperrt, solange das gezeigte Produkt keine Wertedatei hat: sichtbar, aber erkennbar
   ohne Wirkung; der Name sagt, warum. */
#right-controls .extremes-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}