/* stawkilokalne.pl, warstwa wizualna.

   Wersja trzecia, z zatwierdzonego kierunku 3a „Pas + Rocznik".
   Wartosci pochodza wprost z makiety, nie z domyslu.

   Szesc decyzji, na ktorych stoi ten uklad:

   1. PAS         indygowy pas wejsciowy na cala szerokosc okna. Niesie
                  okruszki, nadtytul, nazwe jednostki, metryke i akapit wiodacy
   2. PLASKO      ponizej pasa nie ma pudelek. Hierarchie robia wlosowe linie
                  i typografia, nie ramki z tlem i promieniem
   3. DWA KROJE   Archivo na wszystko, co jest tekstem. IBM Plex Mono na
                  wszystko, co jest liczba, symbolem albo identyfikatorem
   4. LINIE       trzy grubosci: mocna #15181F nad sekcja, srednia #DCDFE6
                  pod grupa, cienka #ECEEF2 miedzy wierszami
   5. JEDEN KOLOR indygo #26307D. Zieleni uzywamy wylacznie na status
   6. SIATKA      tresc dwie trzecie, kolumna boczna jedna trzecia, odstep 56

   Czego tu nie ma i dlaczego: motywu ciemnego (serwis informacyjny jest
   jasny, decyzja 016), cieni, gradientow, promieni. */

:root {
  --font-tekst: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-dane: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* powierzchnie */
  --tlo:   #FCFCFD;
  --tlo-2: #F4F5F8;
  --tlo-3: #ECEEF3;

  /* linie, trzy grubosci znaczeniowe */
  --linia-mocna: #15181F;
  --linia-grupy: #C2C7D2;
  --linia:       #DDE0E7;
  --linia-pion:  #D2D6E0;

  --tekst:   #15181F;
  --tekst-2: #454B58;
  --tekst-3: #4F5563;

  --akcent:       #26307D;
  --akcent-mocny: #1A2258;
  --akcent-tlo:   #EEF0FA;

  /* pas wejsciowy */
  --pas-tlo:   #26307D;
  --pas-tekst: #EEF0FA;
  --pas-cichy: #C2C8EC;
  --pas-lead:  #DDE0F4;
  --pas-linia: #7982D0;

  --ok:    #1E6B34;
  --uwaga: #8A5A00;
  --alarm: #B32318;

  --dane-tlo:    #E7E9EE;
  --dane-srodek: #7079C2;
  --dane-mocny:  #26307D;

  --fs-xs:     0.8125rem;  /* 13 */
  --fs-sm:     0.875rem;   /* 14 */
  --fs-md:     0.9375rem;  /* 15 */
  --fs-base:   1.0625rem;  /* 17 */
  --fs-lead:   1.1875rem;  /* 19 */
  --fs-h3:     1.1875rem;  /* 19 */
  --fs-h2:     1.625rem;   /* 26 */
  --fs-h1:     2.75rem;    /* 44, strony bez pasa */
  --fs-h1-pas: 3.75rem;    /* 60, w pasie */
  --fs-liczba: 3rem;       /* 48 */

  --o1: 4px;  --o2: 8px;  --o3: 12px; --o4: 16px; --o5: 22px;
  --o6: 30px; --o7: 40px; --o8: 48px; --o9: 64px;

  --w-strona: 1180px;
  --w-tekst: 68ch;
  --bok: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid #FFDD00;
  outline-offset: 0;
  box-shadow: 0 0 0 5px #15181F;
}

.do-tresci {
  position: absolute;
  left: -9999px;
  background: var(--akcent);
  color: #fff;
  padding: 14px 22px;
  z-index: 30;
  font-weight: 600;
}
.do-tresci:focus { left: 16px; top: 16px; }

