/* controls.css – wspólne kontrolki portalu: przyciski (U3), filtry (U2), przyciski ikonowe,
   przełączniki i link „Powrót" (U4), pola formularzy i wyszukiwarka (U5), nagłówek
   podstrony i etykieta nad tytułem (U6).
   Jedno źródło zamiast kopii w <style> podstron – plan i decyzje: docs/kontrolki-plan.md.
   Moduły UŻYWAJĄ tych klas, nie kopiują ich do siebie; wolno im tylko UŁOŻYĆ kontrolkę
   w swoim kontekście (szerokość, odstęp), nie przedefiniować jej wyglądu.
   Wczytywany po tokens.css i arkuszach chrome, przed arkuszami modułów.
   Warstwa Aero (aero.css) dokłada szkło: tafla na .btn--outline, połysk na .btn--primary. */

/* =====================================================================
   PRZYCISKI (U3, 2026-09-18) – trzy rozmiary × pięć wariantów.
   Dotąd: kopie .btn w fundacja/kontakt/404/zrodla i dziewięć klas jednorazowych –
   trzynaście wysokości od 31 do 57 px, pigułka obok prostokątów 8 px i 0 px.
   Pigułka jest bazą (wcześniej robiła ją dopiero warstwa Aero, więc strony bez niej
   miały kwadratowe przyciski). Najechanie zmienia barwę, bez unoszenia – jak karty po R3/12.
   ===================================================================== */
.btn {
  --btn-h: 44px; --btn-px: 1.35rem; --btn-fs: .84rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  font: 700 var(--btn-fs)/1.1 var(--f-head); letter-spacing: .01em; white-space: nowrap;
  text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-full);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn--sm { --btn-h: 36px; --btn-px: 1rem;    --btn-fs: .78rem; }
.btn--lg { --btn-h: 52px; --btn-px: 1.75rem; --btn-fs: .92rem; }
.btn--block { display: flex; width: 100%; }
.btn--align-start { align-self: flex-start; }   /* w kolumnie flex: nie rozciągaj na szerokość */

/* Kolor tekstu primary z !important: konteksty typu `.drawer a` czy `.nav a` nadpisywały
   go barwą linku. --on-accent, nie #fff – w ciemnym motywie akcent to jasny błękit
   #69A9E6 i biel schodziła do 2,49:1 (audyt pikselowy 2026-09-15). */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--outline { background: var(--card-bg); border-color: var(--a-teal-35); color: var(--accent-ink); }
.btn--outline:hover { background: var(--a-teal-06); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink-60); }
.btn--ghost:hover { background: var(--a-teal-06); color: var(--ink); }
/* --paper jest odwrotnością --ink w obu motywach – para trzyma ~15:1 po obu stronach. */
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--ink-60); }
/* Odwrócony – na pasie w barwie akcentu (przyklejony pasek na telefonie). Tło --on-accent,
   tekst --accent: 6,75:1 w jasnym, 7,04:1 w ciemnym (pomiar z 2026-09-15). */
.btn--inverse { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent) !important; }
.btn--inverse:hover { background: color-mix(in srgb, var(--on-accent) 88%, var(--accent)); }

.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; }

/* =====================================================================
   FILTRY (U2, 2026-09-18) – wzorzec z katalogu artykułów (decyzja D5):
   etykiety bez ramek, pod aktywną przejeżdża szklany bąbelek. Krój Inter (D10),
   na telefonie jedna oś = jeden przewijany wiersz (D6). Logika: assets/js/filters.js.
   ===================================================================== */

/* Podpis osi filtra, pola, tabeli – mono, wersaliki. */
.label {
  font: 600 .66rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-60);
}

/* Szklany bąbelek zaznaczenia. Jeden na grupę, absolutny względem grupy; wymiar i położenie
   wpisuje filters.js z offset* aktywnego elementu, więc jedzie także między wierszami.
   Tokeny szkła (--aero-*) są w tokens.css, więc bąbelek działa też bez data-surface. */
