/* ================== fonty z wlasnego serwera =====================
   Google Fonts przekazuje adres IP odwiedzajacego do Google, co w
   swietle RODO wymaga zgody. Pliki na wlasnym serwerze rozwiazuja
   problem i sa szybsze - brak dodatkowego polaczenia do obcej domeny.

   Wymagane pliki w /assets/fonts/ - instrukcja pobrania w README.
   Dopoki ich nie ma, szablon sam wraca do Google Fonts. */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: italic; font-weight: 600;
  font-display: swap; src: url('/assets/fonts/montserrat-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2');
}

/* ===============================================================
   Liczbowo - arkusz glowny

   Arkusz ma dwie warstwy zmiennych i to jest celowe:

   WARSTWA 1 - PALETA. Surowe kolory marki. Jedyne miejsce w calym
   projekcie, gdzie wystepuja wartosci HEX.

   WARSTWA 2 - ROLE. Do czego dany kolor sluzy. Komponenty ponizej
   odwoluja sie WYLACZNIE do ról, nigdy do nazw kolorow.

   Po co: paleta nie jest jeszcze zamrozona. Gdyby komponenty
   uzywaly --teal, to po zmianie odcienia na inny nazwa klamalaby
   i nikt by nie wiedzial, co gdzie siedzi. Przy tym podziale zmiana
   marki to podmiana warstwy 1 i nic wiecej.

   ZASADA: nie dodawaj var(--c-navy) ani innej nazwy koloru do
   komponentu. Jesli brakuje roli - dopisz ja w warstwie 2.
   =============================================================== */

:root {
  /* ---------- WARSTWA 1: paleta (miniściąga v1.0, robocza) ---------- */
  --c-navy:        #061C3D;
  --c-teal:        #1D9E75;
  --c-dark-teal:   #0F7661;
  --c-mint:        #E1F5EE;
  --c-mint-mocny:  #9FE1CB;
  --c-violet:      #6C63D9;
  --c-lime:        #C7E63A;
  --c-warm-sand:   #FAEEDA;
  --c-warm-accent: #A15C10;
  --c-tekst:       #2F2F2F;
  --c-tekst-2:     #555555;
  --c-tlo:         #F7F7F5;
  --c-bialy:       #FFFFFF;
  --c-linia:       #DDDDDD;
  --c-soft-line:   #DCEEE8;
  --c-stopka:      #C9D4E2;
  --c-link-hover:  #0A5947;
  --c-blad:        #B3261E;

  /* ---------- WARSTWA 2: role ---------- */

  /* tekst i tla */
  --tekst:            var(--c-tekst);
  --tekst-drugi:      var(--c-tekst-2);
  --naglowek:         var(--c-navy);
  --tlo-strony:       var(--c-tlo);
  --powierzchnia:     var(--c-bialy);      /* karty, paski, artykul */
  --tlo-ciemne:       var(--c-navy);       /* stopka, skip link */
  --tekst-na-ciemnym: var(--c-bialy);
  --tekst-stopki:     var(--c-stopka);

  /* interakcja
     UWAGA: --akcent ma kontrast 3,4:1 na bieli i NIE nadaje sie na tekst.
     Do tekstu w kolorze akcentu sluzy --akcent-tekst (5,6:1). */
  --link:          var(--c-dark-teal);
  --link-hover:    var(--c-link-hover);
  --akcent:        var(--c-teal);          /* wypelnienia, obrysy, ikony */
  --akcent-tekst:  var(--c-dark-teal);     /* tekst w kolorze akcentu */
  --tlo-akcentu:   var(--c-mint);          /* tla ramek, badge, ikony */
  --interaktywne:  var(--c-violet);        /* quizy, kalkulatory */
  --focus:         var(--c-violet);
  --postep:        var(--c-lime);          /* nigdy na tekst: 1,4:1 */

  /* obrysy */
  --obrys:           var(--c-soft-line);
  --obrys-neutralny: var(--c-linia);

  /* ramki edukacyjne */
  --tlo-wskazowki:   var(--c-warm-sand);
  --tekst-wskazowki: var(--c-warm-accent);

  /* kartka daty - kalendarz roku szkolnego */
  --data-tlo:             var(--tlo-akcentu);
  --data-dzien-kolor:     var(--akcent-tekst);
  --data-miesiac-kolor:   var(--tekst-drugi);
  --data-dzien-rozmiar:   1.9rem;
  --data-miesiac-rozmiar: 0.72rem;

  /* poziomy trudnosci - wskaznik z kafli logo */
  --poziom-1: var(--c-teal);
  --poziom-2: var(--c-dark-teal);
  --poziom-3: var(--c-navy);

  /* stany systemowe
     Czerwien NIE wystepuje przy bledach ucznia - to decyzja
     pedagogiczna. Ta zmienna dotyczy wylacznie walidacji formularzy. */
  --blad-systemu: var(--c-blad);

  /* poswiaty - liczone z rol, zeby szly za zmiana palety */
  --poswiata-akcentu: color-mix(in srgb, var(--akcent) 15%, transparent);
  --linia-na-ciemnym: color-mix(in srgb, var(--tekst-na-ciemnym) 15%, transparent);

  /* ---------- typografia i wymiary ---------- */
  --font-naglowki: 'Montserrat', system-ui, sans-serif;
  --font-tresc:    'Inter', system-ui, sans-serif;

  --tresc-max: 720px;
  --artykul-pad: 2.5rem;   /* wewnetrzny margines karty artykulu */
  --panel-szer: 280px;     /* panel boczny z lista tematow dzialu */
  --strona-max: 1180px;
  --promien: 12px;
  --promien-s: 8px;

  --skala-h1: 2.25rem;
  --skala-h2: 1.5rem;
  --skala-h3: 1.15rem;
  --skala-tresc: 1.0625rem;
  --gestosc: 1.7;
}

/* Motyw klas 4-8. Kolejny poziom = kolejna klasa tutaj i nic wiecej. */
.motyw-sp48 { --akcent-dzialu: var(--akcent); }

/* Przygotowane pod przyszlosc, na razie nieuzywane:
.motyw-sp13   { --akcent-dzialu: var(--postep);   --skala-h1: 2.75rem; --skala-tresc: 1.1875rem; --gestosc: 1.85; --promien: 20px; }
.motyw-srednia{ --akcent-dzialu: var(--naglowek);   --skala-h1: 1.875rem; --skala-tresc: 1rem;     --gestosc: 1.6; }
*/

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo-strony);
  color: var(--tekst);
  font-family: var(--font-tresc);
  font-size: var(--skala-tresc);
  line-height: var(--gestosc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-naglowki);
  color: var(--naglowek);
  line-height: 1.25;
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
}
h1 { font-size: var(--skala-h1); margin-top: 0; letter-spacing: -0.02em; }
h2 { font-size: var(--skala-h2); }
h3 { font-size: var(--skala-h3); }

p, ul, ol { margin: 0 0 1.15rem; }
/* Domyslne <strong> to waga 700. Pobieramy Inter tylko do 600,
   a 600 w dlugim tekscie i tak czyta sie lepiej niz 700. */
strong, b { font-weight: 600; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

img, svg { max-width: 100%; height: auto; }

.pomin-do-tresci {
  position: absolute; left: -9999px;
  background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--promien-s) 0; z-index: 100;
}
.pomin-do-tresci:focus { left: 0; top: 0; }

.srodek { max-width: var(--strona-max); margin: 0 auto; padding: 0 1.25rem; }
.waska  { max-width: var(--tresc-max); }

/* --------------------------- naglowek --------------------------- */

/* Pasek dzielony: biala czesc z logo, granatowa z nawigacja, a miedzy
   nimi ukosne ciecie. Kreska pod logo podnosi sie i przechodzi w plaszczyzne.
   Ten sam ukos co w narożnikach kart - jeden motyw, dwa zastosowania. */
.pasek {
  background: var(--powierzchnia);
  border-bottom: 1px solid var(--obrys);
  position: sticky; top: 0; z-index: 50;
  /* ile brakuje od krawedzi kontenera do krawedzi ekranu */
  --wyciek: calc((100vw - min(100vw, var(--strona-max))) / 2 + 1.25rem);
}
.pasek__wnetrze {
  display: flex; align-items: stretch; gap: 1.25rem;
  min-height: 76px;
}
.znak {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex-shrink: 0; align-self: center;
  white-space: nowrap;
}
.znak img { width: 40px; height: 40px; flex-shrink: 0; }
.znak__nazwa {
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.45rem;
  color: var(--naglowek); letter-spacing: -0.02em; line-height: 1.1;
  display: block; white-space: nowrap;
}
.znak__opis {
  font-family: var(--font-naglowki);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--akcent-tekst); font-weight: 600; display: block; margin-top: 2px;
  white-space: nowrap;
}

