/* ============================================================================
   p5 · SIATKA ZE STÓWKĄ — styl strony (świat i lot z 4B, kafel stówki i pytania ze Stówki)
   ----------------------------------------------------------------------------
   Kolejność źródeł: kafle.css (wzornik 1:1, nie ruszamy) → scrollcraft.css
   (silnik, nie ruszamy) → ten plik. Wszystkie wartości tej strony mieszkają
   w jednym bloku :root niżej; reguły sięgają po nie wyłącznie przez var().
   Poza tokenami zostają tylko słowa kluczowe układu (0, auto, 1fr, 100%,
   środek 50%). Świat to kafle wzornika (taca, rdzeń, kapsuła, pole słońca)
   w jednostkach świata — kamera je skaluje; w znacznikach nie ma koloru.
   ========================================================================== */

:root {
  /* --- motyw silnika: wartości z kafle.css ------------------------------- */
  --sc-canvas: var(--paper);
  --sc-surface: var(--card);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--grey);
  --sc-accent: var(--sun);
  --sc-accent-ink: var(--ink);
  --sc-font-display: var(--f-display);
  --sc-font-text: var(--f-body);
  --sc-ease-out: var(--ease-out-mocny);
  --sc-ease-in-out: var(--ease-inout-mocny);
  --sc-ease-drawer: var(--ease-tray);
  --sc-d-fast: var(--dur-mikro);
  --sc-d-base: var(--dur-krotki);
  --sc-d-slow: var(--dur-warstwa);
  --sc-z-stage: 1;
  --sc-z-copy: 20;
  --sc-z-chrome: 60;

  /* --- świat: kreska w pikselach ekranu (nie skaluje się z kamerą) -------- */
  --p4-w-kratka: 0.75px;
  --p4-w-granica: 1.5px;
  --p4-w-cienka: 0.7px;
  --p4-w-odnosnik: 0.8px;
  --p4-w-balon: 1px;
  --p4-w-sk: 1.5px;
  --p4-w-mapa: 1.2px;
  --p4-w-mapa-cienka: 0.7px;
  --p4-w-mapa-kadr: 1.6px;
  --p4-przerywana: 7 6;
  --p4-znak-obwodka: 86px;           /* 0,042 em stopnia — w jednostkach krzywych znaku */
  --p4-znak-skos: 6;

  /* --- świat: kafle w jednostkach świata (1 = 1 px przy zbliżeniu 1) -------- */
  --p4-k-pad: 16px 16px 14px;
  --p4-k-odstep: 7px;
  --p4-k-obwodka: rgba(14, 14, 14, 0.05);
  --p4-k-liczba: 44px;
  --p4-k-zl: 22px;
  --p4-k-etykieta: 10.5px;
  --p4-k-dopisek: 10.5px;
  --p4-k-zdanie: 11.8px;
  --p4-k-kapsula: 9px;
  --p4-k-pasek: 6px;
  --p4-k-kamyk: 11px;
  --p4-k-kamyk-odstep: 7px;
  --p4-k-kamyk-kreska: 2px;
  --p4-k-nr: 22px;
  --p4-uniesienie: -3px;             /* zapalony kafel: uniesienie jak najechanie we wzorniku */

  /* --- świat: pismo podpisów w jednostkach świata (kamera je skaluje) ------ */
  --p4-t-opis: 12.5px;
  --p4-t-granica: 13px;
  --p4-t-poza: 17px;
  --p4-t-balon: 13px;
  --p4-skala-pisma: 1;
  --p4-rozstrzal: 0.12em;
  --p4-rozstrzal-maly: 0.08em;
  --p4-rozstrzal-pigulki: 0.07em;
  --p4-rozstrzal-jak: 0.02em;

  /* --- układ: skala odstępów (4 px bazy) i miary ----------------------------- */
  --p4-s0: 0.1rem;
  --p4-s1: 0.25rem;
  --p4-s2: 0.5rem;
  --p4-s3: 0.75rem;
  --p4-s4: 1rem;
  --p4-s5: 1.25rem;
  --p4-margines: clamp(1rem, 2.4vw, 2.25rem);
  --p4-odstep: clamp(0.75rem, 1.4vw, 1.25rem);
  --p4-kolumna: min(35rem, 40vw);
  --p4-dol: clamp(1rem, 4.5vh, 2.75rem);
  --p4-naglowek-h: 7.4rem;           /* JS nadpisuje zmierzonym dołem nagłówka */
  --p4-stopka-h: 0px;                /* JS nadpisuje zmierzoną wysokością stopki */
  --p4-znak-w: 150px;
  --p4-znak-pole: calc(var(--p4-znak-w) * 1760 / 7826);   /* wysokość wersalika F */
  --p4-promien: var(--radius-core);
  --p4-promien-maly: var(--radius-core-sm);
  --p4-pelny: 999px;
  --p4-plyta-pad: clamp(1.1rem, 1.8vw, 1.6rem);
  --p4-panel-w: min(56rem, calc(100vw - 2 * var(--p4-margines)));
  --p4-panel-kol: minmax(0, 0.85fr) minmax(0, 1.15fr);
  --p4-panel-kol-odstep: 2rem;
  --p4-cel: 44px;
  --p4-kreska: 1px;
  --p4-kreska-mocna: 1.5px;
  --p4-mapa-rzut-w: 9.5rem;
  --p4-mapa-rzut-h: 4.4rem;
  --p4-mapa-kol: 7.4rem;
  --p4-mapa-kropka: 0.62rem;
  --p4-mapa-kropka-m: 0.55rem;
  --p4-mapa-pad: var(--p4-s2) 0.9rem var(--p4-s2) 0.6rem;
  --p4-krok-nr: 2.25rem;
  --p4-balon: 1.3rem;
  --p4-balon-kol: 1.4rem;
  --p4-wie-kol: 4.2rem;
  --p4-ab-skala: 120;                /* minut pełnej długości paska czasu */
  --p4-pasek-h: 10px;
  --p4-miara-lead: 44ch;
  --p4-miara-zdanie: 40ch;
  --p4-miara-klauzula: 52ch;
  --p4-podkreslenie: 4px;
  --p4-min-nazwa: 2.5em;
  --p4-kwadrat: 1;
  --p4-bez-js-swiat-w: 2160px;
  --p4-bez-js-swiat-h: 860px;
  --p4-bez-js-miara: 44rem;

  /* --- pismo strony ----------------------------------------------------------- */
  --p4-h1: clamp(2.2rem, 1.1rem + 2.5vw, 3.5rem);
  --p4-h2: clamp(1.55rem, 1.05rem + 1.35vw, 2.35rem);
  --p4-h2-final: clamp(1.9rem, 1.1rem + 2.3vw, 3.2rem);
  --p4-h3: 1.05rem;
  --p4-h3-duzy: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  --p4-liczba: clamp(2.4rem, 1.7rem + 2.2vw, 3.4rem);
  --p4-liczba-mala: 1.35rem;
  --p4-plaster-kwota: 1.55rem;
  --p4-tekst: 0.98rem;
  --p4-tekst-maly: 0.84rem;
  --p4-tekst-mini: 0.74rem;
  --p4-etykieta: 0.66rem;
  --p4-etykieta-rozstrzal: 0.16em;
  --p4-waga: 400;
  --p4-waga-mocna: 800;
  --p4-interlinia: 1.55;
  --p4-interlinia-naglowka: 1.12;    /* ogonki Ę/Ą i kreski Ń/Ś w wersalikach Antona */
  --p4-interlinia-ciasna: 1.25;
  --p4-interlinia-srednia: 1.3;
  --p4-interlinia-liczby: 0.9;
  --p4-interlinia-pelna: 1;
  --p4-anton-rozstrzal: 0.01em;

  /* --- teksty wg uwag Natalii: ból, pytania ------------------------------------ */
  --p4-lead-tytul: 1.08rem;
  --p4-bol-h: clamp(1.25rem, 0.95rem + 0.9vw, 1.7rem);

  /* --- ruch -------------------------------------------------------------- */
  --p4-odsloniecie-rozmycie: 9px;
  --p4-odsloniecie-y: 6px;
  --p4-mgnienie: var(--dur-mikro);
  --p4-mapa-wjazd: -0.5rem;
  --p4-obrot-szuflady: 180deg;

  /* --- warstwy --------------------------------------------------------------- */
  --p4-z-sk: 5;
  --p4-z-panel: 25;
  --p4-z-biurko: 26;
  --p4-z-stopka: 30;
  --p4-z-naglowek: 60;

  /* --- p5 · kafel stówki (z p2/strona.css; rozmiary przestawione pod panel nad siatką) --- */
  --p4-stowka-w: min(62rem, calc(100vw - 2 * var(--p4-margines)));
  --p4-stowka-h: clamp(1.7rem, 1.05rem + 2.1vw, 3.1rem);
  --p4-stowka-h-miara: 24ch;
  --p2-o1: .25rem;  --p2-o2: .5rem;  --p2-o3: .75rem;  --p2-o4: 1rem;
  --p2-o5: 1.5rem;  --p2-o6: 2rem;   --p2-o7: 3rem;    --p2-o8: 4rem;
  --p2-pol: 50%;
  --p2-cel: 44px;
  --p2-waga-tekst: 400;
  --p2-waga-mocna: 800;
  --p2-anton-min: 1.125rem;          /* 18 px — próg Antona */
  --p2-track-etykieta: .16em;
  --p2-lh-cyfry: 1;
  --p2-lh-krotka: 1.2;
  --p2-lh-wiersz: 1.25;
  --p2-lh-etykieta: 1.4;
  --p2-lh-pytanie: 1.14;
  --p2-interlinia-tekst: 1.55;
  --p2-interlinia-lede: 1.32;
  --p2-etykieta: .66rem;
  --p2-drobne: .95rem;
  --p2-lede: clamp(1.25rem, .95rem + 1.1vw, 2.05rem);
  --p2-bol-pytanie: clamp(1.45rem, .85rem + 2.4vw, 3.1rem);
  --p2-miara-lede: 32ch;
  --p2-miara-opis: 38ch;
  --p2-miara-pytania: 44rem;
  --p2-kolumna: clamp(1rem, 2vw, 2rem);
  --p2-wlos: 1px;
  --p2-podkreslenie: .22em;
  --p2-rozmycie: 9px;                /* Odsłonięcie: rozmycie 9 → 0, 620 ms, krzywa tacy */
  --p2-banknot-proporcja: 2 / 1;
  --p2-udzial-na-gniazdo: 50;        /* banknot 2 : 1 → kawałek w gnieździe ma szerokość udział × wysokość gniazda / 50 */
  --p2-ksiega-wiersz: 4.4rem;
  --p2-ksiega-kwota: 2rem;
  --p2-ksiega-nazwa: 1rem;
  --p2-ksiega-odstep: .5rem;
  --p2-gniazdo-h: calc(var(--p2-ksiega-wiersz) - 2 * var(--tray-pad));
  --p2-gniazdo-szer: calc(var(--p2-gniazdo-h) * .92 + var(--p2-o2));
  --p2-wzor-promien: 3px;
  --p2-ciecie-grubosc: 2px;
  --p2-ciecie-wystaje: .9rem;
  --p2-ciecie-dl: 26%;               /* znaczniki cięcia: od krawędzi do ćwierci wysokości — cyfry zostają czyste */
  --p2-napis-liczba: 36cqw;
  --p2-napis-zl: .5;
  --p2-napis-odstep: .04em;
  --p2-uklad-kolumny: minmax(0, 1.7fr) minmax(0, 1fr);
  --p2-uklad-odstep: clamp(1.5rem, 3vw, 3.5rem);
  --p2-z-kawalek: 1;  --p2-z-ciecie: 2;  --p2-z-napis-banknotu: 3;  --p2-z-leci: 4;
  --p2-z-banknot: 2;  --p2-z-ksiega: 1;

  /* --- p5 · arkusz pytań (układ ze Stówki: przypisy w trzech szpaltach) --- */
  --p4-arkusz-pad: clamp(2.5rem, 7svh, 5rem);
  --p4-arkusz-maks: 90rem;
  --p4-z-arkusz: 40;
  --p2-przypisy-kolumny: repeat(3, minmax(0, 1fr));
  --p2-pyt-numer: 2rem;
  --p2-szuflada-y: .35em;            /* odpowiedź wchodzi z małego przesunięcia — tylko transform + opacity */
  --p2-obrot-strzalki: 180deg;       /* wzornik: Obrót strzałki — w dół zwinięte, w górę otwarte */
  --p4-mapa-kol-p5: 4;               /* siedem miejsc mapy w dwóch rzędach */
}

/* ============================================================== podstawa == */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--p4-tekst);
  line-height: var(--p4-interlinia);
}
:focus-visible { outline: var(--p4-kreska-mocna) solid var(--ink); outline-offset: var(--p4-s1); }
p, ul, ol, dl, dd, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.pigulka, .stempel { font-family: var(--f-body); }

