/* ================================================================
   PULPIT KALKULATOROW
   ================================================================
   Jeden wlasciciel stylu dla calej powierzchni narzedziowej. Wczesniej
   reguly strony narzedziowej lezaly w `sekcje.css` obok sekcji strony
   glownej - przy szesciu narzedziach zamiast jednego to by sie rozjechalo.

   CZEGO TU NIE MA, swiadomie:
   - ZDJEC I FAKTURY pod formularzem. Zmierzone: wypelnienie pola rozni
     sie od karty o 1.10:1, wiec caly sygnal "tu sie wpisuje" niesie
     obwodka o kontrascie 3.79 wobec JEDNOLITEJ powierzchni. Obraz pod
     formularzem lamie prog 3:1 z WCAG 1.4.11.
   - ZAOKRAGLEN wiekszych niz 2 px. Naroznik jest prawie ostry celowo:
     to ma byc dokument i przyrzad, nie pastylka.
   - GRADIENTOW poza paskiem podzialu kwoty, gdzie kolor NIESIE DANE.
   ================================================================ */

/* ---- OTWARCIE STRONY NARZEDZIOWEJ ------------------------------ */
.piu-narzedzie__otwarcie {
  border-left: var(--piu-linia) solid var(--piu-akcent);
  padding-left: var(--piu-r4);
  margin-bottom: var(--piu-r6);
  max-width: 44rem;
}
.piu-narzedzie__tytul {
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t7);
  line-height: var(--piu-i-naglowki); font-weight: 600;
  margin: 0 0 var(--piu-r3); text-wrap: balance;
}
@media (min-width: 1024px) { .piu-narzedzie__tytul { font-size: var(--piu-t8); } }
.piu-narzedzie__lead { font-size: var(--piu-t4); color: var(--piu-tekst); margin: 0; }

/* ---- UKLAD: SZYNA + PANEL -------------------------------------- */
.piu-narzedzie__uklad { display: grid; grid-template-columns: 1fr; gap: var(--piu-r5); }
@media (min-width: 1024px) {
  .piu-narzedzie__uklad {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--piu-r6); align-items: start;
  }
}

/* ---- SZYNA PRZELACZANIA ---------------------------------------- */
/* Kazda pozycja jest prawdziwym odnosnikiem do wlasnego adresu, nie
   zakladka w JS - kazde narzedzie odpowiada na inne pytanie i musi dac
   sie zapisac, wyslac i znalezc w wyszukiwarce osobno.

   Na duzym ekranie szyna stoi pionowo i przykleja sie do gory. Ponizej
   1024 px zmienia sie w poziomy pasek przewijany - ta sama decyzja co
   przy nawigacji serwisu: czytelnik ma ZOBACZYC, jakie sa narzedzia,
   a nie ikone, ktora trzeba otworzyc. */
.piu-kalk__szyna > .piu-stempel { margin-bottom: var(--piu-r3); }
.piu-kalk__lista { margin: 0; padding: 0; list-style: none; }

@media (min-width: 1024px) {
  .piu-kalk__szyna {
    position: sticky;
    top: calc(var(--piu-naglowek-h, 72px) + var(--piu-r4));
    /* Wlos po prawej jest grzbietem teczki - aktywna zakladka siada na nim
       swoja kreska akcentu. */
    border-right: 1px solid var(--piu-obwodka);
    padding-right: var(--piu-r4);
  }
  .piu-kalk__pozycja + .piu-kalk__pozycja { border-top: 1px solid var(--piu-obwodka); }
  .piu-kalk__pozycja a {
    display: block; padding: var(--piu-r3) 0 var(--piu-r3) var(--piu-r3);
    border-left: var(--piu-linia) solid transparent;
    text-decoration: none; color: var(--piu-tekst);
    transition: border-color 120ms ease, background-color 120ms ease;
  }
  .piu-kalk__nazwa { display: block; font-size: var(--piu-t3); font-weight: 700; margin-bottom: 2px; }
  .piu-kalk__pytanie { display: block; font-size: var(--piu-t2); color: var(--piu-tekst-cichy); line-height: 1.4; }
  .piu-kalk__pozycja a:hover { background-color: var(--piu-powierzchnia); }
  .piu-kalk__pozycja a:hover .piu-kalk__nazwa { color: var(--piu-akcent); }
  .piu-kalk__pozycja--aktywna a,
  .piu-kalk__pozycja--aktywna a:hover {
    border-left-color: var(--piu-akcent);
    background-color: var(--piu-powierzchnia);
  }
  .piu-kalk__pozycja--aktywna .piu-kalk__nazwa { color: var(--piu-akcent); }
}

