/* Fizyka krok po kroku — style (powłoka z „Chemii w ruchu” @ 519e3a0, ta z „W głąb materii”). Motyw ciemny, akcent zależy od
   rozdziału (--akcent). Rodzaje lekcji (Z / Zd / P / quiz) mają stałe barwy: --rodzaj-z, --rodzaj-zd, --rodzaj-p, --rodzaj-q. */
:root {
  --tlo: #03050b;
  --szklo: rgba(10, 16, 32, 0.74);
  --szklo-mocne: rgba(10, 15, 30, 0.92);
  --ramka: rgba(140, 170, 230, 0.16);
  --ramka-mocna: rgba(140, 170, 230, 0.32);
  --tekst: #e9eefb;
  --tekst-2: #a9b6d3;
  --tekst-3: #7383a6;
  --akcent: #4cc9f0;
  --dobrze: #6ee7a8;
  --zle: #ff7b7b;
  --cieply: #ffb347;
  --cien: 0 12px 40px rgba(0, 0, 0, 0.45);
  --promien: 16px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-naglowki: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --pasek-h: 60px;   /* wysokość treści paska; pasek z odstępem od paska stanu (safe-area-inset-top) — --pasek-dol */
  --pasek-dol: calc(var(--pasek-h) + env(safe-area-inset-top, 0px));
  --margines: 16px;
  --panel-w: 380px;
  --kol-w: 300px;     /* prawa kolumna (odczyty) */
  --dok-h: 76px;
  --panel-h: 0px;
  --rodzaj-z: #4cc9f0;  /* zjawisko i prawo */
  --rodzaj-zd: #ffd166; /* zadanie z kluczem */
  --rodzaj-p: #ff7b7b;  /* pułapka */
  --rodzaj-q: #b69cff;  /* quiz */
  color-scheme: dark;
}
/* wczesny skrypt w index.html: użytkownik EN nie widzi przez chwilę polskich napisów (zdejmuje przetlumaczDOM) */
html.przed-tlumaczeniem [data-t] { visibility: hidden; }
/* Start (wczesny skrypt w index.html, zdejmuje main.js): do gotowości powłoki tylko tło; scena pojawia się płynnie */
html.ladowanie body > :not(.scena, .przejscie), html.czcionki .przejscie { visibility: hidden; }
html.scena-czeka .scena { opacity: 0; }
html.modul-czeka body::after { /* znak wczytywania (wolna sieć) — tylko gdy czekanie trwa dłużej niż 0,6 s */
  content: ''; position: fixed; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50% 0 50% 50%; rotate: -45deg;
  background: radial-gradient(circle at 35% 35%, #7fd0ff, #1f6fb8 55%, #0b2a55); box-shadow: 0 0 22px rgba(76, 201, 240, 0.45);
  opacity: 0; animation: wczytywanie 1.6s ease-in-out 0.6s infinite;
}
@keyframes wczytywanie-bez-ruchu { to { opacity: 0.5; } }
@keyframes wczytywanie { 0%, 100% { opacity: 0.25; transform: scale(0.9); } 50% { opacity: 0.8; transform: scale(1); } }
html:not(.ladowanie) :is(.pasek, .panel, .kolumna-prawa, .dok, .bok-uchwyt) { animation: pojaw 0.35s ease-out; } /* odsłonięcie na starcie */

* { box-sizing: border-box; }
/* Ikony SVG (js/core/ikony.js, js/ikony-tematu.js): rozmiar z czcionki otoczenia, kolor z napisu albo z atrybutu style (SZ-027) */
.ikona { width: 1.25em; height: 1.25em; vertical-align: -0.27em; flex: none; overflow: visible; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--tlo); color: var(--tekst); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
a { color: var(--akcent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--akcent); color: #001; padding: 8px 12px; border-radius: 8px; }
.pomin:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.bez-js { position: fixed; inset: 40% 10% auto; text-align: center; font-size: 1.2rem; }

/* ---------- Scena 3D ---------- */
.scena { position: fixed; inset: 0; z-index: 0; touch-action: none; transition: opacity 0.6s; }
.plotno-3d { display: block; position: absolute; inset: 0; cursor: grab; }
.plotno-3d:active { cursor: grabbing; }
.warstwa-etykiet { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.etykieta {
  font: 500 12px/1.2 var(--font); color: #fff; padding: 3px 8px; border-radius: 999px;
  background: rgba(6, 10, 22, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap;
  transform: translateY(-14px); text-shadow: 0 1px 2px #000; pointer-events: none; user-select: none;
}
.etykieta.duza { font: 600 14px/1.2 var(--font-naglowki); padding: 5px 11px; }
.etykieta.akcent { border-color: var(--akcent); color: var(--akcent); }
.etykieta.cicha { background: none; border: none; color: var(--tekst-2); padding: 0; }
.etykieta.cicha.na-tle { background: rgba(3, 5, 11, 0.62); color: var(--tekst); padding: 1px 6px; border-radius: 6px; } /* „1 kratka = …”, „F_wyp = 0 N” czytelne na lustrze wody i ściankach (D2, D4) */
.etykieta.wartosc { font-variant-numeric: tabular-nums; }
/* Podpis ciała w barwie jego orbity (silnik.etykieta({ kolor }); barwa rozjaśniona do kontrastu ≥ 4,5:1 — core/kolory.js).
   Wyróżnienie (.akcent) — grubszy napis i obwódka w tej samej barwie, nie inny kolor. W trybie wymuszonych kolorów system
   podmienia barwę na CanvasText (bez reguły). */
.etykieta.barwna { color: var(--kolor-ciala); }
.etykieta.barwna.akcent { border-color: var(--kolor-ciala); font-weight: 700; }
/* przenikanie podpisu przypiętego do orbity przy powrocie na ciało (silnik._etykietyOrbit); .kolizja (!important) wygrywa */
.etykieta { opacity: var(--przenikanie, 1); }
.etykieta.klikalna { pointer-events: auto; cursor: pointer; }
.etykieta.klikalna:hover { background: rgba(30, 50, 90, 0.85); }
.etykieta.bez-przesuniecia { transform: none; }
.etykieta.kolizja { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.15s; } /* nachodzi na ważniejszą */
/* Wyróżnienie w rytm lektora (silnik.wyroznij, sygnały — js/core/sygnaly.js): poświata cieniem, bez zmiany wymiarów (etykieta
   nie przeskakuje); kolor napisu zostaje (bywa ustawiony w scenie). Kontrolka doku — obwódka. Ograniczony ruch: bez przejść (niżej). */
:where(.etykieta:not(.klikalna)) { transition: background-color 0.5s, box-shadow 0.5s; } /* :where — .kolizja (przejście krycia) wygrywa */
:where(.etykieta.klikalna) { transition: box-shadow 0.5s; } /* najechanie bez opóźnienia */
:where(.dok-sceny .kontrolka, .dok-sceny button, .odczyt, .wstawka) { transition: box-shadow 0.5s, outline-color 0.5s; } /* także gaśnięcie */
.etykieta.wyrozniona { background-color: rgba(18, 36, 72, 0.88); border-radius: 999px; box-shadow: 0 0 0 5px rgba(18, 36, 72, 0.88), 0 0 16px 7px rgba(120, 190, 255, 0.5); }
.wyrozniona:not(.etykieta) { outline: 2px solid var(--akcent); outline-offset: 2px; box-shadow: 0 0 14px 3px rgba(120, 190, 255, 0.45); }
:where(.dok-sceny .kontrolka, .dok-sceny button, .odczyt, .wstawka) { outline: 2px solid transparent; outline-offset: 2px; } /* obwódka gaśnie płynnie */
@media (forced-colors: active) { :where(.dok-sceny .kontrolka, .dok-sceny button, .odczyt, .wstawka) { outline-style: none; } } /* przezroczysta obwódka w trybie wysokiego kontrastu dostaje kolor systemowy — byłaby widoczna zawsze */
:where(.dok-sceny .kontrolka, .dok-sceny button):focus-visible { transition: none; } /* obwódka fokusu od razu, nie z przejściem wyróżnienia */

/* ---------- Pasek górny ---------- */
.pasek {
  position: fixed; top: 0; left: 0; right: 0; height: var(--pasek-dol); z-index: 20;
  /* safe-area-inset-top: odstęp od paska stanu, gdy strona sięga pod niego (np. pasek stanu „black-translucent”, Android);
     z ekranu głównego iOS przy „black” (index.html) i w Safari inset 0 */
  display: flex; align-items: center; gap: 14px; padding: env(safe-area-inset-top, 0px) var(--margines) 0;
  background: linear-gradient(to bottom, rgba(3, 5, 12, 0.95), rgba(3, 5, 12, 0.85) 72%, transparent); /* gęsta scena (tłum cząsteczek) nie prześwituje przez ikony */
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tekst); flex: none; }
.logo-znak { width: 26px; height: 24px; margin: 3px 2px 0; position: relative; flex: none; } /* znak strony: kostka zanurzona do połowy w wodzie (jak ikona strony) */
.logo-znak::before { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 11px; border-radius: 3px 3px 6px 6px;
  background: linear-gradient(#4cc9f0cc, #1f6fb8cc); box-shadow: 0 0 10px rgba(76, 201, 240, 0.35); }
.logo-znak::after { content: ''; position: absolute; left: 7px; top: 3px; width: 12px; height: 12px; border-radius: 2px;
  background: linear-gradient(135deg, #ffd9a0, #ffb347 55%, #c97a1f); box-shadow: 0 0 8px rgba(255, 179, 71, 0.35); }
.logo-tekst { font: 700 18px/1 var(--font-naglowki); letter-spacing: -0.01em; }
.logo-tekst em { font-style: normal; color: var(--akcent); transition: color 0.4s; }

.rozdzialy { flex: 1; min-width: 0; display: flex; justify-content: center; justify-content: safe center; position: relative; } /* safe: gdy się nie mieści, nie wylewa się w lewo na logo */
.rozdzialy-lista { display: flex; gap: 4px; align-items: center; }
.mobilny-rozdzial { display: none; }
.rozdzial-chip {
  --kolor: var(--akcent);
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; text-decoration: none;
  color: var(--tekst-2); border: 1px solid transparent; font-size: 13px; white-space: nowrap; position: relative;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rozdzial-chip:hover { background: rgba(255, 255, 255, 0.06); color: var(--tekst); }
.rozdzial-chip.aktywny { color: var(--tekst); border-color: color-mix(in srgb, var(--kolor) 60%, transparent); background: color-mix(in srgb, var(--kolor) 16%, transparent); }
.chip-ikona { font-size: 15px; display: flex; }
.chip-nr { display: none; }
.chip-gwiazdka { color: #ffd166; font-size: 11px; position: absolute; top: -2px; right: 0; }
.pasek-prawa { display: flex; align-items: center; gap: 8px; flex: none; }

.przycisk-maly { border: 1px solid var(--ramka); background: rgba(255, 255, 255, 0.04); color: var(--tekst-2); border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.przycisk-maly:hover { color: var(--tekst); border-color: var(--ramka-mocna); }

/* ---------- Panel z opowieścią ---------- */
.panel {
  position: fixed; z-index: 10; left: var(--margines); top: calc(var(--pasek-dol) + 8px); bottom: calc(var(--dok-h) + var(--margines) * 2);
  width: var(--panel-w); display: flex; flex-direction: column; border-radius: var(--promien);
  background: var(--szklo); border: 1px solid var(--ramka); box-shadow: var(--cien); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.panel-uchwyt { display: none; }
.panel-glowa > .panel-schowaj { display: none; } /* telefon (≤ 820 px) — niżej; selektor mocniejszy niż .przycisk-ikona (display: grid niżej w pliku — ▾ był widoczny na komputerze; SZ-136) */
.panel-glowa { display: flex; gap: 12px; align-items: center; padding: 16px 18px 10px; border-bottom: 1px solid var(--ramka); }
.panel-ikona { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--akcent) 18%, transparent); flex: none; color: var(--akcent); }
.panel-ikona .ikona { width: 0.95em; height: 0.95em; }
.panel-nr { margin: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akcent); font-weight: 600; }
.panel-tytul { margin: 2px 0 0; font: 700 22px/1.15 var(--font-naglowki); letter-spacing: -0.01em; }
.panel-cialo { flex: 1; overflow-y: auto; padding: 12px 18px 16px; scrollbar-width: thin; scrollbar-color: var(--ramka-mocna) transparent; }
/* „jest więcej treści” (main.js, klasy przy przewijaniu): treść wygasa u krawędzi, za którą jest jej ciąg dalszy — tylko komputer
   (telefon ma własne maski stanów panelu) */
@media (min-width: 821px) {
  .panel-cialo { scroll-padding-block: 24px 40px; } /* fokus z Tab nie staje w wygaszonym pasie */
  .panel-cialo.wiecej-nizej { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
  .panel-cialo.wiecej-wyzej { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px); mask-image: linear-gradient(to bottom, transparent, #000 24px); }
  .panel-cialo.wiecej-wyzej.wiecej-nizej { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent); }
}
.metryczka { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6px; }
.metryczka li { background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.metryczka span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-3); }
.metryczka strong { font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.krok-tytul { font: 600 18px/1.25 var(--font-naglowki); margin: 4px 0 8px; color: var(--tekst); }
/* Rodzaj lekcji nad tytułem: znaczek Z / Zd / P w barwie rodzaju, numer lekcji i nazwa rodzaju (main.js renderujPanel) */
.znak-rodzaju { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 5px; flex: none;
  font: 700 10.5px/1 var(--font-naglowki); letter-spacing: 0.02em; color: #071020; background: var(--rodzaj-z); }
.znak-rodzaju[data-rodzaj='Zd'] { background: var(--rodzaj-zd); }
.znak-rodzaju[data-rodzaj='P'] { background: var(--rodzaj-p); }
.znak-rodzaju[data-rodzaj='Q'] { background: var(--rodzaj-q); }
.krok-rodzaj { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tekst-3); }
.lektor-przycisk { margin: 0 0 10px; font-size: 12px; }
.lektor-przycisk.gra { border-color: var(--akcent); color: var(--akcent); }
.lektor-przycisk[aria-disabled='true'] { opacity: 0.5; cursor: help; }
.krok-tekst p { margin: 0 0 10px; }
.krok-tekst ul, .krok-tekst ol { margin: 0 0 10px; padding-left: 20px; }
.krok-tekst li { margin-bottom: 4px; }
.krok-tekst strong { color: #fff; }
.krok-tekst em { color: var(--akcent); font-style: normal; }
.krok-tekst .wzor { display: block; font-family: 'Space Grotesk', ui-monospace, monospace; background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--akcent); padding: 6px 10px 6px calc(10px + 1.5em); text-indent: -1.5em; margin: 8px 0; border-radius: 0 8px 8px 0; overflow-x: auto; white-space: normal; }
/* łamanie wierszy wzoru: miejsca wskazuje main.js (lamliwyWzor), kolejne wiersze z wcięciem */
.krok-tresc .wektor { position: relative; } /* inline: inline-block dawał miejsca łamania obok niełamliwych spacji */
.krok-tresc .wektor::after { content: ''; position: absolute; left: 0.05em; right: -0.05em; top: -0.12em; height: 0.3em; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 4' preserveAspectRatio='none'%3E%3Cpath d='M0 2h9M7 0.4L9.4 2 7 3.6' fill='none' stroke='%23c9d4ee' stroke-width='0.8'/%3E%3C/svg%3E"); } /* strzałka wektora (main.js strzalkiWektorow) */
.krok-tekst sub, .krok-tekst sup { line-height: 0; }
.krok-tekst sup.nad { display: inline-flex; justify-content: center; width: 0; margin: 0 0.35em; position: relative; left: 0.79em; top: -0.5em; text-indent: 0; font-size: 0.68em; white-space: nowrap; } /* dysocjacja: H₂O nad strzałką — <sup class="nad">H₂O</sup>→ (szerokość 0, wyśrodkowane nad strzałką) */
.krok-tekst .wzor:has(.nad) { padding-top: 12px; }
/* ułamek piętrowy (D5, js/core/ulamek.js): licznik nad kreską, mianownik pod; w wierszu tekstu i we wzorze, ok. 0,92 tekstu.
   Pozycje dzieci flex to bloki — text-indent wzoru (−1,5em) wyzerowany, inaczej licznik ucieka w lewo. */
.ulamek[data-ulamek] { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; text-align: center; font-size: 0.92em; line-height: 1.2; margin: 0.15em 0.15em; text-indent: 0; }
.ulamek[data-ulamek] > span { text-indent: 0; white-space: nowrap; padding: 0 0.25em; }
.ulamek[data-ulamek] > .licznik { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.ulamek[data-ulamek] > .mianownik { padding-top: 1px; }
.ulamek[data-ulamek] sub, .ulamek[data-ulamek] sup { line-height: 0; }
.wzor-zywy .ulamek[data-ulamek] { font-size: 0.86em; }
/* tekst lekcji i ramki: ułamek w pełnym stopniu wzoru, indeksy nieco większe (na telefonie ok. 8–9 px — ogląd 3b) */
.krok-tekst .wzor .ulamek[data-ulamek] { font-size: 1em; }
.krok-tekst .wzor sub, .krok-tekst .wzor sup:not(.nad) { font-size: 0.9em; } /* domyślne „smaller” ≈ 0,83em */
.dociekliwi-tresc .krok-tekst .wzor { margin: 11px 0; } /* ramka: bloki wzorów wyraźniej oddzielone */
/* Uwaga o modelu — ostatni akapit treści kroku (uproszczenia, tempo, przesada; zasada z „Pogody w ruchu”): mniejsza i bledsza
   od treści, lektor jej nie czyta (ARCHITEKTURA.md, „Treści”) */
.krok-tekst p.o-modelu { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--ramka); font-size: 0.86em; color: var(--tekst-2); }
.sprobuj, .ciekawostka { margin: 12px 0 4px; padding: 10px 12px 10px 14px; border-radius: 12px; position: relative; font-size: 14px; }
.sprobuj { background: color-mix(in srgb, var(--akcent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent); }
.ciekawostka { background: rgba(255, 209, 102, 0.08); border: 1px solid rgba(255, 209, 102, 0.3); }
.sprobuj-etykieta, .ciekawostka-etykieta { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.sprobuj-etykieta { color: var(--akcent); }
.sprobuj-etykieta::before, .ciekawostka-etykieta::before { /* ikona jako maska w kolorze napisu (jak core/ikony.js: „sprobuj”, „ciekawostka”) */
  content: ''; display: inline-block; width: 1.3em; height: 1.3em; margin-right: 0.4em; vertical-align: -0.32em; background: currentColor;
  -webkit-mask: var(--ikona-maska) center / contain no-repeat; mask: var(--ikona-maska) center / contain no-repeat;
}
.sprobuj-etykieta { --ikona-maska: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 6.2 18 11.6l-4.6 1.4-1.6 4.8Z'/%3E%3Cpath d='M13.4 13 18.2 17.8'/%3E%3Cpath d='M4.2 3.6l1.3 1.3M8.6 2.6v1.8M3 8h1.8'/%3E%3C/svg%3E"); }
.ciekawostka-etykieta { color: #ffd166; }
@media (forced-colors: active) { .sprobuj-etykieta::before, .ciekawostka-etykieta::before { background: CanvasText; } }
.ciekawostka-etykieta { --ikona-maska: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 17.2h5.6M9.8 20.4h4.4'/%3E%3Cpath d='M12 3.4a6 6 0 0 0-3.4 10.9c.5.4.6.9.6 1.5v1.4h5.6v-1.4c0-.6.1-1.1.6-1.5A6 6 0 0 0 12 3.4Z'/%3E%3C/svg%3E"); }
.sprobuj p, .ciekawostka p { margin: 0 0 6px; }
.sprobuj p:last-child, .ciekawostka p:last-child { margin: 0; }
/* Ramka „Dla dociekliwych” (poziom ramek, main.js ramkaDociekliwych): domyślnie zwinięta do jednej linii; w stopce przełącznik
   „Pokazuj szczegóły” (rozwija ramki we wszystkich krokach, dodaje liczby i odczyty sceny). Bez emoji — strzałka z obramowania. */
.dociekliwi { --dociekliwi: #c3b1ff; margin: 12px 0 4px; border: 1px solid color-mix(in srgb, var(--dociekliwi) 32%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--dociekliwi) 5%, transparent); }
.dociekliwi-naglowek { margin: 0; font: inherit; }
.dociekliwi-przycisk { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px 8px 14px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dociekliwi); -webkit-tap-highlight-color: transparent; }
.dociekliwi-przycisk:hover { color: #fff; }
.dociekliwi-przycisk:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.dociekliwi-znak { flex: none; width: 6px; height: 6px; margin: 0 1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; }
.dociekliwi.otwarta .dociekliwi-znak { transform: rotate(45deg) translate(-1px, -1px); }
.dociekliwi-tresc { padding: 0 12px 10px 14px; }
.dociekliwi-tresc .krok-tekst { font-size: 14px; }
.dociekliwi-sprobuj { margin: 4px 0 8px; padding: 7px 10px; border-left: 3px solid var(--akcent); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--akcent) 10%, transparent); font-size: 14px; }
.dociekliwi-sprobuj p { margin: 0 0 6px; }
.dociekliwi-sprobuj p:last-child { margin: 0; }
.dociekliwi-etykieta { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akcent); }
.dociekliwi-stopka { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ramka); }
.dociekliwi-zawsze { all: unset; display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-size: 13px; color: var(--tekst); user-select: none; -webkit-tap-highlight-color: transparent; }
.dociekliwi-zawsze .tor { width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.2s; flex: none; }
.dociekliwi-zawsze .tor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.dociekliwi-zawsze[aria-checked='true'] .tor { background: var(--akcent); }
.dociekliwi-zawsze[aria-checked='true'] .tor::after { transform: translateX(16px); }
.dociekliwi-zawsze:focus-visible .tor { outline: 2px solid var(--akcent); outline-offset: 2px; }
.dociekliwi-opis { flex: 1 1 100%; margin-top: -4px; font-size: 12px; line-height: 1.35; color: var(--tekst-3); }
.liczba-dociekliwi dt { color: var(--tekst-3); }
@media (forced-colors: active) { .dociekliwi-zawsze .tor { border: 1px solid CanvasText; } .dociekliwi-zawsze .tor::after { background: CanvasText; } .dociekliwi-zawsze[aria-checked='true'] .tor { background: Highlight; } }
.w-budowie { color: var(--tekst-2); font-style: italic; }
.liczby { margin-top: 14px; }
.liczby h3 { font: 600 12px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-3); margin: 0 0 6px; }
.liczby dl { margin: 0; display: grid; gap: 4px; }
.liczba { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--ramka); font-size: 13px; }
.liczba dt { color: var(--tekst-2); }
.liczba dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.quiz-start { width: 100%; margin-top: 14px; }
.krok-nawigacja { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ramka); }
.krok-srodek { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* bez min-width: 0 — nie węższy niż licznik */
/* Kropki zawsze w jednym rzędzie; gdy się nie mieszczą (dłuższy napis prawego przycisku, wąski panel) — znikają i zostaje
   sam licznik „n / m” (na tej samej wysokości: min-height). Kontener o szerokości środka: kropki nie poszerzają paska;
   próg = m · 16 px (kropka 10 + odstęp 6, 3 px na cień aktywnej z każdej strony). */
.krok-kropki { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: center; align-self: stretch; min-height: 10px; container-type: inline-size; }
.kropka { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.2); cursor: pointer; position: relative; flex: none; }
@container (max-width: 47.98px) { .krok-kropki:has(> :nth-child(3)) > .kropka { display: none; } }
@container (max-width: 63.98px) { .krok-kropki:has(> :nth-child(4)) > .kropka { display: none; } }
@container (max-width: 79.98px) { .krok-kropki:has(> :nth-child(5)) > .kropka { display: none; } }
@container (max-width: 95.98px) { .krok-kropki:has(> :nth-child(6)) > .kropka { display: none; } }
@container (max-width: 111.98px) { .krok-kropki:has(> :nth-child(7)) > .kropka { display: none; } }
@container (max-width: 127.98px) { .krok-kropki:has(> :nth-child(8)) > .kropka { display: none; } }
@container (max-width: 143.98px) { .krok-kropki:has(> :nth-child(9)) > .kropka { display: none; } }
@container (max-width: 159.98px) { .krok-kropki:has(> :nth-child(10)) > .kropka { display: none; } }
@container (max-width: 175.98px) { .krok-kropki:has(> :nth-child(11)) > .kropka { display: none; } }
@container (max-width: 191.98px) { .krok-kropki:has(> :nth-child(12)) > .kropka { display: none; } }
/* bez :has albo zapytań o kontener (Firefox < 121, Safari < 16, Chrome < 105) — dawne zawijanie zamiast kropek na przyciskach */
@supports not (selector(:has(*)) and (container-type: inline-size)) { .krok-kropki { flex-wrap: wrap; } .krok-srodek { min-width: 0; } }
.kropka::after { content: ''; position: absolute; inset: -8px; }
.kropka.aktywna { background: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 30%, transparent); }
/* kropki w barwie rodzaju lekcji: niezrobiona — obwódka, zrobiona (postęp ucznia) — wypełniona; aktywna — większa */
.kropka[data-rodzaj] { --r: var(--rodzaj-z); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--r) 75%, transparent); }
.kropka[data-rodzaj='Zd'] { --r: var(--rodzaj-zd); }
.kropka[data-rodzaj='P'] { --r: var(--rodzaj-p); }
.kropka[data-rodzaj].zrobiona { background: color-mix(in srgb, var(--r) 70%, transparent); }
.kropka[data-rodzaj].aktywna { background: var(--r); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r) 32%, transparent); }
.krok-licznik { font-size: 11px; color: var(--tekst-3); white-space: nowrap; }

/* ---------- Przyciski ---------- */
.przycisk {
  border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.06); color: var(--tekst);
  padding: 8px 14px; border-radius: 12px; cursor: pointer; font-weight: 500; min-height: 40px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.5s, outline-color 0.5s; /* + przejście wyróżnienia (:where wyżej przegrywa) */
}
.przycisk:focus-visible { transition: background 0.15s, border-color 0.15s, transform 0.1s; } /* obwódka fokusu od razu, nie z przejściem wyróżnienia */
.przycisk:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.przycisk:active:not(:disabled) { transform: translateY(1px); }
.przycisk:disabled { opacity: 0.4; cursor: default; }
.przycisk.glowny { background: var(--akcent); color: #031020; border-color: transparent; font-weight: 600; }
.przycisk.glowny:hover:not(:disabled) { background: color-mix(in srgb, var(--akcent) 85%, #fff); }
.przycisk.duzy { padding: 12px 22px; font-size: 16px; border-radius: 14px; min-height: 48px; }
.przycisk-ikona { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.06); cursor: pointer; display: grid; place-items: center; padding: 0; font-size: 15px; flex: none; }
.przycisk-ikona:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.przycisk-ikona:disabled { opacity: 0.35; cursor: default; }
.przycisk-ikona.maly { width: 28px; height: 28px; font-size: 12px; }

/* ---------- Prawa kolumna: tablica odczytów i „W tym samym czasie” ---------- */
.kolumna-prawa {
  position: fixed; z-index: 10; right: var(--margines); top: calc(var(--pasek-dol) + 8px); bottom: calc(max(var(--dok-h), var(--dok-rzecz, 0px)) + var(--margines) * 2);
  width: var(--kol-w); display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.kolumna-prawa > * { pointer-events: auto; }
.tablica { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
/* wstawka (ui.wstawka): mały wykres lub schemat 2D pod odczytami */
.wstawka { margin: 0; background: var(--szklo); border: 1px solid var(--ramka); border-radius: 12px; padding: 8px 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wstawka-tytul { font-size: 11px; color: var(--tekst-2); letter-spacing: 0.02em; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.wstawka-tytul[hidden] { display: none; }
.wstawka-napis { flex: 1; min-width: 0; }
.wstawka-zwin { flex: none; pointer-events: auto; background: none; border: 0; color: inherit; font: inherit; font-size: 12px; line-height: 1; padding: 3px 4px; margin: -3px -4px -3px 0; cursor: pointer; border-radius: 6px; transition: transform 0.2s; }
.wstawka-zwin:hover { color: var(--tekst); }
.wstawka.zwinieta .wstawka-zwin { transform: rotate(-90deg); }
.wstawka.zwinieta .wstawka-tytul { margin-bottom: 0; }
.wstawka.zwinieta .wstawka-tresc { display: none; }
.wstawka.widok { background: rgba(6, 10, 22, 0.25); backdrop-filter: none; -webkit-backdrop-filter: none; } /* drugi widok 3D (dodajWidok) — bez rozmycia */
.wstawka canvas, .wstawka svg { display: block; width: 100%; height: auto; }
.wykres-odczyt { touch-action: pan-y; cursor: crosshair; } /* odczyt wskazaniem (D6, wykres.js): poziome przeciąganie palcem przesuwa kreskę, pionowe przewija panel */
.wykres-odczyt:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 4px; }
.wstawka-notka { margin: 4px 0 0; font-size: 11px; color: var(--tekst-2); }
.tablica[hidden] { display: none; }
.odczyt {
  --kolor: var(--akcent);
  background: var(--szklo); border: 1px solid var(--ramka); border-left: 3px solid var(--kolor); border-radius: 12px;
  padding: 7px 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column;
}
.odczyt-etykieta { font-size: 11px; color: var(--tekst-2); letter-spacing: 0.02em; }
.odczyt-wartosc { font: 600 17px/1.25 var(--font-naglowki); font-variant-numeric: tabular-nums; color: #fff; text-align: right; } /* jednostka w stałym miejscu, gdy zmienia się liczba cyfr (SZ-095) */
.odczyt.duzy .odczyt-wartosc { font-size: 24px; }
/* wzór na żywo (D5, ui.wzor): wzór z podstawionymi wartościami ze sceny; człony „= …” łamią się w całości (przed „=”) */
.wzor-zywy {
  --kolor: var(--akcent);
  background: var(--szklo); border: 1px solid var(--ramka); border-left: 3px solid var(--kolor); border-radius: 12px;
  padding: 7px 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 2px;
}
.wzor-zywy[hidden] { display: none; }
.wzor-zywy-tresc { font: 500 14px/1.5 'Space Grotesk', ui-monospace, monospace; color: #fff; font-variant-numeric: tabular-nums; }
.wzor-zywy-tresc strong { font-weight: 700; }
.wz-czlon { display: inline-block; max-width: 100%; }
@media (max-width: 820px) {
  .tablica .wzor-zywy { flex-basis: 100%; padding: 3px 8px; border-radius: 9px; }
  .wzor-zywy .odczyt-etykieta { font-size: 9.5px; }
  .wzor-zywy-tresc { font-size: 12px; line-height: 1.4; }
}


/* ---------- Panel postępu (#skala — miejsce panelu skali wzorca; W5, D8): lekcje rozdziału ze stanem, quiz, link do spisu ---------- */
.skala {
  margin-top: auto; min-height: 0; overflow-y: auto; background: var(--szklo); border: 1px solid var(--ramka); border-radius: var(--promien); box-shadow: var(--cien);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 10px 12px; font-size: 13px; scrollbar-width: thin;
}
.skala-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skala-glowa h2 { margin: 0; font: 600 14px/1.2 var(--font-naglowki); }
.skala.zwiniete .skala-cialo { display: none; }
.skala.zwiniete #skala-zwin { transform: rotate(180deg); }
.skala-kadr { margin: 4px 0 6px; font-size: 12px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.skala-kadr strong { color: var(--tekst); font: 600 13px/1.2 var(--font-naglowki); font-variant-numeric: tabular-nums; } /* skrót font zeruje cyfry stałej szerokości */
.skala-kadr-ikona { display: none; }
.skala-cialo { display: block; }
  background: color-mix(in srgb, var(--akcent) 16%, transparent); }
.skala-stopka { margin: 8px 0 0; font-size: 11.5px; color: var(--tekst-3); }
.postep-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.postep-przycisk { width: 100%; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 0; border-radius: 8px; background: none; color: var(--tekst-2);
  font: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; }
.postep-przycisk:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--tekst); }
.postep-przycisk[aria-current] { background: color-mix(in srgb, var(--akcent) 14%, transparent); color: var(--tekst); }
.postep-przycisk:disabled { cursor: default; opacity: 0.55; }
.postep-tytul { flex: 1; min-width: 0; }
.postep-nr { color: var(--tekst-3); font-variant-numeric: tabular-nums; margin-right: 2px; }
.postep-stan { /* klasy stanu z przedrostkiem stan- (samo „sprobuj” brało styl ramki „Spróbuj” — wiersze po 63 px) */ flex: none; font-size: 11.5px; font-weight: 600; color: var(--dobrze); font-variant-numeric: tabular-nums; }
.postep-stan.stan-zaczeta { color: var(--tekst-3); }
.postep-stan.stan-odwiedzona { color: var(--tekst-3); }
.postep-stan.pkt { color: var(--rodzaj-zd); }
.postep-quiz .postep-stan.pkt { color: var(--rodzaj-q); }
.postep-lekcja[data-stan='nowa'] .znak-rodzaju { opacity: 0.6; }

/* ---------- Spis wszystkich rozdziałów (D9; <dialog id="spis">, main.js otworzSpis) ---------- */
dialog.spis-okno { width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px 22px 16px; font-size: 14px; }
.spis-okno .quiz-x { position: sticky; top: 0; float: right; margin: -10px -8px 0 8px; z-index: 1; }
.spis-wstep { margin: 0 0 8px; color: var(--tekst-2); font-size: 13.5px; }
.spis-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 12px; color: var(--tekst-3); }
.spis-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.spis-rozdzial { border-top: 1px solid var(--ramka); }
.spis-rozdzial > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; border-radius: 10px; }
.spis-rozdzial > summary::-webkit-details-marker { display: none; }
.spis-rozdzial > summary::after { content: '▾'; margin-left: auto; color: var(--tekst-3); transition: transform 0.2s; }
.spis-rozdzial:not([open]) > summary::after { transform: rotate(-90deg); }
.spis-rozdzial > summary:hover { background: rgba(255, 255, 255, 0.04); }
.spis-ikona { display: flex; font-size: 22px; flex: none; }
.spis-naglowek { display: grid; gap: 2px; min-width: 0; }
.spis-nazwa { font: 600 15px/1.25 var(--font-naglowki); color: var(--tekst); }
.spis-meta { font-size: 12px; color: var(--tekst-3); }
.spis-rozdzial.niewydany .spis-nazwa { color: var(--tekst-2); }
.spis-rozdzial.niewydany .spis-ikona { opacity: 0.55; }
.spis-lekcje { list-style: none; margin: 0 0 10px; padding: 0 0 0 36px; display: grid; gap: 2px; }
.spis-lekcja-link { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
a.spis-lekcja-link:hover { background: rgba(255, 255, 255, 0.06); }
.spis-lekcja .znak-rodzaju { margin-top: 1px; }
.spis-lekcja-tekst { display: grid; gap: 1px; flex: 1; min-width: 0; font-size: 13.5px; color: var(--tekst); }
.spis-cel { font-size: 12px; color: var(--tekst-3); line-height: 1.35; }
.spis-rozdzial.niewydany .spis-lekcja-tekst { color: var(--tekst-2); }
.spis-quiz { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; color: var(--tekst-2); }
.spis-stopka { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--ramka); font-size: 12.5px; color: var(--tekst-3); }
.spis-potwierdz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spis-potwierdz[hidden] { display: none; }
.przycisk.maly { padding: 4px 10px; font-size: 12.5px; }
.spis-chip .chip-ikona { opacity: 0.85; }

/* ---------- Dok z kontrolkami ---------- */
.dok {
  position: fixed; z-index: 11; bottom: var(--margines); left: calc(var(--panel-w) + var(--margines) * 2); right: var(--margines);
  display: flex; justify-content: center; pointer-events: none;
}
.dok-sceny {
  pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  background: var(--szklo); border: 1px solid var(--ramka); border-radius: var(--promien); box-shadow: var(--cien);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 10px 14px; min-height: var(--dok-h); max-width: 100%;
}
.dok-sceny:empty { display: none; }
.dok-sceny > .na-koncu { order: 1; } /* ui.zegar({ naKoncu }) albo kontrolka.el.classList.add('na-koncu') — na telefonie główna kontrolka kroku zostaje na widoku */
/* przewijany dok (telefon): wygaszona krawędź i strzałka podpowiadają, że jest więcej kontrolek; stuknięcie w strzałkę
   przewija dok (main.js) — przezroczysta ramka powiększa pole dotyku do 38 px, żeby nie trafiać w wygaszoną kontrolkę pod spodem */
.dok.wiecej-prawo::after, .dok.wiecej-lewo::before {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: auto; cursor: pointer;
  width: 24px; height: 24px; border: 7px solid transparent; background-clip: padding-box; border-radius: 50%; display: grid; place-items: center;
  background-color: var(--szklo-mocne); box-shadow: inset 0 0 0 1px var(--ramka-mocna); color: var(--akcent); font: 700 15px/1 var(--font);
}
.dok.wiecej-prawo::after { content: '›'; right: 5px; }
.dok.wiecej-lewo::before { content: '‹'; left: 5px; }
.dok-sceny.wiecej-prawo { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.dok-sceny.wiecej-lewo { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.dok-sceny.wiecej-lewo.wiecej-prawo { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.kontrolka { display: flex; align-items: center; gap: 8px; }
.kontrolka-etykieta { font-size: 12px; color: var(--tekst-2); white-space: nowrap; }
.zegar { gap: 6px; padding-right: 14px; border-right: 1px solid var(--ramka); }
.zegar:not(:has(~ :not([hidden]))) { padding-right: 0; border-right: 0; } /* zegar ostatni widoczny w doku — bez pustej kreski za nim (SZ-087) */
.zegar.na-koncu { padding-right: 0; border-right: 0; padding-left: 14px; border-left: 1px solid var(--ramka); } /* separator od strony pozostałych kontrolek */
.zegar.na-koncu:not(:has(~ :not([hidden], .na-koncu))) { padding-left: 0; border-left: 0; } /* zegar na końcu jako jedyna widoczna kontrolka — bez kreski przed nim */
.zegar .graj { width: 44px; height: 44px; font-size: 14px; background: var(--akcent); color: #031020; border-color: transparent; }
/* zegar zwarty (zegar.zwarty, ui.ukladDoku — SZ-088): 'graj' — sam ▶/❚❚; 'tempo' — ▶/❚❚ i −/tempo/+ z węższym polem, bez ⟲ */
.zegar.zwarty-graj .tempo-grupa, .zegar:is(.zwarty-graj, .zwarty-tempo) .od-nowa { display: none; }
.zegar.zwarty-tempo .tempo-grupa { gap: 2px; }
.zegar.zwarty-tempo .tempo { min-width: 56px; }
/* kolumna doku (ui.ukladDoku): kontrolki jedna nad drugą, wiersz — obok siebie */
.kontrolka.dok-kolumna { flex-direction: column; align-items: center; gap: 6px; flex: none; }
.dok-wiersz { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tempo-grupa { display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.04); border-radius: 999px; padding: 2px; }
.tempo-grupa .przycisk-ikona { width: 30px; height: 30px; border: 0; }
.tempo { min-width: 112px; text-align: center; font: 600 12.5px/1.2 var(--font-naglowki); font-variant-numeric: tabular-nums; }
.suwak { flex-wrap: nowrap; }
.suwak input[type='range'] { width: 150px; accent-color: var(--akcent); height: 28px; cursor: pointer; touch-action: none; }
.suwak.szeroki input[type='range'] { width: 240px; }
.suwak .wartosc { min-width: 74px; font: 600 12.5px/1.2 var(--font-naglowki); font-variant-numeric: tabular-nums; }
.przelacznik label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; user-select: none; min-height: 36px; }
.przelacznik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.przelacznik .tor { width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.2s; flex: none; }
.przelacznik .tor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.przelacznik input:checked + .tor { background: var(--akcent); }
.przelacznik input:checked + .tor::after { transform: translateX(16px); }
.przelacznik input:focus-visible + .tor { outline: 2px solid var(--akcent); outline-offset: 2px; }
.segmenty { display: flex; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segment { border: 0; background: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--tekst-2); min-height: 32px; white-space: nowrap; }
.segment:hover { color: var(--tekst); }
.segment.aktywny { background: var(--akcent); color: #031020; font-weight: 600; }
.kontrolka.notka { display: block; font-size: 12.5px; color: var(--tekst-2); max-width: 360px; line-height: 1.4; }

/* ---------- Komunikaty ---------- */
.komunikaty { position: fixed; z-index: 40; top: calc(var(--pasek-dol) + 12px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(520px, calc(100% - 32px)); }
.komunikat { background: var(--szklo-mocne); border: 1px solid var(--ramka-mocna); border-radius: 14px; padding: 10px 16px; box-shadow: var(--cien); opacity: 0; transform: translateY(-8px); transition: opacity 0.3s, transform 0.3s; text-align: center; font-size: 14px; }
.komunikat.widoczny { opacity: 1; transform: none; }
.komunikat.sukces { border-color: var(--dobrze); }
.komunikat.uwaga { border-color: var(--zle); }
.gwiazdki { position: fixed; left: 50%; top: 40%; z-index: 45; pointer-events: none; }
.gwiazdki span { position: absolute; color: #ffd166; font-size: 22px; animation: gwiazdka 1.3s ease-out forwards; }
@keyframes gwiazdka { from { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -2)) scale(1.1); opacity: 0; } }

/* ---------- Przejście między rozdziałami ---------- */
.przejscie {
  --kolor: var(--akcent);
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--kolor) 14%, #02030a), #02030a 70%);
  opacity: 0; pointer-events: none; transition: opacity 0.35s; text-align: center; padding: 20px;
}
.przejscie.widoczne { opacity: 1; pointer-events: auto; }
.przejscie-nr { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kolor); }
.przejscie-tytul { font: 700 clamp(26px, 5vw, 44px)/1.1 var(--font-naglowki); }
.przejscie-tytul .ikona { width: 0.9em; height: 0.9em; vertical-align: -0.12em; }
.przejscie-skala { color: var(--tekst-2); font-size: 15px; }

/* ---------- Wstęp ---------- */
.wstep { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) 20px 20px; overflow-y: auto;
  background: linear-gradient(90deg, rgba(4, 6, 13, 0.86), rgba(4, 6, 13, 0.8) 64%, rgba(4, 6, 13, 0.12) 82%); } /* scena za kartą przyciemniona
  do jej prawej krawędzi (od 1280 px karta kończy się na ok. 63 % szerokości) — naczynie nie wchodzi pod mapę działów (sesja 1b) */
@media (max-width: 1279px) { .wstep { background: linear-gradient(90deg, rgba(4, 6, 13, 0.95), rgba(4, 6, 13, 0.93) 80%, rgba(4, 6, 13, 0.6)); } } /* wolne miejsce na prawo od karty wąskie — scena tylko jako tło */
@media (max-width: 820px) { .wstep { background: rgba(4, 6, 13, 0.9); } } /* telefon: scena pod całą kartą */
.wstep[hidden] { display: none; }
html:not(.ladowanie) .wstep:not([hidden]), html.odslona .przejscie.widoczne { animation: pojaw 0.35s ease-out; } /* także przy odsłonięciu strony na starcie */
@keyframes pojaw { from { opacity: 0; } }
body.ze-wstepem .pasek, body.ze-wstepem .panel, body.ze-wstepem .kolumna-prawa, body.ze-wstepem .dok { opacity: 0; pointer-events: none; }
.pasek, .panel, .kolumna-prawa, .dok { transition: opacity 0.5s; }
.wstep-karta { width: min(640px, 100%); margin-right: auto; margin-left: max(0px, calc(50vw - 640px)); padding: 8px; }
.wstep-nadtytul { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akcent); font-weight: 600; }
.wstep-tytul { font: 700 clamp(44px, 8vw, 84px)/0.95 var(--font-naglowki); margin: 0 0 16px; letter-spacing: -0.03em; }
.wstep-tytul em { font-style: normal; background: linear-gradient(90deg, #4cc9f0, #b69cff 55%, #ff6b5e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wstep-lead { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; color: var(--tekst); margin: 0 0 18px; max-width: 560px; }
.wstep-pytanie { font: 600 15px/1.2 var(--font-naglowki); margin: 0 0 8px; color: var(--tekst-2); }
.wstep-blok { margin: 0 0 14px; }
.wstep-rytm { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rytm-krok { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.35; }
.rytm-krok .znak-rodzaju { grid-row: 1 / 3; align-self: start; margin-top: 1px; }
.rytm-nazwa { font-weight: 600; color: var(--tekst); }
.rytm-opis { color: var(--tekst-2); font-size: 12.5px; }
.wstep-mapa { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mapa-dzial { display: grid; grid-template-columns: minmax(0, 1fr) 38px; grid-template-areas: 'nazwa udzial' 'pasek pasek'; column-gap: 8px; row-gap: 2px; font-size: 12.5px; }
.mapa-nazwa { grid-area: nazwa; color: var(--tekst); }
.mapa-udzial { grid-area: udzial; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--kolor); }
.mapa-pasek { grid-area: pasek; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.mapa-pasek span { display: block; height: 100%; width: calc(var(--udzial) * 100%); background: var(--kolor); border-radius: 3px; }
.mapa-rozdzialy { grid-area: nazwa; justify-self: end; margin-right: 4px; font-size: 11px; color: var(--tekst-3); }
.wstep-mapa-opis { margin: 6px 0 0; font-size: 11px; color: var(--tekst-3); }
.wstep-klucz p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tekst-2); }
.wstep-klucz strong { color: var(--tekst); }
.wstep-akcje { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.wstep-uwaga { font-size: 12px; color: var(--tekst-3); margin: 0; }
@media (hover: none) { .tylko-klawiatura { display: none; } } /* podpowiedź o klawiszach — nie na samym dotyku */

/* Dźwięk: przycisk z ikoną głośnika w pasku i panel głośności (js/core/panel-dzwieku.js) */
.dzwiek-kontener { position: relative; display: flex; }
.dzwiek-przycisk { font-size: 14px; line-height: 1; padding: 5px 8px; }
.dzwiek-przycisk .ikona { display: block; width: 17px; height: 17px; }
.dzwiek-przycisk.wyciszony { opacity: 0.7; }
/* przed pierwszym gestem (dźwięk jeszcze nie odblokowany): delikatny puls — podpowiedź, że strona ma dźwięk */
.dzwiek-przycisk.czeka { animation: dzwiek-puls 2.6s ease-in-out infinite; }
@keyframes dzwiek-puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akcent) 0%, transparent); border-color: var(--ramka); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--akcent) 28%, transparent); border-color: color-mix(in srgb, var(--akcent) 70%, transparent); }
}
.dzwiek-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 232px; display: grid; gap: 12px; padding: 12px 14px 14px;
  border-radius: 16px; background: var(--szklo-mocne); border: 1px solid var(--ramka-mocna); box-shadow: var(--cien); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  max-height: calc(100vh - var(--pasek-dol) - 20px); max-height: calc(100dvh - var(--pasek-dol) - 20px); overflow-y: auto; overscroll-behavior: contain; } /* telefon poziomo (568×320): z suwakiem lektora panel nie mieści się w ekranie */
.dzwiek-panel[hidden] { display: none; }
.pasek:has(.dzwiek-panel:not([hidden])) { z-index: 42; } /* otwarty panel nad dymkami (.komunikaty 40, .dymek-wykresu 41) — na telefonie dymek „Tylko w symulacji” zasłaniał wiersze */
.dzwiek-tytul { margin: 0; font: 600 14px/1.2 var(--font-naglowki); color: var(--tekst); }
.dzwiek-wl { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--tekst); font: inherit; font-size: 13px; padding: 4px 0; cursor: pointer; text-align: left; }
.dzwiek-wl-tor { width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.2s; flex: none; }
.dzwiek-wl-tor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.dzwiek-wl[aria-pressed='true'] .dzwiek-wl-tor { background: var(--akcent); }
.dzwiek-wl[aria-pressed='true'] .dzwiek-wl-tor::after { transform: translateX(16px); }
.dzwiek-suwak { display: grid; gap: 2px; font-size: 12px; color: var(--tekst-2); }
.dzwiek-suwak input { width: 100%; height: 28px; margin: 0; accent-color: var(--akcent); cursor: pointer; touch-action: none; }
.dzwiek-skrot { margin: 0; font-size: 11px; color: var(--tekst-3); }
/* BEZ_DZWIEKU (dzwiek-zdarzenia.js): panel z przycisku w pasku to tylko grafika, pełny ekran i „O projekcie” (SZ-085) */
.bez-dzwieku .dzwiek-tytul, .bez-dzwieku #dzwiek-wl, .bez-dzwieku .dzwiek-suwak, .bez-dzwieku .dzwiek-skrot { display: none; }
.bez-dzwieku .dzwiek-przycisk.czeka { animation: none; }
.bez-dzwieku .dzwiek-przycisk.wyciszony { opacity: 1; }
.bez-dzwieku .dzwiek-przycisk .ikona { display: none; }
.bez-dzwieku .dzwiek-przycisk::before { content: '⋯'; font-size: 17px; line-height: 17px; display: block; width: 17px; text-align: center; }
.dzwiek-suwak-lektor { display: none; }
.bez-muzyki .dzwiek-suwak-muzyka { display: none; } /* W4: bez muzyki (pusty MUZYKA w dzwiek-zdarzenia.js — klasa z main.js) */
.dzwiek-panel.z-lektorem .dzwiek-suwak-lektor { display: grid; }
.bez-dzwieku .dzwiek-panel.z-lektorem .dzwiek-suwak-lektor { display: grid; } /* Chemia: bez muzyki i efektów, lektor EN — sam suwak lektora */
/* na telefonie przycisk dźwięku zabiera miejsce w pasku — jakość (≤ 560 px) i pełny ekran (≤ 820 px) przechodzą do panelu dźwięku */
.dzwiek-grafika { display: none; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--tekst-2); }
/* nagłówek „Widok” nad tymi wierszami — gdy któryś jest widoczny (pełny ekran ≤ 820 px, jakość i sama scena ≤ 560 px) */
.dzwiek-widok { display: none; margin: 2px 0 -4px; padding-top: 10px; border-top: 1px solid var(--ramka); font: 600 13px/1.2 var(--font-naglowki); color: var(--tekst); }
@media (max-width: 820px) {
  .dzwiek-panel:has(> .dzwiek-pelny:not([hidden])) .dzwiek-widok, html.sama-scena .dzwiek-widok { display: block; } /* w samej scenie zawsze jest wiersz wyjścia */
  /* przycisk otwiera też menu widoku — „⋮” obok głośnika (bez dźwięku w języku przycisk to już „⋯”) */
  html:not(.bez-dzwieku) .dzwiek-przycisk { display: flex; align-items: center; gap: 1px; }
  html:not(.bez-dzwieku) .dzwiek-przycisk::after { content: '⋮'; display: block; width: 5px; font-size: 15px; line-height: 17px; text-align: center; opacity: 0.85; }
}
@media (max-width: 560px) { .dzwiek-widok { display: block; } }
.bez-dzwieku .dzwiek-panel:not(.z-lektorem) .dzwiek-widok { border-top: 0; padding-top: 0; } /* bez dźwięku panel zaczyna się od „Widok” */
@media (hover: none) { .dzwiek-skrot { display: none; } } /* skrót klawisza — nie na samym dotyku */
@media (max-width: 480px) { .dzwiek-przycisk { padding: 5px 6px; } html:not(.bez-dzwieku) .dzwiek-przycisk { padding-right: 3px; } } /* „⋮” ma własny odstęp */
@media (max-width: 380px) { .dzwiek-przycisk { padding: 5px 4px; } }
@media (prefers-reduced-motion: reduce) { .dzwiek-przycisk.czeka { animation: none; } } /* nieskończony puls skrócony do 0,01 ms migotałby */