.glass-pill {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none;
  border: 1px solid var(--aero-rim); border-radius: var(--r-full);
  background: var(--aero-face); box-shadow: var(--aero-btn-inset), var(--aero-btn-drop);
  opacity: 0; transition: transform var(--t-base), width var(--t-base), height var(--t-base);
}
.glass-pill.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glass-pill { transition: none; } }

/* Pasek: podpis osi | etykiety | licznik. Kilka osi = kilka .filters__row w jednej siatce,
   więc podpisy stoją w jednej kolumnie. Bez panelu pod spodem – jak w artykułach. */
/* align-items: start + line-height podpisu = wysokość etykiety: podpis i licznik stoją przy
   PIERWSZYM wierszu etykiet, także gdy oś zawija się w kilka wierszy. */
.filters { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .5rem 1rem; }
.filters__row { display: contents; }
.filters__row[hidden] { display: none; }   /* display:contents bije [hidden] z arkusza przeglądarki */
.filters__label { grid-column: 1; line-height: 32px; }
.filters__chips { grid-column: 2; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; min-width: 0; }
/* Stała szerokość licznika: „18 artykułów" → „3 artykuły" nie może zmieniać szerokości kolumny
   z etykietami – inaczej zawinięcie etykiet przeskakiwałoby po każdym kliknięciu. */
.filters__count { grid-column: 3; grid-row: 1; min-width: 8em; margin: 0; text-align: right; font: 400 .8rem/32px var(--f-body); color: var(--ink-60); white-space: nowrap; }
.filters__count strong { color: var(--ink); font-weight: 700; }

/* Chip = etykieta bez ramki. Zaznaczenie niesie bąbelek i kolor tekstu, NIE grubość:
   pogrubienie poszerzało etykietę i przesuwało wszystkie na prawo od niej. */
.chip {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  min-height: 32px; padding: 0 .9rem;
  font: 600 .8rem/1 var(--f-head); color: var(--ink-60); white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--r-full); cursor: pointer;
  transition: color var(--t-fast);
}
.chip[hidden] { display: none; }   /* inline-flex bije [hidden] z arkusza przeglądarki */
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--accent-ink); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Kropka koloru (kalendarz): barwę podaje moduł przez --dot. */
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, currentColor); flex: none; }
/* Chip samodzielny (podpowiedzi wyszukiwania) – szkło na stałe, bez stanu zaznaczenia. */
.chip--tag {
  color: var(--ink); background: var(--aero-face);
  border: 1px solid var(--aero-rim); box-shadow: var(--aero-btn-inset), var(--aero-btn-drop);
}
.chip--tag:hover { color: var(--accent-ink); }
/* Zanim JS zmierzy bąbelek (i gdy nie wstanie) szkło niesie sam aktywny chip.
   Bąbelek musi stać w DOM PRZED etykietami – selektor ~. */
.glass-pill:not(.is-ready) ~ .chip[aria-pressed="true"],
.glass-pill:not(.is-ready) ~ .seg__btn[aria-selected="true"],
.glass-pill:not(.is-ready) ~ .seg__btn[aria-pressed="true"] {
  background: var(--aero-face); box-shadow: inset 0 0 0 1px var(--aero-rim), var(--aero-btn-inset);
}

/* Telefon (D6): oś to jeden przewijany wiersz – zawinięte w 3 rzędy zajmowały 145–308 px
   pierwszego ekranu. Przewija się WEWNĄTRZ kontenera (bez ujemnych marginesów – wcięcia
   podstron są różne i wiersz wyjeżdżałby poza ekran); maska wygasza prawy brzeg.
   Padding w pionie to miejsce na cień bąbelka, które overflow inaczej by obciął –
   ujemny margines oddaje je z powrotem, więc wysokość wiersza się nie zmienia. */
