/* Typ strony: analiza
 *
 * CSS dla analyses arkuszy egzaminacyjnych (obecnie jedna strona:
 * Analiza arkuszy egzaminacyjnych INF.03).
 *
 * Dziedziczy artykul.css — dlatego tego pliku NIE powtarza reguł
 * wspólnych. Powtarzanie ich tutaj jest dokładnie tym błędem, który
 * naprawiamy: strona miała 5 598 B własnego CSS w <style> i rozjeżdżała
 * się z resztą serwisu. Reguła jest jedna — kto poprawia kartę albo
 * terminal w artykule, ten ma mieć efekt tutaj.
 *
 * Co zostaje własne dla tego typu i dlaczego:
 *
 *   .waga       waga punktowa wymagania w tabeli kryteriów. 150 wystąpień,
 *               najczęstszy element tej strony, i nic wspólnego z resztą
 *               serwisu — nie ma sensu w kurs.css.
 *   .box        ramka z nagłówkiem; .uwaga / .pudlo / .rad to warianty
 *               semantyczne (ostrzeżenie, pułapka w kryteriach, rada),
 *               .num to numer przypisany do wymagania w treści.
 *   .sl         numeracja kroków przez data-n zamiast listy — przy
 *               wyliczeniach, w których liczba ma być widoczna obok kroku.
 *   .schemat    szare pole na schemat pliku (listy plików do oddania).
 *   .uwaga-min  wersja zwięzła ostrzeżenia wewnątrz tabeli.
 *   .nb         słowo razem z kropką, żeby interpunkcja nie wpadła sama
 *               na początek wiersza.
 *
 * Poniżej reguły, których artykul.css jeszcze nie ma, a których ta
 * strona wymaga: układ dwukolumnowy ze spisem treści, tabele i listy.
 * To są rzeczy wspólne dla wielu artykułów (28 plików typu artykul używa
 * <table>), więc docelowo powinny trafić do artykul.css. Są tu, dopóki
 * nie ma ich tam, żeby ściąga nie wyglądała inaczej niż reszta.
 */

/* ── układ: spis treści z lewej, treść z prawej ───────────────────────── */
.layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.toc {
    position: sticky;
    top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow);
}

.toc strong {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.toc a {
    display: block;
    padding: 3px 0;
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
}

.toc a:hover {
    color: var(--purple);
}

/* ── tabele ──────────────────────────────────────────────────────────── */
table {
    width: 100%;
    margin: 12px 0 0;
    border-collapse: collapse;
    font-size: 13px;
}

th,
td {
    padding: 8px 9px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* ── listy ───────────────────────────────────────────────────────────── */
ul,
ol {
    margin: 8px 0;
    padding-left: 22px;
}

li {
    margin: 4px 0;
}

/* ── kod w tekście ───────────────────────────────────────────────────── */
code {
    font-family: Consolas, monospace;
}

p code,
li code,
td code,
.box code {
    padding: 1px 5px;
    color: var(--purple-dark);
    border-radius: 5px;
    background: var(--purple-soft);
    font: .92em Consolas, monospace;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ── waga punktowa ───────────────────────────────────────────────────── */
.waga {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 11px;
    font-weight: 850;
}

.waga.srednia {
    background: var(--amber-soft);
    color: var(--amber);
}

.waga.niska {
    background: var(--soft);
    color: var(--muted);
}

/* ── ramki ───────────────────────────────────────────────────────────── */
.box {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13.5px;
}

.box > strong:first-child {
    display: block;
    margin-bottom: 3px;
}

.uwaga {
    color: #2b638a;
    border: 1px solid #c7e1f1;
    background: #eff9ff;
}

.pudlo {
    color: #99434d;
    border: 1px solid #efc0c5;
    background: #fff1f2;
}

.rad {
    color: #286d57;
    border: 1px solid #bde3d1;
    background: #eefaf4;
}

.num {
    margin: 14px 0;
    padding: 12px 14px;
    color: #8a5c14;
    border: 1px solid #f0dcb4;
    background: var(--amber-soft);
    border-radius: 12px;
    font-size: 13.5px;
}

/* ── numeracja kroków ────────────────────────────────────────────────── */
.sl {
    position: relative;
}

.sl::before {
    content: attr(data-n);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 7px;
    background: var(--purple);
    font-size: 11px;
    font-weight: 850;
}

/* ── drobiazgi ───────────────────────────────────────────────────────── */
.schemat {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--soft);
    font-size: 13px;
}

.schemat b {
    color: var(--purple-dark);
}

/* wersja zwięzła ostrzeżenia wewnątrz tabeli */
.uwaga-min {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* słowo razem z kropką: żeby interpunkcja nie wpadła sama na początek wiersza */
.nb {
    white-space: nowrap;
}

/* ── wydruk i wąskie ekrany ──────────────────────────────────────────── */
@media print {
    .toc,
    .draft-bar {
        display: none;
    }
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    .page {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .toc {
        position: static;
    }
}