/* ===== TRYB EGZAMINACYJNY =====
   Włączany klasą body.tryb-egzaminu (JS w matematykazen.html). Ocenianie
   działa normalnie pod spodem — tu tylko chowamy wszystko, co zdradza wynik,
   i neutralizujemy kolory poprawności na "zaznaczenie" (niebieska ramka). */

/* Zegar oraz "zakończ egzamin" (pigułka w narożniku i kopia na dole arkusza)
   istnieją tylko w trybie egzaminu. Odwrotnie: "rozpocznij egzamin"
   w stopce i w panelu bocznym pokazuje się dopiero PO wyrenderowaniu arkusza
   (klasa body.arkusz-wczytany, dodawana dopiero na końcu loadExercises()) —
   inaczej ten przycisk siedziałby na stronie błędu (zły ?arkusz=) albo przez
   cały czas wczytywania exercises.json. W panelu ten jeden slot ma dwa stany:
   #egzamin-start poza egzaminem, #egzamin-koniec-menu w jego trakcie. */
#egzamin-timer,
#egzamin-koniec,
#egzamin-koniec-bar,
#egzamin-start-stopka,
#sidebar #egzamin-koniec-menu {
    display: none;
}
/* Slot panelu w trybie egzaminu: "rozpocznij" ustępuje miejsca "zakończ".
   `flex`, bo taki jest wiersz .sidebar-akcja (sheet.css).
   Podwójny #id z tego samego powodu co przy #egzamin-start niżej. */
body.tryb-egzaminu #sidebar #egzamin-koniec-menu {
    display: flex;
}
/* Podwójny #id (#sidebar #egzamin-start) celowo — samo "#egzamin-start" (1 id)
   przegrywa z ".sidebar-akcja" tylko na kolejności, ale z ".sidebar-akcja"
   wewnątrz reguł o wyższej specyficzności już nie; trzymamy tu wzorzec
   #sidebar #id (2 id), żeby te przełączenia nie zależały od kolejności
   w źródle między plikami (exam.css ładuje się PO sheet.css, ale specyficzność
   liczy się pierwsza). Dawniej te selektory celowały w #bar-menu. */
#sidebar #egzamin-start {
    display: none;
}
body.arkusz-wczytany #sidebar #egzamin-start {
    display: flex;
}
/* MUSI stać PO regule .arkusz-wczytany wyżej: obie mają tę samą specyficzność
   (1 klasa + 2 id), więc o zwycięzcy decyduje kolejność w źródle. */
body.tryb-egzaminu #sidebar #egzamin-start {
    display: none;
}
/* Zegar i „zakończ egzamin" w prawym narożniku: wygląd „pigułki" (tło, ramka,
   border-radius, font) bierze się ze wspólnej reguły w style/sheet.css — tutaj
   tylko widoczność i to, co je od siebie różni. */
body.tryb-egzaminu #egzamin-timer {
    display: inline-block;
    font-variant-numeric: tabular-nums; /* zegar nie "drga" przy zmianie cyfr */
    color: var(--text-muted);
}
/* Toggle „widoczność zegara" (menu ⋯): sam zegar tyka i kończy egzamin po
   czasie dalej w tle (tickExam w app/exam.js) — ta klasa tylko chowa span. */
body.tryb-egzaminu #egzamin-timer.zegar-ukryty {
    display: none;
}
#egzamin-timer.malo-czasu {
    border-color: var(--incorrect);
    color: var(--incorrect);
}
/* „Zakończ egzamin" w prawym narożniku — pigułka jak zegar i suma (wygląd
   z style/sheet.css); tu tylko odsłonięcie w trybie egzaminu. */
body.tryb-egzaminu #egzamin-koniec-bar {
    display: inline-block;
}
/* Duże przyciski w stopce arkusza (pod ostatnim zadaniem) — JEDNA rodzina:
   „sprawdź wszystkie odpowiedzi", „rozpocznij próbny egzamin" i „zakończ
   egzamin" mają ten sam rozmiar, padding i promień. Hierarchię niesie kolor
   TEKSTU i ramki, nie rozmiar: do 2026-07-27 „sprawdź wszystkie" był o dwa
   punkty mniejszy (15px vs 17px), z cieńszą ramką i innym paddingiem, więc
   czytał się jak przycisk z innej strony (zgłoszenie Henricha).
   Wygląd jest wspólny, ale widoczność KAŻDEGO sterowana jest osobną regułą
   niżej — inaczej dzielona reguła display cichcem odkrywa jeden przycisk przy
   okazji warunku napisanego dla drugiego (tak było wcześniej z tą kombinacją
   selektorów: #egzamin-start-stopka dostawał display:block bezwarunkowo). */