.p4-h1, .p4-h2, .p4-h3--duzy, .latarnia, .p4-liczba, .p4-krok-nr, .p4-plaster-kwota, .p4-gora-zdanie {
  font-family: var(--f-display);
  font-weight: var(--p4-waga);
  font-variant-numeric: tabular-nums;
}
.p4-h1, .p4-h2, .p4-h3--duzy, .p4-gora-zdanie {
  text-transform: uppercase;
  line-height: var(--p4-interlinia-naglowka);
  letter-spacing: var(--p4-anton-rozstrzal);
  text-wrap: balance;
}
.p4-h1 { font-size: var(--p4-h1); }
.p4-h2, .p4-gora-zdanie { font-size: var(--p4-h2); }
.p4-h3 { font-size: var(--p4-h3); font-weight: var(--p4-waga-mocna); line-height: var(--p4-interlinia-srednia); }
.p4-h3--duzy { font-size: var(--p4-h3-duzy); }
.p4-etykieta, .p4-ab-podpis, .p4-stopka-h, .p4-wie-wiersz dt {
  font-size: var(--p4-etykieta);
  font-weight: var(--p4-waga-mocna);
  letter-spacing: var(--p4-etykieta-rozstrzal);
  text-transform: uppercase;
  color: var(--grey);
}
.p4-przypis { font-size: var(--p4-tekst-maly); color: var(--grey); }
.p4-zrodlo { font-size: var(--p4-tekst-mini); color: var(--olive); font-weight: var(--p4-waga-mocna); }
.p4-liczba { white-space: nowrap; font-size: var(--p4-liczba); line-height: var(--p4-interlinia-liczby); }
.p4-liczba--mala { font-size: var(--p4-liczba-mala); line-height: var(--p4-interlinia-pelna); }
.p4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p4-podpis-liczby { font-size: var(--p4-tekst-maly); font-weight: var(--p4-waga-mocna); color: var(--grey); }

/* ============================================================ nagłówek == */
.p4-naglowek {
  position: fixed;
  z-index: var(--p4-z-naglowek);
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p4-odstep);
  padding: var(--p4-margines) var(--p4-margines) 0;
  pointer-events: none;
}
.p4-naglowek > * { pointer-events: auto; }
/* znak: pole ochronne = wysokość wersalika F z każdej strony, wypełnione papierem */
.p4-znak-tabliczka {
  background: var(--paper);
  padding: var(--p4-znak-pole);
  margin: calc(-1 * var(--p4-margines)) 0 0 calc(-1 * var(--p4-margines));
  border-radius: 0 0 var(--p4-promien) 0;
  pointer-events: none;
}
.p4-znak { display: block; width: var(--p4-znak-w); height: auto; overflow: visible; }
.p4-znak-tabliczka { flex: none; }
.p4-znak-tusz { fill: var(--ink); }
.p4-znak-slonce { fill: var(--sun); }
.p4-znak-obwodka { fill: none; stroke: var(--ink); stroke-width: var(--p4-znak-obwodka); stroke-linejoin: miter; stroke-miterlimit: var(--p4-znak-skos); }

/* mapa — rzut orientacyjny i sześć miejsc, jak tabliczka na rysunku */
.p4-mapa { display: flex; flex-direction: column; align-items: flex-end; gap: var(--p4-odstep); margin-left: auto; }
.p4-mapa-przelacznik { display: none; white-space: nowrap; }
.p4-mapa-panel {
  display: grid;
  grid-template-columns: var(--p4-mapa-rzut-w) auto;
  align-items: center;
  column-gap: var(--p4-odstep);
  background: var(--paper);
  border: var(--p4-kreska) solid var(--hair);
  border-radius: var(--p4-promien);
  padding: var(--p4-mapa-pad);
}
.p4-mapa-rzut { width: var(--p4-mapa-rzut-w); height: auto; display: block; overflow: hidden; }
.p4-mapa-rzut * { vector-effect: non-scaling-stroke; }
.p4-m-taca { fill: var(--paper-3); stroke: none; }
.p4-m-taca--twoj { fill: none; stroke: var(--ink); stroke-width: var(--p4-w-mapa); }
.p4-m-granica { fill: none; stroke: var(--grey); stroke-width: var(--p4-w-mapa-cienka); stroke-dasharray: var(--p4-przerywana); }
.p4-m-poza { fill: none; stroke: var(--grey-4); stroke-width: var(--p4-w-mapa-cienka); stroke-dasharray: var(--p4-przerywana); }
.p4-mapa-kadr { fill: none; stroke: var(--ink); stroke-width: var(--p4-w-mapa-kadr); }
.p4-mapa-miejsca { display: grid; grid-template-columns: repeat(var(--p4-mapa-kol-p5), var(--p4-mapa-kol)); }
.p4-mapa-miejsca a {
  display: flex;
  align-items: center;
  gap: var(--p4-s2);
  min-height: var(--p4-cel);
  padding-inline: var(--p4-s1);
  border-radius: var(--p4-pelny);
  font-size: var(--p4-etykieta);
  font-weight: var(--p4-waga);
  letter-spacing: var(--p4-rozstrzal-pigulki);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey);
  transition: color var(--dur-mikro) var(--ease-out-mocny);
}
/* stan „tu jesteś”: kształt (wypełnione kółko) + waga pisma, nie sam kolor */
.p4-mapa-miejsca a::before {
  content: "";
  flex: 0 0 auto;
  width: var(--p4-mapa-kropka);
  aspect-ratio: var(--p4-kwadrat);
  border-radius: var(--p4-pelny);
  border: var(--p4-kreska-mocna) solid var(--grey);
  transition: background-color var(--dur-mikro) var(--ease-out-mocny), border-color var(--dur-mikro) var(--ease-out-mocny);
}
.p4-mapa-miejsca a[aria-current="step"] { color: var(--ink); font-weight: var(--p4-waga-mocna); }
.p4-mapa-miejsca a[aria-current="step"]::before { background: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .p4-mapa-miejsca a:hover { color: var(--ink); }
  .p4-mapa-miejsca a:hover::before { border-color: var(--ink); }
}
.p4-zaloguj--w-mapie { display: none; }
.p4-zaloguj--naglowek { align-self: flex-start; }

/* ================================================================ świat == */
.p4-swiat { color: var(--ink); }
.p4-rysunek { position: absolute; inset: 0; margin: 0; transition: opacity var(--p4-mgnienie) var(--ease-out-mocny); }
.p4-warstwa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p4-kamera { transform-origin: 0 0; }
svg.p4-warstwa * { vector-effect: non-scaling-stroke; }
.p4-kafle { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.p4-odcinek { pointer-events: none; }

/* warstwa daleka: kratka, tace, granica */
.p4-l-kratka { fill: none; stroke: var(--paper-3); stroke-width: var(--p4-w-kratka); }
.p4-taca { fill: var(--tray-fill); stroke: none; }
.p4-l-granica { fill: none; stroke: var(--ink); stroke-width: var(--p4-w-granica); stroke-dasharray: var(--p4-przerywana); }
.p4-poza { fill: none; stroke: var(--grey-4); stroke-width: var(--p4-w-cienka); stroke-dasharray: var(--p4-przerywana); }

/* warstwa środkowa: rdzenie kafli — biel wzornika, cień cichy; zapalony dostaje
   pole słońca (krycie), cień hero (krycie) i uniesienie (transform) */
.p4-rdzen {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--p4-k-odstep);
  padding: var(--p4-k-pad);
  background: var(--card);
  border: var(--p4-kreska) solid var(--p4-k-obwodka);
  border-radius: var(--radius-core);
  box-shadow: var(--shadow-tray-sm), var(--shadow-inner-lit);
  isolation: isolate;
  transform: translateY(calc(var(--p4-swiatlo, 0) * var(--p4-uniesienie)));
}
.p4-rdzen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-tray-lg), var(--shadow-inner-lit);
  opacity: var(--p4-swiatlo, 0);
}
.p4-swiatlo { position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: var(--p4-swiatlo, 0); }
.p4-rdzen > :not(.p4-swiatlo) { position: relative; z-index: 1; }
.p4-k-ekran { font-size: var(--p4-k-kapsula); box-shadow: none; }
.p4-k-etykieta {
  font-size: var(--p4-k-etykieta);
  font-weight: var(--p4-waga-mocna);
  letter-spacing: var(--p4-rozstrzal);
  text-transform: uppercase;
  line-height: var(--p4-interlinia-ciasna);
  color: var(--grey);
}
.p4-k-liczba { display: flex; align-items: baseline; gap: var(--p4-s1); white-space: nowrap; line-height: var(--p4-interlinia-liczby); }
.p4-k-kwota { font-family: var(--f-display); font-size: var(--p4-k-liczba); font-variant-numeric: tabular-nums; letter-spacing: var(--p4-anton-rozstrzal); }
.p4-k-zl { font-family: var(--f-display); font-size: var(--p4-k-zl); }
.p4-k-dopisek { font-size: var(--p4-k-dopisek); font-weight: var(--p4-waga-mocna); color: var(--grey); padding-left: var(--p4-s1); }
.p4-k-liczba--pusta .p4-k-kwota { color: var(--grey-4); }
.p4-k-zdanie { font-size: var(--p4-k-zdanie); line-height: var(--p4-interlinia-ciasna); color: var(--grey); text-wrap: pretty; }
.p4-k-zdanie b { color: var(--ink); font-weight: var(--p4-waga-mocna); }
/* kreska godzin działu i pasek czasu zabiegu: jedna skala na całą siatkę, dane w style="--p4-ile" */
.p4-k-pasek {
  display: block;
  align-self: stretch;
  height: var(--p4-k-pasek);
  margin-top: auto;
  border-radius: var(--p4-pelny);
  background: var(--kreska);
  transform-origin: left center;
  transform: scaleX(var(--p4-ile));
}
/* kamyki dni: kształt niesie stan (pełny — zapis, obwódka — dziś, pusty — przed Tobą, kreska — brak zapisu) */
.p4-k-kamyki { display: flex; align-items: center; gap: var(--p4-k-kamyk-odstep); margin-top: auto; }
.p4-k-kamyk { width: var(--p4-k-kamyk); aspect-ratio: var(--p4-kwadrat); border-radius: var(--p4-pelny); border: var(--p4-kreska-mocna) solid var(--ink); }
.p4-k-kamyk--jest { background: var(--ink); }
.p4-k-kamyk--dzis { background: var(--ink); outline: var(--p4-kreska-mocna) solid var(--ink); outline-offset: var(--p4-kreska-mocna); }
.p4-k-kamyk--przed { border-color: var(--grey-4); }
.p4-k-kamyk--brak { border: 0; border-radius: var(--p4-kreska); height: var(--p4-k-kamyk-kreska); aspect-ratio: auto; background: var(--grey-4); }
.p4-k-kroki { display: flex; flex-direction: column; gap: var(--p4-s1); margin-top: auto; font-size: var(--p4-k-zdanie); font-weight: var(--p4-waga-mocna); }
.p4-k-kroki li { display: flex; align-items: center; gap: var(--p4-s2); }
.p4-k-nr {
  display: inline-grid;
  place-items: center;
  width: var(--p4-k-nr);
  aspect-ratio: var(--p4-kwadrat);
  border: var(--p4-kreska) solid var(--ink);
  border-radius: var(--p4-promien-maly);
  font-family: var(--f-display);
  font-weight: var(--p4-waga);
}

/* warstwa bliska: podpisy i odnośniki */
.p4-warstwa--podpisy text { stroke: none; }
/* przy oddaleniu podpisy rosną przeciw kamerze, żeby z góry dało się je przeczytać */
.p4-kontr, .p4-kontr-opis { transform-box: fill-box; transform-origin: center; }
.p4-kontr { transform: scale(var(--p4-kontr, 1)); }
.p4-kontr-opis { transform: scale(var(--p4-kontr-opis, 1)); }
.p4-kontr-opis[text-anchor="end"] { transform-origin: right center; }
.p4-kontr-opis[text-anchor="start"] { transform-origin: left center; }
.p4-t-opis { fill: var(--grey); font: var(--p4-waga) calc(var(--p4-t-opis) * var(--p4-skala-pisma)) / var(--p4-interlinia-pelna) var(--f-body); }
.p4-t-granica { fill: var(--ink); font: var(--p4-waga-mocna) calc(var(--p4-t-granica) * var(--p4-skala-pisma)) / var(--p4-interlinia-pelna) var(--f-body); letter-spacing: var(--p4-rozstrzal); text-transform: uppercase; }
.p4-t-poza { fill: var(--grey); font: var(--p4-waga-mocna) calc(var(--p4-t-poza) * var(--p4-skala-pisma)) / var(--p4-interlinia-srednia) var(--f-body); }
.p4-l-odnosnik { fill: none; stroke: var(--ink); stroke-width: var(--p4-w-odnosnik); }
.p4-l-kropka { fill: var(--ink); stroke: none; }
.p4-l-balon { fill: var(--paper); stroke: var(--ink); stroke-width: var(--p4-w-balon); }
.p4-t-balon { fill: var(--ink); font: var(--p4-waga-mocna) calc(var(--p4-t-balon) * var(--p4-skala-pisma)) / var(--p4-interlinia-pelna) var(--f-body); }

/* tryb spokojny: zmiana przystanku przez krótkie przygaszenie, bez lotu */
.p4-przygaszony .p4-rysunek { opacity: 0; transition-duration: 0s; }
/* lot z mapy: kopia mijanych przystanków nie miga po drodze */
.p4-kopie { transition: opacity var(--dur-krotki) var(--ease-out-mocny); }
.p4-w-locie .p4-kopie { opacity: 0; }
.p4-w-locie .p4-stopka { visibility: hidden; }

/* ruch podpisowy — rdzenie kafli lecą do panelu (duchy: biel rdzenia, cień tacy);
   obrys całej siatki kurczy się do kafla hero. Tylko transform i krycie. */
.p4-skladanie { position: absolute; inset: 0; z-index: var(--p4-z-sk); pointer-events: none; overflow: visible; visibility: hidden; }
.p4-duch {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--p4-duch-w, 100) * 1px);
  height: calc(var(--p4-duch-h, 100) * 1px);
  transform-origin: 0 0;
  background: var(--card);
  border: var(--p4-kreska) solid var(--p4-k-obwodka);
  border-radius: var(--radius-core);
  box-shadow: var(--shadow-tray-md), var(--shadow-inner-lit);
  opacity: 0;
}
.p4-duch--obrys { background: none; box-shadow: none; border: var(--p4-w-sk) solid var(--ink); border-radius: var(--radius-tray); }

