/* =========================================================================
   Zostaje w głowie — warstwa wyglądu „KOKPIT”
   -------------------------------------------------------------------------
   Wczytywana ZA `styl-nowy.css` („Atelier”). Nie jest przemalowaniem palety:
   zmienia siatkę, gęstość i komponenty. Atelier zostaje pod spodem wyłącznie
   po to, żeby drobne, rzadkie elementy (gra, pary, klocki, okna profili)
   miały sensowny wygląd bez przepisywania 67 kB arkusza — wszystko, co widać
   na stronie głównej i w lekcji, jest zdefiniowane TUTAJ.

   Czym różni się od „Atelier”:
     • zero cieni — strukturę budują ostre linie 1 px (gazeta, nie karty);
     • typografia mniejsza i gęstsza: na ekran wchodzi 2–3× więcej treści,
       miara kolumny szersza (72ch), interlinia 1.6;
     • lead pisany szeryfem (Georgia) — „dek” jak w gazecie, odróżnia
       wprowadzenie od tekstu głównego;
     • szyna ZAWSZE ciemna (atrament), wąska, pozycje pełnej szerokości
       z 3 px paskiem akcentu zamiast pigułek;
     • pasek górny 52 px zamiast 68 px, bez rozmycia, okruszki przycinane;
     • sekcje rozdzielone linią przez całą szerokość + krótka kreska akcentu
       nad nagłówkiem — widać, gdzie kończy się jedna myśl, a zaczyna druga;
     • strona główna to TABLICA: cały kurs (poziomy × lekcje) jako siatka
       kwadratów, a nie 97 dużych kafli pod sobą;
     • ćwiczenia i bloki treści to panele z numerem i linią, nie unoszące się
       karty.

   Czego celowo NIE ruszamy:
     • selektorów stanu z `cwiczenia.js` (`.opcja[aria-pressed]`, `.para-el.*`,
       `.wyjasnienie.widoczne`, `.podpowiedz.otwarta`) — zmiana tutaj pokazuje
       odpowiedzi przed sprawdzeniem, czyli psuje kurs, nie wygląd;
     • żółtego przycisku odsłuchu — to znak marki i najważniejszy przycisk
       dla dziecka; zostaje żółty, z atramentową obwódką i celem ≥ 44 px;
     • kodu barwnego rodzajników (der/die/das) i kolorów lekcji z `szkielet.js`.
   ========================================================================= */

/* ============================================================= TOKENY === */

:root {
  /* --- powierzchnie: biała gazeta, struktura z linii --- */
  --tlo:        #ffffff;
  --arkusz:     #ffffff;
  --arkusz-2:   #f5f5f2;
  --arkusz-3:   #ebebe6;
  --atrament:   #10131a;
  --na-atramencie: #f7f8fa;

  /* „Plama” to najmocniejsze wypelnienie strony: przyciski glowne, naglowki
     tabel, pasek cennika. W jasnym motywie jest atramentem, w ciemnym musi
     sie ODWROCIC — inaczej czarny przycisk na czarnym tle znika. */
  --plama:      #10131a;
  --na-plamie:  #ffffff;

  /* --- tekst: mocniejszy kontrast niż w Atelier --- */
  --tekst:      #0f1115;
  --tekst-2:    #474c57;   /* 8.5:1 na bieli */
  --tekst-3:    #6b7280;   /* 4.9:1 na bieli — tylko podpisy */

  /* --- linie: pełne, nie półprzezroczyste; to one rysują układ --- */
  --linia:      #e3e2dd;
  --linia-2:    #c8c7c1;
  --linia-3:    #10131a;   /* linia „redakcyjna” — gruba, atramentowa */
  --linia-mocna: #6b7280;

  /* --- cienie: kokpit ich nie używa; --cien-2 to obrys, żeby elementy,
         które w Atelier polegały na cieniu, nie zniknęły z układu --- */
  --cien-1: none;
  --cien-2: 0 0 0 1px var(--linia);
  --cien-3: 0 24px 60px rgba(12, 14, 20, .26);

  /* --- szyna: ciemna w OBU motywach --- */
  --szyna-tlo-1:      #12161f;
  --szyna-tlo-2:      #12161f;
  --szyna-tekst:      #f6f7f9;
  --szyna-tekst-2:    #ccd1db;
  --szyna-tekst-3:    #8d95a6;
  --szyna-nakladka:   rgba(255, 255, 255, .06);
  --szyna-nakladka-2: rgba(255, 255, 255, .12);
  --szyna-linia:      rgba(255, 255, 255, .11);
  --szyna-linia-2:    rgba(255, 255, 255, .22);
  --szyna-dziura:     #12161f;
  --szyna-tor:        rgba(255, 255, 255, .16);
  --szyna-postep-1:   #34d399;
  --szyna-postep-2:   #fbbf24;

  /* --- kolory poziomów: jeden kod barwny tablicy, szyny i cennika --- */
  --p-a1: #2f5bd9;  --p-a1-tlo: #e8eefb;
  --p-a2: #0b7a52;  --p-a2-tlo: #e3f4ec;
  --p-b1: #9a4c06;  --p-b1-tlo: #fbeedd;
  --p-b2: #6d28d9;  --p-b2-tlo: #efe8fd;

  /* --- promienie: prawie kwadratowe --- */
  --r-s: 2px;  --r: 4px;  --r-l: 4px;  --r-xl: 6px;

  /* --- siatka --- */
  --szyna:    236px;
  --spis:     240px;
  --miara:    72ch;    /* szersza niż w Atelier, bo litery są mniejsze */
  --breakout: 1300px;
  --pad:      clamp(16px, 2.6vw, 40px);
  --gora-h:   52px;

  /* --- typografia --- */
  --f-dek:   Georgia, "Times New Roman", "Segoe UI", serif;
  --f-cyfry: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  --t-mega:  clamp(2.1rem, 4.6vw, 3.2rem);
  --t-h1:    clamp(1.7rem, 3vw, 2.5rem);
  --t-h2:    clamp(1.25rem, 1.6vw, 1.62rem);
  --t-h3:    clamp(1rem, .5vw + .9rem, 1.1rem);
  --t-tekst: clamp(1rem, .18vw + .95rem, 1.0625rem);
  --t-de:    clamp(1.04rem, .2vw + 1rem, 1.12rem);
  --t-mala:  .875rem;
}