/* Granatowa plaszczyzna wychodzi poza kontener az do krawedzi ekranu,
   a jej lewa krawedz jest ukosna - stad wrazenie, ze kreska sie podnosi. */
.nawigacja {
  margin-left: auto;
  background: var(--tlo-ciemne);
  display: flex; align-items: center;
  padding-left: 3.75rem;
  padding-right: var(--wyciek);
  margin-right: calc(-1 * var(--wyciek));
  clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);
}
.nawigacja ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nawigacja ul { align-items: center; }
.nawigacja a {
  text-decoration: none; color: var(--tekst-na-ciemnym); font-weight: 500; font-size: 0.95rem;
  padding: 0.4rem 0; border-bottom: 2px solid transparent; opacity: .88;
  white-space: nowrap;
}
.nawigacja a:hover, .nawigacja a[aria-current] {
  color: var(--tekst-na-ciemnym); opacity: 1; border-bottom-color: var(--akcent);
}

.menu-przycisk { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--naglowek); align-self: center; }

@media (max-width: 820px) {
  .menu-przycisk { display: block; margin-left: auto; }
  .nawigacja {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--tlo-ciemne); padding: 0.5rem 1.25rem 1rem;
    margin-right: 0; clip-path: none;
  }
  .nawigacja.otwarte { display: block; }
  .nawigacja ul { flex-direction: column; gap: 0; }
  .nawigacja a { display: block; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,.14); white-space: normal; }
}

/* --------------------------- hero ------------------------------ */
/* Kratka wystepuje TYLKO tutaj. Jako tlo calej strony meczy przy
   dluzszej tresci - to byla trafna uwaga. */

.hero {
  position: relative;
  padding: 6rem 0 5rem;
  min-height: 560px;
  display: flex;
  align-items: center;
  /* Siatka kafelkowana, nie jeden dlugi gradient. repeating-linear-gradient
     liczy caly ciag naraz, wiec przy skalowaniu ekranu innym niz 100%
     bledy zaokraglen kumuluja sie i po prawej stronie linie sa gestsze.
     background-size powtarza jeden kafel, wiec kazdy jest identyczny. */
  background-color: var(--powierzchnia);
  background-image:
    linear-gradient(to right,  var(--obrys) 1px, transparent 1px),
    linear-gradient(to bottom, var(--obrys) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 0;
  border-bottom: 1px solid var(--obrys);
  /* Bez overflow: hidden - obcinaloby rozwinieta liste klas.
     Nic juz nie wystaje poza hero, wiec przycinanie jest zbedne. */
  z-index: 20;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, var(--powierzchnia));
}
.hero__wnetrze { width: 100%; position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }

.hero .nadtytul { text-align: left; margin-bottom: 1rem; }
.hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 700;
  margin: 0 0 1.1rem; max-width: 14ch;
}
.hero h1 em { font-style: normal; color: var(--akcent-tekst); }
.hero__lead { font-size: 1.1rem; color: var(--tekst-drugi); max-width: 44ch; margin: 0 0 2rem; }

.szukajka { max-width: 460px; position: relative; }
.szukajka input {
  width: 100%; font-family: inherit; font-size: 1.0625rem;
  padding: 0.9rem 1.1rem 0.9rem 3rem;
  border: 1px solid var(--obrys); border-radius: 999px;
  background: var(--tlo-strony); color: var(--tekst);
}
.szukajka input:focus { border-color: var(--akcent); outline: none; box-shadow: 0 0 0 4px var(--poswiata-akcentu); }
.szukajka .ikona { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--akcent-tekst); font-size: 20px; pointer-events: none; }
.wyniki {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); overflow: hidden; text-align: left; z-index: 20;
  box-shadow: 0 12px 32px rgba(6,28,61,.10);
}
.wyniki a { display: block; padding: 0.7rem 1rem; text-decoration: none; border-bottom: 1px solid var(--obrys); }
.wyniki a:last-child { border-bottom: 0; }
.wyniki a:hover, .wyniki a.aktywny { background: var(--tlo-akcentu); }
.wyniki .tytul { color: var(--naglowek); font-weight: 500; display: block; }
.wyniki .kontekst { color: var(--tekst-drugi); font-size: 0.85rem; }
.wyniki .pusto { padding: 0.9rem 1rem; color: var(--tekst-drugi); font-size: 0.9rem; }

/* --- sygnatura: rownanie rozwiazujace sie krok po kroku --- */
.rownanie {
  background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym);
  border-radius: var(--promien); padding: 1.75rem 2rem;
  font-family: var(--font-naglowki); box-shadow: 0 18px 40px rgba(6,28,61,.16);
}
.rownanie__nad {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--postep); font-weight: 700; margin: 0 0 1.1rem;
}
.rownanie__kroki { display: grid; gap: 0.65rem; }
.rownanie__krok {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em;
  opacity: 0.22; transition: opacity .45s ease;
}
.rownanie__krok.widoczny { opacity: 1; }
.rownanie__krok.wynik { color: var(--akcent); }
.rownanie__zapis { white-space: nowrap; }
/* Zmienna pochylona - tak jak w kazdym podreczniku. */
.rownanie__zapis i { font-style: italic; }

/* Komentarz opisuje DZIALANIE do wykonania na tej linii, a jego skutek
   widac linijke nizej. Pionowa kreska to zapis znany ze szkolnego zeszytu. */
.rownanie__komentarz {
  font-family: var(--font-tresc); font-size: 0.82rem; font-weight: 400;
  opacity: 0.7; letter-spacing: 0; padding-left: 0.9rem;
  border-left: 1px solid rgba(255,255,255,.28);
}
.rownanie__komentarz--wynik {
  color: var(--akcent); opacity: 1; font-weight: 500;
  border-left-color: color-mix(in srgb, var(--akcent) 45%, transparent);
}

@media (max-width: 900px) {
  .hero__wnetrze { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero h1 { max-width: 18ch; }
  .rownanie { padding: 1.4rem 1.5rem; }
  .rownanie__krok { font-size: 1.25rem; }
}

/* ------------------------- os liczbowa -------------------------- */

.os { position: relative; padding: 3rem 0 2.5rem; }
.os__tytul { text-align: center; margin-bottom: 2.25rem; }
.os__linia { height: 2px; background: var(--naglowek); position: relative; margin-right: 42px; }
.os__linia::after {
  content: ""; position: absolute; right: -12px; top: -5px;
  border-left: 12px solid var(--naglowek); border-block: 6px solid transparent;
}
.os__punkty { display: grid; grid-template-columns: repeat(5, 1fr); margin-right: 42px; }
.os__punkty a {
  position: relative; text-decoration: none; padding-top: 1.6rem; text-align: center;
  font-family: var(--font-naglowki); font-weight: 600; color: var(--naglowek); font-size: 1rem;
  min-height: 44px;
}
/* Numer wpisany w kolko - to glowna nawigacja serwisu, wiec punkty
   musza byc duze i klikalne, nie delikatne kropki. */
.os__punkty a { padding-top: 3.1rem; }
.os__numer {
  position: absolute; top: -21px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--powierzchnia); border: 3px solid var(--akcent);
  color: var(--naglowek); display: grid; place-items: center;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.05rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.os__punkty a:hover .os__numer, .os__punkty a:focus-visible .os__numer {
  background: var(--akcent); color: var(--powierzchnia); transform: translateX(-50%) scale(1.08);
}
.os__punkty .tematy {
  display: block; font-family: var(--font-tresc); font-weight: 400;
  font-size: 0.88rem; color: var(--tekst-drugi); margin-top: 0.3rem;
  opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease;
}
.os__punkty a:hover .tematy, .os__punkty a:focus-visible .tematy { opacity: 1; transform: none; }

/* Na telefonie os pozioma sie nie sprawdza - kapsuly zamiast niej. */
@media (max-width: 700px) {
  .os__linia { display: none; }
  .os__punkty {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.7rem; margin-right: 0;
  }
  .os__punkty a {
    padding: 0.85rem 1rem; padding-top: 0.85rem; border: 1px solid var(--obrys); border-radius: var(--promien);
    background: var(--powierzchnia); text-align: left;
  }
  .os__numer { position: static; transform: none; width: 34px; height: 34px; margin-bottom: .5rem; }
  .os__punkty .tematy { opacity: 1; transform: none; font-size: 0.82rem; }
}

/* ------------------------ ciemna sekcja ------------------------- */

.sekcja-ciemna {
  background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym);
  padding: 3.5rem 0; margin: 3.5rem 0 0;
}
.sekcja-ciemna h2 { color: var(--tekst-na-ciemnym); margin-top: 0; }
.sekcja-ciemna .nadtytul { color: var(--postep); }
.sekcja-ciemna p { opacity: 0.85; }
.sekcja-ciemna .wartosci i { color: var(--akcent); }
.sekcja-ciemna .wartosci h3 { color: var(--tekst-na-ciemnym); }
.sekcja-ciemna .wartosci p { color: var(--tekst-na-ciemnym); }

