/* DentMargin — wspólny arkusz kalkulatorów.
   Przy przenoszeniu na WordPress ten plik staje się częścią stylu motywu. */
:root{
  --wrap:1180px; --gut:clamp(1.25rem,5vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--t1);font-family:var(--f);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.038em;line-height:1.05}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.w{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.kick{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-d)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#0f0d09;padding:.75rem 1.2rem;font-weight:600}
.skip:focus{left:0}

/* ——— detale: zaznaczenie w kolorze marki, kontrola sierot w akapitach ——— */
/* krycie .85, nie .32 — pod niska warstwa zloto zlewa sie z ciemnym tlem
   sekcji i zaznaczenie przestaje byc widoczne */
::selection{background:rgba(201,162,78,.85);color:var(--t1)}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* @kroje — naglowki szeryfowe, jak na stronie glownej */
/* Waga 600 i cisniejsze swiatlo, bo krój naglowkowy jest bezszeryfowy. */
h1,h2,.head h1{font-family:var(--fd);font-weight:600;letter-spacing:-.026em}
/* BEZ kursywy — patrz komentarz w fonty.css. */
h1 em,h2 em{font-style:normal;font-weight:500;color:var(--gold-m)}
/* Wielkie kwoty Interem z cyframi tabelarycznymi — szeryfowy zostaje
   tylko na nagłówkach. */
.big,.res-keep b{font-family:var(--f);font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:-.045em}

/* przyciski */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.6rem;border-radius:999px;font-size:.97rem;font-weight:600;border:1px solid transparent;cursor:pointer;transition:.18s;font-family:inherit}
.g{background:var(--gold);color:#100f0b;border-color:var(--gold)}
.g:hover{background:var(--gold-l)}
.o{border-color:var(--line);color:var(--t1);background:transparent}
.o:hover{border-color:var(--gold-d);color:var(--gold-d)}
/* Panel wynikow jest CIEMNY, a `pamiec.js` wstawia tam przycisk
   „Skopiuj wynik i odnosnik". Bez tej reguly przycisk mial ciemny
   tekst na ciemnym tle — zmierzone 1,07:1, czyli byl niewidoczny
   od dnia dodania. */
.res-main .o,.dark .o{border-color:var(--lineW2);color:var(--paper)}
.res-main .o:hover,.dark .o:hover{border-color:var(--gold-l);color:var(--gold-l);
  background:rgba(255,255,255,.06)}

/* nawigacja i nagłówek */
.nav{background:var(--ink);color:var(--paper)}
.nav-in{display:flex;align-items:center;height:64px;gap:1.5rem;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:.6rem;font-size:1.06rem;letter-spacing:-.045em;font-weight:600;color:var(--paper)}
.lg .mark{width:24px;height:24px;flex:0 0 auto;color:var(--paper)}
.lg i{font-style:normal;color:var(--gold)}
.nav-in .back{margin-left:auto;font-size:.92rem;color:#c8ccc8;padding:.6rem 0}
.nav-in .back:hover{color:var(--gold)}
.head{background:var(--ink);color:var(--paper);padding:clamp(2.4rem,5vw,4rem) 0 clamp(3.4rem,6vw,5rem)}
.head h1{font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:-.045em;max-width:28ch}
.head h1 em{font-style:normal;color:var(--gold)}
.head p{margin-top:1.1rem;color:#c6cac6;max-width:58ch;font-size:clamp(1rem,1.25vw,1.12rem)}

/* układ */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(1.6rem,3.5vw,3rem);align-items:start;margin-top:-2.6rem;padding-bottom:clamp(3.5rem,7vw,6rem)}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,2.4vw,2rem)}

