/* aero.css – powierzchnia szklana strony głównej. WARSTWA ZDEJMOWALNA.
   -------------------------------------------------------------------
   Wdrożone 2026-09-14 po próbce docs/samples/metal-chrome.html (wariant W2).

   CAŁY PLIK jest scoped pod [data-surface="aero"]. Bez tego atrybutu na <html>
   nie obowiązuje ani jedna reguła. Cofnięcie = usunięcie DWÓCH linii z portal.html:
   atrybutu data-surface na <html> i <link> do tego pliku. Nic więcej nie trzeba
   ruszać – wartości bazowe (--card-bg / --card-border / --card-shadow) zostają
   nietknięte w tokens.css i wracają same.

   Wartości barwne siedzą w tokens.css jako --aero-face / --aero-blur / --aero-rim /
   --aero-inset / --aero-drop, bo tokens.css jest SSOT palety. Tutaj są WYŁĄCZNIE
   reguły. Nie wpisuj tu żadnego #rrggbb.

   Specyficzność: selektory mają [data-surface] + klasę (0,2,0), a reguły bazowe
   w inline <style> portal.html mają samą klasę (0,1,0) – więc wygrywają niezależnie
   od kolejności wczytania. Wyjątkiem jest `[data-theme="dark"] .tile-card`, też (0,2,0),
   dlatego <link> do tego pliku stoi PO inline <style> w <head>. Nie przenoś go wyżej.
   Ta sama kolejność zjadała stany `:hover` – patrz blok „Stany hover NA TAFLI". */

/* ═══ JEDNO TŁO SERWISU – etap 11 (podstrony, wariant A), 2026-09-16 ══════════════
   Do tej pory kolaż pod --page-veil miały tylko portal.html (inline) i strony artykułów
   (article.css); katalog, eksperci, źródła, kalendarz, edukacja, fundacja i polityka stały
   na płaskim --page-bg (eksperci nawet na --paper). Trzy tła w jednym serwisie, a okno na
   kolaż nie ma sensu tam, gdzie kolażu wokół karty nie ma. Decyzja Jana (A): to samo tło
   wszędzie. Reguła siedzi TU, nie w base.css, bo tło z kolażem jest częścią warstwy
   szklanej – zdjęcie Aero zdejmuje też kolaż z podstron. Na portalu i artykułach
   duplikuje ich własne reguły co do wartości (ścieżka względem assets/css/).
   `fixed` tylko przy hover + ≥1024 px, jak w portal.html i article.css (iOS ignoruje,
   Android skacze). Kontrast tekstu leżącego bezpośrednio na stronie zmierzony audytem
   pikselowym na każdej z tych stron w obu motywach – patrz notatka etapu 11. */