/* ================================================================ kopia == */
.p4-kopie { font-size: var(--p4-tekst); }
.p4-kopia {
  position: absolute;
  left: var(--p4-margines);
  bottom: var(--p4-dol);
  width: var(--p4-kolumna);
  display: flex;
  flex-direction: column;
  gap: var(--p4-s3);
  background: var(--paper);
  border: var(--p4-kreska) solid var(--hair);
  border-radius: var(--p4-promien);
  padding: var(--p4-plyta-pad);
  color: var(--ink);
}
.p4-kopia > .kapsula { margin-bottom: var(--p4-s1); }
.p4-lead { font-size: var(--p4-tekst); max-width: var(--p4-miara-lead); text-wrap: pretty; }
.p4-akcja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p4-s2) var(--p4-s4); }
.p4-akcja-przypis { font-size: var(--p4-tekst-maly); font-weight: var(--p4-waga-mocna); color: var(--olive); }
.p4-punkty { padding-top: var(--p4-s1); }
.p4-punkty li { font-size: var(--p4-tekst-maly); }
.p4-liczba-rzad { line-height: var(--p4-interlinia-pelna); }
.p4-liczba-blok { display: flex; flex-direction: column; gap: var(--p4-s1); padding-top: var(--p4-s1); }
.p4-wyprowadzenie { font-size: var(--p4-tekst-maly); color: var(--grey); border-top: var(--p4-kreska) solid var(--hair); padding-top: var(--p4-s2); }

/* wie / nie wie — drugi kanał: słowo i przekreślenie, nie kolor */
.p4-wie { display: flex; flex-direction: column; gap: var(--p4-s2); border-top: var(--p4-kreska) solid var(--hair); padding-top: var(--p4-s3); }
.p4-wie-lista { display: flex; flex-direction: column; gap: var(--p4-s1); }
.p4-wie-wiersz { display: grid; grid-template-columns: var(--p4-wie-kol) 1fr; gap: var(--p4-s2); align-items: baseline; }
.p4-wie-wiersz dd { font-size: var(--p4-tekst-maly); font-weight: var(--p4-waga-mocna); font-variant-numeric: tabular-nums; }
.p4-wie-wiersz--nie dd { font-weight: var(--p4-waga); color: var(--grey); }
.p4-wie-wiersz--nie s { text-decoration-thickness: var(--p4-kreska-mocna); }

/* figura A/B: pasek czasu skalowany transformem, dane w style="--p4-min" */
.p4-ab { display: flex; flex-direction: column; gap: var(--p4-s2); border-top: var(--p4-kreska) solid var(--hair); padding-top: var(--p4-s3); }
.p4-ab-wiersz {
  display: grid;
  grid-template-columns: var(--p4-balon-kol) 1fr auto;
  grid-template-areas: "balon nazwa wynik" ". dane wynik" ". czas czas";
  column-gap: var(--p4-s2);
  row-gap: var(--p4-s0);
  align-items: baseline;
}
.p4-balon {
  grid-area: balon;
  display: inline-grid;
  place-items: center;
  width: var(--p4-balon);
  aspect-ratio: var(--p4-kwadrat);
  border: var(--p4-kreska) solid var(--ink);
  border-radius: var(--p4-pelny);
  font-size: var(--p4-etykieta);
  font-weight: var(--p4-waga-mocna);
  align-self: center;
}
.p4-ab-nazwa { grid-area: nazwa; font-weight: var(--p4-waga-mocna); font-size: var(--p4-tekst-maly); }
.p4-ab-dane { grid-area: dane; font-size: var(--p4-tekst-maly); color: var(--grey); font-variant-numeric: tabular-nums; }
.p4-ab-wynik { grid-area: wynik; text-align: right; font-size: var(--p4-tekst-maly); color: var(--grey); white-space: nowrap; }
.p4-ab-wynik .p4-liczba { display: block; color: var(--ink); }
.p4-ab-czas {
  grid-area: czas;
  display: block;
  height: var(--p4-pasek-h);
  margin-top: var(--p4-s1);
  background: var(--kreska);
  transform-origin: left center;
  transform: scaleX(calc(var(--p4-min) / var(--p4-ab-skala)));
}
.p4-kopia--gora { gap: var(--p4-s2); }
.p4-marka { font-weight: var(--p4-waga-mocna); font-size: var(--p4-h3-duzy); line-height: var(--p4-interlinia-srednia); text-wrap: balance; }

/* trzy kroki */
.p4-kroki { display: flex; flex-direction: column; gap: var(--p4-s3); }
.p4-kroki > li { display: grid; grid-template-columns: var(--p4-krok-nr) 1fr; gap: var(--p4-s3); align-items: start; }
.p4-krok-nr {
  display: grid;
  place-items: center;
  width: var(--p4-krok-nr);
  aspect-ratio: var(--p4-kwadrat);
  border: var(--p4-kreska) solid var(--ink);
  border-radius: var(--p4-promien-maly);
  font-size: var(--p4-liczba-mala);
  line-height: var(--p4-interlinia-pelna);
}
.p4-krok-h { font-size: var(--p4-tekst); font-weight: var(--p4-waga-mocna); line-height: var(--p4-interlinia-srednia); }
.p4-kroki p { font-size: var(--p4-tekst-maly); color: var(--grey); }
.p4-h2--final { font-size: var(--p4-h2-final); }
.p4-kopia--final { bottom: calc(var(--p4-stopka-h) + var(--p4-odstep)); }

/* ============================== teksty wg uwag Natalii: lead, ból, zamknięcie == */
.p4-lead-tytul { font-size: var(--p4-lead-tytul); font-weight: var(--p4-waga-mocna); line-height: var(--p4-interlinia-srednia); text-wrap: balance; }
.p4-kopia--bol { gap: var(--p4-s2); }
.p4-bol-h { font-size: var(--p4-bol-h); }
.p4-bol { display: flex; flex-direction: column; gap: var(--p4-s1); padding-left: var(--p4-s4); list-style: disc; }
.p4-bol li { font-size: var(--p4-tekst); font-weight: var(--p4-waga-mocna); line-height: var(--p4-interlinia-srednia); }
.p4-bol li::marker { color: var(--grey-4); }
.p4-bol-zdjecie { font-size: var(--p4-tekst-maly); color: var(--grey); }
.p4-bol-zgadywanie { border-top: var(--p4-kreska) solid var(--hair); padding-top: var(--p4-s2); }
.p4-final-rzad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p4-s2) var(--p4-s4); }
.p4-naglowek-akcje { display: flex; align-items: flex-start; gap: var(--p4-s2); }
.p4-pytania-link--w-mapie { display: none; }

/* ======================================= p5 · kafel stówki (ze Stówki) ==
   Panel nad przyciemnioną siatką, prowadzony przez stronę (jak panel Miesiąca).
   Banknot, księga i cięcie — reguły przeniesione z p2/strona.css bez zmian
   zasad; stany żywe niosą klasy p2-zywa i p2-ruch na <html> (p4.js).       */
.p4-stowka {
  position: absolute;
  z-index: var(--p4-z-panel);
  left: 50%;
  top: calc(var(--p4-naglowek-h) + var(--p4-odstep));
  width: var(--p4-stowka-w);
  margin-left: calc(var(--p4-stowka-w) / -2);
  display: flex;
  flex-direction: column;
  gap: var(--p4-s3);
  /* płyta papieru jak karty tekstu 4B: tace kafli stówki są półprzezroczyste, a pod nimi
     nie może prześwitywać żadna liczba świata */
  background: var(--paper);
  border: var(--p4-kreska) solid var(--hair);
  border-radius: var(--p4-promien);
  padding: var(--p4-plyta-pad);
  pointer-events: none;
}
.p4-js .p4-stowka, .p4-js .p4-stowka .p2-banknot, .p4-js .p4-stowka-ty { opacity: 0; }
.p4-stowka-h { font-size: var(--p4-stowka-h); max-width: var(--p4-stowka-h-miara); }
.p4-stowka-dol { display: flex; flex-direction: column; gap: var(--p4-s1); }
.p4-stowka-ty { font-weight: var(--p4-waga-mocna); max-width: var(--p4-miara-zdanie); text-wrap: pretty; }
.p2-cyfry {
  font-family: var(--f-display);
  font-weight: var(--p2-waga-tekst);
  font-variant-numeric: tabular-nums;
  line-height: var(--p2-lh-cyfry);
  letter-spacing: normal;
}
.p2-stowka__uklad {
  display: grid;
  grid-template-columns: var(--p2-uklad-kolumny);
  gap: var(--p2-uklad-odstep);
  align-items: center;
}
/* banknot: taca kafla hero, w niej pole z kawałkami rdzenia */
.p2-banknot { position: relative; z-index: var(--p2-z-banknot); }
.p2-banknot__pole {
  position: relative;
  aspect-ratio: var(--p2-banknot-proporcja);
  container-type: inline-size;
}
.p2-banknot__cien {
  position: absolute; inset: 0;
  border-radius: var(--radius-core);
  box-shadow: var(--shadow-tray-lg);
  transform-origin: left center;
}
.p2-banknot__kawalek {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--od) * 1%);
  width: calc(var(--udzial) * 1%);
  z-index: var(--p2-z-kawalek);
  background: var(--card);
  box-shadow: var(--shadow-inner-lit);
  transform-origin: 0 0;
}
.p2-banknot__kawalek--lewy  { border-radius: var(--radius-core) 0 0 var(--radius-core); }
.p2-banknot__kawalek--prawy { border-radius: 0 var(--radius-core) var(--radius-core) 0; }
.p2-banknot__kawalek--plus  { opacity: 0; }
.p2-banknot__kawalek.p2-leci { z-index: var(--p2-z-leci); box-shadow: var(--shadow-tray-md), var(--shadow-inner-lit); }
/* znaczniki cięcia jak na arkuszu drukarskim: od górnej i dolnej krawędzi, środek z liczbą zostaje czysty */
.p2-banknot__ciecie {
  position: absolute;
  z-index: var(--p2-z-ciecie);
  top: calc(var(--p2-ciecie-wystaje) * -1);
  bottom: calc(var(--p2-ciecie-wystaje) * -1);
  left: calc(var(--x, 54) * 1%);
  width: var(--p2-ciecie-grubosc);
  translate: calc(var(--p2-pol) * -1) 0;
  opacity: 0;
  pointer-events: none;
}
.p2-banknot__znacznik {
  position: absolute;
  left: 0;
  height: calc(var(--p2-ciecie-dl) + var(--p2-ciecie-wystaje));
  border-left: var(--p2-ciecie-grubosc) dashed var(--ink);
}
.p2-banknot__znacznik--g { top: 0; clip-path: inset(0 0 calc((1 - var(--rys, 1)) * 100%) 0); }
.p2-banknot__znacznik--d { bottom: 0; clip-path: inset(calc((1 - var(--rys, 1)) * 100%) 0 0 0); }
.p2-banknot__napis {
  position: absolute;
  z-index: var(--p2-z-napis-banknotu);
  left: var(--p2-pol); top: var(--p2-pol);
  display: inline-flex;
  align-items: baseline;
  gap: var(--p2-napis-odstep);
  font-size: var(--p2-napis-liczba);
  white-space: nowrap;
  transform: translate(calc(var(--p2-pol) * -1), calc(var(--p2-pol) * -1));
  transform-origin: center;
  pointer-events: none;
}
.p2-banknot__liczba { font-size: 1em; }
.p2-banknot__zl { font-size: calc(var(--p2-napis-zl) * 1em); }
.p2-banknot__miara { visibility: hidden; }
.p2-ruch .p2-banknot__napis:not(.p2-banknot__miara) { transition: transform var(--dur-odsloniecie) var(--ease-tray); }
.p2-ruch .p2-banknot__cien { transition: transform var(--dur-odsloniecie) var(--ease-tray); }
/* księga: tace z podpisem, do których trafiają kawałki */
.p2-ksiega {
  position: relative;
  z-index: var(--p2-z-ksiega);
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--p2-ksiega-odstep);
}
.p2-pozycja {
  display: grid;
  grid-template-columns: var(--p2-gniazdo-szer) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--p2-o4);
  min-height: var(--p2-ksiega-wiersz);
  padding-right: var(--p2-o5);
}
.p2-pozycja__gniazdo { position: relative; height: var(--p2-gniazdo-h); }
/* pusta taca: obwódka przerywana — drugi kanał poza kolorem */
.p2-pozycja__gniazdo::before {
  content: "";
  position: absolute; inset: 0;
  border: var(--p2-wlos) dashed var(--grey-4);
  border-radius: var(--radius-core-sm);
  opacity: 0;
}
.p2-pozycja__wzor {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--udzial) * var(--p2-gniazdo-h) / var(--p2-udzial-na-gniazdo));
  background: var(--card);
  box-shadow: var(--shadow-tray-md), var(--shadow-inner-lit);
}
.p2-pozycja__wzor--prawy { border-radius: 0 var(--p2-wzor-promien) var(--p2-wzor-promien) 0; }
.p2-pozycja__nazwa { font-weight: var(--p2-waga-mocna); font-size: var(--p2-ksiega-nazwa); line-height: var(--p2-lh-wiersz); }
.p2-pozycja__zl { font-size: var(--p2-ksiega-kwota); line-height: var(--p2-lh-cyfry); }
.p2-pozycja__kwota { display: grid; justify-items: end; white-space: nowrap; }
.p2-pozycja__kwota > * { grid-area: 1 / 1; }
.p2-pozycja__kreska {
  font-family: var(--f-display); font-size: var(--p2-anton-min);
  color: var(--grey); line-height: var(--p2-lh-cyfry); opacity: 0;   /* kreska niesie stan „brak zapisu” */
}
/* stany żywe (p4.js) — bez skryptu księga stoi wypełniona */
.p2-zywa .p2-pozycja:not(.p2-gniazdo-pelne) .p2-pozycja__gniazdo::before { opacity: 1; }
.p2-zywa .p2-pozycja:not(.p2-pelna) .p2-pozycja__kreska { opacity: 1; }
.p2-zywa .p2-pozycja:not(.p2-pelna) .p2-pozycja__zl:not(.p2-pozycja__zl--stale) { opacity: 0; filter: blur(var(--p2-rozmycie)); }
.p2-ruch .p2-pozycja.p2-pelna .p2-pozycja__zl {
  transition: opacity var(--dur-odsloniecie) var(--ease-tray), filter var(--dur-odsloniecie) var(--ease-tray);
}
.p2-ruch .p2-pozycja__wzor { opacity: 0; }
.p2-zywa .p2-pozycja--plus { opacity: 0; }
/* duchy lecą nad kartami tuszu: warstwa złożenia stoi w warstwie kopii, nad panelem i płytą stówki */
.p4-kopie > .p4-skladanie { z-index: calc(var(--p4-z-panel) + 2); }
/* duch stówki: zapalony rdzeń kafla obrotu leci żółty i ląduje jako żółty banknot 100 zł (Remi 26.09) */
.p4-duch--stowka { visibility: hidden; background: var(--sun); border-color: var(--sun-6); }