/* ——— pola formularza ——— */
.fset{border:0;margin:0;padding:0}
.fset+.fset{margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid var(--line)}
legend{padding:0;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin-bottom:1.1rem}
.fld{margin-bottom:1.15rem}
.fld:last-child{margin-bottom:0}
label{display:block;font-size:.95rem;font-weight:600;margin-bottom:.45rem;color:var(--t1)}
label .hint{display:block;font-size:.81rem;color:var(--t2);font-weight:400;margin-top:.2rem;line-height:1.45}
.inp{position:relative;display:flex;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  transition:border-color .18s,background .18s,box-shadow .18s}
.inp:hover{border-color:rgba(10,12,13,.2)}
.inp:focus-within{background:var(--white);border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,.22)}
.inp input[type=number]{width:100%;font:inherit;font-size:1.14rem;font-weight:600;letter-spacing:-.01em;
  padding:.78rem .95rem;padding-right:3.6rem;border:0;background:transparent;color:var(--t1);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;text-align:left}
.inp input[type=number]:focus{outline:0}
.inp input[type=number]::-webkit-outer-spin-button,.inp input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp .unit{position:absolute;right:.85rem;font-size:.85rem;font-weight:600;color:var(--t2);pointer-events:none;
  background:rgba(10,12,13,.05);padding:.16rem .45rem;border-radius:6px}
select{width:100%;font:inherit;font-size:1.02rem;font-weight:500;padding:.78rem .95rem;padding-right:2.6rem;
  border:1px solid var(--line);border-radius:12px;background-color:var(--paper);color:var(--t1);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:border-color .18s,background-color .18s,box-shadow .18s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6663' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:15px}
select:hover{border-color:rgba(10,12,13,.2)}
select:focus{outline:0;background-color:var(--white);border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,.22)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;line-height:1.5;cursor:pointer;
  padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);transition:border-color .18s,background .18s}
.chk:hover{border-color:rgba(10,12,13,.2)}
.chk:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,.22)}
.chk input{margin:.18rem 0 0;width:18px;height:18px;accent-color:var(--gold-d);flex:0 0 auto;cursor:pointer}
.chk span{font-weight:600;color:var(--t1)}
.chk span small{display:block;color:var(--t2);font-size:.82rem;margin-top:.2rem;font-weight:400;line-height:1.45}
/* Przegladarka ukrywa tresc zwinietego <details> regula o wadze typu,
   wiec KAZDA autorska regula display na bezposrednim dziecku ja pobija.
   .row2{display:grid} robilo to od poczatku — sekcja nigdy sie nie zwijala.
   Przywracamy ukrywanie jawnie. */
.adv:not([open])>*:not(summary){display:none!important}
.adv summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--gold-d);list-style:none;display:inline-flex;gap:.45rem;align-items:center}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"+";font-size:1.15rem;line-height:1}
.adv[open] summary::before{content:"\2013"}
.adv[open] summary{margin-bottom:1.1rem}

