/* app-nauka.css — zawartosc widoku Nauka (faza 22, makieta 4.2).
 *
 * Kontrakt: .planning/design/MAKIETA-APP-2026-08-31.md sekcja 4.2 oraz
 * decyzja wlasciciela nr 6 z 31.08.2026 (zamki DORADCZE, nie twarde).
 *
 * Co ten plik rysuje: naglowek drogi („Twoja droga"), krecoslup rozdzialow
 * z trzema stanami, korone w rogu jako wejscie do zakresu rozszerzonego oraz
 * DWA uklady: mobilny (jedna kolumna, pasek zakladek) i desktopowy od 900 px
 * (krecoslup w srodku, droga w kolumnie kontekstowej 340 px).
 *
 * Zasady, ktore ten plik respektuje bez wyjatkow:
 * 1. Zaden kolor, promien ani odstep nie jest literalem. Wszystko przez var()
 *    z css/base.css, bo ten sam token rysuje 292 strony tresci.
 * 2. Zadnej wartosci nie ustawia JavaScript przez element.style. Polityka
 *    produkcyjna to `style-src 'self'` BEZ 'unsafe-inline', wiec styl z JS
 *    przechodzi w tescie i ginie po cichu u uzytkownika. Pasek postepu jest
 *    natywnym <progress> (atrybut `value`), stany sa klasami.
 * 3. --reward jest WYLACZNIE wypelnieniem. Tekst na nim bierze --reward-ink.
 * 4. Stan rozdzialu jest czytelny bez koloru: inny ksztalt znacznika
 *    (ptaszek / gwiazdka / kloodka) ORAZ slowo w podpisie.
 *
 * Ten plik jest ladowany PRZED css/app-desktop.css, wiec powloka
 * trojkolumnowa zostaje wlascicielem geometrii planszy w odtwarzaczu lekcji.
 * Ekran przegladu planszy nie ma, wiec nie wchodzi mu w droge.
 */

/* ================= PONIZEJ 900 PX: NIC NOWEGO NIE WIDAC =================
 *
 * Fala 5 nowej powloki (02.09.2026) dolozyla desktopowi kolumne kontekstowa
 * na przegladzie i w odtwarzaczu lekcji. Uklad telefonu ma zostac CO DO
 * PIKSELA taki, jak przed ta fala, wiec:
 *
 * 1. Nowe elementy (korona w karcie postepu, pasek postepu rozdzialu) sa tu
 *    schowane. Wracaja dopiero w bloku od 900 px.
 * 2. Dwa nowe pojemniki (`.nauka-side`, `.lekcja-ctx`) sa `display: contents`,
 *    wiec na telefonie ZNIKAJA z ukladu i ich dzieci wracaja wprost do siatki
 *    rodzica. Pojemniki istnieja tylko po to, zeby na desktopie kolumna
 *    kontekstowa byla JEDNYM obszarem siatki; bez nich karty kolumny musialyby
 *    dzielic wiersze z kregoslupem i rozjezdzalyby sie po nim.
 * 3. `order` odtwarza kolejnosc telefonu tam, gdzie DOM musial sie zmienic.
 */

.nauka-road__crown,
.nauka-side__label,
.nauka-chapter__bar { display: none; }

/* Elementy dolozone przy szlifie paczki 5 (03.09.2026). Ta sama zasada, co
   wyzej: telefon ich nie dostaje, wracaja dopiero w bloku od 900 px. */
.nauka-side__bar,
.lekcja-plan { display: none; }

.nauka-side,
.lekcja-ctx { display: contents; }

/* ⚠️ Karta odznak jest TRZECIM pojemnikiem, ktory ponizej 900 px musi zniknac
   z ukladu. Bez tego pas odznak przestaje byc bezposrednim dzieckiem siatki
   przegladu i `order: 2` z bloku telefonu przestaje na niego dzialac, wiec
   odznaki wracaja NAD kregoslup rozdzialow. Osobna regula, bo straznik NAU-03
   czyta poprzednia dwojke doslownie. */
.nauka-badges { display: contents; }

@media (max-width: 899px) {
  /* Pas odznak stoi w DOM obok drogi (wspolny pojemnik kolumny kontekstowej),
     a na telefonie ma stac POD kregoslupem rozdzialow — tak jak od 01.09. */
  #view-lessons .nauka-chapters { order: 1; }
  #view-lessons .achievement-strip { order: 2; }

  /* ---- pasek postepu rozdzialu wchodzi na telefon (grupa E, 03.09.2026) ----
   *
   * Fala 5 zbudowala go WYLACZNIE od 900 px, wiec na telefonie licznik mowil
   * „Teraz tutaj · 0 z 8 lekcji", a nic tego nie pokazywalo: droga rozdzialow
   * byla na telefonie o jedna informacje ubozsza od tej samej drogi
   * na desktopie. Element jest ten sam, natywny <progress> z wartoscia
   * w ATRYBUCIE (CSP: `style-src 'self'`, zaden styl nie idzie z JavaScriptu)
   * i js/views/lessons.js daje go tylko rozdzialom odblokowanym, wiec
   * siedem wierszy „dalej na drodze" nie dostaje siedmiu pustych kresek.
   *
   * ⚠️ Domyslke `display: none` stawia blok poza progami (straznik NAU-03),
   * wiec ten selektor musi byc od niej mocniejszy. Pasek jest `aria-hidden`,
   * bo licznik obok mowi to samo slowami.
   */
  #view-lessons .nauka-chapter__bar {
    appearance: none;
    display: block;
    width: 100%;
    max-width: 180px;
    height: 4px;
    margin-top: 7px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--accent);
  }
  #view-lessons .nauka-chapter__bar::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--bg-sunken); }
  #view-lessons .nauka-chapter__bar::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--accent); }
  #view-lessons .nauka-chapter__bar::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--accent); }
  /* Rozdzial ukonczony swieci zlotem, jak na desktopie: zielen jest kolorem
     postepu w toku, zloto kolorem domknietego dorobku. */
  #view-lessons .nauka-chapter.is-done .nauka-chapter__bar::-webkit-progress-value { background: var(--crown); }
  #view-lessons .nauka-chapter.is-done .nauka-chapter__bar::-moz-progress-bar { background: var(--crown); }

  /* Karta wyjasnienia wyprowadzila sie z `.board-stack` do pojemnika kolumny
     kontekstowej, wiec na telefonie musi wrocic na swoje miejsce jako osobny
     element siatki odtwarzacza.
     ⚠️ Selektor idzie przez `.lekcja-ctx >`, a nie `.lessons-player >`:
     `display: contents` usuwa pojemnik z UKLADU, ale NIE z drzewa dokumentu,
     wiec kombinator dziecka nadal widzi go jako rodzica. Pierwsza wersja
     celowala w `.lessons-player > .lesson-content-card`, nie trafiala.
     Kotwica planszy (paczka 4/szlif4, 03.09.2026): wiersz 3, nie 4 — plansza
     przeszla na wiersz 1 (css/lessons.css), panel trenera na wiersz 2, wiec
     karta wyjasnienia idzie zaraz po nim, a konspekt krokow (wiersz 4)
     zostaje na samym dole jako tresc najmniej pilna z calego ekranu. */
  #view-lessons .lekcja-ctx > .lesson-content-card {
    grid-column: 1;
    /* Faza 2 szlifu UX (D-F2-04): wyjasnienie zaraz pod plansza (wiersz 2),
       trener i sterowanie w wierszu 3 (css/lessons.css). */
    grid-row: 2;
  }
}

