/* doc.css — dokument PDF: rama, logotyp, druk.

   Wyglądu szablonu tutaj NIE MA. Dwanaście układów mieszka w export/szablony/*.html,
   w stylach wpisanych wprost w te pliki, i trafia do aplikacji przez
   tools/build-templates.mjs. Ten arkusz odpowiada tylko za to, co jest wspólne:
   szerokość kartki, logotyp, zachowanie przy druku i paginację.

   Kolory nie są tu zaszyte ani razu. Szablony używają wyłącznie var(--nazwa),
   a tokeny ustawia js/theme.js na elemencie .doc przy generowaniu dokumentu. */

#pdfStage{position:fixed;left:-3000px;top:0;z-index:-1}
/* numer strony doklejany przez JS (Safari): absolutny także poza drukiem, żeby nie dokładał wysokości */
#pdfStage .pgnum{position:absolute}

.doc{width:794px;position:relative;-webkit-user-select:none;user-select:none}
.doc *{box-sizing:border-box}
.doc .tnum{font-variant-numeric:tabular-nums}

/* ---------- logotyp albo nazwa firmy ----------
   Dwa równorzędne stany, oba kompletne. Bez monogramu: litera w kolorowym
   kwadracie czyta się jak brakujący plik, a nie jak znak firmowy. Sama nazwa
   firmy jest pełnoprawnym stanem, nie zastępnikiem.

   Wysokość NIE jest jedną liczbą na dwanaście szablonów (ADR-048). Logo stoi
   dokładnie w miejscu wordmarku, a wordmark ma w każdym szablonie inny stopień:
   14 px w Mikro, 26 px w Newspaper. Stała 28 px trafiała więc raz w punkt,
   a raz była dwa razy za duża; w Swiss grid nachodziła na etykietę sekcji.
   Baza --logoH to zmierzona wysokość optyczna wordmarku danego szablonu
   (prawdziwy krój, prawdziwy stopień, canvas actualBoundingBox) razy 1,45.
   Tyle premii znak firmowy znosi, zanim zacznie wygrywać z tytułem wyceny.
   Szablon 11 jest wyjątkiem policzonym w drugą stronę: tam logo JEST winietą
   gazety i stoi samo w osi strony, więc zostaje przy 28 px.

   --logoScale to ręczna korekta z panelu Marka, 80-130 %. Nie da się jej
   wyliczyć z typografii: pliki logo różnią się oddechem wewnątrz kadru, jeden
   jest przycięty do liter, drugi ma w eksporcie własne marginesy. Zakres jest
   wąski świadomie: to ma być dostrojenie, a nie sposób na rozwalenie nagłówka.

   --logoMaxW jest barierką, nie rozmiarem, i dlatego NIE skaluje się razem
   z suwakiem: barierka, która ustępuje pod naciskiem, przestaje nią być.
   Szeroki znak przestaje więc rosnąć w pewnym momencie zamiast zepchnąć datę
   do drugiego wiersza. W Swiss grid limit jest węższy, bo tam logotyp stoi
   w szynie etykiet o stałej szerokości 120 px i wyjście poza nią wchodzi
   na sąsiednią kolumnę, a nie w wolne miejsce. */
.doc{--logoH:20px;--logoMaxW:170px;--logoScale:1}
.doc.tpl01{--logoH:20px}   /* Inter 600 / 16 px      */
.doc.tpl02{--logoH:22px}   /* Work Sans 600 / 19 px  */
.doc.tpl03{--logoH:22px}   /* DM Sans 700 / 18 px    */
.doc.tpl04{--logoH:19px}   /* Plex Mono 600 / 17 px  */
.doc.tpl05{--logoH:19px}   /* Manrope 700 / 16 px    */
.doc.tpl06{--logoH:17px;--logoMaxW:120px}  /* Archivo 700 / 15 px, szyna 120 px */
.doc.tpl07{--logoH:20px}   /* Work Sans 600 / 17 px  */
.doc.tpl08{--logoH:19px}   /* Space Grotesk 600 / 16 */
.doc.tpl09{--logoH:20px}   /* Newsreader 600 / 18 px */
.doc.tpl10{--logoH:20px}   /* Inter 700 / 16 px      */
.doc.tpl11{--logoH:28px}   /* winieta, nie nagłówek  */
.doc.tpl12{--logoH:17px}   /* Inter 700 / 14 px      */
.doc .doclogo{display:inline-block;vertical-align:middle;line-height:0}
.doc .doclogo img,.doc .doclogo svg{height:calc(var(--logoH) * var(--logoScale));width:auto;
  max-width:var(--logoMaxW);display:block;object-fit:contain}
