/* Lora + STIX Two Math z dysku, nie z Google Fonts (zmiana 2026-08-09).
   Dlaczego i co dokładnie leży w środku — komentarz na górze vendor/fonts/fonts.css. */
@import url('../vendor/fonts/fonts.css');

/* KaTeX (vendor/katex/): delikatnie mniejszy niż domyślne 1.21em, żeby wzory
   nie dominowały nad tekstem zadania; blokowe wzory (\[ \]) są wyśrodkowane
   przez sam KaTeX (.katex-display), zwykły tekst zostaje przy lewej.
   overflow-x: auto — wzór szerszy niż kolumna (wąskie ekrany) dostaje własny
   poziomy scroll zamiast rozpychać całą stronę. */
.katex {
    font-size: 1.08em;
}
.katex-display {
    margin: 12px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ===================================================================
   MOTYW (jasny/ciemny) — zmienne kolorów
   -------------------------------------------------------------------
   Wszystkie kolory strony (tło, tekst, ramki, akcenty) idą przez te
   custom properties. Wartości w :root = jasny motyw (identyczny jak
   wcześniej). Ciemna paleta jest w DWÓCH bliźniaczych blokach:
     • @media (prefers-color-scheme: dark) :root:not(.theme-light) — motyw
       systemowy (auto), gdy użytkownik nie wymusił jasnego,
     • html.theme-dark — ręczne wymuszenie ciemnego (ma pierwszeństwo nad
       systemem).
   Ręczny jasny (html.theme-light) nie potrzebuje własnego bloku: wystarczy,
   że wyłącza regułę systemową (przez :not(.theme-light)) i zostają wartości
   z :root. JEŚLI ZMIENIASZ CIEMNĄ PALETĘ — popraw OBA ciemne bloki tak samo.
   Przełącznik (#theme-toggle w menu „⋯") zapisuje wybór w localStorage
   (klucz matematykazen-motyw: "jasny"/"ciemny"/brak = auto); klasę na <html>
   ustawia mały inline-skrypt w <head> template.html (bez mignięcia motywu).
   =================================================================== */
:root {
    color-scheme: light;

    /* Tła / powierzchnie */
    --bg: #fff;
    --bg-muted: #f7f7f7;      /* uchwyt panelu, hover „Sprawdź" */
    --bg-subtle: #fafafa;     /* nagłówek tabeli danych */
    --bg-code: #f3f3f3;       /* kod inline w komunikacie błędu */
    --bg-hover: #f0f0f0;      /* hover krzyżyka paneli */
    --bg-formularz: #f7f7f7;  /* formularz zgłoszenia błędu — w ciemnym „coś pomiędzy” tłem strony a --bg-muted */
    --canvas-bg: #fff;        /* płótno widżetów — ciemnieje razem z motywem (patrz PALETA WIDŻETÓW) */
    --overlay-bg: rgba(255, 255, 255, 0.88); /* nakładka podsumowania egzaminu */

    /* Grafiki zadań (PNG z CKE) i wideo rozwiązań (Manim) mają nieprzezroczyste
       BIAŁE tło u źródła — w jasnym motywie to niewidoczne (tło strony i tak
       białe), więc tu `none`. W ciemnym motywie dostają filtr odwracający
       kolory, żeby nie świecić białym prostokątem na karcie — patrz oba ciemne
       bloki niżej i issues/dark-mode-obrazki-wideo.md. */
    --filtr-grafik-zadan: none;

    /* Tekst (od najciemniejszego do najjaśniejszego) */
    --text: #111;
    --text-soft: #444;        /* teksty landingu */
    --text-muted: #555;       /* zegar egzaminu */
    --text-muted-2: #606060;  /* przyciski tekstowe, tytuły widżetów */
    --text-faint: #767676;    /* suma punktów, podpisy CTA, stopki; 2026-08-09:
                                 #858585 dawało 3.7:1 na bieli — poniżej WCAG AA
                                 (4.5:1) dla drobnego tekstu; #767676 = 4.54:1 */
    --text-faint-2: #909090;  /* etykiety pól, wg-neutral */
    --text-faint-3: #999;     /* podtytuł trybu, uchwyty paneli */

    /* Ramki */
    --border: #e7e7e7;        /* domyślna ramka kontrolek */
    --border-strong: #ccc;    /* pasek, inputy, tabela */
    --border-subtle: #eee;    /* ramki bloku rozwiązania */
    --border-muted: #ddd;     /* uchwyt/rozmiar panelu, kropki separatora */
    --border-close: #aaa;     /* ramka krzyżyka paneli */
    --border-window: #dcdcdc; /* okno podsumowania egzaminu */
    --separator: #e0e0e0;     /* kreska między zadaniami, kreski pauzy filmu */

    /* Akcent niebieski (zaznaczenie / focus) */
    --accent-blue: #9ec9ff;
    --accent-blue-strong: #4a90d9;
    --accent-blue-bg: #f2f8ff;
    --selection-bg: #cce4ff;

    /* Stany poprawne / błędne */
    --correct: #0AB32F;
    --correct-soft: #88ff88;
    --incorrect: #d9534f;
    --incorrect-soft: #ffaaaa;

    /* Badge punktacji zadania */
    --score-low-border: #dfdfdf;
    --score-low-text: #d6d6d6;
    --score-mid-border: #9bd6a8;
    --score-mid-text: #86cd97;
    --score-high-border: #1cce43;

    /* Pozostałe akcenty */
    --accent-purple: #7a3fa8;   /* aktywny wzór przedziału (widżet) */
    --accent-green: #2e7d32;    /* okienko „a" widżetu zad. 1 */
    --overlay-icon: #d1d1d1;    /* strzałka ↺ na końcu filmu */

    /* ===== PALETA WIDŻETÓW (canvas) =====
       Widżety rysują na canvasie, więc nie dziedziczą kolorów z CSS — czytają
       te zmienne przez getComputedStyle (WG_KOLORY / wgOdswiezKolory w
       widgets/_helpers.js) i przemalowują się przy zmianie motywu.
       Dlatego KAŻDY kolor widżetu musi mieć tu swój token (i wariant ciemny),
       zamiast literału w pliku widżetu. Wypełnienia półprzezroczyste
       (--wg-obszar-*) zostają jako rgba — canvas nie zna alfy z tokena. */
    --wg-osie: #666;          /* osie ze strzałkami, podziałka */
    --wg-siatka: #eee;        /* siatka pomocnicza */
    --wg-tekst: #333;         /* liczby, nazwy punktów, podpisy krawędzi */
    --wg-linia: #999;         /* linie pomocnicze (okrąg, ramiona kąta środkowego) */
    --wg-linia-slaba: #bbb;   /* linie przerywane, linia zera */
    --wg-linia-mocna: #444;   /* wyróżnione ramiona/odcinki */
    --wg-punkt: #e8871e;      /* pomarańczowy punkt/łuk */
    --wg-zolty: #c99700;      /* punkt testowy na osi (zad 1) */
    --wg-niewiadoma: #0077b6; /* x i liczba wchodząca na jego miejsce (podstawianie) */
    /* Jaśniejsze warianty trzech barw widżetowych. Potrzebne tam, gdzie jedna
       prosta wyznacza DWA odcinki naraz (zad. 20 maja): odcinki muszą się dać
       odróżnić, a jednocześnie zostać w rodzinie koloru swojej prostej.
       Ten sam wzorzec dla suwaków sterujących jedną prostą (zad. 26). */
    --wg-niewiadoma-jasna: #5aa8d6;
    /* Ciemniejsze warianty tej samej pary, WYŁĄCZNIE dla zad. 20 maja (Henrich,
       2026-08-20: „można jednak troszeczkę przyciemnić ciemniejsze"). Osobne
       zmienne, a nie przyciemnienie --wg-niewiadoma, bo tamten błękit jest
       związany z barwą „podstawiam pod x" w filmach i musi zostać jak jest. */
    --wg-niewiadoma-ciemna: #005d8e;
    --wg-zolty-ciemny: #a17900;
    /* Piłka nożna (zad. 33.2 maja) jest czarno-biała z natury, więc te dwa
       kolory celowo NIE mają wariantu ciemnego: biała piłka czyta się dobrze
       i na jasnym, i na ciemnym płótnie. */
    --wg-pilka-tlo: #ffffff;
    --wg-pilka-wzor: #1c1c1c;
    --wg-zolty-jasny: #e0c060;
    --wg-wykres-jasny: #8e57bb;
    --wg-slupek: #c9b3dd;     /* wypełnienie słupków */
    --wg-etykieta-info: #9bb8d4; /* blada niebieska etykieta obszaru */
    --wg-obszar-ok: rgba(10, 179, 47, 0.08);
    --wg-obszar-info: rgba(74, 144, 217, 0.07);
    --wg-obszar-wykres: rgba(122, 63, 168, 0.08);
    --wg-slupek-ok: rgba(10, 179, 47, 0.35);

    /* Komunikat błędu wczytywania */
    --error-border: #e0b4b4;
    --error-bg: #fdf6f6;

    /* Żółte wskaźniki nieocenionych zadań otwartych (po egzaminie) */
    --wskaznik-bg: #ffd54a;
    --wskaznik-text: #4a3800;
    --wskaznik-border: #e3b937;

    /* ===== TOKENY KSZTAŁTU KONTROLEK (2026-07-27) =====
       Wcześniej strona miała trzy niezależne promienie (6px pigułek, twarde 3px
       przycisków/paneli, 4px toasta) i dwie grubości ramki — każda „mała
       poprawka" utrwalała rozjazd. Teraz JEDNA wartość na obie rodziny:
       --radius-pigulka to chrome (logo, suma/zegar, przełącznik trybu, wiersze
       panelu bocznego), --radius-kontrolka to wszystko klikalne w treści
       (przyciski odpowiedzi, pola, przyciski stopki, panele PDF).
       Trzymamy je równe — rozdzielamy tylko wtedy, gdy naprawdę mają się różnić. */
    --radius-pigulka: 6px;
    --radius-kontrolka: 6px;

    /* Domyślna grubość ramki kontrolki. 2px zostaje tylko tam, gdzie NIESIE
       znaczenie (obwódki wartości .wg-a/.wg-b w widżetach — kodują kolor). */
    --border-kontrolka: 1px;

    /* Wspólny cień pływających paneli (panel boczny, panele PDF, toast).
       Henrich 2026-07-27: ma być MNIEJSZY i SŁABSZY niż dawne
       `0 4px 16px rgba(0,0,0,.12)` sidebara — panel ma leżeć blisko strony,
       nie unosić się nad nią. */
    --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.07);

    /* Cień modala (okno podsumowania egzaminu) — celowo mocniejszy niż
       --shadow-panel: modal przykrywa całą stronę, więc może się unosić wyżej.
       Nazwany token zamiast wartości w miejscu (spójność UI, etap 2). */
    --shadow-modal: 0 6px 24px rgba(0, 0, 0, 0.10);

    /* Aktywny segment przełącznika trybu (ćwiczenia/egzamin). Dawniej pełna
       inwersja (tło --text): w jasnym motywie czarny prostokąt, w ciemnym
       prawie biały — za mocno na drobną kontrolkę pod tytułem. Teraz miękkie
       wypełnienie: w jasnym JAŚNIEJSZE od czerni, w ciemnym CIEMNIEJSZE od
       bieli, tekst zostaje w --text (kontrast z treści, nie z inwersji).
       Nośnikiem stanu jest tło + font-weight, nie odwrócenie kolorów. */
    --segment-bg: #e9e9e9;
    --segment-text: #111;
}

/* Ciemna paleta — motyw systemowy (auto), o ile użytkownik nie wymusił jasnego. */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) {
        color-scheme: dark;

        --bg: #141414;
        --bg-muted: #262626;
        --bg-subtle: #222;
        --bg-code: #2b2b2b;
        --bg-hover: #303030;
        --bg-formularz: #1e1e1e;
        --overlay-bg: rgba(20, 20, 20, 0.9);

        --text: #e6e6e6;
        --text-soft: #c8c8c8;
        --text-muted: #bcbcbc;
        --text-muted-2: #b3b3b3;
        --text-faint: #9a9a9a;
        --text-faint-2: #8c8c8c;
        --text-faint-3: #808080;

        --border: #3a3a3a;
        --border-strong: #4a4a4a;
        --border-subtle: #2f2f2f;
        --border-muted: #3a3a3a;
        --border-close: #666;
        --border-window: #3a3a3a;
        --separator: #333;

        --accent-blue: #5a8bc4;
        --accent-blue-strong: #6ab0ff;
        --accent-blue-bg: #1e2b3a;
        --selection-bg: #33506f;

        --correct: #3ccf5a;
        --correct-soft: #3f7d4a;
        --incorrect: #e07b76;
        --incorrect-soft: #8a4a4a;

        --score-low-border: #444;
        --score-low-text: #666;
        --score-mid-border: #4a7d57;
        --score-mid-text: #6fae7d;
        --score-high-border: #2f9d47;

        --accent-purple: #a97fd0;
        --accent-green: #4a9d54;
        --overlay-icon: #555;

        /* W ciemnym motywie płótno ma być NIEODRÓŻNIALNE od tła strony (--bg):
           widżet jest treścią zadania, nie osobną kartą. Dawniej #1c1c1c — o 8
           jednostek jaśniejsze niż tło, co dawało widoczny prostokąt. */
        --canvas-bg: #141414;

        /* Odwrócenie kolorów PNG/MP4 o białym tle (issues/dark-mode-obrazki-wideo.md).
           Punkt startowy z jasności --bg: #141414 = rgb(20,20,20) ≈ 7,8% jasności,
           więc biel (100%) ma po odwróceniu wylądować na ≈ 92,2% odwrócenia, żeby
           trafić w ten sam poziom szarości co tło karty (100% − 7,8% ≈ 92%).
           `hue-rotate(180deg)` na końcu odwraca SAMĄ JASNOŚĆ, zostawiając barwę:
           niebieski zostaje niebieski (0,119,182 → 70,170,223), a nie robi się
           pomarańczowy jak przy gołym invercie. Matematycznie to dokładnie to samo,
           co filtr SVG `feColorMatrix` odwracający luminancję, tylko bez wklejania
           SVG w stronę i bez pułapki `color-interpolation-filters` (2026-08-16;
           wcześniej stało tu samo `invert(92%)`, patrz COLORS.md).
           92% (nie 100%) zostaje: dzięki temu biel z pliku dalej ląduje na
           rgb(20,20,20), czyli w kolorze tła, i grafika nie ma czarnej ramki.
           Ograniczenie: bardzo jaskrawe barwy nie mieszczą się w skali i są
           przycinane (żółty 255,204,0 → brązowy 113,70,0). */
        --filtr-grafik-zadan: invert(92%) hue-rotate(180deg);

        /* Paleta widżetów — ciemna (patrz blok w :root). Akcenty (zielony, czerwony,
           niebieski, fiolet) biorą się z --correct/--incorrect/--accent-* i mają już
           swoje ciemne warianty wyżej. */
        --wg-osie: #a6a6a6;
        --wg-siatka: #2f2f2f;
        --wg-tekst: #dcdcdc;
        --wg-linia: #7d7d7d;
        --wg-linia-slaba: #555;
        --wg-linia-mocna: #c4c4c4;
        --wg-punkt: #f0a04b;
        --wg-zolty: #e0b64a;
        /* Dokładnie to, co filtr robi z błękitem #0077b6 z filmu, żeby widżet
           i film pokazywały tę samą barwę „podstawiam pod x" (tools/odwroc-kolor.py).
           Do 2026-08-16 był tu pomarańcz #eb9614: stary filtr zamieniał wtedy
           błękit w filmie na pomarańcz i widżet się do tego dopasowywał. */
        --wg-niewiadoma: #46aadf;
        --wg-niewiadoma-jasna: #8fcbec;
        /* Ciemniejsza para tylko dla zad. 20 maja, patrz blok jasny. */
        --wg-niewiadoma-ciemna: #2f86b4;
        --wg-zolty-ciemny: #c69a34;
        --wg-zolty-jasny: #efd48c;
        --wg-wykres-jasny: #c9a8e2;
        --wg-slupek: #5b4470;
        --wg-etykieta-info: #7f9fbe;
        --wg-obszar-ok: rgba(60, 207, 90, 0.16);
        --wg-obszar-info: rgba(106, 176, 255, 0.12);
        --wg-obszar-wykres: rgba(169, 127, 208, 0.16);
        --wg-slupek-ok: rgba(60, 207, 90, 0.4);

        --error-border: #6a4040;
        --error-bg: #2a1e1e;

        --wskaznik-bg: #c99a1e;
        --wskaznik-text: #1c1500;
        --wskaznik-border: #a97f16;

        /* Cień na ciemnym tle prawie nie pracuje — ta sama geometria, mocniejsza
           nieprzezroczystość. Promienie i grubość ramki są wspólne (z :root). */
        --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.35);

        /* Aktywny segment: CIEMNIEJSZY od bieli (dawniej tło --text ≈ #e6e6e6). */
        --segment-bg: #303030;
        --segment-text: #e6e6e6;
    }
}