[data-surface="aero"] body {
  background-color: var(--page-bg);
  background-image: linear-gradient(var(--page-veil), var(--page-veil)), url('../img/bg-energy.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (hover: hover) and (min-width: 1024px) {
  [data-surface="aero"] body { background-attachment: fixed; }
}
/* Tekst w barwie akcentu leżący WPROST na tle – 2026-10-09. Gradient (tools/tlo_serwisu.py) ma
   w lewym górnym rogu błękit o lum ~.60, a --accent (#155E9C) potrzebuje pod sobą lum ≥ .65,
   żeby trzymać 4,5:1. Audyt pikselowy (audyt-malowany.mjs, 34 strony) złapał trzy takie miejsca
   na 4,17–4,46: tytuł listy modułów na ścieżkach edukacji, linki w treści polityki i etykietę
   nad tytułem (.eyebrow – ta zmieniła barwę u siebie, w controls.css, bo u6 wymaga jednej barwy
   na wszystkich podstronach). Tu dostają --accent-ink (próg lum .39). Tekst akcentu na KARCIE
   tego nie potrzebuje – tafla jest jasna. Nowy element z --accent leżący na tle strony trzeba
   dopisać tutaj; tools/e2e/audyt-malowany.mjs pokaże go jako naruszenie.
   2026-10-13: gradient zastąpił z powrotem szary kolaż pod welonem .88 (tło prawie białe),
   więc --accent by tu wystarczył. --accent-ink zostaje: ciemniejszy, kontrast tylko zyskuje. */
[data-surface="aero"] .modules-title,
[data-surface="aero"] .legal a { color: var(--accent-ink); }

/* Poniżej progu (telefon, tablet bez myszy) – 2026-10-09. Tło <body> z `cover` rozciągało się
   na wysokość CAŁEJ strony, więc na ekranie widać było ułamek gradientu, praktycznie jednolity,
   a karty nie miały czego rozmyć przez backdrop-filter. Tło idzie więc na warstwę przyklejoną
   do okna przeglądarki – ten sam sposób co encyklopedia (wiedza.css, „Tło serwisu"): warstwę
   przesuwa kompozytor, nie przemalowuje się przy przewijaniu jak `background-attachment: fixed`,
   a 100lvh trzyma wysokość, gdy pasek adresu się chowa. `body::before` w portal.html (dawna
   poświata) jest pusty (`background: none`), ten selektor ma wyższą specyficzność.
   Brama: tools/e2e/tests/aero-okno.spec.mjs, „tło na telefonie". */
@media not ((hover: hover) and (min-width: 1024px)) {
  [data-surface="aero"] body { background-image: none; }
  [data-surface="aero"] body::before {
    content: ""; position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100lvh; pointer-events: none;
    max-width: none; max-height: none;
    background: linear-gradient(var(--page-veil), var(--page-veil)), url('../img/bg-energy.webp') center top / cover no-repeat;
  }
}

/* Powierzchnie pierwszego ekranu i kafle.
   `.tile-card` TYLKO w wariancie bazowym – `:not([class*="tile-card--"])`. Warianty mają
   własną powierzchnię i Aero ją zamazywało: `.tile-card--invite` siedzi na pełnym akcencie
   #155E9C z białym tekstem, więc po nałożeniu szkła robiła się biel na bieli, 1,02:1.
   Wyszło to dopiero z audytu pikselowego (audyt-malowany.mjs) – `a11y-contrast` tych kafli
   nie ocenia, bo stoją pod gradientem, a `check_contrast.py` widzi tylko pary tokenów.
   Ta sama zasada obowiązuje `--photo` (tekst na zdjęciu), `--logo` i `--soon`.

   Sprawdzone 2026-09-15 (A2): wariant bazowy NIE jest martwym selektorem, choć dziś nie
   widać go na stronie. `tools.js` i `partner-portals.js` dokładają `--photo` wyłącznie,
   gdy pozycja ma pole `image`, a wszystkie siedem pozycji w `data/tools.json`
   i `data/partner-portals.json` je ma. Pierwsze narzędzie dodane bez zdjęcia wyrenderuje
   się jako goły `.tile-card` – podobnie jak kafel, któremu `partner-portals.js` zdejmie
   `--logo` po błędzie wczytania obrazka. Kontrast na tafli zmierzony na wstrzykniętym
   kaflu bazowym: jasny 15,6 / 6,1 / 10,2 · ciemny 13,7 / 7,2 / 9,1 (nazwa / opis / CTA).
   Reguła zostaje. */
[data-surface="aero"] .well__block,
[data-surface="aero"] .rail__group,
[data-surface="aero"] .tile-card:not([class*="tile-card--"]),
[data-surface="aero"] .cal-month,
[data-surface="aero"] .wellbeing__box,
[data-surface="aero"] .expand-btn,
/* Etap 1 wariantu B (2026-09-15): karty sekcji poniżej pierwszego ekranu. Powód w B6 –
   „karta" miała trzy różne powierzchnie, a przydział do nich nie dawał się wypowiedzieć
   jedną regułą: `.cal-month summary` i `.expand-btn` były szklane, choć siedzą w kalendarzu,
   otoczone płaskimi kartami. Zamiast zwężać szkło do pierwszego ekranu, rozszerzamy je
   na wszystkie karty białe. Etapami, z pomiarem po każdym: najpierw te dwie. */
[data-surface="aero"] .cat-card,
[data-surface="aero"] .support-card,
/* Etap 2: karty ekspertów i pasek newslettera. Zmierzone po etapie 1 – dołożenie szkła
   do dwóch kart nie kosztowało nic mierzalnego (mediana klatki 16,73 wobec 16,83 ms
   w przeplatanym biegu), więc etap 2 poszedł tą samą drogą.

   `.sponsor` NIE wchodzi i nie wejdzie. Kafelek sponsora ma `background: #fff` w motywie
   jasnym i `--sponsor-tile` #F8FAFC w ciemnym – jasny w obu, świadomie, żeby wordmarki
   partnerów zostały czytelne (komentarz przy tokenie w tokens.css, E5). Tafla w motywie
   ciemnym jest ciemna, więc zabrałaby dokładnie to, co ta reguła chroni. */
[data-surface="aero"] .expert,
[data-surface="aero"] .newsletter {
  background: var(--aero-face);
  -webkit-backdrop-filter: var(--aero-blur);
  backdrop-filter: var(--aero-blur);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}

/* ═══ OKNO NA KOLAŻ – etap 1 szkła, 2026-09-15 ═══════════════════════════════════
   Diagnoza: rozmycie działało, ale nie było go widać. `backdrop-filter` rozmywa to, co
   realnie leży pod kartą, a pod kartą leży kolaż przykryty --page-veil .88 – płaszczyzna
   prawie jednolita. Obniżyć --page-veil nie można: tekst leżący BEZPOŚREDNIO na stronie
   (`.tools__lead`, opisy `.side__card`, daty) ma na najciemniejszym pikselu kolażu 4,49–4,51
   już dziś, przy .88. Zmierzone audytem pikselowym przed tym etapem.

   Rozwiązanie: karta dostaje pod taflę WŁASNĄ warstwę z kolażem (::before, z-index -1
   w izolowanym kontekście), rozmytym offline i ułożonym identycznie jak tło body
   (`cover / center top / fixed`), więc obraz w oknie pokrywa się z obrazem strony, tylko
   jest czytelniejszy (--aero-window-veil .50 zamiast .88) i rozmyty. Tafla nad oknem to
   --aero-face-window (rzadsza). Reszta strony nie zmienia się o piksel.

   Dlaczego warstwa, a nie mocniejszy filtr: próbowano `brightness(.55) contrast(15)` na
   backdrop-filter, żeby „odzyskać" kolaż spod veil – wychodzi jednolity błękit (veil
   243/245/248 nie jest neutralny, contrast rozdmuchuje różnicę kanałów) i posteryzacja
   na 31 poziomach. Odrzucone.

   Warunek mediów ten sam, co `background-attachment: fixed` na body (portal.html) – bez
   tła przyklejonego okno nie miałoby się z czym pokrywać (Safari na iOS ignoruje fixed).
   Poniżej progu obowiązuje reguła bazowa wyżej: tafla + backdrop-filter, jak dotąd.

   Podstrony (etap 8, 2026-09-15): okno ma sens tylko tam, gdzie pod kartą leży kolaż –
   czyli na stronie głównej i na stronach artykułów (article.css rysuje to samo tło).
   Stąd `.art-related-card` i `.art-end-cta` w listach niżej. Katalog, eksperci, źródła,
   kalendarz, edukacja, fundacja i polityka mają płaskie --page-bg: okno pokazywałoby
   kolaż, którego na stronie nie ma. Zostają na regule bazowej (tafla + krawędź z etapu 2).

   `.tile-card` (wariant bazowy) NIE dostaje okna: jego ::before to 3-pikselowa belka
   akcentu na hover (portal.html), a nadpisanie zabrałoby ją. Zostaje na regule bazowej.

   Konsekwencje dla karty: `position: relative` (żeby ::before miał ramy), `isolation`
   (żeby z-index -1 nie uciekł pod body) i `overflow: hidden` (żeby narożniki okna
   zgadzały się z narożnikami karty). Sprawdzone probe.mjs: żaden potomek tych kart nie
   wystaje poza jej pudełko w stanie spoczynku, `.expert` ma hidden od dawna.
   Obrys i rozbłyski przenoszą się na ::before (`inset 0 0 0 1px --aero-rim` w cieniu),
   bo pseudoelement z inset:0 zakrywa ramkę i cienie wewnętrzne elementu.
   `backdrop-filter: none` – nie ma już czego rozmywać w locie, koszt spada do zera.

   Kontrast: składana biel nad kolażem to veil .50 × tafla .50–.62, czyli na najciemniejszym
   pikselu rozmytego kolażu (lum .016) dół tafli schodzi do sRGB ~200. --ink-60 (#54606B)
   dawałby tam 3,85 – dlatego na kartach z oknem --ink-60 = --aero-ink-60 (#46525E w jasnym: 7,99 na bieli,
   4,77 na dole tafli; w ciemnym = --ink-60 bez zmiany, bo tafla tam nieprzezroczysta).
   Pierwsza wersja wpisała #46525E na sztywno i motyw ciemny dostał 34 naruszenia. */
@property --aero-mx { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --aero-my { syntax: '<length-percentage>'; inherits: true; initial-value: -60%; }
@property --aero-spec-a { syntax: '<number>'; inherits: true; initial-value: 0; }
@media (hover: hover) and (min-width: 1024px) {
  [data-surface="aero"] .well__block,
  [data-surface="aero"] .rail__group,
  [data-surface="aero"] .cal-month,
  [data-surface="aero"] .wellbeing__box,
  [data-surface="aero"] .member,
  [data-surface="aero"] .art-related-card,
  [data-surface="aero"] .art-end-cta,
  [data-surface="aero"] .art-card,
  [data-surface="aero"] .cal-grid-wrap,
  [data-surface="aero"] .page-header--band,
  [data-surface="aero"] .expert-card,
  [data-surface="aero"] .src,
  [data-surface="aero"] .kal-month,
  [data-surface="aero"] .kal-stats,
  [data-surface="aero"] .kal-analiz-cta,
  [data-surface="aero"] .course,
  [data-surface="aero"] .event,
  [data-surface="aero"] .stats,
  [data-surface="aero"] .pillar,
  [data-surface="aero"] .ticker,
  [data-surface="aero"] .databar,
  [data-surface="aero"] .nav,
  [data-surface="aero"] .topbar,
  [data-surface="aero"] .expand-btn,
  [data-surface="aero"] .cat-card,
  [data-surface="aero"] .support-card,
  [data-surface="aero"] .expert,
  [data-surface="aero"] .newsletter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Etap 12: krawędź szkła. Tło elementu maluje się w border-box, okno (::before) zakrywa
       padding-box, więc z tła zostaje widoczny wyłącznie 1-pikselowy pierścień ramki –
       gradient stożkowy światła (--aero-rim-ring). Ramka sama jest przezroczysta. */
    border-color: transparent;
    background: var(--aero-rim-ring);
    --ink-60: var(--aero-ink-60);
    --c-fg-muted: var(--aero-ink-60);
    --fg-muted: var(--aero-ink-60);   /* drugi alias (tokens.css:198), używany na podstronach – etap 11: strzałka `.course-arrow` 4,46 */
    /* Etap 13: barwy kategorii i wskaźnika wzrostu strojone do dołu przezroczystej tafli
       (tokens.css, --aero-cat-* / --aero-up). Tylko na kartach z oknem. */
    --cat-sieci: var(--aero-cat-sieci); --cat-wytwarzanie: var(--aero-cat-wytwarzanie);
    --cat-odbiorcy: var(--aero-cat-odbiorcy); --cat-obrot: var(--aero-cat-obrot);
    --cat-magazyny: var(--aero-cat-magazyny); --cat-regulacje: var(--aero-cat-regulacje);
    --cat-emobility: var(--aero-cat-emobility); --cat-esg: var(--aero-cat-esg);
    --up: var(--aero-up);   /* alias z tokens.css rozwiązany na :root – nadpisanie --ink-60 przez niego nie przechodzi */
    --aero-tint-layer: linear-gradient(0deg, transparent, transparent);
  }
  /* Stany hover: tint z bloku „Stany hover NA TAFLI" ląduje na ELEMENCIE, a element jest
     teraz pod oknem – niewidoczny. Tint idzie więc jako pierwsza warstwa okna, przez
     zmienną, żeby nie powtarzać pięciu list background-*. `.cat-card::after` jest zajęty
     (strzałka ↗ z portal.html), stąd nie ::after. */
  [data-surface="aero"] .expand-btn:hover,
  [data-surface="aero"] .cat-card:hover {
    --aero-tint-layer: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06));
  }
  /* PODSTRONY – etap 11 (wariant A), 2026-09-16. Po nadaniu podstronom tła z kolażem okno
     dostają ich karty (lista wyżej): katalog `.art-card` (dotąd bez rozmycia z powodu
     kosztu – okno nic nie liczy w locie, więc wraca), eksperci, źródła, kalendarz
     (komórki, dni tygodnia, statystyki, CTA, przełącznik), edukacja `.course`, fundacja
     `.pillar`/`.stats`/`.member`, `.event`. POZA oknem: `.mission__pullquote` (własny
     ::before z cudzysłowem), `.mod-header` (leży wewnątrz białej karty modułu – kolaż
     w środku bieli byłby dziurą), `.legal__toc` (polityka nie ma JS, nie ma kto ułożyć
     kolażu). Wszystkie zostają na tafli bez okna.
     Stany komórek kalendarza (muted / weekend / today / hover) malowały tint NAD taflą na
     elemencie – pod oknem niewidoczne, więc idą tą samą zmienną co hover kart. */
  /* Etap 12 (uwaga Jana: kalendarz „symuluje przezroczystość"): taflą z oknem jest CAŁY
     `.cal-grid-wrap`, a nie 35 komórek z osobna – komórki są przezroczyste (same tinty
     stanów), linie siatki to półprzezroczysty --aero-grid-line przez `gap` na `.cal-grid`,
     które dotąd miało nieprzezroczyste tło i zasłaniało wszystko pod siatką. */
  [data-surface="aero"] .cal-grid { background: var(--aero-grid-line); }
  [data-surface="aero"] .cal-cell,
  [data-surface="aero"] .cal-wd { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; }
  [data-surface="aero"] .cal-cell.muted   { background: var(--cal-muted-tint); }
  [data-surface="aero"] .cal-cell.weekend { background: var(--a-teal-04); }
  [data-surface="aero"] .cal-cell.today   { background: var(--today-bg); }
  [data-surface="aero"] .cal-cell:hover:not(.muted) { background: var(--a-teal-06); }
  /* Eksperci: nagłówek karty (`.expert-card__header`) miał własne kryjące tło #EFF2F6
     i zasłaniał górną połowę okna – stąd wrażenie „udawanej" przezroczystości. */
  [data-surface="aero"] .expert-card__header { background: transparent; }
  /* Pastylki wydarzeń w komórkach (`.cal-ev-pill`): tint .15 + tekst w barwie typu leżały
     na białej komórce; na oknie (zwłaszcza `.today` z własnym tintem) schodziły do 3,74–4,44.
     Ten sam zabieg co przy plakietkach źródła na portalu: kryjący --card-bg jako warstwa
     obrazu pod tintem – pastylka leży na tym samym podkładzie co dotąd, obrys typu zostaje. */
  [data-surface="aero"] .cal-cell .cal-ev-pill { background-image: linear-gradient(var(--card-bg), var(--card-bg)); }
  /* ODBLASK OD KURSORA – etap 6, 2026-09-15. Pierwsza warstwa okna: miękka elipsa bieli
     w miejscu kursora (aero.js ustawia --aero-mx/--aero-my w px względem karty i
     --aero-spec-a 0/1). Krycie z tokena --aero-spec (jasny .30, ciemny 0 – patrz tokens.css).
     Zarejestrowane właściwości dają płynne wejście i wyjście (przejścia na zmiennych
     działają tylko dla @property); przeglądarka bez @property pokaże odblask bez animacji.
     Bez kursora elipsa stoi nad kartą (my -60 %), więc karta bez najechania wygląda jak
     przed tym etapem. Żadnej ostrej linii: gradient wygasa promieniście, jak rozbłysk. */
  [data-surface="aero"] .well__block,
  [data-surface="aero"] .rail__group,
  [data-surface="aero"] .cal-month,
  [data-surface="aero"] .wellbeing__box,
  [data-surface="aero"] .member,
  [data-surface="aero"] .art-related-card,
  [data-surface="aero"] .art-end-cta,
  [data-surface="aero"] .art-card,
  [data-surface="aero"] .cal-grid-wrap,
  [data-surface="aero"] .page-header--band,
  [data-surface="aero"] .expert-card,
  [data-surface="aero"] .src,
  [data-surface="aero"] .kal-month,
  [data-surface="aero"] .kal-stats,
  [data-surface="aero"] .kal-analiz-cta,
  [data-surface="aero"] .course,
  [data-surface="aero"] .event,
  [data-surface="aero"] .stats,
  [data-surface="aero"] .pillar,
  [data-surface="aero"] .ticker,
  [data-surface="aero"] .databar,
  [data-surface="aero"] .nav,
  [data-surface="aero"] .topbar,
  [data-surface="aero"] .expand-btn,
  [data-surface="aero"] .cat-card,
  [data-surface="aero"] .support-card,
  [data-surface="aero"] .expert,
  [data-surface="aero"] .newsletter {
    transition: --aero-mx .10s linear, --aero-my .10s linear, --aero-spec-a .30s ease;
  }
  /* PASKI PRZYKLEJONE – etap 9, 2026-09-16. Cofa decyzję z 15 września („paski NIE dostają
     tafli"), bo oba jej powody zniknęły z etapem 8: rozmycie nie liczy się w locie (kolaż
     rozmyty w pliku, ułożenie z aero.js), a przez okno widać wyłącznie kolaż – treść
     przewijana pod paskiem nie prześwituje, bo kompozyt okna jest kryjący. Pasek staje się
     pływającą listwą Liquid Glass: tapeta pod nim, treść znika pod tarczą.
     Od etapu 11 (jedno tło serwisu) `.nav` i `.topbar` dostają okno na każdej stronie
     z data-surface="aero" – wcześniej były zawężone do portalu (`body:has(.ticker)`)
     i artykułów (`body[data-slug]`), bo podstrony miały płaskie tło. W blokach
     reduced-transparency i @supports paski wracają na --card-bg razem z kartami.
     Bez `overflow: hidden` z listy wyżej: `.nav` ma rozwijane menu pozycjonowane
     absolutnie, obcięłoby je. Paski są prostokątne, okno nie potrzebuje przycięcia.
     `.ticker` ma własne `overflow: hidden` (marquee) i `transform` przy autoukrywaniu –
     ułożenie z `getBoundingClientRect` to obejmuje. */
  [data-surface="aero"] .nav,
  [data-surface="aero"] .topbar,
  [data-surface="aero"] .databar { overflow: visible; }
  /* Lista okna wyżej ustawia `position: relative` (ramy dla ::before) – paski przyklejone
     muszą ją odzyskać, inaczej wypadają z przyklejenia i przesuwają układ o swoją
     wysokość (pierwszy przebieg etapu 9: nav zjechał o 28 px, databar o 96 px). */
  [data-surface="aero"] .ticker,
  [data-surface="aero"] .nav,
  [data-surface="aero"] .topbar { position: fixed; }
  [data-surface="aero"] .well__block::before,
  [data-surface="aero"] .rail__group::before,
  [data-surface="aero"] .cal-month::before,
  [data-surface="aero"] .wellbeing__box::before,
  [data-surface="aero"] .member::before,
  [data-surface="aero"] .art-related-card::before,
  [data-surface="aero"] .art-end-cta::before,
  [data-surface="aero"] .art-card::before,
  [data-surface="aero"] .cal-grid-wrap::before,
  [data-surface="aero"] .page-header--band::before,
  [data-surface="aero"] .expert-card::before,
  [data-surface="aero"] .src::before,
  [data-surface="aero"] .kal-month::before,
  [data-surface="aero"] .kal-stats::before,
  [data-surface="aero"] .kal-analiz-cta::before,
  [data-surface="aero"] .course::before,
  [data-surface="aero"] .event::before,
  [data-surface="aero"] .stats::before,
  [data-surface="aero"] .pillar::before,
  [data-surface="aero"] .ticker::before,
  [data-surface="aero"] .databar::before,
  [data-surface="aero"] .nav::before,
  [data-surface="aero"] .topbar::before,
  [data-surface="aero"] .expand-btn::before,
  [data-surface="aero"] .cat-card::before,
  [data-surface="aero"] .support-card::before,
  [data-surface="aero"] .expert::before,
  [data-surface="aero"] .newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background-image:
      radial-gradient(260px 200px at var(--aero-mx, 50%) var(--aero-my, -60%),
        rgb(255 255 255 / calc(var(--aero-spec, 0) * var(--aero-spec-a, 0))) 0%,
        rgb(255 255 255 / 0) 70%),
      var(--aero-tint-layer),
      var(--aero-face-window),
      linear-gradient(var(--aero-window-veil), var(--aero-window-veil)),
      var(--aero-window-img, url('../img/bg-energy-blur.webp'));
    /* To okno jest od 2026-09-19 ZAPASOWE: obowiązuje do chwili, gdy aero.js wstawi szkło
       (klasa `aero-szklo` na <html>, blok „SZKŁO" niżej), a na stałe tam, gdzie JS nie działa.
       Kolaż ułożony do pudełka karty (`cover`, środek u góry) – tak wyglądała pierwsza
       klatka i przed tą zmianą. Etapy 8–15 dosuwały go do tła strony z JS (--aero-bx /
       --aero-by / --aero-bg-size co klatkę przewijania); tego już nie ma.
       NIE `background-attachment: fixed` – zmierzone 2026-09-19 (tools/e2e/pomiar-portal.mjs):
       Chromium przemalowuje wtedy każdą kartę w każdej klatce przewijania, katalog artykułów
       2467 ms wątku głównego na 3 s i 86 ze 180 klatek zaciętych.
       7 warstw: odblask, tint, --aero-face-window (TRZY gradienty, tokens.css), veil, kolaż.
       Listy rozmiaru i pozycji muszą mieć 7 pozycji – krótsza lista powtarza się cyklicznie
       i kolaż dostawał `auto` (naturalne 1195 px) i `0 0`, zostawiając dziurę na szerokim
       pasku (.nav/.topbar ≥ 1196 px). */
    background-size: auto, auto, auto, auto, auto, auto, cover;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 0;
    background-attachment: scroll;
    background-repeat: no-repeat;
    box-shadow: var(--aero-inset), inset 0 0 0 1px var(--aero-rim);
  }

  /* ═══ SZKŁO – etap 16, 2026-09-19 (to samo co encyklopedia, wiedza.css §4) ═══════════
     Okno na kolaż jako warstwa `position: fixed` w <span class="aero-glass">, który aero.js
     wstawia każdej karcie z listy okna jako pierwsze dziecko (<details>: w <summary>).
     ::before spana ma DOKŁADNIE pudełko i ułożenie tła strony (body: cover / center top,
     `fixed` – obszar = okno przeglądarki), więc kryje się z nim co do piksela bez żadnego
     liczenia. Przewija go kompozytor: przy przewijaniu nie działa JS i nic się nie przelicza.
     Zmierzone tools/e2e/pomiar-portal.mjs – nagłówek aero.js.
     Warstwy jak w oknie zapasowym wyżej, tylko rozdzielone: ::before = veil + kolaż (fixed),
     ::after = odblask, tint, --aero-face-window i krawędź. Przycięcie: clip-path spana,
     nie overflow – overflow nie przycina potomków `position: fixed` (ich blokiem zawierającym
     jest okno przeglądarki). `clip-path: border-box` bierze narożniki z border-radius, a ten
     span dziedziczy po karcie – jedna reguła na wszystkie promienie. Bez obsługi
     `clip-path: border-box` aero.js nie dokłada klasy `aero-szklo` i zostaje okno zapasowe.
     WARUNEK: ani karta, ani żaden jej przodek nie może być blokiem zawierającym dla fixed
     (transform – także na :hover – filter, backdrop-filter, contain: paint/layout,
     content-visibility, will-change: transform). Inaczej kolaż ustawi się względem niego
     i pojedzie z kartą. Stąd blok „SZKŁO – BLOKERY" na końcu pliku, uniesienia na `top`
     w fundacja.html i `.fade-in` kończące na `transform: none` w portal.html. Pilnuje tego
     tools/e2e/tests/aero-okno.spec.mjs (także w stanie :hover). */
  [data-surface="aero"].aero-szklo :is(
    .well__block, .rail__group, .cal-month, .wellbeing__box, .member, .art-related-card,
    .art-end-cta, .art-card, .cal-grid-wrap, .page-header--band, .expert-card, .src, .kal-month,
    .kal-stats, .kal-analiz-cta, .course, .event, .stats, .pillar, .ticker, .databar, .nav,
    .topbar, .expand-btn, .cat-card, .support-card, .expert, .newsletter, main#main > .wrap
  )::before { content: none; }
  [data-surface="aero"].aero-szklo .aero-glass {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    clip-path: border-box;
    transition: --aero-mx .10s linear, --aero-my .10s linear, --aero-spec-a .30s ease;
  }
  /* <details> (.cal-month): span siedzi w <summary>, a promień ma karta, nie summary –
     `inherit` dałby 0. Karty-<details> leżą na --card-radius (portal.html, „Powierzchnia karty"). */
  [data-surface="aero"].aero-szklo summary > .aero-glass { border-radius: var(--card-radius); }
  [data-surface="aero"].aero-szklo .aero-glass::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100lvh;
    background:
      linear-gradient(var(--aero-window-veil), var(--aero-window-veil)),
      var(--aero-window-img, url('../img/bg-energy-blur.webp')) center top / cover no-repeat;
  }
  [data-surface="aero"].aero-szklo .aero-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
      radial-gradient(260px 200px at var(--aero-mx, 50%) var(--aero-my, -60%),
        rgb(255 255 255 / calc(var(--aero-spec, 0) * var(--aero-spec-a, 0))) 0%,
        rgb(255 255 255 / 0) 70%),
      var(--aero-tint-layer, linear-gradient(0deg, transparent, transparent)),
      var(--aero-face-window);
    box-shadow: var(--aero-inset), inset 0 0 0 1px var(--aero-rim);
  }
  /* kontakt-ekspert: okno `.wrap` nie miało odblasku ani krawędzi na warstwie (blok etapu 15b
     niżej) – krawędź i cień niesie sam `.wrap`. Zostaje tak samo. */
  [data-surface="aero"].aero-szklo main#main > .wrap > .aero-glass::after {
    background-image: var(--aero-face-window);
    box-shadow: none;
  }
}
/* Poza progiem (telefon, tablet bez myszy) i bez Aero szkła nie ma – karta zostaje na tafli. */
.aero-glass { display: none; }