/* wgrany raster w szablonie 08 (ciemne tło), gdy użytkownik nie dał osobnej wersji.
   Inline SVG nie potrzebuje tej sztuczki: dziedziczy currentColor. */
.doc .doclogo--invert img{filter:brightness(0) invert(1)}

/* ===== DRUK WEKTOROWY: PDF z window.print() (ostry tekst, wektorowe SVG) ===== */
@media print{
  html,body{margin:0 !important;padding:0 !important}
  /* tło strony (także w pasie marginesu) ustawia generatePDF — bierze je z papieru
     wybranego przez użytkownika, żeby margines drugiej strony nie był białym pasem
     przy ciepłym papierze i żeby szablon 08 nie miał białej ramki wokół ciemnego tła */
  body > *{display:none !important}
  body > #pdfStage{display:block !important;position:static !important;left:0 !important;top:0 !important;z-index:auto !important}
  #pdfStage .doc{box-shadow:none !important;margin:0 !important;min-height:auto !important}
  /* Dolny oddech dokumentu w druku nie istnieje (ADR-230). Na ekranie dokument
     kończy się pasem pustego papieru, ale na kartce to puste miejsce i tak jest
     dołem ostatniej strony, a Chromium liczy końcowy padding jak treść: ostatni
     blok razem ze stopką musiał zmieścić się na stronie Z TYMI 40–46 px pustki,
     więc przy braku kilku linii schodził na następną stronę w całości. Paginacja
     JS (`countPages`, `paginateForSafari`, `podzielSekcje`) liczy po blokach
     i tego paddingu nigdy nie widziała, więc teraz druk zgadza się z nią.
     Dotyczy też przezroczystego wrappera 03 i 10, który niesie ten oddech u siebie.
     Zostaje 6 px (PG_KONIEC w js/pdfGenerator.js): bez nich stopka, która kończy
     się co do ułamka piksela na dole strony, mieści się, ale druk dokłada za nią
     pustą kartkę (zmierzone: szablon 11 ze znakiem wersji darmowej). Z paddingiem
     Chromium w takim miejscu woli przenieść blok, a pustej kartki nie robi nigdy. */
  #pdfStage .doc{padding-bottom:6px !important}
  #pdfStage .doc > [data-pg="wrap"]{padding-bottom:0 !important}

  /* pasma koloru, tinty i akcenty muszą wyjść na papier */
  .doc, .doc *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}

  /* Paginacja. Bloki najwyższego poziomu (wiersz kosztorysu, karta wariantu,
     klauzula) nie łamią się w poprzek. Element wyższy od strony przeglądarka
     i tak złamie — reguła go nie zablokuje, tylko przestanie obowiązywać. */
  .doc > div{break-inside:avoid-page;page-break-inside:avoid}
  /* szablony z pasmem na całą szerokość trzymają treść w jednym wrapperze:
     dla paginacji jest przezroczysty, chronimy dopiero jego dzieci */
  .doc > div[data-pg="wrap"]{break-inside:auto;page-break-inside:auto}
  .doc > div[data-pg="wrap"] > div{break-inside:avoid-page;page-break-inside:avoid}
  /* nagłówek sekcji nie zostaje sam na dole strony */
  .doc [data-pg="head"]{break-after:avoid-page;page-break-after:avoid}
  /* …chyba że stoi w kolumnie etykiet obok własnej treści (06): tam treść jest
     w tym samym bloku, a reguła przechodziła z elementu siatki na cały blok
     i sklejała go z następnym, sekcja za sekcją (ADR-231). */
  .doc [data-pg="head"][data-pg-kolumna]{break-after:auto;page-break-after:auto}
  /* Podpis kończy treść i nie ma zaczynać strony sam (ADR-053).

     UWAGA: Chromium tej reguły NIE honoruje — sprawdzone na wydruku, razem
     z `break-after:avoid` na bloku poprzedzającym i z opakowaniem obu
     w `break-inside:avoid`. Żadne z trzech nie zadziałało. Reguła zostaje,
     bo jest deklaratywnie poprawna i obowiązuje w silnikach, które `avoid`
     na `break-before` obsługują; realną ochronę w Safari daje paginator
     w js/pdfGenerator.js, który przesuwa łamanie o blok wcześniej. */
  .doc [data-pg="foot"]{break-before:avoid-page;page-break-before:avoid}
  /* wiersz listy (pozycja kosztorysu, opcja, klauzula, realizacja) nie pęka
     w poprzek strony. Reguła na bloku sekcji tego nie załatwia: blok dłuższy
     niż strona i tak zostanie złamany, a wtedy łamie się gdziekolwiek —
     w szablonie 06 opis pozycji zostawał na następnej stronie bez tytułu. */
  .doc [data-pg="row"]{break-inside:avoid;page-break-inside:avoid}

  /* linki klikalne, ale bez niebieskiego podkreślenia */
  .doc a{color:inherit !important;text-decoration:none !important}

  /* paginacja JS dla Safari: wymuszone łamanie + biały oddech u góry stron 2+,
     numer strony jako element absolutny (Safari nie zna margin boxów @page).
     Na ekranie oba niewidoczne — wstawiane dopiero przed drukiem. */
  #pdfStage .pgbrk{break-before:page;page-break-before:always;height:34px}
  #pdfStage .pgnum{position:absolute;left:0;right:0;text-align:center;font:500 8.5px Inter,system-ui,sans-serif;color:var(--faint)}

  /* Safari zostawia czasem 1–2 px bieli przy górnej krawędzi przy pełnym bleedzie */
  #pdfStage .doc.safariFullBleed{margin-top:-2px !important}

  /* rozmiar; marginesy i numer strony wstrzykuje generatePDF */
  @page{size:A4}
}

