/* Summary: Style stron arkuszy CKE w korzeniu domeny (matura-matematyka-*.html)
 * Owner: matematyzm-team | Since: 2026-08 | Stability: @draft
 *
 * [0] Wylacznie to, czego nie ma w scholar-bundle.css: zmienne motywu, reset,
 *     pasek platformy i karty akcji. Kazda grupa ma podane zrodlo, bo zadna
 *     nie jest tu wymyslona - to przepisy z komponentow Vue, ktorych style sa
 *     scoped i nie wychodza poza swoj komponent.
 *
 * [0.1] Strony arkuszy generuje backend/tools/build-arkusz-pages.php.
 *       Ten plik jest pisany recznie i NIE jest przez niego nadpisywany.
 */

/* [5] Wylacznie to, czego w tamtym arkuszu nie ma. Trzy grupy,
     kazda z podanym zrodlem, bo zadna nie jest tu wymyslona. */

/* [5.1] Zmienne motywu. Siedza w <style> w frontend/platform/index.html
     [P.1], a nie w arkuszu stylow, wiec strona poza buildem musi je
     powtorzyc. Krem podlogi jest konstrukcja, nie ozdoba: karty sa
     biale i nie maja ramek, wiec to on rysuje ich krawedz. */
:root {
    --bg: color-mix(in srgb, var(--primary) 10%, var(--light));
    --card: var(--light);
    --radius-sm: 10px;
    --radius-md: 14px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.2s var(--ease);
    --t-med: 0.35s var(--ease);
}

/* [5.1a] Reset 1:1 z frontend/platform/index.html [78]. Siedzi tam
     w <style>, a nie w zadnym arkuszu, wiec bundel go nie niesie.
     Bez niego karta menu liczy szerokosc bez paddingu i wystaje
     o 24 px poza ekran telefonu. */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--dark);
    font-family: "Mulish", "Muli", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* [5.2] Pasek platformy. Style TopBar.vue sa scoped, czyli w arkuszu
     stoja z atrybutem [data-v-*] i nie zlapia zwyklego HTML, wiec
     przepisujemy tu sama geometrie, bez animacji logo i bez panelu
     konta. Wartosci 1:1 z TopBar.vue [S.0a] do [S.2a].
     Kciuk slidera jest statyczny: aktywna pozycja jest znana z gory
     (Arkusze), wiec nie trzeba mierzyc DOM jak w [N.4]. */
.app-topbar {
    background: transparent;
    color: var(--dark);
    position: relative;
}
.app-topbar-inner {
    box-sizing: border-box;
    max-width: 1560px;
    margin: 0 auto;
    padding: 12px 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}
.app-topbar-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.app-topbar-mark {
    height: 46px;
    width: auto;
    display: block;
}
.app-topbar-name {
    font-size: 30px;
    /* Mulish konczy sie na 700, wiec grubszy napis daje dopiero
       obrys literami, tak jak w TopBar.vue [S.1] */
    font-weight: 700;
    -webkit-text-stroke: 0.02em currentColor;
    letter-spacing: 1px;
}
.app-topbar-name .lm {
    color: var(--dark);
}
.app-topbar-name .lt {
    color: var(--primary);
}
.app-nav-slider {
    justify-self: center;
    position: relative;
    padding: 6px;
    border-radius: 20px;
    background: var(--light);
}
.app-nav-list {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}
.app-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 18px 24px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: color-mix(in srgb, var(--dark) 50%, transparent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-fast);
}
.app-nav-item:hover {
    color: var(--dark);
}
/* Sekcja, w ktorej stoimy: zloty kciuk pod pozycja i pelny granat */
.app-nav-item.active {
    color: var(--dark);
    background: var(--primary);
    box-shadow: 0 1px 4px
        color-mix(in srgb, var(--dark) 12%, transparent);
}
.app-nav-ext {
    opacity: 0.7;
}
.app-topbar-right {
    justify-self: end;
}