@media (max-width: 600px) {
  .filters { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .filters__label, .filters__count { line-height: 1.2; }
  .filters__label { grid-column: 1; }
  .filters__count { grid-column: 2; }
  .filters__chips {
    grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 6px 2px 12px; margin-block: -6px -12px; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .filters__chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; min-height: 36px; }
}

/* =====================================================================
   PRZYCISK IKONOWY, PRZEŁĄCZNIK, „POWRÓT" (U4, 2026-09-18)
   ===================================================================== */

/* Przycisk ikonowy – koło. Dotąd pięć klas w dwóch kształtach: .icon-btn (portal),
   .theme-btn (paski podstron), .month-nav-btn (kalendarz, barwy w rgba() na sztywno
   i znaki ◀ ▶), .expert-card__mail, .footer__social. Warstwa Aero kładzie na nim taflę. */
.icon-btn {
  --ib: 36px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--ib); height: var(--ib); padding: 0;
  font: inherit; line-height: 1; color: var(--ink-60); background: var(--card-bg);
  border: 1px solid var(--rule); border-radius: var(--r-full); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.icon-btn[hidden] { display: none; }   /* inline-grid bije [hidden] z arkusza przeglądarki */
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--sm { --ib: 32px; }
.icon-btn--sm svg { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Stan „włączony" (tryb skupienia, motyw). Klasa podwojona celowo: reguła tafli Aero
   `[data-surface] .icon-btn` ma tę samą specyficzność i stoi później – bez tego włączony
   przycisk wyglądałby jak wyłączony, różniąc się tylko barwą ikony. */
.icon-btn.icon-btn[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent);
  background: linear-gradient(0deg, var(--a-teal-12), var(--a-teal-12)), var(--card-bg);
}
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Przełącznik widoku / trybu – ten sam szklany bąbelek co filtr (D5), w lekko wklęsłej
   rynnie, bo opcje się wykluczają i któraś jest zawsze wybrana. Dotąd trzy wersje:
   zaokrąglony prostokąt z wypełnieniem (kalendarz), zakładki z podkreśleniem i maszynowymi
   wersalikami (kontakt), pigułka z wypełnieniem (Wiedza – U7).
   role="tab" + aria-selected, gdy przełącznik podmienia panel; aria-pressed, gdy tylko widok. */
.seg {
  position: relative; display: inline-flex; gap: 2px; padding: 3px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--rule); border-radius: var(--r-full);
}
.seg__btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 32px; padding: 0 1rem; border: 0; border-radius: var(--r-full);
  font: 600 .8rem/1 var(--f-head); color: var(--ink-60); white-space: nowrap;
  background: transparent; cursor: pointer; transition: color var(--t-fast);
}
.seg__btn svg { width: 16px; height: 16px; flex: none; }
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"] { color: var(--accent-ink); }
.seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg--block { display: flex; }
.seg--block .seg__btn { flex: 1; }

/* Link powrotu – zawsze „Powrót" (D7); dokąd prowadzi, mówi aria-label („Powrót do
   artykułów") – nazwa zaczyna się od widocznego słowa, więc label-in-name przechodzi.
   Dotąd trzy klasy (.topbar-back, .nav__back, zwykły .nav__link) i pięć brzmień. */
.back-link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .95rem;
  font: 600 .76rem/1 var(--f-head); color: var(--accent); text-decoration: none; white-space: nowrap;
  background: var(--a-teal-08); border: 1px solid var(--a-teal-18); border-radius: var(--r-full);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.back-link svg { width: 14px; height: 14px; flex: none; }
.back-link:hover { background: var(--a-teal-12); border-color: var(--accent); }
/* Motyw ciemny: --accent (#69A9E6) na tafli paska dawał 4,40–4,48:1 – na granicy już przy kolażu,
   pod gradientem tła (2026-10-09) poniżej progu. --accent-ink jest w ciemnym jaśniejszy (#9AC6F0). */
