/* Kurs — CSS wlasne tego typu.
 *
 * Wyodrezone z bloku <style>, ktory byl BAIIT W BAIT identyczny
 * we wszystkich 21 czesciach kursu (122240 B = 21 x 5820 B). Jedna
 * tresc powielona 21 razy — teraz jest raz.
 *
 * Szablon kursu laduje artykul.css, a potem ten plik. Kolejnosc
 * ma znaczenie: pozniejszy plik bije wczesniejszy przy tej samej
 * specyfikacji, wiec regulacje kursu musza byc po wspolnych.
 *
 * Co tu jest, a czego nie ma:
 *   - regulacje kursu: gesty uklad, mniejsze naglowki, czcionka
 *     Consolas dla <code>, plakietka odznaki, znacznik "tyk" w celach,
 *     karty cwiczen (ex-*, exlist), pasek postepu (prog), okruszki,
 *     nawigacja (nav), spis czesci (grid, card).
 *   - regulacje, ktore artykul.css ma IDENTYCZNIE: 7 (selektorow) —
 *     celowo ich nie powtarzamy, inaczej poprawka w jednym pliku
 *     rozjezdza sie z drugim.
 *
 * Kurs przejmuje wspolne reguly z materialow, ale zachowuje wlasna
 * skale: to czytelna konsultacja, nie dlugi artykul. Naglowki sa
 * mniejsze, a strona nizej niz w artykule.
 */

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

body { margin: 0; color: var(--ink); background: linear-gradient(180deg,#f8f7ff 0,#f4f5fa 420px); font: 16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

.page { width: min(1000px,calc(100% - 32px)); margin: 0 auto; padding: 22px 0 60px; }

.draft-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--muted); font-size: 12px; }

.draft-badge { display: inline-flex; align-items: center; 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; }