.wizualnie-ukryte {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ szkielet ============================ */

.strona { max-width: var(--w-strona); margin: 0 auto; padding: 0 var(--bok); }

/* ---- pasek gorny ---- */

/* Pasek nawigacji odcina sie od pasa wlasnym swiatlem i cienka linia.
   Sklejone bez przerwy czytaly sie jak jeden blok koloru. */
.masztowa { border-bottom: 1px solid var(--linia); }

.masztowa > .strona {
  display: flex;
  align-items: center;
  gap: var(--o3) var(--o6);
  padding-top: var(--o5);
  padding-bottom: var(--o5);
  flex-wrap: wrap;
}

/* Logotyp: jeden obrazek wektorowy, nie znak plus napis. Wysokosc podana
   w rem, zeby skalowal sie razem z pismem przy powiekszeniu strony. */
.marka { display: inline-flex; align-items: center; flex: none; }
.marka img { display: block; height: 1.875rem; width: auto; }

.masztowa nav {
  display: flex;
  gap: var(--o6);
  margin-left: auto;
  font-size: var(--fs-md);
  flex-wrap: wrap;
}

.masztowa nav a {
  color: var(--tekst);
  text-decoration: none;
  padding-bottom: 2px;
  white-space: nowrap;
}
.masztowa nav a:hover { box-shadow: inset 0 -2px 0 var(--linia-grupy); }
.masztowa nav a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--akcent);
}

/* ---- pas wejsciowy ---- */

.pas { background: var(--pas-tlo); color: var(--pas-tekst); }
.pas > .strona { padding-top: 26px; padding-bottom: 32px; }

.pas a { color: var(--pas-tekst); }
.pas .trop { color: var(--pas-cichy); margin-bottom: var(--o4); }
.pas .trop a { color: var(--pas-tekst); }

.pas h1 { color: #fff; font-size: var(--fs-h1-pas); }
.pas .lead { color: var(--pas-lead); margin: var(--o4) 0 0; }

/* Nadtytul musi przebic regule .naglowek-strony h1 .nad, ktora ma wyzsza
   swoistosc. Bez tego w pasie renderowal sie kolorem tekstu trzeciorzednego
   na indygo, czyli z kontrastem 1.31. */
.pas .naglowek-strony h1 .nad { color: var(--pas-cichy); }

/* ---- stopka ---- */

.stopka {
  border-top: 1px solid var(--linia-mocna);
  margin-top: var(--o9);
  padding: var(--o5) 0;
  font-size: var(--fs-xs);
  color: var(--tekst-3);
}

.stopka-kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--o6) var(--o7);
  margin-bottom: var(--o5);
}

.stopka-kolumny h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tekst);
  margin: 0 0 var(--o2);
  letter-spacing: 0;
}

.stopka-kolumny ul { list-style: none; padding: 0; margin: 0; }
.stopka-kolumny li { padding: 3px 0; }
.stopka-kolumny p { margin: 0; max-width: 34rem; line-height: 1.55; }

.stopka-dol {
  border-top: 1px solid var(--linia);
  padding-top: var(--o3);
  display: flex;
  justify-content: space-between;
  gap: var(--o5);
  flex-wrap: wrap;
  max-width: none;
  margin: 0;
}

/* ============================ typografia ============================ */

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--o3);
  color: var(--tekst);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); margin-top: var(--o6); }

p { max-width: var(--w-tekst); margin: 0 0 var(--o4); }

.lead { font-size: var(--fs-lead); line-height: 1.6; max-width: var(--w-tekst); }

a { color: var(--akcent); text-underline-offset: 3px; }
a:hover { color: var(--akcent-mocny); }

/* ---- okruszki ---- */

.trop { font-size: var(--fs-xs); color: var(--tekst-3); margin: 0 0 var(--o4); }
.trop a { color: var(--tekst-2); }

/* ---- naglowek strony ---- */

.naglowek-strony {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--o5);
  flex-wrap: wrap;
}

.naglowek-strony h1 { margin: 0; }
.naglowek-strony h1 .nad {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--tekst-3);
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: var(--o2);
}
.naglowek-strony h1 .rok { font-family: var(--font-dane); font-weight: 400; }