/* Ciemna paleta — ręczne wymuszenie (ma pierwszeństwo nad systemem).
   Identyczna z blokiem systemowym powyżej — zmieniasz jeden, zmień drugi. */
html.theme-dark {
    color-scheme: dark;

    --bg: #141414;
    --bg-muted: #262626;
    --bg-subtle: #222;
    --bg-code: #2b2b2b;
    --bg-hover: #303030;
    --bg-formularz: #1e1e1e;
    --overlay-bg: rgba(20, 20, 20, 0.9);

    --text: #e6e6e6;
    --text-soft: #c8c8c8;
    --text-muted: #bcbcbc;
    --text-muted-2: #b3b3b3;
    --text-faint: #9a9a9a;
    --text-faint-2: #8c8c8c;
    --text-faint-3: #808080;

    --border: #3a3a3a;
    --border-strong: #4a4a4a;
    --border-subtle: #2f2f2f;
    --border-muted: #3a3a3a;
    --border-close: #666;
    --border-window: #3a3a3a;
    --separator: #333;

    --accent-blue: #5a8bc4;
    --accent-blue-strong: #6ab0ff;
    --accent-blue-bg: #1e2b3a;
    --selection-bg: #33506f;

    --correct: #3ccf5a;
    --correct-soft: #3f7d4a;
    --incorrect: #e07b76;
    --incorrect-soft: #8a4a4a;

    --score-low-border: #444;
    --score-low-text: #666;
    --score-mid-border: #4a7d57;
    --score-mid-text: #6fae7d;
    --score-high-border: #2f9d47;

    --accent-purple: #a97fd0;
    --accent-green: #4a9d54;
    --overlay-icon: #555;

    /* W ciemnym motywie płótno ma być NIEODRÓŻNIALNE od tła strony (--bg):
       widżet jest treścią zadania, nie osobną kartą. Dawniej #1c1c1c — o 8
       jednostek jaśniejsze niż tło, co dawało widoczny prostokąt. */
    --canvas-bg: #141414;

    /* Paleta widżetów — ciemna (patrz blok w :root). Akcenty (zielony, czerwony,
       niebieski, fiolet) biorą się z --correct/--incorrect/--accent-* i mają już
       swoje ciemne warianty wyżej. */
    --wg-osie: #a6a6a6;
    --wg-siatka: #2f2f2f;
    --wg-tekst: #dcdcdc;
    --wg-linia: #7d7d7d;
    --wg-linia-slaba: #555;
    --wg-linia-mocna: #c4c4c4;
    --wg-punkt: #f0a04b;
    --wg-zolty: #e0b64a;
    /* Patrz bliźniaczy blok wyżej: to jest błękit #0077b6 z filmu po filtrze. */
    --wg-niewiadoma: #46aadf;
    --wg-niewiadoma-jasna: #8fcbec;
    /* Ciemniejsza para tylko dla zad. 20 maja, patrz blok jasny. */
    --wg-niewiadoma-ciemna: #2f86b4;
    --wg-zolty-ciemny: #c69a34;
    --wg-zolty-jasny: #efd48c;
    --wg-wykres-jasny: #c9a8e2;
    --wg-slupek: #5b4470;
    --wg-etykieta-info: #7f9fbe;
    --wg-obszar-ok: rgba(60, 207, 90, 0.16);
    --wg-obszar-info: rgba(106, 176, 255, 0.12);
    --wg-obszar-wykres: rgba(169, 127, 208, 0.16);
    --wg-slupek-ok: rgba(60, 207, 90, 0.4);

    --error-border: #6a4040;
    --error-bg: #2a1e1e;

    --wskaznik-bg: #c99a1e;
    --wskaznik-text: #1c1500;
    --wskaznik-border: #a97f16;

    /* Cień na ciemnym tle prawie nie pracuje — ta sama geometria, mocniejsza
       nieprzezroczystość. Promienie i grubość ramki są wspólne (z :root). */
    --shadow-panel: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-modal: 0 6px 24px rgba(0, 0, 0, 0.45);

    /* Aktywny segment: CIEMNIEJSZY od bieli (dawniej tło --text ≈ #e6e6e6). */
    --segment-bg: #303030;
    --segment-text: #e6e6e6;

    /* Odwrócenie PNG/MP4 o białym tle — patrz komentarz przy tej samej zmiennej
       w bloku systemowym wyżej. Brakowało jej tutaj, więc RĘCZNIE wymuszony
       ciemny motyw zostawiał rysunki i filmy świecące na biało, choć ten sam
       motyw wybrany przez system odwracał je poprawnie (2026-08-11). */
    --filtr-grafik-zadan: invert(92%) hue-rotate(180deg);
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "STIX Two Math", "Lora", serif;
    font-size: 16px;
    text-align: center;
}