[data-theme="dark"] .back-link { color: var(--accent-ink); }
.back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Telefon: sama strzałka w kole – jak dotąd (fcfbab0a). Napis ukryty tylko wizualnie. */
@media (max-width: 600px) {
  .back-link { width: 36px; padding: 0; justify-content: center; }
  .back-link__text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* =====================================================================
   POLA FORMULARZY I WYSZUKIWARKA (U5, 2026-09-18)
   Dotąd dwa formularze z tym samym wzorem pod dwiema nazwami (.partner-form__* w fundacji,
   .form-* w kontakcie) – oba z promieniem 0 i wysokościami 40 / 46 px – plus pole newslettera
   z 8 px i 49 px. Wzór zostaje ten, o który prosił Jan: pole jak komórka formularza
   drukowanego – wypełnienie tonem papieru, obrys, fokus = krawędź w akcencie + dolna linia,
   bez poświaty. Zmienia się tylko promień (8 px) i jedna wysokość (44 px, jak przycisk).
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }          /* pole na całą szerokość siatki formularza */
.field__req { color: var(--accent); margin-left: .15rem; }
/* „(opcjonalnie)" w podpisie: ta sama wielkość co podpis, tylko lżejsze. Dotąd 12,5 px
   przy podpisie 10,9 px – dopisek był większy od tego, co dopowiadał. */
.field__opt { font-weight: 400; }
.field__input {
  width: 100%; min-height: 44px; padding: .6rem .8rem;
  font: 400 .98rem/1.4 var(--f-body); color: var(--ink);
  background-color: var(--c-bg-mid); border: 1px solid var(--rule); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
textarea.field__input { min-height: 120px; resize: vertical; line-height: 1.5; }
select.field__input {
  appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-60) 50%), linear-gradient(135deg, var(--ink-60) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.field__input::placeholder { color: var(--ink-60); opacity: .55; }
.field__input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: inset 0 -1px 0 0 var(--accent); background-color: var(--c-bg);
}
.field__hint { margin: 0; font: 400 .78rem/1.45 var(--f-body); color: var(--ink-60); }
/* Zgoda (checkbox + tekst). */
.field__check {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  font: 400 .86rem/1.45 var(--f-body); color: var(--ink-60);
}
.field__check input { flex: none; margin-top: .2rem; accent-color: var(--accent); }
.field__check a { color: var(--accent-ink); font-weight: 600; }

/* Wyszukiwarka – kontrolka akcji, więc pigułka jak przyciski i chipy; fokus z poświatą
   zostaje (jak dotąd w obu wyszukiwarkach – portalu i Wiedzy). */
.searchbox { position: relative; }
.searchbox__icon {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  display: grid; color: var(--accent); pointer-events: none;
}
.searchbox__icon svg { width: 18px; height: 18px; }
.searchbox__input {
  width: 100%; min-height: 52px; padding: 0 1.3rem 0 3rem;
  font: 400 1rem/1.2 var(--f-body); color: var(--ink);
  background-color: var(--card-bg); border: 1px solid var(--rule); border-radius: var(--r-full);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.searchbox__input::placeholder { color: var(--ink-60); opacity: .7; }
.searchbox__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--a-teal-12); }
.searchbox--lg .searchbox__input { min-height: 64px; padding-left: 3.4rem; font-size: 1.15rem; font-weight: 500; }
.searchbox--lg .searchbox__icon { left: 1.35rem; }

/* =====================================================================
   NAGŁÓWEK PODSTRONY I ETYKIETA NAD TYTUŁEM (U6, 2026-09-18)
   ===================================================================== */

/* Etykieta nad tytułem – „dział gazety": Inter, zdanie, akcent (kanon strony głównej: bez
   wersalikowego mono z szerokim trackingiem, który czytał się jak generyczny „eyebrow").
   Dotąd zdefiniowana osobno w portalu, fundacji, źródłach i kontakcie, a do tego jako
   .edu-badge, .edu-path, .kal-badge i .legal__kicker – mono, wersaliki, kreska. */
/* Wartości co do joty z portal.html (kanon) – bez line-height, żeby strona główna nie drgnęła. */
.eyebrow {
  display: block; margin: 0 0 .4rem;
  font-family: var(--f-head); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  /* --accent-ink, nie --accent (2026-10-09): etykieta leży też wprost na tle strony (nagłówek bez
     pasma – polityka, źródła), a pod gradientem tła --accent schodził do 4,22:1. Jedna barwa
     wszędzie, bo u6 pilnuje, żeby etykieta wyglądała tak samo na każdej podstronie. */
  color: var(--accent-ink);
}