/* Metryka obok naglowka: pola rozdzielone pionowa kreska, jak w makiecie. */
.legitymacja {
  margin: 0;
  display: flex;
  font-size: 0.84375rem;   /* 13.5 */
  max-width: none;
  flex-wrap: wrap;
}
.legitymacja > div { padding: 0 var(--o5); border-right: 1px solid var(--pas-linia); }
.legitymacja > div:first-child { padding-left: 0; }
.legitymacja > div:last-child { padding-right: 0; border-right: 0; }
.legitymacja dt { color: var(--pas-cichy); }
.legitymacja dd { margin: 2px 0 0; font-weight: 600; }
.legitymacja .id { font-family: var(--font-dane); }

/* Poza pasem metryka jest szara, nie blada. */
/* Poza pasem metryka jest szara. Regule pisze sie przez <main>, wiec ma
   wyzsza swoistosc niz sama .legitymacja i wygrywa TAKZE w pasie, odkad pas
   siedzi w srodku <main>. Wersja pasowa musi wiec przebic ja liczba klas,
   a nie kolejnoscia. To druga taka pomylka w tym arkuszu: pierwsza dotyczyla
   nadtytulu i dawala kontrast 1,56 na indygo. */
main .legitymacja > div { border-right-color: var(--linia-grupy); }
main .legitymacja dt { color: var(--tekst-3); }

.pas .legitymacja > div { border-right-color: var(--pas-linia); }
.pas .legitymacja dt { color: var(--pas-cichy); }
.pas .legitymacja dd { color: #fff; }

/* ---- sekcje ---- */

.sekcja { margin-top: var(--o9); }
main > h2, .kolumna-glowna > h2, .kolumna-czytelna > h2, .sekcja > h2 {
  margin: var(--o9) 0 var(--o1);
}
main > h2 + p, .kolumna-glowna > h2 + p, .kolumna-czytelna > h2 + p, .sekcja > h2 + p {
  margin-top: var(--o3);
}
main > h3, .kolumna-czytelna > h3 { margin-top: var(--o6); }

.nadtytul { font-size: var(--fs-sm); color: var(--tekst-3); margin: 0 0 var(--o2); }

/* ============================ uklad ============================ */

.uklad {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: var(--o6);
}

/* PUŁAPKA SIATKI. Element siatki ma domyslnie minimalna szerokosc rowna
   swojej minimalnej tresci, wiec NIE kurczy sie ponizej najszerszego dziecka.
   Przez to kontener tabeli z overflow-x nie przewijal sie, tylko rozpychal
   kolumne, a cala strona na telefonie byla szersza od ekranu: 486 px przy
   oknie 375 px, z tekstem ucietym na prawej krawedzi.

   min-width: 0 przywraca elementowi siatki prawo do zwezenia sie, dzieki
   czemu przewijanie wraca tam, gdzie mialo byc, czyli do samej tabeli. */
.uklad > * { min-width: 0; }
.figury > * { min-width: 0; }

.kolumna-boczna { font-size: var(--fs-sm); min-width: 0; }
.kolumna-glowna { min-width: 0; }
.kolumna-czytelna { max-width: 62rem; padding-top: var(--o6); }

@media (max-width: 1023px) {
  .uklad { grid-template-columns: 1fr; gap: var(--o7); }
}

/* ============================ glowne liczby ============================ */

/* Trzy kolumny rozdzielone pionowa kreska, bez ramek. Kazda ma nad soba
   mocna linie: to ona buduje blok, nie tlo i nie obramowanie. */
.figury { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }

.figura { padding: 0 26px; border-left: 1px solid var(--linia-pion); }
.figura:first-child { padding-left: 0; border-left: 0; }
.figura:last-child { padding-right: 0; }

.figura .etykieta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--o2);
  font-size: 0.84375rem;   /* 13.5 */
  border-top: 1px solid var(--linia-mocna);
  padding-top: var(--o3);
  margin: 0;
  max-width: none;
  font-weight: 600;
  min-height: 3.3em;
  align-items: flex-start;
  line-height: 1.35;
}
.figura .etykieta .symbol {
  font-family: var(--font-dane);
  font-weight: 400;
  color: var(--tekst-3);
  white-space: nowrap;
  font-size: var(--fs-xs);
}