/* callsheet.css — wygląd call sheetu (ADR-152).

   Kolory wyłącznie przez tokeny z js/theme.js (deriveTheme), tak samo jak
   w szablonach wyceny. Krój Inter z css/pdffonts.css, bo jest lokalny
   i ma cyfry tabelaryczne. Znaki spoza jego zakresu (strzałki 2190–21FF)
   wypadłyby na krój systemowy, dlatego w dokumencie są „›” i „»”.

   Szerokość kartki: A4 794 px jak wycena, Letter 816 px (8,5 cala × 96).
   Paginacja i druk idą przez css/doc.css i drukujDokument(). */

.doc.cs{box-sizing:border-box;--csCzas:84px;font:400 10.5px/1.45 Inter,sans-serif;color:var(--text);background:var(--paper);
  padding:0 44px 30px;min-height:0}
.doc.cs.cs--letter{width:816px}
.doc.cs b{font-weight:600}
.cs-mut{color:var(--mut)}
.cs-faint{color:var(--faint)}

/* pasek u góry: marka i rodzaj dokumentu. Kolor do krawędzi kartki. */
.cs-top{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin:0 -44px;padding:16px 44px 14px;border-top:6px solid var(--primary)}
.cs-brand{min-height:22px;display:flex;align-items:center}
.cs-logo img{height:24px;width:auto;max-width:180px;display:block;object-fit:contain}
.cs-firma{font:600 14px/1 Inter,sans-serif;color:var(--primary)}
.cs-meta{display:flex;gap:10px;align-items:baseline;font:600 10px/1 Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.cs-dzien{color:var(--primary)}

.cs-title{padding:4px 0 14px}
.cs-title h1{font:700 23px/1.2 Inter,sans-serif;margin:0;color:var(--text);letter-spacing:-.01em}
.cs-client{font:500 12px/1.4 Inter,sans-serif;color:var(--mut);margin-top:3px}
.cs-date{font:600 11.5px/1.4 Inter,sans-serif;margin-top:6px;color:var(--primary)}

/* zbiórka ekipy jako centrum kartki (CALLSHEET-ANALIZA §2, Pilot punkt 1) */
.cs-hero{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:6px;overflow:hidden}
.cs-hero--2{grid-template-columns:1.15fr 2fr}
.cs-hero--1{grid-template-columns:1fr}
.cs-hero--1 .cs-call{display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap}
.cs-hero--1 .cs-call-v{margin:0}
.cs-call{background:var(--primary);color:var(--onPrimary);padding:14px 18px 13px}
.cs-call-k{font:600 9.5px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--onPrimaryMut)}
.cs-call-v{font:600 46px/1 Inter,sans-serif;letter-spacing:-.02em;margin:8px 0 7px}
.cs-call-where{font:500 11px/1.35 Inter,sans-serif;margin-bottom:5px}
.cs-call-note{font:400 9.5px/1.35 Inter,sans-serif;color:var(--onPrimaryMut)}
.cs-day,.cs-sky{padding:13px 16px;border-left:1px solid var(--line)}
.cs-k{font:600 9px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.13em;color:var(--faint);margin-bottom:8px}
.cs-hrow{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;border-bottom:1px solid var(--line2)}
.cs-hrow:last-child{border-bottom:0}
.cs-hrow span{color:var(--mut)}
.cs-hrow b{font-weight:600}
.cs-pogoda{font:500 11px/1.4 Inter,sans-serif}
.cs-slonce{color:var(--mut);margin-top:6px}

