/* Wspólna warstwa motywu dla całego GOTÓW.
 *
 * PO CO. Strony powstają z pięćdziesięciu generatorów i każdy niósł własną paletę —
 * 98 miejsc z własnym `:root`. Wyszły z tego dwie różne linie kolorystyczne: ciepła
 * granatowo-złota na stronach publicznych i chłodna szaro-niebieska na diecezjalnych.
 * Ten plik ustawia JEDNĄ paletę i przekłada na nią wszystkie dotychczasowe nazwy
 * zmiennych, więc strony nie muszą być przepisywane, a mimo to wyglądają jak rodzeństwo.
 *
 * JAK TO DZIAŁA. Plik jest wczytywany jako ostatni w <head>, więc przy równej sile
 * selektora wygrywa z paletą wpisaną w stronę. Nazwy dotychczasowe (--navy, --gold,
 * --brand, --surface…) nie znikają — wskazują na wspólne barwy.
 *
 * TRZY UKŁADY: jasny, ciemny i telefon. Jasny i ciemny to barwy; telefon to szerokość —
 * strona składa się w jedną kolumnę i dostaje większe pola do kliknięcia, niezależnie
 * od tego, na czym jest oglądana. Wybór trzyma się w przeglądarce (motyw.js).
 */

/* ── barwy wspólne: motyw jasny ─────────────────────────────────────────────── */
:root,
:root[data-motyw="jasny"],
:root[data-theme="light"] {
  /* ── TŁO: JASNY BŁĘKIT, NIE KOŚĆ SŁONIOWA ─────────────────────────────────
   * Zmiana z 27.08.2026, polecenie ks. Andrzeja: „więcej żółtego, a nie
   * granatowego przy KSM-owskim", „więcej niebieskiego jasnego". Ciepła kość
   * słoniowa ciągnęła cały GOTÓW w stronę pergaminu; żółć Pantone 116 na
   * niej gasła, bo obie barwy są ciepłe i o zbliżonej jasności. Na chłodnym
   * błękicie żółć wreszcie prowadzi.
   *
   * Barwy sprawdzone rachunkiem przed wpisaniem — nie na oko:
   *   pismo #1a2b45 na tle strony  12,78:1
   *   pismo drugie #44546f          6,87:1
   *   pismo słabe #5b6779           5,15:1  (na plansza-2 nadal 4,60:1)
   * Wszystkie powyżej progu 4,5:1. */
  --t-tlo: #eef3fb;             /* tło strony — jasny błękit */
  --t-plansza: #ffffff;         /* karty, tabele, wszystko wyniesione */
  --t-plansza-2: #dde7f5;       /* drugi poziom: pigułki, nagłówki tabel */
  /* Trzy ekrany pisały `var(--t-tlo-2, …)`, a takiej zmiennej nigdy nie było —
     więc zawsze brały wartość zapasową, kremową. W motywie ciemnym wychodziło
     z tego białe pismo na kremowym tle, 1,02:1. Alias zamyka tę dziurę. */
  --t-tlo-2: var(--t-plansza-2);
  --t-plansza-3: #cddef2;
  --t-tekst: #1a2b45;
  /* Pola formularzy: tło i pismo zawsze z tej samej pary — inaczej przy
     motywie ciemnym powstaje biały tekst na białym tle. */
  --t-pole-tlo: #ffffff;
  --t-pole-tekst: #1a2b45;
  --t-pole-brzeg: #c9d9ee;
  --t-zazn-tlo: #FFC20E;        /* Pantone 116 — żółć KSM */
  --t-zazn-tekst: #17120a;      /* 12,40:1 na żółci — było 10,26:1 na starym złocie */
  --t-tekst-2: #44546f;
  /* Podniesione z #626e80: na jasnoniebieskiej planszy drugiego poziomu
     stary odcień dawał 4,14:1, czyli poniżej progu. Teraz 4,60:1. */
  --t-slaby: #5b6779;
  /* DWIE GRUBOŚCI KRESKI, BO SŁUŻĄ DO CZEGO INNEGO.
   * `--t-linia` to obwódka ozdobna: karta i tak odcina się tłem oraz cieniem,
   * więc kreska tylko domyka kształt. `--t-linia-mocna` obrysowuje rzeczy,
   * które trzeba ROZPOZNAĆ — pola formularza, przełączniki, granice tabel —
   * i te muszą mieć 3:1 według WCAG 2.1 (1.4.11). Zrównanie obu zamieniłoby
   * jasny motyw w siatkę oliwkowych kresek bez pożytku dla czytelności. */
  --t-linia: #c9d9ee;
  /* Stara oliwkowa kreska nie spełniała własnego wymogu: 2,93:1 na tle
     strony przy wymaganych 3:1 (WCAG 1.4.11). Nowa daje 3,47:1 na tle
     strony, 3,10:1 na planszy drugiego poziomu i 3,87:1 na bieli. */
  --t-linia-mocna: #5f83b8;
  /* ── GRANAT Z ROZSTRZYGNIĘCIA KS. ANDRZEJA, 21.09.2026 ────────────────────
   * Granat panelu przestaje być przypadkowym #0b2242, którego w księdze
   * identyfikacji nie ma. Jest nim teraz NIEBIESKI Z KSIĘGI (Pantone 287,
   * #0057A8) przyciemniony — ten sam kolor, tylko ciemniejszy, a nie nowa
   * barwa. Trzy stopnie, każdy ma swoje miejsce:
   *     #002a52  pas nagłówka            (biel na nim 14,45:1)
   *     #00203d  tło odsłony ciemnej     (biel na nim 16,48:1)
   *     #001529  pierścień pod obwódką   (biel na nim 18,43:1)
   * Żółć z księgi #FFC20E na #002a52 daje 8,93:1, a na bieli 1,62:1 —
   * i stąd bierze się zasada o złocie, spisana niżej. */
  --t-marka: #002a52;           /* granat KSM — powierzchnia: pas nagłówka, hero */
  --t-marka-3: #001529;         /* najciemniejszy stopień — pierścienie, znaczki */
  --t-marka-2: #003c74;         /* drugi stopień granatu — biel 11,06:1 */
  --t-marka-jasna: #0057A8;     /* niebieski z księgi, Pantone 287 */
  /* Marka jako TEKST na jasnym tle to wprost niebieski z księgi: 7,17:1 na
     bieli i 6,44:1 na tle strony. Nie trzeba go zastępować — trzeba go użyć
     tam, gdzie jest sobą. */
  --t-akcent-tekst: #0057A8;    /* Pantone 287 — marka jako TEKST na jasnym tle */
  --t-akcent-tekst-2: #006cd1;  /* ten sam odcień jaśniej — 5,17:1 na bieli */
  /* Nagłówek pisany granatem. Osobna zmienna, bo granat nagłówka ma w motywie
   * jasnym zostać dokładnie taki, jaki był (#0b2242), a w ciemnym rozjaśnić się
   * do czytelnego błękitu. `--t-akcent-tekst` się do tego nie nadaje: służy
   * odnośnikom i jest w motywie jasnym wyraźnie jaśniejszy od granatu. */
  --t-naglowek: #002a52;        /* 14,45:1 na bieli, 12,97:1 na tle strony */
  /* Żółć Pantone 116 zamiast dawnego złota #f7b500. Jedno wystąpienie, nie
     dwa: wcześniej `--t-akcent` deklarowano tu i wyżej (#b8860b), więc górny
     wpis był martwy i mylił każdego, kto go czytał. */
  --t-akcent: #FFC20E;          /* żółć KSM, Pantone 116 — TYLKO płaszczyzna */
  --t-obwodka: #001529;        /* pierścień pod żółcią — 18,43:1 na bieli */
  --t-akcent-2: #ffe066;
  /* ── BARWY Z KSIĘGI IDENTYFIKACJI — NIENARUSZALNE ─────────────────────────
   * Trzy barwy i jeden krój. Stoją tu pod własnymi nazwami, żeby nikt nie
   * musiał ich szukać po plikach i żeby godło oraz pieczątka brały je wprost. */
  --t-ksiega-zolty:     #FFC20E;   /* Pantone 116 */
  --t-ksiega-niebieski: #0057A8;   /* Pantone 287 */
  --t-ksiega-czerwony:  #E4032E;   /* Pantone 185 — godło i pieczątka */
  /* ── ZŁOTO JAKO PISMO NA JASNYM TLE ───────────────────────────────────────
   * Ten sam odcień i nasycenie co żółć z księgi (44,8°, 100 %), tylko
   * jasność 26 % zamiast 53 %. Daje 5,55:1 na bieli i 4,98:1 na tle strony.
   * Żółci z księgi do pisma na jasnym NIE WOLNO — ma 1,62:1. */
  --t-zloto-pismo: #856300;
  /* PISMO NA ŻÓŁCI — ciemne w OBU motywach, bo żółć jest jasna zawsze.
   * Pomiar na stronie głównej: przycisk „Zaloguj się" pisany
   * `var(--t-naglowek)` w motywie ciemnym rozjaśniał się do #d8e6fa
   * i dawał na żółci 1,28:1. #001529 daje 11,39:1. */
  --t-akcent-na: #001529;
  --t-ok: #1c7a4a;
  --t-ok-tlo: #e6f4ec;
  --t-uwaga: #8a5c00;      /* 4,5:1 na --t-uwaga-tlo */
  --t-uwaga-tlo: #fdf3dd;
  --t-zle: #b3261e;
  --t-zle-tlo: #fdeceb;
  --t-cien: 0 1px 2px rgba(11,34,66,.06), 0 8px 24px rgba(11,34,66,.07);
  --t-cien-mocny: 0 10px 34px rgba(11,34,66,.16);
  --t-promien: 14px;
  --t-promien-maly: 9px;
  color-scheme: light;
}

/* ── motyw ciemny ───────────────────────────────────────────────────────────── */
/* Nie jest to jasny motyw z odwróconą jasnością. Granat zostaje rodziną barw, ale
 * marka musi rozjaśnieć — granat #0b2242 na ciemnym tle byłby nieczytelny. */