/* [5.2a] Zlota akcja w prawym rogu. Wymiary z TopBar.vue
     (.app-topbar-login): wysokosc 76,8 px zgadza sie z torem
     nawigacji, wiec oba konczą się na tej samej linii.
     Na statycznej stronie nie ma modala logowania, wiec przycisk
     prowadzi do platformy, gdzie ten modal jest. */
.app-topbar-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76.8px;
    padding: 0 30px;
    background: var(--primary);
    color: var(--dark);
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--t-fast);
}
.app-topbar-login:hover {
    background: color-mix(in srgb, var(--primary) 78%, var(--dark));
}

/* [5.2b] Burger i karta menu. Na telefonie pasek platformy nie ma
     nawigacji, tylko znak marki, zlota akcje i bialy kafel burgera,
     wiec strona musi miec je oba, zeby naglowek zgadzal sie
     z aplikacja. Geometria z TopBar.vue [S.7] do [S.9]. */
.app-hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}
.app-hamburger span {
    width: 20px;
    height: 2px;
    background: color-mix(in srgb, var(--dark) 70%, transparent);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.app-hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.app-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.app-hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.app-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 198;
    background: color-mix(in srgb, var(--dark) 26%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.app-mobile-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease, visibility 0s;
}

.app-mobile-menu {
    display: none;
    position: fixed;
    top: calc(var(--app-topbar-h, 64px) + 8px);
    left: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--app-topbar-h, 64px) - 28px);
    overflow: hidden auto;
    padding: 12px;
    border-radius: 28px;
    background: var(--light);
    box-shadow: 0 24px 48px -24px
        color-mix(in srgb, var(--dark) 45%, transparent);
    z-index: 199;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease, visibility 0s linear 0.28s;
}
.app-mobile-menu.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease, visibility 0s;
}
.app-mobile-menu .app-nav-item {
    width: 100%;
    padding: 16px 20px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dark);
}
.app-mobile-menu .app-nav-item.active {
    background: color-mix(in srgb, var(--primary) 22%, var(--light));
    color: var(--dark);
}

/* [5.3] Karty akcji. Przepisane z katalogu /platform/test/design-system
     (DesignSystemPanel.vue [D]), gdzie style sa scoped i nie wychodza
     poza panel. Zasada systemu zachowana: zero cieni, hover zmienia
     kolor a nigdy geometrie (design-buttons.css [0.3]). */
/* [5.3d] Kafle pozostalych arkuszy: zostaja kartami, bo to nie sa akcje na
     tym arkuszu, tylko wyjscia na inne strony. Tlo i cien z karty
     "Wygeneruj losowy arkusz" (.cke-random-card w ArkuszeCKEList [1.0]). */
.dcta-stack {
    display: grid;
    gap: 10px;
}
.dcta {
    --cta-accent: var(--primary);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--sch-radius);
    text-decoration: none;
    color: var(--dark);
    background: radial-gradient(
            130% 160% at 6% 50%,
            color-mix(in srgb, var(--cta-accent) 20%, transparent) 0%,
            color-mix(in srgb, var(--cta-accent) 8%, transparent) 38%,
            transparent 68%
        ),
        var(--card);
    box-shadow: var(--sch-shadow);
    transition: box-shadow 0.2s ease;
}
.dcta:hover {
    box-shadow: var(--sch-shadow-hover);
}
.dcta-ico {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cta-accent) 16%, transparent);
    color: var(--primary-dark-40);
}
.dcta-ico svg {
    width: 20px;
    height: 20px;
}
.dcta-body {
    flex: 1;
    min-width: 0;
}
.dcta-body strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}
.dcta-body span {
    display: block;
    font-size: 12.5px;
    color: var(--dark-a50);
    margin-top: 2px;
}
/* [5.3a] Przyciski akcji 1:1 z panelem arkusza na liscie CKE
     (.cke-sheet__actions i .cke-act w ArkuszeCKEList [7.5]): wysokosc 46 px,
     promien 11, pismo 13/800, ikona 14 px, odstep 7 px. Wczesniej byly to
     wysokie karty z ikona w kwadracie, ktore na stronie o jednym arkuszu
     zajmowaly caly pierwszy ekran.

     Uklad: flex z zawijaniem. Na telefonie zloty przycisk bierze cala
     szerokosc (flex-basis 100%) i schodzi do drugiego rzedu, a dwa pliki
     dziela pierwszy. Od 640 px [5.3c] wszystkie trzy staja w jednym rzedzie. */
