/* ==========================================================================
   EWB Radar -- responsive.css
   Responsive Breakpoints (unter 1060px, bis 750px, bis 600px Portrait): kompaktere
   Controls, Token-Anpassungen, größere Portrait-Buttons.
   MUSS nach allen Komponenten-Partials geladen werden -- überschreibt deren
   Basisregeln bei gleicher Spezifität, sonst greifen die Overrides nicht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive
   -----------------------------------------------------------------------

   Breakpoint-Strategie:

   >= 1200px   Normalzustand
   < 1200px   Controls kompakter, Tokens wechseln
   < 1060px   Controls kompakter, Tokens wechseln
   < 750px    "Zeitraum:"-Label weg

   Portrait-Sonderfall (max-width: 600px) AND (orientation: portrait):
     Controls-Bar füllt die ganze Breite, Buttons größer,
     Status-Pill größer, Zoom-Buttons größer.
     Schrauben:
       --portrait-btn-size   Button-Größe in der Controls-Bar
       --portrait-icon-size  Icon-/Emoji-Größe darin
       --portrait-status-h   Höhe der Status-Pill
       --portrait-zoom-size  Leaflet +/- Buttons
   -------------------------------------------------------------------------- */


/* < 1060px: Controls-Bar kompakter, alle Tokens passen sich an.

   ⚠️ Die Zeile ist Wort für Wort dieselbe Anfrage, die das Skript stellt
   (COMPACT_SCREEN_QUERY in screen_size.js, gelesen von syncOverflow() in features.js):
   Skript wie Stylesheet rechnen mit derselben Breite, auch einer gebrochenen. Mit einer
   gerundeten Fensterbreite im Skript lägen die zwei um bis zu einen Bildpunkt auseinander.
   Der Wert ist 1059.9px, damit 1060px selbst zur weiten Stufe gehört, und nicht näher an
   1060px: in Chromium gilt `(max-width: 1059.99px)` schon bei genau 1060px. Zwischen dem
   Wert und 1060px, bei gebrochenen Breiten, gilt die weite Stufe. Die Bereichsschreibweise
   `(width < 1060px)` zöge die Grenze genau bei 1060px, aber der CSS-Leser des
   Bezeichner-Gates (verify/identifier_gate.py) versteht sie nicht und prüft eine Datei mit
   ihr gar nicht. Dieselbe Zeile steht in leaflet_overrides.css, legend.css, opacity.css,
   right_controls.css und side_panel.css. */
@media (max-width: 1059.9px) {
  :root {
    --controls-bottom: calc(8px + var(--safe-bottom));
    --controls-height: 48px;
    --controls-gap:    24px;
    /* Toggles auf 40px */
    --toggle-height:               40px;
    /* Side-Panel auf 44px Höhe, damit es bündig mit der Controls-Bar abschließt */
    --side-panel-collapsed-height: 44px;
  }

  #controls {
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-xl);
  }

  #time-label {
    display: none;
  }

  /* Lage und Polster der Pillen hängen an diesen Tokens (status.css). */
  :root {
    --status-top: 12px;
    --status-h:   36px;
    --status-pad: var(--space-4);
  }

  .radar-status,
  .lightning-flag,
  .extremes-pill {
    font-size: 11px;
  }

  #theme-toggle {
    right: 8px;
    width: 40px;
    height: 40px;
  }
}

/* <= 375px: die Bar passt in ihrer Mindestbreite nicht mehr zwischen die Ränder.
   Gerechnet mit border-box (style.css, Base Reset): die Mindestbreite von 360px
   aus controls.css enthält Polster und Rahmen bereits, dazu kommen die 8px
   Rand links und rechts aus dem Hochformat-Block -- ab 376px geht das auf,
   darunter steht die rechte Kante samt Play-Knopf außerhalb des Bildschirms.

   Zwei Schritte, bewusst grob (Zwischenlösung, siehe #428): die Mindestbreite
   gibt den Rändern nach, und die beiden Pfeile treten ab. Der Schieber trägt
   die Navigation in diesem Bereich allein -- er ist das genauere Werkzeug von
   beiden, und ohne die Pfeile bleibt ihm Platz. */
@media (max-width: 375px) {
  #controls {
    min-width: 0;
  }

  /* ⚠️ !important, und das ist keine Bequemlichkeit: die gemeinsame
     Button-Basis in buttons.css trifft dieselben Knöpfe auch über
     `#controls button:not(#play-btn)`. Darin stecken ZWEI IDs (`#controls`
     und die in `:not()`, die mitzählt) plus ein Element -- (2,0,1). Der
     stärkste Treffer einer Selektorliste gilt, eine Media Query erhöht das
     Gewicht nicht, und jeder Selektor, der hier ohne !important gewinnen
     würde, müsste eine dritte ID erfinden. Dieselbe Begründung trägt
     embed.css für seine Ausblendungen. */
  #controls #prev-btn,
  #controls #next-btn {
    display: none !important;
  }
}

/* <= 750px: "Zeitraum:"-Label fliegt raus */
@media (max-width: 750px) {
  #controls label[for="window-select"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Portrait-Modus auf Smartphones
   Greift ab max-width 600px UND Hochformat.
   Querformat bleibt unverändert (sieht schon gut aus).

   Schrauben (alle hier oben im Block):
     --portrait-btn-size   Größe aller Buttons in der Bar       Standard: 48px
     --portrait-play-size  Play-Button (etwas größer)             Standard: 52px
     --portrait-icon-size  Emoji/Icon-Schriftgröße               Standard: 1.35rem
     --portrait-status-h   Höhe der Status-Pill oben             Standard: 44px
     --portrait-zoom-size  Leaflet +/- Buttonfläche             Standard: 44px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {

  /* Tokens für diesen Breakpoint -- hier drehen */
  :root {
    --portrait-btn-size:  32px;
    --portrait-play-size: 36px;
    --portrait-icon-size: 1.35rem;
    --portrait-status-h:  44px;
    --status-h:           var(--portrait-status-h);
    --controls-gap:       20px;
    --portrait-zoom-size: 32px;
  }

  /* Controls-Bar: volle Breite, kein transform-center mehr */
  #controls {
    left: 8px;
    right: 8px;
    bottom: var(--controls-bottom);
    transform: none;          /* zentrierendes translateX(-50%) deaktivieren */
    width: auto;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  /* Slider füllt den restlichen Platz zwischen den festen Elementen */
  #time-slider {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Alle Control-Buttons größer */
  #prev-btn,
  #next-btn,
  #radar-stations-btn,
  #poi-btn,
  #ruler-btn {
    width: var(--portrait-btn-size);
    height: var(--portrait-btn-size);
    font-size: var(--portrait-icon-size);
  }

  #play-btn {
    width: var(--portrait-play-size);
    height: var(--portrait-play-size);
    font-size: var(--portrait-icon-size);
  }

  /* Status-Pill und Blitzflag oben größer + besser lesbar */
  .radar-status,
  .lightning-flag,
  .extremes-pill {
    font-size: var(--text-xs);
  }

  /* Leaflet Zoom-Buttons größer */
  .leaflet-control-zoom a {
    width:       var(--portrait-zoom-size) !important;
    height:      var(--portrait-zoom-size) !important;
    line-height: var(--portrait-zoom-size) !important;
    font-size:   1.4rem                   !important;
  }
}