/* ---------------------------- siatki ---------------------------- */

.siatka { display: grid; gap: 1rem; }
.siatka--2 { grid-template-columns: repeat(2, 1fr); }
.siatka--3 { grid-template-columns: repeat(3, 1fr); }

/* auto-fit upychal tyle kolumn, ile sie zmiescilo, przez co czwarty
   kafel rozciagal sie na cala szerokosc. Stala liczba kolumn plus
   zejscie do jednej na waskich ekranach. */
@media (max-width: 860px) { .siatka--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .siatka--2, .siatka--3 { grid-template-columns: 1fr; }
}

.karta {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  padding: 1.4rem;
  text-decoration: none;
  display: block;
  transition: border-color .15s, transform .15s;
}
a.karta:hover { border-color: var(--akcent); transform: translateY(-2px); }
.karta h3 { margin: 0 0 0.4rem; }
.karta p { color: var(--tekst-drugi); font-size: 0.95rem; margin: 0; }
.karta__ikona {
  width: 42px; height: 42px; border-radius: var(--promien-s);
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  display: grid; place-items: center; font-size: 22px; margin-bottom: 0.9rem;
}
.karta__meta { font-size: 0.82rem; color: var(--akcent-tekst); margin-top: 0.7rem; display: block; }

.klasy-pasek { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.klasy-pasek a {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: 999px; padding: 0.5rem 1.15rem;
  text-decoration: none; color: var(--naglowek); font-weight: 500; font-size: 0.95rem;
}
.klasy-pasek a:hover { border-color: var(--akcent); background: var(--tlo-akcentu); }

/* ------------- sygnatura: kafle z logo jako wskaznik ------------- */

.kafle { display: inline-grid; grid-template-columns: repeat(3, 7px); gap: 3px; vertical-align: -1px; }
.kafle i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--obrys); }
.kafle i.on { background: var(--poziom-1); }
.poziom-2 .kafle i.on { background: var(--poziom-2); }
.poziom-3 .kafle i.on { background: var(--poziom-3); }

.podpis-klas {
  font-family: var(--font-naglowki); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--akcent-tekst); margin: 0 0 1.75rem;
}
.znacznik-poziomu {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--tekst-drugi);
}

/* --------------------------- artykul ---------------------------- */

.okruszki { font-size: 0.85rem; color: var(--tekst-drugi); padding: 1.25rem 0 0; }
.okruszki a { color: var(--tekst-drugi); }
.okruszki span { margin: 0 0.4rem; opacity: 0.5; }

.artykul { background: var(--powierzchnia); border-radius: var(--promien); padding: var(--artykul-pad); margin: 1.25rem 0 2.5rem; }
@media (max-width: 640px) { :root { --artykul-pad: 1.5rem; } }
.artykul__lead { font-size: 1.15rem; color: var(--tekst-drugi); margin-bottom: 1.5rem; }
.artykul h2 { border-top: 1px solid var(--obrys); padding-top: 1.75rem; }
.artykul h2:first-of-type { border-top: 0; padding-top: 0; }
.artykul ul { padding-left: 1.25rem; }
.artykul ol.kroki { padding-left: 0; list-style: none; counter-reset: krok; }
.artykul ol.kroki li {
  counter-increment: krok; position: relative; padding-left: 2.75rem; margin-bottom: 0.9rem;
}
.artykul ol.kroki li::before {
  content: counter(krok);
  position: absolute; left: 0; top: 0.15rem;
  width: 1.9rem; height: 1.9rem; border-radius: var(--promien-s);
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  font-family: var(--font-naglowki); font-weight: 600; font-size: 0.9rem;
  display: grid; place-items: center;
}
.artykul code {
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em;
}



/* ramki edukacyjne */
.ramka { border-radius: var(--promien); padding: 1.15rem 1.35rem; margin: 1.75rem 0; }
.ramka__tytul {
  font-family: var(--font-naglowki); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.5rem;
}
.ramka__tresc > p:last-child { margin-bottom: 0; }
.ramka--przyklad   { background: var(--tlo-akcentu); border: 1px solid var(--obrys); }
.ramka--przyklad   .ramka__tytul { color: var(--akcent-tekst); }
.ramka--wskazowka  { background: var(--tlo-wskazowki); }
.ramka--wskazowka  .ramka__tytul { color: var(--tekst-wskazowki); }
.ramka--blad       { background: var(--tlo-wskazowki); }

/* porownanie zle / dobrze - dwie kolumny obok siebie */
.porownanie { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 1.75rem 0; }
.porownanie > div {
  border-radius: var(--promien); padding: 1rem 1.15rem;
  /* Bez min-width: 0 kolumna siatki rozszerza sie do szerokosci zawartosci,
     a dlugie wzory wypychaja cala strone poza ekran. */
  min-width: 0;
  overflow-x: auto;
}
.porownanie__etykieta {
  font-family: var(--font-naglowki); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem;
}
.porownanie__zle      { background: var(--tlo-wskazowki); }
.porownanie__zle .porownanie__etykieta { color: var(--tekst-wskazowki); }
.porownanie__dobrze   { background: var(--tlo-akcentu); }
.porownanie__dobrze .porownanie__etykieta { color: var(--akcent-tekst); }
.porownanie p:last-child { margin-bottom: 0; }
.porownanie .katex-display { margin: 0.35rem 0; }
@media (max-width: 560px) { .porownanie { grid-template-columns: 1fr; } }
.ramka--blad       .ramka__tytul { color: var(--tekst-wskazowki); }

/* wzory */
/* KaTeX_Main nie zawiera czesci znakow (m.in. znaku nierownosci) i liczy na
   fallback systemowy. Domyslna lista jest za krotka - na Windowsie i Androidzie
   konczy sie kwadracikiem. Ta lista pokrywa wszystkie systemy. */
.katex, .katex .mrel, .katex .mbin, .katex .mord {
  font-family: KaTeX_Main, 'Cambria Math', 'Segoe UI Symbol',
               'Noto Sans Symbols 2', 'Noto Sans Math', 'DejaVu Sans',
               'Times New Roman', serif;
}
.katex .mathnormal, .katex .mathit { font-family: KaTeX_Math, 'Cambria Math', serif; }
.katex { font-size: 1.05em; }
.katex-display {
  overflow-x: auto; overflow-y: hidden;
  padding: 0.35rem 0;
  /* Dlugie wzory maja sie przewijac w swoim bloku, a nie rozpychac strony. */
  max-width: 100%;
}
/* To samo zabezpieczenie dla wszystkich siatek z trescia zmiennej dlugosci. */
.siatka > *, .kroki-nauki > *, .wartosci-jasne > *, .dzialy-lista > * { min-width: 0; }
.artykul { overflow-wrap: break-word; }

/* ------------------------- lista hasel -------------------------- */

.lista-hasel { list-style: none; padding: 0; margin: 0; }
.lista-hasel li { border-bottom: 1px solid var(--obrys); }
.lista-hasel li:last-child { border-bottom: 0; }
.lista-hasel a { display: block; padding: 1rem 0; text-decoration: none; }
.lista-hasel .tytul { color: var(--naglowek); font-weight: 600; font-family: var(--font-naglowki); }
.lista-hasel .opis { color: var(--tekst-drugi); font-size: 0.92rem; display: block; }
.lista-hasel a:hover .tytul { color: var(--akcent-tekst); }

.powiazane { background: var(--powierzchnia); border-radius: var(--promien); padding: 1.75rem 2.5rem 2rem; margin-bottom: 3rem; }
.powiazane h2 { margin-top: 0; font-size: 1.15rem; }
@media (max-width: 640px) { .powiazane { padding: 1.25rem; } }

.sekcja { padding: 2.5rem 0; }
.sekcja h2 { text-align: center; margin-top: 0; margin-bottom: 1.5rem; }
.nadtytul {
  text-align: center; font-family: var(--font-naglowki); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--akcent-tekst);
  font-weight: 600; margin-bottom: 0.4rem;
}

