/* KALKULATOR WYPLATY - trzy kroki i paragon.

   Wlasciciel zglosil to jednym zdaniem ("калькулятор у нас дерьмовый,
   нужен премиум вариант") i pokazal, jak to robia inni: numerowane
   kroki, jeden pod drugim, a wynik na dole. Uklad jest wiec ten sam,
   a roznica siedzi w dwoch rzeczach:

   1. WYNIK JEST PARAGONEM, nie tabelka. Na gorze jedna liczba, po ktora
      czlowiek tu przyszedl ("na reke"), pod nia zlota kreska, a dalej
      kazde potracenie osobnym wierszem - tak wyglada pasek z wyplaty
      i kazdy to zna.
   2. WYBOR DWU- I TRZYPOZYCYJNY JEST PRZELACZNIKIEM, nie kolkami.
      "Brutto czy netto" i "godzina czy miesiac" to jedno dotkniecie,
      a nie mierzenie palcem w kolko o szerokosci 16 px.

   Kolory ida Z MOTYWU (--card, --ink, --line), bo to zwykla strona
   portalu - inaczej niz wizytowka, ktora oglada obcy na swoim telefonie. */

.kalk{max-width:660px;margin:0 auto;padding:0 16px 40px}

/* --------------------------------------------------------- KROK */
/* Numer w zlotym krazku stoi NA obwodce karty, w jej lewym gornym
   rogu - zeby kroki czytaly sie jako lista, a nie jako trzy osobne
   pudelka postawione obok siebie. */
.kk{position:relative;margin:22px 0 0;padding:20px 16px 18px;
  border:1px solid var(--line);border-radius:16px;background:var(--card)}
.kk-nr{position:absolute;left:14px;top:-13px;width:28px;height:28px;
  border-radius:50%;background:var(--gold);color:#14130F;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.kk-g{display:block;margin:0 0 14px 22px;
  font-family:var(--f-display);font-weight:700;font-size:17px}
.kk-p{margin:-8px 0 14px;color:var(--ink2);font-size:13px;line-height:1.5}

/* ------------------------------------------------ PRZELACZNIK */
/* Dwie albo trzy mozliwosci w jednej plance. Wybrana jest zlota -
   i to jest jedyny zloty punkt w kroku, wiec widac ja od razu. */
.kprz{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--paper)}
.kprz label{flex:1;min-width:0;position:relative;cursor:pointer}
.kprz input{position:absolute;opacity:0;width:1px;height:1px}
.kprz span{display:block;padding:11px 8px;text-align:center;
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;font-size:12px;color:var(--ink2);
  border-left:1px solid var(--line)}
.kprz label:first-child span{border-left:0}
.kprz input:checked+span{background:var(--gold);color:#14130F;border-color:transparent}
/* Obwodke od klawiatury zostawiamy - to jedyna droga dla kogos, kto nie
   uzywa palca. */
.kprz input:focus-visible+span{outline:2px solid var(--yl);outline-offset:-2px}

/* ------------------------------------------------------- KWOTA */
.kkw{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  padding:0 14px}
.kkw input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-family:var(--f-display);font-weight:800;font-size:26px;padding:12px 0}
.kkw input:focus{outline:0}
.kkw b{font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--ink2)}

.kgodz{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.kgodz[hidden]{display:none}
.kgodz label{color:var(--ink2);font-size:13px}
.kgodz input{width:84px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);padding:9px 11px;
  font-family:var(--f-display);font-weight:700;font-size:15px}

/* ----------------------------------------------- WLACZNIKI */
/* Kazdy wlacznik to WIERSZ z krotka nazwa i zdaniem pod nia: bez tego
   zdania nikt nie wie, co znaczy "wniosek o niepobieranie zaliczek",
   a zaznaczony na chybil trafil zmienia wynik o kilkaset zlotych. */