/* Kwota i jednostka w jednym wierszu, wyrownane do linii pisma. */
.figura .wiersz-liczby {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0 0;
  max-width: none;
}

.figura .wartosc {
  font-family: var(--font-dane);
  font-size: var(--fs-liczba);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.1;
  white-space: nowrap;
}
.figura .wartosc.brak {
  font-family: var(--font-tekst);
  font-size: 2.5rem;       /* 40 */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--akcent);
  line-height: 1.3;
  white-space: normal;
}
.figura .wiersz-liczby:has(.brak) { margin-top: var(--o3); }

.figura .wiersz-liczby .jednostka {
  font-size: 1.25rem;      /* 20 */
  color: var(--tekst-3);
  letter-spacing: 0;
  font-family: var(--font-dane);
}
/* Jednostka jako osobny wiersz: opis pod slowem zamiast kwoty oraz dluzsze
   podpisy na stronach zbiorczych, ktore nie zmieszcza sie obok liczby. */
.figura .jednostka.opis, .figura > .jednostka {
  display: block;
  font-size: var(--fs-xs);
  font-family: var(--font-tekst);
  color: var(--tekst-3);
  margin: var(--o1) 0 10px;
  line-height: 1.5;
  max-width: none;
}

.figura .iskra { margin: 6px 0 10px; }

.figura .kontekst {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tekst-2);
  margin: 0;
  max-width: none;
}

@media (max-width: 860px) {
  .figury { grid-template-columns: 1fr; }
  .figura { padding: 0 0 var(--o5); border-left: 0; }
}

/* ============================ wykresy ============================ */

.iskra { color: var(--tekst); display: block; }
.iskra .linia { stroke: currentColor; stroke-width: 1.6; fill: none; }
.iskra .kropka { fill: var(--akcent); }

.schodki, .rozklad { width: 100%; height: auto; display: block; max-width: 640px; }

.wykres-panel { margin: var(--o5) 0 0; }
.wykres-panel figcaption, .podpis-wykresu {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 10px;
  max-width: none;
}
.podpis-wykresu .cichy, .wykres-panel figcaption .cichy {
  font-weight: 400;
  color: var(--tekst-3);
}

.schodki .os { stroke: var(--linia-grupy); stroke-width: 1; }
.schodki .slupek { fill: var(--dane-srodek); }
.schodki .slupek-biezacy { fill: var(--dane-mocny); }
.schodki .linia-granicy, .rozklad .linia-granicy {
  stroke: var(--tekst); stroke-width: 1.5; stroke-dasharray: 3 2;
}
.schodki .podpis-granicy, .schodki .podpis-osi,
.rozklad .podpis-osi {
  font-family: var(--font-dane);
  font-size: 11.5px;
  fill: var(--tekst-3);
}
.rozklad .tlo-rozkladu { fill: var(--dane-tlo); }
.rozklad .srodek-rozkladu { fill: var(--dane-srodek); }
.rozklad .znacznik { stroke: var(--tekst); stroke-width: 1.5; stroke-dasharray: 3 2; }
.rozklad .pozycja-linia { stroke: var(--akcent); stroke-width: 4; }
.rozklad .pozycja { fill: var(--akcent); }
.rozklad .podpis-pozycji {
  font-family: var(--font-dane);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--akcent);
}

.zakres { display: block; }
.zakres .tor { fill: var(--dane-tlo); }
.zakres .pas { fill: var(--dane-srodek); }
.zakres .mediana { stroke: var(--akcent); stroke-width: 2; }

/* ============================ tabele ============================ */

.tabela-opakowanie { overflow-x: auto; margin: var(--o4) 0 var(--o3); }

table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }

caption {
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--tekst-3);
  padding: 0 0 var(--o2);
}

