/*
  Nieruchomości odczarowane

  Kierunek: rejestr, ale czytelny. Świat, z którego pochodzą te dane,
  to ewidencja gruntów — stąd kolory z map katastralnych i liczby
  w foncie o stałej szerokości. Ale to ma być strona dla kupującego
  mieszkanie, nie operat, więc: miękkie krawędzie, powietrze, ciepły papier.

  Trzy kolory warstw są rozróżnialne także przy monochromatycznym druku
  i przy najczęstszych rodzajach daltonizmu (sprawdzone na deuteranopii).
*/

:root {
  /* papier i atrament */
  --papier:        #F6F5F1;
  --papier-2:      #FFFFFF;
  --papier-3:      #EDEBE4;
  --atrament:      #222A26;
  --atrament-2:    #5A625C;
  --atrament-3:    #8A918B;
  --kreska:        #DEDBD2;

  /* Paleta kontrastowa. Każda barwa ma inną JASNOŚĆ, nie tylko odcień —
     dzięki temu rozróżnialna także przy daltonizmie i w druku
     czarno-białym. Poprzednia (stal + zieleń) miała zbliżoną jasność
     i cienkie linie się zlewały. */
  --mieszkania:    #1B3A5C;   /* granat */
  --domy:       #E07A24;   /* pomarańcz */
  --dzialki:       #2E9E5B;   /* zieleń */
  --garaze:        #7B5EA8;   /* fiolet */
  --uzytkowe:      #B02E5A;   /* karmin */
  --lokale:        #1B3A5C;   /* zgodność wstecz */

  --linia-mieszkania: #1B3A5C;
  --linia-domy:    #E07A24;
  --linia-dzialki:    #2E9E5B;
  --linia-garaze:     #7B5EA8;
  --linia-uzytkowe:   #B02E5A;
  --linia-benzyna:    #1B3A5C;
  --linia-diesel:     #E07A24;
  --linia-lpg:        #2E9E5B;

  --uwaga:         #A63D2F;
  --uwaga-tlo:     #FBEFEC;

  --cien: 0 1px 2px rgba(34,42,38,.05), 0 8px 24px -12px rgba(34,42,38,.14);
  --promien: 10px;
  --szer-tresci: 720px;

  --tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --liczby: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:     #191D1B;
    --papier-2:   #212724;
    --papier-3:   #2A312D;
    --atrament:   #ECEFEA;
    --atrament-2: #A9B1AB;
    --atrament-3: #7C847E;
    --kreska:     #333B36;
    --mieszkania: #6FA3D4; --domy: #F0A050; --dzialki: #4FC47E;
    --garaze:     #A98FD0; --uzytkowe: #E0658F; --lokale: #6FA3D4;
    --linia-mieszkania: #6FA3D4; --linia-domy: #F0A050;
    --linia-dzialki: #4FC47E; --linia-garaze: #A98FD0;
    --linia-uzytkowe: #E0658F; --linia-benzyna: #6FA3D4;
    --linia-diesel: #F0A050; --linia-lpg: #4FC47E;
    --uwaga:      #E08876;
    --uwaga-tlo:  #33211E;
    --cien: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font: 400 17px/1.65 var(--tekst);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------- szkielet */

.pas { padding: 0 20px; }

/* Jedna szerokosc dla wszystkich sekcji. Wczesniej tekst byl w kolumnie
   720px, a wykresy w 1080px — lewe krawedzie sie nie pokrywaly i strona
   wygladala, jakby skladala sie z dwoch roznych czesci. Teraz kontener
   jest wspolny, a dlugosc wiersza ogranicza sam akapit. */
.tresc, .szeroko { max-width: 1080px; margin: 0 auto; }

.tresc p, .tresc ul, .tresc h2, .tresc h3,
.szeroko > p, .szeroko > h2 { max-width: 66ch; }

.tresc .lid, .szeroko .lid { max-width: 56ch; }

/* ------------------------------------------------------------ nagłówek */

.gora {
  border-bottom: 1px solid var(--kreska);
  background: var(--papier-2);
}

.gora-w {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.marka {
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--atrament);
  text-decoration: none;
}

.marka-nad {
  font: 500 12px/1 var(--liczby);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--atrament-3);
  display: block;
  margin-bottom: 3px;
}

.gora nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 15px;
}

.gora nav a { color: var(--atrament-2); text-decoration: none; }
.gora nav a:hover, .gora nav a:focus-visible { color: var(--atrament); }

/* --------------------------------------------------------------- hero */

/* Naglowek zajmowal pol ekranu na kazdej podstronie. Tresc zostaje
   w calosci — zmniejszamy tylko stopien pisma i odstepy, zeby wykres
   albo mapa byly widoczne bez przewijania. */
.hero { padding: 34px 20px 24px; }
.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.08;
  margin-bottom: 12px;
  max-width: 20ch;
}
.hero .lid { font-size: 1.02rem; line-height: 1.5; }
.hero .nadtytul { margin-bottom: 12px; }

/* Strona glowna dzialu — jeszcze zwiezlej */
.hero-zwiezle { padding: 28px 20px 20px; }
.hero-zwiezle h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 10px; }
.hero-zwiezle .lid { font-size: 1rem; }

.hero-w { max-width: 1080px; margin: 0 auto; }

.nadtytul {
  font: 500 13px/1 var(--liczby);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin: 0 0 18px;
}

h1 {
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 20ch;
}

