/* ===== RESPONSYWNOŚĆ (WĄSKIE EKRANY) ===== */
/* Strona jest desktop-first (stałe 650px). Poniższe breakpointy nie zmieniają
   niczego na dużych ekranach — tylko pozwalają arkuszowi zmieścić się na
   telefonie/tablecie bez poziomego scrolla. */

/* ===== PRÓG „PANEL BOCZNY ZASŁANIA TREŚĆ" (1300px) =====
   Karta zadania ma 650px + 2×50px paddingu = 750px (style/sheet.css .exercise-container).
   Przy panelu 260px + 16px odstępu margines po lewej wystarcza od
   (750/2 + 276) × 2 ≈ 1300px. Powyżej tego panel siedzi w marginesie i NICZEGO
   nie zasłania — więc nie ma czego przygaszać ani przed czym schodzić z drogi:
   brak przyciemnienia, klik w arkusz nie zamyka, klik w akcję też nie
   (warunek w JS: sidebarNaklada() w app/bootstrap.js — ten SAM próg).
   Poniżej progu panel nachodzi na kartę: dochodzi lekkie przyciemnienie
   i zamykanie kliknięciem w arkusz. */
@media (max-width: 1299px) {
    body.sidebar-otwarty #sidebar-przyciemnienie {
        opacity: 1;
        pointer-events: auto;
    }
    /* Przy otwartym panelu logo ma się zachowywać tak, jakby leżało POD welonem:
       przygaszone, nieklikalne, a kliknięcie w nie zamyka panel (Henrich, TODO).
       Nad welon wychodzi tylko strzałka.

       Dlaczego nie po prostu niższą warstwą: `body.sidebar-otwarty #naroznik-lewy`
       ma `z-index: 13`, żeby strzałka była klikalna (patrz style/sheet.css), a to
       tworzy kontekst piętrzenia — dziecko nie zejdzie poniżej rodzica. Zamiast
       tego `pointer-events: none` (kliknięcie spada na welon, czyli na drugą
       ścieżkę zamykania panelu, app/bootstrap.js) plus ta sama zasłonka
       rgba(0,0,0,.25) co welon, malowana jako tło pigułki.

       Świadomie NIE `opacity`: tło logo musi zostać kryjące, bo przez
       półprzezroczyste widać treść zadania spod napisu (ten wariant odpadł już
       przy v32). Klawiaturę zrównuje z myszą app/bootstrap.js (tabindex="-1"). */
    body.sidebar-otwarty #naroznik-lewy {
        /* Przezroczysty dla myszy MUSI być cały narożnik, nie samo logo: narożnik
           jest kontenerem flex rozciągniętym na oba dzieci, więc to on łapałby
           kliknięcie obok napisu (sprawdzone elementFromPoint). Strzałka odzyskuje
           klikalność regułą niżej. */
        pointer-events: none;
    }
    body.sidebar-otwarty #sidebar-toggle {
        pointer-events: auto;
    }
    body.sidebar-otwarty #logo {
        color: var(--text-faint);
        background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
    }
    body.sidebar-otwarty #wersja {
        color: var(--text-faint-3);
    }
}

/* Badge punktów wisi 80px za prawą krawędzią karty (650px + 2×50px padding;
   2026-08-09 przysunięty z 120px bliżej treści, patrz TODO.md), więc mieści
   się dopiero od niecałych ~950px szerokości okna — poniżej wraca do prawego
   górnego rogu karty, żeby nie robić poziomego scrolla. */