thead th {
  color: var(--tekst-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  border-bottom: 1px solid var(--linia-mocna);
  padding: 10px 10px 8px 0;
  text-align: left;
  white-space: nowrap;
}
thead th + th { padding-left: 10px; }
thead th.liczba { font-family: var(--font-tekst); }

td, tbody th {
  padding: 11px 10px;
  border-bottom: 1px solid var(--linia);
  vertical-align: baseline;
  text-align: left;
  font-weight: 400;
}
tbody th:first-child, td:first-child { padding-left: 0; }
tbody th:last-child, td:last-child { padding-right: 0; }

td.liczba, th.liczba {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-dane);
}
td.liczba.cichy, th.liczba.cichy { color: var(--tekst-3); }

/* Wiersz grupujacy jest podpisem, nie paskiem tla. */
tr.grupa th {
  padding: 18px 0 6px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--tekst);
  border-bottom: 1px solid var(--linia-grupy);
}

tr.wyrozniony th, tr.wyrozniony td { font-weight: 600; }

th.kat { font-weight: 400; }
th.kat-wariant { padding-left: 30px; color: var(--tekst-2); }
th.kat-brak, .faint { color: var(--tekst-3); }
.mut { color: var(--tekst-2); }
.cichy { color: var(--tekst-3); }
.drugorzedne {
  display: block;
  color: var(--tekst-3);
  font-size: var(--fs-xs);
  font-family: var(--font-tekst);
}
.nazwa-gminy { min-width: 190px; }

.pasek {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 6px;
  background: var(--dane-tlo);
  margin-right: var(--o2);
  overflow: hidden;
}
.pasek span { display: block; height: 100%; background: var(--dane-srodek); }
.pasek.pelny span { background: var(--dane-mocny); }
.udzial { font-size: var(--fs-xs); color: var(--tekst-2); font-family: var(--font-dane); }
.zakres-kol { width: 148px; }

/* ============================ zrodla ============================ */

.zrodlo-nr {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  color: var(--akcent);
  text-decoration: none;
  padding-left: 1px;
}
.zrodlo-nr:hover { text-decoration: underline; }
.pas .zrodlo-nr { color: #fff; }

.zrodla h2, .blok-statusu h2 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-3);
  border-top: 1px solid var(--linia-grupy);
  padding-top: var(--o3);
}
.kolumna-boczna > :first-child h2 { border-top-color: var(--linia-mocna); }

.zrodla { font-size: var(--fs-sm); margin-top: var(--o6); }
.zrodla ol { margin: 0; padding-left: 20px; line-height: 1.65; color: var(--tekst-2); }
.zrodla li { margin-bottom: var(--o2); }
.zrodla li a { word-break: break-word; }

.zrodla-dol { margin-top: var(--o9); max-width: 52rem; }

/* ============================ status ============================ */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--o2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--tekst);
}
.status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.status-warn::before  { background: var(--uwaga); }
.status-alert::before { background: var(--alarm); }

.blok-statusu { margin-bottom: var(--o6); }
.blok-statusu p { margin: var(--o2) 0 0; color: var(--tekst-3); line-height: 1.55; max-width: none; }
.blok-statusu ul { list-style: none; padding: 0; margin: 0; }
.blok-statusu li {
  display: flex;
  justify-content: space-between;
  gap: var(--o3);
  padding: 7px 0;
  border-bottom: 1px solid var(--linia);
  color: var(--tekst-3);
}
.blok-statusu li:last-child { border-bottom: 0; }
.blok-statusu li b { font-weight: 600; color: var(--tekst); text-align: right; font-family: var(--font-dane); }


.ostrzezenie {
  border-left: 3px solid var(--alarm);
  padding: var(--o1) 0 var(--o1) var(--o5);
  margin: 0 0 var(--o7);
  max-width: 52rem;
}
.ostrzezenie p { margin-bottom: var(--o2); max-width: none; }
.ostrzezenie p:last-child { margin-bottom: 0; color: var(--tekst-3); font-size: var(--fs-sm); }