/* ========================== p5 · arkusz „Najczęstsze pytania” (ze Stówki) ==
   Wjeżdża nad świat po przybyciu — papier z cieniem hero, zaokrąglona góra.
   Treść: pytanie wyróżnione dużym pismem z odpowiedzią na wierzchu, potem
   piętnaście szuflad drobnym, gęstym drukiem w trzech szpaltach.            */
.p4-arkusz {
  position: relative;
  z-index: var(--p4-z-arkusz);
  background: var(--paper);
  border-radius: var(--radius-tray) var(--radius-tray) 0 0;
  box-shadow: var(--shadow-tray-lg);
  padding-block: var(--p4-arkusz-pad);
}
.p4-arkusz-wnetrze { max-width: var(--p4-arkusz-maks); margin-inline: auto; padding-inline: var(--p4-margines); }
.p2-pytania__h {
  font-weight: var(--p2-waga-mocna); font-size: var(--p2-etykieta);
  letter-spacing: var(--p2-track-etykieta); text-transform: uppercase;
  color: var(--grey); line-height: var(--p2-lh-etykieta);
  margin-bottom: var(--p2-o4);
}
.p2-pytania__glowne { max-width: var(--p2-miara-pytania); }
.p2-pytania__wyroznione {
  font-weight: var(--p2-waga-mocna);
  font-size: var(--p2-bol-pytanie);
  line-height: var(--p2-lh-pytanie);
  text-wrap: balance;
}
.p2-pytania__lede {
  margin-top: var(--p2-o5);
  font-size: var(--p2-lede);
  line-height: var(--p2-interlinia-lede);
  max-width: var(--p2-miara-lede);
  text-wrap: pretty;
}
.p2-pytania__p { margin-top: var(--p2-o3); color: var(--grey); max-width: var(--p2-miara-opis); text-wrap: pretty; }
.p2-przypisy {
  margin-top: var(--p2-o8);
  display: grid;
  grid-template-columns: var(--p2-przypisy-kolumny);
  column-gap: var(--p2-kolumna);
  align-items: start;
}
.p2-przypisy__lista { list-style: none; padding: 0; border-top: var(--p2-wlos) solid var(--hair); }
.p2-pyt { border-bottom: var(--p2-wlos) solid var(--hair); }
.p2-pyt summary {
  display: grid;
  grid-template-columns: var(--p2-pyt-numer) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--p2-o2);
  min-height: var(--p2-cel);
  padding-block: var(--p2-o3);
  list-style: none;
  cursor: pointer;
  font-weight: var(--p2-waga-mocna);
  font-size: var(--p2-drobne);
  line-height: var(--p2-lh-wiersz);
}
.p2-pyt summary::-webkit-details-marker { display: none; }
/* numer przypisu: licznik listy, więc <ol start> w HTML jest jedynym źródłem */
.p2-pyt summary::before {
  content: counter(list-item);
  font-family: var(--f-display);
  font-weight: var(--p2-waga-tekst);
  font-size: var(--p2-anton-min);
  line-height: var(--p2-lh-krotka);
  font-variant-numeric: tabular-nums;
}
.p2-pyt__q { text-wrap: pretty; }
.p2-pyt__strzalka { display: inline-block; color: var(--ink); transition: transform var(--dur-mikro) var(--ease-out-mocny); }
.p2-pyt details[open] .p2-pyt__strzalka { transform: rotate(var(--p2-obrot-strzalki)); }
.p2-pyt__odp {
  padding: 0 0 var(--p2-o4) calc(var(--p2-pyt-numer) + var(--p2-o2));
  color: var(--grey);
  font-size: var(--p2-drobne);
  line-height: var(--p2-interlinia-tekst);
}
.p2-pyt__odp p { text-wrap: pretty; }
.p2-pyt__odp p + p { margin-top: var(--p2-o2); }
@media (prefers-reduced-motion: no-preference) {
  .p2-pyt details[open] > .p2-pyt__odp { animation: p2-szuflada var(--dur-warstwa) var(--ease-out-mocny); }
}
@keyframes p2-szuflada {
  from { opacity: 0; transform: translateY(var(--p2-szuflada-y)); }
  to   { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .p2-pyt summary:hover .p2-pyt__q { text-decoration: underline; text-underline-offset: var(--p2-podkreslenie); }
}
/* kiedy arkusz zasłania nagłówek: panel mapy chowa się, a nagłówek staje się paskiem papieru
   z kreską włosową — pytania przewijają się pod czystą krawędzią, nie pod tabliczką znaku */
.p4-na-arkuszu .p4-mapa-panel { opacity: 0; visibility: hidden; transition: opacity var(--dur-krotki) var(--ease-out-mocny), visibility 0s linear var(--dur-krotki); }
.p4-naglowek { transition: background-color var(--dur-krotki) var(--ease-out-mocny), box-shadow var(--dur-krotki) var(--ease-out-mocny); }
.p4-na-arkuszu .p4-naglowek { background: var(--paper); box-shadow: 0 var(--p4-kreska) 0 var(--hair); padding-bottom: var(--p4-s3); }
@media (min-width: 861px) {
  /* komputer: panel mapy wychodzi z układu, żeby pasek miał wysokość znaku, nie mapy */
  .p4-na-arkuszu .p4-mapa { display: none; }
}

/* ================================================= szczyt: panel z kafli == */
.p4-panel {
  position: absolute;
  z-index: var(--p4-z-panel);
  left: 50%;
  top: calc(var(--p4-naglowek-h) + var(--p4-odstep));
  width: var(--p4-panel-w);
  margin-left: calc(var(--p4-panel-w) / -2);
  display: flex;
  flex-direction: column;
  gap: var(--p4-odstep);
  max-height: calc(100svh - var(--p4-naglowek-h) - 2 * var(--p4-odstep));
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}
/* przed pierwszą klatką kafle i przypisy panelu czekają niewidoczne (JS przejmuje krycie) */
.p4-js .p4-panel-glowa, .p4-js .p4-panel-hero, .p4-js .p4-plaster, .p4-js .p4-dzialy-panel > .p4-etykieta,
.p4-js .p4-dzialy-panel > .p4-przypis, .p4-js .p4-panel > .p4-przypis, .p4-js .p4-panel > .p4-zrodlo,
.p4-js .p4-jak-lista > div, .p4-js .p4-jak > .p4-przypis { opacity: 0; }
.p4-panel-hero > .rdzen { gap: var(--p4-s2); }
@media (min-width: 861px) {
  .p4-panel-hero > .rdzen { display: grid; grid-template-columns: var(--p4-panel-kol); column-gap: var(--p4-panel-kol-odstep); align-content: start; }
  .p4-panel-hero > .rdzen > * { grid-column: 1; }
  .p4-panel-hero > .rdzen > .p4-jak { grid-column: 2; grid-row: 1 / span 6; }
}
.p4-latarnia-etykieta { font-size: var(--p4-tekst-maly); font-weight: var(--p4-waga-mocna); color: var(--grey); padding-top: var(--p4-s1); }
.p4-latarnia-zdanie { font-size: var(--p4-tekst-maly); color: var(--grey); max-width: var(--p4-miara-zdanie); }
.p4-panel .latarnia-rzad { color: var(--ink); }
.p4-jak { display: flex; flex-direction: column; gap: var(--p4-s2); }
.p4-jak > summary { list-style: none; min-height: var(--p4-cel); text-transform: none; letter-spacing: var(--p4-rozstrzal-jak); font-size: var(--p4-tekst-maly); }
.p4-jak > summary::-webkit-details-marker { display: none; }
.p4-jak > summary::after { content: "▾"; margin-left: var(--p4-s2); transition: transform var(--dur-mikro) var(--ease-out-mocny); }
.p4-jak[open] > summary::after { transform: rotate(var(--p4-obrot-szuflady)); }
.p4-jak-lista { display: flex; flex-direction: column; gap: var(--p4-s1); padding-top: var(--p4-s1); }
.p4-jak-lista dt { font-size: var(--p4-tekst-maly); color: var(--grey); }
.p4-jak-lista dd { font-size: var(--p4-tekst-maly); font-weight: var(--p4-waga-mocna); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p4-jak-wynik { border-top: var(--p4-kreska) solid var(--hair); padding-top: var(--p4-s2); }
.p4-jak-wynik dt { color: var(--ink); font-weight: var(--p4-waga-mocna); }

.p4-dzialy-panel { display: flex; flex-direction: column; gap: var(--p4-s2); }
.p4-plastry { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--tray-pad); }
.p4-plaster {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p4-s1);
  padding: var(--p4-s3);
  background: var(--card);
  border: var(--p4-kreska) solid var(--hair);
  border-radius: var(--p4-promien-maly);
  box-shadow: var(--shadow-tray-sm), var(--shadow-inner-lit);
}
.p4-plaster-nazwa { font-size: var(--p4-etykieta); font-weight: var(--p4-waga-mocna); letter-spacing: var(--p4-rozstrzal-maly); text-transform: uppercase; color: var(--grey); line-height: var(--p4-interlinia-ciasna); min-height: var(--p4-min-nazwa); }
.p4-plaster-kwota { font-size: var(--p4-plaster-kwota); line-height: var(--p4-interlinia-liczby); }
.p4-plaster-sub { font-size: var(--p4-tekst-mini); color: var(--grey); }
.p4-plaster-sub b { color: var(--ink); font-weight: var(--p4-waga-mocna); }
.p4-przypis--jak { color: var(--ink); }

/* ========================================= stempel: przedmiot na kafelku == */
.p4-na-kaflu {
  position: absolute;
  z-index: var(--p4-z-biurko);
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}
.p4-na-kaflu .stempel { white-space: nowrap; }

/* ============================================================== stopka == */
.p4-stopka {
  position: relative;
  z-index: var(--p4-z-arkusz);
  display: grid;
  /* znak · Konto · Kontakt · Dokumenty · dane spółki */
  grid-template-columns: auto auto auto auto 1fr;
  align-items: start;
  gap: var(--p4-odstep) calc(var(--p4-odstep) * 2);
  padding: var(--p4-odstep) var(--p4-margines) calc(var(--p4-odstep) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: var(--p4-kreska) solid var(--ink);
  font-size: var(--p4-tekst-maly);
}
/* pole ochronne znaku: wysokość wersalika F */
.p4-stopka-znak { padding: var(--p4-znak-pole) var(--p4-znak-pole) 0 0; }
.p4-stopka-lista a {
  display: flex;
  align-items: center;
  min-height: var(--p4-cel);
  width: fit-content;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--grey-4);
  text-underline-offset: var(--p4-podkreslenie);
}
@media (hover: hover) and (pointer: fine) {
  .p4-stopka-lista a:hover { text-decoration-color: var(--ink); }
}
.p4-stopka-pole--klauzula { display: flex; flex-direction: column; gap: var(--p4-s2); color: var(--grey); font-size: var(--p4-tekst-mini); max-width: var(--p4-miara-klauzula); justify-self: end; }

