/* ─────────────────────────────────────────────────────────────────────────────
   Karta leku.

   ⚠️ KOLORY Z TOKENÓW MOTYWU, nie z `currentColor`. Do 19.08.2026 wszystko liczyło się
   z koloru tekstu przez `color-mix`, więc karta była zbudowana z odcieni szarości i wyglądała
   mdło — zgłoszone przez użytkownika. Motyw opieka.farm wystawia paletę: `--ink` (tekst),
   `--ink-2`, `--line` (kreski), `--bg` (tło strony), `--accent` #14a085 (turkus marki),
   `--k-substancja` #0a6a55 (zieleń bazy wiedzy o substancjach), `--k-wydarzenie` #d0762c (amber).
   Fallbacki są przy każdym tokenie, żeby wtyczka nie zgasła w innym motywie.

   Podział znaczeń trzymamy konsekwentnie: TURKUS = nawigacja i akcje, ZIELEŃ = refundacja
   i pieniądze pacjenta, AMBER = zastrzeżenie („dotyczy tylko opakowań", kategoria Rp).
   ───────────────────────────────────────────────────────────────────────────── */

.blof-karta {
	--bl-ink: var(--ink, #0a2530);
	--bl-ink-2: var(--ink-2, #21333c);
	--bl-line: var(--line, #e3e9eb);
	--bl-panel: #fff;
	--bl-akcent: var(--accent, #14a085);
	--bl-ref: var(--k-substancja, #0a6a55);
	--bl-ref-soft: var(--k-substancja-soft, rgba(10, 106, 85, .12));
	--bl-uwaga: var(--k-wydarzenie, #d0762c);
	--bl-uwaga-soft: var(--k-wydarzenie-soft, rgba(208, 118, 44, .12));
	max-width: 68rem; margin: 0 auto;
}

/* ── nagłówek ─────────────────────────────────────────────────────────────── */
.blof-pasek {
	padding: 1.5rem 1.6rem 1.6rem;
	border: 1px solid var(--bl-line); border-radius: .8rem;
	background: var(--bl-panel);
}

.blof-pasek h1 { margin: 0 0 .3rem; line-height: 1.1; color: var(--bl-ink); }
.blof-pasek-opis { margin: 0; font-size: .95rem; color: var(--bl-ink-2); opacity: .75; }

.blof-fakty {
	display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.2rem;
	margin: 1.2rem 0 0; padding-top: 1.1rem; align-items: baseline;
	border-top: 1px solid var(--bl-line);
}
.blof-fakty dt { font-size: .82rem; letter-spacing: .01em; color: var(--bl-ink-2); opacity: .6; }
.blof-fakty dd { margin: 0; font-size: .95rem; color: var(--bl-ink); }
.blof-chip {
	display: inline-block; margin: 0 .35rem .25rem 0; padding: .12rem .6rem;
	border-radius: .4rem; font-size: .9rem; font-weight: 500;
	color: var(--bl-ref); background: var(--bl-ref-soft);
	border: 1px solid color-mix(in srgb, var(--bl-ref) 22%, transparent);
}
.blof-chip.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; }
.blof-fakty-obok { font-size: .9rem; color: var(--bl-ink-2); opacity: .7; }
@media (max-width: 40rem) {
	.blof-fakty { grid-template-columns: 1fr; gap: .15rem; }
	.blof-fakty dt { margin-top: .6rem; }
}

/* ── skróty do sekcji ─────────────────────────────────────────────────────── */
.blof-akcje { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 2.5rem; }
.blof-akcja {
	/* Jedna linia: podpisy pod nazwami wypadly 19.08.2026, wiec przycisk nie potrzebuje kolumny. */
	display: inline-flex; align-items: center; padding: .5rem 1rem;
	border: 1px solid var(--bl-line); border-radius: .55rem; background: var(--bl-panel);
	text-decoration: none; line-height: 1.25;
}
.blof-akcja:hover, .blof-akcja:focus-visible {
	border-color: color-mix(in srgb, var(--bl-akcent) 55%, transparent);
	background: color-mix(in srgb, var(--bl-akcent) 7%, var(--bl-panel));
}
.blof-akcja { font-weight: 600; font-size: .95rem; color: var(--bl-ref); }

/* ── tabela wariantów ─────────────────────────────────────────────────────── */
.blof-warianty { margin: 2.5rem 0; }
.blof-warianty h2, .blof-refundacje h2 {
	margin: 0 0 .9rem; padding-bottom: .35rem; color: var(--bl-ink);
	border-bottom: 2px solid color-mix(in srgb, var(--bl-akcent) 45%, transparent);
	display: inline-block;
}
.blof-tabela-przewijana {
	overflow-x: auto; border: 1px solid var(--bl-line); border-radius: .6rem;
	background: var(--bl-panel);
}
.blof-warianty table { width: 100%; border-collapse: collapse; font-size: .88rem; }
/* ⚠️ NAGŁÓWEK TABELI NIE JEST `sticky`: portal ma własny przyklejony pasek u góry, więc
   przyklejony nagłówek wjeżdżał pod niego i pokazywał się ucięty w połowie wysokości. */
.blof-warianty thead th {
	padding: .65rem .7rem; text-align: left; vertical-align: bottom;
	font-size: .76rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
	color: var(--bl-ink-2); background: color-mix(in srgb, var(--bl-akcent) 8%, var(--bl-panel));
	border-bottom: 1px solid color-mix(in srgb, var(--bl-akcent) 30%, transparent);
}
.blof-warianty th.liczba, .blof-warianty td.liczba { text-align: right; }
.blof-warianty tbody td {
	padding: .55rem .7rem; vertical-align: top; color: var(--bl-ink);
	border-bottom: 1px solid var(--bl-line);
}
.blof-warianty tbody tr:last-child td { border-bottom: 0; }
.blof-warianty td.liczba {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Wiersz refundowany: przy 36 wariantach Xarelto refundowane są cztery — bez wyróżnienia trzeba
   ich szukać wzrokiem po kreskach. Kwoty w tym wierszu dostają zieleń, bo to pieniądze pacjenta. */
/* Wiersz refundowany rozpoznaje się po KOLOROWYCH PLAKIETKACH kwot, nie po tle wiersza — tło
   wróciłoby do szarawej tabeli, z której właśnie wychodzimy. */
.blof-warianty tbody tr:hover td { background: color-mix(in srgb, var(--bl-akcent) 5%, transparent); }

.blof-warianty tr.wycofany td { opacity: .5; }

/* Przełącznik „Pokaż wycofane" — ukrywanie na stanie pola wyboru, bez JavaScriptu.
   ⚠️ Selektor sąsiadujący wymaga, żeby pole stało PRZED tabelą i miało ją za RODZEŃSTWO
   (patrz blof_render_warianty). Owinięcie pola w jakikolwiek element zepsuje filtr po cichu:
   wiersze przestaną się ukrywać, a nikt nie zobaczy błędu — zobaczy tabelę „bez filtra". */
/* ⚠️ POLE WYBORU WYJĘTE Z UKŁADU, KWADRACIK RYSUJE ETYKIETA. Dwie próby wcześniej były błędne
   i warto wiedzieć czemu: nagłówek sekcji jest `inline-block` (podkreślenie ma szerokość tekstu),
   więc pole wstawione po nim wchodziło w JEGO linię i sklejało się z podkreśleniem. `clear: both`
   tego nie naprawia — `clear` działa na floaty, a nagłówek floatem nie jest. Zmiana nagłówka na
   `block` rozciągnęłaby podkreślenie na całą szerokość, czyli zepsułaby element identyfikacji.
   Rozwiązanie: input zostaje w drzewie (bo na nim stoi selektor filtrowania) i jest osiągalny
   z klawiatury, ale nie zajmuje miejsca; widoczna jest etykieta `display: block`. */
.blof-warianty > .blof-przel-wycofane {
	position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.blof-warianty > .blof-przel-label {
	display: block; margin: 0 0 .9rem; font-size: .875rem; line-height: 1.3;
	color: var(--blof-tekst-2, #5b6b73); cursor: pointer; user-select: none;
}
.blof-warianty > .blof-przel-label::before {
	content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .5rem;
	vertical-align: -3px; border: 1px solid #9aa8ae; border-radius: 3px; background: #fff;
}
.blof-warianty > .blof-przel-wycofane:checked + .blof-przel-label { color: var(--blof-tekst, #16323f); }
.blof-warianty > .blof-przel-wycofane:checked + .blof-przel-label::before {
	border-color: var(--blof-akcent, #16323f); background-color: var(--blof-akcent, #16323f);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
/* Obrys skupienia MUSI być na kwadraciku etykiety — samo pole jest niewidoczne, więc bez tego
   osoba nawigująca klawiaturą nie wie, gdzie stoi. */
.blof-warianty > .blof-przel-wycofane:focus-visible + .blof-przel-label::before {
	outline: 2px solid var(--blof-akcent, #16323f); outline-offset: 2px;
}
.blof-warianty > .blof-przel-wycofane:not(:checked) ~ .blof-tabela-przewijana tr.wycofany { display: none; }
.blof-warianty .blof-zrodlo, .blof-refundacje .blof-zrodlo {
	margin: .8rem 0 0; font-size: .82rem; color: var(--bl-ink-2); opacity: .7;
}
/* Wiersz opisany aktualnie pokazaną charakterystyką. Sam kolor nie wystarcza — obramowanie
   po lewej niesie tę informację także przy monochromatycznym wydruku i przy daltonizmie. */
.blof-warianty tr.is-opisany > td:first-child { box-shadow: inset .2rem 0 0 var(--bl-akcent); }

/* ── przełącznik charakterystyk ───────────────────────────────────────────── */
.blof-przelacznik { margin: 2.5rem 0 1rem; }
.blof-przelacznik-opis { margin: 0 0 .6rem; font-size: .9rem; color: var(--bl-ink-2); opacity: .8; }
.blof-przelacznik ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.blof-zakladka {
	display: inline-flex; flex-direction: column; gap: .1rem;
	padding: .45rem .85rem; border: 1px solid var(--bl-line); border-radius: .5rem;
	background: var(--bl-panel); text-decoration: none; line-height: 1.25; color: var(--bl-ink);
}
.blof-zakladka:hover { border-color: color-mix(in srgb, var(--bl-akcent) 50%, transparent); }
.blof-zakladka.is-aktywna {
	border-color: var(--bl-akcent); border-width: 2px; font-weight: 700;
	background: color-mix(in srgb, var(--bl-akcent) 8%, var(--bl-panel));
}
.blof-zakladka-ile { font-size: .78rem; font-weight: 400; color: var(--bl-ink-2); opacity: .7; }
.blof-przelacznik-stan:empty { display: none; }
.blof-przelacznik-stan { margin: .5rem 0 0; font-size: .9rem; }

/* ── refundacje ───────────────────────────────────────────────────────────── */
.blof-refundacje { margin: 2.5rem 0; }
.blof-refundacje-wstep { margin: 0 0 1rem; font-size: .92rem; color: var(--bl-ink-2); opacity: .85; }
.blof-wskazanie {
	display: flex; gap: .9rem; align-items: flex-start;
	padding: 1rem 1.1rem; margin: 0 0 .75rem;
	border: 1px solid var(--bl-line); border-radius: .6rem; background: var(--bl-panel);
}

.blof-wsk-tresc { flex: 1; min-width: 0; }
.blof-wskazanie-tekst { margin: 0; line-height: 1.6; color: var(--bl-ink); }
ol.blof-wskazanie-tekst { margin: 0; padding-left: 1.35rem; }
ol.blof-wskazanie-tekst li + li { margin-top: .45rem; }

/* Zakres opakowań: AMBER, bo to zastrzeżenie do treści wyżej, a nie jej ciąg dalszy. */
.blof-wskazanie-zakres {
	margin: .85rem 0 0; padding: .5rem .7rem; border-radius: .4rem;
	background: var(--bl-uwaga-soft); font-size: .86rem; line-height: 1.9;
	color: var(--bl-ink);
}
.blof-zakres-opis { color: color-mix(in srgb, var(--bl-uwaga) 75%, var(--bl-ink)); }
.blof-opak {
	display: inline-block; margin: 0 .3rem 0 0; padding: .05rem .45rem;
	background: var(--bl-panel);
	border: 1px solid color-mix(in srgb, var(--bl-uwaga) 40%, transparent);
	border-radius: .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem; white-space: nowrap;
}
.blof-wskazanie-poza { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--bl-line); }
.blof-poza-naglowek {
	margin: 0 0 .4rem; font-size: .85rem; font-weight: 600;
	color: var(--bl-ink-2); opacity: .8;
}

/* ── treść charakterystyki ────────────────────────────────────────────────── */

/* Tabele w treści ChPL to zwykle schematy dawkowania — bez siatki wiersz przestaje odpowiadać
   kolumnie i schemat traci sens, a to najczęściej czytana rzecz na karcie. */
.blof-tabela-otoczka {
	overflow-x: auto; margin: 1.3rem 0;
	border: 1px solid var(--bl-line); border-radius: .5rem; background: var(--bl-panel);
}
.blof-tabela-otoczka table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.blof-tabela-otoczka th, .blof-tabela-otoczka td {
	padding: .55rem .75rem; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--bl-line);
	border-right: 1px solid color-mix(in srgb, var(--bl-line) 70%, transparent);
}
.blof-tabela-otoczka th {
	font-weight: 600; color: var(--bl-ink-2);
	background: var(--bl-panel);
	border-bottom: 2px solid color-mix(in srgb, var(--bl-akcent) 35%, transparent);
}
.blof-tabela-otoczka tr:last-child td { border-bottom: 0; }
.blof-tabela-otoczka th:last-child, .blof-tabela-otoczka td:last-child { border-right: 0; }
.blof-rycina {
	margin: 1.3rem 0; padding: .85rem 1rem; border-radius: .5rem;
	background: var(--bl-panel); border: 1px solid var(--bl-line);
}
.blof-rycina figcaption { font-size: .88rem; color: var(--bl-ink-2); opacity: .85; }

/* ── plakietki kwot ───────────────────────────────────────────────────────────
   Wzór z serwisów, do których farmaceuta jest przyzwyczajony (Remedium): kwota nie stoi nago
   w komórce, tylko w plakietce, a barwa mówi, CZYM jest ta liczba. Bez tego pięć kolumn kwot
   wygląda jednakowo i trzeba wracać wzrokiem do nagłówka.
   NIEBIESKI = pełna cena leku · ZIELONY = ile dopłaca pacjent · SZARY z zielenią = zero.  */

/* ── powrót do indeksu ───────────────────────────────────────────────────── */
.blof-powrot { margin: 0 0 .9rem; font-size: .9rem; }
.blof-powrot a {
	color: var(--bl-ref); text-decoration: none; font-weight: 500;
	border-bottom: 1px solid color-mix(in srgb, var(--bl-ref) 30%, transparent);
}
.blof-powrot a:hover { border-bottom-color: var(--bl-ref); }

/* ── zwijanie sekcji ─────────────────────────────────────────────────────────
   Obcięcie do czterech wierszy z wygaszeniem u dołu: sam `overflow: hidden` ucina zdanie
   w połowie wysokości liter i wygląda jak błąd składu, a nie jak „jest więcej".  */

/* ⚠️ PODKREŚLENIE ZDEJMUJEMY TYLKO W NAGŁÓWKACH. W ChPL śródtytuł jest podkreślony, bo dokument
   nie ma innych narzędzi hierarchii — tutaj hierarchię niesie już stopień nagłówka, a podkreślenie
   dawało dwa sygnały tego samego. Kursywa ZOSTAJE: rozróżnia wskazania („OZW, CAD/PAD") i jest
   treścią dokumentu, nie jego składem. W akapitach i tabelach podkreślenie zostaje bez zmian. */
.blof-tresc h3 u { text-decoration: none; }
.blof-tresc h3 em { font-style: italic; }

/* ── plakietki: NEGATYW, barwa niesie znaczenie ───────────────────────────────
   Wzór z serwisów, w których farmaceuta pracuje codziennie (Remedium, Rx): plakietka to ciemne,
   nasycone tło i biały tekst. Wersja pastelowa, którą karta miała do 19.08.2026, ginęła na białym
   tle strony — zgłoszone przez użytkownika: „plakietki najlepiej działają w negatywie".

   Barwy bierzemy z palety motywu (szesnaście tokenów `--k-*`), po jednej na znaczenie:
     100% niebieski (pełna cena) · 50% amber · 30% oliwka · ryczałt zieleń · bezpłatny petrol
     65+ błękit · do 18 lat malina · ciąża wrzos
     OTC zieleń · Rp grafit · Rpz/Rpw/Lz purpura
   Jedno znaczenie = jedna barwa na całej karcie i w wyszukiwarce.                             */
.blof-plakietka, .blof-kwota, .blof-kat {
	display: inline-block; padding: .12rem .5rem; border-radius: .35rem;
	font-size: .78rem; font-weight: 600; line-height: 1.45; white-space: nowrap;
	color: #fff; border: 0;
}
.blof-kwota {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem; font-variant-numeric: tabular-nums;
}
.blof-kat { padding: .25rem .7rem; font-size: .82rem; font-weight: 700; margin: 0 .3rem .7rem 0; }

/* kwoty według odpłatności */
.blof-kwota.k-pelna   { background: var(--k-choroba, #1d738b); }
.blof-kwota.k-p50     { background: var(--k-surowiec, #8a6a3b); }
.blof-kwota.k-p30     { background: var(--k-suplement, #6f9440); }
.blof-kwota.k-ryczalt { background: var(--k-szkolenie, #2f8f5b); }
.blof-kwota.k-zero    { background: var(--k-substancja, #0a6a55); }

/* uprawnienia: S = 65+, DZ = do 18 lat, C = w ciąży */
.blof-plakietka.u-s  { background: var(--k-material-edu, #3f8ecc); }
.blof-plakietka.u-dz { background: var(--k-kalkulator, #cc3266); }
.blof-plakietka.u-c  { background: var(--k-case-study, #b05680); }

/* Kategoria dostępności: GRANAT dla Rp, POMARAŃCZ dla OTC — konwencja przyjęta w projekcie
   (decyzja użytkownika 19.08.2026: „tak przyjęliśmy już"). Kategorie zastrzeżone zostają
   w purpurze, bo to trzeci przypadek, nie odmiana jednego z tych dwóch. */
.blof-plakietka.k-otc         { background: var(--k-wydarzenie, #d0762c); }
.blof-plakietka.k-rp          { background: var(--k-post, #0d4b5c); }
.blof-plakietka.k-zastrzezona { background: var(--k-pytanie, #9a4fb0); }
.blof-plakietka.k-inna        { background: var(--k-wytyczne, #5b7c99); }

/* wycofane z obrotu — jedyna plakietka ostrzegawcza, więc czerwień zostaje sama dla niej */
.blof-plakietka.stop { background: #b03a2e; }

/* litera bloku refundacji: ten sam kod barwny co plakietki uprawnień, bo mówi o tym samym */
.blof-wsk-litera {
	flex: none; width: 1.75rem; height: 1.75rem; border-radius: .35rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .82rem; line-height: 1; cursor: help;
	color: #fff; background: var(--k-post, #0d4b5c);
}
.blof-wsk-litera.u-r  { background: var(--k-substancja, #0a6a55); }
.blof-wsk-litera.u-s  { background: var(--k-material-edu, #3f8ecc); }
.blof-wsk-litera.u-dz { background: var(--k-kalkulator, #cc3266); }
.blof-wsk-litera.u-c  { background: var(--k-case-study, #b05680); }

/* ── dokument źródłowy: czytnik stron ─────────────────────────────────────────
   Kartka na CAŁĄ szerokość kontenera, bez ramki i bez szarego pola wokół — przy 990 px szerokości
   obrazu zmniejszenie go do wysokości okna robiło z pisma ChPL nieczytelną szarość. Strona jest
   więc wysoka i przewija się razem z artykułem, a przechodzi się nią strzałkami na krawędziach
   albo (na telefonie) przesunięciem palca.

   ⚠️ REGUŁY LICZONE OD TELEFONU: baza opisuje ekran wąski, `min-width` dokłada to, co ma sens
   dopiero przy kursorze. Strzałki krawędziowe pokazują się na najechanie — na urządzeniu bez
   kursora są niewidoczne, bo tam kartkę przewraca palec i przycisk nad tekstem tylko zabierałby
   miejsce.                                                                                    */
.blof-pdf { margin: 2.5rem 0 2rem; }
.blof-pdf-opis { margin: 0 0 .9rem; font-size: .92rem; color: var(--bl-ink-2); opacity: .85; }
.blof-pdf-zrodlo { color: var(--bl-ref); }

.blof-czytnik { position: relative; }
.blof-czytnik-plotno {
	position: relative; min-height: 8rem;
	touch-action: pan-y;   /* pion zostaje dla strony, poziom dla przewracania kartki */
}
.blof-czytnik-strona {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--bl-line); border-radius: .3rem; background: #fff;
	user-select: none; -webkit-user-drag: none;
}
.blof-czytnik.jest-wczytywanie .blof-czytnik-strona { opacity: .45; }
.blof-czytnik-stan {
	position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); margin: 0;
	font-size: .88rem; color: var(--bl-ink-2); text-align: center; max-width: 90%;
	background: color-mix(in srgb, var(--bl-panel) 90%, transparent);
	padding: .35rem .7rem; border-radius: .3rem; border: 1px solid var(--bl-line);
}
.blof-czytnik-stan:empty { display: none; }

/* Przyciski przewracania: przyklejone do krawędzi kartki, w połowie jej wysokości widocznej części.
   `position: sticky` w pionie trzyma je na ekranie także wtedy, gdy strona dokumentu jest wyższa
   niż okno — inaczej po zjechaniu w dół kartki trzeba by wracać na górę, żeby ją przewrócić. */
.blof-czytnik-wstecz, .blof-czytnik-dalej {
	position: absolute; top: 0; bottom: 0; width: 15%; min-width: 3rem; max-width: 5rem;
	display: flex; align-items: flex-start; justify-content: center; padding-top: 40vh;
	font: inherit; font-size: 2rem; line-height: 1; cursor: pointer;
	color: #fff; border: 0; background: transparent; opacity: 0;
	transition: opacity .12s linear;
}
.blof-czytnik-wstecz { left: 0; }
.blof-czytnik-dalej { right: 0; }
.blof-czytnik-wstecz > span, .blof-czytnik-dalej > span {
	position: sticky; top: 45vh; display: flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border-radius: 50%;
	background: color-mix(in srgb, var(--bl-ink) 72%, transparent);
	box-shadow: 0 .1rem .5rem rgba(10, 37, 48, .25);
}
.blof-czytnik-wstecz[disabled], .blof-czytnik-dalej[disabled] { display: none; }

.blof-czytnik-pasek {
	display: flex; align-items: center; justify-content: space-between; gap: .6rem;
	padding: .6rem 0 0;
}
.blof-czytnik-licznik { font-size: .9rem; color: var(--bl-ink-2); white-space: nowrap; }
.blof-czytnik-numer {
	width: 3.6rem; min-height: 2.25rem; padding: .2rem .4rem; text-align: right;
	font: inherit; font-size: 1rem;   /* 16 px, inaczej iOS przybliża stronę przy dotknięciu pola */
	border: 1px solid var(--bl-line); border-radius: .3rem; background: var(--bl-panel);
	color: var(--bl-ink); font-variant-numeric: tabular-nums;
}
.blof-czytnik-podpowiedz { font-size: .8rem; color: var(--bl-ink-2); opacity: .6; }
.blof-pdf-pobierz { margin: .7rem 0 0; font-size: .88rem; }
.blof-pdf-pobierz a { color: var(--bl-ref); }

@media (hover: hover) {
	.blof-czytnik:hover .blof-czytnik-wstecz,
	.blof-czytnik:hover .blof-czytnik-dalej,
	.blof-czytnik-wstecz:focus-visible, .blof-czytnik-dalej:focus-visible { opacity: 1; }
}
/* Bez kursora strzałki są zbędne (kartkę przewraca palec), a niewidoczne przyciski nad tekstem
   przechwytywałyby dotknięcia — dlatego tam ich nie ma wcale. */
@media (hover: none) {
	.blof-czytnik-wstecz, .blof-czytnik-dalej { display: none; }
}

/* ── treść charakterystyki: akordeon ─────────────────────────────────────────
   Sekcje są `<details>` i domyślnie zwinięte (decyzja użytkownika 19.08.2026). Tekst i nagłówki
   mniejsze niż w artykule: to dokument źródłowy, czyta się go punktowo i przy szesnastu sekcjach
   pełny rozmiar pisma zamieniał kartę w ścianę.                                              */
.blof-tresc { margin-top: 2rem; }
.blof-sekcja {
	border-top: 1px solid var(--bl-line); padding: 0;
}
.blof-sekcja:last-of-type { border-bottom: 1px solid var(--bl-line); }
.blof-sekcja > summary {
	display: flex; align-items: center; gap: .5rem; cursor: pointer;
	padding: .7rem 0; list-style: none;
}
.blof-sekcja > summary::-webkit-details-marker { display: none; }
/* Trójkącik rysujemy sami, żeby stał w stałym miejscu niezależnie od silnika przeglądarki. */
.blof-sekcja > summary::before {
	content: ""; flex: none; width: .5rem; height: .5rem; margin-right: .1rem;
	border-right: 2px solid var(--bl-ref); border-bottom: 2px solid var(--bl-ref);
	transform: rotate(-45deg); transition: transform .12s linear;
}
.blof-sekcja[open] > summary::before { transform: rotate(45deg); }
.blof-sekcja > summary h2 {
	margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--bl-ink);
	border: 0; padding: 0; display: inline;
}
.blof-sekcja > summary:hover h2 { color: var(--bl-ref); }
.blof-sekcja-tresc { padding: .2rem 0 1.1rem 1.1rem; font-size: .92rem; }
.blof-sekcja-tresc p { line-height: 1.6; margin: 0 0 .7rem; }
.blof-sekcja-tresc h3 { margin: 1.1rem 0 .35rem; font-size: .95rem; color: var(--bl-ink); }
.blof-sekcja-tresc ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.blof-sekcja-tresc li { line-height: 1.55; margin-bottom: .3rem; }
.blof-sekcja-tresc .blof-tabela-otoczka table { font-size: .86rem; }
@media (min-width: 48rem) {
	.blof-sekcja-tresc { padding-left: 1.4rem; }
}

/* Akcja wyróżniona: prowadzi do dokumentu urzędowego, więc nie ma być jednym z wielu skrótów.
   Malina z palety motywu (`--k-kalkulator`) jest tu jedynym takim użyciem na karcie. */
.blof-akcja-mocna {
	background: var(--k-kalkulator, #cc3266); border-color: var(--k-kalkulator, #cc3266);
}

.blof-akcja-mocna:hover, .blof-akcja-mocna:focus-visible {
	background: color-mix(in srgb, var(--k-kalkulator, #cc3266) 85%, #000);
	border-color: color-mix(in srgb, var(--k-kalkulator, #cc3266) 85%, #000);
}

/* Wyrozniona akcja: bialy tekst na malinie. */
.blof-akcja-mocna { color: #fff; }