/* Tablet pionowo (761-899 px): `.lesson-outline` idzie na pelna szerokosc
   w wierszu 1, plansza i panel dziela wiersz 2, wiec karta wyjasnienia
   nalezy do wiersza 3. */
@media (min-width: 761px) and (max-width: 899px) {
  #view-lessons .lekcja-ctx > .lesson-content-card { grid-row: 3; }
  #view-lessons .lessons-player > .board-annotation-bar { grid-row: 4; }
}

/* Niski ekran poziomy: trzy kolumny, plansza w srodkowej. Odstep siatki jest
   tam rowny odstepowi `.board-stack` (8 px), wiec korekta nie jest potrzebna. */
@media (min-width: 600px) and (max-width: 899px) and (max-height: 600px) and (orientation: landscape) {
  #view-lessons .lekcja-ctx > .lesson-content-card {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

/* ================= UKLAD MOBILNY ================= */

#view-lessons .lessons-overview {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  /* Kolumna tresci, nie cala szerokosc okna. Ta sama miara co ekran Start,
     zeby obie zakladki mialy ten sam rytm. */
  max-width: 560px;
  margin: 0 auto var(--sp-6);
}

/* ⚠️ Bez tej linii `display: grid` z reguly wyzej WYGRYWA z atrybutem
   `hidden` (specyficznosc #id .klasa kontra selektor atrybutu przegladarki),
   wiec przeglad rozdzialow zostaje na ekranie pod odtwarzaczem lekcji
   i spycha plansze o ~1400 px w dol. Ta sama rodzina bledu co
   `hidden` kontra `display` opisana przy .hint-ladder i .controls-row. */
#view-lessons .lessons-overview[hidden] { display: none; }

/* ---- pasek sekcji z korona ---- */

.nauka-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 6px 0 0;
}

.nauka-head__text { min-width: 0; }

.nauka-head__kicker {
  margin: 0;
  color: var(--text-dim);
}

.nauka-head__title {
  margin: 2px 0 0;
}

/* Korona: wejscie do zakresu rozszerzonego (makieta 4.2 pkt 3). Zloto jest tu
   obwodka i ikona, nie wypelnieniem tekstu — --crown domyka AA w obu motywach
   (patrz notatka przy tokenach w base.css). */
.nauka-crown {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--crown) 45%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--crown) 12%, var(--bg-raised));
  color: var(--crown);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.nauka-crown:hover { background: color-mix(in srgb, var(--crown) 20%, var(--bg-raised)); }
.nauka-crown:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nauka-crown__ico { width: 20px; height: 20px; }

.nauka-crown__label {
  color: var(--text);
  font-size: var(--fs-micro);
  font-weight: 650;
}

/* ---- zakres rozszerzony ---- */

.nauka-extras {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--crown) 35%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--border);
}

.nauka-extras[hidden] { display: none; }

.nauka-extra {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}

.nauka-extra:hover { background: color-mix(in srgb, var(--crown) 8%, var(--bg-raised)); }
.nauka-extra:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.nauka-extra__ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--crown);
}

.nauka-extra__label { flex: 1; font-size: 14px; font-weight: 550; }

.nauka-extra__go { flex: none; width: 18px; height: 18px; color: var(--text-dim); }

/* ================= NAGLOWEK DROGI ================= */

.nauka-road {
  overflow: hidden;
}

/* ---- scena ----
   Makieta rysuje tu ilustracje: dzien w motywie jasnym, noc w ciemnym.
   Ilustracji nie ma i nie wolno wstawiac atrapy ani zdjecia z banku, wiec ta
   sama mysl („idziesz droga, ktora gdzies prowadzi") jest zbudowana z tokenow:
   niebo, wzgorza, cialo niebieskie i droga uciekajaca w perspektywie.
   Warstwa jest dekoracja: aria-hidden i zero tresci. */
.nauka-road__scene {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 10%, var(--bg-raised)) 0%,
    var(--bg-raised) 100%);
}

.nauka-road__scene > span { position: absolute; }

/* Slonce w dzien, ksiezyc w nocy. --reward jest tu WYPELNIENIEM tarczy. */
.nauka-road__sun {
  top: 16px;
  right: 26px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--reward);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--reward) 18%, transparent);
}

/* Wzgorza: dwie elipsy, blizsza ciemniejsza. */
.nauka-road__hills {
  right: -12%;
  bottom: -46px;
  left: -12%;
  height: 92px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 26%, var(--bg-raised));
}

.nauka-road__hills::before {
  content: "";
  position: absolute;
  right: 42%;
  bottom: 8px;
  left: -18%;
  height: 78px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 42%, var(--bg-raised));
}

/* Droga: trapez uciekajacy w glab kadru, z przerywana osia. */
.nauka-road__way {
  right: 0;
  bottom: 0;
  left: 0;
  height: 58px;
  clip-path: polygon(42% 0, 58% 0, 88% 100%, 12% 100%);
  background: color-mix(in srgb, var(--text-dim) 26%, var(--bg-raised));
}

.nauka-road__way::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 2px);
  width: 4px;
  background: repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--reward) 70%, transparent) 0 8px,
    transparent 8px 18px);
}

/* ---- znacznik uczacego sie na drodze ----
 *
 * Do 03.09.2026 scena byla czysta dekoracja: rysowala droge, ale nie mowila,
 * gdzie na tej drodze ktos stoi. Teraz stoi na niej ten sam koralik, co przy
 * rozdzialach w kregoslupie, i wedruje w glab kadru razem z postepem:
 * 0% to poczatek drogi (blisko, duzy), 100% to jej koniec (daleko, maly).
 *
 * ⚠️ Pozycje niesie ATRYBUT `data-road-step` (0-10), a nie styl z JavaScriptu.
 * Polityka produkcyjna to `style-src 'self'` bez 'unsafe-inline', wiec styl
 * z JS przechodzi w tescie i ginie po cichu u uzytkownika. Dziesiec
 * przystankow: droga ma 58 px wysokosci, wiec krok co procent bylby niewidoczny.
 */
.nauka-road__scene { --road-step: 0; }
.nauka-road__scene[data-road-step="1"] { --road-step: 1; }
.nauka-road__scene[data-road-step="2"] { --road-step: 2; }
.nauka-road__scene[data-road-step="3"] { --road-step: 3; }
.nauka-road__scene[data-road-step="4"] { --road-step: 4; }
.nauka-road__scene[data-road-step="5"] { --road-step: 5; }
.nauka-road__scene[data-road-step="6"] { --road-step: 6; }
.nauka-road__scene[data-road-step="7"] { --road-step: 7; }
.nauka-road__scene[data-road-step="8"] { --road-step: 8; }
.nauka-road__scene[data-road-step="9"] { --road-step: 9; }
.nauka-road__scene[data-road-step="10"] { --road-step: 10; }

