/*
 * Dział /powietrze (pomiary GIOŚ z nocy sylwestrowych), motyw tf (ciemny). Arkusz ładuje się tylko na stronach działu
 * (scripts/air/_assets.phtml). Strony działu buduje się z elementów szablonu Kallyas — tak jak resztę sklepu; tutaj
 * zostaje tylko to, czego szablon nie daje: kolory i kontenery wykresów, legendy, drobne dopasowania.
 *
 * ===== WZORZEC DZIAŁU: składnik → element Kallyas / tf → jak wstawić =====
 * Widok: header.phtml, air/_assets.phtml (ustawia $air = Plugin::Air()), potem <div class="air air-kl"> … </div>, footer.phtml.
 * Klasa .air-kl oznacza stronę przebudowaną (bez niej działają stare reguły typografii z końca tego pliku).
 * Metody AirPlugin: argument „…Html” to gotowy HTML (dane przez $air->esc()), pozostałe to czysty tekst.
 *
 *  1. Nagłówek strony + okruszki — okruszki daje header.phtml (addPlace() w akcji). Tytuł: .hg_section.bg-white >
 *     .kl-title-block > h1.tbk__title.kl-font-alt.fs-l.fw-bold.color-green, po prawej zielony przycisk — jak strona
 *     „Fajerwerki a środowisko”:
 *       <?php $airHead = [ 'title' => 'Stacje', 'kicker' => 'tekst nad tytułem', 'lead' => 'wprowadzenie (HTML)',
 *                          'button' => [ 'Tekst', $adres ] ]; include( VIEW_DIR . 'scripts/air/_head.phtml' ); ?>
 *     (kicker, lead, button opcjonalne; _head.phtml sam dołącza podmenu)
 *  2. Podmenu działu — zakładki szablonu .tabbable > ul.nav.nav-tabs > li.nav-item > a.nav-link(.active) > span.wgt-title,
 *     jak OPIS / EFEKTY na karcie produktu; air/_nav.phtml (dołączany przez _head.phtml), na telefonie przewijane w poziomie.
 *  3. Sekcje — <section id="…" class="hg_section bg-lightgray pt-60 pb-60"><div class="container"> … </div></section>,
 *     na przemian .bg-white (#272727) i .bg-lightgray (#202020); pierwsza po nagłówku: .bg-white.pt-20.
 *  4. Tytuł sekcji — $air->title( 'Tytuł', 'akapit wprowadzający (HTML)' ) → .kl-title-block z zielonym h2;
 *     podsekcja: $air->title( 'Tytuł', '', 'h3' ) → biały h3.kl-font-alt.fs-m. Zwykły tekst: <p>, dopisek: <p class="air-note">.
 *  5. Kafle z liczbami — statistic-box Kallyas (styl 2, jak strona Opinie):
 *       $air->stats( [ [ '30 → 44 <small>µg/m³</small>', 'opis zdaniem', 'fas fa-chart-line' ], … ] )
 *     2–4 kafle w rzędzie (więcej = drugie wywołanie), ikony Font Awesome 5.
 *  6. „Rachunek” (liczby zawężające się do wyniku) — te same kafle, wynik wyróżniony: $air->stats( [ … ], 2 ) (indeks kafla).
 *  7. Bloki tekstu w kolumnach — siatka Bootstrapa + kl-iconbox:
 *       <div class="row"><div class="col-sm-12 col-md-6"><?php echo $air->iconBox( 'fas fa-map-marker-alt', 'Tytuł', 'tekst (HTML)' ); ?></div> … </div>
 *     Zestaw 3 / 6 krótkich faktów na całą szerokość — zielona siatka grid-ibx jak na stronie „Fajerwerki a środowisko”:
 *       <div class="container-fluid no-pad-cols"><div class="row"><div class="col-md-12"><?php echo $air->grid( [ [ 'Tytuł', 'tekst' ], … ] ); ?></div></div></div>
 *     (poza .container, sekcja z .pb-0)
 *  8. Karta wykresu — tytuł .wgt-title (czerwone podkreślenie jak FILM / ATRYBUTY na karcie produktu), legenda z lib.js
 *     (SW.setLegend() wstawia .legend-box przed wykresem), kontener ECharts .chart, pod nim akordeon Kallyas z tabelą:
 *       $air->chartCard( 'chart-noc', '<strong>PM10</strong>, mediana, µg/m³', 'opis dla czytników',
 *                        [ 'note' => 'dopisek', 'small' => TRUE, 'table' => 'table-noc' ] )
 *     'table' = id pustego <div>, do którego JS wstawia SW.tableHtml(); gotowa tabela z PHP: 'tableHtml' => $air->table( … ).
 *  9. Siatka małych wykresów — <div class="multi" id="…"></div>, kafle .mini tworzy JS (SW.mini() / home.js); style niżej.
 * 10. Tabele danych — .table-responsive > table.table.table-striped (+ klasy działu .tscroll, .data): $air->table( $nagłówki,
 *     $wiersze, 'sortable' ) — „>” przed nagłówkiem = kolumna liczbowa; sortowanie w lib.js (klasa sortable); tabela
 *     z tekstem: klasa 'air-wrap'. JS: SW.tableHtml(). Przewijanie w poziomie w .tscroll, pierwsza kolumna przyklejona.
 *     Długa tabela do rozwinięcia: $air->accordion( [ [ 'Tytuł', $air->table( … ) ] ], 'id' ).
 * 11. Filtry i przełączniki — przyciski szablonu .btn.btn-sm.btn-lined z klasą .seg (tego oczekuje JS: .seg, data-value,
 *     aktywny .is-on + aria-pressed):
 *       $air->segs( 'Pył', [ 'PM10' => 'PM10', 'PM2.5' => 'PM2,5' ], 'PM10' )            // gotowe przyciski
 *       $air->segs( 'Zanieczyszczenie', [], NULL, 'value', 'seg-pollutant' )             // pusty kontener dla SW.fillSegs()
 *     Czwarty argument to nazwa atrybutu data-* (strona główna: 'pm').
 * 12. Pole wyszukiwania i listy wyboru — .row.air-picker, w kolumnach <label> + .input-group > input.form-control +
 *     .input-group-append > .input-group-text (lupa), <select class="form-control"> — wzór: sekcja #stacja w air/index.phtml
 *     (identyfikatory pól zostają takie, jakich oczekuje JS).
 * 13. Listy linków (noce, województwa, zanieczyszczenia) — małe przyciski .btn-lined:
 *       $air->linkList( [ [ '2016/17', $air->url( 'noc', 2016 ), 'dopisek' ], … ], $adresBieżącej )
 * 14. Przyciski „więcej” — zielony .btn-element.btn.btn-md.btn-green: $air->more( [ [ 'Wszystkie noce', $air->url( 'noce' ) ] ] );
 *     pojedynczy: $air->button( 'Tekst', $adres, $naCałąSzerokość, ' id="…" hidden' ).
 * 15. Rozwijane treści (metoda, pytania, długie tabele) — akordeon hg_accordion_element.style3 > .th-accordion (collapse
 *     Bootstrapa, jak „Pytania” w Polecaj i zyskuj): $air->accordion( [ [ 'Tytuł', '<p>treść</p>' ], … ], 'unikalne-id', $otwarte )
 *     ($otwarte: FALSE, TRUE = wszystkie, liczba = indeks). Nie używać <details>.
 * 16. „Kto to przygotował” — .callout-banner.air-who w air/_method.phtml (opis metody + ten blok; $airMethodOpen = TRUE
 *     rozwija pozycje). Wymaga $t — liczb AirPlugin::home() po escape().
 * 17. Wezwanie do działania — czerwony action_box.style3 jak na stronie głównej sklepu:
 *       $air->cta( 'Sprawdź swoją stację', 'zdanie zachęty', 'Lista i mapa stacji', $air->url( 'stacje' ) )
 * 18. Stopka źródła danych — air/_foot.phtml (ostatni element w .air).
 * Skrypty szablonu, na których to stoi (kl-plugins.js, ładowany na każdej stronie tf): Bootstrap 4.1 collapse (akordeon)
 * i tab. Liczników animowanych, karuzel i zakładek z treścią dział nie używa.
 */