html[data-motyw="ciemny"] {
  --tlo:        #0c0e13;
  --arkusz:     #0c0e13;
  --arkusz-2:   #14171e;
  --arkusz-3:   #1b1f28;
  --atrament:   #05070b;
  --na-atramencie: #eef0f4;
  --plama:      #eef1f6;
  --na-plamie:  #0c0e13;

  --tekst:      #f2f4f8;
  --tekst-2:    #b3b9c6;
  --tekst-3:    #868d9c;

  --linia:      #262b35;
  --linia-2:    #39404d;
  --linia-3:    #dfe3ea;
  --linia-mocna: #868d9c;

  --cien-1: none;
  --cien-2: 0 0 0 1px var(--linia);
  --cien-3: 0 24px 60px rgba(0, 0, 0, .6);

  --p-a1: #85a4ff;  --p-a1-tlo: rgba(47, 91, 217, .20);
  --p-a2: #4fd3a0;  --p-a2-tlo: rgba(11, 122, 82, .24);
  --p-b1: #f2ac5c;  --p-b1-tlo: rgba(154, 76, 6, .26);
  --p-b2: #b795ff;  --p-b2-tlo: rgba(109, 40, 217, .24);

  /* Szyna ma wyglądać TAK SAMO w obu motywach — ale „Atelier” przestawia
     jej barwy we własnym bloku `html[data-motyw="ciemny"]`, który wagą bije
     nasz `:root`. Bez powtórzenia tych tokenów tutaj w trybie ciemnym wracały
     stare, przygaszone kolory menu (napisy na półprzezroczystej bieli). */
  --szyna-tlo-1:      #12161f;
  --szyna-tlo-2:      #12161f;
  --szyna-tekst:      #f6f7f9;
  --szyna-tekst-2:    #ccd1db;
  --szyna-tekst-3:    #8d95a6;
  --szyna-nakladka:   rgba(255, 255, 255, .06);
  --szyna-nakladka-2: rgba(255, 255, 255, .12);
  --szyna-linia:      rgba(255, 255, 255, .11);
  --szyna-linia-2:    rgba(255, 255, 255, .22);
  --szyna-dziura:     #12161f;
  --szyna-tor:        rgba(255, 255, 255, .16);
  --szyna-postep-1:   #34d399;
  --szyna-postep-2:   #fbbf24;
}

/* ================================================================ BODY == */

body {
  line-height: 1.6;
  letter-spacing: 0;
  /* niemieckie złożenia (Rückmeldung, Krankenversicherung) potrafiły
     rozepchnąć kolumnę na telefonie — łamiemy je zamiast przewijać stronę */
  overflow-wrap: break-word;
}

:focus-visible { outline: 2px solid var(--lekcja); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--plama); color: var(--na-plamie); }

/* =========================================================== SZKIELET === */

/* --------------------------------------------------------- lewa szyna -- */

.szyna {
  background: var(--szyna-tlo-1);
  border-right: none;
  gap: 0;
  padding: 0 0 14px;
}

.marka {
  padding: 14px 14px 13px;
  margin: 0;
  gap: 10px;
  border-bottom: 1px solid var(--szyna-linia);
}
.marka-plytka {
  width: 38px; height: 38px;
  border-radius: 3px;
  padding: 3px;
  box-shadow: none;
  background: #faf7f0;
}
.marka:hover .marka-plytka { transform: none; }
.marka b { font-size: .95rem; letter-spacing: -.01em; }
.marka span span { font-size: .72rem; letter-spacing: .08em; color: var(--szyna-tekst-3); }

/* postęp: pasek zamiast dużej karty z pierścieniem */
.szyna-postep {
  display: block;
  padding: 12px 14px;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--szyna-linia);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.szyna-postep:hover { background: var(--szyna-nakladka); }