@media (max-width: 1024px) {
    .exercise-score {
        top: 36px;
        right: 8px;
        /* W rogu karty badge nie ma się z czym równać w pionie — trzymamy go
           przy górnej krawędzi (bez margin-top z reguły bazowej). */
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    /* Przyciski arkuszy na landingu. Szerokość zwęża się sama (max-width: 100%
       w landing.css), ale sam padding zostałby desktopowy: na wąskim ekranie
       tekst „Rozwiąż arkusz próbny CKE, grudzień 2024" łamie się wtedy na trzy
       linijki, bo po bokach zjada mu 28 px z każdej strony. Ciaśniejszy padding
       i o oczko mniejsza czcionka mieszczą go w dwóch. */
    .landing-cta {
        padding: 13px 16px;
        font-size: 17px;
    }

    /* Wiersz przycisków tekstowych (Podpowiedź / Rozwiązanie / Zgłoś błąd /
       Pokaż wzory): na desktopie cztery w jednym rzędzie, tu łamią się po dwa.
       flex-basis 40% + wrap zamiast czterech kolumn po ~80px, w których każda
       etykieta zawijałaby się na trzy linijki. */
    .light-button-container {
        flex-wrap: wrap;
        /* row-gap 20px (kolumnowy 14px zostaje) — dwa zawinięte wiersze
           przycisków były zbyt ciasno sklejone, patrz TODO.md. */
        gap: 16px 14px;
    }
    .light-button-container > .light-button {
        flex: 1 1 40%;
    }

    /* Narożniki bliżej krawędzi i ciaśniejsze pigułki — na wąskim ekranie oba
       klastry muszą zmieścić się w jednym rzędzie (patrz breakpoint 560px). */
    #naroznik-lewy,
    #naroznik-prawy {
        top: 10px;
    }
    #naroznik-lewy {
        left: 8px;
    }
    #naroznik-prawy {
        right: 8px;
        gap: 6px;
    }
    #total-score,
    #egzamin-timer,
    #naroznik-prawy button {
        padding: 6px 9px;
    }
    /* Na telefonie logo wraca do szerokości treści — stałe 200px zjadałoby ponad
       połowę ekranu i wypychało prawy klaster na drugi rząd. Prostokąt tła jest
       tam i tak niepotrzebny: panele PDF na telefonie otwierają się w nowej
       karcie, nie jako przeciągane okno (app/panels.js). */
    #logo {
        min-width: 0;
        padding: 6px 8px;
    }
    #sidebar {
        top: 48px;
    }
    /* Kreska panelu jedzie razem z nim (panel startuje wyżej: 48px + 16px oddechu). */
    #sidebar-linia {
        top: 64px;
    }
    /* Docisk strzałki do logo jest wyliczony dla szerokiego narożnika; tutaj
       narożnik i tak jest ciaśniejszy (top: 10px, left: 8px), więc bez przesunięcia. */
    #sidebar-toggle {
        margin-left: 0;
        margin-top: 0;
    }

    /* Tytuł arkusza wraca na pełną szerokość kolumny — 32% z desktopu (sheet.css)
       zostawiłoby na telefonie po dwa słowa w linii. */
    .sheet-title-heading {
        max-width: none;
    }

    /* Karta zadania wypełnia ekran zamiast sztywnych 650px + 50px paddingu.
       Boczne wcięcie 16→10 px (Henrich po testach v21): to ono tworzy odstęp
       między ramką podokna (rozwiązanie, „Sprawdzanie obliczeń", formularz
       zgłoszenia) a krawędzią ekranu — na telefonie było go za dużo. */
    .exercise-container {
        width: auto;
        max-width: 650px;
        padding: 40px 10px;
    }
    /* Same podokna też oddają część własnego wcięcia, żeby zysk trafił do
       treści, a nie do ramki. */
    .solution-container,
    .hint-container {
        padding: 20px 12px;
    }
    .zglos-blad-okno {
        padding: 20px 12px;
    }
    /* Blok odpowiedzi na pełną szerokość karty. Bazowe .button-container ma
       width: 90% (style/sheet.css) — na telefonie ścinało to ramkę
       „Sprawdzania obliczeń" i pole na notatki do 319 px, podczas gdy
       rozwiązanie i formularz zgłoszenia mają 354 px, więc trzy ramki jednej
       karty stały w trzech różnych miejscach (Henrich, TODO). 90% ma sens na
       desktopie, gdzie trzyma siatkę przycisków A/B/C/D w węższej kolumnie;
       na 390 px ta rezerwa jest tylko stratą miejsca. */
    .answers-container {
        width: 100%;
    }
    /* ...ale bloki odpowiedzi wyrównane do LEWEJ (zdania P/F, wiersze fillIn)
       dostają wtedy to samo wcięcie, co treść zadania (.question ma
       padding-left: 16px). Bez tego zdania „1., 2., 3." zaczynały się o 16px
       na lewo od zdania nad nimi i wyglądały na wypchnięte poza kolumnę
       (Henrich, TODO: „są za bardzo przyklejone do lewej"). Bloków ze
       środkowaniem (ABCD, „oceń się") to nie dotyczy. */
    .pf-container,
    .fill-in-container {
        padding-left: 16px;
    }
    /* Odstęp MIĘDZY kolejnymi stwierdzeniami. Po zawinięciu wiersza jedno
       stwierdzenie zajmuje dwie linie (treść, pod nią para przycisków), a przy
       dawnych 10px sąsiadujące marginesy zlewały to w jeden blok i nie było
       widać, gdzie kończy się zdanie 1., a zaczyna 2. (Henrich, TODO).
       Marginesy pionowe sąsiadów i tak się sklejają, więc realny odstęp to 22px
       przy 6px między treścią a przyciskami w środku wiersza. */
    .pf-row,
    .fill-in-row {
        margin: 22px 0;
    }
    #exercises-wrapper {
        padding-top: 56px;
    }

    /* Media rozwiązań i przyciski odpowiedzi nie wychodzą poza ekran.
       Od 2026-08-11 reguła bazowa w sheet.css jest już płynna (width: 100%,
       aspect-ratio: 16/9), więc nie ma tu czego nadpisywać — zostaje tylko
       zdjęcie górnej granicy, żeby na telefonie film szedł na całą szerokość. */
    .solution-step-by-step-container video,
    .steps-kadr {
        max-width: none;
    }
    /* Film wychodzi poza padding panelu rozwiązania (20px z każdej strony) na
       całą szerokość karty. Na 390px daje to 342px zamiast 300px, czyli o 14%
       większy obraz — przy tak małym ekranie to widać. Ujemny margines zamiast
       zdejmowania paddingu, bo padding dotyczy też tekstu rozwiązania, który
       ma się dalej trzymać wcięcia. */
    .solution-step-by-step-container {
        /* Tyle, ile wynosi boczny padding podokna wyżej — film sięga dokładnie
           krawędzi karty i ani piksela dalej. */
        margin-left: -12px;
        margin-right: -12px;
    }
    /* Rozwinięte wyjaśnienie kroku jedzie razem z filmem poza padding podokna,
       więc bez tego kleiłoby się do krawędzi ekranu (Henrich po testach v21). */
    .step-explain {
        padding-left: 12px;
        padding-right: 12px;
    }
    .solution-step-by-step-container img {
        max-width: 100%;
    }
    .button-container button {
        min-width: 38%;
        margin: 6px 4px;
    }
    /* ...ale przyciski P/F zostają małe (44px) — regułę wyżej łapały przez
       wspólny kontener .button-container. */
    .pf-row button {
        min-width: 44px;
        margin: 0;
    }
    /* Kontrolki odpowiedzi (pole fillIn, para P/F, „ostateczna odpowiedź") na
       wąskim ekranie: pivot z poziomego na pionowy. Poziomo treść/etykieta
       dzieliła wiersz ze sztywno-szeroką kontrolką i przy dłuższych etykietach
       (np. zad. 10 — cztery zdania do uzupełnienia) łamała się na wąski,
       ledwo czytelny pasek zamiast normalnie zawijać się na całą szerokość
       karty (zgłoszone przez Henricha). Technika: flex-wrap zamiast zmiany
       flex-direction na column — .pf-row ma DWA przyciski jako rodzeństwo
       etykiety, nie jeden wspólny kontener, więc column rozbiłby je na dwie
       osobne linie zamiast zostawić obok siebie pod treścią; wymuszenie
       etykiecie pełnej szerokości wiersza (flex-basis: 100%) zrzuca resztę na
       kolejną linię, gdzie i tak lądują razem, w oryginalnej kolejności. */
    .fill-in-row,
    .pf-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .fill-in-label,
    .pf-text {
        flex: 1 1 100%;
    }
    /* Kontrolka pod spodem: NIE wyśrodkowana na szerokość karty (pływałaby z
       dala od etykiety nad nią) — mały margines z lewej, bliżej krawędzi jak
       treść nad nią, z odrobiną przesunięcia w prawo zamiast pełnego
       przyklejenia do 0. .final-answer-row już się zawija na tej szerokości
       (input 160px + przycisk „Sprawdź" nie mieszczą się razem w karcie na
       telefonie), więc dostaje to samo traktowanie zamiast wyśrodkowania. */
    .fill-in-row .fill-in-input,
    .final-answer-row .final-answer-input,
    .pf-row button:first-of-type {
        margin-left: 8px;
    }
    .final-answer-row {
        justify-content: flex-start;
    }

    /* Panele PDF na prawie całą szerokość ekranu. */
    #tablica-wzorow-panel,
    #zasady-oceniania-panel {
        width: 94%;
        right: 3%;
    }
    #zasady-oceniania-panel {
        right: auto;
        left: 3%;
    }

    /* Komunikat "sprawdzono ✓" w stopce (style/exam.css) jest domyślnie
       position: absolute NA PRAWO od przycisku — przycisk jest wycentrowany,
       więc jego prawa połowa + komunikat regularnie przekraczają wąski ekran
       (dokładnie mechanizm z "Known layout gotchas" w ARCHITECTURE_CSS.md —
       poziomy scroll przy 360px, tam winna była .data-table, tu byłby ten
       komunikat). Tutaj przesuwamy go POD przycisk, wycentrowany w poziomie —
       ALE ZOSTAJE position: absolute (tylko left/top/transform się zmieniają).
       Pierwsza wersja (2026-07-27) przełączała na position: static; display:
       block — to wciągnęło komunikat z powrotem do flow WRAPPERA
       (#sprawdz-wszystkie-stopka-wrap), więc nawet PUSTY/niewidoczny (opacity: 0,
       .przygaszony bez treści) dokładał ~6px wysokości pod przyciskiem przez
       swój margin-top + line-height pustej linii — stopka wyglądała na "za
       grubą" na stałe, nie tylko po kliknięciu (zgłoszone przez Henricha).
       Zostając poza flow, komunikat zajmuje miejsce TYLKO wizualnie, nigdy nie
       zmienia wysokości wrappera. */
    .sprawdz-status-stopka {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        margin-top: 6px;
        text-align: center;
        max-width: calc(100vw - 32px);
    }

    /* Formularz „zgłoś błąd" (blok w karcie zadania) — ciaśniejszy padding,
       żeby na wąskim ekranie zostało miejsce na treść pól. */
    .zglos-blad-okno {
        padding: 16px 14px;
    }
    .zglos-blad-okno h3 {
        font-size: 18px;
        margin-right: 44px; /* krzyżyk ✕ */
    }
    /* Pigułki kategorii: do 2026-08-10 pełna szerokość rzędu (jedna na linię) —
       przy 8 pigułkach obowiązkowy opis błędu lądował daleko na dole ekranu
       (Henrich, TODO.md). Teraz każda ma połowę szerokości rzędu: krótkie
       nazwy („Inne", „Widżet nie działa") mieszczą się w jednej linijce po
       dwie obok siebie, długie („Prawidłowa odpowiedź jest nieprawidłowa")
       łamią się na dwie linijki zamiast zajmować cały wiersz — świadomie
       "niedoskonała, ale krótsza" siatka zamiast listy. calc(...) odejmuje
       połowę gap (8px), żeby dwie pigułki + odstęp zmieściły się bez
       przelewania na trzecią kolumnę. */
    .zglos-blad-kategorie button {
        flex: 1 1 calc(50% - 4px);
        font-size: 13px;
        text-align: center;
    }
    /* Akcje na pełną szerokość — łatwiej trafić palcem niż w mały przycisk
       dosunięty do prawej krawędzi. */
    .zglos-blad-akcje {
        flex-direction: column-reverse; /* „Wyślij" u góry, pod kciukiem */
        gap: 8px;
    }
    .zglos-blad-akcje button {
        width: 100%;
    }
}