/* ═══ PRZYCISKI – etap 10, 2026-09-16 ═══════════════════════════════════════════
   Szklane kapsuły Liquid Glass: pełne zaokrąglenie, krawędź w świetle od góry, załamanie
   od dołu, cień kontaktowy + miękki. Tokeny w tokens.css (--aero-btn-*), tu same reguły.
   `.btn--primary` ZOSTAJE na akcencie (--g-brand), bo biały tekst na tafli nie ma szans na
   4,5 – dostaje tylko rozbłysk od góry jako warstwę obrazu nad gradientem marki i cień
   w barwie akcentu. `.btn--outline` staje się taflą (--aero-face, bez okna: przycisk jest
   za mały, żeby kolaż pod nim cokolwiek znaczył, a lista okna nadałaby mu overflow i
   position). Reguły :hover powtórzone, bo inline `.btn--primary:hover { box-shadow: none }`
   z portal.html ma tę samą specyficzność co reguła bazowa niżej i stoi wcześniej –
   bez powtórki cień znikałby przy najechaniu. `.btn--dark` i stany disabled bez zmian.
   Pełne zaokrąglenie jest od U3 (2026-09-18) bazą .btn w controls.css – tu go już nie ma. */
[data-surface="aero"] .btn--primary,
[data-surface="aero"] .btn--primary:hover,
[data-surface="aero"] .btn--primary:focus-visible {
  background-image: var(--aero-btn-primary-sheen);
  box-shadow: var(--aero-btn-primary-inset), var(--aero-btn-primary-drop);
}
[data-surface="aero"] .btn--primary:active { box-shadow: var(--aero-btn-primary-inset); }
[data-surface="aero"] .btn--outline {
  background: var(--aero-face);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-btn-inset), var(--aero-btn-drop);
}
[data-surface="aero"] .btn--outline:hover,
[data-surface="aero"] .btn--outline:focus-visible {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06)), var(--aero-face);
  border-color: var(--a-teal-35);
  box-shadow: var(--aero-btn-inset), var(--aero-btn-drop);
}
[data-surface="aero"] .btn--outline:active { box-shadow: var(--aero-btn-inset); }
/* Outline na ciemnym pasie (`.final-cta` w fundacja.html: biały tekst, obrys .6 bieli) –
   jasna tafla z reguły wyżej dawała 1,96 (audyt etapu 11). Tu szkło „duchowe": prawie
   przezroczyste, z tą samą krawędzią w świetle; tekst zostaje biały z reguły strony. */