.projekt-okno { max-height: calc(100dvh - 24px); overflow-y: auto; font-size: 14px; line-height: 1.55; }
.projekt-okno p { margin: 0 0 10px; color: var(--tekst-2); }
.projekt-okno h3 { font: 600 15px/1.3 var(--font-naglowki); margin: 18px 0 6px; color: var(--tekst); scroll-margin-top: 12px; }
.projekt-okno h3:focus:not(:focus-visible) { outline: none; } /* obrys tylko z klawiatury (SZ-079) */
.projekt-okno a { color: var(--akcent, #8cc4ff); }
.projekt-okno .quiz-x { position: sticky; top: 0; float: right; margin: -12px -10px 0 8px; z-index: 1; background: linear-gradient(var(--szklo-mocne), var(--szklo-mocne)), var(--tlo); } /* nieprzezroczyste — przewijany tekst nie prześwituje (SZ-079) */
.projekt-okno .quiz-x:hover:not(:disabled) { background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)), var(--tlo); } /* hover przycisku-ikony też nieprzezroczysty */
.projekt-tytul { font: 600 20px/1.3 var(--font-naglowki); margin: 0 0 10px; padding-right: 34px; }
.projekt-okno .projekt-male { font-size: 12px; color: var(--tekst-3); }
.projekt-akcja { font-weight: 600; white-space: nowrap; }
.dorosli-koniec { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tekst-3); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.link:hover { color: var(--tekst); }
.dzwiek-projekt { font-size: 12px; color: var(--tekst-3); align-self: flex-start; }
.wstep-zrodla { font-size: 11px; line-height: 1.45; color: var(--tekst-3); margin: 10px 0 0; opacity: 0.85; max-width: 560px; }
/* szeroki ekran: karta szersza, rytm i mapa działów obok siebie — wstęp mieści się bez przewijania w 1440×900 i 1280×800
   (wzór: Pogoda w ruchu fedb9e1; pomiar: node tools/zmierz-wstep.mjs) */
