/* ═══════════════════════════════════════════════════════════════════════
   wspolne.css — JEDEN pasek i JEDNA stopka dla wszystkich stron publicznych
   (v9, faza 1, 5.10.2026; wygląd v14 od 19.10.2026)

   Do tej pory strona główna miała inne menu niż 13 podstron (logo na
   środku zamiast z lewej, inne pozycje, inny przycisk), a stopka istniała
   w kilku wariantach. Znaczniki wstawia `narzedzia/pasek-v9.py` między
   `<!-- @pasek -->` i `<!-- @stopka -->` — zgodność pilnuje test-pasek.mjs.

   Klasy mają WŁASNĄ przestrzeń nazw (`gn-*` pasek, `gs-*` stopka), żeby
   nie zderzyły się z `.nav`/`.btn`/`.w` z kalkulator.css i strony głównej,
   które mają inne wartości. Kolory i kroje: tylko tokeny z paleta.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WYGLĄD v14 (19.10.2026) ──
   Podstrony dostają wygląd strony głównej: biel i czerń, jeden niebieski
   akcent, czerwień dla kosztów. Stare nazwy (--paper, --gold…) zostają,
   bo używają ich kalkulator.css, poradnik.css i style stron — tu dostają
   wartości v14. `:root:root` przebija `:root` z paleta.css i kalkulator.css
   bez względu na kolejność arkuszy. Panel tego pliku nie ładuje, więc
   zostaje przy swojej palecie. */
:root:root{
  --paper:var(--powierzchnia);--white:#fff;--karta:var(--powierzchnia);--bok:var(--powierzchnia);
  --ink:var(--tusz);--ink2:var(--tusz2);--ink3:var(--tusz3);
  --t1:var(--tusz);--t2:var(--tekst2);--t3:var(--tekst3);
  --gold:var(--akcent);--gold-m:var(--akcent);--gold-d:var(--akcent-d);--gold-l:var(--akcent-l);
  --line:var(--linia);--line2:var(--linia2);
  --risk:var(--koszt);--risk-l:var(--koszt-l);
  --fd:var(--f);
  --r-kontrolka:12px;--r-wewn:16px;--r-powierzchnia:24px;
}

/* ── PASEK ── */
.gn{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--linia);transition:box-shadow .32s}
.gn.odjechany{box-shadow:0 8px 24px -18px rgb(0 0 0/.18)}
.gn-in{max-width:1152px;margin:0 auto;padding-inline:24px;
  display:flex;align-items:center;gap:24px;height:68px;position:relative}
.gn-lg{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;
  font-family:var(--f);font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--tusz)}
.gn-lg svg{width:26px;height:26px;flex:0 0 auto}
.gn-l{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1}
.gn-l a,.gn-b{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;
  border:0;background:none;border-radius:99px;text-decoration:none;cursor:pointer;
  font-family:var(--f);font-size:14.5px;font-weight:500;color:var(--tekst2);
  transition:color .15s,background-color .15s}
.gn-l a:hover,.gn-b:hover,.gn-b[aria-expanded=true]{color:var(--tusz);background:var(--powierzchnia)}
.gn-l a:focus-visible,.gn-b:focus-visible,.gn-lg:focus-visible,.gn-r a:focus-visible,.gn-burger:focus-visible{
  outline:2px solid var(--akcent);outline-offset:2px}
.gn-nd{position:relative}
.gn-b svg{width:10px;height:6px;transition:transform .2s}
.gn-b[aria-expanded=true] svg{transform:rotate(180deg)}
.gn-p{display:none;position:absolute;top:calc(100% + 10px);left:0;width:300px;padding:8px;
  background:#fff;border:1px solid var(--linia);border-radius:16px;
  box-shadow:0 18px 40px -12px rgb(0 0 0/.14)}
.gn-p::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}   /* most nad szczeliną */
.gn-b[aria-expanded=true]+.gn-p{display:block}
.gn-p a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;
  width:100%;padding:9px 12px;border-radius:10px;color:var(--tusz);line-height:1.3}
.gn-p a small{font-size:12.5px;font-weight:400;color:var(--tekst3)}
.gn-p a:hover{background:var(--powierzchnia)}
.gn-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.gn-t{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:99px;
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--tekst2)}
.gn-t:hover{color:var(--tusz);background:var(--powierzchnia)}
.gn-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
  border-radius:99px;text-decoration:none;white-space:nowrap;
  font-size:14.5px;font-weight:500;background:var(--tusz);color:#fff;
  box-shadow:none;transition:background-color .2s}
.gn-cta:hover{background:var(--tusz3)}
/* Spacja przed „14 dni" ginie: w inline-flex tekst i <span> są osobnymi
   elementami, a spacja na początku elementu jest zjadana („Wypróbuj14 dni"). */