/* Bardzo wąskie ekrany (telefon pionowo): oba narożniki dzielą jeden rząd, więc
   prawy klaster (w egzaminie: zegar + „zakończ") może się nie zmieścić obok logo.
   Zamiast CHOWAĆ „zakończ egzamin" (tak było za czasów #top-bara) pozwalamy
   klastrowi ZAWINĄĆ się na drugi rząd — funkcja zostaje pod ręką, a nie tylko
   w stopce arkusza. Limit szerokości zostawia miejsce na logo ze strzałką. */
@media (max-width: 560px) {
    /* Dwa tory rachunku (.rozw-dwatory, zad. 7) na telefonie: przerwa 3rem
       zjada tyle miejsca, że krótkie równania łamią się w środku ("ax + 3y ="
       i "20" w osobnych wierszach). KaTeX nie łamie wzoru mądrze, więc taniej
       jest oddać przerwę niż szerokość zapisu. */
    .rozw-2kol.rozw-dwatory {
        column-gap: 1rem;
        /* Samo oddanie przerwy nie wystarcza najdłuższym linijkom: przy oknie
           485px (telefon Henricha) na kolumnę zostaje około 200px, a
           „a · (-1) + 3 · 6 = 20" tyle nie mieści i KaTeX łamie je po znaku
           równości, zostawiając samo „20" w drugim wierszu. Zmierzone
           2026-08-29 na zad. 7. Zapis w dwóch torach jest z natury węższy niż
           jednokolumnowy, więc dostaje tu mniejsze pismo; przy 0,85em najdłuższa
           linijka zad. 7 mieści się w jednym wierszu. */
        font-size: 0.85em;
    }
    /* Para rysunków (zad. 31 maja) i tak nie mieści się tu obok siebie, więc
       skoro zawija się jeden pod drugi, niech każdy wykorzysta całą szerokość
       karty zamiast trzymać się 310px z sheet.css. */
    .question .rys-para img {
        max-width: 100%;
    }
    /* Suwak widżetu: 320 px plus etykieta ("a = -1,5", "f(x + 1)") nie mieści
       się w karcie zadania na telefonie i suwak wychodzi poza jej krawędź.
       max-width w procentach tego nie łapie, bo nie wie o szerokości etykiety. */
    .widget input[type=range] {
        width: 210px;
    }
    /* Dwie strzałki przy suwaku zabierają razem 60px, więc sam suwak dostaje
       tu mniej niż wcześniej, inaczej rząd „etykieta + strzałka + suwak +
       strzałka" nie mieści się w karcie zadania. */
    .wg-suwak-grupa input[type=range] {
        width: 150px;
    }
    #naroznik-lewy {
        max-width: calc(100vw - 16px);
    }
    #naroznik-prawy {
        flex-wrap: wrap;
        max-width: calc(100vw - 200px);
    }
    #logo {
        font-size: 14px;
    }
    /* „zakończ egzamin" → „zakończ": bez tego skrótu prawy klaster nie mieści
       się obok logo przy 360px i zawija na drugi rząd. */
    #egzamin-koniec-bar .tylko-szeroko {
        display: none;
    }
    /* Gdyby klaster jednak zawinął się na dwa rzędy (dłuższe etykiety, większy
       font systemowy), treść startuje niżej — zamiast wjechać pod pigułki. */
    body.tryb-egzaminu #exercises-wrapper {
        padding-top: 92px;
    }
    /* Panel na pełną szerokość: 260px na 360-px ekranie i tak zasłania wszystko,
       a pełna szerokość daje czytelne, łatwe do trafienia palcem pozycje. */
    #sidebar {
        width: 100%;
    }
    /* Panel zajmuje całą szerokość, więc nie ma czego oddzielać od treści. */
    #sidebar-linia {
        display: none;
    }

    /* Pływające kropki „oceń się" (style/exam.css .wskaznik-otwarte) mają stałą
       pozycję (right: 70/96px) liczoną z myślą o desktopie — na wąskim telefonie
       potrafią nachodzić na treść karty. Prościej i pewniej wyłączyć je tutaj niż
       dorabiać osobną, niesprawdzoną logikę pozycjonowania na małych ekranach —
       samoocena każdego zadania otwartego działa normalnie bez nich. */
    .wskaznik-otwarte,
    #wskazniki-ukryj {
        display: none !important;
    }
}