/* ===================================== odsłonięcie liczby z rozmycia == */
@keyframes p4-odsloniecie {
  from { opacity: 0; filter: blur(var(--p4-odsloniecie-rozmycie)); transform: translateY(var(--p4-odsloniecie-y)); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.p4-ruch .p4-liczba { display: inline-block; opacity: 0; }
.p4-ruch .p4-liczba-szczytu { opacity: 0; }
.p4-ruch .p4-liczba.p4-odslonieta, .p4-ruch .p4-liczba-szczytu.p4-odslonieta { animation: p4-odsloniecie var(--dur-odsloniecie) var(--ease-tray) both; animation-delay: var(--p4-opoznienie, 0ms); }
.p4-ruch .p4-liczba.p4-bez-odsloniecia, .p4-ruch .p4-liczba-szczytu.p4-bez-odsloniecia { opacity: 1; }
.p4-ab-wynik .p4-liczba { display: block; }

/* niski komputer (1024×768 i niżej): księga ciaśniej, banknot węższy — kafel stówki mieści się pod nagłówkiem */
@media (min-width: 861px) and (max-height: 820px) {
  :root { --p2-ksiega-wiersz: 3.6rem; --p2-ksiega-kwota: 1.6rem; --p2-uklad-kolumny: minmax(0, 1.4fr) minmax(0, 1fr); --p4-stowka-h: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); }
  .p4-stowka-h { max-width: none; }            /* nagłówek w jednej linii oddaje wysokość księdze */
}

/* ===================================== wąski komputer: 861–1279 px ==
   Siedem miejsc mapy nie mieści się obok znaku z rysunkiem siatki — rysunek
   schodzi, kolumny się zwężają, znak staje na progu wersji ze Słońcem (140 px, brand book §2). */
@media (min-width: 861px) and (max-width: 1279.98px) {
  :root { --p4-mapa-kol: 5.6rem; --p4-znak-w: 140px; }
  .p4-mapa-panel { grid-template-columns: auto; }
  .p4-mapa-rzut { display: none; }
}

/* ============================================================ telefon == */
@media (max-width: 860px) {
  :root {
    --p4-znak-w: 140px;
    --p4-margines: var(--p4-s3);
    --p4-naglowek-h: calc(var(--p4-znak-w) * 1894 / 7826 + 2 * var(--p4-znak-pole));
    --p4-skala-pisma: 1.1;
    --p4-plyta-pad: var(--p4-s4);
    --p4-h1: clamp(2.05rem, 1.2rem + 3.6vw, 2.8rem);
    --p4-h2: clamp(1.3rem, 1rem + 1.4vw, 1.7rem);
    --p4-h2-final: clamp(1.55rem, 1.1rem + 2vw, 2.1rem);
    --p4-liczba: clamp(2.1rem, 1.6rem + 2.4vw, 2.7rem);
    --p4-tekst: 0.94rem;
    --p4-tekst-maly: 0.82rem;
    --p4-mapa-pad: var(--p4-s4);
  }
  .p4-mapa { flex-direction: row; align-items: center; }
  .p4-mapa-przelacznik { display: inline-flex; gap: var(--p4-s2); }
  .p4-mapa-teraz { font-weight: var(--p4-waga-mocna); color: var(--ink); }
  .p4-mapa-znacznik { width: var(--p4-mapa-kropka-m); aspect-ratio: var(--p4-kwadrat); border-radius: var(--p4-pelny); background: var(--ink); }
  .p4-zaloguj--naglowek { display: none; }
  .p4-naglowek-akcje { display: none; }
  .p4-pytania-link--w-mapie { display: inline-flex; grid-column: 1 / -1; justify-self: start; }
  :root {
    --p4-stowka-h: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
    --p2-uklad-kolumny: minmax(0, 1fr);
    --p2-uklad-odstep: var(--p4-s3);
    --p2-ksiega-wiersz: 3.5rem;
    --p2-ksiega-kwota: 1.5rem;
    --p2-ksiega-nazwa: .92rem;
    --p2-przypisy-kolumny: minmax(0, 1fr);
    --p4-mapa-kol-p5: 2;
  }
  .p4-stowka { top: calc(var(--p4-naglowek-h) + var(--p4-s1)); gap: var(--p4-s2); }
  /* panel Miesiąca na telefonie bez plastrów działów: mieści się bez przewijania w środku
     (w 4B przewijał się o 267 px na 390×844); działy dalej stoją w siatce jako kafle */
  .p4-dzialy-panel { display: none; }
  /* banknot stoi nad księgą: znaczniki cięcia wystają ponad niego — etykieta dostaje ich wysokość */
  .p4-stowka .p2-stowka__uklad { padding-top: var(--p2-ciecie-wystaje); }
  .p2-przypisy__lista + .p2-przypisy__lista { border-top: 0; }
  .p4-zaloguj--w-mapie { display: inline-flex; grid-column: 1 / -1; justify-self: start; }
  .p4-js .p4-mapa-panel {
    position: fixed;
    inset: var(--p4-naglowek-h) var(--p4-margines) auto var(--p4-margines);
    grid-template-columns: 1fr;
    row-gap: var(--p4-s2);
    box-shadow: var(--shadow-tray-lg);
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--p4-mapa-wjazd));
    transition: opacity var(--dur-krotki) var(--ease-out-mocny), transform var(--dur-krotki) var(--ease-out-mocny), visibility 0s linear var(--dur-krotki);
  }
  .p4-js .p4-mapa--otwarta .p4-mapa-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-krotki) var(--ease-out-mocny), transform var(--dur-krotki) var(--ease-out-mocny), visibility 0s;
  }
  .p4-mapa-rzut { width: 100%; max-height: var(--p4-mapa-rzut-h); }
  .p4-mapa-miejsca { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .p4-kopia {
    left: var(--p4-margines);
    right: var(--p4-margines);
    width: auto;
    bottom: calc(var(--p4-margines) + env(safe-area-inset-bottom));
    gap: var(--p4-s2);
  }
  .p4-kopia--final { bottom: calc(var(--p4-stopka-h) + var(--p4-odstep)); }
  .p4-panel { top: calc(var(--p4-naglowek-h) + var(--p4-s1)); }
  .p4-plastry { grid-template-columns: 1fr; gap: var(--tray-pad-sm); }
  .p4-plaster {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nazwa kwota" "sub kwota";
    align-items: center;
    column-gap: var(--p4-s3);
    row-gap: var(--p4-s0);
    padding: var(--p4-s2) var(--p4-s3);
  }
  .p4-plaster-nazwa { grid-area: nazwa; min-height: 0; }
  .p4-plaster-kwota { grid-area: kwota; font-size: var(--p4-liczba-mala); }
  .p4-plaster-sub { grid-area: sub; }
  .p4-stopka {
    grid-template-columns: auto 1fr;
    grid-template-areas: "znak konto" "kontakt kontakt" "dokumenty dokumenty" "klauzula klauzula";
    gap: 0 var(--p4-odstep);
    padding-top: 0;
  }
  /* pole ochronne znaku: wysokość wersalika F nad i pod znakiem */
  .p4-stopka-znak { grid-area: znak; padding: var(--p4-znak-pole) 0; }
  .p4-stopka-znak .p4-znak { width: var(--p4-znak-w); }
  .p4-stopka-pole:nth-of-type(2) { grid-area: konto; align-self: center; }
  .p4-stopka-pole:nth-of-type(3) { grid-area: kontakt; }
  .p4-stopka-pole--dokumenty { grid-area: dokumenty; }
  .p4-stopka-pole--klauzula { grid-area: klauzula; justify-self: start; padding-bottom: var(--p4-s1); }
  .p4-stopka-h { display: none; }
  .p4-stopka-lista { display: flex; flex-wrap: wrap; column-gap: var(--p4-odstep); }
}
@media (max-width: 400px) {
  :root { --p4-h1: 1.95rem; --p4-tekst: 0.9rem; --p4-tekst-maly: 0.8rem; --p4-plyta-pad: 0.85rem; }
  .p4-punkty li { font-size: var(--p4-tekst-mini); }
}
@media (max-width: 860px) and (max-height: 700px) {
  :root { --p4-h1: 1.8rem; --p4-liczba: 2rem; --p4-h2: 1.2rem; --p4-h2-final: 1.4rem; --p4-bol-h: 1.15rem; }
  /* niski telefon: cztery punkty karty hasła mówią to samo co kroki i pytania — świat dostaje miejsce */
  .p4-kopia--wejscie .p4-punkty { display: none; }
  .p4-kopia { gap: var(--p4-s2); }
  .p4-panel { gap: var(--p4-s2); }
  .p4-panel-hero > .rdzen { gap: var(--p4-s1); }
  .p4-plaster { padding-block: var(--p4-s1); }
  .p4-panel .p4-przypis { font-size: var(--p4-tekst-mini); }
  /* niski telefon: banknot węższy, księga ciaśniej — cały kafel stówki mieści się pod nagłówkiem */
  :root { --p4-stowka-h: 1.2rem; --p2-ksiega-wiersz: 3rem; --p2-ksiega-kwota: 1.3rem; --p2-ksiega-odstep: .35rem; }
  .p2-banknot { width: 72%; }
  .p4-stowka { gap: var(--p4-s1); }
  .p4-stowka-dol .p4-zrodlo { display: none; }
}

/* ===================================================== tryb spokojny == */
@media (prefers-reduced-motion: reduce) {
  .p4-ruch .p4-liczba, .p4-ruch .p4-liczba-szczytu { opacity: 1; animation: none; }
  .p4-mapa-panel, .p4-mapa-miejsca a, .p4-mapa-miejsca a::before, .p4-jak > summary::after { transition: none; }
  .p2-banknot__napis, .p2-banknot__cien, .p2-pozycja__zl { transition: none !important; }
  .p2-pyt__strzalka { transition: none; }   /* strzałka dalej pokazuje stan — tylko bez obrotu w czasie */
  .p4-na-arkuszu .p4-mapa-panel, .p4-naglowek { transition: none; }
}

/* ======================================================= bez JavaScriptu ==
   Strona czyta się wtedy jak zwykły dokument: rysunek całego salonu jako
   ilustracja, a pod nim wszystkie przystanki po kolei. Nic nie jest ukryte. */
.p4-bez-js .p4-naglowek { position: static; flex-wrap: wrap; padding: var(--p4-margines); }
.p4-bez-js .p4-mapa-panel { grid-template-columns: 1fr; }
.p4-bez-js .p4-mapa-rzut { display: none; }
.p4-bez-js .p4-lot { display: flex; flex-direction: column; gap: var(--p4-odstep); padding: 0 var(--p4-margines) var(--p4-margines); }
.p4-bez-js .p4-swiat { position: relative; height: var(--p4-bez-js-swiat-h); overflow: auto; border: var(--p4-kreska) solid var(--hair); border-radius: var(--p4-promien); }
.p4-bez-js .p4-rysunek, .p4-bez-js .p4-warstwa { width: var(--p4-bez-js-swiat-w); height: var(--p4-bez-js-swiat-h); }
.p4-bez-js .p4-kamera { transform: translate(var(--p4-s5), var(--p4-s5)); }
.p4-bez-js .p4-skladanie, .p4-bez-js .p4-odcinek { display: none; }
.p4-bez-js .p4-kopie { display: flex; flex-direction: column; gap: var(--p4-odstep); }
.p4-bez-js .p4-kopia, .p4-bez-js .p4-panel, .p4-bez-js .p4-stowka, .p4-bez-js .p4-na-kaflu, .p4-bez-js .p4-stopka {
  position: static;
  width: auto;
  max-width: var(--p4-bez-js-miara);
  margin: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.p4-bez-js [data-sc-copy] { opacity: 1; pointer-events: auto; }
.p4-bez-js .p4-na-kaflu { align-items: flex-start; }
.p4-bez-js .p4-stopka { max-width: none; }
.p4-bez-js [data-sc-spacer] { display: none; }
.p4-bez-js .p4-stowka { margin-left: 0; }
.p4-bez-js .p4-arkusz { border-radius: 0; box-shadow: none; }

/* =============================================== p5 · karty tuszu (Remi 26.09) ==
   Wszystkie zdania przystanków stoją na kartach tuszu: tło --ink, pismo --napis,
   akcent Słońca — belka nad kartą (wysuwa się, kiedy karta staje), etykiety,
   znaczniki list, numery kroków, przycisk. Kafel stówki i panel Miesiąca to też
   karty tuszu. Świat (siatka, kafle, papier) bez zmian.
   Komputer: karty szersze i ciutek większe. Telefon: karta najwyżej pół ekranu.
   Blok stoi na końcu pliku: nadpisuje tokeny wyżej, dlatego telefon powtarza swoje. */
:root {
  --p5-karta: var(--ink);
  --p5-karta-napis: var(--napis);
  --p5-karta-cichy: var(--napis-cichy);
  --p5-karta-akcent: var(--sun);
  --p5-karta-wlos: color-mix(in oklab, var(--napis) 16%, transparent);
  --p5-karta-taca: color-mix(in oklab, var(--napis) 8%, transparent);
  --p5-karta-gniazdo: color-mix(in oklab, var(--napis) 38%, transparent);
  --p5-karta-miara: 58ch;
  --p5-belka-w: 3.25rem;
  --p5-belka-h: 4px;
  --p5-pasek-h: 12px;              /* stówka: grubość paska w tacy (cały pasek = 100 zł) */
  --p5-pasek-odstep: 0.45rem;
  /* komputer: karty ciutek większe */
  --p4-kolumna: min(41rem, 43vw);
  --p4-plyta-pad: clamp(1.35rem, 2.1vw, 2.1rem);
  --p4-tekst: 1.04rem;
  --p4-tekst-maly: 0.9rem;
  --p4-h1: clamp(2.35rem, 1.15rem + 2.7vw, 3.8rem);
  --p4-h2: clamp(1.65rem, 1.05rem + 1.5vw, 2.6rem);
  --p4-h2-final: clamp(2rem, 1.15rem + 2.5vw, 3.4rem);
  --p4-h3: 1.12rem;
  --p4-h3-duzy: clamp(1.4rem, 1.05rem + 1vw, 1.9rem);
  --p4-bol-h: clamp(1.35rem, 0.95rem + 1.05vw, 1.95rem);
  --p4-lead-tytul: 1.2rem;
}

/* karta tuszu: wspólna dla kopii przystanków, kafla stówki i panelu Miesiąca */
.p4-kopia, .p4-stowka, .p4-panel {
  background: var(--p5-karta);
  color: var(--p5-karta-napis);
  border: 0;
  border-radius: var(--p4-promien);
  box-shadow: var(--shadow-tray-lg);
}
.p4-kopia { gap: var(--p4-s3); }
.p4-kopia > * { max-width: var(--p5-karta-miara); }
/* belka Słońca nad kartą: wysuwa się od lewej, kiedy karta staje na przystanku (p4.js: p5-widac) */
.p4-kopia::before, .p4-stowka::before, .p4-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--p4-plyta-pad);
  width: var(--p5-belka-w);
  height: var(--p5-belka-h);
  border-radius: 0 0 var(--p5-belka-h) var(--p5-belka-h);
  background: var(--p5-karta-akcent);
}
.p4-kopia::before { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-odsloniecie) var(--ease-out-mocny); }
.p4-kopia.p5-widac::before, .p4-bez-js .p4-kopia::before { transform: none; }