.sheet-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
/* Wysokosc 60 px zamiast 46 z panelu: tam przyciski leza w wysuwanej szufladzie
   nad reszta interfejsu, a tu sa jedynym powodem istnienia strony i stoja na
   pustym kremie. Reszta geometrii (promien, pismo, odstepy) skalowana o tyle
   samo, zeby proporcje zostaly te same. */
.act {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 60px;
    padding: 0 18px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, filter 0.15s;
}
.act svg {
    width: 18px;
    height: 18px;
    flex: none;
}
/* Liczba stron znika na waskim ekranie: z nia dwa przyciski plikow nie
   mieszcza sie w jednym rzedzie i cala trojka lamie sie na trzy poziomy */
@media (max-width: 560px) {
    .act-extra {
        display: none;
    }
    .act {
        min-height: 54px;
        padding: 0 10px;
        font-size: 14px;
        gap: 7px;
    }
}

/* Dwa pliki: bial karty z wlosowa obwodka wpuszczona do srodka, wiec
   przycisk nie rosnie o jej grubosc (inset box-shadow, jak .cke-act--pdf) */
.act--pdf {
    background: var(--card);
    color: var(--dark-a60);
    box-shadow: inset 0 0 0 1px var(--dark-a10);
}
.act--odp {
    background: var(--card);
    color: var(--dark-a40);
    box-shadow: inset 0 0 0 1px var(--dark-a10);
}
.act--pdf:hover,
.act--odp:hover {
    background: var(--dark-a05);
    color: var(--dark);
}

/* [5.3b] Rozwiazanie online. W panelu aplikacji ten przycisk ma zloto w 20%,
     bo stoi tam wsrod swoich i nikogo nie trzeba do niego przekonywac.
     Tutaj jest jedyna akcja, po ktora nikt nie przyszedl, wiec dostaje pelne
     wypelnienie, czyli .dsb--solid z design-buttons.css. Reszta geometrii
     zostaje z panelu. */
.act--online {
    flex: 1 0 100%;
    background: var(--primary);
    color: var(--dark);
}
.act--online:hover {
    filter: brightness(0.96);
}

/* Zdanie pod przyciskami. Wczesniej niosl je podtytul w karcie, a przyciski
   panelu maja jedna linie tekstu, wiec komunikat schodzi pod nie. */
.act-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--dark-a50);
}
.act-note b {
    color: var(--dark-a60);
    font-weight: 800;
}

/* [5.4] Drobiazgi wlasne tej strony: wiersz faktow pod tytulem
     i lista zadan. Lista jest zwykla biala karta scholar, wiec
     opisujemy tylko rozklad wiersza. */
.sheet-facts {
    display: flex;
    flex-wrap: wrap;
    /* Rozdziela je sam odstep, bez kropek: przy pieciu pozycjach kazdy znak
       miedzy nimi robil z wiersza danych rzad ozdobnikow */
    gap: 4px 20px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--dark-a50);
}
.sheet-facts li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Liczba i jej jednostka nigdy sie nie rozdzielaja przy zawijaniu */
    white-space: nowrap;
}
.sheet-facts b {
    color: var(--dark);
    font-weight: 900;
}

/* [5.4a] Lista zadan arkusza. Kazdy wiersz prowadzi do tego samego zadania
     w drzewie cwiczen, wiec calym celem dotyku jest wiersz, nie osobny
     przycisk obok nazwy: przy 31 pozycjach kolumna przyciskow czytalaby sie
     jak druga lista. Kolor pojawia sie dopiero pod kursorem. */