[data-surface="aero"] .final-cta .btn--outline,
[data-surface="aero"] .final-cta .btn--outline:hover,
[data-surface="aero"] .final-cta .btn--outline:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 3px -2px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.18);
}
[data-surface="aero"] .final-cta .btn--outline:hover { background: rgba(255,255,255,.16); border-color: #fff; }
/* Przyciski paska: CTA („Wesprzyj") jest od U3 zwykłym .btn--primary – szkło dostaje
   z reguł wyżej. `.icon-btn` (przełącznik motywu, portal.html) = tafla w kółku. */
[data-surface="aero"] .icon-btn {
  border-radius: var(--r-full);
  background: var(--aero-face);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-btn-inset), var(--aero-btn-drop);
}
[data-surface="aero"] .icon-btn:hover {
  background: linear-gradient(0deg, var(--a-teal-12), var(--a-teal-12)), var(--aero-face);
  border-color: var(--c-teal);
}
/* Menu rozwijane paska (etap 10b): tafla bez okna – jest pozycjonowane absolutnie
   i animowane transformem, więc do listy okna nie wchodzi (lista nadałaby `position:
   relative`). Ten sam zestaw krawędzi co przycisk, cień jak karta. Pozycje menu
   zostają w --c-fg-muted; tło menu jest tak samo jasne jak karta, więc kontrast bez zmian. */
