/* Wspolny CSS materialow Hyzyk.
 *
 * Wyciagniety z blokow <style> wpisanych osobno w kazdym artykule —
 * 35 stron powielalo te sama warstwe wizualna (3188 linii razem).
 * Trafil tu z materialow o identycznym wygladzie: pasek powrotu,
 * spis tresci, terminal, karty polecen, tabele, cwiczenia, quiz.
 *
 * Strona wczytuje go przez ?v= z suma kontrolna pliku, wiec zmiana
 * tego pliku dociera do wszystkich artykulow naraz, bez dotykania
 * zadnego z nich.
 *
 * Zasada: wszystko, co dotyczy WYGLADU, nalezy tu. Kazda reguła
 * dotyczaca jednego konkretnego artykulu ma zostac w jego fragmencie
 * (atrybut style), inaczej wspolny plik rozdzieli sie na brud.
 */

:root {
            --ink: #202238;
            --muted: #6c7088;
            --soft: #f5f5fb;
            --line: #e2e3ef;
            --purple: #6950c7;
            --purple-dark: #4d369c;
            --purple-soft: #eeeaff;
            --blue: #347fb0;
            --blue-soft: #e8f3fa;
            --green: #267a60;
            --green-soft: #e7f6ef;
            --red: #ae4c58;
            --red-soft: #fdeef0;
            --amber: #a5721d;
            --amber-soft: #fdf3e0;
            --terminal: #171827;
            --terminal-ink: #e6e7f4;
            --shadow: 0 18px 45px rgba(45, 39, 85, .09);
            --radius: 18px;
        }