.postep-gora { display: flex; align-items: center; gap: 10px; }
.postep-pierscien {
  width: 42px; height: 42px; flex: none;
  font-size: .8rem;
}
.postep-pierscien b { font-size: .84rem; }
.postep-pierscien i { font-size: .72em; }
.postep-tresc b { font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.postep-tresc > span { font-size: .75rem; color: var(--szyna-tekst-3); }
.postep-strzalka { display: none; }
.postep-belka { height: 3px; border-radius: 0; margin-top: 10px; }
.postep-belka > i { border-radius: 0; }

/* grupy i pozycje: pełna szerokość, pasek akcentu, zero pigułek */
.szyna-grupa {
  margin: 0;
  padding: 16px 14px 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--szyna-tekst-3);
}
.szyna-grupa + .poz { border-top: 1px solid var(--szyna-linia); }

.poz {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 7px 14px 7px 13px;
  border-left: 3px solid transparent;
  border-radius: 0;
  font-size: .855rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--szyna-tekst-2);
  text-decoration: none;
}
.poz:hover { background: var(--szyna-nakladka); color: var(--szyna-tekst); }
.poz.aktywna, .poz[aria-current="page"] {
  background: var(--szyna-nakladka-2);
  border-left-color: var(--szyna-postep-2);
  color: #fff;
  font-weight: 700;
}
.poz-ikona {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 2px;
  background: var(--szyna-nakladka);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.poz-licznik {
  margin-left: auto;
  font-size: .74rem;
  color: var(--szyna-tekst-3);
  background: none;
  padding: 0;
}

/* program partnerski: pasek, nie pomarańczowa karta z animacją */
.poz-partner {
  margin: 10px 0;
  padding: 10px 14px 10px 13px;
  border-radius: 0;
  border-left: 3px solid var(--szyna-postep-2);
  background: var(--szyna-nakladka);
  color: var(--szyna-tekst);
  box-shadow: none;
  animation: none;
}
.poz-partner::after { display: none; }
.poz-partner:hover, .poz-partner:focus-visible { background: var(--szyna-nakladka-2); transform: none; }
.poz-partner .poz-ikona { background: none; }
.poz-partner b { font-size: .84rem; font-weight: 700; }
.poz-opis { font-size: .74rem; color: var(--szyna-tekst-3); line-height: 1.35; }

.profil-kafel { margin: 12px 14px 0; }

/* ------------------------------------------------------- pasek górny -- */

.gora {
  height: var(--gora-h);
  gap: 10px;
  padding: 0 clamp(12px, 2vw, 22px);
  background: var(--arkusz);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--linia);
}
/* okruszki muszą się ścinać, a nie rozpychać paska */
.okruszki {
  min-width: 0; flex: 1 1 auto;
  display: block;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--tekst-3);
}
.okruszki a { text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }
.gora-narzedzia { margin-left: auto; flex: none; }

.ikonka {
  width: 34px; height: 34px;
  border-radius: 3px;
  border: 1px solid var(--linia);
  background: var(--arkusz);
  box-shadow: none;
}
.ikonka:hover { background: var(--arkusz-2); }
.gora-marka { width: 34px; height: 34px; border-radius: 3px; }

/* ================================================== OPAKOWANIE I SEKCJE = */

.opakowanie { padding-bottom: clamp(64px, 6vw, 96px); }

.sekcja { padding-top: clamp(30px, 3.4vw, 46px); }
.sekcja:first-child { padding-top: clamp(22px, 2.6vw, 34px); }
/* każda kolejna sekcja odcięta linią przez całą szerokość kolumny */
.sekcja + .sekcja { margin-top: clamp(30px, 3.4vw, 46px); border-top: 1px solid var(--linia); }

/* nagłówek sekcji: krótka kreska akcentu nad tytułem */
.sekcja > h2 {
  position: relative;
  margin: 0 0 .5em;
  padding-top: 14px;
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.18;
}
.sekcja > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 3px;
  background: var(--plama);
}

.lead {
  font-family: var(--f-dek);
  font-size: clamp(1.06rem, .5vw + .96rem, 1.22rem);
  line-height: 1.52;
  color: var(--tekst-2);
  letter-spacing: -.002em;
}
.lead b { color: var(--tekst); font-weight: 700; }
.mala { font-size: var(--t-mala); line-height: 1.58; color: var(--tekst-2); }

/* ============================================================ PRZYCISKI = */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--linia-2);
  border-radius: var(--r);
  background: var(--arkusz);
  color: var(--tekst);
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .005em;
  text-decoration: none;
  box-shadow: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--arkusz-2); border-color: var(--tekst-3); transform: none; }
.btn:active { transform: none; background: var(--arkusz-3); }
.btn-glowny {
  background: var(--plama);
  border-color: var(--plama);
  color: var(--na-plamie);
  box-shadow: none;
}
.btn-glowny:hover { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); opacity: .86; }
.btn-cichy { border-color: var(--linia); background: transparent; color: var(--tekst-2); }
.btn-maly { min-height: 34px; padding: 6px 11px; font-size: .8rem; }