/* --------------------------- stopka ----------------------------- */

.stopka { background: var(--tlo-ciemne); color: var(--tekst-stopki); margin-top: 3rem; padding: 3rem 0 2rem; }
.stopka a { color: var(--tekst-na-ciemnym); text-decoration: none; }
.stopka a:hover { text-decoration: underline; }
.stopka h2 {
  color: var(--tekst-na-ciemnym); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 0.9rem;
}
.stopka ul { list-style: none; padding: 0; margin: 0; }
.stopka li { margin-bottom: 0.45rem; }
.stopka__dol {
  border-top: 1px solid var(--linia-na-ciemnym);
  margin-top: 2rem; padding-top: 1.25rem; font-size: 0.85rem;
}
.stopka__znak img { width: 40px; height: 40px; margin-bottom: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------- ebooki ----------------------------- */

.przycisk {
  display: inline-block; background: var(--link); color: var(--tekst-na-ciemnym);
  text-decoration: none; padding: 0.8rem 1.6rem; border-radius: var(--promien-s);
  font-family: var(--font-naglowki); font-weight: 600; font-size: 0.95rem;
}
.przycisk:hover { background: var(--link-hover); color: var(--tekst-na-ciemnym); }

/* Okladka rysowana z tytulu, dopoki nie ma prawdziwej grafiki. */
.okladka {
  display: flex; flex-direction: column; justify-content: center;
  aspect-ratio: 3 / 4; border-radius: var(--promien-s);
  background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym);
  padding: 1.2rem; text-align: center; flex-shrink: 0;
  font-family: var(--font-naglowki);
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--akcent) 30%, transparent), transparent 60%);
}
.okladka__nad    { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.okladka__glowne { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin-top: 0.25rem; text-transform: uppercase; }
.okladka__stopka { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: auto; }

.karta--ebook { display: flex; gap: 1.1rem; align-items: flex-start; }
.karta--ebook .okladka { width: 96px; }
.karta--ebook__opis h3 { margin-top: 0; }

.ebook-naglowek { display: flex; gap: 1.75rem; align-items: flex-start; margin-bottom: 2rem; }
.ebook-naglowek .okladka { width: 170px; }
.ebook-naglowek h1 { font-size: 1.85rem; }
.ebook-fakty { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1rem 0 1.25rem; }
.ebook-fakty span {
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.82rem;
}
.ebook-status {
  background: var(--tlo-wskazowki); color: var(--tekst-wskazowki);
  border-radius: var(--promien-s); padding: 0.85rem 1.1rem; font-size: 0.92rem; margin: 0;
}
@media (max-width: 620px) {
  .ebook-naglowek { flex-direction: column; }
  .ebook-naglowek .okladka { width: 130px; }
}

.polecany-ebook {
  display: flex; gap: 1.5rem; align-items: center;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 1.75rem; margin-bottom: 2rem;
}
.polecany-ebook .okladka { width: 92px; }
.polecany-ebook h2 { margin: 0.15rem 0 0.4rem; font-size: 1.15rem; }
.polecany-ebook h2 a { text-decoration: none; }
.polecany-ebook p { margin: 0; color: var(--tekst-drugi); font-size: 0.95rem; }
.polecany-ebook__nad {
  font-family: var(--font-naglowki); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--akcent-tekst) !important; font-weight: 600;
}
@media (max-width: 560px) { .polecany-ebook { flex-direction: column; align-items: flex-start; } }

/* ----------------------- pasek zaufania ------------------------- */

.pasek-zaufania {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 1.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: -1rem;
}
.pasek-zaufania div { display: flex; gap: 0.7rem; align-items: center; }
.pasek-zaufania div + div { border-left: 1px solid var(--obrys); padding-left: 1rem; }
.pasek-zaufania i { font-size: 24px; color: var(--akcent-tekst); flex-shrink: 0; }
.pasek-zaufania span { font-size: 0.88rem; line-height: 1.35; }
@media (max-width: 860px) {
  .pasek-zaufania { grid-template-columns: repeat(2, 1fr); }
  .pasek-zaufania div + div { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) { .pasek-zaufania { grid-template-columns: 1fr; } }

/* -------------------------- wartosci ---------------------------- */

.wartosci { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.wartosci i { font-size: 32px; color: var(--akcent); }
.wartosci h3 { font-size: 1rem; margin: 0.6rem 0 0.3rem; }
.wartosci p { font-size: 0.9rem; color: var(--tekst-drugi); margin: 0; }
@media (max-width: 780px) { .wartosci { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .wartosci { grid-template-columns: 1fr; } }

/* ------------------------- newsletter --------------------------- */

.newsletter {
  background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym);
  border-radius: var(--promien); padding: 2.25rem 2.5rem;
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  margin: 3rem 0 1rem;
}
.newsletter h2 { color: var(--tekst-na-ciemnym); margin: 0 0 0.4rem; font-size: 1.35rem; }
.newsletter p { margin: 0; font-size: 0.95rem; opacity: 0.85; }
.newsletter form { display: flex; gap: 0.5rem; }
.newsletter input {
  font-family: inherit; font-size: 1rem; padding: 0.8rem 1rem;
  border: 0; border-radius: var(--promien-s); min-width: 240px;
}
.newsletter .honeypot { position: absolute; left: -9999px; }
@media (max-width: 780px) {
  .newsletter { grid-template-columns: 1fr; padding: 1.75rem; }
  .newsletter form { flex-direction: column; }
  .newsletter input { min-width: 0; width: 100%; }
}

/* ------------------------ ikony dzialow ------------------------- */

.karta__ikona {
  width: 62px; height: 62px; border-radius: var(--promien-s);
  background: var(--tlo-akcentu);
  display: grid; place-items: center; margin-bottom: 1rem;
  transition: background .18s ease;
}
.ikona-dzialu { width: 38px; height: 38px; display: block; }
.ikona-dzialu .i-tlo    { fill: color-mix(in srgb, var(--akcent) 22%, transparent); }
.ikona-dzialu .i-akcent { fill: var(--akcent); }
.ikona-dzialu .i-jasny  { fill: color-mix(in srgb, var(--akcent) 40%, transparent); }
.ikona-dzialu .i-kreska { fill: var(--naglowek); }
.ikona-dzialu .i-kropka { fill: var(--interaktywne); }
/* Sciezka rysowana obrysem - uzywana tam, gdzie prostokaty nie daja
   dokladnych wierzcholkow (radykal). Zaokraglone konce upodabniaja
   ja do pozostalych ksztaltow. */
.ikona-dzialu .i-linia {
  fill: none; stroke: var(--naglowek); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dzial-wiersz__ikona .i-linia { stroke: var(--powierzchnia); }

a.karta:hover .karta__ikona { background: color-mix(in srgb, var(--akcent) 26%, transparent); }

/* Dzial wraca w kolejnych klasach. Pionowa linia laczaca etapy jest
   ta sama metafora, co os liczbowa na stronie glownej. */

.sciezka-wstep { color: var(--tekst-drugi); font-size: 0.95rem; margin-bottom: 2rem; }
.sciezka { list-style: none; padding: 0; margin: 0; position: relative; }
.sciezka::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--obrys);
}
.sciezka__etap { position: relative; padding-left: 3rem; margin-bottom: 2.25rem; }
.sciezka__etap:last-child { margin-bottom: 0; }
.sciezka__klasa { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; }
.sciezka__numer {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--akcent); color: var(--powierzchnia);
  display: grid; place-items: center;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 0.95rem;
}
.sciezka__klasa a {
  font-family: var(--font-naglowki); font-weight: 600; font-size: 1.05rem;
  color: var(--naglowek); text-decoration: none;
}
.sciezka__klasa a:hover { color: var(--akcent-tekst); }
.sciezka .lista-hasel a { padding: 0.6rem 0; }


/* Podkreslenie kluczowego slowa - lekko nierowne, jak pociagniete recznie. */
.hero h1 em { position: relative; display: inline-block; }
.hero h1 em::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -0.12em; height: 0.22em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C34 4.2 74 2.6 108 3.4c30 .7 58 2.9 90 5.6' stroke='%231D9E75' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------- cztery kroki nauki ----------------------- */