.nauka-road__pin {
  bottom: calc(6px + var(--road-step) * 4.2px);
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: scale(calc(1 - var(--road-step) * 0.05));
  transition: bottom var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

/* Noc. Ta sama scena, inna pora: niebo schodzi w --bg-sunken, tarcza traci
   blask i dostaje ubytek (ksiezyc), a nad wzgorzami staja gwiazdy. */
[data-theme="dark"] .nauka-road__scene {
  background: linear-gradient(180deg,
    var(--bg-sunken) 0%,
    color-mix(in srgb, var(--accent) 8%, var(--bg-raised)) 100%);
}

[data-theme="dark"] .nauka-road__sun {
  background: color-mix(in srgb, var(--reward) 62%, var(--bg-raised));
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--reward) 10%, transparent),
    /* gwiazdy: pojedyncze punkty, nie pole szumu */
    -46px 6px 0 -15px color-mix(in srgb, var(--text) 70%, transparent),
    -84px 22px 0 -16px color-mix(in srgb, var(--text) 55%, transparent),
    -132px 4px 0 -16px color-mix(in srgb, var(--text) 62%, transparent),
    -186px 26px 0 -16px color-mix(in srgb, var(--text) 45%, transparent),
    -232px 10px 0 -16px color-mix(in srgb, var(--text) 58%, transparent);
}

/* Ubytek tarczy robi z niej ksiezyc bez dokladania elementu. */
[data-theme="dark"] .nauka-road__sun::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -11px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
}

[data-theme="dark"] .nauka-road__hills { background: color-mix(in srgb, var(--accent) 20%, var(--bg-sunken)); }
[data-theme="dark"] .nauka-road__hills::before { background: color-mix(in srgb, var(--accent) 30%, var(--bg-sunken)); }
[data-theme="dark"] .nauka-road__way { background: color-mix(in srgb, var(--text-dim) 18%, var(--bg-sunken)); }

/* ---- tresc naglowka ---- */

.nauka-road__body { padding: var(--sp-4); }

