/* Strona pojedynczego ćwiczenia (typ: cwiczenie).
 * Wspólne ramy strony i karty pochodzą z artykul.css/kurs.css; tutaj są
 * tylko elementy charakterystyczne dla zadania: metadane, kryteria oceny
 * i wskazówki. */

.cwiczenie-strona {
    max-width: 980px;
    margin: 0 auto;
}

/* Pilot układu poziomego: treść i testy po lewej, edytor po prawej. */
body.cwiczenie-poziomo .page {
    width: min(1400px, calc(100% - 32px));
}

.cwiczenie-strona--poziomo {
    max-width: 1400px;
}

.cwiczenie-strona--poziomo .cwiczenie-lewa,
.cwiczenie-strona--poziomo .cwiczenie-prawa {
    min-width: 0;
}

.cwiczenie-strona--poziomo .cwiczenie-prawa .runner {
    margin-bottom: 0;
}

@media (min-width: 1000px) {
    .cwiczenie-strona--poziomo.cwiczenie-strona--gotowa {
        display: grid;
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 30px;
        align-items: start;
    }

    .cwiczenie-strona--poziomo.cwiczenie-strona--gotowa > .cwiczenie-prawa {
        position: sticky;
        top: 14px;
        max-height: calc(100vh - 28px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 520px) {
    body.cwiczenie-poziomo .page {
        width: calc(100% - 20px);
    }
}

/* Poziom / czas / liczba testów pod leadem. */
.zadanie-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.zadanie-meta span {
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* Blok „Co będzie oceniane” — widoczny przed kodem. */
.ocena {
    margin: 26px 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--purple-soft);
    box-shadow: none;
    color: var(--ink);
}

.ocena h2 {
    margin: 0 0 10px;
    color: var(--purple);
    font-size: 20px;
}

.ocena h3 {
    margin: 16px 0 6px;
    font-size: 15px;
}

.ocena-lista,
.ocena-testy {
    margin: 0;
    padding-left: 22px;
}

.ocena-lista li,
.ocena-testy li {
    margin: 5px 0;
}

.ocena-lista li::marker {
    color: var(--green);
}

.ocena-kod {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
    color: var(--ink);
    font: 12.5px/1.5 ui-monospace, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.ocena-stopka {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12.5px;
}

/* Wskazówki: natywne <details>, bez JS. */
.wskazowki {
    margin: 22px 0;
}

.wskazowki > h2 {
    margin-bottom: 10px;
}

.wskazowki details {
    margin: 8px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    padding: 0 14px;
}

.wskazowki summary {
    cursor: pointer;
    padding: 10px 0;
    color: var(--ink);
    font-weight: 650;
}

.wskazowki details > div,
.wskazowki details > p {
    margin: 0 0 12px;
}

@media (max-width: 700px) {
    .cwiczenie-strona {
        margin: 0;
    }
}

/* Tytuł strony dla czytników i wyszukiwarek: wizualnie ukryty, ale obecny
   w drzewie dokumentu jako jedyny <h1> (audyt 2026-11). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}