[data-surface="aero"] .nav__dropdown-menu {
  background-color: var(--c-bg-elev);   /* kryjący podkład: menu leży NAD treścią (databar), sama tafla przepuszczała jej tekst */
  background-image: var(--aero-face);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-btn-inset), var(--aero-drop);
}

/* ═══ POWIERZCHNIE TREŚCI NA DWÓCH STRONACH BEZ KART – etap 15b, 2026-09-16 ═══════
   Zgłoszenie Jana po etapie 15: „pozbyło się w ogóle ramek dla kafelków z treścią".
   `kontakt-ekspert.html` i `404.html` nie mają w markupie ŻADNEJ karty – ich treść leży
   wprost na tle strony. Dopóki tło było płaskim --page-bg, wyglądało to normalnie; od
   chwili, gdy pod stroną jest kolaż, tekst pływa po zdjęciu bez oparcia. Nie dokładamy
   kart do markupu (to zmiana w HTML tych stron i w ich własnych regułach) – powierzchnię
   dostaje kontener treści, który już tam jest: `.wrap`.

   Kontakt: `.wrap` obejmuje wszystko od nagłówka po `.trust-box` (formularz `.form-card`
   ma świadomie `background: transparent` z kreską u góry – redesign formularza, nie
   ruszamy go). 404: `main.wrap` to cała zawartość strony.
   Padding jest TUTAJ, nie w regułach stron: bez Aero `.wrap` zostaje samym ograniczeniem
   szerokości, tak jak dotąd, i zdjęcie warstwy niczego nie przesuwa. */
[data-surface="aero"] main#main > .wrap,
[data-surface="aero"] main.wrap {
  --ink-60: var(--aero-ink-60);
  --c-fg-muted: var(--aero-ink-60);
  --fg-muted: var(--aero-ink-60);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: var(--aero-rim-ring);
  box-shadow: var(--aero-inset), var(--aero-drop);
}
[data-surface="aero"] main#main > .wrap::before,
[data-surface="aero"] main.wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    var(--aero-face-window),
    linear-gradient(var(--aero-window-veil), var(--aero-window-veil)),
    var(--aero-window-img, url('../img/bg-energy-blur.webp'));
  /* 5 warstw: --aero-face-window (TRZY gradienty), veil, kolaż – listy muszą mieć 5 pozycji.
     Kolaż ułożony do pudełka: tak zostaje poniżej 1024 px i bez JS; od progu, gdy aero.js
     wstawi szkło, okno przejmuje warstwa fixed (blok „SZKŁO" wyżej). */
  background-size: auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 50% 0;
  background-repeat: no-repeat;
}
/* 404 nie ma JS (patrz blok niżej), więc jej `.wrap` zostaje na tafli bez prześwitu –
   regułę wyłączającą okno dopisano do listy `data-aero-js="nie"`. */

/* STRONY BEZ JS – 404.html ma `script-src 'none'` w CSP, więc `aero.js` się tam nie uruchomi.
   Bez niego nie ma szkła (warstwy fixed wyżej), a okno zapasowe na ::before kadruje kolaż
   do pudełka elementu zamiast do tła strony –
   na pasku wysokości 63 px widać zupełnie inny fragment kolażu niż wokół. Takie strony
   dostają więc taflę bez okna: tło z kolażem, krawędź, cień i kapsuły przycisków zostają,
   znika tylko prześwit. Atrybut `data-aero-js="nie"` stawiamy na <html> ręcznie – to nie
   jest wykrywanie w locie, tylko deklaracja autora strony. */
[data-aero-js="nie"] :where(.well__block, .rail__group, .cal-month, .wellbeing__box, .member, .art-related-card, .art-end-cta, .art-card, .cal-grid-wrap, .page-header--band, .expert-card, .src, .kal-month, .kal-stats, .kal-analiz-cta, .course, .event, .stats, .pillar, .ticker, .databar, .nav, .topbar, .expand-btn, .cat-card, .support-card, .expert, .newsletter, main.wrap, main#main > .wrap)::before { content: none; }

/* Paski przyklejone (.nav, .ticker, .databar) NIE dostają tafli – decyzja 2026-09-15.
   Były w pierwszej wersji tego pliku i wypadły z dwóch powodów naraz, z których drugi
   przesądził:

   1. Koszt. Przewijają się nad treścią, więc rozmycie całego tła pod nimi przelicza się
      przy każdej klatce. Pomiar (3 s przewijania, trzy powtórzenia): mediana klatki
      31,8 ms z taflą na paskach wobec 27,0 ms bez niej, p95 73,3 wobec 57,9 – same paski
      odpowiadały za mniej więcej połowę całej straty Aero.
   2. Czytelność. Przez taflę PRZEBIJAŁ tekst artykułu przewijający się pod paskiem:
      rozmycie 18 px przy kryciu 0,70–0,88 nie zasłania ruchomej treści na wysokości 62 px.
      Na kartach ten problem nie występuje, bo pod kartą stoi tło statyczne.

   Paski zostają więc na regule bazowej z portal.html (`background: var(--card-bg)`).
   Jeśli kiedyś mają wrócić na szkło, warunkiem wejścia jest krycie na tyle wysokie, żeby
   tekst pod spodem nie prześwitywał – a przy takim kryciu z rozmycia niewiele zostaje. */

/* Stany hover NA TAFLI – A1, 2026-09-15.
   Aero maluje `background` i `border-color` z tą samą specyficznością co reguły `:hover`
   w inline <style> portal.html (obie 0,2,0), a stoi PÓŹNIEJ, więc wygrywało również nad
   stanem najechania. Zmierzone na `.cal-month summary`: tło, ramka, cień i obraz tła
   identyczne przed najechaniem i po nim – rozwijana lista miesięcy przestała dawać znak,
   że jest klikalna. To samo traciły `.expand-btn` (tło i ramka) i `.tile-card` (ramka i cień).

   Stan hover na szkle nie może być tym samym co na płaskiej karcie: `--a-teal-04` wpisany
   POD taflę byłby niewidoczny. Tint idzie więc warstwą NAD `--aero-face` – stąd
   `linear-gradient(0deg, tint, tint)`, bo `background` przyjmuje tylko obrazy, nie kolory,
   w pozycji warstwy. */
/* Etap 7 (2026-09-15): taflą jest CAŁY `.cal-month` (kontener z listą wydarzeń), nie sam
   nagłówek – ta sama decyzja co dla `.course` na stronie edukacji: nagłówek akordeonu robi
   się przezroczysty, żeby nie zasłaniać tafli, a hover to sam tint. Wcześniej szklany był
   nagłówek, a rozwinięta lista pod nim leżała na płaskiej bieli. */
[data-surface="aero"] .cal-month summary { background: transparent; }
[data-surface="aero"] .cal-month summary:hover { background: var(--a-teal-06); }
/* 2026-09-17: dwie reguły stąd usunięte razem z elementami, które ubierały – nadpisanie
   --cal-high/--cal-med pod .cal-month (etykiety ważności) i podkład pod plakietkę
   .cal-event__src. Skrót kalendarza na głównej nie renderuje już ani jednego, ani
   drugiego; osierocone tokeny --aero-cal-* i --cal-high/--cal-med też już usunięte. */
[data-surface="aero"] .expand-btn:hover {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06)), var(--aero-face);
  border-color: var(--a-teal-35);
}
[data-surface="aero"] .tile-card:not([class*="tile-card--"]):hover {
  border-color: var(--a-teal-25);
}
/* `.cat-card` miała hover na tincie (`--a-teal-06`), a `.support-card` na samej ramce
   i cieniu – obie traciły to na rzecz warstwy, tak samo jak wcześniej `.expand-btn`. */