.nauka-road__kicker {
  margin: 0;
  color: var(--text-dim);
  font: 650 var(--fs-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.nauka-road__chapter {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.nauka-road__meta { margin: 4px 0 0; color: var(--text-dim); font-size: var(--fs-meta); }

/* Pasek postepu jest NATYWNYM <progress>. Powod jest twardy, nie estetyczny:
   wartosc idzie atrybutem `value`, wiec nie potrzebuje ani stylu z JS (CSP),
   ani stu regul dla stu procent. Przy okazji czytnik ekranu dostaje prawdziwy
   `progressbar` z wartoscia zamiast pustego <div>. */
.nauka-road__bar {
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  margin-top: var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--accent);
}

.nauka-road__bar::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--bg-sunken); }
.nauka-road__bar::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.nauka-road__bar::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.nauka-road__percent {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 6px 0 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

/* ---- jeden oczywisty nastepny krok ----
   Karta „Kontynuuj" przestala byc osobnym pudelkiem nad lista i weszla do
   naglowka drogi. Powod: ekran mial trzy rowne wejscia w nauke (karta, mapa,
   siatka rozdzialow) i zadne nie bylo pierwsze. Teraz jest jedno. */
.lesson-continue {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.lesson-continue[hidden] { display: none; }

.lesson-continue__text { min-width: 0; order: 2; }

.lesson-continue__kicker {
  margin: 0;
  color: var(--text-dim);
  font: 650 var(--fs-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.lesson-continue__title {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.lesson-continue__meta { margin: 2px 0 0; color: var(--text-dim); font-size: var(--fs-meta); }

/* Licznik calej sciezki stoi juz w pasku postepu nad przyciskiem, wiec
   powtorzony pod nim bylby trzecia kopia tej samej liczby na jednym ekranie. */
.lesson-continue__path { display: none; }

.lesson-continue__cta {
  order: 1;
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px var(--sp-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.lesson-continue__cta:hover { background: var(--accent-strong); }
.lesson-continue__cta:active { transform: translateY(1px); }
.lesson-continue__cta:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* ================= KREGOSLUP ROZDZIALOW ================= */

.nauka-chapters {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- rynna drogi ----
 *
 * Do 03.09.2026 „droga" byla dziesieciopikselowa kreska w odstepie miedzy
 * kartami, schowana ZA nimi: osiem prawie identycznych ciemnych wierszy
 * czytalo sie jak lista, a ekran nazywa sie „Sciezka nauki". Teraz znacznik
 * stanu wychodzi POZA karte, do wlasnej rynny, a przez te rynne biegnie
 * ciagla nitka od pierwszego do ostatniego rozdzialu. Karty wisza przy niej
 * jak przystanki, a nie stoja jedna na drugiej.
 *
 * Kierunek niesie KSZTALT nitki, nie sam kolor (WCAG 1.4.1): odcinek juz
 * przebyty jest CIAGLY i w --accent, odcinek przed uczacym sie jest
 * KRESKOWANY i w --border. Rozdzial biezacy stoi dokladnie na granicy: nitka
 * nad jego znacznikiem jest ciagla, pod nim kreskowana.
 *
 * Znacznik ma 40 px i stoi 16 px od gory rzedu, wiec kazdy rzad dzieli nitke
 * w tym samym miejscu niezaleznie od swojej wysokosci.
 */
.nauka-chapter {
  position: relative;
  padding-left: 52px;
}

.nauka-chapter::before,
.nauka-chapter::after {
  content: "";
  position: absolute;
  left: 19px;
  width: 0;
  border-left: 2px dashed var(--border);
}

/* Odcinek nad znacznikiem: siega w odstep miedzy kartami, wiec nitka nie ma
   przerw na granicach rzedow. */
.nauka-chapter::before {
  top: calc(-1 * var(--sp-2));
  height: calc(16px + var(--sp-2));
}

/* Odcinek pod znacznikiem (znacznik konczy sie na 56 px od gory rzedu). */
.nauka-chapter::after {
  top: 56px;
  bottom: calc(-1 * var(--sp-2));
}

/* Droga zaczyna sie i konczy na znaczniku, a nie w powietrzu. */
.nauka-chapter:first-child::before,
.nauka-chapter:last-child::after { display: none; }

/* Za uczacym sie: nitka ciagla i zielona. */
.nauka-chapter.is-done::before,
.nauka-chapter.is-current::before,
.nauka-chapter.is-done::after {
  border-left-style: solid;
  border-left-color: var(--accent);
}

.nauka-chapter__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 68px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.nauka-chapter__btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.nauka-chapter__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ⚠️ Wcisniecie przesuwa CALY RZAD, nie sam przycisk. Powod jest twardy:
   `transform` na przycisku robi z niego blok zawierajacy dla pozycjonowania
   bezwzglednego, wiec znacznik stanu (`position: absolute` wzgledem rzedu)
   przeskakiwalby o szerokosc rynny przy kazdym kliknieciu. */
.nauka-chapter:active { transform: translateY(1px); }

/* Znacznik stanu. Ksztalt niesie znaczenie tak samo jak kolor: ptaszek,
   gwiazdka, kloodka. Stoi w rynnie drogi, POZA karta, i zaslania soba nitke,
   wiec czyta sie jak koralik na sznurku. */
.nauka-chapter__mark {
  position: absolute;
  top: 16px;
  left: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
}

.nauka-chapter__mark svg { width: 20px; height: 20px; }

.nauka-chapter__text { min-width: 0; }

.nauka-chapter__order {
  display: block;
  color: var(--text-dim);
  font: 650 var(--fs-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.nauka-chapter__title {
  display: block;
  margin-top: 1px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.nauka-chapter__meta {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: var(--fs-micro);
}

.nauka-chapter__meta b {
  font-family: var(--font-mono);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.nauka-chapter__desc {
  /* Dwa wiersze, nie caly opis: rozdzial biezacy ma sie wyroznic, a nie
     zepchnac reszte drogi pod fold telefonu. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: var(--fs-meta);
  line-height: 1.45;
}

/* Zapowiedz rozdzialu: tytuly jego pierwszych lekcji. Jeden wiersz, NIGDY
   urwany wielokropkiem — js/views/lessons.js dobiera tyle tytulow, ile miesci
   sie w budzecie znakow, wiec tekst zawsze konczy sie na calym tytule. */
.nauka-chapter__why {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

.nauka-chapter__go { flex: none; width: 20px; height: 20px; color: var(--accent); }

/* ---- stan: ukonczony ---- */

.nauka-chapter.is-done .nauka-chapter__mark {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-contrast);
}

.nauka-chapter.is-done .nauka-chapter__meta b { color: var(--accent-strong); }

/* ---- stan: biezacy ---- */

/* ⚠️ 6% zieleni na --bg-raised znikalo w motywie jasnym (bialy + 6% #17843a
   to #eef5f0): audyt, znalezisko 36. Wyroznik nie moze siedziec w samym tle,
   wiec niesie go TAKZE ksztalt: pierscien 2 px zamiast 1 px i ciagly odcinek
   drogi nad znacznikiem. */
.nauka-chapter.is-current .nauka-chapter__btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-raised));
}

.nauka-chapter.is-current .nauka-chapter__mark {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--reward) 16%, var(--bg-raised));
  color: var(--crown);
}

.nauka-chapter.is-current .nauka-chapter__order { color: var(--accent-strong); }

/* ---- stan: dalej na drodze (zamek DORADCZY) ----
   Wyszarzenie mowi „to jeszcze przed toba", nie „tego nie wolno". Przycisk
   ZOSTAJE klikalny, a kontrast podpisow zostaje powyzej AA: przygaszamy tlo
   i znacznik, nie tekst. */
/* ⚠️ Obwodka rozdzialu przed uczacym sie jest CIAGLA od 03.09.2026. Kreska
   przerywana ma teraz jedno znaczenie w tym widoku: odcinek drogi, ktorego
   jeszcze nie przeszedles. Karta z kreskowana obwodka czytala sie jak element
   niedokonczony (ta sama pomylka co „TWOJ RUCH" w Zadaniach, znalezisko 20),
   a stan i tak niosa kloodka oraz slowo „Dalej na drodze". */
.nauka-chapter.is-locked .nauka-chapter__btn {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-sunken) 55%, var(--bg-raised));
}

.nauka-chapter.is-locked .nauka-chapter__title { color: var(--text-dim); font-weight: 600; }

/* ================= OSTRZEZENIE PRZED ZAMKIEM ================= */

/* Decyzja nr 6: kloodka pokazuje ZALECANA kolejnosc, ale rozdzial da sie
   otworzyc. Ekran odmowy nie istnieje; jest rozmowa o tym, czego jeszcze
   brakuje, i dwa wyjscia, z ktorych zalecane jest domyslne. */
.nauka-lock__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.nauka-lock__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  font-size: var(--fs-meta);
}

.nauka-lock__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
  font-size: 13px;
}

.nauka-lock__count {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

.nauka-lock__note { margin: 0; color: var(--text-dim); font-size: var(--fs-meta); line-height: 1.5; }

/* Druga akcja jest cicha, nie czerwona: otwarcie rozdzialu przed czasem nie
   jest bledem ani kara, tylko decyzja uczacego sie. */
.confirm-actions .nauka-lock__anyway {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
}

.confirm-actions .nauka-lock__anyway:hover { color: var(--text); border-color: var(--text-dim); }

/* ============ UKLAD DESKTOPOWY (od 900 px), FALA 5 POWLOKI V3 ============
 *
 * Kontrakty: MAKIETA-DESKTOP-2026-09-02.md (K3: jeden zielony przycisk na
 * ekran; K7: stan kontrolny to swiezy profil), NAUKA-2026-09-01.md (droga
 * z zamkami doradczymi, jeden oczywisty nastepny krok) oraz
 * POWLOKA-DESKTOP-2026-09-01.md (pas 46 px nad plansza, kolumna kontekstowa
 * o szerokosci --ctx-w, rezerwacja pasa oceny).
 *
 * Slownik jest ten sam, co na Starcie, w Zadaniu i w Grze: karty na
 * --bg-raised, obwodka 1 px --border, promien --radius-lg, etykiety w Geist
 * Mono wersalikami, liczby w Geist Mono, zielen WYLACZNIE na postepie
 * i na jednej akcji pierwszoplanowej, zloto WYLACZNIE na nagrodzie i koronie.
 *
 * Zaden kolor ani odstep nie jest tu literalem. Reguly sa zakresowane
 * `#view-lessons`, bo css/app-desktop.css laduje sie PO tym pliku i przy
 * rownej specyficznosci wygrywalby kolejnoscia; identyfikator widoku daje
 * przewage bez `!important` i bez ruszania pliku powloki.
 */

@media (min-width: 900px) {

  /* ======================================================================
   * 1. SCIEZKA NAUKI (przeglad)
   * ======================================================================
   * Dwie kolumny: kregoslup rozdzialow po lewej, kolumna kontekstowa 340 px
   * po prawej. Kolumna zaczyna sie ROWNO Z NAGLOWKIEM strony (obszar `side`
   * obejmuje wszystkie wiersze), wiec krotka droga nie zostawia nad nia
   * pustego pasa — to jest ta sama zasada, co kolumna „Dzis / Najczestsze
   * bledy / Poziom" na Starcie.
   *
   * Odstep miedzy wierszami jest ZEROWY, a odstepy niosa marginesy. Powod:
   * `.nauka-extras` jest domyslnie `hidden`, wiec jego wiersz ma zero
   * wysokosci, ale odstepy siatki wokol niego zostaja i naglowek odjezdzalby
   * od listy o 16 px bez zadnej tresci pomiedzy.
   */
  #view-lessons .lessons-overview {
    grid-template-columns: minmax(0, 1fr) var(--ctx-w);
    grid-template-areas:
      "head  side"
      "extra side"
      "list  side"
      ".     side";
    /* ⚠️ Czwarty wiersz jest PUSTY i elastyczny. Bez niego wysoka kolumna
       kontekstowa (obszar `side` obejmuje wszystkie wiersze) rozpychala wiersze
       1-3 proporcjonalnie i kregoslup rozdzialow zaczynal sie 160 px pod
       naglowkiem. Nadmiar kolumny idzie teraz w `1fr`, a wiersze tresci
       zostaja przy swojej naturalnej wysokosci. */
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--sp-5);
    row-gap: 0;
    max-width: none;
    margin-bottom: var(--sp-6);
    align-items: start;
  }

  #view-lessons .nauka-head { grid-area: head; margin: 0 0 var(--sp-4); }
  #view-lessons .nauka-extras { grid-area: extra; margin-bottom: var(--sp-4); }
  #view-lessons .nauka-chapters { grid-area: list; gap: var(--sp-2); }


  /* Kolumna kontekstowa. Lepka, bo kregoslup ma osiem rozdzialow i przy
     przewijaniu listy postep oraz nastepny krok maja jechac z uczacym sie.
     52 px, czyli dokladnie tyle, ile ma gorny pas pola tresci: przy zerowym
     przewinieciu karta stoi ROWNO z naglowkiem strony, a przy przewijaniu nie
     wjezdza pod ikony motywu i ustawien (`fixed` w pasie 10-50 px). */
  #view-lessons .nauka-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    /* ⚠️ Wysokosc, nie `align-self: start`. Kolumna ma siegac dolu kadru,
       bo inaczej pod nia zostaje pusty prostokat (audyt, znalezisko 12).
       52 px to gorny pas pola tresci, --sp-5 to oddech pod kolumna. */
    height: calc(100dvh - 52px - var(--sp-5));
    align-self: start;
    position: sticky;
    top: 52px;
  }

  /* ---- karta „Twoja droga": scena, biezacy rozdzial, postep calej sciezki ---- */

  #view-lessons .nauka-road__scene { height: 116px; }

  #view-lessons .nauka-road__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
  }

  /* Korona: ten sam znak nagrody, co w karcie „Twoj poziom" na Starcie.
     Zloto jest WYPELNIENIEM ikony i obwodka krazka; zaden napis go nie bierze,
     wiec kontrast tekstu zostaje na tokenach tekstu. */
  #view-lessons .nauka-road__crown {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--crown) 45%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--crown) 14%, var(--bg-raised));
    color: var(--crown);
  }
  #view-lessons .nauka-road__crown svg { width: 19px; height: 19px; }

  #view-lessons .nauka-road__chapter { font-size: 18px; }

  /* „Zacznij tutaj": jedyna akcja pierwszoplanowa calego ekranu (K3). Stopka
     karty postepu, a nie osobne pudelko: przeniesienie jej w DOM zmienilo by
     uklad telefonu, ktorego ta fala nie rusza. Pelne rozlanie do krawedzi
     karty i wlasne tlo robia z niej osobny panel mimo wspolnej ramki. */
  #view-lessons .lesson-continue {
    margin: var(--sp-4) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
    padding: var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
    gap: var(--sp-3);
  }

  #view-lessons .lesson-continue__cta { min-height: 48px; font-size: 15px; }

  /* ---- kregoslup rozdzialow ----
     Rozdzial biezacy PROWADZI: jest jedynym z opisem, jedynym ze strzalka,
     ma zielona obwodke i wieksze wypelnienie. Reszta drogi jest cicha. */

  #view-lessons .nauka-chapter__btn {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 72px;
    padding: var(--sp-3) var(--sp-4);
  }

  #view-lessons .nauka-chapter.is-current .nauka-chapter__btn {
    min-height: 96px;
    padding: var(--sp-4);
  }

  /* Pasek postepu rozdzialu: natywny <progress>, wartosc atrybutem, wiec bez
     stylu z JavaScriptu (CSP). Rozdzial dalej na drodze go nie dostaje: „0 z N"
     nie niesie informacji, a dokladalby kreske do kazdego z siedmiu wierszy. */
  #view-lessons .nauka-chapter__bar {
    appearance: none;
    display: block;
    width: 100%;
    max-width: 180px;
    height: 4px;
    margin-top: 7px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--accent);
  }
  #view-lessons .nauka-chapter__bar::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--bg-sunken); }
  #view-lessons .nauka-chapter__bar::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--accent); }
  #view-lessons .nauka-chapter__bar::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--accent); }
  #view-lessons .nauka-chapter.is-done .nauka-chapter__bar::-webkit-progress-value { background: var(--crown); }
  #view-lessons .nauka-chapter.is-done .nauka-chapter__bar::-moz-progress-bar { background: var(--crown); }

  /* ---- karta odznak w kolumnie kontekstowej ----
   *
   * ⚠️ TO JEST NAPRAWA NAJWIEKSZEGO PUSTEGO PROSTOKATA W PRODUKCIE.
   * Do 03.09.2026 kolumna konczyla sie tam, gdzie konczyly sie odznaki:
   * 91 px pustki przy 1440x900 i 138 px przy 1885x947, a obok, w kolumnie
   * tresci, lista rozdzialow jechala jeszcze przez pol ekranu.
   *
   * Wzorzec pochodzi z Debiutow, ktore audyt wskazal jako jedyna kolumne
   * wypelniajaca pelna wysokosc: ostatnia karta ROSNIE do dolu kadru, a jej
   * lista przewija sie w niej lokalnie. Kolumna ma teraz stala wysokosc rowna
   * widocznemu polu, wiec pustka pod nia jest ZEROWA na kazdej wysokosci
   * okna, a zadna odznaka nie wpada poza zasieg (lepki element wyzszy od
   * kadru urywa swoja dolna czesc bezpowrotnie).
   */
  #view-lessons .nauka-badges {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--sp-2);
    min-height: 0;
  }

  #view-lessons .nauka-side__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0;
    color: var(--text-dim);
    font: 700 var(--fs-label) var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  /* Licznik mowi to samo co pasek, tylko slowami: pas pokazywal, ile odznak
     ISTNIEJE, ale nie ile jest zdobytych. */
  #view-lessons .nauka-side__count {
    flex: none;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    /* ⚠️ Wersaliki etykiety robily z „0 z 9" napis „0 Z 9". */
    text-transform: none;
  }

  #view-lessons .nauka-side__bar {
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--crown);
  }
  #view-lessons .nauka-side__bar::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--bg-sunken); }
  #view-lessons .nauka-side__bar::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--crown); }
  #view-lessons .nauka-side__bar::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--crown); }

  #view-lessons .achievement-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    /* Sygnal przewijania: ostatnie 14 px listy gasnie. Gdy odznaki miesza sie
       w kartcie, pod nimi nie ma czego wygaszac i maska jest niewidoczna, wiec
       ta jedna regula obsluguje oba stany bez klasy z JavaScriptu. */
    mask-image: linear-gradient(to bottom, black 0 calc(100% - 14px), transparent 100%);
  }
  #view-lessons .achievement-strip .achievement-card {
    flex: none;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
    padding: 7px 9px;
    border-radius: var(--radius);
    /* Kafel lezy teraz NA karcie odznak, a nie na tle strony: w motywie jasnym
       biel na bieli gubila jego krawedz. */
    border-color: transparent;
    background: var(--bg-sunken);
  }
  #view-lessons .achievement-strip .achievement-card.is-earned {
    border-color: color-mix(in srgb, var(--accent-gold) 52%, var(--border));
  }
  #view-lessons .achievement-mark { width: 22px; height: 22px; font-size: 12px; }
  #view-lessons .achievement-card strong { font-size: 11.5px; line-height: 1.25; }
  #view-lessons .achievement-card span { margin-top: 1px; font-size: 10.5px; line-height: 1.25; }

  /* ======================================================================
   * 2. LISTA LEKCJI W ROZDZIALE
   * ====================================================================== */

  #view-lessons .lessons-chapter { max-width: 780px; margin: 0; }
  #view-lessons .lesson-row { min-height: 56px; border-radius: var(--radius); }

  /* ======================================================================
   * 3. ODTWARZACZ LEKCJI
   * ======================================================================
   * Geometria planszy jest ta sama, co w Zadaniu i w Partii: pas 46 px nad
   * plansza (--board-head), plansza z --board-size, zarezerwowana kolumna
   * pasa oceny. Ten blok NIE rusza `css/app-desktop.css` ani nie wprowadza
   * wlasnych wymiarow planszy — czyta tokeny powloki.
   *
   * ⚠️ PROG KONSPEKTU TO 1600 PX, NIE 1401. Powloka stawia konspekt jako
   * czwarta kolumne od 1401 px. Pomiar: pole tresci ma szerokosc
   * `okno - 295 px` (szyna 232, marginesy 2x24, pasek przewijania 15), a
   * uklad czterokolumnowy z PELNA plansza potrzebuje 232 + 20 + (22 + 8 + 640)
   * + 20 + 340 = 1282 px. To wychodzi dopiero przy oknie ~1577 px. Przy
   * 1440 px konspekt-kolumna sciskal plansze do 495 px, czyli o 145 px mniej
   * niz plansza w Zadaniu w tym samym oknie. Ponizej 1600 px konspekt jest
   * wiec poziomym pasem nad plansza, a plansza stoi TAM, GDZIE W ZADANIU.
   */

  #view-lessons .lessons-player.play-layout {
    grid-template-columns: minmax(0, 1fr) var(--ctx-w);
    grid-template-areas:
      "plan  ctx"
      "board ctx"
      "rysuj ctx";
    gap: var(--sp-2) var(--sp-5);
    max-width: none;
    align-items: start;
  }

  #view-lessons .lessons-player > .lesson-outline { grid-area: plan; }
  #view-lessons .lessons-player > .board-column { grid-area: board; }
  #view-lessons .lessons-player > .lekcja-ctx { grid-area: ctx; }
  /* Pas adnotacji (D-F2-04) pod plansza, tej samej szerokosci co plansza. */
  #view-lessons .lessons-player > .board-annotation-bar {
    grid-area: rysuj;
    /* Ta sama geometria, co plansza w .board-column: pas oceny (--eval-w)
       plus plansza, wysrodkowane w obszarze. Margines z lewej rowny pasowi
       oceny ustawia pas dokladnie pod plansza. */
    justify-self: center;
    width: min(100%, var(--board-size));
    margin: 0 0 0 calc(var(--eval-w) + var(--sp-2));
  }

  /* ---- konspekt jako pas 46 px nad plansza (900-1599 px) ----
     Ta sama wysokosc, co pas nad plansza, wiec ekran ma dwa rowne pasy
     zamiast bloku 125 px, ktory spychal plansze o pol ekranu w dol. */
  #view-lessons .lessons-player .lesson-outline {
    position: static;
    display: flex;
    align-items: stretch;
    min-height: var(--board-head);
    height: var(--board-head);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
  }

  #view-lessons .lesson-outline__head {
    display: flex;
    align-items: center;
    flex: none;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    border-right: 1px solid var(--border);
    /* Blekit #398fd4 byl jedynym takim kolorem w serwisie i nie ma go
       w tokenach. Pas przechodzi na slownik powloki. */
    background: none;
    color: var(--text-dim);
  }

  #view-lessons .lesson-outline__mark { display: none; }

  #view-lessons .lesson-outline__head small {
    font: 700 var(--fs-label) var(--font-mono);
    letter-spacing: var(--ls-label);
    opacity: 1;
    text-transform: uppercase;
  }

  /* Tytul lekcji stoi juz w pasie nad plansza. Ta sama nazwa dwa razy
     w jednym kadrze to szum, wiec slot zostaje w DOM i milczy. */
  #view-lessons .lesson-outline__head strong { display: none; }

  #view-lessons .lesson-outline__list {
    display: flex;
    flex: 1;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    /* ⚠️ Szosta zakladka byla urwana na krawedzi karty BEZ zadnego sygnalu,
       ze cos jest dalej (audyt, znalezisko 11). Ostatnie 20 px gasnie, wiec
       urwanie czyta sie jako „lista jedzie dalej", a nie jako uciety uklad.
       Gdy kroki sie mieszcza, pod maska nie ma czego wygaszac. */
    mask-image: linear-gradient(to right, black 0 calc(100% - 20px), transparent 100%);
  }

  #view-lessons .lesson-outline__step {
    flex: 0 0 auto;
    max-width: 220px;
    align-items: center;
    min-height: 0;
    padding: 0 var(--sp-3);
    border-top: 0;
    border-left: 1px solid var(--border);
    scroll-snap-align: start;
    white-space: nowrap;
  }

  #view-lessons .lesson-outline__step > :last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #view-lessons .lesson-outline__step.is-current {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
    color: var(--text);
  }

  /* Znacznik kroku bral #4aa3df spoza tokenow. */
  #view-lessons .lesson-outline__step.is-current .lesson-outline__step-mark,
  #view-lessons .lesson-outline__step.is-done .lesson-outline__step-mark { color: var(--accent-strong); }

  /* ---- pas 46 px nad plansza: wyjscie, tytul lekcji, licznik krokow ---- */

  #view-lessons .lessons-player .board-stack { position: relative; }

  #view-lessons .lessons-player .lesson-header {
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
  }

  #view-lessons .lessons-player .lesson-header [data-action="exit-lesson"] {
    flex: none;
    min-height: 32px;
    padding: 0 10px;
    font-size: var(--fs-micro);
  }

  #view-lessons .lessons-player .lesson-header-title {
    flex: 0 1 auto;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-lessons .lessons-player .lesson-header-progress {
    margin-left: auto;
    font: 700 var(--fs-meta) var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* ⚠️ Pasek krokow jest WYJETY Z PRZEPLYWU i doklejony do dolnej krawedzi
     pasa nad plansza. Gdyby zostal w kolumnie `.board-stack`, dokladalby
     6 px paska i 8 px odstepu, wiec plansza stalaby 14 px nizej niz
     w Zadaniu i kotwica ukladu (D-10) przestalaby byc prawda.
     `scaleX()` ustawia JavaScript przez CSSOM (`el.style.transform`), co
     dziala pod `style-src 'self'`; blokowany jest wylacznie ATRYBUT `style`. */
  #view-lessons .lessons-player .lesson-steps {
    position: absolute;
    top: calc(var(--board-head) - 4px);
    right: 1px;
    left: 1px;
    z-index: 2;
    height: 3px;
    margin: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* ---- pasek akcji pod plansza ----
     Jeden pas na szerokosc planszy, wszystkie akcje drugorzedne. Zielen na
     tym ekranie nalezy do „Dalej" w kolumnie kontekstowej i tylko do niego. */
  #view-lessons .board-annotation-bar {
    min-height: 44px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-lg);
  }

  /* ⚠️ „PPM" rozwinelo sie w „Prawy przycisk myszy" (zargon na ekranie dla
     poczatkujacych), a dluzszy napis zaczal sie lamac na dwa wiersze i rozpychal
     pas z 44 na 56 px. Podpowiedz nie moze zmieniac wysokosci pasa, wiec jest
     w jednym wierszu i ustepuje miejsca, gdy go nie ma. */
  #view-lessons .board-annotation-bar__hint { white-space: nowrap; }

  /* ======================================================================
   * 4. KOLUMNA KONTEKSTOWA LEKCJI (340 px)
   * ======================================================================
   * Karty od gory kolumny, dokladnie jak „Polecenie / Postep sesji / Motyw"
   * w Zadaniu: wyjasnienie kroku (z odpowiedziami quizu), trener, podpowiedz
   * i jedna akcja pierwszoplanowa.
   *
   * `position: static`: lepkie `top: 78px` z powloki spychaloby kolumne
   * ponizej pasa konspektu (element lepki, ktory nie doszedl jeszcze do
   * swojego `top`, jest przez nie PRZESUWANY W DOL). Ekran sesji miesci sie
   * w jednym kadrze, wiec lepkosc nie ma tu czego trzymac.
   */
  #view-lessons .lekcja-ctx {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: static;
    /* ⚠️ Kolumna siega dolu KOLUMNY PLANSZY, a nie konca swojej tresci.
       Do 03.09.2026 konczyla sie na y=425 przy planszy siegajacej y=852
       i zostawiala 427 px pustki (audyt, znalezisko 12).
       `stretch` zamiast `start` i zamiast wlasnej wysokosci: obszar `ctx`
       obejmuje wiersze `plan` i `board`, wiec rozciagniecie daje DOKLADNIE
       wysokosc kolumny planszy na kazdej szerokosci i przy kazdym progu
       ukladu, bez przepisywania geometrii powloki do tego pliku. */
    align-self: stretch;
  }

  #view-lessons .lekcja-ctx > .side-panel {
    position: static;
    gap: var(--sp-3);
  }

  #view-lessons .lekcja-ctx .lesson-content-card {
    margin: 0;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
  }

  /* ⚠️ `!important` odpowiada na `!important` z css/lessons.css (kicker byl
     tam zielony na sztywno). Etykiety kart w calej powloce v3 sa w Geist Mono
     wersalikami i w --text-dim; zielen zostaje dla postepu i jednej akcji. */
  #view-lessons .lekcja-ctx .lesson-content-card__kicker {
    margin: 0 0 6px !important;
    color: var(--text-dim) !important;
    font: 700 var(--fs-label) var(--font-mono) !important;
    letter-spacing: var(--ls-label);
  }

  #view-lessons .lekcja-ctx .lesson-content-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
  }

  #view-lessons .lekcja-ctx .quiz-choices { margin-top: var(--sp-3); }
  #view-lessons .lekcja-ctx .quiz-choice { border-radius: var(--radius); }

  /* ---- trener ----
     Karta stracila 132 px minimalnej wysokosci i zielona kreske pod spodem
     (inset box-shadow w kolorze spoza tokenow). Zostaje etykieta, zdanie
     o zadaniu kroku i miejsce na komunikat zwrotny. */
  #view-lessons .lekcja-ctx .lesson-coach-head {
    min-height: 0;
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
    box-shadow: none;
  }

  #view-lessons .lekcja-ctx .lesson-coach-head__icon {
    float: none;
    margin: 0 var(--sp-2) 0 0;
    font-size: 22px;
    vertical-align: -3px;
  }

  #view-lessons .lekcja-ctx .lesson-coach-head small {
    display: inline;
    font: 700 var(--fs-label) var(--font-mono);
    letter-spacing: var(--ls-label);
    opacity: 1;
  }

  #view-lessons .lekcja-ctx .lesson-coach-head strong {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
  }

  #view-lessons .lekcja-ctx .lesson-coach-head .lesson-feedback { margin-top: 10px; }

  #view-lessons .lekcja-ctx .hint-ladder {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
  }

  /* ---- jedna akcja pierwszoplanowa (K3) ----
     „Dalej" jest jedynym zielonym przyciskiem kadru: w kroku tekstowym nie ma
     na planszy zadnego ruchu do zrobienia, wiec to ON jest akcja ekranu.
     Rzad odzyskuje ramke karty, bo panel przestal byc sklejonym slupkiem. */
  #view-lessons .lekcja-ctx .side-panel > .controls-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
  }

  #view-lessons .lekcja-ctx .side-panel > .controls-row .btn { min-height: 44px; }
  #view-lessons .lekcja-ctx .side-panel > .controls-row [data-action="next-step"] { font-weight: 700; }

  #view-lessons .lekcja-ctx .lesson-playout-offer,
  #view-lessons .lekcja-ctx .lesson-playout-card { border-radius: var(--radius-lg); }

  /* ---- karta „W tym rozdziale" ----
     Ostatnia karta kolumny ROSNIE do dolu planszy, a jej lista przewija sie
     lokalnie: ten sam uklad, co „Linie repertuaru" w Debiutach, ktore audyt
     wskazal jako jedyna kolumne kontekstowa wypelniajaca pelna wysokosc. */
  #view-lessons .lekcja-plan {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  #view-lessons .lekcja-plan__kicker {
    margin: 0;
    color: var(--text-dim);
    font: 700 var(--fs-label) var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  #view-lessons .lekcja-plan__title {
    margin: 5px 0 var(--sp-3);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  #view-lessons .lekcja-plan__list {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden auto;
    overscroll-behavior: contain;
    /* Sygnal przewijania: wiersze pod krawedzia gasna. Gdy lista sie miesci,
       pod nia nie ma czego wygaszac, wiec maska jest niewidoczna. */
    mask-image: linear-gradient(to bottom, black 0 calc(100% - 14px), transparent 100%);
  }

  #view-lessons .lekcja-plan__row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    padding: 4px 0;
    color: var(--text-dim);
    font-size: var(--fs-meta);
    line-height: 1.35;
  }

  /* Stan bez koloru: ptaszek, kropka pelna, kropka pusta. */
  #view-lessons .lekcja-plan__mark {
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
  }

  #view-lessons .lekcja-plan__row.is-done { color: var(--text); }
  #view-lessons .lekcja-plan__row.is-done .lekcja-plan__mark { color: var(--crown); }

  #view-lessons .lekcja-plan__row.is-current {
    color: var(--text);
    font-weight: 650;
  }
  #view-lessons .lekcja-plan__row.is-current .lekcja-plan__mark { color: var(--accent); }

  /* Stopka na czas lekcji: stan sesji w css/layout.css (D-F1-07). */

  /* ======================================================================
   * 5. EKRAN UKONCZENIA LEKCJI
   * ======================================================================
   * Slownik karty wyniku Zadania: znak zdarzenia, etykieta w Geist Mono,
   * wiersze statystyk na --bg-sunken z liczbami w Geist Mono i JEDNA zielona
   * akcja. Karta stoi na srodku kadru, bo odtwarzacz jest w tym momencie
   * schowany i planszy do zaslonienia nie ma.
   */
  #view-lessons.is-active:has(> [data-role="lesson-session-result"]:not([hidden])) {
    display: grid;
    align-content: center;
    min-height: calc(100dvh - 104px);
  }

  #view-lessons .lesson-session-result {
    max-width: 520px;
    margin: 0 auto;
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
  }

  #view-lessons .lesson-session-result.is-path { max-width: 620px; min-height: 0; }

  #view-lessons .lesson-result__kicker {
    font: 700 var(--fs-label) var(--font-mono);
    letter-spacing: var(--ls-label);
  }

  #view-lessons .lesson-session-result h2 { font-size: 24px; letter-spacing: -.02em; }

  #view-lessons .lesson-result__stats { gap: var(--sp-2); margin-bottom: var(--sp-4); }

  #view-lessons .lesson-result__stat {
    align-items: baseline;
    min-height: 42px;
    padding: 10px var(--sp-4);
    border-radius: var(--radius);
  }

  #view-lessons .lesson-result__stat dt { font-size: var(--fs-meta); }
  #view-lessons .lesson-result__stat dd { font: 700 var(--fs-meta) var(--font-mono); font-variant-numeric: tabular-nums; }

  #view-lessons .lesson-session-result .controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
  }

  #view-lessons .lesson-session-result .btn { min-height: 46px; }
  #view-lessons .lesson-session-result .btn-primary { flex: 1 1 240px; font-weight: 700; }
}