.cs-uwagi{margin-top:12px;padding:10px 14px 11px;background:var(--aSoft);border-left:4px solid var(--accent);border-radius:0 4px 4px 0}
.cs-uwagi .cs-k{color:var(--accentInk);margin-bottom:5px}
.cs-uwagi-t{font:500 11px/1.5 Inter,sans-serif;white-space:pre-line}

.cs-kontakty{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 14px;margin-top:14px;
  padding:10px 0 11px;border-bottom:1px solid var(--line)}
.cs-kontakt-f{font:600 8.5px/1.2 Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.cs-kontakt-i{font:600 11px/1.3 Inter,sans-serif;margin-top:3px}
.cs-kontakt-t{color:var(--mut)}

/* sekcje i wiersze. Siatka zamiast <table>, bo blok paginacji musi być
   dzieckiem sekcji (data-pg="wrap"), a wiersz tabeli nim nie bywa. */
.cs-sec{margin-top:18px}
.cs-h{font:700 10px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.13em;color:var(--primary);
  padding-bottom:7px;border-bottom:2px solid var(--primary)}
.cs-row{display:grid;gap:10px;padding:5px 6px;border-bottom:1px solid var(--line2);align-items:baseline}
.cs-row > div{min-width:0;overflow-wrap:anywhere}
.cs-row--head{font:600 8.5px/1.2 Inter,sans-serif;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);
  padding-top:6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.cs-czas{font-weight:600;white-space:nowrap}

/* Tabele z powtarzanym nagłówkiem kolumn. Kopię wiersza z nazwami kolumn
   wstawia paginator JS (drukujDokument z paginacjaJs) przed wierszem, który
   zaczyna nową stronę, w każdej przeglądarce. Próba z display:table
   (3.10.2026) nie zadziałała: Chrome nie powtarzał grupy nagłówka nad
   wierszami siatki. break-inside:auto nadpisuje regułę z doc.css dla dzieci
   sekcji, żeby tabela łamała się między wierszami, a nie przeskakiwała cała. */
.doc.cs .cs-tab{break-inside:auto;page-break-inside:auto}
.cs-row--przerwa{grid-template-columns:var(--csCzas) 1fr;background:var(--pSoft);font-weight:600;color:var(--primary);
  text-transform:uppercase;letter-spacing:.08em;font-size:9.5px}
.cs-row--przejazd{grid-template-columns:var(--csCzas) 1fr;font-style:italic;color:var(--mut)}
.cs-dzial{font:600 9px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.11em;color:var(--accentInk);
  padding:9px 6px 3px}
.cs-lok{grid-template-columns:56px 1.6fr 1fr 1.2fr}
.cs-obs{grid-template-columns:48px 1.3fr 1.1fr 1fr 64px 52px}
.cs-kl{grid-template-columns:1.2fr 1fr 1fr 1fr 64px}
.cs-dost{grid-template-columns:1.2fr 1.4fr 1fr 1fr}
.cs-nast{grid-template-columns:var(--csCzas) 1fr 56px}
.cs-statysci > div:last-child{padding:6px 6px 0}

.cs-kod{display:inline-block;font:600 9px/1 Inter,sans-serif;letter-spacing:.04em;padding:2.5px 5px 2px;
  border:1px solid var(--primary);color:var(--primary);border-radius:3px;white-space:nowrap}
.cs-kod--on{border-color:var(--onPrimaryMut);color:var(--onPrimary)}
.cs-link{font:500 9.5px/1.4 Inter,sans-serif;color:var(--accentInk);margin-top:1px}

.cs-foot{margin-top:22px;padding-top:9px;border-top:1px solid var(--line);font:500 8.5px/1 Inter,sans-serif;color:var(--faint)}

/* cs.css — strona generatora call sheetów (ADR-152). Dokłada się do
   site/src/style.css (nagłówek, stopka, przyciski, typografia) i do
   css/doc.css + css/callsheet.css (dokument). Te dwa ostatnie skleja
   build-site.mjs przed tym plikiem w jedno /cs/cs.css. */

.cs-intro h1{font-size:52px}  /* NIE `.cs-page h1`: dokument w podglądzie i na wydruku też ma <h1> */
.cs-intro{padding:44px 40px 18px;display:flex;flex-direction:column;gap:12px;max-width:1240px}
.cs-intro .lead{max-width:720px}
.cs-noscript{padding:16px;border:1px solid var(--line-2);border-radius:10px;background:var(--white)}

.cs-bar{position:sticky;top:68px;z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px 0;background:rgba(246,248,248,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cs-bar-sep{flex:1}
.cs-txt{background:none;border:0;padding:8px 6px;font:500 14px/1 var(--sans);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cs-txt:hover{color:var(--ink)}
.cs-status{flex-basis:100%;font-size:13px;color:var(--faint);min-height:0}
.cs-status:empty{display:none}
.cs-status--err{color:#a3261a}
.cs-przyklad{margin:14px 0 0;padding:10px 14px;border-radius:8px;background:#fff6e6;border:1px solid #f3d7a6;font-size:14px}

.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:32px;align-items:start;padding:18px 0 64px}
.cs-form{display:flex;flex-direction:column;gap:14px;min-width:0}

.cs-sek{margin:0;padding:18px 20px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);min-width:0}
.cs-sek--off{background:transparent;padding-bottom:16px}
.cs-sek-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cs-sek-h h2{font-size:19px;letter-spacing:-.01em}
.cs-sek-b{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.cs-pom{font-size:13.5px;color:var(--mut);margin-top:6px}
.cs-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cs-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cs-siatka--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-siatka--3{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-siatka--zb{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.cs-f{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Miejsce zbiórki z potwierdzeniem pod spodem, którą lokalizację wskazuje wpis. */
.cs-f-grupa{display:flex;flex-direction:column;min-width:0}
.cs-pom--lok{margin-top:7px}
.cs-pom[hidden]{display:none}
.cs-f label,.cs-lab{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cs-f--bezlab label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-f input,.cs-f select,.cs-f textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--white);font:400 15px/1.35 var(--sans);color:var(--ink)}
.cs-f textarea{resize:vertical;min-height:72px}
.cs-f input[type=color]{padding:3px;height:40px;cursor:pointer}
.cs-f input:focus,.cs-f select:focus,.cs-f textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:transparent}
.cs-f--duze input{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.cs-kodin{text-transform:uppercase;font-weight:600;letter-spacing:.04em}

.cs-profil{display:flex;flex-wrap:wrap;gap:8px}
.cs-profil-o{position:relative;display:flex;align-items:center;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;font-size:14.5px;font-weight:500}
.cs-profil-o input{position:absolute;opacity:0;pointer-events:none}
.cs-profil-o.is-on{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.cs-profil-o:focus-within{outline:2px solid var(--ink);outline-offset:2px}

.cs-przel{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.cs-przel input{width:16px;height:16px;accent-color:var(--ink)}
.cs-kol{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;color:var(--faint)}

.cs-logo-r{display:flex;align-items:center;gap:10px;min-height:40px}
.cs-logo-r img{max-height:32px;max-width:120px;object-fit:contain}

/* wiersze list: karta na wiersz, pola zawijają się zamiast wychodzić w bok */
.cs-lista{display:flex;flex-direction:column;gap:8px}
.cs-r{display:flex;gap:10px;align-items:flex-start;padding:10px 10px 10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.cs-r-pola{flex:1;display:flex;flex-wrap:wrap;gap:8px 10px;min-width:0}
.cs-r .cs-f label{font-size:11.5px;font-weight:500;color:var(--faint)}
.cs-r .cs-f input,.cs-r .cs-f select{min-height:36px;font-size:14.5px;padding:6px 9px}
.cs-r-akcje{display:flex;flex-direction:column;gap:2px;padding-top:18px}
.cs-ikon{width:30px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--mut);font-size:15px;cursor:pointer}
.cs-ikon:hover:not(:disabled){background:var(--tint);color:var(--ink)}
.cs-ikon:disabled{opacity:.3;cursor:default}
.cs-ikon--x:hover{color:#a3261a}
.cs-dodaj{align-self:flex-start;padding:8px 12px;border:1px dashed var(--line-2);border-radius:8px;background:transparent;
  font:600 14px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.cs-dodaj:hover{border-color:var(--ink);color:var(--ink)}

/* podgląd: kartka w skali, przyklejona przy przewijaniu formularza */
.cs-prev{position:sticky;top:140px;display:flex;flex-direction:column;gap:12px}
.cs-prev-h{display:flex;flex-direction:column;gap:2px;font-size:14px}
.cs-prev-h span{font-size:13px;color:var(--mut)}
.cs-prev-box{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 1px 3px rgba(20,25,30,.09),0 16px 44px rgba(20,25,30,.11);background:var(--white)}
.cs-prev-scale{transform-origin:0 0}
.cs-prev-scale .doc{pointer-events:none}
.cs-cta{padding:16px 18px;border-radius:var(--r);background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:14px}
.cs-cta p{color:#c9d3d4}
.cs-cta .cs-cta-h{font:600 17px/1.25 var(--head);color:var(--on-dark)}

/* Pusty call sheet do pobrania (17.10.2026), nad poradnikiem. */
.cs-pusty{display:flex;flex-direction:column;gap:12px;padding-top:48px;padding-bottom:24px}
.cs-pusty-pliki{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0}
.cs-guide{display:flex;flex-direction:column;gap:22px;padding-bottom:88px}
.cs-guide h2{margin-top:22px}
.cs-guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.cs-guide-list li{display:flex;flex-direction:column;gap:6px}
/* list-item, nie flex: flex na <li> zjada numer kroku */
.cs-steps li{display:list-item}
.cs-steps li > p{margin-top:6px}
.cs-guide-list p,.cs-steps p{color:var(--mut);font-size:15.5px}
.cs-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:16px}
.cs-steps li::marker{font-weight:600}
.cs-faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cs-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.cs-faq summary{cursor:pointer;font-weight:600}
.cs-faq p{margin-top:8px;color:var(--mut)}

@media (max-width:1080px){
  .cs-grid{grid-template-columns:minmax(0,1fr)}
  .cs-prev{position:static;order:-1}
  .cs-prev-box{max-width:520px}
}
@media (max-width:900px){
  .cs-intro{padding:32px 16px 12px}
  .cs-intro h1{font-size:38px}
  .cs-bar{position:static}
  .cs-siatka,.cs-siatka--4,.cs-siatka--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-guide-list{grid-template-columns:1fr}
  .cs-sek{padding:16px 14px}
}
@media (max-width:420px){
  .cs-siatka,.cs-siatka--zb{grid-template-columns:1fr}
  .cs-r{padding:10px 8px}
}
@media print{ .cs-page .top,.cs-page main,.cs-page .foot{display:none !important} }