/* pismo na tuszu */
.p4-kopia .p4-h1, .p4-kopia .p4-h2, .p4-kopia .p4-h3, .p4-kopia .p4-lead-tytul, .p4-kopia .p4-krok-h,
.p4-kopia .p4-akcja-przypis, .p4-kopia .punkty li, .p4-kopia .p4-bol li { color: var(--p5-karta-napis); }
.p4-kopia .p4-przypis, .p4-kopia .p4-zrodlo, .p4-kopia .p4-bol-zdjecie, .p4-kopia .p4-kroki p,
.p4-kopia .p4-wie-wiersz--nie dt, .p4-kopia .p4-wie-wiersz--nie dd { color: var(--p5-karta-cichy); }
/* akcent Słońca: etykiety przystanków, zdanie marki, znaczniki, numery kroków, „wie” */
.p4-kopia .p4-etykieta, .p4-kopia .p4-marka, .p4-kopia .p4-wie-wiersz--tak dt { color: var(--p5-karta-akcent); }
.p4-kopia .punkty li::before, .p4-kopia .p4-bol li::marker { color: var(--p5-karta-akcent); }
.p4-kopia .p4-krok-nr { border-color: var(--p5-karta-akcent); color: var(--p5-karta-akcent); }
.p4-kopia .p4-bol-zgadywanie, .p4-kopia .p4-wie { border-top-color: var(--p5-karta-wlos); }
.p4-kopia .kapsula { background: transparent; border-color: var(--p5-karta-wlos); color: var(--p5-karta-cichy); box-shadow: none; }
.p4-kopia .kapsula::before { background: var(--p5-karta-akcent); }
/* przyciski na tuszu: słońce zostaje słońcem, cicha pigułka jest obrysem papieru */
.p4-kopia .pigulka.slonce { border-color: var(--p5-karta-akcent); }
.p4-kopia .pigulka.cicha { background: transparent; color: var(--p5-karta-napis); border-color: var(--p5-karta-napis); }
.p4-kopia .pigulka.cicha::before { background: var(--p5-karta-taca); }
.p4-kopia :focus-visible, .p4-stowka :focus-visible, .p4-panel :focus-visible { outline-color: var(--p5-karta-napis); }
.p4-panel-hero :focus-visible { outline-color: var(--ink); }

/* kafel stówki na tuszu: banknot i kawałki zostają biel, tace ciemne, znaczniki cięcia w Słońcu */
.p4-stowka-etykieta { color: var(--p5-karta-akcent); }
.p4-stowka .p4-zrodlo { color: var(--p5-karta-cichy); }
.p4-stowka .kafel { background: var(--p5-karta-taca); box-shadow: none; }
.p4-stowka .p2-pozycja__nazwa, .p4-stowka .p2-pozycja__zl { color: var(--p5-karta-napis); }
.p4-stowka .p2-pozycja__kreska { color: var(--p5-karta-cichy); }
.p4-stowka .p2-pozycja__gniazdo::before { border-color: var(--p5-karta-gniazdo); }
.p4-stowka .p2-banknot__napis { color: var(--ink); }
.p4-stowka .p2-banknot__znacznik { border-left-color: var(--p5-karta-akcent); }

/* panel Miesiąca: karta tuszu z zdaniami T5 na górze, biały kafel z liczbą i „jak?” pod nimi */
.p4-panel { padding: var(--p4-plyta-pad); gap: var(--p4-s4); }
.p4-js .p4-panel { opacity: 0; }
.p4-panel-glowa { display: flex; flex-direction: column; gap: var(--p4-s2); }
.p4-panel-glowa .p4-etykieta, .p4-dzialy-panel > .p4-etykieta { color: var(--p5-karta-akcent); }
.p4-panel-glowa .p4-h3 {
  font-family: var(--f-display);
  font-weight: var(--p4-waga);
  text-transform: uppercase;
  font-size: var(--p4-h3-duzy);
  line-height: var(--p4-interlinia-naglowka);
  letter-spacing: var(--p4-anton-rozstrzal);
  color: var(--p5-karta-napis);
}
.p4-panel-glowa .p4-latarnia-zdanie { color: var(--p5-karta-napis); max-width: var(--p5-karta-miara); font-size: var(--p4-tekst-maly); }
.p4-panel > .p4-przypis, .p4-dzialy-panel > .p4-przypis, .p4-panel > .p4-zrodlo { color: var(--p5-karta-cichy); }
.p4-panel > .p4-przypis--jak { color: var(--p5-karta-napis); }
/* biały kafel hero i plastry działów na karcie tuszu: pismo tuszem, jak w produkcie */
.p4-panel .kafel.hero, .p4-panel .p4-plaster { color: var(--ink); }
/* obrys siatki leci w kafel hero nad tuszem — w Słońcu, żeby było go widać */
.p4-duch--obrys { border-color: var(--p5-karta-akcent); }

/* arkusz pytań: żółty przycisk „Załóż konto” pod pytaniem wyróżnionym */
.p4-arkusz-akcja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p4-s2) var(--p4-s4); margin-top: var(--p2-o5); }
.p4-arkusz-akcja-przypis { font-size: var(--p4-tekst-maly); font-weight: var(--p4-waga-mocna); color: var(--olive); }

/* stempel „Załóż konto” stoi na kaflu „Twój salon”: kreska i zdanie w jednym rzędzie, dół kafla dla stempla */
.p4-k-pusty-rzad { display: flex; align-items: baseline; gap: var(--p4-s2); }
.p4-rdzen--pusty .p4-k-kwota { font-size: var(--p4-k-zl); }

/* niski komputer: karty mieszczą się między nagłówkiem a dołem okna */
@media (min-width: 861px) and (max-height: 820px) {
  :root {
    --p4-h1: clamp(2rem, 1rem + 2.1vw, 3rem);
    --p4-h2: clamp(1.45rem, 1rem + 1.2vw, 2.1rem);
    --p4-h2-final: clamp(1.7rem, 1.05rem + 1.8vw, 2.6rem);
    --p4-tekst: 0.97rem;
    --p4-tekst-maly: 0.86rem;
    --p4-plyta-pad: clamp(1.15rem, 1.6vw, 1.6rem);
    --p4-lead-tytul: 1.1rem;
  }
  .p4-kopia { gap: var(--p4-s2); }
  .p4-dzialy-panel { display: none; }            /* panel Miesiąca bez plastrów, jak na telefonie */
}