[data-surface="aero"] .cat-card:hover {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06)), var(--aero-face);
}
[data-surface="aero"] .support-card:hover,
[data-surface="aero"] .expert:hover {
  border-color: var(--a-teal-35);
}

/* ═══ PODSTRONY – etap A, 2026-09-15 ═══════════════════════════════════════════
   Decyzja Jana: szkło dostają KARTY, nie powierzchnie lektury. Pod kartą stoi tło
   statyczne, pod długim tekstem przewija się wszystko – a rozmycie pod blokiem prozy
   to dokładnie ten sam problem czytelności, przez który z Aero wypadły paski przyklejone
   (patrz blok „Paski przyklejone" wyżej). Dlatego POZA warstwą zostają na stałe:
   `.art-hero` i `.art-body` (treść artykułu), `.legal__card` (tekst polityki),
   `.mod-card` (rozwinięty moduł edukacyjny) oraz pasma pełnej szerokości
   (`.page-header--band`, od U6 jedyne pasmo nagłówka podstron) – pod nimi nie ma czego rozmywać.

   Etap A obejmuje strony-siatki kart: lista artykułów, eksperci, źródła, spis treści
   polityki prywatności. Kalendarz i edukacja idą osobno (etap B), bo mają karty
   zagnieżdżone w kartach i wymagają decyzji, która warstwa jest taflą. */
[data-surface="aero"] .expert-card,
[data-surface="aero"] .src,
[data-surface="aero"] .legal__toc {
  background: var(--aero-face);
  -webkit-backdrop-filter: var(--aero-blur);
  backdrop-filter: var(--aero-blur);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}

/* `.art-card` – tafla BEZ rozmycia. Zmierzone na `/artykuly/index.html`, 1440 px,
   przeplatany bieg po trzy przebiegi każdego wariantu, 180 klatek przewijania:

     pełne Aero            mediana klatki 25,8 ms   (23,8 · 25,8 · 26,6)
     Aero bez rozmycia     mediana klatki 16,7 ms   (16,7 · 16,7 · 16,7)
     bez Aero              mediana klatki 16,7 ms   (16,7 · 16,7 · 16,7)

   Cały koszt siedzi w `backdrop-filter`, sama tafla jest darmowa. Przyczyna ta sama,
   co przy paskach przyklejonych: pod tymi kartami przewijają się ZDJĘCIA (`.art-card-media`),
   więc obszar źródłowy rozmycia przelicza się w każdej klatce. Na `/eksperci/index.html`,
   gdzie kart jest tyle samo, ale bez zdjęć, pełne Aero nie kosztuje nic mierzalnego
   (16,70 wobec 16,70 ms).

   Karta zostaje więc na tafli – rozbłysk, obrys, cień – bez rozmycia. Wizualnie różnicy
   prawie nie widać, bo pod kartą i tak stoi jej własne zdjęcie, nie tło strony. */
[data-surface="aero"] .art-card {
  background: var(--aero-face);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}

/* Stany hover – ta sama pułapka co na stronie głównej (patrz A1): warstwa stoi później
   niż reguły `:hover` w inline <style> podstron i zjadała je razem z ramką. */
[data-surface="aero"] .art-card:hover,
[data-surface="aero"] .expert-card:hover { border-color: var(--a-teal-25); }

/* ═══ PODSTRONY – etap B: kalendarz i edukacja, 2026-09-15 ═══════════════════════
   Obie strony mają KARTY ZAGNIEŻDŻONE W KARTACH, więc trzeba było rozstrzygnąć, która
   warstwa jest taflą. Rozstrzygnięcie w obu wypadkach inne, bo inna jest budowa:

   KALENDARZ. `.cal-grid-wrap` NIE dostaje tafli, choć wygląda na kontener-kartę: siatka
   `.cal-grid` leży na nim w całości i ma własne, nieprzezroczyste tło (`--grid-border`,
   widoczne przez `gap` jako linie siatki), więc tafla pod spodem byłaby niewidoczna.
   Taflą są więc KOMÓRKI i pasek dni tygodnia; linie siatki zostają płaskie i rysują
   podział, tak jak dotąd.

   EDUKACJA. Odwrotnie: taflą jest `.course` (karta ścieżki), a nagłówek i wiersze lekcji
   robią się PRZEZROCZYSTE, żeby jej nie zasłonić. Lekcja zachowuje własną ramkę i stan
   najechania, więc nadal czyta się jako osobny, klikalny wiersz – tyle że narysowany
   na tafli, nie wycięty z bieli.

   KOSZT – zmierzony PRZED wdrożeniem (wniosek z `.art-card`), 1440 px, trzy przebiegi
   każdego wariantu, 180 klatek przewijania w obie strony, 35 komórek w siatce:

     bez Aero              16,70 ms      tylko komórki        16,70 ms
     tylko karty listy     16,70 ms      komórki + karty      16,70 ms

   Zero kosztu, mimo 35 rozmytych elementów. Potwierdza regułę z `.art-card`: rozmycie
   kosztuje wtedy, gdy obszar źródłowy się zmienia. Pod komórkami kalendarza stoi płaskie
   tło strony, pod kartami artykułów przewijają się zdjęcia.

   Poza warstwą: pasmo nagłówka `.page-header--band` (pełna szerokość – nie ma czego
   rozmywać) oraz `.ev-modal-box` (dialog ukryty w DOM, audyt pikselowy go nie zmierzy;
   do rozważenia osobno). */
[data-surface="aero"] .cal-cell,
[data-surface="aero"] .cal-wd,
[data-surface="aero"] .kal-month,
[data-surface="aero"] .kal-stats,
[data-surface="aero"] .kal-analiz-cta,
[data-surface="aero"] .course {
  background: var(--aero-face);
  -webkit-backdrop-filter: var(--aero-blur);
  backdrop-filter: var(--aero-blur);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}

/* Komórki siedzą ramię w ramię w siatce – cień rzucony z każdej z nich robiłby brud
   na liniach podziału. Zostaje sam rozbłysk krawędziowy. Ramki też nie mają: podział
   rysuje `gap` na tle `.cal-grid`. */
[data-surface="aero"] .cal-cell,
[data-surface="aero"] .cal-wd {
  border-color: transparent;
  box-shadow: var(--aero-inset);
}

/* STANY KOMÓREK. Wszystkie tinty kalendarza są półprzezroczyste i dotąd leżały na białej
   karcie. Na tafli muszą iść WARSTWĄ NAD nią – inaczej `background` podmienia całą taflę
   na sam tint i komórka robi się dziurą w panelu (tą samą drogą co hovery z A1). */
[data-surface="aero"] .cal-cell.muted {
  background: linear-gradient(0deg, var(--cal-muted-tint), var(--cal-muted-tint)), var(--aero-face);
}
[data-surface="aero"] .cal-cell.weekend {
  background: linear-gradient(0deg, var(--a-teal-04), var(--a-teal-04)), var(--aero-face);
}
[data-surface="aero"] .cal-cell.today {
  background: linear-gradient(0deg, var(--today-bg), var(--today-bg)), var(--aero-face);
}
[data-surface="aero"] .cal-cell:hover:not(.muted) {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06)), var(--aero-face);
}

/* EDUKACJA – wnętrze karty ścieżki przezroczyste, żeby tafla `.course` była widoczna. */
[data-surface="aero"] .course-hd,
[data-surface="aero"] .lesson {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-surface="aero"] .course-hd:hover,
[data-surface="aero"] .lesson:hover {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06));
}
/* `.kal-mh` to nagłówek miesiąca wewnątrz `.kal-month` – ta sama zasada co wyżej. */
[data-surface="aero"] .kal-mh:hover {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06));
}