.lid {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--atrament-2);
  max-width: 52ch;
  margin: 0;
}

/* --------------------------------------------------------- typografia */

h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -.022em;
  font-weight: 700;
  margin: 0 0 14px;
}

h3 {
  font-size: 1.14rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}

p { margin: 0 0 18px; }

a { color: var(--lokale); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 650; }

.liczba {
  font-family: var(--liczby);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

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

section { padding: 38px 0; }
/* Cienka linia miedzy sekcjami — nie pelna szerokosc, zeby nie
   sprawiala wrazenia konca strony. */
section + section { border-top: 1px solid var(--kreska); }
section + section::before { content: none; }

.sekcja-nad {
  font: 500 12px/1 var(--liczby);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin: 0 0 10px;
}

/* -------------------------------------------------------------- kafle */

.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.kafel {
  position: relative;
  background: var(--papier-2);
  border: 1px solid var(--kreska);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: var(--cien);
  overflow: hidden;
}

/* Akcent jako waski pasek u gory, nie gruba ramka — mniej ciezkie,
   a kolor nadal odroznia warstwe. */
.kafel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kreska);
}
.kafel--mieszkania::before { background: var(--mieszkania); }
.kafel--domy::before    { background: var(--domy); }
.kafel--dzialki::before    { background: var(--dzialki); }
.kafel--garaze::before     { background: var(--garaze); }
.kafel--uzytkowe::before   { background: var(--uzytkowe); }

.kafel--mieszkania { border-top-color: var(--mieszkania); }



.kafel-etykieta {
  font: 600 12.5px/1.3 var(--tekst);
  letter-spacing: .01em;
  color: var(--atrament-2);
  margin: 0 0 12px;
}

/* Liczba w foncie tekstowym, nie programistycznym — monospace przy
   duzym stopniu wyglada technicznie. Cyfry tabelaryczne zostaja,
   zeby kafle w rzedzie mialy rowna wysokosc. */
.kafel-wartosc {
  font-family: var(--tekst);
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

/* nazwa miesiaca jako wartosc — nie moze byc tak duza jak liczba */
.kafel-slowo { font-size: 1.7rem; letter-spacing: -.02em; }

.kafel-jedn {
  font-size: .92rem;
  color: var(--atrament-3);
  font-weight: 500;
  letter-spacing: 0;
}

.kafel-pod {
  font-size: .85rem;
  line-height: 1.45;
  color: var(--atrament-3);
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
  padding-top: 10px;
  border-top: 1px solid var(--kreska);
}

.pod-kaflami {
  font-size: .88rem;
  color: var(--atrament-3);
  margin-top: -8px;
}

/* -------------------------------------------------- magazyn (główna) */

.kafle-liczb {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

a.kafel-liczba {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}

a.kafel-liczba:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(34,42,38,.06), 0 14px 32px -14px rgba(34,42,38,.22);
}

a.kafel-liczba::before { background: var(--mieszkania); }

.kafel-liczba .kafel-wartosc {
  font-size: 2.7rem;
  color: var(--mieszkania);
  margin-bottom: 10px;
}

.miniatura {
  width: 100%;
  height: auto;
  display: block;
  margin: 4px 0 14px;
  max-height: 54px;
}

.mini-tlo { opacity: .14; }
.mini-mieszkania { fill: var(--mieszkania); }
.mini-diesel     { fill: var(--domy); }
.mini-dzialki    { fill: var(--dzialki); }
.mini-linia { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.mini-slupek { fill: var(--atrament-3); opacity: .38; }
.mini-baza { stroke: var(--atrament-3); stroke-width: 1; stroke-dasharray: 3 3; }
.mini-mocny  { fill: var(--mieszkania); opacity: 1; }

text.mini-podpis {
  font-family: var(--tekst);
  font-size: 10px;
  fill: var(--atrament-3);
}
text.mini-podpis-mocny { fill: var(--mieszkania); font-weight: 600; }

.kafel-tytul {
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 0 0 10px;
}

.kafel-tekst {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--atrament-2);
  margin: 0 0 14px;
}

.kafel-dzial {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--kreska);
}

a.kafel-liczba:hover .kafel-dzial { color: var(--mieszkania); }

.dzialy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  margin: 24px 0;
}

a.dzial {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--kreska);
  border-radius: 14px;
  background: var(--papier-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s;
}

a.dzial:hover { border-color: var(--atrament-3); }
/* Kafle analiz roznicujemy KOLOREM TLA wedlug dzialu — biale kafle
   zlewaly sie ze soba i nie dawaly zadnej wskazowki, czego dotycza. */
a.dzial { position: relative; overflow: hidden; }

/* Kafel z miniatura: rysunek na dole, tekst nad nim. Bez tego
   miniatura wciskala sie miedzy tytul a opis. */
a.dzial-z-mini {
  display: flex;
  flex-direction: column;
}

a.dzial-z-mini > p:last-of-type { margin-bottom: 12px; }

a.dzial-z-mini .miniatura {
  margin-top: auto;
  width: 100%;
  height: auto;
  opacity: .85;
}

a.dzial-z-mini:hover .miniatura { opacity: 1; }

a.dzial::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  opacity: .1;
  background: var(--mieszkania);
  transition: opacity .2s;
}

a.dzial:hover::after { opacity: .18; }