/* przycisk odsłuchu — żółty marker marki, celowo NIEzmieniony charakter */
.mow, .btn-sluch {
  min-height: 40px;
  border-radius: 3px;
  box-shadow: none;
  border: 2px solid var(--atrament);
  background: #ffd93b;
  color: #10131a;
  font-weight: 700;
}
.mow:hover, .btn-sluch:hover { background: #ffe873; transform: none; }
.klik-mow { border-bottom: 2px solid #ffd93b; }
.klik-mow:hover { background: #fff4c2; }

/* ======================================================= GŁOWA LEKCJI == */

.lekcja-glowa {
  padding: clamp(22px, 3vw, 40px) var(--pad) clamp(20px, 2.6vw, 32px);
  background: var(--arkusz);
  border-bottom: 1px solid var(--linia);
  border-radius: 0;
  overflow: visible;
  max-width: calc(var(--breakout) + 2 * var(--pad));
  margin: 0 auto;
}
.lekcja-glowa::after { display: none; }
.lekcja-glowa > * { max-width: 78ch; }
/* bloki z własną klasą mają w Atelier `margin: … auto`, co przy ograniczonej
   mierze wypychało je na środek — w sprawdzianach ramka „Warunki jak na
   egzaminie” stała wcięta o ćwierć ekranu względem akapitów obok */
.lekcja-glowa > .ramka,
.lekcja-glowa > .karta,
.lekcja-glowa > .siatka { margin-left: 0; margin-right: auto; }

/* etykieta: nie pigułka na gradiencie, tylko nadtytuł z kwadratem koloru */
.lekcja-etykieta {
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 10px;
  margin: 0 0 4px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--tekst-2);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lekcja-etykieta::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background: var(--lekcja);
}

.lekcja-glowa h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.06;
  max-width: 22ch;
}
.lekcja-glowa .lead { margin-top: .7em; }

/* cele: dwie kolumny z kwadratowymi znacznikami */
ul.cele {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linia);
  display: grid; gap: 6px 30px;
  font-size: .93rem;
  line-height: 1.45;
}
ul.cele li {
  position: relative;
  margin: 0;
  padding: 0 0 0 20px;
  border: none;
  border-radius: 0;
  background: none;
  font-size: .93rem; line-height: 1.45;
}
ul.cele li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; margin-top: 0;
  border-radius: 0;
  background: var(--lekcja);
  box-shadow: none;
}

/* pasek postępu: cienka, prosta belka */
.pasek-postepu { height: 4px; border-radius: 0; background: var(--arkusz-3); }
.pasek-postepu > i { border-radius: 0; background: var(--lekcja); }

/* ======================================================= UKŁAD LEKCJI == */

main > * { margin-left: 0; margin-right: auto; }
/* bloki z własną klasą mają w Atelier `margin: … auto` i wygrywały wagą
   selektora — przez to ramki stały wcięte o ~130 px względem akapitów */
main > .ramka, main > .karta, main > .siatka, main > .chip-rzad,
main > .tabela-opak, main > .slownik { margin-left: 0; margin-right: auto; }

main h2 {
  margin-top: 2.2em;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linia);
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.16;
}
main h2::before {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin-bottom: 12px;
  background: var(--lekcja);
  border-radius: 0;
  position: static;
  font-size: 0;
}
/* skok z spisu rozdziałów nie może chować nagłówka pod przyklejonym paskiem */
main h2, main h3, .cw, .czytanka, .dialog { scroll-margin-top: calc(var(--gora-h) + 18px); }

main h3 {
  margin-top: 1.7em;
  font-size: var(--t-h3);
  font-weight: 750;
  letter-spacing: -.012em;
}
main p { margin-top: .85em; }

.de { font-size: var(--t-de); }

/* spis rozdziałów: lista z linią, nie pigułki */
.spis a {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--linia);
  border-radius: 0;
  background: none;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--tekst-2);
}
.spis a:hover { border-left-color: var(--tekst-3); color: var(--tekst); background: none; }
.spis a.aktywny {
  border-left-color: var(--lekcja);
  color: var(--tekst);
  font-weight: 700;
  background: none;
}

/* ==================================================== BLOKI W TREŚCI === */

.karta, .ramka, .cw, .dialog, .czytanka, .tabela-opak, figure.grafika, .slownik-grupa {
  box-shadow: none;
}

.karta {
  padding: 18px;
  border: 1px solid var(--linia);
  border-radius: var(--r);
  background: var(--arkusz);
}
/* Siatki o zmiennej liczbie kart (blog, karty w lekcjach) NIE mogą używać
   sztuczki „gap:1px na tle linii” — przy niepełnym ostatnim rzędzie pusta
   komórka pokazuje szary prostokąt. Linie rysują same karty. */
.siatka { gap: 12px; }
.siatka .karta { border: 1px solid var(--linia); border-radius: var(--r); }

.ramka {
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--linia);
  border-left: 4px solid var(--uwaga);
  border-radius: var(--r);
  background: var(--arkusz-2);
}
.ramka::before { display: none; }
.ramka-tytul {
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .5em;
}
.ramka-regula  { border-left-color: var(--p-a1); }
.ramka-uwaga   { border-left-color: var(--uwaga); }
.ramka-tip     { border-left-color: var(--ok); }
.ramka-pulapka { border-left-color: var(--zle); }