/* ═══ PODSTRONY – etap C: artykuły, 2026-09-15 ═══════════════════════════════════
   Na stronie artykułu szkło dostają DWIE karty na dole: „przeczytaj też" i wezwanie
   końcowe. Sama treść (`.art-hero`, `.art-body`) zostaje płaska – to decyzja z etapu A
   i tu widać jej cenę: efekt na artykule jest z założenia niewielki. Tak ma być.
   Kolumna lektury ma się czytać, nie błyszczeć.

   Pod tymi kartami stoi płaskie tło strony, więc rozmycie zostaje (inaczej niż w
   `.art-card`, gdzie pod spodem przewijają się zdjęcia). Zmierzone na artykule:
   z Aero 16,70 ms, bez Aero 16,70 ms – bez różnicy. */
[data-surface="aero"] .art-related-card,
[data-surface="aero"] .art-end-cta {
  background: var(--aero-face);
  -webkit-backdrop-filter: var(--aero-blur);
  backdrop-filter: var(--aero-blur);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}
[data-surface="aero"] .art-related-card:hover { border-color: var(--a-teal-25); }

/* ═══ PODSTRONY – etap D: strony kursów i kalendarz compliance, 2026-09-15 ═══════
   STRONY KURSÓW (`edukacja-oze`, `-rachunki`, `-rynek-mocy`). Tu decyzja z etapu A
   wypada odwrotnie niż na `edukacja.html`. Tam taflą była cała karta `.course`, bo jej
   wnętrze to lista lekcji – czyli nawigacja. Tu wnętrze `.mod-card` to PROZA KURSU,
   pełny tekst artykułu rozwijany w miejscu. Karta jest więc powierzchnią lektury
   i zostaje płaska; taflą jest wyłącznie `.mod-header`, czyli pasek, w który się klika.

   Efekt jest taki sam jak na `.cal-month summary` na stronie głównej: nagłówek akordeonu
   błyszczy, treść pod nim czyta się na płaskiej bieli.

   KALENDARZ COMPLIANCE. `.event` to wiersz-karta terminu – tafla. `.role-chip` NIE:
   to filtr wielkości przycisku, a w stanie `.active` siedzi na pełnym akcencie z białym
   tekstem. Szkło na 30-pikselowym chipie nie ma czego pokazać, a na wariancie aktywnym
   zamazałoby akcent – ta sama zasada, co przy `.tile-card--invite` na stronie głównej. */
[data-surface="aero"] .mod-header,
[data-surface="aero"] .event {
  background: var(--aero-face);
  -webkit-backdrop-filter: var(--aero-blur);
  backdrop-filter: var(--aero-blur);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}

/* `.mod-header` siedzi WEWNĄTRZ `.mod-card`, więc cień rzucony podwajałby cień karty,
   a własna ramka rysowałaby drugą linię tuż przy ramce karty. Zostaje sam rozbłysk –
   dokładnie jak w komórkach kalendarza (etap B). Linię pod nagłówkiem otwartej karty
   rysuje nadal `education.css` (`.mod-card.open .mod-header`) i ma tak zostać. */
[data-surface="aero"] .mod-header {
  border-color: transparent;
  box-shadow: var(--aero-inset);
}

[data-surface="aero"] .mod-header:hover {
  background: linear-gradient(0deg, var(--a-teal-06), var(--a-teal-06)), var(--aero-face);
}
[data-surface="aero"] .event:hover { border-color: var(--a-teal-35); }

/* ═══ PODSTRONY – etap E: fundacja.html, 2026-09-15 ═══════════════════════════════
   Ostatnia strona z treścią, która została poza warstwą. Stoi na innym fundamencie niż
   reszta portalu (`chrome.css`, bez `base.css`) i buduje karty na aliasie `--c-bg-elev`
   (czyli `--paper`, #FAFBFC), a nie na `--card-bg` (#FFFFFF). Tafla kładzie się na obu
   tak samo, bo jest warstwą nad tłem – różnica wychodzi dopiero w bloku awaryjnym
   `@supports not`, gdzie karty fundacji dostaną `--card-bg` zamiast swojego papieru.
   Odnotowane świadomie: jeden ton różnicy w przeglądarce bez `backdrop-filter` jest
   tańszy niż drugi zestaw reguł awaryjnych.

   `.support-card` już siedzi w liście wyżej (przyszła ze strony głównej), więc tutaj
   dochodzą tylko pozostałe karty tej strony.

   POZA WARSTWĄ ZOSTAJE MAKIETA BLIK (`.blik-mock` i jej wnętrze). To atrapa ekranu
   płatności, opisana `aria-label`em jako placeholder. Szkło upodabniałoby ją do
   prawdziwego interfejsu płatniczego – a makieta ma wyglądać na makietę. To jedyne
   wykluczenie w tym pliku podjęte nie z powodu kosztu ani czytelności.

   `.why__item` NIE wchodzi, choć ma w `fundacja.html` komplet reguł: nie ma dla niej
   ani jednego elementu w markupie ani w JS-ie tej strony. Martwy selektor zastany,
   nie dokładamy do niego warstwy. `.stats` i `.member` powstają z JS-u
   (`live-stats.js`, `foundation.js`), więc w kontenerze bez danych ich nie widać –
   reguły są, wejdą w życie na produkcji. */
[data-surface="aero"] .stats,
[data-surface="aero"] .mission__pullquote,
[data-surface="aero"] .pillar,
[data-surface="aero"] .member {
  background: var(--aero-face);
  -webkit-backdrop-filter: var(--aero-blur);
  backdrop-filter: var(--aero-blur);
  border-color: var(--aero-rim);
  box-shadow: var(--aero-inset), var(--aero-drop);
}
[data-surface="aero"] .pillar:hover,
[data-surface="aero"] .member:hover { border-color: var(--a-teal-35); }

/* B2 – użytkownik prosi o mniej przezroczystości (macOS „Reduce transparency",
   Windows „Efekty przezroczystości: wył."). Rozmycie tła jest dokładnie tym, czego
   to ustawienie ma nie być, więc tafla robi się nieprzezroczysta. Rozbłysk, obrys
   i cień zostają – one nie są przezroczystością, tylko rysunkiem krawędzi.
   To ten sam stan co fallback @supports niżej; reguła musi być osobna, bo warunki
   są rozłączne (przeglądarka może umieć backdrop-filter i mieć wyłączone efekty). */