/* Pasmo posrednie (900-1179 px) ma wezsza kolumne kontekstowa (--ctx-w:
   300 px z app-desktop.css), wiec scena drogi musi byc nizsza, inaczej
   naglowek drogi rosnie bardziej niz pierwszy rozdzial listy obok niego. */
@media (min-width: 900px) and (max-width: 1179px) {
  #view-lessons .nauka-road__scene { height: 96px; }

  /* Plansza ma tu ~505 px, wiec pas pod nia nie miesci juz podpowiedzi obok
     czterech kontrolek. Ustepuje ona, a nie wysokosc pasa: prawy przycisk
     dziala tak samo bez napisu, a rozjechany pas widac zawsze. Ponizej
     900 px napis jest schowany od dawna (css/lessons.css). */
  #view-lessons .board-annotation-bar__hint { display: none; }
}

/* ---- korona znika tam, gdzie powtarza szyne (od 1180 px) ----
 *
 * ⚠️ Przycisk „Wiecej" wisial sam w prawym gornym rogu i nie mowil, co
 * otwiera (audyt, znalezisko dotyczace naglowka Nauki). Otwiera zakres
 * rozszerzony: Debiuty, Biblioteke wiedzy, Galerie mistrzow, Os czasu
 * i Rywalizacje. Od 1180 px szyna nawigacji jest ROZWINIETA i pokazuje
 * DOKLADNIE te piec pozycji pod „Nauka" (css/rail.css, `.rail__sub`), wiec
 * korona jest tam trzecia kopia tej samej listy. Ponizej 1180 px szyna
 * zwija sie do ikon, a telefon nie ma jej wcale — tam korona zostaje
 * i nazywa sie pelnym zdaniem „Wiecej w Nauce".
 *
 * Panel `.nauka-extras` nie znika: jesli ktos otworzyl go przy weszym oknie
 * i rozszerzyl przegladarke, lista zostaje na ekranie zamiast gasnac.
 */