.kroki-nauki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; }
.kroki-nauki__krok {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 1.5rem 1.35rem; position: relative;
}
.kroki-nauki__numer {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--akcent); color: var(--powierzchnia);
  display: grid; place-items: center; margin-bottom: 0.9rem;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 0.9rem;
}
.kroki-nauki__krok h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.kroki-nauki__krok p { margin: 0; font-size: 0.9rem; color: var(--tekst-drugi); }
/* strzalka miedzy kartami */
.kroki-nauki__krok:not(:last-child)::after {
  content: ""; position: absolute; right: -0.68rem; top: 50%; width: 0.36rem; height: 0.36rem;
  border-top: 2px solid var(--obrys); border-right: 2px solid var(--obrys);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 900px) {
  .kroki-nauki { grid-template-columns: repeat(2, 1fr); }
  .kroki-nauki__krok:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .kroki-nauki { grid-template-columns: 1fr; } }

/* =============== kompaktowa nawigacja po dzialach ================
   Karty contentowe mialy 150 px wysokosci. Przy 16 dzialach zrobilby
   sie z tego kilometrowy landing. Wiersz ma ~70 px i skaluje sie. */

.dzialy-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.25rem; }
.dzial-wiersz {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien-s); padding: 0.9rem 1.1rem;
  text-decoration: none; min-height: 78px;
  transition: border-color .15s ease, transform .15s ease;
}
.dzial-wiersz:hover { border-color: var(--akcent); transform: translateX(2px); }
.dzial-wiersz__ikona {
  width: 42px; height: 42px; border-radius: var(--promien-s);
  background: var(--tlo-akcentu); display: grid; place-items: center; flex-shrink: 0;
}
.dzial-wiersz__ikona .ikona-dzialu { width: 26px; height: 26px; }
.dzial-wiersz__tresc { flex: 1; min-width: 0; }
.dzial-wiersz__nazwa {
  font-family: var(--font-naglowki); font-weight: 600; color: var(--naglowek);
  font-size: 1.15rem; display: block; line-height: 1.3;
}
.dzial-wiersz__meta { font-size: 0.82rem; color: var(--tekst-drugi); }
.dzial-wiersz__strzalka { color: var(--akcent-tekst); flex-shrink: 0; font-size: 18px; }

/* Kropki klas: pelna = temat wystepuje w tej klasie. */
.klasy-kropki { display: inline-flex; gap: 0.28rem; margin-left: 0.55rem; vertical-align: -1px; }
.klasy-kropki i {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--akcent); display: block;
}
.klasy-kropki i.jest { background: var(--akcent); }

@media (max-width: 720px) { .dzialy-lista { grid-template-columns: 1fr; } }

/* ============ karty z narożnikiem - sygnatura marki ==============
   Sciety narożnik z numerem. Nawiazuje do geometrii i do fiszek,
   a przede wszystkim odroznia sie od kolejnych czterech kolek. */

.kroki-nauki__krok {
  padding-top: 2.4rem; overflow: hidden;
}
.kroki-nauki__numer {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  border-top: 54px solid var(--naglowek); border-right: 54px solid transparent;
  border-radius: 0; background: none; margin: 0;
}
.kroki-nauki__numer span {
  position: absolute; top: -48px; left: 7px;
  color: var(--powierzchnia); font-family: var(--font-naglowki);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
}

/* ============= sekcja jasna z duzymi liczbami ==================== */

.wartosci-jasne { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.wartosci-jasne > div { position: relative; padding-top: 0.5rem; }
.wartosci-jasne__symbol {
  font-family: var(--font-naglowki); font-weight: 700; font-size: 2.6rem;
  color: var(--akcent); line-height: 1; margin-bottom: 0.75rem; display: block;
}
.wartosci-jasne h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.wartosci-jasne p { font-size: 0.92rem; color: var(--tekst-drugi); margin: 0; }
@media (max-width: 820px) { .wartosci-jasne { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
@media (max-width: 440px) { .wartosci-jasne { grid-template-columns: 1fr; } }

/* ============ newsletter jasny - rytm jasne/ciemne =============== */

.newsletter {
  background: var(--tlo-akcentu); color: var(--tekst);
  border: 1px solid var(--obrys);
}
.newsletter h2 { color: var(--naglowek); }
.newsletter p { opacity: 1; color: var(--tekst-drugi); }
.newsletter input { border: 1px solid var(--obrys); }

/* ================= wybor klasy w hero =========================== */

.wejscia { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.wybor-klasy { position: relative; }
.wybor-klasy > summary {
  list-style: none; cursor: pointer;
  background: var(--link); color: var(--tekst-na-ciemnym);
  padding: 0.95rem 1.5rem; border-radius: 999px;
  font-family: var(--font-naglowki); font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.wybor-klasy > summary::-webkit-details-marker { display: none; }
.wybor-klasy > summary:hover { background: var(--link-hover); }
.wybor-klasy[open] > summary { background: var(--link-hover); }
.wybor-klasy__lista {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 0.4rem; min-width: 190px;
  box-shadow: 0 12px 32px rgba(6,28,61,.12);
}
.wybor-klasy__lista a {
  display: block; padding: 0.55rem 0.85rem; border-radius: var(--promien-s);
  text-decoration: none; color: var(--naglowek); font-weight: 500;
}
.wybor-klasy__lista a:hover { background: var(--tlo-akcentu); }
.wejscia .szukajka { flex: 1; min-width: 240px; max-width: 380px; }
@media (max-width: 520px) { .wejscia .szukajka { max-width: none; } }

/* Karty krokow na ciemnym tle zostaja biale - kontrast robi robote,
   a granatowy narożnik z numerem czyta sie na nich najlepiej. */
.sekcja-ciemna .kroki-nauki__krok { border-color: transparent; }
.sekcja-ciemna .kroki-nauki__krok h3 { color: var(--naglowek); }
.sekcja-ciemna .kroki-nauki__krok p { color: var(--tekst-drugi); opacity: 1; }
.sekcja-ciemna .kroki-nauki__krok:not(:last-child)::after {
  border-top-color: rgba(255,255,255,.3); border-right-color: rgba(255,255,255,.3);
}

/* Symbol na ciemnym tle: granatowa litera L znikleby, wiec podkladamy
   pod nia jasne pole w promieniu kafli z logo. */


/* ---------- dzialy: mocniejsze kafle ikon, wyrazniejszy wiersz ---------- */

.dzial-wiersz__ikona {
  width: 50px; height: 50px; border-radius: 10px;
  background: var(--tlo-ciemne);
}
.dzial-wiersz__ikona .ikona-dzialu { width: 30px; height: 30px; }
/* na ciemnym kaflu odwracamy role kolorow */
.dzial-wiersz__ikona .i-kreska { fill: var(--powierzchnia); }
.dzial-wiersz__ikona .i-tlo    { fill: rgba(255,255,255,.16); }
.dzial-wiersz__ikona .i-jasny  { fill: color-mix(in srgb, var(--akcent) 55%, transparent); }

.dzial-wiersz { border-left: 3px solid transparent; padding-left: 0.95rem; }
.dzial-wiersz:hover { border-left-color: var(--akcent); transform: none; }
.dzial-wiersz__strzalka {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tlo-akcentu); display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.dzial-wiersz:hover .dzial-wiersz__strzalka {
  background: var(--akcent); color: var(--powierzchnia);
}

/* ------- co robimy inaczej: kafle z logo jako motyw przewodni -------- */

.wartosci-jasne { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.wartosci-jasne > div {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 1.6rem 1.4rem; text-align: left;
}
.wartosci-jasne__symbol {
  width: 62px; height: 62px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 1.9rem;
  line-height: 1;
}
/* Cztery kolory z siatki kafli w logo - stad bierze sie rozpoznawalnosc. */
.wartosci-jasne > div:nth-child(1) .wartosci-jasne__symbol { background: var(--c-teal);      color: var(--tlo-ciemne); }
.wartosci-jasne > div:nth-child(2) .wartosci-jasne__symbol { background: var(--c-dark-teal); color: var(--powierzchnia); }
.wartosci-jasne > div:nth-child(3) .wartosci-jasne__symbol { background: var(--c-mint-mocny);color: var(--tlo-ciemne); }
.wartosci-jasne > div:nth-child(4) .wartosci-jasne__symbol { background: var(--c-violet);    color: var(--powierzchnia); }

/* ------------------ plan tresci (tylko test) -------------------- */

.plan-dzial {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien-s); margin-bottom: 0.6rem;
}
.plan-dzial > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; position: relative;
}
.plan-dzial > summary::-webkit-details-marker { display: none; }
.plan-dzial__ikona {
  width: 40px; height: 40px; border-radius: 8px; background: var(--tlo-ciemne);
  display: grid; place-items: center; flex-shrink: 0;
}
.plan-dzial__ikona .ikona-dzialu { width: 24px; height: 24px; }
.plan-dzial__ikona .i-kreska { fill: var(--powierzchnia); }
.plan-dzial__ikona .i-linia  { stroke: var(--powierzchnia); }
.plan-dzial__nazwa { font-family: var(--font-naglowki); font-weight: 600; color: var(--naglowek); flex: 1; }
.plan-dzial__licznik { font-size: 0.85rem; color: var(--tekst-drugi); font-variant-numeric: tabular-nums; }
.plan-pasek { width: 90px; height: 6px; border-radius: 3px; background: var(--obrys); overflow: hidden; flex-shrink: 0; }
.plan-pasek i { display: block; height: 100%; background: var(--akcent); }
.plan-lista { list-style: none; margin: 0; padding: 0 1.1rem 0.9rem 4.5rem; }
.plan-lista li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.3rem 0; font-size: 0.92rem; }
.plan-lista li a { color: var(--tekst-drugi); text-decoration: none; }
.plan-lista li.jest a { color: var(--akcent-tekst); font-weight: 500; }
.plan-lista li.jest::before { content: "✓"; color: var(--akcent); }
.plan-lista li:not(.jest)::before { content: "○"; color: var(--obrys); }
.plan-klasy { margin-left: auto; font-size: 0.78rem; color: var(--tekst-drugi); }

/* cytat pokazujacy droge od niezrozumienia do zrozumienia */
.cytat-droga {
  text-align: center; font-family: var(--font-naglowki); font-weight: 600;
  color: var(--naglowek); line-height: 1.9; margin: 0;
}
.cytat-strzalka { color: var(--akcent); font-weight: 400; }

/* ------------------- kalendarz roku szkolnego ------------------- */

.odliczanie {
  background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym);
  border-radius: var(--promien); padding: 1.6rem 1.8rem; margin: 1.75rem 0 2.5rem;
  text-align: center;
}
.odliczanie p { margin: 0; }
.odliczanie__etykieta {
  font-family: var(--font-naglowki); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--postep); font-weight: 700; margin-bottom: 0.5rem;
}
.odliczanie__nazwa { font-family: var(--font-naglowki); font-weight: 600; font-size: 1.15rem; }
.odliczanie__dni { font-family: var(--font-naglowki); font-size: 2.6rem; line-height: 1.1; margin: 0.3rem 0 0.2rem; }
.odliczanie__dni strong { color: var(--akcent); font-weight: 700; }
.odliczanie__data { font-size: 0.9rem; opacity: 0.8; }

.terminy { list-style: none; padding: 0; margin: 0 0 2.5rem; counter-reset: none; }
.termin {
  display: grid; grid-template-columns: 210px 1fr; gap: 1.25rem;
  padding: 1.1rem 0; border-top: 1px solid var(--obrys); align-items: start;
}
.termin:last-child { border-bottom: 1px solid var(--obrys); }
.termin__data { display: flex; min-width: 0; }
.termin__brak {
  font-family: var(--font-naglowki); color: var(--tekst-wskazowki); font-weight: 500;
  font-size: 0.95rem;
}
.termin__tresc h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.termin__tresc p { margin: 0; color: var(--tekst-drugi); font-size: 0.93rem; }
.termin--minelo { opacity: 0.5; }
.termin--trwa .kartka-daty { background: var(--akcent); color: var(--tekst-na-ciemnym); }
.termin--trwa .kartka-daty__miesiac { color: var(--tekst-na-ciemnym); }
.odznaka {
  display: inline-block; background: var(--akcent); color: var(--powierzchnia);
  font-family: var(--font-tresc); font-size: 0.68rem; font-weight: 500;
  padding: 0.15rem 0.5rem; border-radius: 999px; vertical-align: 2px; margin-left: 0.4rem;
}

/* kartka daty: duzy dzien + mniejszy miesiac/rok obok, w stylu
   kartki z kalendarza. Zakresy w tym samym miesiacu dostaja jeden
   dzien-zakres ("10–12"); zakresy na dwa miesiace/lata - dwie mniejsze
   czesci polaczone kreska. */
.kartka-daty {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--data-tlo); border-radius: var(--promien-s);
  padding: 0.5rem 0.85rem; font-family: var(--font-naglowki);
}
.kartka-daty__dzien {
  font-size: var(--data-dzien-rozmiar); font-weight: 700; line-height: 1;
  color: var(--data-dzien-kolor);
}
.kartka-daty__miesiac {
  display: flex; flex-direction: column; line-height: 1.3;
  font-size: var(--data-miesiac-rozmiar); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--data-miesiac-kolor);
}
/* Dwie czesci zakresu ulozone jedna nad druga, nie obok siebie - obok
   siebie dwie pelne mini-kartki nie miescily sie w kolumnie daty i
   nachodzily na tytul/opis terminu. W pionie kartka zajmuje tyle co
   pojedyncza mini-kartka, wiec zawsze sie miesci. */