.kwl{display:block;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
/* WLASNY `display` BIJE REGULE PRZEGLADARKI `[hidden]{display:none}`,
   wiec bez tego wiersza wlacznik stoi na ekranie ZAWSZE - takze przy
   formie, do ktorej nie pasuje. Zlapal to zrzut ekranu: przy umowie
   o prace widac bylo "student do 26 lat" i "koszty autorskie". Ta sama
   grabie, co pod mikrofonem w rozmowie i pod komentarzami. */
.kwl[hidden]{display:none}
.kwl:first-of-type{border-top:0;padding-top:2px}
.kwl input{position:absolute;opacity:0;width:1px;height:1px}
.kwl-r{display:flex;align-items:flex-start;gap:11px}
.kwl-z{flex:0 0 22px;width:22px;height:22px;margin-top:1px;border-radius:7px;
  border:1.5px solid var(--gline2);background:var(--paper);
  display:grid;place-items:center}
.kwl-z svg{width:14px;height:14px;fill:none;stroke:#14130F;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.kwl input:checked+.kwl-r .kwl-z{background:var(--gold);border-color:transparent}
.kwl input:checked+.kwl-r .kwl-z svg{opacity:1}
.kwl input:focus-visible+.kwl-r .kwl-z{outline:2px solid var(--yl);outline-offset:2px}
.kwl-t b{display:block;font-weight:600;font-size:14.5px;line-height:1.35}
.kwl-t s{display:block;text-decoration:none;color:var(--ink2);
  font-size:12.5px;line-height:1.45;margin-top:2px}

/* --------------------------------------------------- PARAGON */
/* Zlota kreska u gory i pod glowna liczba - ta sama, co na karcie
   wizytowki. `--gold` jest GRADIENTEM, wiec `border-top` go nie
   przyjmie: kreska jest osobnym elementem z tlem. */
.kwyn{position:relative;margin:22px 0 0;padding:0;overflow:hidden;
  border:1px solid var(--gline2);border-radius:16px;background:var(--card)}
.kwyn-szew{height:3px;background:var(--gold)}
.kwyn-g{padding:20px 18px 16px;text-align:center}
.kwyn-lab{display:block;font-family:var(--f-cond);text-transform:uppercase;
  letter-spacing:.14em;font-weight:700;font-size:11px;color:var(--ink2)}
.kwyn-duza{display:block;margin:4px 0 0;font-family:var(--f-display);
  font-weight:800;font-size:40px;line-height:1.1;letter-spacing:-.01em}
.kwyn-h{display:block;margin:4px 0 0;color:var(--ink2);font-size:13.5px}

/* Dwie liczby obok siebie: brutto i to, ile to kosztuje firme. Ta druga
   jest w tym portalu wazna - fachowiec na budowie negocjuje wlasnie
   nia, bo firma mysli kosztem, a nie brutto. */
.kwyn-para{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line)}
.kwyn-para>div{padding:13px 16px;text-align:center}
.kwyn-para>div+div{border-left:1px solid var(--line)}
.kwyn-para b{display:block;margin-top:2px;font-family:var(--f-display);
  font-weight:800;font-size:19px}

.kwyn-lista{padding:4px 16px 8px;border-top:1px solid var(--line)}
.kwyn-w{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.kwyn-w:last-child{border-bottom:0}
.kwyn-w span{flex:1;min-width:0;color:var(--ink2);font-size:13.5px;line-height:1.4}
.kwyn-w b{font-family:var(--f-display);font-weight:700;font-size:14.5px;
  white-space:nowrap}
.kwyn-w.suma span{color:var(--ink);font-weight:600}
.kwyn-w.suma b{font-size:16px}

.kwyn-rok{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:13px 16px;border-top:1px solid var(--line);
  background:var(--gsoft)}
.kwyn-rok span{font-family:var(--f-cond);text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;font-size:11px;color:var(--ink2)}
.kwyn-rok b{font-family:var(--f-display);font-weight:800;font-size:17px}

/* Ostrzezenie mowi ZDANIEM, co jest nie tak - "ponizej minimalnej" bez
   liczby nie mowi nic. */
.kwyn-uwaga{margin:0;padding:12px 16px;border-top:1px solid var(--line);
  background:rgba(181,52,31,.1);color:var(--ink);font-size:13px;line-height:1.5}

.kalk-nota{margin:18px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.55}
.kalk-rok{display:block;margin:6px 0 0;font-family:var(--f-cond);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  font-size:11px;color:var(--ink2)}

/* Guzik jest potrzebny WYLACZNIE bez JavaScriptu - ze skryptem wynik
   liczy sie sam przy kazdej zmianie. Nie chowamy go z gory: guzik,
   ktorego nie ma przy wylaczonym skrypcie, znaczy kalkulator, ktory
   nie liczy nic. */
.kalk-licz{display:block;width:100%;margin:18px 0 0;padding:15px;border:0;
  border-radius:14px;background:var(--gold);color:#14130F;cursor:pointer;
  font-family:var(--f-display);font-weight:800;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase}
.kalk-licz[hidden]{display:none}

@media (max-width:420px){
  .kwyn-duza{font-size:34px}
  .kwyn-para{grid-template-columns:1fr}
  .kwyn-para>div+div{border-left:0;border-top:1px solid var(--line)}
}