/* ============================================================================
   Medipedio — system wizualny części publicznej
   ============================================================================

   Zasady, których trzymamy się w całym pliku:

   1. Wszystko przez zmienne (--mp-*). Tryb ciemny podmienia WYŁĄCZNIE wartości
      zmiennych — żadna reguła nie jest duplikowana „dla ciemnego". Dzięki temu
      nowy komponent działa w obu trybach z automatu.
   2. Kontrast tekstu do tła nigdzie nie schodzi poniżej 4.5:1. To katalog
      placówek medycznych — czytają go też osoby starsze i słabowidzące,
      a „ładny szary na białym" jest dla nich nieczytelny.
   3. Każda animacja jest wyłączana przez prefers-reduced-motion. Ruch na
      stronie o zdrowiu potrafi realnie zaszkodzić (migrena, zaburzenia
      przedsionkowe) i nie jest to teoretyczny scenariusz.
   4. Zero zewnętrznych zasobów: brak Google Fonts, brak CDN. Polityka CSP
      serwisu to `default-src 'self'`, a font wczytywany z obcego serwera
      wysyła adres IP każdego odwiedzającego do strony trzeciej.
   ========================================================================= */

/* ── barwy i wymiary ─────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* marka: głęboki granat medyczny + turkusowy akcent */
  --mp-navy-900: #08172a;
  --mp-navy-800: #0b1f33;
  --mp-navy-700: #0f2d45;
  --mp-navy-600: #14405c;
  --mp-teal-500: #12a594;
  --mp-teal-600: #0e8578;
  --mp-teal-400: #2dd4bf;

  --mp-bg:        #f6f8fb;
  --mp-surface:   #ffffff;
  --mp-surface-2: #eef2f7;
  --mp-ink:       #0d1b2a;
  --mp-ink-soft:  #47586b;
  --mp-line:      #dde5ee;
  --mp-brand:     var(--mp-teal-600);
  --mp-brand-ink: #0a5d54;
  --mp-on-brand:  #ffffff;

  --mp-ok:   #0e7a5f;
  --mp-warn: #8a5a00;
  --mp-err:  #a52121;
  --mp-star: #d98324;

  --mp-hero-1: var(--mp-navy-800);
  --mp-hero-2: var(--mp-navy-600);
  --mp-hero-ink: #ffffff;
  --mp-hero-soft: #b9cddd;

  --mp-shadow-sm: 0 1px 2px rgba(9, 26, 43, .06), 0 1px 3px rgba(9, 26, 43, .04);
  --mp-shadow:    0 2px 6px rgba(9, 26, 43, .07), 0 12px 28px -12px rgba(9, 26, 43, .18);
  --mp-shadow-lg: 0 8px 24px rgba(9, 26, 43, .10), 0 32px 64px -24px rgba(9, 26, 43, .28);

  --mp-r-sm: 8px;
  --mp-r:    14px;
  --mp-r-lg: 22px;
  --mp-r-full: 999px;

  --mp-wrap: 1160px;
  --mp-ease: cubic-bezier(.2, .7, .3, 1);
}

/* Tryb ciemny. `[data-theme]` ustawia przełącznik, media query obsługuje
   pierwsze wejście — użytkownik z ciemnym systemem nie dostaje białego błysku. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --mp-bg:        #0a1420;
  --mp-surface:   #101f30;
  --mp-surface-2: #16293d;
  --mp-ink:       #e8f0f8;
  --mp-ink-soft:  #a3b6c9;
  --mp-line:      #21384f;
  --mp-brand:     var(--mp-teal-400);
  --mp-brand-ink: #7ee7db;
  --mp-on-brand:  #05231f;

  --mp-ok:   #4ade80;
  --mp-warn: #fbbf24;
  --mp-err:  #fb7185;
  --mp-star: #f5b544;

  --mp-hero-1: #071322;
  --mp-hero-2: #0d2c42;
  --mp-hero-soft: #9fb8cd;

  --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --mp-shadow:    0 2px 8px rgba(0, 0, 0, .45);
  --mp-shadow-lg: 0 20px 60px -20px rgba(0, 0, 0, .7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mp-bg: #0a1420; --mp-surface: #101f30; --mp-surface-2: #16293d;
    --mp-ink: #e8f0f8; --mp-ink-soft: #a3b6c9; --mp-line: #21384f;
    --mp-brand: var(--mp-teal-400); --mp-brand-ink: #7ee7db; --mp-on-brand: #05231f;
    --mp-ok: #4ade80; --mp-warn: #fbbf24; --mp-err: #fb7185; --mp-star: #f5b544;
    --mp-hero-1: #071322; --mp-hero-2: #0d2c42; --mp-hero-soft: #9fb8cd;
    --mp-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --mp-shadow: 0 2px 8px rgba(0,0,0,.45);
    --mp-shadow-lg: 0 20px 60px -20px rgba(0,0,0,.7);
  }
}

/* ── podstawy ────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Układ „lepka stopka". Na krótkich podstronach (pusta kategoria, komunikat,
   logowanie) treść nie sięga dołu okna. Bez tego pod stopką zostaje pas
   samego tła — wygląda dokładnie jak rozjechany układ, bo stopka wisi
   w połowie ekranu zamiast go domykać. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--mp-bg);
  color: var(--mp-ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(28px, 3.4vw, 44px); }
h2 { font-size: clamp(21px, 2.1vw, 27px); }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; }

a { color: var(--mp-brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mp-brand); }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--mp-teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mp-surface); color: var(--mp-ink);
  padding: 12px 18px; border-radius: 0 0 var(--mp-r-sm) 0; box-shadow: var(--mp-shadow);
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 32px, var(--mp-wrap)); margin-inline: auto; }

/* ── nagłówek ────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--mp-surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--mp-line);
}
.top-in { display: flex; align-items: center; gap: 20px; padding: 12px 0; }

/* Nazwa serwisu MUSI być jednym elementem. Przy `display: inline-flex`
   każdy węzeł tekstowy staje się osobnym elementem siatki i `gap`
   rozsuwa „Medi" oraz „pedio" na dziesięć pikseli. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mp-ink); font-weight: 800; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--mp-teal-500), var(--mp-navy-600));
  box-shadow: var(--mp-shadow-sm);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand em { font-style: normal; color: var(--mp-brand-ink); }

.quick { flex: 1 1 320px; max-width: 460px; display: flex; gap: 0; }
.quick input {
  flex: 1; min-width: 0; padding: 9px 14px;
  border: 1px solid var(--mp-line); border-right: 0;
  border-radius: var(--mp-r-full) 0 0 var(--mp-r-full);
  background: var(--mp-bg); color: inherit; font: inherit;
}
.quick button {
  padding: 9px 18px; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  border-radius: 0 var(--mp-r-full) var(--mp-r-full) 0;
  background: var(--mp-brand); color: var(--mp-on-brand);
}
.quick button:hover { filter: brightness(1.08); }

/* `flex-wrap` na pasku nawigacji nie jest kosmetyką: przy wąskim ekranie
   (ok. 380 px i mniej) suma linków i przełącznika motywu przekracza szerokość
   ekranu, a bez zawijania cała STRONA dostaje poziomy pasek przewijania —
   nie tylko nagłówek. Objaw jest mylący, bo winna jest nawigacja, a odjeżdża
   treść. `justify-content: flex-end` trzyma zawinięte pozycje przy prawej. */
.top nav {
  margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; gap: 6px; font-size: 15px; min-width: 0;
}
.top nav a { color: var(--mp-ink-soft); text-decoration: none; padding: 7px 12px; border-radius: var(--mp-r-full); font-weight: 500; }
.top nav a:hover { background: var(--mp-surface-2); color: var(--mp-ink); }
.top nav a.cta { background: var(--mp-brand); color: var(--mp-on-brand); font-weight: 600; }
.top nav a.cta:hover { filter: brightness(1.08); background: var(--mp-brand); }
.top nav .link { background: none; border: 0; color: var(--mp-ink-soft); cursor: pointer; font: inherit; padding: 7px 12px; border-radius: var(--mp-r-full); }
.top nav .link:hover { background: var(--mp-surface-2); color: var(--mp-ink); }

/* `padding: 0` NIE jest ozdobnikiem: bez niego przycisk dziedziczy
   `padding: 11px 24px` z ogólnej reguły `button`, przy szerokości 38px
   i `box-sizing: border-box` pole treści wychodzi ujemne, a ikona
   (z `max-width: 100%`) dostaje szerokość 0 i znika bez śladu w konsoli. */
.theme-toggle {
  width: 38px; height: 38px; flex: none; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-full);
  background: var(--mp-surface); color: var(--mp-ink-soft); cursor: pointer;
}
.theme-toggle:hover { color: var(--mp-brand-ink); border-color: var(--mp-brand); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .icon-sun, .icon-moon { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
  :root[data-theme="light"] .icon-sun { display: block; }
  :root[data-theme="light"] .icon-moon { display: none; }
}

/* Szerokość treści ustawiamy na BEZPOŚREDNICH dzieciach `main`, a nie przez
   dodatkowy kontener w każdym szablonie. Dzięki temu istniejące podstrony
   (kontakt, regulamin, konto…) trafiają w kolumnę bez żadnych zmian, a sekcje
   pełnoszerokie — hero — po prostu się z tej reguły wypisują. */
main { display: block; flex: 1 0 auto; }
main > * { width: min(100% - 32px, var(--mp-wrap)); margin-inline: auto; }
main > .hero,
main > .detail-hero { width: 100%; max-width: none; }
/* Pierwszy element na podstronie bez hero nie może dotykać paska nagłówka. */
main > *:first-child:not(.hero):not(.detail-hero) { margin-top: 34px; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--mp-hero-1), var(--mp-hero-2));
  color: var(--mp-hero-ink);
  padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px);
  margin-bottom: 40px;
}

/* Siatka i poświata — czysty CSS, żadnych obrazów do pobrania.
   `pointer-events: none`, żeby dekoracja nie przechwytywała kliknięć. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(45, 212, 191, .22), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(20, 165, 148, .16), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { font-size: clamp(32px, 5.2vw, 56px); max-width: 15ch; margin-bottom: 14px; }
.hero .lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--mp-hero-soft); max-width: 62ch; margin-bottom: 28px; }
.hero strong { color: #fff; }

.search-big {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px;
  background: var(--mp-surface); border-radius: var(--mp-r-lg);
  box-shadow: var(--mp-shadow-lg); max-width: 820px;
}
.search-big input[type=search] {
  flex: 1 1 260px; min-width: 0; padding: 14px 18px; font: inherit; font-size: 16.5px;
  border: 0; border-radius: var(--mp-r); background: transparent; color: var(--mp-ink);
}
.search-big select {
  flex: 0 1 210px; padding: 14px 16px; font: inherit;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r);
  background: var(--mp-bg); color: var(--mp-ink);
}
.search-big button {
  flex: 0 0 auto; padding: 14px 30px; border: 0; border-radius: var(--mp-r);
  background: var(--mp-brand); color: var(--mp-on-brand);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: transform .18s var(--mp-ease), filter .18s var(--mp-ease);
}
.search-big button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.search-big button:active { transform: translateY(0); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 30px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.hero-stats span { font-size: 13.5px; color: var(--mp-hero-soft); text-transform: uppercase; letter-spacing: .06em; }

/* ── karty i sekcje ──────────────────────────────────────────────────────── */

.section { margin-bottom: 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head p { color: var(--mp-ink-soft); margin: 0; }
.section-head a { font-weight: 600; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }

.card {
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-r); padding: 24px; margin-bottom: 24px;
  box-shadow: var(--mp-shadow-sm);
}
.card.narrow { max-width: 640px; }
main > .wrap > .card:first-child { margin-top: 32px; }

/* ── kafelki rodzajów placówek ───────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.tiles a {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 20px; text-decoration: none; color: inherit;
  background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-r);
  box-shadow: var(--mp-shadow-sm);
  transition: transform .2s var(--mp-ease), box-shadow .2s var(--mp-ease), border-color .2s var(--mp-ease);
}
.tiles a:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow); border-color: var(--mp-brand); }
.tile-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--mp-teal-500) 20%, transparent), color-mix(in srgb, var(--mp-navy-600) 16%, transparent));
  color: var(--mp-brand-ink);
}
.tile-icon svg { width: 22px; height: 22px; }
.tiles b { font-size: 16.5px; }
.tiles small { color: var(--mp-ink-soft); }

/* ── chipy (miasta, filtry) ──────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip, .chips a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--mp-r-full);
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  color: var(--mp-ink); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: border-color .15s var(--mp-ease), background .15s var(--mp-ease);
}
.chip:hover, .chips a:hover { border-color: var(--mp-brand); background: var(--mp-surface-2); color: var(--mp-ink); }
.chip.on { background: var(--mp-brand); border-color: var(--mp-brand); color: var(--mp-on-brand); }
.chip.on:hover { background: var(--mp-brand); color: var(--mp-on-brand); }
.count { font-size: 12.5px; color: var(--mp-ink-soft); font-variant-numeric: tabular-nums; }
/* Liczba przy nagłówku sekcji. Bez tego przy foncie 44 px zostaje po niej
   samotna cyferka wielkości 12 px, wyglądająca jak błąd składu. */
h1 > .count, h2 > .count {
  display: inline-block; vertical-align: middle; margin-left: 12px;
  padding: 4px 12px; border-radius: var(--mp-r-full);
  background: var(--mp-surface-2); border: 1px solid var(--mp-line);
  font-size: 15px; font-weight: 600; color: var(--mp-ink-soft);
}
.chip.on .count { color: inherit; opacity: .8; }

/* ── wyniki wyszukiwania ─────────────────────────────────────────────────── */

.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px; margin-bottom: 20px;
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-r); box-shadow: var(--mp-shadow-sm);
}
/* ⚠ SELEKTORY Z `[type=…]` SĄ TU OBOWIĄZKOWE I NIE WOLNO ICH UPRASZCZAĆ.

   Sekcja „formularze" niżej w tym pliku ustawia `input[type=text], input[type=search],
   … { width: 100% }`. To selektor o specyficzności (0,1,1) — DOKŁADNIE takiej samej
   jak `.filters input`. Przy remisie wygrywa reguła późniejsza w pliku, więc
   `.filters input { width: auto }` przegrywało po cichu: każdy filtr rozciągał się
   na całą szerokość, zajmował osobny wiersz i pasek filtrów rozjeżdżał się na pół
   ekranu. Dokładnie tak wyglądało `/leki` — a komentarz obok tej reguły od dawna
   OPISYWAŁ tę awarię jako coś, czemu rzekomo zapobiega.

   `.filters input[type=search]` ma specyficzność (0,2,1) i wygrywa niezależnie od
   kolejności w pliku. Kolejność sekcji może się jeszcze zmienić — specyficzność nie.

   Zmiana `.filters input[type=…]` z powrotem na `.filters input` przywróci błąd
   i nie będzie tego widać w żadnym teście PHP, bo to wyłącznie warstwa CSS. */
.filters input[type=text],
.filters input[type=search],
.filters input[type=number],
.filters select {
  width: auto; padding: 9px 12px;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-bg); color: inherit; font: inherit;
}

/* ⚠ `>` W TYCH DWÓCH REGUŁACH JEST KONIECZNE.
   `flex-basis` liczy się wzdłuż osi RODZICA. Pasek filtrów jest poziomy, więc
   `flex: 1 1 220px` znaczy tam „220 px szerokości" — ale to samo pole wewnątrz
   `<label>` (a etykieta jest kolumną) dostaje 220 px WYSOKOŚCI i zamienia się
   w kwadratowy blok na pół ekranu. Selektor potomka trafiłby w oba przypadki. */
.filters > input[type=search] { flex: 1 1 220px; min-width: 0; }
.filters > input[type=text]   { flex: 0 1 200px; min-width: 0; }
.filters > select { flex: 0 1 auto; }

/* Etykieta w pasku filtrów nie jest akapitem formularza — globalne
   `label { display: block; margin-bottom: 14px }` psułoby tu wyrównanie. */
.filters label {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
  flex: 1 1 220px; min-width: 0;
}
.filters label:has(select) { flex: 0 1 auto; }
.filters label > span { font-size: 13px; color: var(--mp-ink-soft); }
.filters label > input, .filters label > select { width: 100%; flex: none; }
.filters button { padding: 9px 20px; border: 0; border-radius: var(--mp-r-sm); background: var(--mp-brand); color: var(--mp-on-brand); font: inherit; font-weight: 600; cursor: pointer; }
.inline-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--mp-ink-soft); }

.facet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.facet-label { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-ink-soft); font-weight: 600; }

/* Prosty układ listy — leki, profile w koncie, placówki na stronie lekarza.
   Te listy mają dwa pola (nazwa + opis) i karta z ikoną byłaby dla nich
   przerostem formy.

   ⚠ `:not(.wynik)` NIE JEST OZDOBNIKIEM. `.results li` ma wyższą
   specyficzność niż `.wynik` (typ + klasa kontra sama klasa), więc bez tego
   wykluczenia ta reguła nadpisywałaby siatkę kart placówek: ikona lądowała
   w szerokiej kolumnie, a treść uciekała na prawą stronę. Wyglądało to jak
   błąd w nowym kodzie, a było pozostałością po starym. */
.results li:not(.wynik) {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start;
  padding: 18px 20px;
  background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-r);
  box-shadow: var(--mp-shadow-sm);
  transition: transform .18s var(--mp-ease), box-shadow .18s var(--mp-ease), border-color .18s var(--mp-ease);
}
.results li:not(.wynik):hover { transform: translateY(-2px); box-shadow: var(--mp-shadow); border-color: var(--mp-brand); }
.results li:not(.wynik) .name { grid-column: 1; font-size: 17.5px; font-weight: 650; text-decoration: none; color: var(--mp-ink); }
/* Cała pozycja klikalna, ale w DOM zostaje jeden link — czytnik ekranu
   nie ogłasza trzech identycznych odnośników do tego samego miejsca. */
.results li:not(.wynik) .name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.results li:not(.wynik):hover .name { color: var(--mp-brand-ink); }
.results li:not(.wynik) .addr { grid-column: 1; grid-row: 2; color: var(--mp-ink-soft); font-size: 14.5px; }
.results li:not(.wynik) .badge,
.results li:not(.wynik) .stars,
.results li:not(.wynik) .dist { grid-column: 2; justify-self: end; }
.results li:not(.wynik) .dist { color: var(--mp-ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ⚠ STARY UKŁAD KART PLACÓWEK USUNIĘTY — patrz „Karta wyniku" na końcu pliku.
   Reguła `.results li` miała wyższą specyficzność niż `.wynik` (typ + klasa
   kontra sama klasa), więc po przepisaniu kart nadal wygrywała i narzucała
   dwie kolumny zamiast trzech: ikona lądowała w szerokiej kolumnie, a treść
   uciekała na prawą stronę. Wyglądało to jak błąd w nowym kodzie, a było
   pozostałością po starym. Wszystkie listy używają teraz klasy `.wynik`. */

.badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--mp-r-full);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--mp-surface-2); color: var(--mp-ink-soft); border: 1px solid var(--mp-line);
}
.badge.nfz { background: color-mix(in srgb, var(--mp-ok) 14%, transparent); color: var(--mp-ok); border-color: color-mix(in srgb, var(--mp-ok) 35%, transparent); }
.stars { color: var(--mp-star); letter-spacing: .06em; white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; color: var(--mp-ink-soft); }
.pager a { text-decoration: none; padding: 9px 18px; border: 1px solid var(--mp-line); border-radius: var(--mp-r-full); background: var(--mp-surface); font-weight: 600; }
.pager a:hover { border-color: var(--mp-brand); }

.empty { color: var(--mp-ink-soft); padding: 28px; text-align: center; }

/* ── strona placówki ─────────────────────────────────────────────────────── */

.detail-hero {
  background: linear-gradient(155deg, var(--mp-hero-1), var(--mp-hero-2));
  color: var(--mp-hero-ink); padding: 40px 0 34px; margin-bottom: 32px;
  position: relative; overflow: hidden;
}
.detail-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 90% 0%, rgba(45,212,191,.2), transparent 65%);
}
.detail-hero > * { position: relative; }
.detail-hero h1 { margin-bottom: 8px; }
.detail-hero .addr { color: var(--mp-hero-soft); font-size: 16.5px; margin: 0; }
.detail-hero .badge { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.detail-hero .badge.nfz { background: rgba(45,212,191,.2); color: #9df0e4; border-color: rgba(45,212,191,.45); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cols aside { position: sticky; top: 84px; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.facts dt { color: var(--mp-ink-soft); font-size: 14px; }
.facts dd { margin: 0; font-weight: 550; }
.source { color: var(--mp-ink-soft); font-size: 13.5px; border-top: 1px solid var(--mp-line); padding-top: 12px; margin-top: 16px; }

.rating-big { display: flex; align-items: center; gap: 16px; }
.rating-big b { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.review { border-top: 1px solid var(--mp-line); padding: 18px 0; }
.review:first-of-type { border-top: 0; }
.review header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14.5px; color: var(--mp-ink-soft); }
.review h3 { margin: 0 0 6px; }
.review time { font-variant-numeric: tabular-nums; }

/* ── formularze ──────────────────────────────────────────────────────────── */

label { display: block; margin-bottom: 14px; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=url], select, textarea {
  width: 100%; padding: 11px 14px; font: inherit;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-surface); color: var(--mp-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--mp-brand); }
textarea { min-height: 140px; resize: vertical; }
button, .btn {
  display: inline-block; padding: 11px 24px; font: inherit; font-weight: 650; cursor: pointer;
  border: 1px solid var(--mp-brand); border-radius: var(--mp-r-sm);
  background: var(--mp-brand); color: var(--mp-on-brand); text-decoration: none;
  transition: filter .15s var(--mp-ease), transform .15s var(--mp-ease);
}
button:hover, .btn:hover { filter: brightness(1.08); color: var(--mp-on-brand); }
button:active { transform: translateY(1px); }
button.secondary, .btn.secondary { background: var(--mp-surface); color: var(--mp-ink); border-color: var(--mp-line); }
button.link { background: none; border: 0; padding: 0; color: inherit; font-weight: inherit; }
form.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
form.inline label { margin: 0; }
.hp { position: absolute !important; left: -9999px !important; }   /* pułapka na boty */

/* ── komunikaty ──────────────────────────────────────────────────────────── */

.flash, .warn, .error, .notice {
  padding: 13px 16px; border-radius: var(--mp-r-sm); margin-bottom: 18px;
  border: 1px solid; font-size: 15px;
}
.flash  { background: color-mix(in srgb, var(--mp-ok) 10%, var(--mp-surface));  border-color: color-mix(in srgb, var(--mp-ok) 34%, transparent);  color: var(--mp-ok); }
.warn, .notice { background: color-mix(in srgb, var(--mp-warn) 10%, var(--mp-surface)); border-color: color-mix(in srgb, var(--mp-warn) 34%, transparent); color: var(--mp-warn); }
.error  { background: color-mix(in srgb, var(--mp-err) 10%, var(--mp-surface)); border-color: color-mix(in srgb, var(--mp-err) 34%, transparent); color: var(--mp-err); }
.hint { color: var(--mp-ink-soft); font-size: 14.5px; }
.hint.small { font-size: 13.5px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mp-line); }
th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--mp-ink-soft); }
code { background: var(--mp-surface-2); padding: 2px 6px; border-radius: 5px; font-size: 13.5px; }

/* ── zaufanie: skąd dane ─────────────────────────────────────────────────── */

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.trust div { padding: 22px; background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-r); }
.trust b { display: block; margin-bottom: 6px; font-size: 16.5px; }
.trust p { margin: 0; color: var(--mp-ink-soft); font-size: 14.5px; }

/* ── stopka ──────────────────────────────────────────────────────────────── */

.bottom {
  flex: none;
  margin-top: 64px; padding: 44px 0 32px;
  background: var(--mp-navy-900); color: #b9cddd;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
/* W trybie ciemnym tło strony jest już prawie czarne, więc jeszcze ciemniejsza
   stopka po prostu znika. Rozjaśniamy ją i dokładamy krawędź — stopka ma być
   widocznym zakończeniem strony, a nie kolejnym kawałkiem tła. */
:root[data-theme="dark"] .bottom { background: #14283c; border-top-color: #24455f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bottom { background: #14283c; border-top-color: #24455f; }
  :root[data-theme="light"] .bottom { background: var(--mp-navy-900); border-top-color: rgba(255,255,255,.07); }
}
.bottom a { color: #dbe9f4; text-decoration: none; }
.bottom a:hover { color: #fff; text-decoration: underline; }
/* Jawne cztery kolumny zamiast `repeat(auto-fit, …)` po torze `1.6fr`:
   przy takim zestawie auto-fit potrafi zwinąć całą stopkę do jednej kolumny,
   co wygląda jak zepsuty układ, a nie jak decyzja projektowa. */
.bottom-cols { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 28px; }
@media (max-width: 780px) { .bottom-cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 440px) { .bottom-cols { grid-template-columns: 1fr; } }
.bottom h3 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
.bottom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.bottom .fine { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: 13.5px; color: #8fa9be; }
.bottom .wordmark { display: block; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.02em; margin-bottom: 12px; }
.bottom .wordmark em { font-style: normal; color: #5eead4; }
.footer-links { margin-top: 16px; font-size: 13.5px; opacity: .8; }

/* ── wąskie ekrany ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .cols aside { position: static; }
  .top-in { flex-wrap: wrap; row-gap: 10px; gap: 12px; }
  .quick { order: 3; flex-basis: 100%; max-width: none; }
  .top nav { margin-left: auto; gap: 2px; }
  .top nav a { padding: 6px 9px; font-size: 14.5px; }
  .top nav a.cta { white-space: nowrap; }
}

@media (max-width: 700px) {
  /* Na wąskim ekranie nagłówek musi zmieścić markę, wyszukiwarkę i logowanie.
     Odnośniki katalogu są w stopce i w treści strony — tu ustępują miejsca. */
  .top nav a[href="/katalog"],
  .top nav a[href="/specjalizacje"],
  .top nav a[href="/leki"] { display: none; }
}

@media (max-width: 560px) {
  /* ⚠ Przy `flex-direction: column` skrót `flex: 1 1 260px` z układu poziomego
     zaczyna oznaczać WYSOKOŚĆ 260 px, nie szerokość — pole wyszukiwania
     rozdymało się wtedy na pół ekranu. Dlatego jawnie zerujemy `flex`. */
  .search-big { flex-direction: column; }
  .search-big input[type=search],
  .search-big select,
  .search-big button { flex: 0 0 auto; width: 100%; }
  /* Karty placówek mają własny układ mobilny w sekcji „Karta wyniku"
     na końcu pliku — tu tylko listy proste. */
  .results li:not(.wynik) { grid-template-columns: 1fr; }
  .results li:not(.wynik) .badge,
  .results li:not(.wynik) .stars,
  .results li:not(.wynik) .dist { grid-column: 1; justify-self: start; }
  .hero-stats { gap: 12px 26px; }
}

/* ── ruch ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .top, .bottom, .filters, .search-big { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ── elementy pozostałych podstron ───────────────────────────────────────── */

.access { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.access li { padding: 7px 14px; border-radius: var(--mp-r-full); border: 1px solid var(--mp-line); background: var(--mp-surface); font-size: 14.5px; }
.access li.yes { color: var(--mp-ok); border-color: color-mix(in srgb, var(--mp-ok) 35%, transparent); background: color-mix(in srgb, var(--mp-ok) 9%, var(--mp-surface)); }
.access li.no  { color: var(--mp-ink-soft); }

.queues td, .queues th { font-size: 14.5px; }
.queues td:nth-child(3) { font-variant-numeric: tabular-nums; font-weight: 600; }

.owner { color: var(--mp-ok); font-weight: 600; }
.muted, .small { color: var(--mp-ink-soft); }
.small { font-size: 13.5px; }

.claim, article.claim { border-left: 3px solid var(--mp-line); padding-left: 16px; }
.claim.disputed { border-left-color: var(--mp-err); }

.spam { font-size: 12.5px; padding: 2px 9px; border-radius: var(--mp-r-full); background: color-mix(in srgb, var(--mp-warn) 14%, transparent); color: var(--mp-warn); }

.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; list-style: none; margin: 0 0 20px; padding: 0; }
.counters li { background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 16px; display: flex; flex-direction: column; }
.counters strong { font-size: 26px; font-weight: 800; }
.counters span { font-size: 13.5px; color: var(--mp-ink-soft); }

.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.tabs a { text-decoration: none; padding: 7px 14px; border-radius: var(--mp-r-full); border: 1px solid var(--mp-line); background: var(--mp-surface); color: var(--mp-ink); font-size: 14.5px; }
.tabs a.on { background: var(--mp-brand); border-color: var(--mp-brand); color: var(--mp-on-brand); font-weight: 600; }

.stars { font-size: 15px; }
.who { color: var(--mp-ink-soft); }

/* ── Ostrzeżenie o decyzji GIF ───────────────────────────────────────────────
   Ramka celowo mocniejsza niż zwykła karta: to jedyna treść na stronie leku,
   która może wymagać od czytającego natychmiastowego działania (sprawdzenia
   serii na opakowaniu). Kolor bierzemy ze zmiennej --mp-err, więc tryb ciemny
   dostaje kontrast bez osobnej reguły.

   Ostrzeżenie NIE jest oparte wyłącznie na kolorze — ma nagłówek, etykietę
   z nazwą rozstrzygnięcia i role="alert". Sam czerwony pasek byłby niewidoczny
   dla czytnika ekranu i dla osoby nierozróżniającej barw. */
.card.alert-gif {
  border: 2px solid color-mix(in srgb, var(--mp-err) 55%, transparent);
  background: color-mix(in srgb, var(--mp-err) 6%, var(--mp-surface));
}
.card.alert-gif > h2 { color: var(--mp-err); }
.gif-item {
  border-top: 1px solid color-mix(in srgb, var(--mp-err) 25%, transparent);
  margin-top: 14px;
  padding-top: 12px;
}
.gif-item:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.badge.badge-warn {
  background: color-mix(in srgb, var(--mp-err) 14%, transparent);
  color: var(--mp-err);
  border-color: color-mix(in srgb, var(--mp-err) 40%, transparent);
}

/* ── Log techniczny: szczegóły wpisu ─────────────────────────────────────────
   Treść błędu jest domyślnie rozwinięta (patrz komentarz w templates/admin/logi.php),
   więc musi być czytelna bez klikania: monospace, zawijanie długich linii
   i ograniczona wysokość, żeby jeden stos wywołań nie zepchnął reszty logu
   poza ekran. */
.adm-wrap details > pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--mp-surface-2);
  border-left: 3px solid var(--mp-line);
  border-radius: 4px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow: auto;
}
.adm-wrap details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--mp-ink-soft);
}

/* ── Karta wyniku: apteki, przychodnie, szpitale, laboratoria ─────────────────
   Wspólna dla katalogu i wyszukiwarki (templates/_wynik.php).

   Układ to trzy kolumny: ikona rodzaju, treść, prawa szpalta z oceną.
   Ikona nie jest ozdobnikiem — przy liście kilkudziesięciu pozycji pozwala
   odróżnić aptekę od laboratorium bez czytania, a to jest właśnie to,
   co robi oko skanujące wyniki.

   Cała karta jest klikalna przez nakładkę na nazwie, ale telefon i strona
   muszą zostać NAD nią — inaczej kliknięcie w numer otwierałoby profil
   placówki zamiast dzwonić. */
/* ⚠ `margin-block`, NIE `margin`.
   Szerokość kolumny treści ustawia reguła `main > * { margin-inline: auto }`.
   Skrót `margin: 0` ma wyższą specyficzność (klasa kontra `main > *`) i stoi
   niżej w pliku, więc ZERUJE tamto wyśrodkowanie — lista wyników przyklejała
   się do lewej krawędzi okna, podczas gdy nagłówek i filtry zostawały
   w kolumnie. Na szerokim monitorze wyglądało to jak rozjechana strona
   i było tym gorzej widoczne, im węższe okno (przy 1287 px przesunięcie
   wynosiło 64 px, przy 1900 px już ponad 350 px). */
.results { list-style: none; margin-block: 0; padding: 0; display: grid; gap: 14px; }

.wynik {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 4px 16px;
  align-items: start;
  padding: 18px 20px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r);
  box-shadow: var(--mp-shadow-sm);
  transition: transform .2s var(--mp-ease), box-shadow .2s var(--mp-ease),
              border-color .2s var(--mp-ease);
}

/* Kolorowa krawędź po lewej — nośnik rodzaju placówki, czytelny nawet
   w skanie peryferyjnym. Domyślnie neutralna, każdy rodzaj ją nadpisuje. */
.wynik::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--wynik-akcent, var(--mp-line));
  transition: top .2s var(--mp-ease), bottom .2s var(--mp-ease);
}

.wynik:hover { transform: translateY(-2px); box-shadow: var(--mp-shadow); border-color: color-mix(in srgb, var(--wynik-akcent, var(--mp-brand)) 45%, var(--mp-line)); }
.wynik:hover::before { top: 6px; bottom: 6px; }

/* Rodzaje. Kolory dobrane tak, żeby żaden nie udawał stanu („zamknięte",
   „błąd") — to etykieta kategorii, nie ostrzeżenie. */
.wynik--pharmacy  { --wynik-akcent: var(--mp-teal-600); }
.wynik--hospital  { --wynik-akcent: #2563a8; }
.wynik--clinic    { --wynik-akcent: #5b6ec9; }
.wynik--practice  { --wynik-akcent: #7c5cbf; }
.wynik--lab       { --wynik-akcent: #0f8a8a; }
.wynik--wholesale { --wynik-akcent: #8a6a2f; }

.wynik__ikona {
  grid-column: 1; grid-row: 1 / span 3;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--wynik-akcent, var(--mp-brand)) 12%, transparent);
  color: var(--wynik-akcent, var(--mp-brand));
  transition: background .2s var(--mp-ease);
}
.wynik__ikona svg { width: 24px; height: 24px; }
.wynik:hover .wynik__ikona { background: color-mix(in srgb, var(--wynik-akcent, var(--mp-brand)) 20%, transparent); }

.wynik__tresc { grid-column: 2; min-width: 0; }

.wynik__nazwa {
  display: inline-block;
  font-size: 17.5px; font-weight: 650; line-height: 1.3;
  text-decoration: none; color: var(--mp-ink);
}
/* Nakładka robi klikalną całą kartę, ale w DOM zostaje JEDEN link do
   placówki — czytnik ekranu nie ogłasza wtedy trzech identycznych
   odnośników do tego samego miejsca. */
.wynik__nazwa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wynik:hover .wynik__nazwa { color: var(--mp-brand-ink); }

/* Obrys klawiaturowy rysujemy na całej karcie, a nie na samym tekście —
   inaczej użytkownik klawiatury widzi ramkę wokół dwóch słów w środku
   kafelka i nie wie, co właściwie jest zaznaczone. */
.wynik__nazwa:focus-visible { outline: none; }
.wynik:has(.wynik__nazwa:focus-visible) {
  outline: 3px solid var(--mp-brand);
  outline-offset: 2px;
}

.wynik__meta {
  margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  color: var(--mp-ink-soft); font-size: 14.5px;
}
.wynik__typ {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wynik-akcent, var(--mp-brand));
}
.wynik__adres { min-width: 0; }

.wynik__akcje { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wynik__akcja {
  position: relative; z-index: 1;            /* nad nakładką nazwy */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--mp-r-full);
  border: 1px solid var(--mp-line); background: var(--mp-surface-2);
  color: var(--mp-ink-soft); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color .15s var(--mp-ease), color .15s var(--mp-ease);
}
.wynik__akcja svg { width: 15px; height: 15px; }
.wynik__akcja:hover { border-color: var(--mp-brand); color: var(--mp-brand-ink); }

.wynik__prawa {
  grid-column: 3; grid-row: 1 / span 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  text-align: right;
}

.wynik__ocena { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.wynik__ocena strong { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--mp-ink); }
.wynik__ocena small { color: var(--mp-ink-soft); font-size: 12px; }
.wynik__ocena .stars { font-size: 12.5px; }
.wynik__ocena--slaba small { font-style: italic; }

.wynik__dystans {
  color: var(--mp-ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600;
}

/* Telefon w jednej linii z resztą na wąskim ekranie robi z karty schody —
   na telefonie prawa szpalta wraca pod treść i układa się poziomo. */
@media (max-width: 620px) {
  .wynik { grid-template-columns: 38px 1fr; padding: 15px 16px; }
  .wynik__ikona { width: 38px; height: 38px; border-radius: 10px; grid-row: 1; }
  .wynik__ikona svg { width: 20px; height: 20px; }
  .wynik__tresc { grid-column: 2; }
  .wynik__prawa {
    grid-column: 1 / -1; grid-row: auto;
    flex-direction: row; align-items: center; gap: 12px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mp-line);
    text-align: left;
  }
  .wynik__ocena { flex-direction: row; align-items: baseline; gap: 6px; }
}

/* Ruch jest ozdobą, nie funkcją — kto go wyłączył, ma dostać statyczną kartę,
   a nie kartę, która „prawie" się nie rusza. */
@media (prefers-reduced-motion: reduce) {
  .wynik, .wynik::before, .wynik__ikona, .wynik__akcja { transition: none; }
  .wynik:hover { transform: none; }
}

/* ── Kafelki kwadratowe ──────────────────────────────────────────────────────
   Wariant listy: zamiast pasów przez całą szerokość — siatka kwadratów.

   ⚠ KWADRAT MA TWARDY BUDŻET WYSOKOŚCI i to jest cała trudność tego układu.
   Przy szerokości 250 px kafelek ma 250 px wysokości — a mieści się w nim
   ikona, nazwa, rodzaj, adres i telefon. Pierwsze podejście wpychało jeszcze
   ocenę osobnym wierszem i treść zaczęła na siebie nachodzić: numer telefonu
   lądował na liczbie opinii, a nazwa znikała pod spodem.

   Rozwiązanie: ocena i NFZ idą do prawego górnego rogu, obok ikony, zamiast
   zajmować własny wiersz. Odzyskany wiersz dostaje nazwa.

   Nazwy praktyk lekarskich bywają zdaniami („NEFROMEDICA Specjalistyczne
   Centrum Medyczne — Brzeg Dolny Spółka z ograniczoną odpowiedzialnością"),
   więc przycięcie jest nieuniknione. Robimy je JAWNIE, wielokropkiem,
   a pełna nazwa zostaje w `title` i na stronie placówki. */
.results--kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.results--kafelki .wynik {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  padding: 18px;
  gap: 0;
}

/* Krawędź rodzaju biegnie u góry, nie z boku — w kwadracie pionowa kreska
   po lewej wygląda jak przypadkowy element, pozioma czyta się jak nagłówek. */
.results--kafelki .wynik::before {
  left: 14px; right: 14px; top: 0; bottom: auto;
  width: auto; height: 3px;
  border-radius: 0 0 3px 3px;
}
.results--kafelki .wynik:hover::before { left: 6px; right: 6px; }

.results--kafelki .wynik__ikona { margin-bottom: 12px; flex: 0 0 auto; }

/* Ocena i NFZ w rogu, poza normalnym przepływem — nie zabierają wiersza,
   a wzrok i tak trafia tam pierwszy przy przeglądaniu siatki. */
.results--kafelki .wynik__prawa {
  position: absolute; top: 18px; right: 18px;
  flex-direction: row; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0; text-align: right;
}
.results--kafelki .wynik__ocena { flex-direction: row; align-items: baseline; gap: 5px; }
.results--kafelki .wynik__ocena strong { font-size: 17px; }
.results--kafelki .wynik__ocena .stars { display: none; }   /* brakuje na nie miejsca */
.results--kafelki .wynik__ocena small { font-size: 11.5px; }
.results--kafelki .wynik__ocena--slaba { display: none; }   /* „za mało opinii" to nie informacja warta rogu */

.results--kafelki .wynik__tresc {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}

.results--kafelki .wynik__nazwa {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15.5px; line-height: 1.3;
}
.results--kafelki .wynik__meta { flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 5px; }
.results--kafelki .wynik__typ { font-size: 11px; }
.results--kafelki .wynik__adres {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.35;
}

/* Telefon dociśnięty do dolnej krawędzi — inaczej każdy kafelek ma go na
   innej wysokości i siatka wygląda na rozsypaną. */
.results--kafelki .wynik__akcje { margin-top: auto; padding-top: 10px; gap: 6px; }
.results--kafelki .wynik__akcja { padding: 4px 9px; font-size: 12.5px; }

/* Poniżej dwóch kolumn kwadrat przestaje mieć sens: na telefonie jeden
   kafelek na ekran to wielka pusta plama zamiast listy. Wracamy do pasów. */
@media (max-width: 560px) {
  .results--kafelki { grid-template-columns: 1fr; gap: 12px; }
  .results--kafelki .wynik {
    display: grid; grid-template-columns: 38px 1fr;
    aspect-ratio: auto; padding: 15px 16px;
  }
  .results--kafelki .wynik::before {
    left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto;
    border-radius: 0 3px 3px 0;
  }
  .results--kafelki .wynik__ikona { margin-bottom: 0; }
  .results--kafelki .wynik__tresc { grid-column: 2; }
  .results--kafelki .wynik__nazwa { -webkit-line-clamp: unset; font-size: 16.5px; }
  .results--kafelki .wynik__adres { -webkit-line-clamp: unset; }
  .results--kafelki .wynik__prawa { position: static; margin-top: 10px; grid-column: 1 / -1; }
  .results--kafelki .wynik__ocena--slaba { display: block; }
}

/* ── Kolejkometr ─────────────────────────────────────────────────────────────
   Lista terminów. Różni się od karty placówki jedną rzeczą: najważniejsza
   jest DATA, nie nazwa — pacjent skanuje kolumnę dat, a nie nazwy szpitali.
   Dlatego data siedzi w osobnej, wyrównanej szpalcie po prawej i jest
   największym elementem karty. */
.termin { grid-template-columns: 40px 1fr auto; }

.termin__pozycja {
  grid-column: 1; grid-row: 1 / span 3;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--mp-surface-2); color: var(--mp-ink-soft);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Pierwsze trzy pozycje to odpowiedź na pytanie „gdzie najszybciej" —
   dostają akcent, żeby dało się je znaleźć bez czytania. */
.termin:nth-child(-n+3) .termin__pozycja {
  background: color-mix(in srgb, var(--mp-brand) 16%, transparent);
  color: var(--mp-brand-ink);
}

.termin__data {
  grid-column: 3; grid-row: 1 / span 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-align: right; white-space: nowrap;
}
.termin__data strong {
  font-size: 19px; font-variant-numeric: tabular-nums; color: var(--mp-ink);
}
.termin__data small { color: var(--mp-ink-soft); font-size: 12.5px; }
/* Data sprawozdania świadomie przygaszona: to metadana o wiarygodności
   liczby obok, a nie kolejna data do porównywania. */
.termin__stan { opacity: .75; font-size: 11.5px; }

@media (max-width: 620px) {
  .termin { grid-template-columns: 34px 1fr; }
  .termin__pozycja { grid-row: 1; }
  .termin__data {
    grid-column: 1 / -1; grid-row: 3;
    /* `white-space: nowrap` z układu szerokiego zostaje zdjęte razem ze
       zmianą na wiersz: „stan na 2026-08-01" obok terminu i liczby
       oczekujących nie mieści się poniżej ~400 px i wypychało całą stronę
       w poziom. */
    flex-direction: row; flex-wrap: wrap; white-space: normal;
    align-items: baseline; gap: 10px;
    text-align: left; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--mp-line);
  }
}

/* Kolejkometr — przeglądarka świadczeń („top 50").
   Lista jest długa, więc trzy kolumny na szerokim ekranie i jedna na wąskim.
   `<details>` zamiast własnego zwijania: działa bez JS i jest dostępne
   z klawiatury, a strona nie ma ani jednego skryptu (CSP `default-src 'self'`). */
.swiadczenia { margin: 18px 0 0; border-top: 1px solid var(--mp-line); padding-top: 14px; }
.swiadczenia > summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.swiadczenia > summary::-webkit-details-marker { display: none; }
.swiadczenia > summary::before { content: "▸"; color: var(--mp-brand); font-weight: 700; }
.swiadczenia[open] > summary::before { content: "▾"; }
.swiadczenia > summary .hint { font-weight: 400; flex: 1 1 320px; }

.swiadczenia__lista {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 18px;
  counter-reset: none;
}
.swiadczenia__lista li {
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: baseline; gap: 8px;
  padding: 7px 8px; border-radius: var(--mp-r-sm);
}
.swiadczenia__lista li:hover { background: var(--mp-bg); }
.swiadczenia__nr { color: var(--mp-ink-soft); font-variant-numeric: tabular-nums; font-size: 13px; }
.swiadczenia__lista a { color: inherit; text-decoration: none; }
.swiadczenia__lista a:hover { color: var(--mp-brand); text-decoration: underline; }
.swiadczenia__ile {
  color: var(--mp-ink-soft); font-size: 12.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Kolejkometr — gotowe przykłady wyszukiwań i podpowiedzi „czy chodziło o". */
.przyklady { margin: 18px 0 6px; }
.przyklady__tytul { margin: 0 0 10px; color: var(--mp-ink-soft); font-size: 14.5px; }
.przyklady__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.przyklad {
  display: grid; gap: 3px; padding: 12px 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r); background: var(--mp-surface);
  transition: border-color .15s var(--mp-ease), transform .15s var(--mp-ease);
}
.przyklad:hover { border-color: var(--mp-brand); transform: translateY(-1px); color: inherit; }
.przyklad__nazwa { font-weight: 600; }
.przyklad__dane { color: var(--mp-ink-soft); font-size: 13px; }

.podpowiedz {
  margin: 16px 0; padding: 14px 16px;
  border: 1px solid var(--mp-line); border-left: 3px solid var(--mp-brand);
  border-radius: var(--mp-r); background: var(--mp-surface);
}
.podpowiedz p { margin: 0 0 8px; }
.podpowiedz .facet { margin: 0; }
.chip__ile { opacity: .6; font-variant-numeric: tabular-nums; font-size: 12px; margin-left: 5px; }

/* ── katalog: filtry w kolumnie bocznej ──────────────────────────────────── */
/* Fasety miejscowości stały wcześniej NAD wynikami: pięć rzędów kafelków,
   zanim pacjent zobaczył pierwszą placówkę. Przy 230 tys. wpisów to nie jest
   drobiazg estetyczny — filtr, do którego trzeba się przewinąć z powrotem,
   przestaje być używany. */
.katalog { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }

.katalog__filtry {
  position: sticky; top: 84px; align-self: start;
  max-height: calc(100vh - 104px); overflow-y: auto;
  padding: 18px; background: var(--mp-surface);
  border: 1px solid var(--mp-line); border-radius: var(--mp-r);
}
.katalog__filtry-tytul { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mp-ink-soft); }

.filtr { margin-bottom: 20px; }
.filtr:last-child { margin-bottom: 0; }
.filtr h3 { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.filtr ul { list-style: none; margin: 0; padding: 0; }
.filtr li { margin: 0; }
.filtr a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 6px 8px; margin: 0 -8px; border-radius: var(--mp-r-sm);
  color: var(--mp-ink-soft); text-decoration: none; font-size: 14.5px;
}
.filtr a:hover { background: var(--mp-bg); color: var(--mp-ink); }
.filtr a.on { background: var(--mp-brand); color: var(--mp-on-brand); font-weight: 600; }
.filtr a.on .filtr__ile { color: inherit; opacity: .8; }
.filtr a.pusty { opacity: .45; }
.filtr a.wyczysc { color: var(--mp-brand-ink); font-weight: 600; }
.filtr__ile { color: var(--mp-ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.filtr__wiecej { margin-top: 6px; }
.filtr__wiecej > summary { cursor: pointer; font-size: 13px; color: var(--mp-brand-ink); padding: 4px 0; }
.filtr__wiecej > ul { margin-top: 6px; }

.katalog__naglowek { margin-bottom: 18px; }
.katalog__naglowek h1 { margin: 0 0 4px; }
.katalog__podsumowanie { margin: 0 0 12px; color: var(--mp-ink-soft); }
.katalog__podsumowanie strong { color: var(--mp-ink); font-variant-numeric: tabular-nums; }

/* Poniżej ~900 px kolumna boczna nie ma z czego żyć — filtry wracają nad
   wyniki, ale zwinięte, żeby nie odtworzyć problemu, który usuwamy. */
@media (max-width: 900px) {
  .katalog { grid-template-columns: 1fr; gap: 18px; }
  .katalog__filtry { position: static; max-height: none; }
}

/* Trend czasu oczekiwania — wykres rysowany wprost w SVG.
   ⚠ Bez biblioteki i bez skryptu: CSP `default-src 'self'` blokuje jedno
   i drugie, więc każda zewnętrzna biblioteka wykresów byłaby martwym kodem.
   Podpowiedź pod kursorem daje natywny `<title>` w SVG. */
.trend { margin: 22px 0; padding-top: 18px; border-top: 1px solid var(--mp-line); }
.trend h2 { margin: 0 0 4px; font-size: 17px; }
.trend__zmiana { margin: 10px 0 6px; font-size: 15.5px; }
.trend__wykres {
  display: block; width: 100%; height: auto; max-width: 660px; margin: 4px 0 10px;
  color: var(--mp-brand);
}
/* Tekst w wykresie nosi kolor tekstu, nie kolor serii — liczba w barwie
   linii czyta się jak element wykresu, a nie jak wartość do przeczytania. */
.trend__etykieta { fill: var(--mp-ink); font-size: 14px; font-weight: 650; }
.trend__os { fill: var(--mp-ink-soft); font-size: 12px; }
.trend__dane > summary { cursor: pointer; font-size: 14px; color: var(--mp-brand-ink); }
.trend__dane table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.trend__dane th, .trend__dane td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--mp-line); }
.trend__dane th:first-child, .trend__dane td:first-child { text-align: left; }
.trend__dane th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mp-ink-soft); font-weight: 600; }
.trend__dane td { font-variant-numeric: tabular-nums; }

/* ── Rejestr wycofań GIF ─────────────────────────────────────────────────────
   ⚠ POZYCJA NIE JEST JEDNYM WIELKIM ODNOŚNIKIEM — i dlatego wyłączamy tu
   nakładkę `.name::after`. W katalogu placówek cała karta jest klikalna dzięki
   pseudoelementowi rozciągniętemu na `inset: 0`. Tutaj w pozycji są DWA różne
   odnośniki (nasza strona leku i PDF decyzji na serwerze GIF), a przy pozycji
   spoza naszego katalogu `.name` to w ogóle nie link. Nakładka przykryłaby
   odnośnik do treści decyzji: kliknięcie w „treść decyzji (PDF)" prowadziłoby
   na stronę leku albo donikąd.

   Specyficzność wyższa (0,4,1 wobec 0,3,1), a nie „dalej w pliku" — remisy
   rozstrzygane kolejnością już nas w tym pliku kosztowały dwa błędy. */
.results.wycofane li:not(.wynik) { display: block; }
.results.wycofane li:not(.wynik) .name::after { content: none; }
.results.wycofane li:not(.wynik) .name { font-size: 17px; }
.results.wycofane .wyc-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px;
}
.results.wycofane .addr { display: block; }
.results.wycofane li p.small { margin: 8px 0 0; color: var(--mp-ink-soft); }
.results.wycofane li code {
  font-size: 13px; padding: 1px 6px; border-radius: var(--mp-r-sm);
  background: var(--mp-surface-2); border: 1px solid var(--mp-line);
}

/* Skrót na stronie głównej — pięć ostatnich decyzji, bez szczegółów serii. */
.wycofane-krotko { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wycofane-krotko li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--mp-surface);
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
}
/* Pozycja z naszego katalogu jest odnośnikiem, pozycja spoza niego nie — ale
   ta różnica nie może wyglądać jak przypadkowe pogrubienie jednego wiersza.
   Waga pisma zostaje ta sama; klikalność niesie hover, nie tłustość. */
.wycofane-krotko a,
.wycofane-krotko .nazwa { font-weight: 650; text-decoration: none; color: var(--mp-ink); }
.wycofane-krotko a:hover { color: var(--mp-brand-ink); }
.wycofane-krotko small { color: var(--mp-ink-soft); }
/* `margin-left: auto` dosuwa datę do prawej krawędzi, ale przy zawijaniu
   spada do nowego wiersza zamiast wypychać nazwę poza kartę. */
.wycofane-krotko time {
  margin-left: auto; color: var(--mp-ink-soft);
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}

/* ── Katalog leków: zakładki, kafle kategorii, status mieszany ────────────── */

/* Trzeci stan dostępności. Kolor ostrzegawczy, ale nie błędu: to nie jest
   problem, tylko informacja, że odpowiedź brzmi „to zależy od opakowania". */
.badge.badge-mix {
  background: color-mix(in srgb, var(--mp-warn) 14%, transparent);
  color: var(--mp-warn);
  border-color: color-mix(in srgb, var(--mp-warn) 38%, transparent);
}
.detail-hero .badge.badge-mix {
  background: rgba(245, 190, 90, .2); color: #f7d9a2; border-color: rgba(245, 190, 90, .45);
}
/* Plakietki w nagłówku leku są odnośnikami do zakładki katalogu — muszą
   przestać wyglądać jak zwykły link w ciemnym pasku. */
.detail-hero .badge[href] { text-decoration: none; }
.detail-hero .badge[href]:hover { border-color: rgba(255,255,255,.65); }

.zakladki {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 14px; padding: 0;
}
.zakladki > a,
.zakladki > .aktywna {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--mp-r-full);
  border: 1px solid var(--mp-line); background: var(--mp-surface);
  color: var(--mp-ink); text-decoration: none; font-weight: 600;
}
.zakladki > a:hover { border-color: var(--mp-brand); }
.zakladki > .aktywna {
  background: var(--mp-brand); color: var(--mp-on-brand); border-color: var(--mp-brand);
}
.zakladki .count {
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 8px; border-radius: var(--mp-r-full);
  background: var(--mp-surface-2); color: var(--mp-ink-soft);
}
.zakladki > .aktywna .count { background: rgba(255,255,255,.22); color: inherit; }

/* Dwa wejścia w kategorie na stronie startowej leków. `auto-fit` zamiast
   sztywnych dwóch kolumn: przy 380 px kafle mają wtedy pełną szerokość
   bez osobnej reguły medialnej. */
.kafle { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kafle > li > a {
  display: grid; gap: 6px; height: 100%;
  padding: 20px 22px; text-decoration: none; color: var(--mp-ink);
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-r); box-shadow: var(--mp-shadow-sm);
  transition: transform .18s var(--mp-ease), box-shadow .18s var(--mp-ease), border-color .18s var(--mp-ease);
}
.kafle > li > a:hover { transform: translateY(-2px); box-shadow: var(--mp-shadow); border-color: var(--mp-brand); }
.kafle b { font-size: 18px; }
.kafle .ile { font-size: 26px; font-weight: 750; color: var(--mp-brand-ink); font-variant-numeric: tabular-nums; }
.kafle span:last-child { color: var(--mp-ink-soft); font-size: 14.5px; }

/* ── Samopoczucie po stosowaniu leku ─────────────────────────────────────────
   ⚠ Ten blok celowo NIE wygląda jak wykres z badania klinicznego: bez osi,
   bez procentów w dużej czcionce, słupki stonowane. To zestawienie odczuć
   kilkunastu anonimowych osób i forma ma to mówić razem z treścią. */
.samopoczucie { border-top: 1px solid var(--mp-line); margin-top: 18px; padding-top: 16px; }
.samopoczucie .skala { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 7px; }
.samopoczucie .skala li {
  display: grid; grid-template-columns: minmax(120px, 170px) 1fr 34px;
  align-items: center; gap: 12px;
}
.samopoczucie .etykieta { color: var(--mp-ink-soft); font-size: 14.5px; }
.samopoczucie .slupek {
  height: 9px; border-radius: var(--mp-r-full);
  background: var(--mp-surface-2); overflow: hidden;
}
.samopoczucie .slupek > i { display: block; height: 100%; background: var(--mp-brand); }
.samopoczucie .ile {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 650; color: var(--mp-ink-soft);
}
.objawy { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; }
.objawy .badge b { margin-left: 5px; font-variant-numeric: tabular-nums; }

/* Skala przy pojedynczej opinii. „Gorzej" dostaje kolor ostrzegawczy, ale
   nie czerwień błędu — to relacja pacjenta, nie werdykt o leku. */
.badge.samopoczucie-duzo_lepiej,
.badge.samopoczucie-lepiej {
  background: color-mix(in srgb, var(--mp-ok) 12%, transparent);
  color: var(--mp-ok); border-color: color-mix(in srgb, var(--mp-ok) 32%, transparent);
}
.badge.samopoczucie-gorzej {
  background: color-mix(in srgb, var(--mp-warn) 14%, transparent);
  color: var(--mp-warn); border-color: color-mix(in srgb, var(--mp-warn) 38%, transparent);
}

.samopoczucie-pola {
  border: 1px solid var(--mp-line); border-radius: var(--mp-r);
  padding: 16px 18px; margin: 4px 0 2px; background: var(--mp-surface-2);
}
.samopoczucie-pola > legend { padding: 0 8px; font-weight: 650; }
.objawy-wybor {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px;
  margin-bottom: 12px;
}
.objawy-wybor .checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--mp-ink); cursor: pointer;
}
/* Pole wyboru w siatce nie może się rozciągać na całą komórkę — bez tego
   `input { width: 100% }` z formularzy robi z każdego kwadracika pasek. */
.objawy-wybor .checkbox > input[type=checkbox] { width: auto; flex: none; margin: 0; }

/* ── Dostępność architektoniczna ─────────────────────────────────────────────
   Plakietka „wjazd dla wózka" nie jest ozdobą — dla części odwiedzających to
   jedyna informacja, której szukają. Kolor własny, żeby nie zlewała się ani
   z NFZ (zielona), ani z ostrzeżeniem GIF (czerwona). Stan „w części miejsc"
   nosi `badge-mix` z katalogu leków: ta sama forma dla tej samej treści —
   „to zależy". */
.badge.badge-acc {
  background: color-mix(in srgb, var(--mp-brand) 12%, transparent);
  color: var(--mp-brand-ink);
  border-color: color-mix(in srgb, var(--mp-brand) 34%, transparent);
}

/* Filtr udogodnień w kolumnie bocznej katalogu. */
.filtr__acc { display: grid; gap: 7px; }
.filtr__acc label {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--mp-ink); cursor: pointer;
}
.filtr__acc input[type=checkbox] { width: auto; flex: none; margin: 0; }
.filtr__acc .filtr__ile { margin-left: auto; }
.filtr__acc button {
  margin-top: 4px; padding: 7px 16px; border: 0; border-radius: var(--mp-r-sm);
  background: var(--mp-brand); color: var(--mp-on-brand); font: inherit;
  font-weight: 600; cursor: pointer; justify-self: start;
}

/* Lista udogodnień na stronie placówki — trzy stany, nie dwa. */
.access { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.access > li { display: flex; align-items: baseline; gap: 9px; }
.access .stan { color: var(--mp-ink-soft); font-size: 14px; }
.access > li.yes > b { color: var(--mp-ok); }
.access > li.part > b { color: var(--mp-warn); }
.access > li.no > b { color: var(--mp-ink-soft); }
.filtr__acc-lista { list-style: none; margin: 0; padding: 0; }
.filtr__uwaga { margin: 8px 0 0; font-size: 12.5px; color: var(--mp-ink-soft); line-height: 1.5; }

/* ── Logowanie przez Centrum (CCiL) ──────────────────────────────────────────
   Znak rysowany inline. Nic nie pobiera się z Centrum: CSP `default-src 'self'`
   i tak zablokowałby zewnętrzny obrazek, a w serwisie medycznym samo wejście
   na podstronę zdradza informację o zdrowiu — nie wysyłamy adresu IP
   czytelnika stronie trzeciej tylko po to, żeby pokazać logo. */
.rozdzielacz {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--mp-ink-soft); font-size: 13px;
}
.rozdzielacz::before, .rozdzielacz::after {
  content: ""; flex: 1; height: 1px; background: var(--mp-line);
}

.ccil-przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 18px;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-surface); color: var(--mp-ink);
  text-decoration: none; font-weight: 600;
  transition: border-color .14s var(--mp-ease), box-shadow .14s var(--mp-ease);
}
.ccil-przycisk:hover { border-color: var(--mp-brand); box-shadow: var(--mp-shadow-sm); }
.ccil-przycisk svg { flex: 0 0 auto; }

/* ── Klasyfikacja Chorób ICD-10 ────────────────────────────────────────────
   Kod jest tu elementem NAWIGACYJNYM, nie ozdobą: człowiek przychodzi tu
   ze skierowaniem w ręku i skanuje wzrokiem kolumnę kodów, a nie nazwy.
   Dlatego kod ma stałą szerokość, własne tło i nigdy się nie zawija —
   „A00.0" złamane na dwie linie przestaje być kodem. */
.icd-kod {
  display: inline-block; min-width: 76px;
  padding: 2px 8px; margin-right: 10px;
  border-radius: var(--mp-r-sm);
  background: var(--mp-surface-2); color: var(--mp-brand-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 13.5px; white-space: nowrap;
}

.icd-kod-duzy {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 700; letter-spacing: .06em;
  color: var(--mp-hero-soft); font-variant-numeric: tabular-nums;
}

.icd-rozdzialy, .icd-lista, .icd-specjalizacje { list-style: none; margin: 0; padding: 0; }

.icd-lista li { border-bottom: 1px solid var(--mp-line); }
.icd-lista li:last-child { border-bottom: 0; }

.icd-lista a {
  display: flex; align-items: baseline; gap: 2px;
  padding: 11px 6px; text-decoration: none; color: var(--mp-ink);
  border-radius: var(--mp-r-sm);
}
.icd-lista a:hover { background: var(--mp-surface-2); color: var(--mp-brand-ink); }

/* Rozdziały jako siatka kafelków. Jest ich stałe 22, są równorzędne
   i mają krótkie podpisy — czyli dokładnie ten przypadek, w którym
   całość ma się mieścić na jednym ekranie zamiast ciągnąć w dół. */
.icd-rozdzialy {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.icd-rozdzialy li { border: 0; }

.icd-rozdzialy a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 12px 14px; text-decoration: none; color: var(--mp-ink);
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-surface);
}
.icd-rozdzialy a:hover {
  border-color: var(--mp-brand); background: var(--mp-surface-2);
  color: var(--mp-brand-ink);
}

.icd-rozdzial-glowa { display: flex; align-items: center; gap: 8px; }

/* Numer rzymski. Nie jest linkiem ani etykietą — jest znacznikiem
   porządkowym, żeby oko miało się czego złapać w dwudziestu dwóch
   nazwach zaczynających się tym samym słowem. */
.icd-numer {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 2px 6px;
  border-radius: var(--mp-r-sm);
  background: var(--mp-brand); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

.icd-rozdzial-tytul { font-weight: 600; line-height: 1.35; }
.icd-ile { margin-top: auto; }

/* Grupa z podglądem kodów: nagłówek grupy plus kilka pozycji spod niego,
   żeby ze strony rozdziału widać było KOD, a nie kolejny spis treści. */
.icd-grupy { display: grid; gap: 14px; }

.icd-grupa {
  padding: 12px 14px;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-surface);
}
.icd-grupa h3 { margin: 0 0 6px; font-size: 15.5px; }
.icd-grupa h3 a { text-decoration: none; color: var(--mp-ink); }
.icd-grupa h3 a:hover { color: var(--mp-brand-ink); }
.icd-grupa .icd-lista { border-top: 1px solid var(--mp-line); padding-top: 4px; }
.icd-grupa p.small { margin: 8px 0 0; }

.icd-lista.zwarta a { padding: 7px 6px; font-size: 14.5px; }
.icd-lista li .small { padding-left: 6px; }

.icd-specjalizacje li { padding: 7px 0; }
.icd-specjalizacje .small { margin-left: 8px; }

.icd-szukaj { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.icd-szukaj label { font-weight: 600; font-size: 14px; }
.icd-szukaj input[type="search"] {
  flex: 1 1 260px; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-surface); color: var(--mp-ink); font-size: 15px;
}
.icd-szukaj input[type="search"]:focus {
  outline: none; border-color: var(--mp-brand); box-shadow: var(--mp-shadow-sm);
}

/* Okruszki. Osobno od nagłówka, bo przy czterech poziomach klasyfikacji
   to jedyna rzecz, która mówi „gdzie jestem" — a na telefonie muszą się
   zawijać, nie wyjeżdżać poza ekran. */
.okruszki {
  /* Szerokość i wcięcie bierze z `main > *` — patrz komentarz przy
     pasku kategorii bloga. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 14px auto 0;
  font-size: 13.5px; color: var(--mp-ink-soft);
}
.okruszki a { color: var(--mp-ink-soft); text-decoration: none; }
.okruszki a:hover { color: var(--mp-brand-ink); text-decoration: underline; }

@media (max-width: 560px) {
  .icd-kod { min-width: 0; margin-right: 8px; }
  .icd-lista a { flex-wrap: wrap; }
  .icd-rozdzialy { grid-template-columns: 1fr; }
}

/* ── Blog ──────────────────────────────────────────────────────────────────
   Wpis ma 2500 słów w dół, więc jedyne, co naprawdę liczy się w tym
   arkuszu, to czytelność długiego tekstu: miara wiersza, oddech między
   akapitami i nagłówki, po których da się skanować stronę wzrokiem. */
.blog-lista { list-style: none; margin: 0; padding: 0; }
.blog-lista li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--mp-line);
}
.blog-lista li:last-child { border-bottom: 0; }
.blog-lista h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.blog-lista h2 a { color: var(--mp-ink); text-decoration: none; }
.blog-lista h2 a:hover { color: var(--mp-brand-ink); }
.blog-lista p { margin: 0 0 6px; color: var(--mp-ink-soft); font-size: 15px; }

.blog-mini { flex: 0 0 200px; display: block; border-radius: var(--mp-r-sm); overflow: hidden; }
.blog-mini img { display: block; width: 100%; height: 120px; object-fit: cover; }

.blog-kategorie-pasek {
  /* ⚠ BEZ WŁASNEJ SZEROKOŚCI I BEZ WŁASNEGO WCIĘCIA.
     `main > *` ustawia jedno i drugie dla wszystkich dzieci główną regułą.
     Dołożone tu `max-width` wygrywało z nią o kilkanaście pikseli i pasek
     zaczynał się w innej kolumnie niż karty pod nim — widać to dopiero
     na szerokim ekranie i dokładnie to wyłapał `bin/test-uklad.js`. */
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px auto 0;
}
.blog-kategorie-pasek a {
  padding: 6px 12px; border: 1px solid var(--mp-line); border-radius: 999px;
  background: var(--mp-surface); color: var(--mp-ink-soft);
  text-decoration: none; font-size: 14px;
}
.blog-kategorie-pasek a:hover { border-color: var(--mp-brand); color: var(--mp-brand-ink); }
.blog-kategorie-pasek a.aktywna {
  background: var(--mp-brand); border-color: var(--mp-brand); color: var(--mp-on-brand);
}

/* Kafelki działów bloga. Miniaturka jest tu treścią, nie ozdobą: dział
   bez zdjęcia i dział ze zdjęciem mają wyglądać tak samo porządnie, więc
   obrazek ma stałe proporcje, a kafelek bez niego nie zapada się w sobie. */
.blog-kategorie-kafelki {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.blog-kategorie-kafelki a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 12px; text-decoration: none; color: var(--mp-ink);
  border: 1px solid var(--mp-line); border-radius: var(--mp-r-sm);
  background: var(--mp-surface);
}
.blog-kategorie-kafelki a:hover {
  border-color: var(--mp-brand); background: var(--mp-surface-2); color: var(--mp-brand-ink);
}
.blog-kategorie-kafelki img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--mp-r-sm); background: var(--mp-surface-2);
}
.blog-kat-nazwa { font-weight: 700; }
.blog-kat-lead { color: var(--mp-ink-soft); }
.blog-kategorie-kafelki .muted { margin-top: auto; }

/* Miniaturka w panelu — mała, żeby wiersz tabeli nie urósł do kafelka. */
.blog-kat-mini img {
  display: block; width: 56px; height: 40px; object-fit: cover;
  border-radius: var(--mp-r-sm); background: var(--mp-surface-2);
}

/* Tabela we wpisie bloga. Limity refundacji czyta się kolumnami, a na
   telefonie taka tabela musi dać się przewinąć w poziomie — inaczej rozpycha
   całą stronę i psuje układ wszystkiego pod nią. */
.tabela-wpisu { overflow-x: auto; margin: 16px 0; }
.tabela-wpisu table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela-wpisu th, .tabela-wpisu td {
  padding: 8px 10px; border-bottom: 1px solid var(--mp-line); text-align: left; vertical-align: top;
}
.tabela-wpisu th { font-weight: 700; white-space: nowrap; }

.wpis-foto { max-width: 1120px; margin: 18px auto 0; padding: 0 20px; }
.wpis-foto img {
  display: block; width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--mp-r-sm);
}
.wpis-foto figcaption { margin-top: 8px; font-size: 12.5px; color: var(--mp-ink-soft); }

/* Miara wiersza: 68 znaków. Przy 2500 słowach różnica między 68 a pełną
   szerokością karty to różnica między tekstem czytanym a przewijanym. */
.wpis-tresc { max-width: 68ch; }
.wpis-tresc h2 { margin: 30px 0 10px; font-size: 22px; line-height: 1.25; }
.wpis-tresc h3 { margin: 22px 0 8px; font-size: 18px; }
.wpis-tresc h2:first-child, .wpis-tresc h3:first-child { margin-top: 0; }
.wpis-tresc p { margin: 0 0 14px; line-height: 1.72; font-size: 16.5px; }
.wpis-tresc ul { margin: 0 0 16px; padding-left: 22px; }
.wpis-tresc li { margin-bottom: 7px; line-height: 1.6; }
.wpis-tresc blockquote {
  margin: 16px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--mp-brand); color: var(--mp-ink-soft);
}
.wpis-tresc a { color: var(--mp-brand-ink); }

.blog-podobne { list-style: none; margin: 0; padding: 0; }
.blog-podobne li { padding: 8px 0; border-bottom: 1px solid var(--mp-line); }
.blog-podobne li:last-child { border-bottom: 0; }

/* Panel: lista tez. Teza niepotwierdzona ma być widoczna z drugiego końca
   pokoju — to jedyna rzecz na tej stronie, której przeoczenie coś kosztuje. */
.blog-tezy { list-style: none; margin: 0 0 14px; padding: 0; }
.blog-tezy li {
  padding: 9px 12px; margin-bottom: 6px;
  border-left: 3px solid var(--mp-line); background: var(--mp-surface-2);
  border-radius: 0 var(--mp-r-sm) var(--mp-r-sm) 0; font-size: 14.5px;
}
.blog-tezy li.zla { border-left-color: var(--mp-err); }
.blog-kategorie { list-style: none; margin: 0 0 16px; padding: 0; }
.blog-kategorie li { padding: 8px 0; border-bottom: 1px solid var(--mp-line); }
.blog-podglad { max-width: 320px; border-radius: var(--mp-r-sm); }

@media (max-width: 620px) {
  .blog-lista li { flex-direction: column; }
  .blog-mini { flex: 1 1 auto; width: 100%; }
  .blog-mini img { height: 180px; }
}

/* ── Wykaz wyrobów medycznych ──────────────────────────────────────────────
   Tabela jest tu treścią główną, nie dodatkiem: ktoś przychodzi z kodem
   na kartce i szuka jednego wiersza. Kwoty w kolumnie z tabularnymi cyframi,
   żeby dało się je porównać wzrokiem bez czytania. */
.wyroby-tabela { width: 100%; }
.wyroby-tabela td, .wyroby-tabela th { font-size: 14.5px; vertical-align: top; }
.wyroby-tabela td:nth-child(3), .wyroby-tabela td:nth-child(4) {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wyroby-tabela td:first-child { white-space: nowrap; }
.wyroby-tabela a { color: var(--mp-ink); text-decoration: none; }
.wyroby-tabela a:hover { color: var(--mp-brand-ink); text-decoration: underline; }

/* ── Pasek podglądu redakcyjnego ──────────────────────────────────────────
 *
 * ⚠ CELOWO KRZYKLIWY.
 *
 * Podgląd używa tego samego szablonu co strona publiczna — to jest jego
 * zaleta i jedyne zagrożenie. Bez paska, którego nie da się przeoczyć,
 * redakcja po kilku kliknięciach nie wie, czy patrzy na wersję roboczą,
 * czy na to, co widzą czytelnicy. Dlatego pełna szerokość i kontrast,
 * a nie delikatna ramka w rogu. */
.pasek-podgladu {
  background: #8a4b00;
  color: #fff;
  padding: 10px 16px;
  font-size: .94rem;
  text-align: center;
}
.pasek-podgladu a { color: #fff; text-decoration: underline; margin-left: .5em; }
/*
 * Ostrzeżenia w pasku podglądu — każde w osobnym wierszu.
 *
 * ⚠ W JEDNEJ LINII BYŁYBY NIECZYTELNE. „Brakuje sekcji: Leczenie" i „Nazwa
 * jest wciąż angielska" to dwa różne powody, dla których hasła nie wolno
 * opublikować; sklejone przecinkiem czytają się jak jedno zdanie i drugi
 * ginie.
 */
.pasek-podgladu .uwaga { display: block; margin-top: 6px; font-weight: 400; }

/* ── Kompendium chorób ─────────────────────────────────────────────────── */
.lista-chorob { list-style: none; margin: 0; padding: 0; }
.lista-chorob li {
  padding: 10px 0;
  border-bottom: 1px solid var(--mp-line);
}
.lista-chorob li:last-child { border-bottom: 0; }
.lista-chorob a { font-weight: 600; }
.lista-chorob .muted { display: block; margin-top: 2px; }

/*
 * Wykaz suplementów — lista pozycji z rejestru GIS.
 *
 * Ten sam wiersz co w `lista-chorob`, ale z trzema linijkami metadanych
 * pod nazwą. Adnotacja rejestru („postępowanie wyjaśniające") jest
 * wyróżniona kolorem ostrzeżenia, bo to jedyna informacja na liście,
 * która mówi o wątpliwościach urzędu co do produktu.
 */
.lista-suplementow { list-style: none; margin: 0; padding: 0; }
.lista-suplementow li { padding: 12px 0; border-bottom: 1px solid var(--mp-line); }
.lista-suplementow li:last-child { border-bottom: 0; }
.lista-suplementow a { font-weight: 600; }
.lista-suplementow .meta,
.lista-suplementow .skladniki {
  display: block; margin-top: 3px; font-size: 13.5px; color: var(--mp-ink-soft);
}
/*
 * „w wykazie 4 razy" — liczba wystąpień nazwy. Inline przy nazwie, bo to
 * jej dopowiedzenie, a nie osobny fakt o produkcie.
 */
.lista-suplementow .wystapien {
  font-size: 12.5px; color: var(--mp-ink-soft); white-space: nowrap;
}
/* Wykaz podmiotów: 8 779 nazw, więc kolumny zamiast jednej długiej listy. */
.lista-podmiotow {
  columns: 3 260px; column-gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.lista-podmiotow li {
  break-inside: avoid; padding: 5px 0; font-size: 14.5px;
  border-bottom: 1px solid var(--mp-line);
}
.lista-suplementow .adnotacja {
  display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--mp-warn);
}
/*
 * Przyciski udostępniania — zwykłe odnośniki, nie wtyczki.
 *
 * ⚠ CELOWO BEZ LOGOTYPÓW I FIRMOWYCH KOLORÓW.
 *
 * Kolorowe kafelki z logo wyglądają jak oficjalne wtyczki i tak są
 * czytane — a to nie one. Poza tym logotypy trzeba by skądś wczytać,
 * czyli dołożyć dokładnie to żądanie do cudzego serwera, którego ten
 * sposób udostępniania ma uniknąć.
 */
.udostepnij { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.udostepnij a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-full);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--mp-ink-soft);
  transition: border-color .15s var(--mp-ease), color .15s var(--mp-ease);
}
.udostepnij a:hover { border-color: var(--mp-brand); color: var(--mp-brand); }

/* Zwijany zapis oryginalny — bez skryptu, `details` wystarcza. */
.oryginal { margin-top: 14px; }
.oryginal > summary { cursor: pointer; font-size: 14px; color: var(--mp-ink-soft); }
.oryginal > summary:hover { color: var(--mp-brand); }

/*
 * Działy kompendium — kafelki na stronie startowej.
 *
 * ⚠ STAŁA PROPORCJA ZDJĘCIA (`aspect-ratio`), A NIE STAŁA WYSOKOŚĆ.
 *
 * Miniaturki wgrywa redakcja i przyjdą w różnych proporcjach. Przy stałej
 * wysokości kafelki rozjeżdżają się w pionie, gdy jedno zdjęcie jest
 * kwadratowe, a drugie panoramiczne — a to widać gołym okiem jako
 * nierówny rząd. `object-fit: cover` przycina, zamiast deformować.
 */
.dzialy-kompendium { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.dzialy-kompendium .dzial {
  display: block;
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s var(--mp-ease), transform .18s var(--mp-ease);
}
.dzialy-kompendium .dzial:hover { border-color: var(--mp-brand); transform: translateY(-2px); }
.dzialy-kompendium img,
.dzialy-kompendium .bez-zdjecia {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
.dzialy-kompendium .bez-zdjecia {
  display: grid; place-items: center;
  background: var(--mp-brand); color: var(--mp-on-brand);
  font-size: 44px; font-weight: 700;
}
.dzialy-kompendium .tresc { display: block; padding: 14px 16px 16px; }
.dzialy-kompendium .tresc strong { display: block; font-size: 18px; margin-bottom: 4px; }
.dzialy-kompendium .lead { display: block; font-size: 14px; color: var(--mp-ink-soft); }
.dzialy-kompendium .ile {
  display: block; margin-top: 8px; font-size: 13px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--mp-ink-soft);
}
/*
 * ⚠ Przy `prefers-reduced-motion` nie przesuwamy kafelka.
 * Ruch pod kursorem jest dla części osób źródłem zawrotów głowy — a to
 * serwis, w którym takie osoby są nadreprezentowane.
 */
@media (prefers-reduced-motion: reduce) {
  .dzialy-kompendium .dzial:hover { transform: none; }
}

/*
 * Podobne choroby — trzy kolumny pod hasłem.
 *
 * ⚠ `repeat(3, 1fr)` Z ZAŁAMANIEM, A NIE `auto-fit`.
 *
 * `auto-fit` przy dwóch pozycjach rozciąga je na całą szerokość i kafelki
 * wyglądają inaczej niż na sąsiednim haśle, gdzie są trzy. Tu liczba kolumn
 * jest stała, bo to ma być ten sam układ na każdej stronie choroby —
 * dopiero wąski ekran przestawia je na jedną kolumnę.
 */
.podobne-choroby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.podobne-choroby article {
  border: 1px solid var(--mp-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.podobne-choroby h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
.podobne-choroby p { margin: 0; font-size: 14px; color: var(--mp-ink-soft); }
/*
 * Powód pokrewieństwa czyta się jako etykietę, nie jako zdanie treści —
 * stąd wersaliki i mniejszy stopień. Gdyby wyglądał jak zwykły akapit,
 * zlewałby się z zajawką i czytelnik wziąłby go za początek opisu.
 */
.podobne-choroby .powod {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mp-ink-soft);
}
@media (max-width: 760px) { .podobne-choroby { grid-template-columns: 1fr; } }

/* Alfabet — odnośniki, nie skrypt; te same powody co przy zakładkach panelu. */
.alfabet { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.alfabet a {
  min-width: 2em;
  padding: 4px 8px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-sm);
  text-align: center;
  text-decoration: none;
}
.alfabet a.wybrana { background: var(--mp-brand); color: var(--mp-on-brand); border-color: var(--mp-brand); }
.strony { display: flex; gap: 14px; align-items: center; margin-top: 16px; }

/* ── Strona główna: dwie kolumny wiedzy ────────────────────────────────────
 *
 * ⚠ `auto-fit` + `minmax`, A NIE ZAPYTANIE O MEDIA.
 *
 * Siatka sama schodzi do jednej kolumny, gdy zabraknie miejsca — nie ma
 * więc drugiego układu do utrzymania ani progu, który trzeba zgadywać.
 * Przy jednej kolumnie wpisy bloga lądują nad skrótami, czyli w kolejności
 * ważności; przy dwóch stoją obok siebie. */
.dwie-kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  align-items: start;
}
.dwie-kolumny .kolumna {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  padding: 16px 18px;
}
.dwie-kolumny .section-head { margin-bottom: 10px; }
.dwie-kolumny h3 { margin: 0; font-size: 17px; }

.wpisy-skrot, .wykazy-skrot { list-style: none; margin: 0; padding: 0; }
.wpisy-skrot li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mp-line);
}
.wpisy-skrot li:last-child, .wykazy-skrot li:last-child { border-bottom: 0; }
.wpisy-skrot img {
  width: 96px; height: 72px;
  object-fit: cover;
  border-radius: var(--mp-r-sm);
  flex: 0 0 auto;
}
.wpisy-skrot div { min-width: 0; }
.wpisy-skrot a { font-weight: 600; }
.wpisy-skrot small, .wpisy-skrot .muted { display: block; margin-top: 2px; font-size: 13px; }
.wpisy-skrot .muted { color: var(--mp-ink-soft); font-size: 12.5px; }

.wykazy-skrot li { border-bottom: 1px solid var(--mp-line); }
.wykazy-skrot a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
}
.wykazy-skrot b { display: block; }
.wykazy-skrot small { display: block; color: var(--mp-ink-soft); font-size: 13px; }
.wykazy-skrot .licznik {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--mp-ink-soft);
}

/* ─────────────────────────────────────────────── wykresy słupkowe ──
 *
 * ⚠ WYKRES BEZ ANI JEDNEJ BIBLIOTEKI I BEZ JAVASCRIPTU.
 *
 * Słupek to element listy z ustawioną szerokością wypełnienia. Biblioteka
 * z CDN-u dołożyłaby ~90 kB skryptu, wysyłanie adresu IP czytelnika do
 * cudzego serwera i stronę, która bez JS pokazuje puste miejsce. Tutaj
 * wykres działa bez JS, drukuje się, czyta go czytnik ekranu i sam
 * przechodzi w tryb ciemny, bo bierze kolory z tych samych zmiennych
 * co reszta serwisu.
 */
.wykres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.wykres li {
  display: grid;
  grid-template-columns: minmax(96px, 22%) 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--mp-line);
}

.wykres li:last-child { border-bottom: 0; }

.wykres .etykieta {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⚠ Tło paska musi być widoczne także tam, gdzie wypełnienie ma 2% —
   inaczej najmniejsze pozycje wyglądają na brak danych, a nie na małą
   wartość. To dwie różne informacje. */
.wykres .pasek {
  background: var(--mp-line);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.wykres .wypelnienie {
  display: block;
  height: 100%;
  background: var(--mp-brand);
  border-radius: 999px;
}

.wykres .wypelnienie.ostrzegawcza { background: var(--mp-warn); }

.wykres .wartosc { font-variant-numeric: tabular-nums; font-size: 14px; }
.wykres .udzial  { color: var(--mp-ink-soft); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* Na telefonie etykieta idzie nad pasek — przy 380 px kolumna na nazwę
   województwa zostawiałaby paskowi kilkanaście pikseli. */
@media (max-width: 560px) {
  .wykres li { grid-template-columns: 1fr auto; grid-template-areas: "etykieta wartosc" "pasek pasek"; }
  .wykres .etykieta { grid-area: etykieta; white-space: normal; }
  .wykres .wartosc  { grid-area: wartosc; }
  .wykres .pasek    { grid-area: pasek; }
  .wykres .udzial   { display: none; }
}

/* Pasek kolejności nad wynikami katalogu. Te same „chipy" co filtry,
   bo to jest ten sam rodzaj wyboru — tylko jednokrotny zamiast wielu. */
.porzadek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.porzadek-etykieta { color: var(--mp-ink-soft); font-size: 14px; margin-right: 2px; }

/* ───────────────────────────────────────────── spis miejscowości ──
 *
 * Dwie–cztery kolumny zależnie od szerokości. `auto-fill` zamiast
 * `auto-fit`: przy krótkiej liście (np. hurtownie w ośmiu miastach)
 * `auto-fit` rozciągnąłby dwie pozycje na całą szerokość ekranu,
 * co wygląda jak błąd, a nie jak lista.
 */
.spis-miast {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 2px 18px;
}

.spis-miast li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--mp-line);
  font-size: 14px;
}

.spis-miast a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spis-miast .count { font-variant-numeric: tabular-nums; color: var(--mp-ink-soft); }
.spis-miast small { flex: 0 0 auto; font-size: 12px; }

h3.litera {
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--mp-brand);
  font-size: 20px;
}

h3.litera .muted { font-weight: 400; font-size: 13px; margin-left: 6px; }

/* Bloki „ostatnio dodane" / „najlepiej oceniane" pod wynikami katalogu. */
.katalog__polecane { margin: 28px 0 8px; }
.katalog__polecane h2 { font-size: 19px; margin: 0 0 8px; }

.lista-polecane { list-style: none; margin: 0; padding: 0; }

.lista-polecane li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mp-line);
  font-size: 14px;
}

.lista-polecane li:last-child { border-bottom: 0; }
.lista-polecane a { flex: 1 1 60%; min-width: 0; }
.lista-polecane time { color: var(--mp-ink-soft); font-variant-numeric: tabular-nums; font-size: 13px; }

/* Ocena obok nazwy: liczba ma być czytelna od razu, bez liczenia gwiazdek.
   Gwiazdki są na karcie placówki, gdzie jest na nie miejsce. */
.lista-polecane .ocena { color: var(--mp-star); font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-polecane .ocena small { color: var(--mp-ink-soft); font-weight: 400; }

/* Tabela preparatów na stronie substancji czynnej. */
.tabela-lekow { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-lekow th, .tabela-lekow td { text-align: left; padding: 9px 10px 9px 0; vertical-align: top; }
.tabela-lekow thead th { border-bottom: 2px solid var(--mp-line); font-size: 13px; color: var(--mp-ink-soft); }
.tabela-lekow tbody tr { border-bottom: 1px solid var(--mp-line); }
.tabela-lekow tbody tr:last-child { border-bottom: 0; }

/* Na telefonie kolumna ATC i producent są balastem — zostaje nazwa,
   postać i dostępność, czyli to, po co ktoś tu wszedł. */
@media (max-width: 620px) {
  .tabela-lekow th:nth-child(4), .tabela-lekow td:nth-child(4) { display: none; }
}

/* ─────────────────────────────────── pasek akcji na karcie placówki ──
 *
 * Zadzwoń / mapa / strona — trzy rzeczy, po które ludzie tu przychodzą.
 * Dotąd telefon leżał kilkanaście wierszy niżej, w tabeli z rejestru.
 */
.detail-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.detail-akcje .akcja {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--mp-r-full);
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--mp-hero-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s var(--mp-ease), border-color .18s var(--mp-ease);
}

.detail-akcje .akcja:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.detail-akcje .akcja svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* Telefon jest tym, po co przychodzi się najczęściej — i jedynym
   przyciskiem, który na telefonie naprawdę coś robi jednym dotknięciem. */
.detail-akcje .akcja--glowna {
  background: var(--mp-on-brand);
  color: var(--mp-brand-ink);
  border-color: transparent;
  font-weight: 600;
}

.detail-akcje .akcja--glowna:hover { background: #fff; border-color: transparent; }

/* Przy wąskim ekranie przyciski idą na pełną szerokość, jeden pod drugim —
   dotknięcie w biegu ma trafić w cel, a nie obok. */
@media (max-width: 460px) {
  .detail-akcje { flex-direction: column; align-items: stretch; }
  .detail-akcje .akcja { justify-content: center; }
}