.gn-cta-d{margin-left:.3em}
.gn-burger{display:none;width:44px;height:44px;border:1px solid var(--linia);border-radius:50%;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.gn-burger span{display:block;width:16px;height:1.6px;border-radius:1px;background:var(--tusz);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.gn-burger[aria-expanded=true] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.gn-burger[aria-expanded=true] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

@media(max-width:980px){
  .gn-t{display:none}
  .gn-burger{display:inline-flex}
  .gn-l{position:absolute;left:0;right:0;top:68px;margin:0;display:grid;gap:0;
    padding:8px 24px 18px;background:#fff;border-bottom:1px solid var(--linia);
    box-shadow:0 24px 40px -28px rgb(0 0 0/.3);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1),visibility 0s .32s;max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain}
  .gn-l.otwarte{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .gn-l a,.gn-b{min-height:48px;width:100%;padding:0 4px;border-radius:0;font-size:16px;color:var(--tusz);
    border-bottom:1px solid var(--linia)}
  .gn-l a:hover,.gn-b:hover,.gn-b[aria-expanded=true]{background:none}
  .gn-b svg{margin-left:auto}
  .gn-p{position:static;width:auto;box-shadow:none;border:0;background:none;padding:0 0 6px 12px;min-width:0}
  .gn-p::before{display:none}
  .gn-p a{padding:8px 4px;border-radius:0}
  .gn-p a:hover{background:none}
  .gn-l .gn-mob{display:flex}
}
.gn-l .gn-mob{display:none}
@media(max-width:640px){
  .gn-in{padding-inline:16px;gap:10px}
  .gn-lg{font-size:17px}
  .gn-r{gap:6px}
  .gn-cta{padding:0 16px;font-size:13.5px}
  .gn-l{padding-inline:16px}
}
/* 320 px (najwęższe telefony, powiększony tekst): zostaje „Wypróbuj"
   (dopisek „14 dni" ukryty tylko wizualnie — czytnik ekranu nadal go czyta). */
@media(max-width:360px){
  .gn-r{gap:4px}
  .gn-cta{padding:0 12px}
  .gn-cta-d{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}

/* kotwice nie chowają się pod przyklejonym paskiem (68 px + zapas) */
[id]{scroll-margin-top:88px}

/* ── STOPKA ── */
.gs{background:#fff;color:var(--tusz);border-top:1px solid var(--linia);padding:64px 0 36px;font-size:14px}
.gs-in{max-width:1152px;margin:0 auto;padding-inline:24px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.gs .gn-lg{color:var(--tusz)}
.gs-o{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--tekst2);max-width:290px}
.gs h2{margin:0 0 14px;padding:0;font-family:var(--f);font-size:13px;font-weight:500;line-height:1.4;letter-spacing:0;
  text-transform:none;color:var(--tekst3);text-wrap:initial}
.gs ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.gs ul a,.gs ul .gs-ust{display:inline-flex;align-items:center;text-decoration:none;
  font-size:14px;line-height:1.45;color:var(--tekst2);transition:color .15s}
.gs ul .gs-ust{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.gs ul a:hover,.gs ul .gs-ust:hover{color:var(--tusz)}
.gs a:focus-visible,.gs .gs-ust:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.gs-d{grid-column:1 / -1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;
  padding-top:24px;margin:10px 0 0;border-top:1px solid var(--linia);
  font-size:13px;line-height:1.6;color:var(--tekst3)}
@media(max-width:960px){
  .gs-in{grid-template-columns:1fr 1fr}
  .gs-in>div:first-child{grid-column:1 / -1}
}
@media(max-width:640px){.gs-in{grid-template-columns:1fr;padding-inline:16px}}
/* na dotyku pozycje stopki mają 44 px wysokości (cel dotykowy) */
@media(pointer:coarse){.gs ul{gap:0}.gs ul a,.gs ul .gs-ust{min-height:44px}}

@media(prefers-reduced-motion:reduce){
  .gn,.gn-l,.gn-cta,.gn-burger span,.gn-b svg{transition:none!important}
}
@media print{.gn,.gs{display:none}}

/* ═══ TYPOGRAFIA I ŁAMANIE WIERSZY (13.10.2026) ═══════════════════════
   Jedna reguła dla wszystkich stron publicznych. Nagłówki łamią się
   równo (bez samotnego ostatniego słowa), akapity bez sierot. Twarde
   spacje po jednoliterowych słowach wstawia budowanie paczki
   (narzedzia/typografia.py), nie źródła. Przenoszenia wyrazów nie ma:
   w nagłówkach i krótkich blokach dzieliłoby je w złych miejscach. */
html{hyphens:manual;-webkit-hyphens:manual}
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
.gs h2{text-wrap:initial}
/* miara tekstu ciągłego: 60–75 znaków; interlinia 1,5–1,65 */
.dok :is(p,li),.pr-tresc :is(p,ul,ol){max-width:68ch}
.dok :is(p,li){line-height:1.65}
.dok p+p{margin-top:.9em}

/* ═══ CELE DOTYKOWE ≥ 44 × 44 PX NA URZĄDZENIACH DOTYKOWYCH ═══════════
   Tylko (pointer:coarse): gęstość na komputerze zostaje. Odnośniki w zdaniu
   dostają pionowy i poziomy margines wewnętrzny — obszar klikalny rośnie,
   a wiersz tekstu, jego odstępy i wygląd nie. Samodzielne odnośniki
   (spisy treści, listy, „… →”) są blokami o wysokości 44 px. */
@media (pointer:coarse){
  :is(p,li,dd,td,th,small,span,figcaption,details>div,.cen-jedn):not(:is(.spis,.pr-spis,.pr-bok,.f-wiecej,.mod-linki,.mod-ekr,.gs,.gn,nav) *,.f-wiecej,.mod-linki) a:not([class]){
    padding:15px 8px;margin-inline:-8px}
  .spis a,.pr-spis a,.pr-bok a,.f-wiecej a,.lnk,.mod-linki a,.mod-ekr a{
    display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-inline:0}
  .spis a,.pr-spis a,.pr-bok a{display:flex}
  .spis li,.pr-spis li{margin-bottom:0}
  .mod-linki{align-items:center}
  :root .przelacznik button{min-height:44px}
  :root .suwak{height:44px}
  .pole-w{height:46px}
  .pole-w input{align-self:stretch;height:auto;min-height:44px}
  .chk,.kt-zgoda{display:flex;align-items:center;min-height:44px;cursor:pointer}
}
/* iOS Safari przybliża stronę po fokusie w polu z tekstem mniejszym niż 16 px */
@media (max-width:900px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]),
  select,textarea{font-size:16px!important}
}