#egzamin-koniec,
#egzamin-start-stopka,
#sprawdz-wszystkie-stopka {
    padding: 10px 24px;
    border: var(--border-kontrolka) solid var(--border);
    border-radius: var(--radius-kontrolka);
    background-color: var(--bg);
    font-family: inherit;
    font-size: 17px;
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
}
#egzamin-koniec:hover,
#egzamin-start-stopka:hover,
#sprawdz-wszystkie-stopka:hover {
    border-color: var(--border-strong);
}
body.tryb-egzaminu #egzamin-koniec {
    display: block;
}
body.arkusz-wczytany:not(.tryb-egzaminu) #egzamin-start-stopka {
    display: block;
}

/* „Sprawdź wszystkie odpowiedzi" w stopce arkusza — drugorzędny (przygaszony
   tekst), NAD parą egzaminacyjną: lżejsza akcja wyżej, cięższa niżej — taka
   jest też kolejność w template.html. Widoczny TYLKO w trybie „sprawdź później"
   (body.reczne-sprawdzanie = natychmiastowa poprawność OFF), po wyrenderowaniu
   arkusza. W trybie egzaminu ZOSTAJE widoczny, ale wyszarzony/nieklikalny (jak
   reszta OPCJE_MENU_EGZAMIN w app/exam.js) — odsłonięcie oceny podczas egzaminu
   zdradzałoby wynik, ale znikający przycisk mylił, jakby zniknęła sama funkcja.
   Widoczność/margines siedzą na WRAPPERZE (#sprawdz-wszystkie-stopka-wrap), nie
   na samym przycisku — potrzebny jest punkt odniesienia (position: relative) dla
   komunikatu "sprawdzono ✓" obok, który inaczej przesuwałby przycisk w flow.
   `display: inline-block` na wrapperze (nie `block`) zachowuje shrink-to-fit
   center przez `text-align: center` na body — tak jak wcześniej robił to sam
   <button> (formularzowe kontrolki są shrink-to-fit nawet z display:block, ale
   zwykły <div> by się rozciągnął na całą szerokość i margin:auto nic by nie dał). */
#sprawdz-wszystkie-stopka-wrap {
    display: none;
    position: relative;
}
body.reczne-sprawdzanie.arkusz-wczytany #sprawdz-wszystkie-stopka-wrap {
    display: inline-block;
    margin: 40px auto 0;
}
#sprawdz-wszystkie-stopka {
    /* Tekst w pełnym --text, jak w przycisku egzaminu (Henrich 2026-07-27:
       przygaszony --text-muted odstawał od sąsiada). Oba przyciski stopki są
       teraz identyczne — o kolejności czytania decyduje pozycja, nie kontrast. */
}

/* Komunikat "sprawdzono ✓" obok przycisku stopki. Poza flow (absolute względem
   #sprawdz-wszystkie-stopka-wrap wyżej), jak .answer-check-floating — nigdy nie
   przesuwa przycisku. Znika sam po ~2,5s (JS dokłada/zdejmuje .widoczny);
   kolejny klik resetuje licznik (patrz sprawdzWszystkieOdpowiedzi w bootstrap.js).
   Kolor tylko przez tokeny: --correct (sprawdzono) / --text-faint (nic do
   sprawdzenia — inaczej "sprawdzono ✓" kłamałoby), więc dark mode działa sam. */
.sprawdz-status-stopka {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 13px;
    color: var(--correct);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}
.sprawdz-status-stopka.widoczny {
    opacity: 1;
}
.sprawdz-status-stopka.przygaszony {
    color: var(--text-faint);
}
/* Mobile fallback (pod 720px, "obok" w prawo urwałoby się poza viewportem) jest
   w style/responsive.css, jak wszystkie breakpointy — patrz tam. */