.task-list {
    margin: 0;
    padding: 6px 4px;
    list-style: none;
    background: var(--card);
    border-radius: var(--sch-radius);
    box-shadow: var(--sch-shadow);
}
.task-list li + li {
    border-top: 1px solid var(--dark-a05);
}
.task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--dark);
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s ease;
}
a.task-row:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.task-no {
    flex: none;
    width: 24px;
    text-align: right;
    font-size: 12px;
    font-weight: 900;
    color: var(--dark-a30);
    font-variant-numeric: tabular-nums;
}
.task-topic {
    min-width: 0;
    font-weight: 700;
}
.task-pts {
    flex: none;
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--dark-a30);
    white-space: nowrap;
}
/* Strzalka tylko w wierszach, ktore dokads prowadza: zadanie bez wlasnej
   strony w drzewie zostaje zwyklym wierszem, zamiast obiecywac klikniecie. */
.task-go {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--dark-a20);
    transition: color 0.15s ease;
}
a.task-row:hover .task-go {
    color: var(--dark-a60);
}

/* [5.3c] Od 640 px trzy przyciski staja w jednym rzedzie: zloty przestaje
     brac cala szerokosc i dzieli miejsce z plikami po rowno. */
@media (min-width: 640px) {
    .act--online {
        flex: 1 0 0;
    }
}

/* [5.4b] Zdanie pod naglowkiem sekcji. Scholar ma naglowek i tresc, ale nie ma
     miedzy nimi wprowadzenia, wiec to jedyna wlasna klasa w tej grupie. */
.sec-lead {
    margin: -4px 0 14px;
    font-size: 14.5px;
    color: var(--dark-a50);
}

/* [5.4c] Stopka strony */
.sheet-foot {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid var(--dark-a10);
    font-size: 13px;
    color: color-mix(in srgb, var(--dark) 45%, transparent);
}
.sheet-foot p {
    margin: 0 0 8px;
}
.sheet-foot a {
    color: var(--dark-a60);
    font-weight: 700;
}

/* [5.5] Skalowanie paska. Progi i wartosci 1:1 z TopBar.vue [S.8]:
     bez nich tor nawigacji nachodzi na marke juz przy 1280 px, bo
     pozycje w pelnym rozmiarze mieszcza sie dopiero od 1500 px. */
@media (max-width: 1500px) {
    .app-topbar-inner {
        gap: 14px;
        padding: 12px 24px;
    }
    .app-nav-item {
        padding: 15px 18px;
        font-size: 16px;
    }
    /* Zlota akcja schodzi razem z torem, inaczej to ona wyznacza
       wysokosc calego paska i jest on o 9 px wyzszy niz w aplikacji */
    .app-topbar-login {
        min-height: 63.6px;
    }
}
@media (max-width: 1250px) {
    .app-topbar-mark {
        height: 38px;
    }
    .app-topbar-name {
        font-size: 23px;
    }
    .app-nav-item {
        padding: 13px 13px;
        font-size: 15px;
    }
    .app-topbar-login {
        min-height: 56px;
    }
}
@media (max-width: 1050px) {
    .app-topbar-name {
        display: none;
    }
    .app-nav-item {
        padding: 12px 10px;
        font-size: 14px;
    }
}

/* [5.5a] Telefon: uklad belki 1:1 z TopBar.vue [S.9], czyli znak
     marki z lewej, zlota akcja i bialy kafel burgera z prawej.
     Nawigacja przenosi sie ze slidera do karty menu [5.2b]. */
@media (max-width: 768px) {
    .app-topbar {
        --app-topbar-h: calc(64px + env(safe-area-inset-top, 0px));
        z-index: 200;
    }
    .app-topbar-inner {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        padding: 8px 12px;
    }
    /* Sam znak ∞ bez napisu: w jednym wierszu z akcja i burgerem
       brakowalo na niego miejsca */
    .app-topbar-name {
        display: none;
    }
    .app-topbar-mark {
        height: 30px;
    }
    .app-nav-slider {
        display: none;
    }
    /* display: contents rozklada akcje i burger na dwie wlasne
       kolumny siatki, zamiast pakowac je w jedna */
    .app-topbar-right {
        display: contents;
    }
    .app-topbar-login {
        min-height: 48px;
        padding: 0 14px;
        font-size: 16px;
    }
    .app-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 20px;
        background: var(--light);
    }
    .app-mobile-menu {
        display: flex;
    }
    .dcta {
        padding: 16px;
        gap: 13px;
    }
    .dcta-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
    .dcta-body strong {
        font-size: 15px;
    }
}

