/* ═══════════════════════════════════════════════════════════════════════════
   FARMA — strony publiczne
   Adres pliku zawiera sygnaturę wersji (?v=…), więc cache może być roczny.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PALETA ─────────────────────────────────────────────────────────────────
   Niebieski i zieleń — kolory, które w Polsce znaczą „zdrowie" i „urząd",
   a nie „sklep". Niebieski prowadzi (odnośniki, przyciski, nagłówek),
   zieleń potwierdza (stany dobre, dane świeże, wskaźniki).

   DWA KOLORY, NIE SIEDEM. Portal ma czterdzieści typów stron i każdy kolejny
   kolor trzeba by na nich wszystkich utrzymać. Trzeci kolor jest tu tylko
   jeden i służy wyłącznie do mówienia „uwaga".

   Kontrast sprawdzany wobec tła, nie „na oko": każdy kolor tekstu trzyma się
   powyżej 4.5:1, bo portal danych publicznych czytany jest też na słabych
   ekranach i w słońcu. Wartości ozdobne (ramki, tła kart) mogą być jaśniejsze,
   bo nie niosą treści. */
:root {
  --tlo: #f5f9fb;
  --karta: #fff;
  --tekst: #13181d;
  --szary: #54606b;
  --kreska: #dde8ed;

  --akcent: #0f6d8c;          /* niebieski medyczny — odnośniki i działanie */
  --akcent-ciemny: #0a5570;
  --akcent-tlo: #e7f3f8;      /* delikatne tło pod akcentem */

  --zielen: #1c7a5b;          /* potwierdzenie, dane świeże, wartości dobre */
  --zielen-tlo: #e6f4ee;

  --alarm: #a63d2f;
  --alarm-tlo: #fbeeec;

  /* ── DWA KROJE OBOK PODSTAWOWEGO ──────────────────────────────────────────
     ŻADNEGO WEBFONTA. `font-src 'self'` w polityce bezpieczeństwa znaczy, że
     przeglądarka nie pobierze kroju z cudzego serwera — i dobrze, bo każdy
     webfont to jedno żądanie więcej i jedna rzecz więcej do wgrania FTP-em.
     Charakter robimy tym, co jest na każdym systemie:

     --serif  szeryfowy na NAGŁÓWKI. Jedyna rzecz, która odróżnia ten portal
              od setki paneli złożonych wyłącznie bezszeryfowym. Georgia ma
              polskie znaki wszędzie tam, gdzie w ogóle jest; gdzie jej nie
              ma (Android), system podstawia własny szeryfowy i efekt zostaje.

     --mono   maszynowy na LICZBY, kody i metryki źródeł. Cyfry o równej
              szerokości ustawiają się w kolumnach, a liczba wygląda na odczyt
              z przyrządu — czyli na to, czym naprawdę jest. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", monospace;

  --r: .5rem;
  --r-duzy: .9rem;
  --cien: 0 1px 2px rgba(16, 42, 56, .05), 0 4px 16px rgba(16, 42, 56, .05);
  --cien-mocny: 0 2px 6px rgba(16, 42, 56, .09), 0 12px 32px rgba(16, 42, 56, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.srodek { max-width: 54rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--akcent); }

/* ── Pasek górny ────────────────────────────────────────────────────────── */

header.pas {
  background: var(--karta);
  border-bottom: 1px solid var(--kreska);
  /* Pasek zostaje na ekranie przy przewijaniu: portal danych czyta się
     w dół długimi tabelami, a wyszukiwarka w pasku jest najczęstszą drogą
     do następnego pytania. `position: sticky` nie przesuwa układu, więc
     nie psuje wydruku ani stron bez skryptu. */
  position: sticky; top: 0; z-index: 50;
}
.pasek {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.5rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem;
}
.znak { font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--tekst); }

.szukaj-maly { display: flex; gap: .4rem; flex: 1; max-width: 26rem; margin-left: auto; }
.szukaj-maly input {
  flex: 1; min-width: 0; font: inherit; font-size: .94rem; padding: .45rem .7rem;
  border: 1px solid var(--kreska); border-radius: .35rem; background: #fff;
}
.szukaj-maly button {
  font: inherit; font-size: .94rem; padding: .45rem 1rem; border: 0;
  border-radius: .35rem; background: var(--akcent); color: #fff; cursor: pointer;
}

/* ── Okruszki ───────────────────────────────────────────────────────────── */

.okruszki { padding-top: 1rem; font-size: .88rem; color: var(--szary); }
.okruszki a { color: var(--szary); text-decoration: none; }
.okruszki a:hover { color: var(--akcent); }
.okruszki .sep { margin: 0 .4rem; opacity: .6; }

/* ── Treść ──────────────────────────────────────────────────────────────── */

main { padding-top: 1.25rem; padding-bottom: 4rem; }

h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2;
     letter-spacing: -.025em; margin: .75rem 0 .5rem; }
h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 2.5rem 0 .75rem; }

.lead { font-size: 1.08rem; color: var(--szary); max-width: 40rem; margin: .5rem 0 1.5rem; }
.drobne { font-size: .88rem; color: var(--szary); max-width: 42rem; }

/* ── Karty z liczbami ───────────────────────────────────────────────────── */

.karty {
  display: grid; gap: .75rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.karta-dana {
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: 1rem 1.1rem;
}
.karta-dana .etykieta {
  color: var(--szary); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .4rem;
}
.karta-dana .wartosc {
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
}
.karta-dana .wartosc span { font-size: .95rem; font-weight: 400; color: var(--szary); }
.karta-dana .zmiana { font-size: .88rem; margin-top: .25rem; }
.karta-dana .zmiana.rosnie { color: var(--alarm); }
.karta-dana .zmiana.spada { color: var(--akcent); }
.karta-dana .zrodlo {
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--kreska);
  font-size: .78rem; color: var(--szary);
}