/* Nagłówek podstrony – zawsze do lewej (D8). Dotąd jedenaście wariantów: H1 od 25,6 do 57,6 px,
   trzy wagi, pasma wyśrodkowane obok nagłówków do lewej, katalog artykułów bez widocznego H1.
   Kontener jak treść pod nim (token szerokości + --page-gutter), więc krawędzie się zgadzają.
   --band: pasmo na całą szerokość, które warstwa Aero zamienia w taflę (D11 – katalogi);
   bez --band nagłówek leży wprost na tle strony (źródła, polityka). */
/* Odsunięcie od paska dokłada topbar.css (`.topbar` jest fixed); pasek .nav jest sticky – w przepływie. */
.page-header { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.page-header--band { background: var(--card-bg); border-bottom: 1px solid var(--rule); }
.page-header__inner {
  max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--page-gutter);
  display: grid; gap: .6rem; justify-items: start; text-align: left;
}
.page-header--mid .page-header__inner { max-width: var(--w-mid); }
.page-header--text .page-header__inner { max-width: var(--w-text); }
.page-header .eyebrow { margin: 0; }
.page-header__title {
  margin: 0; font: 600 clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem)/1.1 var(--f-head);
  letter-spacing: -.015em; color: var(--ink); text-wrap: balance;
}
.page-header__title em { font-style: normal; color: var(--accent); }
/* Tytuł ścieżki edukacyjnej to powierzchnia lektury (D1) – krój z --f-read, jak tytuł artykułu. */
.page-header__title--read { font-family: var(--f-read); font-weight: 700; letter-spacing: -.01em; }
.page-header__lead { margin: 0; max-width: 62ch; font: 400 1.02rem/1.6 var(--f-body); color: var(--ink-60); }
.page-header__lead:empty { display: none; }
.page-header__lead a { color: var(--accent-ink); }
.page-header__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .3rem; font: 400 .8rem/1.4 var(--f-body); color: var(--ink-60); }
.page-header__meta strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* =====================================================================
   CEL DOTYKOWY 44 PX (2026-10-08)
   ===================================================================== */

/* Tylko ekrany dotykowe (`pointer: coarse`); mysz zostaje przy rozmiarach U2–U4.
   Audyt na 390 px przed zmianą: chip 36, .seg__btn 32, .back-link 36, .btn--sm 36,
   .icon-btn 36 / 32 – wszystko ≥ 24 (AA, 2.5.8), nic nie dochodziło do --tap (2.5.5).

   Dwie drogi, bo kontrolki stoją w dwóch różnych układach:
   1. .chip i .seg__btn ROSNĄ naprawdę. Etykiety filtra zawijają się w wiersze z odstępem
      .2rem – niewidoczny obszar trafienia wchodziłby na wiersz wyżej i zabierał dotyk
      sąsiedniej etykiecie. Bąbelek (.glass-pill) mierzy aktywną etykietę w filters.js,
      więc rośnie razem z nią.
   2. .icon-btn, .back-link i .btn--sm stoją pojedynczo – dostają niewidoczny ::after
      poszerzony do --tap. Wygląd i układ bez zmian co do piksela (u4 dalej mierzy 36/32).
      `min(0px, …)` poszerza tylko wymiar mniejszy od --tap; szeroki przycisk nie traci
      szerokości. Procent w inset-block liczy się od wysokości elementu, w inline od szerokości. */
@media (pointer: coarse) {
  .chip, .seg__btn { min-height: var(--tap); }

  .icon-btn, .back-link, .btn--sm { position: relative; }
  .icon-btn::after, .back-link::after, .btn--sm::after {
    content: "";
    position: absolute;
    inset-block: min(0px, calc(50% - var(--tap) / 2));
    inset-inline: min(0px, calc(50% - var(--tap) / 2));
  }
}
/* Podpis i licznik stoją przy PIERWSZYM wierszu etykiet przez line-height = wysokość etykiety
   (blok „Pasek" wyżej). Na telefonie (≤ 600 px) siedzą w osobnym wierszu – tam nie dotyczy. */
@media (pointer: coarse) and (min-width: 601px) {
  .filters__label, .filters__count { line-height: var(--tap); }
}