.wynik-pusty {
  border-left: 3px solid var(--uwaga);
  padding: var(--o1) 0 var(--o1) var(--o5);
  margin: var(--o5) 0;
  max-width: 52rem;
}
.wynik-pusty p { max-width: none; }
.wynik-pusty p:last-child { margin-bottom: 0; color: var(--tekst-3); }

/* ============================ wyszukiwarka ============================ */

.szukajka { display: flex; gap: 0; max-width: 38rem; margin: var(--o5) 0 var(--o3); }

.pole-z-podpowiedziami { position: relative; flex: 1; min-width: 0; display: flex; }

.szukajka input[type="search"] {
  flex: 1;
  font: inherit;
  font-size: var(--fs-lead);
  padding: 17px var(--o4);
  border: 2px solid var(--linia-mocna);
  border-right: 0;
  background: #fff;
  color: var(--tekst);
  min-width: 0;
  border-radius: 0;
  appearance: none;
}
.szukajka input[type="search"]::placeholder { color: var(--tekst-3); }

.szukajka button {
  font: inherit;
  font-size: var(--fs-lead);
  font-weight: 700;
  padding: 17px var(--o6);
  border: 2px solid var(--akcent);
  background: var(--akcent);
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  flex: none;
}
.szukajka button:hover { background: var(--akcent-mocny); border-color: var(--akcent-mocny); }

/* W pasie pole odcina sie bialym obramowaniem, a przycisk odwraca barwy. */
.pas .szukajka input[type="search"] { border-color: #fff; }
.pas .szukajka button {
  background: #fff;
  color: var(--akcent);
  border-color: #fff;
  border-left: 2px solid var(--dane-srodek);
}
.pas .szukajka button:hover { background: var(--pas-lead); border-color: var(--pas-lead); }

/* ---- lista podpowiedzi ---- */

.podpowiedzi {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--tlo);
  border: 2px solid var(--linia-mocna);
  border-top: 0;
  max-height: 20rem;
  overflow-y: auto;
}
.podpowiedzi[hidden] { display: none; }

.podpowiedzi li { border-top: 1px solid var(--linia); }
.podpowiedzi li:first-child { border-top: 0; }

.podpowiedzi a {
  display: block;
  padding: 11px var(--o4);
  text-decoration: none;
  color: var(--tekst);
}
.podpowiedzi b {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
}
.podpowiedzi span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--tekst-3);
  line-height: 1.4;
}

/* Stan wybrany strzalkami i najechany mysza wygladaja tak samo: jedno
   wyroznienie, zeby nie dalo sie zobaczyc dwoch naraz. */
.podpowiedzi li[aria-selected="true"] { background: var(--akcent-tlo); }
.podpowiedzi li[aria-selected="true"] a { color: var(--akcent-mocny); }
.podpowiedzi li[aria-selected="true"] b { text-decoration: underline; }

/* ============================ listy ============================ */

.siatka-linkow {
  list-style: none;
  padding: 0;
  margin: var(--o4) 0 var(--o2);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 var(--o7);
}

.siatka-linkow li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--o3);
  padding: 10px 0;
  border-bottom: 1px solid var(--linia);
  font-size: var(--fs-md);
}
.siatka-linkow a { text-decoration: none; }
.siatka-linkow a:hover { text-decoration: underline; }
.siatka-linkow .kwota {
  color: var(--tekst-3);
  white-space: nowrap;
  font-family: var(--font-dane);
  font-size: var(--fs-sm);
}

.lista-dluga { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
.lista-dluga li { padding: 7px 0; }

.liczby-kluczowe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: var(--o5) 0;
}
.liczby-kluczowe > div { padding: var(--o3) var(--o5); border-left: 1px solid var(--linia-pion); }
.liczby-kluczowe > div:first-child { padding-left: 0; border-left: 0; }
.liczby-kluczowe .w {
  font-family: var(--font-dane);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  display: block;
  line-height: 1.2;
}
.liczby-kluczowe .k {
  font-size: var(--fs-sm);
  color: var(--tekst-3);
  display: block;
  margin-top: var(--o1);
  line-height: 1.4;
}