.kartka-daty--zakres {
  flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.4rem 0.7rem;
}
.kartka-daty__czesc { display: inline-flex; align-items: center; gap: 0.35rem; }
.kartka-daty__lacznik { color: var(--data-miesiac-kolor); font-weight: 600; font-size: 0.8rem; }
@media (max-width: 620px) {
  .termin { grid-template-columns: 1fr; gap: 0.6rem; }

  /* Ponizej 620px kartka daty ladowala sama w pelnej szerokosci wiersza,
     ale trzymala te same, kompaktowe wymiary co dopasowane do sztywnej
     210px kolumny na biurku - stad wrazenie ciasnoty mimo wolnego miejsca. */
  :root {
    --data-dzien-rozmiar: 2.4rem;
    --data-miesiac-rozmiar: 0.8rem;
  }
  .kartka-daty { padding: 0.65rem 1.05rem; gap: 0.6rem; }
  .kartka-daty--zakres { padding: 0.55rem 0.9rem; gap: 0.25rem; }
  .kartka-daty__czesc { gap: 0.45rem; }
}

.ferie-grupa {
  background: var(--tlo-akcentu); border-radius: var(--promien);
  padding: 1.1rem 1.35rem; margin-bottom: 0.75rem;
}
.ferie-grupa__termin {
  font-family: var(--font-naglowki); font-weight: 700; color: var(--naglowek);
  margin: 0 0 0.5rem; font-size: 1.02rem;
}
.ferie-grupa__lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.ferie-grupa__lista li {
  background: var(--powierzchnia); border-radius: 999px;
  padding: 0.25rem 0.75rem; font-size: 0.88rem; color: var(--naglowek);
}

/* ------------------ nawigacja miedzy klasami -------------------- */

.sasiednie { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 3rem; }
.sasiednie__link {
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 1rem 1.25rem; text-decoration: none;
  display: block; transition: border-color .15s ease;
}
.sasiednie__link:hover { border-color: var(--akcent); }
.sasiednie__link--prawo { text-align: right; }
.sasiednie__etykieta {
  display: block; font-family: var(--font-naglowki); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--akcent-tekst); font-weight: 600;
}
.sasiednie__nazwa {
  display: block; font-family: var(--font-naglowki); font-weight: 600;
  color: var(--naglowek); font-size: 1.05rem; margin-top: 0.15rem;
}
@media (max-width: 520px) { .sasiednie { grid-template-columns: 1fr; } }

/* ------------- zajawka programu na stronie klasy ---------------- */

.zajawka-programu {
  background: var(--tlo-akcentu); border-radius: var(--promien);
  padding: 1.6rem 1.8rem; margin-bottom: 1.25rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
}
.zajawka-programu__nad {
  font-family: var(--font-naglowki); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--akcent-tekst); font-weight: 700; margin: 0 0 0.4rem;
}
.zajawka-programu h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.zajawka-programu p { margin: 0; color: var(--tekst-drugi); font-size: 0.95rem; }
.zajawka-programu .przycisk { white-space: nowrap; }
@media (max-width: 620px) {
  .zajawka-programu { grid-template-columns: 1fr; }
}

/* ===================== numerowana sciezka dzialu =================
   Dzial jako kurs, nie encyklopedia: numer mowi "zacznij tutaj",
   a nie "wybierz sobie cokolwiek". Numeracja bierze sie z pola
   kolejnosc w plikach hasel. */

.dzial-fakty { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; }
.dzial-fakty span {
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.85rem; font-weight: 500;
}
.sciezka-wstep { color: var(--tekst-drugi); font-size: 0.95rem; margin-bottom: 1.75rem; }