@media (max-width: 1023.98px) {
  .piu-kalk__lista {
    display: flex; gap: var(--piu-r2);
    overflow-x: auto; scrollbar-width: thin;
    /* Pasek dojezdza do krawedzi ekranu, zeby bylo widac, ze sie przewija. */
    margin-inline: calc(var(--piu-margines) * -1);
    padding: 0 var(--piu-margines) var(--piu-r2);
  }
  .piu-kalk__pozycja { flex: 0 0 auto; }
  .piu-kalk__pozycja a {
    display: block; padding: var(--piu-r3) var(--piu-r4);
    border: 1px solid var(--piu-obwodka); border-radius: var(--piu-naroznik);
    background-color: var(--piu-powierzchnia);
    text-decoration: none; color: var(--piu-tekst);
    font-size: var(--piu-t3); font-weight: 700; white-space: nowrap;
  }
  .piu-kalk__pytanie { display: none; }
  .piu-kalk__pozycja--aktywna a {
    border-color: var(--piu-akcent);
    box-shadow: inset 0 -3px 0 var(--piu-akcent);
    color: var(--piu-akcent);
  }
}

/* ---- PANEL NARZEDZIA ------------------------------------------- */
.piu-kalk__zadanie {
  font-size: var(--piu-t4); line-height: 1.45;
  margin: 0 0 var(--piu-r5); max-width: 40rem;
}

/* Formularz i wynik obok siebie dopiero od 1200 px. Zmierzone przy
   pojemniku 1280 px i szynie 240 px: przy 1024 px na kolumne wyniku
   zostaje 324 px, a pasek podzialu kwoty potrzebuje wiecej, zeby
   segmenty dalo sie odroznic. */
.piu-kalk__robocze { display: grid; grid-template-columns: 1fr; gap: var(--piu-r5); align-items: start; }
@media (min-width: 1200px) {
  .piu-kalk__robocze { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--piu-r5); }
}

/* ---- FORMULARZ ------------------------------------------------- */
.piu-kalkulator__formularz {
  display: grid; grid-template-columns: 1fr; gap: var(--piu-r4);
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r5);
  align-content: start;
}
/* PRZYKLEJA SIE FORMULARZ, NIE WYNIK - i to jest wybor zmierzony na
   macierzynskim, gdzie wynik jest dwa razy dluzszy od pol. Przy lepkim
   wyniku lewa kolumna stala pusta przez ~450 px przewijania. Przy lepkim
   formularzu pola sa pod reka przez caly czas czytania wyniku, a pustki
   nie ma na zadnej wysokosci.
   Element wyzszy od okna po prostu przewija sie normalnie - `sticky`
   degraduje sie sam, wiec dlugi formularz niczego nie psuje. */
@media (min-width: 1200px) {
  .piu-kalkulator__formularz {
    position: sticky;
    top: calc(var(--piu-naglowek-h, 72px) + var(--piu-r4));
  }
}
@media (min-width: 640px) and (max-width: 1199.98px) {
  .piu-kalkulator__formularz { grid-template-columns: 1fr 1fr; }
  .piu-pole--zgoda, .piu-kalk__grupa, .piu-kalk__akcje { grid-column: 1 / -1; }
}

.piu-kalk__grupa { border: 0; margin: 0; padding: 0; min-width: 0; }
.piu-kalk__grupa + .piu-kalk__grupa { border-top: 1px solid var(--piu-obwodka); padding-top: var(--piu-r4); }
.piu-kalk__grupa > .piu-stempel { margin: 0 0 var(--piu-r3); padding: 0; }
.piu-kalk__pola { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); }
@media (min-width: 640px) and (max-width: 1199.98px) {
  .piu-kalk__pola { grid-template-columns: 1fr 1fr; }
  .piu-kalk__pola .piu-pole--zgoda { grid-column: 1 / -1; }
}

