/* ==========================================================================
   Czas Cykliczny - Widok 3D
   mobile.css - WSZYSTKIE reguly @media (max-width: 700px) w jednym miejscu.

   UWAGA O KOLEJNOSCI: bloki ponizej MUSZA pozostac w tej kolejnosci.
   Blok 3 (#controls, #info { min-width: 94vw }) i blok 4 (#info, #controls -
   kotwiczenie do krawedzi) maja ta sama specificznosc selektorow; blok 4
   musi wystapic PO bloku 3, zeby poprawnie nadpisac min-width: 94vw na
   #info (patrz oryginalny komentarz "NAPRAWA v2" zachowany ponizej).

   Ten plik ladowany jest w index.html PO base.css - dzieki temu wszystkie
   reguly tutaj i tak wygrywaja z regulami bazowymi o tej samej
   specyficznosci, niezaleznie od podzialu na pliki.
   ========================================================================== */

@media (max-width: 700px) {
            /* Faza 2 (v3.40.x): ZMIENIONE z "display: none !important" na
               "display: contents !important". Powod: display:none na
               rodzicu ukrywa CALE poddrzewo DOM niezaleznie od stylu
               dziecka, wiec zaden z 6 paneli w tej kolumnie nie moglby
               zostac pokazany na telefonie. display:contents usuwa
               WLASNY box kolumny z layoutu (kolumna sama w sobie i tak
               nigdy nie byla samodzielnie widoczna - to tylko kontener
               flex), ale w odroznieniu od display:none NADAL renderuje
               jej dzieci, ktore dostaja teraz wlasny, niezalezny
               position:fixed (patrz blok "Faza 2" na koncu tego pliku).
               Bezpieczne wzgledem JS: layoutLeftPanels()/
               layoutRightPanels() (patrz astro-and-panels.js) mierzy
               getBoundingClientRect().width kolumny i przy wartosci <=0
               (display:contents rowniez daje 0, tak samo jak dawniej
               display:none) wychodzi wczesnie bez ustawiania zadnych
               stylow inline - identyczne zachowanie jak przed ta zmiana. */
            #leftPanelsColumn {
                display: contents !important;
            }
        }

@media (max-width: 700px) {
            #rightPanelsColumn {
                display: contents !important;
            }
        }

@media (max-width: 700px) {
            #controls {
                flex-wrap: wrap;
                gap: 8px;
                padding: 10px 14px;
                bottom: 10px;
            }
            #timeDisplay {
                font-size: calc(13px * var(--time-display-scale, 1));
            }
            .segment-label {
                font-size: 9px !important;
            }
            #info {
                min-width: 94vw;
            }
            #calDatePanel {
                font-size: 9px;
                white-space: nowrap;
            }
            #calBiblicalPanel {
                font-size: 9px;
                white-space: nowrap;
            }
            #timeModeRow {
                font-size: 11px;
                gap: 6px;
            }
            #timeModeNote {
                font-size: 10.5px;
                width: 100%;
            }
            #timeModeNoteClose {
                width: 14px;
                height: 14px;
                line-height: 12px;
                font-size: 10px;
                top: -1px;
            }
            #timeModeNoteText {
                padding: 0 16px;
            }
            #timeJumpRow button {
                font-size: 10px;
                height: 22px;
                padding: 0 6px;
            }
            #timeJumpRow #nowBtn {
                padding: 0 10px;
            }
            #jumpProgressBarOuter {
                width: 160px;
            }
            #jumpProgressLabel {
                font-size: 10px;
                width: min(94vw, 340px);
            }
            #jumpProgressVenusLine {
                font-size: 10px;
            }
        }

@media (max-width: 700px) {
            #info {
                left: 8px;
                right: 8px;
                transform: none;
                min-width: 0;
                width: auto;
                padding: 8px 10px;
            }
            #controls {
                left: 8px;
                right: 8px;
                transform: none;
                width: auto;
                max-width: none;
            }
            #timeDisplay {
                /* white-space zostaje nowrap (reguła bazowa) - patrz
                   NAPRAWA v3 przy głównej definicji #timeDisplay. Tu tylko
                   mniejszy bazowy rozmiar czcionki na wąskim ekranie;
                   fitTimeDisplayFont() w JS dociąga --time-display-scale
                   dalej w dół, gdyby i to było za szerokie. */
                font-size: calc(11px * var(--time-display-scale, 1));
            }
            #speedTrackWrap {
                min-width: 0;
                flex: 1 1 160px;
            }
            #playBtn, #controls .reset {
                min-width: 56px;
                width: 56px;
                flex: 0 0 auto;
            }
            #timeModeRow {
                flex-wrap: wrap;
                white-space: normal;
                row-gap: 4px;
            }
            #calDatePanel, #calBiblicalPanel {
                white-space: normal;
                line-height: 1.6;
            }
            #timeJumpRow, #biblicalYearJumpRow {
                gap: 4px;
            }
            #timeJumpRow button, #biblicalYearJumpRow button {
                padding: 0 5px;
                flex: 0 1 auto;
            }
            #jumpProgressLabel {
                width: 100%;
                max-width: none;
            }
            #jumpProgressBarOuter {
                width: 100%;
            }
        }