.kurs { list-style: none; padding: 0; margin: 0; counter-reset: krok-kursu; }
.kurs__krok { counter-increment: krok-kursu; border-top: 1px solid var(--obrys); }
.kurs__krok:last-child { border-bottom: 1px solid var(--obrys); }
.kurs__krok > a {
  display: grid; grid-template-columns: 44px 1fr; gap: 0 1rem;
  padding: 1.1rem 0.5rem 1.1rem 0; text-decoration: none;
  transition: background .15s ease;
}
.kurs__krok > a::before {
  content: counter(krok-kursu);
  grid-row: 1 / span 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  display: grid; place-items: center; margin-top: 2px;
  font-family: var(--font-naglowki); font-weight: 700; font-size: 0.92rem;
  transition: background .15s ease, color .15s ease;
}
.kurs__krok > a:hover { background: var(--tlo-akcentu); }
.kurs__krok > a:hover::before { background: var(--akcent); color: var(--powierzchnia); }
.kurs__tytul {
  font-family: var(--font-naglowki); font-weight: 600; color: var(--naglowek);
  font-size: 1.08rem; line-height: 1.35;
}
.kurs__lead { color: var(--tekst-drugi); font-size: 0.92rem; margin-top: 0.15rem; }
.kurs__klasy {
  font-size: 0.78rem; color: var(--akcent-tekst); margin-top: 0.35rem;
  font-family: var(--font-naglowki); font-weight: 500;
}
@media (max-width: 560px) {
  .kurs__krok > a { grid-template-columns: 36px 1fr; gap: 0 0.75rem; }
  .kurs__krok > a::before { width: 28px; height: 28px; font-size: 0.82rem; }
}

/* ------------------- mapa ferii wojewodztwami ------------------- */

.mapa-ferii { width: 100%; max-width: 460px; height: auto; display: block; margin: 1.5rem auto 1rem; }
.mapa-ferii .woj {
  stroke: var(--powierzchnia); stroke-width: 2; stroke-linejoin: round;
}
.mapa-ferii .grupa-1 { fill: var(--c-teal); }
.mapa-ferii .grupa-2 { fill: var(--c-dark-teal); }
.mapa-ferii .grupa-3 { fill: var(--c-mint-mocny); }
.mapa-ferii .grupa-0 { fill: var(--obrys); }
/* Wojewodztwa bez przypisanego terminu (gdyby mapa miala wiecej
   elementow niz kalendarz) zostaja szare - widac wtedy, ze czegos brakuje. */
.mapa-ferii path:not(.woj), .mapa-ferii polygon:not(.woj) { fill: var(--obrys); }

.legenda-ferii {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center;
  font-size: 0.88rem; color: var(--tekst-drugi);
}
.legenda-ferii li { display: flex; align-items: center; gap: 0.45rem; }
.legenda-ferii__kolor { width: 14px; height: 14px; border-radius: 4px; display: block; }
.legenda-ferii__kolor.grupa-1 { background: var(--c-teal); }
.legenda-ferii__kolor.grupa-2 { background: var(--c-dark-teal); }
.legenda-ferii__kolor.grupa-3 { background: var(--c-mint-mocny); }

@media (max-width: 480px) {
  .mapa-ferii .woj-podpis { font-size: 8px; }
}

/* Uwaga praktyczna przy terminie - to, czego nie ma w dokumencie MEN,
   a co rodzic i tak musi sobie policzyc. */
.termin__uwaga {
  background: var(--tlo-wskazowki); color: var(--tekst); border-radius: var(--promien-s);
  padding: 0.7rem 0.9rem; margin-top: 0.6rem !important; font-size: 0.88rem;
  border-left: 3px solid var(--tekst-wskazowki);
}
.termin__przypis {
  font-size: 0.82rem; color: var(--tekst-drugi); margin-top: 0.5rem !important;
}
.termin__zrodlo {
  font-size: 0.8rem; color: var(--tekst-drugi); margin-top: 0.45rem !important;
}
.termin__zrodlo a { color: var(--link); }


/* Ramka porownania z wiekszym oddechem, skoro ma wiecej miejsca. */
.artykul .porownanie { gap: 1.1rem; }

/* .porownanie ma teraz wlasne centrowanie przez .szer-pelny (nizej) -
   ten reset zostaje tylko dla katex-display, ktory .szer-* jeszcze
   nie uzywa. */
@media (max-width: 900px) {
  .artykul .katex-display { margin-left: 0; margin-right: 0; }
}

@media (max-width: 640px) { :root { --artykul-pad: 1.25rem; } }

/* ================ uklad hasla z panelem bocznym ==================
   Kolumna tresci sama w sobie jest teraz szeroka - az tyle, ile
   realnie zostaje obok panelu (patrz --strona-max). Waskosc tekstu
   pilnuja klasy .szer-* nizej, nie sama kolumna. Dzieki temu elementy
   ze .szer-szeroki/.szer-pelny (rysunki, porownania) moga wypelnic
   ta kolumne bez zadnych ujemnych marginesow czy wyjazdow poza karte -
   po prostu wypelniaja szerszy kontener, ktory dostaly od gory. */

.uklad-hasla {
  display: grid;
  grid-template-columns: var(--panel-szer) minmax(0, 1fr);
  justify-content: center;
  gap: 2rem;
  align-items: start;
}

/* ---------------- szerokosc komponentow w tresci hasla ----------------
   .artykul jest teraz szerszy niz wygodna dlugosc linii tekstu (patrz
   wyzej), wiec zwykla tresc (akapity, naglowki, listy, ramki) domyslnie
   wraca do waskiej kolumny - --tresc-max, bez zmiany wzgledem tego, jak
   wygladala dzis. Trzy klasy pozwalaja pojedynczym elementom swiadomie
   z tego wyjsc:

   .szer-tekst    - jawny odpowiednik dzisiejszej waskiej kolumny
   .szer-szeroki  - rysunki, wzory wyswietlane, pojedyncze elementy
   .szer-pelny    - porownania, tabele, przyszle kalkulatory

   .rysunek-blok i .porownanie dostaja odpowiednia klase automatycznie
   przez selektor - istniejace hasla korzystaja z tego bez zmiany
   plikow Markdown. Wszystkie trzy centruja sie w .artykul takim samym
   marginesem po obu stronach (margin: auto), a szersze nigdy nie
   przekraczaja 100% dostepnego miejsca - min() pilnuje tego samo,
   bez wzgledu na to, czy .artykul siedzi w ukladzie z panelem, czy
   w zwyklej, waskiej karcie na innych stronach. */