/* telefon: wstęp możliwie na jeden ekran — rytm 2 × 2 bez opisów (opis w dymku), mapa w jednym wierszu na dział */
@media (max-width: 820px) {
  .wstep-tytul { font-size: clamp(36px, 10.5vw, 56px); margin-bottom: 10px; }
  .wstep-nadtytul { font-size: 10.5px; letter-spacing: 0.04em; }
  .wstep-lead { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
  .wstep-blok { margin-bottom: 10px; }
  .wstep-rytm { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .rytm-krok { grid-template-columns: 28px minmax(0, 1fr); font-size: 12.5px; }
  .rytm-opis { display: none; }
  .mapa-dzial { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 34px; grid-template-areas: 'nazwa pasek udzial'; align-items: center; row-gap: 0; }
  .mapa-rozdzialy { display: none; }
  .wstep-mapa { gap: 4px; }
  .wstep-mapa-opis { margin-top: 4px; }
  .wstep-klucz p { font-size: 13px; line-height: 1.45; }
  .wstep-akcje { margin: 12px 0 8px; }
  .wstep-akcje .przycisk.duzy { padding: 10px 14px; font-size: 15px; }
  .wstep-akcje { flex-wrap: nowrap; }
  .wstep-zrodla { margin-top: 6px; font-size: 10.5px; }
  .wstep-uwaga, .tylko-szeroki { display: none; } /* gesty na telefonie są oczywiste; „Spis rozdziałów” → „Spis” */
  .wstep-lead { font-size: 14.5px; }
  .wstep-karta { padding-top: 6px; }
}
@media (max-width: 820px) and (max-height: 760px) and (orientation: portrait) { /* niski telefon (390×699: było 141 px przewijania;
  tools/zmierz-wstep.mjs) — bez nadtytułu i opisu mapy, ciaśniejszy lead i klucz; 375×667 zostaje ok. 16 px */
  .wstep-nadtytul, .wstep-mapa-opis { display: none; }
  .wstep-tytul { font-size: 34px; margin-bottom: 6px; }
  .wstep-lead { font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; }
  .wstep-blok { margin-bottom: 8px; }
  .wstep-pytanie { margin-bottom: 4px; }
  .wstep-akcje { margin: 8px 0 4px; }
  .wstep-klucz p { font-size: 12.5px; line-height: 1.4; }
}
@media (min-width: 1000px) {
  .wstep-karta { width: min(820px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .wstep-karta > * { grid-column: 1 / -1; }
  .wstep-karta > .wstep-blok-rytm, .wstep-karta > .wstep-blok-mapa { grid-column: auto; }
  .wstep-lead, .wstep-zrodla { max-width: none; }
  .wstep-lead { text-wrap: pretty; }
}
@media (min-width: 1000px) and (max-height: 920px) {
  .wstep-tytul { font-size: 70px; margin-bottom: 10px; }
  .wstep-lead { font-size: 17px; margin-bottom: 14px; }
  .wstep-akcje { margin: 12px 0 8px; }
  .wstep-zrodla { margin-top: 6px; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .wstep-tytul { font-size: 58px; }
  .wstep-lead { font-size: 16px; }
  .wstep-blok { margin-bottom: 10px; }
}

/* ---------- Quiz ---------- */
.quiz { width: min(560px, calc(100% - 24px)); background: var(--szklo-mocne); color: var(--tekst); border: 1px solid var(--ramka-mocna); border-radius: 20px; padding: 26px 24px 20px; box-shadow: var(--cien); }
.quiz::backdrop { background: rgba(2, 3, 8, 0.7); backdrop-filter: blur(3px); }
.quiz-x { position: absolute; top: 12px; right: 12px; }
/* ✕ quizu w pasku przyklejonym u góry okna na całą szerokość (D5, sesja 5): zajmuje górny margines okna, więc nie wchodzi na
   pierwszy wiersz pytania ani gwiazdkę wyniku, a przy przewijaniu wyjaśnień zostaje widoczny; tło nieprzezroczyste jak w oknie projektu; top ujemny o górne dopełnienie okna — sticky liczy od krawędzi dopełnienia,
   przy top: 0 nad paskiem przewijał się 22–26 px pas treści */
.quiz-pasek { position: sticky; top: -26px; z-index: 2; display: flex; justify-content: flex-end; margin: -26px -24px 4px; padding: 8px 10px 4px; background: linear-gradient(var(--szklo-mocne), var(--szklo-mocne)), var(--tlo); }
.quiz-pasek .quiz-x { position: static; }
#quiz { scroll-padding-top: 56px; } /* fokus klawiatury (np. ↑ do zdania P/F) nie chowa się pod paskiem */
.quiz-dalej, .quiz-akcje { scroll-margin-bottom: 24px; } /* „Następne pytanie” po przewinięciu nie przy samej krawędzi okna */
.quiz-postep { margin: 0 0 4px; font-size: 12px; color: var(--akcent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.quiz-pytanie { font: 600 20px/1.3 var(--font-naglowki); margin: 0 0 16px; }
.quiz-odpowiedzi { display: grid; gap: 8px; }
.quiz-odp { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 15px; min-height: 48px; }
.quiz-odp:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.quiz-odp.dobra { border-color: var(--dobrze); background: rgba(110, 231, 168, 0.14); }
.quiz-odp.zla { border-color: var(--zle); background: rgba(255, 123, 123, 0.12); }
.quiz-odp:disabled { cursor: default; }
.quiz-wyjasnienie { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); font-size: 14px; }
.quiz-akcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.quiz-wynik { text-align: center; }
.quiz-gwiazda { font-size: 64px; color: #ffd166; line-height: 1; }
.quiz-wynik h2 { font: 700 34px/1 var(--font-naglowki); margin: 8px 0; }
.quiz-wynik .quiz-wynik-opis { font-size: 13px; color: var(--tekst-2); margin: 0 auto 10px; max-width: 34em; } /* skąd maks i próg gwiazdki (ogląd 3b) */
/* zestaw prawda / fałsz (D7, main.js pokazPF): zdanie | P F; po „Sprawdź” — ✓ / ✗, poprawna opcja obwiedziona, wyjaśnienie */
.quiz-pf-opis { margin: -8px 0 12px; font-size: 13px; color: var(--tekst-2); }
.quiz-pf-klawisze { white-space: nowrap; }
.quiz-pf { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: pf; }
.pf-zdanie { counter-increment: pf; border: 1px solid var(--ramka); border-radius: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); }
.pf-zdanie fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.pf-tekst { float: left; padding: 0; font-size: 15px; line-height: 1.35; } /* float: legend jako zwykła komórka siatki (bez osobnego wiersza nad polami) */
.pf-tekst::before { content: counter(pf) '. '; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.pf-opcje { display: inline-flex; gap: 6px; }
.pf-opcja { position: relative; }
.pf-opcja input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pf-opcja input:disabled { cursor: default; }
.pf-opcja > span[aria-hidden] { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.04); font: 600 18px/1 var(--font-naglowki); }
.pf-opcja input:not(:disabled):hover + span { background: rgba(255, 255, 255, 0.1); }
.pf-opcja input:checked + span { background: color-mix(in srgb, var(--rodzaj-q) 28%, transparent); border-color: var(--rodzaj-q); color: #fff; }
.pf-opcja input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
.pf-opcja.poprawna > span[aria-hidden] { box-shadow: 0 0 0 2px var(--dobrze); }
.pf-zdanie.dobra { border-color: var(--dobrze); background: rgba(110, 231, 168, 0.08); }
.pf-zdanie.zla { border-color: var(--zle); background: rgba(255, 123, 123, 0.08); }
.pf-zdanie.zla .pf-opcja input:checked + span { background: rgba(255, 123, 123, 0.22); border-color: var(--zle); }
.pf-wyjasnienie { margin: 6px 0 0; font-size: 13.5px; color: var(--tekst-2); }
.pf-zdanie.dobra .pf-wyjasnienie strong { color: var(--dobrze); }
.pf-zdanie.zla .pf-wyjasnienie strong { color: var(--zle); }
@media (max-width: 520px) {
  #quiz { padding: 22px 14px 16px; }
  #quiz { scroll-padding-top: 50px; }
  #quiz .quiz-pasek { top: -22px; margin: -22px -14px 2px; padding: 6px 6px 2px; }
  .pf-zdanie { padding: 7px 8px; }
  .pf-zdanie fieldset { gap: 8px; }
  .pf-tekst { font-size: 14px; }
  .pf-opcja > span[aria-hidden] { width: 44px; height: 44px; } /* cel dotyku 44 pt (D5) */
}


/* ---------- Szerokości pośrednie ---------- */
/* Górny pasek: stopień zagęszczenia dobiera main.js (dopasujPasek) według tego, co się mieści — zależy od języka, miejsca,
   aktywnego rozdziału i poziomu, więc stałe progi szerokości nie wystarczały (lista rozdziałów wchodziła na logo).
   Stopnie narastają: każdy następny zawiera poprzednie. Logo traci napis dopiero na końcu. */
/* 1 — (wolny stopień: we wzorcu napisy trybu automatycznego, tu bez trybu — W3) */
.pasek.ciasno-2 .rozdzial-chip:not(.aktywny) .chip-nazwa { display: none; }
.pasek.ciasno-5 .rozdzialy-lista { gap: 2px; }
@media (min-height: 521px) { /* niski ekran poziomy ma własne, ciaśniejsze odstępy (niżej) */
  .pasek.ciasno-2 .rozdzial-chip { padding: 6px 8px; }
  .pasek.ciasno-5 { gap: 10px; }
  .pasek.ciasno-5 .pasek-prawa { gap: 6px; }
  .pasek.ciasno-5 .rozdzial-chip { padding: 6px 6px; }
}
.pasek.ciasno-6 .logo-tekst { display: none; }
.pasek.ciasno-7 .rozdzial-chip.aktywny .chip-nazwa { display: none; }
/* 8–9 — iPhone w poziomie (SZ-096): sam znak jakości bez napisu (nazwy zostają dla czytnika, opis jakości
   w title), potem ciaśniejsze odstępy */
.pasek.ciasno-8 :is(#jakosc .jakosc-napis, .auto-napis) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pasek.ciasno-8 #jakosc { padding-left: 8px; padding-right: 8px; }
.pasek.ciasno-9 { gap: 6px; }
.pasek.ciasno-9 .pasek-prawa { gap: 4px; }
.pasek.ciasno-9 .rozdzialy-lista { gap: 1px; }
.pasek.ciasno-9 .rozdzial-chip { padding-left: 4px; padding-right: 4px; }
@media (max-width: 1180px) {
  :root { --panel-w: 340px; --kol-w: 260px; }
}

/* ---------- Niski ekran poziomy (telefon obrócony: np. iPhone 844×280 w Safari z paskami) ----------
   Szerokość daje układ komputerowy, ale wysokości jest za mało: zwarty pasek, bez metryczki, panel na całą wysokość,
   węższe kolumny; odstęp od wycięcia ekranu i paska „home” (viewport-fit=cover). */
@media (min-width: 821px) and (max-height: 520px) {
  :root { --pasek-h: 44px; --margines: 8px; --panel-w: 290px; --kol-w: 210px; --dok-h: 52px; }
  .pasek { padding: env(safe-area-inset-top, 0px) max(var(--margines), env(safe-area-inset-right)) 0 max(var(--margines), env(safe-area-inset-left)); gap: 8px; }
  .logo-znak { width: 24px; height: 24px; }
  .rozdzial-chip { padding: 4px 6px; }
  .panel { left: max(var(--margines), env(safe-area-inset-left)); top: calc(var(--pasek-dol) + 4px); bottom: max(var(--margines), env(safe-area-inset-bottom)); }
  .panel-glowa { padding: 8px 12px 6px; gap: 8px; }
  .panel-ikona { width: 32px; height: 32px; font-size: 20px; border-radius: 9px; }
  .panel-tytul { font-size: 17px; }
  .metryczka { display: none; }
  .panel-cialo { padding: 8px 12px 10px; }
  .krok-tytul { font-size: 15px; margin-top: 0; }
  .krok-nawigacja { padding: 5px 8px; gap: 4px; } /* panel 290 px: „Następny rozdział ›” + licznik bez ściskania */
  .krok-nawigacja .przycisk { padding: 5px 7px; min-height: 34px; }
  .dok { left: calc(max(var(--margines), env(safe-area-inset-left)) + var(--panel-w) + var(--margines)); right: calc(max(var(--margines), env(safe-area-inset-right)) + 210px + var(--margines)); bottom: max(var(--margines), env(safe-area-inset-bottom)); }
  .dok-sceny { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 5px 8px; min-height: 0; gap: 10px; scrollbar-width: none; }
  .dok-sceny::-webkit-scrollbar { display: none; }
  .kontrolka { flex: none; }
  .zegar .graj { width: 36px; height: 36px; }
  .kolumna-prawa { right: max(var(--margines), env(safe-area-inset-right)); top: calc(var(--pasek-dol) + 4px); bottom: max(var(--margines), env(safe-area-inset-bottom)); width: var(--kol-w); gap: 6px; }
  .tablica .odczyt:not(.dociekliwy):nth-child(n+4 of .odczyt:not([hidden])) { display: none; }
  /* odczyt dla dociekliwych (ui.odczyt({ dociekliwy })) zawsze widoczny — kosztem trzeciego zwykłego */
  .tablica:has(> .odczyt.dociekliwy:not([hidden])) > .odczyt:not(.dociekliwy):nth-child(n+3 of .odczyt:not([hidden]):not(.dociekliwy)) { display: none; }
  .skala { padding: 6px 8px; }
  .skala-skok, .skala-stopka { display: none; }
  .odczyt { padding: 3px 8px; border-radius: 9px; }
  .odczyt-etykieta { font-size: 9.5px; }
  .odczyt-wartosc, .odczyt.duzy .odczyt-wartosc { font-size: 13px; }
  .wstawka canvas, .wstawka svg { max-height: 30vh; max-height: 30dvh; width: auto; max-width: 100%; }
  /* prawa kolumna niższa niż treść (Safari na iPhonie poziomo: pasek adresu u góry, strona 844×280; w Chrome 844×390 — 22 z 52
     kroków): przewija się tablica (odczyty i wstawki), karta postępu zostaje na dole — zwinięta do jednego wiersza jak
     na telefonie (ikona, licznik, ▴), rozwinięta najwyżej na 60 % kolumny ze swoim przewijaniem. Dotąd tablica wystawała poza
     ekran, a karta była ściśnięta do paska 14 px albo poza oknem */
  /* padding z ujemnym marginesem — obwódka wyróżnienia (.wyrozniona: 2 px + odstęp 2 px) mieści się w przewijanym polu; przewijanie
     zeruje zmiana kroku (main.js), wyróżnienie przewija do odczytu / wstawki (silnik.js _pokazWDoku), uchwyty boków liczone jak bez
     przewinięcia (main.js pierwszaRamka) */
  .kolumna-prawa > .tablica { flex-shrink: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: 4px; margin: -4px; }
  .kolumna-prawa > .tablica > .wstawka-zastepnik { flex-basis: auto; } /* 100 % (wiersz telefonu) liczyłoby się od wysokości tablicy */
  .skala { flex-shrink: 0; max-height: 60%; }
  .kolumna-prawa:has(> .tablica[hidden]) > .skala { max-height: none; }
  .skala.zwiniete { display: flex; align-items: center; gap: 6px; flex-direction: row-reverse; justify-content: flex-start; margin-left: auto; padding: 5px 8px; }
  .skala.zwiniete .skala-glowa h2 { display: none; }
  .skala.zwiniete .skala-kadr-opis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* czytnik: „Reakcje w symulacji: 12”, nie sama liczba */
  .skala.zwiniete .skala-kadr-ikona { display: inline; }
  .skala.zwiniete .skala-kadr { margin: 0; }
  .skala.zwiniete .skala-kadr strong { display: inline-block; min-width: 5ch; }
}

/* ---------- Telefon / wąski ekran ---------- */
@media (max-width: 820px) {
  .logo-tekst { display: none; }
  #pelny-ekran { display: none; } /* na telefonie w panelu dźwięku (.dzwiek-pelny; poza blokiem niskiego telefonu — inaczej na wysokim był w obu miejscach) */
  .dzwiek-pelny { display: flex; }
  :root { --pasek-h: 52px; --margines: 10px; --dok-h: 0px; }
  body { font-size: 14.5px; }
  .pasek { gap: 8px; }
  .logo-znak { width: 26px; height: 26px; }
  .rozdzialy { justify-content: flex-start; }
  .mobilny-rozdzial { display: flex; gap: 6px; align-items: center; border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; }
  .mr-nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* za długa nazwa kończy się „…”, nie ucięciem */
  .rozdzialy-lista { display: none; position: absolute; top: 44px; left: -40px; width: min(360px, calc(100vw - 20px)); background: var(--szklo-mocne); border: 1px solid var(--ramka-mocna); border-radius: 16px; padding: 8px; box-shadow: var(--cien);
    grid-template-columns: 1fr 1fr; gap: 4px; }
  .rozdzialy.otwarte .rozdzialy-lista { display: grid; }
  .rozdzialy-lista .rozdzial-chip .chip-nazwa { display: inline; }
  .rozdzialy-lista .rozdzial-chip .chip-nr { display: inline; color: var(--tekst-3); font-size: 11px; }
  .rozdzial-chip { padding: 9px 10px; border-radius: 12px; }
  .przycisk-maly { padding: 6px 8px; }

  .panel { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 72vh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .panel-uchwyt { display: flex; justify-content: center; align-items: center; height: 18px; border: 0; background: none; cursor: pointer; padding: 6px 0 0; width: 100%; }
  .uchwyt-kreska { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
  .panel-glowa { padding: 4px 14px 8px; border: 0; }
  .panel-ikona { width: 36px; height: 36px; font-size: 22px; border-radius: 10px; }
  .panel-tytul { font-size: 18px; }
  .panel-cialo { padding: 0 14px 8px; max-height: 17vh; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
  .panel.rozwiniety .panel-cialo { max-height: 56vh; overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  /* panel zwinięty: tytuł rozdziału bez ikony, zwolnione miejsce dla tekstu lekcji — okno tekstu
     miało 4–5 linii, wzór blokowy ucięty od razu (ogląd 3b); wysokość panelu prawie bez zmian */
  .panel:not(.rozwiniety):not(.schowany) .panel-ikona { display: none; } /* numer rozdziału zostaje — do 420 px pasek go chowa (.mr-nr) */
  .panel:not(.rozwiniety):not(.schowany) .panel-tytul { font-size: 16px; }
  .panel:not(.rozwiniety):not(.schowany) .panel-cialo { max-height: 21vh; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  body:has(.panel.rozwiniety) .kolumna-prawa .wstawka, body:has(.panel.rozwiniety) .kolumna-prawa > .tablica { visibility: hidden; } /* odczyty też: w 1.7 cztery karty wchodziły na rozwinięty panel, w 1.5 / 1.6 karta „Z treści zadania” pod dok (Safari, sesja 4) */ /* rozwinięty panel (czytanie): wstawki nie wchodzą pod dok i na nagłówek panelu; visibility — płótna zachowują rysunek */
  .panel:not(.rozwiniety) .metryczka { display: none; }
  .krok-tytul { font-size: 16px; margin-top: 0; }
  .krok-nawigacja { padding: 6px 10px 8px; }
  .krok-nawigacja .przycisk { padding: 6px 12px; min-height: 38px; }
  .panel.pisze-zadanie .krok-nawigacja { display: none; } /* pisanie odpowiedzi (main.js): pasek nad klawiaturą zasłaniał pole i „Sprawdź” (D3) */
  /* trzeci stan (main.js „Panel na telefonie”): schowany — uchwyt, jeden wiersz z tytułem kroku i „Posłuchaj” (na ostatnim kroku
     też quiz) oraz Wstecz / Dalej; tekst kroku zostaje w DOM (aria-live czyta tytuł nowego kroku). Uchwyt i nagłówek — palcem */
  .panel-uchwyt, .panel-glowa { touch-action: none; }
  .panel-uchwyt { height: 24px; padding-top: 8px; } /* pole dotyku 24 px nad nagłówkiem */
  .panel-glowa > .panel-schowaj { display: grid; margin-left: auto; align-self: flex-start; font-size: 14px; }
  .panel.schowany .panel-glowa, .panel.schowany .panel-cialo > :not(#krok-tresc, #quiz-start, #auto-stan-panel), .panel.schowany #krok-tresc > :not(.krok-tytul, .lektor-przycisk) { display: none; }
  .panel.schowany .panel-cialo { max-height: none; overflow: hidden; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .panel.schowany #krok-tresc { display: flex; align-items: center; gap: 8px; }
  .panel.schowany .krok-tytul { flex: 1; min-width: 0; margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel.schowany .lektor-przycisk { margin: 0; flex: none; }
  .panel.schowany #quiz-start { margin: 6px 0 0; padding: 6px 12px; }
  .panel.schowany:not(.ostatni-krok) #quiz-start { display: none; }
  .panel.schowany .krok-nawigacja { border-top: 0; padding-top: 10px; } /* tytuł kroku nie styka się z Wstecz / Dalej (D6, sesja 5) */

  .dok { left: 0; right: 0; bottom: calc(var(--panel-h) + 6px); padding: 0 8px; justify-content: flex-start; }
  .dok-sceny { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 8px 10px; min-height: 0; border-radius: 14px; scrollbar-width: none; gap: 10px; }
  .dok-sceny::-webkit-scrollbar { display: none; }
  .kontrolka { flex: none; }
  .zegar .graj { width: 40px; height: 40px; }
  .tempo { min-width: 92px; font-size: 12px; }
  .suwak input[type='range'] { width: 120px; }
  .suwak.szeroki input[type='range'] { width: 160px; }

  .kolumna-prawa { top: calc(var(--pasek-dol) + 4px); bottom: auto; width: auto; left: var(--margines); right: var(--margines); flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .tablica { flex-direction: row; flex-wrap: wrap; gap: 4px; max-width: 64%; }
  .tablica .odczyt:not(.dociekliwy):nth-child(n+4 of .odczyt:not([hidden])) { display: none; }
  /* odczyt dla dociekliwych (ui.odczyt({ dociekliwy })) zawsze widoczny — kosztem trzeciego zwykłego */
  .tablica:has(> .odczyt.dociekliwy:not([hidden])) > .odczyt:not(.dociekliwy):nth-child(n+3 of .odczyt:not([hidden]):not(.dociekliwy)) { display: none; }
  .kolumna-prawa > .tablica { pointer-events: none; } /* odczyty i wstawki nie blokują obracania sceny palcem */
  .kolumna-prawa > .tablica .klikalna { pointer-events: auto; } /* wyjątek: klikalna treść wstawki (np. mapa nuklidów) */
  .tablica .wstawka { flex-basis: 100%; padding: 4px 7px; border-radius: 9px; }
  /* tytuł obok ⤢ i ▾ w jednej linii (do ok. 190 px tekstu): ciasne przyciski, pole dotyku w ::after nad napisem i krawędzią */
  .wstawka-tytul { font-size: 9.5px; margin-bottom: 2px; gap: 3px; letter-spacing: 0; }
  .wstawka-zwin { position: relative; font-size: 14px; padding: 6px 3px; margin: -6px -4px -6px 0; }
  .wstawka-zwin::after { content: ''; position: absolute; inset: -9px -3px; }
  .wstawka.zwinieta .wstawka-zwin::after { transform: rotate(90deg); } /* przycisk obrócony o −90° — pole dotyku ::after zostaje pionowe (sama ramka przycisku zachodzi na ⤢ ok. 2 px) */
  .wstawka canvas, .wstawka svg { max-height: 18vh; width: auto; max-width: 100%; }
  .odczyt { padding: 3px 7px; border-radius: 9px; max-width: 100%; }
  .odczyt-etykieta { font-size: 9.5px; line-height: 1.2; }
  .odczyt-wartosc, .odczyt.duzy .odczyt-wartosc { font-size: 13px; }
  .kolumna-prawa > .tablica { min-width: 0; flex: 0 1 64%; } /* stała podstawa — szerokość nie zależy od bieżącego napisu w odczycie */
  .komunikat { font-size: 13px; line-height: 1.35; padding: 7px 12px; } /* zwięźlej — mniej zasłania (ostrzeżenie „Tylko w symulacji” 4–5 linii) */
  .skala { margin: 0 0 0 auto; padding: 6px 8px; width: 214px; max-height: calc(100vh - var(--panel-h) - 150px); flex: none; }
  .skala.zwiniete { width: auto; }
  .skala.zwiniete .skala-glowa h2 { display: none; }
  .skala.zwiniete .skala-kadr-opis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* dla czytnika (jak niżej poziomo) */
  .skala.zwiniete .skala-kadr-ikona { display: inline; }
  .skala.zwiniete { display: flex; align-items: center; gap: 6px; flex-direction: row-reverse; }
  .skala.zwiniete .skala-kadr { margin: 0; }
  .skala.zwiniete .skala-kadr strong { display: inline-block; min-width: 5ch; } /* chip nie zmienia szerokości z licznikiem (do 99 999) */
  .skala-glowa h2 { font-size: 12px; }
  .skala-skok { padding-left: 30px; }

  .wstep { place-items: start center; }
  .wstep-karta { margin: 0 auto; padding-top: 6px; }
}
@media (max-width: 820px) and (min-height: 600px) { /* telefon pionowo: dymki na dole sceny, tuż nad dokiem — u góry zasłaniały odczyty,
     wstawki i skalę (ostrzeżenie 7 s); najnowszy najbliżej doku. Niższe okno (320×568, poziomo) i rozwinięty panel — u góry jak dawniej
     (od dołu dymek wszedłby na pasek albo za górną krawędź) */
  html:not(.sama-scena) body:not(.ze-wstepem):not(:has(.panel.rozwiniety)) .komunikaty { top: auto; bottom: calc(var(--panel-h) + var(--dok-rzecz, 0px) + 16px); flex-direction: column-reverse; }
  html:not(.sama-scena) body:not(.ze-wstepem):not(:has(.panel.rozwiniety)) .komunikat:not(.widoczny) { transform: translateY(8px); } /* wjazd od dołu */
}
@media (max-width: 820px) and (min-height: 600px) { /* telefon pionowo: płótna z --min-wys (szereg redoks, droga reakcji) nie niższe niż ich
     rysunek — wąska wstawka (ok. 170 px) dawała z proporcji 48–63 px; min-height wygrywa z max-height. Poziomo (niskie okno) bez tego —
     wstawka weszłaby na dok i panel */
  .wstawka:not(.powiekszona) canvas { min-height: var(--min-wys, 0); }
}
@media (max-width: 820px) and (max-height: 740px) { /* niski telefon: zwięźlejsze wstawki (wykres niższy, bez legendy-notki) — scena zostaje widoczna; pełna treść po zwinięciu i na wyższym ekranie */
  .wstawka canvas, .wstawka svg { max-height: 13vh; }
  .wstawka-notka { display: none; }
}
@media (max-width: 560px) {
  #jakosc { display: none; } /* przełącznik jakości w panelu dźwięku — miejsce na nazwę rozdziału */
  .dzwiek-grafika { display: flex; }
}
@media (max-width: 480px) {
  .mobilny-rozdzial > span:first-child, .mobilny-rozdzial > span:last-child { display: none; } /* ikona i strzałka — miejsce na nazwę */
  .pasek, .pasek-prawa { gap: 5px; }
  .mobilny-rozdzial { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 420px) {
  .mr-nr { display: none; } /* numer też — sama nazwa (numery są na rozwijanej liście) */
}
@media (max-width: 380px) {
  .krok-nawigacja { gap: 4px; } /* poniżej ok. 304 px „Następny rozdział ›” + licznik przelewały pasek */
  .krok-nawigacja .przycisk { padding-left: 8px; padding-right: 8px; }
  .mobilny-rozdzial { padding: 6px 7px; }
}

/* ---------- Chowane boki i dok w jednej linii (od 821 px) ----------
   Uchwyt przy wewnętrznej krawędzi panelu opisu i prawej kolumny chowa je w bok (stan zapamiętany — main.js „Boki”); po
   schowaniu zostaje przy krawędzi ekranu z napisem. Dok nie łamie się na rzędy (main.js „Dok w jednej linii”): gdy kontrolki
   nie mieszczą się w przerwie między panelami, dok rozciąga się na całą szerokość (.dok.szeroki — panel i kolumna kończą się
   nad nim), wybory zwijają się do przycisku z ramką, nadmiar trafia do ramki „Więcej”. Telefon (≤ 820 px) bez zmian. */
.bok-uchwyt { display: none; }
@media (min-width: 821px) {
  :root { --bok-slad: 30px; } /* szerokość uchwytu schowanego boku */
  .panel, .kolumna-prawa { transition: opacity 0.5s, transform 0.32s ease, visibility 0s linear 0s; }
  html.lewy-schowany .panel, html.prawy-schowany .kolumna-prawa { visibility: hidden; transition: opacity 0.5s, transform 0.32s ease, visibility 0s linear 0.32s; }
  /* schowany: wewnętrzna krawędź tuż za uchwytem (--bok-slad) — kadr sceny i układy rozdziałów liczone z prostokątów paneli
     omijają uchwyt */
  html.lewy-schowany .panel { transform: translateX(calc(-100% - var(--margines) + env(safe-area-inset-left, 0px) + var(--bok-slad))); }
  html.prawy-schowany .kolumna-prawa { transform: translateX(calc(100% + var(--margines) - env(safe-area-inset-right, 0px) - var(--bok-slad))); }
  @media (max-height: 520px) { /* niski ekran poziomy: panele od max(margines, inset) — krawędź tuż za uchwytem (inset + --bok-slad) */
    html.lewy-schowany .panel { transform: translateX(calc(-100% - max(var(--margines), env(safe-area-inset-left, 0px)) + env(safe-area-inset-left, 0px) + var(--bok-slad))); }
    html.prawy-schowany .kolumna-prawa { transform: translateX(calc(100% + max(var(--margines), env(safe-area-inset-right, 0px)) - env(safe-area-inset-right, 0px) - var(--bok-slad))); }
  }
  html.lewy-schowany .dok, .dok.szeroki { left: max(var(--margines), env(safe-area-inset-left)); }
  html.prawy-schowany .dok { right: max(var(--margines), env(safe-area-inset-right)); }
  html.bez-przejscia :is(.panel, .kolumna-prawa, .bok-uchwyt) { transition: none !important; } /* stan zapamiętany — bez wysuwania przy wczytaniu */

  .bok-uchwyt {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    position: fixed; z-index: 12; top: calc(var(--pasek-dol) + 22px); width: 26px; min-height: 58px; padding: 8px 0;
    background: var(--szklo-mocne); border: 1px solid var(--ramka-mocna); color: var(--tekst-2); cursor: pointer;
    box-shadow: var(--cien); font: 600 11px/1 var(--font); transition: left 0.32s ease, right 0.32s ease, width 0.32s ease, border-radius 0.32s ease, opacity 0.5s, color 0.15s, background 0.15s;
  }
  .bok-uchwyt::before { content: ''; position: absolute; inset: -8px -10px; } /* pole dotyku ok. 46 × 74 px */
  .bok-uchwyt:hover { color: var(--tekst); background: color-mix(in srgb, var(--akcent) 22%, var(--szklo-mocne)); }
  .bok-uchwyt:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
  .bok-uchwyt .szewron { font-size: 18px; line-height: 1; }
  .bok-uchwyt .bok-napis { writing-mode: vertical-rl; letter-spacing: 0.04em; display: none; }
  .bok-uchwyt.lewy { left: calc(max(var(--margines), env(safe-area-inset-left)) + var(--panel-w) - 1px); border-left: 0; border-radius: 0 12px 12px 0; }
  .bok-uchwyt.prawy { right: calc(max(var(--margines), env(safe-area-inset-right)) + var(--kol-w) - 1px); border-right: 0; border-radius: 12px 0 0 12px; }
  /* pion w obrębie pierwszej ramki prawej kolumny, oba uchwyty na jednej wysokości (main.js polozUchwyty): rozwinięty bok —
     nie na przerwie między kartami; schowany — ta sama górna krawędź, wysokość z napisu (min-height) */
  .bok-uchwyt { top: var(--uchwyt-top, calc(var(--pasek-dol) + 22px)); }
  html:not(.lewy-schowany) .bok-uchwyt.lewy, html:not(.prawy-schowany) .bok-uchwyt.prawy { min-height: 0; height: var(--uchwyt-h, 58px); }
  /* schowany bok: wąski uchwyt (--bok-slad) przy granicy obszaru bezpiecznego. iPhone w poziomie podaje safe-area-inset po
     obu stronach, a wycięcie jest po jednej — uchwyt stoi obok wycięcia albo, po drugiej stronie, w tej samej odległości od
     krawędzi; wtedy jest „pływającą” kartką z obwódką i zaokrągleniem ze wszystkich stron (przy insecie 0 — przy krawędzi,
     bez obwódki od jej strony, jak na komputerze). Strony wycięcia nie rozpoznajemy: Safari na iOS przy obrocie o 180°
     z poziomu w poziom i przy obrocie w tle często nie wysyła zdarzeń, a window.orientation i screen.orientation zostają
     stare (SZ-096, z Układu Słonecznego — DOSWIADCZENIA.md §2). */
  html.lewy-schowany .bok-uchwyt.lewy, html.prawy-schowany .bok-uchwyt.prawy { width: var(--bok-slad); --przy-wcieciu-l: min(1px, calc(env(safe-area-inset-left, 0px) * 1000)); --przy-wcieciu-p: min(1px, calc(env(safe-area-inset-right, 0px) * 1000)); }
  html.lewy-schowany .bok-uchwyt.lewy { left: env(safe-area-inset-left, 0px); border-left: var(--przy-wcieciu-l) solid; border-radius: calc(var(--przy-wcieciu-l) * 12) 12px 12px calc(var(--przy-wcieciu-l) * 12); }
  html.prawy-schowany .bok-uchwyt.prawy { right: env(safe-area-inset-right, 0px); border-right: var(--przy-wcieciu-p) solid; border-radius: 12px calc(var(--przy-wcieciu-p) * 12) calc(var(--przy-wcieciu-p) * 12) 12px; }
  html.lewy-schowany .bok-uchwyt.lewy .bok-napis, html.prawy-schowany .bok-uchwyt.prawy .bok-napis { display: block; }
  html.lewy-schowany .bok-uchwyt.lewy, html.prawy-schowany .bok-uchwyt.prawy { color: var(--tekst); border-color: color-mix(in srgb, var(--akcent) 55%, transparent); }
  body.ze-wstepem .bok-uchwyt { opacity: 0; pointer-events: none; }

  .dok-sceny.jedna-linia { flex-wrap: nowrap; }
  .dok-sceny.jedna-linia > .kontrolka { flex: none; }
  .dok-sceny.jedna-linia.przewijany { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } /* ostateczność */
  .kontrolka.skrot { position: relative; }
  .skrot-przycisk {
    display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.06); color: var(--tekst); font: 500 13px/1.2 var(--font);
    cursor: pointer; white-space: nowrap;
  }
  .skrot-przycisk:hover { background: rgba(255, 255, 255, 0.12); }
  .skrot-przycisk:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
  .skrot-etykieta { color: var(--tekst-2); font-size: 12px; }
  .skrot-wartosc { font-weight: 600; }
  .skrot-strzalka { font-size: 11px; color: var(--tekst-2); transition: transform 0.2s; }
  .skrot-przycisk[aria-expanded='true'] { background: color-mix(in srgb, var(--akcent) 20%, transparent); border-color: color-mix(in srgb, var(--akcent) 55%, transparent); }
  .skrot-przycisk[aria-expanded='true'] .skrot-strzalka { transform: rotate(180deg); }
  .skrot.ma-wspomniana .skrot-przycisk { border-color: color-mix(in srgb, var(--akcent) 60%, transparent); } /* „Więcej” skrywa kontrolkę, o której mówi tekst kroku */
  .skrot.ma-wspomniana .skrot-przycisk::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--akcent); }
  .dok-ramka {
    position: absolute; bottom: calc(100% + 18px); left: -6px; z-index: 5; width: max-content; max-width: calc(100vw - 2 * var(--margines));
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 12px;
    background: var(--szklo-mocne); border: 1px solid var(--ramka-mocna); border-radius: 14px; box-shadow: var(--cien);
  }
  .dok-ramka[hidden] { display: none; }
  .dok-ramka:focus { outline: none; } /* tabindex=-1: klik w treść ramki zostawia w niej fokus (focusout nie zamyka) */
  .dok-ramka.do-prawej { left: auto; right: -6px; }
  .dok-ramka::after { content: ''; position: absolute; left: 6px; width: var(--most, 100%); top: 100%; height: 20px; } /* most nad przyciskiem: mysz przechodzi z przycisku do ramki */
  .dok-ramka.do-prawej::after { left: auto; right: 6px; }
  .dok-ramka > .kontrolka { flex: none; }
}

/* ---------- Sama scena (main.js ustawSamaScena, SZ-096): wszystkie ramki schowane, w rogu jeden przycisk przywrócenia ----------
   Przycisk włączenia: w pasku (#sama-scena), na telefonie w pionie (≤ 560 px) w panelu dźwięku (.dzwiek-scena). Ramki tylko
   niewidoczne (visibility) — prostokąty paneli bez zmian, płótna wstawek zachowują rysunek. Komunikaty zostają. */
.pokaz-ramki { display: none; }
html.sama-scena :is(.pasek, .panel, .kolumna-prawa, .dok, .bok-uchwyt) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s, transform 0.32s ease, visibility 0s linear 0.25s; }
html.sama-scena .kolumna-prawa { transition: none; } /* wstawki 3D (silnik._rysujWidoki) nie przenikają — kolumna znika od razu razem z nimi */
html.sama-scena .pokaz-ramki {
  display: flex; align-items: center; justify-content: center; position: fixed; z-index: 30;
  top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--ramka-mocna); border-radius: 11px; background: var(--szklo); color: var(--tekst-2); font-size: 18px;
  opacity: 0.75; cursor: pointer; animation: pojaw 0.35s ease-out;
}
.pokaz-ramki::before { content: ''; position: absolute; inset: -6px; } /* pole dotyku ok. 50 × 50 px */
.pokaz-ramki:hover, .pokaz-ramki:focus-visible { opacity: 1; color: var(--tekst); }
.pokaz-ramki:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
@media (max-width: 560px) { #sama-scena { display: none; } }
/* telefon: 🔊⋮ przy krawędzi (10 px) trudno trafić kciukiem obok gestu krawędzi Safari — z prawej co najmniej 16 px, w poziomie
   także wycięcie ekranu (safe-area; Chrome bez okna ma wcięcia 0 — gałąź sprawdza tylko iOS); przełączniki menu „Dźwięk i widok” ze stanem — włączony wyróżniony (SZ-138) */
@media (max-width: 820px) { .pasek { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(var(--margines), env(safe-area-inset-left)); } }
.dzwiek-grafika :is(#jakosc-panel, #sama-scena-panel, #pelny-ekran-panel)[aria-pressed='true'] { color: var(--tekst); border-color: var(--akcent); background: color-mix(in srgb, var(--akcent) 22%, transparent); }
@media (forced-colors: active) { .dzwiek-grafika :is(#jakosc-panel, #sama-scena-panel, #pelny-ekran-panel)[aria-pressed='true'] { border-color: Highlight; } }
/* telefon (≤ 820 px): jakość, pełny ekran (i ≤ 560 px sama scena) są tylko w panelu dźwięku — przycisk 🔊⋮ zostaje na swoim
   miejscu, żeby były osiągalne dwoma dotknięciami także w samej scenie (tam też wyjście); przycisk przywrócenia w lewym rogu */
@media (max-width: 820px) {
  .pasek > :not(.pasek-prawa), .pasek-prawa > :not(.dzwiek-kontener) { transition: opacity 0.25s; } /* także przy wyjściu */
  html.sama-scena .pasek { opacity: 1; background: transparent; }
  html.sama-scena .pasek > :not(.pasek-prawa), html.sama-scena .pasek-prawa > :not(.dzwiek-kontener) { opacity: 0; }
  html.sama-scena .dzwiek-scena { display: flex; } /* 561–820 px wiersz jest ukryty (w pasku #sama-scena) — w samej scenie wyjście z menu */
  html.sama-scena .dzwiek-kontener { visibility: visible; pointer-events: auto; }
  html.sama-scena .pokaz-ramki { right: auto; left: max(8px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top, 0px) + 7px); }
}
@media (forced-colors: active) { html.sama-scena .pokaz-ramki { border-color: ButtonText; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html.modul-czeka body::after { animation: wczytywanie-bez-ruchu 0s 0.6s forwards; }
}

/* ---------- Powiększanie wstawek (js/core/powiekszenie.js; wariant 2 — makieta docs/makiety/wykresy.html) ----------
   ⤢ w tytule wstawki → duży widok nad sceną (przyciemnienie cieniem wstawki: drugi widok 3D w jej prostokącie zostaje jasny);
   „na przód” (lektor w trybie automatycznym) — średnia, bez przyciemnienia, pasek pozostałego czasu. Płótno .elastyczny
   (wykres.js, droga-reakcji.js) dostaje nowe proporcje; inne zachowują swoje. --skala-wykresu: napisy na płótnie (wykres.js
   skalaWykresu) i w HTML wstawki. Warstwa nad dokiem i kolumnami (10–12), pod paskiem (20 — jego menu i panel dźwięku
   otwierają się nad wstawką), wstępem (35) i dymkami (40); duży widok zaczyna się pod paskiem, a pasek jest wtedy inert. */
.wstawka-powieksz { flex: none; pointer-events: auto; background: none; border: 0; color: inherit; padding: 3px 4px; margin: -3px 0; cursor: pointer; border-radius: 6px; line-height: 0; }
.wstawka-powieksz .ikona { width: 13px; height: 13px; }
.wstawka-powieksz:hover { color: var(--tekst); background: rgba(140, 170, 230, 0.15); }
.wstawka-powieksz:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.wstawka-powieksz.puls { color: var(--akcent); background: rgba(76, 201, 240, 0.18); animation: puls-powieksz 0.9s ease-in-out 4; }
@keyframes puls-powieksz { 50% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(76, 201, 240, 0.22); } }
@media (pointer: fine) { .tablica .wstawka-tresc { cursor: zoom-in; } } /* klik w treść powiększa (powiekszenie.js klikWeWstawke) */
.wstawka-zastepnik { border: 1px dashed var(--ramka-mocna); border-radius: 12px; flex-shrink: 0; flex-basis: 100%; pointer-events: auto; } /* telefon: tablica w wierszu z zawijaniem */
.dymek-wykresu { position: fixed; z-index: 41; background: var(--akcent); color: #03101a; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 4px 9px; white-space: nowrap; pointer-events: none; animation: dymek-wykresu 3.6s forwards; }
.dymek-wykresu::after { content: ''; position: absolute; right: 10px; top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--akcent); }
@keyframes dymek-wykresu { 0% { opacity: 0; transform: translateY(4px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.warstwa-wykresu { position: fixed; inset: 0; z-index: 19; pointer-events: none; }
html.sama-scena .warstwa-wykresu { display: none; } /* „Sama scena” — jak kolumna */
body:has(.warstwa-wykresu.duza) .pasek { filter: brightness(0.45); } /* duży widok: pasek nad warstwą, ale wyłączony (inert) — przyciemniony jak reszta */
body:has(.panel.rozwiniety) .warstwa-wykresu > .na-przod { visibility: hidden; } /* telefon: czytanie rozwiniętego panelu — jak wstawki w kolumnie */
.warstwa-wykresu-tlo { position: absolute; inset: 0; display: none; pointer-events: auto; }
/* szczypanie w powiększonym wykresie i obok niego nie powiększa całej strony (Safari iOS: widok wyjeżdżał poza ekran); przewijanie zostaje */
.warstwa-wykresu-tlo, .wstawka.powiekszona { touch-action: pan-x pan-y; }
.warstwa-wykresu.duza .warstwa-wykresu-tlo { display: block; }
.wstawka.powiekszona {
  position: absolute; pointer-events: auto; right: var(--margines); top: calc(var(--pasek-dol) + 8px);
  width: min(760px, calc(100vw - var(--panel-w) - var(--margines) * 3)); overflow: auto;
  max-height: calc(100vh - var(--pasek-dol) - var(--margines) * 2); max-height: calc(100dvh - var(--pasek-dol) - var(--margines) * 2); /* vh — Safari < 15.4 */
  background: rgba(8, 12, 24, 0.97); border-color: var(--ramka-mocna); border-radius: var(--promien); padding: 12px 16px 14px; /* kryjące — scena nie prześwituje przez wykres */
  --skala-wykresu: 1.7; box-shadow: 0 0 0 100vmax rgba(2, 4, 10, 0.55), var(--cien); animation: wysun-wykres 0.25s ease-out;
}
@keyframes wysun-wykres { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.wstawka.powiekszona.na-przod { width: min(540px, 42vw); --skala-wykresu: 1.4; box-shadow: var(--cien), 0 0 0 2px var(--akcent); cursor: pointer; }
.wstawka.powiekszona .wstawka-tytul { font-size: calc(11px * var(--skala-wykresu)); margin-bottom: 8px; }
.wstawka.powiekszona .wstawka-powieksz .ikona { width: 1.25em; height: 1.25em; }
.wstawka.powiekszona .wstawka-zwin { display: none; }
.wstawka.powiekszona .wstawka-tresc { display: block; } /* także przy zwiniętych wstawkach */
.wstawka.powiekszona .wstawka-notka:not([hidden]) { display: block; font-size: calc(10px * var(--skala-wykresu)); } /* notki schowane na niskim telefonie wracają; ukryte przez scenę — nie */
.wstawka.powiekszona canvas.elastyczny { width: 100%; aspect-ratio: 16 / 9 !important; max-height: calc(100vh - var(--pasek-dol) - 190px); max-height: calc(100dvh - var(--pasek-dol) - 190px); }
.wstawka.powiekszona canvas:not(.elastyczny), .wstawka.powiekszona svg { width: 100%; max-width: 600px; max-height: none; margin: 0 auto; }
.wstawka.powiekszona table { font-size: calc(11px * var(--skala-wykresu)); }
.wstawka-czas { height: 3px; margin-top: 8px; background: var(--akcent); border-radius: 2px; transform-origin: left; animation: wstawka-czas var(--czas, 8s) linear forwards; }
@keyframes wstawka-czas { to { transform: scaleX(0); } }
/* komunikaty (u góry, z-index 40) przy otwartym powiększeniu schodzą na dół, nad lewy panel — nie zasłaniają tytułu i osi wykresu */
body:has(.warstwa-wykresu > .powiekszona) .komunikaty { top: auto; bottom: calc(var(--dok-h) + var(--margines) * 2 + 8px); left: var(--margines); transform: none; width: var(--panel-w); flex-direction: column-reverse; }
@media (max-width: 820px) { /* telefon pionowo: na całą szerokość pod paskiem, scena widoczna niżej */
  body:has(.warstwa-wykresu > .powiekszona) .komunikaty { left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); }
  .wstawka-powieksz { position: relative; padding: 6px 2px; margin: -6px 0; } /* większe pole dotyku bez zmiany wysokości tytułu */
  .wstawka-powieksz::after { content: ''; position: absolute; inset: -9px -1px -9px -14px; } /* pole dotyku ok. 32×43 px, w lewo nad końcem tytułu (napis bez dotyku) — ▾ obok ma swoje */
  .wstawka.powiekszona { left: 8px; right: 8px; width: auto; top: calc(var(--pasek-dol) + 6px); max-height: calc(100dvh - var(--pasek-dol) - 16px); padding: 8px 10px 10px; border-radius: 12px; --skala-wykresu: 1.3; }
  .wstawka.powiekszona.na-przod { width: auto; --skala-wykresu: 1.2; }
  .wstawka.powiekszona canvas.elastyczny { aspect-ratio: 4 / 3 !important; max-height: 52vh; max-height: 52dvh; }
  .wstawka.powiekszona.na-przod canvas.elastyczny { aspect-ratio: 16 / 10 !important; max-height: 34vh; max-height: 34dvh; }
}
/* niski telefon pionowo (próg „zwięźlejszych wstawek”): „na przód” niższa — przy 310×640 zasłaniała przez 8 s ok. 60 % pasa sceny
   (kwasy k3: 246 → 184 px, wykresy 2 : 1 ok. 175 px). Dalej u góry, nad odczytami (wariant 1, 29.10) — u dołu weszłaby na dok, którym lektor właśnie steruje; wykres 2 : 1,
   napisy ok. 1,1 skali kolumny, bez notki jak w kolumnie; pełny widok pod ⤢. Czas bez zmian (CZAS_NA_PRZOD) */
@media (max-width: 820px) and (max-height: 740px) and (orientation: portrait) {
  .wstawka.powiekszona.na-przod { padding: 6px 10px 8px; --skala-wykresu: 1.1; }
  .wstawka.powiekszona.na-przod .wstawka-tytul { margin-bottom: 4px; }
  .wstawka.powiekszona.na-przod .wstawka-notka { display: none; }
  .wstawka.powiekszona.na-przod canvas.elastyczny { aspect-ratio: 2 / 1 !important; max-height: 24vh; max-height: 24dvh; }
  .wstawka.powiekszona.na-przod canvas:not(.elastyczny), .wstawka.powiekszona.na-przod svg { width: auto; max-width: 100%; max-height: 24vh; max-height: 24dvh; }
  .wstawka.powiekszona.na-przod .wstawka-czas { margin-top: 6px; }
}
@media (orientation: landscape) and (max-height: 520px) { /* niski ekran poziomy: prawa część ekranu na całą wysokość */
  body:has(.warstwa-wykresu > .powiekszona) .komunikaty { bottom: 8px; left: 8px; transform: none; width: calc(42vw - 24px); align-items: stretch; } /* obok widoku, po lewej */
  .wstawka.powiekszona { left: auto; right: max(8px, env(safe-area-inset-right, 0px)); top: calc(var(--pasek-dol) + 4px); bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: 58vw; max-height: none; display: flex; flex-direction: column; --skala-wykresu: 1.25; }
  .wstawka.powiekszona .wstawka-tresc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .wstawka.powiekszona canvas.elastyczny { aspect-ratio: auto !important; flex: 1; min-height: 0; height: auto; max-height: none; }
  .wstawka.powiekszona.na-przod { width: 46vw; bottom: auto; display: block; --skala-wykresu: 1.1; }
  .wstawka.powiekszona.na-przod .wstawka-tresc { display: block; }
  .wstawka.powiekszona.na-przod canvas.elastyczny { aspect-ratio: 16 / 9 !important; max-height: calc(100vh - var(--pasek-dol) - 90px); max-height: calc(100dvh - var(--pasek-dol) - 90px); }
}
/* „na przód” (tryb automatyczny) na telefonie: dymki nad dokiem — przy bottom z reguł wyżej wchodziły na panel opisu i Wstecz / Dalej
   (29.10); rozwinięty panel chowa „na przód” (dymki u góry jak bez niego), duży widok — bez zmian (reszta strony wyłączona). Niższy
   telefon pionowo (< 600 px) — jak dotąd: od doku w górę dymek wszedłby na wstawkę „na przód” i pasek. Niski ekran poziomy: nad
   dokiem, a przy pokazanym lewym boku nad jego Wstecz / Dalej (≥ 52 px od dołu) */
@media (max-width: 820px) and (min-height: 600px) { body:not(:has(.panel.rozwiniety)):has(.warstwa-wykresu > .na-przod) .komunikaty { top: auto; bottom: calc(var(--panel-h) + var(--dok-rzecz, 0px) + 16px); } }
@media (min-width: 821px) and (max-height: 520px) { body:has(.warstwa-wykresu > .na-przod) .komunikaty { top: auto; bottom: calc(max(var(--dok-rzecz, 0px), 52px) + 16px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) {
  .dymek-wykresu { animation: none; } /* zostaje do usunięcia (3,7 s) zamiast zniknąć od razu */
  .wstawka-czas { display: none; }
}
@media (forced-colors: active) { .wstawka.powiekszona { border: 2px solid CanvasText; } }

/* ---------- Zadanie z kluczem (D1, js/core/zadania.js) — lekcja Zd w panelu opisu ---------- */
.wizualnie-ukryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zadanie { --zd: var(--rodzaj-zd); margin: 12px 0 4px; font-size: 14px; color-scheme: dark; } /* color-scheme: pola wyboru jasno obrysowane na ciemnym tle */
.zadanie-wskazowka { margin: 0 2px 10px; font-size: 12px; color: var(--tekst-3); }
.zadanie-tresc { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--zd) 7%, transparent); border: 1px solid color-mix(in srgb, var(--zd) 30%, transparent); }
.zadanie-tresc p { margin: 0 0 6px; }
.zadanie-tresc p:last-child { margin: 0; }
.zadanie-zrodlo { margin: 4px 2px 10px; font-size: 12px; color: var(--tekst-3); }
.zadanie-czesci { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.czesc { padding: 8px 10px 8px; border-radius: 12px; border: 1px solid var(--ramka); background: rgba(255, 255, 255, 0.02); }
.czesc[data-ok] { border-color: color-mix(in srgb, var(--dobrze) 45%, transparent); }
.czesc-polecenie { margin: 0 0 8px; }
.czesc-lit { font-weight: 700; color: var(--zd); margin-right: 2px; }
.czesc-pkt { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--tekst-2); border: 1px solid var(--ramka-mocna); white-space: nowrap; }
.czesc-odp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
.odp-pola { display: flex; gap: 8px; flex: 1 1 200px; min-width: 0; }
.odp-pole { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; flex: 2 1 0; min-width: 0; } /* pola w jednej linii, choć nagłówek „Wynik” z przyciskami jest wyższy */
.odp-pole-jedn { flex: 1 1 0; }
.odp-etykieta { font-size: 12px; color: var(--tekst-2); }
.odp-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; min-width: 0; }
.odp-wstaw-grupa { display: none; gap: 4px; } /* „−” i „·10^” tylko na dotyku: klawiatura liczbowa ich nie ma (D3) */
@media (pointer: coarse) {
  .odp-wstaw-grupa { display: flex; }
  .zadanie .odp-wstaw { padding: 4px 9px; min-width: 36px; min-height: 30px; font-size: 13px; color: var(--tekst); }
}
.czesc-odp input[type="text"] {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--ramka-mocna);
  background: rgba(0, 0, 0, 0.25); color: var(--tekst); font: inherit; font-size: 16px; /* 16 px — iOS nie powiększa strony przy fokusie */
  font-variant-numeric: tabular-nums;
}
.czesc-odp input[type="text"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: transparent; }
.odp-akcje { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.odp-podpowiedz:disabled { opacity: 0.5; cursor: default; }
/* wybór znaku: lewa strona | < = > | prawa strona — zdanie czyta się po kolei */
.czesc-znak { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 8px; border: 0; margin: 0; padding: 0; flex: 1 1 100%; min-width: 0; }
.znak-strona { min-width: 0; color: var(--tekst-2); font-size: 13px; line-height: 1.3; text-align: right; }
.znak-strona:last-child { text-align: left; }
.znaki { display: inline-flex; gap: 4px; }
.znak-opcja { position: relative; }
.znak-opcja input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.znak-opcja span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ramka-mocna); background: rgba(255, 255, 255, 0.04); font-size: 20px; font-weight: 600; }
.znak-opcja input:checked + span { background: color-mix(in srgb, var(--zd) 22%, transparent); border-color: var(--zd); color: #fff; }
.znak-opcja input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
.czesc-podpowiedzi { margin: 6px 0 0; padding-left: 18px; color: var(--tekst-2); font-size: 13px; }
.czesc-podpowiedzi:empty { display: none; }
.czesc-podpowiedzi li { margin: 2px 0; }
.czesc-info { margin: 6px 0 0; font-size: 13px; }
.czesc-info:empty { display: none; }
.czesc-info[data-kod="dobrze"] { color: var(--dobrze); }
.czesc-info[data-kod="jednostka"] { color: var(--cieply); }
.czesc-info[data-kod="zle"] { color: #ffb0b0; }
.klucz { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--zd) 40%, transparent); }
.klucz-tytul { margin: 0 0 4px; font: 600 14px/1.3 var(--font-naglowki); color: var(--zd); }
.klucz-opis, .klucz-zasady { margin: 0 0 8px; font-size: 12.5px; color: var(--tekst-2); }
.klucz-zasady { margin: 8px 0 0; color: var(--tekst-3); }
.klucz-kroki { margin: 0; padding-left: 20px; }
.klucz-kroki:empty { display: none; }
.klucz-kroki:focus { outline: none; }
.klucz-krok { margin: 0 0 8px; }
.klucz-czesc { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 2px; }
.klucz-mam { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 2px 8px 2px 4px; border-radius: 8px; font-size: 13px; color: var(--tekst-2); cursor: pointer; min-height: 36px; }
.klucz-mam:hover { background: rgba(255, 255, 255, 0.05); }
.klucz-mam input { width: 20px; height: 20px; margin: 0; accent-color: var(--zd); flex: none; }
.klucz-tekst .wzor { display: inline-block; max-width: 100%; box-sizing: border-box; margin: 2px 0; padding: 1px 6px; vertical-align: baseline; } /* wzór w całości w wierszu; dłuższy łamie się tylko przed operatorem */
.klucz-tekst { line-height: 1.7; }
.klucz-suma { margin: 4px 0 0; font-weight: 600; }
.klucz-suma:empty { display: none; }
.klucz-akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.klucz-akcje [hidden] { display: none; }
.zadanie .wzor { font-family: 'Space Grotesk', ui-monospace, monospace; background: rgba(255, 255, 255, 0.05); padding: 0 4px; border-radius: 4px; } /* w zadaniu wzory w linii (klucz, podpowiedzi) */
/* wzór z kropką / przecinkiem po nim (main.js znakPrzyWzorze): inline-flex — wzór zwęża się tylko wtedy, gdy całość nie mieści się
   w wierszu; przy inline-block + max-width: calc(100% - 0,45em) szerokość liczona od samej treści była węższa od wzoru o różnicę
   szerokości przecinka i 0,45em, więc krótki wzór łamał się zawsze („F_g / = F_w” w kluczu 1.5 — sesja 4) */
.zadanie .wzor-calosc { display: inline-flex; align-items: last baseline; max-width: 100%; vertical-align: baseline; }
.zadanie .wzor-calosc > .wzor { flex: 0 1 auto; min-width: 0; max-width: none; }
.zadanie .przycisk-maly { min-height: 36px; }
@media (max-width: 820px) { .zadanie { font-size: 14.5px; } .zadanie .przycisk-maly { min-height: 40px; } .klucz-mam { min-height: 40px; } }
/* wykres zadania z odczytem wskazaniem (D6) i „Sprawdź w scenie” (punkt styku zadanie ↔ scena) */
.zadanie-wykres { margin: 10px 0; padding: 8px 8px 4px; border: 1px solid var(--ramka); border-radius: 10px; background: rgba(6, 10, 22, 0.35); }
.zadanie-wykres canvas { display: block; width: 100%; height: auto; }
.zadanie-wykres-opis { font-size: 12px; color: var(--tekst-2); margin: 0 0 6px; }
.zadanie-scena { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ramka); }
.zadanie-scena[hidden] { display: none; }
.zadanie-scena-opis { font-size: 13px; color: var(--tekst-2); flex: 1 1 180px; }