/* [5.6] Kolumna tresci jest wezsza niz w aplikacji: tam
     .scholar-page ma 1440 px pod siatki po cztery karty, a tu
     wszystko jest jedna kolumna tekstu i akcji. */
/* [5.6] Kolumna tresci trzyma sie tej samej osi co pasek: ta sama szerokosc
     maksymalna i ten sam padding poziomy co .app-topbar-inner, wiec logo
     i pierwszy przycisk zaczynaja sie na jednej linii. Scholar daje tu 1440 px
     i 24 px paddingu, czyli o 120 px wezej i o 24 px plycej niz pasek, przez co
     tresc byla wcieta wzgledem marki. Progi ida za paskiem [5.5]. */
.scholar-page {
    max-width: 1560px;
    padding: 28px 48px 76px;
}
@media (max-width: 1500px) {
    .scholar-page {
        padding: 24px 24px 72px;
    }
}
@media (max-width: 768px) {
    /* 12 px, dokladnie tyle co pasek na telefonie [5.5a], zeby pierwszy
       przycisk konczyl sie na tej samej linii co kafel burgera */
    .scholar-page {
        padding: 18px 12px 64px;
    }

    /* [5.6c] Na telefonie tytul i fakty maja czytac sie jak jeden blok, a nie
         jak dwa: wiersz danych schodzi o stopien i przysuwa sie do naglowka.
         Za to odstepy MIEDZY sekcjami rosna, bo w jednej kolumnie to one
         zastepuja podzial na kolumny i dopiero one mowia, gdzie konczy sie
         jedna rzecz, a zaczyna druga. */
    .sheet-facts {
        margin-top: 5px;
        font-size: 12px;
        gap: 2px 16px;
    }
    .scholar-header {
        margin-bottom: 44px;
    }
    .scholar-section {
        margin-bottom: 46px;
        padding-top: 18px;
    }
    .scholar-section:last-of-type {
        margin-bottom: 0;
    }
}

/* [5.6a] Tytul strony. Celowo maly: cala tresc tej strony to trzy przyciski
     i lista zadan, a naglowek powtarza fraze, ktora czlowiek przed chwila sam
     wpisal w wyszukiwarce. Ma potwierdzic, ze trafil dobrze, i zejsc z drogi,
     wiec bierze rozmiar podtytulu sekcji, nie tytulu strony. */
.scholar-greeting {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

/* [5.6b] Poziom egzaminu w kolorze tego poziomu, ten sam przydzial co
     w platformie (scholar.css [174] do [176]): podstawowa niebieska,
     rozszerzona czerwona, osmoklasista pomaranczowy. Klasa na <body>,
     wiec przy powielaniu strony wystarczy jedno slowo.

     nowrap: czlon ma schodzic do nowego wiersza w calosci. Bez tego na
     telefonie "poziom" zostawal na koncu jednej linii, a "podstawowy"
     spadal do nastepnej i nazwa poziomu rozpadala sie na dwa kolory tla. */
.scholar-greeting .lvl {
    white-space: nowrap;
}
.lvl-matp .scholar-greeting .lvl {
    color: var(--accent2);
}
.lvl-matr .scholar-greeting .lvl {
    color: var(--accent4);
}
.lvl-egz8 .scholar-greeting .lvl {
    color: var(--accent1);
}
@media (max-width: 560px) {
    .scholar-greeting {
        font-size: 19px;
    }
}

/* Wiersz faktow pod tytulem nalezy do naglowka, wiec odstep pod nim
   jest odstepem calej szopki, a nie marginesem samej listy */
.scholar-header {
    margin-bottom: 30px;
}
@media (max-width: 560px) {
    .scholar-greeting {
        font-size: 24px;
    }
}