.home-button { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; color: var(--purple-dark); border: 1px solid #d8d1f5; border-radius: 9px; background: var(--purple-soft); font-size: 11px; font-weight: 800; text-decoration: none; }

h1,h2,h3 { font-family: Georgia,"Times New Roman",serif; font-weight: 500; letter-spacing: -.03em; line-height: 1.18; }

h1 { margin: 10px 0 10px; font-size: clamp(28px,4.4vw,42px); max-width: none; }

h2 { margin: 0 0 12px; font-size: clamp(21px,3vw,28px); }

h3 { margin: 0 0 8px; font-size: 16px; }

section-kicker,.kicker { margin: 0; color: var(--purple); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

.lead { max-width: 820px; margin: 0; color: var(--muted); font-size: 16px; }

.card { padding: clamp(18px,3vw,26px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }

.goals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }

.goals li { padding: 10px 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: var(--soft); font-size: 13.5px; }

.goals li:before { margin-right: 8px; color: var(--green); content: "✓"; font-weight: 900; }

.note,.tip,.warning,.exam { margin: 18px 0; padding: 13px 15px; border-radius: 12px; font-size: 13.5px; }

.exam { color: #8a5c14; border: 1px solid #f0dcb4; background: var(--amber-soft); }

.note > strong:first-child,.tip > strong:first-child,.warning > strong:first-child,.exam > strong:first-child { display: block; margin-bottom: 3px; }

/* Regula "pre" i barwy tokenow .tok-* siedza w artykul.css. Kurs
   dziedziczy je z bazy — jedna poprawka dziala w kursie, w Analizie
   arkuszy i w kazdym artykule. Wlasna kopia w tym pliku mnozyyla sie
   z bazowa: kazda musiala byc aktualizowana osobno, a juz się rozjechaly
   (kurs miał tlo, artykul nie, przez co Analiza pokazywala bialy tekst
   na jasnym tle). */

code { font-family: Consolas,monospace; }

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

/* Gdyby skrypt kolorujacy nie wczytal biblioteki, blok zostaje zwyklym
   tekstem — a nie pusty. Stąd nic więcej nie trzeba: podświetlanie
   dodaje kolor, nie jest źródłem treści. */

.exlist { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }

.exlist a { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); text-decoration: none; }

.exlist a:hover { border-color: #cfc5f5; background: var(--purple-soft); }

.ex-num { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; border-radius: 7px; background: var(--purple); font-size: 11px; font-weight: 850; }

.ex-text b { display: block; color: var(--ink); font-size: 13.5px; }

.ex-text span { color: var(--muted); font-size: 12.5px; }

.ex-go { color: var(--purple); font-size: 12px; font-weight: 800; white-space: nowrap; }

.exlist li.done .ex-num { background: var(--green); }

.exlist li.done .ex-go { color: var(--green); }

.nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.nav a { display: block; flex: 1 1 200px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 13px; font-weight: 800; text-decoration: none; }

.nav a:hover { color: var(--purple); border-color: #cfc5f5; background: var(--purple-soft); }

.nav a span { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 12px; }

.prog { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.prog span { padding: 5px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 11.5px; font-weight: 700; }

.prog span.ok { color: var(--green); border-color: #bde3d1; background: var(--green-soft); }

/* Wiersz resetu postępu: bez „pigułki" — przycisk obok krótkiego tekstu. */
.prog span.prog-reset { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; background: none; font-weight: 400; }
.prog span.prog-reset .button { font-size: 11.5px; padding: 5px 10px; }

.footer { margin-top: 22px; color: var(--muted); text-align: center; font-size: 11px; }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: 12px; }

.crumb a { text-decoration: none; }

.crumb a:hover { text-decoration: underline; }

@media(max-width:560px){.page{width:calc(100% - 20px);padding-top:12px}.draft-bar{align-items:flex-start;flex-direction:column}.exlist a{grid-template-columns:26px minmax(0,1fr)}.ex-go{grid-column:2}}

/* Dwa przyciski powrotu na gornej belce kursu.
 *
 * Obecne sa w jednym kontenerze, bo .draft-bar ma
 * justify-content: space-between. Przy dwoch oddzielnych <a> jako
 * dzieci belki liczylaby sie piec slotow zamiast czterech i odznaka
 * z opisem przesunelyby sie na prawo. Kontener zajmuje jeden slot,
 * wiec uklad jest taki sam jak w artykule.
 *
 * Kolejnosc w srodku kontenera jest wymogiem, nie zwyczajem: powrot do
 * spisu kursu pierwszy z lewej, powrot na pulpit obok niego. Czytelnik
 * kursu klika lewa strone reflexyjnie, a pulpit jest o dwa poziomy
 * wyzej w drzewie, wiec przypadkowe trafienie wyrzuca go z kursu.
 *
 * .home-button--spis ma wlasny kolor przewodzenia, zeby dwa wyjscia na
 * belce nie wygladaly jak dwa identyczne guziki. */
.powroty { display: flex; align-items: center; gap: 8px; }

.home-button--spis { color: var(--green); border-color: #bde3d1; background: var(--green-soft); }

.home-button--spis:hover { color: #fff; border-color: var(--green); background: var(--green); }

/* ==================================================================
 * Postep kursu: niskie prostokaty, jeden na czesc.
 *
 * Wymaganie wlasciciela: male prostokaty, ktore stoja ZA informacja
 * o czesci ("Czesc 07 z 20") i konca sie wraz z kolumna tresci
 * ponizej. Stad:
 *   * wysokosc 8 px — cienki pasek, nie kafelek,
 *   * bez numerow w srodku; numer zostaje w title i aria-label,
 *     wiec czytelnik ekranu nadal wie, ktora to czesc, a mysz
 *     pokazuje tytul,
 *   * flex:1 wewnatrz .crumb — zajmuje tylko szerokosc, jaka
 *     zostanie po tekscie. Nie rozciaga sie na cala strone
 *     i nie zajmuje osobnego wiersza,
 *   * kazda czesc ma jeden prostokat, wiec 20 prostokatow = 20 czesci
 *     z cwiczeniami, a kurs ma 21 pozycji (projekt bez cwiczen).
 *
 * Kolor niesie trzy informacje naraz:
 *   jasnoszary — nie zaczeta (0 rozwiazanych)
 *   fioletowy   — w trakcie (1-2 z 3)
 *   zielony     — ukonczona (wszystkie)
 *
 * Bez JavaScriptu prostokaty sa widoczne i puste — nie udaja
 * zaliczonego postepu, ktorego przegladarka nie ma.
 *
 * UWAGA: te regula sa CZESCIA GENERATORA, nie dopisek. Wczesniej byly
 * doklejone osobnym skryptem, a pozniejsze uruchomienie generatora
 * skasowalo je i pasek zniknal — kafelki zostaly w HTML, ale bez CSS
 * mialy wymiary 0x0 i nie byly widoczne. Nie wracamy do dopisywania.
 * ================================================================== */
.postep-kursu { display: inline-flex; flex: 1 1 auto; gap: 2px; min-width: 60px; height: 24px; vertical-align: middle; }

/* Obszar klikalny ma 24 px (WCAG 2.2 „target size"), a sam pasek zostaje
   cienki: rysuje go ::before wysrodkowany w pionie. Wczesniej <a> mialo
   8 px wysokosci, wiec na dotyku trudno bylo w nie trafic. */
.postep-kafelek { position: relative; flex: 1 1 0; min-width: 0; height: 24px; display: block; }

.postep-kafelek::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--soft); }

.postep-kafelek:hover::before { border-color: var(--purple); background: var(--purple-soft); }

/* .postep-kafelek.zrobiony ma wyzsza specyfikacje niz :hover, wiec
   najechanie nie odbarwia ukonczonej czesci. */
.postep-kafelek.zrobiony::before { border-color: var(--green); background: var(--green); }

/* Czesc w trakcie. Jasny fiolet na tle strony jest za bliski zieleni
   ukonczonych — na zrzucie oba wygladaly jak "zaliczona". Stad
   nasycony fiolet zamiast bladego tla: trzy stany roznia sie teraz
   nie tylko odcieniem, ale i jasnoscia. */
.postep-kafelek.w-toku::before { border-color: var(--purple); background: var(--purple); }

/* Czesc, na ktorej jestem. W tym rozmiarze kolor odwrocony bylby
   niewidoczny, wiec obwódka: ciemna ramka na zewnatrz. */
.postep-kafelek.tutaj::before { box-shadow: 0 0 0 2px var(--purple); }

/* Projekt koncowy: prostokat pusty, w ramce — nie ma czego zaliczyc,
   ale nie znika, bo czeka. */
.postep-kafelek[data-kafelek]::before { border-style: dashed; }

/* Punkt kontrolny: 100% poprawnych odpowiedzi swieci na POMARANCZOWO.
   Inny kolor niz zielona ukonczona czesc kursu — punkt kontrolny nie jest
   czescia materialu, tylko diagnostyka przed dalsza nauka. */
.postep-kafelek.zrobiony-kontrolny::before { border-color: var(--orange); background: var(--orange); }

/* Bardzo waski ekran: 20 prostokatow po 2 px juz sie nie roznio.
   Chowamy pasek i zostaje tekst — lepsze niz 20 nierozpoznawalnych
   kresek. Tytul poszczegolnych czesci jest w dolnym pasku przyciskow. */
@media (max-width: 420px) {
    .postep-kursu { display: none; }
}

/* Podpisy rysunkow („Rysunek: ...”) w kursach fizyki. Arkusz ustawia
   h2 { margin: 0 0 12px }, wiec bez tego podpis zlewal sie z akapitem
   powyzej i trudno bylo go wychwycic wzrokiem. */
.rysunek { margin: 30px 0 14px; }

/* Rozwijalna odpowiedz ("Sprawdz odpowiedz") — element tresci, bez JS. */
details.rozwijalne { margin:16px 0; border:1px solid var(--line); border-radius:10px;
  background:var(--soft); padding:0 16px; }
details.rozwijalne > summary { cursor:pointer; padding:11px 0; font-weight:700;
  color:var(--purple); list-style:none; }
details.rozwijalne > summary::-webkit-details-marker { display:none; }
details.rozwijalne > summary::before { content:'▸'; display:inline-block; width:18px; }
details.rozwijalne[open] > summary::before { content:'▾'; }
details.rozwijalne[open] { padding-bottom:14px; }
details.rozwijalne > p:first-of-type { margin-top:6px; }

/* --- Wyróżnione bloki: wzory i rozwiązany przykład ---
   W kursach matematyki wzory były zwykłym akapitem w divie, więc ginęły
   w treści. Blok ma teraz własny kolor, ramkę i etykietę, a przykład
   rozwiązany — numerowane kroki i wyróżnioną odpowiedź. */

.formula{
  margin: 26px 0;
  padding: 18px 20px 16px;
  border: 1px solid #c9dcf4;
  border-left: 7px solid #2563eb;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6faff 0%, #ebf4ff 100%);
  box-shadow: 0 8px 22px rgba(23, 52, 93, .07);
}
.formula > strong{
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.formula > strong::before{ content: "∑ "; }
.formula p{
  margin: 0;
  font-size: 1.1em;
  line-height: 1.65;
  font-weight: 600;
  color: #10294a;
}

.przyklad{
  margin: 26px 0;
  padding: 18px 20px 16px;
  border: 1px solid #e0d2f7;
  border-left: 7px solid #7c3aed;
  border-radius: 14px;
  background: #faf7ff;
}
.przyklad > strong{
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.przyklad-tresc{
  margin: 0 0 10px;
  font-size: 1.02em;
  font-weight: 600;
  color: #1c2340;
}
.przyklad-kroki{
  margin: 0 0 12px 22px;
  padding: 0;
  font-size: .98em;
  line-height: 1.6;
}
.przyklad-kroki li{ margin: 5px 0; }
.przyklad-odp{
  margin: 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: #efe7ff;
  color: #2b1a52;
  font-weight: 600;
}

:root[data-motyw="ciemny"] .formula{
  border-color: #21456a;
  border-left-color: #5aa9ff;
  background: linear-gradient(180deg, #101c29 0%, #0d1722 100%);
  box-shadow: none;
}
:root[data-motyw="ciemny"] .formula > strong{ background: #5aa9ff; color: #07121d; }
:root[data-motyw="ciemny"] .formula p{ color: #d7e7f8; }

:root[data-motyw="ciemny"] .przyklad{
  border-color: #3a2a58;
  border-left-color: #a78bfa;
  background: #151021;
}
:root[data-motyw="ciemny"] .przyklad > strong{ background: #a78bfa; color: #150c26; }
:root[data-motyw="ciemny"] .przyklad-tresc{ color: #e2d9f7; }
:root[data-motyw="ciemny"] .przyklad-kroki{ color: #cfc6e6; }
:root[data-motyw="ciemny"] .przyklad-odp{ background: #241a3a; color: #e7ddff; }

/* Rysunki w trybie ciemnym: etykiety w SVG mają stałe ciemne kolory, więc
   rysunek dostaje jasną tablicę. Bez tego podpisy (a, b, h, kąty) zlewały
   się z ciemnym tłem karty. */
:root[data-motyw="ciemny"] .rysunek svg{
  background:#f2f7fd;
  border-radius:14px;
  padding:10px;
  box-sizing:border-box;
}

/* Widoczny fokus klawiatury — domyślna obwódka w ciemnym motywie ginęła. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
}

/* Okno z rysunkiem modułu — dostęp z każdej sekcji. */
.rysunek-okno {
  width: min(92vw, 900px);
  max-height: 90vh;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}
.rysunek-okno::backdrop { background: rgba(10, 12, 24, .55); }
.rysunek-okno-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rysunek-okno-tresc svg {
  width: 100%;
  height: auto;
  display: block;
  background: #f2f7fd;
  border-radius: 12px;
}
.rysunek-okno-opis { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.rysunek-plywak {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(23, 52, 93, .18);
}
:root[data-motyw="ciemny"] .rysunek-okno-tresc svg { background: #f2f7fd; }

/* Zapis klamrowy układu równań — jak w arkuszu maturalnym. */
.uklad-rownan {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: .7em;
  margin: 0 .15em;
  vertical-align: middle;
}
.uklad-rownan::before {
  content: "{";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-53%);
  font-size: 2.3em;
  font-weight: 300;
  font-family: Cambria, "Times New Roman", serif;
  line-height: 1;
  color: var(--ink);
}
.uklad-wiersze {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  line-height: 1.35;
}

:root[data-motyw="ciemny"] .rysunek-okno {
  background: #1e1c30;
  color: #ece9f7;
}

/* Miniatura rysunku pod spisem treści — szerokość menu, przewija się z nim. */
.toc-rysunek {
  margin: 16px 0 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f2f7fd;
  cursor: zoom-in;
}
.toc-rysunek svg { width: 100%; height: auto; display: block; }
.toc-rysunek figcaption {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.3;
  color: #4a5568;
  text-align: center;
}
.toc-rysunek:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }

/* Pływający przycisk tylko na wąskich ekranach (desktop ma miniaturę). */
.rysunek-plywak { display: none; }
@media (max-width: 860px) {
  .rysunek-plywak { display: block; }
}
.rysunek-plywak-zawsze { display: block !important; }

/* Ikona P przy tytule modułu — skrót do prezentacji dla nauczyciela. */
.prez-p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.prez-p-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--purple);
    color: #fff;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
}
.prez-p-link:hover { background: var(--purple-dark); }