@media (min-width: 1180px) {
  #view-lessons .nauka-crown { display: none; }
}

/* ⚠️ Konspekt jako czwarta kolumna dopiero od 1600 px (pomiar w komentarzu
   sekcji 3). Powloka wlacza ten uklad od 1401 px, wiec pasmo 1401-1599 px
   trzeba jej odebrac; identyfikator widoku daje przewage nad
   `.play-layout.play-layout:has(> .lesson-outline)` bez `!important`. */
@media (min-width: 1401px) and (max-width: 1599px) {
  #view-lessons .lessons-player.play-layout {
    grid-template-columns: minmax(0, 1fr) var(--ctx-w);
    grid-template-areas:
      "plan  ctx"
      "board ctx"
      "rysuj ctx";
  }
}

@media (min-width: 1600px) {
  #view-lessons .lessons-player.play-layout {
    grid-template-columns: minmax(200px, 232px) minmax(0, 1fr) var(--ctx-w);
    /* Obszar „rysuj" (pas adnotacji, D-F2-04) MUSI istniec w kazdym
       szablonie: bez niego pas trafial do niejawnej kolumny i zabieral
       kolumnie planszy cala szerokosc (plansza 0 px przy 1920 px). */
    grid-template-areas:
      "plan board ctx"
      "plan rysuj ctx";
    gap: var(--sp-5);
  }

  /* Konspekt wraca do postaci kolumny: karta z etykieta i pionowa lista
     krokow, ktora jedzie z uczacym sie przy przewijaniu. */
  #view-lessons .lessons-player .lesson-outline {
    display: block;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 120px);
    overflow: hidden auto;
    position: sticky;
    top: 52px;
  }

  #view-lessons .lesson-outline__head {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  #view-lessons .lesson-outline__head strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
  }

  #view-lessons .lesson-outline__list { display: block; overflow: visible; }

  #view-lessons .lesson-outline__step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--sp-2);
    max-width: none;
    min-height: 40px;
    padding: 7px var(--sp-4);
    border-top: 1px solid var(--border);
    border-left: 0;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-lessons .nauka-chapter:active { transform: none; }
  .nauka-road__pin { transition: none; }
}