/* Grupa zwijana: pola, ktore warto wystawic, ale ktore nie moga zasmiecac
   pierwszego wejrzenia. Ten sam znacznik <details> co akordeony we
   wpisach - dziala bez JS i otwiera sie klawiatura. */
.piu-kalk__grupa--zwijana { border-top: 1px solid var(--piu-obwodka); padding-top: var(--piu-r3); }
.piu-kalk__grupa--zwijana > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--piu-r2) var(--piu-r5) var(--piu-r2) 0;
  font-size: var(--piu-t2); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--piu-tekst-cichy);
}
.piu-kalk__grupa--zwijana > summary::-webkit-details-marker { display: none; }
.piu-kalk__grupa--zwijana > summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--piu-akcent); border-bottom: 2px solid var(--piu-akcent);
  transform: rotate(45deg); transition: transform 160ms ease;
}
.piu-kalk__grupa--zwijana[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.piu-kalk__grupa--zwijana > summary:focus-visible { outline: 2px solid var(--piu-akcent); outline-offset: 2px; }
.piu-kalk__grupa--zwijana .piu-kalk__pola { padding-top: var(--piu-r4); }

/* ---- POLA ------------------------------------------------------ */
.piu-pole { display: flex; flex-direction: column; min-width: 0; }
.piu-etykieta { font-size: var(--piu-t2); font-weight: 700; color: var(--piu-tekst); margin: 0 0 var(--piu-r2); }
.piu-pole__wejscie {
  min-height: 48px;
  padding: 0 var(--piu-r3);
  border: 1px solid var(--piu-obwodka-pola);   /* 3.79 wobec powierzchni - WCAG 1.4.11 */
  border-radius: var(--piu-naroznik);
  background-color: var(--piu-powierzchnia);
  color: var(--piu-tekst);
  font-family: var(--piu-f-tekstowa);
  font-size: var(--piu-t3);
  width: 100%;
}
.piu-pole__wejscie:focus-visible { outline: 2px solid var(--piu-akcent); outline-offset: 1px; }
.piu-pole__podpowiedz { font-size: var(--piu-t2); color: var(--piu-tekst-cichy); margin-top: var(--piu-r2); line-height: 1.4; }

/* Jednostka lezy W POLU, po prawej. Wpisujac kwote czytelnik widzi,
   w czym ja podaje, i nie musi tego szukac w etykiecie. */
.piu-pole__kwota { position: relative; display: block; }
.piu-pole__kwota .piu-pole__wejscie { padding-right: 3.25rem; font-variant-numeric: tabular-nums; }
.piu-pole__jednostka {
  position: absolute; right: var(--piu-r3); top: 50%; transform: translateY(-50%);
  font-size: var(--piu-t2); color: var(--piu-tekst-cichy); pointer-events: none;
}

/* Strzalka listy rysowana sama: natywna jest inna w kazdej przegladarce
   i w zadnej nie jest w kolorze tego serwisu. */
.piu-pole__wybor { position: relative; display: block; }
.piu-pole__wybor .piu-pole__wejscie {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
}
.piu-pole__wybor::after {
  content: ""; position: absolute; right: var(--piu-r3); top: 50%;
  width: 8px; height: 8px; margin-top: -7px;
  border-right: 2px solid var(--piu-akcent); border-bottom: 2px solid var(--piu-akcent);
  transform: rotate(45deg); pointer-events: none;
}

.piu-zgoda { display: flex; align-items: flex-start; gap: var(--piu-r3); min-height: 48px; cursor: pointer; }
.piu-zgoda input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--piu-akcent); flex: 0 0 auto; }
.piu-zgoda__etykieta { font-size: var(--piu-t3); line-height: 1.4; }

.piu-kalk__akcje { display: flex; align-items: center; gap: var(--piu-r4); flex-wrap: wrap; }
.piu-kalkulator__licz {
  min-height: 52px; padding: var(--piu-r3) var(--piu-r5);
  border: 0; border-radius: var(--piu-naroznik);
  /* TWARDA REGULA: guzik ma wlasny kontrast i nie dziedziczy koloru sekcji. */
  background-color: var(--piu-cta-jasny-wypelnienie);
  color: var(--piu-cta-jasny-etykieta);
  font-family: var(--piu-f-tekstowa); font-size: var(--piu-t3); font-weight: 700;
  cursor: pointer;
}
.piu-kalkulator__licz:hover { filter: brightness(1.12); }
.piu-kalkulator__licz:focus-visible { outline: 2px solid var(--piu-akcent); outline-offset: 3px; }
.piu-kalk__stan { font-size: var(--piu-t2); color: var(--piu-tekst-cichy); }