/* kolory wykresów (lib.js czyta z :root: --ink, --ink-2, --muted, --grid, --axis, --series, --series-soft, --ref, --surface)
   i tła motywu tf: strona #272727 (.bg-white), pas naprzemienny #202020 (.bg-lightgray), karta #2F2F2F, ramka #444 — jak
   css/dark.css. Jedna barwa serii + szare odniesienie; seria żółta jak logo sklepu (#FAF200), bez niebieskiego —
   paleta sklepu to czerwony, czarny, żółty i zielony (decyzja właściciela 2026-11-14); etykiety na wypełnieniu ciemne */
:root,
.air {
	--page: #272727;
	--surface: #2f2f2f;
	--band-bg: #242424;
	--ink: #f4f3f0;
	--ink-2: #cfcec7;
	--muted: #a3a19a;
	--grid: #3f3f3d;
	--axis: #5a5953;
	--border: #444;
	--series: #FAF200;
	--series-soft: rgba(250, 242, 0, .16);
	--ref: #898781;
	--link: #9AC827;
}

.air { overflow-wrap: break-word; }
/* pas naprzemienny motywu (#202020) za mocno odcinał się od tła strony i stopki sklepu — w dziale różnica ledwie widoczna */
.air-kl .hg_section.bg-lightgray { background: #242424 !important; }
.air [hidden] { display: none !important; }

/*
 * ===== WZORZEC KALLYAS — dopasowania elementów szablonu na stronach przebudowanych (kontener .air.air-kl) =====
 */
.air-kl .hg_section { scroll-margin-top: 90px; }
.air-kl p { margin-bottom: 14px; }

/* nagłówek strony (air/_head.phtml) i podmenu działu (air/_nav.phtml) */
.air-kl .air-head { padding-bottom: 10px; }
.air-kl .air-kicker { margin: 0 0 8px; font-size: 13px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.air-kl .tbk__title.color-green { text-transform: uppercase; text-wrap: balance; }
.air-kl .btn-green { text-transform: uppercase; }
.air .air-nav { margin: 28px 0 0; }
.air .air-nav .nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 0; padding-bottom: 0; }
.air .air-nav .nav::-webkit-scrollbar { display: none; }
.air .air-nav .nav li { flex: 0 0 auto; float: none; display: block; width: auto; margin: 0; padding: 0; }
.air .air-nav .nav-link { display: block; }
.air .air-nav .wgt-title { display: block; margin: 0; white-space: nowrap; text-transform: uppercase; }
.air-kl .air-lead { margin: 26px 0 0; font-size: 17px; line-height: 1.7; }

/* tytuł sekcji (AirPlugin::title()) */
.air-kl .air-title { padding-bottom: 22px; }
.air-kl .air-title .tbk__subtitle { margin: 10px 0 0; font-size: 16px; line-height: 1.7; }
.air-kl .air-title--sub { margin-top: 44px; padding-bottom: 16px; }
.air-kl .air-title--sub .tbk__title { color: #fff; }

/* kafle z liczbami (AirPlugin::stats()): statistic-box styl 2 z opisem zdaniem zamiast hasła — opis nie może być
   pozycjonowany absolutnie (Kallyas zakłada jedną linię), ikony Font Awesome zamiast fontu ikon szablonu */
.air-kl .air-tiles { display: flex; flex-wrap: wrap; gap: 16px; margin: 26px 0 26px; }
.air-kl .air-tile { position: relative; flex: 1 1 230px; min-width: 0; padding: 20px 22px 18px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid #cd2122; }
.air-kl .air-tile__icon { display: none; }
.air-kl .air-tile__num { margin: 0 0 8px; font-family: Montserrat, "Open Sans", sans-serif; font-size: 32px; font-weight: 300; line-height: 1.2; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.air-kl .air-tiles--4 .air-tile__num { font-size: 27px; line-height: 1.4; }
.air-kl .air-tile__num small { font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.air-kl .air-tile__txt { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.air-kl .air-tile__txt a { color: #fff; text-decoration: underline; text-decoration-color: var(--axis); text-underline-offset: 3px; }
.air-kl .air-tile__txt a:hover { color: #fff; text-decoration-color: #cd2122; }
.air-kl .air-tile--key { border-top-color: #FAF200; }
.air-kl .air-tile--key .air-tile__num { color: #FAF200; font-weight: 400; }
.air-kl .air-tile--key .air-tile__icon { color: #FAF200; }
.air-kl .air-note { font-size: 14.5px; color: var(--ink-2); }
.air-kl .air-more { margin: 6px 0 14px; }
.air-kl .air-more .btn { margin: 0 8px 8px 0; }
/* lista linków (AirPlugin::linkList()) */
.air-kl .air-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.air-kl .air-links .btn { margin: 0; }
.air-kl .air-links .btn small { margin-left: 6px; font-weight: 400; opacity: .75; }

/* karta wykresu (AirPlugin::chartCard()): tytuł .wgt-title, legenda z lib.js, wykres, akordeon z tabelą */
.air-kl .air-chart { margin: 0 0 30px; }
.air-kl .air-chart .wgt-title { margin-bottom: 16px; font-weight: 400; }
.air-kl .air-chart .wgt-title strong { font-weight: 700; }
.air-kl .air-chart .cap-n { font-weight: 400; }
.air-kl .air-chart .air-acc { margin-top: 12px; }
/* akordeon (AirPlugin::accordion()): Kallyas style3 ma jasne tło, margines 54 px na przycisk i czerwony tytuł po otwarciu —
   tu pasek na pełną szerokość, biały tytuł w obu stanach, mały znacznik +/− w pasku */
.air-kl .air-acc.style3 .th-accordion { padding: 0; background: var(--surface); border: 1px solid var(--border); }
.air-kl .air-acc.style3 .th-accordion .acc-group { margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.air-kl .air-acc.style3 .th-accordion .acc-group:last-child { border-bottom: 0; }
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a,
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a.collapsed { padding: 13px 16px 13px 48px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #fff; }
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a.collapsed { color: var(--ink-2); }
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a:hover { color: #fff; }
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a:before,
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a.collapsed:before { left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; line-height: 22px; font-size: 10px; border-radius: 2px; }
.air-kl .air-acc.style3 .th-accordion .acc-group .acc-group-head a.collapsed:before { background-color: #555; }
.air-kl .air-acc.style3 .th-accordion .acc-group .content { padding: 2px 16px 16px; }
/* karty z tekstem (AirPlugin::grid()) */
.air-kl .air-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.air-kl .air-card { padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #9AC827; }
.air-kl .air-card__title { margin: 0 0 10px; font-family: Montserrat, "Open Sans", sans-serif; font-size: 18px; line-height: 1.3; color: #fff; }
.air-kl .air-card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.air-kl .air-acc .content > .tscroll { margin-bottom: 0; }
.air-kl .air-acc .content > p:last-child { margin-bottom: 0; }

/* bloki tekstu z ikoną (AirPlugin::iconBox()) — Kallyas daje opisowi ciemny kolor jasnego motywu */
.air-kl .air-ibx { margin-top: 10px; }
.air-kl .air-ibx .kl-iconbox__title { color: #fff; }
.air-kl .air-ibx .kl-iconbox__desc { color: var(--ink-2); }

/* wybór stacji: .input-group + .form-control jak wyszukiwarka sklepu */
.air-kl .air-picker { margin-bottom: 26px; }
.air-kl .air-picker label { display: block; margin: 0 0 6px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.air-kl .air-picker input.form-control,
.air-kl .air-picker select.form-control { height: 46px; color: #fff; }
.air-kl .air-picker .input-group-text { background: #444; border-color: #444; color: #fff; }

/* „Kto to przygotował” (callout-banner) i stopka źródła danych */
.air-kl .air-who { margin-top: 40px; padding: 26px 30px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #9AC827; }
.air-kl .air-who .m_title { margin: 0 0 10px; font-size: 18px; color: #fff; }
.air-kl .air-who p { margin: 0; color: var(--ink-2); }
.air .air-foot p { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.air .air-foot .hg_separator { margin: 0; }

/* tabela z tekstem (klasa air-wrap w AirPlugin::table()) */
.air table.data.air-wrap td { white-space: normal; }
.air table.data.air-wrap td:first-child { white-space: nowrap; }

@media (max-width: 767px) {
	.air-kl .air-head .btn-green { margin-top: 18px; }
	.air-kl .air-tiles { gap: 10px; margin: 18px 0; }
	.air-kl .air-tile { flex-basis: 150px; padding: 14px 14px 12px; }
	.air-kl .air-tile__num,
	.air-kl .air-tiles--4 .air-tile__num { font-size: 21px; }
	.air-kl .air-tile__num small { display: block; margin-top: 2px; font-size: 12px; }
	.air-kl .air-acc.style3 .th-accordion .acc-group .content { padding: 0 8px 10px; }
	.air-kl .air-cards { grid-template-columns: 1fr; }
	.air-kl .air-who { padding: 20px 18px; }
	.air-kl .air-picker .col-md-4 { margin-top: 14px; }
}

/*
 * ===== STARE KOMPONENTY =====
 * Przeniesione ze strony statycznej; używają ich jeszcze widoki stations, station, provinces, province, nights, night,
 * pollutants, pollutant (kontener .air bez .air-kl). Grupy oznaczone „do usunięcia po przebudowie podstron” znikają, gdy
 * widok przejdzie na wzorzec (kontener .air.air-kl); grupy „zostaje” to części wykresów i tabel wspólne dla obu wersji.
 * Reguły ogólne (a, h2, h3, p, typografia) są ograniczone do kontenera bez .air-kl (:where() nie podnosi wagi selektora),
 * żeby nie nadpisywały szablonu na stronach przebudowanych.
 */
/* do usunięcia po przebudowie podstron: typografia i linki strony statycznej */
.air:where(:not(.air-kl)) {
	color: var(--ink);
	font-size: 16px;
	line-height: 1.6;
}
.air:where(:not(.air-kl)) a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.air:where(:not(.air-kl)) a:hover,
.air:where(:not(.air-kl)) a:focus { color: #b5d2f5; }
.air:where(:not(.air-kl)) .nav-tabs a,
.air:where(:not(.air-kl)) a.btn { text-decoration: none; }
.air:where(:not(.air-kl)) a.btn-green,
.air:where(:not(.air-kl)) a.btn-green:hover { color: #fff; }

/* do usunięcia po przebudowie podstron: nagłówek strony, kafle .tiles / .tile (→ air/_head.phtml, AirPlugin::stats()) */
.air:where(:not(.air-kl)) .air-head { padding: 34px 0 40px; }
.air:where(:not(.air-kl)) .air-head .kl-title-block { padding-bottom: 6px; }
.air:where(:not(.air-kl)) .air-head h1 { color: var(--ink); max-width: 26ch; text-wrap: balance; }
.air:where(:not(.air-kl)) .air-head.is-plain h1 { max-width: none; }
.air .eyebrow { margin: 0 0 10px; color: var(--link); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.air .lead { margin: 0 0 28px; max-width: 72ch; color: var(--ink-2); font-size: 18px; font-weight: 400; line-height: 1.6; }
.air .air-head .note { margin: 18px 0 0; }
.air .air-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 14.5px; }
.air .air-toc li { margin: 0; }

.air .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.air .tiles-3 { grid-template-columns: repeat(3, 1fr); margin: 20px 0; }
.air .tile { padding: 18px 18px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.air .tile-v { font-size: clamp(24px, 2.7vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.air .tile-v span { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.air .tile-l { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* do usunięcia po przebudowie podstron: sekcje .sec / .sec.alt (→ section.hg_section.bg-white | .bg-lightgray),
   nagłówki, .sub / .note / .more (→ AirPlugin::title(), .air-note, AirPlugin::more()), kolumny .cols (→ .row > .col-md-*) */
.air .sec { padding: 48px 0; scroll-margin-top: 90px; }
.air .sec.alt { background: var(--band-bg); }
.air:where(:not(.air-kl)) h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.air:where(:not(.air-kl)) h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.air h3.mt { margin-top: 40px; }
.air:where(:not(.air-kl)) p { margin: 0 0 14px; max-width: 76ch; }
.air .sub { color: var(--ink-2); margin-bottom: 22px; }
.air .note { font-size: 14.5px; color: var(--ink-2); }
.air .more { font-size: 15px; }

.air .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.air .cols-3 { grid-template-columns: repeat(3, 1fr); }
.air .cols p { margin: 0; color: var(--ink-2); }

/* zostaje: przełączniki (AirPlugin::segs(), lib.js SW.fillSegs()). Przycisk .seg wygląda jak mały przycisk szablonu
   (.btn.btn-sm.btn-lined) także wtedy, gdy JS albo stary widok wstawia sam <button class="seg">; aktywny (.is-on, ustawia JS)
   to kolor przycisków sklepu .btn-fullcolor */
.air .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.air .filters-l { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.air .seg {
	font: 700 12px/1.6 "Open Sans", Helvetica, Arial, sans-serif; text-transform: uppercase; padding: 6px 14px; border-radius: 3px; cursor: pointer;
	background: transparent; color: #fff; border: 2px solid #555; box-shadow: none;
}
.air .seg:hover { border-color: #fff; color: #fff; }
.air .seg.is-on { background: #cd2122; border-color: #cd2122; color: #fff; }
.air .seg:focus-visible,
.air input:focus-visible,
.air select:focus-visible,
.air summary:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }

/* do usunięcia po przebudowie podstron: karta wykresu .card (→ AirPlugin::chartCard(); .card ma też style Bootstrapa) */
.air .card {
	display: block; margin: 0 0 20px; padding: 18px 18px 10px; min-width: 0;
	background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.air .card figcaption { font-size: 15px; color: var(--ink-2); margin-bottom: 6px; }
.air .card figcaption strong { color: var(--ink); }
.air .cap-n { color: var(--muted); font-size: 13.5px; margin-left: 8px; }
/* zostaje: kontener ECharts, siatka małych wykresów (.multi > .mini z lib.js / home.js) i legenda z lib.js.
   .chart ma w style.css Kallyas wymiary 110 px, marginesy 50 px i środkowanie — tu pełne nadpisanie */
.air .chart { display: block; position: relative; width: 100%; height: 380px; margin: 0; text-align: left; }
.air .chart canvas { position: static; }
.air .chart-s { height: 300px; }

.air .multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 20px; }
.air .mini { padding: 14px 14px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; min-width: 0; }
.air .mini-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.air .mini-s { font-size: 13.5px; color: var(--ink-2); min-height: 2.8em; line-height: 1.4; }
.air .mini .chart { height: 210px; }

.air .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); margin: 2px 0 4px; }
.air .legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--series); vertical-align: middle; margin-right: 6px; }
.air .legend i.ref { border-color: var(--ref); }
.air .legend i.band { height: 10px; border: 0; background: var(--series-soft); border-radius: 2px; }
.air .legend i.dot { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--series); }
.air .legend i.dot.ref { background: var(--ref); }

/* zostaje: tabele danych — szablon daje .table-responsive > table.table.table-striped (AirPlugin::table(), lib.js),
   tu ramka karty, liczby tabelaryczne, przyklejona pierwsza kolumna i znaczniki sortowania (.sortable — lib.js) */
.air .tscroll { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.air table.data { border-collapse: collapse; width: 100%; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); background: transparent; }
.air table.data th,
.air table.data td { padding: 7px 9px; text-align: left; border: 0; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.air table.data th { font-weight: 600; color: var(--ink-2); font-size: 12px; white-space: normal; vertical-align: bottom; line-height: 1.3; text-wrap: balance; }
/* nagłówek liczbowy nie węższy niż „(21–24)” i dwa krótkie słowa — inaczej łamie się po słowie i w środku zakresu */
.air table.data th.num { min-width: 68px; }
.air table.data th:first-child,
.air table.data td:first-child { padding-left: 14px; }
.air table.data th:last-child,
.air table.data td:last-child { padding-right: 14px; }
.air table.data tbody tr:hover td { background: #383838; }
/* odnośniki w tabelach: jasne z podkreśleniem — czerwień motywu w całej kolumnie wyglądała jak lista błędów */
.air table.data a { color: #fff; text-decoration: underline; text-decoration-color: var(--axis); text-underline-offset: 3px; }
.air table.data a:hover { color: #fff; text-decoration-color: #cd2122; }
/* tabela szersza niż ekran: cień przy prawej krawędzi i widoczny pasek przewijania */
.air .tscroll { scrollbar-width: thin; scrollbar-color: #666 var(--surface);
	background: linear-gradient(to left, var(--surface) 40%, rgba(47, 47, 47, 0)) right top / 44px 100% no-repeat local,
		linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) right top / 16px 100% no-repeat scroll,
		var(--surface); }
.air table.data td:first-child,
.air table.data th:first-child { box-shadow: 1px 0 0 var(--border); }
.air table.data tr:last-child td { border-bottom: 0; }
.air table.data .num { text-align: right; }
.air table.data td:first-child,
.air table.data th:first-child { position: sticky; left: 0; background: var(--surface); }
.air table.sortable th { cursor: pointer; }
.air table.sortable th[data-dir="asc"]::after { content: " ▲"; font-size: 10px; }
.air table.sortable th[data-dir="desc"]::after { content: " ▼"; font-size: 10px; }
/* do usunięcia po przebudowie podstron: tabela pod wykresem w <details> (→ akordeon z AirPlugin::chartCard( …, [ 'table' => … ] )) */
.air details.tbl { margin: 6px 0 8px; font-size: 14px; }
.air details.tbl summary { cursor: pointer; color: var(--ink-2); width: fit-content; }
.air details.tbl .tscroll { margin-top: 10px; }

/* do usunięcia po przebudowie podstron: rachunek przekroczeń .ledger (→ AirPlugin::stats( …, indeks wyniku )) */
.air .ledger { margin: 0 0 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.air .ledger-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: baseline; padding: 18px 22px; border-bottom: 1px solid var(--grid); }
.air .ledger-row:last-child { border-bottom: 0; }
.air .ledger-v { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-align: right; color: var(--ink); white-space: nowrap; }
.air .ledger-l { color: var(--ink-2); }
.air .ledger-row.is-key { background: var(--series-soft); }
.air .ledger-row.is-key .ledger-l { color: var(--ink); }

/* do usunięcia po przebudowie podstron: kafle .facts (→ AirPlugin::stats()), listy linków .list-links (→ przyciski
   .btn.btn-sm.btn-lined w .air-links albo tabela), pliki .files (→ AirPlugin::table() z klasą air-wrap, jak strona Metoda) */
.air .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 22px; }
.air .list-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.air .list-links li { margin: 0; }
.air .list-links a {
	display: block; padding: 6px 12px; border-radius: 999px; font-size: 14.5px; text-decoration: none;
	color: var(--ink); border: 1px solid var(--axis); background: var(--surface);
}
.air .list-links a:hover,
.air .list-links a:focus { border-color: var(--series); color: var(--ink); }

.air .files { margin: 0 0 22px; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.air .files li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--grid); }
.air .files li:last-child { border-bottom: 0; }
.air .files a { font-weight: 600; }
.air .files span { color: var(--ink-2); font-size: 14.5px; }
.air .files small { color: var(--muted); font-size: 13.5px; margin-left: auto; white-space: nowrap; }

/* wysokości wykresów zostają; reszta reguł w obu blokach @media — do usunięcia po przebudowie podstron */
@media (max-width: 860px) {
	.air .tiles { grid-template-columns: 1fr 1fr; }
	.air .tiles-3 { grid-template-columns: 1fr; }
	.air .multi { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
	.air .cols,
	.air .cols-3 { grid-template-columns: 1fr; gap: 20px; }
	.air .ledger-row { grid-template-columns: 1fr; gap: 4px; }
	.air .ledger-v { text-align: left; }
	.air .chart { height: 320px; }
	.air .mini .chart { height: 210px; }
}

@media (max-width: 520px) {
	.air:where(:not(.air-kl)) .air-head { padding: 24px 0 30px; }
	.air .sec { padding: 36px 0; }
	.air .tiles { grid-template-columns: 1fr; }
	.air .card { padding: 14px 12px 8px; }
	.air .lead { font-size: 16.5px; }
	.air .files small { margin-left: 0; }
}

/* --- stacje i województwa --- */
/* legenda, którą JS wstawia przed wykresem / mapą */
.air .legend-box { margin: 0 0 6px; }
.air .segs { display: flex; flex-wrap: wrap; gap: 6px; }
/* licznik „pokazano N z M” pod filtrami (stations.js wpisuje tekst do #st-count) */
.air-kl .air-count { min-height: 1.6em; margin: -4px 0 18px; color: var(--muted); }
/* przełącznik w wierszu .air-picker obok listy wyboru (zakres na stronie stacji): etykieta nad przyciskami jak nad polem */
.air-kl .air-picker__segs .segs { min-height: 46px; align-items: center; }
/* mapa stacji (stations.js ustawia wysokość z szerokości; to wysokość przed wczytaniem) */
.air #air-map { height: 480px; }

/* opis stacji: tabela nazwa — wartość bez nagłówka (station.phtml), dwie obok siebie w .row */
.air-kl table.air-meta th { width: 42%; padding: 9px 12px; font-size: 13.5px; font-weight: 400; vertical-align: top; }
.air-kl table.air-meta td { padding: 9px 12px; }
.air-kl table.air-meta tr:last-child th { border-bottom: 0; }

/* dopisek albo przyciski zaraz pod akordeonem z tabelami */
.air-kl .air-acc + .air-note,
.air-kl .air-acc + .air-more { margin-top: 18px; }

/* komórki z dwiema liniami (wartość + dopisek) */
.air table.data td small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.air table.cells2 td { vertical-align: top; }
.air code { padding: 1px 5px; border-radius: 4px; font-size: .9em; color: var(--ink); background: var(--grid); }

@media (max-width: 767px) {
	.air-kl .air-picker__segs { margin-top: 14px; }
	.air-kl .air-picker__segs .segs { min-height: 0; }
}

@media (max-width: 520px) {
	.air #air-map { height: 340px; }
	/* przyklejona kolumna nazw nie może zająć całego ekranu telefonu */
	.air #st-table td:first-child { white-space: normal; min-width: 150px; max-width: 180px; }
}

/* --- noce i zanieczyszczenia --- */
/* długa tabela w akordeonie (stacje nocy, dni roku): <div class="air-tall"> wokół akordeonu albo tabeli — przewijanie
   w pionie w ramce, nagłówek przyklejony */
.air-kl .air-tall .tscroll { max-height: 640px; overflow-y: auto; }
@media (max-width: 767px) {
	.air-kl .air-tall .tscroll { max-height: 70vh; }
}

/* --- poprawki po przeglądzie 2026-11-14 --- */
/* kafle liczb: równe kolumny wg liczby kafli, na węższych ekranach po dwa (ostatni nieparzysty na całą szerokość) */
.air-kl .air-tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
.air-kl .air-tiles--2 { grid-template-columns: repeat(2, 1fr); }
.air-kl .air-tiles--4,
.air-kl .air-tiles--7,
.air-kl .air-tiles--8 { grid-template-columns: repeat(4, 1fr); }
.air-kl .air-tiles--5 { grid-template-columns: repeat(5, 1fr); }
.air-kl .air-tiles--5 .air-tile { padding: 18px 16px 16px; }
.air-kl .air-tiles--5 .air-tile__num { font-size: 23px; line-height: 1.5; }
.air-kl .air-tiles--5 .air-tile__num small { display: block; }
@media (max-width: 991px) {
	.air-kl .air-tiles,
	.air-kl .air-tiles--4,
	.air-kl .air-tiles--5,
	.air-kl .air-tiles--7,
	.air-kl .air-tiles--8 { grid-template-columns: repeat(2, 1fr); }
	.air-kl .air-tile:last-child:nth-child(odd) { grid-column: span 2; }
	.air-kl .air-head .btn-green { display: block; width: 100%; margin-top: 18px; white-space: nowrap; }
}
/* przyklejona pierwsza kolumna: pełne tło także w wierszach paskowanych i pod kursorem (spod półprzezroczystego
   tła wystawały litery przewijanych kolumn) */
.air table.data th:first-child,
.air table.data td:first-child { z-index: 1; background-color: var(--surface) !important; }
.air table.data tbody tr:hover td:first-child { background-color: #383838 !important; }
.air-kl .air-tall table.data thead th:first-child { z-index: 3; }
/* lista stacji: kolumna „Mierzy” to długi tekst — zawijana, żeby liczby mieściły się obok */
.air #st-table td:nth-last-child(7) { white-space: normal; min-width: 150px; max-width: 190px; font-size: 13px; line-height: 1.4; }
/* odnośniki w tekście działu: zielone jak nagłówki (czerwień motywu na graficie ma za słaby kontrast) */
.air-kl p a:not(.btn),
.air-kl .air-foot a,
.air-kl .air-note a { color: #9AC827; text-decoration: underline; text-underline-offset: 3px; }
.air-kl p a:not(.btn):hover,
.air-kl .air-foot a:hover { color: #FAF200; }
/* baner na dole: skośna góra wystaje ponad ramkę — odstęp od treści wyżej; podtytuł czytelny */
.air-kl .action_box.air-cta { margin-top: 70px !important; }
.air-kl .air-links + .air-cta,
.air-kl .air-links:last-child { margin-bottom: 0; }
.air-kl .air-cta .ac-subtitle { color: #fff; opacity: .9; }
.air-kl .air-more { margin-top: 18px; }
/* pasek zakładek działu na telefonie: cień z prawej pokazuje, że da się przewinąć */
@media (max-width: 767px) {
	.air .air-nav { position: relative; }
	.air .air-nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 2px; width: 36px; pointer-events: none; background: linear-gradient(to left, var(--page), rgba(39, 39, 39, 0)); }
	.air .air-nav .nav { padding-right: 30px; }
	.air table.data td:first-child { white-space: normal; min-width: 104px; max-width: 38vw; line-height: 1.35; }
	.air table.data th.num { min-width: 60px; }
}
.air-kl .air-tall table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.air-kl .air-tall table.data thead th:first-child { z-index: 3; }
/* tabela „miara — wartość” (klasy air-wrap air-facts w AirPlugin::table()): opis miary się zawija, wartość nie */
.air table.data.air-facts { max-width: 860px; }
.air table.data.air-facts td:first-child { white-space: normal; min-width: 240px; }
.air table.data.air-facts td:last-child { white-space: nowrap; }
/* trzy grupy zanieczyszczeń (iconBox na stronie zanieczyszczeń): wiersze „PM10: 30 → 44 µg/m³” i zdanie objaśnienia */
.air-kl .air-ibx .air-verdict { display: block; padding: 5px 0; border-bottom: 1px solid var(--grid); color: var(--ink); font-variant-numeric: tabular-nums; }
.air-kl .air-ibx .air-verdict small { margin-left: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.air-kl .air-ibx .air-verdict-note { display: block; margin-top: 10px; font-size: 14.5px; }
.air-kl .air-tiles + .air-tiles { margin-top: -10px; }

@media (max-width: 520px) {
	/* długie nazwy stacji w przyklejonej pierwszej kolumnie zasłaniałyby liczby */
	.air table.wrap1 td:first-child { white-space: normal; min-width: 132px; max-width: 42vw; line-height: 1.35; }
	.air table.data.air-facts td:first-child { min-width: 0; }
	.air table.data.air-facts td:last-child { white-space: normal; min-width: 96px; }
}