@media (max-width: 700px) {
            /* ================================================================
               Faza 2 (v3.40.x): pasek zakladek + panele pelnoszerokosciowe.

               Kazdy z 6 panelow jest domyslnie ukryty (nadpisuje sam siebie
               ponizej klasa .mobile-panel-open, dodawana/usuwana przez
               js/ui/mobile-tabbar.js). Gdy aktywny, panel dostaje
               position:fixed - niezalezny od tego, ze na desktopie te same
               elementy sa waskimi ramkami pozycjonowanymi przez JS
               (layoutLeftPanels/layoutRightPanels w astro-and-panels.js).
               !important jest tu konieczne z dwoch powodow:
               1) base.css ustawia na tych elementach bezwarunkowe (bez
                  media query) wlasciwosci jak pointer-events:none,
                  width:100%, flex:1 1 0 - trzeba je nadpisac.
               2) JS (layoutLeftPanels/layoutRightPanels) NIE dotyka tych
                  elementow na mobile (potwierdzone czytaniem kodu: przy
                  getBoundingClientRect().width <= 0 funkcje wychodza przed
                  ustawieniem czegokolwiek), WIEC realnie !important nie
                  walczy tu z JS - jest czysto defensywne, na wypadek
                  przyszlych zmian w tamtym kodzie. */
            #desyncPanel, #moonPhasePanel, #sunAltPanel,
            #legend, #earthPentagramPanel, #sunEclipticPanel {
                display: none;
            }

            #desyncPanel.mobile-panel-open,
            #moonPhasePanel.mobile-panel-open,
            #sunAltPanel.mobile-panel-open,
            #legend.mobile-panel-open,
            #earthPentagramPanel.mobile-panel-open,
            #sunEclipticPanel.mobile-panel-open {
                display: flex !important;
                position: fixed !important;
                left: 8px !important;
                right: 8px !important;
                top: auto !important;
                bottom: 62px !important;
                width: auto !important;
                max-width: none !important;
                height: auto !important;
                max-height: 48vh;
                overflow-y: auto;
                pointer-events: auto !important;
                z-index: 30;
            }

            /* #legend na desktopie ma align-items:flex-end (bo wisi przy
               prawej krawedzi) - na pelnej szerokosci telefonu to psuje
               czytelnosc (caly tekst przyklejony do prawej), wiec
               nadpisujemy tylko na czas .mobile-panel-open. */
            #legend.mobile-panel-open {
                align-items: flex-start;
            }

            /* Pasek zakladek - stala belka na samym dole ekranu, NAD
               #controls (patrz przesuniecie #controls.bottom nizej). */
            #mobileTabBar {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                height: 52px;
                z-index: 40;
                background: #0a0a0a;
                border-top: 1px solid #00d4e844;
                justify-content: space-around;
                align-items: center;
                padding: 0 4px;
                box-sizing: border-box;
            }
            #mobileTabBar .mobile-tab-btn {
                flex: 1 1 0;
                max-width: 60px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                line-height: 1;
                background: transparent;
                border: none;
                border-radius: 8px;
                color: #5ab8cc;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }
            #mobileTabBar .mobile-tab-btn:focus-visible {
                outline: 1px solid #00d4e8;
                outline-offset: -1px;
            }
            #mobileTabBar .mobile-tab-btn.active {
                background: #123a42;
                color: #00d4e8;
            }

            /* #controls (pasek odtwarzania) przesuniety w gore o wysokosc
               paska zakladek (52px) + odstep - NADPISUJE "bottom: 10px" z
               wczesniejszego bloku w tym samym pliku (kolejnosc w obrebie
               jednego pliku wystarcza, bez !important, przy tej samej
               specyficznosci selektora). */
            #controls {
                bottom: 62px;
            }
        }