/* Zaznaczanie tekstu: jasnoniebieskie tło bez zmiany koloru tekstu —
   spójniejsze z resztą strony niż systemowy granat z białym tekstem. */
::selection {
    background-color: var(--selection-bg);
    color: inherit;
}

/* Odstęp na pływające narożniki (#naroznik-lewy / #naroznik-prawy) — nie ma już
   paska na całą szerokość, ale pigułki nadal zajmują górę ekranu, więc tytuł
   arkusza musi startować pod nimi. Pigułka kończy się na ~45px (top 16px +
   ~29px wysokości), resztę zostawiamy jako oddech.
   Przy zmianie `top`/wysokości pigułek popraw też nadpisania w style/responsive.css. */
#exercises-wrapper {
    padding-top: 66px;
}

/* Komunikat, gdy fetch("exercises.json") się nie powiedzie (np. strona
   otwarta z file:// — patrz startSheet() w matematykazen.html). */
.blad-wczytywania {
    max-width: 650px;
    margin: 40px auto;
    padding: 24px 30px;
    text-align: left;
    font-size: 17px;
    line-height: 1.6;
    border: 1px solid var(--error-border);
    background-color: var(--error-bg);
}
.blad-wczytywania code {
    background-color: var(--bg-code);
    padding: 1px 5px;
}

/* Placeholder w miejscu pojedynczego zadania, którego nie udało się zbudować
   (siatka bezpieczeństwa w loadExercises — patrz app/render.js). Reszta arkusza
   renderuje się normalnie; ten dyskretny komunikat tylko zaznacza lukę. */
.blad-zadania {
    color: var(--text-muted, #888);
    font-size: 15px;
    font-style: italic;
    text-align: center;
    border: 1px dashed var(--error-border);
    background-color: var(--error-bg);
}