/* telefon: karta tuszu najwyżej pół ekranu */
@media (max-width: 860px) {
  :root {
    --p4-tekst: 0.88rem;
    --p4-tekst-maly: 0.8rem;
    --p4-h1: clamp(1.55rem, 1.1rem + 2.2vw, 2rem);
    --p4-h2: clamp(1.1rem, 0.92rem + 1vw, 1.4rem);
    --p4-h2-final: clamp(1.3rem, 1rem + 1.6vw, 1.7rem);
    --p4-h3: 0.98rem;
    --p4-h3-duzy: clamp(1.1rem, 0.95rem + 0.8vw, 1.3rem);
    --p4-bol-h: clamp(1.05rem, 0.9rem + 0.8vw, 1.25rem);
    --p4-lead-tytul: 0.98rem;
    --p4-plyta-pad: 0.95rem;
    --p5-belka-w: 2.5rem;
  }
  .p4-kopia { gap: var(--p4-s2); }
  .p4-kopia .punkty { gap: var(--p4-s1); }
  .p4-kopia .punkty li, .p4-kopia .p4-bol li { font-size: var(--p4-tekst-maly); }
  .p4-kopia .p4-bol { gap: var(--p4-s0); }
}
@media (max-width: 860px) and (max-height: 700px) {
  :root {
    --p4-tekst: 0.82rem;
    --p4-tekst-maly: 0.74rem;
    --p4-h1: 1.4rem;
    --p4-h2: 1.05rem;
    --p4-h2-final: 1.25rem;
    --p4-bol-h: 1rem;
    --p4-lead-tytul: 0.9rem;
    --p4-plyta-pad: 0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p4-kopia::before { transform: none; transition: none; }
}

/* ============================== p5 · więcej Słońca (Remi 26.09, druga runda) ==
   Jedna fraza w nagłówku każdej karty świeci Słońcem; w stówce paski w tacach są
   żółte, a kawałek żółknie w locie; w „jak?” wiersz „zostaje Ci” stoi na Słońcu;
   pytanie wyróżnione stoi na Blasku; aktywne miejsce mapy ma kropkę Słońca.      */
.p5-akcent { color: var(--p5-karta-akcent); }

/* stówka (Remi 26.09): banknot — gruby pasek, który się kurczy — jest Słońcem; w tacach paski, gdzie cały
   pasek = 100 zł, a wypełnienie = kwota: koszty salonu 46%, zespół 28%, VAT 12%, szacowany podatek 3%, produkty 2%.
   Kawałek odcięty z banknotu leci w swój pasek i rozciąga się dokładnie do tej proporcji (p4.js, geometria lotu). */
.p4-stowka .p2-banknot__kawalek { background: var(--p5-karta-akcent); }
.p4-stowka .p2-pozycja {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nazwa kwota" "pasek pasek";
  align-items: baseline;
  row-gap: var(--p5-pasek-odstep);
  column-gap: var(--p2-o3);
  min-height: 0;
  padding: var(--p2-o3) var(--p2-o4);
}
.p4-stowka .p2-pozycja__nazwa { grid-area: nazwa; }
.p4-stowka .p2-pozycja__kwota { grid-area: kwota; }
.p4-stowka .p2-pozycja__gniazdo {
  grid-area: pasek;
  align-self: stretch;
  height: var(--p5-pasek-h);
  border-radius: var(--p5-pasek-h);
  background: var(--p5-karta-taca);
}
.p4-stowka .p2-pozycja__gniazdo::before { border-radius: inherit; }
.p4-stowka .p2-pozycja__wzor, .p4-stowka .p2-pozycja__wzor--prawy {
  width: calc(var(--udzial) * 1%);
  border-radius: var(--p5-pasek-h) 0 0 var(--p5-pasek-h);
  background: var(--p5-karta-akcent);
  box-shadow: none;
}
/* liczba za szeroka na wąską resztę banknotu staje obok paska: pismo papieru na tuszu */
.p4-stowka .p2-banknot__napis.p5-napis-obok { color: var(--p5-karta-napis); }
/* znaczniki cięcia jak na arkuszu drukarskim: tylko poza banknotem, w Słońcu na tuszu */
.p4-stowka { --p2-ciecie-dl: 0%; --p2-ciecie-wystaje: 1.1rem; }

/* „jak?”: wynik na Słońcu — jedna liczba-bohater dostaje żółć, nie cała tabela */
.p4-panel .p4-jak-wynik {
  background: var(--p5-karta-akcent);
  border-top: 0;
  border-radius: var(--p4-promien-maly);
  padding: var(--p4-s2) var(--p4-s3);
  margin-inline: calc(var(--p4-s3) * -1);
}
.p4-panel .p4-jak-wynik dt, .p4-panel .p4-jak-wynik dd { color: var(--ink); }

/* arkusz pytań: pytanie wyróżnione na Blasku (tło podpowiedzi), z żółtym przyciskiem */
.p4-arkusz .p2-pytania__glowne {
  max-width: 58rem;
  background: var(--sun-2);
  border-radius: var(--p4-promien);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.p4-arkusz .p2-pytania__p { color: var(--olive); }

/* mapa: aktywne miejsce — kropka Słońca w obwódce tuszu (kształt + waga pisma zostają drugim kanałem) */
.p4-mapa-miejsca a[aria-current="step"]::before { background: var(--sun); border-color: var(--ink); }
.p4-mapa-znacznik { background: var(--sun); box-shadow: 0 0 0 var(--p4-kreska-mocna) var(--ink); }

/* panel Miesiąca na komputerze: głowa w dwóch kolumnach — nagłówek obok zdania, panel mieści się w oknie */
@media (min-width: 861px) {
  .p4-panel { gap: var(--p4-s3); padding: var(--p4-s5); }
  /* przypis o „jak?” i podpis liczb w jednym rzędzie pod plastrami */
  .p4-panel > .p4-przypis--jak { margin-bottom: calc(var(--p4-s3) * -1); }
  .p4-panel-glowa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--p4-panel-kol-odstep); align-items: end; }
  .p4-panel-glowa .p4-latarnia-zdanie { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .p4-plaster { padding: var(--p4-s2) var(--p4-s3); }
  .p4-panel .kafel.hero > .rdzen { padding: var(--p4-s4) var(--p4-s5); }
}

/* telefon: karty wyżej, z oddechem od dołu (Remi 26.09); karta hasła ciaśniej, żeby zmieścić się w pół ekranu */
@media (max-width: 860px) {
  :root {
    --p5-dol-telefon: clamp(1.75rem, 7svh, 4rem);
    --p4-h1: clamp(1.35rem, 0.95rem + 2vw, 1.75rem);
    --p4-lead-tytul: 0.92rem;
  }
  .p4-kopia--wejscie .punkty li { line-height: var(--p4-interlinia-srednia); }
  .p4-kopia, .p4-kopia--final { bottom: calc(var(--p5-dol-telefon) + env(safe-area-inset-bottom)); }
  .p4-kopia--wejscie { gap: var(--p4-s1); }
  .p4-kopia--wejscie .kapsula { padding-block: var(--p4-s0); }
  .p4-kopia--wejscie .p4-lead { line-height: var(--p4-interlinia-srednia); }
  .p4-kopia--bol .p4-bol li { line-height: var(--p4-interlinia-ciasna); }
}
@media (max-width: 860px) and (max-height: 700px) {
  .p4-kopia--bol .p4-bol-zdjecie, .p4-kopia--bol .p4-bol-zgadywanie { font-size: var(--p4-tekst-mini); }
}

/* stówka na telefonie: wiersze księgi zwarte, pasek cieńszy — cały kafel mieści się pod nagłówkiem */
@media (max-width: 860px) {
  .p4-stowka { --p5-pasek-h: 8px; --p5-pasek-odstep: 0.3rem; }
  .p4-stowka .p2-pozycja { padding: var(--p2-o2) var(--p2-o3); }
}
@media (max-width: 860px) and (max-height: 700px) {
  .p4-stowka { --p5-pasek-h: 7px; --p5-pasek-odstep: 0.25rem; }
  .p4-stowka .p2-pozycja { padding-block: var(--p4-s1); }
}

/* ============================== p5 · karty jak strona 2 (Remi 26.09 w nocy) ==
   Remi: na stronie 2 czyta się lepiej — duży Anton, tekst jak w książce, czerń rozłożona
   w dwie kolumny („Szeffowa nie zastępuje narzędzi…”, wielkie zdanie marki). Ten układ
   i ta skala pisma przechodzą na karty tuszu piątki:
   – komputer: karta jest szeroką planszą na dole ekranu, nagłówek z lewej, treść z prawej;
     świat stoi w pasie nad kartą (p4.js, kadr), jak na telefonie;
   – telefon: kolumny jedna pod drugą, karta najwyżej 62% ekranu (Remi 26.09 w nocy);
   – skala ze strony 2: tekst ~18 px, zdanie wiodące ~23 px, nagłówek Anton ~52 px,
     zdanie marki wielkim Antonem, „wie / nie wie” w pastylkach (kształt niesie stan).  */
:root {
  --p5-vw: min(1vw, 14.4px);                              /* skala pisma rośnie do 1440 px, dalej rośnie tylko powietrze */
  --p5-szer: min(84rem, calc(100vw - 2 * var(--p4-margines)));
  --p5-kolumny: minmax(0, 5fr) minmax(0, 6fr);
  --p5-kolumny-bol: minmax(0, 4fr) minmax(0, 7fr);        /* Sierpień: pytania bólu potrzebują szerokiej szpalty */
  --p5-kol-odstep: clamp(2rem, calc(4 * var(--p5-vw)), 4.5rem);
  --p5-karta-pad: clamp(1.4rem, calc(2.6 * var(--p5-vw)), 2.75rem);
  --p5-rytm: clamp(0.75rem, calc(1.1 * var(--p5-vw)), 1.15rem);   /* odstęp między blokami w kolumnie */
  --p5-rytm-maly: 0.5rem;
  --p5-h1: clamp(2.5rem, calc(0.9rem + 3.1 * var(--p5-vw)), 4.25rem);        /* Anton: hasło */
  --p5-h: clamp(2rem, calc(0.85rem + 2.45 * var(--p5-vw)), 3.4rem);          /* Anton: nagłówek karty (strona 2: 54 px) */
  --p5-h-final: clamp(2.3rem, calc(0.9rem + 3 * var(--p5-vw)), 4rem);
  --p5-marka: clamp(2.5rem, calc(0.5rem + 4.2 * var(--p5-vw)), 5.25rem);     /* Anton: zdanie marki */
  --p5-mocny: clamp(1.15rem, calc(0.8rem + 0.72 * var(--p5-vw)), 1.5rem);    /* Mulish 800: zdania wiodące, kroki, wie */
  --p5-bol-pytanie: clamp(1.1rem, calc(0.8rem + 0.55 * var(--p5-vw)), 1.35rem); /* Mulish 800: pytania bólu */
  --p5-lede: clamp(1.15rem, calc(0.85rem + 0.62 * var(--p5-vw)), 1.45rem);   /* Mulish 400: zdanie wiodące */
  --p5-tekst: clamp(1.05rem, calc(0.93rem + 0.26 * var(--p5-vw)), 1.2rem);   /* Mulish 400: tekst (strona 2: 18 px) */
  --p5-drobny: clamp(0.9rem, calc(0.84rem + 0.14 * var(--p5-vw)), 1rem);     /* przypisy, źródło liczb */
  --p5-dol-pulpit: clamp(4rem, 18svh, 11rem);                                 /* komputer: karta stoi wyżej, z oddechem od dołu (Remi 27.09, dwa razy) */
  --p5-etykieta: 0.72rem;
  --p5-miara: 44ch;
  --p5-miara-bol: 56ch;
  --p5-interlinia-h: 1.24;                                 /* strona 2: ogonek Ę nad wersalikiem niżej potrzebuje > 1,17 */
  --p5-interlinia-marka: 1.24;                             /* przy 1,14 ogonek „KSIĘGOWA” siadał na „Z” — czytało się „PRŹESZŁOŚĆ” */
  --p5-bol-h: 0.86;                                        /* pytanie w nagłówku Sierpnia jest długie — stopień niżej */
  --p5-interlinia-mocna: 1.24;
  --p5-interlinia-lede: 1.4;
  --p5-interlinia-tekst: 1.55;
  --p5-znacznik-min: 5.5rem;
  --p5-znacznik-pismo: 0.66rem;
  --p5-znacznik-interlinia: 1.6;
  --p5-kreska-znacznik: 1.5px;
  --p5-skreslenie: 2px;
  --p5-krok-nr: 2.6rem;
  --p5-krok-nr-pismo: 1.5rem;
}

/* karta: kolumny jedna pod drugą (telefon), na komputerze obok siebie */
.p4-kopia { gap: var(--p5-rytm); }
.p5-kol { display: flex; flex-direction: column; gap: var(--p5-rytm); min-width: 0; }
@media (min-width: 861px) {
  :root { --p4-plyta-pad: var(--p5-karta-pad); }
  .p4-kopia {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: var(--p5-szer);
    display: grid;
    grid-template-columns: var(--p5-kolumny);
    column-gap: var(--p5-kol-odstep);
    align-items: start;
  }
  .p4-kopia > * { max-width: none; }
  .p5-kol--l { grid-column: 1; }
  .p5-kol--p { grid-column: 2; }
  /* Sierpień: dwa rzędy — pytanie | pytania bólu (szeroka szpalta, rzadziej się łamią),
     pod kreską „Na oko…” | „Koniec zgadywania…” */
  .p4-kopia--bol { grid-template-columns: var(--p5-kolumny-bol); row-gap: calc(var(--p5-rytm) * 1.5); }
  .p4-kopia .p5-kol--dol { border-top: var(--p4-kreska) solid var(--p5-karta-wlos); padding-top: var(--p5-rytm); }
  .p4-kopia .p5-kol--dol .p4-bol-zgadywanie { border-top: 0; padding-top: 0; max-width: var(--p5-miara-bol); }
  /* karta stoi wyżej, nie przy samej krawędzi (Remi 27.09) — dotyczy też zamknięcia */
  .p4-kopia, .p4-kopia--final { bottom: var(--p5-dol-pulpit); }
  /* trzy kroki na jednym kaflu (Remi 27.09): nagłówek na całą szerokość, kroki obok siebie — czyta się 1 → 2 → 3 */
  .p4-kopia--kroki { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--p5-rytm) * 1.5); }
  .p4-kopia--kroki > .p5-kol { grid-column: 1 / -1; }
  .p4-kopia--kroki .p4-kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--p5-kol-odstep); }
}

/* Anton: nagłówki kart, hasło, zdanie marki */
.p4-kopia .p4-h1 { font-size: var(--p5-h1); line-height: var(--p5-interlinia-h); }
.p4-kopia .p4-h2 { font-size: var(--p5-h); line-height: var(--p5-interlinia-h); max-width: none; }
.p4-kopia .p4-h2--final { font-size: var(--p5-h-final); }
.p4-kopia .p4-bol-h { font-size: calc(var(--p5-h) * var(--p5-bol-h)); }
.p5-linia { display: block; white-space: nowrap; }
.p4-kopia .p4-marka {
  font-family: var(--f-display);
  font-weight: var(--p4-waga);
  text-transform: uppercase;
  font-size: var(--p5-marka);
  line-height: var(--p5-interlinia-marka);
  letter-spacing: var(--p4-anton-rozstrzal);
  color: var(--p5-karta-napis);
  text-wrap: balance;
}
.p5-marka-a, .p5-marka-b { display: block; }
.p5-marka-b { color: var(--p5-karta-akcent); margin-top: calc(var(--p5-marka) * 0.12); }

/* Mulish: zdanie wiodące, pytania, tekst — miara ze strony 2 (40–45 znaków w linii) */
.p4-kopia .p4-lead-tytul { font-size: var(--p5-mocny); line-height: var(--p5-interlinia-mocna); }
.p4-kopia .p4-lead { font-size: var(--p5-lede); line-height: var(--p5-interlinia-lede); max-width: var(--p5-miara); }
.p4-kopia .p4-bol { list-style: none; padding-left: 0; gap: var(--p5-rytm); }
.p4-kopia .p4-bol li { font-size: var(--p5-bol-pytanie); line-height: var(--p5-interlinia-mocna); max-width: var(--p5-miara-bol); }
.p4-kopia .p5-kol > p:not([class]), .p4-kopia .p5-cichy, .p4-kopia .p4-bol-zdjecie, .p4-kopia .p4-bol-zgadywanie {
  font-size: var(--p5-tekst);
  line-height: var(--p5-interlinia-tekst);
  max-width: var(--p5-miara);
}
/* czego Szeffowa nie robi — ciszej; co robi — pełnym napisem (strona 2) */
.p4-kopia .p5-cichy, .p4-kopia .p4-bol-zdjecie { color: var(--p5-karta-cichy); }
.p4-kopia .p4-bol-zgadywanie { border-top-color: var(--p5-karta-wlos); padding-top: var(--p5-rytm); }
.p4-kopia .p4-h3 { font-size: var(--p5-mocny); line-height: var(--p5-interlinia-mocna); }
.p4-kopia .p4-h3--duzy { font-size: var(--p5-h); line-height: var(--p5-interlinia-h); }
.p4-kopia .p4-etykieta { font-size: var(--p5-etykieta); }
.p4-kopia .p4-przypis, .p4-kopia .p4-zrodlo, .p4-kopia .p4-akcja-przypis { font-size: var(--p5-drobny); }
.p4-kopia .p4-final-rzad { gap: var(--p5-rytm); }

/* trzy kroki: numer Antonem w obwódce Słońca, tytuł kroku mocno, opis ciszej */
.p4-kopia .p4-kroki { gap: var(--p5-rytm); }
.p4-kopia .p4-kroki > li { grid-template-columns: var(--p5-krok-nr) minmax(0, 1fr); column-gap: var(--p5-rytm); }
.p4-kopia .p4-krok-nr { width: var(--p5-krok-nr); font-size: var(--p5-krok-nr-pismo); }
.p4-kopia .p4-krok-h { font-size: var(--p5-mocny); line-height: var(--p5-interlinia-mocna); }
.p4-kopia .p4-kroki p { font-size: var(--p5-tekst); line-height: var(--p5-interlinia-tekst); max-width: var(--p5-miara); margin-top: var(--p4-s1); }

/* co Szeffowa wie o salonie — układ strony 2: etykieta, wiersze między włosami, pastylki */
.p4-kopia .p5-kol.p4-wie { border-top: 0; padding-top: 0; gap: var(--p5-rytm-maly); }
.p4-kopia .p4-wie > .p4-h3 {
  font-size: var(--p5-etykieta);
  letter-spacing: var(--p4-etykieta-rozstrzal);
  text-transform: uppercase;
  line-height: var(--p4-interlinia-srednia);
  color: var(--p5-karta-cichy);
}
.p4-kopia .p4-wie-lista { display: grid; gap: 0; }
.p4-kopia .p4-wie-wiersz {
  grid-template-columns: var(--p5-znacznik-min) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--p5-rytm);
  padding-block: var(--p5-rytm);
  border-top: var(--p4-kreska) solid var(--p5-karta-wlos);
}
.p4-kopia .p4-wie-wiersz:last-child { border-bottom: var(--p4-kreska) solid var(--p5-karta-wlos); }
.p5-znacznik {
  display: inline-flex;
  justify-content: center;
  min-width: var(--p5-znacznik-min);
  padding: var(--p4-s1) var(--p4-s3);
  border-radius: var(--p4-pelny);
  font-weight: var(--p4-waga-mocna);
  font-size: var(--p5-znacznik-pismo);
  letter-spacing: var(--p4-etykieta-rozstrzal);
  text-transform: uppercase;
  line-height: var(--p5-znacznik-interlinia);
  white-space: nowrap;
}
.p5-znacznik--tak { background: var(--p5-karta-napis); color: var(--ink); border: var(--p5-kreska-znacznik) solid var(--p5-karta-napis); }
.p5-znacznik--nie { border: var(--p5-kreska-znacznik) dashed var(--p5-karta-cichy); color: var(--p5-karta-cichy); }
.p4-kopia .p4-wie-wiersz dd { font-size: var(--p5-mocny); font-weight: var(--p4-waga-mocna); line-height: var(--p5-interlinia-mocna); color: var(--p5-karta-napis); }
.p4-kopia .p4-wie-wiersz--nie dd { font-weight: var(--p4-waga); color: var(--p5-karta-cichy); }
.p4-kopia .p4-wie-wiersz--nie s { text-decoration-thickness: var(--p5-skreslenie); }