a.dzial[href*="paliw"]::after,
a.dzial[href*="ropa"]::after,
a.dzial[href*="diesel"]::after,
a.dzial[href*="tarcze"]::after,
a.dzial[href*="asymetria"]::after,
a.dzial[href*="bak"]::after,
a.dzial[href*="podatki"]::after { background: var(--budynki); }

a.dzial[href*="rachunek"]::after { background: var(--uzytkowe); }

a.dzial > * { position: relative; z-index: 1; }

.dzial-nad {
  font: 600 11px/1 var(--tekst);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin: 0 0 8px !important;
}

.pas-dalej { background: var(--papier-3); }

a.dzial h3 { margin: 0 0 8px; font-size: 1.15rem; }
a.dzial p { font-size: .93rem; color: var(--atrament-2); margin: 0 0 10px; }

.dzial-co {
  font-size: .82rem !important;
  color: var(--atrament-3) !important;
  margin: 0 !important;
  padding-top: 10px;
  border-top: 1px solid var(--kreska);
}

.uwaga-spis { margin-top: 24px; }

/* ------------------------------------------------------------ wykresy */

.rysunek {
  margin: 26px 0;
  padding: 0;
}

/* Wykresy sa mniejsze przez zmniejszone proporcje samego SVG,
   nie przez przycinanie. Limit wysokosci jest tylko zabezpieczeniem:
   scisniety SVG zmniejsza sie RAZEM Z TEKSTEM, wiec traci czytelnosc.
   Wysokie wykresy slupkowe (ranking 29 krajow) maja byc wysokie. */
.rysunek svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 600px;
}

.rysunek-mapa svg { max-height: 660px; }
.panel .rysunek svg { max-height: 320px; }

figcaption {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--atrament-2);
  margin-top: 12px;
  padding-left: 13px;
  border-left: 2px solid var(--kreska);
}

.mapa { background: transparent; }
.mapa-punkty circle { fill: var(--mieszkania); opacity: .5; }

