@font-face { font-family: "Andika"; src: url("fonty/Andika.ttf"); font-display: swap; }

/* ===== Już Umiem — system wizualny "zeszyt szkolny" ===== */
:root {
  --paper: #F7F5EE;         /* kartka */
  --ink: #262A33;           /* atrament */
  --accent: #2F5DA8;        /* błękit linii zeszytu (marka) */
  --margines: #C94F3D;      /* czerwień marginesu (CTA) */
  --grid: #C9CFD8;
  --grid-strong: #262A33;
  --muted: #6A7076;
  --solution: #C94F3D;
  --card: #FFFFFF;
  --border: #E4E0D3;
  --k-przedszkole: #E0813C; --k-klasa1: #D9A62E;
  --k-klasa2: #57904F; --k-klasa3: #3E6FB0;
  --k-klasa4: #7B5EA7;
  --shadow: 0 1px 2px rgba(38,42,51,.06), 0 4px 14px rgba(38,42,51,.06);

  /* ETAP 1 nowej szaty: pastelowe wypełnienia dla kafelków wraz
     z dopasowanym kolorem tekstu. Każda para ma kontrast co najmniej
     4,5:1 — pilnuje tego testy_wygladu.sprawdz_kontrast(). Tekst
     pomarańczowy jest celowo ciemniejszy niż wynikałoby z barwy tła:
     jaśniejszy wariant dawał 4,43:1, czyli tuż poniżej normy. */
  --pk-blue: #B3D0F0;    --t-blue: #1D3D6E;
  --pk-green: #BFDFB8;   --t-green: #335C2D;
  --pk-orange: #F8D0A4;  --t-orange: #83420F;
  --pk-yellow: #F7E39A;  --t-yellow: #71570B;
  --pk-purple: #D2C3EC;  --t-purple: #4E3577;
  --pk-red: #F2BCB0;     --t-red: #8C3122;
}
* { box-sizing: border-box; }
/* Strona osadzona w ramce (lekcja interaktywna) chowa nagłówek,
   stopkę i okruszki — nawigacja jest wokół ramki, a w małym oknie
   każde 60 px wysokości się liczy. Tak samo działa to w grach. */
html.ju-w-ramce .siteheader,
html.ju-w-ramce .sitefooter,
html.ju-w-ramce .breadcrumbs { display: none !important; }
html.ju-w-ramce body { padding-top: 0 !important; }
html.ju-w-ramce .wrap, html.ju-w-ramce .sheet { padding-top: 8px; }

/* Atrybut hidden musi działać ZAWSZE. Domyślnie daje display:none, ale
   każda reguła klasy z własnym display go nadpisuje, bo ma wyższy
   priorytet. Bez tej linii element z hidden bywał widoczny — tak było
   z zasłoną nad grą na stronie głównej, przez co kliknięcie „Zagraj”
   sprawiało wrażenie, że nic się nie dzieje.
   Znalezione w kilku miejscach serwisu, więc reguła jest globalna. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 "Nunito Sans", system-ui, sans-serif;
  /* Papier w kratkę — cały serwis jest o zeszycie, więc tło o tym
     przypomina. Krycie 11%: przy 4,5% różnica jasności wynosiła 2,8%
     i tło wyglądało po prostu na białe, a powyżej 15% tekst zaczyna
     się z siatką zlewać. W druku tło i tak znika. */
  background-image:
    linear-gradient(rgba(47,93,168,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,93,168,.11) 1px, transparent 1px);
  background-size: 27px 27px; }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600;
  line-height: 1.2; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 4px; }
h2 { font-size: 1.3rem; margin: 34px 0 10px; }
a { color: var(--accent); }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }
.sub { color: var(--muted); font-size: .92rem; margin: 0 0 22px; }

/* ---------- chrome ---------- */
.siteheader { background: var(--card); border-bottom: 1px solid var(--border); }
/* Logo ZAWSZE w jednej linii z menu. Wcześniej blok miał flex-wrap,
   więc gdy pozycji menu przybyło, całe menu przechodziło do drugiego
   wiersza, a logo zostawało samo u góry — i nagłówek wyglądał inaczej
   na różnych stronach, zależnie od tego, jak długi był tam pasek.

   Zamiast zawijać, menu przewija się w poziomie na wąskich ekranach.
   Na szerokich mieści się w całości i nikt tego nie zauważy. */
.siteheader .inner { max-width: 1020px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.brand { font-family: "Fraunces", serif; font-weight: 700; font-size: 1.25rem;
  color: var(--ink); text-decoration: none; margin-right: auto;
  display: flex; align-items: center; gap: 10px; }
.brand .logotick { display: inline-block; vertical-align: -3px; }
nav.mainnav { display: flex; gap: 3px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; min-width: 0; }
nav.mainnav::-webkit-scrollbar { display: none; }
nav.mainnav a { white-space: nowrap; }
.brand { flex: none; }

/* --- menu zwijane na wąskim ekranie --- */
.ju-hamburger { display: none; margin-left: auto; flex: none;
  width: 42px; height: 38px; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--card);
  cursor: pointer; padding: 9px 10px; }
.ju-hamburger span { display: block; height: 2px; border-radius: 2px;
  background: var(--ink); margin: 3px 0; }
.ju-hamburger:hover { border-color: var(--accent); }