/* niski komputer (1024×768, 1280×720): skala o stopień niżej, żeby nad kartą został świat */
@media (min-width: 861px) and (max-height: 820px) {
  :root {
    --p5-h1: clamp(2.2rem, calc(0.9rem + 2.4 * var(--p5-vw)), 3.4rem);
    --p5-h: clamp(1.8rem, calc(0.85rem + 1.9 * var(--p5-vw)), 2.7rem);
    --p5-h-final: clamp(2rem, calc(0.9rem + 2.3 * var(--p5-vw)), 3.1rem);
    --p5-marka: clamp(2.2rem, calc(0.6rem + 3.2 * var(--p5-vw)), 4rem);
    --p5-mocny: clamp(1.1rem, calc(0.85rem + 0.5 * var(--p5-vw)), 1.3rem);
    --p5-bol-pytanie: clamp(1.05rem, calc(0.85rem + 0.36 * var(--p5-vw)), 1.2rem);
    --p5-lede: clamp(1.1rem, calc(0.88rem + 0.45 * var(--p5-vw)), 1.28rem);
    --p5-tekst: clamp(1.02rem, calc(0.95rem + 0.15 * var(--p5-vw)), 1.1rem);
    --p5-karta-pad: clamp(1.2rem, calc(2 * var(--p5-vw)), 2rem);
    --p5-rytm: clamp(0.7rem, calc(0.9 * var(--p5-vw)), 1rem);
  }
}

/* telefon: kolumny jedna pod drugą, karta najwyżej 62% ekranu (Remi 26.09 w nocy) */
@media (max-width: 860px) {
  :root {
    --p5-h1: clamp(1.7rem, 1.1rem + 2.5vw, 2.1rem);
    --p5-h: clamp(1.45rem, 1rem + 2.2vw, 1.85rem);
    --p5-h-final: clamp(1.6rem, 1.05rem + 2.5vw, 2rem);
    --p5-marka: clamp(1.85rem, 1.1rem + 3.6vw, 2.4rem);
    --p5-mocny: 1.06rem;
    --p5-bol-pytanie: 1rem;
    --p5-lede: 0.97rem;
    --p5-tekst: 0.95rem;
    --p5-drobny: 0.84rem;
    --p5-rytm: 0.6rem;
    --p5-krok-nr: 2.1rem;
    --p5-krok-nr-pismo: 1.2rem;
    --p5-znacznik-min: 5.4rem;
  }
}
@media (max-width: 860px) and (max-height: 700px) {
  :root {
    --p5-h1: 1.6rem;
    --p5-h: 1.35rem;
    --p5-h-final: 1.5rem;
    --p5-marka: 1.7rem;
    --p5-mocny: 0.98rem;
    --p5-bol-pytanie: 0.92rem;
    --p5-lede: 0.9rem;
    --p5-tekst: 0.88rem;
    --p5-drobny: 0.8rem;
    --p5-rytm: 0.45rem;
  }
  /* niski telefon: źródło liczb Sierpnia schodzi — liczba stoi na kaflu, podpis ma panel Miesiąca */
  .p4-kopia--bol .p4-zrodlo { display: none; }
}
/* bez JavaScriptu karty czytają się jak dokument: jedna kolumna */
.p4-bez-js .p4-kopia { display: flex; flex-direction: column; margin: 0; }

/* ===================================== p5 · Miesiąc na Słońcu (Remi 26.09 w nocy) ==
   Szczyt „Ile naprawdę zostaje na koniec miesiąca” stoi na żółtym polu, nie na tuszu:
   „niech będzie żółtym, nie czarnym”. To moment ceremonialny (domknięcie miesiąca),
   więc pełne pole Słońca jest na miejscu. Biały kafel z liczbą i plastry działów
   zostają białe — tabela „jak?” stoi na bieli, nie na żółci. Na Słońcu pismo tuszem,
   etykiety i przypisy oliwką; belka i lecący obrys siatki też tuszem, żeby było je widać. */
.p4-panel { background: var(--sun); color: var(--ink); }
.p4-panel::before { background: var(--ink); opacity: var(--p5-belka-krycie, 1); }
.p4-panel-glowa .p4-etykieta, .p4-dzialy-panel > .p4-etykieta { color: var(--olive); }
.p4-panel-glowa .p4-h3, .p4-panel-glowa .p4-latarnia-zdanie { color: var(--ink); }
.p4-panel .p5-akcent { color: inherit; }
.p4-panel > .p4-przypis, .p4-dzialy-panel > .p4-przypis, .p4-panel > .p4-zrodlo { color: var(--olive); }
.p4-panel > .p4-przypis--jak { color: var(--ink); }
.p4-panel :focus-visible { outline-color: var(--ink); }
.p4-duch--obrys { border-color: var(--ink); }
/* nagłówek i zdanie panelu: skala kart (interlinia 1,24 — ogonek „NAPRAWDĘ” nie wisi nad drugą linią) */
.p4-panel-glowa .p4-h3 { font-size: max(var(--p2-anton-min), calc(var(--p5-h) * 0.66)); line-height: var(--p5-interlinia-h); }
@media (min-width: 861px) { .p4-panel { gap: calc(var(--p4-s3) - 3px); } }
.p4-panel-glowa .p4-latarnia-zdanie { font-size: var(--p5-drobny); line-height: var(--p5-interlinia-tekst); }

/* ============================== p5 · „Z góry” jak stówka (Remi 26.09 w nocy) ==
   Zapalony kafel Sierpnia („Wpisane w tym miesiącu”) odrywa się i rośnie żółty w panel
   Miesiąca, który też stoi na Słońcu; treść panelu wchodzi po lądowaniu. Duch jest na całe
   okno i przycinany (clip-path: inset z zaokrągleniem), więc róg zostaje rogiem kafla —
   przy skali ×6 zaokrąglenie rosłoby razem z nim. Cień z filtra na opakowaniu, bo cień
   elementu przyciętego ginąłby razem z nim. */
:root { --p5-duch-miesiac-cien: drop-shadow(0 18px 32px rgba(30, 24, 5, 0.2)); }
.p4-duch-miesiac { position: absolute; inset: 0; z-index: calc(var(--p4-z-panel) + 1); pointer-events: none; visibility: hidden; filter: var(--p5-duch-miesiac-cien); }
.p4-duch-miesiac__pole { position: absolute; inset: 0; background: var(--sun); clip-path: inset(50%); }
.p4-bez-js .p4-duch-miesiac { display: none; }
/* trzy kroki na jednym kaflu — telefon: opisy kroków drobniej, przypis o opłatach schodzi
   (to samo mówi zaraz potem karta zamknięcia: „Trzy miesiące bez opłat. Bez karty.”) */
@media (max-width: 860px) {
  .p4-kopia--kroki { gap: var(--p5-rytm-maly); }
  .p4-kopia--kroki .p4-kroki { gap: var(--p5-rytm-maly); }
  .p4-kopia--kroki .p4-kroki p { line-height: var(--p5-interlinia-lede); margin-top: 0; }
  .p4-kopia--kroki .p4-krok-nr { width: 1.8rem; font-size: 1.125rem; }
  .p4-kopia--kroki > .p5-kol--p > .p4-przypis { display: none; }
}
/* niski telefon: opisy kroków drobniej, żeby cały kafel zmieścił się w 62% ekranu */
@media (max-width: 860px) and (max-height: 700px) {
  .p4-kopia--kroki .p4-kroki p { font-size: 0.875rem; line-height: var(--p4-interlinia-ciasna); }
}

/* ============================== p5 · pasek u góry przypięty (Remi 27.09) ==
   Mapa zeszła z widoku (zostaje w kodzie). Przez całe przewijanie u góry stoi pasek papieru
   z kreską włosową: znak z lewej, z prawej „Pytania”, „Zaloguj się” i „Załóż konto” (Słońce).
   Pole ochronne znaku: wysokość wersalika F nad i pod znakiem — pasek jest tym samym papierem.
   Telefon: znak w wersji małej (84 px, FF tuszem, bez obwódki — poniżej 110 px FF przestaje
   istnieć, brand book §2), przyciski ciaśniej. */
:root { --p5-znak-pasek: var(--p4-znak-w); }
.p4-mapa, .p4-bez-js .p4-mapa { display: none; }
.p4-naglowek {
  align-items: center;
  padding: 0 var(--p4-margines);
  background: var(--paper);
  box-shadow: 0 var(--p4-kreska) 0 var(--hair);
}
.p4-naglowek .p4-znak-tabliczka { margin: 0; padding: calc(var(--p5-znak-pasek) * 1760 / 7826) 0; background: none; border-radius: 0; }
.p4-naglowek .p4-znak { width: var(--p5-znak-pasek); }
.p4-naglowek-akcje { display: flex; align-items: center; gap: var(--p4-s2); margin-left: auto; }
.p4-naglowek-akcje .pigulka { white-space: nowrap; }
.p4-zaloguj--naglowek { align-self: auto; }
@media (max-width: 860px) {
  :root { --p5-znak-pasek: 5.25rem; }
  .p4-naglowek .p4-znak-slonce { fill: var(--ink); }
  .p4-naglowek .p4-znak-obwodka { display: none; }
  .p4-naglowek-akcje, .p4-zaloguj--naglowek { display: inline-flex; }
  .p4-naglowek-akcje { gap: var(--p4-s1); }
  .p4-naglowek-akcje .pigulka { padding-inline: var(--p4-s3); font-size: 0.6rem; letter-spacing: 0.05em; }
}
@media (max-width: 379.98px) {
  .p4-naglowek-akcje .pigulka { padding-inline: var(--p4-s2); letter-spacing: 0.03em; }
}

/* panel Miesiąca bez własnego przewijania (Remi 27.09: „scroll się zawiesza na Z góry”):
   overflow + overscroll-behavior: contain zatrzymywały kółko nad panelem — także wtedy,
   kiedy panel nie miał czego przewijać. Panel mieści się sam (plastry działów schodzą niżej). */
.p4-panel { max-height: none; overflow: visible; overscroll-behavior: auto; }
/* panel Miesiąca z plastrami działów potrzebuje ~860 px wysokości okna; niżej plastry schodzą (panel nie przewija się w środku) */
@media (min-width: 861px) and (max-height: 859.98px) { .p4-dzialy-panel { display: none; } }
/* pasek ma tę samą wysokość także nad arkuszem pytań (dawny stan „na arkuszu” dokładał odstęp od dołu) */
.p4-na-arkuszu .p4-naglowek { padding-bottom: 0; }
/* kafel „Kreator” w świecie: kroki z 27.09 są dłuższe — numer nie ściska się w owal, lista ciaśniej,
   żeby krok 3 nie dotykał dolnej krawędzi kafla (dolny odstęp rdzenia zostaje) */
:root { --p4-k-odstep-kroki: 5px; --p4-k-kroki-interlinia: 1.25; --p4-k-nr-kroki: 20px; }
.p4-k-nr { flex: none; }
.p4-rdzen--kroki { gap: var(--p4-k-odstep-kroki); }
.p4-rdzen--kroki .p4-k-kroki { line-height: var(--p4-k-kroki-interlinia); }
.p4-rdzen--kroki .p4-k-nr { width: var(--p4-k-nr-kroki); }

/* =============================================== 14.10 · etap 1 planu SEO ==
   (1) CLS ≈ 1,0 (audyt 14.10): zanim scrollcraft.js policzy tor, odstęp był zerowy i pierwsze klatki
       pokazywały arkusz pytań, który potem zjeżdżał o kilkanaście ekranów. Kontener lotu ma od razu
       wysokość toru — arkusz stoi pod nim od pierwszej klatki.
   (2) pytania jako nagłówki H3 w <summary> — wyglądają jak dawny span.
   (3) odsyłacze w zdaniach na kartach i w odpowiedziach: kolor pisma, podkreślenie, cel dotykowy przez padding.
       Akapit z odsyłaczem do kalkulatora nie ma klasy — bierze styl zdań karty (.p5-kol > p:not([class])). */
/* odstępu [data-sc-spacer] nie ruszamy — silnik czyta go przy starcie (wysokość w CSS psuła tor, 14.10);
   wysokość toru dostaje kontener lotu jako min-height: (KONIEC 11,44 + 1 ekran) × wysokość okna */
.p4-js .p4-lot { min-height: calc(12.44 * 100vh); }
h3.p2-pyt__q { font: inherit; letter-spacing: inherit; text-transform: inherit; }
#p4-do-kalkulatora a, .p2-pyt__odp a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--p2-podkreslenie);
  /* cel dotykowy ≥ 44 px także dla odsyłacza w zdaniu: padding dopełnia wiersz do --p4-cel, ujemny margines oddaje miejsce */
  padding-block: max(0px, calc((var(--p4-cel) - 1lh) / 2));
  margin-block: calc(-1 * max(0px, calc((var(--p4-cel) - 1lh) / 2)));
  display: inline-block;
}
#p4-do-kalkulatora a:focus-visible, .p2-pyt__odp a:focus-visible { outline: var(--p4-kreska) solid currentColor; outline-offset: var(--p4-kreska); }
/* (4) niski telefon (≤ 700 px wysokości): karta tuszu najwyżej 62% ekranu (Remi 26.09). Dwa dopiski z 14.10 schodzą
   jak wcześniej punkty pod hasłem — w HTML zostają (Google i czytnik ekranu), zdanie o systemie rezerwacji stoi też
   w „Szeffowa nie zastępuje narzędzi”, a kalkulator w pytaniach i w stopce. */
@media (max-width: 860px) and (max-height: 700px) {
  .p4-kopia--wejscie .p4-lead--obok, .p4-kopia--bol #p4-do-kalkulatora { display: none; }
}