/* Docelowo wartosci sa w tokens.css; blok zostaje do czasu, az wszystkie
   strony beda linkowac tokens.css (starsze strony go nie maja). */
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #f8f7ff 0, #f4f5fa 460px); font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
        a { color: var(--purple); }
        .page { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 70px; }
        .draft-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
        .draft-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
        .home-button { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; color: var(--purple-dark); border: 1px solid #d8d1f5; border-radius: 9px; background: var(--purple-soft); font-size: 11px; font-weight: 800; text-decoration: none; }
        .home-button:hover { color: #fff; border-color: var(--purple); background: var(--purple); }
        .draft-badge, .pill { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; color: var(--purple-dark); border-radius: 999px; background: var(--purple-soft); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
        .hero { position: relative; overflow: hidden; padding: clamp(30px, 6vw, 70px); color: #fff; border-radius: 28px; background: linear-gradient(135deg, #5c46b1, #367da9); box-shadow: 0 25px 65px rgba(75, 58, 154, .22); }
        .hero::after { position: absolute; right: -100px; bottom: -180px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.05), 0 0 0 60px rgba(255,255,255,.035); content: ""; }
        .hero > * { position: relative; z-index: 1; }
        .hero .pill { color: #e7e1ff; background: rgba(255,255,255,.14); }
        h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
        h1 { max-width: 800px; margin: 18px 0 14px; font-size: clamp(38px, 6vw, 72px); }
        h1 em { color: #d8ceff; }
        h2 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 42px); }
        h3 { margin: 0 0 8px; font-size: 22px; }
        .hero p { max-width: 760px; margin: 0; color: #e6e1fa; font-size: 17px; }
        .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
        .meta span { padding: 7px 10px; color: #f3efff; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(255,255,255,.1); font-size: 12px; }
        .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; margin-top: 28px; }
        /* Material bez spisu tresci (np. quiz, ktory nie ma naglowkow h2)
           nie ma pierwszej kolumny — wtedy tresc zajmuje CALA szerokosc,
           a nie waska kolumne przeznaczona na spis. Bez tego tresc takiego
           materialu ladowala w kolumnie 220 px. */
        .layout > main:first-child { grid-column: 1 / -1; }
        /* Spis z h2 i h3 ma ~23 pozycje. Bez limitu wysokosci panel byl
           wyzszy niz ekran, a poniewaz jest przyklejony (sticky), nigdy nie
           dawalo sie przewinac do jego dolnej czesci — tresc na dole byla
           nieosiagalna. Limit + przewijanie wewnetrzne: spis mieci sie
           na ekranie i daje sie przesuwac. */
        .toc { position: sticky; top: 18px; align-self: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.8); box-shadow: var(--shadow); max-height: calc(100vh - 36px); overflow-y: auto; overscroll-behavior: contain; }
        /* Tytul spisu zostaje na miejscu, gdy przewijamy zawartosc. */
        .toc strong { display: block; margin-bottom: 9px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; position: sticky; top: -18px; padding: 4px 0 6px; background: rgba(255,255,255,.95); }
        .toc a { display: block; padding: 5px 0; color: var(--muted); font-size: 12px; text-decoration: none; }
        .toc a:hover { color: var(--purple); }
        /* Podsekcje h3 musza wygladac jak podsekcje — mniejsze i wciete.
           Bez tego 23 pozycje na 220 px wygladaly jak gesty tekstu
           bez struktury, a czytelnik nie odróżnial, co jest ważne. */
        .toc a.toc-h3 { padding-left: 12px; font-size: 11px; line-height: 1.35; border-left: 1px solid var(--line); margin-left: 1px; }
        main { min-width: 0; }
        section { margin-bottom: 30px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
        .section-kicker { margin: 0 0 8px; color: var(--purple); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
        .lead { max-width: 820px; margin: 0; color: var(--muted); }
        .goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
        .goals li { padding: 13px 15px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 13px; }
        .goals li::before { margin-right: 8px; color: var(--green); content: "✓"; font-weight: 900; }
        .note, .warning, .tip { margin: 18px 0; padding: 15px 17px; border-radius: 12px; font-size: 13px; }
        .note { color: #2b638a; border: 1px solid #c7e1f1; background: #eff9ff; }
        .tip { color: #286d57; border: 1px solid #bde3d1; background: #eefaf4; }
        .warning { color: #99434d; border: 1px solid #efc0c5; background: #fff1f2; }
        .note > strong:first-child, .tip > strong:first-child, .warning > strong:first-child { display: block; margin-bottom: 3px; }
        .terminal { overflow: hidden; margin: 16px 0 0; border: 1px solid #303149; border-radius: 13px; background: var(--terminal); box-shadow: 0 10px 25px rgba(21,20,40,.14); }
        .terminal-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; color: #aeb1c9; border-bottom: 1px solid #303149; font: 11px/1.2 Consolas, monospace; }
        .terminal-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ef6b73; }
        .terminal-bar i:nth-child(2) { background: #eab65f; }
        .terminal-bar i:nth-child(3) { background: #64c787; }
        .terminal-bar span { margin-left: 6px; }
        /* Blok kodu. Tlo jest tutaj, a nie tylko w kurs.css, bo pre
           wystepuje w kazdym artykule, a nie tylko w kursie. Bez tego
           regula dostawala kolor terminalowy (#e6e7f4) na jasnym tle
           strony — czyli bialy tekst na bialym tle w Analizie arkuszy.
           kurs.css ma identyczne tlo; ta regula je wyprzedza, wiec
           wynik jest ten sam. */
        pre { overflow-x: auto; margin: 14px 0 0; padding: 14px; color: var(--terminal-ink); border-radius: 12px; background: var(--terminal); font: 12.5px/1.6 Consolas, "Cascadia Code", monospace; white-space: pre-wrap; }

        /* Barwy tokenow w <pre><code>. Biblioteka:
           labs/php-web/php-highlight.js — ta sama, ktora koloruje edytor
           w Playgroundzie, wiec zestaw slow kluczowych jest jeden.
           Selektor zawsze z "pre": pozostale <code> w tekstach maja jasne
           tlo, a paleta tokenow jest dociemna i na jasnym tle bylaby
           nieczytelna.

           Paleta pochodzi z php-web.css, ale tam tlo to #0a0f1d, a tutaj
           --terminal = #171827. Dwa kolory nie przechodzily na naszym tle,
           wiec zostaly rozjasnione do zapasu:
             tok-tag      4,20:1 -> 5,5:1
             tok-comment  3,78:1 -> 5,5:1
           (kontrast liczony na tle skomponowanym, nie na golym
           --terminal — komentarz, slowo kluczowe i klasa maja wlasne tlo
           rgba).

           WAZNE: zaden token nie zmienia font-weight, font-style ani
           letter-spacing. Wyroznienie idzie tlem i kolorem, bo roznica
           szerokosci znakow przesuwa zawijanie wierszy. Uwaga
           z php-web.css, ktora przy czcionce 12,5 px jest jeszcze bardziej
           istotna. */
        pre .tok-tag { color: #7d90c5; }
        pre .tok-comment { color: #879fb6; background: rgba(93,112,128,.14); }
        pre .tok-string { color: #9fe0a4; }
        pre .tok-variable { color: #ffd479; }
        pre .tok-number { color: #ffa9c8; }
        pre .tok-keyword { color: #c4b0ff; background: rgba(183,156,255,.13); }
        pre .tok-builtin { color: #7ad7ee; }
        pre .tok-class { color: #9fe0f5; background: rgba(122,215,238,.13); }
        pre .tok-function { color: #8fd0ff; }
        pre .tok-operator { color: #93a3c4; }
        pre .tok-punctuation { color: #7d8db0; }
        pre .tok-html { color: #c9d4e8; }
        /* Tokeny C++ (labs/cpp/cpp-highlight.js, sterownik
           kurs-kolorowanie-cpp.js). Te same odcienie co odpowiedniki
           PHP, żeby oba kursy wyglądały jak jeden serwis:
             tk-c komentarz  jak tok-comment
             tk-s napis      jak tok-string
             tk-p preprocesor jak tok-tag (dyrektywa, nie kod)
             tk-n liczba     jak tok-number
             tk-k słowo kluczowe jak tok-keyword
             tk-t typ/biblioteka jak tok-builtin */
        pre .tk-c { color: #879fb6; background: rgba(93,112,128,.14); }
        pre .tk-s { color: #9fe0a4; }
        pre .tk-p { color: #7d90c5; }
        pre .tk-n { color: #ffa9c8; }
        pre .tk-k { color: #c4b0ff; background: rgba(183,156,255,.13); }
        pre .tk-t { color: #7ad7ee; }
        .prompt { color: #8fe0bc; }
        .command { color: #cbbaff; }
        .output { color: #c5c8dc; }
        .command-grid { display: grid; gap: 18px; }
        .command-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
        .command-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: 0; }
        .alias { color: var(--muted); font: 11px/1.2 Consolas, monospace; }
        .command-card > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
        .label { display: block; margin: 12px 0 5px; color: var(--ink); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
        .inline-code { padding: 2px 6px; color: var(--purple-dark); border-radius: 5px; background: var(--purple-soft); font: .92em Consolas, monospace; }

        /* .nb — "nie łam" — trzyma token razem z interpunkcją.
         *
         * <code><span class="nb">ls.</span></code> ma nie dać się rozbić
         * tak, żeby "ls" skończyło wiersz, a kropka wylądowała na
         * początku następnego. Wstawia te znaczniki
         * tools/status-publikacji.py przy kazdym przebiegu, ale regula
         * CSS dla nich nigdy nie istniała — we wszystkich czterech
         * arkuszach projektu nie było śladu .nb, przez co znaczniki byly
         * martwe, a kropki na początku wiersza zdarzały sie wylacznie
         * przypadkiem szerokosci okna.
         *
         * white-space: nowrap wystarcza: wszystkie opisywane tokeny
         * sa krotkie (najdluzszy to "user@computer:~$."), wiec nigdy nie
         * wypchna sie poza kolumne.
         *
         * UWAGA: ta regula NIE moze trafic do status-budowy.css — ten
         * arkusz jest wstawiany tylko przy statusie "budowa" i znika, gdy
         * strona zostaje potwierdzona. Regula zniklaby razem z nim, a
         * znaczniki .nb zostalyby w tekscie na darmo. */
        .nb { white-space: nowrap; }
        .hint { margin-top: 12px; padding: 10px 12px; color: #526078; border-left: 3px solid #a9b8d8; border-radius: 0 9px 9px 0; background: #f1f5fb; font-size: 12px; }
        .hint strong { color: #365987; }
        .mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .mini-table th, .mini-table td { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
        .mini-table th { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
        .mini-table tr:last-child td { border-bottom: 0; }
        .mini-table code { color: var(--purple-dark); font: .9em Consolas, monospace; }
        .shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
        .shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 12px; }
        kbd { padding: 3px 7px; color: var(--ink); border: 1px solid #d2d3e1; border-bottom-width: 2px; border-radius: 6px; background: #fff; font: 11px Consolas, monospace; white-space: nowrap; }
        .exercise { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: exercise; }
        .exercise li { position: relative; padding: 13px 15px 13px 49px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); font-size: 13px; counter-increment: exercise; }
        .exercise li::before { position: absolute; top: 12px; left: 14px; display: grid; width: 24px; height: 24px; place-items: center; color: #fff; border-radius: 8px; background: var(--purple); content: counter(exercise); font-size: 11px; font-weight: 850; }
        details { margin-top: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }
        summary { padding: 12px 15px; color: var(--purple-dark); cursor: pointer; font-size: 13px; font-weight: 800; }
        details > div { padding: 0 15px 14px; color: var(--muted); font-size: 13px; }
        .quiz { display: grid; gap: 14px; }
        .question { padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
        .question strong { display: block; margin-bottom: 9px; font-size: 13px; }
        .question label { display: block; margin: 6px 0; color: var(--muted); font-size: 12px; }
        .question input { margin-right: 7px; accent-color: var(--purple); }
        .quiz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
        .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; color: #fff; border: 0; border-radius: 9px; background: linear-gradient(135deg, #8068dc, #563eb2); cursor: pointer; font: 800 12px Inter, sans-serif; }
        .button:hover { filter: brightness(1.05); }
        .quiz-result { min-height: 20px; color: var(--green); font-size: 13px; font-weight: 800; }
        /* Informacja zwrotna po klikniecia "Sprawdz odpowiedzi".
         *
         * Skrypt quiz.js dodaje klase .ok, .zla albo .pusta do pytania.
         * Bez tych regul klasa jest martwa — wczesniejszy skrypt z inf02
         * pokazywal tylko liczbe poprawnych i nie zaznaczal, ktore pytanie
         * bylo zle, wiec uczen musial sam policzyc, gdzie sie mylil.
         */
        .question.ok { border-color: #8fd0b4; background: #f0faf5; }
        .question.zla { border-color: #eda3aa; background: #fdf2f3; }
        .question.pusta { border-color: #e7c88a; background: #fdf8ee; }
        .podpowiedz { margin: 10px 0 0; color: var(--red); font-size: 12px; font-weight: 800; }
        .quiz-result:not(:empty) { padding: 8px 12px; border-radius: 9px; background: var(--soft); }
        .footer { margin-top: 25px; color: var(--muted); text-align: center; font-size: 11px; }
        @media (max-width: 800px) { .layout { grid-template-columns: 1fr; } .toc { position: static; } .goals, .shortcut-grid { grid-template-columns: 1fr; } }
        @media (max-width: 520px) { .page { width: min(100% - 20px, 1120px); padding-top: 12px; } .draft-bar { align-items: flex-start; flex-direction: column; } .draft-actions { align-items: flex-start; justify-content: flex-start; } .hero { border-radius: 20px; } section { padding: 20px 16px; } .command-card { padding: 16px; } }
        @media print { body { background: #fff; } .page { width: 100%; padding: 0; } .draft-bar, .toc, .quiz-actions, .button { display: none; } .hero, section { box-shadow: none; } .hero { color: #111; background: #eee; } .hero p, .hero .pill, .hero .meta span { color: #333; } .command-card, section { break-inside: avoid; } }

        /* Ilustracje (rastrowe i SVG z biblioteki) nie moga rozpychac kolumny. */
        figure img, figure svg, figure video { max-width: 100%; height: auto; }
        figure img { display: block; margin: 12px auto; }