/* Kafle wejsciowe: bez ramek, hierarchia z mocnej linii u gory. */
.kafle {
  list-style: none;
  padding: 0;
  margin: var(--o6) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--o7);
}
.kafle li { border-top: 1px solid var(--linia-mocna); }
.kafle a { display: block; padding: var(--o3) 0 0; text-decoration: none; }
.kafle b {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.kafle a:hover b { color: var(--akcent); }
.kafle span { display: block; color: var(--tekst-2); font-size: var(--fs-sm); line-height: 1.55; }

.pary { margin: var(--o5) 0; max-width: 52rem; }
.pary dt { font-size: 1.0625rem; font-weight: 700; color: var(--tekst); margin-top: var(--o5); }
.pary dt:first-of-type { margin-top: 0; }
.pary dd { margin: var(--o1) 0 0; color: var(--tekst-2); max-width: var(--w-tekst); }

.drobne { font-size: var(--fs-sm); color: var(--tekst-3); max-width: 52rem; }
.figury + .drobne { margin-top: var(--o5); }
.pas .drobne { color: var(--pas-cichy); }

/* ============================ strona glowna ============================ */

.wstep { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: start; }
.wstep h1 { max-width: 15ch; margin-bottom: var(--o4); }
.wstep .lead { max-width: none; }
.wstep .drobne { margin-bottom: 0; }
.wstep-tresc { min-width: 0; }

.wstep-liczby { font-size: var(--fs-sm); }
.wstep-liczby h2 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pas-cichy);
  border-top: 1px solid var(--pas-linia);
  padding-top: var(--o3);
}
.wstep-liczby ul { list-style: none; padding: 0; margin: 0 0 var(--o3); }
.wstep-liczby li {
  display: flex;
  justify-content: space-between;
  gap: var(--o3);
  padding: 7px 0;
  border-bottom: 1px solid var(--pas-linia);
  color: var(--pas-cichy);
}
.wstep-liczby li:last-child { border-bottom: 0; }
.wstep-liczby li b { font-weight: 600; color: #fff; font-family: var(--font-dane); }
.wstep-liczby > p {
  margin: 0;
  color: var(--pas-cichy);
  font-size: var(--fs-xs);
  line-height: 1.5;
  max-width: none;
}

@media (max-width: 1023px) {
  .wstep { grid-template-columns: 1fr; gap: var(--o6); }
}

/* ============================ pytania ============================ */

/* Pytanie i odpowiedz, nie akordeon. Rozwijane bloki wymagaja skryptu albo
   znacznika details, ktory na wydruku chowa tresc, a tresc ma byc widoczna
   od razu: po to ludzie tu przychodza. */
.pytania { margin: var(--o5) 0 0; max-width: 52rem; }

.pytania dt {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tekst);
  margin-top: var(--o5);
  padding-top: var(--o3);
  border-top: 1px solid var(--linia);
}
.pytania dt:first-of-type { margin-top: 0; border-top: 1px solid var(--linia-mocna); }

.pytania dd {
  margin: var(--o2) 0 0;
  color: var(--tekst-2);
  max-width: var(--w-tekst);
}

/* ============================ kalkulator ============================ */

.kalkulator { margin: var(--o4) 0 var(--o5); max-width: 46rem; }
.kalkulator table { table-layout: auto; }
.kalkulator label { cursor: pointer; }

.kalkulator input[type="number"] {
  font: inherit;
  font-family: var(--font-dane);
  font-size: var(--fs-md);
  width: 6.5rem;
  padding: 7px var(--o2);
  text-align: right;
  border: 1px solid var(--linia-mocna);
  background: #fff;
  color: var(--tekst);
  border-radius: 0;
}
.kalkulator input[type="number"]::placeholder { color: var(--tekst-3); }