figure.grafika {
  border: 1px solid var(--linia);
  border-radius: var(--r);
  background: var(--arkusz);
  padding: 16px;
}
figure.grafika figcaption {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--linia);
  font-size: .8rem; color: var(--tekst-2);
}

/* `overflow:hidden` (dla zaokrąglenia rogów) ucinał szerokie tabele na
   telefonie — treści nie dało się doczytać. Przewijanie w poziomie wraca. */
.tabela-opak {
  border: 1px solid var(--linia); border-radius: var(--r);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table { font-size: .93rem; }
thead th {
  background: var(--plama); color: var(--na-plamie);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 12px;
}
tbody td { padding: 9px 12px; border-top: 1px solid var(--linia); }
tbody tr:nth-child(even) td { background: var(--arkusz-2); }

.chip {
  border-radius: 2px;
  border: 1px solid var(--linia-2);
  background: var(--arkusz);
  font-size: .82rem;
  padding: 5px 9px;
}
.tag {
  border-radius: 2px;
  font-size: .74rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 700;
}
.plakietka {
  border-radius: 2px;
  font-size: .72rem;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------ dialog -- */

.dialog {
  border: 1px solid var(--linia);
  border-radius: var(--r);
  background: var(--arkusz);
}
.dialog-scena {
  border-bottom: 1px solid var(--linia);
  background: var(--arkusz-2);
  font-size: .82rem;
}
.kwestia-kto {
  font-size: .74rem !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kwestia-pl { color: var(--tekst-2); font-size: .88rem; }

/* ---------------------------------------------------------- czytanka -- */

.czytanka {
  border: 1px solid var(--linia);
  border-radius: var(--r);
  background: var(--arkusz);
}
.czytanka-glowa { border-bottom: 1px solid var(--linia); background: var(--arkusz-2); }
.czytanka-etykieta { font-size: .74rem; letter-spacing: .1em; }
.czytanka-tytul { font-family: var(--f-dek); letter-spacing: -.01em; }
.czytanka-tresc > p:first-of-type::first-letter {
  font-family: var(--f-dek);
  color: var(--lekcja);
}
.czytanka-pytania { border-top: 1px solid var(--linia); background: var(--arkusz-2); }

/* --------------------------------------------------------- słowniczek - */

/* siatka haseł bywa niepełna w ostatnim rzędzie — linie rysują same karty,
   inaczej w pustej komórce zostaje szary prostokąt */
.slownik { gap: 10px; background: none; border: none; }
.slowo {
  border: 1px solid var(--linia); border-radius: var(--r);
  background: var(--arkusz);
  padding: 12px 14px;
}
.slowo:hover { background: var(--arkusz-2); }
.slowo-de { font-size: 1.02rem; }
.slowo-pl { color: var(--tekst-2); }
.slowo-przyklad { font-size: .85rem; color: var(--tekst-2); }
.ipa { font-size: .8rem; color: var(--tekst-3); }

/* ========================================================== ĆWICZENIA == */

.cw {
  border: 1px solid var(--linia);
  border-top: 3px solid var(--lekcja);
  border-radius: var(--r);
  background: var(--arkusz);
  overflow: hidden;
}
.cw-glowa {
  display: block;
  padding: 14px 16px 13px;
  border-bottom: 1px solid var(--linia);
  background: var(--arkusz-2);
}
/* `.cw-nr` to NIE numer, tylko etykieta („Ćwiczenie 3”) — musi rosnąć
   z tekstem, kwadrat ją ucinał */
.cw-nr {
  display: inline-block;
  width: auto; height: auto;
  margin: 0 0 8px;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--plama); color: var(--na-plamie);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cw-tytul { display: block; font-size: 1.08rem; font-weight: 780; letter-spacing: -.018em; line-height: 1.25; }
.cw-polecenie { display: block; margin-top: 5px; font-size: .88rem; color: var(--tekst-2); }
.cw-cialo { padding: 4px 16px 16px; gap: 0; }
.cw-stopka {
  padding: 12px 16px;
  border-top: 1px solid var(--linia);
  background: var(--arkusz-2);
}

/* zadania rozdzielone linią zamiast szarych bloków — rytm listy, nie kart */
.zadanie {
  padding: 15px 0 17px;
  border-top: 1px solid var(--linia);
  border-radius: 0;
  background: none;
}
.cw-cialo > .zadanie:first-child { border-top: none; }
.zadanie-nr {
  width: 22px; height: 22px;
  border-radius: 2px;
  background: var(--arkusz-3); color: var(--tekst-2);
  font-size: .72rem; font-weight: 700;
}
.zadanie-pl { color: var(--tekst-2); font-size: .86rem; }

.luka {
  min-height: 40px;
  border: 1px solid var(--linia-2);
  border-radius: 2px;
  background: var(--arkusz);
  font-size: .98rem;
}
.luka:focus { border-color: var(--lekcja); box-shadow: 0 0 0 2px var(--lekcja-tlo); }
.luka.ok  { border-color: var(--ok);  background: var(--ok-tlo); }
.luka.zle { border-color: var(--zle); background: var(--zle-tlo); }

/* stany z cwiczenia.js — te same selektory, inny wygląd */
.opcja {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--linia-2);
  border-radius: var(--r);
  background: var(--arkusz);
  font-size: .95rem;
  text-align: left;
  box-shadow: none;
}
.opcja:hover { background: var(--arkusz-2); border-color: var(--tekst-3); }
.opcja[aria-pressed="true"] {
  border-color: var(--lekcja);
  background: var(--lekcja-tlo);
  box-shadow: inset 3px 0 0 var(--lekcja);
  font-weight: 650;
}
.opcja.ok  { border-color: var(--ok);  background: var(--ok-tlo);  box-shadow: inset 3px 0 0 var(--ok); }
.opcja.zle { border-color: var(--zle); background: var(--zle-tlo); box-shadow: inset 3px 0 0 var(--zle); }

.para-el {
  min-height: 44px;
  border-radius: var(--r);
  border: 1px solid var(--linia-2);
  box-shadow: none;
}
.klocek { border-radius: 2px; box-shadow: none; border: 1px solid var(--linia-2); }
.szyk-wynik, .szyk-zapas { border-radius: var(--r); border: 1px dashed var(--linia-2); }

/* Podpowiedź musi być PRZYCISKIEM, nie linkiem-okruchem: w Atelier miała
   20 px wysokości (goły tekst bez tła), a kursu używa dziecko — cel dotykowy
   nie może być mniejszy niż palec. */
.podpowiedz-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--linia-2);
  border-radius: var(--r);
  background: var(--arkusz);
  color: var(--tekst);
  font-size: .88rem; font-weight: 650;
}
.podpowiedz-btn:hover { background: var(--arkusz-2); border-color: var(--tekst-3); }
.podpowiedz-tresc {
  border-radius: var(--r);
  background: var(--arkusz-2);
  border: 1px solid var(--linia);
  border-left: 3px solid var(--lekcja);
}
.wyjasnienie { border-radius: 2px; border-left: 3px solid var(--ok); background: var(--arkusz-2); }

/* ============================================================== FISZKI == */

.fiszka-str {
  min-height: 260px;
  padding: 34px 28px;
  border: 1px solid var(--linia);
  border-radius: var(--r);
  background: var(--arkusz);
  box-shadow: none;
}
.fiszka-tyl { background: var(--arkusz-2); border-color: var(--lekcja); }
.fiszka-slowo { font-size: clamp(1.8rem, 4.4vw, 2.6rem); letter-spacing: -.03em; }
.fiszka-podpis {
  top: 0; left: 0;
  padding: 6px 11px;
  border-radius: 0 0 var(--r) 0;
  font-size: .72rem; letter-spacing: .1em;
}
.fiszka-wskazowka { font-size: .84rem; }

.btn-odwroc {
  min-height: 48px;
  border-radius: var(--r);
  background: var(--plama); color: var(--na-plamie);
  box-shadow: none;
}
.btn-sluch:hover, .btn-odwroc:hover { transform: none; filter: none; }
.btn-odwroc:hover { opacity: .86; }

/* ocena: trzy kwadratowe pola z wyraźną obwódką — cel ≥ 44 px zostaje */
.ocena-btn {
  min-width: 118px; min-height: 76px;
  border: 2px solid currentColor;
  border-radius: var(--r);
  font-weight: 800;
  box-shadow: none;
}
.ocena-btn:hover { transform: none; filter: none; box-shadow: none; }
.ocena-btn .buzia { font-size: 1.6rem; }
.ocena-nie    { background: var(--zle-tlo);   color: var(--zle); }
.ocena-trudne { background: var(--uwaga-tlo); color: var(--uwaga); }
.ocena-umiem  { background: var(--ok-tlo);    color: var(--ok); }

/* ============================================================ SŁOWNIK == */

#szukaj {
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--linia-2);
  border-radius: var(--r);
  font-size: 1rem;
}
#szukaj:focus { border-color: var(--lekcja); box-shadow: 0 0 0 2px var(--lekcja-tlo); }

/* ================================================ DOLNY PASEK (telefon) = */

.dolny-pasek {
  border-top: 1px solid var(--linia);
  background: var(--arkusz);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dp-btn {
  min-height: 52px;
  border-radius: 3px;
  border: 1px solid var(--linia);
  font-size: .78rem;
  font-weight: 700;
}
.dp-btn.dp-glowny { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); }
.arkusz-rozdzialow > div { border-radius: 6px 6px 0 0; }
.arkusz-rozdzialow a { border-radius: 2px; }
.postep-czytania { height: 3px; }

/* okna dialogowe zostają jedynym miejscem z cieniem — muszą odciąć się od tła */
.okno { border-radius: var(--r-xl); border: 1px solid var(--linia); }
.pole { border-radius: 2px; border: 1px solid var(--linia-2); min-height: 44px; }
.pasek-zgody { border-radius: var(--r); }

/* =========================================================================
   ================== S T R O N A   G Ł Ó W N A  ·  T A B L I C A =========
   Nowe komponenty (prefiks `k-`). Nie nadpisują niczego z Atelier — używa
   ich wyłącznie `index-kokpit.html`.
   ========================================================================= */