/* ---- WYNIK ----------------------------------------------------- */
/* Position: relative jest tu dla paska "licze" - patrz na koncu pliku. */
.piu-kalk__wynik { position: relative; }

.piu-wynik {
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-top: var(--piu-linia) solid var(--piu-akcent);
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r5);
}
.piu-wynik__liczba {
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t7);
  line-height: 1.05; color: var(--piu-akcent); margin: 0 0 var(--piu-r3);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
@media (min-width: 480px) { .piu-wynik__liczba { font-size: var(--piu-t8); } }
.piu-wynik__zdanie { font-size: var(--piu-t3); color: var(--piu-tekst); margin: 0; line-height: 1.5; }
.piu-wynik__rozbicie {
  display: grid; grid-template-columns: 1fr auto; gap: var(--piu-r2) var(--piu-r4);
  margin: 0; font-size: var(--piu-t3);
}
.piu-wynik__rozbicie dt { color: var(--piu-tekst-cichy); }
.piu-wynik__rozbicie dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.piu-wynik .piu-stempel { margin: var(--piu-r5) 0 var(--piu-r3); }
.piu-wynik .piu-stempel:first-child { margin-top: 0; }
.piu-wynik--blad { border-top-color: var(--piu-akcent); }
.piu-wynik--blad p:last-child { color: var(--piu-akcent); margin: 0; }

/* Pusty wynik: wlos przerywany mowi "tu jeszcze nic nie ma" bez krzyku
   i bez udawania, ze cos policzylismy. */
.piu-wynik--pusty {
  background-color: transparent;
  border: 1px dashed var(--piu-obwodka-pola);
  border-top: 1px dashed var(--piu-obwodka-pola);
}
.piu-wynik--pusty .piu-wynik__zdanie { color: var(--piu-tekst-cichy); }

/* Uwagi silnika: ostrzezenia i luki, ktore silnik zglasza razem z liczba.
   Stoja POD wynikiem, a nie w metryczce, bo dotycza TEJ odpowiedzi, a nie
   narzedzia w ogole - "wyczerpales limit dni" trzeba przeczytac teraz,
   nie przy okazji sprawdzania, na jaki rok liczymy. */
.piu-wynik__uwagi {
  margin: 0; padding: 0; list-style: none;
  font-size: var(--piu-t2); color: var(--piu-tekst-cichy);
}
.piu-wynik__uwagi li {
  position: relative; padding-left: var(--piu-r4); margin-bottom: var(--piu-r2);
  line-height: 1.45;
}
.piu-wynik__uwagi li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px; background-color: var(--piu-akcent);
}
.piu-wynik__uwagi li:last-child { margin-bottom: 0; }

/* ---- PASEK PODZIALU KWOTY -------------------------------------- */
/* Cala teza tego serwisu w jednym obrazku: widac, ile z kwoty z umowy
   zabieraja skladki i podatek. Kolor NIESIE DANE, wiec segmenty roznia
   sie takze JASNOSCIA - w druku i przy daltonizmie dalej sie je odroznia.
   Pasek nie ma podzialki i nie jest skala pomiarowa (segment ponizej 4%
   dostaje 4% szerokosci, zeby nie znikl do wlosa) - dokladne wartosci
   niesie legenda pod nim. */
.piu-pasek { margin: var(--piu-r5) 0 0; }
.piu-pasek__slupek {
  display: flex; height: 16px; overflow: hidden;
  border: 1px solid var(--piu-obwodka); border-radius: var(--piu-naroznik);
  background-color: var(--piu-tlo);
}
.piu-pasek__segment { display: block; height: 100%; }
.piu-pasek__segment + .piu-pasek__segment { border-left: 1px solid var(--piu-powierzchnia); }

/* Osiem rol, uporzadkowanych OD NAJCIEMNIEJSZEJ: to, co czytelnik
   dostaje do reki, jest najmocniejsze, a to, co odchodzi, blednie.
   Dzieki roznicy jasnosci segmenty odroznia sie takze w druku
   i przy daltonizmie, nie tylko po barwie. */