/* Odstępy stopki: 40px nad pierwszym przyciskiem, 16px między przyciskami,
   80px pod ostatnim (przed disclaimerem samooceny). Dawniej „rozpocznij" miał
   `40px auto 80px`, a „sprawdź" `40px auto 0`: po skolapsowaniu marginesów
   robiło się 80px pustki MIĘDZY przyciskami i 0px pod dolnym, więc „sprawdź"
   był odklejony od pary i przyklejony do disclaimera. */
#egzamin-koniec,
#egzamin-start-stopka {
    margin: 16px auto 80px;
}
/* Gdy „sprawdź wszystkie" jest ukryty (poprawność „natychmiast"), przycisk
   egzaminu zostaje w stopce sam i potrzebuje pełnego odstępu od ostatniego
   zadania — inaczej 16px przyklejałoby go do kreski pod kartą. */
body:not(.reczne-sprawdzanie) #egzamin-koniec,
body:not(.reczne-sprawdzanie) #egzamin-start-stopka {
    margin-top: 40px;
}
/* Panel boczny: „Sprawdź wszystkie odpowiedzi" jest ZAWSZE widoczny (2026-08-09).
   Dawniej znikał przy poprawności „natychmiast" i panel skakał przy każdym
   przełączeniu „Poprawności". Teraz zostaje na miejscu, a przy „natychmiast"
   (i w egzaminie) jest tylko wyszarzony — `disabled` ustawia odswiezBlokadyMenu()
   w app/exam.js, wygląd: `#sidebar button:disabled` w style/sheet.css.
   W stopce arkusza zostaje po staremu (chowany), bo tam nie ma czego rozjeżdżać —
   patrz #sprawdz-wszystkie-stopka-wrap wyżej. */

/* Wszystko, co zdradza wynik albo pozwala go obejść, znika na czas egzaminu.
   !important, bo część z tych elementów ma display ustawiane inline przez JS
   (np. przełącznik widoku punktów). Cały wiersz light-buttonów (Podpowiedź /
   Rozwiązanie / Zgłoś błąd / Pokaż wzory) chowamy razem z kontenerem, żeby nie
   został pusty odstęp — „Pokaż wzory" naprowadzałaby na metodę
   konkretnego zadania, więc na egzaminie znika. TABLICA wzorów CKE i jej
   przycisk toggle (#toggle-tablica) celowo ZOSTAJĄ — na maturze też są.
   Zasady oceniania (#toggle-zasady = klucz odpowiedzi) zostają ukryte. */
body.tryb-egzaminu .light-button-container,
body.tryb-egzaminu .self-score-container,
body.tryb-egzaminu .exercise-score,
body.tryb-egzaminu #total-score,
body.tryb-egzaminu #toggle-zasady,
body.tryb-egzaminu .answer-check-floating {
    display: none !important;
}

/* Wygląd wyszarzenia pozycji panelu przeniesiony do style/sheet.css
   (`#sidebar button:disabled`), bo blokada nie jest już wyłącznie egzaminacyjna —
   patrz odswiezBlokadyMenu() w app/exam.js. Tu zostaje tylko bliźniacza reguła
   dla przycisku w stopce arkusza. */
body.tryb-egzaminu #sprawdz-wszystkie-stopka:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Kliknięta odpowiedź wygląda jak neutralne zaznaczenie (jak .selected),
   niezależnie od tego, czy jest poprawna — ocena zostaje w JS, kolory
   wracają dopiero po zakończeniu egzaminu (zdjęcie klasy z body). */
body.tryb-egzaminu .button-container button.correct,
body.tryb-egzaminu .button-container button.incorrect,
body.tryb-egzaminu .pf-row button.correct,
body.tryb-egzaminu .pf-row button.incorrect {
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}
body.tryb-egzaminu .fill-in-input.correct,
body.tryb-egzaminu .fill-in-input.incorrect {
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}

/* Pole „ostateczna odpowiedź" (zadania otwarte) zostaje dostępne w trakcie
   egzaminu do wpisania wyniku (patrz komentarz w app/render.js), ale sam
   przycisk „Sprawdź" znika — jego kolorowa ocena zdradzałaby poprawność
   podczas egzaminu, tak jak każde inne natychmiastowe potwierdzenie wyniku. */
body.tryb-egzaminu .final-answer-check {
    display: none;
}