/* Poziom pewności — ta sama forma przy każdej liczbie w portalu. */
.pewnosc {
  display: inline-block; padding: 0 .35rem; border-radius: .25rem;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.pewnosc-wysoka  { background: #e8f2ec; color: #245c3f; }
.pewnosc-srednia { background: #fdf4e3; color: #7a5406; }
.pewnosc-niska   { background: #fbeae7; color: #8f3327; }

/* ── Tabele danych ──────────────────────────────────────────────────────── */

table.dane {
  width: 100%; border-collapse: collapse; background: var(--karta);
  border: 1px solid var(--kreska); border-radius: var(--r); overflow: hidden;
}
table.dane th, table.dane td {
  padding: .6rem .9rem; text-align: left; border-bottom: 1px solid var(--kreska);
  vertical-align: top; font-weight: 400;
}
table.dane th { color: var(--szary); width: 40%; }
table.dane tr:last-child th, table.dane tr:last-child td { border-bottom: 0; }

/* ── Wykres słupkowy (bez JavaScriptu) ──────────────────────────────────── */

.wykres {
  display: flex; gap: .5rem; align-items: flex-end; height: 12rem;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: 1rem; overflow-x: auto;
}
.slupek { flex: 1; min-width: 3rem; display: flex; flex-direction: column;
          justify-content: flex-end; align-items: center; height: 100%; }
.slupek .kreska {
  width: 100%; max-width: 3.5rem; background: var(--akcent);
  border-radius: .25rem .25rem 0 0; min-height: .5rem;
}
.slupek .wartosc-slupka { font-size: .74rem; color: var(--szary); margin-top: .3rem; }
.slupek .podpis { font-size: .8rem; color: var(--szary); margin-top: .1rem; }

/* ── Wnioski ────────────────────────────────────────────────────────────── */

ul.wnioski { padding-left: 1.1rem; max-width: 42rem; }
ul.wnioski li { margin: .5rem 0; }

/* ── Brak danych ────────────────────────────────────────────────────────── */

.brak-danych {
  background: var(--karta); border: 1px solid var(--kreska);
  border-left: 3px solid var(--szary); border-radius: var(--r);
  padding: 1.25rem 1.4rem; margin: 1.5rem 0;
}
.brak-danych h2 { margin-top: 0; font-size: 1.05rem; }
.brak-danych p { color: var(--szary); max-width: 40rem; }

/* ── Wyniki wyszukiwania ────────────────────────────────────────────────── */

ul.wyniki { list-style: none; padding: 0; }
ul.wyniki li {
  padding: .7rem 0; border-bottom: 1px solid var(--kreska);
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
}
ul.wyniki a { font-size: 1.05rem; text-decoration: none; }
ul.wyniki a:hover { text-decoration: underline; }

/* ── Zgłoszenie błędu ───────────────────────────────────────────────────── */

.zglos {
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: 1.25rem 1.4rem; margin: 2.5rem 0 0;
}
.zglos h2 { margin-top: 0; }
.zglos textarea, .zglos input[type=email] {
  width: 100%; font: inherit; font-size: .95rem; padding: .55rem .7rem;
  border: 1px solid var(--kreska); border-radius: .35rem; background: #fff;
}
.zglos .wiersz { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.zglos .wiersz input[type=email] { flex: 1; min-width: 12rem; }
.zglos button {
  font: inherit; font-size: .95rem; padding: .55rem 1.3rem; border: 0;
  border-radius: .35rem; background: var(--akcent); color: #fff; cursor: pointer;
}
/* Pułapka na roboty — niewidoczna dla człowieka, ale nie przez display:none,
   bo część robotów to wykrywa. */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Źródła i stopka ────────────────────────────────────────────────────── */

.zrodla { margin-top: 3rem; }
.zrodla table.dane th { width: 30%; }

footer {
  margin-top: 3rem; padding-top: 1.5rem; padding-bottom: 3rem;
  border-top: 1px solid var(--kreska); color: var(--szary); font-size: .85rem;
}
footer a { color: var(--szary); }
.wymiana { margin-top: .9rem; font-size: .8rem; opacity: .75; line-height: 1.9; }
.wymiana a { color: var(--szary); }

/* ── Dane GUS ───────────────────────────────────────────────────────────── */

/* Liczba pożyczona z jednostki nadrzędnej. Wygląda inaczej niż liczba własna,
   bo jest innym rodzajem informacji — nie chcemy, żeby czytelnik odczytał
   płacę powiatową jako płacę swojej gminy. */
.zapozyczone {
  display: inline-block;
  padding: 0 .3rem;
  border: 1px dashed var(--kreska);
  border-radius: 3px;
  font-size: .8rem;
  color: var(--szary);
  cursor: help;
}

.zmiana-inline { font-size: .85rem; margin-left: .4rem; }
.zmiana-inline.rosnie { color: var(--alarm); }
.zmiana-inline.spada  { color: var(--akcent); }

table.dane td .drobne { display: block; margin-top: .15rem; font-size: .8rem; }

/* Wzór matematyczny w metodologii — wyróżniony, ale nie krzykliwy. */
.wzor {
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: .8rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; overflow-x: auto;
}

/* Znaczniki stanu źródła — te same kolory, co w panelu. */
.stan {
  display: inline-block; padding: .1rem .45rem; border-radius: .3rem;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.stan-ok          { background: #e8f2ec; color: #245c3f; }
.stan-ostrzezenie { background: #fdf4e3; color: #7a5406; }
.stan-blad        { background: #fbeae7; color: #8f3327; }
.stan-info        { background: #eef1f5; color: #43506b; }

.zrodlo { margin-bottom: 2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   0.18.0 — strona główna, zdrowie, opinie
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nagłówek: odnośnik działu obok znaku ───────────────────────────────── */

.dzial-link {
  font-size: .94rem; text-decoration: none; color: var(--szary);
  padding: .2rem 0; border-bottom: 2px solid transparent;
}
.dzial-link:hover { color: var(--akcent); border-bottom-color: var(--akcent); }

/* ── Nagłówek strony głównej ────────────────────────────────────────────── */

.hero { padding: 2.5rem 0 1rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 .6rem; }
.hero .lead { font-size: 1.1rem; margin-bottom: 1.75rem; }

.szukaj-duzy { display: flex; gap: .5rem; max-width: 34rem; }
.szukaj-duzy input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--kreska); border-radius: var(--r); background: #fff;
}
.szukaj-duzy button {
  font: inherit; font-size: 1rem; padding: .85rem 1.4rem; border: 0;
  border-radius: var(--r); background: var(--akcent); color: #fff; cursor: pointer;
}
.pod-szukajka { margin-top: .7rem; }

/* ── Działy strony głównej ──────────────────────────────────────────────── */

.dzial { margin-top: 3rem; }
.naglowek-dzialu {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.naglowek-dzialu h2 { margin-bottom: .25rem; }
.wiecej { font-size: .92rem; text-decoration: none; white-space: nowrap; }
.wiecej:hover { text-decoration: underline; }

/* ── Kafle kategorii zdrowia ────────────────────────────────────────────── */

.kafle-kategorii {
  display: grid; gap: .75rem; margin: 1.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.kafel-kategoria {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: .9rem 1rem;
  text-decoration: none; color: var(--tekst);
}
.kafel-kategoria:hover { border-color: var(--akcent); }
.kafel-kategoria .nazwa { font-weight: 600; font-size: .95rem; }
.kafel-kategoria .czas {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.kafel-kategoria .czas span { font-size: .9rem; font-weight: 400; color: var(--szary); }
.kafel-kategoria .czas.brak { font-size: .88rem; font-weight: 400; color: var(--szary); }

/* ── Tabele, które nie mieszczą się na telefonie ────────────────────────── */

.przewijane { overflow-x: auto; }
.przewijane table.dane { min-width: 32rem; }

/* ── Okruszki lokalne (zdrowie → kategoria) ─────────────────────────────── */

.okruszki-lokalne { font-size: .88rem; color: var(--szary); margin: .5rem 0 0; }
.okruszki-lokalne a { color: var(--szary); text-decoration: none; }
.okruszki-lokalne a:hover { color: var(--akcent); }
.okruszki-lokalne .sep { margin: 0 .4rem; opacity: .6; }

table.lista-placowek td .drobne { display: block; margin-top: .15rem; }

.strony { display: flex; gap: 1.25rem; align-items: center; margin: 1.5rem 0; }

.zrodlo-strony { margin-top: 2rem; }

.pusto { color: var(--szary); font-style: italic; margin: 1rem 0; }

.grupa-kolejek {
  font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--akcent);
  letter-spacing: -.01em;
}

/* ── Opinie ─────────────────────────────────────────────────────────────── */

/* Wizualnie oddzielone od danych z rejestru: inne tło i wyraźna kreska
   u góry. Czytelnik ma widzieć granicę między sprawozdaniem do NFZ
   a czyimś zdaniem, zanim przeczyta drugie. */
.dzial-opinii {
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 3px solid var(--kreska);
}

.opinie-lista { display: grid; gap: .75rem; margin: 1.25rem 0; }
.opinia {
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: .9rem 1.1rem;
}
.opinia p { margin: .4rem 0; }
.gwiazdki { color: #b8860b; letter-spacing: .1em; font-size: .95rem; }

.oceny-podsumowanie {
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.25rem 0;
}
.oceny-podsumowanie .srednia .liczba {
  font-size: 2.2rem; font-weight: 600; letter-spacing: -.03em; display: block;
}
.rozklad { flex: 1; min-width: 12rem; display: grid; gap: .2rem; }
.wiersz-rozkladu { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.ile-gwiazdek { width: 2rem; color: var(--szary); }
.wiersz-rozkladu .pasek {
  flex: 1; height: .55rem; background: var(--tlo);
  border: 1px solid var(--kreska); border-radius: .3rem; overflow: hidden;
}
.wiersz-rozkladu .pasek span { display: block; height: 100%; background: var(--akcent); }

/* ── Formularz opinii ───────────────────────────────────────────────────── */

.opinia-formularz {
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: 1.25rem 1.4rem; margin-top: 2rem;
}
.opinia-formularz h3 { margin-top: 0; }
.opinia-formularz .pole { display: block; margin: 1rem 0; }
.opinia-formularz .pole > span { display: block; margin-bottom: .3rem; font-size: .94rem; }
.opinia-formularz textarea,
.opinia-formularz input[type=text],
.opinia-formularz select {
  width: 100%; font: inherit; font-size: .95rem; padding: .55rem .7rem;
  border: 1px solid var(--kreska); border-radius: .35rem; background: #fff;
}
.opinia-formularz .pole.waskie input { max-width: 8rem; }
.opinia-formularz button {
  font: inherit; font-size: .95rem; padding: .6rem 1.5rem; border: 0;
  border-radius: .35rem; background: var(--akcent); color: #fff; cursor: pointer;
}
.ocena-wybor { border: 0; padding: 0; margin: 1rem 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.ocena-wybor legend { padding: 0; margin-bottom: .3rem; font-size: .94rem; }
.ocena-wybor label {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--kreska); border-radius: .35rem;
  padding: .35rem .7rem; cursor: pointer; background: #fff;
}
.ocena-wybor label:has(input:checked) { border-color: var(--akcent); background: #e8f2ec; }

.alarm {
  background: #fbeae7; border: 1px solid #e8c6bf; color: #8f3327;
  border-radius: .35rem; padding: .6rem .9rem; margin: 0 0 1rem;
}
.alarm-ok {
  background: #e8f2ec; border: 1px solid #bfd9cb; color: #245c3f;
  border-radius: .35rem; padding: .6rem .9rem; margin: 1rem 0;
}

/* ── Refundacja NFZ ──────────────────────────────────────────────────────
   Wykres słupkowy rysowany samym CSS-em, bez biblioteki. Dwanaście do
   dwudziestu czterech słupków nie potrzebuje 80 kB JavaScriptu, a strona
   główna, która nie czeka na skrypt z cudzego CDN-u, otwiera się wszędzie
   tak samo — także tam, gdzie ten CDN jest zablokowany. Każdy słupek ma
   `title` z pełną kwotą, więc skrócona skala niczego nie ukrywa. */
.pod-dzial { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }

.slupki {
  display: flex; align-items: flex-end; gap: .35rem;
  height: 10rem; margin-top: .9rem; padding: .8rem .9rem .3rem;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); overflow-x: auto;
}
.slupek {
  flex: 1 0 1.6rem; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%;
}
.slupek .wypelnienie {
  width: 100%; background: var(--akcent); border-radius: .2rem .2rem 0 0;
  min-height: .2rem; opacity: .85;
}
.slupek:hover .wypelnienie { opacity: 1; }
.slupek .podpis {
  font-size: .62rem; color: var(--szary); margin-top: .3rem;
  writing-mode: vertical-rl; white-space: nowrap;
}

@media (max-width: 40rem) {
  .slupki { height: 8rem; }
  .slupek { flex: 1 0 1.2rem; }
}

/* ── Menu główne ─────────────────────────────────────────────────────────── */
.menu-glowne { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.menu-glowne a {
  color: var(--tekst); text-decoration: none; font-size: .95rem;
  padding: .25rem 0; border-bottom: 2px solid transparent;
}
.menu-glowne a:hover { color: var(--akcent); border-bottom-color: var(--akcent); }

/* ── Placówki ────────────────────────────────────────────────────────────── */
.kafle-placowki .kafel-kategoria .drobne { margin-top: .4rem; line-height: 1.35; }

.karta-odnosnik { text-decoration: none; color: inherit; display: block; }
.karta-odnosnik:hover { border-color: var(--akcent); }

.szukaj-w-liscie {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0;
}
.szukaj-w-liscie input[type="search"] {
  flex: 1 1 16rem; padding: .55rem .8rem; font: inherit;
  border: 1px solid var(--kreska); border-radius: .35rem; background: #fff;
}
.szukaj-w-liscie button {
  font: inherit; padding: .55rem 1.2rem; border: 0; border-radius: .35rem;
  background: var(--akcent); color: #fff; cursor: pointer;
}

.lista-placowek td .drobne { display: block; }

.stronicowanie {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  margin: 1.2rem 0; font-size: .92rem;
}

.lista-gmin {
  list-style: none; padding: 0; margin: .8rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .3rem .9rem;
}
.lista-gmin li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .25rem 0; border-bottom: 1px solid var(--kreska);
}

.lista-cech { margin: .6rem 0 1.4rem 1.1rem; }
.lista-cech li { margin: .3rem 0; }

table.dane.godziny th { width: 14rem; font-weight: 400; }

/* Pełny wpis z rejestru — zwinięty, bo to kilkadziesiąt pól, z których
   większość interesuje jedną osobę na tysiąc. Ale ma być dostępny. */
.pelny-wpis {
  margin: 1.4rem 0; border: 1px solid var(--kreska);
  border-radius: var(--r); background: var(--karta); padding: .8rem 1rem;
}
.pelny-wpis summary { cursor: pointer; font-weight: 600; }
.pelny-wpis table.dane { margin-top: .8rem; }
.pelny-wpis th { width: 40%; font-weight: 400; color: var(--szary); }

/* ── Archiwum wycofań ────────────────────────────────────────────────────── */
.lista-wycofan td .drobne { display: block; }
.lista-wycofan code { font-size: .82rem; }
.szukaj-w-liscie select {
  padding: .55rem .6rem; font: inherit;
  border: 1px solid var(--kreska); border-radius: .35rem; background: #fff;
}

/* ── Karta leku ──────────────────────────────────────────────────────────── */
.dokumenty-leku { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 0; }
.przycisk-dokument {
  display: inline-block; padding: .6rem 1.1rem; border-radius: .35rem;
  background: var(--akcent); color: #fff; text-decoration: none; font-size: .95rem;
}
.przycisk-dokument:hover { opacity: .9; }
.lista-lekow td .drobne { display: block; }
.okruszki-lokalne { font-size: .88rem; color: var(--szary); margin-bottom: .4rem; }
.okruszki-lokalne .sep { margin: 0 .35rem; }

/* ── Baza firm ──────────────────────────────────────────────────────────── */

.lista-firm td .drobne { display: block; margin-top: .15rem; }
.lista-firm code { font-size: .85rem; white-space: nowrap; }

/* ── API: dokumentacja i wniosek ─────────────────────────────────────────── */

pre.klucz {
  font-size: 1.05rem; letter-spacing: .02em; padding: .8rem 1rem;
  background: rgba(127, 127, 127, .1); border-radius: .4rem;
  overflow-x: auto; user-select: all;
}
.klucz-wydany { border-left: 3px solid var(--akcent); }

.formularz-wniosku { display: grid; gap: 1.1rem; max-width: 34rem; margin: 1rem 0; }
.formularz-wniosku label { display: grid; gap: .3rem; font-weight: 600; }
.formularz-wniosku input, .formularz-wniosku textarea {
  font: inherit; font-weight: 400; padding: .5rem .6rem;
  border: 1px solid var(--ramka); border-radius: .35rem;
  background: var(--tlo); color: var(--tekst); width: 100%;
}
.formularz-wniosku .drobne { font-weight: 400; }
.formularz-wniosku button { justify-self: start; }

/* `.pulapka` jest wyżej — ta sama reguła obsługuje formularz opinii
   i wniosku o klucz API. */

/* ── Wyniki wyszukiwania (działami) ──────────────────────────────────────── */

.dzial-wynikow { margin: 1.6rem 0; }
.dzial-wynikow h2 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--akcent); }
.wyniki { list-style: none; padding: 0; margin: 0; }
.wyniki li { padding: .45rem 0; border-bottom: 1px solid var(--ramka); }
.wyniki li:last-child { border-bottom: 0; }
.wyniki .znacznik {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--szary); border: 1px solid var(--ramka);
  border-radius: .25rem; padding: .05rem .35rem; margin-left: .4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dostępność, wydruk i ciemny motyw — dodane w 0.35.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pominięcie do treści ──────────────────────────────────────────────────
   Pierwszy element w kolejności Tab. Niewidoczny, dopóki nie dostanie
   ogniska. Bez tego osoba na klawiaturze przechodzi przez cały pasek
   nawigacji i okruszki na KAŻDEJ podstronie, zanim dotrze do treści. */

.pomin {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--akcent);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r) 0;
  text-decoration: none;
}

.pomin:focus { left: 0; }

/* Główna treść dostaje `tabindex="-1"`, żeby dało się na nią przeskoczyć —
   ale nie ma powodu rysować jej obrysu, bo ognisko trafia tam wyłącznie
   przez ten skok. */
main:focus { outline: none; }

/* ── Widoczne ognisko ──────────────────────────────────────────────────────
   Domyślny obrys przeglądarki bywa ledwo widoczny na jasnym tle, a niektóre
   resety CSS wyłączają go zupełnie. Portal, po którym da się chodzić
   wyłącznie myszą, jest portalem dla części publiczności.

   `:focus-visible`, nie `:focus` — kliknięcie myszą nie ma rysować obrysu,
   bo wtedy każdy klik zostawia ramkę i wygląda to na usterkę. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Wydruk ────────────────────────────────────────────────────────────────
   Profil gminy bywa drukowany — na zebranie, do teczki, na spotkanie
   z doradcą. Domyślny wydruk marnuje pierwszą stronę na pasek nawigacji
   i gubi adresy linków, które na papierze są jedyną drogą do źródła. */

@media print {
  .pas, .okruszki, .szukaj-maly, .szukaj-duzy, .wymiana, .pomin,
  .mapa-sterowanie, .mapa-plotno, form { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .srodek { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }

  /* ADRES LINKU NA PAPIERZE. Bez tego wydruk mówi „patrz źródła danych"
     i nie podaje, gdzie te źródła są — czyli traci to, co w tym portalu
     najważniejsze. Pomijamy kotwice wewnątrzstronowe, bo one na papierze
     nie prowadzą nigdzie. */
  main a[href^="/"]::after  { content: " (farma.waw.pl" attr(href) ")"; font-size: 9pt; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  main a[href^="#"]::after  { content: ""; }

  /* Tabela przecięta w połowie przez łamanie strony jest nieczytelna. */
  table, .karta-dana, section { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  .wykres { max-width: 16cm; }
}

/* ── Ciemny motyw ──────────────────────────────────────────────────────────
   Wyłącznie na podstawie ustawienia systemowego — bez przełącznika.
   Przełącznik wymagałby zapamiętania wyboru, czyli ciasteczka albo
   localStorage, a portal nie zapisuje niczego po stronie czytelnika
   i nie zacznie od preferencji kolorów.

   Kolory są PODMIENIANE W ZMIENNYCH, nie dopisywane regułami — dzięki temu
   wszystko, co ich używa, przestawia się samo i nie ma osobnej listy
   miejsc do zapomnienia przy następnym komponencie. */

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #101519;
    --karta: #192026;
    --tekst: #e7edf0;
    --szary: #9aa7b2;
    --kreska: #273138;
    /* Niebieski, zieleń i czerwień ROZJAŚNIONE: wersje z jasnego motywu mają
       na ciemnym tle kontrast poniżej progu czytelności. To nie jest ten sam
       kolor przyciemniony — to inny kolor, dobrany do innego tła. */
    --akcent: #56b8d8;
    --akcent-ciemny: #8ad2ea;
    --akcent-tlo: #14313d;
    --zielen: #57c194;
    --zielen-tlo: #14332a;
    --alarm: #e08370;
    --alarm-tlo: #331d1a;
    --cien: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --cien-mocny: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  }

  /* Wykresy dziedziczą kolor po `currentColor`, więc idą same — ale siatka
     i podpisy mają wpisane wartości i trzeba je przestawić tutaj. */
  .wykres .siatka { stroke: #33383e; }
  .wykres .os { fill: #a0a6b0; }
  .wykres .etykieta-slupka { fill: #e8eae6; }
  .wykres .slupek { fill: #3f6b53; }
  .wykres .slupek-wyrozniony { fill: #6fbf90; }

  /* Mapa: podkład OSM jest jasny i na ciemnej stronie razi. Lekkie
     przygaszenie zamiast inwersji — inwersja zamienia zieleń lasów
     w róż i mapa przestaje być mapą. */
  .mapa-plotno { background: #1d2024; }
  .mapa-plotno img { filter: brightness(.85) saturate(.9); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STRONA GŁÓWNA
   ═══════════════════════════════════════════════════════════════════════════

   JEDNO PYTANIE NA ŚRODKU EKRANU. Portal odpowiada na „jak wygląda życie
   w tym miejscu", a drogą do odpowiedzi jest nazwa miejscowości. Wszystko
   inne na tej stronie stoi NIŻEJ, bo jest drugim wyborem dla kogoś, kto nie
   wie, czego szukać.

   Hero jest kolorowy, a reszta portalu nie. To celowe: strona główna ma
   powiedzieć, czym to jest, a profil gminy ma pokazać liczby — i kolor
   przeszkadzałby w czytaniu tabeli z medianami cen. */

/* ── KOLUMNA SZEROKA ─────────────────────────────────────────────────────────
   Włączana przez szablon (`$szeroka`), nie domyślna. 54rem to wygodna
   długość WIERSZA TEKSTU i dlatego zostaje wszędzie tam, gdzie portal jest
   tekstem. Strona główna nim nie jest: pięć kafli z metrykami i dwukolumnowa
   tablica źródeł ściśnięte do 54rem przestają być czytelne. */
.szeroki { max-width: 72rem; }

/* Etykieta pola, której nie widać, ale którą czyta czytnik ekranu.
   `placeholder` nie jest etykietą: znika po wpisaniu pierwszej litery
   i część czytników w ogóle go nie ogłasza. */
.pomin-wzrokowo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ATRAMENT ────────────────────────────────────────────────────────────────
   Hero nie jest już gradientem. Gradient na ciemnym tle to najczęstszy
   odruch i dlatego najmniej znaczy — wygląda jak każda inna strona.
   Zamiast niego: jeden głęboki atramentowy kolor i DROBNA SIATKA PUNKTÓW,
   ta sama, która jest pod milimetrowym papierem i pod mapą topograficzną.
   To jest portal pomiarowy i ma tak wyglądać. */
.hero {
  background: #071a1f;
  background-image: radial-gradient(circle at 1px 1px, rgba(125, 211, 232, .12) 1px, transparent 0);
  background-size: 30px 30px;
  color: #f6f4ef;
  /* Panel wewnątrz kolumny treści, a nie pas przez całą szerokość okna.
     Pas na całą szerokość wymaga sztuczki z `50vw`, a `50vw` liczy się
     RAZEM z paskiem przewijania — na Windowsie daje to poziomy suwak
     na każdej stronie. Zaokrąglony panel wygląda tak samo, a nie psuje
     układu nikomu. */
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) clamp(4.5rem, 9vw, 6.5rem);
  border-radius: clamp(var(--r), 2vw, 1.4rem);
  margin: .5rem 0 0;
  box-shadow: var(--cien-mocny);
}

/* Pasek stanu nad nagłówkiem — patrz `.tablica-zrodel` niżej po powód.
   Tu jest jego skrót: jedno zdanie o tym, ile rejestrów dziś odpowiada. */
.hero-stan {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .03em;
  color: #9fb6bc;
}
.hero-stan .kropka {
  width: .45rem; height: .45rem; border-radius: 50%;
  display: inline-block; margin-right: .45rem; vertical-align: .05em;
}
.hero-stan .kropka.dobra { background: #6fd3a8; }
.hero-stan .kropka.zla { background: #f08a5d; }
.hero-stan a { color: #7dd3e8; }
.hero-stan .kreska { color: rgba(246, 244, 239, .28); }

.hero .nadtytul {
  display: block; text-align: center; font-family: var(--mono);
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: #6fd3a8; margin: 0 0 1.35rem;
}
.hero h1 {
  color: #f6f4ef; margin: 0 auto .85rem; text-align: center; max-width: 18ch;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.1rem, 6.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.025em;
}
/* Druga linia pytania kursywą — jedyny ozdobnik w całym nagłówku, i jedyny,
   na jaki portal danych ma miejsce. */
.hero h1 em { font-style: italic; color: #7dd3e8; }
.hero-lead {
  color: #9fb6bc; text-align: center;
  max-width: 52ch; margin: 0 auto 2.4rem; font-size: clamp(1rem, 2.2vw, 1.14rem);
  line-height: 1.6;
}

/* ── Wyszukiwarka na środku ──────────────────────────────────────────────── */

/* Wyszukiwarka jest największym elementem strony i wygląda jak jeden
   przedmiot, a nie jak pole obok przycisku: wspólna biała płyta, przycisk
   wtopiony w jej prawą krawędź. */
.hero-szukaj { max-width: 44rem; margin: 0 auto; }
.hero-szukaj form {
  display: flex; gap: .5rem; align-items: center;
  background: #fff; border-radius: 1rem; padding: .45rem .45rem .45rem 1.3rem;
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(246, 244, 239, .16);
}
.hero-szukaj input {
  flex: 1; min-width: 0; font: inherit; font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 500; padding: .85rem 0; border: 0; outline: 0;
  background: transparent; color: var(--tekst);
}
.hero-szukaj input::placeholder { color: #7b8794; font-weight: 400; }
.hero-szukaj button {
  font: inherit; font-weight: 600; font-size: 1rem; padding: .95rem 1.6rem;
  border: 0; border-radius: .7rem; cursor: pointer;
  background: #0b5d79; color: #fff; white-space: nowrap;
}
.hero-szukaj button:hover { background: #083b4e; }

/* Na wąskim telefonie pole i przycisk obok siebie zostawiają na wpisanie
   nazwy dwanaście znaków — a „Zielona Góra (gmina miejska)" ma dwadzieścia
   siedem. Poniżej 30rem układ się rozkłada i pole dostaje całą szerokość. */
@media (max-width: 30rem) {
  .hero-szukaj form {
    flex-direction: column; align-items: stretch; padding: .7rem;
  }
  .hero-szukaj input { padding: .7rem .6rem; }
  .hero-szukaj button { width: 100%; }
}

/* Podpowiedzi pod wyszukiwarką — przykłady, nie obietnice. Wpisane tu nazwy
   prowadzą do stron, które NAPRAWDĘ istnieją; generujemy je z bazy. */
.hero-podpowiedzi {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; margin: 1.1rem 0 0; font-size: .9rem;
  color: #7e969c;
}
/* Przykłady jako pigułki, nie jako lista odnośników w zdaniu: to są
   przyciski do kliknięcia, a nie przypis. Obrys zamiast wypełnienia, żeby
   nie konkurowały z przyciskiem wyszukiwarki. */
.hero-podpowiedzi a {
  color: #cfe0e4; text-decoration: none; font-weight: 500;
  border: 1px solid rgba(246, 244, 239, .22); border-radius: 2rem;
  padding: .4rem .85rem; white-space: nowrap;
}
.hero-podpowiedzi a:hover { border-color: #7dd3e8; color: #fff; }

/* ── LICZNIK PORTALU: KAŻDA LICZBA Z WŁASNĄ METRYKĄ ──────────────────────────

   To jest sedno nowej strony głównej i najdroższa decyzja w całym pliku.

   Liczba bez podpisu jest na portalu danych publicznych najsłabszym miejscem
   ekranu: wygląda dokładnie tak samo jak liczba wymyślona. Dlatego pod każdą
   stoi wiersz „GUGiK · RCN · 18.09.2026" — nie w przypisie, nie po najechaniu
   myszą, tylko w kafelku, z którego nie da się liczby skopiować bez niego.

   Płyta wchodzi w atrament ujemnym marginesem: jedno wspólne pole zamiast
   dwóch bloków jeden pod drugim. */
/* Kreski między kafelkami są SZCZELINĄ SIATKI, a nie obramowaniem kafelka.
   Obramowanie zostawia kreskę przy ostatnim kafelku w rzędzie — a przy
   zawijaniu (`auto-fit`) nie da się z góry powiedzieć, który to jest.
   Tło kontenera widoczne przez szczelinę rozwiązuje to przy każdej liczbie
   kolumn, także przy jednej na telefonie. */
.licznik {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  background: var(--kreska);
  border-radius: clamp(var(--r), 1.6vw, 1.25rem);
  margin: clamp(-4.5rem, -7vw, -3rem) 0 3rem;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(7, 26, 31, .5), 0 0 0 1px rgba(11, 32, 39, .07);
}
.licznik-pole {
  background: var(--karta);
  padding: 1.35rem 1.25rem 1.2rem;
}
.licznik-pole b {
  display: block; font-family: var(--mono);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500;
  letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* „ponad" przy liczbie szacowanej jest przedrostkiem, a nie częścią liczby —
   dlatego mniejsze i w osobnej linii. Bez tego kafel z szacunkiem łamie się
   w środku liczby i wygląda na dwie różne wartości. */
.licznik-pole .ponad {
  display: block; font-family: var(--serif); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--szary);
}
.licznik-pole .co { display: block; font-size: .92rem; font-weight: 600; margin-top: .45rem; }
.licznik-pole .doprecyzowanie {
  display: block; font-size: .82rem; color: var(--szary); line-height: 1.45; margin-top: .1rem;
}
.licznik-pole .metryka {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .02em;
  color: #6b7a80; margin-top: .6rem;
}
/* Źródło odcięte nie chowa liczby — zmienia jej podpis. Liczba zostaje
   prawdziwa, przestaje być dzisiejsza, i tylko to mówimy. */
.licznik-pole .metryka.odciete { color: var(--alarm); }

/* ── ZASADY PORTALU ──────────────────────────────────────────────────────── */

.zasady {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 3rem 0 0; padding: 2.25rem 0;
  border-top: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska);
}
.zasady .numer {
  display: block; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .5rem;
}
.zasady h3 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .45rem; letter-spacing: -.01em; }
.zasady p { margin: 0; font-size: .92rem; color: var(--szary); line-height: 1.6; }

/* Nagłówki działów na stronie głównej idą szeryfowym — ten krój jest tu
   jedyną rzeczą, która nadaje stronie charakter, a nie ma prawa wejść do
   tabel z medianami, gdzie liczy się wyłącznie czytelność cyfr. */
.szeroki h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.45rem, 3.4vw, 2.1rem); letter-spacing: -.02em;
}
/* Kreska ciągnąca się od nagłówka do końca kolumny — porządkuje stronę
   bez dokładania jej kolejnego koloru. */
.naglowek-sekcji {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin: 3rem 0 .25rem;
}
.naglowek-sekcji h2 { margin: 0; }
.naglowek-sekcji .linia { flex: 1 1 2rem; height: 1px; background: var(--kreska); }
.naglowek-sekcji a { font-size: .92rem; font-weight: 600; }

/* Na wąskim ekranie nagłówek i odnośnik nie mieszczą się w jednym wierszu,
   a kreska między nimi traci sens. Zwijamy je pod siebie i kreskę chowamy —
   inaczej odnośnik wystaje poza kolumnę i cała strona dostaje poziomy suwak
   (zmierzone: 391 px treści w oknie 390 px). */
@media (max-width: 34rem) {
  .naglowek-sekcji { display: block; }
  .naglowek-sekcji .linia { display: none; }
  .naglowek-sekcji a { display: inline-block; margin-top: .35rem; }
}

/* Metryki są najdrobniejszym tekstem na stronie, więc jako jedyne wymagają
   osobnej wartości na ciemnym motywie — szarość dobrana do jasnej karty
   schodzi na ciemnej poniżej progu czytelności. */
@media (prefers-color-scheme: dark) {
  .licznik-pole .metryka,
  .tablica-zrodel li .kiedy { color: var(--szary); }
}

/* ── Działy jako karty ───────────────────────────────────────────────────── */

.dzialy {
  display: grid; gap: 1rem; margin: 1.25rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* Karta działu prowadzi LICZBĄ, nie ikoną. Ikona mówi „to jest jakiś dział",
   a „24 118 wpisów" mówi, czy warto tam wchodzić — i jest prawdziwe. */
.dzial-karta {
  display: block; text-decoration: none; color: inherit;
  background: var(--karta); border: 1px solid var(--kreska);
  border-top: 3px solid var(--akcent);
  border-radius: var(--r-duzy); padding: 1.35rem 1.4rem 1.25rem;
  box-shadow: var(--cien); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dzial-karta.zielona { border-top-color: var(--zielen); }
.dzial-karta:hover {
  border-color: var(--akcent); box-shadow: var(--cien-mocny); transform: translateY(-2px);
}
.dzial-karta.zielona:hover { border-color: var(--zielen); }
.dzial-karta .ile {
  display: flex; align-items: baseline; gap: .45rem;
  font-family: var(--mono); font-size: 1.45rem; font-weight: 500;
  letter-spacing: -.02em; color: var(--akcent); font-variant-numeric: tabular-nums;
  margin-bottom: .55rem; min-height: 1.75rem;
}
.dzial-karta.zielona .ile { color: var(--zielen); }
.dzial-karta .ile .jednostka {
  font-family: inherit; font-size: .78rem; font-weight: 400; color: var(--szary);
  letter-spacing: 0;
}
.dzial-karta b {
  display: block; font-family: var(--serif); font-size: 1.22rem;
  letter-spacing: -.01em; margin-bottom: .35rem;
}
.dzial-karta .opis { display: block; font-size: .9rem; color: var(--szary); line-height: 1.55; }

/* ── TABLICA ŹRÓDEŁ: PORTAL POKAZUJE WŁASNY STAN ────────────────────────────

   Każdy portal danych pisze o sobie „rzetelne dane z oficjalnych źródeł".
   To zdanie nic nie kosztuje i dlatego nic nie znaczy. Rzeczą, której nie da
   się napisać bez pokrycia, jest WŁASNY STAN: które rejestry dziś
   odpowiedziały, które milczą i które przestały nas wpuszczać.

   Dlatego ta tablica stoi na stronie głównej, a nie w zakładce. */
.tablica-zrodel {
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: clamp(var(--r), 1.6vw, 1.25rem); overflow: hidden;
  box-shadow: var(--cien); margin-top: 1.25rem;
}
.tablica-zrodel .czolo {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem;
  padding: 1.6rem 1.75rem 1.35rem; border-bottom: 1px solid var(--kreska);
}
.tablica-zrodel .czolo .slowa { flex: 1 1 22rem; }
.tablica-zrodel .czolo h2 { margin: 0 0 .4rem; }
.tablica-zrodel .czolo p { margin: 0; font-size: .92rem; color: var(--szary); line-height: 1.6; }
.tablica-zrodel .wyniki { display: flex; gap: 1.75rem; }
.tablica-zrodel .wyniki div { text-align: left; }
.tablica-zrodel .wyniki b {
  display: block; font-family: var(--mono); font-size: 1.65rem; font-weight: 500;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.tablica-zrodel .wyniki span { display: block; font-size: .8rem; color: var(--szary); margin-top: .2rem; }
.tablica-zrodel .wyniki .dziala b { color: var(--zielen); }
.tablica-zrodel .wyniki .odciete b { color: var(--alarm); }
.tablica-zrodel .wyniki .czeka b { color: var(--szary); }

.tablica-zrodel ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.tablica-zrodel li {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.75rem; border-bottom: 1px solid var(--kreska);
  font-size: .93rem;
}
.tablica-zrodel li .kropka { width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto; }
.tablica-zrodel li .nazwa { flex: 1; min-width: 0; font-weight: 500; }
.tablica-zrodel li .kiedy {
  font-family: var(--mono); font-size: .76rem; color: #6b7a80; white-space: nowrap;
}
.tablica-zrodel li.dziala .kropka { background: var(--zielen); }
.tablica-zrodel li.czeka .kropka { background: #b9b3a6; }
.tablica-zrodel li.czeka .nazwa { color: var(--szary); font-weight: 400; }
.tablica-zrodel li.odciete { background: var(--alarm-tlo); }
.tablica-zrodel li.odciete .kropka { background: var(--alarm); }
.tablica-zrodel li.odciete .nazwa,
.tablica-zrodel li.odciete .kiedy { color: var(--alarm); font-weight: 600; }

.tablica-zrodel .stopka {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .9rem 1.75rem; font-size: .88rem; color: var(--szary);
}
.tablica-zrodel .stopka .rosnie { flex: 1; }

/* ── ŚWIEŻO DOPISANE PLACÓWKI ────────────────────────────────────────────────
   Kafelek prowadzi RODZAJEM, nie nazwą: „praktyka lekarska" mówi, co to
   w ogóle jest, zanim czytelnik przeczyta nazwę własną w rodzaju
   „NZOZ MEDICUS s.c.". Nazwa jest druga i największa. */
.swieze-placowki {
  display: grid; gap: .75rem; margin: 1rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.swieza-placowka {
  display: block; text-decoration: none; color: inherit;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); padding: .9rem 1rem .85rem;
  transition: border-color .15s;
}
.swieza-placowka:hover { border-color: var(--akcent); }
.swieza-placowka .typ {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--akcent);
  margin-bottom: .35rem;
}
.swieza-placowka b {
  display: block; font-size: .95rem; line-height: 1.35; font-weight: 600;
  /* Nazwy z rejestrów bywają zdaniami na trzy linijki („PRZYCHODNIA
     STOMATOLOGICZNA »VITADENT« NIEPUBLICZNY ZAKŁAD OPIEKI ZDROWOTNEJ…").
     Trzy wiersze i koniec — kafelek ma być kafelkiem, a nie akapitem. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.swieza-placowka .gdzie {
  display: block; font-size: .82rem; color: var(--szary); margin-top: .35rem;
}
.swieza-placowka .gdzie .brak { font-style: italic; }

/* ── POWIETRZE ───────────────────────────────────────────────────────────── */

.karta-powietrze {
  background: #0b2027; color: #f6f4ef;
  border-radius: clamp(var(--r), 1.6vw, 1.25rem); padding: 1.5rem 1.6rem 1.4rem;
}
.karta-powietrze h2 { color: #f6f4ef; font-family: var(--serif); margin: 0 0 .25rem; font-size: 1.4rem; }
.karta-powietrze .wstep { font-size: .88rem; color: #9fb6bc; margin: 0 0 1.25rem; line-height: 1.55; }
.karta-powietrze .duza {
  font-family: var(--mono); font-size: 2.6rem; font-weight: 500; line-height: 1;
  letter-spacing: -.04em; color: #6fd3a8; font-variant-numeric: tabular-nums;
}
.karta-powietrze .rozklad { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.karta-powietrze .rozklad li { display: flex; align-items: center; gap: .7rem; font-size: .85rem; }
.karta-powietrze .rozklad .etykieta { flex: 0 0 7.5rem; color: #cfe0e4; }
/* NAZWA `skala`, A NIE `pasek` — I TO NIE JEST KAPRYS.
   `.pasek` to klasa PASKA NAGŁÓWKA portalu, z `min-height: 3.5rem`. Moja
   reguła była bardziej szczegółowa i nadpisywała `height`, ale `min-height`
   zostawała cudza — i słupek o wysokości sześciu pikseli rysował się na
   pięćdziesiąt sześć. Zmierzone w przeglądarce, nie wydedukowane. */
.karta-powietrze .rozklad .skala {
  flex: 1; height: .38rem; min-height: 0;
  border-radius: 2rem; background: rgba(246, 244, 239, .14); overflow: hidden;
}
/* Pasek jest NEUTRALNY, nie zielono-czerwony. Kategorię nazywa GIOŚ
   („Umiarkowany", „Zły") i to jego słowo niesie ocenę; dołożenie do niego
   naszego koloru byłoby drugą oceną, tym razem naszą. */
.karta-powietrze .rozklad .skala span { display: block; height: 100%; background: #7dd3e8; border-radius: 2rem; }
.karta-powietrze .rozklad .ile {
  font-family: var(--mono); font-size: .78rem; color: #9fb6bc; min-width: 2.5rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.karta-powietrze .metryka {
  display: block; font-family: var(--mono); font-size: .7rem; color: #7e969c;
  margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid rgba(246, 244, 239, .13);
}

/* ── GDY KARTA POWIETRZA STOI SAMA, DOSTAJE CAŁĄ SZEROKOŚĆ ──────────────────
   A wtedy paski rozciągnięte na 1100 px wyglądają jak wykres słupkowy
   z konferencji, a nie jak odczyt. Kładziemy ją więc na dwie kolumny:
   liczba po lewej, rozkład po prawej. To ten sam wariant, który włącza się
   sam, gdy sąsiad (wycofania, firmy) akurat nie ma czego pokazać. */
.kolumny-glowna > .karta-powietrze:only-child {
  display: grid; align-items: start; gap: 1.25rem 2.5rem;
  grid-template-columns: minmax(13rem, 19rem) 1fr;
}
.kolumny-glowna > .karta-powietrze:only-child .rozklad { margin-top: .35rem; }
.kolumny-glowna > .karta-powietrze:only-child .metryka { grid-column: 1 / -1; margin-top: 0; }

@media (max-width: 46rem) {
  .kolumny-glowna > .karta-powietrze:only-child { display: block; }
  .kolumny-glowna > .karta-powietrze:only-child .metryka { margin-top: 1.25rem; }
}

/* Ruch wyłączony dla tych, którzy o to proszą w ustawieniach systemu.
   Animacja przy najechaniu jest ozdobą, a dla części osób — powodem
   zawrotów głowy. */
@media (prefers-reduced-motion: reduce) {
  .dzial-karta { transition: none; }
  .dzial-karta:hover { transform: none; }
}

/* ── Dwie kolumny na dole: świeże dane i zestawienia ─────────────────────── */

.kolumny-glowna {
  display: grid; gap: 2rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.lista-swieza { list-style: none; margin: .5rem 0 0; padding: 0; }
.lista-swieza li {
  padding: .7rem 0; border-bottom: 1px solid var(--kreska);
  display: flex; gap: .75rem; align-items: baseline; justify-content: space-between;
}
.lista-swieza li:last-child { border-bottom: 0; }
.lista-swieza a { text-decoration: none; font-weight: 500; }
.lista-swieza a:hover { text-decoration: underline; }
.lista-swieza .kiedy { color: var(--szary); font-size: .84rem; white-space: nowrap; }

.znacznik {
  display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .5rem;
  border-radius: 1rem; text-transform: uppercase; letter-spacing: .04em;
}
.znacznik-swieze { background: var(--zielen-tlo); color: var(--zielen); }
.znacznik-uwaga  { background: var(--alarm-tlo);  color: var(--alarm); }

/* ── Wydruk: hero bez tła ────────────────────────────────────────────────── */

@media print {
  .hero { background: none !important; color: #000; padding: 1rem 0; }
  .hero h1, .hero-lead, .hero-podpowiedzi { color: #000; }
  .hero-szukaj, .hero-liczby { display: none; }
  header.pas { position: static; }
}


/* ── Metka wieku danych ──────────────────────────────────────────────────────
   Stoi przy liczbie, która się starzeje, i pojawia się tylko wtedy, gdy ma co
   powiedzieć. Żółta, nie czerwona: stara dana nie jest błędem — jest daną
   z metką. Czerwień w tym portalu znaczy „coś jest nie tak", a tu nic nie
   jest nie tak z liczbą, tylko z jej wiekiem. */

.metka-wieku {
  margin: -.5rem 0 1.4rem;
  padding: .7rem .95rem;
  border-left: 3px solid #b26a00;
  background: #fdf6ea;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .9rem;
  max-width: 44rem;
}
.metka-wieku a { color: inherit; }

/* Odcięcie źródła to co innego niż zwykłe starzenie się danych: tu nie chodzi
   o to, że nowszych jeszcze nie ma, tylko że nie będzie. */
.metka-wieku.metka-odciete { border-left-color: var(--alarm); background: var(--alarm-tlo); }

@media (prefers-color-scheme: dark) {
  .metka-wieku { background: #2d2415; border-left-color: #d79a3c; }
}

@media print {
  /* Wiek danych DRUKUJE SIĘ — wydrukowana liczba bez daty żyje w szufladzie
     dłużej niż strona w przeglądarce. */
  .metka-wieku { border: 1px solid #000; background: none; }
}

/* ── Menu rozwijane na <details> ─────────────────────────────────────────────
   Bez linii JavaScriptu: otwiera się klawiaturą, palcem i myszą, działa przy
   wyłączonym skrypcie i nie wymaga ani jednej reguły w polityce bezpieczeństwa
   treści. Rozwijane na hoverze jest przy okazji nieużywalne na telefonie. */

.menu-rozwijane { position: relative; }
.menu-rozwijane > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--akcent); white-space: nowrap;
  /* Te same wymiary, co pozycje obok — inaczej „Zdrowie" siedzi o dwa
     piksele wyżej niż „Mapa" i pasek wygląda na krzywy. */
  padding: .25rem 0; border-bottom: 2px solid transparent;
}

/* „Jesteś w tym dziale" — podkreślenie nagłówka, NIE samoczynne otwarcie
   listy. Lista wisi nad treścią (`position: absolute`), a `<details>` bez
   skryptu nie zamyka się kliknięciem obok — otwarta z góry zasłaniałaby
   początek każdej strony zdrowia, dopóki ktoś jej nie kliknie. */
.menu-rozwijane.tu-jestes > summary { border-bottom-color: var(--akcent); }
.menu-rozwijane > summary::-webkit-details-marker { display: none; }
.menu-rozwijane > summary::after {
  content: "›"; display: inline-block; margin-left: .3rem;
  transform: rotate(90deg); font-size: .9em; opacity: .7;
}
.menu-rozwijane[open] > summary::after { transform: rotate(-90deg); }
.menu-rozwijane > summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

.menu-lista {
  position: absolute; z-index: 60; top: calc(100% + .55rem); left: 0;
  min-width: 15rem; padding: .45rem;
  background: var(--karta); border: 1px solid var(--kreska);
  border-radius: var(--r); box-shadow: var(--cien-mocny);
  display: flex; flex-direction: column;
}
.menu-lista a {
  padding: .5rem .65rem; border-radius: .35rem; text-decoration: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  /* Zdjęcie kreski z `.menu-glowne a` — w rozwijanej liście dorysowywała
     się pod każdą pozycją przy najechaniu, choć tłem zaznaczamy to samo. */
  border-bottom: 0;
}
.menu-lista a:hover { border-bottom-color: transparent; }
.menu-lista a:hover { background: var(--akcent-tlo); }
.menu-naglowek {
  padding: .6rem .65rem .25rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--szary); border-top: 1px solid var(--kreska);
  margin-top: .35rem;
}
.menu-ile { color: var(--szary); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* Na telefonie menu i tak zawija się do kilku linii, a lista wisząca nad
   treścią zasłaniałaby połowę ekranu. Rozwija się więc w miejscu. */
@media (max-width: 48rem) {
  .menu-lista {
    position: static; box-shadow: none; border: 0; padding: .2rem 0 .2rem .8rem;
    border-left: 2px solid var(--kreska); border-radius: 0; min-width: 0;
  }
}

@media print { .menu-rozwijane { display: none; } }

/* ── Karta placówki: dane z RPWDL ─────────────────────────────────────────
   Trzy z tych klas szablony używały już wcześniej (`prawo`, `brak`), a CSS
   ich nie znał — liczby w kolumnach stały do lewej, a „brak danych" niczym
   się nie różnił od danych. Klasa użyta i niezdefiniowana jest gorsza niż
   jej brak: wygląda w kodzie na decyzję, której nie ma. */
.prawo { text-align: right; }
td.prawo, th.prawo { font-variant-numeric: tabular-nums; }

/* Brak i zero to dwie różne rzeczy — brak ma wyglądać na brak. */
.brak { color: var(--szary); }
td .brak[title] { cursor: help; border-bottom: 1px dotted var(--kreska); }

/* Kontrole i akredytacje: treść bywa akapitem i przepisujemy ją w całości,
   bo ocena („pozytywna z nieprawidłowościami") siedzi na końcu zdania. */
.zdarzenia { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.zdarzenia li {
  padding: .8rem 1rem; border: 1px solid var(--kreska);
  border-radius: var(--r); background: var(--karta);
}
.zdarzenia li > div { margin-top: .45rem; line-height: 1.5; }
.zdarzenia .kiedy {
  margin-left: .5rem; color: var(--szary); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* ── Strona główna: szpitale i kontrole ───────────────────────────────────
   Obie listy niosą liczbę albo datę obok nazwy, więc obie mają ten sam
   rytm co `.lista-swieza` — gdyby różniły się układem, czytelnik uznałby,
   że mówią o czymś innym niż reszta tej sekcji. */
.lista-liczb, .lista-kontroli { list-style: none; margin: .5rem 0 0; padding: 0; }
.lista-liczb li, .lista-kontroli li {
  padding: .7rem 0; border-bottom: 1px solid var(--kreska);
}
.lista-liczb li:last-child, .lista-kontroli li:last-child { border-bottom: 0; }
.lista-liczb a, .lista-kontroli a { font-weight: 600; text-decoration: none; }
.lista-liczb a:hover, .lista-kontroli a:hover { text-decoration: underline; }
.lista-liczb .gdzie, .lista-kontroli .drobne { display: block; color: var(--szary); }
.lista-liczb .gdzie { font-size: .88rem; }
.lista-liczb .ile { display: block; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.lista-liczb .ile strong { font-size: 1.15rem; }
.lista-liczb .ile .drobne { display: inline; margin-left: .4rem; }
.lista-kontroli .kiedy {
  margin-left: .45rem; color: var(--szary); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.lista-kontroli a { display: block; margin-top: .35rem; }
.lista-kontroli .drobne { margin-top: .25rem; line-height: 1.45; }

/* ── Karta placówki: liczby łóżek ─────────────────────────────────────────
   WŁASNA KLASA, a nie `.licznik` ze strony głównej. Tamten pas ma ujemny
   margines górny, bo celowo nachodzi na hero; wstawiony na kartę placówki
   wjeżdża na własny nagłówek i „Ile ma łóżek" przestaje być widoczne.
   Sprawdzone w przeglądarce, nie wydedukowane. */
.liczby-placowki {
  display: grid; gap: 1px; margin: 1rem 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background: var(--kreska); border: 1px solid var(--kreska);
  border-radius: var(--r); overflow: hidden;
}
.liczby-placowki .pole { background: var(--karta); padding: 1rem 1.1rem; }
.liczby-placowki b {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.liczby-placowki .etykieta {
  display: block; margin-top: .3rem; color: var(--szary); font-size: .86rem;
}

/* Informacja o ciasteczkach — zdanie w stopce, nie okienko do klikania.
   Portal nie ma śledzenia, więc nie ma o co pytać o zgodę; jest o czym
   poinformować. Okienko „akceptuję" przy braku śledzenia uczy odruchowego
   klikania i psuje dokładnie to, czemu miałoby służyć. */
.ciasteczka {
  margin-top: .6rem; font-size: .84rem; color: var(--szary);
  max-width: 62rem; line-height: 1.5;
}