.siatka { stroke: var(--kreska); stroke-width: 1; }
.linia { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.linia-mieszkania { stroke: var(--mieszkania); }
.linia-garaze { stroke: var(--garaze); }
.linia-uzytkowe { stroke: var(--uzytkowe); }
.linia-domy { stroke: var(--domy); }
.linia-dzialki { stroke: var(--dzialki); }
.punkt-mieszkania { fill: var(--mieszkania); }
.punkt-garaze { fill: var(--garaze); }
.punkt-uzytkowe { fill: var(--uzytkowe); }
.punkt-domy { fill: var(--domy); }
.punkt-dzialki { fill: var(--dzialki); }

/* Odstep miedzy cena nominalna a realna = inflacja.
   Kolor jest podany takze WPROST w pliku SVG — ta regula tylko go
   dostraja w trybie ciemnym. */
.pasmo-luki { fill: var(--uzytkowe); opacity: .16; }

.pasmo-relacji { fill: var(--budynki); opacity: .13; }

.pasmo-inflacji { fill: var(--atrament-3); fill-opacity: .22; }

.pasmo { opacity: .16; }
.pasmo-mieszkania { fill: var(--mieszkania); }
.pasmo-garaze { fill: var(--garaze); }
.pasmo-uzytkowe { fill: var(--uzytkowe); }
.pasmo-domy { fill: var(--domy); }
.pasmo-dzialki { fill: var(--dzialki); }

.kropka { opacity: .55; }
.kropka-mieszkania { fill: var(--mieszkania); }
.kropka-garaze { fill: var(--garaze); }
.kropka-uzytkowe { fill: var(--uzytkowe); }
.kropka-domy { fill: var(--domy); }
.kropka-dzialki { fill: var(--dzialki); }
.kropka:hover { opacity: 1; }

.linia-realna {
  fill: none;
  stroke: var(--atrament-2);
  stroke-width: 2.4;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
}

.linia-kraju {
  fill: none;
  stroke: var(--atrament-3);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

/* wykres pudełkowy */
.pudelko { opacity: .5; }
.pudelko-mieszkania { fill: var(--mieszkania); }
.pudelko-domy    { fill: var(--domy); }
.pudelko-dzialki    { fill: var(--dzialki); }
.pudelko-garaze     { fill: var(--garaze); }
.pudelko-uzytkowe   { fill: var(--uzytkowe); }

.was { stroke: var(--atrament-3); stroke-width: 1.4; }

.mediana-box {
  stroke: var(--atrament);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.kropka-odstajaca { fill: var(--uwaga); opacity: .6; }

.wykres-box { max-height: 170px; }

/* wodzik: cienka linia od punktu do rozsunietej etykiety */
.wodzik {
  fill: none;
  stroke-width: 1;
  opacity: .45;
}

.punkt-konca { stroke: var(--papier-2); stroke-width: 2; }

text.konc {
  font-family: var(--liczby);
  font-size: 12.5px;
  font-weight: 600;
}

/* brak danych na mapie — kreskowanie, nie jasny kolor.
   Jasnozielony i jasnoszary wygladaly prawie tak samo. */
.brak-tlo { fill: var(--papier-3); }
.brak-kreska { stroke: var(--atrament-3); stroke-width: 1.4; opacity: .5; }

.tlo-podpisu {
  fill: var(--papier-2);
  opacity: .88;
}

.baza-linia {
  stroke: var(--atrament);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

text.baza-opis {
  font-size: 11.5px;
  fill: var(--atrament-2);
}

/* pionowa kreska przy zmianie stawki podatkowej */
.kreska-zdarzenia {
  stroke: var(--atrament-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .7;
}

.linia-mediany {
  stroke: var(--atrament);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.slupek-mieszkania { fill: var(--mieszkania); }
.slupek-garaze { fill: var(--garaze); }
.slupek-uzytkowe { fill: var(--uzytkowe); }
.slupek-domy { fill: var(--domy); }
.slupek-dzialki { fill: var(--dzialki); }

.tlo-paska { fill: var(--papier-3); }
.wypelnienie-paska { fill: var(--mieszkania); }

/* Czcionka na wykresach: systemowa, nie monospace.
   Monospace ma sens w TABELACH, gdzie cyfry muszą stać w kolumnach —
   na wykresie wygląda technicznie i gorzej się czyta.
   Cyfry tabelaryczne zostają, żeby liczby nie skakały. */
text {
  font-family: var(--tekst);
  font-variant-numeric: tabular-nums;
}
text.os       { font-size: 12.5px; fill: var(--atrament-3); }
text.nazwa    { font-size: 13px; fill: var(--atrament); }
text.wartosc  { font-size: 13px; fill: var(--atrament); font-weight: 600; }
text.wartosc-duza { font-size: 19px; fill: var(--atrament); font-weight: 600; }
text.licznosc { font-size: 11.5px; fill: var(--atrament-3); }
text.konc     { font-size: 13px; font-weight: 600; }
text.jedn-osi { font-size: 11.5px; fill: var(--atrament-3);
                letter-spacing: .02em; }
text.kraj     { font-size: 12.5px; fill: var(--atrament); }
text.wartosc-mala { font-size: 12px; fill: var(--atrament-2); }
text.na-slupku { font-size: 12.5px; fill: #fff; font-weight: 600; }

/* ---------------------------------------------------------- kartogram */

/* Skala sekwencyjna. Kazdy odcien obejmuje tyle samo powiatow
   (kwantyle), wiec mapa pokazuje ROZKLAD, a nie jedna Warszawe
   na tle jednolitej reszty. */
:root {
  --k0: #E8F0E4;
  --k1: #C6DCBC;
  --k2: #9DC292;
  --k3: #6FA36C;
  --k4: #47814C;
  --k5: #275C34;
  --kx: #E4E2DB;   /* brak danych — kreskowanie, patrz .brak-kreska */
}

@media (prefers-color-scheme: dark) {
  :root {
    --k0: #22332A; --k1: #2E4A36; --k2: #3D6544;
    --k3: #4F8253; --k4: #67A166; --k5: #8CC183;
    --kx: #2A302C;
  }
}

.mapa-opak { margin: 26px 0; }

.przelacznik { position: absolute; opacity: 0; pointer-events: none; }

.mapa-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mapa-menu label {
  font: 500 13px/1 var(--liczby);
  padding: 8px 13px;
  border: 1px solid var(--kreska);
  border-radius: 100px;
  background: var(--papier-2);
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}

.mapa-menu label:hover { border-color: var(--atrament-3); }

.kartogram { width: 100%; height: auto; display: block; }

.kartogram path {
  fill: url(#brak);
  stroke: var(--papier);
  stroke-width: .7;
  transition: fill .12s;
}

.kartogram a:hover path,
.kartogram a:focus path {
  stroke: var(--atrament);
  stroke-width: 1.6;
  outline: none;
}

.legenda { display: none; flex-wrap: wrap; gap: 3px 14px; margin-top: 14px;
           align-items: center; }
.legenda .l-jedn {
  font: 500 11px/1 var(--liczby);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin-right: 4px;
}
.l-krok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 12px/1 var(--liczby);
  color: var(--atrament-2);
}
.l-krok i {
  width: 17px; height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.07);
}
.l-krok .k0 { background: var(--k0); }
.l-krok .k1 { background: var(--k1); }
.l-krok .k2 { background: var(--k2); }
.l-krok .k3 { background: var(--k3); }
.l-krok .k4 { background: var(--k4); }
.l-krok .k5 { background: var(--k5); }
.l-krok .kx {
  background: repeating-linear-gradient(45deg,
    var(--papier-3), var(--papier-3) 2px,
    var(--atrament-3) 2px, var(--atrament-3) 3px);
}

.rysunek-mapa { margin: 0; }

/* ---------------------------------------------------------- zakładki */

.zakladki { position: relative; }
.panel { display: none; }
.panel h2 { margin-top: 6px; }

/* Bez JavaScriptu i bez :checked (starsza przeglądarka) widać
   pierwszą warstwę — lepiej to niż pusta strona. */
.zakladki .panel:first-of-type { display: block; }
.zakladki .przelacznik:checked ~ .panel:first-of-type { display: none; }

.stronicowanie { position: relative; }
.paginacja { margin: 14px 0 10px; align-items: baseline; }
.paginacja label { padding: 5px 11px; font-size: 12px; }
.pag-opis {
  font: 500 11.5px/1 var(--liczby);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin-right: 6px;
}

.tab-sort { display: none; }
.zakladki .tab-sort:first-of-type { display: block; }
.zakladki .przelacznik:checked ~ .tab-sort:first-of-type { display: none; }

tr.wiersz-pl {
  background: var(--papier-3);
  font-weight: 650;
}
tr.wiersz-pl td:first-child::after {
  content: " ←";
  color: var(--atrament-3);
}



/* ------------------------------------------------- wykaz transakcji */

details.akty {
  border: 1px solid var(--kreska);
  border-radius: var(--promien);
  background: var(--papier-2);
  margin: 22px 0;
}

details.akty > summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

details.akty > summary::-webkit-details-marker { display: none; }

details.akty > summary::after {
  content: "pokaż";
  margin-left: auto;
  font: 400 12px/1 var(--liczby);
  color: var(--atrament-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}

details.akty[open] > summary::after { content: "ukryj"; }
details.akty > summary:hover { background: var(--papier-3); }

.akty-tresc { padding: 0 18px 16px; }
.akty-tresc table { font-size: .88rem; }
.akty-info {
  font-size: .87rem;
  color: var(--atrament-2);
  margin: 0 0 12px;
}

/* ------------------------------------------------------------ paliwa */

:root {
  --paliwo:  #7A9AB0;
  --podatek: #38505F;
  --kraj-slupek: #9EB4C2;
}

@media (prefers-color-scheme: dark) {
  :root { --paliwo: #5A7A90; --podatek: #A8C4D6; --kraj-slupek: #4A6070; }
}

/* skladniki ceny paliwa */
.sk-paliwo { fill: #7A9AB0; }
.sk-akcyza { fill: #38505F; }
.sk-vat    { fill: #B0722F; }
.sk-inne   { fill: #8C5670; }

.slupek-paliwo  { fill: var(--paliwo); }
.slupek-podatek { fill: var(--podatek); }
.slupek-kraj    { fill: var(--kraj-slupek); }
.slupek-wyrozniony { fill: var(--podatek); }

.linia-benzyna, .linia-euro95 { stroke: var(--linia-benzyna); }
.linia-diesel  { stroke: var(--linia-diesel); }
.linia-lpg     { stroke: var(--linia-lpg); }

text.na-slupku {
  font-family: var(--liczby);
  font-size: 12px;
  fill: #fff;
  font-weight: 600;
}
text.jedn-osi {
  font-family: var(--liczby);
  font-size: 11px;
  fill: var(--atrament-3);
  letter-spacing: .05em;
}

text.kraj { font-size: 12px; fill: var(--atrament); font-family: var(--tekst); }
text.wartosc-mala {
  font-family: var(--liczby);
  font-size: 11.5px;
  fill: var(--atrament-2);
}

/* --------------------------------------------------- dwie kolumny */

.dwie-kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px;
  margin: 24px 0;
}

.dwie-kolumny .kolumna h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kreska);
}

.dwie-kolumny .rysunek { margin: 12px 0 0; }
.dwie-kolumny .rysunek svg { max-height: 640px; }
.dwie-kolumny figcaption { font-size: .84rem; }

/* ------------------------------------------------------------- tabela */

.tabela-opak { overflow-x: auto; margin: 24px 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--kreska);
}

th {
  font: 500 11.5px/1.3 var(--liczby);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--atrament-3);
  white-space: nowrap;
}

td.num, th.num {
  text-align: right;
  font-family: var(--liczby);
  font-variant-numeric: tabular-nums;
}

tbody tr:hover { background: var(--papier-3); }

/* ------------------------------------------------------------ ostrzeżenie */

.uwaga {
  background: var(--uwaga-tlo);
  border-left: 3px solid var(--uwaga);
  border-radius: 0 var(--promien) var(--promien) 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: .96rem;
}

.uwaga p:last-child { margin-bottom: 0; }

.drobne { font-size: .8rem; color: var(--atrament-3); }

.zastrzezenie {
  font-size: .92rem;
  color: var(--atrament-2);
  padding-left: 14px;
  border-left: 2px solid var(--kreska);
}

.uwaga-tytul {
  font-weight: 650;
  color: var(--uwaga);
  margin: 0 0 6px;
}

/* ------------------------------------------------------------- spis */

.spis {
  columns: 3 208px;
  column-gap: 26px;
  margin: 22px 0;
  font-size: .95rem;
}

.spis a { display: block; padding: 3px 0; break-inside: avoid; }

.spis-woj {
  break-inside: avoid;
  margin-bottom: 18px;
}

.spis-woj h3 {
  font: 500 11.5px/1 var(--liczby);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--kreska);
}

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

footer {
  border-top: 1px solid var(--kreska);
  background: var(--papier-2);
  padding: 34px 20px 46px;
  font-size: .9rem;
  color: var(--atrament-2);
}

footer .tresc { max-width: 1080px; }
footer a { color: var(--atrament-2); }

.zrodlo {
  font-family: var(--liczby);
  font-size: .84rem;
  color: var(--atrament-3);
  margin-top: 14px;
}

/* ------------------------------------------------------------ dostępność */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lokale);
  outline-offset: 3px;
  border-radius: 2px;
}

.pomin {
  position: absolute;
  left: -9999px;
}
.pomin:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  background: var(--papier-2);
  padding: 10px 14px;
  border-radius: var(--promien);
  box-shadow: var(--cien);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 26px 20px 18px; }
  section { padding: 30px 0; }
  .spis { columns: 1; }
  .kafel-wartosc { font-size: 1.8rem; }
}



/* ------------------------------------------------- stopka: kolumny */

.stopka-kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px 40px;
  margin-bottom: 32px;
}

.stopka-kol h3 {
  font: 600 11px/1 var(--tekst);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--atrament-3);
  margin: 0 0 12px;
}