/* wynik */
.res{position:sticky;top:1.4rem}
.res-main{background:var(--ink);color:var(--paper);border-radius:18px;padding:clamp(1.5rem,2.6vw,2.1rem)}
.res-main .lab{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.res-main .big{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.055em;line-height:1;margin-top:.5rem;font-weight:600}
.res-main .big.na{font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.03em;color:#c3c8c4}
.res-sub{margin-top:1rem;font-size:1rem;color:#cdd1cd;line-height:1.55}
.res-sub b{color:var(--paper)}
.res-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lineW);border:1px solid var(--lineW);border-radius:12px;overflow:hidden;margin-top:1.4rem}
.res-two>div{background:rgba(18,22,23,.5);padding:.9rem 1rem}
.res-two small{display:block;font-size:.75rem;color:#b4b9b5;line-height:1.35}
.res-two b{display:block;font-size:1.2rem;letter-spacing:-.035em;margin-top:.25rem}
.hi-box{margin-top:1.4rem;padding:1rem 1.1rem;border:1px solid rgba(201,162,78,.34);background:rgba(201,162,78,.1);border-radius:12px;font-size:.97rem;line-height:1.5}
.hi-box b{color:var(--gold);white-space:nowrap}
.hi-box.bad{border-color:rgba(196,73,90,.4);background:rgba(196,73,90,.12)}
.hi-box.bad b{color:#eb8a94}

/* rozbicie kosztów */
.drop h2{font-size:1.05rem;margin-bottom:.9rem}
.dr{display:grid;grid-template-columns:minmax(7rem,11rem) 1fr 5.6rem;gap:.7rem;align-items:center;font-size:.92rem;padding:.32rem 0}
.dr .t{color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr .track{height:9px;border-radius:5px;background:rgba(10,12,13,.07);overflow:hidden}
.dr .fill{display:block;height:100%;border-radius:5px;background:var(--gold-d)}
.dr .fill.hi{background:var(--risk)}
.dr .k{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.verdict{margin-top:1.1rem;font-size:.97rem;line-height:1.55;border-left:2px solid var(--gold);padding-left:1rem;color:var(--t2)}
.verdict b{color:var(--t1)}
.note{margin-top:1.1rem;font-size:.92rem;color:var(--t2);background:var(--paper);border-radius:11px;padding:.85rem 1rem;line-height:1.5}
.note b{color:var(--t1)}
.foot-cta{margin-top:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.foot-cta p{font-size:.86rem;color:var(--t3);max-width:24ch}
.dop{font-size:.85rem;color:var(--t3);margin-top:1.1rem;line-height:1.55}

/* metoda pod kalkulatorem — treść dla wyszukiwarek i dla ludzi */
.metoda{background:var(--white);border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0}
.metoda h2{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.metoda h3{font-size:1.12rem;margin-top:2rem}
.metoda p,.metoda li{font-size:1rem;color:var(--t2);line-height:1.7;max-width:70ch}
.metoda p{margin-top:.8rem}
.metoda ul{margin:.8rem 0 0;padding-left:1.2rem}
.metoda li{margin-bottom:.4rem}
.metoda strong{color:var(--t1);font-weight:600}
.wzor{margin-top:1rem;padding:1rem 1.2rem;background:var(--paper);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;font-size:.95rem;line-height:1.7;color:var(--t1)}

/* stopka */
.foot{background:var(--ink);color:#b0b5b1;padding:2.4rem 0;font-size:.88rem}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot a:hover{color:var(--gold)}
.foot-firma{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--lineW);font-size:.82rem;line-height:1.6;color:#9aa09c;max-width:70ch}

@media(max-width:940px){
  .grid{grid-template-columns:minmax(0,1fr);margin-top:-2rem}
  .res{position:static}
}
@media(max-width:520px){
  .row2,.res-two{grid-template-columns:1fr}
  .dr{grid-template-columns:6.5rem 1fr 5rem;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* @menu-start — blok generowany przez _menu.py, nie edytuj recznie */
/* ═══════════ MENU: 4 pozycje, dwie z lista (wzor Dandy / Overjet) ═══════════ */
/* Blok jest samowystarczalny — zawiera takze podstawowe reguly paska, zeby
   dzialal na stronie, ktora nie ma wlasnych. */
.nav{position:sticky;top:0;z-index:60;color:var(--paper);
/* JEDNOLITY. Wczesniej `rgba(...,.72)` z rozmyciem — nad jasna strona
   pasek stawal sie szara mgla, a zlote logo spadalo do 3,69:1. */
  background:var(--ink);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.solid{border-bottom-color:var(--lineW);box-shadow:0 10px 26px -22px rgba(28,26,22,.9)}
.nav-in{display:flex;align-items:center;height:64px;gap:1.2rem;flex-wrap:nowrap}
.lg{display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;
  font-size:1.06rem;letter-spacing:-.038em;font-weight:600;color:var(--paper)}
.lg .mark{width:23px;height:23px;flex:0 0 auto;color:var(--paper)}
.lg i{font-style:normal;color:var(--gold)}
.nav-l{display:flex;align-items:center;gap:.15rem;margin-left:1rem}
.nav-l>a,.nd-b{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .72rem;
  border-radius:10px;font-size:.94rem;font-weight:500;color:#d7dad6;background:transparent;
  border:0;cursor:pointer;font-family:inherit;line-height:1;white-space:nowrap;
  transition:color .18s,background .18s}
.nav-l>a:hover,.nd-b:hover{color:var(--paper);background:rgba(255,255,255,.07)}
.nav-l>a:focus-visible,.nd-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-l>a::after{display:none}          /* neutralizuje podkreslenie ze strony glownej */
.nd{position:relative}
.nd-b svg{width:10px;height:6px;flex:0 0 auto;transition:transform .2s ease}
.nd-b[aria-expanded=true]{color:var(--paper);background:rgba(255,255,255,.09)}
.nd-b[aria-expanded=true] svg{transform:rotate(180deg)}
.nd-p{position:absolute;top:calc(100% + .55rem);left:0;min-width:23rem;
  background:#fff;border:1px solid rgba(10,12,13,.09);border-radius:16px;padding:.45rem;
  box-shadow:0 26px 64px -20px rgba(8,10,11,.45),0 2px 8px rgba(8,10,11,.07);
  display:none;z-index:80}
.nd-b[aria-expanded=true]+.nd-p{display:block}
.nd-h{margin:.5rem .8rem .35rem;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a908b;font-weight:600}
.nd-p a{display:block;padding:.58rem .8rem;border-radius:11px;color:#0a0c0d;
  transition:background .16s}
.nd-p a::after{display:none}
.nd-p a:hover{background:#f5f3ed}
.nd-p a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.nd-p a b{display:block;font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.nd-p a span{display:block;font-size:.83rem;color:#5f6663;margin-top:.12rem;line-height:1.4}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:1rem;font-size:.93rem}
.nav-log{color:#c8ccc8;padding:.6rem 0}
.nav-log:hover{color:var(--gold)}
.nav-cta{padding:.58rem 1.15rem}
.nav-mob{display:none}                 /* logowanie i przycisk w menu telefonu */
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.13);
  border-radius:11px;background:transparent;cursor:pointer;align-items:center;
  justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:16px;height:1.5px;background:var(--paper);border-radius:2px;
  transition:transform .3s ease}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:980px){
  .nav-in{position:relative;flex-wrap:nowrap}
  .burger{display:inline-flex}
  .nav-l{position:absolute;left:0;right:0;
    top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#0b0e0f;border-bottom:1px solid rgba(255,255,255,.11);
    padding:.5rem var(--gut) 1.1rem;
    max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-l.open{display:flex}
  .nav-l>a,.nd-b{width:100%;justify-content:space-between;padding:.85rem .3rem;font-size:1rem}
  .nd-p{position:static;min-width:0;display:none;background:transparent;border:0;
    box-shadow:none;padding:0 0 .5rem .3rem}
  .nd-p a{color:#d7dad6}
  .nd-p a:hover{background:rgba(255,255,255,.06)}
  .nd-p a b{color:var(--paper)}
  .nd-p a span{color:#9aa09b}
  /* Na telefonie prawa strona paska znika w całości. Nie da się jej postawić
     pod rozwiniętym menu: obie warstwy stoją na top:100% i nachodziłyby na
     siebie, a wysokości menu nie znamy z góry. Logowanie i przycisk siedzą
     więc jako zwykłe wpisy na końcu listy. */
  .nav-r{display:none}
  .nav-mob{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem;
    padding-top:.9rem;border-top:1px solid rgba(255,255,255,.11)}
  .nav-mob .nav-log{text-align:center;padding:.8rem 0}
  .nav-mob .btn{justify-content:center;padding:.9rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .nd-b svg,.burger span,.nav-l>a,.nd-b,.nd-p a{transition:none!important}
}
/* @menu-end */

/* @wyrownanie — pola w jednym wierszu musza sie zgadzac w pionie.
   Etykieta z podpowiedzia jest wyzsza niz bez, wiec bez tego pole wejsciowe
   ladowalo w kazdej kolumnie na innej wysokosci. */
.grid>*,.card,.fset,.row2>*{min-width:0}
/* Odstepy w wierszu daje gap, nie margines. Bez tego drugie pole jest
   :last-child, traci margines dolny 1,15 rem, a przy align-items:end
   wyrownuje sie pudelko Z MARGINESEM — pierwsze pole siedzialo dokladnie
   18 px wyzej. */
.row2{align-items:end}
.row2>.fld{margin-bottom:0}
/* tabela bez opakowania przewijajacego rozpychala strone po dodaniu
   nowrap na komorkach — zmierzone 457 px przy oknie 390 */
.scrx{overflow-x:auto;max-width:100%}
/* Pole liczbowe ma 1,14 rem czcionki, lista rozwijana 1,02 rem — przy tym
   samym dopelnieniu daje to 56 px kontra 53 px. W jednym wierszu widac to
   jako 3 px rozjazdu, wiec wysokosc jest wyrownana jawnie. */
.inp,select{min-height:56px}
/* Przyklejamy TYLKO karte wyniku, nie cala kolumne.
   Przyklejenie elementu wyzszego od okna obcina mu gore i dol, bo nigdy
   nie da sie doczytac do konca — a prawa kolumna na /kalkulator/ ma
   ponad 1100 px. Czarna karta wyniku ma ~440 px i mieści sie zawsze.
   max-height z przewijaniem to zabezpieczenie na niskie okna: karta
   nigdy nie zostanie ucieta, w najgorszym razie przewinie sie w sobie. */
@media(min-width:941px){
  .res{position:static}
  .res-main{position:sticky;top:5.5rem;
    max-height:calc(100vh - 7rem);overflow-y:auto}
}
.inp{display:flex;align-items:center}
select{display:block}
.fld{display:flex;flex-direction:column;justify-content:flex-end}
.fld>label{flex:0 0 auto}
/* kwoty nigdy nie lamia sie na dwie linie */
.res-two b,.big,.tab td,.tab th{white-space:nowrap}
.tab td.nm,.tab th:first-child{white-space:normal}

/* ═══════════════════════════════════════════════════════════════════
   FORMULARZ ZWARTY — pola w trzech kolumnach

   Powod: 16 pol ulozonych po dwa w wierszu dawalo formularz wysokosci
   2110 px, przy pustej prawej polowie strony. Zmierzone przy 1220 px
   zawartosci: podzial 2fr/1fr daje formularzowi 717 px, czyli trzy
   kolumny po ~218 px, a wynikowi 359 px — tyle mu wystarcza.

   Sztuczka: .row2 dostaje display:contents, wiec jego dwa pola wchodza
   do siatki .fset zamiast byc jednym elementem. Dzieki temu wszystkie
   pola — te w wierszach i te osobne — ustawiaja sie w jednej siatce
   bez przepisywania znacznikow.

   Zabezpieczenie: .fld.ukryte jawnie ukryte, bo inaczej zaleznosc od
   kolejnosci regul decydowalaby o tym, czy pola warunkowe sa widoczne.
   ═══════════════════════════════════════════════════════════════════ */
.fld.ukryte{display:none!important}

@media(min-width:941px){
  .grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  /* JEDNA siatka na caly formularz, nie osobna na kazda sekcje.
     Przy szesciu osobnych siatkach dwupolowa sekcja zajmowala 169 px,
     a same legendy dokladaly szesc wiersz. Sekcje dostaja display:contents,
     wiec ich pola wchodza do siatki formularza, a legenda zostaje cienka
     belka na pelna szerokosc. Zmierzone: 1842 px -> ponizej 1100. */
  form.card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.7rem 1rem;align-items:end}
  .fset{display:contents}
  legend{grid-column:1/-1;width:100%;float:none;
    padding-top:.5rem;margin-bottom:-.2rem}
  /* TYLKO wiersze bezposrednio w formularzu. display:contents na wierszu
     wewnatrz zwinietego <details> usuwa pudelko i pola wymykaja sie
     ukrywaniu przez przegladarke — zwiniete „Ustawienia gabinetu"
     pokazywaly trzy pola. Zlapane pomiarem, nie okiem. */
  form.card>.fset>.row2,form.card>.row2{display:contents}
  .dop,form.card>p,.pelny,form.card>button,.reset,.pick,
  .wizyty-info,details.adv{grid-column:1/-1}
  /* Odstepy w siatce daje gap. Margines dolny pola psul wyrownanie
     wszedzie, gdzie pole bylo ostatnim dzieckiem sekcji (.fld:last-child
     ma margines 0) — dokladnie 18 px rozjazdu, ta sama pulapka co
     w wierszach dwupolowych. */
  form.card .fld{margin-bottom:0}
  /* Trzy pola ustawien siedzialy w zwijanym bloku i ukladaly sie jedno
     pod drugim na pelna szerokosc. Blok dostaje wlasna siatke. */
  /* TYLKO w stanie rozwinietym. display:grid na zwinietym <details>
     psuje ukrywanie tresci przez przegladarke — pola byly widoczne
     przy open=false. Zlapane pomiarem. */
  details.adv[open]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.7rem 1rem;align-items:end}
  details.adv[open]>summary{grid-column:1/-1}
  details.adv[open]>.row2{display:contents}
  /* listy z dlugimi opcjami i wybor pracy potrzebuja wiecej miejsca */
  .fld.szeroki{grid-column:span 2}
  .fld.pelny{grid-column:1/-1}
  /* wybor specjalizacji i pracy obok siebie, nie jedno pod drugim */
  .pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
  .row2>.fld{margin-bottom:0}
}
@media(min-width:1400px){
  .fset{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fld.szeroki{grid-column:span 2}
}

/* ═══ cele dotyku w stopce ═══
   Zmierzone na 390 px: odnosniki 17-22 px wysokosci, ustawione blisko siebie.
   Na telefonie trafia sie w sasiada. Na monitorze zostaje jak bylo — tam
   wskaznik jest dokladny i wieksze odstepy tylko rozpychalyby stopke. */
@media(max-width:700px){
  .foot-in{flex-direction:column;gap:.4rem}
  .foot-in span{display:flex;flex-wrap:wrap;gap:0 .2rem}
  .foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 .45rem}
  .foot .lgf{min-height:44px}
}

/* Widoczne tylko dla czytnika ekranu. Nie `display:none` ani `hidden`,
   bo tego czytniki nie odczytuja wcale. */
.tylko-czytnik{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}

/* ═══ pamiec.js: pasek pochodzenia liczb i przycisk kopiowania ═══ */
.pam-info{margin:0 0 1rem;padding:.7rem .9rem;border-radius:10px;
  background:rgba(201,162,78,.14);border:1px solid rgba(201,162,78,.4);
  font-size:.86rem;line-height:1.5;color:var(--t2)}
.pam-info b{color:var(--t1)}
.pam-czysc{background:none;border:0;padding:0;font:inherit;font-size:.86rem;
  color:var(--gold-d);text-decoration:underline;cursor:pointer}
.pam-czysc:hover{color:var(--t1)}
.pam-akcje{margin-top:1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.pam-stan{font-size:.82rem;color:var(--t2)}

/* ═══ kotwice pod przyklejonym paskiem ═══
   Pasek nawigacji stoi na position:sticky i ma 64 px. Bez tego marginesu
   KAZDY odnosnik wewnatrz strony ladowal z naglowkiem schowanym pod nim —
   9 kotwic na „Jak liczymy", 9 w poradniku, 12 w panelu. */
:target{scroll-margin-top:5rem}
h1,h2,h3,section[id],div[id]{scroll-margin-top:5rem}

/* ═══ przewijane tabele dostepne z klawiatury ═══
   Kontener z overflow nie przyjmuje fokusu, wiec klawiatura nie mogla
   przewinac tabeli szerszej niz ekran. */
.scr:focus-visible,.scrx:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Komunikat dla wylaczonego JavaScriptu. Bez niego kalkulator pokazywal
   „—" i nic wiecej. */
.bez-js{margin:0;padding:1rem clamp(1rem,4vw,2rem);background:#8a6115;color:#fff;
  font-size:.92rem;line-height:1.55}
.bez-js a{color:#fff;text-decoration:underline}