/* ------------------------------------------------------------- nadtytuł */

.k-nad {
  display: flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tekst-2);
}
.k-nad::after { content: ""; flex: 1; height: 1px; background: var(--linia); }

/* --------------------------------------------------------------- hero -- */

.k-hero { display: grid; gap: 26px; align-items: start; }

.k-hero h1 {
  margin: .5rem 0 0;
  font-size: var(--t-mega);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  max-width: 15ch;
}
.k-hero .lead { margin-top: .8rem; max-width: 62ch; }

.k-guziki { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.4rem; }

/* panel faktów: 2 × 2, poprzedzielany liniami, bez ramek dookoła liczb */
.k-fakty {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  overflow: hidden;
}
.k-fakt { background: var(--arkusz); padding: 14px 16px; }
.k-fakt b {
  display: block;
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.k-fakt span {
  display: block; margin-top: 4px;
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tekst-2);
}
.k-fakt-szeroki { grid-column: 1 / -1; background: var(--arkusz-2); }
.k-fakt-szeroki b { font-size: 1.25rem; }

/* --------------------------------------------------------- TABLICA ----- */

.k-tablica {
  display: grid; gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 1.3rem;
}

.k-poziom { background: var(--arkusz); padding: 16px; min-width: 0; }
/* stała wysokość główki — inaczej dłuższa nazwa poziomu przesuwa siatkę
   kwadratów w dół i cztery kolumny przestają się ze sobą zgadzać */
.k-poziom-glowa {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--linia);
}
.k-znak {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 2px;
  background: var(--poziom); color: var(--tlo);
  font-size: .82rem; font-weight: 800; letter-spacing: .04em;
}
.k-poziom-tytul { min-width: 0; line-height: 1.25; }
.k-poziom-tytul b { display: block; font-size: .94rem; font-weight: 750; letter-spacing: -.01em; }
.k-poziom-tytul span { font-size: .74rem; color: var(--tekst-2); }
.k-cena {
  margin-left: auto; flex: none;
  font-size: .78rem; font-weight: 800;
  padding: 4px 8px; border: 1px solid var(--linia-2); border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

/* siatka kwadratów — jeden kwadrat = jedna lekcja / test / egzamin */
.k-chipy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 5px;
}
.k-chip {
  position: relative;
  aspect-ratio: 1;
  min-height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--linia-2);
  border-radius: 2px;
  background: var(--arkusz);
  color: var(--tekst);
  font-size: .84rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.k-chip:hover { border-color: var(--poziom); background: var(--poziom-tlo); }
.k-chip.k-zrobiona { background: var(--poziom); border-color: var(--poziom); color: var(--tlo); }
.k-chip.k-toku { border-color: var(--poziom); border-width: 2px; color: var(--poziom); }
.k-chip.k-test { background: var(--arkusz-2); font-size: .74rem; letter-spacing: .02em; }
.k-chip.k-zamknieta { color: var(--tekst-3); background: var(--arkusz-2); border-style: dashed; }
.k-chip.k-wkrotce { color: var(--tekst-3); border-style: dotted; }
.k-chip i {
  position: absolute; right: 2px; bottom: 1px;
  font-size: .5rem; font-style: normal; line-height: 1;
}
/* pasek postępu lekcji — cienka kreska u dołu kwadratu */
.k-chip u {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--poziom-tlo); text-decoration: none;
}
.k-chip u b { display: block; height: 100%; background: var(--poziom); }

.k-odblokuj {
  display: flex; width: 100%;
  margin-top: 12px;
  border-color: var(--poziom); color: var(--poziom);
}
.k-odblokuj:hover { background: var(--poziom-tlo); border-color: var(--poziom); }

.k-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--linia);
  font-size: .76rem; color: var(--tekst-2);
}
.k-legenda span { display: flex; align-items: center; gap: 7px; }
.k-legenda i {
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--linia-2); border-radius: 2px; background: var(--arkusz);
}
.k-legenda .l-zrobiona { background: var(--tekst); border-color: var(--tekst); }
.k-legenda .l-toku { border: 2px solid var(--tekst); }
.k-legenda .l-zamknieta { border-style: dashed; background: var(--arkusz-2); }

/* ------------------------------------------------------------- cennik -- */

.k-cennik {
  border: 1px solid var(--linia); border-radius: var(--r); overflow: hidden;
  margin-top: 1.2rem;
}
.k-wiersz {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--linia);
  text-decoration: none; color: inherit;
}
.k-wiersz:first-child { border-top: none; }
.k-wiersz:hover { background: var(--arkusz-2); }
.k-wiersz-cena { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.k-wiersz.k-komplet { background: var(--plama); color: var(--na-plamie); border-top-color: var(--plama); }
.k-wiersz.k-komplet:hover { background: #24303f; }
.k-wiersz.k-komplet .k-znak { background: #ffd93b; color: #10131a; }
.k-wiersz small { display: block; font-size: .76rem; color: inherit; opacity: .72; }

/* ------------------------------------------------------- kroki lekcji -- */

.k-kroki {
  display: grid; gap: 1px;
  background: var(--linia); border: 1px solid var(--linia); border-radius: var(--r);
  overflow: hidden; margin-top: 1.2rem;
}
.k-krok { background: var(--arkusz); padding: 16px; }
.k-krok b {
  display: block;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tekst-3);
}
.k-krok h3 { margin: 6px 0 5px; font-size: 1rem; font-weight: 750; letter-spacing: -.012em; }
.k-krok p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--tekst-2); }

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