.stopka-kol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .9rem;
  line-height: 2;
}

/* Akapity w stopce dziedziczyly max-width 66ch z .tresc p, przez co
   kolumna rozpychala siatke. */
.stopka-kol p {
  margin: 0 0 10px;
  max-width: none;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--atrament-2);
}

.marka {
  display: flex;
  align-items: center;
  gap: 12px;
}

.marka-logo { flex: none; width: 52px; height: 40px; }

.marka-tekst { display: block; }

nav a.aktywny {
  color: var(--atrament);
  font-weight: 650;
  box-shadow: inset 0 -3px 0 var(--budynki);
}

nav a.aktywny:hover { box-shadow: inset 0 -3px 0 var(--atrament); }

/* ------------------------------------------------------- telefon */

@media (max-width: 640px) {
  /* Menu z pięcioma pozycjami nie mieści się w jednej linii —
     zawijamy zamiast ścinać. */
  nav {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .marka-logo {
    width: 40px;
    height: 31px;
  }

  /* Sygnał, że tabelę da się przewinąć w bok. Przy siedmiu kolumnach
     bez niego czytelnik nie wie, że dalej coś jest. */
  .tabela-opak {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--papier-2) 30%,
                      rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(255, 255, 255, 0),
                      var(--papier-2) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%,
                      rgba(27, 58, 92, .18), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%,
                      rgba(27, 58, 92, .18), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .kafle { grid-template-columns: 1fr; }

  .stopka-kolumny { gap: 22px; }
}

/* ------------------------------------------------------- wydruk */

@media print {
  nav, .stopka-rodzina, .stopka-info, .pas-dalej, .mapa-menu {
    display: none;
  }

  body { font-size: 11pt; }

  .pas { break-inside: avoid; }

  table { break-inside: auto; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}


/* przełączanie warstw kartogramu */
#w-mieszkania:checked ~ .rysunek .mieszkania0 { fill: var(--k0); }
#w-mieszkania:checked ~ .rysunek .mieszkania1 { fill: var(--k1); }
#w-mieszkania:checked ~ .rysunek .mieszkania2 { fill: var(--k2); }
#w-mieszkania:checked ~ .rysunek .mieszkania3 { fill: var(--k3); }
#w-mieszkania:checked ~ .rysunek .mieszkania4 { fill: var(--k4); }
#w-mieszkania:checked ~ .rysunek .mieszkania5 { fill: var(--k5); }
#w-mieszkania:checked ~ .rysunek .mieszkaniax { fill: url(#brak); }
#w-mieszkania:checked ~ .rysunek .leg-mieszkania { display: flex; }
#w-mieszkania:checked ~ .mapa-menu label[for='w-mieszkania'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-dzialki:checked ~ .rysunek .dzialki0 { fill: var(--k0); }
#w-dzialki:checked ~ .rysunek .dzialki1 { fill: var(--k1); }
#w-dzialki:checked ~ .rysunek .dzialki2 { fill: var(--k2); }
#w-dzialki:checked ~ .rysunek .dzialki3 { fill: var(--k3); }
#w-dzialki:checked ~ .rysunek .dzialki4 { fill: var(--k4); }
#w-dzialki:checked ~ .rysunek .dzialki5 { fill: var(--k5); }
#w-dzialki:checked ~ .rysunek .dzialkix { fill: url(#brak); }
#w-dzialki:checked ~ .rysunek .leg-dzialki { display: flex; }
#w-dzialki:checked ~ .mapa-menu label[for='w-dzialki'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-cena:checked ~ .rysunek .cena0 { fill: var(--k0); }
#w-cena:checked ~ .rysunek .cena1 { fill: var(--k1); }
#w-cena:checked ~ .rysunek .cena2 { fill: var(--k2); }
#w-cena:checked ~ .rysunek .cena3 { fill: var(--k3); }
#w-cena:checked ~ .rysunek .cena4 { fill: var(--k4); }
#w-cena:checked ~ .rysunek .cena5 { fill: var(--k5); }
#w-cena:checked ~ .rysunek .cenax { fill: url(#brak); }
#w-cena:checked ~ .rysunek .leg-cena { display: flex; }
#w-cena:checked ~ .mapa-menu label[for='w-cena'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-bez:checked ~ .rysunek .bez0 { fill: var(--k0); }
#w-bez:checked ~ .rysunek .bez1 { fill: var(--k1); }
#w-bez:checked ~ .rysunek .bez2 { fill: var(--k2); }
#w-bez:checked ~ .rysunek .bez3 { fill: var(--k3); }
#w-bez:checked ~ .rysunek .bez4 { fill: var(--k4); }
#w-bez:checked ~ .rysunek .bez5 { fill: var(--k5); }
#w-bez:checked ~ .rysunek .bezx { fill: url(#brak); }
#w-bez:checked ~ .rysunek .leg-bez { display: flex; }
#w-bez:checked ~ .mapa-menu label[for='w-bez'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-pod:checked ~ .rysunek .pod0 { fill: var(--k0); }
#w-pod:checked ~ .rysunek .pod1 { fill: var(--k1); }
#w-pod:checked ~ .rysunek .pod2 { fill: var(--k2); }
#w-pod:checked ~ .rysunek .pod3 { fill: var(--k3); }
#w-pod:checked ~ .rysunek .pod4 { fill: var(--k4); }
#w-pod:checked ~ .rysunek .pod5 { fill: var(--k5); }
#w-pod:checked ~ .rysunek .podx { fill: url(#brak); }
#w-pod:checked ~ .rysunek .leg-pod { display: flex; }
#w-pod:checked ~ .mapa-menu label[for='w-pod'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }

/* zakładki typów nieruchomości */
#t-mieszkania:checked ~ .pan-mieszkania { display: block; }
#t-mieszkania:checked ~ .mapa-menu label[for='t-mieszkania'] { background: var(--mieszkania); color: #fff; border-color: var(--mieszkania); }
#t-domy:checked ~ .pan-domy { display: block; }
#t-domy:checked ~ .mapa-menu label[for='t-domy'] { background: var(--domy); color: #fff; border-color: var(--domy); }
#t-dzialki:checked ~ .pan-dzialki { display: block; }
#t-dzialki:checked ~ .mapa-menu label[for='t-dzialki'] { background: var(--dzialki); color: #fff; border-color: var(--dzialki); }
#t-garaze:checked ~ .pan-garaze { display: block; }
#t-garaze:checked ~ .mapa-menu label[for='t-garaze'] { background: var(--garaze); color: #fff; border-color: var(--garaze); }
#t-uzytkowe:checked ~ .pan-uzytkowe { display: block; }
#t-uzytkowe:checked ~ .mapa-menu label[for='t-uzytkowe'] { background: var(--uzytkowe); color: #fff; border-color: var(--uzytkowe); }

/* paginacja tabel — reguły dla konkretnych stron
   są wystawiane lokalnie przy każdej tabeli */
.stronicowanie .strona { display: none; }


/* mapa podatkowa */
#w-akc:checked ~ .rysunek .akc0 { fill: var(--k0); }
#w-akc:checked ~ .rysunek .akc1 { fill: var(--k1); }
#w-akc:checked ~ .rysunek .akc2 { fill: var(--k2); }
#w-akc:checked ~ .rysunek .akc3 { fill: var(--k3); }
#w-akc:checked ~ .rysunek .akc4 { fill: var(--k4); }
#w-akc:checked ~ .rysunek .akc5 { fill: var(--k5); }
#w-vpr:checked ~ .rysunek .vpr0 { fill: var(--k0); }
#w-vpr:checked ~ .rysunek .vpr1 { fill: var(--k1); }
#w-vpr:checked ~ .rysunek .vpr2 { fill: var(--k2); }
#w-vpr:checked ~ .rysunek .vpr3 { fill: var(--k3); }
#w-vpr:checked ~ .rysunek .vpr4 { fill: var(--k4); }
#w-vpr:checked ~ .rysunek .vpr5 { fill: var(--k5); }
#w-udz:checked ~ .rysunek .udz0 { fill: var(--k0); }
#w-udz:checked ~ .rysunek .udz1 { fill: var(--k1); }
#w-udz:checked ~ .rysunek .udz2 { fill: var(--k2); }
#w-udz:checked ~ .rysunek .udz3 { fill: var(--k3); }
#w-udz:checked ~ .rysunek .udz4 { fill: var(--k4); }
#w-udz:checked ~ .rysunek .udz5 { fill: var(--k5); }
#w-akc:checked ~ .rysunek .akcx { fill: url(#brak); }
#w-akc:checked ~ .rysunek .leg-akc { display: flex; }
#w-akc:checked ~ .mapa-menu label[for='w-akc'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-vpr:checked ~ .rysunek .vprx { fill: url(#brak); }
#w-vpr:checked ~ .rysunek .leg-vpr { display: flex; }
#w-vpr:checked ~ .mapa-menu label[for='w-vpr'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-udz:checked ~ .rysunek .udzx { fill: url(#brak); }
#w-udz:checked ~ .rysunek .leg-udz { display: flex; }
#w-udz:checked ~ .mapa-menu label[for='w-udz'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }

/* sortowanie tabeli krajów */
#s-cena:checked ~ .tab-cena { display: block; }
#s-cena:checked ~ .mapa-menu label[for='s-cena'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#s-bez:checked ~ .tab-bez { display: block; }
#s-bez:checked ~ .mapa-menu label[for='s-bez'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#s-podatek:checked ~ .tab-podatek { display: block; }
#s-podatek:checked ~ .mapa-menu label[for='s-podatek'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }

/* kartogramy dodane w trakcie budowy */
#w-akc:checked ~ .rysunek .akc0 { fill: var(--k0); }
#w-akc:checked ~ .rysunek .akc1 { fill: var(--k1); }
#w-akc:checked ~ .rysunek .akc2 { fill: var(--k2); }
#w-akc:checked ~ .rysunek .akc3 { fill: var(--k3); }
#w-akc:checked ~ .rysunek .akc4 { fill: var(--k4); }
#w-akc:checked ~ .rysunek .akc5 { fill: var(--k5); }
#w-akc:checked ~ .rysunek .akcx { fill: url(#brak); }
#w-akc:checked ~ .rysunek .leg-akc { display: flex; }
#w-akc:checked ~ .mapa-menu label[for='w-akc'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-asym:checked ~ .rysunek .asym0 { fill: var(--k0); }
#w-asym:checked ~ .rysunek .asym1 { fill: var(--k1); }
#w-asym:checked ~ .rysunek .asym2 { fill: var(--k2); }
#w-asym:checked ~ .rysunek .asym3 { fill: var(--k3); }
#w-asym:checked ~ .rysunek .asym4 { fill: var(--k4); }
#w-asym:checked ~ .rysunek .asym5 { fill: var(--k5); }
#w-asym:checked ~ .rysunek .asymx { fill: url(#brak); }
#w-asym:checked ~ .rysunek .leg-asym { display: flex; }
#w-asym:checked ~ .mapa-menu label[for='w-asym'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-bak:checked ~ .rysunek .bak0 { fill: var(--k0); }
#w-bak:checked ~ .rysunek .bak1 { fill: var(--k1); }
#w-bak:checked ~ .rysunek .bak2 { fill: var(--k2); }
#w-bak:checked ~ .rysunek .bak3 { fill: var(--k3); }
#w-bak:checked ~ .rysunek .bak4 { fill: var(--k4); }
#w-bak:checked ~ .rysunek .bak5 { fill: var(--k5); }
#w-bak:checked ~ .rysunek .bakx { fill: url(#brak); }
#w-bak:checked ~ .rysunek .leg-bak { display: flex; }
#w-bak:checked ~ .mapa-menu label[for='w-bak'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-dopl:checked ~ .rysunek .dopl0 { fill: var(--k0); }
#w-dopl:checked ~ .rysunek .dopl1 { fill: var(--k1); }
#w-dopl:checked ~ .rysunek .dopl2 { fill: var(--k2); }
#w-dopl:checked ~ .rysunek .dopl3 { fill: var(--k3); }
#w-dopl:checked ~ .rysunek .dopl4 { fill: var(--k4); }
#w-dopl:checked ~ .rysunek .dopl5 { fill: var(--k5); }
#w-dopl:checked ~ .rysunek .doplx { fill: url(#brak); }
#w-dopl:checked ~ .rysunek .leg-dopl { display: flex; }
#w-dopl:checked ~ .mapa-menu label[for='w-dopl'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-epr:checked ~ .rysunek .epr0 { fill: var(--k0); }
#w-epr:checked ~ .rysunek .epr1 { fill: var(--k1); }
#w-epr:checked ~ .rysunek .epr2 { fill: var(--k2); }
#w-epr:checked ~ .rysunek .epr3 { fill: var(--k3); }
#w-epr:checked ~ .rysunek .epr4 { fill: var(--k4); }
#w-epr:checked ~ .rysunek .epr5 { fill: var(--k5); }
#w-epr:checked ~ .rysunek .eprx { fill: url(#brak); }
#w-epr:checked ~ .rysunek .leg-epr { display: flex; }
#w-epr:checked ~ .mapa-menu label[for='w-epr'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-eud:checked ~ .rysunek .eud0 { fill: var(--k0); }
#w-eud:checked ~ .rysunek .eud1 { fill: var(--k1); }
#w-eud:checked ~ .rysunek .eud2 { fill: var(--k2); }
#w-eud:checked ~ .rysunek .eud3 { fill: var(--k3); }
#w-eud:checked ~ .rysunek .eud4 { fill: var(--k4); }
#w-eud:checked ~ .rysunek .eud5 { fill: var(--k5); }
#w-eud:checked ~ .rysunek .eudx { fill: url(#brak); }
#w-eud:checked ~ .rysunek .leg-eud { display: flex; }
#w-eud:checked ~ .mapa-menu label[for='w-eud'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-gaz:checked ~ .rysunek .gaz0 { fill: var(--k0); }
#w-gaz:checked ~ .rysunek .gaz1 { fill: var(--k1); }
#w-gaz:checked ~ .rysunek .gaz2 { fill: var(--k2); }
#w-gaz:checked ~ .rysunek .gaz3 { fill: var(--k3); }
#w-gaz:checked ~ .rysunek .gaz4 { fill: var(--k4); }
#w-gaz:checked ~ .rysunek .gaz5 { fill: var(--k5); }
#w-gaz:checked ~ .rysunek .gazx { fill: url(#brak); }
#w-gaz:checked ~ .rysunek .leg-gaz { display: flex; }
#w-gaz:checked ~ .mapa-menu label[for='w-gaz'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-udz:checked ~ .rysunek .udz0 { fill: var(--k0); }
#w-udz:checked ~ .rysunek .udz1 { fill: var(--k1); }
#w-udz:checked ~ .rysunek .udz2 { fill: var(--k2); }
#w-udz:checked ~ .rysunek .udz3 { fill: var(--k3); }
#w-udz:checked ~ .rysunek .udz4 { fill: var(--k4); }
#w-udz:checked ~ .rysunek .udz5 { fill: var(--k5); }
#w-udz:checked ~ .rysunek .udzx { fill: url(#brak); }
#w-udz:checked ~ .rysunek .leg-udz { display: flex; }
#w-udz:checked ~ .mapa-menu label[for='w-udz'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
#w-vpr:checked ~ .rysunek .vpr0 { fill: var(--k0); }
#w-vpr:checked ~ .rysunek .vpr1 { fill: var(--k1); }
#w-vpr:checked ~ .rysunek .vpr2 { fill: var(--k2); }
#w-vpr:checked ~ .rysunek .vpr3 { fill: var(--k3); }
#w-vpr:checked ~ .rysunek .vpr4 { fill: var(--k4); }
#w-vpr:checked ~ .rysunek .vpr5 { fill: var(--k5); }
#w-vpr:checked ~ .rysunek .vprx { fill: url(#brak); }
#w-vpr:checked ~ .rysunek .leg-vpr { display: flex; }
#w-vpr:checked ~ .mapa-menu label[for='w-vpr'] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }