/* Arkusz wzorcowy leki.farm przemalowany na paletę DrWidgeta przez bin/repaint.php.
   Nazwy klas zachowują oryginalne brzmienie (np. .text-blue-600 renderuje granat)
   — to świadomy koszt forka, patrz docs/superpowers/specs/. Nie edytuj ręcznie. */
/* ═══════════════════════════════════════════════════════════════════════════
   DrWidget — warstwa komponentów frontendu (TYLKO DrWidget).
   Ładowana przez leki_layout_start() (includes/layout.php) po core style.css.
   Zasady: tokeny ekosystemu (--brand-*, --color-navy, --farm-nav-h) — zero
   hardcode'ów hex marki; powierzchnia list = glass .card-static (decyzja
   projektowa, styles.md §8); klasy .leki-* są addytywne i nie nadpisują
   niczego poza hostem DrWidget (plik nie jest ładowany gdzie indziej).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Offset elementów sticky pod topnavem (44/56/72 px z core) */
    --leki-sticky: calc(var(--farm-nav-h, 56px) + 0.5rem);
    /* Włoskowe linie — jedyny separator w gramatyce „etykiety rejestrowej" (§15g).
       Zmienna, bo ta sama wartość rozstrzyga o ramce wiersza, nagłówku sekcji
       i pasku odniesienia; rozjazd między nimi widać natychmiast. */
    --leki-line: #e2e8f0;
    --leki-line-soft: #f1f5f9;
}
.dark {
    --leki-line: rgba(148,163,184,.16);
    --leki-line-soft: rgba(148,163,184,.10);
}

/* ── 1. Rytm strony ──────────────────────────────────────────────────────── */

/* Kotwice sekcji karty produktu lądują pod sticky nav + jump-nav */
.leki-section { scroll-margin-top: calc(var(--farm-nav-h, 56px) + 3.5rem); }

/* Sekcja treści home/listingów — jednolity odstęp pionowy */
.leki-stack > * + * { margin-top: 3rem; }
@media (min-width: 768px) { .leki-stack > * + * { margin-top: 4rem; } }

/* ── 2. Nagłówek sekcji z ikoną (karta produktu + sekcje list) ───────────── */

.leki-sec-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; }
.leki-sec-ico {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem;
    background: color-mix(in srgb, var(--brand-500) 10%, transparent);
    color: var(--brand-600, #0f4769);
}
.dark .leki-sec-ico {
    background: color-mix(in srgb, var(--brand-400) 16%, transparent);
    color: var(--brand-300, #93c5fd);
}
.leki-sec-head .leki-sec-title {
    font-size: 1.0625rem; line-height: 1.35; font-weight: 700;
    color: var(--color-navy, #0a324a); letter-spacing: -0.01em;
}
.dark .leki-sec-head .leki-sec-title { color: #fff; }
.leki-sec-head .leki-sec-count {
    font-size: 0.75rem; font-weight: 600; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* Nagłówek sekcji karty produktu (klasa w $h2 skeletonu) — brand-owy znacznik */
.leki-h2 { position: relative; padding-left: 0.875rem; }
.leki-h2::before {
    content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
    width: 4px; border-radius: 9999px; background: var(--brand-500);
}

/* ── 3. Kliniczna skala sygnałowa (pastel; ocena 1/2/3/brak danych) ──────── */

.leki-sig { display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; font-weight: 600; line-height: 1;
    padding: 0.3125rem 0.625rem; border-radius: 9999px; border: 1px solid transparent; }
.leki-sig svg { width: 0.875rem; height: 0.875rem; flex: none; }

.leki-sig-ok      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.leki-sig-caution { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.leki-sig-danger  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.leki-sig-na      { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

.dark .leki-sig-ok      { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.25); }
.dark .leki-sig-caution { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.25); }
.dark .leki-sig-danger  { background: rgba(239,68,68,.12);  color: #fca5a5; border-color: rgba(239,68,68,.25); }
.dark .leki-sig-na      { background: rgba(148,163,184,.10); color: #94a3b8; border-color: rgba(148,163,184,.20); }

/* Kafel klinicznej oceny (ciąża/laktacja/populacje) — pastelowe tło całej pastylki */
.leki-sig-tile { border-radius: 0.75rem; border: 1px solid; padding: 0.75rem; }
.leki-sig-tile.leki-sig-ok      { background: #ecfdf5; border-color: #a7f3d0; }
.leki-sig-tile.leki-sig-caution { background: #fffbeb; border-color: #fde68a; }
.leki-sig-tile.leki-sig-danger  { background: #fef2f2; border-color: #fecaca; }
.leki-sig-tile.leki-sig-na      { background: #f8fafc; border-color: #e2e8f0; }
.dark .leki-sig-tile.leki-sig-ok      { background: rgba(16,185,129,.08);  border-color: rgba(16,185,129,.22); }
.dark .leki-sig-tile.leki-sig-caution { background: rgba(245,158,11,.08);  border-color: rgba(245,158,11,.22); }
.dark .leki-sig-tile.leki-sig-danger  { background: rgba(239,68,68,.08);   border-color: rgba(239,68,68,.22); }
.dark .leki-sig-tile.leki-sig-na      { background: rgba(148,163,184,.06); border-color: rgba(148,163,184,.18); }

/* ── 4. Kody (ATC / EAN / ICD) — mono-akcent ─────────────────────────────── */

.leki-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem; letter-spacing: 0.03em; font-weight: 500;
    padding: 0.125rem 0.5rem; border-radius: 9999px;
    background: #f1f5f9; color: #475569; white-space: nowrap;
}
.dark .leki-code { background: rgba(255,255,255,.08); color: #cbd5e1; }
a.leki-code { text-decoration: none; transition: background-color .15s, color .15s; }
a.leki-code:hover { background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-600); }
.dark a.leki-code:hover { color: var(--brand-300); }

/* ── 5. Chipy ────────────────────────────────────────────────────────────── */

.leki-chip {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.8125rem; font-weight: 500; line-height: 1;
    padding: 0.4375rem 0.75rem; border-radius: 9999px;
    background: #f1f5f9; color: #475569; text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s;
}
.dark .leki-chip { background: rgba(255,255,255,.08); color: #cbd5e1; }
a.leki-chip:hover { background: color-mix(in srgb, var(--brand-500) 10%, transparent); color: var(--brand-600); }
.dark a.leki-chip:hover { color: var(--brand-300); }
.leki-chip-active { background: var(--brand-500) !important; color: #fff !important; }
/* Licznik w chipie skrótu (/zamiennik): ile preparatów kryje się pod substancją.
   Sam chip mówi CO, licznik mówi ILE — bez niego „paracetamol" i substancja z
   dwoma preparatami wyglądają na tak samo obiecujące wejście. */
.leki-chip__n {
    margin-left: 0.125rem; font-size: 0.6875rem; font-weight: 600;
    font-variant-numeric: tabular-nums; opacity: .6;
}

/* ── 6. Karty list (nakładka na .card-static) ────────────────────────────── */

.leki-card-link { display: block; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.leki-card-link:hover { border-color: color-mix(in srgb, var(--brand-500) 45%, transparent); box-shadow: 0 6px 28px rgba(0,0,0,.08); }
.dark .leki-card-link:hover { border-color: color-mix(in srgb, var(--brand-400) 40%, transparent); }

/* Numer w listach rankingowych */
.leki-rank {
    flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: #f1f5f9; color: #94a3b8;
}
.dark .leki-rank { background: rgba(255,255,255,.06); color: #64748b; }
.leki-rank-top { background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-600); }
.dark .leki-rank-top { color: var(--brand-300); }

/* ── 6b. Mini-karta leku (home v3 + wyniki /szukaj) ───────────────────────
   Kafle stoją w siatce 2-4 w rzędzie, więc porządek robi TYPOGRAFIA, nie akcenty:
   nazwa → dawka (cyfry tabelaryczne, żeby kolumna się zgadzała) → substancja →
   opakowanie, a kategorię niesie jedna etykieta Rx/OTC w palecie
   `leki_category_badge()`. Wcześniejszy wariant powtarzał ten sam sygnał kolorowym
   paskiem przy krawędzi i kropką w etykiecie — trzy akcenty na jedną informację. */

.leki-mini {
    position: relative; height: 100%;
    display: flex; flex-direction: column;
    padding: 0.875rem;
    transition: border-color .15s, box-shadow .15s;
}
.leki-mini:hover {
    border-color: color-mix(in srgb, var(--brand-500) 40%, transparent);
    box-shadow: 0 8px 26px -20px rgba(15,23,42,.4);
}
.dark .leki-mini:hover { border-color: color-mix(in srgb, var(--brand-400) 32%, transparent); }

.leki-mini__main { display: block; text-decoration: none; flex: 1 1 auto; }
.leki-mini__name {
    font-size: 0.9375rem; font-weight: 700; line-height: 1.25;
    letter-spacing: -0.01em; color: var(--color-navy);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dark .leki-mini__name { color: #fff; }
.leki-mini__main:hover .leki-mini__name { color: var(--brand-600); }
.dark .leki-mini__main:hover .leki-mini__name { color: var(--brand-300); }

/* Etykieta kategorii: sam skrót (pełna nazwa w title). Kolory wnoszą klasy
   `leki_category_badge()` — tutaj tylko geometria, żeby paleta miała jedno źródło.
   Długie „Rx · na receptę" łamało się w kolumnie i rozjeżdżało wysokości kafli. */
.leki-mini__tag {
    flex: none; display: inline-block;
    font-size: 0.6875rem; font-weight: 600; line-height: 1;
    padding: 0.25rem 0.4375rem; border-radius: 0.375rem;
    white-space: nowrap;
}
/* Ciemny tryb: `dark:bg-*-900/30` z palety badge'ów nie ma w prebuilt Tailwind,
   więc podkładka jest neutralna — kolor niesie sam tekst. */
.dark .leki-mini__tag { background: rgba(255,255,255,.06); }

.leki-mini__meta { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.35; }
.leki-mini__dose { font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.dark .leki-mini__dose { color: #e2e8f0; }
.leki-mini__form { color: #64748b; margin-left: 0.3125rem; }
.dark .leki-mini__form { color: #94a3b8; }

.leki-mini__inn {
    margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.35; color: #64748b;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dark .leki-mini__inn { color: #94a3b8; }
.leki-mini__pack { margin-top: 0.125rem; font-size: 0.6875rem; color: #94a3b8; }
.dark .leki-mini__pack { color: #64748b; }

/* Skróty do sekcji karty — linki, nie „szare klocki”: mniej szumu w siatce. */
.leki-mini__links {
    margin-top: 0.75rem; display: flex; gap: 0.875rem;
    border-top: 1px solid #f1f5f9; padding-top: 0.625rem;
}
.dark .leki-mini__links { border-top-color: rgba(255,255,255,.07); }
.leki-mini__links a {
    font-size: 0.6875rem; font-weight: 600; color: #64748b; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.1875rem;
}
.dark .leki-mini__links a { color: #94a3b8; }
.leki-mini__links a:hover { color: var(--brand-600); }
.dark .leki-mini__links a:hover { color: var(--brand-300); }
.leki-mini__links svg { width: 0.625rem; height: 0.625rem; opacity: .55; }

/* ── 6c. Pille skrótów pod wyszukiwarką (hero) ────────────────────────────
   Każdy skrót ma własny akcent (--pill) — trzy identyczne białe kapsułki
   zlewały się z tłem hero i nie zapraszały do kliknięcia. */
.leki-pill {
    --pill: var(--brand-500);
    display: inline-flex; align-items: center; gap: 0.4375rem;
    font-size: 0.8125rem; font-weight: 600; line-height: 1;
    padding: 0.5rem 0.875rem; border-radius: 9999px; text-decoration: none;
    background: color-mix(in srgb, var(--pill) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--pill) 28%, transparent);
    color: color-mix(in srgb, var(--pill) 82%, #0f172a);
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.dark .leki-pill {
    background: color-mix(in srgb, var(--pill) 16%, transparent);
    border-color: color-mix(in srgb, var(--pill) 34%, transparent);
    color: color-mix(in srgb, var(--pill) 55%, #fff);
}
.leki-pill:hover {
    background: var(--pill); border-color: var(--pill); color: #fff;
    transform: translateY(-1px);
}
.dark .leki-pill:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .leki-pill:hover { transform: none; } }
.leki-pill svg { width: 0.875rem; height: 0.875rem; }
/* Telefon: trzy pełnowymiarowe pille schodziły w trzy wiersze i ostatnia wjeżdżała
   pod dolny pasek nawigacji (fixed). Ciaśniejsza kapsułka mieści dwie w wierszu. */
@media (max-width: 639px) {
    .leki-pill { font-size: 0.75rem; padding: 0.4375rem 0.6875rem; gap: 0.375rem; }
    .leki-pill svg { width: 0.8125rem; height: 0.8125rem; }
    .leki-hero-pills { margin-top: 1rem !important; }
}
/* Znacznik „wychodzisz z leki.farm" — pilla interakcji otwiera app.przegladlekowy.pl
   w nowej karcie, więc informacja musi być widoczna PRZED kliknięciem. */
.leki-pill__ext { width: 0.6875rem !important; height: 0.6875rem !important; opacity: .6; margin-left: -0.125rem; }

/* ── 6c-ter. Stopka nawigacyjna list („Przeglądaj dalej") ──────────────────
   Wcześniej każdy listing kończył się rzędem płaskich szarych kapsułek z
   inline'owym Tailwindem (cztery warianty etykiet tej samej strony). Teraz to
   jeden helper `leki_listing_nav()` i te same pille co w hero — z ikoną i
   własnym akcentem, żeby ostatni ekran listy nie wyglądał jak stopka-śmietnik.
   Klasy własne, nie utilities: tailwind-built.css jest PREBUDOWANY. */
.leki-listing-nav { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(15,23,42,.08); }
.dark .leki-listing-nav { border-top-color: rgba(255,255,255,.1); }
.leki-listing-nav__label {
    font-size: 0.6875rem; font-weight: 700; line-height: 1;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #475569; margin: 0 0 0.75rem;
}
.dark .leki-listing-nav__label { color: #64748b; }
.leki-listing-nav__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── 6c-bis. Aktualności branżowe — duża karta (home v3) ──────────────────
   Duża karta ma być dokładnie tak wysoka jak stos czterech małych kart obok:
   wiersz gridu rozciąga kartę (h-full), a obraz od lg przestaje trzymać 16/9
   i dobiera resztę wysokości. Własna klasa, nie utilities — tailwind-built.css
   jest PREBUDOWANY i nie zawiera `lg:flex-1`, `aspect-auto` ani
   `lg:min-h-[200px]`; nową klasę Tailwinda sprawdzaj `grep -F` w arkuszu. */
@media (min-width: 1024px) {
    .leki-news-hero .leki-news-hero__media {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 12.5rem;
    }
}

/* ── 6d-bis. Najtańszy odpowiednik (/najtanszy) ───────────────────────────
   Wiersz z najniższą dopłatą wyróżnia zielona krawędź i etykieta — kolejność
   w liście sama tego nie mówi, a farmaceuta czyta tę stronę w biegu.

   PUŁAPKA: układ wiersza siedzi TUTAJ, nie w utilities. `.leki-card-link`
   ustawia `display:block`, a leki.css ładuje się PO tailwind-built.css, więc
   przy równej specyficzności bije utility `.flex` — wiersz z ceną rozjeżdżał
   się na dwa bloki. Własna klasa = zero wyścigu o kolejność. */
.leki-cheap {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 0.875rem; text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.leki-cheap:hover {
    border-color: color-mix(in srgb, var(--brand-500) 45%, transparent);
    box-shadow: 0 6px 28px rgba(0,0,0,.08);
}
.dark .leki-cheap:hover { border-color: color-mix(in srgb, var(--brand-400) 40%, transparent); }
.leki-cheap__price { flex: none; text-align: right; }
.leki-best { border-color: #16a34a !important; background: rgba(22,163,74,.04); }
.dark .leki-best { border-color: rgba(34,197,94,.45) !important; background: rgba(34,197,94,.07); }
.leki-best__tag {
    display: inline-flex; align-items: center;
    padding: 0.125rem 0.4375rem; border-radius: 9999px;
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em;
    background: #16a34a; color: #fff;
}

/* ── 6e. Wyspa treści z innego portalu (.farm) ────────────────────────────
   Oferty i newsy pochodzą z praca.farm / newsy.farm i tam prowadzą, więc sekcja
   nosi kolor TAMTEJ marki (paleta z core/config.php), a nie leki-owy błękit.
   Bez tego bloki czytały się jak kolejne listy leków — kolorowa wyspa + ikona
   mówią „to praca" / „to newsy" zanim ktokolwiek przeczyta nagłówek.
   Modyfikator ustawia tylko dwie zmienne: --xp (marka) i --xp-dark (odczyt w dark). */
.leki-portal {
    --xp: var(--brand-500); --xp-dark: var(--brand-400, #4a83a8); --xp-tint: 10%;
    border-radius: 1.25rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--xp) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--xp) 20%, transparent);
}
.leki-portal--praca { --xp: #2d8653; --xp-dark: #4ade80; }
/* Czerwień jest optycznie „głośniejsza" od zieleni — na ciemnym tle ta sama
   domieszka robiła bordową plamę, stąd niższy --xp-tint dla newsów. */
.leki-portal--newsy { --xp: #dc2626; --xp-dark: #f87171; --xp-tint: 6%; }
@media (min-width: 768px) { .leki-portal { padding: 1.5rem; } }
/* Ciemny: wyspa MUSI być ciemniejsza od kart (#131f33), inaczej panel i karty
   zlewają się w jedną plamę i kolor w ogóle nie czyta się jako wydzielony blok. */
.dark .leki-portal {
    background: color-mix(in srgb, var(--xp) var(--xp-tint), #0c1526);
    border-color: color-mix(in srgb, var(--xp) 32%, transparent);
}

/* Nagłówek wyspy. Layout siedzi TUTAJ, nie w utilities: `basis-64` nie ma
   w prebudowanym tailwind-built.css, więc grupa tytułu jechała na flex-basis 0
   i na telefonie ściskała się do ~140 px (tytuł łamany na 3 linie). Własny
   flex-basis 16rem = link „więcej" schodzi do własnego wiersza, a tytuł
   dostaje pełną szerokość. */
.leki-portal__head {
    display: flex; flex-wrap: wrap;
    align-items: flex-end; justify-content: space-between;
    gap: 0.5rem 1rem; margin-bottom: 1rem;
}
.leki-portal__head > :first-child { flex: 1 1 16rem; min-width: 0; }
.leki-portal__more { flex: none; }

/* Ikona sekcji: rolę znacznika przejmuje po pasku .leki-h2 (który w tych
   sekcjach celowo nie występuje — dwa akcenty obok siebie to szum). */
.leki-portal__icon {
    flex: none; width: 2.375rem; height: 2.375rem; border-radius: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--xp) 15%, transparent);
    color: color-mix(in srgb, var(--xp) 88%, #0f172a);
}
.dark .leki-portal__icon {
    background: color-mix(in srgb, var(--xp) 22%, transparent);
    color: var(--xp-dark);
}
.leki-portal__icon svg { width: 1.25rem; height: 1.25rem; }

/* Plakietka źródła — treść jest cudza, użytkownik ma to wiedzieć przed kliknięciem */
.leki-portal__chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
    padding: 0.075rem 0.4375rem; border-radius: 9999px;
    background: color-mix(in srgb, var(--xp) 13%, transparent);
    color: color-mix(in srgb, var(--xp) 92%, #0f172a);
    border: 1px solid color-mix(in srgb, var(--xp) 25%, transparent);
}
.dark .leki-portal__chip { color: var(--xp-dark); border-color: color-mix(in srgb, var(--xp) 40%, transparent); }

.leki-portal__more { color: color-mix(in srgb, var(--xp) 92%, #0f172a); }
.leki-portal__more:hover { color: var(--xp); }
.dark .leki-portal__more, .dark .leki-portal__more:hover { color: var(--xp-dark); }

/* Karta oferty: zielony pasek przy krawędzi + zielony hover (kanon akcentu --xp).
   Kart newsów NIE znaczymy paskiem — niosą już własne kolory archetypów. */
.leki-job {
    position: relative; overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.leki-job::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--xp, #2d8653); opacity: .6;
    transition: opacity .15s, width .15s;
}
.dark .leki-job::before { background: var(--xp-dark, #4ade80); opacity: .55; }
.leki-job:hover {
    border-color: color-mix(in srgb, var(--xp, #2d8653) 45%, transparent);
    box-shadow: 0 12px 30px -20px rgba(15,23,42,.5);
    transform: translateY(-2px);
}
.leki-job:hover::before { opacity: 1; width: 4px; }
.dark .leki-job:hover { border-color: color-mix(in srgb, var(--xp, #2d8653) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .leki-job:hover { transform: none; } }

/* Pastylka lokalizacji na karcie oferty (pin + miasto / liczba lokalizacji) */
.leki-job__meta {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
    padding: 0.075rem 0.5rem; border-radius: 9999px;
    background: #f1f5f9; color: #475569;
}
.dark .leki-job__meta { background: rgba(255,255,255,.08); color: #cbd5e1; }
.leki-job__meta svg { width: 0.75rem; height: 0.75rem; }

/* ── 7. Paginacja ────────────────────────────────────────────────────────── */

.leki-page-btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 0.75rem;
    border: 1px solid #e2e8f0; background: rgba(255,255,255,.72);
    font-size: 0.875rem; font-weight: 600; color: #475569; text-decoration: none;
    transition: border-color .15s, color .15s;
}
.dark .leki-page-btn { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #cbd5e1; }
.leki-page-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.dark .leki-page-btn:hover { color: var(--brand-300); }

/* ── 8. Sticky pomocnicze pod topnavem ───────────────────────────────────── */

.leki-sticky-under-nav { position: sticky; top: var(--leki-sticky); }
.leki-jumpnav { position: sticky; top: var(--farm-nav-h, 56px); z-index: 30; }
.leki-quickbar { position: sticky; top: calc(var(--farm-nav-h, 56px) + 2.75rem); z-index: 20; }

/* Pasek jump-nav: krawędziowe wygaszenie przy overflow (sygnał przewijalności) */
.leki-jumpnav-scroll {
    overflow-x: auto; scrollbar-width: none;
    /* fade tylko przy PRAWEJ krawędzi — lewy fade ucinał etykietę „Sekcje:" */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.5rem), transparent);
}
.leki-jumpnav-scroll::-webkit-scrollbar { display: none; }

/* ── 9. Tabele danych ────────────────────────────────────────────────────── */

.leki-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leki-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.leki-table th {
    text-align: left; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #94a3b8; padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.leki-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: top; }
.leki-table tr:last-child td { border-bottom: 0; }
.dark .leki-table th { color: #64748b; border-bottom-color: rgba(255,255,255,.1); }
.dark .leki-table td { color: #cbd5e1; border-bottom-color: rgba(255,255,255,.05); }

/* ── 10. Hero home (przeniesione z inline <style> home.php) ──────────────── */

.leki-hero-center {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 3rem); min-height: calc(100svh - 3rem);
    padding-top: 1rem; padding-bottom: 1rem;
}
@media (min-width: 640px) {
    .leki-hero-center { min-height: calc(100vh - 3.5rem); min-height: calc(100svh - 3.5rem); }
}
@media (min-width: 1024px) {
    .leki-hero-search {
        width: min(calc(100vw - 4rem), 72rem);
        margin-left: 50%; transform: translateX(-50%); max-width: none;
    }
}

/* ── 11. Wstęga liter (alfabet/substancje/ICD) ───────────────────────────── */

.leki-alpha-ribbon {
    position: sticky; top: var(--leki-sticky); z-index: 10;
    display: flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.5rem; border-radius: 0.875rem;
}
.leki-alpha-ribbon a, .leki-alpha-ribbon span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.125rem; min-height: 2.125rem; padding: 0 0.375rem;
    border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600;
    text-decoration: none; color: #475569;
}
.dark .leki-alpha-ribbon a, .dark .leki-alpha-ribbon span { color: #cbd5e1; }
.leki-alpha-ribbon a:hover { background: color-mix(in srgb, var(--brand-500) 10%, transparent); color: var(--brand-600); }
.dark .leki-alpha-ribbon a:hover { color: var(--brand-300); }
.leki-alpha-ribbon .is-active { background: var(--brand-500); color: #fff; }
.leki-alpha-ribbon .is-disabled { color: #cbd5e1; cursor: not-allowed; }
.dark .leki-alpha-ribbon .is-disabled { color: #475569; }

/* ── 12. Fokus / dostępność ──────────────────────────────────────────────── */

main#main a:focus-visible,
main#main button:focus-visible,
main#main input:focus-visible,
main#main summary:focus-visible,
main#main [tabindex]:focus-visible {
    outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 0.375rem;
}

/* Stopka ma ciemne (navy) tło — globalny focus-ring w kolorze --brand-500 (#0f4769)
   ma na nim za mały kontrast. Na ciemnym tle świecimy bielą, niezależnie od motywu
   (stopka jest ciemna także w trybie jasnym, więc `.dark`-owy wariant nie wystarcza). */
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px; border-radius: 0.375rem;
}

@media (prefers-reduced-motion: reduce) {
    .leki-card-link, .leki-chip, .leki-page-btn, .leki-code { transition: none; }
    /* Pasek skrótów /zamiennik nie jedzie; zostaje przewijalny palcem, bo poza
       ekran wychodzi wtedy realna część nazw. */
    .leki-zam-pasek__t { animation: none; }
    .leki-zam-pasek { overflow-x: auto; }
}

/* ── 14. SKÓRKA LEKI v2 — widoczna warstwa reworku (2026-07) ─────────────────
   Nadpisania działają WYŁĄCZNIE na DrWidget (plik per-serwis, ładowany po
   core style.css). Decyzja reworku: powierzchnia glass → SOLIDNA „kliniczna"
   karta z kanonu styles.md §4 (bg-white, border slate-200, bez blur) —
   czytelniejsza przy gęstych danych i wyraźnie odróżnialna od stanu sprzed
   przebudowy. Powrót do glass = usunąć ten blok. */

body {
    background: #f6f8fc;
    background-image: radial-gradient(1200px 400px at 50% -100px,
        color-mix(in srgb, var(--brand-500) 7%, transparent), transparent 70%);
}
.dark body { background: #0b1220; background-image: none; }

.card-static {
    background: #ffffff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.12);
}
.dark .card-static {
    background: #131f33;
    border-color: rgba(148,163,184,.16);
    box-shadow: none;
}

/* Karta-nagłówek (hero karty produktu + page-header listingów):
   brand-owy pasek akcentowy u góry — sygnatura wizualna DrWidget. */
.leki-card-hero { position: relative; overflow: hidden; }
.leki-card-hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--brand-500),
        color-mix(in srgb, var(--brand-500) 35%, #7dd3fc));
}

/* Tytuł karty produktu — mocniejsza hierarchia */
.leki-card-hero h1 { letter-spacing: -0.02em; }
@media (min-width: 768px) { .leki-card-hero h1 { font-size: 2.25rem; line-height: 1.15; } }

/* Zebra w tabelach danych */
.leki-table tbody tr:nth-child(even) td { background: #f8fafc; }
.dark .leki-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }

/* Jump-nav i quickbar na solidnej powierzchni (spójnie z kartami) */
.leki-jumpnav { border-radius: 0.875rem; }

/* ── 12b. Skaner EAN — SEKCJA USUNIĘTA ────────────────────────────────────
   Stały tu style skanera kodu EAN: przełącznik warstw `.leki-scan-cam` /
   `.leki-scan-usb` sterowany atrybutem `data-scan-mode`, plakietka „czekam na
   skan" wraz ze stanem błędu, pole uzbrojone do skanu (`input[data-leki-scan-armed]`)
   oraz skrót do aparatu w polu `/zamiennik` (`.leki-zam-skan`).

   Skaner zniknął z serwisu 2026-08-14 (ADR-0021) razem z zamiennikiem i interakcjami
   — DrWidget jest bazą wiedzy o lekach. Nie ma już ani `barcode-scanner.js`, ani
   atrybutu `data-scan-mode`, ani jednego elementu z tymi klasami. Kod EAN dalej
   działa jako zapytanie wpisane albo wklejone do pola wyszukiwarki. */

/* ── 13. Druk karty produktu (farmaceuta przy stole) ─────────────────────── */

@media print {
    nav, footer, .leki-jumpnav, .leki-sticky-search, .farm-ai-button,
    .cookie-gate-scrim { display: none !important; }
    .card-static { background: #fff !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; backdrop-filter: none !important; }
    main#main { padding: 0 !important; }
    details { open: true; }
    details > *:not(summary) { display: block !important; }
}

/* ── Etykieta archetypu newsa (strona główna) ──────────────────────────────
   Kolor przychodzi z PHP w atrybucie `style`, bo zależy od archetypu wpisu.
   Atrybutu nie da się przełączyć wariantem `dark:`, a odcienie dobrane pod
   biel (-600/-700) na ciemnym tle spadały do 2,3–3,4:1. Stąd para zmiennych:
   `--arch` dla jasnego motywu, `--arch-dark` dla ciemnego. */
.leki-arch { color: var(--arch, #475569); }
.dark .leki-arch { color: var(--arch-dark, #94a3b8); }

/* ── Tła i obramowania marki z krytą, w trybie ciemnym ─────────────────────
   Tailwind NIE potrafi wygenerować `dark:bg-brand-900/30` i pokrewnych, bo kolory
   marki są zdefiniowane jako `var(--brand-900, #hex)` — modyfikator krycia wymaga
   zapisu `rgb(... / <alpha-value>)`. Klasy nie trafiają więc do statycznego builda
   i aktywna pozycja nawigacji w trybie ciemnym zostawała BEZ tła (sam kolor tekstu).
   Nie jest to regresja przebudowy arkusza — nigdy nie działały.

   Poniżej odpowiedniki wyłącznie dla DrWidget. Docelowo: przejść w core na
   `rgb(var(--brand-900-rgb) / <alpha-value>)` i usunąć te reguły — to zmiana
   dotykająca wszystkich portali, więc świadomie poza zakresem przeglądu UI leki. */
.dark .dark\:bg-brand-900\/10  { background-color: color-mix(in srgb, var(--brand-900, #1e3163) 10%, transparent); }
.dark .dark\:bg-brand-900\/20  { background-color: color-mix(in srgb, var(--brand-900, #1e3163) 20%, transparent); }
.dark .dark\:bg-brand-900\/30  { background-color: color-mix(in srgb, var(--brand-900, #1e3163) 30%, transparent); }
.dark .dark\:border-brand-900\/40 { border-color: color-mix(in srgb, var(--brand-900, #1e3163) 40%, transparent); }
.dark .dark\:border-brand-500\/30 { border-color: color-mix(in srgb, var(--brand-500, #0f4769) 30%, transparent); }

/* ── Honeypot: ukryty odnośnik-pułapka w listach produktów ──────────────────
   Wypchnięcie poza ekran, a NIE `display:none` — scraper parsujący sam HTML nie czyta
   CSS w ogóle, ale scraper na headless-browserze często odsiewa właśnie `display:none`
   i wtedy pułapkę by ominął.

   To jest JEDYNA warstwa ukrycia dla widzącego użytkownika, więc reguła musi zostać:
   przy braku CSS (przeglądarka tekstowa, własny arkusz, wysoki kontrast) odnośnik staje
   się widoczny i klikalny. Dlatego trafienie w pułapkę samo z siebie nigdy nie blokuje —
   patrz leki_antibot_honeypot_hit(). Wyjęcie z czytnika ekranu i z kolejności Tab robią
   `aria-hidden` i `tabindex="-1"` w HTML, nie ten arkusz. */
.leki-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══ 15. KARTA LEKU — „arkusz kliniczny" (rework 2026-07-29) ═══════════════
   Co było nie tak: karta renderowała się jako stos ~18 identycznych kart
   .card-static — ten sam promień, cień, padding i szerokość, więc sekcja
   z jednym chipem („Substancje czynne") ważyła wizualnie tyle samo co tabela
   refundacji. Nic nie miało hierarchii, a każdy nagłówek niósł ikonę w innym
   kolorze (czerwień/bursztyn/fiolet/turkus/zieleń) — konfetti zamiast systemu.

   Rework dzieli POWIERZCHNIE wg roli, nie wg sekcji:
     • DECYZJA (tożsamość leku + szybkie odpowiedzi) → osobne karty,
     • REFERENCJA (kilkanaście sekcji do czytania)   → JEDEN arkusz,
       sekcje rozdzielone włoskową linią, bez własnego chromu.

   Prawo koloru: marka = nawigacja i linki; skala sygnałowa (.leki-sig,
   sekcja 3) = wyłącznie ocena kliniczna; wszystko inne = slate. Ikony
   nagłówków w arkuszu są wyciszone, bo rytm i treść niosą sygnał lepiej
   niż piktogram w losowym odcieniu.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 15a. Blok tożsamości (hero + identyfikacja = JEDNA karta) ───────────── */

/* Nazwa leku i to, czym ten lek jest (Rp/OTC, substancja, moc, producent,
   bezpieczeństwo) stanowiły dwie osobne karty rozdzielone odstępem — nazwa
   wisiała w pustej ramce, a pod nią zaczynała się „druga karta tego samego". */
/* Wcięcie z jednej zmiennej (--lk-pad, §16a) — blok tożsamości, strefy decyzyjne
   i arkusz referencyjny mają wtedy WSPÓLNĄ lewą krawędź treści. Wcześniej każda
   z tych warstw niosła własną wartość (1,25 / 1,75 / 2 / 2,5 rem) i pion tekstu
   falował przez całą stronę o kilkanaście pikseli na każdym styku. */
.leki-idcard { padding: 0; overflow: hidden; }
.leki-idcard__head { padding: var(--lk-pad) var(--lk-pad) 0.75rem; }
.leki-idcard__body { padding: 0 var(--lk-pad) var(--lk-pad); }
.leki-idcard__foot {
    padding: 0.875rem var(--lk-pad);
    border-top: 1px solid #eef2f7;
    background: #fbfcfe;
}
.dark .leki-idcard__foot { border-top-color: rgba(255,255,255,.07); background: rgba(255,255,255,.02); }

/* Meta identyfikacyjna: siatka etykieta/wartość zamiast ciągu rozdzielonego
   kropkami. Sześć par w jednym zawijanym akapicie („Postać: X · Opakowanie: Y
   · Producent: Z …") wygląda jak zdanie, a jest tabelą — nie dało się znaleźć
   pola wzrokiem, bo etykiety nie stały w kolumnie. */
.leki-idmeta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1.5rem; }
@media (min-width: 768px) { .leki-idmeta { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.leki-idmeta > div { min-width: 0; padding: 0.5rem 0; border-top: 1px solid #f1f5f9; }
.dark .leki-idmeta > div { border-top-color: rgba(255,255,255,.06); }
.leki-idmeta dt {
    font-size: 0.6875rem; font-weight: 700; line-height: 1.35;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--lk-lab, #94a3b8);
}
.leki-idmeta dd {
    margin-top: 0.125rem; font-size: 0.875rem; font-weight: 600; line-height: 1.4;
    color: var(--color-navy, #0a324a); overflow-wrap: anywhere;
}
/* Identyfikatory (EAN, numer pozwolenia) — jeden ciąg cyfr, nigdy łamany. EAN
   rozbity na dwie linie przestaje być kodem: nie da się go odczytać skanerem
   z ekranu ani przepisać bez liczenia. Przy 320 px trzynaście cyfr w 13 px monospace
   mieści się w kolumnie 114 px; gdyby kiedyś nie mieściło, przewinie się w komórce
   zamiast rozpychać siatkę. */
.leki-idmeta dd.leki-idmeta__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow-wrap: normal; overflow-x: auto; scrollbar-width: none;
}
.leki-idmeta dd.leki-idmeta__id::-webkit-scrollbar { display: none; }
.dark .leki-idmeta dd { color: #e2e8f0; }
.leki-idmeta dd a { color: inherit; text-decoration: none; border-bottom: 1px solid #cbd5e1; }
.leki-idmeta dd a:hover { color: var(--brand-600); border-bottom-color: currentColor; }
.dark .leki-idmeta dd a { border-bottom-color: rgba(255,255,255,.22); }
.dark .leki-idmeta dd a:hover { color: var(--brand-300); }

/* Podtytuł tożsamości: substancja · moc. Jedna linia, jeden akcent. */
.leki-idcard__inn { font-size: 1.0625rem; line-height: 1.4; color: #475569; }
.dark .leki-idcard__inn { color: #94a3b8; }
.leki-idcard__inn a { color: var(--brand-600); text-decoration: none; font-weight: 600; }
.dark .leki-idcard__inn a { color: var(--brand-300); }
.leki-idcard__inn a:hover { text-decoration: underline; }

/* ── 15b. Arkusz referencyjny ─────────────────────────────────────────────── */

.leki-sheet {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.12);
    padding: 0 1.25rem;
}
@media (min-width: 768px) { .leki-sheet { padding: 0 1.75rem; } }
.dark .leki-sheet { background: #131f33; border-color: rgba(148,163,184,.16); box-shadow: none; }

.leki-sheet__sec { padding: 1.375rem 0; }
@media (min-width: 768px) { .leki-sheet__sec { padding: 1.75rem 0; } }
.leki-sheet__sec + .leki-sheet__sec { border-top: 1px solid #eef2f7; }
.dark .leki-sheet__sec + .leki-sheet__sec { border-top-color: rgba(255,255,255,.07); }

/* Jeden stopień nagłówka w całym arkuszu — bloki niosły text-lg/text-base
   zależnie od tego, kiedy powstały. Specyficzność (0,1,1) bije .text-lg. */
.leki-sheet__sec h2 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; }

/* Ikony tematyczne przy tytułach sekcji ZDJĘTE. Każdy blok dobierał je sobie sam
   i w innym kolorze (czerwień, bursztyn, fiolet, turkus, zieleń, marka) — piętnaście
   sekcji, piętnaście akcentów, zero systemu. Znacznikiem sekcji zostaje brandowy
   pasek .leki-h2, ten sam w całym arkuszu. Chevrony rozwijania (bezpośrednie dzieci
   button/summary) NIE są ikonami tematycznymi i zostają. */
.leki-sheet__sec > h2 > svg,
.leki-sheet__sec > div > h2 > svg,
.leki-sheet__sec > button > h2 > svg,
.leki-sheet__sec > details > summary > h2 > svg { display: none; }

/* Ikony, które mimo wszystko trafią do nagłówka (np. z bloku spoza tej listy) —
   wyciszone, nie kolorowe. Selektory dziecięce, żeby nie zabrać koloru ikonom
   NIOSĄCYM znaczenie wewnątrz treści (sygnały ryzyka, statusy). */
.leki-sheet__sec > h2 svg,
.leki-sheet__sec > div > h2 svg,
.leki-sheet__sec > button > h2 svg,
.leki-sheet__sec > button > svg,
.leki-sheet__sec > details > summary > svg,
.leki-sheet__sec > details > summary > h2 svg { color: #94a3b8; }
.dark .leki-sheet__sec > h2 svg,
.dark .leki-sheet__sec > div > h2 svg,
.dark .leki-sheet__sec > button > h2 svg,
.dark .leki-sheet__sec > button > svg,
.dark .leki-sheet__sec > details > summary > svg,
.dark .leki-sheet__sec > details > summary > h2 svg { color: #64748b; }

/* ── 15c. Wiersze danych — włoskowa linia zamiast kolorowego kafla ───────── */

.leki-row {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.5625rem 0; border-top: 1px solid #f1f5f9;
}
.leki-row:first-child { border-top: 0; padding-top: 0; }
.dark .leki-row { border-top-color: rgba(255,255,255,.05); }
/* Numer pozycji jest ORIENTACJĄ w liście („trzecie wskazanie z dziewięciu"), więc
   musi być czytelny. #cbd5e1 na bieli daje kontrast 1,6:1 — poniżej progu, przy
   którym cyfrę w ogóle widać bez wpatrywania się. */
.leki-row__n {
    flex: none; width: 1.25rem; padding-top: 0.15rem;
    font-size: 0.6875rem; font-weight: 700; color: #64748b;
    font-variant-numeric: tabular-nums;
}
.dark .leki-row__n { color: #64748b; }
.leki-row__t { min-width: 0; flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; color: #334155; }
.dark .leki-row__t { color: #cbd5e1; }
.leki-row__k { min-width: 0; flex: 1 1 auto; font-size: 0.875rem; font-weight: 600; color: var(--color-navy, #0a324a); }
.dark .leki-row__k { color: #e2e8f0; }
.leki-row__v { flex: none; text-align: right; }

/* ── 15d. Szybkie odpowiedzi — równa wysokość kart w rzędzie ─────────────── */

/* Karty stały na `items-start`, więc trzy moduły obok siebie kończyły się na trzech
   różnych wysokościach (Interakcje z akapitem = 10 linii, Ciąża = 3) i rząd rwał się
   wizualnie. Wyrównujemy WYSOKOŚĆ kart, ale treści NIE rozpychamy do dołu: stopka
   przyklejona `margin-top:auto` zostawiała w krótkiej karcie dziurę w środku, która
   czyta się jak brakująca treść. Nadmiar wysokości schodzi pod ostatni wiersz. */
.leki-qa { align-items: stretch; }

/* ── 15e. Spis treści karty (góra prawej kolumny, desktop) ───────────────── */

/* SZYNA MARGINESOWA, nie lista linków (przebudowa 2026-08-10). Spis nadal NIE MA
   własnego tła — decyzja z przebudowy kolumny zostaje w mocy, bo pastylki na białym
   panelu robiły w kolumnie drugą „kartę" konkurującą z profilem bezpieczeństwa.
   Brzydki był nie brak tła, tylko brak KRAWĘDZI: szyna `#e2e8f0` na szarym tle strony
   daje kontrast 1,05:1, więc linki wisiały z wcięciem, którego nic nie tłumaczyło,
   a tekst zajmował 150 z 336 px kolumny i blok kończył się poszarpaną prawą stroną.
   Trzy poprawki, wszystkie strukturalne: szyna widoczna i CIĄGŁA (segment na każdej
   pozycji, nie jedna ramka na liście), wiersz na PEŁNĄ szerokość kolumny (blok
   dostaje wymiar bez dokładania powierzchni), numer pozycji jako orientacja —
   ta sama gramatyka co numerowane wiersze treści (§15c), nie import z zewnątrz. */
.leki-toc { position: static; }

/* POLE NAWIGACYJNE (2026-08-10). Do tej pory spis nie miał własnej powierzchni —
   decyzja z przebudowy kolumny, żeby nie robić drugiej „karty" konkurującej
   z profilem bezpieczeństwa. Na żywej stronie wyszło odwrotnie: spis stoi między
   powierzchniami (profil, przycisk ulotki, Przegląd lekowy), więc jako jedyny
   obiekt bez krawędzi nie czytał się jako moduł lżejszy, tylko jako niedokończony
   — ginął w tle strony.

   Pole obejmuje spis RAZEM z paskiem działań, a nie sam spis: obwódka wokół
   samego spisu przenosiła problem piętro niżej, bo bezkrawędziowym sierotą
   zostawał wtedy pasek „Dokumenty". „Gdzie jestem" i „co mogę stąd zrobić" to
   jedno narzędzie; kolumna schodzi z czterech obiektów do trzech.

   Powierzchnia z rodziny `.card-static` (szkło 72%, promień 16 px, ten sam cień),
   bo kolumna ma mieć JEDNĄ gramatykę pudełek, nie dwie. Odróżnia ją podział
   główka/treść — żaden inny moduł kolumny go nie ma i to on, a nie wielkość ani
   kolor, mówi „to nawigacja, nie treść". Waga zostaje niższa niż u profilu:
   mniejszy padding, zero nagłówka w skali H. */
.leki-navcard {
    padding: 0 0.875rem 0.875rem;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.dark .leki-navcard {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 24px rgba(0,0,0,.2);
}

/* Główka na pełną szerokość pola (ujemne marginesy do krawędzi), w delikatnej
   pasteli marki — etykieta w kolorze marki zamiast szarości, bo to jedyny
   podpis w kolumnie, który nazywa NARZĘDZIE, a nie porcję danych. */
.leki-toc__label {
    display: block;
    margin: 0 -0.875rem 0.625rem; padding: 0.5625rem 0.875rem 0.5rem;
    border-bottom: 1px solid var(--leki-line);
    border-radius: 15px 15px 0 0;
    background: color-mix(in srgb, var(--brand-500) 5%, transparent);
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--brand-700, #0a324a);
}
.dark .leki-toc__label {
    background: color-mix(in srgb, var(--brand-400) 9%, transparent);
    color: var(--brand-300, #93c5fd);
}
.leki-toc ul { counter-reset: leki-toc; }

/* Działania jako DRUGA sekcja tego samego pola: włoskowa linia na pełną szerokość
   (te same ujemne marginesy co główka), nie osobna ramka w ramce. */
.leki-navcard .leki-aside__docs {
    margin: 0.875rem -0.875rem 0; padding: 0.875rem 0.875rem 0;
    border-top: 1px solid var(--leki-line);
}

/* Segment szyny należy do POZYCJI, nie do listy: tylko wtedy da się pomalować
   przebytą część trasy osobno od reszty. Wysokość bierze z własnego pudełka razem
   z paddingiem, więc przerwa grupy (§ niżej) nie rozcina szyny — spis pozostaje
   jednym dokumentem z akapitem, a nie dwiema listami. */
.leki-toc li { position: relative; }
.leki-toc li::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    border-radius: 1px; background: #cbd5e1; transition: background .15s;
}
.dark .leki-toc li::before { background: rgba(148,163,184,.3); }

/* Przebyta część trasy — pozycje PRZED bieżącą. `:has()` zamiast klasy z JS:
   skrypt zaznaczający sekcję (§17c) zostaje bez zmian, a przeglądarka bez `:has()`
   dostaje po prostu jednolitą szynę. Ślad jest wyraźnie słabszy od playheada —
   to informacja „za tobą", nie drugi wskaźnik pozycji. */
.leki-toc li:has(~ li a.is-active)::before {
    background: color-mix(in srgb, var(--brand-500) 42%, transparent);
}

.leki-toc a {
    display: grid; grid-template-columns: 1rem 1fr; align-items: baseline;
    gap: 0.5rem; padding: 0.3125rem 0.5rem 0.3125rem 0.8125rem;
    border-radius: var(--lk-r-sm, 0.5rem);
    font-size: 0.8125rem; line-height: 1.35; color: #475569;
    text-decoration: none; transition: color .15s, background-color .15s;
}
.dark .leki-toc a { color: #94a3b8; }
.leki-toc a::before {
    counter-increment: leki-toc; content: counter(leki-toc);
    text-align: right; font-size: 0.625rem; font-weight: 700; color: #94a3b8;
    font-variant-numeric: tabular-nums; transition: color .15s;
}
.dark .leki-toc a::before { color: #64748b; }

/* Podświetlenie wiersza jest NEUTRALNE, nie brandowe: kolor marki w tej kolumnie
   znaczy „tutaj jesteś" (§17c) i nie może przypadkiem zapalić się pod kursorem. */
.leki-toc a:hover { color: var(--color-navy, #0a324a); background: rgba(15,23,42,.045); }
.leki-toc a:hover::before { color: #64748b; }
.dark .leki-toc a:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
.dark .leki-toc a:hover::before { color: #94a3b8; }
.leki-toc li:hover::before { background: #94a3b8; }
.dark .leki-toc li:hover::before { background: rgba(148,163,184,.55); }

/* Granica grup: nad nią to, co rozstrzyga przy okienku (profil, wariant, zamienniki,
   interakcje, wskazania), pod nią referencja rejestrowa. Włoskowa linia biegnie od
   szyny do prawej krawędzi modułu — odkąd wiersz ma pełną szerokość, pełny podział
   czyta się jak akapit, a nie jak dwie listy; wcześniejsza wersja (28-px kreska przy
   szynie) wyglądała jak defekt renderowania. Odstęp robi PADDING, nie margines —
   margines wyciąłby dziurę w szynie. Etykiet grup świadomie nie ma: kosztowałyby
   40 px i wprowadziły trzeci stopień mikro-podpisów w kolumnie. */
.leki-toc__cut { padding-top: 0.9375rem; }
.leki-toc__cut::after {
    content: ''; position: absolute; top: 0.4375rem; left: 0.8125rem; right: 0.5rem;
    height: 1px; background: var(--leki-line);
}

/* ── 15f. Pasek akcji (Ulotka / ChPL / Refundacja / Udostępnij) ──────────── */

/* Cztery przyciski w czterech pastelach (niebieski, zielony, niebieski, fiolet)
   sugerowały cztery różne KATEGORIE akcji, choć to jeden zestaw skrótów.
   Neutralna ramka + brandowy hover: kolor wraca do roli sygnału. */
.leki-act { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.leki-act > a, .leki-act > button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    flex: 1 1 6.5rem; min-height: 2.375rem; padding: 0 0.75rem;
    border: 1px solid #e2e8f0; border-radius: 0.625rem; background: #fff;
    font-size: 0.8125rem; font-weight: 600; color: #475569; text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}
.dark .leki-act > a, .dark .leki-act > button {
    background: transparent; border-color: rgba(255,255,255,.12); color: #cbd5e1;
}
.leki-act > a:hover, .leki-act > button:hover {
    border-color: var(--brand-500); color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 5%, #fff);
}
.dark .leki-act > a:hover, .dark .leki-act > button:hover {
    color: var(--brand-300); background: color-mix(in srgb, var(--brand-400) 10%, transparent);
}
.leki-act svg { width: 0.875rem; height: 0.875rem; flex: none; }

/* ── 15g. Kafel narzędzia „Przegląd lekowy” ──────────────────────────────── */

/* HISTORIA WAGI WIZUALNEJ. Kafel był kolejno gradientem purple→violet→indigo,
   potem ciemnym navy — i w obu wersjach był NAJCIEMNIEJSZĄ plamą karty leku:
   przy zmrużonych oczach wzrok szedł do kolumny bocznej, a dane leku (biel na
   jasnym) nie czytały się jako obiekt. Stąd jasna powierzchnia i JEDEN akcent.
   Ta zasada obowiązuje dalej — narzędzie ma być widoczne, ale nie może wygrywać
   z lekiem, po który ktoś tu przyszedł.

   PALETA (rework 2026-08-10). Kafel jest jedynym miejscem DrWidget z turkusem:
   promuje CUDZĄ usługę (app.przegladlekowy.pl), więc nie udaje treści portalu,
   którego brand to błękit --brand-*. Turkus jest tu tożsamością tej usługi, nie
   drugim systemem — zmienne są ZAKRESOWANE do `.leki-pl`, a promień, siatka,
   font i gramatyka ikon zostają portalowe. Nie rozlewaj `--pl-*` poza ten blok.

   Kontrast (sprawdzony): #115e59 na bieli 7,6:1 · biel na #0f4769 5,5:1 ·
   #5eead4 na #131f33 11,3:1 · #06302c na #2dd4bf 7,9:1. */
.leki-pl {
    --pl-deep:   #0f4769;   /* głęboki turkus — tło CTA */
    --pl-deep-h: #115e59;   /* hover CTA + tekst oznaczenia */
    --pl-mid:    #00aeef;   /* ikony, punkty tła */
    --pl-mint:   #eef7fb;   /* bardzo jasna mięta — poświata w rogu */
    /* Panel korzyści jest PRZEZROCZYSTY, nie kryjący: sieć połączonych leków
       przechodzi przez niego dalej, zamiast urywać się na jego krawędzi.
       Wersja kryjąca wycinała motyw w poziomie i fragment nad panelem czytał
       się jak niedomalowana dekoracja. */
    --pl-panel:  color-mix(in srgb, var(--pl-mid) 8%, transparent);
    --pl-line:   #cfeae6;   /* obrys */
    --pl-ink:    #134e4a;   /* tekst korzyści */
    --pl-cta-fg: #fff;

    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid var(--pl-line);
    transition: border-color .15s, box-shadow .15s;

    /* O układzie rozstrzyga szerokość SLOTU (320–720 px), nie okna — patrz
       nagłówek widgetu. `inline-size` zamyka tylko oś poziomą, więc kafel
       nadal rośnie w pionie pod treść.

       🔴 Element NIE ODPYTUJE SAM SIEBIE: reguły `@container` pisane na
       `.leki-pl` nigdy się nie zapalą. Dlatego siatka i wcięcie siedzą na
       `.leki-pl__grid` — inaczej wnętrze przełącza się na układ szeroki,
       a kontener zostaje jednokolumnowy i wychodzi z tego hybryda. */
    container-type: inline-size;
    container-name: lekipl;
}

.leki-pl__grid {
    position: relative;
    padding: 1.125rem;
    display: grid;
    gap: 0.875rem;
    grid-template-areas: 'msg' 'pros' 'act';
}

/* Siatka punktów — jedyna dekoracja pola. Krok 14 px i 8% krycia: motyw ma być
   widoczny dopiero, gdy się go szuka. `background-attachment` domyślny, bo kafel
   bywa w bloku sticky i tło przyklejone do viewportu pełzłoby przy scrollu. */
.leki-pl::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(120% 100% at 100% 0%, var(--pl-mint) 0%, transparent 62%),
        radial-gradient(circle, color-mix(in srgb, var(--pl-mid) 26%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 14px 14px;
}

.leki-pl:hover {
    border-color: color-mix(in srgb, var(--pl-mid) 45%, transparent);
    box-shadow: 0 10px 28px -20px rgba(15,23,42,.35);
}

.dark .leki-pl {
    /* Powierzchnia zostaje w rodzinie ciemnych kafli karty (#131f33) — turkus
       wchodzi akcentem, nie płaszczyzną, żeby kafel nie odklejał się od sąsiadów. */
    --pl-deep:   #2dd4bf;
    --pl-deep-h: #5eead4;
    --pl-mid:    #5eead4;
    --pl-mint:   rgba(45,212,191,.07);
    --pl-panel:  rgba(45,212,191,.07);
    --pl-line:   rgba(148,163,184,.18);
    --pl-ink:    #cbd5e1;
    --pl-cta-fg: #06302c;
    background: #131f33;
}
.dark .leki-pl::before {
    background-image:
        radial-gradient(120% 100% at 100% 0%, var(--pl-mint) 0%, transparent 62%),
        radial-gradient(circle, rgba(94,234,212,.16) 1px, transparent 1px);
}
.dark .leki-pl:hover { border-color: color-mix(in srgb, var(--pl-mid) 32%, transparent); }

/* Sieć połączonych leków — tylko w układzie szerokim (patrz @container niżej). */
.leki-pl__art { display: none; }

.leki-pl__msg { grid-area: msg; min-width: 0; }

.leki-pl__eyebrow {
    margin: 0 0 0.4375rem;
    /* 0,75 rem to podłoga czytelności przyjęta w QA leki (kontrola „tekst < 12px”).
       Wersalik z rozstrzeleniem znosi ją bez strat — mniejszy stopień był tylko
       nawykiem po dawnej pastylce `text-[10px]`. */
    font-size: 0.75rem; font-weight: 700; line-height: 1;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--pl-deep-h);
}
.dark .leki-pl__eyebrow { color: var(--pl-deep-h); }

.leki-pl__head {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem; line-height: 1.3; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-navy, #0a324a);
    /* Nagłówek ma 62 znaki i w kolumnie 320 px schodzi na cztery wiersze —
       `balance` nie zostawia w ostatnim jednego wyrazu-sieroty. */
    text-wrap: balance;
}
.dark .leki-pl__head { color: #fff; }

.leki-pl__desc {
    margin: 0;
    font-size: 0.8125rem; line-height: 1.55;
    color: #64748b;
}
.dark .leki-pl__desc { color: #94a3b8; }

/* Korzyści — trzy zwarte wiersze. Bez pastylek i bez ramek: w kolumnie 320 px
   trzy obramowane kafelki robią z narzędzia menu, a to jest jedna czynność. */
.leki-pl__pros {
    grid-area: pros;
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 0.375rem;
    min-width: 0;
}
.leki-pl__pro {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; line-height: 1.35; font-weight: 500;
    color: var(--pl-ink);
    min-width: 0;
}
.leki-pl__ico {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 0.5rem;
    background: color-mix(in srgb, var(--pl-mid) 12%, transparent);
    color: var(--pl-deep-h);
}
.leki-pl__ico svg { width: 0.875rem; height: 0.875rem; }
.dark .leki-pl__ico {
    background: color-mix(in srgb, var(--pl-mid) 14%, transparent);
    color: var(--pl-mid);
}

.leki-pl__act { grid-area: act; min-width: 0; }

/* Jedno wyjście z kafla. Pełna szerokość w układzie wąskim, bo w kolumnie 320 px
   przycisk „do treści” zostawia po prawej pustkę czytaną jako niedokończony wiersz. */
.leki-pl__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; min-height: 2.75rem;      /* 44 px — cel dotykowy */
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: var(--pl-deep);
    color: var(--pl-cta-fg);
    font-size: 0.875rem; font-weight: 600; line-height: 1.2;
    text-align: center; text-decoration: none;
    transition: background-color .15s, box-shadow .15s;
}
.leki-pl__cta:hover { background: var(--pl-deep-h); color: var(--pl-cta-fg); text-decoration: none; }
.leki-pl__cta-arr { width: 1rem; height: 1rem; flex: none; }

/* Klikalna cała karta bez zagnieżdżania <a> w <a>: rozciągnięty ::after JEDYNEGO
   linku. W drzewie dostępności zostaje jeden link z jedną nazwą, a Tab zatrzymuje
   się raz — nie na kaflu i osobno na CTA. */
.leki-pl__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Obrys focusa obrysowuje PRZYCISK, nie całą kartę — rozciągnięty ::after nie
   zmienia pudełka linku, więc ring zostaje tam, gdzie jest treść do kliknięcia.
   Kolor turkusowy, bo domyślny ring marki (błękit #0f4769) leży na turkusowym
   wypełnieniu CTA i ma na nim za mały kontrast.

   🔴 Selektor MUSI nieść `main#main`. Reguła §12 to `main#main a:focus-visible`
   — specyficzność (1,1,2), więc samo `.leki-pl__cta:focus-visible` (0,2,0)
   przegrywa i ring wracał niebieski (zmierzone: rgb(37,99,235)). Ta sama reguła
   narzuca `border-radius: .375rem`, czyli przycisk PROSTOWAŁ NAROŻNIKI w chwili
   otrzymania focusa; dlatego promień jest tu powtórzony.
   Wariant bez `main#main` zostaje dla powierzchni renderowanych poza `<main>`. */
main#main .leki-pl__cta:focus-visible,
.leki-pl__cta:focus-visible {
    outline: 2px solid var(--pl-deep-h);
    outline-offset: 2px;
    border-radius: 0.625rem;
}
.dark main#main .leki-pl__cta:focus-visible,
.dark .leki-pl__cta:focus-visible { outline-color: #5eead4; }

/* ── Układ pośredni: mięta jako panel (≥ 30rem slotu) ────────────────────── */
/* Pas domykający daje kaflowi 598–720 px. Poniżej 40 rem zostaje jedna kolumna,
   ale korzyści dostają już miętowy panel — dwie kolumny przy 598 px ścisnęłyby
   prawą do ~250 px i każda korzyść łamałaby się na dwa wiersze. */
@container lekipl (min-width: 30rem) {
    .leki-pl__grid { padding: 1.5rem; gap: 1.125rem; }
    .leki-pl__head { font-size: 1.3125rem; margin-bottom: 0.625rem; }
    .leki-pl__desc { font-size: 0.875rem; }

    /* Tu jest miejsce na rysunek — kotwiczony do prawego górnego rogu, pod
       kolumną korzyści, przycięty krawędzią kafla. */
    .leki-pl__art {
        display: block;
        position: absolute;
        top: -0.75rem; right: -1rem;
        width: 9.25rem; height: auto;
        color: var(--pl-mid);
        opacity: .3;
        pointer-events: none;
    }
    .dark .leki-pl__art { opacity: .22; }

    /* Korzyści dostają miętowy panel — to jedyne miejsce, gdzie mięta występuje
       jako płaszczyzna, i to ono odróżnia układ szeroki od listy w kolumnie. */
    .leki-pl__pros {
        gap: 0.5rem;
        align-content: center;
        padding: 0.875rem;
        border-radius: 0.75rem;
        background: var(--pl-panel);
        border: 1px solid color-mix(in srgb, var(--pl-mid) 16%, transparent);
    }
    .dark .leki-pl__pros { border-color: color-mix(in srgb, var(--pl-mid) 14%, transparent); }
    .leki-pl__pro { font-size: 0.875rem; }
    .leki-pl__ico { width: 1.75rem; height: 1.75rem; }
    .leki-pl__ico svg { width: 1rem; height: 1rem; }

    /* Przycisk wraca do szerokości treści — w kolumnie 300 px pełna szerokość
       robiłaby z CTA pas przez pół kafla. */
    .leki-pl__cta { width: auto; align-self: start; padding-inline: 1.25rem; }
    .leki-pl__act { display: flex; }
}

/* ── Układ szeroki: komunikat i CTA po lewej, korzyści po prawej (≥ 40rem) ── */
/* Próg 40 rem, nie 34: prawa kolumna musi zmieścić „Wykrywanie potencjalnych
   interakcji” w JEDNYM wierszu razem z ikoną (~272 px), a lewa nagłówek 21 px
   w trzech. Przy 598 px slotu (pas pod kartą na 1280) wychodziło 250 px na
   kolumnę i obie treści łamały się nierówno — dlatego ten zakres zostaje
   jednokolumnowy z panelem, a dzieli się dopiero od 640 px. */
@container lekipl (min-width: 40rem) {
    .leki-pl__grid {
        column-gap: 1.75rem; row-gap: 1.125rem;
        grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 19rem);
        grid-template-areas:
            'msg  pros'
            'act  pros';
        align-content: start;
    }
    /* Panel korzyści trzyma wysokość obu wierszy lewej kolumny, więc wyśrodkowanie
       treści w pionie jest tym, co wyrównuje go optycznie z blokiem komunikatu. */
    .leki-pl__pros { align-content: center; padding: 1rem; }
    .leki-pl__act { align-items: end; }
}

/* ── 15h. Narzędzie zamienników (/zamiennik) ─────────────────────────────── */

/* Ta strona jest przyrządem używanym przy okienku, pod presją czasu, często na
   telefonie trzymanym jedną ręką. Stąd dwie decyzje, które ją odróżniają od
   reszty portalu:

   1. LICZBY SĄ TABULARNE. Dawka jest tu najważniejszą treścią, a „23,75" i „75"
      muszą dać się porównać wzrokiem w kolumnie, nie po przeczytaniu.
   2. PASEK ODNIESIENIA pokazuje wprost, co porównaliśmy. Wynik doboru bez
      podanej podstawy jest twierdzeniem bez źródła.

   Wskaźnik kroków „1 Lek · 2 Moc · 3 Zamienniki" był tu trzeci — ZDJĘTY na
   prośbę usera 2026-07-29. Etap i tak niesie breadcrumb oraz nagłówek każdego
   stanu, a pas nad treścią powtarzał to na każdej podstronie.

   Klasy nazwane, nie utility — tailwind-built.css jest budowany statycznie,
   więc nowa kombinacja utility nie istnieje do czasu przebudowy arkusza. */

.leki-zam-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
}

/* Wybór mocy ─────────────────────────────────────────────────────────────── */
/* Kafel, nie chip: to jest moment, w którym pada odpowiedź na pytanie
   „której dawki dotyczy wynik", więc cel dotykowy ma 44 px i liczbę na froncie. */
/* Szerokość ograniczona świadomie: strona stoi na max-w-6xl jak reszta serwisu,
   ale kafle mocy rozciągnięte na 1150 px dałyby dwa pudełka zgubione w pustce.
   Cztery w rzędzie to naturalny rytm przy typowej karcie (2-6 mocy). */
.leki-zam-moce {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem; max-width: 40rem;
}
/* Kafel stoi teraz NA karcie-nagłówku (biel), więc jego własne tło musi być
   o ton chłodniejsze — biel na bieli zostawiała samą ramkę i rząd wyglądał jak
   szkic. Ten sam odcień co stopka tożsamości na karcie leku. */
.leki-zam-moc {
    display: flex; align-items: baseline; gap: .375rem;
    min-height: 4rem; padding: .875rem 1rem;
    border: 1px solid var(--leki-line); border-radius: .75rem; background: #f8fafc;
    text-decoration: none; transition: border-color .12s, background-color .12s;
}
.leki-zam-moc:hover {
    border-color: var(--brand-500, #0f4769);
    background: color-mix(in srgb, var(--brand-500, #0f4769) 6%, #fff);
}
/* Liczba jest treścią kroku, nie ozdobą: czytana z odległości ramienia, przy
   opakowaniu trzymanym w drugiej ręce. Stąd 2rem i mono — cyfry tej samej
   szerokości ustawiają się w kolumnę między kaflami. */
.leki-zam-moc__v {
    font-size: 2rem; font-weight: 700; color: #0f172a; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.leki-zam-moc__u { font-size: .8125rem; font-weight: 600; color: #475569; }
.leki-zam-moc:hover .leki-zam-moc__v { color: var(--brand-600, #0f4769); }
.dark .leki-zam-moc { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.dark .leki-zam-moc:hover {
    border-color: var(--brand-400, #4a83a8);
    background: color-mix(in srgb, var(--brand-400, #4a83a8) 10%, transparent);
}
.dark .leki-zam-moc__v { color: #fff; }
.dark .leki-zam-moc:hover .leki-zam-moc__v { color: var(--brand-300, #93c5fd); }

/* Pasek odniesienia ──────────────────────────────────────────────────────── */
/* Cztery pola, po których silnik dobiera. Czyta się jak odczyt z przyrządu:
   etykieta wersalikami, wartość pod nią. Bez tego wynik jest twierdzeniem
   bez podanej podstawy. */
/* Odczyt siedzi NA karcie odniesienia, więc nie ma własnego pudełka: niesie go
   włoskowa linia u góry i pionowe rozdzielenia — czyli dokładnie to, co znaczy
   („oto cztery pola, po których dobieraliśmy"), bez drugiej ramki w ramce. */
.leki-zam-ref {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0; margin-top: 1.25rem; border-top: 1px solid var(--leki-line);
}
.leki-zam-ref__c { padding: .75rem .875rem .125rem 0; border-right: 1px solid var(--leki-line-soft); min-width: 0; }
.leki-zam-ref__c + .leki-zam-ref__c { padding-left: .875rem; }
.leki-zam-ref__c:last-child { border-right: 0; }
.leki-zam-ref__k {
    display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .18em; color: #475569; margin-bottom: .25rem;
}
.leki-zam-ref__v {
    display: block; font-size: .875rem; font-weight: 600; color: #0f172a;
    line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.dark .leki-zam-ref__k { color: #94a3b8; }
.dark .leki-zam-ref__v { color: #e2e8f0; }
@media (max-width: 30rem) {
    .leki-zam-ref { grid-template-columns: 1fr 1fr; }
    .leki-zam-ref__c:nth-child(2n) { border-right: 0; }
    .leki-zam-ref__c:nth-child(-n+2) { border-bottom: 1px solid var(--leki-line-soft); padding-bottom: .625rem; }
    .leki-zam-ref__c:nth-child(2n) { padding-left: .875rem; }
    /* Komórki 1 i 3 stoją w LEWEJ kolumnie, ale padding z reguły sąsiedztwa
       (`.leki-zam-ref__c + .leki-zam-ref__c`) łapie też trzecią — POSTAĆ wisiała
       14 px na prawo od SUBSTANCJI, czyli dwa pola tej samej siatki nie stały
       w jednej pionowej linii. Reguła `2n` wyżej resetowała tylko parzyste. */
    .leki-zam-ref__c:nth-child(2n+1) { padding-left: 0; }
}

/* Lista dwukolumnowa z wierszy .leki-row: w siatce 2-kolumnowej DRUGI element to
   pierwszy wiersz prawej kolumny, więc `:first-child` zdejmuje kreskę tylko po lewej
   i rząd startuje krzywo. Zdejmujemy ją także drugiemu — ale dopiero od breakpointu,
   na którym kolumny faktycznie są dwie. */
@media (min-width: 640px) {
    .leki-rows-2 > .leki-row:nth-child(2) { border-top: 0; padding-top: 0; }
}
/* Zapis mocy będący zdaniem, nie liczbą („zestaw do rozpoczęcia leczenia: 15 mg
   oraz 20 mg") — kafel przechodzi wtedy w zwykły blok tekstu na pełną szerokość
   siatki, zamiast rozdymać przypadkowy fragment do rozmiaru dawki. */
.leki-zam-moc--opis { grid-column: 1 / -1; align-items: center; }
.leki-zam-moc--opis .leki-zam-moc__u { font-size: .8125rem; font-weight: 500; color: #334155; }
.dark .leki-zam-moc--opis .leki-zam-moc__u { color: #cbd5e1; }


/* KARTA STOI NA OSI SERWISU — ROZPYCHANIE ZDJĘTE (2026-08-20, zgłoszenie właściciela:
   „wyrównaj kartę leku, bo jest offset do boku za bardzo").

   Do tej zmiany `.leki-cardwide` miało od 1280 px własną szerokość — `min(100vw − 4rem,
   84rem)` z ujemnym marginesem centrującym — czyli 1344 px przy 1440 i 1920 px szerokości
   okna. Oś serwisu (ADR-0031) mierzy 1200 px i trzyma belkę, pas szukania, treść
   i stopkę, więc karta wychodziła poza nią o 48 px z KAŻDEJ strony: zaczynała się
   na lewo od wyszukiwarki i kończyła na prawo od menu.

   POWÓD ROZPYCHANIA WYGASŁ. Liczono je dla układu trzykolumnowego: powłoka 1152 px
   minus lewa kolumna spisu (190) minus kolumna akcji (300) zostawiała treści 566 px.
   Dziś karta ma jedną kolumnę boczną (300–336 px, sam baner — ADR-0038), a oś urosła
   z 1152 do 1200 px, więc na treść zostaje ~870 px. Rozpychanie kupowało już tylko
   rozjazd z resztą serwisu.

   Pilnuje tego `bin/os-serwisu.mjs`: pojemnik `karta` musi mieścić się w pojemniku
   `tresc` na każdej trasie i każdej szerokości. Ten warunek jest innego rodzaju niż
   reszta strażnika — porównuje DWA pojemniki na jednej stronie, a nie jedną trasę
   z drugą; rozjazd był bowiem idealnie spójny między kartami i dlatego przeżył
   ADR-0031. */

/* DWIE strefy: karta + prawa kolumna (spis treści, akcje, przegląd lekowy, banner).
   Trzecia, lewa kolumna ze spisem treści (180–230 px) została zdjęta — ściskała
   kartę z drugiej strony, a spis wchodził dopiero od 1280 px, bo niżej nie było na
   niego miejsca. Przeniesiony na górę prawej kolumny nie kosztuje już szerokości,
   więc cała lewa strefa wraca do karty leku (+180…230 px zależnie od ekranu). */
/* Kolumna boczna trzyma się przedziału 300–336 px. Rosnąca w nieskończoność
   (360 px przy 1680) zaczynała konkurować z treścią: profil bezpieczeństwa jest
   panelem odczytu, a nie drugą kolumną artykułu. */
.leki-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }

/* PRÓG DRUGIEJ KOLUMNY = PRÓG KREACJI (2026-08-20). Od przebudowy kolumna niesie
   wyłącznie baner 300×600, a ten ma w drwidget.css §2 własny próg 68 rem — poniżej
   `.dw-ad--right` znika. Siatka rozdzielała się wcześniej już przy 1024 px, więc
   między 1024 a 1088 px stała pusta kolumna szerokości 300 px: dziura obok treści,
   w której nic nie było i nic nie mogło być. Jeden próg dla obu. */
@media (min-width: 68rem) { .leki-card-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; } }

/* Brak kreacji w rotacji = brak kolumny (PHP nie renderuje wtedy <aside>). Klasa
   zdejmuje drugą kolumnę na KAŻDEJ szerokości — wyższa swoistość niż reguły
   w zapytaniach medialnych wyżej, więc nie potrzebuje `!important`. */
.leki-cardwide.leki-card-grid--solo { grid-template-columns: minmax(0, 1fr); }
/* KOLUMNA MA SZEROKOŚĆ KREACJI, NIE WIĘCEJ (2026-08-20). Rosła wcześniej do 320 i 336 px
   — rytm z czasów, gdy niosła spis treści, dokumenty i profil bezpieczeństwa, czyli
   treść łamaną do szerokości pudełka. Dziś stoi w niej JEDEN obiekt o stałych 300 px
   (ADR-0038), więc każdy piksel ponad to jest pustką, przez którą baner nie domyka się
   do prawej krawędzi osi: przy 1440 kończył się 18 px przed nią, gdy belka, treść
   i stopka kończyły się równo. Zostaje 300 px na każdej szerokości; nadmiar wraca do
   treści. Rośnie sam odstęp — na szerokim ekranie kolumny nie mogą się kleić. */
@media (min-width: 1280px) { .leki-card-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; } }

/* Szeroka kolumna to zysk dla tabel i siatek, ale STRATA dla tekstu ciągłego:
   wiersz na 950 px to ~150 znaków, czyli dwa razy powyżej granicy, przy której oko
   gubi początek następnej linii. Akapity i pozycje list dostają własną miarę,
   tabele i siatki biorą pełną szerokość. */
.leki-sheet__sec > p,
.leki-sheet__sec .leki-row__t,
.leki-sheet__sec details p { max-width: 72ch; }

/* Arkusz WEWNĄTRZ karty dziedziczy wcięcie stref (--lk-pad) zamiast trzymać
   własne 2 / 2,5 rem — inaczej „Informacje szczegółowe" zaczynają się o 8–12 px
   dalej od lewej niż „Wskazania" tuż nad nimi, a to widać na każdym nagłówku. */
.leki-card .leki-sheet { padding: 0 var(--lk-pad); }

/* Rodzeństwo ATC: dwie kolumny to przy 950 px za mało — pozycje są krótkie
   (nazwa + moc + producent), więc trzecia kolumna nie zagęszcza, tylko skraca
   listę z ośmiu rzędów do czterech. */
@media (min-width: 1440px) {
    .leki-rows-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .leki-rows-3 > .leki-row:nth-child(3) { border-top: 0; padding-top: 0; }
}

/* ── 15i. Blok tożsamości na szerokim ekranie ──────────────────────────────
   Przy kolumnie ~1000 px identyfikacja jechała jedną kolumną: plakietki, potem
   substancja, potem dwa rzędy meta, potem pasek bezpieczeństwa — pięć wąskich
   wierszy w bardzo szerokim pudełku, z prawą połową pustą. Rozbicie na dwie
   strefy skraca blok o połowę i daje szerokości robotę: po lewej to, co się
   CZYTA (nazwa, substancja, ocena bezpieczeństwa), po prawej to, co się
   SPRAWDZA (postać, opakowanie, producent, EAN, numer pozwolenia).

   Rozmieszczenie w CSS, nie w HTML, bo ten sam blok renderuje też widok legacy
   (`?preview=0`), gdzie stoi w wąskiej karcie i musi zostać jednokolumnowy. */
/* Próg obniżony 1440 → 1280 (2026-08-06): przy 1280 kolumna główna ma już ~900 px,
   więc jednokolumnowa identyfikacja zostawiała prawą połowę pustą przez cały pas
   1280–1439 px — najczęstsze szerokości laptopów, na których ta karta jest czytana. */
@media (min-width: 1280px) {
    .leki-idcard__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        column-gap: 2.5rem;
        align-items: start;
    }
    .leki-idcard__body > * { grid-column: 1; }
    .leki-idcard__body > .leki-idmeta {
        grid-column: 2;
        grid-row: 1 / span 20;
        margin-top: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Pierwszy wiersz siatki meta zaczyna się kreską, a plakietki obok niej nie —
       bez tego prawa kolumna startuje o 1 px wyżej i rząd wygląda na krzywy. */
    .leki-idcard__body > .leki-idmeta > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}

/* Stopka tożsamości: wybierak opakowania i pasek jego danych obok siebie —
   to jedna czynność (wybierz rozmiar → zobacz jego dane), a nie dwa piętra. */
@media (min-width: 1024px) {
    .leki-idcard__foot--row {
        display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.5rem;
    }
    .leki-idcard__foot--row > * { margin-top: 0 !important; }
}

/* ── 15g-bis. /zamiennik — gramatyka „etykiety rejestrowej" ────────────────
   Narzędzie, którego wynik ktoś cytuje pacjentowi przy okienku, ma czytać się
   jak wypis rejestrowy, a nie jak strona marketingowa. Stąd trzy reguły, które
   obowiązują na wszystkich czterech stanach:

     1. ETYKIETA I WARTOŚĆ. Mikro-etykieta wersalikami (.leki-zam-lab) mówi CO,
        pod nią stoi wartość. Nigdy odwrotnie, nigdy bez etykiety.
     2. WŁOSKOWA LINIA ZAMIAST RAMKI. Pudełko wokół każdego wiersza rozbija listę
        na kolekcję obiektów; kreska trzyma je w jednej kolumnie do porównania.
     3. KOLOR NIESIE ZNACZENIE, NIE NASTRÓJ. Brand tylko na krechzie odniesienia,
        znaczniku ✓ i aktywnej mocy. Pastele wyłącznie na statusach (Rx/OTC/ref.).
        Bursztyn = „różni się", nigdy czerwień: to nie jest ostrzeżenie o szkodzie.

   Klasy nazwane, nie utility — tailwind-built.css jest budowany statycznie, więc
   nowa kombinacja utility nie istnieje do czasu przebudowy arkusza. */

.leki-zam-lab {
    display: block; font-size: .6875rem; font-weight: 600; line-height: 1.2;
    text-transform: uppercase; letter-spacing: .18em; color: #475569;
}
.dark .leki-zam-lab { color: #94a3b8; }

/* Kadr przyrządu — WYŁĄCZNIE start (i pudło po frazie bez trafień). Pole ma
   dominować pierwszy ekran: to jedyna czynność tej strony. To ten sam wzór, co
   hero strony głównej (`.leki3-hero-center` w public/v3/home.php), więc wejście
   do narzędzia wygląda jak wejście do serwisu.

   Kroki wyboru (który lek / która moc) NIE stoją już w kadrze (2026-08-03): mają
   breadcrumb i kartę-nagłówek jak każda inna podstrona, bo w środku ścieżki
   wyśrodkowana treść w pustym oknie wyglądała na wypadnięcie z portalu. Po frazie
   bez trafień kadr wyrównuje treść do góry (--gora) — komunikat i propozycje
   substancji są treścią, nie hasłem. `svh` — na telefonie pasek adresu zjadałby
   chipy skrótów, które są drugą połową odpowiedzi. */
/* 9.5rem, nie 7rem: nad kadrem stoi od 2026-08-12 breadcrumb (nagłówek + okruszek
   + jego mb-6). Bez tej poprawki hasło i pole zjeżdżały pod krawędź pierwszego
   ekranu i strona startowa dostawała pasek przewijania na nic. */
.leki-zam-kadr {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 9.5rem); min-height: calc(100svh - 9.5rem);
    padding: 1rem 0 2rem;
}
.leki-zam-kadr--gora { justify-content: flex-start; min-height: 0; padding-top: 1.5rem; }
.leki-zam-kadr__in { width: 100%; max-width: 42rem; margin: 0 auto; }
/* Skala hasła = skala hero home (text-3xl → 5xl, extrabold): dwa wejścia do
   serwisu mają tę samą wagę optyczną. */
.leki-zam-h1 {
    font-size: clamp(1.875rem, 6vw, 3rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; color: var(--color-navy, #0a324a); margin: 0;
}
.dark .leki-zam-h1 { color: #fff; }

/* Pole — jedyny obiekt na starcie, więc niesie całą wagę optyczną kadru.
   Powiększone (2026-08-03): po zdjęciu akapitu pod nagłówkiem to ono ma być
   celem wzroku, a nie jednym z trzech elementów podobnej wagi. */
.leki-zam-pole {
    width: 100%; height: 4.25rem; padding: 0 4.5rem 0 1.375rem;
    font-size: 1.0625rem; color: #0f172a; background: #fff;
    border: 1px solid var(--leki-line); border-radius: 1.125rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 22px 46px -28px rgba(15,23,42,.5);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
@media (min-width: 640px) { .leki-zam-pole { height: 4.5rem; font-size: 1.125rem; padding-left: 1.5rem; } }
.leki-zam-pole::placeholder { color: #94a3b8; }
.leki-zam-pole:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent);
}
.dark .leki-zam-pole { background: #131f33; color: #fff; box-shadow: none; }
.leki-zam-go {
    position: absolute; right: .625rem; top: 50%; transform: translateY(-50%);
    width: 3.25rem; height: 3.25rem; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: .875rem; cursor: pointer;
    background: var(--brand-500); color: #fff; transition: background-color .12s;
}
.leki-zam-go:hover { background: var(--brand-600, #0a324a); }

/* Pole NA KARCIE (krok „Który lek?") — o klasę mniejsze i bez hero-cienia.
   Tam pole nie jest hasłem strony, tylko poprawką wpisanej frazy; uniesiony
   element wewnątrz uniesionej karty daje cień pod cieniem i drugi plan tam,
   gdzie treścią jest lista trafień pod spodem. */
.card-static .leki-zam-pole {
    height: 3.5rem; font-size: 1rem; padding-right: 3.75rem;
    background: #f8fafc; box-shadow: none;
}
.dark .card-static .leki-zam-pole { background: rgba(255,255,255,.04); }
.card-static .leki-zam-go { width: 2.75rem; height: 2.75rem; right: .375rem; border-radius: .625rem; }

/* Pasek skrótów pod polem — jedzie w pętli, w szerokości pola. Maska na krawędziach
   mówi „to się nie kończy tutaj" bez rysowania cieni czy strzałek. Pauza na najeździe
   i fokusie: chip jest linkiem, więc musi dać się trafić kursorem i klawiaturą. */
.leki-zam-pasek {
    position: relative; width: 100%; margin-top: 1.25rem; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.leki-zam-pasek__t {
    display: flex; width: max-content; animation: leki-zam-jazda 34s linear infinite;
}
.leki-zam-pasek:hover .leki-zam-pasek__t,
.leki-zam-pasek:focus-within .leki-zam-pasek__t { animation-play-state: paused; }
/* Odstęp na końcu grupy = odstęp między chipami, inaczej szew pętli byłby węższy. */
.leki-zam-pasek__g { display: flex; gap: .5rem; padding-right: .5rem; }
.leki-zam-pasek .leki-chip { white-space: nowrap; }
/* -33.333% = dokładnie jedna z TRZECH kopii zestawu (patrz komentarz w zamiennik.php). */
@keyframes leki-zam-jazda { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }

/* Podpowiedzi — te same wiersze rejestru, tylko na uniesionej powierzchni. */
.leki-zam-pod {
    position: absolute; left: 0; right: 0; margin-top: .5rem; z-index: 50;
    text-align: left; background: #fff; border: 1px solid var(--leki-line);
    border-radius: .875rem; overflow: hidden auto; max-height: 60vh;
    box-shadow: 0 24px 56px -28px rgba(15,23,42,.55);
}
.dark .leki-zam-pod { background: #131f33; }
.leki-zam-pod__r {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .625rem 1rem; border-bottom: 1px solid var(--leki-line-soft);
    text-decoration: none; cursor: pointer;
}
.leki-zam-pod__r:last-child { border-bottom: 0; }
.leki-zam-pod__r.is-active { background: color-mix(in srgb, var(--brand-500) 7%, transparent); }

/* Wiersz — jedna gramatyka dla trafień wyszukiwania i dla wyników doboru.
   GRID, nie flex: dopiero stałe kolumny ustawiają moce i dopłaty w pionie, a to
   jest cały sens tej listy. Wcześniejsze `sm:grid-cols-2` było obejściem problemu
   „plakietka wisi tysiąc pikseli od nazwy", którego grid nie ma. */
/* Listy wychodzą o padding wiersza poza kolumnę treści, żeby TEKST wiersza stał
   w jednej pionowej linii z nagłówkiem sekcji i resztą akapitów. Bez tego cała
   lista jest wcięta o 8 px względem tytułu — na kresce widać to natychmiast. */
.leki-zam-lista, .leki-zam-lista-w { margin-left: -.5rem; margin-right: -.5rem; }
.leki-zam-lista { border-top: 1px solid var(--leki-line); }
/* Ostatni wiersz sekcji-karty bez kreski: zamykający hairline wisiałby wtedy
   tuż nad dolną krawędzią karty i czytał się jak urwana lista. */
.leki-zam-sec .leki-zam-lista-w > :last-child { border-bottom: 0; }
.leki-zam-w {
    display: grid; align-items: center; gap: .125rem .875rem;
    padding: .8125rem .5rem; border-bottom: 1px solid var(--leki-line);
    text-decoration: none; transition: background-color .12s;
}
.leki-zam-w:hover { background: color-mix(in srgb, var(--brand-500) 6%, transparent); }
/* Kolumna nazwy ma SUFIT, nie udział procentowy. `1.5fr` rozciągało ją na ~800 px
   przy nazwach o szerokości 150–250 px, więc moc — jedyny parametr, dla którego ta
   lista w ogóle powstała — lądowała 700 px od preparatu, którego dotyczy. Wzrok
   musiał przeskoczyć pustkę, żeby połączyć jedno z drugim. Sufit 17rem mieści
   najdłuższe nazwy handlowe w rejestrze („Bisoprolol Genoptim SPH"), a nadmiar
   szerokości zabiera producent, czyli kolumna, która faktycznie bywa długa. */
.leki-zam-w--wynik  { grid-template-columns: 1.125rem minmax(0,17rem) 5rem minmax(0,1fr) 5.5rem 5.5rem; }
.leki-zam-w--rozny  { grid-template-columns: 1.125rem minmax(0,15rem) 5rem minmax(0,1fr) 5.5rem minmax(8.5rem,.9fr); }
.leki-zam-w--wybor  { grid-template-columns: minmax(0,1fr) auto; }
/* Wariant z pastylką „Karta leku" (/zamiennik): siódma kolumna o STAŁEJ szerokości,
   nie `auto`. Przy `auto` szerokość dyktowałby najszerszy wiersz, więc kolumna dopłat
   — cały powód istnienia tej listy — przesuwałaby się w pionie o kilka pikseli
   między sekcjami. Dwie klasy w selektorze, żeby przebić samo `--wynik`/`--rozny`. */
.leki-zam-w--cta.leki-zam-w--wynik { grid-template-columns: 1.125rem minmax(0,17rem) 5rem minmax(0,1fr) 5.5rem 5.5rem 7rem; }
.leki-zam-w--cta.leki-zam-w--rozny { grid-template-columns: 1.125rem minmax(0,15rem) 5rem minmax(0,1fr) 5.5rem minmax(8.5rem,.9fr) 7rem; }
/* Wiersz wyboru niesie dwie linie w jednej komórce (nazwa + opis), więc jego
   elementy muszą być blokami — inaczej siadają obok siebie i opis dokleja się
   do nazwy. `min-width:0` na komórce, bo bez niego truncate nie ma od czego liczyć. */
.leki-zam-w__c { min-width: 0; }
.leki-zam-w--wybor .leki-zam-w__n, .leki-zam-w--wybor .leki-zam-w__d { display: block; }
.leki-zam-w--wybor .leki-zam-w__d { margin-top: .125rem; }
/* Wariant wąskiej kolumny (blok zamienników na karcie leku, ~560 px): ta sama
   gramatyka złożona w dwa rzędy na KAŻDEJ szerokości. Musi stać po --wynik
   i --rozny — ta sama waga selektora, rozstrzyga kolejność w arkuszu. */
/* Dopłata siedzi przy PRAWEJ krawędzi, tak samo jak w wariancie szerokim. Wcześniej
   spadała do trzeciego rzędu i wyrównywała się do lewej, więc ta sama liczba stała
   na karcie leku w zupełnie innym miejscu niż na /zamiennik — a to są dwie odsłony
   jednej listy, cytowane obok siebie. Dwa rzędy zamiast trzech: nazwa i moc u góry,
   producent ze statusami i dopłatą pod spodem. */
/* Ostatnia kolumna STAŁA (5,25 rem), nie `auto`: przy `auto` szerokość dyktowała
   najdłuższa kwota w wierszu, więc „3,30 zł", „2,98 zł" i „12,40 zł" kończyły się
   w trzech różnych miejscach — a cała ta lista istnieje po to, żeby porównać dopłaty
   w pionie. Mierzone: rozrzut prawych krawędzi 15 px → 0 px. */
.leki-zam-w--waski {
    grid-template-columns: 1.125rem minmax(0,1fr) auto 5.25rem;
    row-gap: .25rem; column-gap: .625rem;
}
.leki-zam-w--waski .leki-zam-w__m   { grid-row: 1 / span 2; align-self: start; padding-top: .125rem; }
.leki-zam-w--waski .leki-zam-w__n   { grid-column: 2; grid-row: 1; }
.leki-zam-w--waski .leki-zam-w__moc { grid-column: 3 / -1; grid-row: 1; }
.leki-zam-w--waski .leki-zam-w__p   { grid-column: 2; grid-row: 2; }
.leki-zam-w--waski .leki-zam-w__s   { grid-column: 3; grid-row: 2; justify-content: flex-end; }
.leki-zam-w--waski .leki-zam-w__e   { grid-column: 4; grid-row: 2; text-align: right; }
.leki-zam-w--waski .leki-zam-w__r   { grid-column: 2 / -1; grid-row: 3; }

.leki-zam-w__m { font-size: .8125rem; line-height: 1; text-align: center; }
.leki-zam-w__m--ok { color: var(--brand-600, #0f4769); }
.leki-zam-w__m--r  { color: #b45309; }
.dark .leki-zam-w__m--ok { color: var(--brand-300, #93c5fd); }
.dark .leki-zam-w__m--r  { color: #fcd34d; }
.leki-zam-w__n {
    min-width: 0; font-weight: 600; color: var(--color-navy, #0a324a);
    overflow-wrap: anywhere; transition: color .12s;
}
.dark .leki-zam-w__n { color: #fff; }
.leki-zam-w:hover .leki-zam-w__n { color: var(--brand-600, #0f4769); }
.dark .leki-zam-w:hover .leki-zam-w__n { color: var(--brand-300, #93c5fd); }
.leki-zam-w__d { min-width: 0; font-size: .75rem; color: #475569; overflow-wrap: anywhere; }
.dark .leki-zam-w__d { color: #94a3b8; }
/* Krój TEKSTOWY z tabularnymi cyframi, nie monospace. Kolumnę w pionie trzyma
   `tabular-nums` plus wyrównanie do prawej — krój nie ma z tym nic wspólnego,
   a monospace rozstrzeliwał „10 mg" i „5,76 zł" tak, że wyłamywały się z całej
   strony. Reszta przyrządu (kafle mocy, karta odniesienia, chipy, .leki-zam-num)
   używa dokładnie tej pary od początku; lista była jedynym miejscem z obcym krojem. */
.leki-zam-w__moc, .leki-zam-w__e {
    font-size: .8125rem; font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; letter-spacing: -.01em;
    white-space: nowrap; text-align: right; color: #334155;
}
.leki-zam-w__moc { font-weight: 600; }
.dark .leki-zam-w__moc, .dark .leki-zam-w__e { color: #cbd5e1; }
/* Pusta komórka dostaje kreskę, nie dziurę. Kolumny mocy i dopłaty istnieją po to,
   żeby skanować je w pionie, a brak wartości bez znaku czyta się jak uszkodzony
   wiersz — pierwszy zamiennik na liście ma moc w nazwie handlowej (nie powtarzamy
   jej obok), więc to on otwierał listę pustym polem. `:empty` wystarcza, bo PHP
   renderuje komórkę zawsze, tylko bez treści. */
.leki-zam-w__moc:empty::before, .leki-zam-w__e:empty::before {
    content: '-'; font-weight: 400; color: #cbd5e1;
}
.dark .leki-zam-w__moc:empty::before, .dark .leki-zam-w__e:empty::before { color: #475569; }
.leki-zam-w__p {
    min-width: 0; font-size: .75rem; color: #475569;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .leki-zam-w__p { color: #94a3b8; }
.leki-zam-w__s { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
/* Nazwana różnica przy produkcie podobnym: pełne zdanie, nie liczba — łamie się
   i nie jest wyrównana do prawej, bo czyta się ją, a nie porównuje w kolumnie. */
.leki-zam-w__r {
    font-size: .6875rem; line-height: 1.3; color: #b45309;
    text-align: left; white-space: normal;
}
.dark .leki-zam-w__r { color: #fcd34d; }
.leki-zam-w__ch { color: #94a3b8; flex: none; }
/* Pastylka „Karta leku" — afordancja celu wiersza, nie druga akcja. Wygląda jak
   przycisk drugoplanowy (obrys, bez wypełnienia): wypełniona rywalizowałaby wzrokiem
   z nazwą leku w tym samym wierszu, a przy czterdziestu wierszach dawałaby czterdzieści
   plam koloru. Zapala się dopiero pod kursorem wiersza — wtedy jest oczywiste, który
   wiersz się otworzy. `pointer-events: none`, bo klik i tak obsługuje cały wiersz;
   bez tego kursor nad pastylką bywał inny niż nad resztą wiersza. */
.leki-zam-w__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .3125rem;
    justify-self: end; pointer-events: none; white-space: nowrap;
    padding: .3125rem .5625rem; border-radius: 9999px;
    border: 1px solid var(--leki-line); background: transparent;
    font-size: .6875rem; font-weight: 600; letter-spacing: -.005em;
    color: #475569; transition: background-color .12s, border-color .12s, color .12s;
}
.dark .leki-zam-w__cta { color: #94a3b8; border-color: rgba(255,255,255,.14); }
.leki-zam-w:hover .leki-zam-w__cta,
.leki-zam-w:focus-visible .leki-zam-w__cta {
    background: var(--brand-500); border-color: var(--brand-500); color: #fff;
}
.leki-zam-w__cta-i { width: .875rem; height: .875rem; flex: none; }
@media (prefers-reduced-motion: reduce) { .leki-zam-w__cta { transition: none; } }

/* Plakietka statusu — mniejsza siostra .leki-sig; kolory dziedziczy z tamtej
   skali (leki-sig-ok / -danger), więc paleta ma jedno źródło. */
.leki-zam-tag {
    display: inline-flex; align-items: center; font-size: .625rem; font-weight: 700;
    line-height: 1; letter-spacing: .06em; text-transform: uppercase;
    padding: .1875rem .375rem; border-radius: .3125rem; border: 1px solid transparent;
}
.leki-zam-tag--ref {
    background: color-mix(in srgb, var(--brand-500) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-500) 28%, transparent);
    color: var(--brand-600, #0f4769);
}
.dark .leki-zam-tag--ref { color: var(--brand-300, #93c5fd); }

/* Nagłówek sekcji wyniku — tytuł z ikoną po lewej, warunek doboru po prawej.
   Warunek stoi PRZY nagłówku, nie pod listą: to jest definicja tego, co niżej.

   Gramatyka nagłówka i powierzchnia = kanon portalu (2026-08-03): sekcja jest
   `.card-static`, tytuł czyta się jak „Ta sama substancja i moc" na karcie leku.
   Mikro-wersaliki zostawiliśmy wyłącznie w miejscach, gdzie etykieta opisuje
   POJEDYNCZĄ wartość (.leki-zam-lab, .leki-zam-ref__k) — tam niosą sens
   „etykieta rejestrowa", a w nagłówku sekcji robiły z narzędzia obcą wyspę. */
.leki-zam-sec { margin-top: 1.25rem; padding: 1.25rem 1.25rem .5rem; }
@media (min-width: 768px) { .leki-zam-sec { padding: 1.5rem 1.5rem .625rem; } }
.leki-zam-sec__h {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .5rem 1rem; flex-wrap: wrap;
    margin-left: -.5rem; margin-right: -.5rem;
    padding: 0 .5rem .625rem;
    border-bottom: 1px solid var(--leki-line);
}
.leki-zam-sec__t {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--color-navy, #0a324a);
}
.dark .leki-zam-sec__t { color: #fff; }
.leki-zam-sec__i { width: 1.25rem; height: 1.25rem; flex: none; color: var(--brand-500); }
.dark .leki-zam-sec__i { color: var(--brand-400, #4a83a8); }
/* Ikona sekcji „Produkty podobne" nosi ten sam bursztyn, co znacznik △ w wierszach. */
.leki-zam-sec__i--r { color: #b45309; }
.dark .leki-zam-sec__i--r { color: #fcd34d; }
/* Licznik = ile pozycji w sekcji; szara pastylka, ta sama co przy „17 produktów”
   na karcie leku — liczba jest metadaną nagłówka, nie częścią jego nazwy. */
.leki-zam-sec__n {
    font-size: .75rem; font-weight: 600; color: #64748b;
    font-variant-numeric: tabular-nums;
    padding: .125rem .4375rem; border-radius: 9999px; background: #f1f5f9;
}
.dark .leki-zam-sec__n { background: rgba(255,255,255,.08); color: #cbd5e1; }
.leki-zam-sec__d { font-size: .75rem; color: #475569; }
.dark .leki-zam-sec__d { color: #94a3b8; }
.leki-zam-sec__d--uwaga { color: #b45309; font-weight: 600; }
.dark .leki-zam-sec__d--uwaga { color: #fcd34d; }
/* Ile z ilu — sekcja jest przycinana na 40 pozycjach i użytkownik ma o tym wiedzieć. */
.leki-zam-sec__wiecej {
    padding: .5rem .5rem 0; margin: 0 -.5rem;
    font-size: .75rem; color: #475569; font-variant-numeric: tabular-nums;
}
.dark .leki-zam-sec__wiecej { color: #94a3b8; }

/* Grupa produktów podobnych — nagłówek nazywa różnicę, lista pod nim stoi otwarta.
   ZWIJANIE ZDJĘTE (decyzja usera 2026-08-03): grupy jechały w <details> i przy
   większej sekcji startowały zamknięte, więc kilkanaście nazw leków chowało się za
   jednym wierszem „INNA MOC · 14". Nagłówek jest teraz etykietą, nie przełącznikiem
   — stąd brak kursora, tła pod kursorem i szewronu.
   Zagnieżdżenie niesie pasek na lewej krawędzi grupy: `box-shadow` rysuje się POZA
   obrysem, więc nic nie przesuwa i nie przykrywa go tło wiersza pod kursorem. Wcięcia
   paddingiem tu nie ma świadomie — przesuwałoby kolumnę mocy o 1 rem względem listy
   zamienników wyżej, czyli w miejscu, w którym obie sekcje mają się dać porównać. */
.leki-zam-gr {
    border-bottom: 1px solid var(--leki-line);
    box-shadow: -2px 0 0 0 color-mix(in srgb, #b45309 30%, transparent);
}
.dark .leki-zam-gr { box-shadow: -2px 0 0 0 color-mix(in srgb, #fcd34d 30%, transparent); }
/* Znacznik △ trzyma tę samą kolumnę co znaczniki wierszy pod spodem — to jedna
   pionowa nitka przez całą sekcję. Licznik stoi PRZY nazwie różnicy, nie na prawej
   krawędzi: należy do etykiety („inna moc · 14"), a nie do żadnej kolumny danych.
   Do prawej wypychała go kolumna, która wcześniej mieściła szewron zwijania. */
.leki-zam-gr__s {
    display: grid; grid-template-columns: 1.125rem max-content 1fr;
    align-items: center; gap: .875rem; padding: .6875rem .5rem;
    margin: 0; font-size: inherit; font-weight: inherit;
    border-bottom: 1px solid var(--leki-line-soft);
}
.leki-zam-gr__t {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .14em; color: #b45309;
}
.dark .leki-zam-gr__t { color: #fcd34d; }
.leki-zam-gr__n {
    justify-self: start;
    font-size: .75rem; color: #475569; font-variant-numeric: tabular-nums;
}
.dark .leki-zam-gr__n { color: #94a3b8; }
.leki-zam-gr > .leki-zam-w { padding-left: .5rem; }
.leki-zam-gr > .leki-zam-w:last-child { border-bottom: 0; }

/* Zwinięty pasek odniesienia — FIXED, nie sticky, i to nie jest kwestia gustu:
   powłoka treści (`main.farm-shell-main`) ma `overflow-x: hidden`, przez co staje
   się kontenerem przewijania. `position: sticky` przykleja się wtedy do JEJ
   scrollportu, który nigdy nie jedzie — element po prostu odjeżdża z treścią
   i nikt nie widzi błędu, bo klasa `is-on` włącza się poprawnie. Sprawdzone na
   żywo 2026-08-03: pasek miał `is-on`, a na ekranie go nie było.
   Nav w DrWidget NIE chowa się przy przewijaniu (auto-hide ma tylko praca.farm),
   więc `top: var(--farm-nav-h)` nie zostawia szczeliny.
   aria-hidden + zero linków w środku: to powtórzenie karty wyżej, nie druga
   nawigacja — inaczej ten sam przełącznik mocy dostawałby dwa razy fokus. */
.leki-zam-bar {
    position: fixed; top: var(--farm-nav-h, 56px); left: 0; right: 0; z-index: 30;
    font-size: .8125rem; pointer-events: none;
    background: color-mix(in srgb, #f6f8fc 94%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    opacity: 0; transform: translateY(-.375rem);
    transition: opacity .16s ease, transform .16s ease;
}
.leki-zam-bar__in {
    display: flex; align-items: baseline; gap: .5rem; min-width: 0;
    max-width: 72rem; margin: 0 auto; padding: .5rem 1rem;
}
@media (min-width: 640px) { .leki-zam-bar__in { padding-left: 1.5rem; padding-right: 1.5rem; } }
.dark .leki-zam-bar { background: color-mix(in srgb, #0b1220 94%, transparent); }
.leki-zam-bar.is-on { opacity: 1; transform: none; border-bottom-color: var(--leki-line); }
.leki-zam-bar__n { font-weight: 700; color: var(--color-navy, #0a324a); white-space: nowrap; }
.dark .leki-zam-bar__n { color: #fff; }
.leki-zam-bar__d {
    font-size: .75rem; color: #475569; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .leki-zam-bar__d { color: #94a3b8; }
@media (prefers-reduced-motion: reduce) { .leki-zam-bar { transition: none; } }

/* 375 px: wiersz łamie się w obrębie tej samej siatki — znacznik trzyma lewą
   krawędź przez oba rzędy, nazwa i moc stoją w pierwszym, reszta w drugim.
   Wartości są CELOWO tożsame z `.leki-zam-w--waski` wyżej: telefon i wąska kolumna
   karty leku to ta sama sytuacja („na wiersz jest ~350 px"), więc muszą składać się
   identycznie. Duplikat, nie wspólny selektor, bo tamten wariant obowiązuje na każdej
   szerokości — przy zmianie jednego bloku popraw DRUGI. */
@media (max-width: 639px) {
    .leki-zam-w--wynik, .leki-zam-w--rozny {
        grid-template-columns: 1.125rem minmax(0,1fr) auto auto;
        row-gap: .25rem; column-gap: .625rem;
    }
    .leki-zam-w--wynik .leki-zam-w__m, .leki-zam-w--rozny .leki-zam-w__m { grid-row: 1 / span 2; align-self: start; padding-top: .125rem; }
    .leki-zam-w--wynik .leki-zam-w__n, .leki-zam-w--rozny .leki-zam-w__n { grid-column: 2; grid-row: 1; }
    .leki-zam-w--wynik .leki-zam-w__moc, .leki-zam-w--rozny .leki-zam-w__moc { grid-column: 3 / -1; grid-row: 1; }
    .leki-zam-w--wynik .leki-zam-w__p, .leki-zam-w--rozny .leki-zam-w__p { grid-column: 2; grid-row: 2; }
    .leki-zam-w--wynik .leki-zam-w__s, .leki-zam-w--rozny .leki-zam-w__s { grid-column: 3; grid-row: 2; justify-content: flex-end; }
    .leki-zam-w--wynik .leki-zam-w__e { grid-column: 4; grid-row: 2; text-align: right; }
    .leki-zam-w--rozny .leki-zam-w__r { grid-column: 2 / -1; grid-row: 3; }
    /* Pastylka „Karta leku" na telefonie: sama strzałka, w prawym górnym rogu wiersza,
       nad dopłatą. Wiersz nie rośnie o ani jeden rząd — moc oddaje jej czwartą kolumnę
       (traci `3 / -1`), a to jedyne miejsce w wierszu, gdzie jest wolne pole.
       Selektory dwuklasowe, bo muszą przebić szablon kolumn `--cta` wyżej. */
    .leki-zam-w--cta.leki-zam-w--wynik, .leki-zam-w--cta.leki-zam-w--rozny {
        grid-template-columns: 1.125rem minmax(0,1fr) auto auto;
    }
    .leki-zam-w--cta .leki-zam-w__moc { grid-column: 3; }
    .leki-zam-w--cta .leki-zam-w__cta { grid-column: 4; grid-row: 1; }
    .leki-zam-w__cta { padding: .25rem; }
    .leki-zam-w__cta-t { display: none; }
    .leki-zam-moce { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
}

/* ── 15j. Znak marki i zdjęcie produktu ────────────────────────────────────
   Logotypy marek to WORDMARKI o proporcjach od 1:1 do 5:1 — na 685 plików 21%
   jest kwadratowych, 46% szerszych niż 2:1, 7% szerszych niż 4:1. Wtłoczone
   w kwadrat 56×56 z `object-contain` renderowały się tym mniejsze, im szersze
   było logo (5:1 → pasek 56×11 px w pustej ramce). Wiąże je więc WYSOKOŚĆ,
   a szerokość wynika z proporcji: każda marka dostaje tę samą wagę optyczną
   niezależnie od kształtu. `max-width` łapie skrajne przypadki, żeby najszersze
   znaki nie wypchnęły producenta poza wiersz. */

.leki-brandline {
    display: flex; align-items: center; gap: 0.625rem;
    margin-top: 0.5rem; min-width: 0;
}
/* Wysokość przychodzi z PHP w `--mark-h`, bo zależy od proporcji konkretnego pliku
   (leki_v3_brand_mark_height): kwadratowe logotypy niosą margines dookoła znaku
   i potrzebują zapasu, ciasne wordmarki nie. Fallback = środek skali. */
.leki-brandline__mark {
    flex: none;
    height: var(--mark-h, 2rem); width: auto;
    max-width: 8.5rem;
    object-fit: contain; object-position: left center;
}
@media (min-width: 768px) { .leki-brandline__mark { max-width: 11rem; } }
/* W ciemnym motywie wordmarki (prawie zawsze ciemny tusz na przezroczystym tle)
   znikają, więc dostają jasną podkładkę. `content-box` — padding dokłada się DO
   zadanej wysokości zamiast ją zjadać, inaczej logo kurczy się o 6 px. */
.dark .leki-brandline__mark {
    background: #fff; border-radius: 0.375rem;
    padding: 0.1875rem 0.375rem; box-sizing: content-box;
}
.leki-brandline__name { font-size: 0.8125rem; color: #64748b; }
.leki-brandline__sep {
    flex: none; width: 1px; height: 0.875rem; background: #e2e8f0;
}
.dark .leki-brandline__sep { background: rgba(255,255,255,.15); }
.leki-brandline__mfr {
    min-width: 0; font-size: 0.75rem; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .leki-brandline__name, .dark .leki-brandline__mfr { color: #94a3b8; }

/* Zdjęcie produktu (suplementy i wyroby — leki nie mają zdjęć w API).
   Leżało doklejone pod tytułem: bez ramki, bez tła, dosunięte do lewej krawędzi,
   z wysokością zależną od pliku — a prawa połowa nagłówka stała pusta. Teraz stoi
   PRZY NAZWIE w kwadratowym kadrze, a nagłówek jest dwustrefowy: tekst po lewej,
   produkt po prawej.

   Kadr ma STAŁE oba wymiary, nie samo ograniczenie: zdjęcia idą z zewnętrznego
   hosta (leki.pl), więc przy `max-height` obraz startuje z wysokością 0 i po
   pobraniu rozpycha nagłówek, spychając całą kartę w dół (zmierzony skok layoutu
   0,117 na karcie suplementu). Miejsce jest gotowe od pierwszego malowania. */
.leki-hero-split { display: flex; align-items: flex-start; gap: 1.25rem; }
.leki-hero-split__main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 639px) { .leki-hero-split { flex-direction: column; } }

.leki-prodshot {
    flex: none; margin: 0;
    position: relative; display: block;
    width: 11rem; height: 11rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e9eef5;
}
@media (min-width: 1024px) { .leki-prodshot { width: 12.5rem; height: 12.5rem; } }
/* Na telefonie kadr schodzi pod tytuł i bierze pełną szerokość — kwadrat 200 px
   dosunięty do lewej zostawiałby obok siebie pas pustki na pół ekranu. */
@media (max-width: 639px) {
    .leki-prodshot { width: 100%; height: 11rem; margin-top: 1rem; }
}
/* Opakowania fotografowane są na białym tle, więc bez `multiply` w kadrze siedzi
   biały prostokąt na jasnoszarym tle — widać wtedy zdjęcie w zdjęciu. Mnożenie
   wtapia tło fotografii w kadr; przy PNG z przezroczystością nie zmienia nic. */
/* Dwie pułapki po drodze, obie kończyły się zdjęciem wychodzącym poza kadr na
   telefonie (mierzone 208 px w kadrze 148 px):
     1. `height: 100%` na elemencie siatki — Chromium traktuje wiersz jak nieokreślony
        i procent schodzi do `auto`, czyli do wysokości z proporcji obrazu;
     2. `position: absolute` z czterema offsetami i `width/height: auto` — element
        ZASTĘPOWANY (img) nie rozciąga się między offsetami, tylko bierze rozmiar
        własny; rozciągają się tak wyłącznie elementy niezastępowane.
   Działa dopiero pozycjonowanie bezwzględne Z jawnymi 100%: pudełkiem odniesienia
   jest wtedy padding-box kadru, który ma określoną wysokość. Wcięcie niesie padding
   samego obrazu (`border-box`), więc kadr zostaje bez paddingu. */
.leki-prodshot img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    padding: 0.875rem; box-sizing: border-box;
    object-fit: contain; mix-blend-mode: multiply;
}
/* W ciemnym motywie kadr zostaje jasny: fotografie opakowań są robione na bieli
   i na ciemnym tle wyglądają jak wycięte prostokąty. */
.dark .leki-prodshot { background: #f1f5f9; border-color: rgba(255,255,255,.14); }

/* ── 15k. KARTA LEKU JAKO JEDEN OBIEKT ─────────────────────────────────────
   Test zmrużonych oczu na gotowej stronie wypadał źle: najciemniejszymi plamami
   były dwa nasycone kafle w kolumnie bocznej (Przegląd lekowy i baner praca.farm),
   a treść leku — biała na prawie białym tle, z włoskową obwódką — nie czytała się
   jako obiekt w ogóle. Do tego lewa kolumna była SERIĄ osobnych pudełek tej samej
   wagi: tożsamość, pięć kafli szybkich odpowiedzi, zaproszenie do rejestracji
   i arkusz. Osiem rzeczy zamiast jednej karty.

   Trzy ruchy, wszystkie w tę samą stronę:
     1. płótno strony ciemnieje, żeby biel karty w ogóle miała się od czego odbić;
     2. lewa kolumna scala się w JEDEN uniesiony panel z wewnętrznymi strefami;
     3. kolumna boczna traci własne powierzchnie — zostaje przy włoskowej kresce.
   Poza kartą nie ma już drugiej białej powierzchni tej samej rangi. */

body {
    background: #e9eef7;
    background-image: radial-gradient(1200px 420px at 50% -120px,
        color-mix(in srgb, var(--brand-500) 9%, transparent), transparent 72%);
}
.dark body { background: #0b1220; background-image: none; }

.leki-card {
    position: relative;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 1.125rem;
    overflow: hidden;
    /* Cień szeroki i miękki, nie mocny: karta ma być uniesiona, nie odklejona. */
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 28px 56px -36px rgba(15,23,42,.42);
}
.dark .leki-card { background: #131f33; border-color: rgba(148,163,184,.18); box-shadow: none; }

/* Brandowy pasek akcentowy — sygnatura karty. Cienki (3 px) i bez gradientu do
   błękitu: przy 4 px z przejściem czytał się jak pasek postępu, czyli element
   stanu, a to jest znak przynależności do marki i nic więcej. */
.leki-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--brand-500);
}

/* Pasek akcji (telefon) i zaproszenie do rejestracji — strefy, nie kafle. */
.leki-card__actions { padding: var(--lk-pad); border-top: 1px solid #eef2f7; }
.dark .leki-card__actions { border-top-color: rgba(255,255,255,.07); }
.leki-card__cta {
    padding: var(--lk-pad);
    border-top: 1px solid #eef2f7;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 5%, #fff), #fff);
}
.dark .leki-card__cta {
    border-top-color: rgba(255,255,255,.07);
    background: color-mix(in srgb, var(--brand-900, #1e3163) 22%, transparent);
}

/* Arkusz referencyjny wewnątrz panelu oddaje własny chrom — jest kolejną strefą. */
.leki-card > div > .leki-sheet,
.leki-card .leki-sheet {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.dark .leki-card .leki-sheet { background: transparent; }

/* ── 15l. (zdjęte 2026-08-09) ──────────────────────────────────────────────
   Reguła `.leki-aside .card-static` odbierała powierzchnię modułom pomocniczym stojącym
   w kolumnie bocznej, żeby nie konkurowały z treścią leku. Od przebudowy kolumny (§16r)
   <aside> nie zawiera już ŻADNEJ karty — tylko spis treści i pasek dokumentów — a moduły
   pomocnicze przeniosły się do pasa domykającego pod kartą (§18). Tam mają stać jako
   osobne obiekty na płótnie strony, więc pełna powierzchnia `.card-static` jest tam
   właściwa i reguła nie ma czego wyciszać. */

/* Tytuł leku — najmocniejszy element strony. Reguła siedziała na `.leki-card-hero`,
   czyli na klasie, którą nagłówek stracił, gdy przestał być osobną kartą; bez niej
   H1 spadał do 30 px i przestawał wygrywać z nagłówkami sekcji w kolumnie bocznej. */
/* Skala płynna zamiast trzech skoków: między 768 a 1440 px nazwa stała w miejscu
   na 36 px, mimo że kolumna rosła o 300 px, więc na 1280 wyglądała na przypadkowo
   małą. clamp() daje 30 px na 320 px ekranu i 42 px od 1440 w górę. */
.leki-idcard h1 {
    font-size: clamp(1.875rem, 1.1rem + 2.2vw, 2.625rem);
    line-height: 1.12; letter-spacing: -0.025em;
}


/* ═══ 16. KARTA LEKU — warstwa wizualna (przebudowa 2026-08-06) ═════════════
   Karta jest JEDNYM dokumentem, nie stosem kafli. Poprzednia wersja miała trzy
   poziomy powierzchni na tej samej treści — płótno → biała karta → szary pas →
   biały moduł — czyli ramkę w ramce w ramce; oko czytało granice zamiast danych.

   Gramatyka, która to zastępuje:

     • STREFA zamiast kafla. `.leki-zone` to wycinek tej samej powierzchni,
       oddzielony włoskową linią i rytmem, nie własnym pudełkiem. Sekcje należące
       do jednej decyzji („czym zastąpić" + „z czym koliduje") leżą na jednej
       płaszczyźnie rozdzielone pionową kreską, nie w dwóch pudełkach.
     • JEDNA POWIERZCHNIA UNIESIONA. Cień i własna ramka należą wyłącznie do
       panelu wybranego opakowania — jedynego miejsca, które faktycznie jest
       „wyżej", bo niesie odpowiedź na pytanie zadane przełącznikami nad nim.
     • DOPŁATA PACJENTA jest największą liczbą karty po nazwie leku. To jedyna
       wartość, którą farmaceuta wypowiada na głos; odpłatność („ryczałt", „30%")
       jest jej etykietą, więc dostaje formę plakietki, nie drugiego wielkiego
       napisu konkurującego o to samo miejsce.
     • PRAWO KOLORU bez zmian: skala .leki-sig (§3) = wyłącznie ocena kliniczna,
       kolor marki = nawigacja, linki i aktywny wybór, reszta = slate. Zieleń
       refundacji jest świadomym i jedynym wyjątkiem — to stan rejestrowy.
     • RYTM PIONOWY trzyma jedna zmienna (--lk-pad). Strefy, arkusz referencyjny
       i blok tożsamości wcinały się wcześniej o trzy różne wartości (1,25 / 1,75
       / 2 / 2,5 rem), więc lewa krawędź treści falowała przez całą stronę.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 16a. Tokeny karty ───────────────────────────────────────────────────── */

.leki-card {
    --lk-pad: 1.125rem;      /* wcięcie strefy — jedna wartość na całą kartę */
    --lk-r-md: 0.75rem;      /* panele wewnętrzne */
    --lk-r-sm: 0.5rem;       /* przyciski, pastylki, przełączniki */
    --lk-lab: #64748b;       /* mikro-etykieta rejestrowa */
    --lk-zone: #f5f8fd;      /* tło strefy decyzyjnej */
    --lk-panel: #fff;        /* powierzchnia uniesiona */
}
@media (min-width: 768px)  { .leki-card { --lk-pad: 1.5rem; } }
@media (min-width: 1280px) { .leki-card { --lk-pad: 1.75rem; } }
.dark .leki-card {
    --lk-lab: #94a3b8;
    --lk-zone: rgba(2, 6, 23, .38);
    --lk-panel: #16233a;
}

/* Mikro-etykieta („POSTAĆ", „MOC", „DOPŁATA PACJENTA") — jedna forma w całej
   karcie. Wcześniej ta sama rola miała 10 i 11 px oraz trzy różne trackingi. */
.leki-lab {
    font-size: 0.6875rem; font-weight: 700; line-height: 1.3;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--lk-lab);
}

/* Liczby, które porównuje się w kolumnie: dopłaty, limity, EAN, rozmiary. */
.leki-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

/* ── 16b. Strefy karty ───────────────────────────────────────────────────── */

.leki-zone { padding: var(--lk-pad); border-top: 1px solid #eef2f7; }
.dark .leki-zone { border-top-color: rgba(255, 255, 255, .07); }
/* Strefa decyzyjna (wariant i refundacja) — jedyny tint na karcie. Oznacza
   miejsce, w którym coś się WYBIERA; reszta karty jest do czytania. */
.leki-zone--dec { background: var(--lk-zone); }

/* Moduł = sekcja strefy. Bez własnej powierzchni: strefa już nią jest. */
.leki-mod { min-width: 0; }
.leki-mod__t {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
    color: var(--color-navy, #0a324a); margin: 0 0 0.25rem;
}
.dark .leki-mod__t { color: #fff; }
.leki-mod__d { font-size: 0.8125rem; line-height: 1.5; color: #64748b; margin: 0 0 1rem; max-width: 62ch; }
.dark .leki-mod__d { color: #94a3b8; }
.leki-mod__note { font-size: 0.75rem; line-height: 1.55; color: #94a3b8; margin-top: 0.875rem; max-width: 70ch; }
.dark .leki-mod__note { color: #94a3b8; }
.leki-mod__empty {
    font-size: 0.875rem; line-height: 1.6; color: #475569;
    padding: 0.875rem 1rem; border-radius: var(--lk-r-md);
    background: #f8fafc; border: 1px solid #eef2f7;
}
.dark .leki-mod__empty { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); color: #cbd5e1; }
.leki-mod__cta {
    display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--brand-600); text-decoration: none;
}
.leki-mod__cta:hover { color: var(--brand-700, #0a324a); text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-mod__cta { color: var(--brand-300); }
.leki-mod__more { margin-top: 0.875rem; }

/* Licznik przy nagłówku — ta sama forma w każdej sekcji karty. */
.leki-war__n {
    display: inline-flex; align-items: center; padding: 0.125rem 0.4375rem;
    border-radius: 9999px; background: #eef2f7; color: #64748b;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.dark .leki-war__n { background: rgba(148, 163, 184, .16); color: #cbd5e1; }

/* Zamienniki i interakcje: dwa pytania z tej samej chwili, więc jedna
   powierzchnia rozdzielona kreską — nie dwa pudełka obok siebie. 60/40, bo
   lista odpowiedników niesie sześć kolumn, a interakcje dwie. */
.leki-duo { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.leki-duo > .leki-mod { padding: var(--lk-pad); }
.leki-duo > .leki-mod + .leki-mod { border-top: 1px solid #eef2f7; }
.dark .leki-duo > .leki-mod + .leki-mod { border-top-color: rgba(255, 255, 255, .07); }
@media (min-width: 1024px) {
    .leki-duo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .leki-duo > .leki-mod + .leki-mod { border-top: 0; border-left: 1px solid #eef2f7; }
    .dark .leki-duo > .leki-mod + .leki-mod { border-left-color: rgba(255, 255, 255, .07); }
}

/* ── 16c. Plakietki tożsamości ───────────────────────────────────────────── */

/* Ikona pigułek przy OTC — na WSZYSTKICH powierzchniach: nagłówek karty leku, lista
   wariantów, przełącznik opakowań, tabela opakowań, wiersz zamiennika, podpowiedź
   szukajki. Wymiar w `em`, nie w rem: klasa wchodzi w pastylki o czterech różnych
   stopniach pisma i w każdej ma być tej samej wielkości względem sąsiadującego tekstu.
   `line-height: 1` + `vertical-align`, bo Font Awesome domyślnie stawia glif na
   linii bazowej tekstu, przez co w pastylce z wersalikami wisiał ćwierć kreski
   za nisko. `text-transform: none` — pastylki bywają `uppercase`, a ikona nie ma
   się od tego zmieniać.

   Kategoria „Rp" NIE ma tu nic: przeszła 2026-08-11 z powrotem na zwykły tekst „Rx"
   (decyzja usera). Klasa `.leki-rx` zdjęta razem z ikoną i glifem ℞ — jedyne, co
   zostało po tamtych wersjach, to `.leki-badge--rx`, czyli KOLOR pastylki, nie znak. */
.leki-otc {
    display: inline-block;
    font-size: 1.15em; line-height: 1; vertical-align: -0.08em;
    letter-spacing: 0; text-transform: none;
}
/* Odstęp między ikoną OTC a skrótem daje MARGINES, nie spacja w HTML: część pastylek
   z tym skrótem to `inline-flex` (.leki-zam-tag, wiersz zamiennika), a flex wyrzuca
   węzeł zawierający same białe znaki — spacja znikała i wychodziło „OTC" doklejone
   do ikony. Margines działa w obu układach. */
.leki-otc { margin-right: 0.3em; }
/* Wyjątek: pastylka nagłówka karty ma własny `gap` i osobne węzły ikony i liter
   (szablon Alpine'owy), więc margines dokładałby drugi odstęp. */
.leki-badge > .leki-otc { margin-right: 0; }

.leki-badge {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    font-size: 0.75rem; font-weight: 600; line-height: 1.2;
    padding: 0.3125rem 0.625rem; border-radius: 9999px; white-space: nowrap;
    border: 1px solid transparent;
}
.leki-badge--link { text-decoration: none; transition: border-color .14s, background-color .14s; }
.leki-badge--rx  { background: #fef2f2; color: #b91c1c; border-color: #fecdd3; }
.leki-badge--otc { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.leki-badge--ok  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
/* Wybrane opakowanie JEST refundowane — pełny sygnał. */
.leki-badge--ref { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
/* Refundacja istnieje, ale nie dla tego opakowania — informacja, nie potwierdzenie.
   Neutralny slate zamiast zieleni: zieleń przy nierefundowanym rozmiarze była
   dokładnie tym zdaniem nieprawdziwym, przez które powstał ten rework. */
.leki-badge--refother { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.leki-badge--link:hover { border-color: currentColor; }
.dark .leki-badge--rx  { background: rgba(239, 68, 68, .16);  color: #fca5a5; border-color: rgba(239, 68, 68, .28); }
.dark .leki-badge--otc { background: rgba(34, 197, 94, .16);  color: #86efac; border-color: rgba(34, 197, 94, .28); }
.dark .leki-badge--ok,
.dark .leki-badge--ref { background: rgba(16, 185, 129, .16); color: #6ee7b7; border-color: rgba(16, 185, 129, .28); }
.dark .leki-badge--refother { background: rgba(148, 163, 184, .14); color: #cbd5e1; border-color: rgba(148, 163, 184, .24); }

/* ── 16d. Wariant: przełączniki mocy i opakowania ────────────────────────── */

.leki-war + .leki-war { margin-top: 1rem; }
.leki-war__lab {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--lk-lab); margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.4375rem;
}
.leki-war__row { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
/* Opakowań bywa kilkanaście. Siatka zamiast zawijanego rzędu: przełączniki
   ustawiają się w kolumny, więc rząd czyta się jak skala przyrządu, a nie jak
   worek pastylek różnej długości („×10" obok „×100"). */
/* 4.5rem, nie 5.75: chip to zwykle „×10"–„×100", a 92-pikselowa kolumna zostawiała
   przy nim pół szerokości pustki — przy jedenastu opakowaniach to jeden rząd więcej
   z niczego. „×100" mieści się w 72 px z zapasem. */
.leki-war__row--pak {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.4375rem;
}
/* Rząd z dopiskiem rozróżniającym („0,15 ml") dostaje szerszą kolumnę: ucięty
   dopisek nie rozróżnia niczego, a po to jest. */
.leki-war__row--pak-sub { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.leki-war__note { font-size: 0.75rem; line-height: 1.5; color: #64748b; margin-top: 0.5rem; }
.dark .leki-war__note { color: #94a3b8; }

.leki-war__p {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    min-height: 2.5rem; padding: 0.375rem 0.75rem; border-radius: var(--lk-r-sm);
    border: 1px solid #dbe3ee; background: #fff;
    font-size: 0.875rem; font-weight: 600; line-height: 1.2;
    color: var(--color-navy, #0a324a); text-decoration: none;
    transition: border-color .14s, color .14s, background-color .14s, box-shadow .14s;
}
/* Cel dotykowy — 44 px tam, gdzie palec, nie kursor. */
@media (max-width: 767px) { .leki-war__p { min-height: 2.75rem; } }
.leki-war__p--btn { cursor: pointer; font-family: inherit; }
.leki-war__p:hover {
    border-color: var(--brand-500); color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 5%, #fff);
}
.leki-war__p--on,
.leki-war__p--on:hover {
    background: var(--brand-500); border-color: var(--brand-500); color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 14px -8px color-mix(in srgb, var(--brand-500) 70%, transparent);
}
.dark .leki-war__p { background: rgba(255, 255, 255, .05); border-color: rgba(148, 163, 184, .22); color: #e2e8f0; }
.dark .leki-war__p:hover { color: var(--brand-300); background: color-mix(in srgb, var(--brand-400) 12%, transparent); }
.dark .leki-war__p--on, .dark .leki-war__p--on:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* Przełącznik opakowania niesie DWIE informacje — rozmiar i status wydania —
   więc dostaje dwa piętra. W jednej linii („×100 RP REF.") najdłuższa pozycja
   dyktowała szerokość wszystkim, a wersaliki statusu waliły się o rozmiar. */
.leki-war__p--pak { flex-direction: column; align-items: center; gap: 0.0625rem; padding: 0.375rem 0.375rem; }
.leki-war__sz { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.leki-war__meta { display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1; max-width: 100%; min-width: 0; }
/* Dopisek rozróżniający („0,15 ml") — to on odróżnia dziewięć przycisków „×5"
   Metexu od siebie, więc stoi w metadanych przed znacznikiem refundacji. Gdy się
   nie mieści, przycina go wielokropek, a pełny opis niesie title/aria-label. */
.leki-war__sub {
    font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75;
}
/* 11 px, nie 9: dziewięć pikseli wersalikami to poniżej progu, przy którym znacznik
   da się przeczytać bez przybliżania — a to jedyne miejsce, które odróżnia opakowanie
   refundowane od reszty rzędu. */
.leki-war__kat { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.leki-war__ref {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 0.0625rem 0.3125rem; border-radius: 0.25rem; background: #d1fae5; color: #047857;
}
.leki-war__p--on .leki-war__kat { opacity: .85; }
.leki-war__p--on .leki-war__ref { background: rgba(255, 255, 255, .24); color: #fff; }
.dark .leki-war__ref { background: rgba(16, 185, 129, .2); color: #6ee7b7; }

/* Opakowanie refundowane barwi CAŁY przełącznik. Zieleń jest tu bezpieczna, bo
   marka DrWidget jest niebieska (--brand-500 #0f4769) — nie ma jak pomylić
   „refundowane" z „wybrane". Kolor DOKŁADA się do napisu „Ref." i aria-label,
   nigdy ich nie zastępuje. */
.leki-war__p--ref {
    background: #d1fae5; border-color: #6ee7b7; color: #065f46;
}
.leki-war__p--ref:hover {
    background: #a7f3d0; border-color: #34d399; color: #064e3b;
}
/* Wybrane opakowanie refundowane zostaje ZIELONE zamiast robić się markowo
   niebieskie: zaznaczenie niesie wypełnienie i cień, refundację — barwa. Inaczej
   kolor gasł dokładnie na tym przycisku, na który się patrzy. Wypełnienie to
   emerald-700, nie -600: biały napis 15 px bold potrzebuje 4.5:1 (tu 5.5:1). */
.leki-war__p--ref.leki-war__p--on,
.leki-war__p--ref.leki-war__p--on:hover {
    background: #047857; border-color: #047857; color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 14px -8px rgba(4, 120, 87, .7);
}
/* Na zielonym przycisku znacznik gubi własną plakietkę — zielony prostokąt
   w zielonym prostokącie to szum, nie druga informacja. Zostaje sam napis. */
.leki-war__p--ref:not(.leki-war__p--on) .leki-war__ref {
    background: none; padding: 0; color: inherit; opacity: .8;
}
.dark .leki-war__p--ref { background: rgba(16, 185, 129, .15); border-color: rgba(16, 185, 129, .4); color: #6ee7b7; }
.dark .leki-war__p--ref:hover { background: rgba(16, 185, 129, .24); border-color: rgba(16, 185, 129, .6); color: #a7f3d0; }
.dark .leki-war__p--ref.leki-war__p--on,
.dark .leki-war__p--ref.leki-war__p--on:hover { background: #059669; border-color: #10b981; color: #fff; }

/* „+68" nie jest opakowaniem, więc nie udaje pastylki wyboru — stonowane tło,
   drugoplanowy kolor, ta sama bryła. Bez ramki kreskowanej: kreska w interfejsie
   znaczy „czegoś BRAKUJE" (placeholder, upload), a tu niczego nie brakuje —
   reszta listy po prostu stoi złożona. */
.leki-war__p--more { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.leki-war__p--more:hover {
    color: var(--brand-600); border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 6%, #fff);
}
.leki-war__p--more .leki-war__kat { font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .7; }
.dark .leki-war__p--more { color: #94a3b8; background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .2); }
.dark .leki-war__p--more:hover { color: var(--brand-300); background: color-mix(in srgb, var(--brand-400) 12%, transparent); }

/* ── 16e. Panel wybranego opakowania — jedyna uniesiona powierzchnia ─────── */

.leki-pak {
    margin-top: 1rem; padding: 1rem; border-radius: var(--lk-r-md);
    background: var(--lk-panel); border: 1px solid #dbe3ee;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 28px -22px rgba(15, 23, 42, .45);
}
@media (min-width: 768px) { .leki-pak { padding: 1.125rem 1.25rem; } }
.dark .leki-pak { border-color: rgba(148, 163, 184, .2); box-shadow: none; }

.leki-pak__h {
    display: flex; align-items: baseline; gap: 0.5rem 0.875rem; flex-wrap: wrap;
    padding-bottom: 0.75rem; margin-bottom: 0.875rem; border-bottom: 1px solid #eef2f7;
}
.dark .leki-pak__h { border-bottom-color: rgba(255, 255, 255, .08); }
.leki-pak__sz { font-size: 1rem; font-weight: 700; color: var(--color-navy, #0a324a); letter-spacing: -0.01em; }
.dark .leki-pak__sz { color: #fff; }

/* Odczyt refundacyjny. Dopłata pacjenta ma największy ciężar w całym module —
   to jedyna liczba z tej sekcji, którą farmaceuta wypowiada na głos. */
/* Trzy liczby jednego odczytu (dopłata → odpłatność → limit) trzymają się razem
   w mierze 34 rem. Rozciągnięte na całą 880-pikselową kolumnę stały 300 px od
   siebie i przestawały czytać się jako jedna odpowiedź. */
.leki-pak__kpi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.875rem 1.5rem; align-items: end; max-width: 34rem;
}
.leki-pak__kpi > div { min-width: 0; }
.leki-pak__kpi dt {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--lk-lab); margin-bottom: 0.25rem;
}
.leki-pak__kpi dd {
    font-size: 0.9375rem; font-weight: 600; color: var(--color-navy, #0a324a);
    font-variant-numeric: tabular-nums; line-height: 1.3;
}
.dark .leki-pak__kpi dd { color: #e2e8f0; }
.leki-pak__kpi--big {
    font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem) !important;
    font-weight: 700 !important; line-height: 1.05 !important;
    letter-spacing: -0.03em; color: #047857 !important;
}
.dark .leki-pak__kpi--big { color: #6ee7b7 !important; }
/* Odpłatność to SŁOWO („ryczałt", „30%"), nie kwota — plakietka, nie druga
   wielka liczba walcząca z dopłatą o to samo miejsce w hierarchii. */
.leki-pak__poziom {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem;
    border-radius: 9999px; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
    font-size: 0.8125rem; font-weight: 700; line-height: 1.3;
}
.dark .leki-pak__poziom { background: rgba(16, 185, 129, .14); color: #6ee7b7; border-color: rgba(16, 185, 129, .28); }

.leki-pak__prog { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }
/* Plakietka uprawnienia dodatkowego niesie od 2026-09-02 CAŁE zdanie („S · Pacjenci
   65+ — bezpłatnie"), bo objaśnienie skrótu zeszło tu z wiersza listy. Dlatego łamie
   wiersz i ma własną interlinię: `.leki-chip` stoi na `line-height: 1` i `nowrap`
   z założenia jednego słowa, a takie zdanie na telefonie wypchnęłoby kartę poza kadr. */
.leki-chip--prog { background: #ecfdf5; color: #047857; border-color: #a7f3d0; font-size: 0.75rem; padding: 0.3125rem 0.625rem;
    white-space: normal; text-align: left; line-height: 1.3; }
.dark .leki-chip--prog { background: rgba(16, 185, 129, .14); color: #6ee7b7; border-color: rgba(16, 185, 129, .24); }

.leki-pak__wsk {
    font-size: 0.8125rem; line-height: 1.6; color: #475569; margin-top: 0.875rem;
    padding-top: 0.875rem; border-top: 1px solid #f1f5f9; max-width: 72ch;
}
.leki-pak__wsk span { font-weight: 700; color: var(--color-navy, #0a324a); }
.dark .leki-pak__wsk { color: #cbd5e1; border-top-color: rgba(255, 255, 255, .06); }
.dark .leki-pak__wsk span { color: #fff; }

.leki-pak__offlabel {
    margin-top: 0.875rem; padding: 0.75rem 0.875rem; border-radius: var(--lk-r-md);
    background: #fffbeb; border: 1px solid #fde68a;
}
.leki-pak__offlabel-t {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #b45309; margin-bottom: 0.3125rem;
}
.leki-pak__offlabel p { font-size: 0.8125rem; line-height: 1.55; color: #78350f; max-width: 70ch; }
.dark .leki-pak__offlabel { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .26); }
.dark .leki-pak__offlabel-t { color: #fcd34d; }
.dark .leki-pak__offlabel p { color: #fde68a; }

.leki-pak__legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem 1.5rem; margin-top: 0.75rem; }
@media (min-width: 640px) { .leki-pak__legal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leki-pak__legal dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lk-lab); }
.leki-pak__legal dd { font-size: 0.8125rem; line-height: 1.5; color: var(--color-navy, #0a324a); overflow-wrap: anywhere; }
.dark .leki-pak__legal dd { color: #e2e8f0; }
.leki-pak__src { font-size: 0.6875rem; color: #94a3b8; margin-top: 0.75rem; }

/* Stan „to opakowanie nie jest refundowane" — ODPOWIEDŹ, nie pustka po sekcji.
   Bez kreskowanej ramki: przerywana linia czyta się jak miejsce, w którym czegoś
   BRAKUJE (placeholder, upload, błąd walidacji), a to jest poprawny stan produktu. */
.leki-pak__norefund {
    display: flex; align-items: flex-start; gap: 0.6875rem;
    padding: 0.875rem 1rem; border-radius: var(--lk-r-md);
    background: #f8fafc; border: 1px solid #e6ecf5;
    font-size: 0.875rem; line-height: 1.6; color: #475569;
}
.dark .leki-pak__norefund { background: rgba(148, 163, 184, .07); border-color: rgba(148, 163, 184, .2); color: #cbd5e1; }
.leki-pak__norefund > svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.0625rem; color: #94a3b8; }
.leki-pak__norefund-b { min-width: 0; }
.leki-pak__norefund p { margin: 0; max-width: 66ch; }
/* Wariant samodzielny: lek bez refundacji w ŻADNYM opakowaniu nie dostaje panelu
   wybranego opakowania, więc to zdanie stoi bezpośrednio pod wybierakiem i musi
   samo odsunąć się od pastylek (odstęp niósł dotąd `.leki-pak`). */
.leki-pak__norefund--solo { margin-top: 1rem; }
/* Skróty do refundowanych rozmiarów: własny rząd pod zdaniem, pełnowymiarowe cele
   dotykowe. W zdaniu miały 26 px wysokości i rozbijały składnię przecinkami
   wiszącymi między pastylkami. */
.leki-pak__jumps { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.6875rem; }
.leki-pak__jump {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.25rem; padding: 0 0.875rem; border-radius: var(--lk-r-sm, 0.5rem);
    font: inherit; font-size: 0.875rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-500) 24%, transparent);
    cursor: pointer; transition: background-color .14s, border-color .14s;
}
@media (max-width: 767px) { .leki-pak__jump { min-height: 2.75rem; } }
.leki-pak__jump:hover { background: color-mix(in srgb, var(--brand-500) 16%, transparent); border-color: var(--brand-500); }
.dark .leki-pak__jump { color: var(--brand-300); }

/* ── 16f. Profil bezpieczeństwa ──────────────────────────────────────────── */

/* (2026-08-09) Panel przestał być modułem kolumny bocznej i jest dziś DRUGĄ SEKCJĄ
   karty, w tej samej strefie co „Wariant i refundacja". Stąd dwie zmiany:
   — zero własnego wcięcia: niesie je `.leki-zone`, tak jak każdej innej sekcji;
   — nagłówek w randze sekcji, nie mikro-etykiety. 11 px wersalikami było idiomem
     kolumny 300 px; nad panelem na pełną szerokość ten sam podpis czyta się jak
     opis obrazka, a w spisie treści „Profil bezpieczeństwa" stoi jako równy sąsiad
     „Wariantu i refundacji". Metryka wprost z `.leki-mod__t`. */
.leki-safety { padding: 0; }
.leki-safety__t {
    font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
    color: var(--color-navy, #0a324a); margin: 0 0 0.75rem;
}
.dark .leki-safety__t { color: #fff; }
/* Wiersz o STAŁEJ wysokości i stałej kolumnie oceny — panel ma się skanować
   wzrokiem z góry na dół, a nie czytać. Pastylki oceny mają wspólną szerokość,
   więc „Nie stosować" nie rozpycha kolumny względem „Ostrożnie". */
.leki-safety__r { padding: 0.4375rem 0; border-top: 1px solid #f1f5f9; }
.leki-safety__r:first-child { border-top: 0; }
.dark .leki-safety__r { border-top-color: rgba(255, 255, 255, .06); }
.leki-safety__w { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.leki-safety__w dt { font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--color-navy, #0a324a); }
.dark .leki-safety__w dt { color: #e2e8f0; }
.leki-safety__w .leki-sig { min-width: 6.75rem; justify-content: center; padding: 0.3125rem 0.5rem; }
.leki-safety__z { font-size: 0.75rem; line-height: 1.5; color: #64748b; margin-top: 0.3125rem; max-width: 58ch; }
.dark .leki-safety__z { color: #94a3b8; }
.leki-safety__more { margin-top: 0.875rem; }
.leki-safety__det { margin-top: 0.75rem; display: grid; gap: 0.625rem; }
.leki-safety__det dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lk-lab, #64748b); }
.leki-safety__det dd { font-size: 0.8125rem; line-height: 1.55; color: var(--color-navy, #0a324a); }
.dark .leki-safety__det dt { color: #94a3b8; }
.dark .leki-safety__det dd { color: #e2e8f0; }
.leki-safety__src { font-size: 0.6875rem; line-height: 1.5; color: #94a3b8; margin-top: 0.875rem; }

/* ── 16g. Akordeon — JEDEN mechanizm na całej karcie ─────────────────────── */

.leki-acc > * + * { margin-top: 0.375rem; }
.leki-acc__i {
    border: 1px solid #e6ecf5; border-radius: var(--lk-r-sm, 0.5rem);
    background: #f8fafc; overflow: hidden;
    transition: border-color .14s, background-color .14s;
}
.dark .leki-acc__i { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
.leki-acc__i:hover { border-color: #cfd9e8; }
.dark .leki-acc__i:hover { border-color: rgba(148, 163, 184, .3); }
/* Wariant „bez pudełka" — dla sekcji, które same są już powierzchnią. `overflow`
   wraca do `visible`, bo listy wewnątrz (.leki-zam-lista) wychodzą o .5rem poza
   kolumnę własnym ujemnym marginesem; przy `hidden` te 8 px było obcinane i wiersze
   rozwinięcia nie stawały w kolumnie z wierszami nad nim. */
.leki-acc__i--plain { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.leki-acc__i--plain:hover { border: 0; }
.dark .leki-acc__i--plain { background: transparent; }

/* Wariant PŁASKI — długie rejestry (ChPL: 17 sekcji). Siedemnaście osobnych
   pudełek jedno pod drugim to siedemnaście ramek do przeczytania zamiast
   siedemnastu tytułów; lista wierszy z włoskową kreską czyta się jak spis. */
/* Miara czytelnicza, nie szerokość kolumny: treść sekcji ChPL i tak stoi na 70ch,
   więc rozciągnięty na 940 px wiersz nagłówka zostawiał chevron samotnie 700 px od
   tytułu, którego dotyczy — para „tytuł ⌄" przestawała być parą. */
.leki-acc--flat { border-top: 1px solid #eef2f7; max-width: 48rem; }
.dark .leki-acc--flat { border-top-color: rgba(255, 255, 255, .07); }
.leki-acc--flat > * + * { margin-top: 0; }
.leki-acc--flat > .leki-acc__i {
    border: 0; border-bottom: 1px solid #eef2f7; border-radius: 0; background: transparent;
}
.dark .leki-acc--flat > .leki-acc__i { border-bottom-color: rgba(255, 255, 255, .07); background: transparent; }
.leki-acc--flat > .leki-acc__i:hover { border-color: transparent; border-bottom-color: #cfd9e8; background: #fafcfe; }
.dark .leki-acc--flat > .leki-acc__i:hover { background: rgba(255, 255, 255, .03); border-bottom-color: rgba(148, 163, 184, .3); }
.leki-acc--flat > .leki-acc__i[open] { background: #fafcfe; }
.dark .leki-acc--flat > .leki-acc__i[open] { background: rgba(255, 255, 255, .03); }
.leki-acc--flat > .leki-acc__i > .leki-acc__s { padding: 0.8125rem 0.5rem; }
.leki-acc--flat > .leki-acc__i > .leki-acc__b { padding: 0 0.5rem 1rem; }

.leki-acc__s {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6875rem 0.875rem; cursor: pointer; list-style: none;
    font-size: 0.875rem; font-weight: 600; color: var(--color-navy, #0a324a);
    transition: color .14s;
}
.leki-acc__i--plain > .leki-acc__s { padding-left: 0; padding-right: 0; }
.leki-acc__s::-webkit-details-marker { display: none; }
.leki-acc__s:hover { color: var(--brand-600); }
.dark .leki-acc__s { color: #fff; }
.dark .leki-acc__s:hover { color: var(--brand-300); }
.leki-acc__s--sm { font-size: 0.8125rem; font-weight: 500; }
.leki-acc__h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
details[open] > .leki-acc__s { color: var(--brand-600); }
.dark details[open] > .leki-acc__s { color: var(--brand-300); }

.leki-acc__c { width: 1rem; height: 1rem; flex: none; color: #94a3b8; transition: transform .18s; }
details[open] > .leki-acc__s > .leki-acc__c,
details[open] > .leki-acc__s > span > .leki-acc__c { transform: rotate(180deg); }

.leki-acc__b { padding: 0 0.875rem 0.875rem; }
.leki-acc__i--plain > .leki-acc__b { padding-left: 0; padding-right: 0; }
/* Rozwinięcie listy („Pokaż wszystkie zamienniki", „…wskazania") NIE może wcinać
   treści: wiersze spod rozwinięcia stawały 14 px na prawo od trzech wierszy nad nim,
   więc kolumna dopłat — jedyny powód, dla którego ta lista jest listą — łamała się
   dokładnie w miejscu styku. Zmierzone: rozrzut prawych krawędzi 15 px → 1 px.
   Wartości nie są takie same, bo wyrównują różne rzeczy: .leki-zam-lista wychodzi
   o .5rem poza kolumnę (własny ujemny margines na tło najazdu), więc rozwinięcie
   oddaje jej dokładnie te .5rem z powrotem; lista wskazań ujemnego marginesu nie ma. */
.leki-mod__more > .leki-acc__b,
.leki-wsk__more > .leki-acc__b { padding-left: 0; padding-right: 0; }

/* „Pokaż wszystkie …" to AKCJA DRUGORZĘDNA, nie przycisk-kafel: pudełko z ramką
   i tłem ważyło tyle samo co pozycje listy nad nim, a przy okazji obcinało je
   (`overflow: hidden` + ujemny margines wiersza = 8 px treści za krawędzią).
   Zostaje włoskowa kreska, tekst w kolorze marki i chevron TUŻ przy nim — nie
   500 px dalej, przy prawej krawędzi modułu. */
.leki-mod__more, .leki-wsk__more { border-top: 1px solid #eef2f7; padding-top: 0.25rem; }
.dark .leki-mod__more, .dark .leki-wsk__more { border-top-color: rgba(255, 255, 255, .07); }
.leki-mod__more > .leki-acc__s,
.leki-wsk__more > .leki-acc__s {
    justify-content: flex-start; gap: 0.375rem;
    padding: 0.625rem 0; font-size: 0.8125rem; font-weight: 600; color: var(--brand-600);
}
.dark .leki-mod__more > .leki-acc__s, .dark .leki-wsk__more > .leki-acc__s { color: var(--brand-300); }
.leki-mod__more > .leki-acc__s .leki-acc__c,
.leki-wsk__more > .leki-acc__s .leki-acc__c { color: currentColor; }
.leki-acc__b--sm { padding-top: 0.25rem; border-top: 1px solid #eef2f7; }
.dark .leki-acc__b--sm { border-top-color: rgba(255, 255, 255, .06); }

/* ── 16h. Interakcje ─────────────────────────────────────────────────────── */

/* Pozycja niesie stopień istotności także POZA kolorem: listwa po lewej ma tę
   samą skalę co pastylka, więc porządek czyta się przy monochromatycznym druku
   i przy zaburzeniach rozpoznawania barw. */
.leki-int > * + * { margin-top: 0.5rem; }
.leki-int__i {
    padding: 0.6875rem 0 0.6875rem 0.8125rem; border-left: 3px solid #e2e8f0;
    border-radius: 0 var(--lk-r-sm, 0.5rem) var(--lk-r-sm, 0.5rem) 0;
}
.leki-int__i:has(.leki-sig-danger)  { border-left-color: #f87171; }
.leki-int__i:has(.leki-sig-caution) { border-left-color: #fbbf24; }
.leki-int__i:has(.leki-sig-na)      { border-left-color: #cbd5e1; }
.dark .leki-int__i { border-left-color: rgba(148, 163, 184, .28); }
.dark .leki-int__i:has(.leki-sig-danger)  { border-left-color: rgba(248, 113, 113, .7); }
.dark .leki-int__i:has(.leki-sig-caution) { border-left-color: rgba(251, 191, 36, .7); }
.leki-int__h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.leki-int__n { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy, #0a324a); text-decoration: none; letter-spacing: -0.01em; }
a.leki-int__n:hover { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-int__n { color: #fff; }
.leki-int__h .leki-sig { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; }
.leki-int__z { font-size: 0.8125rem; line-height: 1.55; color: #64748b; margin-top: 0.3125rem; max-width: 60ch; }
.dark .leki-int__z { color: #94a3b8; }
.leki-int__m { font-size: 0.8125rem; line-height: 1.55; color: #475569; margin-top: 0.375rem; max-width: 60ch; }
.dark .leki-int__m { color: #cbd5e1; }

/* Wyszukiwanie pary interakcji (ADR-0095). Pole i przycisk w jednym wierszu od 14rem
   szerokości pola w górę; niżej zawijają się jedno pod drugie, bo przy 320 px para
   w wierszu zostawia na nazwę kilkanaście znaków. Wysokość 2.75rem to cel dotykowy
   WCAG 2.2 (2.5.8) z zapasem. */
.leki-int__f  { margin-bottom: 0.875rem; }
.leki-int__l  { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.4375rem; }
.dark .leki-int__l { color: #cbd5e1; }
.leki-int__fr { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.leki-int__q  {
    flex: 1 1 14rem; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.75rem;
    font-size: 0.9375rem; border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem);
    background: #fff; color: var(--color-navy, #0a324a);
}
.leki-int__q::placeholder { color: #6b7a90; }
.leki-int__q:focus { outline: 2px solid var(--brand-500); outline-offset: -1px; }
.dark .leki-int__q { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #fff; }
.dark .leki-int__q::placeholder { color: #9fb2c9; }
.leki-int__b  {
    min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; font-weight: 600;
    border-radius: var(--lk-r-sm, 0.5rem); border: 1px solid var(--brand-600);
    background: var(--brand-600); color: #fff; cursor: pointer;
}
.leki-int__b:hover { background: var(--brand-700, #0b4a6f); border-color: var(--brand-700, #0b4a6f); }
.leki-int__b:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.leki-int__co { font-size: 0.8125rem; color: #5b6b80; margin-bottom: 0.5rem; }
.dark .leki-int__co { color: #9fb2c9; }


/* ── 16i. Wskazania ──────────────────────────────────────────────────────── */

.leki-wsk .leki-row__t { max-width: 72ch; }
.leki-wsk__more { margin-top: 0.625rem; }

/* ── 16j. Filtr grupy ATC ────────────────────────────────────────────────── */

.leki-atcf { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.leki-atcf__f { flex: 1 1 12rem; min-width: 0; }
.leki-atcf__f input, .leki-atcf__f select {
    width: 100%; font-size: 0.8125rem; min-height: 2.5rem; padding: 0.4375rem 0.6875rem;
    border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem); background: #fff;
    color: var(--color-navy, #0a324a);
}
.leki-atcf__f input:focus, .leki-atcf__f select:focus { outline: 2px solid var(--brand-500); outline-offset: -1px; }
.dark .leki-atcf__f input, .dark .leki-atcf__f select {
    background: rgba(255, 255, 255, .06); border-color: rgba(148, 163, 184, .2); color: #e2e8f0;
}
.leki-atcf__stopka { margin-top: 0.875rem; }
.leki-atcf__reszta { font-size: 0.75rem; line-height: 1.55; color: #94a3b8; margin-top: 0.75rem; }
.leki-atcf__reszta a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.leki-atcf__reszta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-atcf__reszta a { color: var(--brand-300); }
.leki-atcf__pusto { font-size: 0.8125rem; color: #64748b; }
.dark .leki-atcf__pusto { color: #94a3b8; }
.leki-atcf__more {
    font-size: 0.8125rem; font-weight: 600; color: var(--brand-600);
    background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
}
.leki-atcf__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-atcf__more { color: var(--brand-300); }

/* ── 16k-bis. Paginacja list wewnątrz karty ──────────────────────────────
   „Pokaż więcej" doklejało kolejne dwanaście pozycji, więc pełna grupa ATC
   rozdymała sekcję do sześćdziesięciu wierszy i spychała ChPL o ekran w dół,
   a powrót na początek listy szedł tylko przewijaniem. Strony trzymają sekcję
   na stałej wysokości. Cel dotykowy 40 px (44 na telefonie), stan aktywny
   niesie kolor marki I `aria-current="page"` — nie sam kolor. */

.leki-pag { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3125rem; }
.leki-pag__b, .leki-pag__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
    border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem); background: #fff;
    font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums; color: #475569; cursor: pointer;
    transition: border-color .14s, color .14s, background-color .14s;
}
@media (max-width: 767px) { .leki-pag__b, .leki-pag__n { min-width: 2.75rem; height: 2.75rem; } }
/* Wąski ekran: strzałki schodzą, zostają numery. Pięć numerów po 44 px mieści się
   w 320 px, siedem kontrolek już nie — strzałka „następna" spadała do własnego
   wiersza i wyglądała jak zgubiony przycisk. Numer robi to samo w jednym kliknięciu,
   a stron jest najwyżej pięć (sufit sekcji to 60 pozycji po 12 na stronę). */
@media (max-width: 479px) {
    .leki-pag__b { display: none; }
    .leki-pag__i { flex-basis: 100%; margin-left: 0; margin-top: 0.375rem; }
}
.leki-pag__b svg { width: 1rem; height: 1rem; }
.leki-pag__b:hover:not(:disabled), .leki-pag__n:hover {
    border-color: var(--brand-500); color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 5%, #fff);
}
.leki-pag__b:disabled { opacity: .4; cursor: default; }
.leki-pag__n--on, .leki-pag__n--on:hover {
    background: var(--brand-500); border-color: var(--brand-500); color: #fff;
}
.dark .leki-pag__b, .dark .leki-pag__n {
    background: rgba(255, 255, 255, .05); border-color: rgba(148, 163, 184, .22); color: #cbd5e1;
}
.dark .leki-pag__b:hover:not(:disabled), .dark .leki-pag__n:hover { color: var(--brand-300); }
.dark .leki-pag__n--on, .dark .leki-pag__n--on:hover { background: var(--brand-500); color: #fff; }
/* Licznik „13–24 z 60" — informacja, nie sterowanie, więc nie ma formy przycisku. */
.leki-pag__i { font-size: 0.75rem; color: #64748b; margin-left: 0.375rem; font-variant-numeric: tabular-nums; }

/* ── 16k-ter. Tabela, która na telefonie rozkłada się na karty ───────────
   Poziome przewijanie tabeli działa, ale chowa za kadrem kolumnę, po którą
   użytkownik przyszedł (dopłatę). Poniżej 640 px każdy wiersz staje się kartą
   „etykieta → wartość"; etykiety biorą się z `data-label` na komórkach, więc
   nagłówek i karta nie mogą się rozjechać — to jedno źródło. */

.leki-tbl-cards td[data-label] { vertical-align: middle; }
@media (max-width: 639px) {
    .leki-tbl-cards { display: block; width: 100%; }
    /* Nagłówek znika Z OBRAZU, ale zostaje w drzewie dostępności — etykiety
       w `::before` niosą tę samą treść wzrokowo, nie zastępują jednak powiązania
       komórki z nagłówkiem. Same `th` też muszą przestać się rozmierzać: sam
       `position:absolute` na `thead` zostawia komórkom ich naturalną szerokość
       (u nas 466 px przy oknie 390 px) — wizualnie przycięte, ale nadal
       rozpychające pomiary layoutu. */
    .leki-tbl-cards thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .leki-tbl-cards thead tr, .leki-tbl-cards thead th {
        display: block; width: 1px; height: 1px; overflow: hidden;
        padding: 0; border: 0; white-space: nowrap;
    }
    .leki-tbl-cards tbody, .leki-tbl-cards tr, .leki-tbl-cards td { display: block; width: 100%; }
    .leki-tbl-cards tr {
        border: 1px solid #e6ecf5; border-radius: var(--lk-r-sm, 0.5rem);
        padding: 0.25rem 0.625rem; background: #fff;
    }
    .leki-tbl-cards tr + tr { margin-top: 0.5rem; }
    .dark .leki-tbl-cards tr { border-color: rgba(148, 163, 184, .2); background: rgba(255, 255, 255, .03); }
    .leki-tbl-cards td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 0.875rem;
        padding: 0.4375rem 0; border-bottom: 1px solid #f1f5f9; text-align: left !important;
    }
    .dark .leki-tbl-cards td { border-bottom-color: rgba(255, 255, 255, .06); }
    .leki-tbl-cards tr > td:last-child { border-bottom: 0; }
    .leki-tbl-cards td::before {
        content: attr(data-label); flex: none;
        font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--lk-lab, #64748b);
    }
}

/* ── 16k. Praktyka apteczna ──────────────────────────────────────────────── */

.leki-prakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem 2rem; }
@media (min-width: 640px) { .leki-prakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .leki-prakt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.leki-prakt dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lk-lab, #64748b); }
.leki-prakt dd { font-size: 0.875rem; color: var(--color-navy, #0a324a); line-height: 1.5; margin-top: 0.125rem; }
.dark .leki-prakt dt { color: #94a3b8; }
.dark .leki-prakt dd { color: #e2e8f0; }

/* ── 16l. ChPL ────────────────────────────────────────────────────────────
   Tekst przychodzi z PDF-a z twardym łamaniem wierszy co ~90 znaków. Przed
   reworkiem szedł przez `white-space: pre-line`, więc nie przelewał się przy
   żadnej szerokości — na telefonie czytało się to jak kolumna gazety wciśnięta
   w ekran. Teraz akapity buduje `leki_chpl_render()` (chpl-format.php), a tutaj
   zostaje sama typografia. Fragmenty, których nie da się złożyć w akapit
   (rozsypane tabele), jadą w .leki-chpl-raw — przewijalnym i oznaczonym. */

.leki-chpl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.25rem; margin-bottom: 1rem; }
.leki-chpl-meta p { font-size: 0.75rem; line-height: 1.55; color: #64748b; margin: 0; max-width: 58ch; }
.dark .leki-chpl-meta p { color: #94a3b8; }
/* `white-space: nowrap` na etykiecie „Otwórz dokument w Rejestrze Produktów
   Leczniczych" dawał przycisk szeroki na 369 px — przy 320–390 px wyjeżdżał
   poza kartę i był przez nią OBCINANY (.leki-card ma overflow:hidden), więc na
   telefonie połowa napisu nie istniała. Zawijamy; `max-width` trzyma go w mierze,
   a nie rozciąga na całą szeroką kolumnę desktopu. */
.leki-chpl-src {
    display: inline-flex; align-items: center; gap: 0.4375rem;
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    min-height: 2.5rem; padding: 0.5rem 0.875rem; border-radius: var(--lk-r-sm, 0.5rem);
    border: 1px solid #dbe3ee; color: var(--brand-600); background: #fff;
    max-width: 100%; text-align: left; line-height: 1.35;
    transition: border-color .14s, background-color .14s;
}
.leki-chpl-src:hover { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 5%, #fff); }
.dark .leki-chpl-src { background: rgba(255, 255, 255, .06); border-color: rgba(148, 163, 184, .2); color: var(--brand-300); }

.leki-chpl-tresc { font-size: 0.875rem; line-height: 1.7; color: #334155; }
.dark .leki-chpl-tresc { color: #cbd5e1; }
.leki-chpl-tresc p { margin: 0 0 0.75rem; max-width: 70ch; }
.leki-chpl-h {
    font-size: 0.875rem; font-weight: 700; color: var(--color-navy, #0a324a);
    margin: 1.125rem 0 0.4375rem; letter-spacing: -0.01em;
}
.leki-chpl-tresc > .leki-chpl-h:first-child { margin-top: 0; }
.dark .leki-chpl-h { color: #fff; }
.leki-chpl-ul { margin: 0 0 0.75rem; padding-left: 1.25rem; list-style: disc; max-width: 70ch; }
.leki-chpl-ul li { margin-bottom: 0.25rem; }
.leki-chpl-ref { color: #64748b; cursor: help; }

.leki-chpl-raw {
    margin: 0 0 0.875rem; border: 1px solid #e6ecf5; border-radius: var(--lk-r-sm, 0.5rem);
    background: #f8fafc; padding: 0.6875rem;
}
.dark .leki-chpl-raw { background: rgba(255, 255, 255, .04); border-color: rgba(148, 163, 184, .18); }
.leki-chpl-raw__n { font-size: 0.6875rem !important; color: #64748b; margin: 0 0 0.5rem !important; max-width: none !important; }
.leki-chpl-raw pre {
    margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem; line-height: 1.55; white-space: pre; tab-size: 4;
}
.leki-chpl-raw:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ── 16m. Pasek akcji ────────────────────────────────────────────────────── */

/* Trzy skróty do dokumentów (Ulotka · ChPL · Udostępnij) w siatce 2+1 zamiast
   zawijanego rzędu. Rząd `flex-wrap` układał je 3+2 albo 2+3 zależnie od tego,
   które linki lek w ogóle ma — pasek wyglądał za każdym razem inaczej. */
.leki-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.leki-act > :last-child { grid-column: 1 / -1; }
.leki-act > a, .leki-act > button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem;
    min-height: 2.5rem; padding: 0 0.75rem;
    border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem); background: #fff;
    font-size: 0.8125rem; font-weight: 600; color: #475569; text-decoration: none;
    cursor: pointer; font-family: inherit;
    transition: border-color .14s, color .14s, background-color .14s;
}
.dark .leki-act > a, .dark .leki-act > button {
    background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #cbd5e1;
}
.leki-act > a:hover, .leki-act > button:hover {
    border-color: var(--brand-500); color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 5%, #fff);
}
.dark .leki-act > a:hover, .dark .leki-act > button:hover {
    color: var(--brand-300); background: color-mix(in srgb, var(--brand-400) 10%, transparent);
}
.leki-act svg { width: 0.875rem; height: 0.875rem; flex: none; }

/* ── 16n. Drobne ─────────────────────────────────────────────────────────── */

/* Nagłówek arkusza szczegółów — nazywa strefę, którą wcześniej otwierał przycisk
   „Pełna karta leku". Bez dolnej kreski, bo pierwszą sekcję i tak od niego oddziela
   reguła .leki-sheet__sec + .leki-sheet__sec. */
.leki-sheet__lead { padding-bottom: 0 !important; }
.leki-sheet__lead h2 { font-size: 1.25rem !important; letter-spacing: -0.02em; }

/* ── 16s. Profil bezpieczeństwa jako POLE kolumny bocznej (2026-08-11) ─────
   Panel wrócił do kolumny — pod pole nawigacyjne, przed Przegląd lekowy. W kolumnie
   głównej `.leki-safety` jest sekcją strefy i powierzchni nie ma (§15); tutaj jest
   samodzielnym obiektem, więc dostaje ją z tej samej rodziny co `.leki-navcard`
   (szkło 72%, promień 16 px, ten sam cień). Jedna gramatyka pudełek na całą kolumnę:
   pole nawigacyjne → pole profilu → kafel narzędzia.

   Odróżnia je WAGA, nie kolor: navcard ma główkę w pasteli marki i zero nagłówka
   w skali H, profil ma nagłówek sekcji. To nadal treść kliniczna, tylko postawiona
   tam, gdzie farmaceuta patrzy najpierw.

   Rytm skompresowany, bo kolumna ma 300–336 px, nie 700: pigułka schodzi z 6.75rem
   do 5.5rem (inaczej „Prowadzenie pojazdów" łamie się na trzy linie), wiersze i
   zalecenia dostają ciaśniejszy pion. Cały blok kolumny (nawigacja + profil +
   narzędzie) musi mieścić się w oknie, bo <aside> przykleja się w całości i to,
   co wystaje poniżej, staje się nieosiągalne — patrz próg `min-height` w §16r. */
.leki-aside__safety {
    padding: 0.875rem;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.dark .leki-aside__safety {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 24px rgba(0,0,0,.2);
}
.leki-aside__safety .leki-safety__t { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.leki-aside__safety .leki-safety__r { padding: 0.375rem 0; }
.leki-aside__safety .leki-safety__w { gap: 0.5rem; }
.leki-aside__safety .leki-safety__w dt { font-size: 0.8125rem; }
.leki-aside__safety .leki-safety__w .leki-sig {
    min-width: 5.5rem; padding: 0.25rem 0.4375rem; font-size: 0.6875rem;
}
.leki-aside__safety .leki-safety__z { margin-top: 0.25rem; }
.leki-aside__safety .leki-safety__more { margin-top: 0.625rem; }
.leki-aside__safety .leki-safety__src { margin-top: 0.625rem; }

/* ── 16q. Sticky kolumny bocznej — naprawa nośnika ────────────────────────
   `position: sticky` na <aside> NIE DZIAŁAŁO od początku i nikt tego nie zauważył,
   bo objaw jest cichy: kolumna po prostu odjeżdżała z treścią. Powód siedzi w powłoce
   ekosystemu — `<main class="… overflow-x-hidden">` (core/layout.php). `overflow-x:
   hidden` wymusza na osi Y wartość `auto`, więc <main> staje się KONTENEREM
   PRZEWIJANIA; sticky przykleja się wtedy do jego scrollportu, a ten się nie
   przewija (przewija się okno) — element nigdy nie zostaje przyklejony.

   `overflow: clip` obcina identycznie, ale kontenera przewijania nie tworzy, więc
   oś Y zostaje `visible` i sticky wraca. Reguła stoi w arkuszu DrWidget, czyli nie
   dotyka pozostałych portali; przy braku wsparcia dla `clip` zachowanie jest takie
   jak dziś (kolumna nieprzyklejona), a nie gorsze.

   UZUPEŁNIENIE 2026-08-07: reguła obejmowała WYŁĄCZNIE <main>, a dokładnie ten sam
   `overflow-x: hidden` siedzi w powłoce na <body> (`min-h-screen flex flex-col
   overflow-x-hidden`). Jeden załatany poziom nie wystarczy — wystarczy JEDEN
   kontener przewijania w łańcuchu przodków, żeby sticky nigdy nie zaskoczyło.
   Efekt był cichy dokładnie tak, jak opisano wyżej: kolumna boczna karty leku
   jechała z treścią mimo `position: sticky`, a wewnętrzne okno przewijania (§16r,
   wersja sprzed przebudowy) maskowało to jako „tak miało być”.
   Zmierzone: bez tej linii top strefy po zjechaniu 2000 px = -1905 px; z nią = 88 px. */
@supports (overflow: clip) {
    main.overflow-x-hidden,
    body.overflow-x-hidden { overflow-x: clip; }
}

/* ── 16r. Kolumna boczna — JEDEN PRZYKLEJONY BLOK (przebudowa 2026-08-09) ───
   Poprzednia wersja dzieliła kolumnę na strefę przyklejoną (profil bezpieczeństwa,
   spis treści, dokumenty) i płynącą pod nią (Przegląd lekowy, baner, lista producenta).
   Miała dwie wady, obie widoczne gołym okiem:

   1. BANER PRZEJEŻDŻAŁ PRZEZ SPIS TREŚCI. Element `position: sticky` zostaje w normalnym
      biegu dokumentu — po przewinięciu wisi nad tym, co w dokumencie leży POD nim, czyli
      nad własnym rodzeństwem. Jest przy tym elementem pozycjonowanym, więc maluje się nad
      niepozycjonowanym rodzeństwem. Spis treści celowo nie ma tła (§15e), więc przez jego
      linki przejeżdżała treść strefy drugorzędnej.
   2. WŁASNY PASEK PRZEWIJANIA. Profil (7 wierszy) + spis (8–11 linków) + dokumenty to
      ~600–700 px przy 664 px dostępnych na laptopie 1024×768 — `max-height` +
      `overflow-y: auto` zamieniały kolumnę w drugie okno przewijania.

   Rozwiązanie jest strukturalne, nie kosmetyczne: <aside> ma dokładnie dwoje dzieci
   (spis treści, dokumenty), przykleja się w całości i NIE MA POD SOBĄ RODZEŃSTWA, więc
   nie ma czego zasłonić. Profil bezpieczeństwa wrócił do kolumny głównej — jest treścią
   kliniczną, nie skrótem nawigacyjnym — a moduły drugorzędne zjechały do pasa
   domykającego pod kartą (§18).

   `align-self: start` zamiast `stretch`: sticky wróciło na sam <aside>, a blokiem
   zawierającym elementu siatki jest jego OBSZAR siatki (pełna wysokość wiersza), nie
   pudełko treści. Rozciąganie było potrzebne wyłącznie wtedy, gdy sticky siedziało
   w środku kolumny. Że sticky w ogóle działa mimo powłoki ekosystemu — patrz §16q. */
.leki-aside { display: flex; flex-direction: column; gap: 1.25rem; align-self: start; }

/* Poniżej progu kreacji kolumna nie ma czego pokazać — `.dw-ad--right` jest tam
   `display: none`, więc <aside> byłby pustym pudełkiem pod treścią. Znika w całości.
   Ten sam próg co siatka wyżej i co sam slot (68 rem). */
@media (max-width: 67.99rem) { .leki-aside { display: none; } }

/* Wysokość okna, nie szerokość: problemem jest pion. Kolumna przykleja się w całości
   i nie ma własnego przewijania, więc cokolwiek wystaje poniżej krawędzi okna, jest
   nieosiągalne. Próg jest POLICZONY dla dzisiejszego lokatora: kreacja 600 px + belka
   72 px + odstęp 24 px = 696 px. Zostaje 768 px — z zapasem i bez potrzeby ruszania
   progu przy każdej zmianie rytmu kolumny (wcześniej liczony dla trójki: nawigacja
   372 + odstęp 14 + profil 268). Niżej kolumna po prostu jedzie z dokumentem. */
@media (min-width: 68rem) and (min-height: 768px) {
    .leki-aside { position: sticky; top: calc(var(--farm-nav-h, 72px) + 1.5rem); }
}

/* Nagłówek modułu pomocniczego w kolumnie bocznej — ta sama mikro-etykieta co
   „Na tej stronie" i „Profil bezpieczeństwa". Trzy różne stopnie pisma na trzech
   sąsiadujących modułach czytały się jak trzy poziomy ważności, których tam nie ma. */
.leki-aside__t {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 0.5rem;
}

/* ── 16o. Fokus klawiaturowy w obrębie karty ─────────────────────────────── */

/* Globalny ring z §12 celuje w `:focus`; tu potrzebny jest `:focus-visible`
   z promieniem komponentu — inaczej prostokątny outline obcina zaokrąglone
   pastylki wyboru i wygląda jak defekt renderowania. */
.leki-card a:focus-visible,
.leki-card button:focus-visible,
.leki-card summary:focus-visible,
.leki-card input:focus-visible,
.leki-card select:focus-visible,
.leki-aside a:focus-visible,
.leki-aside button:focus-visible,
.leki-aside summary:focus-visible,
.leki-after a:focus-visible,
.leki-after button:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--lk-r-sm, 0.5rem);
}
.leki-war__row--pak .leki-war__p:focus-visible { outline-offset: 1px; }

/* ── 16p. Ruch ───────────────────────────────────────────────────────────── */

/* Karta używa wyłącznie przejść stanu (hover, fokus, zmiana opakowania,
   rozwinięcie sekcji) — 120–220 ms. Zero animacji dekoracyjnych. Kto wyłączył
   ruch w systemie, dostaje te same stany bez przejścia. */
@media (prefers-reduced-motion: reduce) {
    .leki-card *, .leki-card *::before, .leki-card *::after,
    .leki-aside *, .leki-aside *::before, .leki-aside *::after,
    .leki-after *, .leki-after *::before, .leki-after *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ═══ 17. KOLUMNA BOCZNA KARTY LEKU — moduły (przebudowa 2026-08-07) ════════
   Warstwy sidebara mają RÓŻNĄ wagę, a nie jedną wspólną. Do 2026-08-07 profil
   bezpieczeństwa, spis treści, dokumenty, Przegląd lekowy, baner praca.farm
   i lista producenta stały w sześciu kartach o zbliżonym ciężarze — reklama
   czytała się tak samo mocno jak ostrzeżenie kliniczne. Powierzchnię trzyma
   wyłącznie treść kliniczna; nawigacja jest lekka, promocja kompaktowa.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 17a. Przewijanie do kotwic ──────────────────────────────────────────── */

/* Kotwice spisu treści trafiały POD przyklejony topnav: `.leki-section` niosło
   `scroll-margin-top`, ale sekcje `.leki-mod` (#wariant, #zamienniki, #interakcje)
   nie noszą tej klasy, więc ich nagłówek lądował pod paskiem. Margines liczony
   z realnej wysokości topnava obejmuje wszystkie kotwice karty. */
.leki-card [id], .leki-aside [id] { scroll-margin-top: calc(var(--farm-nav-h, 72px) + 1.5rem); }

/* Płynne dojście do sekcji — TYLKO gdy system nie prosi o mniej ruchu. */
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

/* (2026-08-09) Wyrównanie promienia profilu bezpieczeństwa do reszty kolumny bocznej
   zdjęte razem z samym profilem — panel stoi teraz w kolumnie głównej i bierze promień
   stamtąd. Jeden promień pilnowany jest dziś w pasie domykającym (§18). */

/* ── 17b. Profil bezpieczeństwa — stany B i C ────────────────────────────── */

/* STAN B: brakujące pozycje jednym zdaniem. Świadomie BEZ plakietki i bez koloru
   sygnałowego — brak oceny nie jest oceną i nie ma prawa wyglądać jak wynik. */
.leki-safety__brak {
    margin-top: 0.625rem; font-size: 0.75rem; line-height: 1.5; color: #94a3b8;
}
.dark .leki-safety__brak { color: #94a3b8; }

/* STAN C: jeden komunikat zamiast czterech pustych wierszy. */
.leki-safety__pusty {
    border: 1px solid #e6ecf5; border-radius: var(--lk-r-sm, 0.5rem);
    background: #f8fafc; padding: 0.75rem 0.875rem;
}
.dark .leki-safety__pusty { background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.18); }
.leki-safety__pusty-t {
    font-size: 0.8125rem; font-weight: 600; line-height: 1.45;
    color: var(--color-navy, #0a324a);
}
.dark .leki-safety__pusty-t { color: #e2e8f0; }
.leki-safety__pusty-d {
    margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.5; color: #64748b;
}
.dark .leki-safety__pusty-d { color: #94a3b8; }
.leki-safety__act {
    display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--brand-600, #0a324a);
    text-decoration: none;
}
.leki-safety__act svg { width: 0.875rem; height: 0.875rem; flex: none; }
.leki-safety__act:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-safety__act { color: var(--brand-300, #93c5fd); }

/* Rozwinięcie ostrzeżeń jako link, nie jako kolejny kafel w kaflu. */
.leki-safety__more > .leki-acc__s {
    padding-top: 0.75rem; padding-bottom: 0;
    font-size: 0.8125rem; font-weight: 600; color: var(--brand-600, #0a324a);
}
.dark .leki-safety__more > .leki-acc__s { color: var(--brand-300, #93c5fd); }
.leki-safety__more > .leki-acc__s .leki-acc__c { color: currentColor; }
.leki-safety__more > .leki-acc__b { padding: 0.75rem 0 0; }

/* ── 17c. Spis treści — sekcja bieżąca ───────────────────────────────────── */

/* Spis pokazywał osiem równorzędnych linków i nie mówił, gdzie stoi czytelnik.
   Wskaźnik jest brandowy: to nawigacja, więc kolor marki, nigdy skala sygnałowa
   (ta należy wyłącznie do ocen klinicznych — §3).

   Bieżąca pozycja to GŁOWICA na szynie (§15e): segment grubszy o 1 px, w pełnym
   kolorze marki, z zaokrągloną krawędzią zewnętrzną. Wcześniej wskaźnik był
   2-px kreską na szynie o kontraście 1,05:1 — mocny akcent zawieszony na czymś,
   czego nie widać. Razem z lekką pastelą wiersza (pełna szerokość kolumny) czyta
   się jako położenie na trasie, a nie jako wyróżniony link. */
.leki-toc a.is-active {
    color: var(--brand-700, #0a324a); font-weight: 600;
    background: color-mix(in srgb, var(--brand-500) 9%, transparent);
}
.leki-toc a.is-active::before { color: var(--brand-600, #0f4769); }
.leki-toc li:has(> a.is-active)::before {
    width: 3px; border-radius: 0 2px 2px 0; background: var(--brand-500);
}
.dark .leki-toc a.is-active {
    color: var(--brand-200, #bfdbfe);
    background: color-mix(in srgb, var(--brand-400) 14%, transparent);
}
.dark .leki-toc a.is-active::before { color: var(--brand-300, #93c5fd); }
.dark .leki-toc li:has(> a.is-active)::before { background: var(--brand-400); }

/* ── 17d. Dokumenty i udostępnianie ──────────────────────────────────────── */

/* Ulotka i ChPL to dwa równe przyciski dokumentu; Udostępnij jest akcją innego
   rzędu (nie otwiera dokumentu, tylko kopiuje adres) i dostaje spokojniejszą
   formę — bez ramki, w szarości interfejsu. */
.leki-aside__docs .leki-act > a { min-height: 2.625rem; }
.leki-act__share {
    min-height: 2.375rem !important;
    border-color: transparent !important; background: transparent !important;
    font-weight: 500 !important; color: #475569 !important;
}
.dark .leki-act__share { color: #94a3b8 !important; }
.leki-act__share:hover {
    border-color: #dbe3ee !important; background: #f8fafc !important; color: #475569 !important;
}
.dark .leki-act__share:hover {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.04) !important; color: #cbd5e1 !important;
}
/* Lek bez ulotki i bez ChPL w rejestrze (np. Xarelto) zostawiał w pasku sam
   „Udostępnij" — a że przyciski rosną (`flex: 1 1 6.5rem`), przezroczysta akcja
   rozciągała się na całą szerokość i jej wyśrodkowana etykieta wisiała w powietrzu
   pośrodku pustej kolumny. Sama akcja zostaje przy swojej treści, przy lewej. */
.leki-act > .leki-act__share:only-child {
    flex: 0 0 auto !important; justify-content: flex-start !important; padding-left: 0 !important;
}

/* ── 17e. Emisja reklamowa w pasie domykającym ───────────────────────────── */

/* Baner cross-portalowy renderuje wspólny core (core/placements/render.php) i musi
   zostać wspólny. Do 2026-08-09 stał w kolumnie 300 px i trzeba go było mocno
   kompaktować (ukryta ilustracja, ciaśniejszy rytm), bo jako płyta 132 px z apteczką
   na jedną trzecią szerokości był najgłośniejszym obiektem sidebara. W pasie
   domykającym tego problemu nie ma: kafel jest równorzędny z sąsiadami, stoi POD
   treścią karty i może wyglądać tak, jak go zaprojektowano. Zostaje wyłącznie to,
   co wpina go w rząd — zero marginesu własnego i pełna wysokość kafla. */
/* Selektor POTOMKA, nie dziecka: renderer owija każdą emisję w
   `<span data-placement-id="…" style="display:contents">` (licznik odsłon), więc
   `.leki-after__slot > a` nie trafiałoby w nic. */
.leki-after__slot:empty { display: none; }
.leki-after__slot a[href] { flex: 1 1 auto; margin-bottom: 0 !important; }

/* ── 17f. Inne leki producenta ───────────────────────────────────────────── */

/* Informacja katalogowa, nie kliniczna. Pięć pozycji, reszta przez wejście na kartę
   producenta — wcześniej lista rozwijała się do ośmiu nazw i sama bywała najwyższym
   modułem sidebara. Limit został przy pięciu również po przeprowadzce do szerszego
   kafla: to granica merytoryczna („próbka, nie katalog"), nie brak miejsca. */
.leki-after__mfr ul { margin: 0; }
.leki-aside__mfr-l {
    display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
    color: var(--brand-600, #0a324a); transition: color .14s;
}
.dark .leki-aside__mfr-l { color: var(--brand-300, #93c5fd); }
.leki-aside__mfr-l:hover { color: var(--brand-700, #1e40af); }
.dark .leki-aside__mfr-l:hover { color: var(--brand-200, #bfdbfe); }
.leki-aside__mfr-l svg { width: 0.875rem; height: 0.875rem; flex: none; color: #cbd5e1; }
.dark .leki-aside__mfr-l svg { color: rgba(148,163,184,.5); }
.leki-aside__mfr-m {
    display: block; margin-top: 0.125rem; font-size: 0.75rem; font-weight: 500; color: #94a3b8;
}
.leki-aside__mfr-all { margin-top: 0.875rem; font-size: 0.75rem; }

/* ── 17g. Progi wysokości okna (przeliczone 2026-08-11) ───────────────────
   Kolumna nie ma wewnętrznego przewijania (§16r) i nie ma pod sobą rodzeństwa, więc
   wszystko, co w niej stoi, musi zmieścić się nad krawędzią okna — inaczej dół bloku
   jest nieosiągalny, dopóki blok jest przyklejony.

   Skład kolumny zmienił się 2026-08-11: zamiast kafla narzędzia (305 px) stoi w niej
   profil bezpieczeństwa (286 px w rytmie kompaktowym §16s). Kafel wypadł, bo trzy pola
   dawały 1080 px przy 804 px dostępnych na oknie 900 px — nie mieściły się w ŻADNYM
   realnym oknie. Budżet (dostępne = wysokość okna − 96 px na nawigację i odstęp):

                       dostępne   zmierzone   sufit spisu
     ≥ 900 px okna →      804        747          776     pełny rytm
     768–900 px    →      672        654          683     rytm kompaktowy
     < 768 px      →   bez przyklejania, kolumna jedzie z dokumentem (§16r)

   „Zmierzone" to najwyższa z kart kontrolnych (polopiryna-s / acard, 8 pozycji spisu),
   „sufit spisu" to ta sama karta z dziewiątą pozycją. Spis ma twardy sufit dziewięciu
   pozycji — cztery sekcje stałe (wariant, zamienniki, interakcje, wskazania; profil
   wypadł ze spisu, bo stoi 20 px pod nim) plus pięć jedynych bloków referencyjnych
   z etykietą w rejestrze (substancje, działania niepożądane, praktyka, grupa ATC, ChPL;
   `leki_card_block_order` + `leki_card_blocks`). Reszta bloków rejestru ma etykietę
   pustą i do spisu nie wchodzi. Bez tego sufitu żadnego z progów nie dałoby się
   policzyć, a tylko zgadnąć.

   Niższy próg podniesiony z 620 na 768 px: nie ma już czego z kolumny zdjąć, żeby
   zmieścić ją w 524 px. Oba pola są potrzebne — jedno mówi „gdzie jestem", drugie
   „czy wolno wydać". Kolumna po prostu jedzie wtedy z dokumentem; nic nie znika i nic
   nie zostaje pod krawędzią.

   Wysokość okna, nie szerokość: problemem jest pion (1280×800 i 1024×768 mają różne
   szerokości i ten sam kłopot). */
@media (min-width: 1024px) and (max-height: 899.98px) {
    .leki-aside { gap: 0.875rem; }
    /* Pole nawigacyjne (§15e) kosztuje pion: padding, pasek główki i linia nad
       działaniami. W ciaśniejszym rytmie oddaje go w całości — to obudowa, a nie
       treść, więc ścieśnia się PIERWSZA, przed pozycjami spisu. */
    .leki-navcard { padding: 0 0.75rem 0.5rem; }
    .leki-toc__label { margin: 0 -0.75rem 0.375rem; padding: 0.375rem 0.75rem 0.3125rem; }
    .leki-navcard .leki-aside__docs { margin: 0.5rem -0.75rem 0; padding: 0.5rem 0.75rem 0; }
    .leki-toc a { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    /* Przerwa grupy WYŁĄCZNIE paddingiem, także w ciaśniejszym rytmie — margines
       wyciąłby dziurę w szynie i rozciął spis na dwie listy (§15e). */
    .leki-toc__cut { margin-top: 0; padding-top: 0.625rem; }
    .leki-toc__cut::after { top: 0.28125rem; }
    .leki-aside__docs .leki-aside__t { margin-bottom: 0.375rem; }
    .leki-aside__docs .leki-act > a { min-height: 2.375rem; }
    .leki-aside__docs .leki-act__share { min-height: 2.125rem !important; }
    /* Profil oddaje obudowę, nie treść: cieńsze pole i ciaśniejszy rytm wierszy.
       Żaden wiersz, żadne zalecenie i żadne rozwinięcie nie znika — to jest
       odpowiedź na pytanie „czy wolno wydać", a nie ozdoba kolumny. */
    .leki-aside__safety { padding: 0.75rem; }
    .leki-aside__safety .leki-safety__t { margin-bottom: 0.375rem; }
    .leki-aside__safety .leki-safety__r { padding: 0.3125rem 0; }
    .leki-aside__safety .leki-safety__more { margin-top: 0.5rem; }
    .leki-aside__safety .leki-safety__src { margin-top: 0.5rem; }
}

/* ══ 18. PAS DOMYKAJĄCY POD KARTĄ (2026-08-09) ════════════════════════════
   Trzy moduły, które do tej pory stały w kolumnie bocznej: narzędzie dla farmaceuty
   (Przegląd lekowy), katalog producenta i emisja reklamowa. Żaden nie jest treścią
   karty, więc żaden nie ma prawa jechać przyklejony obok niej — a razem to one
   robiły z kolumny stos sześciu modułów o tej samej wadze wizualnej.

   Pas czyta się jako JEDEN rząd, nie trzy przypadkowe kafle: wspólny promień 1 rem,
   wspólny wcięcie treści 1,25 rem, równa wysokość. Wysokość wyrównujemy, ale treści
   NIE rozpychamy do dołu — nadmiar schodzi pod ostatni wiersz, tak samo jak w §15c;
   stopka przyklejona `margin-top:auto` zostawiałaby w krótkim kaflu dziurę w środku,
   która czyta się jak brakująca treść.

   `auto-fit` zamiast sztywnych trzech kolumn: karta bez producenta (wyrób medyczny,
   suplement bez wpisu) albo bez aktywnej emisji ma dwa kafle, a te mają wypełnić rząd,
   nie zostawić dziurę po trzecim. */
.leki-after { display: grid; gap: 1rem; margin-top: 2.5rem; }

/* PAS DOMYKAJĄCY Z KREACJĄ PO PRAWEJ (ADR-0098) — ta sama oś co dół strony głównej
   (`.dw-home__dol`): treść w kolumnie elastycznej, kreacja w kolumnie szerokości railu.
   Modyfikator `--rail` stawia szablon TYLKO wtedy, gdy skorupa naprawdę powstała; bez
   kreacji pas zostaje jednokolumnowy i nic nie rezerwuje miejsca (CLS 0).
   Próg 68rem jak przy railu karty — niżej kreacja schodzi pod treść, a nie obok niej,
   bo 300 px obok listy na tablecie zostawia liście ~360 px. */
.leki-after__tresc { display: grid; gap: 1rem; min-width: 0; }
.leki-after__reklama { min-width: 0; }
@media (min-width: 48rem) {
    .leki-after__tresc { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .leki-after { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
}
/* 1024–1088 px: dwie kolumny po ~478 px, więc kreacja 300 px pływałaby w połowie
   pustej kolumny. Do 68rem pas z kreacją zostaje JEDNOKOLUMNOWY. */
.leki-after--rail { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 68rem) {
    .leki-after--rail {
        grid-template-columns: minmax(0, 1fr) var(--dw-rail, 300px);
        gap: var(--dw-rail-gap, 1.5rem);
        align-items: start;
    }
}


/* Poniżej lg to jeden stos na pełną szerokość. Dwie kolumny w tym zakresie kusiły,
   ale trzy kafle w siatce 2× zostawiają sierotę na drugim wierszu — pół rzędu pustki
   na końcu strony wygląda jak niedokończony render. */
.leki-after__i { display: flex; flex-direction: column; min-width: 0; border-radius: 1rem; }

/* Kafel narzędzia stoi w pasie jako kopia telefonowa tego z kolumny bocznej
   (§18b). Cień na WRAPPERZE, nie na kaflu: pudełka pokrywają się co do piksela,
   a stan hover kafla (obrys + głębszy cień) zostaje nietknięty. */
.leki-after__i--promo > .leki-pl { flex: 1 1 auto; }
.leki-after__i--promo {
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -18px rgba(15,23,42,.12);
}
.dark .leki-after__i--promo { box-shadow: none; }

/* (2026-08-11) Reguła ukrywająca kopię telefonową kafla od lg — zdjęta razem z samą
   kopią: kafel stoi w pasie na każdej szerokości, bo kolumnę boczną zajął profil
   bezpieczeństwa (§16s). Zostaje przestroga, jeśli kiedyś wróci druga kopia: ukrycie
   MUSI iść z tego pliku, nie z `lg:hidden`. Utility Tailwinda z CDN i
   `.leki-after__i { display: flex }` mają tę samą specyficzność (0,1,0), a leki.css
   ładuje się PO Tailwindzie — wygrywał `flex` i kafel jechał na desktopie DWA RAZY
   (zmierzone 336 px w kolumnie + 435 px w pasie przy 1920). */

/* Wcięcie wspólne dla rzędu: kafel narzędzia niesie 1,5 rem w układzie szerokim,
   więc lista producenta bierze zbliżoną wartość. */
.leki-after__mfr { padding: 1.25rem; }
.leki-after__mfr > h2 { margin-bottom: 0.625rem; }

/* ── 18b. (zdjęte 2026-08-11) ─────────────────────────────────────────────
   Kafel narzędzia stał na dole kolumny bocznej od 1.158.0, bo dolna połowa kolumny
   była pusta. Nie jest już pusta: pod nawigacją stoi profil bezpieczeństwa (§16s),
   a budżet pionu kolumny (§17g) nie mieści trzech pól. Kafel wrócił do pasa
   domykającego, gdzie ma 435 px szerokości zamiast 300 i pełną listę korzyści. */

/* ═══ 19. KARTA SUBSTANCJI CZYNNEJ ═══════════════════════════════════════
   Strona /substancja/{slug} chodzi po tej samej gramatyce co karta leku (§15–§18):
   arkusz, moduły, przyklejona kolumna boczna, pas domykający. Poniżej wyłącznie to,
   czego karta leku nie ma — dokument tekstowy o cząsteczce i lista preparatów.

   Dlaczego dokument dostaje własne reguły zamiast klasy `prose` z Tailwinda: treść
   przychodzi z CBL jako gotowy HTML (akapity, listy, czasem tabela) i musi czytać się
   jak jeden tekst, a nie jak trzynaście osobnych kafli — a `prose` niesie własną skalę
   nagłówków, która biła się ze skalą karty. */

/* ── 19a. Dokument (proza o substancji) ──────────────────────────────────
   Miara 70ch: to jest tekst DO CZYTANIA, nie tabela do skanowania — przy pełnej
   szerokości arkusza wiersz miał ~120 znaków i oko gubiło początek następnego. */
.leki-doc { font-size: 0.9375rem; line-height: 1.7; color: #334155; max-width: 70ch; }
.dark .leki-doc { color: #cbd5e1; }
.leki-doc p { margin: 0 0 0.75rem; }
.leki-doc p:last-child { margin-bottom: 0; }
.leki-doc ul, .leki-doc ol { margin: 0 0 0.75rem; padding-left: 1.125rem; }
.leki-doc ul { list-style: disc; }
.leki-doc ol { list-style: decimal; }
.leki-doc li { margin-bottom: 0.3125rem; }
.leki-doc li:last-child { margin-bottom: 0; }
.leki-doc strong { font-weight: 600; color: var(--color-navy, #0a324a); }
.dark .leki-doc strong { color: #fff; }
.leki-doc a { color: var(--brand-600); text-decoration: none; }
.leki-doc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-doc a { color: var(--brand-300); }
/* Wariant do kafla: krótszy wiersz i mniejszy stopień, bo kafel ma ~300 px. */
.leki-doc--sm { font-size: 0.8125rem; line-height: 1.6; max-width: none; }

/* ── 19b. Blok tożsamości substancji ─────────────────────────────────────
   Nazwa łacińska prowadzi linię pod tytułem: pod nią cząsteczka występuje w ChPL
   i w piśmiennictwie, więc jest identyfikatorem, a nie ciekawostką. */
.leki-subst__lac { font-style: italic; color: #475569; font-size: 0.875rem; }
.dark .leki-subst__lac { color: #cbd5e1; }
.leki-subst__lead { padding-top: 0.25rem; }
/* Lead ma własny stopień pisma, nie tylko własne miejsce: to jedno-dwa zdania „co to
   w ogóle jest", czytane raz i na wejściu, a nie akapit dokumentu. Przy tej samej
   wielkości co reszta prozy blok tożsamości wyglądał, jakby zaczynał się od środka
   artykułu. Miara zostaje w okolicach 65 znaków — dłuższy wiersz gubi początek
   następnego, a kolumna ma tu ~940 px. */
.leki-subst__lead .leki-doc { font-size: 1.0625rem; line-height: 1.65; max-width: 65ch; }
/* Na telefonie lead wraca do stopnia prozy: przy 17 px zajmował cały pierwszy ekran,
   a pod nim stoi profil bezpieczeństwa, czyli to, po co ktoś tu przyszedł. */
@media (max-width: 39.99rem) { .leki-subst__lead .leki-doc { font-size: 0.9375rem; line-height: 1.6; } }

/* Trzy liczby zamiast zdania — ile preparatów, ile Rp, ile refundowanych.
   Wiersz, nie siatka: liczb bywa jedna albo trzy, a siatka z jednym elementem
   zostawiała dwie puste kolumny. */
.leki-subst__fakty {
    display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem;
    margin: 0.875rem 0 0; padding: 0.75rem 0 0; list-style: none;
    border-top: 1px solid #eef2f7;
    font-size: 0.8125rem; color: #64748b;
}
.dark .leki-subst__fakty { border-top-color: rgba(255,255,255,.07); color: #94a3b8; }
.leki-subst__fakty a { color: inherit; text-decoration: none; }
.leki-subst__fakty a:hover { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.leki-subst__n {
    font-weight: 700; font-size: 1rem; color: var(--color-navy, #0a324a);
    font-variant-numeric: tabular-nums; margin-right: 0.1875rem;
}
.dark .leki-subst__n { color: #fff; }

/* ── 19c. Profil bezpieczeństwa ──────────────────────────────────────────
   Ciąża, dzieci i kierowcy to TRZY osobne rozstrzygnięcia, więc trzy kafle obok
   siebie, a nie trzy akapity jednego wywodu. `auto-fit` z minimum 15rem sam schodzi
   do jednej kolumny na telefonie — bez osobnego progu. */
.leki-subst__grid {
    display: grid; gap: 0.75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.leki-subst__kafel {
    padding: 0.875rem 1rem; border-radius: var(--lk-r-md);
    background: #f8fafc; border: 1px solid #eef2f7;
}
.dark .leki-subst__kafel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.leki-subst__kt {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #64748b; margin: 0 0 0.375rem;
}
.dark .leki-subst__kt { color: #94a3b8; }

/* Podsekcja prozy w module (przeciwwskazania, środki ostrożności). */
.leki-subst__pod { margin-bottom: 1rem; }
.leki-subst__pod:last-of-type { margin-bottom: 0; }
.leki-subst__pt {
    font-size: 0.9375rem; font-weight: 700; color: var(--color-navy, #0a324a);
    margin: 0 0 0.375rem; letter-spacing: -0.01em;
}
.dark .leki-subst__pt { color: #fff; }

/* Proza o interakcjach z dokumentu stoi POD zweryfikowanymi parami i musi być od nich
   odcięta — inaczej czyta się jak komentarz do ostatniej pary z listy. */
.leki-subst__intproza {
    margin-top: 0.875rem; padding-top: 0.875rem;
    border-top: 1px solid #eef2f7;
}
.dark .leki-subst__intproza { border-top-color: rgba(255,255,255,.07); }

/* ── 19d. Lista preparatów ───────────────────────────────────────────────
   Dwa łamy od 40rem: 212 preparatów paracetamolu w jednej kolumnie to ekran samych
   nazw. Łam nie może łamać wiersza w środku — stąd `break-inside: avoid`. */
.leki-prep { list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .leki-prep { columns: 2; column-gap: 1.5rem; } }
.leki-prep__i {
    display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;
    padding: 0.375rem 0; border-bottom: 1px solid #f1f5f9;
    break-inside: avoid; -webkit-column-break-inside: avoid;
}
.dark .leki-prep__i { border-bottom-color: rgba(255,255,255,.06); }
.leki-prep__l { display: inline-flex; align-items: baseline; gap: 0.375rem; min-width: 0; text-decoration: none; }
.leki-prep__n { font-size: 0.875rem; font-weight: 500; color: var(--brand-600); }
.leki-prep__l:hover .leki-prep__n { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-prep__n { color: var(--brand-300); }
.leki-prep__m { font-size: 0.75rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.leki-prep__t {
    font-size: 0.625rem; font-weight: 700; letter-spacing: .04em;
    padding: 0.0625rem 0.3125rem; border-radius: 0.25rem;
    background: #eef2f7; color: #64748b;
}
.dark .leki-prep__t { background: rgba(255,255,255,.08); color: #94a3b8; }
/* Rp i refundacja to stany, które zmieniają rozmowę przy okienku — kolor, nie szarość. */
.leki-prep__t--rx  { background: #eef2ff; color: #4338ca; }
.dark .leki-prep__t--rx { background: rgba(99,102,241,.16); color: #a5b4fc; }
.leki-prep__t--ref { background: #ecfdf5; color: #047857; }
.dark .leki-prep__t--ref { background: rgba(16,185,129,.16); color: #6ee7b7; }
/* Nagłówek drugiej listy (suplementy) — odstęp nad, bo poprzednia lista kończy się kreską. */
.leki-prep__grupa { margin-top: 1.25rem; display: flex; align-items: baseline; gap: 0.5rem; }

/* ── 19e. Nazwy i synonimy ───────────────────────────────────────────────
   Siatka etykieta/wartość, nie ciąg rozdzielony kropkami: wartości bywają długie
   (dwanaście synonimów), a wtedy ciąg gubi, gdzie kończy się jedno pole. */
.leki-def { margin: 0; font-size: 0.875rem; }
.leki-def > div {
    display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.5rem 1rem;
    padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9;
}
.leki-def > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dark .leki-def > div { border-bottom-color: rgba(255,255,255,.06); }
.leki-def dt { font-size: 0.75rem; color: #64748b; }
.dark .leki-def dt { color: #94a3b8; }
.leki-def dd { margin: 0; color: var(--color-navy, #0a324a); }
.dark .leki-def dd { color: #e2e8f0; }
@media (max-width: 30rem) {
    .leki-def > div { grid-template-columns: 1fr; gap: 0.125rem; padding: 0.5rem 0; }
}

/* Wyjścia ze strony bez treści — dwa skróty w rzędzie, nie jeden pod drugim:
   to jest ślepy zaułek i trzeba z niego wyjść w jednym ruchu. */
.leki-subst__wyjscia { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; }


/* ═══ 20. KARTA SUBSTANCJI — HUB KLINICZNY (przebudowa 2026-08-10) ══════════
   Karta substancji należy do tej samej rodziny co karta leku (§15–§18): ta sama
   rodzina pisma, ten sam granat, ten sam błękit marki, te same promienie, te same
   akordeony, ta sama skala kolorów klinicznych (§3) i ten sam sidebar. Poniżej
   wyłącznie to, czego karta leku nie ma, bo nie ma po co: filtrowana lista
   preparatów, agregat ocen z wielu produktów i sekcja źródeł per źródło.

   DOMINANTA. Na karcie leku najcięższym modułem jest „Wariant i refundacja" —
   jedno opakowanie, jedna dopłata, jedna decyzja. Tutaj najcięższe są PREPARATY:
   ta strona odpowiada na pytanie „gdzie ta cząsteczka w ogóle jest". Stąd jedyna
   strefa z własnym tłem (`.leki-zone--dec`) na całej karcie to właśnie preparaty.

   CZEGO TU NIE MA I DLACZEGO: dashboardu KPI. Liczby w nagłówku są w rytmie zdania
   (`.leki-subst__fakty`, §19b), nie kaflami — mają pomóc się zorientować, a nie
   wyglądać jak panel analityczny nad treścią kliniczną.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 20a. Tożsamość: rodzaj bytu i kod ATC nad tytułem ───────────────────
   Nad H1, nie pod: „czym to jest" (substancja czynna, nie lek) rozstrzyga sposób
   czytania całej reszty strony, więc pada przed nazwą. */
.leki-subst-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.leki-subst-kind__b {
    display: inline-flex; align-items: center;
    padding: 0.1875rem 0.5rem; border-radius: 0.375rem;
    background: #f5f3ff; color: #6d28d9; border: 1px solid #ede9fe;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dark .leki-subst-kind__b { background: rgba(139,92,246,.16); color: #c4b5fd; border-color: rgba(139,92,246,.28); }
.leki-subst-kind__atc {
    display: inline-flex; align-items: center;
    padding: 0.1875rem 0.5rem; border-radius: 0.375rem;
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em;
    font-variant-numeric: tabular-nums; text-decoration: none;
}
.leki-subst-kind__atc:hover { color: var(--brand-700, #0a324a); border-color: #cbd5e1; }
.dark .leki-subst-kind__atc { background: rgba(255,255,255,.06); color: #cbd5e1; border-color: rgba(255,255,255,.1); }

.leki-subst-syn { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.55; color: #475569; }
.leki-subst-syn span { font-weight: 600; color: #64748b; }
.dark .leki-subst-syn { color: #94a3b8; }

/* Podsumowanie z samych faktów — stan dla substancji bez kuratorowanego opisu.
   Ta sama miara i ten sam stopień co lead, żeby brak opisu nie wyglądał na usterkę
   renderu, tylko na krótsze zdanie. */
.leki-subst-fakt { font-size: 1rem; line-height: 1.6; color: #334155; max-width: 65ch; margin: 0; }
.dark .leki-subst-fakt { color: #cbd5e1; }
.leki-subst-fakt strong { font-weight: 600; color: var(--color-navy, #0a324a); }
.dark .leki-subst-fakt strong { color: #fff; }
@media (max-width: 39.99rem) { .leki-subst-fakt { font-size: 0.9375rem; } }

/* Kontekst wejścia z karty leku (`?bez=`). */
.leki-subst-bez { font-size: 0.8125rem; line-height: 1.5; color: #475569; margin: 0 0 0.875rem; }
.dark .leki-subst-bez { color: #94a3b8; }

/* ── 20b. Agregat bezpieczeństwa ─────────────────────────────────────────
   Ocena zgodna wygląda jak ocena; ocena rozbieżna NIE dostaje koloru sygnałowego,
   bo „rozbieżne" nie jest stopniem ryzyka — jest informacją o danych. Wybór między
   „Można" a „Nie stosować" należy do farmaceuty przy konkretnym produkcie, a nie
   do reguły „najgorsza wygrywa", której w tym projekcie nikt nie zatwierdził. */
.leki-sig-mixed { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.dark .leki-sig-mixed { background: rgba(139,92,246,.16); color: #c4b5fd; border-color: rgba(139,92,246,.3); }

.leki-subst-bezp__pod {
    margin: -0.125rem 0 0.75rem; font-size: 0.75rem; line-height: 1.5; color: #64748b;
}
.dark .leki-subst-bezp__pod { color: #94a3b8; }
.leki-subst-bezp__rozklad {
    display: flex; flex-wrap: wrap; gap: 0.3125rem;
    margin: 0.375rem 0 0; padding: 0; list-style: none;
}
.leki-subst-bezp__rozklad li { display: inline-flex; }
.leki-subst-bezp__l { text-decoration: none; border-radius: 0.375rem; }
.leki-subst-bezp__l:hover .leki-sig { text-decoration: underline; text-underline-offset: 2px; }
.leki-subst-bezp__l:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Kolumna boczna: panel dostaje powierzchnię, bo jest tam JEDYNYM modułem treści
   (spis i akcje są nawigacją). W kolumnie głównej — bez powierzchni, jak każda
   inna sekcja strefy (§15). */
.leki-aside__bezp { padding: 1rem 1.125rem; }
.leki-aside__bezp .leki-safety__t { margin-top: 0; }
.leki-zone > .leki-subst-bezp .leki-safety__t { margin-top: 0; }

/* ── 20c. Pasek filtrów listy preparatów ─────────────────────────────────
   Formularz GET z natywnymi <select>: na telefonie system daje własny, dostępny
   selektor, którego żaden własny dropdown nie pobije, a klawiatura i czytnik
   ekranu dostają zachowanie, którego nie trzeba pisać od zera. */
.leki-filtry { margin: 0 0 1rem; }

/* Akordeon paska filtrów. Od 48rem jest przezroczysty: <summary> znika, a treść i tak
   stoi otwarta (`open` w HTML). Poniżej — składany przycisk z celem dotykowym 44 px. */
.leki-filtry__box { border: 0; }
.leki-filtry__sum { display: none; }
@media (max-width: 47.99rem) {
    .leki-filtry__sum {
        display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
        min-height: 2.75rem; padding: 0.375rem 0.75rem; margin-bottom: 0.625rem;
        border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem); background: #fff;
        font-size: 0.8125rem; font-weight: 700; color: var(--color-navy, #0a324a);
        cursor: pointer; list-style: none;
    }
    .leki-filtry__sum::-webkit-details-marker { display: none; }
    .leki-filtry__sum:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
    .dark .leki-filtry__sum { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #e2e8f0; }
    .leki-filtry__box[open] .leki-filtry__sum .leki-acc__c { transform: rotate(180deg); }
}
.leki-filtry__row {
    display: grid; gap: 0.625rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    align-items: end;
}
.leki-filtry__lab {
    display: block; margin-bottom: 0.25rem;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #475569;
}
.dark .leki-filtry__lab { color: #94a3b8; }
.leki-filtry__s {
    width: 100%; min-height: 2.75rem;                     /* cel dotykowy ≥ 44 px */
    padding: 0 2rem 0 0.6875rem;
    border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem);
    background: #fff; color: var(--color-navy, #0a324a);
    font-family: inherit; font-size: 0.8125rem; font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1rem;
}
.leki-filtry__s:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500); }
.dark .leki-filtry__s { background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #e2e8f0; }
.leki-filtry__act { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; }
.leki-filtry__go {
    min-height: 2.75rem; padding: 0 1rem;
    border: 0; border-radius: var(--lk-r-sm, 0.5rem);
    background: var(--brand-500); color: #fff;
    font-family: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer;
}
.leki-filtry__go:hover { background: var(--brand-600); }
/* Z JavaScriptem zmiana <select> stosuje filtr od razu, więc przycisk jest zbędny —
   ale MUSI istnieć w HTML-u dla przeglądarki bez JS. Chowamy CAŁĄ komórkę dopiero
   skryptem: sam ukryty przycisk zostawiał w siatce pustą kolumnę. */
.leki-filtry--js .leki-filtry__act { display: none; }

/* „Wyczyść wszystkie" jest pigułką w rzędzie aktywnych filtrów — tą samą formą, tylko
   bez koloru marki, bo zdejmuje wybór zamiast go opisywać. */
.leki-filtry__reset {
    border-color: #e2e8f0 !important; background: #f8fafc !important; color: #475569 !important;
}
.leki-filtry__reset:hover { border-color: #cbd5e1 !important; color: #475569 !important; }
.dark .leki-filtry__reset {
    background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: #64748b !important;
}

/* Aktywne filtry ZAWSZE widoczne — także wtedy, gdy pasek jest zwinięty na telefonie.
   Lista pokazująca 4 z 61 wariantów bez widocznego powodu czyta się jak awaria. */
.leki-filtry__akt { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.leki-filtry__akt a {
    display: inline-flex; align-items: center; gap: 0.375rem;
    min-height: 2rem; padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    border-radius: 999px; border: 1px solid var(--brand-200, #bfdbfe);
    background: var(--brand-50, #eff6ff); color: var(--brand-700, #0a324a);
    font-size: 0.75rem; font-weight: 600; text-decoration: none;
}
.leki-filtry__akt a:hover { border-color: var(--brand-400, #4a83a8); }
.leki-filtry__akt a span[aria-hidden] { font-size: 0.9375rem; line-height: 1; opacity: .65; }
.dark .leki-filtry__akt a { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.3); color: #bfdbfe; }

/* ── 20d. Wyniki: licznik, grupy, wiersze ────────────────────────────────── */
.leki-subst-lista[aria-busy="true"] { opacity: .55; transition: opacity .12s; }
@media (prefers-reduced-motion: reduce) { .leki-subst-lista[aria-busy="true"] { transition: none; } }
.leki-subst-lista__licznik {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
    margin: 0 0 0.875rem; font-size: 0.8125rem; color: #475569;
}
.leki-subst-lista__licznik strong { font-size: 1rem; font-weight: 700; color: var(--color-navy, #0a324a); font-variant-numeric: tabular-nums; }
.dark .leki-subst-lista__licznik { color: #94a3b8; }
.dark .leki-subst-lista__licznik strong { color: #fff; }
.leki-subst-lista__str { font-size: 0.75rem; color: #64748b; }

.leki-subst-grp + .leki-subst-grp { margin-top: 1.25rem; }
.leki-subst-grp__t {
    display: flex; align-items: baseline; gap: 0.5rem;
    margin: 0 0 0.5rem; padding-bottom: 0.375rem;
    border-bottom: 1px solid #e6ecf5;
    font-size: 0.75rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
    color: #475569;
}
.dark .leki-subst-grp__t { color: #94a3b8; border-bottom-color: rgba(255,255,255,.08); }
.leki-subst-grp__n {
    font-size: 0.6875rem; font-weight: 700; color: #475569;
    background: #f1f5f9; border-radius: 999px; padding: 0.0625rem 0.375rem;
    letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.dark .leki-subst-grp__n { background: rgba(255,255,255,.08); }

/* Wiersz wariantu. DWA POZIOMY, nie kolumny: nazwa z mocą i plakietkami w pierwszej
   linii, metadane rejestru w drugiej. Kolumny rozjeżdżały się przy nazwach typu
   „Rosamera 20 mg + 10 mg + 8 mg", które w kolumnie 200 px zajmują trzy wiersze. */
.leki-prepx__ul { list-style: none; margin: 0; padding: 0; }
.leki-prepx { padding: 0.625rem 0; border-bottom: 1px solid #f1f5f9; }
.leki-prepx:last-child { border-bottom: 0; }
.dark .leki-prepx { border-bottom-color: rgba(255,255,255,.06); }
.leki-prepx__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.625rem; }
.leki-prepx__l { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; min-width: 0; text-decoration: none; }
.leki-prepx__n { font-size: 0.9375rem; font-weight: 600; color: var(--brand-600); overflow-wrap: anywhere; }
.leki-prepx__l:hover .leki-prepx__n { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-prepx__n { color: var(--brand-300); }
.leki-prepx__moc {
    font-size: 0.8125rem; font-weight: 600; color: var(--color-navy, #0a324a);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dark .leki-prepx__moc { color: #e2e8f0; }
.leki-prepx__tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; }
.leki-prepx__t {
    font-size: 0.625rem; font-weight: 700; letter-spacing: .04em;
    padding: 0.125rem 0.375rem; border-radius: 0.25rem;
    background: #eef2f7; color: #475569; white-space: nowrap;
}
.dark .leki-prepx__t { background: rgba(255,255,255,.08); color: #94a3b8; }
.leki-prepx__t--rx  { background: #eef2ff; color: #4338ca; }
.dark .leki-prepx__t--rx { background: rgba(99,102,241,.16); color: #a5b4fc; }
/* Refundacja to stan rejestrowy, nie ocena kliniczna — jedyny świadomy wyjątek
   od reguły „zieleń należy do skali .leki-sig" (§3), ten sam co na karcie leku. */
.leki-prepx__t--ref { background: #ecfdf5; color: #047857; }
.dark .leki-prepx__t--ref { background: rgba(16,185,129,.16); color: #6ee7b7; }
.leki-prepx__t--combo { background: #fff7ed; color: #c2410c; }
.dark .leki-prepx__t--combo { background: rgba(249,115,22,.16); color: #fdba74; }
.leki-prepx__meta {
    display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem;
    margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 1.5; color: #475569;
}
.dark .leki-prepx__meta { color: #94a3b8; }
.leki-prepx__meta > span { display: inline-flex; align-items: baseline; }
.leki-prepx__meta > span + span::before {
    content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor;
    opacity: .5; margin-right: 0.5rem; align-self: center;
}
.leki-prepx__mfr { color: #475569; font-weight: 500; overflow-wrap: anywhere; }
.dark .leki-prepx__mfr { color: #cbd5e1; }
.leki-prepx__num { font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) {
    .leki-prepx__tags { margin-left: 0; flex-basis: 100%; }
}

/* ── 20e. Paginacja ──────────────────────────────────────────────────────── */
.leki-pag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 1.125rem; }
.leki-pag__b {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.625rem;
    border: 1px solid #e2e8f0; border-radius: var(--lk-r-sm, 0.5rem);
    background: #fff; color: #475569;
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.leki-pag__b:hover { border-color: var(--brand-400, #4a83a8); color: var(--brand-700, #0a324a); }
.leki-pag__b.is-active {
    background: var(--brand-500); border-color: var(--brand-500); color: #fff;
}
.dark .leki-pag__b { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #cbd5e1; }
.dark .leki-pag__b.is-active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.leki-pag__e { color: #475569; padding: 0 0.125rem; }
/* Wariant dla list pełnostronicowych (/kategoria, /alfabet, /producenci): pasek stoi
   pod wynikami, więc jest wyśrodkowany i ma większy oddech od ostatniego wiersza.
   Wewnątrz karty substancji paginacja zostaje przy lewej krawędzi listy. */
.leki-pag--lista { justify-content: center; margin-top: 2rem; }
/* Strzałki kierunkowe: „Wstecz"/„Dalej" to dwa najszersze przyciski paska, a przy
   dziewięciu kontrolkach na telefonie decydują o tym, czy numery zejdą do drugiego
   wiersza. Poniżej 480 px zostaje sama strzałka — kierunek niesie `aria-label`. */
.leki-pag__lbl { margin: 0 0.25rem; }
@media (max-width: 479px) {
    .leki-pag__lbl { display: none; }
    /* Zostaje: strzałki, sąsiedzi bieżącej strony oraz skróty na początek i koniec.
       Dalsze numery schodzą — inaczej pasek łamie się na dwa wiersze. */
    .leki-pag__b--far { display: none; }
    /* Wielokropek jest przerwą w ciągu numerów, a nie kontrolką — na 320 px to
       ostatnie 34 px, których brakuje do jednego wiersza. Sam przeskok numerów
       (1 · 3 4 5 · 17) niesie tę samą informację. */
    .leki-pag__e { display: none; }
    .leki-pag { gap: 0.25rem; }
}

/* ── 20f. Interakcje: status weryfikacji i szukajka ──────────────────────
   Status weryfikacji NIE dostaje koloru klinicznego: mówi o jakości danych,
   a nie o ryzyku. Rozróżnia się kształtem i słowem, nigdy samym kolorem. */
.leki-int__v {
    font-size: 0.625rem; font-weight: 700; letter-spacing: .03em;
    padding: 0.0625rem 0.375rem; border-radius: 0.25rem; white-space: nowrap;
    border: 1px solid transparent;
}
.leki-int__v--ok    { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.leki-int__v--draft { background: transparent; color: #64748b; border-color: #e2e8f0; border-style: dashed; }
.dark .leki-int__v--ok    { background: rgba(255,255,255,.08); color: #cbd5e1; border-color: rgba(255,255,255,.12); }
.dark .leki-int__v--draft { color: #94a3b8; border-color: rgba(255,255,255,.16); }

.leki-intszuk { margin: 0 0 0.875rem; }
.leki-intszuk__i {
    width: 100%; max-width: 26rem; min-height: 2.75rem; padding: 0 0.75rem;
    border: 1px solid #dbe3ee; border-radius: var(--lk-r-sm, 0.5rem);
    background: #fff; color: var(--color-navy, #0a324a);
    font-family: inherit; font-size: 0.875rem;
}
.leki-intszuk__i:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500); }
.dark .leki-intszuk__i { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #e2e8f0; }
.leki-intszuk__n { margin: 0.375rem 0 0; font-size: 0.75rem; color: #64748b; min-height: 1rem; }

/* ── 20g. Wskazania ──────────────────────────────────────────────────────
   <details> celowo: rozwinięcie działa bez JavaScriptu, wchodzi w Ctrl+F, a
   przeglądarki wystawiają na <summary> natywne `aria-expanded`. */
.leki-wsk { list-style: none; margin: 0; padding: 0; }
.leki-wsk__i { border-bottom: 1px solid #f1f5f9; }
.leki-wsk__i:last-child { border-bottom: 0; }
.dark .leki-wsk__i { border-bottom-color: rgba(255,255,255,.06); }
.leki-wsk__s {
    display: flex; align-items: center; gap: 0.625rem;
    min-height: 2.75rem; padding: 0.4375rem 0; cursor: pointer; list-style: none;
}
.leki-wsk__s::-webkit-details-marker { display: none; }
.leki-wsk__s:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 0.25rem; }
.leki-wsk__n { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--color-navy, #0a324a); }
.dark .leki-wsk__n { color: #e2e8f0; }
.leki-wsk__c {
    flex: none; font-size: 0.75rem; font-weight: 600; color: #475569;
    background: #f1f5f9; border-radius: 999px; padding: 0.125rem 0.5rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dark .leki-wsk__c { background: rgba(255,255,255,.08); color: #94a3b8; }
.leki-wsk__d[open] .leki-acc__c { transform: rotate(180deg); }
.leki-wsk__b { padding: 0 0 0.75rem; }
.leki-wsk__all { margin-bottom: 0.5rem; }
.leki-wsk__p { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.leki-wsk__p li { font-size: 0.8125rem; }
.leki-wsk__p a { color: var(--brand-600); text-decoration: none; }
.leki-wsk__p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .leki-wsk__p a { color: var(--brand-300); }
.leki-wsk__p li + li::before { content: '·'; color: #cbd5e1; margin-right: 0.5rem; }

/* ── 20h. ATC: ścieżka i substancje pokrewne ─────────────────────────────── */
.leki-atcpath { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.leki-atcpath li { position: relative; }
.leki-atcpath li + li { padding-left: 1rem; }
.leki-atcpath li + li::before {
    content: ''; position: absolute; left: 0.3125rem; top: 0; bottom: 50%;
    border-left: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
    width: 0.4375rem; border-bottom-left-radius: 0.25rem;
}
.dark .leki-atcpath li + li::before { border-color: rgba(255,255,255,.12); }
.leki-atcpath li + li + li { padding-left: 2rem; }
.leki-atcpath li + li + li::before { left: 1.3125rem; }
.leki-atcpath li + li + li + li { padding-left: 3rem; }
.leki-atcpath li + li + li + li::before { left: 2.3125rem; }
.leki-atcpath li + li + li + li + li { padding-left: 4rem; }
.leki-atcpath li + li + li + li + li::before { left: 3.3125rem; }
.leki-atcpath a {
    display: inline-flex; align-items: baseline; gap: 0.5rem;
    min-height: 1.875rem; text-decoration: none;
}
.leki-atcpath__c {
    font-size: 0.75rem; font-weight: 700; color: var(--brand-600);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.dark .leki-atcpath__c { color: var(--brand-300); }
.leki-atcpath__l { font-size: 0.8125rem; color: #475569; }
.leki-atcpath a:hover .leki-atcpath__l { color: var(--color-navy, #0a324a); }
/* Ciemny motyw: etykieta poziomu dziedziczyła szarość pisaną pod biel (3,5:1). */
.dark .leki-atcpath__l { color: #94a3b8; }
.dark .leki-atcpath a:hover .leki-atcpath__l { color: #e2e8f0; }

.leki-atc-kody { margin-bottom: 1rem; }
.leki-atc-kody dd { font-variant-numeric: tabular-nums; }
.leki-atc-kody__n { display: block; margin-top: 0.1875rem; font-size: 0.75rem; color: #64748b; font-variant-numeric: normal; }

.leki-atc-rodz__t { margin-top: 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; }
.leki-atc-rodz {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.25rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.leki-atc-rodz a {
    /* Kod stoi PRZY nazwie, nie przy prawej krawędzi komórki: rozciągnięty na całą
       szerokość gubił związek z nazwą i wyglądał jak osobna kolumna tabeli. */
    display: flex; align-items: baseline; justify-content: flex-start; gap: 0.5rem;
    min-height: 2.25rem; padding: 0.3125rem 0.5rem; border-radius: var(--lk-r-sm, 0.5rem);
    font-size: 0.875rem; color: var(--brand-600); text-decoration: none;
}
.leki-atc-rodz a:hover { background: #f8fafc; }
.dark .leki-atc-rodz a { color: var(--brand-300); }
.dark .leki-atc-rodz a:hover { background: rgba(255,255,255,.04); }
.leki-atc-rodz__c { flex: none; font-size: 0.6875rem; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }
.dark .leki-atc-rodz__c { color: #94a3b8; }

/* ── 20i. Źródła i aktualność ────────────────────────────────────────────
   Jedno źródło = jeden wiersz z WŁASNĄ datą. Wspólna data byłaby nieprawdą:
   opis substancji, rejestr produktów, wykaz refundacyjny i graf interakcji mają
   cztery różne zegary. */
.leki-src { list-style: none; margin: 0; padding: 0; }
.leki-src__i { padding: 0.6875rem 0; border-bottom: 1px solid #f1f5f9; }
.leki-src__i:last-child { border-bottom: 0; padding-bottom: 0; }
.dark .leki-src__i { border-bottom-color: rgba(255,255,255,.06); }
.leki-src__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.625rem; }
.leki-src__co { font-size: 0.875rem; font-weight: 600; color: var(--color-navy, #0a324a); }
.dark .leki-src__co { color: #e2e8f0; }
.leki-src__d {
    font-size: 0.6875rem; font-weight: 700; color: #475569;
    background: #f1f5f9; border-radius: 999px; padding: 0.0625rem 0.4375rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dark .leki-src__d { background: rgba(255,255,255,.08); color: #94a3b8; }
.leki-src__z { margin: 0.1875rem 0 0; font-size: 0.8125rem; color: #475569; }
.dark .leki-src__z { color: #94a3b8; }
.leki-src__p { margin: 0.125rem 0 0; font-size: 0.75rem; line-height: 1.55; color: #64748b; }
.dark .leki-src__p { color: #94a3b8; }

/* ── 20j. Budżet pionu kolumny bocznej (substancja) ──────────────────────
   Kolumna karty leku mieściła spis + dokumenty + kafel narzędzia (§17g). Tutaj
   pierwszym modułem jest agregat bezpieczeństwa i bywa ON WYŻSZY niż tamte trzy
   razem: osiem zagadnień zamiast czterech, a przy rozbieżnych ocenach każde
   z nich niesie jeszcze rozkład. Dlatego narzędzie i emisja zjechały do pasa
   domykającego, a kolumna ma własne progi:

                       dostępne   spis+akcje   agregat (8 pozycji, rozkłady)
     ≥ 1000 px okna →     904        320              ~520   mieści się
     820–1000 px    →     724        286              ~430   rytm ciaśniejszy
     < 820 px       →   bez przyklejania — kolumna jedzie z dokumentem

   Poniżej 820 px NIE ma sensu upychać: pion odbiera to, czego nie da się oddać
   bez odbierania treści. Nieprzyklejona kolumna zawsze jest osiągalna, przycięta
   nigdy — dlatego to ona jest stanem awaryjnym, a nie wewnętrzny pasek przewijania. */
@media (min-width: 1024px) and (max-height: 999.98px) {
    .leki-aside--subst { gap: 0.875rem; }
    .leki-aside--subst .leki-aside__bezp { padding: 0.875rem 1rem; }
    .leki-aside--subst .leki-safety__r { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .leki-aside--subst .leki-toc a { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .leki-aside--subst .leki-aside__t { margin-bottom: 0.375rem; }
    .leki-aside--subst .leki-act > a, .leki-aside--subst .leki-act > button { min-height: 2.375rem; }
}
@media (min-width: 1024px) and (max-height: 819.98px) {
    .leki-aside--subst { position: static; }
}

/* ── 20k. Telefon ────────────────────────────────────────────────────────
   Kolumna boczna znika poniżej 1024 px (§16r), więc profil bezpieczeństwa ma
   w kolumnie głównej WŁASNĄ kopię — stoi zaraz po podsumowaniu, przed listą
   preparatów, bo „czy wolno" pada przed „gdzie to kupię". Nigdy nie widać obu
   kopii naraz: rozstrzyga ten sam breakpoint, który chowa <aside>. */
@media (max-width: 39.99rem) {
    .leki-filtry__row { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
    .leki-subst-grp__t { font-size: 0.6875rem; }
    .leki-prepx__meta { gap: 0.125rem 0.5rem; }
    /* Paginacja na 320 px: numery zawijają się, ale nie wychodzą poza kolumnę. */
    .leki-pag__b { min-width: 2.5rem; padding: 0 0.5rem; }
}

/* ══ 21. Wyszukiwarka w nawigacji ════════════════════════════════════════════
   Dwie powierzchnie jednego komponentu (assets/js/search-suggest.js): pole w górnym
   pasku (desktop ≥1024px) i pełnoekranowy arkusz na telefonie. Obie renderuje
   includes/shell-ui.php. Na home nie ma żadnej — tam wyszukiwarką jest hero.

   GEOMETRIA Z KONTRAKTU, nie z głowy (styles.md §8, DESIGN-SYSTEM.md):
     • promień: input 12 px, panel/karta 16 px, plakietka 9999 px,
     • fokus pola: brand-border + ring 3 px @12% (ring @18% był zarezerwowany dla pola
       uzbrojonego do skanu — skanera nie ma od 2026-08-14, ADR-0021),
     • cienie warstwowe: spoczynek 0 4px 24px /.06, uniesienie 0 12px 40px /.12,
     • włoskowe linie z tokenów --leki-line / --leki-line-soft (zero hardcode'ów),
     • ciemne powierzchnie = #111827 (gray-900), tak jak rozwijane menu paska i szuflada,
     • krzywa ruchu cubic-bezier(.4,0,.2,1) — ta sama, którą rozsuwa się szukajka hero
       na praca.farm; czas krótszy (.22 s), bo to kontrolka paska, nie pas above-the-fold. */

/* ── 21a. Pole w pasku ────────────────────────────────────────────────────
   Rozwinięcie NIE może przepychać sąsiadów: przy 1024–1280 px linki „Baza leków /
   Narzędzia / Moje leki" stoją na styk, a pole rosnące w flexie wypychałoby je poza
   pasek w trakcie pisania. Dlatego wrapper trzyma stałą szerokość w układzie, a samo
   pole jest warstwą kotwiczoną do PRAWEJ i rozjeżdża się w lewo, nad linkami.
   Wysokość 2.5rem = rytm pozostałych kontrolek paska (przycisk „Zaloguj" h-10,
   przyciski narzędzi h-10) — pole niższe od sąsiadów czytało się jak wklejone. */
.leki-navsearch { position: relative; width: 11rem; height: 2.5rem; flex: none; }
.leki-navsearch__box {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 11rem; transition: width .22s cubic-bezier(.4, 0, .2, 1);
}
.leki-navsearch--open .leki-navsearch__box { width: 26rem; }
@media (max-width: 1279.98px) { .leki-navsearch--open .leki-navsearch__box { width: 22rem; } }

/* Linki paska gasną, gdy pole się rozwija — inaczej spod jego lewej krawędzi wystaje
   ucięta etykieta („Baza le…"). `:has()` z kombinatorem sąsiada: brak wsparcia = brak
   wygaszenia, czyli stan sprzed zmiany, nic się nie psuje. Gap równy `gap-5` rdzenia. */
.leki-navlinks { display: flex; align-items: center; gap: 1.25rem; transition: opacity .15s ease; }
.leki-navlinks:has(~ .leki-navsearch--open) { opacity: 0; pointer-events: none; }
/* Shift+Tab z pola wraca do linków — wygaszone nie mogą zostać niewidzialną pułapką
   dla klawiatury, więc fokus je przywraca (WCAG 2.4.7). */
.leki-navlinks:focus-within:has(~ .leki-navsearch--open) { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .leki-navsearch__box, .leki-navlinks { transition: none; }
}

.leki-navsearch__input {
    width: 100%; height: 2.5rem; padding: 0 0.75rem 0 2.375rem;
    border: 1px solid var(--leki-line); border-radius: 0.75rem;
    background: #fff; font-family: inherit; font-size: 0.875rem; font-weight: 500;
    color: var(--color-navy, #0a324a); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.leki-navsearch__input::placeholder { color: #94a3b8; font-weight: 400; }
.leki-navsearch__input:hover { border-color: color-mix(in srgb, var(--brand-500) 35%, var(--leki-line)); }
.leki-navsearch--open .leki-navsearch__input,
.leki-navsearch__input:focus {
    border-color: var(--brand-500);
    /* ring fokusu (kontrakt) + delikatne uniesienie: rozwinięte pole PŁYWA nad linkami,
       więc musi mieć własną warstwę, inaczej wygląda jak dziura wycięta w pasku. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 12%, transparent),
                0 4px 24px rgba(0, 0, 0, .06);
}
.leki-navsearch__ico {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; color: #94a3b8; pointer-events: none;
    transition: color .15s ease;
}
.leki-navsearch--open .leki-navsearch__ico { color: var(--brand-500); }
.dark .leki-navsearch__input {
    background: rgba(255, 255, 255, .08); border-color: var(--leki-line); color: #e2e8f0;
}
.dark .leki-navsearch--open .leki-navsearch__input,
.dark .leki-navsearch__input:focus { background: #111827; border-color: var(--brand-400, var(--brand-500)); }

/* ── 21b. Panel podpowiedzi (wspólny: pasek + arkusz) ─────────────────────
   Panel wisi pod paskiem obok rozwijanych menu „Baza leków" i „Narzędzia", więc mówi
   ich językiem: 16 px promienia, włoskowa ramka, pozycje jako zaokrąglone wiersze
   w wewnętrznym marginesie — BEZ linii dzielących (menu paska ich nie mają). */
.leki-sugg {
    text-align: left; padding: 0.375rem;
    /* Promień 12 px, NIE 16 px z kanonu kart: panel wisi 8 px pod paskiem, tuż obok
       rozwijanego menu „Baza leków" (Tailwind `rounded-xl` = 12 px). Dwa panele z tej
       samej belki o różnych narożnikach to najczystszy sygnał „doklejone osobno". */
    border: 1px solid var(--leki-line); border-radius: 0.75rem; background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
    overflow: hidden auto; overscroll-behavior: contain;
}
.leki-navsearch .leki-sugg {
    position: absolute; right: 0; top: calc(100% + .5rem); width: 26rem; max-height: 70vh; z-index: 60;
}
@media (max-width: 1279.98px) { .leki-navsearch .leki-sugg { width: 22rem; } }

.leki-sugg__grp {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #64748b;
}
.leki-sugg__row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    /* 8 px = 12 px panelu minus 6 px jego marginesu (zaokrąglenia zagnieżdżone
       muszą się zgadzać, inaczej narożnik wiersza „odstaje" od narożnika panelu). */
    padding: 0.5rem 0.75rem; border-radius: 0.5rem;
    text-decoration: none; cursor: pointer;
    transition: background-color .12s ease;
}
.leki-sugg__row:hover { background: #f8fafc; }
/* Zaznaczenie z klawiatury musi być MOCNIEJSZE niż hover myszy — inaczej przy kursorze
   leżącym nad listą nie widać, którą pozycję wybierze Enter. */
.leki-sugg__row.is-active { background: color-mix(in srgb, var(--brand-500) 9%, transparent); }
.leki-sugg__row:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.leki-sugg__name { font-weight: 600; font-size: 0.875rem; color: var(--color-navy, #0a324a); line-height: 1.35; }
.leki-sugg__dose { font-size: 0.75rem; font-weight: 600; color: var(--brand-600, var(--brand-500)); }
.leki-sugg__meta {
    display: block; margin-top: 0.0625rem; font-size: 0.6875rem; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Plakietka Rx = GOTOWY komponent domu (.leki-badge--rx, §14). Podpowiedź nie dostaje
   własnych kolorów — dostaje tylko zagęszczenie, bo wiersz listy jest niższy niż karta. */
.leki-sugg__row .leki-badge { flex: none; padding: 0.1875rem 0.5rem; font-size: 0.6875rem; }

/* Historia: ta sama gramatyka wiersza, ale wyciszona — to ślad, nie wynik. */
.leki-sugg__hd { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.leki-sugg__clear {
    padding: 0.25rem 0.5rem; border-radius: 0.5rem;
    font-size: 0.6875rem; font-weight: 500; color: #94a3b8;
    transition: color .15s ease, background-color .15s ease;
}
.leki-sugg__clear:hover { color: #475569; background: #f8fafc; }
.leki-sugg__clear:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.dark .leki-sugg__clear:hover { color: #e2e8f0; background: rgba(255, 255, 255, .05); }
.leki-sugg__row--past .leki-sugg__name { font-weight: 500; color: #475569; }
.dark .leki-sugg__row--past .leki-sugg__name { color: #cbd5e1; }
.leki-sugg__hist-ico { flex: none; width: 0.875rem; height: 0.875rem; color: #94a3b8; }

.leki-sugg__fix {
    margin: 0.125rem 0.25rem 0.375rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem;
    font-size: 0.8125rem; background: #fffbeb; color: #92400e;
}
.leki-sugg__fix button { font-weight: 600; color: inherit; text-decoration: underline; }
.leki-sugg__fix button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.leki-sugg__note { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #64748b; }
.dark .leki-sugg { background: #111827; }
.dark .leki-sugg__row:hover { background: rgba(255, 255, 255, .05); }
.dark .leki-sugg__name { color: #e2e8f0; }
.dark .leki-sugg__dose { color: var(--brand-400, var(--brand-500)); }
.dark .leki-sugg__meta, .dark .leki-sugg__grp, .dark .leki-sugg__note { color: #94a3b8; }
.dark .leki-sugg__fix { background: rgba(245, 158, 11, .12); color: #fcd34d; }

/* ── 21c. Arkusz na telefonie ─────────────────────────────────────────────
   Arkusz siedzi w DOM ZAWSZE i chowa się przez opacity — NIE przez display:none.
   Element z display:none nie przyjmuje focus(), więc iOS Safari nie podniósłby
   klawiatury: fokus musi paść w tym samym geście, w którym user dotknął zakładki
   „Szukaj". Zamknięty arkusz jest aria-hidden i nie łapie kliknięć, a jego pole
   wypada z kolejności Tab (tabindex=-1 w markupie).
   Powierzchnia i włoskowe linie jak w szufladzie mobilnej (core/topnav.php). */
/* Arkusz zaczyna się POD paskiem (nie `inset: 0`): logo ma być widoczne zawsze, bo to
   kotwica orientacji — użytkownik musi wiedzieć, w którym serwisie szuka, i mieć jak
   wyjść. Wysokość paska niesie `--farm-nav-h` (44/56/72 px), więc szczelina nie rozjedzie
   się przy zmianie kanonu nagłówka. Dolny pasek nawigacji arkusz przykrywa świadomie —
   pod klawiaturą i tak byłby nieosiągalny, a wyniki dostają cały pion. */
.leki-searchsheet {
    position: fixed; top: var(--farm-nav-h, 44px); left: 0; right: 0; bottom: 0; z-index: 110;
    display: flex; flex-direction: column; background: #fff;
    opacity: 0; pointer-events: none; transform: translateY(-0.375rem);
    transition: opacity .18s cubic-bezier(.4, 0, .2, 1), transform .18s cubic-bezier(.4, 0, .2, 1);
}
.leki-searchsheet.is-open { opacity: 1; pointer-events: auto; transform: none; }
@media (prefers-reduced-motion: reduce) { .leki-searchsheet { transition: none; } }
@media (min-width: 1024px) { .leki-searchsheet { display: none; } }
.dark .leki-searchsheet { background: #111827; }

/* Miara treści = 42rem (tyle, co szukajka hero, `max-w-2xl`), wyśrodkowana bocznym
   marginesem — arkusz jest pełnoekranowy także na tablecie (nawigacja mobilna sięga
   do 1023 px), a wiersz rozciągnięty na 768–1023 px odrzucał plakietkę ℞ pół ekranu
   od nazwy leku. Środkowanie przez `max()` w paddingu, a nie przez wrapper: kreska
   pod paskiem ma dalej biec przez całą szerokość, inaczej urywa się w połowie ekranu. */
.leki-searchsheet__bar {
    display: flex; align-items: center; gap: 0.5rem;
    /* Bez `env(safe-area-inset-top)`: wcięcie ekranu obsługuje pasek nagłówka, który
       stoi teraz NAD arkuszem — dodatkowy odstęp robiłby tu pustą szczelinę. */
    padding: 0.625rem max(0.75rem, calc((100% - 42rem) / 2));
    border-bottom: 1px solid var(--leki-line-soft);
}
.leki-searchsheet__field { position: relative; flex: 1 1 auto; min-width: 0; }
.leki-searchsheet__input {
    width: 100%; height: 2.75rem; padding: 0 0.875rem 0 2.625rem;
    border: 1px solid var(--leki-line); border-radius: 0.75rem; background: #f8fafc;
    font-family: inherit; font-weight: 500; color: var(--color-navy, #0a324a); outline: none;
    /* 16 px = próg, poniżej którego iOS Safari sam przybliża stronę przy fokusie. */
    font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.leki-searchsheet__input::placeholder { color: #94a3b8; font-weight: 400; }
.leki-searchsheet__input:focus {
    background: #fff; border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 12%, transparent);
}
.dark .leki-searchsheet__input { background: rgba(255, 255, 255, .08); color: #e2e8f0; }
.dark .leki-searchsheet__input:focus { background: rgba(255, 255, 255, .12); border-color: var(--brand-400, var(--brand-500)); }
.leki-searchsheet__ico {
    position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
    width: 1.125rem; height: 1.125rem; color: #94a3b8; pointer-events: none;
}
/* 44 px = minimalny cel dotykowy (styles.md §2). */
.leki-searchsheet__cancel {
    flex: none; min-height: 2.75rem; padding: 0 0.5rem; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 600; color: var(--brand-600, var(--brand-500));
}
.leki-searchsheet__cancel:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.leki-searchsheet__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* W arkuszu panel jest TREŚCIĄ, nie warstwą: bez ramki, cienia i zaokrąglenia. */
.leki-searchsheet .leki-sugg {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    /* Ta sama miara i to samo środkowanie co pasek wyżej — lista musi stać w jednej
       osi z polem, inaczej na tablecie „ucieka" od niego w bok. */
    padding: 0.375rem max(0.25rem, calc((100% - 42rem) / 2)) 1rem;
}
.leki-searchsheet .leki-sugg__row { min-height: 3rem; padding: 0.625rem 0.75rem; }
.leki-searchsheet__hint { padding: 1.5rem 1.25rem; font-size: 0.8125rem; color: #64748b; text-align: center; }
.dark .leki-searchsheet__hint { color: #94a3b8; }
/* Blokada przewijania tła pod otwartym arkuszem. */
.leki-sheet-lock, .leki-sheet-lock body { overflow: hidden; }

/* ══ 22. Wyszukiwarka v2 — wspólny panel, kotwice sekcji, interakcje ══════════
   Dodane w 1.166.0 razem z konsolidacją czterech komponentów podpowiedzi do
   jednego (`assets/js/leki-search.js`) i nową stroną `/interakcje`.
   Konwencje bez zmian: tokeny `--brand-*`, promienie 1rem/1.25rem, tryb ciemny
   przez `.dark`, kolor NIGDY jako jedyny nośnik znaczenia. */

/* ── 22a. Panel podpowiedzi na pozostałych powierzchniach ─────────────────── */
/* Hero i /szukaj: panel wisi pod polem, na całej jego szerokości. Pasek i arkusz
   mają własne reguły wyżej (§21) i tu ich nie ruszamy. */
.leki-sugg--hero, .leki-sugg--results, .leki-sugg--ix {
    position: absolute; left: 0; right: 0; top: calc(100% + .5rem);
    max-height: 70vh; z-index: 60;
}
.leki-sugg--ix { border-radius: .875rem; }

/* Wiersz AKCJI („Zamienniki → Ibuprom"). Wyróżniony pasem po lewej i strzałką —
   to jest wyjście do narzędzia, a nie kolejna pozycja na liście leków. */
.leki-sugg__row--action {
    background: color-mix(in srgb, var(--brand-500) 6%, transparent);
    border-left: 3px solid var(--brand-500);
    justify-content: flex-start;
}
.leki-sugg__row--action:hover { background: color-mix(in srgb, var(--brand-500) 12%, transparent); }
.leki-sugg__row--action .leki-sugg__name { color: var(--brand-700, var(--brand-600, var(--brand-500))); }
.leki-sugg__act { flex: none; display: inline-flex; color: var(--brand-600, var(--brand-500)); }
.leki-sugg__act svg { width: 1rem; height: 1rem; }

/* Skąd wynik. Prefiks i korekta MUSZĄ być widoczne — bez tego użytkownik czyta
   przybliżone trafienie jak dokładne. */
.leki-sugg__why {
    flex: none; font-size: .625rem; font-weight: 600; padding: .0625rem .375rem;
    border-radius: 9999px; background: #f1f5f9; color: #64748b;
}
.leki-sugg__why--fix { background: #fef3c7; color: #92400e; }

/* Kod EAN bez trafienia — komunikat zamiast pustej listy. */
.leki-sugg__empty {
    padding: .75rem 1rem; font-size: .8125rem; line-height: 1.5; color: #475569;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.leki-sugg__empty strong { display: block; color: var(--color-navy, #0a324a); }

.dark .leki-sugg__why { background: rgba(255,255,255,.08); color: #94a3b8; }
.dark .leki-sugg__why--fix { background: rgba(245,158,11,.15); color: #fcd34d; }
.dark .leki-sugg__empty { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); color: #cbd5e1; }
.dark .leki-sugg__empty strong { color: #fff; }
.dark .leki-sugg__row--action { background: color-mix(in srgb, var(--brand-500) 14%, transparent); }
.dark .leki-sugg__row--action .leki-sugg__name { color: var(--brand-300, var(--brand-400)); }

/* ── 22b. Kotwice sekcji ──────────────────────────────────────────────────── */
/* Pusty znacznik `leki_card_anchor()`. `scroll-margin-top` odsuwa cel spod
   przyklejonego paska — bez tego przewinięcie chowa nagłówek sekcji pod nawigacją. */
.leki-anchor { display: block; height: 0; scroll-margin-top: 5.5rem; }
.leki-anchor:focus { outline: none; }

/* Karta nie ma żądanej sekcji — mówimy to wprost, zamiast zostawić użytkownika
   na górze bez wyjaśnienia. */
.leki-sec-missing {
    margin: 0 0 1rem; padding: .75rem 1rem; border-radius: .75rem;
    background: #fffbeb; border: 1px solid #fef3c7; color: #78350f;
    font-size: .8125rem; font-weight: 500;
}
.dark .leki-sec-missing { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #fcd34d; }

/* ── 22c. /interakcje ─────────────────────────────────────────────────────── */
.leki-ix { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
@media (min-width: 640px) { .leki-ix { padding: 2.5rem 1.5rem 4rem; } }
.leki-ix__head { text-align: center; margin-bottom: 1.75rem; }
.leki-ix__h1 {
    font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
    color: var(--color-navy, #0a324a); text-wrap: balance; overflow-wrap: anywhere;
}
@media (min-width: 640px) { .leki-ix__h1 { font-size: 2.25rem; } }
.leki-ix__lead { margin-top: .625rem; font-size: .9375rem; color: #64748b; text-wrap: pretty; }
.dark .leki-ix__h1 { color: #fff; }
.dark .leki-ix__lead { color: #94a3b8; }

/* Formularz: dwa pola + zamiana. Na telefonie pod sobą, strzałka między nimi. */
.leki-ix-form {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1.25rem;
    padding: 1.25rem; box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.dark .leki-ix-form { background: #111827; border-color: rgba(255,255,255,.1); box-shadow: none; }
.leki-ix-form__row { display: grid; gap: .75rem; align-items: end; }
@media (min-width: 768px) { .leki-ix-form__row { grid-template-columns: 1fr auto 1fr; } }

.leki-ix-pole { position: relative; min-width: 0; }
.leki-ix-pole__l {
    display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; color: #64748b;
}
.dark .leki-ix-pole__l { color: #94a3b8; }
.leki-ix-input {
    width: 100%; min-height: 3.25rem; padding: .75rem 1rem; font-size: 1rem;
    border-radius: .875rem; border: 1px solid #e2e8f0; background: #f8fafc;
    color: #0f172a;
}
.leki-ix-input:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; background: #fff; }
.dark .leki-ix-input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #f1f5f9; }

/* Wybrana pozycja jako pastylka — widać, że system rozpoznał konkretny preparat. */
.leki-ix-chip {
    display: flex; align-items: center; gap: .625rem; min-height: 3.25rem;
    padding: .5rem .625rem .5rem .875rem; border-radius: .875rem;
    background: color-mix(in srgb, var(--brand-500) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
}
.leki-ix-chip__t { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.leki-ix-chip__n { font-weight: 700; font-size: .9375rem; color: var(--color-navy, #0a324a); overflow-wrap: anywhere; }
.leki-ix-chip__s { font-size: .75rem; color: #64748b; }
.leki-ix-chip__x {
    /* 2.25rem = 36 px: samodzielna kontrolka, więc musi się dać trafić kciukiem.
       Przy 2rem mieściła się dokładnie w progu 32 px i wypadała na granicy. */
    flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: .5rem; color: #64748b; background: rgba(15,23,42,.05);
}
.leki-ix-chip__x:hover { background: rgba(15,23,42,.1); color: #0f172a; }
.leki-ix-chip__x:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.leki-ix-chip__x svg { width: 1rem; height: 1rem; }
.dark .leki-ix-chip__n { color: #fff; }
.dark .leki-ix-chip__s { color: #94a3b8; }
/* W trybie ciemnym jasny kwadrat na ciemnej pastylce czytał się jak drugi przycisk
   akcji, a to jest kasowanie wyboru — ma być obecne, nie krzyczące. */
.dark .leki-ix-chip__x { background: transparent; color: #94a3b8; }
.dark .leki-ix-chip__x:hover { background: rgba(255,255,255,.1); color: #f1f5f9; }

.leki-ix-swap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; margin: 0 auto; border-radius: .75rem;
    border: 1px solid #e2e8f0; color: #475569; background: #fff;
}
.leki-ix-swap:hover { border-color: var(--brand-400, var(--brand-500)); color: var(--brand-600, var(--brand-500)); }
.leki-ix-swap[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.leki-ix-swap svg { width: 1.125rem; height: 1.125rem; }
.dark .leki-ix-swap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #cbd5e1; }

.leki-ix-cta {
    margin-top: 1rem; width: 100%; min-height: 3rem; border-radius: .875rem;
    background: var(--brand-500); color: #fff; font-weight: 700; font-size: 1rem;
}
.leki-ix-cta:hover { background: var(--brand-600, var(--brand-500)); }
.leki-ix-cta:focus-visible { outline: 2px solid var(--brand-600, var(--brand-500)); outline-offset: 2px; }

.leki-ix-note { margin-top: .75rem; font-size: .8125rem; }
.leki-ix-note--warn { color: #92400e; }
.dark .leki-ix-note--warn { color: #fcd34d; }

/* Podsumowanie wyniku. Poziom niesie ikona + tekst + zdanie — nie sam kolor. */
.leki-ix-sum {
    display: flex; gap: .875rem; margin: 1.5rem 0 1.25rem; padding: 1rem 1.125rem;
    border-radius: 1rem; border: 1px solid #e2e8f0; background: #f8fafc;
}
.leki-ix-sum__ico { flex: none; }
.leki-ix-sum__ico svg { width: 1.5rem; height: 1.5rem; }
.leki-ix-sum__t { font-weight: 700; font-size: .9375rem; color: var(--color-navy, #0a324a); text-wrap: pretty; }
.leki-ix-sum__d { margin-top: .25rem; font-size: .8125rem; color: #475569; text-wrap: pretty; }
.dark .leki-ix-sum { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark .leki-ix-sum__t { color: #fff; }
.dark .leki-ix-sum__d { color: #cbd5e1; }

.leki-ix-lvl--high  { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.leki-ix-lvl--mod   { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.leki-ix-lvl--low   { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.leki-ix-lvl--na    { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.leki-ix-sum--warn  { border-color: #fde68a; background: #fffbeb; }
.leki-ix-sum--error { border-color: #fecaca; background: #fef2f2; }
.dark .leki-ix-lvl--high { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.1); color: #fca5a5; }
.dark .leki-ix-lvl--mod  { border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.1); color: #fdba74; }
.dark .leki-ix-lvl--low  { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.1); color: #93c5fd; }
.dark .leki-ix-lvl--na   { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #cbd5e1; }
.dark .leki-ix-sum--warn  { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.1); }
.dark .leki-ix-sum--error { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.1); }

/* Dwie karty wybranych pozycji. */
.leki-ix-pair { display: grid; gap: .875rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .leki-ix-pair { grid-template-columns: 1fr 1fr; } }
.leki-ix-card {
    padding: 1rem 1.125rem; border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff;
    min-width: 0;
}
.dark .leki-ix-card { background: #111827; border-color: rgba(255,255,255,.1); }
.leki-ix-card__k { font-size: .6875rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: #64748b; }
.leki-ix-card__n { margin-top: .25rem; font-size: 1.0625rem; font-weight: 700; color: var(--color-navy, #0a324a); overflow-wrap: anywhere; }
.leki-ix-card__n a { color: inherit; text-decoration: none; }
.leki-ix-card__n a:hover { text-decoration: underline; }
.leki-ix-card__m { margin-top: .25rem; font-size: .8125rem; color: #64748b; overflow-wrap: anywhere; }
.leki-ix-card__sl { margin-top: .75rem; font-size: .6875rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: #64748b; }
.leki-ix-card__subs { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .25rem .625rem; font-size: .8125rem; }
.leki-ix-card__subs li { color: #334155; overflow-wrap: anywhere; }
.leki-ix-card__leaf { color: #94a3b8; font-size: .75rem; }
.dark .leki-ix-card__k, .dark .leki-ix-card__m, .dark .leki-ix-card__sl { color: #94a3b8; }
.dark .leki-ix-card__n { color: #fff; }
.dark .leki-ix-card__subs li { color: #cbd5e1; }

/* Lista par. */
.leki-ix-list { display: grid; gap: .875rem; margin-bottom: 1.5rem; }
.leki-ix-item {
    padding: 1rem 1.125rem; border-radius: 1rem; border: 1px solid #e2e8f0;
    border-left-width: 4px; background: #fff; min-width: 0;
}
.dark .leki-ix-item { background: #111827; border-color: rgba(255,255,255,.1); }
.leki-ix-item.leki-ix-lvl--high { border-left-color: #dc2626; }
.leki-ix-item.leki-ix-lvl--mod  { border-left-color: #ea580c; }
.leki-ix-item.leki-ix-lvl--low  { border-left-color: #0f4769; }
.leki-ix-item.leki-ix-lvl--na   { border-left-color: #94a3b8; }
.leki-ix-item__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.leki-ix-item__n { font-size: 1rem; font-weight: 700; color: var(--color-navy, #0a324a); overflow-wrap: anywhere; min-width: 0; }
.leki-ix-item__n a { color: inherit; text-decoration: underline; text-decoration-color: rgba(15,23,42,.2); }
.leki-ix-item__x { margin: 0 .375rem; color: #94a3b8; font-weight: 400; }
.dark .leki-ix-item__n { color: #fff; }
.dark .leki-ix-item__n a { text-decoration-color: rgba(255,255,255,.3); }

.leki-ix-lvl {
    flex: none; display: inline-flex; align-items: center; gap: .375rem;
    font-size: .75rem; font-weight: 700; padding: .1875rem .5rem;
    border-radius: 9999px; border: 1px solid transparent;
}
.leki-ix-lvl__d { width: .5rem; height: .5rem; border-radius: 9999px; background: currentColor; }
.leki-ix-item__soc { margin-top: .5rem; font-size: .8125rem; color: #475569; }
.leki-ix-item__soc span { font-weight: 600; }
.leki-ix-item__b { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: #334155; text-wrap: pretty; }
.leki-ix-item__bt { font-size: .6875rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: #64748b; margin-bottom: .1875rem; }
.leki-ix-item__b--empty { color: #64748b; font-style: italic; }
.leki-ix-item__src { margin-top: .75rem; font-size: .6875rem; color: #94a3b8; }
.dark .leki-ix-item__soc, .dark .leki-ix-item__b { color: #cbd5e1; }
.dark .leki-ix-item__bt, .dark .leki-ix-item__src { color: #94a3b8; }

.leki-ix-disclaimer {
    padding: .875rem 1.125rem; border-radius: .875rem; background: #f8fafc;
    font-size: .75rem; line-height: 1.6; color: #64748b; text-wrap: pretty;
}
.dark .leki-ix-disclaimer { background: rgba(255,255,255,.04); color: #94a3b8; }

.leki-ix-again { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.leki-ix-again__b {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
    border-radius: .75rem; background: var(--brand-500); color: #fff; font-weight: 700;
    font-size: .875rem; text-decoration: none;
}
.leki-ix-again__b:hover { background: var(--brand-600, var(--brand-500)); }
.leki-ix-again__l {
    display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem;
    font-size: .875rem; font-weight: 600; color: var(--brand-600, var(--brand-500)); text-decoration: none;
}
.leki-ix-again__l:hover { text-decoration: underline; }

.leki-ix-about { margin-top: 1.75rem; font-size: .9375rem; color: #475569; }
.leki-ix-about h2 { font-size: 1.0625rem; font-weight: 700; color: var(--color-navy, #0a324a); margin-bottom: .625rem; }
.leki-ix-about ul { display: grid; gap: .5rem; padding-left: 1.125rem; list-style: disc; text-wrap: pretty; }
.leki-ix-about__lim { margin-top: 1rem; font-size: .8125rem; color: #64748b; text-wrap: pretty; }
.dark .leki-ix-about { color: #cbd5e1; }
.dark .leki-ix-about h2 { color: #fff; }
.dark .leki-ix-about__lim { color: #94a3b8; }

/* Ograniczenie animacji — zgodnie z ustawieniem systemowym. */
@media (prefers-reduced-motion: reduce) {
    .leki-ix-swap, .leki-ix-cta, .leki-sugg__row { transition: none !important; }
}

/* ═══ 23. LEKSYKON SUBSTANCJI CZYNNYCH (/substancje) ════════════════════════
   Gramatyka karty leku i karty substancji, nie landing page: te same tokeny
   koloru, te same promienie, włoskowa linia zamiast kolorowego kafla, gęstość
   informacji zamiast pustych powierzchni. Strona ma JEDEN element pierwszego
   planu — pole wyszukiwania — więc wszystko poniżej celowo jest ciszej.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 23a. Blok wyszukiwania ───────────────────────────────────────────────── */
/* Ujemny margines górny wciąga pole pod hero: nagłówek i wyszukiwarka mają
   czytać się jak jeden blok, a nie jak dwa panele z przerwą. */
.leki-lex-search { position: relative; z-index: 20; margin: -0.5rem 0 1.5rem; }

.leki-lex-meta {
    margin-top: .625rem; font-size: .8125rem; color: #475569;
    font-variant-numeric: tabular-nums;
}
.leki-lex-meta strong { color: var(--color-navy, #0a324a); font-weight: 700; }
.dark .leki-lex-meta { color: #94a3b8; }
.dark .leki-lex-meta strong { color: #fff; }

/* ── 23b. Nagłówek sekcji pomocniczej ─────────────────────────────────────── */
/* Wyraźnie CISZEJ niż H1. Wspólny `leki_section_heading()` daje text-2xl/3xl —
   na tej stronie „Popularne substancje" wyglądało przez to jak drugi tytuł
   i odbierało pierwszy plan wyszukiwarce. */
.leki-lex-h2 {
    margin: 0 0 .75rem; font-size: .8125rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: #475569;
}
.dark .leki-lex-h2 { color: #94a3b8; }

/* ── 23c. Chipy popularnych substancji ────────────────────────────────────── */
/* Chipy, nie kafle: pojedyncza nazwa substancji nie unosi karty o własnej
   powierzchni, a dziesięć takich kart zrobiłoby z sekcji pomocniczej główny
   element strony. */
.leki-lex-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.leki-lex-chips .leki-chip { font-size: .875rem; padding: .5rem .875rem; min-height: 2.25rem; }

.leki-lex-note {
    margin-top: .75rem; font-size: .75rem; line-height: 1.5; color: #475569;
    text-wrap: pretty; max-width: 44rem;
}
.dark .leki-lex-note { color: #94a3b8; }

.leki-lex-hint {
    margin: 0 0 1.5rem; font-size: .875rem; line-height: 1.6;
    color: #475569; text-wrap: pretty; max-width: 44rem;
}
.leki-lex-hint:focus { outline: none; }
.dark .leki-lex-hint { color: #94a3b8; }

/* ── 23d. Lista pozycji leksykonu ─────────────────────────────────────────── */
/* Wiersz, nie karta. Sto osiem kart na literę „A" to sto osiem powierzchni do
   przeczytania; lista z włoskową linią skanuje się wzrokiem w pionie. */
.leki-lex-list { list-style: none; margin: 0; padding: 0; }
.leki-lex-list > li + li { border-top: 1px solid #f1f5f9; }
.dark .leki-lex-list > li + li { border-top-color: rgba(255,255,255,.07); }
.leki-lex-list:focus { outline: none; }
/* Cel skoku `#lista` spod przyklejonej wstęgi liter — bez tego nagłówek listy
   ląduje pod paskiem nawigacji. */
.leki-lex-list, .leki-lex-hint { scroll-margin-top: 7rem; }

.leki-lex-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    /* 2.75rem wysokości minimalnej = wygodny cel dotykowy (WCAG 2.5.5). */
    min-height: 2.75rem; padding: .625rem .25rem;
    border-radius: .5rem; transition: background-color .12s;
}
.leki-lex-row:hover { background: color-mix(in srgb, var(--brand-500) 6%, transparent); }

.leki-lex-row__main { min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.leki-lex-row__name {
    font-size: .9375rem; font-weight: 600; color: var(--color-navy, #0a324a);
    /* Nazwy bywają wielowyrazowe („kwas acetylosalicylowy", „białka osocza
       ludzkiego") — łamiemy je, zamiast obcinać wielokropkiem albo wypychać
       poziomy pasek przewijania. */
    overflow-wrap: anywhere; text-wrap: pretty;
}
.leki-lex-row:hover .leki-lex-row__name { color: var(--brand-600, var(--brand-500)); }
.leki-lex-row__alt {
    font-size: .75rem; color: #64748b; font-style: italic;
    overflow-wrap: anywhere;
}
.dark .leki-lex-row__name { color: #fff; }
.dark .leki-lex-row:hover .leki-lex-row__name { color: var(--brand-300, var(--brand-400)); }
.dark .leki-lex-row__alt { color: #94a3b8; }

.leki-lex-row__end {
    flex: none; display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; color: #64748b; font-variant-numeric: tabular-nums;
}
.dark .leki-lex-row__end { color: #94a3b8; }
.leki-lex-row__ico { width: 1rem; height: 1rem; flex: none; opacity: .55; }

/* Telefon: kolumny wyrównujemy do GÓRY, bo nazwa łamie się na dwie–trzy linie,
   a licznik ma zostać przy pierwszej. Liczby preparatów NIE chowamy — to jedyna
   informacja o skali obok nazwy, a na telefonie mieści się bez problemu, gdy
   nazwa może się złamać (`overflow-wrap: anywhere` wyżej). */
@media (max-width: 30rem) {
    .leki-lex-row { align-items: flex-start; }
    .leki-lex-row__end { align-self: flex-start; padding-top: .125rem; }
    .leki-lex-row__n { white-space: nowrap; }
}

/* ── 23e. Wstęga liter na tej stronie ─────────────────────────────────────── */
/* Wstęga jest przyklejona (reguła §11), więc na telefonie musi mieć własny
   sufit wysokości — 22 aktywne litery w dwóch rzędach zjadały pół ekranu.

   Cele dotykowe rosną do 2.75rem (44 px): bazowe 2.125rem = 34 px to rozmiar
   pod kursor, nie pod palec, a litera jest tu podstawową nawigacją. Zmierzone
   E2E na 390 px. Dotyczy też /alfabet — ta sama wstęga, ta sama poprawka. */
@media (max-width: 40rem) {
    .leki-alpha-ribbon { max-height: 40vh; overflow-y: auto; }
    .leki-alpha-ribbon a, .leki-alpha-ribbon span { min-width: 2.75rem; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .leki-lex-row { transition: none; }
}

/* ── 24. Zmiany w rejestrze (strona główna) ───────────────────────────────── */
/* Wiersz, nie kafel: pozycja niesie trzy informacje (co się stało, z czym, kiedy)
   i żadna z nich nie unosi karty o własnej powierzchni. Etykieta stoi PIERWSZA,
   bo to ona rozstrzyga, czy wiersz w ogóle warto czytać. */
.leki-reg { display: flex; flex-direction: column; gap: .5rem; }
.leki-reg__row {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .75rem .875rem; text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
.leki-reg__row:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.leki-reg__tag {
    --tag: #00aeef;
    flex: none; margin-top: .0625rem;
    font-size: .625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: .25rem .4375rem; border-radius: .375rem; white-space: nowrap;
    background: color-mix(in srgb, var(--tag) 12%, #fff);
    color: color-mix(in srgb, var(--tag) 60%, #0f172a);
    border: 1px solid color-mix(in srgb, var(--tag) 26%, transparent);
}
.dark .leki-reg__tag {
    background: color-mix(in srgb, var(--tag) 18%, transparent);
    color: color-mix(in srgb, var(--tag) 60%, #fff);
    border-color: color-mix(in srgb, var(--tag) 32%, transparent);
}
/* Kolor jest DODATKIEM do słowa, nie jego zamiennikiem — etykieta zawsze mówi wprost,
   co się stało (§a11y: informacja nie może stać wyłącznie na kolorze). */
.leki-reg__tag--added     { --tag: #00aeef; }
.leki-reg__tag--missing   { --tag: #d97706; }
.leki-reg__tag--withdrawn { --tag: #dc2626; }
.leki-reg__tag--restored  { --tag: #0f4769; }
.leki-reg__n {
    display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3;
    color: var(--color-navy, #0a324a); overflow-wrap: anywhere;
}
.dark .leki-reg__n { color: #fff; }
.leki-reg__row:hover .leki-reg__n { color: var(--brand-600, var(--brand-500)); }
.leki-reg__m {
    display: block; margin-top: .125rem; font-size: .75rem; color: #64748b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .leki-reg__m { color: #94a3b8; }
.leki-reg__d { flex: none; margin-left: auto; font-size: .75rem; color: #94a3b8; padding-top: .125rem; }
@media (prefers-reduced-motion: reduce) { .leki-reg__row { transition: none; } }