@media (prefers-reduced-transparency: reduce) {
  [data-surface="aero"] .well__block,
  [data-surface="aero"] .rail__group,
  [data-surface="aero"] .tile-card:not([class*="tile-card--"]),
  [data-surface="aero"] .cal-month,
  [data-surface="aero"] .wellbeing__box,
  [data-surface="aero"] .member,
  [data-surface="aero"] .art-related-card,
  [data-surface="aero"] .art-end-cta,
  [data-surface="aero"] .art-card,
  [data-surface="aero"] .expert-card,
  [data-surface="aero"] .src,
  [data-surface="aero"] .cal-cell,
  [data-surface="aero"] .cal-wd,
  [data-surface="aero"] .kal-month,
  [data-surface="aero"] .kal-stats,
  [data-surface="aero"] .kal-analiz-cta,
  [data-surface="aero"] .course,
  [data-surface="aero"] .event,
  [data-surface="aero"] .stats,
  [data-surface="aero"] .pillar,
  [data-surface="aero"] .ticker,
  [data-surface="aero"] .databar,
  [data-surface="aero"] .nav,
  [data-surface="aero"] .topbar,
  [data-surface="aero"] .expand-btn,
  [data-surface="aero"] .cat-card,
  [data-surface="aero"] .support-card,
  [data-surface="aero"] .expert,
  [data-surface="aero"] .newsletter,
  [data-surface="aero"] .art-card,
  [data-surface="aero"] .expert-card,
  [data-surface="aero"] .src,
  [data-surface="aero"] .legal__toc,
  [data-surface="aero"] .cal-cell,
  [data-surface="aero"] .cal-wd,
  [data-surface="aero"] .kal-month,
  [data-surface="aero"] .kal-stats,
  [data-surface="aero"] .kal-analiz-cta,
  [data-surface="aero"] .course,
  [data-surface="aero"] .art-related-card,
  [data-surface="aero"] .art-end-cta,
  [data-surface="aero"] .mod-header,
  [data-surface="aero"] .event,
  [data-surface="aero"] .stats,
  [data-surface="aero"] .mission__pullquote,
  [data-surface="aero"] .pillar,
  [data-surface="aero"] .member {
    background: var(--card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  [data-surface="aero"] .cal-month summary:hover,
  [data-surface="aero"] .expand-btn:hover,
  [data-surface="aero"] .cat-card:hover { background: var(--a-teal-04); }
  /* Okno na kolaż (etap 1) też jest przezroczystością – pod tą prośbą znika: ::before
     bez treści, karta zostaje na nieprzezroczystym --card-bg z obrysem i cieniem wyżej.
     Krawędź i grubość (etap 2) zostają, bo są rysunkiem, nie prześwitem. Odblask od
     kursora (etap 6) też znika razem z ::before. Selektory = lista okna. */
  [data-surface="aero"] .well__block::before,
  [data-surface="aero"] .rail__group::before,
  [data-surface="aero"] .cal-month::before,
  [data-surface="aero"] .wellbeing__box::before,
  [data-surface="aero"] .member::before,
  [data-surface="aero"] .art-related-card::before,
  [data-surface="aero"] .art-end-cta::before,
  [data-surface="aero"] .art-card::before,
  [data-surface="aero"] .cal-grid-wrap::before,
  [data-surface="aero"] .page-header--band::before,
  [data-surface="aero"] .expert-card::before,
  [data-surface="aero"] .src::before,
  [data-surface="aero"] .kal-month::before,
  [data-surface="aero"] .kal-stats::before,
  [data-surface="aero"] .kal-analiz-cta::before,
  [data-surface="aero"] .course::before,
  [data-surface="aero"] .event::before,
  [data-surface="aero"] .stats::before,
  [data-surface="aero"] .pillar::before,
  [data-surface="aero"] .ticker::before,
  [data-surface="aero"] .databar::before,
  [data-surface="aero"] .nav::before,
  [data-surface="aero"] .topbar::before,
  [data-surface="aero"] .expand-btn::before,
  [data-surface="aero"] .cat-card::before,
  [data-surface="aero"] .support-card::before,
  [data-surface="aero"] .expert::before,
  [data-surface="aero"] .newsletter::before { content: none; }
  /* Szkło (etap 16) to to samo okno – znika razem z nim. */
  [data-surface="aero"].aero-szklo .aero-glass { display: none; }
}

/* Brak wsparcia backdrop-filter (starsze WebKit-y, Firefox z wyłączonym
   layout.css.backdrop-filter): tafla musi być nieprzezroczysta, inaczej przez kartę
   prześwituje zdjęcie tła i tekst traci kontrast. Ta sama sytuacja co w motywie
   ciemnym, więc to samo rozwiązanie. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-surface="aero"] .well__block,
  [data-surface="aero"] .rail__group,
  [data-surface="aero"] .tile-card:not([class*="tile-card--"]),
  [data-surface="aero"] .cal-month,
  [data-surface="aero"] .wellbeing__box,
  [data-surface="aero"] .member,
  [data-surface="aero"] .art-related-card,
  [data-surface="aero"] .art-end-cta,
  [data-surface="aero"] .art-card,
  [data-surface="aero"] .expert-card,
  [data-surface="aero"] .src,
  [data-surface="aero"] .cal-cell,
  [data-surface="aero"] .cal-wd,
  [data-surface="aero"] .kal-month,
  [data-surface="aero"] .kal-stats,
  [data-surface="aero"] .kal-analiz-cta,
  [data-surface="aero"] .course,
  [data-surface="aero"] .event,
  [data-surface="aero"] .stats,
  [data-surface="aero"] .pillar,
  [data-surface="aero"] .ticker,
  [data-surface="aero"] .databar,
  [data-surface="aero"] .nav,
  [data-surface="aero"] .topbar,
  [data-surface="aero"] .expand-btn,
  [data-surface="aero"] .cat-card,
  [data-surface="aero"] .support-card,
  [data-surface="aero"] .expert,
  [data-surface="aero"] .newsletter,
  [data-surface="aero"] .art-card,
  [data-surface="aero"] .expert-card,
  [data-surface="aero"] .src,
  [data-surface="aero"] .legal__toc,
  [data-surface="aero"] .cal-cell,
  [data-surface="aero"] .cal-wd,
  [data-surface="aero"] .kal-month,
  [data-surface="aero"] .kal-stats,
  [data-surface="aero"] .kal-analiz-cta,
  [data-surface="aero"] .course,
  [data-surface="aero"] .art-related-card,
  [data-surface="aero"] .art-end-cta,
  [data-surface="aero"] .mod-header,
  [data-surface="aero"] .event,
  [data-surface="aero"] .stats,
  [data-surface="aero"] .mission__pullquote,
  [data-surface="aero"] .pillar,
  [data-surface="aero"] .member {
    background: var(--card-bg);
    box-shadow: var(--aero-inset), var(--aero-drop);
  }
  /* Hover w fallbacku ma ten sam problem co na tafli: `background: var(--card-bg)` wyżej
     jest późniejsze od reguł `:hover` z inline. Tu tint wraca zwyczajnie, bo tafla jest
     nieprzezroczysta i nie ma czego nakładać warstwami. */
  [data-surface="aero"] .cal-month summary:hover,
  [data-surface="aero"] .expand-btn:hover,
  [data-surface="aero"] .cat-card:hover { background: var(--a-teal-04); }
  [data-surface="aero"] .expand-btn:hover { border-color: var(--a-teal-35); }
  [data-surface="aero"] .tile-card:not([class*="tile-card--"]):hover { border-color: var(--a-teal-25); }
}

/* Motyw ciemny – decyzja B: --aero-blur to `none`, więc backdrop-filter wyżej nic
   nie robi i tafla jest nieprzezroczysta z samego --aero-face. Nie potrzeba tu
   ani jednej dodatkowej reguły; uzasadnienie pomiarowe stoi w tokens.css. */

/* ═══ SZKŁO – BLOKERY, etap 16, 2026-09-19 ═══════════════════════════════════════════
   Warstwa fixed w szkle (blok „SZKŁO" wyżej) ustawia się względem okna przeglądarki tylko
   wtedy, gdy ani karta, ani żaden przodek nie jest dla niej blokiem zawierającym. Sonda na
   dziewięciu stronach (2026-09-19) znalazła dwa takie miejsca, oba zdejmowane tu, na końcu
   pliku, bo muszą przykryć reguły podstron wyżej – i tylko od progu, bo tylko tam jest okno.

   1. `backdrop-filter` na kartach, na których reguły podstron (etapy A–E, `.expert-card`,
      `.src`, `.course`, `.kal-*`, `.art-related-card`, `.art-end-cta`, `.stats`, `.pillar`,
      `.member`) stoją niżej niż lista okna i przywracały rozmycie. Pod oknem nie było go
      widać – kryjące okno zasłania wnętrze, rozmycie zostawało tylko w 1-pikselowej ramce –
      a liczyło się w każdej klatce przewijania. Poniżej progu rozmycie zostaje (tam nie ma okna).
   2. `content-visibility: auto` na sekcjach portal.html, w których siedzą karty z oknem
      (portal.html, blok „PERFORMANCE"). Robi z sekcji blok zawierający (paint containment).
      Koszt zdjęcia zmierzony osobno: +35 ms wątku głównego przy wczytaniu portal.html.
      Całe wczytanie i tak nie drgnęło (607 / 629 → 521 / 603 ms, LCP 264 / 276 → 244 / 288 ms),
      bo zniknęła praca, którą aero.js wykonywał zaraz po nim.
      `.paths`, `.match` i `.contact` kart z oknem nie mają i zostają przy `auto`.
   Nowa karta z oknem w sekcji z content-visibility albo nowa reguła z transform/filter nad
   kartą wyjdzie w tools/e2e/tests/aero-okno.spec.mjs. */
@media (hover: hover) and (min-width: 1024px) {
  [data-surface="aero"] :is(
    .well__block, .rail__group, .cal-month, .wellbeing__box, .member, .art-related-card,
    .art-end-cta, .art-card, .cal-grid-wrap, .page-header--band, .expert-card, .src, .kal-month,
    .kal-stats, .kal-analiz-cta, .course, .event, .stats, .pillar, .ticker, .databar, .nav,
    .topbar, .expand-btn, .cat-card, .support-card, .expert, .newsletter, main#main > .wrap
  ) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  [data-surface="aero"] :is(.section.events, .section.experts, .section.support, .section.wellbeing, .section.about) {
    content-visibility: visible;
  }
}