.artykul > :not(.szer-tekst):not(.szer-szeroki):not(.szer-pelny):not(.rysunek-blok):not(.porownanie) {
  max-width: var(--tresc-max);
  margin-left: auto;
  margin-right: auto;
}
.szer-tekst {
  max-width: var(--tresc-max);
  margin-left: auto;
  margin-right: auto;
}
.szer-szeroki, .rysunek-blok {
  width: min(900px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.szer-pelny, .porownanie {
  width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
}
/* Ponizej 640px i tak nie ma z czego korzystac - wszystkie trzy klasy
   wypelniaja po prostu cala dostepna szerokosc, bez wyrozniania. */
@media (max-width: 640px) {
  .artykul > *,
  .szer-tekst, .szer-szeroki, .szer-pelny, .rysunek-blok, .porownanie {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.panel-dzialu {
  position: sticky; top: 96px; align-self: start;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien); padding: 1.25rem;
  /* Bez wlasnego paska przewijania - przy 25 tematach wygladal jak
     rozwijane menu. Panel przykleja sie do gory i przewija razem
     ze strona, a gdy jest wyzszy niz ekran, po prostu jedzie z trescia. */
}
/* Domyslnie (szerokie ekrany): <summary> niepotrzebny, tresc zawsze
   widoczna - dzieki temu details wyglada jak zwykly, staly panel,
   niezaleznie od tego, czy atrybut open jest ustawiony. */
.panel-dzialu__podsumowanie { display: none; }
.panel-dzialu__tresc { display: block; }
.panel-dzialu__nad {
  font-family: var(--font-naglowki); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--akcent-tekst); font-weight: 700; margin: 0 0 0.25rem;
}
.panel-dzialu__tytul {
  font-family: var(--font-naglowki); font-weight: 600; font-size: 1.05rem;
  margin: 0 0 0.15rem;
}
.panel-dzialu__tytul a { color: var(--naglowek); text-decoration: none; }
.panel-dzialu__licznik { font-size: 0.8rem; color: var(--tekst-drugi); margin: 0 0 0.9rem; }

.panel-dzialu ol { list-style: none; padding: 0; margin: 0; counter-reset: temat; }
.panel-dzialu li { counter-increment: temat; }
.panel-dzialu li a {
  display: grid; grid-template-columns: 24px 1fr; gap: 0.6rem;
  padding: 0.45rem 0.5rem 0.45rem 0.35rem; border-radius: var(--promien-s);
  text-decoration: none; font-size: 0.9rem; line-height: 1.35;
  color: var(--tekst-drugi);
}
.panel-dzialu li a::before {
  content: counter(temat);
  font-family: var(--font-naglowki); font-size: 0.75rem; font-weight: 600;
  color: var(--tekst-drugi); text-align: right; opacity: .7;
}
.panel-dzialu li a:hover { background: var(--tlo-akcentu); color: var(--naglowek); }
.panel-dzialu li a[aria-current] {
  background: var(--tlo-akcentu); color: var(--naglowek); font-weight: 600;
}
.panel-dzialu li a[aria-current]::before { color: var(--akcent-tekst); opacity: 1; }

/* Ponizej 1024 px panel staje sie zwijanym details nad trescia (jest
   pierwszy w DOM, wiec bez zadnej zmiany kolejnosci ląduje na gorze).
   Zwiniety domyslnie - czytelnik nie przewija spisu tematow, zeby
   dojsc do artykulu, ale moze go rozwinac jednym dotknieciem. */
@media (max-width: 1024px) {
  .uklad-hasla { grid-template-columns: 1fr; gap: 1.25rem; }
  .panel-dzialu { position: static; max-height: none; margin-bottom: 0; }

  .panel-dzialu__podsumowanie {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; list-style: none;
    font-family: var(--font-naglowki); font-weight: 600; font-size: 0.95rem;
    color: var(--naglowek);
  }
  .panel-dzialu__podsumowanie::-webkit-details-marker { display: none; }
  .panel-dzialu__podsumowanie::marker { display: none; content: ''; }
  .panel-dzialu__podsumowanie::after {
    content: '▾'; color: var(--akcent-tekst); font-size: 0.8rem; margin-left: 0.75rem;
  }
  .panel-dzialu[open] .panel-dzialu__podsumowanie::after { content: '▴'; }

  .panel-dzialu__tresc { display: none; margin-top: 1rem; }
  .panel-dzialu[open] .panel-dzialu__tresc { display: block; }
}

/* ========================= kalkulator ============================ */

.kalkulator {
  background: var(--tlo-akcentu); border-radius: var(--promien);
  padding: 1.5rem; margin: 1.75rem 0 2rem;
}

.kalkulator__tryby {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.kalkulator__tryb {
  flex: 1 1 auto; min-width: 130px;
  background: var(--powierzchnia); border: 1px solid var(--obrys);
  border-radius: var(--promien-s); padding: 0.6rem 0.8rem;
  font-family: var(--font-naglowki); font-weight: 600; font-size: 0.88rem;
  color: var(--naglowek); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.kalkulator__tryb:hover { border-color: var(--akcent); }
.kalkulator__tryb[aria-selected="true"] {
  background: var(--link); border-color: var(--link); color: var(--tekst-na-ciemnym);
}

.kalkulator__pytanie {
  font-family: var(--font-naglowki); font-weight: 600; color: var(--naglowek);
  margin: 0 0 0.75rem; font-size: 1rem;
}
.kalkulator__wiersz { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.kalkulator__pole { display: block; }
.kalkulator__pole span {
  display: block; font-size: 0.8rem; font-weight: 500;
  color: var(--akcent-tekst); margin-bottom: 0.3rem;
}
.kalkulator__pole input {
  width: 100%; font-family: var(--font-naglowki); font-size: 1.3rem; font-weight: 600;
  padding: 0.65rem 0.9rem; border: 1px solid var(--obrys);
  border-radius: var(--promien-s); background: var(--powierzchnia); color: var(--naglowek);
}
.kalkulator__pole input:focus {
  outline: none; border-color: var(--akcent);
  box-shadow: 0 0 0 3px var(--poswiata-akcentu);
}

.kalkulator__wynik {
  display: block; background: var(--powierzchnia);
  border-radius: var(--promien-s); padding: 1.1rem 1.25rem; margin-top: 1.1rem;
}
.kalkulator__odpowiedz {
  font-family: var(--font-naglowki); font-size: 1.1rem; color: var(--naglowek);
  margin: 0 0 0.75rem;
}
.kalkulator__odpowiedz strong { color: var(--akcent-tekst); }
.kalkulator__kroki {
  list-style: none; padding: 0; margin: 0; counter-reset: krok-kalk;
  border-top: 1px solid var(--obrys); padding-top: 0.75rem;
}
.kalkulator__kroki li {
  counter-increment: krok-kalk; position: relative; padding-left: 1.8rem;
  font-size: 0.92rem; color: var(--tekst-drugi); margin-bottom: 0.35rem;
}
.kalkulator__kroki li::before {
  content: counter(krok-kalk); position: absolute; left: 0; top: 0.1rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--tlo-akcentu); color: var(--akcent-tekst);
  font-family: var(--font-naglowki); font-weight: 700; font-size: 0.72rem;
  display: grid; place-items: center;
}
.kalkulator__podpowiedz {
  margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--tekst-drugi);
}

@media (max-width: 520px) {
  .kalkulator { padding: 1.15rem; }
  .kalkulator__wiersz { grid-template-columns: 1fr; }
  .kalkulator__tryb { min-width: 0; font-size: 0.82rem; padding: 0.55rem 0.5rem; }
}

/* blok kalkulatora na stronie dzialu */
.polecany-kalkulator {
  background: var(--tlo-akcentu); border-radius: var(--promien);
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
}
.polecany-kalkulator__nad {
  font-family: var(--font-naglowki); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--akcent-tekst); font-weight: 700; margin: 0 0 0.4rem;
}
.polecany-kalkulator h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.polecany-kalkulator h2 a { color: var(--naglowek); text-decoration: none; }
.polecany-kalkulator p { margin: 0; color: var(--tekst-drugi); font-size: 0.93rem; }
.polecany-kalkulator .przycisk { white-space: nowrap; }
@media (max-width: 620px) { .polecany-kalkulator { grid-template-columns: 1fr; } }
.kalkulator__uwaga {
  margin: 0.9rem 0 0;
  background: var(--tlo-wskazowki);
  border-left: 3px solid var(--tekst-wskazowki);
  border-radius: var(--promien-s);
  padding: 0.7rem 0.9rem;
  font-size: 0.86rem; color: var(--tekst);
  display: flex; gap: 0.55rem; align-items: flex-start;
}
.kalkulator__uwaga strong { color: var(--tekst-wskazowki); }
.kalkulator__uwaga i { color: var(--tekst-wskazowki); font-size: 18px; flex-shrink: 0; }

/* ==================== rysunki geometryczne ======================= */

.rysunek-blok {
  /* Gora/dol na sztywno, lewo/prawo zostaje .szer-szeroki (wyzej) -
     margin: 0 tutaj skasowalby jej auto-centrowanie. */
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  text-align: center;
}
.rysunek { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }

/* linie i figury */
.rysunek .r-linia { stroke-width: 2.5; stroke-linecap: round; fill: none; }
.rysunek .r-figura { stroke-width: 2.5; stroke-linejoin: round; }

.rysunek .r-dana    { stroke: var(--naglowek); fill: color-mix(in srgb, var(--akcent) 14%, transparent); }
.rysunek .r-szukana { stroke: var(--akcent-tekst); fill: color-mix(in srgb, var(--akcent) 30%, transparent); }
.rysunek .r-pomocnicza { stroke: var(--tekst-drugi); stroke-dasharray: 5 4; fill: none; }
.rysunek .r-siatka { stroke: var(--obrys-neutralny); stroke-width: 1; fill: none; }
.rysunek .r-bez-wypelnienia { fill: none; }
.rysunek line.r-dana, .rysunek line.r-szukana { fill: none; }

/* kat prosty i luki */
.rysunek .r-kat-prosty { fill: none; stroke: var(--naglowek); stroke-width: 2; }
.rysunek .r-kropka { fill: var(--naglowek); stroke: none; }
.rysunek .r-luk { fill: none; stroke: var(--akcent-tekst); stroke-width: 2.5; }

/* punkty */
.rysunek .r-punkt { stroke: none; }
.rysunek .r-punkt.r-dana { fill: var(--naglowek); }
.rysunek .r-punkt.r-szukana { fill: var(--akcent-tekst); }

/* podpisy */
.rysunek .r-podpis {
  font-family: var(--font-naglowki); font-weight: 700; font-size: 15px;
  fill: var(--naglowek); text-anchor: middle;
}
.rysunek .r-dlugosc {
  font-family: var(--font-naglowki); font-style: italic; font-weight: 600; font-size: 14px;
  fill: var(--akcent-tekst); text-anchor: middle;
}