@media (max-width: 820px) {
  .ju-hamburger { display: block; }
  .siteheader .inner { flex-wrap: wrap; }
  nav.mainnav {
    display: none; order: 3; width: 100%;
    flex-direction: column; gap: 2px; overflow: visible;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  nav.mainnav.otwarte { display: flex; }
  nav.mainnav a { padding: 11px 12px; font-size: .98rem; }
}
nav.mainnav a { text-decoration: none; color: var(--ink); font-weight: 600;
  font-size: .88rem; padding: 7px 10px; border-radius: 8px; }
nav.mainnav a:hover { background: var(--paper); }
nav.mainnav a.active { background: var(--accent); color: #fff; }
.sheet { max-width: 1020px; margin: 0 auto; padding: 34px 20px 60px; }
/* responsywność na wąskich ekranach: treściowe SVG skalują się do szerokości,
   a szerokie tabele danych przewijają się w poziomie zamiast rozpychać stronę
   (wyjątek: słupki, gdzie liczy się wyrównanie kolumn) */
.sheet svg { max-width: 100%; height: auto; }
.sheet table:not(.slupek) { display: block; max-width: 100%; overflow-x: auto; }
/* na telefonach listy w wielu kolumnach (columns:2/3) spłaszczamy do jednej —
   inaczej szersza treść (figury, obrazki) rozpycha kolumnę i całą stronę */
@media (max-width: 460px) {
  .sheet ol, .sheet ul { columns: 1 !important; column-count: 1 !important; }
}
.sheet.ju-editing [contenteditable="true"]:hover { background: #FFFDF0; }
.sheet.ju-editing [contenteditable="true"]:focus { outline: 2px dashed #2F5DA8;
  outline-offset: 2px; background: #FFFDF0; }
.ju-editbar { background: #FFF7D6; border: 1px solid #E8D48A; border-radius: 10px;
  padding: 8px 14px; margin: 0 0 14px; font-size: .92rem; }
.sheet.narrow { max-width: 820px; }
.divider { margin: 6px 0 14px; }
footer.sitefooter { border-top: 1px solid var(--border); margin-top: 40px;
  background: var(--card); }
/* Stopka w kolumnach. Wcześniej była ścianą dziewiętnastu odnośników
   w trzech rzędach, bez podziału na grupy — trudno było cokolwiek
   w niej znaleźć. */
.stopka-kol { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px 26px; margin: 0 0 22px; }
.stopka-kol .nag { font-weight: 800; color: var(--ink); font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.stopka-kol a { display: block; padding: 3px 0; text-decoration: none; }
.stopka-kol a:hover { text-decoration: underline; }
.stopka-dol { display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 16px; }

/* Blok zewnętrzny NIE może być flexem — rozbijał siatkę kolumn
   i układał je jedna pod drugą, a opis serwisu wskakiwał obok. */
footer.sitefooter .inner { max-width: 1020px; margin: 0 auto;
  padding: 26px 20px; color: var(--muted); font-size: .88rem;
  display: block; }
footer.sitefooter a { color: var(--muted); }

/* ---------- karty-kafelki ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; padding: 0; list-style: none; margin: 10px 0 0; }
.cards li { border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; background: var(--card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; position: relative;
  transition: box-shadow .12s, transform .12s; }
/* Klikalny cały kafelek, nie sam tytuł. Odnośnik rozciąga się niewidocznie
   na całą płytkę — czytniki ekranu wciąż widzą normalny link z tytułem. */
.cards li a.t::after { content: ""; position: absolute; inset: 0;
  border-radius: 14px; }
.cards li:hover { box-shadow: 0 4px 14px rgba(38,42,51,.13);
  transform: translateY(-1px); }
.cards li:focus-within { outline: 3px solid #2F5DA8; outline-offset: 2px; }
/* elementy, które mają pozostać klikalne osobno, muszą być nad nakładką */
.cards li .chips, .cards li a:not(.t) { position: relative; z-index: 1; }
/* Opis rośnie, a plakietki etapów siadają na dole — dzięki temu kafelki
   w rzędzie kończą się równo, zamiast zostawiać przypadkową pustkę. */
.cards li .meta { flex: 1 1 auto; }
.cards li .chips { margin-top: auto; padding-top: 8px; }
.cards .kind { font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cards a.t { font-family: "Fraunces", serif; font-size: 1.08rem;
  font-weight: 600; color: var(--ink); text-decoration: none;
  display: block; margin-top: 2px; }
.cards a.t:hover { color: var(--accent); }
.cards .meta { font-size: .84rem; color: var(--muted); margin-top: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* Znacznik „edytowalna”. Celowo dyskretny — informacja, nie zachęta.
   Kolor to ten sam brąz co przy kartach ostrzegawczych; kontrast wobec
   tła kafelka sprawdza sprawdz_kontrast(). */
.cards li .edyt { font-size: .78rem; font-weight: 700; color: #83420F;
  background: #F8D0A4; border-radius: 999px; padding: 2px 9px;
  margin-top: 8px; align-self: flex-start; white-space: nowrap; }
.edyt-info { border: 1.5px dashed #E8B87A; background: #FFFBF4;
  border-radius: 12px; padding: 14px 18px; margin: 0 0 22px;
  font-size: .95rem; line-height: 1.55; }
.edyt-info b { color: #83420F; }
/* Pasek serwisu siostrzanego. Wyraźnie inny od kafelków działów, żeby
   było widać, że to odesłanie POZA serwis, a nie kolejna sekcja.
   Kontrast pary #EEF3FB / #1D3D6E sprawdza sprawdz_kontrast(). */
/* Blok „zadań nie układa AI”. Zielony, inny niż niebieski pasek serwisu
   siostrzanego i inny niż pastelowe kafelki działów — ma być czytany
   jako oświadczenie, a nie jako kolejna zachęta.
   Kontrast #EAF3EC / #24512F sprawdza sprawdz_kontrast(). */
/* „Bez AI” w pasku obietnic. Wyróżniony zielonym, bo to jedyna z tych
   obietnic, która wymaga wyjaśnienia — reszta jest oczywista. Tooltip
   mówi co, blok .niealgo niżej tłumaczy dlaczego. */
.paski .paski-ai { background: #EAF3EC; color: #24512F;
  border-color: #BFDFB8; font-weight: 800; }
/* Pasek faktów: w jednym rzędzie na szerokim ekranie (liczba kolumn
   ustalana w styl.pasek_faktow), dwa rzędy na telefonie. */
@media (max-width: 560px) {
  .fakty { grid-template-columns: repeat(2, 1fr) !important; }
}
.niealgo { background: #EAF3EC; border: 1.5px solid #BFDFB8;
  border-radius: 16px; padding: 22px 26px; margin: 34px 0; }
.niealgo h2 { margin: 0 0 10px; font-size: 1.28rem; color: #24512F; }
.niealgo p { margin: 0 0 10px; font-size: .96rem; line-height: 1.65;
  max-width: 68ch; }
.niealgo-wiecej { margin: 4px 0 0; font-weight: 700; }
.siostra { display: flex; gap: 22px; align-items: center;
  flex-wrap: wrap; background: #EEF3FB; border: 1.5px solid #B3D0F0;
  border-radius: 16px; padding: 22px 26px; margin: 34px 0; }
.siostra-tresc { flex: 1; min-width: 260px; }
.siostra-nad { font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #1D3D6E; opacity: .8; }
.siostra h2 { margin: 4px 0 8px; font-size: 1.28rem; }
.siostra p { margin: 0; font-size: .96rem; line-height: 1.6; }
.siostra-btn { display: inline-block; white-space: nowrap;
  background: #1D3D6E; color: #fff; text-decoration: none;
  font-weight: 700; border-radius: 10px; padding: 12px 20px; }
.siostra-btn:hover { background: #16305a; }
@media (max-width: 560px) { .siostra-btn { width: 100%; text-align: center; } }
.chip { font-size: .74rem; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--paper);
  border: 1px solid var(--border); color: var(--muted); }
.chip.stage { color: #fff; border: none; }
.cat { font-family: "Fraunces", serif; font-size: 1.35rem;
  margin: 38px 0 4px; }
.catdesc { color: var(--muted); font-size: .95rem; max-width: 68ch;
  margin: 0 0 8px; }

/* ---------- strona karty pracy ---------- */
.parentnote { border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--card); border-radius: 10px; padding: 14px 18px;
  margin: 0 0 26px; font-size: .95rem; }
.parentnote b { font-family: "Fraunces", serif; }
.actions { margin: 30px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
button.print { font: inherit; font-weight: 700; padding: 10px 22px;
  cursor: pointer; background: var(--margines); color: #fff; border: none;
  border-radius: 10px; }
button.print:hover { filter: brightness(1.06); }
button.print.alt { background: #fff; color: var(--margines);
  border: 2px solid var(--margines); padding: 8px 20px; }
a.answerlink { font-size: .92rem; align-self: center; font-weight: 600; }
svg.kaligrafia { width: 100%; height: auto; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; }

/* ---------- sudoku ---------- */
table.sudoku { border-collapse: collapse; margin: 0 auto; }
table.sudoku td { width: 13.5mm; height: 13.5mm; text-align: center;
  vertical-align: middle; font-size: 8.2mm; border: 1px solid var(--grid);
  padding: 0; background: #fff; }
table.sudoku td.r0 { border-top: 2.6px solid var(--grid-strong); }
table.sudoku td.c0 { border-left: 2.6px solid var(--grid-strong); }
table.sudoku tr:last-child td { border-bottom: 2.6px solid var(--grid-strong); }
table.sudoku td:last-child { border-right: 2.6px solid var(--grid-strong); }
table.sudoku.small td { width: 7mm; height: 7mm; font-size: 4.4mm; }
table.sudoku td.given { font-weight: 700; }
table.sudoku td.filled { color: var(--solution); }

/* ---------- word search ---------- */
table.ws { border-collapse: collapse; margin: 0 auto;
  border: 2px solid var(--grid-strong); background: #fff; }
table.ws td { width: 9mm; height: 9mm; text-align: center;
  vertical-align: middle; font-size: 5.2mm; padding: 0; }
table.ws td.hit { background: #DCE7F7; color: var(--accent);
  font-weight: 700; border-radius: 50%; }
ul.wordlist { columns: 3; list-style: none; padding: 0;
  margin: 18px auto 0; max-width: 170mm; font-size: .95rem; }
ul.wordlist li::before { content: "☐  "; color: var(--muted); }

/* ---------- crossword ---------- */
table.cw { border-collapse: collapse; margin: 0 auto; }
table.cw td { width: 9mm; height: 9mm; padding: 0; position: relative; }
table.cw td.cell { border: 1px solid var(--grid-strong); background: #fff;
  text-align: center; vertical-align: middle; font-size: 5mm; }
table.cw td .num { position: absolute; top: .4mm; left: .8mm;
  font-size: 2.6mm; color: var(--muted); }
table.cw td.cell.letter { color: var(--solution); font-weight: 600; }
.clues { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
  margin-top: 22px; font-size: .92rem; }
.clues h2 { font-size: 1.05rem; margin: 0 0 6px; }
.clues ol { margin: 0; padding: 0; list-style: none; }
.clues li { margin: 3px 0; }
.clues li b { color: var(--accent); }

/* ---------- maze ---------- */
figure.maze { margin: 0; text-align: center; }
figure.maze svg { max-width: 100%; height: auto; }

/* ---------- math worksheet ---------- */
.namebar { display: flex; gap: 30px; font-size: .95rem; color: var(--muted);
  margin-bottom: 18px; }
ol.proza { columns: 1 !important; padding-left: 22px; }
ol.proza li { margin-bottom: 8px; break-inside: avoid; }
ol.math { columns: 3; column-gap: 26px; font-size: 1.08rem;
  padding-left: 1.6em; margin: 0; }
ol.math li { margin: 0 0 10px; break-inside: avoid; }
svg.geo { max-width: 100%; height: auto; }
.ex:has(> table.ws), .ex:has(> table.cw) { overflow-x: auto; }
table.ws, table.cw { max-width: none; }
ol li::marker { color: #A7ADB8; font-weight: 400; }
/* Luka w wyrazie: kolorowa i lekko podświetlona, żeby dziecko od razu
   widziało, gdzie ma pisać. Wcześniej była szarą kreską ginącą w tekście. */
/* ---- Nagłówek strony głównej ----
   Dwie kolumny: obietnica po lewej, podgląd karty po prawej. Wcześniej
   był to szeroki blok w kratkę z ilustracjami po bokach — ładny, ale
   zajmował cały pierwszy ekran, nie mówiąc, co dalej. Teraz obok tekstu
   widać od razu, jak wygląda karta, a pod spodem zaczyna się ścieżka
   wyboru. */
.hero2 { display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 44px; align-items: center; padding: 44px 0 12px; }
.hero2 h1 { font-size: clamp(1.9rem, 4.4vw, 2.75rem); margin: 0 0 14px;
  line-height: 1.16; }
/* zakreślenie markerem — akcent w nagłówku bez dokładania koloru tła */
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::after { content: ""; position: absolute; left: -4px; right: -4px;
  bottom: 1px; height: .36em; background: var(--pk-yellow); z-index: -1;
  transform: rotate(-.6deg); border-radius: 2px; }
.hero2 .lead { font-size: 1.08rem; color: var(--muted); max-width: 52ch;
  margin: 0; }
.hero2 .paski { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
/* Pigułki działają tak samo w nagłówku strony głównej i pod tytułem
   karty — jeden wzór zamiast dwóch podobnych. */
.paski.karta { display: flex; gap: 9px; flex-wrap: wrap;
  margin: 0 0 22px; }
.paski.karta span { font-size: .84rem; font-weight: 700; padding: 6px 13px;
  border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); color: var(--muted); }
@media print { .paski.karta { display: none; } }

.hero2 .paski span { font-size: .84rem; font-weight: 700; padding: 6px 13px;
  border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); color: var(--muted); }
/* podgląd karty — sugeruje, co dostaje użytkownik po kliknięciu */
.hero2 .podglad { background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow); padding: 24px 26px;
  transform: rotate(.7deg); }
/* Karuzela ćwiczeń interaktywnych. Dziesięć kafelków w rzędzie zajęłoby
   pół ekranu, a to jest sekcja pomocnicza — przewijanie w poziomie
   pokazuje wszystkie, zajmując jeden rząd.

   Świadomie bez strzałek nawigacyjnych: na telefonie przewija się
   palcem, na komputerze kółkiem z klawiszem Shift albo paskiem, który
   zostawiamy widoczny. Strzałki wymagałyby skryptu i i tak są mniej
   wygodne niż przewijanie. */
.karuzela { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px;
  margin: 0; list-style: none; scroll-snap-type: x mandatory;
  scrollbar-width: thin; }
.karuzela li { flex: 0 0 208px; scroll-snap-align: start;
  background: var(--fill, var(--card)); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px 18px; display: flex;
  flex-direction: column; gap: 3px; transition: transform .12s; }
.karuzela li:hover { transform: translateY(-3px); }
.karuzela .t { font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.04rem; color: var(--txt, var(--ink)); text-decoration: none; }
.karuzela .op { font-size: .85rem; color: var(--txt, var(--muted));
  opacity: .84; line-height: 1.4; }
.karuzela .ik { line-height: 0; margin-bottom: 6px; }
.karuzela::-webkit-scrollbar { height: 8px; }
.karuzela::-webkit-scrollbar-thumb { background: #CBD3DF; border-radius: 9px; }
@media print { .karuzela { display: none; } }


/* Okno podglądu: pokazuje GÓRNY fragment karty w naturalnej skali.
   Wcześniej cała strona A4 była ściśnięta do szerokości kafelka
   i tekst robił się nieczytelny. */
/* Miniatura ma 302 px szerokości. Rozciąganie jej na szerokość kolumny
   (ok. 420 px), a tym bardziej do 150%, dawało rozmycie — obrazu nie da
   się powiększyć ponad to, co w nim jest. Dlatego okno ma stałą
   szerokość równą miniaturze i jest wyśrodkowane. */
.hero2 .podglad .okno {
  width: 302px; max-width: 100%; height: 185px; margin: 0 auto 14px;
  overflow: hidden; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; }
/* Plik ma 600 px, wyświetlamy na 302 px — dzięki temu na ekranie
   o podwójnej gęstości obraz jest ostry, a nie rozciągany. */
.hero2 .podglad .okno img { width: 302px; max-width: 100%; display: block; }
.hero2 .podglad { max-width: 380px; margin-left: auto; }
.hero2 .podglad .lin { height: 1px; background: var(--grid);
  margin: 0 0 20px; position: relative; }
.hero2 .podglad .lin::before { content: ""; position: absolute; left: 0;
  top: -9px; height: 8px; border-radius: 4px; background: #DDE4EE;
  width: var(--w, 40%); }
@media (max-width: 860px) {
  .hero2 { grid-template-columns: 1fr; gap: 26px; padding-top: 28px; }
  .hero2 .podglad { transform: none; }
}

/* ---- Wspólny wzór kafelka na stronie głównej ----
   Strona główna zebrała pięć różnych stylów kafelków, bo powstawała
   etapami. Poniżej JEDEN wzór używany we wszystkich sekcjach:
   pastelowe wypełnienie, ikona, tytuł, opis. Różni je tylko barwa.  */
ul.kafle {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px; padding: 0; margin: 0; list-style: none;
}
/* Kafelek z ustawionym --fill dostaje pastelowe tło także w liście
   .cards. Wcześniej styl.kafelek() ustawiał zmienną, ale kontenerem
   był <ul class="cards">, który jej nie używał — kafelki wychodziły
   białe mimo poprawnie dobranej barwy. */
.cards li[style*="--fill"] {
  background: var(--fill); border-color: var(--fill); }
.cards li[style*="--fill"] .t,
.cards li[style*="--fill"] a.t { color: var(--txt); }
.cards li[style*="--fill"] .meta,
.cards li[style*="--fill"] .op { color: var(--txt); opacity: .82; }

ul.kafle li {
  background: var(--fill, var(--card)); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform .12s, box-shadow .12s;
}
ul.kafle li:hover { transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(38,42,51,.13), 0 16px 28px rgba(38,42,51,.10); }
ul.kafle .ik { line-height: 0; margin-bottom: 6px; }
ul.kafle .t, ul.kafle a.t {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.06rem; color: var(--txt, var(--ink));
  text-decoration: none; display: block; }
ul.kafle .op { font-size: .88rem; color: var(--muted); line-height: 1.45; }
ul.kafle li[style*="--fill"] .op { color: inherit; opacity: .82; }
/* kafelek z odnośnikiem klikalny w całości */
ul.kafle li { position: relative; }
ul.kafle a.t::after { content: ""; position: absolute; inset: 0;
  border-radius: 14px; }

/* ---- ETAP 4: nawigacja krokowa na stronie głównej ----
   Strona główna miała 44 kafelki naraz. Nawet kolorowe, w takiej
   liczbie przytłaczają — człowiek nie wie, od czego zacząć. Zamiast
   sześciu równorzędnych list jest teraz ścieżka: najpierw „dla kogo”
   (to pytanie zawęża najmocniej), potem „czego szukasz”. */
.krok { margin: 36px 0 0; }
.krok-nag { display: flex; align-items: baseline; gap: 12px; margin: 0 0 2px; }
.krok-nr { width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; font-weight: 800;
  font-size: .85rem; display: grid; place-items: center; }
.krok-nag h2 { margin: 0; }
.krok p.pod { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }

/* etapy — jeden rząd dużych celów */
ul.etapy { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; padding: 0; margin: 0; list-style: none; }
ul.etapy a { display: block; text-align: center; text-decoration: none;
  border-radius: 14px; padding: 18px 10px; background: var(--fill);
  box-shadow: var(--shadow); color: var(--txt);
  transition: transform .12s, box-shadow .12s; }
ul.etapy a:hover { transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(38,42,51,.14), 0 16px 28px rgba(38,42,51,.12); }
ul.etapy .nazwa { font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.12rem; }
ul.etapy .ile { font-size: .84rem; opacity: .82; margin-top: 2px; }

/* skróty działów — pigułki zamiast kolejnej siatki kafelków */
/* Równa siatka zamiast zawijanego rzędu. Przy różnych długościach nazw
   pigułki układały się w nierówne schodki i wyglądało to na bałagan. */
ul.skroty { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px; padding: 0; margin: 0; list-style: none; }
ul.skroty a { display: flex; align-items: center; gap: 10px; height: 100%;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 9px 16px 9px 12px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .94rem;
  box-shadow: 0 1px 2px rgba(38,42,51,.05);
  transition: border-color .12s, transform .12s; }
ul.skroty a:hover { border-color: var(--accent); transform: translateY(-2px); }
ul.skroty svg { flex: none; }
@media (max-width: 700px) {
  ul.etapy { grid-template-columns: repeat(2, 1fr); }
}

.luka { display:inline-block; min-width:1.9em; border-bottom:2.5px solid #2F5DA8;
  background:#EAF0FA; border-radius:4px 4px 0 0; margin:0 3px;
  vertical-align:baseline; }
ol.math > li { padding-left: 4px; }
ol.math > li::marker { color: #2F5DA8; font-weight: 700; }
/* Sekcje zadań dostają delikatne tło i kolorowy nagłówek. Kolejne sekcje
   na jednej karcie różnią się barwą, więc dziecko widzi, gdzie kończy się
   jedno polecenie, a zaczyna następne. Tła są bardzo jasne — nie zużywają
   tuszu i nie przeszkadzają przy pisaniu po wydruku. */
section.ex { border-radius: 12px; padding: 2px 14px 10px;
  margin: 0 0 16px; background: var(--tlo-sekcji, transparent); }
section.ex:nth-of-type(1) { --tlo-sekcji: #F4F7FB; --kol-sekcji: #3E6FB0; }
section.ex:nth-of-type(2) { --tlo-sekcji: #F3F8F2; --kol-sekcji: #57904F; }
section.ex:nth-of-type(3) { --tlo-sekcji: #FBF6EF; --kol-sekcji: #E0813C; }
section.ex:nth-of-type(4) { --tlo-sekcji: #F7F4FA; --kol-sekcji: #7B5EA7; }
section.ex:nth-of-type(5) { --tlo-sekcji: #FBF3F2; --kol-sekcji: #C94F3D; }
section.ex > h2 { border-left: 5px solid var(--kol-sekcji, var(--accent));
  padding-left: 10px; border-radius: 2px;
  color: var(--kol-sekcji, var(--ink)); }
.catdesc { border-radius: 8px; }
/* podpowiedź „Dla rodzica i nauczyciela” — cieplejsza, mniej urzędowa */
.parentnote { background: #FBF6EF; border-left: 4px solid #E0813C;
  border-radius: 0 12px 12px 0; }
.gapword { letter-spacing:1px; }
ol.math.answers { color: var(--solution); }

svg.doodle { vertical-align: middle; }
@media (max-width: 720px) { .hide-mobile { display: none; } }
.bigcards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.bigcards .bigtile { padding: 24px 22px; }
.bigcards .bigtile a.t { font-size: 1.35rem; display: flex;
  align-items: center; gap: 12px; }
.bigcards .bigicon { font-size: 2rem; }
.bigcards .meta { margin-top: 10px; font-size: .92rem; }
.adslot { margin: 22px 0; min-height: 90px; display: flex;
  align-items: center; justify-content: center; background: var(--card);
  border: 1px dashed var(--border); border-radius: 10px; }


.filtry { margin: 18px 0 6px; }
.filtry.brak-js { display: none; }
.filtry .grupa { display: flex; gap: 7px; flex-wrap: wrap;
  align-items: center; margin-bottom: 9px; }
.filtry .etykieta { font-size: .85rem; font-weight: 700; color: #6A7076;
  min-width: 84px; }
.filtry button { font: inherit; font-size: .92rem; font-weight: 600;
  padding: 6px 13px; border-radius: 20px; border: 2px solid #D8DCE2;
  background: #fff; color: #262A33; cursor: pointer; }
.filtry button:hover { border-color: #2F5DA8; }
.filtry button[aria-pressed="true"] { background: #2F5DA8; color: #fff;
  border-color: #2F5DA8; }
.filtry button .licz { opacity: .6; font-weight: 400; margin-left: 4px; }
.filtry button[aria-pressed="true"] .licz { opacity: .8; }
.filtry-info { font-size: .92rem; color: #6A7076; margin: 4px 0 0; }
.filtry-pusto { background: #F7F5EE; border-radius: 12px; padding: 16px 18px;
  margin: 14px 0; }
li.ukryta, h2.ukryta, h3.ukryta, ul.ukryta { display: none !important; }

/* Ratunek dla siatek zapisanych w atrybucie style. repeat(auto-fit, …)
   nie działa w WeasyPrincie (pakiety PDF, miniatury, podglądy), więc
   zamieniamy je na flex. W przeglądarce reguła nic nie psuje — daje
   praktycznie ten sam układ. */
[style*="auto-fit"], [style*="auto-fill"] {
  display: flex !important; flex-wrap: wrap !important; }
[style*="auto-fit"] > *, [style*="auto-fill"] > * {
  flex: 1 1 210px; min-width: 0; }

/* ---------- print ---------- */
.printfoot { display: none; }
@media print {
  /* dolny margines 16mm zamiast 12mm — 4mm rezerwy na stopkę */
  @page { size: A4; margin: 12mm 12mm 16mm; }
  /* Samo background:#fff NIE usuwa obrazu tła — kratka drukowałaby się
     na każdej karcie, zużywając tusz i utrudniając pisanie. */
  body { background: #fff; background-image: none; }
  .sheet { max-width: none; padding: 0; }
  .siteheader, .sitefooter, .actions, .parentnote, .no-print,
  .adslot, .divider, svg.doodle,
  .filtry, .filtry-pusto { display: none !important; }
  svg.kaligrafia { border: none; }
  /* position:fixed powtarza sie na kazdej stronie wydruku (CSS 2.1 9.3.1);
     bottom:-10mm sadza stopke w marginesie, poza obszarem tresci */
  .printfoot { display: block !important;
    position: fixed; left: 0; right: 0; bottom: -10mm;
    font: 400 8pt/1.25 'Nunito Sans', Arial, sans-serif;
    color: #8A9099; text-align: center;
    border-top: .4pt solid #DDE1E6; padding-top: 2mm; }
  .printfoot b { font-weight: 700; color: #5A6069; }
}

/* Widget z prawdziwym ćwiczeniem w nagłówku strony głównej.

   Gra ładuje się DOPIERO po kliknięciu — inaczej każde wejście na stronę
   pobierałoby całą grę wraz z jej czcionkami i dźwiękami, spowalniając
   stronę, na której większość ludzi i tak szuka czegoś innego. */
.widget-gra { background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow); padding: 14px;
  max-width: 400px; margin-left: auto; }
.wg-belka { display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 10px; }
.wg-etyk { font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); }
.wg-zmien { font-size: .8rem; color: var(--muted); text-decoration: none; }
.wg-zmien:hover { color: var(--accent); text-decoration: underline; }
.wg-ramka { position: relative; height: 330px; border-radius: 12px;
  overflow: hidden; background: var(--paper);
  border: 1px solid var(--border); }
.wg-ramka iframe { width: 100%; height: 100%; border: 0; display: block;
  background: #fff; }
/* Uwaga: żeby atrybut hidden działał mimo reguł klas z własnym
   display, w głównym arkuszu jest [hidden]{display:none!important}.
   Bez tego zasłona nie znikała i kliknięcie „Zagraj” wyglądało
   na bezskuteczne. */
.wg-zaslona { position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 20px;
  background: linear-gradient(160deg, var(--pk-blue), var(--pk-green)); }
.wg-nazwa { font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.4rem; color: var(--t-blue); }
.wg-opis { font-size: .9rem; color: var(--t-blue); opacity: .85;
  max-width: 26ch; line-height: 1.4; }
.wg-zaslona button { margin-top: 8px; }
.wg-drobne { font-size: .76rem; color: var(--t-blue); opacity: .7; }
.wg-stopka { font-size: .8rem; color: var(--muted); margin-top: 10px;
  text-align: center; line-height: 1.6; }
.wg-stopka a { color: var(--accent); }
@media (max-width: 860px) { .widget-gra { margin: 0 auto; } }
@media print { .widget-gra { display: none; } }
.mz-narzedzie { max-width: 760px; }
/* Powiązanie z kartami do druku. Narzędzie i karty uczą tego samego
   z dwóch stron: karta pokazuje zapis, narzędzie pozwala go usłyszeć. */
.mz-karty { background: #F4F7FB; border-left: 4px solid #3E6FB0;
  border-radius: 0 12px 12px 0; padding: 13px 17px; margin: 0 0 20px;
  font-size: .93rem; }
.mz-karty a { color: var(--accent); }
.mz-karty-opis { color: var(--muted); font-size: .88rem; margin-top: 6px; }
.mz-zakladki { display: flex; gap: 8px; margin: 0 0 16px; }
.mz-zak { font: inherit; font-weight: 700; padding: 9px 18px;
  border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); cursor: pointer; }
.mz-zak.akt { background: var(--accent); color: #fff;
  border-color: var(--accent); }
.mz-info { color: var(--muted); font-size: .95rem; margin: 0 0 14px; }
.mz-wybor { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.mz-mel { font: inherit; font-size: .9rem; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--ink); cursor: pointer; }
.mz-mel.akt { background: var(--pk-blue); border-color: var(--t-blue);
  color: var(--t-blue); }
.mz-pieciolinia { background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 10px; overflow-x: auto;
  margin: 0 0 14px; }
.mz-sterowanie { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; }
.mz-tempo { font-size: .88rem; color: var(--muted); display: flex;
  align-items: center; gap: 8px; }
.mz-tempo input { width: 120px; }
.mz-wartosci { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.mz-wart { font: inherit; font-size: .86rem; font-weight: 600;
  padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 8px; }
.mz-wart .zn { font-size: 1.3rem; line-height: 1; }
.mz-wart.akt { background: var(--pk-green); border-color: var(--t-green);
  color: var(--t-green); }
.mz-klawisze { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.mz-kl { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem;
  font-weight: 600; width: 54px; height: 62px; border-radius: 10px;
  border: 1.5px solid var(--border); background: #fff; color: var(--ink);
  cursor: pointer; }
.mz-kl:hover { background: var(--pk-yellow); border-color: #E4CE7A; }
.mz-kl:active { transform: translateY(2px); }
.mz-rodzaj { display: flex; gap: 8px; margin: 0 0 12px; }
.mz-rodz { font: inherit; font-size: .84rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--muted); cursor: pointer; }
.mz-rodz.akt { background: var(--accent); color: #fff;
  border-color: var(--accent); }

/* Klawiatura pianina. Czarne klawisze leżą NA białych, przesunięte
   w prawo o pół szerokości — tak jak na instrumencie. */
.mz-pianino { position: relative; margin: 0 0 14px; overflow-x: auto;
  padding-bottom: 4px; }
.mz-pian-w { display: flex; gap: 2px; width: max-content; }
.mz-bialy { width: 46px; height: 132px; border-radius: 0 0 7px 7px;
  border: 1.5px solid #C9CFD8; background: #fff; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 9px; font: 600 .84rem "Fraunces", Georgia, serif;
  color: var(--muted); }
.mz-bialy:hover { background: var(--pk-yellow); }
.mz-bialy:active { background: #F0E4A8; }
.mz-pian-c { position: absolute; top: 0; left: 0; height: 84px; }
.mz-czarny { position: absolute; top: 0; width: 30px; height: 84px;
  border-radius: 0 0 6px 6px; border: 1px solid #1A1D24;
  background: #262A33; color: #fff; cursor: pointer;
  font: 600 .68rem "Nunito Sans", sans-serif;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px; }
.mz-czarny:hover { background: #3D434F; }

.mz-licznik { font-size: .86rem; color: var(--muted); margin: 12px 0 0; }
@media print { .mz-zakladki, .mz-sterowanie, .mz-wartosci,
  .mz-klawisze, .mz-licznik { display: none; } }
.pk-narzedzie { max-width: 780px; }
.pk-mobil { background: #FBF6EF; border-left: 4px solid #E0813C;
  border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: .96rem; }
.pk-wybor { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.pk-poz { font: inherit; text-align: left; padding: 10px 16px;
  border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; }
.pk-poz b { font-family: "Fraunces", Georgia, serif; font-size: 1rem; }
.pk-poz span { font-size: .82rem; color: var(--muted); }
.pk-poz.akt { background: var(--pk-blue); border-color: var(--t-blue); }
.pk-poz.akt b, .pk-poz.akt span { color: var(--t-blue); }

.pk-paski { display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin: 0 0 12px; }
.pk-przel { font-size: .92rem; font-weight: 600; display: flex;
  align-items: center; gap: 7px; cursor: pointer; }
.pk-podp { font-size: .85rem; color: var(--muted); }

/* Tekst do przepisania. Pismo o stałej szerokości znaku, bo przy
   proporcjonalnym litery przeskakują w bok w miarę kolorowania
   i tekst „drga” pod wzrokiem dziecka. */
/* Tekst w CAŁOŚCI widoczny — bez przewijania. Wcześniej okno miało
   stałą wysokość i przy dłuższych tekstach trzeba było przesuwać pasek,
   co przy przepisywaniu jest nie do zniesienia: dziecko gubi miejsce
   za każdym razem, gdy spojrzy na klawiaturę.

   Dlatego pismo jest nieco mniejsze, a przy najdłuższych tekstach
   dodatkowo skalowane — patrz reguła poniżej. */
.pk-tekst { font-family: "Andika", "Nunito Sans", monospace;
  font-size: 1.08rem; line-height: 1.85; background: #fff;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 12px; letter-spacing: .01em;
  /* pre-wrap: spacje pozostają widoczne przy kolorowaniu, a tekst
     mimo to zawija się na końcu wiersza */
  white-space: pre-wrap; overflow-wrap: break-word; }
.pk-tekst.dlugi { font-size: .98rem; line-height: 1.75; }
.pk-tekst span.ok { color: #3F7038; }
.pk-tekst span.zle { color: #fff; background: #C94F3D; border-radius: 3px; }
.pk-tekst span.teraz { background: var(--pk-yellow);
  border-radius: 3px; box-shadow: 0 2px 0 #D9A62E; }

#pk-pole { width: 100%; font-family: "Andika", "Nunito Sans", monospace;
  font-size: 1.08rem; line-height: 1.7; padding: 12px 14px;
  border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--paper); color: var(--ink); resize: vertical; }
#pk-pole:focus { outline: 3px solid var(--pk-blue); border-color: var(--accent); }

.pk-wyniki { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin: 14px 0; }
.pk-wynik { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; text-align: center; }
.pk-wynik b { display: block; font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.pk-wynik span { font-size: .8rem; color: var(--muted); }

/* Klawiatura ekranowa. Lewa i prawa strona mają różne odcienie —
   przy nauce pisania podział rąk jest ważniejszy niż konkretne palce. */
.pk-klawiatura { background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; margin: 0 0 14px; }
.pk-rzad { display: flex; gap: 5px; margin-bottom: 5px; }
.pk-kl { width: 40px; height: 40px; border-radius: 7px;
  display: grid; place-items: center; font-weight: 700; font-size: .92rem;
  border: 1px solid #DDE4EE; background: #F7F9FC; color: #4A5260; }
.pk-kl.lewa { background: #F2F6FC; }
.pk-kl.prawa { background: #F6F3EA; }
.pk-kl.akt { background: var(--pk-yellow); border-color: #D9A62E;
  color: #71570B; transform: translateY(1px);
  box-shadow: inset 0 -2px 0 #D9A62E; }
.pk-kl.mod { width: 76px; font-size: .8rem; }
.pk-kl.spacja { width: 200px; font-size: .8rem; }
.pk-dol { margin-top: 8px; }
.pk-wskaz { font-size: .88rem; color: var(--muted); margin-top: 8px;
  min-height: 1.4em; }

.pk-naglowek-tekstu { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin: 0 0 8px;
  font-size: .86rem; color: var(--muted); }
.pk-inny { font: inherit; font-size: .86rem; font-weight: 600;
  padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--accent); cursor: pointer; }
.pk-inny:hover { border-color: var(--accent); }
.pk-zrodlo { font-size: .84rem; color: var(--muted); margin-top: 14px;
  border-top: 1px solid var(--border); padding-top: 10px; }

.pk-sterowanie { display: flex; gap: 10px; }
.pk-podsumowanie { background: #F3F8F2; border-left: 4px solid #57904F;
  border-radius: 0 12px 12px 0; padding: 14px 18px; margin-top: 14px;
  font-size: .98rem; line-height: 1.6; }
@media print { .pk-narzedzie { display: none; } }
.pl-narzedzie { max-width: 780px; }
.pl-krok { background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 17px 20px; margin: 0 0 13px; }
.pl-nieaktywny { opacity: .42; pointer-events: none; }
.pl-nag { display: flex; align-items: center; gap: 10px;
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.1rem; margin: 0 0 4px; }
.pl-nr { width: 25px; height: 25px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; font-weight: 800;
  font-size: .8rem; display: grid; place-items: center;
  font-family: "Nunito Sans", sans-serif; }
.pl-uwaga { font-size: .87rem; color: var(--muted); margin: 0 0 12px; }
.pl-opcje { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-op { font: inherit; font-size: .92rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--paper);
  color: var(--ink); cursor: pointer; display: inline-flex;
  align-items: center; }
.pl-op:hover { border-color: var(--accent); }
.pl-op.akt { background: var(--accent); color: #fff;
  border-color: var(--accent); }
.pl-op.pl-duzy { flex-direction: column; align-items: flex-start; gap: 2px;
  border-radius: 14px; padding: 13px 18px; text-align: left; }
.pl-op.pl-duzy b { font-family: "Fraunces", Georgia, serif;
  font-size: 1.04rem; }
.pl-op.pl-duzy span { font-size: .82rem; font-weight: 400; opacity: .78; }
.pl-licz { background: rgba(38,42,51,.10); border-radius: 999px;
  padding: 1px 8px; font-size: .75rem; font-weight: 700; margin-left: 8px; }
.pl-op.akt .pl-licz { background: rgba(255,255,255,.26); }

.pl-dzialy { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.pl-dzial { border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--paper); overflow: hidden; }
.pl-dzial-glowa { display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; }
.pl-dzial-glowa:hover { background: #EFEDE4; }
.pl-dzial.akt { border-color: var(--accent); background: #EEF4FC; }
.pl-dzial-nazwa { flex: 1 1 auto; font-weight: 600; font-size: .92rem; }
.pl-dzial-licz { font-size: .75rem; color: var(--muted); }
.pl-rozwin { font-size: .78rem; color: var(--accent); border: none;
  background: none; cursor: pointer; padding: 2px 4px; }
.pl-tematy { padding: 2px 12px 10px; border-top: 1px dashed var(--grid);
  max-height: 190px; overflow-y: auto; }
.pl-temat { display: flex; align-items: center; gap: 7px; font-size: .86rem;
  padding: 3px 0; cursor: pointer; }
.pl-temat input { margin: 0; }
.pl-temat .pl-n { margin-left: auto; color: var(--muted); font-size: .76rem; }

.pl-akcje { display: flex; gap: 10px; margin: 22px 0 0; }
.pl-tytul { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin: 30px 0 12px; }
.pl-tytul span { font-family: "Nunito Sans", sans-serif; font-size: .92rem;
  font-weight: 400; color: var(--muted); }
.pl-przekracza { background: #FBEEEB;
  border-left: 4px solid var(--margines); border-radius: 0 12px 12px 0;
  padding: 12px 16px; margin: 0 0 14px; font-size: .93rem; color: #8C3122; }
.pl-plan { list-style: none; padding: 0; margin: 0; }
.pl-poz { display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 13px 16px; margin: 0 0 10px; }
/* Kwadrat do odhaczenia — sprzężenie zwrotne na papierze. */
.pl-check { flex: none; width: 21px; height: 21px; border-radius: 5px;
  border: 2px solid var(--grid); margin-top: 3px; }
.pl-tresc { flex: 1 1 auto; min-width: 0; }
.pl-kind { display: block; font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.pl-nazwa { display: block; font-family: "Fraunces", Georgia, serif;
  font-weight: 600; font-size: 1.05rem; color: var(--ink);
  text-decoration: none; margin-top: 1px; }
.pl-nazwa:hover { color: var(--accent); }
.pl-opis { display: block; font-size: .85rem; color: var(--muted);
  margin-top: 2px; }
.pl-zmien { flex: none; font: inherit; font-size: .79rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; }
.pl-zmien:hover { border-color: var(--accent); color: var(--accent); }
.pl-pusto { color: var(--muted); padding: 14px; }
.pl-jeden-plik { display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; background: #F4F7FB; border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 16px 0 0; }
/* Pobranie kart to GŁÓWNE działanie — tam jest treść. Drukowanie
   samej listy zostaje, ale wygląda na to, czym jest: pomocniczym
   spisem. Wcześniej było odwrotnie i wyraźniejszy był przycisk,
   który drukował plan bez zadań. */
.pl-glowny { display: inline-block; font-weight: 800; font-size: 1.02rem;
  padding: 14px 26px; border-radius: 12px; background: var(--margines);
  color: #fff; text-decoration: none;
  box-shadow: 0 2px 3px rgba(38,42,51,.12), 0 8px 18px rgba(201,79,61,.22); }
.pl-glowny:hover { background: #B03F2F; }
.pl-drugorzedny { font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--muted); background: none; border: none; cursor: pointer;
  text-decoration: underline; padding: 0; }
.pl-drugorzedny:hover { color: var(--accent); }
.pl-jeden-plik { flex-direction: column; align-items: flex-start;
  gap: 10px; }
.pl-stopka { display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; margin-top: 14px; }
.pl-drobne { font-size: .85rem; color: var(--muted); max-width: 46ch; }

.pl-modal { position: fixed; inset: 0; z-index: 200; display: grid;
  place-items: center; background: rgba(38,42,51,.45); padding: 20px; }
.pl-modal-box { background: var(--card); border-radius: 16px;
  max-width: 520px; width: 100%; max-height: 78vh; display: flex;
  flex-direction: column; box-shadow: 0 20px 60px rgba(38,42,51,.3); }
.pl-modal-nag { display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.pl-modal-nag b { flex: 1 1 auto; font-family: "Fraunces", Georgia, serif;
  font-size: 1.06rem; }
.pl-modal-x { font-size: 1.5rem; line-height: 1; border: none;
  background: none; cursor: pointer; color: var(--muted); padding: 0 4px; }
.pl-modal-lista { overflow-y: auto; padding: 10px 14px 16px; }
.pl-m-temat { font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); margin: 12px 0 4px; }
.pl-m-poz { display: flex; width: 100%; align-items: center; gap: 10px;
  text-align: left; font: inherit; font-size: .91rem; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--paper); cursor: pointer; margin-bottom: 5px; }
.pl-m-poz:hover { border-color: var(--accent); }
.pl-m-poz.akt { background: var(--pk-blue); border-color: var(--t-blue); }
.pl-m-nazwa { flex: 1 1 auto; }
.pl-m-czas { font-size: .78rem; color: var(--muted); flex: none; }

@media print {
  .pl-krok, .pl-akcje, .pl-stopka, .pl-zmien, .pl-jeden-plik,
  .pl-modal { display: none !important; }
  .pl-poz { break-inside: avoid; border-left-width: 3px; }
  .pl-tytul { margin-top: 0; }
}
.ob-liczby { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.ob-liczby div { background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 16px; text-align: center;
  min-width: 96px; }
.ob-liczby b { display: block; font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem; color: var(--accent); line-height: 1.1; }
.ob-liczby span { font-size: .8rem; color: var(--muted); }
.ob-planer { background: #F4F7FB; border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 13px 17px; margin: 22px 0 0; }
/* Odnośnik z działu do obszaru — pokazuje, że dział jest częścią
   większej całości, i prowadzi do reszty materiału z tej dziedziny. */
.ob-nadrzedny { background: #F4F7FB; border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 18px;
  font-size: .94rem; }
.lk-panel { background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 20px; margin: 0 0 24px; }
.lk-stan { font-size: .98rem; margin-bottom: 10px; }
.lk-blad { color: var(--margines); font-weight: 700; }
.lk-uwaga { background: #FFF8E8; border-left: 4px solid #D9A62E;
  border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 10px 0 0;
  font-size: .89rem; line-height: 1.5; }
.lk-opcje { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; }
.lk-przel { font-size: .92rem; font-weight: 600; display: flex;
  align-items: center; gap: 7px; cursor: pointer; }
.lk-akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.lk-drobne { font-size: .85rem; color: var(--muted); margin: 12px 0 0; }

/* Każda karta zaczyna nową stronę wydruku — inaczej ćwiczenia
   zlewałyby się ze sobą i nie dałoby się ich rozdać osobno. */
.lk-karta { break-after: page; page-break-after: always; }
.lk-karta:last-child { break-after: auto; page-break-after: auto; }
.lk-okladka { break-after: page; page-break-after: always;
  padding: 20px 0; }
.lk-okladka h1 { margin: 0 0 4px; }
.lk-ile { color: var(--muted); margin: 0 0 18px; }
.lk-spis { font-size: 1.08rem; line-height: 2.2; padding-left: 0;
  list-style: none; counter-reset: sp; }
.lk-spis li { counter-increment: sp; display: flex; align-items: center;
  gap: 12px; }
.lk-spis li::before { content: counter(sp) "."; font-weight: 700;
  color: var(--accent); min-width: 1.4em; }
.lk-kwadrat { flex: none; width: 20px; height: 20px; border-radius: 4px;
  border: 2px solid var(--grid); }
.lk-stopka-okl { font-size: .88rem; color: var(--muted); margin-top: 28px;
  border-top: 1px solid var(--border); padding-top: 12px; }
.lk-odp-naglowek { text-align: left; }

/* W podglądzie na ekranie oddzielamy karty kreską, żeby było widać,
   gdzie kończy się jedna, a zaczyna druga. */
@media screen {
  .lk-karta, .lk-okladka { border-bottom: 2px dashed var(--grid);
    padding-bottom: 26px; margin-bottom: 26px; }
  .lk-karta:last-child { border-bottom: none; }
}
@media print {
  .lk-panel { display: none !important; }
  .lk-karta, .lk-okladka { border: none; margin: 0; padding: 0; }
}
.lo-narzedzie { max-width: 900px; }
.lo-pasek { background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; }
.lo-postep { display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px; }
.lo-licznik { font-weight: 700; font-size: .92rem; flex: none; }
.lo-belka { flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: var(--grid); overflow: hidden; }
.lo-belka-wyp { height: 100%; background: var(--accent);
  transition: width .25s; }
.lo-kroki { display: flex; gap: 6px; flex-wrap: wrap; }
.lo-krok { width: 34px; height: 34px; border-radius: 9px; font: inherit;
  font-weight: 700; font-size: .88rem; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--paper);
  color: var(--muted); }
.lo-krok:hover { border-color: var(--accent); }
.lo-krok.akt { background: var(--accent); color: #fff;
  border-color: var(--accent); }
.lo-krok.zrobione { background: var(--pk-green); color: var(--t-green);
  border-color: var(--t-green); }

.lo-tytul { display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin: 0 0 10px; }
.lo-tytul h2 { margin: 0; font-size: 1.24rem; }
.lo-dzial { font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); }
.lo-czas { font-size: .82rem; color: var(--muted); margin-left: auto; }
.lo-koniec-czasu { background: #F3F8F2; border-left: 4px solid #57904F;
  border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 12px;
  font-size: .93rem; }
/* Delikatne przypomnienie, nie alarm — dziecko może zostać dłużej. */
@keyframes lo-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,79,61,.45); }
  50% { box-shadow: 0 0 0 8px rgba(201,79,61,0); }
}
.lo-pulsuje { animation: lo-puls 1.8s ease-in-out 3; }

/* Ramka z ćwiczeniem. Wysokość dobrana tak, żeby najwyższe z gier
   mieściło się bez przewijania wewnątrz ramki. */
.lo-ramka { border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; background: #fff; height: 620px; }
.lo-ramka iframe { width: 100%; height: 100%; border: 0; display: block; }

.lo-nawigacja { display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin: 16px 0 0; }
.lo-osobno { font-size: .85rem; color: var(--muted); }
.lo-brawo { color: var(--muted); max-width: 60ch; }
.lo-podsum { list-style: none; padding: 0; margin: 16px 0 0; }
.lo-podsum li { display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 12px 16px; margin: 0 0 9px; }
.lo-kwadrat { flex: none; width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--grid); }
.lo-podsum a { flex: 1 1 auto; font-family: "Fraunces", Georgia, serif;
  font-weight: 600; color: var(--ink); text-decoration: none; }
.lo-podsum a:hover { color: var(--accent); }
.lo-dz { font-size: .76rem; color: var(--muted); }
.lo-pusto { background: #FFF8E8; border-left: 4px solid #D9A62E;
  border-radius: 0 12px 12px 0; padding: 16px 20px; }
@media (max-width: 700px) { .lo-ramka { height: 500px; } }
@media print { .lo-narzedzie { display: none; } }
.genform { border: 1.5px solid var(--ink); border-radius: 8px;
  background: #fff; padding: 18px 20px; margin-bottom: 26px; }
.genform label { display: block; font-weight: 600; font-size: .92rem;
  margin: 12px 0 4px; }
.genform select, .genform textarea { display: block; width: 100%;
  font: inherit; padding: 8px 10px; border: 1px solid var(--grid);
  border-radius: 4px; background: var(--paper); margin-top: 4px; }
.genform textarea { resize: vertical; }
.optrow { display: flex; gap: 16px; align-items: end; flex-wrap: wrap;
  margin-top: 14px; }
.optrow label { flex: 1; min-width: 140px; margin: 0; }
button.print.alt { background: #fff; color: var(--accent);
  border: 2px solid var(--accent); }
.status { color: var(--muted); font-size: .9rem; }
.warnmsg { color: #a05a00; font-size: .9rem; min-height: 1.2em; margin: 8px 0 0; }
/* Opis pod generatorem. Blok jest WĘŻSZY od karty wyniku i ma mniejszy
   tekst, żeby nie konkurował wzrokiem z formularzem — ktoś, kto wszedł
   generować, ma najpierw zobaczyć pole do wpisania, a nie ścianę tekstu. */
.genopis { max-width: 62ch; margin: 34px 0 0; font-size: .95rem;
  line-height: 1.6; color: var(--ink); }
.genopis h2 { font-size: 1.12rem; margin: 26px 0 8px; }
.genopis ul { margin: 8px 0 0; padding-left: 22px; }
.genopis li { margin: 4px 0; }
.genopis .lit a { display: inline-block; margin: 2px 6px 2px 0;
  font-weight: 700; text-decoration: none; }
@media print { .genform, .no-print { display: none !important; } }

/* ---------- logopedia ---------- */
/* Uwaga: NIE używamy tu grid + repeat(auto-fit, …). WeasyPrint tego nie
   obsługuje i zwija wszystko do jednej kolumny — a WeasyPrintem budowane są
   pakiety PDF. Efekt: na stronie były cztery kolumny, a w pakiecie jedna
   z morzem pustego miejsca. Flex daje ten sam układ i działa wszędzie. */
.syllgroups { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
/* Każda grupa sylabowa dostaje własny kolor — dziecko od razu widzi,
   że kolumny to osobne poziomy trudności, a karta przestaje być
   ścianą czarnego tekstu. Kolory te same, co przy etapach nauki. */
.syllgroups > div { flex: 1 1 150px; min-width: 0; border-radius: 10px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--border);
  border-top: 4px solid var(--grupa, var(--accent)); }
.syllgroups > div:nth-child(1) { --grupa: #57904F; }
.syllgroups > div:nth-child(2) { --grupa: #3E6FB0; }
.syllgroups > div:nth-child(3) { --grupa: #E0813C; }
.syllgroups > div:nth-child(4) { --grupa: #7B5EA7; }
.syllgroups > div:nth-child(5) { --grupa: #C94F3D; }
.syllgroups h2 { font-size: .9rem; margin: 0 0 8px; color: var(--grupa);
  text-transform: uppercase; letter-spacing: .04em; }
.syllgroups ul { list-style: none; margin: 0; padding: 0; font-size: 1.12rem; }
.syllgroups li { padding: 4px 0 4px 16px; position: relative;
  border-bottom: 1px dotted var(--grid); }
.syllgroups li::before { content: ""; position: absolute; left: 2px;
  top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--grupa); opacity: .55; }
.syllgroups li:last-child { border-bottom: none; }
section.ex { margin-top: 26px; }
section.ex h2 { font-size: 1.05rem; border-bottom: 2px solid var(--ink);
  padding-bottom: 4px; }
.divlines { list-style: decimal; font-size: 1.15rem; padding-left: 1.6em; }
.divlines li { margin: 14px 0; }
.divlines .blank { display: inline-block; min-width: 60mm;
  border-bottom: 1.5px solid var(--ink); margin-left: 10px; }
.divlines .done { color: var(--solution); font-weight: 600; margin-left: 10px; }

/* ---------- ortografia ---------- */
ol.gaps { columns: 2; column-gap: 40px; font-size: 1.25rem;
  padding-left: 1.5em; margin: 8px 0 0; }
ol.gaps li { margin: 0 0 14px; break-inside: avoid; }
ol.gaps .gapword { letter-spacing: .04em; }
ol.gaps .ans { color: var(--solution); font-weight: 700; }
ol.gaps .hint { display: block; font-size: .82rem; color: var(--muted); }
.pairbadge { display: inline-block; border: 2px solid var(--accent);
  color: var(--accent); border-radius: 6px; padding: 2px 12px;
  font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }

/* ---------- sylaby ---------- */
.reading { font-size: 1.5rem; line-height: 2.4; }
.reading .w { white-space: nowrap; margin-right: .55em; }
.reading .s { }
.reading .sep { color: var(--accent); font-weight: 400; padding: 0 1px; }
.reading.nodash .sep { display: none; }
.reading .odd { color: var(--ink); }
.reading .even { color: var(--accent); }
.reading.nodash .s { padding: 0 .5px; }