/* ── DWIE NAZWY TEGO SAMEGO WYBORU ────────────────────────────────────────────
 * GOTÓW ma dwa niezależne mechanizmy motywu: `motyw.js` ustawia na <html>
 * atrybut `data-motyw` (jasny|ciemny|auto), a wstrzykiwany przez serwer
 * STYL_INIT ustawia `data-theme` (light|dark) z ciasteczka `ksm_styl`.
 *
 * Do 27.08.2026 ten plik słuchał tylko pierwszego. Skutek był taki, że na
 * ekranie, który ma własne barwy pod `data-theme="dark"` i NIE wciąga
 * `motyw.js` — na przykład w podręczniku — tło robiło się ciemne, a barwy
 * z tego pliku zostawały jasne. Wychodziło pismo #44546f na tle #0d1829,
 * czyli 2,33:1 przy progu 4,5:1: cytat z Ewangelii nieczytelny.
 *
 * Dlatego oba atrybuty prowadzą do tych samych barw. Jeden wybór, dwie nazwy. */
:root[data-motyw="ciemny"],
:root[data-theme="dark"] {
  --t-tlo: #00203d;             /* tło odsłony ciemnej z rozstrzygnięcia */
  --t-plansza: #002a52;         /* karta — #f2f5fa na niej 13,23:1 */
  --t-plansza-2: #00386b;       /* pasmo — #f2f5fa 10,81:1, #9aa5b8 4,75:1 */
  --t-tlo-2: #00386b;
  --t-plansza-3: #00457f;       /* wgłębienie — #f2f5fa 8,91:1 */
  --t-tekst: #f2f5fa;
  --t-tekst-2: #cfd8e6;
  --t-pole-tlo: #001b34;
  --t-pole-tekst: #f2f5fa;
  /* Brzeg pola trzeba ROZPOZNAĆ (WCAG 1.4.11, próg 3:1). Stary #2c3a4e na
     polu #16202e dawał 1,40:1 — pole było niewidoczne, dopóki się w nie nie
     kliknęło. #7fa8d8 na #001b34 daje 7,22:1. */
  --t-pole-brzeg: #7fa8d8;
  --t-zazn-tlo: #ffd75e;
  --t-zazn-tekst: #001529;
  --t-slaby: #9aa5b8;
  --t-linia: rgba(255,255,255,.22);
  --t-linia-mocna: rgba(255,255,255,.55);
  /* Powierzchnia marki zostaje ciemna także w motywie ciemnym. Rozjaśnienie granatu
     zamieniało pasek nagłówka w jasnoniebieską wstęgę z białym tekstem — dokładnie to,
     czego motyw ciemny ma nie robić. Rozjaśnia się natomiast marka użyta jako TEKST,
     bo granat na ciemnym tle jest nieczytelny. */
  --t-marka: #001529;           /* pas nagłówka w nocy — biel 18,43:1 */
  --t-marka-2: #002a52;
  --t-marka-3: #001529;
  --t-marka-jasna: #8fbcf5;
  --t-naglowek: #d8e6fa;
  --t-akcent-tekst: #8fbcf5;
  --t-akcent-tekst-2: #b3d3fb;
  --t-akcent: #FFC20E;          /* żółć z księgi — 10,18:1 na tle nocnym */
  --t-obwodka: #ffffff;        /* na ciemnym tle obwódka musi być jasna */
  --t-ksiega-zolty: #FFC20E;  --t-ksiega-niebieski: #0057A8;  --t-ksiega-czerwony: #E4032E;
  --t-zloto-pismo: #FFC20E;    /* w nocy złoto MOŻE być pismem: 10,18:1 */
  /* PISMO NA ŻÓŁCI — ciemne w OBU motywach, bo żółć jest jasna zawsze.
   * Pomiar na stronie głównej: przycisk „Zaloguj się" pisany
   * `var(--t-naglowek)` w motywie ciemnym rozjaśniał się do #d8e6fa
   * i dawał na żółci 1,28:1. #001529 daje 11,39:1. */
  --t-akcent-na: #001529;
  --t-akcent-2: #ffdf85;
  --t-ok: #6ee7a8;
  --t-ok-tlo: rgba(110,231,168,.12);
  --t-uwaga: #ffd27a;
  --t-uwaga-tlo: rgba(255,210,122,.12);
  --t-zle: #ff9d92;
  --t-zle-tlo: rgba(255,157,146,.12);
  --t-cien: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
  --t-cien-mocny: 0 10px 34px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ── WERSJA PATRIOTYCZNA — BIAŁO-CZERWONA ────────────────────────────────────
 *
 * Ks. Andrzej, 29.08.2026: „możesz zrobić trzy wersje kolorystyczne: ciemne,
 * jasne i biało-czerwone" oraz „patriotyczny biało-czerwony, ale taki
 * ostrzejszy" — i, o całym GOTÓW: „wszystkie: jasny, ciemny
 * i patriotyczny".
 *
 * PO CO. Są dni, w których strona ma mówić o Ojczyźnie, zanim ktokolwiek
 * przeczyta pierwsze zdanie: Święto Niepodległości i start „Polaka z Sercem"
 * 11 listopada, uroczystość Chrystusa Króla, rocznice narodowe.
 *
 * OSTRO, NIE DELIKATNIE. Biel czysta, bez ciepła. Czerwień rozdzielona
 * na dwie: #d81e34 na płaszczyznach i #b3081f na tekście — ta druga daje
 * na bieli 7,4:1 zamiast 4,6:1, więc zdanie napisane marką jest naprawdę
 * czytelne, a nie „jeszcze się mieści". Linie mocniejsze niż w wersji jasnej,
 * bo delikatny obrys w tych barwach ginie.
 *
 * ŻÓŁĆ ZOSTAJE ŻÓŁCIĄ. Zaznaczenia i akcenty biorą dalej żółć z godła KSM —
 * to jest barwa Stowarzyszenia i nie ustępuje przed barwami flagi. Trzy barwy
 * na ekranie to komplet: biel, czerwień, żółć tarczy. */
:root[data-motyw="patriotyczny"] {
  --t-tlo: #ffffff;
  --t-plansza: #ffffff;
  --t-plansza-2: #fdeef0;
  --t-tlo-2: #fdeef0;
  --t-plansza-3: #f9dde1;
  --t-tekst: #0d0d0d;
  --t-tekst-2: #3a3a3a;
  --t-pole-tlo: #ffffff;
  --t-pole-tekst: #0d0d0d;
  --t-pole-brzeg: #e3aab3;
  --t-zazn-tlo: #FFC20E;
  --t-zazn-tekst: #17120a;
  --t-slaby: #4a4a4a;
  --t-linia: #e8b5bd;
  --t-linia-mocna: #b3081f;
  --t-marka: #d81e34;          /* powierzchnia: nagłówki, pasy, hero */
  --t-marka-2: #b3081f;
  --t-marka-jasna: #ff6b7d;
  --t-naglowek: #b3081f;
  --t-akcent-tekst: #b3081f;   /* marka jako TEKST — 7,4:1 na bieli */
  --t-akcent-tekst-2: #8f0518;
  --t-akcent: #FFC20E;
  --t-obwodka: #001529;
  --t-akcent-2: #ffe066;
  --t-ksiega-zolty: #FFC20E;  --t-ksiega-niebieski: #0057A8;  --t-ksiega-czerwony: #E4032E;
  --t-zloto-pismo: #856300;
  /* PISMO NA ŻÓŁCI — ciemne w OBU motywach, bo żółć jest jasna zawsze.
   * Pomiar na stronie głównej: przycisk „Zaloguj się" pisany
   * `var(--t-naglowek)` w motywie ciemnym rozjaśniał się do #d8e6fa
   * i dawał na żółci 1,28:1. #001529 daje 11,39:1. */
  --t-akcent-na: #001529;
  --t-marka-3: #001529;
  --t-ok: #14683d;
  --t-ok-tlo: #e4f3ea;
  --t-uwaga: #8a5c00;
  --t-uwaga-tlo: #fdf3dd;
  --t-zle: #b3081f;
  --t-zle-tlo: #fdeceb;
  --t-cien: 0 1px 2px rgba(179,8,31,.1), 0 8px 24px rgba(179,8,31,.12);
  --t-cien-mocny: 0 10px 34px rgba(179,8,31,.22);
  color-scheme: light;
}
/* Cienki pas flagi u góry strony — znak, że to ten dzień, a nie inny.
   Cztery piksele: widać, a nie przeszkadza. */
:root[data-motyw="patriotyczny"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9998;
  background: linear-gradient(to bottom, #fff 0 50%, #d81e34 50% 100%);
  box-shadow: 0 1px 0 rgba(179,8,31,.35); pointer-events: none;
}

/* Gdy nikt nic nie wybrał, idziemy za ustawieniem systemu. */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-motyw="ciemny"]):not([data-theme="light"]):not([data-theme="dark"]) {
    --t-tlo: #00203d;
    --t-plansza: #002a52;
    --t-plansza-2: #00386b;
    --t-tlo-2: #00386b;
    --t-plansza-3: #00457f;
    --t-tekst: #f2f5fa;
    --t-tekst-2: #cfd8e6;
    --t-pole-tlo: #001b34;
    --t-pole-tekst: #f2f5fa;
    --t-pole-brzeg: #7fa8d8;
    --t-zazn-tlo: #ffd75e;
    --t-zazn-tekst: #001529;
    --t-slaby: #9aa5b8;
    --t-linia: rgba(255,255,255,.22);
  --t-linia-mocna: rgba(255,255,255,.55);
    --t-marka: #001529;
    --t-marka-2: #002a52;
    --t-marka-3: #001529;
    --t-marka-jasna: #8fbcf5;
    --t-naglowek: #d8e6fa;
  --t-akcent-tekst: #8fbcf5;
    --t-akcent-tekst-2: #b3d3fb;
    --t-akcent: #FFC20E;
    --t-obwodka: #ffffff;
    --t-ksiega-zolty: #FFC20E;  --t-ksiega-niebieski: #0057A8;  --t-ksiega-czerwony: #E4032E;
    --t-zloto-pismo: #FFC20E;
    --t-akcent-na: #001529;
    --t-akcent-2: #ffdf85;
    --t-ok: #6ee7a8;
    --t-ok-tlo: rgba(110,231,168,.12);
    --t-uwaga: #ffd27a;
    --t-uwaga-tlo: rgba(255,210,122,.12);
    --t-zle: #ff9d92;
    --t-zle-tlo: rgba(255,157,146,.12);
    --t-cien: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --t-cien-mocny: 0 10px 34px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

/* ── przekład dotychczasowych nazw ──────────────────────────────────────────── */
/* Tu spinają się obie rodziny kolorów. Strona pisana w nazwach „navy/gold/cream"
 * i strona pisana w „brand/surface/plane" dostają te same barwy. Żaden generator nie
 * musi być z tego powodu ruszany. */
/* SIŁA SELEKTORA CELOWO ZEROWA — `:where()`.
 *
 * Ten blok jest siecią bezpieczeństwa dla stron, które własnej palety ciemnej
 * nie mają. Dopóki stało tu `:root, :root[data-motyw]`, wygrywał ze WSZYSTKIM,
 * co strona ma u siebie — a 121 stron paneli ma własny motyw ciemny pod
 * `[data-theme="dark"]`, z poprawnie rozjaśnionym `--navy:#c9d6ec`.
 * Warstwa zgodności przywracała im ciemny granat jako kolor tekstu, więc
 * nagłówki wychodziły ciemnym po ciemnym: zmierzone 1,03:1 przy wymaganych 4,5:1.
 *
 * To była właściwa przyczyna zgłoszenia „tryb nocny nieczytelny" — nie paleta,
 * tylko to, że wspólna warstwa odbierała stronom ich własne barwy nocne.
 *
 * `:where()` nie wnosi siły selektora, więc każda reguła strony wygrywa,
 * a tam, gdzie strona nic nie mówi, zostaje wspólna paleta. */
:where(:root) {
  --navy: var(--t-marka);        --navy2: var(--t-marka-2);
  --gold: var(--t-akcent);       --gold2: var(--t-akcent-2);
  --zloto: var(--t-akcent);
  --cream: var(--t-tlo);         --tlo: var(--t-tlo);      --plane: var(--t-tlo);
  --ink: var(--t-tekst);         --tekst: var(--t-tekst);  --ink-2: var(--t-tekst-2);
  --muted: var(--t-slaby);
  --line: var(--t-linia);        --linia: var(--t-linia);
  --card: var(--t-plansza);      --surface: var(--t-plansza);
  --chip: var(--t-plansza-2);    --surface-2: var(--t-plansza-2);
  --surface-3: var(--t-plansza-3);
  /* Rozróżnienie, na którym wykładała się pierwsza wersja: te same nazwy służyły raz
     za tło (pasek, hero), raz za kolor tekstu (nagłówki, odnośniki). Tło ma zostać
     ciemne zawsze, tekst musi się odwracać razem z motywem. */
  --brand: var(--t-akcent-tekst);  --brand-2: var(--t-akcent-tekst-2);
  --s1: var(--t-akcent-tekst-2);   --s2: var(--t-akcent-tekst);  --s3: var(--t-marka);
  --hero: var(--t-marka);
  --ok: var(--t-ok);             --warn: var(--t-uwaga);   --no: var(--t-zle);
  --zle: var(--t-zle);           --zle-tlo: var(--t-zle-tlo);
  /* Nazwy używane przez ekrany dopisane w sierpniu 2026 — „moje konto", wnioski
     o zwrot, skrzynki instytucji, informator, współpraca z asystentami. Bez nich
     wchodziły ich własne wartości zapasowe, zawsze jasne, także w motywie ciemnym. */
  --papier: var(--t-plansza);    --pole: var(--t-pole-tlo);
  --brzeg: var(--t-linia);       --glebia: var(--t-tekst-2);
  --alarm: var(--t-zle);         --zgoda: var(--t-ok);
}

/* ── ratunek dla stron pisanych twardymi kolorami ───────────────────────────── */
/* Część stron powstała, zanim istniały zmienne, i ma wpisane wprost `background:#fff`
 * albo `color:#0b2242`. W motywie ciemnym taka karta świeciłaby bielą. Poniżej sieć
 * bezpieczeństwa: najczęstsze twarde barwy przestawiamy na wspólne. Nie zastąpi to
 * porządnego przepisania stylów, ale sprawia, że ciemny motyw jest używalny wszędzie,
 * a nie tylko tam, gdzie ktoś o nim pomyślał. */
:root[data-motyw="ciemny"] body,
:root[data-theme="dark"] body { background: var(--t-tlo); color: var(--t-tekst); }
:root[data-motyw="ciemny"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-motyw="ciemny"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-motyw="ciemny"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background: #fff"] { background: var(--t-plansza) !important; }
/* PARY KOLORÓW SIĘ NIE ROZRYWA.
 *
 * Ta reguła rozjaśnia granatowy tekst wpisany w atrybut `style`, bo w ciemnym
 * motywie stałby ciemny na ciemnym. Ale gdy ktoś ustawił w tym samym atrybucie
 * TAKŻE tło, para jest przemyślana — granat na żółtym przycisku, granat na
 * złotym kaflu — i podmiana samego koloru robi z niej biel na żółtym.
 *
 * Wyszło 28.08.2026, gdy ciemny motyw zaczął w ogóle działać: pasek „Zobacz
 * i załatw" na KAŻDYM ekranie panelu miał kontrast 1,19 — tekst niewidoczny.
 * Wcześniej nikt tego nie zobaczył, bo ciemny motyw nie włączał się nigdy.
 *
 * Dlatego: podmieniamy kolor tylko tam, gdzie autor NIE ustawił własnego tła. */
:root[data-motyw="ciemny"] [style*="color:#0b2242"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color:#0b2242"]:not([style*="background"]),
/* 21.09.2026 — nowy granat z rozstrzygnięcia. Stare wzorce zostają, bo
   9 na 10 stron dalej nosi #0b2242 i będzie go nosić do końca migracji. */
:root[data-motyw="ciemny"] [style*="color:#002a52"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color:#002a52"]:not([style*="background"]),
:root[data-motyw="ciemny"] [style*="color:#1a2b45"]:not([style*="background"]),
:root[data-theme="dark"] [style*="color:#1a2b45"]:not([style*="background"]) {
  color: var(--t-tekst) !important;
}

/* BIEL JEST WYJĄTKIEM OD WYJĄTKU.
 *
 * Reguła wyżej zostawia granat w spokoju, gdy autor ustawił własne tło — bo
 * para „granat na żółtym" jest przemyślana. Ale tło BIAŁE zostaje w ciemnym
 * motywie podmienione na ciemną planszę regułą kilka linijek wyżej — i wtedy
 * granatowy tekst zostaje sam na ciemnym. Tu więc podmieniamy oba: skoro tło
 * przestało być białe, kolor też musi się zmienić.
 *
 * Dotyczy m.in. przycisku „Mój profil" w stopce każdego ekranu panelu. */
:root[data-motyw="ciemny"] [style*="color:#0b2242"][style*="background:#fff"],
:root[data-theme="dark"] [style*="color:#0b2242"][style*="background:#fff"],
:root[data-motyw="ciemny"] [style*="color:#0b2242"][style*="background:#ffffff"],
:root[data-theme="dark"] [style*="color:#0b2242"][style*="background:#ffffff"],
:root[data-motyw="ciemny"] [style*="color:#0b2242"][style*="background: #fff"],
:root[data-theme="dark"] [style*="color:#0b2242"][style*="background: #fff"],
:root[data-motyw="ciemny"] [style*="color:#1a2b45"][style*="background:#fff"],
:root[data-theme="dark"] [style*="color:#1a2b45"][style*="background:#fff"] {
  color: var(--t-tekst) !important;
}

/* ── styl telefonu ─────────────────────────────────────────────────────────── */
/* Zasada: telefon to NIE „wszystko w jednej kolumnie". Rozłożenie kilkunastu ikon
 * jedna pod drugą robi z krótkiej listy kilometrowe przewijanie i gubi rytm strony.
 * Zwężamy więc kafelki i pozwalamy im się układać po kilka w rzędzie, a jedną kolumnę
 * zostawiamy wyłącznie tam, gdzie jest tekst do czytania.
 *
 * Te same reguły działają w dwóch sytuacjach: gdy ktoś wybierze układ telefonu
 * przyciskiem oraz gdy po prostu wejdzie z wąskiego ekranu. Jedno źródło zachowania,
 * więc podgląd pokazuje to, co widać naprawdę na telefonie.
 */
:root[data-uklad="telefon"] body {
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--t-cien-mocny);
  background: var(--t-tlo);
}

/* Ikony i kafle: gęsto, po kilka w rzędzie. */
:root[data-uklad="telefon"] .ikonki-siatka,
:root[data-uklad="telefon"] .kafle,
:root[data-uklad="telefon"] .kpi3 {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
  gap: 8px !important;
}
/* Liczby i wskaźniki: po dwa w rzędzie — czytelne, a nie rozwleczone. */
:root[data-uklad="telefon"] .liczby,
:root[data-uklad="telefon"] .kpi,
:root[data-uklad="telefon"] .poziomy {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}
/* Karty z treścią: jedna, ewentualnie dwie — tu naprawdę trzeba czytać. */
:root[data-uklad="telefon"] .siatka4,
:root[data-uklad="telefon"] .mods,
:root[data-uklad="telefon"] .mapa-box {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
:root[data-uklad="telefon"] .btn,
:root[data-uklad="telefon"] .pigulki button,
:root[data-uklad="telefon"] .mapa-narzedzia button {
  min-height: 44px;             /* dolna granica celu dotykowego */
  font-size: 15px;
}
:root[data-uklad="telefon"] table { font-size: 13px; }
:root[data-uklad="telefon"] .tabela-wrap,
:root[data-uklad="telefon"] .nav3 { overflow-x: auto; }
/* Nagłówek na telefonie zawija się zamiast ściskać podpisy do jednej litery. */
:root[data-uklad="telefon"] .top { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
:root[data-uklad="telefon"] .top > div:last-child { flex-wrap: wrap; gap: 8px; }

/* To samo na wąskim ekranie, bez wybierania czegokolwiek. */
@media (max-width: 640px) {
  .ikonki-siatka, .kafle, .kpi3 {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
  }
  .liczby, .kpi, .poziomy {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
  }
  .siatka4, .mods, .mapa-box { grid-template-columns: 1fr; }
  .btn, .pigulki button, .mapa-narzedzia button { min-height: 44px; }
  .top { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .mapa-narzedzia span:last-child { display: none; }   /* podpowiedź o kółku myszy */
}

/* ── przełącznik motywu ─────────────────────────────────────────────────────── */
.motyw-przel {
  position: fixed; right: 14px; bottom: 14px; z-index: 70;
  display: flex; gap: 3px; padding: 4px;
  background: var(--t-plansza); border: 1px solid var(--t-linia);
  border-radius: 100px; box-shadow: var(--t-cien);
}
.motyw-przel button {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 100px;
  background: transparent; color: var(--t-tekst-2); cursor: pointer;
  font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.motyw-przel button:hover { background: var(--t-plansza-2); }
.motyw-przel button[aria-pressed="true"] { background: var(--t-marka); color: var(--t-plansza); }
:root[data-motyw="ciemny"] .motyw-przel button[aria-pressed="true"] { color: var(--t-tekst); }
/* Dwa pierścienie, jak wszędzie: żółć widać na granacie, granat na jasnym. */
.motyw-przel button:focus-visible { outline: 2px solid var(--t-akcent); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--t-obwodka, #001529); }
@media print { .motyw-przel { display: none } }

/* PASTYLKA MOTYWU A FORMULARZE — poprawka 20.09.2026.
 *
 * Pomiar na telefonie: pastylka stoi na stałe w prawym dolnym rogu i zasłaniała
 * pole „Miejscowość" na ekranie ewidencji członków. Każde pole formularza, które
 * trafi pod nią, jest wtedy nie do przeczytania, a część dotknięć idzie
 * w przełącznik zamiast w pole.
 *
 * Trzy zmiany, żadna nie odbiera funkcji:
 *  1. Przyciski mają 44 × 44 px — tyle, ile wynosi najmniejszy sensowny cel
 *     dotyku. Przedtem 38 px, czyli poniżej progu.
 *  2. Na wąskim ekranie pastylka jest przygaszona, dopóki nikt jej nie dotyka —
 *     widać, co jest pod nią.
 *  3. Gdy człowiek stoi kursorem w polu (wpisuje dane), pastylka gaśnie
 *     i przestaje łapać dotknięcia, więc nie zasłania tego, co się właśnie pisze.
 *     Wraca, gdy pole traci ognisko.
 * Przełącznik zostaje tam, gdzie był — nic nie przenosimy i nic nie chowamy
 * na stałe, bo na stronach publicznych jest jedynym sposobem zmiany motywu.
 */
.motyw-przel { transition: opacity .18s ease; }
.motyw-przel button { width: 44px; height: 44px; }
@media (max-width: 760px) {
  .motyw-przel { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); opacity: .55; }
  .motyw-przel:hover, .motyw-przel:focus-within { opacity: 1; }
}
@supports selector(:has(*)) {
  body:has(input:focus, select:focus, textarea:focus, [contenteditable]:focus) .motyw-przel {
    opacity: .1; pointer-events: none;
  }
}

/* ── mapy w motywie ciemnym ─────────────────────────────────────────────────── */
/* Ramka mapy dostaje tło z barwy regionu wstawianej stylem wprost w element, więc
 * w motywie ciemnym zostawała jasną płytą. Podkłady map też są z natury jasne —
 * przygaszamy je, żeby nie świeciły jak lampa pośrodku ciemnej strony. */
:root[data-motyw="ciemny"] .mapa-svg-wrap {
  background:
    radial-gradient(120% 90% at 18% 8%, color-mix(in srgb, var(--reg-akcent) 20%, transparent), transparent 62%),
    var(--t-plansza);
}
:root[data-motyw="ciemny"] .mapa-svg-wrap svg .pk { filter: saturate(.8) brightness(.68); }
:root[data-motyw="ciemny"] .reg-plakietka {
  background: rgba(22,30,45,.86);
}
:root[data-motyw="ciemny"] .mapa-diec .obraz { background: var(--t-plansza-2); }
:root[data-motyw="ciemny"] .mapa-diec figcaption { background: var(--t-plansza); }

/* Pasy „Polak z Sercem" i „Modlitwa" mają własny arkusz: wspolne/pasy.css.
 * Dociąga go pasy.js — ten sam skrypt, który wstawia ich znaczniki. */


/* ── zakładki poziomów (Kraj · Diecezja · Parafia · KSM · Wspólnoty) ─────────── */
/* Ten sam pasek jest na trzech różnych hostach, budowany przez trzy różne generatory.
 * Wygląd trzymamy tutaj, żeby nie rozjechał się przy najbliższej zmianie w jednym
 * z nich — nawigacja, która wygląda inaczej na każdym poziomie, sprawia wrażenie
 * trzech osobnych serwisów zamiast jednego. */
.nav3{display:flex;gap:6px;overflow-x:auto;padding:2px;align-items:center}
.nav3 a{flex:none;color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;
  padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);white-space:nowrap;line-height:1}
.nav3 a:hover{background:rgba(255,255,255,.24)}
.nav3 a.on{background:#fff;color:var(--t-marka,#002a52);border-color:#fff}
.nav3 a.ikonowy{display:inline-flex;align-items:center;gap:6px}
.nav3 a.ikonowy img{border-radius:3px;display:block}
@media(max-width:640px){
  .nav3 a.ikonowy span:last-child{display:none}
  .nav3 a.ikonowy{padding-left:11px;padding-right:11px}
}

/* Przełącznik motywu jest przyklejony do prawego dolnego rogu okna. Na krótkich
 * stronach potrafił przykryć ostatni przycisk — stąd zapas na dole. Ustawiony
 * zmienną, żeby strona z własną stopką mogła go sobie wyzerować. */
body{padding-bottom:var(--zapas-na-przelacznik,64px)}
@media print{body{padding-bottom:0}}

/* ── TŁO STRONY W MOTYWIE JASNYM I PATRIOTYCZNYM ────────────────────────────
 * Motyw ciemny ma wyżej swoją siatkę bezpieczeństwa (`[data-motyw="ciemny"] body`)
 * i dlatego strona, która sama tła nie maluje, w nocy wygląda poprawnie.
 * Jasny i patriotyczny nie miały żadnej — ta sama strona brała wtedy białe
 * płótno przeglądarki i odcinała się od reszty panelu.
 *
 * ZMIERZONE 6.09.2026 przy 390 px, cztery wersje kolorystyczne:
 *   pliki.html, podglad-rol.html, wydarzenia-braki.html
 *     jasny  rgba(0,0,0,0)   ciemny  rgb(21,29,43)
 *     patri. rgba(0,0,0,0)   auto-ciemny rgb(21,29,43)
 * Dotyczy 3 ekranów z 317 — tylu, ile bierze motyw.css, a tła nie maluje.
 * Pozostałe 7 ekranów bez tła (moje-zadania ×5, prezydium/index, stopka)
 * NIE wczytuje motyw.css w ogóle i ta reguła ich nie dosięga — zgłoszone osobno.
 *
 * SIŁA SELEKTORA CELOWO ZEROWA (`:where`), czyli słabsza niż reguła ciemna.
 * Każda strona, która maluje tło sama, wygrywa i zostaje bez zmian; reguła
 * dokłada tło wyłącznie tam, gdzie nie mówi nic nikt. Sprawdzone przed
 * wpisaniem: ani jeden ekran panelu nie maluje tła na `html` bez `body`,
 * więc nie ma czego przykryć. Ustawiamy samo tło, nie kolor pisma — pismo
 * na tych stronach jest domyślne i czytelne, a mniejsza zmiana mniej ryzykuje. */
:where(body) { background: var(--t-tlo); }

/* ── obrysy, które trzeba rozpoznać ─────────────────────────────────────────── */
/* Pole, w które się wpisuje, musi być widoczne jako pole — WCAG 2.1, 1.4.11
 * (kontrast elementów interfejsu, 3:1). Obwódki ozdobne zostają subtelne. */
/* SIŁA SELEKTORA CELOWO PODNIESIONA. `input` był tu chroniony dwoma `:not()`,
 * ale `textarea` i `select` stały gołe — a wtedy KAŻDA reguła `textarea{border:…}`
 * wpisana w samą stronę wygrywała kolejnością i pole robiło się ledwie widoczne.
 * Zmierzone 4.09.2026 na stronie zapraszającej: obwódka pola „Uwagi" dawała
 * 1,43:1 przy progu 3:1, podczas gdy sąsiednie pola tekstowe — 3,1:1.
 * `:not([hidden])` niczego nie wyklucza (pole ukryte i tak się nie rysuje),
 * a podnosi siłę selektora tak, żeby nie dało się go przypadkiem przebić. */
input:not([type="checkbox"]):not([type="radio"]),
select:not([hidden]), textarea:not([hidden]), .pole, table th, table td {
  border-color: var(--t-linia-mocna, #9c8d6b);
}
/* OBWÓDKA KLAWIATURY — DWA PIERŚCIENIE, NIE JEDEN.
 * Wcześniej obwódką była sama żółć KSM (#ffcd00). Na białym i na jasnym
 * błękicie tła daje ona 1,50:1 przy progu 3:1 — czyli kto chodzi po stronie
 * klawiszem Tab, nie widział, gdzie stoi. Żółci nie zmieniam, bo to barwa
 * z godła (Pantone 116). Kładę pod nią ciemny pierścień: granat czyta się
 * na jasnym tle jak 14:1, biel na ciemnym jak 16:1, a żółć zostaje na wierzchu
 * i dalej mówi, że to KSM. `box-shadow` rysuje pierścień zewnętrzny, bo
 * `outline` bywa tylko jeden. */
:focus-visible {
  outline: 3px solid var(--t-obwodka, #001529);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--t-akcent, #FFC20E);
  border-radius: inherit;
}

/* ── strony bez własnej palety nocnej ───────────────────────────────────────── */
/* `--navy` służy w wygenerowanych stronach 843 razy za KOLOR TEKSTU i tylko
 * 171 razy za tło. W motywie ciemnym musi więc rozjaśnieć, inaczej nagłówki
 * znikają. Siła selektora znów zerowa: strona, która ma własne barwy nocne,
 * dalej rządzi u siebie. */
/* SIŁA SELEKTORA CELOWO WYŻSZA NIŻ `:root` STRONY.
 * Przy `:where()` (siła zero) wygrywała definicja `:root{--navy:#0b2242}`
 * wpisana w stronę i granat wracał jako kolor tekstu na ciemnym tle.
 * Tu chcemy wygrać: wartość, którą podstawiamy, jest jasna, więc jest dobra
 * także dla stron, które mają własną paletę nocną. */
/* ── znaczki, w których granat jest TŁEM, nie pismem ─────────────────────────
 * `--navy` w motywie ciemnym rozjaśnia się, bo w 843 miejscach jest kolorem
 * pisma. Ale w kilkunastu jest TŁEM znaczka (skrót diecezji, poziom struktury)
 * — i tam rozjaśnienie daje złote pismo na jasnym tle, czyli 1,1:1.
 * Te znaczki mają zostać ciemne w obu motywach: to małe znaki, a nie płaszczyzny,
 * więc stała barwa niczego nie psuje, za to zawsze się czyta.
 * Mierzone: 42 wystąpienia `.dk` na jednej stronie struktury. */
:root[data-motyw="ciemny"] .dk, :root[data-theme="dark"] .dk,
:root[data-motyw="ciemny"] .hier .lvl, :root[data-theme="dark"] .hier .lvl {
  background: #001529;
  color: #FFC20E;
}
/* Pasek górny stron publicznych ma tę samą przypadłość: tło budowane z `--navy`,
   które w nocy się rozjaśnia, i złote pismo na nim. Pasek ma zostać granatowy —
   to powierzchnia marki, a nie tekst. */
:root[data-motyw="ciemny"] .top, :root[data-theme="dark"] .top {
  background: linear-gradient(180deg, #002a52, #003c74);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .top {
    background: linear-gradient(180deg, #002a52, #003c74); color: #fff; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dk,
  :root:not([data-theme="light"]) .hier .lvl { background: #001529; color: #FFC20E; }
  :root:not([data-theme="light"]) .hier .lvl.d {
    background: var(--t-plansza-2); color: var(--t-tekst); }
}
:root[data-motyw="ciemny"] .hier .lvl.d, :root[data-theme="dark"] .hier .lvl.d {
  background: var(--t-plansza-2); color: var(--t-tekst);
}

:root[data-motyw="ciemny"], :root[data-theme="dark"] {
  --navy: var(--t-naglowek);
  --navy2: var(--t-naglowek);
  --ink: var(--t-tekst);
  --cichy: var(--t-slaby);
  --karta: var(--t-plansza);
  --tlo: var(--t-tlo);
  --chip: var(--t-plansza-2);
  --linia: var(--t-linia);
  --ac: var(--t-naglowek);
  --cream: var(--t-tlo);
  --card: var(--t-plansza);
  --surface: var(--t-plansza);
  --muted: var(--t-slaby);
}

/* Napis na złocie zostaje ciemny w OBU motywach — złoto jest jasne zawsze.
 * Biały tekst na złocie daje 2,1:1 i nie spełniał wymogu także w motywie
 * jasnym; to usterka, która była tam od początku, a wyszła dopiero przy
 * pomiarze zamówionym przez ks. Mateusza. */
[style*="background:var(--t-akcent"], [style*="background:#f7b500"],
[style*="background:#ffc933"], .btn-zloty, .cta-zloty {
  color: var(--t-marka, #002a52);
}

/* ── przyciski pasów: kolor tekstu musi wygrać z regułą strony ─────────────── */
/* Pomiar w przeglądarce pokazał na obu przyciskach 1:1 — biały napis na białym
 * i biały na złocie. Same reguły `.pzs-cta` / `.modl-cta` są poprawne, ale
 * strony mają własne reguły dla odnośników wewnątrz pasa, o wyższej sile
 * selektora, i to one wygrywały. Podnosimy siłę po naszej stronie zamiast
 * poprawiać to w pięćdziesięciu generatorach. */
.pzs-baner a.pzs-cta, a.pzs-cta { background: #fff; color: #8e1526; }
/* 6.09.2026 — PIGUŁKA BYŁA JAŚNIEJSZA OD TŁA, NA KTÓRYM STOI. Nakładka
 * `rgba(255,255,255,.15)` rozjaśniała czerwień pod białym napisem, zamiast ją
 * przyciemnić. Pas ma ruchomy gradient: przez napis przesuwa się co 14 sekund
 * jaśniejsze pasmo #e8455f, i na nim biel na tej pigułce dawała 3,22 : 1
 * przy progu 4,5. Ta sama nakładka w czerni (.20) daje w najgorszym miejscu
 * gradientu 5,63 : 1, a w najciemniejszym 10,0 : 1 — i nie zmienia ani
 * czerwieni kampanii, ani charakteru przycisku „przezroczystego". */
.pzs-baner a.pzs-cta.ghost, a.pzs-cta.ghost {
  background: rgba(0,0,0,.20); color: #fff; border: 1px solid rgba(255,255,255,.72);
}
.modl-baner a.modl-cta, a.modl-cta { background: var(--t-akcent,#FFC20E); color: #001529; }

/* ── sieć bezpieczeństwa dla jasnych teł wpisanych w atrybut `style` ────────── */
/* Generatory wstawiają część barw wprost w element. W motywie ciemnym taka
 * płyta zostaje jasna, a tekst na niej dziedziczy jasny kolor — i znika.
 * Poniżej te barwy, które pomiar wskazał jako realnie występujące. */
:root[data-motyw="ciemny"] [style*="background:#dde7f5"],
:root[data-motyw="ciemny"] [style*="background:#f3ecdd"],
:root[data-motyw="ciemny"] [style*="background:#eceef2"],
:root[data-motyw="ciemny"] [style*="background:#f6f7f9"],
:root[data-motyw="ciemny"] [style*="background:#f2f2f7"],
:root[data-motyw="ciemny"] [style*="background:#fbf3df"],
:root[data-motyw="ciemny"] [style*="background:#fbeecd"],
:root[data-motyw="ciemny"] [style*="background:#e0f3e7"],
:root[data-motyw="ciemny"] [style*="background:#e4f3e6"],
:root[data-motyw="ciemny"] [style*="background:#eef3fb"] {
  background: var(--t-plansza-2) !important;
  color: var(--t-tekst);
}

/* ── PIGUŁKI NA PULPITACH: KREMOWE TŁO ZOSTAWAŁO W MOTYWIE CIEMNYM ─────────── */
/* Zmierzone w przeglądarce 6.09.2026, `/ksm/panel/ogolnopolski/`, motyw ciemny:
 * 190 napisów poniżej progu WCAG AA, wszystkie z jednego powodu. Sieć wyżej
 * łapie tło wpisane w ATRYBUT `style`; te dwie pigułki mają je w REGULE CSS
 * (`gen_panels_all.py`, klasy `.tool .s` i `.wkr`), więc przez nią przechodziły.
 * Motyw ciemny zmieniał im PISMO na jasnoszare, a TŁO zostawiał kremowe —
 * #98a3b6 na #fbf3df daje 2,30:1 przy progu 4,5:1. Napisy „kolejka",
 * „zgłoszenia", „podpis", „wkrótce" przy każdym z osiemnastu narzędzi.
 *
 * Poprawiamy TU, a nie w generatorze: te same klasy stoją w wygenerowanych
 * pulpitach wszystkich trzech poziomów, a wersja jasna jest poprawna
 * (5,03:1) i nie ma powodu jej ruszać. Barwy z palety motywu, nie wpisane
 * wprost — inaczej za miesiąc rozjadą się z resztą. */
:root[data-motyw="ciemny"] .tool .s, :root[data-theme="dark"] .tool .s,
:root[data-motyw="ciemny"] .wkr,     :root[data-theme="dark"] .wkr {
  background: var(--t-plansza-2) !important;
  color: var(--t-tekst) !important;
  border-color: var(--t-linia-mocna, var(--t-linia)) !important;
}

/* Napis na złocie zostaje ciemny — złoto jest jasne w obu motywach.
 * Reguła po nazwach klas używanych przez generatory dla odnośnika-przycisku. */


/* ── ostatnie trzy przypadki wskazane pomiarem ─────────────────────────────── */
/* `--obszar-ink` to barwa nagłówka sekcji, ustawiana przy KAŻDEJ sekcji osobno
 * (każdy obszar ma swój odcień). W motywie ciemnym wszystkie te odcienie są
 * ciemne, więc nagłówki znikały. Jeden wspólny, jasny odcień czyta się dobrze
 * i nie odbiera sekcjom rozpoznawalności — tę niesie ikona i tło kafla. */
:root[data-motyw="ciemny"] .obt, :root[data-theme="dark"] .obt {
  color: var(--t-naglowek);
}
/* Odnośnik-przycisk na złotym tle: napis ciemny, bo złoto jest jasne zawsze. */
a.g[style*="f7b500"], a.g[style*="var(--t-akcent"], .kafel a.g {
  color: var(--t-marka, #002a52) !important;
}
/* Podpis drugorzędny w stylu systemowym. Przy .60 dawał 3,3:1 na białym,
 * stąd .78. W motywie ciemnym ta sama wartość jest ciemnoszara na ciemnym —
 * czyli niewidoczna — więc odwracamy ją razem z motywem. To jest ta sama
 * pułapka co przy granacie: jedna nazwa, dwa zastosowania, dwa motywy. */
:root, :root[data-motyw] { --label-2: rgba(60,60,67,.78); --label:#000; }
:root[data-motyw="ciemny"], :root[data-theme="dark"] {
  --label: var(--t-tekst);
  --label-2: rgba(235,238,245,.80);
  --label-3: rgba(235,238,245,.45);
  --label-4: rgba(235,238,245,.22);
  --sep: rgba(255,255,255,.22);
  --sep-opaque: #3a4763;
}
/* Klasa `.g` znaczy w różnych stronach co innego: raz złoty przycisk, raz
 * niebieski, raz zielony. Wcześniejsza wersja tej reguły ustawiała ciemny
 * napis KAŻDEMU `.g` i przez to zgasiła biały napis na granatowym przycisku
 * „Formacja / zapisy" — 1:1, napis zniknął zupełnie. Reguła musi więc pytać
 * o TŁO, a nie o nazwę klasy. */
[style*="background:var(--t-akcent"], [style*="background:#f7b500"],
[style*="background:#ffd75e"], [style*="background:#ffc933"] {
  color: var(--t-marka, #002a52);
}

/* ── ciemne sekcje na jasnej stronie ───────────────────────────────────────── */
/* Niektóre panele mają celowo ciemną sekcję („mozliwości GOTÓW") także
 * w motywie jasnym. Wpisany w nią granatowy nagłówek dawał 1,15:1 — ciemne
 * po ciemnym. Napisy w takiej sekcji muszą być jasne w OBU motywach. */
[style*="background:#10151f"] b, [style*="background:#10151f"] span,
[style*="background:#131a25"] b, [style*="background:#131a25"] span,
[style*="background:#161d2a"] b, [style*="background:#161d2a"] span,
[style*="background:#1a2333"] b, [style*="background:#1a2333"] span,
.sekcja-ciemna b, .sekcja-ciemna span {
  color: var(--t-tekst, #f2f5fa);
}

/* Pole „przeciągnij pliki" — podpis pisany barwą akcentu dawał 1,4:1 na
 * prawie białym tle. Akcent zostaje na obramowaniu, napis dostaje kolor tekstu. */
.drop, .drop * { color: var(--t-tekst-2, #44546f); }
.drop { border-color: var(--t-akcent, #f7b500); }

/* ── szerokie tabele na wąskim ekranie ─────────────────────────────────────── */
/* Wykaz parafii, wykaz mediów, kompletność danych — wszystkie mają tabele
 * szersze niż telefon. Do tej pory taka tabela rozpychała CAŁĄ stronę: pojawiał
 * się poziomy pasek przewijania na dole okna, nagłówek jechał w bok razem
 * z treścią, a stopka kończyła się w połowie ekranu. Wygląda to na zepsutą
 * stronę, choć zepsuta jest tylko jedna tabela.
 *
 * Tabela przewija się teraz WEWNĄTRZ SIEBIE: zachowuje swoją naturalną
 * szerokość, ale nie wypycha reszty. `display:block` jest tu konieczne —
 * element `table` nie przyjmuje `overflow`, bo nie jest zwykłym blokiem.
 *
 * Tylko na wąskich ekranach. Na rzutniku i na komputerze tabele mają zostać
 * dokładnie takie, jakie są — tam mieszczą się bez przewijania. */
@media (max-width: 900px) {
  table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── pasek nagłówka na wąskim ekranie ──────────────────────────────────────── */
/* `.top` to godło, nazwa i nawigacja w jednym rzędzie bez zawijania. Na telefonie
 * ta trójka nie mieści się w 390 px, a `.nav3` — choć sam ma przewijanie — nie
 * może się skurczyć poniżej swojej treści, bo element siatki ma domyślnie
 * `min-width:auto`. Skutek: pasek wystawał o kilkadziesiąt pikseli i wypychał
 * całą stronę w bok.
 *
 * Nawigacja schodzi więc do własnego wiersza i przewija się w nim poziomo —
 * zamiast przewijać całą stronę. */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; }
  .top .nav3 { min-width: 0; flex: 1 1 100%; margin-left: 0 !important; }
  /* Prawy blok paska („Zaloguj się", przełącznik motywu) jest odsuwany
   * marginesem `margin-left:auto`. Po zawinięciu wiersza ten margines spycha go
   * poza ekran, bo nie ma już czego odsuwać. W wąskim układzie ma stanąć
   * na początku własnego wiersza. */
  .top > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
}


/* ZAPORA NA PRZYSZŁOŚĆ. Pole, które ma tło z motywu, musi mieć z motywu także
   kolor pisma. Reguła stoi na końcu arkusza, więc łapie także ekrany, które
   ustawiają samo tło — a tych było dwadzieścia jeden. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  background-color: var(--t-pole-tlo, #fff);
  color: var(--t-pole-tekst, var(--t-tekst, #1a2b45));
}

/* ZAZNACZENIE MA BYĆ WIDAĆ. Bez tego przeglądarka dobiera kolor sama i przy
   jasnym piśmie na ciemnym tle zaznaczony fragment bywa nie do odczytania. */
::selection { background: var(--t-zazn-tlo, #f7b500); color: var(--t-zazn-tekst, #17120a); }
::-moz-selection { background: var(--t-zazn-tlo, #f7b500); color: var(--t-zazn-tekst, #17120a); }

/* Pola wyboru: znaczek w barwie GOTÓW, w obu motywach ten sam gest. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--t-akcent, #c8922a);
  width: 18px; height: 18px;
}

/* Widoczne wejście klawiaturą — kto nie używa myszy, ma wiedzieć, gdzie jest. */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid var(--t-obwodka, #001529);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--t-akcent, #FFC20E);
}
input::placeholder, textarea::placeholder {
  color: var(--t-tekst-2, #6b7a90);
  opacity: .75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTYW CIEMNY: SZEŚĆ PAR, W KTÓRYCH NOC PRZEWRACAŁA TYLKO JEDNĄ STRONĘ
   21.09.2026, przegląd zestawów testów (zadanie 116)

   CO ZMIERZONO. `testy-kontrast-w-przegladarce.js` na 22 ekranach panelu
   w motywie ciemnym: 10 rodzajów napisów poniżej WCAG 2.1 AA, najgorszy
   1,09:1 przy wymaganych 4,5:1, w 47 wystąpieniach na jednym ekranie.
   `testy-kontrast.js` — same pary z palety — był przy tym ZIELONY. Paleta jest
   więc dobra; psuje się użycie.

   DLACZEGO TO SIĘ DZIEJE. Wszystkie sześć przypadków to jedna i ta sama rzecz:
   para „tło + pismo", w której noc przewraca tylko jedną stronę. Albo tło jest
   wpisane na stałe (`background:#fff`), a pismo bierze się z tokenu i robi się
   jasne — albo odwrotnie: pismo jest wpisane na stałe, a tło ściemnia token.
   Granat `--navy` rozjaśnia się w nocy celowo (843 razy jest kolorem PISMA
   i tylko 171 razy tłem) — i właśnie te 171 razy trzeba wymienić z nazwiska,
   tak jak wyżej zrobiono z `.dk`, `.top` i `.hier .lvl`.

   ZASADA, KTÓREJ TU PILNUJEMY: nie zmieniamy ani jednej barwy w palecie.
   Wymieniamy PARY — tam, gdzie zmierzono, że rozjeżdża się tylko jedna strona.
   Żółć KSM `#ffcd00` nigdzie nie staje się ani obwódką, ani pismem na jasnym
   tle (1,50:1). Obwódki klawiatury nie dotykamy.

   ZMIERZONE PRZED I PO (wyliczone z barw, nie ocenione na oko):
     akapit „cichy" wpisany w atrybut stylu   2,51:1 -> 5,80:1
     znaczek `.fi` (przygaszone złoto)        2,83:1 -> 8,41:1
     pigułka `.odz` (tło na stałe białe)      1,09:1 -> 13,19:1
     przycisk `.akcje a.g` (pismo na żółci)   1,19:1 -> 10,58:1
     przycisk `.act.g` (biel na jasnym)       1,26:1 -> 15,72:1
     przycisk paska edytora                   1,44:1 -> 15,01:1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. „Cichy" akapit wpisany wprost w atrybut stylu ───────────────────────
 * `color:#5b6779` to wartość `--t-slaby` z motywu JASNEGO, wklejona na sztywno
 * w atrybut `style`. Alias `--muted` jest w nocy podmieniany poprawnie, ale
 * atrybut stylu go omija. Policzone: 10 500 wystąpień w 68 plikach — to nie
 * jest robota na jeden ekran, tylko jedna reguła tutaj. */
:root[data-motyw="ciemny"] [style*="color:#5b6779"],
:root[data-theme="dark"] [style*="color:#5b6779"],
:root[data-motyw="ciemny"] [style*="color: #5b6779"],
:root[data-theme="dark"] [style*="color: #5b6779"] { color: var(--t-slaby) !important; }

/* ── 2. Znaczek `.fi` — przygaszone złoto na ciemnej pigułce ────────────────
 * `color:#8a7a4a` to złoto dobrane pod JASNE tło. Na ciemnym potrzebne jest
 * złoto jasne; ciemne złoto `#8a5c00` służy do pisma na tle jasnym (5,81:1)
 * i tutaj byłoby jeszcze gorsze. Bierzemy `--t-uwaga`, bo w motywie ciemnym
 * jest właśnie jasnym złotem. Policzone: 63 pliki. */
:root[data-motyw="ciemny"] .fi, :root[data-theme="dark"] .fi { color: var(--t-uwaga); }

/* ── 3. Pigułka `.odz` — tło wpisane na stałe jako białe ────────────────────
 * `background:#fff` nie zna nocy, a pismo bierze `--t-tekst`, które w nocy
 * jest prawie białe. Stąd 1,09:1 w 47 wystąpieniach na jednym ekranie.
 * Policzone: 21 ekranów. Stan wybrany (`.odz.sel`) i najechanie biorą `--chip`,
 * który jest już podmieniany wyżej — ich nie ruszamy. */
:root[data-motyw="ciemny"] .odz, :root[data-theme="dark"] .odz {
  background: var(--t-plansza); color: var(--t-tekst); border-color: var(--t-linia);
}

/* ── 4. `.akcje a.g` — pismo na żółci ───────────────────────────────────────
 * Tło bierze `--gold` (żółć KSM, jasna w obu motywach), a pismo `--navy`,
 * które w nocy celowo się rozjaśnia. Wychodzi jasne na jasnym: 1,19:1.
 * Na żółci pismo ma być granatowe ZAWSZE — dokładnie tak, jak niżej w regule
 * dla `[style*="background:var(--t-akcent"]`. Policzone: 6 ekranów. */
:root[data-motyw="ciemny"] .akcje a.g, :root[data-theme="dark"] .akcje a.g {
  background: var(--t-akcent); color: #001529;
}

/* ── 5. `.act.g` — biel na granacie, który w nocy zrobił się jasny ──────────
 * Tu granat jest TŁEM, a nie pismem, więc nie może się rozjaśnić. Bierzemy
 * powierzchnię marki `--t-marka`, która w nocy zostaje ciemna. 3 ekrany. */
:root[data-motyw="ciemny"] .act.g, :root[data-theme="dark"] .act.g {
  background: var(--t-marka); color: #ffffff; border-color: var(--t-marka);
}

/* ── 6. Pasek narzędzi edytora (`wspolne/edytor.js`) ────────────────────────
 * `.ksm-ed-pasek button{background:#fff}` — znów tło na stałe, pismo z tokenu.
 * Przy okazji: obudowa paska woła `var(--t-chip, #dde7f5)`, a zmiennej
 * `--t-chip` w tym motywie NIE MA (pigułka nazywa się `--t-plansza-2`), więc
 * pasek zawsze bierze wartość zapasową. Nie zmieniam tego tutaj, bo to poprawka
 * w `edytor.js`, a nie w motywie — odnotowane w raporcie. */
:root[data-motyw="ciemny"] .ksm-ed-pasek button,
:root[data-theme="dark"] .ksm-ed-pasek button {
  background: var(--t-pole-tlo); color: var(--t-tekst); border-color: var(--t-linia);
}
:root[data-motyw="ciemny"] .ksm-ed-pasek,
:root[data-theme="dark"] .ksm-ed-pasek { background: var(--t-plansza-2); }

/* ── To samo dla przeglądarki ustawionej na ciemno bez naszego przełącznika ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="color:#5b6779"],
  :root:not([data-theme="light"]) [style*="color: #5b6779"] { color: var(--t-slaby) !important; }
  :root:not([data-theme="light"]) .fi { color: var(--t-uwaga); }
  :root:not([data-theme="light"]) .odz {
    background: var(--t-plansza); color: var(--t-tekst); border-color: var(--t-linia); }
  :root:not([data-theme="light"]) .akcje a.g {
    background: var(--t-akcent); color: #001529; }
  :root:not([data-theme="light"]) .act.g {
    background: var(--t-marka); color: #ffffff; border-color: var(--t-marka); }
  :root:not([data-theme="light"]) .ksm-ed-pasek button {
    background: var(--t-pole-tlo); color: var(--t-tekst); border-color: var(--t-linia); }
  :root:not([data-theme="light"]) .ksm-ed-pasek { background: var(--t-plansza-2); }
}

/* ── 1b. Ten sam „cichy" odcień, ale wpisany w blok <style> strony ──────────
 * Reguła wyżej sięga tylko do atrybutu `style` (10 500 wystąpień). Zostało
 * 714 wystąpień `#5b6779` wpisanych w bloki `<style>` samych ekranów, gdzie
 * selektor atrybutowy nie dosięga. Zmierzone 21.09.2026 po pierwszej poprawce:
 * `.dw .tr span` na kokpicie krajowym dalej dawał 2,51:1 w trzech miejscach.
 * Wymieniamy je z nazwiska — nazwy klas są wspólne dla całego panelu, więc to
 * dalej jedna reguła, a nie poprawka na ekranie. */
:root[data-motyw="ciemny"] .dw .tr span, :root[data-theme="dark"] .dw .tr span,
:root[data-motyw="ciemny"] a.mozl span,  :root[data-theme="dark"] a.mozl span,
:root[data-motyw="ciemny"] .wybor span,  :root[data-theme="dark"] .wybor span,
:root[data-motyw="ciemny"] .sub,         :root[data-theme="dark"] .sub,
:root[data-motyw="ciemny"] .opis,        :root[data-theme="dark"] .opis,
:root[data-motyw="ciemny"] .lead,        :root[data-theme="dark"] .lead { color: var(--t-slaby); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dw .tr span,
  :root:not([data-theme="light"]) a.mozl span,
  :root:not([data-theme="light"]) .wybor span,
  :root:not([data-theme="light"]) .sub,
  :root:not([data-theme="light"]) .opis,
  :root:not([data-theme="light"]) .lead { color: var(--t-slaby); }
}

/* ── 1c. Kafel `a.mozl` — tło i pismo muszą iść razem ───────────────────────
 * Zmierzone 21.09.2026, PO poprawce 1b: kafel „Co możesz założyć" miał tło
 * wpisane na stałe (`background:#fff`) i wszystkie trzy barwy pisma też na
 * stałe. Był więc wewnętrznie zgodny — jasny na jasnym — i pomiar go
 * przepuszczał. Rozjaśnienie samego `span` regułą 1b rozbiło tę parę i dało
 * 2,49:1 w siedmiu miejscach. To ta sama pułapka, którą naprawiamy: nie wolno
 * ruszyć jednej strony pary. Bierzemy więc CAŁY kafel na tokeny. 4 ekrany. */
:root[data-motyw="ciemny"] a.mozl, :root[data-theme="dark"] a.mozl {
  background: var(--t-plansza); border-color: var(--t-linia);
}
:root[data-motyw="ciemny"] a.mozl b, :root[data-theme="dark"] a.mozl b { color: var(--t-naglowek); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a.mozl {
    background: var(--t-plansza); border-color: var(--t-linia); }
  :root:not([data-theme="light"]) a.mozl b { color: var(--t-naglowek); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   JEDEN JĘZYK WIZUALNY — SKALE, GRANICE I DWA ODSTĘPSTWA
   Punkt 5.5, 21.09.2026. Podstawa: raporty/jezyk-wizualny-20260920.md
   i rozstrzygnięcie ks. Andrzeja z 21.09.2026.

   Do tego dnia system nie miał ANI JEDNEJ skali: 109 różnych zapisów
   rozmiaru pisma, 42 różne kroki odstępu, 21 promieni, 31 autorskich cieni,
   dwie nazwy celu dotyku i dziesięć zapisów jego wartości. Poniżej stoi
   jeden zestaw — osiem stopni pisma, osiem odstępu, cztery zaokrąglenia,
   trzy cienie, jeden cel dotyku. Nie usuwa niczego, co już działa;
   daje nazwy, którymi można się posługiwać zamiast liczb.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── PISMO: OSIEM STOPNI, W REM ──────────────────────────────────────────
   * W `rem`, nie w `px`, z jednego powodu: dopóki rozmiary są w pikselach,
   * ustawienie „większy tekst" w telefonie i w przeglądarce nie robi nic.
   * W systemie stoi dziś 1 048 261 zapisów `font-size` w px i 2 056 w rem.
   * To jest rzecz, która dla osób starszych znaczy więcej niż cała paleta. */
  --t-pismo-xs:  .8125rem;   /* 13 px — DOLNA GRANICA SYSTEMU */
  --t-pismo-s:   .875rem;    /* 14 px — etykieta, wartość w tabeli */
  --t-pismo-m:   1rem;       /* 16 px — treść, domyślna */
  --t-pismo-l:   1.0625rem;  /* 17 px — treść na telefonie */
  --t-pismo-h4:  1.1875rem;  /* 19 px — nagłówek karty */
  --t-pismo-h3:  1.4375rem;  /* 23 px — nagłówek sekcji */
  --t-pismo-h2:  1.75rem;    /* 28 px — tytuł ekranu */
  --t-pismo-h1:  clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);   /* 28–40 px */

  --t-grubosc-tresc:    400;
  --t-grubosc-etykieta: 500;
  --t-grubosc-naglowek: 600;
  --t-grubosc-liczba:   700;
  --t-interlinia:          1.55;
  --t-interlinia-naglowek: 1.25;

  /* ── ODSTĘP: SIATKA 4 px, OSIEM KROKÓW zamiast czterdziestu dwóch ─────── */
  --t-o-1:  4px;   --t-o-2:  8px;   --t-o-3: 12px;   --t-o-4: 16px;
  --t-o-5: 24px;   --t-o-6: 32px;   --t-o-7: 48px;   --t-o-8: 64px;

  /* ── ZAOKRĄGLENIE: CZTERY KROKI zamiast dwudziestu jeden ───────────────
   * `--t-promien` i `--t-promien-maly` istniały już wcześniej (14 px i 9 px)
   * i stoją na tysiącach stron. NIE zmieniam ich wartości — dokładam dwa
   * brakujące stopnie. Zmiana promienia to zmiana kształtu każdej karty
   * w systemie i nie ma powodu robić jej przy okazji. */
  --t-promien-duzy:    18px;   /* panel, okno modalne */
  --t-promien-pigulka: 999px;  /* pigułka, odznaka */

  /* ── CIEŃ: TRZY STOPNIE zamiast trzydziestu jeden ──────────────────────
   * `--t-cien` i `--t-cien-mocny` zostają jako dotychczasowe nazwy. */
  --t-cien-1: var(--t-cien);
  --t-cien-2: var(--t-cien-mocny);
  --t-cien-3: 0 4px 12px rgba(0,21,41,.16), 0 32px 64px rgba(0,21,41,.20);

  /* ── CEL DOTYKU: JEDNA NAZWA, JEDNA WARTOŚĆ ─────────────────────────────
   * Dotąd dwie nazwy (`--m-dotyk`, `--m-cel-dotyku`) i dziesięć zapisów
   * wartości wprost, w siedmiu plikach. 44 px to próg z WCAG 2.5.5. */
  --t-dotyk: 44px;

  /* ── RUCH: DWA CZASY, JEDNA KRZYWA ─────────────────────────────────────── */
  --t-ruch:       .2s;
  --t-ruch-wolny: .32s;
  --t-krzywa:     cubic-bezier(.32,.72,0,1);

  /* ── KROJE ───────────────────────────────────────────────────────────────
   * Krojem z księgi identyfikacji jest GARAMOND. Deklaracje `@font-face`
   * leżą osobno, w `wspolne/kroje-ksiegi.css`, i NIE są wciągane domyślnie:
   * dołożenie kroju do 11,5 tysiąca stron to decyzja o wadze i o wyglądzie
   * każdego ekranu, a ta należy do ks. Andrzeja. Dopóki tamten arkusz nie
   * jest wpięty, działa zapas — Georgia i krój systemowy, czyli to, co jest
   * dziś. Zmiany wyglądu nie ma żadnej. */
  --t-pismo-szeryf: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --t-pismo-bezszeryf: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI",
                       system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-pismo-cyfry: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  /* Domyślnie: interfejs bez zmian, czyli krój przeglądarki. */
  --t-pismo:          inherit;
  --t-pismo-naglowek: inherit;
}

/* ═══ ODSTĘPSTWO 1 — KRÓJ INTERFEJSU. DO SŁOWA KS. ANDRZEJA. ════════════════
   Nie włącza się samo. Żeby zobaczyć na żywym ekranie, wystarczy w konsoli:
     document.documentElement.dataset.kroj = 'ksiega'   (wariant z księgi)
     document.documentElement.dataset.kroj = 'lato'     (propozycja)
   Strona porównawcza: /ksm/wspolne/porownanie-krojow.html
   Oba warianty wymagają wpięcia `wspolne/kroje-ksiegi.css` w <head>. */
:root[data-kroj="ksiega"] {
  --t-pismo:          var(--t-pismo-szeryf);
  --t-pismo-naglowek: var(--t-pismo-szeryf);
}
:root[data-kroj="lato"] {
  /* Garamond zostaje przy nagłówkach, dokumentach i druku.
     Tekst interfejsu — tabele, etykiety, pola — idzie krojem Lato
     (Łukasz Dziedzic, OFL 1.1, pełny komplet polskich znaków). */
  --t-pismo:          var(--t-pismo-bezszeryf);
  --t-pismo-naglowek: var(--t-pismo-szeryf);
}
:root[data-kroj] body { font-family: var(--t-pismo); }
:root[data-kroj] h1, :root[data-kroj] h2,
:root[data-kroj] h3, :root[data-kroj] h4 { font-family: var(--t-pismo-naglowek); }
/* Druk i dokumenty biorą Garamond w OBU wariantach — tam szeryf pracuje. */
@media print { :root[data-kroj] body { font-family: var(--t-pismo-szeryf); } }
:root[data-kroj] .pismo, :root[data-kroj] .dokument,
:root[data-kroj] .npd, :root[data-kroj] blockquote { font-family: var(--t-pismo-szeryf); }

/* ═══ ODSTĘPSTWO 2 — ODCIEŃ CZERWIENI W KOMUNIKATACH. DO SŁOWA KS. ANDRZEJA. ══
   Czerwień z księgi #E4032E ma na bieli 4,83:1. Próg dla pisma to 4,5:1,
   więc formalnie przechodzi — ale przy 12–13 px, a takiego pisma jest
   w systemie 39 %, jest za słaba. Propozycja: komunikat o błędzie bierze
   TEN SAM odcień i TO SAMO nasycenie (348,5°, 97,4 %), tylko jasność 40 %
   zamiast 45,3 %: #C90329. Zmierzone: 5,95:1 na bieli, 5,34:1 na tle strony,
   5,21:1 na tle komunikatu #fdeceb.
   Czerwień z księgi zostaje przy godle i pieczątce — `--t-ksiega-czerwony`.
     document.documentElement.dataset.czerwien = 'ciemniejsza' */
:root[data-czerwien="ciemniejsza"] { --t-zle: #C90329; }
:root[data-czerwien="ksiega"]      { --t-zle: #E4032E; }

/* ═══ TOKEN --muted — POPRAWKA U ŹRÓDŁA ════════════════════════════════════
   Zgłoszenie innego agenta: `--muted` daje 3,59:1 w motywie jasnym. Sprawdzone:
   barwa #898781 na bieli = 3,59:1 dokładnie, przy progu 4,5:1. Stoi jeszcze
   na 146 stronach, które nie były przegenerowane po poprawce w generatorach
   (tam od 20.09 jest #6f6d68, czyli 5,17:1 na bieli i 4,74:1 na tle strony).
   Poprawka u źródła ma dwie części: przegenerowanie tych stron ORAZ dolna
   granica tutaj, żeby żadna strona nie mogła zejść poniżej zmierzonego tokenu.

   SIŁA SELEKTORA `:root:root` (0,2,0) JEST CELOWO WYŻSZA NIŻ `:root` (0,1,0)
   WPISANE W STRONĘ. Wyżej, w „przekładzie dotychczasowych nazw", `--muted`
   stoi w `:where(:root)` o sile zerowej i przegrywa z każdą stroną — i właśnie
   dlatego usterka przetrwała. Tu wygrywamy, bo podstawiamy wartość ZMIERZONĄ:
   `--t-slaby` to 5,15:1 w dzień i 6,63:1 w nocy na tle z rozstrzygnięcia. */
:root:root { --muted: var(--t-slaby); }

/* ═══ DOLNA GRANICA PISMA — SIATKA NA CZAS MIGRACJI ════════════════════════
   NIE JEST WŁĄCZONA. Reguła stoi tu gotowa i opisana, ale za przełącznikiem,
   bo `font-size: max(13px, 1em)` na 11,5 tysiąca stron przestawia układ tabel
   i kafli, a tego nie zmierzyłem. Włączenie: <html data-pismo="prog-13">.
   Dziś w systemie 410 953 deklaracji rozmiaru jest poniżej 13 px (39,2 %). */
:root[data-pismo="prog-13"] :where(body, p, li, td, th, span, small, label, a, button, input, select, textarea) {
  font-size: max(var(--t-pismo-xs), 1em);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTYW JASNY: DWIE PARY, KTÓRE NIE PRZECHODZIŁY OD POCZĄTKU
   21.09.2026, przegląd zestawów testów

   Wyszły przy sprawdzeniu, czy poprawki motywu ciemnego czegoś nie zepsuły
   w jasnym (`node testy-kontrast-w-przegladarce.js --jasny`). Nie zepsuły —
   ale pomiar pokazał dwie rzeczy, które leżały tam wcześniej.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Znaczek `.fi` — złoto dobrane pod biel, stojące na pigułce ──────────
 * Zmierzone: `#8a7a4a` na `#dde7f5` = 3,39:1 przy progu 4,5:1. Do pisma złotem
 * na jasnym tle służy ciemne złoto `#8a5c00` — na tej pigułce daje 4,66:1,
 * na tle strony `#eef3fb` 5,22:1. Żółci KSM `#ffcd00` tu nie używamy i używać
 * nie wolno: jako pismo na bieli daje 1,50:1. */
:root:not([data-motyw="ciemny"]):not([data-theme="dark"]) .fi { color: #8a5c00; }

/* ── B. Przycisk „przezroczysty" poza pasem, na którym go zaprojektowano ────
 * `a.pzs-cta.ghost` to biały napis na przezroczystej nakładce. W czerwonym
 * pasie kampanii działa (nakładka `rgba(0,0,0,.20)`, reguła wyżej). Ale na
 * `struktura.html` ten sam przycisk stoi POZA pasem, wprost na jasnym tle
 * strony — i wychodzi biel na `#eef3fb`, czyli 1,11:1. Przycisk „przezroczysty"
 * jest czytelny tylko wtedy, gdy wie, co ma pod spodem; poza pasem nie wie.
 * Poza pasem robi się więc nieprzezroczysty: granat KSM `#0b2242` z bielą to
 * 15,72:1 na dowolnym tle. W pasie nic się nie zmienia — tamta reguła ma
 * wyższą siłę selektora (`.pzs-baner a.pzs-cta.ghost`) i dalej wygrywa. */
/* Reguła z wiersza ~683 (`.pzs-baner a.pzs-cta.ghost`) ma wyższą siłę selektora,
 * więc sam `a.pzs-cta.ghost` jej nie przebije — trzeba wymienić oba zapisy.
 * ZMIENIAM WYGLĄD, I MÓWIĘ TO WPROST: drugi przycisk pasa „Polak z Sercem"
 * przestaje być przezroczysty i staje się granatowy. Powód: przezroczysty
 * przycisk jest czytelny tylko wtedy, gdy wiadomo, co ma pod spodem, a pomiar
 * z 21.09.2026 pokazuje, że w panelu pas stoi na JASNYM tle (zmierzone tło
 * przodka: rgb(238,243,251) i rgb(242,242,247)) — biały napis daje tam 1,11:1.
 * Granat KSM z bielą to 15,72:1 na dowolnym tle, także na czerwieni kampanii.
 * Do rozstrzygnięcia przez ks. Andrzeja, jeśli pas ma wyglądać inaczej. */
.pzs-baner a.pzs-cta.ghost, a.pzs-cta.ghost {
  background: #002a52; color: #ffffff; border: 1px solid #002a52;
}