/* Nakładka z podsumowaniem egzaminu (JS przełącza display na flex). */
#egzamin-podsumowanie {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--overlay-bg);
}
#egzamin-podsumowanie .egzamin-okno {
    max-width: 520px;
    margin: 0 20px;
    padding: 26px 34px;
    border: 1px solid var(--border-window);
    /* Promień + nazwany cień (etap 2): było jedyną „kartą" strony z ostrymi
       narożnikami i cieniem wpisanym na sztywno. Modal ma prawo do mocniejszego
       cienia niż --shadow-panel — ale jako token (--shadow-modal, base.css). */
    border-radius: var(--radius-kontrolka);
    background-color: var(--bg);
    box-shadow: var(--shadow-modal);
    text-align: left;
    font-size: 17px;
    line-height: 1.55;
}
#egzamin-podsumowanie h3 {
    margin-top: 0;
}
#egzamin-podsumowanie #egzamin-zamknij,
#egzamin-podsumowanie #egzamin-odswiez {
    display: block;
    margin: 14px auto 0;
}

/* ===== WSKAŹNIKI NIEOCENIONYCH ZADAŃ OTWARTYCH (po egzaminie) =====
   Pływające żółte „kropki" po prawej stronie, po jednej na wypełnione, ale
   jeszcze nieocenione zadanie otwarte. Tworzy/pozycjonuje je JS (app/indicators.js):
   każda ma numer zadania, klik przewija do niego, a `top` (środek) jest co
   scroll wyliczany tak, by kropka trzymała się swojego zadania albo przyklejała
   do góry/dołu widoku.
   right: 70px — kolumnę odsunięto od samej krawędzi, żeby nie kolidowała ze
   scrollbarem ani (na typowych szerokościach) z kolumną punktacji zadań.
   z-index: 8 — CELOWO NIŻEJ niż panel tablicy wzorów (#tablica-wzorow-panel,
   z-index 9 w sheet.css), żeby otwarta tablica przykrywała kropki. To automatycznie
   stawia je też pod paskiem górnym (z-index 10), ale bez znaczenia wizualnego:
   repozycjonujWskazniki() i tak klamruje każdą kropkę do pasa POD paskiem, więc
   nigdy się z nim nie stykają. Nakładka podsumowania (z-index 20) jest nad nimi. */
.wskaznik-otwarte {
    position: fixed;
    right: 70px;
    z-index: 8;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--wskaznik-border);
    border-radius: 50%;
    background-color: var(--wskaznik-bg);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    color: var(--wskaznik-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transform: translateY(-50%); /* `top` z JS to środek kropki, nie górna krawędź */
    transition: top 0.12s ease;
}
/* Wyłącza tranzycję `top` podczas aktywnego scrolla (klasa dodawana/zdejmowana
   w app/indicators.js, debounce ~150ms) — inaczej rAF-pętla repozycjonująca
   restartuje tranzycję co klatkę i kropki "gumkują" za zadaniami. */
body.wskazniki-scroll-aktywny .wskaznik-otwarte {
    transition: none;
}
.wskaznik-otwarte:hover {
    filter: brightness(0.94);
}
/* Wspólny przycisk „ukryj wszystkie" — w prawym dolnym rogu, tuż OBOK kolumny
   kropek, ale odsunięty od niej w lewo (right: 96px > szerokość kolumny kropek
   przy right: 70px), więc stoi przy nich bez nakładania się. Dzięki temu
   repozycjonujWskazniki() może wciąż spuszczać kropki blisko samego dołu ekranu
   (kolumna kropek jest na prawo od przycisku, na innej wysokości poziomej).
   z-index: 8 — jak kropki: pod panelem tablicy wzorów (9), by tablica go
   przykrywała. Żółta ramka wiąże go wizualnie z kropkami. */
#wskazniki-ukryj {
    position: fixed;
    right: 96px;
    bottom: 10px;
    z-index: 8;
    display: none;
    max-width: calc(100vw - 20px);
    padding: 6px 12px;
    /* 2px→1px (etap 2): standardowa grubość kontrolki; żółty kolor ramki sam
       wiąże przycisk z kropkami, grubość nic tu nie kodowała. */
    border: var(--border-kontrolka) solid var(--wskaznik-border);
    border-radius: var(--radius-kontrolka);
    background-color: var(--bg);
    font-family: inherit;
    font-size: 13px;
    color: var(--text-faint);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
#wskazniki-ukryj:hover {
    color: var(--text);
    background-color: var(--bg-muted);
}