.kalkulator tfoot th {
  border-top: 1px solid var(--linia-mocna);
  border-bottom: 0;
  font-weight: 600;
  padding-top: var(--o3);
}
.kalkulator tfoot td {
  border-top: 1px solid var(--linia-mocna);
  border-bottom: 0;
  padding-top: var(--o3);
  font-family: var(--font-dane);
  font-size: var(--fs-lead);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.kalkulator-raty {
  margin: var(--o3) 0 0;
  font-size: var(--fs-sm);
  color: var(--tekst-2);
  border-left: 3px solid var(--akcent);
  padding-left: var(--o4);
  max-width: none;
}
.kalkulator-raty[hidden] { display: none; }

/* Zastrzezenie przy kalkulatorze ostrzega, ale nie krzyczy: to nie jest blad
   danych, tylko granica tego, co narzedzie potrafi policzyc. */
.ostrzezenie-lagodne { border-left-color: var(--uwaga); }
.ostrzezenie-lagodne p:last-child { color: var(--tekst-2); }

@media (max-width: 720px) {
  .kalkulator input[type="number"] { width: 5rem; }
}

/* ============================ druk ============================ */

@media print {
  :root {
    --tlo: #fff; --tlo-2: #fff; --tlo-3: #fff;
    --linia: #ddd; --linia-grupy: #bbb; --linia-mocna: #000; --linia-pion: #ddd;
    --tekst: #000; --tekst-2: #333; --tekst-3: #555;
    --akcent: #000; --akcent-tlo: #fff;
    --pas-tlo: #fff; --pas-tekst: #000; --pas-cichy: #555;
    --pas-lead: #333; --pas-linia: #bbb;
    --dane-tlo: #E6E6E6; --dane-srodek: #B4B4B4; --dane-mocny: #000;
    --fs-h1-pas: 2rem;
    --bok: 0;
  }
  .masztowa nav, .szukajka, .podpowiedzi, .do-tresci, .trop { display: none; }
  /* Kalkulator na papierze jest pustym formularzem, wiec nie drukujemy go. */
  #kalkulator { display: none; }
  .pas { border-bottom: 2px solid #000; }
  .pas h1 { color: #000; }
  body { font-size: 10pt; line-height: 1.45; }
  .uklad { display: block; }
  .kolumna-boczna { margin-top: 18pt; break-inside: avoid; }
  .figury, .liczby-kluczowe, .wykres-panel, .kafle { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  .zrodla li a::after { content: ' (' attr(href) ')'; font-size: 8pt; }
  .sekcja { margin-top: 18pt; }
}

/* ============================ waskie ekrany ============================ */

@media (max-width: 720px) {
  :root {
    --fs-h1-pas: 2.25rem; --fs-h1: 2rem; --fs-h2: 1.375rem;
    --fs-liczba: 2.5rem; --fs-lead: 1.0625rem; --bok: 18px;
  }
  .masztowa > .strona { gap: var(--o3); }
  .marka img { height: 1.625rem; }
  .masztowa nav { margin-left: 0; gap: var(--o4); font-size: var(--fs-sm); }
  .naglowek-strony { align-items: flex-start; }
  .legitymacja > div { padding: 0 var(--o4) 0 0; border-right: 0; }
  .liczby-kluczowe { grid-template-columns: 1fr; }
  .liczby-kluczowe > div { padding: var(--o3) 0; border-left: 0; border-top: 1px solid var(--linia); }
  .siatka-linkow, .lista-dluga { grid-template-columns: 1fr; }
  .kafle { grid-template-columns: 1fr; gap: var(--o5); }
  .stopka-kolumny { grid-template-columns: 1fr; }
  .szukajka { flex-wrap: wrap; }
  .pole-z-podpowiedziami { flex: 1 0 100%; }
  .szukajka input[type="search"] { border-right: 2px solid var(--linia-mocna); }
  .szukajka button { width: 100%; margin-top: var(--o2); }
  .pas .szukajka input[type="search"] { border-right-color: #fff; }
  .pas .szukajka button { border-left-width: 2px; }
  td, tbody th, thead th { padding: 9px 8px; }
  .figura .wartosc { white-space: normal; }
}