.piu-pasek__segment--netto,         .piu-pasek__znacznik--netto         { background-color: #7A2E4E; }
.piu-pasek__segment--wynagrodzenie, .piu-pasek__znacznik--wynagrodzenie { background-color: #7A2E4E; }
.piu-pasek__segment--dodatek,       .piu-pasek__znacznik--dodatek       { background-color: #A9707F; }
.piu-pasek__segment--spoleczne,     .piu-pasek__znacznik--spoleczne     { background-color: #A9707F; }
.piu-pasek__segment--dodatek-nocny, .piu-pasek__znacznik--dodatek-nocny { background-color: #C9A9AE; }
.piu-pasek__segment--zdrowotna,     .piu-pasek__znacznik--zdrowotna     { background-color: #C9A9AE; }
.piu-pasek__segment--podatek,       .piu-pasek__znacznik--podatek       { background-color: #8F7D78; }
.piu-pasek__segment--inne,          .piu-pasek__znacznik--inne          { background-color: #C9B9B4; }
/* Platnicy swiadczenia: pracodawca i ZUS. Osobne role, bo dwa segmenty
   w tym samym szarym nie niosly zadnej informacji poza dlugoscia. */
.piu-pasek__segment--platnik,       .piu-pasek__znacznik--platnik       { background-color: #7A2E4E; }
.piu-pasek__segment--zus,           .piu-pasek__znacznik--zus           { background-color: #C9A9AE; }

.piu-pasek__legenda { margin: var(--piu-r4) 0 0; padding: 0; list-style: none; }
.piu-pasek__pozycja {
  display: grid; grid-template-columns: 10px 1fr auto 3.5rem;
  align-items: baseline; gap: var(--piu-r3);
  padding: var(--piu-r2) 0; font-size: var(--piu-t2);
  border-top: 1px solid var(--piu-obwodka);
}
.piu-pasek__pozycja:first-child { border-top: 0; }
.piu-pasek__znacznik { width: 10px; height: 10px; border-radius: 1px; transform: translateY(1px); }
.piu-pasek__nazwa { color: var(--piu-tekst); }
.piu-pasek__kwota { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.piu-pasek__udzial { font-variant-numeric: tabular-nums; color: var(--piu-tekst-cichy); text-align: right; }

/* ---- PORONANIE TRZECH UMOW ------------------------------------- */
/* Wyroznik tego serwisu: ta sama kwota policzona trzema umowami obok
   siebie. Nikt naszej wielkosci tego nie ma, a to jest dokladnie
   pytanie, z ktorym czytelnik przychodzi. */
.piu-kalk__dodatek { margin-top: var(--piu-r6); }
.piu-porownanie__wstep { font-size: var(--piu-t3); color: var(--piu-tekst); margin: 0 0 var(--piu-r4); max-width: 44rem; }
.piu-porownanie { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); }
@media (min-width: 720px) { .piu-porownanie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.piu-porownanie__karta {
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-left: var(--piu-linia) solid transparent;
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r4);
}
.piu-porownanie__karta--wybrana { border-left-color: var(--piu-akcent); }
.piu-porownanie__karta .piu-stempel { margin: 0 0 var(--piu-r2); }
.piu-porownanie__liczba {
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t6);
  line-height: 1.1; color: var(--piu-akcent); margin: 0 0 var(--piu-r2);
  font-variant-numeric: tabular-nums;
}
.piu-porownanie__zdanie { font-size: var(--piu-t2); color: var(--piu-tekst-cichy); margin: 0; line-height: 1.45; }

/* ---- METRYCZKA POD NARZEDZIEM ---------------------------------- */
.piu-metryczka--kalkulator { margin-top: var(--piu-r6); max-width: 44rem; }
.piu-metryczka__lista { margin: 0 0 var(--piu-r3); padding-left: var(--piu-r4); }
.piu-metryczka__zastrzezenie { margin: 0; font-style: italic; }

/* ---- PRZELICZANIE W TLE ---------------------------------------- */
/* JavaScript tylko PRZYSPIESZA - podmienia gotowy HTML z tego samego
   kodu serwera. Nigdy nie liczy. Dlatego stan "licze" jest przygaszeniem
   wyniku, a nie zaslona: stara liczba zostaje czytelna, dopoki nie
   przyjdzie nowa. */
.piu-kalk__wynik[data-zajete="1"] { opacity: 0.55; transition: opacity 120ms ease; }
.piu-kalk__wynik[data-zajete="1"]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background-color: var(--piu-akcent);
  animation: piu-kalk-pasek 900ms ease-in-out infinite;
}
@keyframes piu-kalk-pasek {
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  100% { transform: scaleX(0);   transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .piu-kalk__wynik[data-zajete="1"]::before { animation: none; transform: scaleX(1); }
}

/* Tekst tlumaczacy dzialanie stoi POD narzedziem, nigdy nad nim:
   czytelnik przyszedl policzyc, a nie czytac wstep. */
.piu-narzedzie__objasnienie { margin-top: var(--piu-r7); }
/* Miare 608 px trzymaja DZIECI, a nie kontener - inaczej siatka powodow
   na hubie nie ma jak wyjsc poza kolumne prozy i cztery karty scisnely
   sie do 278 px, zostawiajac pusta polowe strony. */
.piu-narzedzie__objasnienie > * { max-width: var(--piu-proza); }
.piu-narzedzie__objasnienie h2 { font-size: var(--piu-t6); margin-top: var(--piu-r6); margin-bottom: var(--piu-r3); }
.piu-narzedzie__objasnienie h3 { font-size: var(--piu-t5); margin-top: var(--piu-r5); margin-bottom: var(--piu-r3); }

/* ---- HUB: SZESC NARZEDZI --------------------------------------- */
/* Kafle bez zdjec - to samo rozstrzygniecie co na stronie narzedziowej.
   Sygnalem jest tu pytanie, na ktore narzedzie odpowiada, a nie obrazek
   ludzi przy biurku. */
.piu-narzedzia { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); }
@media (min-width: 640px)  { .piu-narzedzia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .piu-narzedzia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.piu-narzedzia__kafel {
  display: flex; flex-direction: column;
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-left: var(--piu-linia) solid var(--piu-akcent);
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r4);
}
.piu-narzedzia__kafel .piu-stempel { margin: 0 0 var(--piu-r2); }
.piu-narzedzia__naglowek {
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t5);
  line-height: var(--piu-i-naglowki); font-weight: 600; margin: 0 0 var(--piu-r3);
}
.piu-narzedzia__naglowek a { color: inherit; text-decoration: none; }
.piu-narzedzia__naglowek a:hover { color: var(--piu-akcent); text-decoration: underline; }
.piu-narzedzia__zdanie { font-size: var(--piu-t3); color: var(--piu-tekst-cichy); margin: 0 0 var(--piu-r4); line-height: 1.5; }
.piu-narzedzia__akcja { margin: auto 0 0; font-size: var(--piu-t3); font-weight: 700; }
.piu-narzedzia__akcja a { color: var(--piu-akcent); text-decoration: none; }
.piu-narzedzia__akcja a:hover { text-decoration: underline; }

/* ---- HUB: CZTERY POWODY ROZBIEZNOSCI --------------------------- */
/* Cztery rownolegle przyczyny czytaja sie jak siatka, nie jak lista -
   a przy okazji nie zostawiaja pustej polowy strony pod kaflami,
   ktora zostaje po samej kolumnie prozy 608 px. */
.piu-narzedzie__objasnienie .piu-powody {
  display: grid; grid-template-columns: 1fr; gap: var(--piu-r5);
  max-width: none; margin: var(--piu-r5) 0 var(--piu-r7);
}
@media (min-width: 900px) {
  .piu-narzedzie__objasnienie .piu-powody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--piu-r6); }
}
.piu-powod { border-top: var(--piu-linia) solid var(--piu-akcent); padding-top: var(--piu-r4); }
.piu-narzedzie__objasnienie .piu-powod__naglowek {
  font-size: var(--piu-t5); margin: 0 0 var(--piu-r3); max-width: none;
}
.piu-narzedzie__objasnienie .piu-powod__tresc { margin: 0; max-width: none; font-size: var(--piu-t3); }
.piu-narzedzie__objasnienie .piu-narzedzia__lead { font-size: var(--piu-t4); max-width: 44rem; }