.k-stopka {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 22px;
  border-top: 3px solid var(--plama);
  font-size: .82rem; line-height: 1.75; color: var(--tekst-2);
}
.k-stopka a { color: var(--tekst); }

/* =========================================================================
   ======================== T E L E F O N  (< 900) ========================
   ========================================================================= */

@media (max-width: 899px) {
  :root { --pad: 16px; --gora-h: 50px; }

  body { padding-bottom: 78px; }

  .szyna { width: min(84vw, 300px); box-shadow: var(--cien-3); }

  /* na telefonie każdy cel dotykowy ≥ 42 px — kursu używa dziecko */
  .ikonka { width: 42px; height: 42px; }
  .btn-maly { min-height: 42px; padding: 9px 14px; }
  .gora { gap: 8px; padding: 0 12px; }

  /* Okruszki na wąskim ekranie ścinają się do jednej litery — ich miejsce
     zajmuje znak marki, który prowadzi tam samo. Reguła `display:block`
     z części wspólnej musi tu zostać cofnięta, inaczej wraca długi,
     przycięty tytuł lekcji zamiast logo. */
  .okruszki { display: none; }

  /* na telefonie pod paskiem górnym stoi jeszcze pasek rozdziałów */
  main h2, main h3, .cw, .czytanka, .dialog { scroll-margin-top: calc(var(--gora-h) + 62px); }

  /* dopasowywanie par: kolumny muszą móc zwęzić się poniżej najdłuższego
     słowa, inaczej złożenia w rodzaju „höchstwahrscheinlich” rozpychają
     ćwiczenie poza ekran */
  .pary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .para-kol { min-width: 0; }
  .para-el { overflow-wrap: anywhere; hyphens: auto; }

  .lekcja-glowa { padding: 20px var(--pad) 18px; }
  .lekcja-glowa h1 { max-width: none; }

  /* spis rozdziałów: pasek kwadratowych zakładek zamiast pigułek */
  .spis {
    background: var(--arkusz);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 16px;
    gap: 0;
  }
  .spis a {
    flex: none;
    padding: 11px 14px;
    border: none;
    border-bottom: 3px solid transparent;
    border-left: none;
    border-radius: 0;
    background: none;
    font-size: .84rem;
  }
  .spis a.aktywny { background: none; color: var(--tekst); border-bottom-color: var(--lekcja); }

  ul.cele { grid-template-columns: 1fr; }

  /* bloki treści od krawędzi do krawędzi, ale z liniami zamiast zaokrągleń */
  main > figure.grafika,
  main > .czytanka,
  main > .dialog,
  main > .cw {
    margin-left: -16px; margin-right: -16px;
    border-radius: 0;
    border-left: none; border-right: none;
  }

  .siatka { grid-template-columns: 1fr; }
  .k-hero h1 { max-width: none; }
  .k-fakt b { font-size: 1.45rem; }
  .k-poziom { padding: 14px; }
  .k-wiersz { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px 13px; }
}

@media (max-width: 380px) {
  :root { --t-tekst: 1rem; }
  .k-chipy { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
}

/* =========================================================================
   ======================= K O M P U T E R  (≥ 900) =======================
   ========================================================================= */

@media (min-width: 900px) {
  .k-hero { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 40px; }
  .k-tablica { grid-template-columns: 1fr 1fr; }
  .k-kroki { grid-template-columns: repeat(3, 1fr); }
  .siatka-2 { grid-template-columns: 1fr 1fr; }

  /* dialog jako scenariusz — zostaje z Atelier, tylko spłaszczony */
  .kwestia { padding: 12px clamp(16px, 2vw, 26px); }
  .kwestia:hover { background: var(--arkusz-2); }
  .kwestia.gra { background: var(--lekcja-tlo); }
}

@media (min-width: 1240px) {
  .k-tablica { grid-template-columns: repeat(4, 1fr); }

  .uklad-lekcji {
    gap: clamp(26px, 2.6vw, 44px);
    max-width: calc(var(--breakout) + var(--spis) + 44px);
  }
  .spis {
    top: calc(var(--gora-h) + 20px);
    padding: 0 0 0 18px;
    border-left: 1px solid var(--linia);
  }
  .spis > div:first-child {
    font-size: .72rem !important;
    font-weight: 800;
    letter-spacing: .16em !important;
    margin-bottom: 10px !important;
    color: var(--tekst-3);
  }
  .lekcja-glowa h1 { max-width: 20ch; }
}

@media (min-width: 1600px) {
  :root { --miara: 76ch; --breakout: 1360px; }
}

/* =========================================================================
   ============================== D R U K =================================
   ========================================================================= */

@media print {
  .szyna, .gora, .dolny-pasek, .spis { display: none !important; }
  .lekcja-glowa { border-bottom: 2px solid #000; }
}