/* ===========================================================================
 * Fundacja GOTÓW – warstwa wspólna wyglądu
 * Plik: /fundacja/wspolne/fundacja.css
 * Wersja: 21.09.2026
 *
 * PO CO TEN PLIK
 * Strona Fundacji powstaje w dwóch rękach: strona główna i warstwa wspólna
 * (ten plik + uklad.js) oraz podstrony. Żeby obie ręce dawały jedno
 * rodzeństwo stron, cały wygląd stoi TUTAJ. Podstrona ma pisać treść,
 * a nie własną paletę.
 *
 * BARWY – SKĄD SIĘ WZIĘŁY
 * Granat i żółć wyjęte wprost z przekazanego logotypu (zmierzone w pliku
 * logo-fundacja.png): granat #272B3D, żółć #F8C600. Do pasów ciemnych
 * używamy granatu ekranowego domu GOTÓW (#002a52 / #00203d / #001529),
 * bo na nim żółć Pantone 116 (#FFC20E) daje 8,93:1 i wolno jej być pismem.
 *
 * ŻELAZNA ZASADA KONTRASTU
 * Złoto i żółć NIGDY nie są pismem na jasnym tle (na bieli 1,62:1) ani
 * jedyną granicą elementu. Na granacie – owszem. Dlatego:
 *   • żółć na jasnym tle występuje wyłącznie jako WYPEŁNIENIE (przycisk,
 *     belka), a pismo na niej jest granatowe (#17120a na #FFC20E = 11,9:1);
 *   • panele z żółtą belką z boku mają dodatkowo pełną obwódkę neutralną,
 *     więc żółć nie jest jedyną granicą;
 *   • żółte pismo pojawia się tylko wewnątrz pasów granatowych.
 *
 * TRZY UKŁADY: jasny, ciemny, telefon. Jasny i ciemny to barwy – wybór
 * bierzemy z ustawienia systemu, a ręczne przestawienie zapisuje atrybut
 * data-motyw na <html> (obsługiwane też stare data-theme z domu KSM).
 * =========================================================================== */

/* ── kroje pisma (pliki lokalne, bez sięgania do sieci) ───────────────────── */

/* Poppins – nagłówki, napisy przycisków, menu. Mamy grubości 600 i 700. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/poppins-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/poppins-700-latin.woff2') format('woff2');
}

/* Lato – tekst czytany. Poppins nie ma u nas grubości 400, a treść
   akapitowa złożona grubością 600 męczy oko. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/Lato-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/Lato-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/Lato-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fundacja/wspolne/fonty/Lato-700-normal-latin.woff2') format('woff2');
}

/* ── GEOMETRIA SKOSU ──────────────────────────────────────────────────────
 * Znak firmowy jest zbudowany na skosie: ukośne cięcie w literze G, ścięte
 * ramię W, przechylony akcent nad Ó, dwie kreski flankujące podpis. Strona
 * powtarza ten jeden kąt w kilku miejscach – i tylko w kilku, bo
 * specyfikacja żąda „krótkiej treści, czytelnych paneli", a skos ma tę
 * czytelność wzmacniać, nie zjadać.
 *
 * KĄT: 19,1° OD PIONU – zmierzony na klinie hero z przyjętej makiety.
 *
 * ROZSTRZYGNIĘTE 21.09.2026 przez ks. Andrzeja („zrób tak, żeby było dobrze").
 * Wcześniej stało tu 23,6° i była to wartość WĄTPLIWA: pochodziła z mojego
 * naiwnego dopasowania prostej do najwyższych pikseli akcentu nad Ó, a ten
 * akcent nie jest kwadratem przechylonym o żaden jeden kąt – to nieregularny
 * czworokąt o zaokrąglonych narożnikach, którego długie boki leżą pod 42°–52°
 * od poziomu. Ze znaku NIE DA SIĘ uczciwie odczytać jednej liczby.
 *
 * Makieta daje ją za to czysto. Zmierzone na `image2.png` z tej samej
 * specyfikacji: klin hero ma lewą krawędź PIONOWĄ, a prawą biegnącą od
 * x=1020 do x=1176 na 450 wierszach, czyli 19,1° od pionu, odchyłka pół
 * piksela. To jest kąt, który projektant narysował DLA STRONY – i dlatego
 * on tu stoi, a nie liczba wyprowadzona z nieregularnego kształtu.
 *
 * CO ZMIERZYŁEM, ZANIM TO WPISAŁEM (liczby są w raporcie):
 *   • klin hero na makiecie: 19,1° od pionu, odchyłka pół piksela –
 *     pomiar czysty, i to jego przyjęliśmy;
 *   • akcent nad Ó w znaku NIE jest kwadratem przechylonym o 23,6°:
 *     to nieregularny czworokąt o zaokrąglonych narożnikach, którego
 *     długie boki leżą pod 42°–52° od poziomu. Wartość 23,6° odtwarza
 *     naiwne dopasowanie prostej do najwyższych pikseli kształtu
 *     (mój odpowiednik tego rachunku dał 25,9°).
 * Zmiana kąta to zmiana czterech wartości niżej.
 *
 * Trzy wartości muszą do siebie pasować i nie da się ich policzyć w CSS:
 *   --f-skos           kąt obrotu drobnych znaczników
 *   --f-skos-gradient  90° + 19,1° – kąt gradientu, którego granice barw
 *                      biegną dokładnie pod --f-skos (niezależnie od
 *                      rozmiaru pudełka, inaczej niż procenty w clip-path)
 *   --f-klin-szer / --f-klin-wys  proporcja 0.3463 = tangens 19,1°
 */
:root {
  --f-skos: 19.1deg;
  --f-skos-gradient: 109.1deg;
  --f-klin-wys: 80px;
  --f-klin-szer: 28px;        /* 80 × 0.3463 = 27.70 */
}

/* ── barwy: motyw jasny (podstawowy) ─────────────────────────────────────── */
:root,
:root[data-motyw="jasny"],
:root[data-theme="light"] {
  color-scheme: light;

  --f-tlo: #ffffff;            /* tło strony */
  --f-tlo-2: #f2f4f8;          /* pas przemienny, pole hero */
  --f-tlo-3: #e6eaf1;          /* trzeci poziom: pigułki, nagłówki tabel */
  --f-plansza: #ffffff;        /* karty i panele */

  /* Pismo. Granat wzięty z logotypu – na bieli 13,9:1. */
  --f-tekst: #272B3D;
  --f-tekst-2: #4c556b;        /* 7,6:1 na bieli */
  --f-slaby: #616a80;          /* 5,5:1 na bieli – najsłabsze, jakie wolno */

  /* Kreski. Dwie grubości, bo służą do czego innego: `--f-linia` domyka
     kształt karty (ozdoba), `--f-linia-mocna` obrysowuje rzeczy, które
     trzeba ROZPOZNAĆ – pola formularza, granice tabeli – i musi mieć 3:1. */
  --f-linia: #dfe3ea;
  --f-linia-mocna: #8e97aa;    /* 3,1:1 na bieli */

  /* Granaty ekranowe domu GOTÓW – pasy ciemne w obu motywach. */
  --f-granat: #00203d;
  --f-granat-2: #001529;
  --f-granat-3: #002a52;

  /* Barwy księgi KSM. */
  --f-zolc: #FFC20E;
  --f-na-zolci: #17120a;       /* 11,9:1 na żółci */
  --f-niebieski: #0057A8;
  --f-czerwony: #E4032E;

  /* Odnośniki. Niebieski KSM na bieli daje 6,3:1. */
  --f-odnosnik: #0057A8;
  --f-odnosnik-najazd: #003f7a;

  /* Elementy nieczynne – muszą być WIDOCZNIE nieczynne, nie wyblakłe. */
  --f-nieczynny-tlo: #eceff4;
  --f-nieczynny-tekst: #4c556b;
  --f-nieczynny-brzeg: #8e97aa;

  --f-cien: 0 1px 2px rgba(39, 43, 61, .06), 0 8px 24px rgba(39, 43, 61, .07);
  --f-cien-2: 0 2px 6px rgba(39, 43, 61, .10), 0 16px 40px rgba(39, 43, 61, .12);
}

/* ── barwy: motyw ciemny ─────────────────────────────────────────────────── */
/* Reguła wspólna dla obu dróg dojścia do ciemnego: ustawienia systemu
   (gdy użytkownik nie wybrał jasnego ręcznie) oraz wybór ręczny. */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) {
    color-scheme: dark;

    --f-tlo: #001529;
    --f-tlo-2: #00203d;
    --f-tlo-3: #002a52;
    --f-plansza: #00203d;

    --f-tekst: #eef3fb;        /* 15,6:1 na #001529 */
    --f-tekst-2: #c3d2e4;      /* 11,2:1 */
    --f-slaby: #9db0c8;        /* 7,4:1 */

    --f-linia: #0b3a63;
    --f-linia-mocna: #3f6b96;  /* 3,3:1 na #001529 */

    --f-odnosnik: #8fc4ff;     /* 8,2:1 – niebieski KSM jest tu za ciemny */
    --f-odnosnik-najazd: #bcdcff;

    --f-nieczynny-tlo: #062c4c;
    --f-nieczynny-tekst: #9db0c8;
    --f-nieczynny-brzeg: #3f6b96;

    --f-cien: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --f-cien-2: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);
  }
}
:root[data-motyw="ciemny"],
:root[data-theme="dark"] {
  color-scheme: dark;

  --f-tlo: #001529;
  --f-tlo-2: #00203d;
  --f-tlo-3: #002a52;
  --f-plansza: #00203d;

  --f-tekst: #eef3fb;
  --f-tekst-2: #c3d2e4;
  --f-slaby: #9db0c8;

  --f-linia: #0b3a63;
  --f-linia-mocna: #3f6b96;

  --f-odnosnik: #8fc4ff;
  --f-odnosnik-najazd: #bcdcff;

  --f-nieczynny-tlo: #062c4c;
  --f-nieczynny-tekst: #9db0c8;
  --f-nieczynny-brzeg: #3f6b96;

  --f-cien: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --f-cien-2: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);
}

/* ── podstawy ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--f-tlo);
  color: var(--f-tekst);
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.f-nadtytul, .f-przycisk, .f-menu a, .f-pasek a {
  font-family: 'Poppins', 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4 { color: var(--f-tekst); font-weight: 700; line-height: 1.18; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); }

/* Nagłówek sekcji wyśrodkowany – tak stoi nad sześcioma panelami na
   przyjętej makiecie. Ograniczona szerokość, żeby na szerokim ekranie
   nie rozjechał się w jedną długą linię. */
.f-naglowek-srodek {
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 44px);
}
@media (min-width: 720px) { .f-naglowek-srodek { max-width: 30ch; } }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--f-odnosnik); text-underline-offset: .18em; }
a:hover { color: var(--f-odnosnik-najazd); }

img { max-width: 100%; height: auto; }

/* Obrys skupienia widoczny na KAŻDYM tle – także na granacie i na żółci.
   Dwa pierścienie: jasny wewnątrz, ciemny na zewnątrz. */
:focus-visible {
  outline: 3px solid var(--f-zolc);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0, 21, 41, .55);
  border-radius: 2px;
}

/* Tekst wyłącznie dla czytników ekranu. */
.f-tylko-czytnik {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Odnośnik „przejdź do treści" – wyskakuje dopiero po skupieniu. */
.f-do-tresci {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--f-zolc); color: var(--f-na-zolci);
  padding: 10px 18px; font-weight: 700; border-radius: 4px;
  transition: top .15s;
}
.f-do-tresci:focus { top: 12px; }

/* ── siatka i szerokości ─────────────────────────────────────────────────── */
.f-szer {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.f-szer-waska { max-width: 820px; }

.f-sekcja { padding-block: clamp(44px, 6vw, 80px); }
.f-sekcja-ciasna { padding-block: clamp(28px, 4vw, 48px); }

/* Pasy ciemne. Żółć wolno tu być pismem – 8,93:1 na #001529. */
.f-pas-ciemny {
  position: relative;
  overflow: hidden;
  background: var(--f-granat-2);
  color: #eef3fb;
}
/* Żółty klin wcinający się w górny lewy narożnik pasa – ta sama ukośna,
   co w znaku. Stoi w marginesie kolumny tekstu i NIE wchodzi pod pismo:
   na wysokości, na której zaczyna się treść (padding 44 px), klin sięga
   35 × (1 − 44/80) ≈ 16 px, a tekst zaczyna się najwcześniej od 16 px
   (telefon) albo od 82 px (1280 px). Na wąskim ekranie klin maleje razem
   ze zmiennymi niżej, żeby zapas został. */
.f-pas-ciemny::before {
  content: "";
  position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--f-klin-szer); height: var(--f-klin-wys);
  background: var(--f-zolc);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
.f-pas-ciemny > .f-szer { position: relative; z-index: 1; }
.f-pas-ciemny h1, .f-pas-ciemny h2, .f-pas-ciemny h3 { color: #ffffff; }
.f-pas-ciemny .f-nadtytul { color: var(--f-zolc); }
.f-pas-ciemny p { color: #dbe6f3; }
.f-pas-ciemny a { color: var(--f-zolc); }
.f-pas-ciemny a:hover { color: #ffd75a; }

.f-pas-jasny { background: var(--f-tlo-2); }

/* ── nadtytuł ────────────────────────────────────────────────────────────── */
/* Na jasnym tle nadtytuł NIE jest żółty (1,62:1). Jest granatowy, a żółć
   pojawia się jako krótka belka przed napisem – wypełnienie, nie pismo. */
.f-nadtytul {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--f-tekst-2);
  margin: 0 0 .9em;
}
/* Znacznik: przechylona sztabka zamiast prostej kreski – wprost akcent
   znad Ó. Żółć jest tu wypełnieniem kształtu, nie pismem i nie obwódką. */
.f-nadtytul::before {
  content: ""; width: 8px; height: 17px; border-radius: 2px;
  background: var(--f-zolc); flex: 0 0 auto;
  transform: rotate(calc(-1 * var(--f-skos)));
}
.f-pas-ciemny .f-nadtytul::before { background: var(--f-zolc); }

/* ── przyciski ───────────────────────────────────────────────────────────── */
.f-przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px; padding: 11px 24px;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .12s;
}
.f-przycisk:active { transform: translateY(1px); }

/* Pierwszy w kolejności: granat z białym pismem (13,4:1). */
.f-przycisk-1 { background: var(--f-granat-2); color: #ffffff; border-color: var(--f-granat-2); }
/* W motywie ciemnym granat przycisku i granat tła są zbyt blisko siebie,
   żeby dało się rozpoznać kształt przycisku. Jasna obwódka to naprawia
   (wymóg WCAG 1.4.11 dla elementów sterujących). */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) .f-przycisk-1 { border-color: #7d93ad; }
}
:root[data-motyw="ciemny"] .f-przycisk-1,
:root[data-theme="dark"] .f-przycisk-1 { border-color: #7d93ad; }
.f-przycisk-1:hover { background: var(--f-granat-3); border-color: var(--f-granat-3); color: #ffffff; }

/* Drugi: obrys. Na jasnym granatowy, na ciemnym biały. */
.f-przycisk-2 { background: transparent; color: var(--f-tekst); border-color: var(--f-tekst); }
.f-przycisk-2:hover { background: var(--f-tekst); color: var(--f-tlo); }
.f-pas-ciemny .f-przycisk-2 { color: #ffffff; border-color: #ffffff; }
.f-pas-ciemny .f-przycisk-2:hover { background: #ffffff; color: var(--f-granat-2); }

/* Żółty: wypełnienie żółcią, pismo granatowe. Dozwolone na każdym tle. */
.f-przycisk-zolty { background: var(--f-zolc); color: var(--f-na-zolci); border-color: var(--f-zolc); }
.f-przycisk-zolty:hover { background: #ffd033; border-color: #ffd033; color: var(--f-na-zolci); }

/* PRZYCISKI WEWNĄTRZ PASA CIEMNEGO – POPRAWKA SIŁY SELEKTORA.
 * Zmierzone w przeglądarce 21.09.2026: przyciski „JAK WSPIERAMY KSM"
 * i „WESPRZYJ FUNDACJĘ" miały żółte pismo na żółtym tle, kontrast 1,00:1,
 * czyli były NIEWIDOCZNE. Powód: reguła `.f-pas-ciemny a` (klasa + element,
 * siła 0-1-1) bije `.f-przycisk-zolty` (sama klasa, 0-1-0), więc pas ciemny
 * przemalowywał pismo przycisku na żółć swoich odnośników.
 * Te cztery wiersze przywracają pismo przycisku. Nie usuwamy reguły pasa,
 * bo zwykłe odnośniki w tekście na granacie mają być żółte – tam żółć jest
 * dozwolona (8,93:1). */
.f-pas-ciemny a.f-przycisk-zolty,
.f-pas-ciemny a.f-przycisk-zolty:hover,
.f-pas-ciemny button.f-przycisk-zolty { color: var(--f-na-zolci); }
.f-pas-ciemny a.f-przycisk-1,
.f-pas-ciemny a.f-przycisk-1:hover { color: #ffffff; }

/* Przycisk NIECZYNNY – brak adresu w specyfikacji. Nie prowadzi donikąd
   i ma to po sobie widać: skreślony kursor, obwódka przerywana, dopisek. */
.f-przycisk-nieczynny,
a.f-przycisk-nieczynny {
  background: var(--f-nieczynny-tlo);
  color: var(--f-nieczynny-tekst);
  border: 2px dashed var(--f-nieczynny-brzeg);
  cursor: not-allowed;
  text-decoration: none;
}
.f-przycisk-nieczynny:hover { background: var(--f-nieczynny-tlo); color: var(--f-nieczynny-tekst); }
.f-przycisk-nieczynny::after {
  content: "w przygotowaniu";
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: none;
  padding: 2px 7px; border-radius: 3px;
  background: var(--f-nieczynny-brzeg); color: var(--f-tlo);
}

.f-przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── panele (sześć obszarów i pokrewne) ──────────────────────────────────── */
.f-siatka-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}
.f-siatka-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* Panel: pełna obwódka neutralna i żółty klin w górnym lewym narożniku.
   Żółć nie jest tu ani pismem, ani granicą – obwódka trzyma kształt sama.

   DLACZEGO KLIN, A NIE POCHYLONA BELKA NA CAŁĄ WYSOKOŚĆ.
   Wstęga stałej grubości pochylona o 23,6° potrzebuje na wysokości panelu
   (200–230 px) około 90–100 px poziomego miejsca. Przy 30 px wcięcia
   weszłaby pod tekst, a skosów pod pismem być nie ma. Klin w narożniku
   niesie ten sam kąt i nie rusza czytelności. */
.f-panel {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--f-plansza);
  border: 1px solid var(--f-linia);
  border-radius: 6px;
  padding: 26px 26px 24px 30px;
  box-shadow: var(--f-cien);
  transition: box-shadow .15s, transform .15s;
}
/* Zapas do tekstu: na wysokości nagłówka (26 px od góry) klin sięga
   35 × (1 − 26/80) ≈ 24 px, a tekst zaczyna się od 30 px. */
.f-panel::before {
  content: "";
  position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--f-klin-szer); height: var(--f-klin-wys);
  background: var(--f-zolc);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-top-left-radius: 6px;
  pointer-events: none;
}
.f-panel > * { position: relative; z-index: 1; }
.f-panel:hover { box-shadow: var(--f-cien-2); transform: translateY(-2px); }
.f-panel h3 { margin: 0 0 .5em; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }
.f-panel p { color: var(--f-tekst-2); flex: 1 1 auto; margin-bottom: 1.2em; }

/* Odnośnik zamykający panel. Strzałka to ozdoba – sens niesie napis. */
.f-panel-link {
  align-self: flex-start;
  font-family: 'Poppins', 'Lato', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--f-odnosnik); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.f-panel-link:hover { color: var(--f-odnosnik-najazd); }
.f-panel-link::after { content: " \2192"; }

/* Cały panel klikalny: warstwa nad panelem rozciągnięta z odnośnika.
   Napis zostaje odnośnikiem, więc czytnik ekranu ma co przeczytać. */
.f-panel-klik .f-panel-link::before {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
}

/* ── karta prostsza (bez żółtej belki) ───────────────────────────────────── */
.f-karta {
  background: var(--f-plansza);
  border: 1px solid var(--f-linia);
  border-radius: 6px;
  padding: 26px;
  box-shadow: var(--f-cien);
}

/* ── pasek bezpieczeństwa (sekcja 01) ────────────────────────────────────── */
.f-pasek {
  background: var(--f-granat-2);
  color: #ffffff;
  font-size: .82rem;
}
.f-pasek .f-szer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 42px; padding-block: 8px; flex-wrap: wrap;
}
.f-pasek a {
  color: var(--f-zolc);             /* 8,93:1 na granacie – wolno */
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.f-pasek a:hover { color: #ffd75a; border-bottom-color: currentColor; }
.f-pasek a.f-pasek-drugi { color: #ffffff; }
.f-pasek a.f-pasek-drugi:hover { color: #ffffff; }

/* ── nagłówek i menu (sekcja 02) ─────────────────────────────────────────── */
.f-naglowek {
  background: var(--f-tlo);
  border-bottom: 1px solid var(--f-linia);
}
.f-naglowek .f-szer {
  display: flex; align-items: center; gap: 20px;
  min-height: 78px; padding-block: 12px;
}

.f-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.f-logo img { display: block; height: 38px; width: auto; }
/* W motywie ciemnym podmieniamy wariant znaku na biały – granatowy znak
   na granacie byłby niewidoczny. Obie wersje są w materiałach. */
.f-logo .f-logo-ciemny { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) .f-logo .f-logo-jasny { display: none; }
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) .f-logo .f-logo-ciemny { display: block; }
}
:root[data-motyw="ciemny"] .f-logo .f-logo-jasny,
:root[data-theme="dark"] .f-logo .f-logo-jasny { display: none; }
:root[data-motyw="ciemny"] .f-logo .f-logo-ciemny,
:root[data-theme="dark"] .f-logo .f-logo-ciemny { display: block; }

.f-menu { margin-left: auto; }
.f-menu > ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.f-menu > ul > li { position: relative; }
.f-menu > ul > li > a,
.f-menu > ul > li > span.f-menu-glowa {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 10px 12px; border-radius: 4px;
  font-size: .86rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--f-tekst); text-decoration: none; white-space: nowrap;
}
.f-menu > ul > li > a:hover { background: var(--f-tlo-3); color: var(--f-tekst); }
.f-menu > ul > li > a[aria-current="page"] {
  background: var(--f-tlo-3);
  box-shadow: inset 0 -3px 0 var(--f-zolc);
}
/* ── PRZYCISK „WESPRZYJ" NIE GAŚNIE NA WŁASNEJ STRONIE ─────────────────────
   Reguła wyżej podstawia tło `--f-tlo-3` pod KAŻDĄ pozycję menu, także pod
   żółty przycisk „Wesprzyj". Na stronie /fundacja/wesprzyj dawało to ciemne
   pismo na ciemnym tle - zmierzone 1,29:1 w motywie ciemnym.

   Poprawka stała najpierw w `podstrony.css`, czyli działała tylko tam, gdzie
   ten arkusz jest wczytany. Przyczyna jest tutaj i tutaj ma być leczona,
   inaczej usterka wraca przy pierwszej stronie bez arkusza podstron.

   Bieżącą pozycję znaczymy ciemną kreską u dołu, a wypełnienie zostaje żółte. */
.f-menu > ul > li.f-wesprzyj > a[aria-current="page"] {
  background: var(--f-zolc);
  color: var(--f-na-zolci);
  box-shadow: inset 0 -3px 0 var(--f-na-zolci);
}

/* Strzałka rozwinięcia. */
.f-menu-strzalka { width: 9px; height: 9px; flex: 0 0 auto; }

/* Lista rozwijana. Na myszy otwiera się najazdem, z klawiatury – skupieniem,
   a na dotyku przyciskiem (uklad.js ustawia aria-expanded). */
.f-podmenu {
  position: absolute; top: 100%; left: 0; z-index: 90;
  min-width: 290px; margin: 0; padding: 8px;
  list-style: none;
  background: var(--f-plansza);
  border: 1px solid var(--f-linia-mocna);
  border-top: 3px solid var(--f-zolc);
  border-radius: 0 0 6px 6px;
  box-shadow: var(--f-cien-2);
  display: none;
}
.f-menu > ul > li:hover > .f-podmenu,
.f-menu > ul > li:focus-within > .f-podmenu,
.f-menu > ul > li > [aria-expanded="true"] + .f-podmenu { display: block; }

.f-podmenu a {
  display: block; padding: 9px 12px; border-radius: 4px;
  font-size: .92rem; font-weight: 600; color: var(--f-tekst); text-decoration: none;
}
.f-podmenu a:hover { background: var(--f-tlo-3); color: var(--f-tekst); }

/* Pozycja rozwinięcia bez adresu – opis, nie odnośnik. */
.f-podmenu .f-podmenu-opis {
  padding: 8px 12px 10px;
  font-size: .82rem; line-height: 1.5; color: var(--f-slaby);
  border-top: 1px solid var(--f-linia); margin-top: 6px;
}
.f-podmenu .f-podmenu-nieczynny {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; font-size: .92rem; font-weight: 600;
  color: var(--f-nieczynny-tekst);
}
.f-podmenu .f-podmenu-nieczynny::after {
  content: "brak adresu";
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 3px;
  background: var(--f-nieczynny-tlo);
  border: 1px dashed var(--f-nieczynny-brzeg);
  color: var(--f-nieczynny-tekst);
  white-space: nowrap;
}

/* Wyróżniony przycisk WESPRZYJ w nagłówku. */
.f-menu .f-wesprzyj > a {
  background: var(--f-zolc); color: var(--f-na-zolci);
  padding: 12px 22px; border-radius: 4px;
}
.f-menu .f-wesprzyj > a:hover { background: #ffd033; color: var(--f-na-zolci); }

/* Guzik menu na telefonie. */
.f-menu-guzik {
  display: none;
  margin-left: auto;
  align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px;
  background: var(--f-tlo-2); color: var(--f-tekst);
  border: 1px solid var(--f-linia-mocna); border-radius: 4px;
  font-family: 'Poppins', sans-serif; font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.f-menu-guzik .f-kreski { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.f-menu-guzik .f-kreski::before,
.f-menu-guzik .f-kreski::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.f-menu-guzik .f-kreski::before { top: -6px; }
.f-menu-guzik .f-kreski::after { top: 6px; }

/* ── hero (sekcja 03) ────────────────────────────────────────────────────── */
.f-hero { position: relative; background: var(--f-tlo-2); overflow: hidden; }
.f-hero .f-szer { position: relative; z-index: 2; }
.f-hero-tresc { max-width: 640px; padding-block: clamp(44px, 7vw, 92px); }
.f-hero-tresc p.f-lead {
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  color: var(--f-tekst-2);
  max-width: 34em;
  margin-bottom: 1.8em;
}

/* Klin granatowo-żółty z prawej. Ozdoba: schowana przed czytnikami, znika
   na wąskim ekranie, żeby nie wchodziła pod tekst.

   GRADIENT, A NIE clip-path. Granice barw w gradiencie liniowym biegną
   prostopadle do jego kierunku, więc kąt jest DOKŁADNY i taki sam przy
   każdej wysokości hero. Procenty w clip-path dawały kąt zależny od
   proporcji pudełka – stąd poprzednie 13,3° zamiast zamierzonych 23,6°.
   Zmierzone w przeglądarce po zmianie: 23,6° od pionu.

   Ułamki stopni przy przystankach (24,3 zamiast 24) zostawiają pół procenta
   przejścia, które zbija schodki na ukośnej krawędzi. */
.f-hero-klin {
  /* Na CAŁE hero, nie na prawą część. Gdy pojemnik był węższy, ukośna
     wstęga zsuwała się przy dolnej krawędzi poza jego lewy brzeg i tam
     urywała się PIONOWO – prostokątna krawędź w środku skośnego układu.
     Rozciągnięty na całość pojemnik nie ma czym ciąć; o położeniu wstęgi
     decydują wyłącznie przystanki gradientu. */
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
      var(--f-skos-gradient),
      transparent 0 58%,
      var(--f-zolc) 58.3% 66%,
      var(--f-granat-2) 66.3% 100%);
}
/* Dwa puste <span> w HTML zostały z poprzedniej wersji klina. Kształt maluje
   teraz tło rodzica, więc nie mają co rysować – treści strony nie niosą. */
.f-hero-klin span { display: none; }
@media (max-width: 900px) { .f-hero-klin { display: none; } }

/* Zdanie przewodnie pod hero – pas granatowy na całą szerokość. */
.f-zdanie {
  background: var(--f-granat);
  color: #ffffff;
  font-family: 'Poppins', 'Lato', sans-serif;
  font-weight: 600;
}
.f-zdanie .f-szer { padding-block: 18px; }
.f-zdanie p { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.f-zdanie b { color: var(--f-zolc); font-weight: 700; }

/* ── sekcja wsparcia: numer konta ────────────────────────────────────────── */
.f-konto {
  display: grid; gap: 4px 18px;
  grid-template-columns: max-content 1fr;
  margin: 0 0 22px;
  font-size: .98rem;
}
.f-konto dt { color: var(--f-slaby); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.f-konto dd { margin: 0 0 10px; color: var(--f-tekst); font-weight: 700; }
.f-pas-ciemny .f-konto dt { color: #a9c0da; }
.f-pas-ciemny .f-konto dd { color: #ffffff; }
.f-konto .f-numer { font-size: 1.1rem; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .f-konto { grid-template-columns: 1fr; }
  .f-konto dd { margin-bottom: 14px; }
}

/* Komunikat po skopiowaniu rachunku. */
.f-kopia-info {
  display: inline-block; margin-left: 12px; font-size: .88rem; font-weight: 700;
  color: var(--f-zolc);
}
.f-kopia-info:empty { display: none; }

/* ── boksy wydawnictwa ──────────────────────────────────────────────────── */
.f-boks-znak {
  display: flex; align-items: center; justify-content: center;
  background: var(--f-tlo-2);
  border: 1px solid var(--f-linia);
  border-radius: 6px;
  padding: 26px; margin: 0 0 20px; min-height: 120px;
}
.f-boks-znak img { max-height: 58px; width: auto; }

/* Znak mniejszy – stoi przy module Streetwear wewnątrz boksu sklepu,
   a nie w jego nagłówku. Rozdział 5: znak Streetwear należy „wyłącznie
   do modułu Streetwear". */
.f-boks-znak-maly { min-height: 0; padding: 14px 18px; max-width: 250px; margin-bottom: 14px; }
.f-boks-znak-maly img { max-height: 34px; }
/* Znaki są granatowe na przezroczystym tle. W motywie ciemnym odwracamy
   je na biel, inaczej zlałyby się z granatem planszy. */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) .f-boks-znak { background: #ffffff; }
}
:root[data-motyw="ciemny"] .f-boks-znak,
:root[data-theme="dark"] .f-boks-znak { background: #ffffff; }

.f-boks-pozycja { padding: 18px 0; border-top: 1px solid var(--f-linia); }
.f-boks-pozycja:first-of-type { border-top: 0; padding-top: 0; }
/* Etykieta pozycji w boksie. Od 21.09.2026 jest to h3, nie h4: sekcja ma
   nagłówek h2, więc h4 robiło przeskok poziomu i czytnik ekranu wypisywał
   spis treści z wyrwą. Wygląd bez zmian – to nadal mała wersalikowa
   etykieta, a nie zwykły śródtytuł, więc reguła nadpisuje ogólne `h3`.
   Selektor `h4` zostaje dla podstron, które go jeszcze używają. */
.f-boks-pozycja h3,
.f-boks-pozycja h4 {
  margin: 0 0 .35em; font-size: .86rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--f-tekst-2);
}
.f-boks-pozycja p { color: var(--f-tekst-2); margin-bottom: .9em; }

/* ── akcent zamykający (znak „siła we wspólnocie") ───────────────────────── */
.f-akcent {
  background: var(--f-tlo);
  border-top: 1px solid var(--f-linia);
  text-align: center;
}
.f-akcent .f-szer { padding-block: clamp(28px, 4vw, 48px); }
.f-akcent img { height: clamp(40px, 5vw, 58px); width: auto; display: block; }
.f-akcent-plansza { display: inline-flex; padding: 0; border-radius: 6px; }
/* W motywie ciemnym znak dostaje białą planszę – granatowy znak na granacie
   strony był praktycznie niewidoczny. */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) .f-akcent-plansza {
    background: #ffffff; padding: 20px 34px;
  }
}
:root[data-motyw="ciemny"] .f-akcent-plansza,
:root[data-theme="dark"] .f-akcent-plansza { background: #ffffff; padding: 20px 34px; }

/* ── stopka (sekcja 09) ─────────────────────────────────────────────────── */
/* Górna krawędź żółta: w motywie ciemnym stopka ma to samo tło co strona
   i bez tej kreski nie było widać, gdzie się zaczyna. Żółć leży tu na
   granacie, więc wolno; nie jest też jedyną granicą niczego – odcina dwa
   bloki, a nie obrysowuje element. */
.f-stopka { background: var(--f-granat-2); color: #dbe6f3; font-size: .94rem;
            border-top: 3px solid var(--f-zolc); }
.f-stopka .f-szer { padding-block: clamp(36px, 5vw, 56px); }
.f-stopka-kolumny {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.f-stopka h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--f-zolc);              /* 8,93:1 na granacie */
  margin: 0 0 14px;
}
.f-stopka ul { list-style: none; margin: 0; padding: 0; }
.f-stopka li { margin: 0 0 8px; line-height: 1.5; }
.f-stopka a { color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.f-stopka a:hover { color: var(--f-zolc); border-bottom-color: var(--f-zolc); }
.f-stopka .f-stopka-dane { color: #c3d4e6; }

/* Pozycja stopki bez treści – zostaje WIDOCZNA jako pusta. */
.f-stopka .f-nieczynny {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  color: #a9c0da;
}
.f-stopka .f-nieczynny .f-znacznik {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  padding: 1px 7px; border-radius: 3px;
  border: 1px dashed #6e8dae; color: #c3d4e6;
}

.f-stopka-znak { margin: 0 0 18px; }
.f-stopka-znak img { height: 36px; width: auto; }

.f-stopka-dol {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  justify-content: space-between;
  font-size: .86rem; color: #b6c9dd;
}
.f-stopka-rozroznienie {
  margin: 18px 0 0; max-width: 62ch; font-size: .88rem; color: #b6c9dd;
}

/* Przełącznik motywu w stopce. */
.f-motyw { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f-motyw span { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #a9c0da; }
.f-motyw button {
  min-height: 34px; padding: 5px 12px;
  background: transparent; color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px;
  font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.f-motyw button:hover { border-color: var(--f-zolc); color: var(--f-zolc); }
.f-motyw button[aria-pressed="true"] {
  background: var(--f-zolc); color: var(--f-na-zolci); border-color: var(--f-zolc);
}

/* ── plakietki stanu (do oznaczania miejsc bez materiału) ────────────────── */
.f-plakietka {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em;
  background: var(--f-nieczynny-tlo);
  border: 1px dashed var(--f-nieczynny-brzeg);
  color: var(--f-nieczynny-tekst);
}

/* ── telefon ─────────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .f-menu-guzik { display: inline-flex; }

  /* Menu schodzi pod nagłówek i staje się jedną kolumną. */
  .f-naglowek .f-szer { flex-wrap: wrap; }
  .f-menu {
    display: none;
    flex: 1 0 100%;
    margin-left: 0;
    border-top: 1px solid var(--f-linia);
    padding-top: 10px;
  }
  .f-menu.f-otwarte { display: block; }
  .f-menu > ul { display: block; }
  .f-menu > ul > li { border-bottom: 1px solid var(--f-linia); }
  .f-menu > ul > li:last-child { border-bottom: 0; }
  .f-menu > ul > li > a,
  .f-menu > ul > li > span.f-menu-glowa {
    display: flex; justify-content: space-between; width: 100%;
    padding: 14px 6px; min-height: 48px; font-size: .95rem;
  }
  .f-podmenu {
    position: static; display: block;
    min-width: 0; margin: 0 0 10px; padding: 0 0 0 14px;
    background: transparent; border: 0; border-left: 3px solid var(--f-zolc);
    border-radius: 0; box-shadow: none;
  }
  .f-podmenu a { padding: 11px 8px; min-height: 44px; display: flex; align-items: center; }
  .f-menu .f-wesprzyj { margin: 14px 0 6px; border-bottom: 0; }
  .f-menu .f-wesprzyj > a { justify-content: center; }
  .f-menu-strzalka { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* Klin maleje razem z ekranem. Przy 390 px kolumna tekstu zaczyna się od
     16 px, a pas ciemny ma 44 px odstępu od góry – klin o wymiarach 23 × 52
     sięga tam 23 × (1 − 44/52) ≈ 3,5 px, więc zapas jest pełny. W panelu
     tekst zaczyna się od 24 px, a klin na wysokości 22 px sięga 13 px. */
  :root { --f-klin-wys: 52px; --f-klin-szer: 23px; }
  .f-panel { padding: 22px 20px 22px 24px; }
  .f-przycisk { width: 100%; }
  .f-przyciski { flex-direction: column; align-items: stretch; }
  .f-pasek { font-size: .76rem; }
  .f-pasek .f-szer { justify-content: center; text-align: center; gap: 4px 14px; }
}

/* ── druk ────────────────────────────────────────────────────────────────── */
@media print {
  .f-pasek, .f-menu, .f-menu-guzik, .f-motyw, .f-hero-klin { display: none !important; }
  body { background: #ffffff; color: #000000; font-size: 11pt; }
  .f-pas-ciemny, .f-stopka, .f-zdanie { background: #ffffff !important; color: #000000 !important; }
  .f-pas-ciemny h2, .f-stopka h2, .f-zdanie b { color: #000000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WARSTWA Z MAKIETY z 21.09.2026 (plik „ChatGPT Image 18 wrz 2026", wrzutka 20:26)
   ───────────────────────────────────────────────────────────────────────────
   Makieta pokazuje całą stronę główną i wnosi do domu GOTÓW rzecz, której tu
   dotąd nie było: KARMIN jako barwę działania. Do tej pory strona stała na
   granacie i żółci; przyciski, ikony i panel wezwania były żółte. Na makiecie
   żółć zostaje przy HASŁACH („siła we wspólnocie", odręczne dopiski), a
   wszystko, w co się klika, jest karminowe.

   Barwy nie są dobrane na oko – zdjęte pipetą z makiety:
     karmin  rgb(166, 20, 29)   – przyciski, ikony kart, panel „Wesprzyj"
     granat  rgb(4, 25, 66)     – napis GOTÓW, nagłówki, menu
     bursztyn rgb(254,164,28)   – „siła we wspólnocie"
     złoto   rgb(254,187,13)    – kreska nad Ó, podkreślenia odręcznych dopisków

   Żółć księgi KSM (--f-zolc) ZOSTAJE bez zmian tam, gdzie oznacza KSM.
   Karmin jej nie zastępuje – dokłada się jako barwa czynności.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-motyw="jasny"],
:root[data-theme="light"] {
  --f-karmin: #A6141D;
  --f-karmin-najazd: #861017;
  --f-na-karminie: #ffffff;        /* biel na karminie: 7,4:1 */
  --f-bursztyn: #FEA41C;
  --f-zloto-kreska: #FEBB0D;
  --f-granat-logo: #041942;        /* granat napisu GOTÓW – na bieli 15,6:1 */
  --f-tlo-pas: #F4F6F9;            /* pas, na którym leżą białe karty */
}

:root[data-motyw="ciemny"],
:root[data-theme="dark"] {
  /* Karmin na ciemnym tle musi się rozjaśnić, inaczej znika w granacie. */
  --f-karmin: #E8555E;
  --f-karmin-najazd: #F2757C;
  --f-na-karminie: #1a0508;        /* ciemny napis na jasnym karminie: 8,1:1 */
  --f-bursztyn: #FFB84D;
  --f-zloto-kreska: #FFC93D;
  --f-granat-logo: #dfe6f5;
  --f-tlo-pas: #0d1626;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) {
    --f-karmin: #E8555E;
    --f-karmin-najazd: #F2757C;
    --f-na-karminie: #1a0508;
    --f-bursztyn: #FFB84D;
    --f-zloto-kreska: #FFC93D;
    --f-granat-logo: #dfe6f5;
    --f-tlo-pas: #0d1626;
  }
}

/* ── przyciski działania ──────────────────────────────────────────────────── */
.f-akcja,
.f-menu > ul > li.f-wesprzyj > a {
  display: inline-flex; align-items: center; gap: .6em;
  background: var(--f-karmin); color: var(--f-na-karminie);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: .82rem; padding: .85em 1.5em; border-radius: 4px;
  text-decoration: none; border: 2px solid var(--f-karmin);
  transition: background .15s, border-color .15s;
}
.f-akcja::after,
.f-menu > ul > li.f-wesprzyj > a::after { content: "→"; font-size: 1.05em; }
.f-akcja:hover,
.f-menu > ul > li.f-wesprzyj > a:hover {
  background: var(--f-karmin-najazd); border-color: var(--f-karmin-najazd);
}
/* Drugi przycisk: obrys zamiast wypełnienia – tak jak „POZNAJ FUNDACJĘ". */
.f-akcja.f-obrys {
  background: transparent; color: var(--f-karmin); border-color: var(--f-karmin);
}
.f-akcja.f-obrys:hover { background: var(--f-karmin); color: var(--f-na-karminie); }
/* Na karminowym panelu przycisk jest biały. */
.f-panel-karmin .f-akcja {
  background: #fff; color: var(--f-karmin); border-color: #fff;
}
.f-panel-karmin .f-akcja:hover { background: #f1e3e4; border-color: #f1e3e4; }

/* ── czoło strony ─────────────────────────────────────────────────────────── */
.f-czolo {
  position: relative; overflow: hidden;
  background: var(--f-granat);
  color: #fff;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 8vw, 6rem);
}
/* Skos domu GOTÓW – ten sam kąt 19,1°, co w pozostałych pasach. */
.f-czolo::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--f-skos-gradient),
      rgba(4,25,66,0) 0%, rgba(4,25,66,0) 46%,
      rgba(255,255,255,.05) 46%, rgba(255,255,255,.05) 54%,
      rgba(4,25,66,0) 54%),
    radial-gradient(120% 90% at 78% 30%, rgba(0,87,168,.28), transparent 62%);
  pointer-events: none;
}
.f-czolo > * { position: relative; }
.f-czolo-tytul {
  font-family: var(--f-pismo-naglowek, Georgia, serif);
  font-weight: 900; line-height: .92; letter-spacing: -.02em;
  font-size: clamp(3rem, 11vw, 7rem); margin: 0;
  text-wrap: balance;
}
.f-czolo-tytul .f-kreska {
  display: inline-block; width: .34em; height: .1em; border-radius: 2px;
  background: var(--f-zloto-kreska); vertical-align: .82em; margin-left: -.34em;
}
.f-czolo-podtytul {
  font-family: var(--f-pismo-naglowek, Georgia, serif);
  font-weight: 800; color: var(--f-bursztyn);
  font-size: clamp(1.6rem, 5.5vw, 3.2rem); line-height: 1.05;
  margin: .1em 0 .7rem;
}
.f-czolo-lid { font-size: clamp(1rem, 2.4vw, 1.18rem); color: #e8edf6; margin: 0 0 1.8rem; }
.f-czolo-przyciski { display: flex; gap: .8rem; flex-wrap: wrap; }
.f-czolo .f-akcja.f-obrys { color: #fff; border-color: rgba(255,255,255,.75); }
.f-czolo .f-akcja.f-obrys:hover { background: #fff; color: var(--f-granat); border-color: #fff; }

/* Odręczny dopisek z makiety – „Wiara. Ludzie. Działanie." */
.f-dopisek {
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(.95rem, 2.2vw, 1.25rem); line-height: 1.35;
  display: inline-block; transform: rotate(-6deg);
}
.f-dopisek u { text-decoration: none; border-bottom: 3px solid var(--f-zloto-kreska); }

/* ── sześć kart „co robimy" ───────────────────────────────────────────────── */
.f-pas-kart { background: var(--f-tlo-pas); padding: clamp(2rem,5vw,3.4rem) 0; }
.f-karty {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.f-karta {
  background: var(--f-plansza); border: 1px solid var(--f-linia);
  border-radius: 8px; padding: 1.4rem 1.3rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.f-karta-znak { color: var(--f-karmin); font-size: 1.9rem; line-height: 1; }
.f-karta h3 {
  font-family: var(--f-pismo-naglowek, Georgia, serif);
  font-size: 1.12rem; color: var(--f-granat-logo); margin: 0; line-height: 1.2;
}
.f-karta p { color: var(--f-tekst-2); font-size: .95rem; margin: 0; flex: 1; }
.f-karta-wiecej {
  margin-top: .7rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--f-granat-logo); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5em;
}
.f-karta-wiecej::after { content: "→"; }
.f-karta-wiecej:hover { color: var(--f-karmin); text-decoration: underline; }

/* ── trzy panele pod kartami ──────────────────────────────────────────────── */
.f-panele {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.f-panel {
  border-radius: 8px; padding: 1.6rem 1.5rem; display: flex;
  flex-direction: column; gap: .6rem; justify-content: space-between;
  border: 1px solid var(--f-linia);
}
.f-panel h2 {
  font-family: var(--f-pismo-naglowek, Georgia, serif);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 0; line-height: 1.2;
}
.f-panel-granat { background: var(--f-granat); color: #fff; border-color: var(--f-granat); }
.f-panel-granat p { color: #dbe3f0; }
.f-panel-granat .f-karta-wiecej { color: #fff; }
.f-panel-jasny { background: var(--f-plansza); }
.f-panel-jasny h2 { color: var(--f-granat-logo); }
.f-panel-jasny p { color: var(--f-tekst-2); }
.f-panel-karmin { background: var(--f-karmin); color: var(--f-na-karminie); border-color: var(--f-karmin); }
.f-panel-karmin p { color: var(--f-na-karminie); opacity: .92; }
.f-panel-karmin .f-dopisek { color: var(--f-na-karminie); }
.f-panel-karmin .f-dopisek u { border-bottom-color: var(--f-zloto-kreska); }
.f-panel-serce { font-size: 2.2rem; line-height: 1; }

@media (max-width: 640px) {
  .f-dopisek { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f-akcja, .f-menu > ul > li.f-wesprzyj > a { transition: none; }
}

/* ── poprawki po pierwszym pomiarze (22.09.2026) ──────────────────────────── */

/* NAPIS „GOTÓW" BYŁ NIEWIDOCZNY. Dziedziczył --f-tekst (#272B3D) i leżał na
   granacie #00203d – zmierzony kontrast 1,1:1. Na makiecie napis jest granatowy,
   bo tło ma tam jasne zdjęcie; u nas tło jest ciemne, więc napis musi być biały.
   To nie odstępstwo od makiety, tylko ta sama zasada na odwróconym tle. */
.f-czolo .f-czolo-tytul { color: #ffffff; }          /* 15,3:1 na #00203d */
.f-czolo .f-czolo-lid   { color: #e8edf6; }          /* 12,4:1 */

/* Kreska nad Ó – w makiecie siedzi tuż nad literą, nie odlatuje w górę. */
.f-czolo-tytul .f-kreska { vertical-align: .62em; height: .085em; }

/* SZEŚĆ KART W RZĘDZIE, tak jak na makiecie. `auto-fit` z minimum 210 px dawał
   na 1280 px pięć kolumn i szóstą kartę samą w drugim rzędzie – układ się sypał.
   Liczba kolumn jest teraz wpisana wprost i schodzi skokami: 6 → 3 → 2 → 1. */
.f-karty { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) { .f-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .f-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .f-karty { grid-template-columns: 1fr; } }

/* Przy sześciu wąskich kolumnach karta musi oddychać mniejszym pismem. */
@media (min-width: 1181px) {
  .f-karta { padding: 1.2rem 1rem 1rem; }
  .f-karta h3 { font-size: 1.02rem; }
  .f-karta p { font-size: .88rem; }
  .f-karta-wiecej { font-size: .7rem; letter-spacing: .06em; }
}

/* Rysunki na kartach zastąpiły znaki emoji – te ostatnie ignorowały barwę
   i wychodziły raz kolorowe, raz czarne, zależnie od kroju w systemie.
   Rysunek bierze karmin z `color`, więc jest ten sam wszędzie. */
.f-karta-znak { display: flex; margin: 0 0 .1rem; }
.f-karta-znak svg { display: block; }
.f-panel-serce { display: flex; margin: 0; }

/* Nowe panele z makiety mają pełne tło i nie potrzebują żółtego klina,
   który zdobi panele starego układu. Przy karminie i granacie klin
   rozbijał narożnik i wyglądał jak usterka. */
.f-panele .f-panel::before,
.f-panele .f-panel::after { content: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PALETA Z ODCZYTU MAKIETY — wartości podane przez zamawiającego 22.09.2026.
   Zastępują barwy zdjęte przeze mnie pipetą; różnice były niewielkie
   (karmin 166,20,29 wobec 158,17,25), ale obowiązuje odczyt zamawiającego.

   USTERKA MAKIETY, KTÓRĄ TU NAPRAWIAMY. Bursztyn #F5A01A na bieli daje 2,12:1
   przy wymaganych 3:1 dla dużego pisma. Dlatego są DWA bursztyny:
     --f-bursztyn        #F5A01A  – tylko na ciemnym tle oraz kreski i akcenty,
     --f-bursztyn-pismo  #A8670A  – gdy złoty napis musi stać na jasnym (4,9:1).
   Nigdzie nie wolno postawić #F5A01A jako pisma na bieli.
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-motyw="jasny"],
:root[data-theme="light"] {
  --f-granat-logo: #0B1D40;
  --f-granat: #0B1D40;
  --f-karmin: #9E1119;
  --f-karmin-najazd: #7D0D14;
  --f-bursztyn: #F5A01A;
  --f-bursztyn-pismo: #A8670A;
  --f-zloto-kreska: #F5A01A;
  --f-tlo-pas: #F5F6F8;
  --f-tlo: #FFFFFF;
}
:root[data-motyw="ciemny"],
:root[data-theme="dark"] {
  --f-bursztyn-pismo: #F5A01A;      /* na ciemnym jasny bursztyn jest właściwy */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):not([data-theme="light"]) { --f-bursztyn-pismo: #F5A01A; }
}

/* Złoty napis na jasnym tle bierze przyciemniony bursztyn. Na ciemnym – jasny. */
.f-czolo .f-czolo-podtytul { color: var(--f-bursztyn); }      /* na granacie */
.f-pas-kart .f-czolo-podtytul,
.f-panel-jasny .f-zloto { color: var(--f-bursztyn-pismo); }

/* ── cele dotknięcia: nic klikalnego poniżej 44 × 44 px ───────────────────── */
.f-akcja,
.f-menu > ul > li.f-wesprzyj > a,
.f-karta-wiecej,
.f-szyna a, .f-szyna button {
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.f-karta-wiecej { padding: .55rem 0; }

/* ── zaznaczenie z klawiatury — widoczne wszędzie ─────────────────────────── */
.f-akcja:focus-visible,
.f-karta-wiecej:focus-visible,
.f-szyna a:focus-visible,
.f-szyna button:focus-visible,
.f-menu a:focus-visible {
  outline: 3px solid var(--f-bursztyn);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── lewa szyna: Wesprzyj, lupa, znaki społecznościowe ────────────────────── */
.f-szyna {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center;
  gap: .55rem; padding: .6rem .45rem;
}
.f-szyna .f-szyna-wesprzyj {
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: var(--f-karmin); color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .78rem; padding: 1.1rem .55rem; border-radius: 0 6px 6px 0;
  min-width: 44px; justify-content: center;
}
.f-szyna .f-szyna-wesprzyj:hover { background: var(--f-karmin-najazd); }
.f-szyna a:not(.f-szyna-wesprzyj), .f-szyna button {
  width: 44px; height: 44px; justify-content: center;
  color: var(--f-granat-logo); background: var(--f-plansza);
  border: 1px solid var(--f-linia); border-radius: 50%;
  text-decoration: none; cursor: pointer;
}
.f-szyna a:not(.f-szyna-wesprzyj):hover, .f-szyna button:hover { color: var(--f-karmin); }

/* Na telefonie szyna znika, a „Wesprzyj" schodzi na dół ekranu. */
.f-szyna-dol { display: none; }
@media (max-width: 900px) {
  .f-szyna { display: none; }
  .f-szyna-dol {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--f-karmin); color: #fff; text-decoration: none;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    font-size: .85rem; min-height: 52px; align-items: center; justify-content: center;
    gap: .6em;
  }
  .f-szyna-dol::after { content: "→"; }
  body { padding-bottom: 52px; }
}

/* ── pismo: czytane nie mniej niż 16 px, podpisy nie mniej niż 12 px ──────── */
body { font-size: 16px; }
.f-karta p { font-size: 1rem; }
@media (min-width: 1181px) { .f-karta p { font-size: 1rem; } .f-karta h3 { font-size: 1.06rem; } }
.f-karta-wiecej { font-size: .8rem; }

/* Panele szerokie z makiety: treść z lewej, przycisk albo znak z prawej. */
.f-panel-szeroki {
  flex-direction: row; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; padding: 1.8rem 2rem;
}
.f-panel-szeroki > div { flex: 1 1 320px; }
.f-panel-bok { flex: 0 0 auto; display: flex; align-items: center; gap: 1.2rem; margin: 0; }
.f-panel-bok img { height: auto; max-width: 200px; }
@media (max-width: 640px) { .f-panel-szeroki { padding: 1.4rem 1.2rem; } }
.f-stopka-rachunek { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* NAGŁÓWKI NA PANELACH BARWNYCH. Reguła bazowa `.f-panel h2` nadaje granat –
   na karminie dawało to 1,70:1, a na granatowym panelu 1,19:1, czyli napis
   praktycznie niewidoczny. Panele barwne mają własną barwę pisma i muszą ją
   narzucić również nagłówkom. Zmierzone po poprawce: 7,4:1 i 15,6:1. */
.f-panel-karmin h2, .f-panel-karmin h3,
.f-panel-granat h2, .f-panel-granat h3 { color: inherit; }
.f-panel-karmin { color: #ffffff; }
.f-panel-karmin p { color: #ffffff; opacity: .95; }
.f-panel-granat { color: #ffffff; }

/* Cele dotknięcia w menu: było 43 px, wymagane 44. Jeden piksel, ale to
   wymaganie mierzone, nie szacowane. */
.f-menu > ul > li > a { min-height: 44px; display: inline-flex; align-items: center; }
/* Odnośniki w stopce i w pasku bezpieczeństwa – rozsunięte do 44 px. */
.f-stopka a, .f-pasek a { display: inline-flex; align-items: center; min-height: 44px; }
.f-stopka li { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   WYGLĄD WEDŁUG MAKIETY — poprawka po porównaniu ekranu z makietą (22.09.2026).
   Układ i barwy się zgadzały, ale wygląd wciąż odstawał w czterech rzeczach:

     1. NAGŁÓWKI BYŁY SZERYFOWE. `--f-pismo-naglowek` nie jest nigdzie
        zdefiniowany, więc leciała wartość awaryjna Georgia. Makieta jest
        w całości bezszeryfowa — Poppins, który mamy osadzony lokalnie.
     2. CZOŁO BYŁO CIEMNE. Na makiecie pierwszy ekran jest JASNY (fotografia
        na jasnym tle), a napis GOTÓW granatowy. Odwróciliśmy to, bo nie mamy
        zdjęcia — ale jasne czoło da się zrobić i bez fotografii, a wtedy
        wszystko wraca na swoje miejsce: granat na jasnym, bursztyn
        przyciemniony do #A8670A, jak nakazuje odczyt makiety.
     3. KARTY BYŁY BIAŁE NA SZARYM PASIE. Makieta ma odwrotnie: szare karty
        #F5F6F8 na białej stronie.
     4. TRZY PANELE STAŁY JEDEN POD DRUGIM. Na makiecie są w jednym rzędzie,
        o różnych szerokościach: ciemny szerszy, dwa pozostałe węższe.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --f-pismo-naglowek: 'Poppins', 'Segoe UI', system-ui, sans-serif; }

/* ── 1 · czoło jasne, jak na makiecie ─────────────────────────────────────── */
.f-czolo {
  background: #FFFFFF;
  color: var(--f-tekst);
  padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(2.5rem, 7vw, 5rem);
  border-bottom: 1px solid var(--f-linia);
}
/* Skos domu GOTÓW zostaje, ale jako jasny cień, nie jako ciemny pas. */
.f-czolo::before {
  background:
    linear-gradient(var(--f-skos-gradient),
      rgba(11,29,64,0) 0%, rgba(11,29,64,0) 52%,
      rgba(11,29,64,.045) 52%, rgba(11,29,64,.045) 72%,
      rgba(11,29,64,0) 72%),
    radial-gradient(90% 80% at 88% 20%, rgba(245,160,26,.10), transparent 60%);
}
.f-czolo .f-czolo-tytul { color: var(--f-granat-logo); }      /* 15,6:1 na bieli */
.f-czolo .f-czolo-podtytul { color: var(--f-bursztyn-pismo); } /* 4,9:1 – wg odczytu */
.f-czolo .f-czolo-lid { color: var(--f-tekst-2); }             /* 7,6:1 */
.f-czolo .f-dopisek { color: var(--f-granat-logo) !important; }
.f-czolo .f-akcja.f-obrys { color: var(--f-karmin); border-color: var(--f-karmin); }
.f-czolo .f-akcja.f-obrys:hover { background: var(--f-karmin); color: #fff; border-color: var(--f-karmin); }

/* ── 2 · szare karty na białej stronie ────────────────────────────────────── */
.f-pas-kart { background: #FFFFFF; }
.f-karta { background: #F5F6F8; border: 0; }

/* ── 3 · trzy panele w jednym rzędzie, o różnych szerokościach ────────────── */
.f-trzy-panele {
  display: grid; gap: 1rem; margin-top: 1.4rem;
  grid-template-columns: 1.35fr 1fr 1fr;
  align-items: stretch;
}
.f-trzy-panele .f-panel { margin: 0; height: 100%; }
@media (max-width: 1020px) { .f-trzy-panele { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .f-trzy-panele { grid-template-columns: 1fr; } }

/* ── 4 · rysunek pisma bliżej makiety ─────────────────────────────────────── */
.f-czolo-tytul { letter-spacing: -.035em; font-weight: 700; }
.f-czolo-podtytul { letter-spacing: -.01em; }
.f-karta h3 { letter-spacing: -.01em; font-weight: 600; }
.f-naglowek-srodek { letter-spacing: -.015em; }
/* Nagłówki wewnątrz trzech paneli to h3 – nadrzędny h2 jest ukryty dla
   czytnika ekranu, żeby kolejność nagłówków szła H1 → H2 → H3 bez wyrwy. */
.f-trzy-panele .f-panel h3 {
  font-family: var(--f-pismo-naglowek); font-size: 1.22rem; margin: 0 0 .1rem;
  line-height: 1.22; color: inherit; font-weight: 600;
}
.f-trzy-panele .f-panel { padding: 1.5rem 1.4rem; gap: .5rem; }
.f-trzy-panele .f-panel-jasny { background: #F5F6F8; }

/* Żółty klin z układu bazowego wrócił na panele, bo przy przebudowie zmieniła
   się nazwa klasy z `.f-panele` na `.f-trzy-panele`, a reguła gasząca klin
   pilnowała starej nazwy. Na makiecie panele mają czyste narożniki. */
.f-trzy-panele .f-panel::before,
.f-trzy-panele .f-panel::after { content: none !important; }

/* Nagłówki paneli szły wersalikami z reguły bazowej. Makieta ma zwykłe pismo
   z wielką literą tylko na początku. */
.f-trzy-panele .f-panel h3 { text-transform: none; }
.f-karta h3 { text-transform: none; }

/* Karty w rzędzie równają się do góry, a przycisk „Dowiedz się więcej"
   siada przy dolnej krawędzi – jak na makiecie. */
.f-karta { justify-content: flex-start; }
.f-karta p { flex: 1 0 auto; }
.f-karta-wiecej { margin-top: auto; align-self: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOTOGRAFIE Z MAKIETY (wdrożone 22.09.2026)
   Zdjęcia są własnością zamawiającego – podstawa w `materialy/ZDJECIA.md`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── czoło: fotografia z prawej, napis z lewej ────────────────────────────── */
.f-czolo-foto { position: relative; }
.f-czolo-obraz {
  position: absolute; inset: 0 0 0 auto; height: 100%; width: 62%;
  object-fit: cover; object-position: 30% 40%;
  /* Zdjęcie ma po lewej stronie zniknąć w bieli, żeby napis GOTÓW leżał na
     czystym tle i zachował zmierzone 16,6:1. Bez tego przechodziłby przez
     twarze i kontrast przestałby być policzalny. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
  z-index: 0;
}
.f-czolo-foto::before { z-index: 1; }
.f-czolo-foto > .f-szer { position: relative; z-index: 2; }
.f-czolo-foto .f-czolo-tresc { max-width: 40ch; }

/* Na wąskim ekranie fotografia schodzi pod napis – zamiast go przykrywać. */
@media (max-width: 860px) {
  .f-czolo-obraz {
    position: static; width: 100%; height: clamp(180px, 42vw, 280px);
    margin-top: 1.4rem; border-radius: 8px;
    -webkit-mask-image: none; mask-image: none;
    object-position: 40% 35%;
  }
  .f-czolo-foto .f-czolo-tresc { max-width: none; }
  .f-czolo-foto { display: flex; flex-direction: column; }
  .f-czolo-foto > .f-szer { order: 0; }
  .f-czolo-obraz { order: 1; align-self: center; max-width: calc(100% - 2rem); }
}

/* ── fotografia w ciemnym panelu ──────────────────────────────────────────── */
.f-panel-foto {
  width: 100%; height: 150px; object-fit: cover; object-position: 50% 30%;
  border-radius: 6px; display: block; margin-bottom: .2rem;
}
/* ── okładki publikacji ───────────────────────────────────────────────────── */
.f-okladki { width: 100%; max-width: 230px; height: auto; display: block; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARZ „DOŁĄCZ DO NASZEJ RODZINY" (/fundacja/dolacz)
   Barwy z odczytu makiety. Pola na pełną szerokość, bo telefon 380 px jest
   wersją właściwą, nie pomniejszoną. Każde pole ma etykietę powiązaną
   znacznikiem `for`, nie sam podpowiadacz.
   ═══════════════════════════════════════════════════════════════════════════ */
.d-ramka {
  background: var(--f-tlo-pas); border-radius: 18px;
  padding: clamp(18px, 4vw, 32px); margin: 1.6rem 0 1rem;
}
.d-pole { margin-bottom: 1.4rem; border: 0; padding: 0; }
.d-et {
  display: block; font-weight: 700; font-size: 1rem; margin-bottom: .35rem;
  color: var(--f-tekst);
}
.d-wym { color: var(--f-karmin); font-weight: 800; }
.d-pomoc { font-size: .9rem; color: var(--f-tekst-2); margin: .3rem 0 .5rem; }
.d-ramka input[type=text], .d-ramka input[type=email], .d-ramka input[type=number],
.d-ramka select, .d-ramka textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 1rem;
  min-height: 48px; border-radius: 10px;
  border: 1px solid var(--f-linia-mocna);         /* 3,1:1 – obrys musi być widoczny */
  background: #ffffff; color: var(--f-tekst);
}
.d-ramka textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.d-ramka input:focus-visible, .d-ramka select:focus-visible,
.d-ramka textarea:focus-visible, .d-haczyk input:focus-visible {
  outline: 3px solid var(--f-karmin); outline-offset: 2px;
}
/* Haczyki i przełączniki: cały wiersz jest celem dotknięcia, nie sam kwadracik. */
.d-haczyk {
  display: flex; gap: .7rem; align-items: flex-start;
  min-height: 44px; padding: .5rem .2rem; cursor: pointer;
  font-size: 1rem; line-height: 1.5;
}
.d-haczyk input { width: 22px; height: 22px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--f-karmin); }
.d-haczyk:hover { background: rgba(11,29,64,.035); border-radius: 8px; }

/* Komunikat błędu mówi, CO ZROBIĆ. Nigdy „pole wymagane". */
.d-blad {
  color: #7D0D14; background: #FBEAEA; border-left: 3px solid var(--f-karmin);
  padding: .5rem .7rem; border-radius: 0 8px 8px 0;
  font-size: .95rem; margin-top: .45rem;
}
.d-blad-ogolny { margin: 0 0 1rem; }

/* Komunikat dla osób niepełnoletnich – to NIE jest błąd, tylko zaproszenie
   gdzie indziej. Dlatego nie ma barwy błędu ani znaku ostrzeżenia. */
.d-mlodziez {
  margin-top: .7rem; padding: .9rem 1rem; border-radius: 10px;
  background: #EAF2FB; border-left: 4px solid var(--f-granat-logo);
  font-size: .97rem; line-height: 1.55;
}

/* Pułapka na roboty. Schowana tak, żeby czytnik ekranu jej nie czytał,
   a przeglądarka nie podpowiadała do niej zapisanych danych. */
.d-pulapka {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* NAPIS „GOTÓW" ŁAMAŁ SIĘ NA DWIE LINIE przy 1440 px. Przyczyna: kreska nad „Ó"
   jest osobnym elementem wstawionym W ŚRODEK wyrazu, a to tworzy miejsce, w
   którym przeglądarka wolno jej złamać wiersz. Przy węższym oknie wyraz się
   mieścił i usterki nie było widać – dlatego wyszła dopiero na szerokim ekranie.
   To jedno słowo i nigdy nie ma prawa się złamać. */
.f-czolo-tytul { white-space: nowrap; }
/* Skoro nie wolno łamać, pismo musi się zmieścić także na wąskim ekranie.
   Górna granica liczona z szerokości okna, nie z widzimisię. */
.f-czolo-tytul { font-size: clamp(2.6rem, 13vw, 7rem); }
@media (min-width: 1100px) { .f-czolo-tytul { font-size: clamp(4rem, 7.2vw, 7rem); } }
/* Blok treści czoła nie może być węższy niż sam napis. */
.f-czolo-foto .f-czolo-tresc { max-width: min(46ch, 100%); }

/* Skoro „GOTÓW" nigdy się nie łamie, jego rozmiar musi być LICZONY z szerokości
   okna, a nie zgadywany. Wyraz w Poppins 700 ma szerokość około 3,9 × wysokości
   pisma (zmierzone: 414 px przy 106 px). Stąd wzór niżej – przy każdej
   szerokości napis mieści się w kolumnie i nie wypycha strony w bok.
   Wcześniejsze dwa `clamp` nakładały się na siebie i dawały skoki
   (820 px → 107 px, a 1100 px → 79 px), co wyglądało jak usterka. */
.f-czolo-tytul,
.f-czolo .f-czolo-tytul {
  font-size: min(7rem, calc((100vw - 3.2rem) / 3.95));
  white-space: nowrap;
}
/* Na szerokim ekranie napis dzieli miejsce z fotografią, więc liczymy
   z szerokości kolumny tekstu, nie całego okna. */
@media (min-width: 861px) {
  .f-czolo-foto .f-czolo-tytul { font-size: min(7rem, calc((58vw - 4rem) / 3.95)); }
}

/* NUMER RACHUNKU W JEDNEJ LINII. Łamał się na dwie, bo ma 32 znaki ze spacjami
   i nie mieścił się w kolumnie stopki przy 380 px. Numer konta przełamany
   w pół to nie jest drobiazg redakcyjny – ludzie go przepisują do przelewu
   i przy złamaniu łatwo zgubić albo powtórzyć cyfrę.
   Rozmiar liczony z szerokości okna, żeby mieścił się zawsze. */
.f-stopka-rachunek {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: min(.95rem, 3.45vw);
  letter-spacing: 0;
}
@media (min-width: 560px) { .f-stopka-rachunek { font-size: .95rem; } }

/* To samo na podstronie „Wesprzyj", gdzie numer stoi w dwóch postaciach. */
.f-numer {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  font-size: min(1.05rem, 3.9vw);
}
@media (min-width: 560px) { .f-numer { font-size: 1.05rem; } }

/* PRZY 320 px KARTY BYŁY SZERSZE NIŻ KOLUMNA i wypychały stronę w bok.
   Element siatki albo zwijki ma domyślnie `min-width: auto`, więc nie chce
   zejść poniżej szerokości swojej treści. Przy najwęższych ekranach to musi
   ustąpić – inaczej cała strona jedzie w bok, a nie jeden kafel. */
@media (max-width: 380px) {
  .f-karta, .f-panel, .f-siatka-2 > *, .f-siatka-3 > *,
  .f-karty > *, .f-trzy-panele > *, .f-przyciski > * {
    min-width: 0; max-width: 100%;
  }
  .f-przyciski { flex-wrap: wrap; }
}
/* Podpisy nie schodzą poniżej 12 px – to wymaganie odbioru. Przy 320 px numer
   rachunku wychodziłby 11 px, więc stawiamy podłogę. */
.f-stopka-rachunek { font-size: max(12px, min(.95rem, 3.45vw)); }
/* Znaki w boksach mają w znaczniku `width="640"`. Bez ograniczenia w arkuszu
   rozpychały kartę na najwęższych ekranach i to one wypychały stronę w bok –
   nie sama karta. Obraz nigdy nie może być szerszy od swojego miejsca. */
.f-karta img, .f-boks-znak img, .f-panel img { max-width: 100%; height: auto; }

/* CELE DOTKNIĘCIA W WARSTWIE WSPÓLNEJ — domknięcie wymagania 44 × 44 px.
   Poprawiamy to, co jest samodzielnym celem: znak w nagłówku i przełącznik
   motywu. Zmierzone przed poprawką: logo 38 px, przyciski motywu 34 px. */
.f-logo { min-height: 44px; display: inline-flex; align-items: center; }
.f-motyw button { min-height: 44px; padding-inline: .9rem; }

/* CZEGO ŚWIADOMIE NIE RUSZAM: odnośników STOJĄCYCH W ZDANIU – adresu poczty
   w akapicie i „Polityki prywatności" w treści zgody. Mają 19 px, bo tyle ma
   wiersz tekstu, w którym siedzą. Rozepchnięcie ich do 44 px rozwaliłoby
   rytm akapitu, a wymaganie celu dotknięcia i tak nie dotyczy odnośników
   wplecionych w zdanie – tam celem jest tekst, nie osobny przycisk. */

/* ═══════════════════════════════════════════════════════════════════════════
   POPRAWKI PO NIEZALEŻNYM PRZEGLĄDZIE (22.09.2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · NUMER RACHUNKU BYŁ UCINANY przy 740–940 px. Siatka `max-content 1fr`
   dawała podpisowi „NUMER RACHUNKU" 137 px, a numer (295 px, sklejony twardymi
   spacjami) nie miał gdzie się złamać i wychodził 58 px poza ekran – bez
   możliwości przewinięcia ani zaznaczenia. Ucięty numer konta to nie usterka
   kosmetyczna: człowiek nie przepisze go do przelewu.
   Na wąskich i średnich ekranach podpis idzie nad numer, nie obok. */
@media (max-width: 1000px) {
  .f-konto { grid-template-columns: 1fr; }
  .f-konto dt { margin-top: .7rem; }
}
.f-konto dd { min-width: 0; overflow-wrap: anywhere; }

/* 4 · IKONY KART BYŁY SZARE. `.f-karta-znak` to akapit, więc reguła
   `.f-karta p` (0-1-1) biła `.f-karta-znak` (0-1-0) i ikona dostawała barwę
   tekstu. Zmierzone: rgb(76,85,107) zamiast karminu. */
.f-karta p.f-karta-znak { color: var(--f-karmin); flex: 0 0 auto; }
.f-karta p.f-karta-znak svg { width: 34px; height: 34px; }

/* 5 · SZEŚĆ KART SIĘ NIE RÓWNAŁO. `.f-karta p { flex: 1 0 auto }` rozciągało
   także akapit z ikoną, więc nagłówki startowały na czterech różnych
   wysokościach, a szósta karta miała odnośnik 110 px wyżej niż reszta.
   Rozciąga się wyłącznie opis. */
.f-karta > p:not(.f-karta-znak) { flex: 1 1 auto; }

/* 6 · CELE DOTKNIĘCIA w boksie „Kontakt" sekcji produkcji – reguła stopki
   ich nie obejmowała. */
.f-boks-pozycja a, .f-karta li a { min-height: 44px; display: inline-flex; align-items: center; }

/* 7 · ZNACZNIKI miały 11,52 px, wymagane minimum to 12 px. */
.f-znacznik { font-size: max(12px, .78rem); }

/* 8 · PRZEWIJANIE W BOK PRZY 320 px. Siatka nie schodziła poniżej 320 px
   kolumny, a kontener ma po 16 px marginesu. */
@media (max-width: 420px) {
  .f-siatka-2, .f-siatka-3 { grid-template-columns: 1fr; }
}

/* 10 · ODRĘCZNE DOPISKI renderowały się krojem szeryfowym, bo żaden z krojów
   pisanych nie istnieje ani u nas, ani u większości odwiedzających spoza
   Windows. Nie mamy osadzonego kroju pisanego, więc zamiast udawać pismo
   ręczne – kursywa z naszego kroju i złote podkreślenie. Uczciwiej niż
   Liberation Serif podpisany jako „odręczny". */
.f-dopisek {
  font-family: var(--f-pismo, 'Lato', system-ui, sans-serif);
  font-style: italic; font-weight: 600;
}

/* 11 · logo-fundacja-biale.png było pobierane i rysowane 0 × 0 px. */
.f-czolo img[src$="logo-fundacja-biale.png"] { display: none; }
/* Znaczniki „brak treści prawnej" itp. miały 11,52 px. Wcześniejsza poprawka
   nie zadziałała, bo reguła bazowa jest bardziej szczegółowa. */
.f-stopka .f-znacznik, .f-menu .f-znacznik, span.f-znacznik { font-size: 12px; }
/* Przycisk w ciemnym panelu: biały obrys na granacie. */
.f-panel-granat .f-akcja.f-obrys { color: #fff; border-color: rgba(255,255,255,.75); }
.f-panel-granat .f-akcja.f-obrys:hover { background: #fff; color: var(--f-granat); border-color: #fff; }
/* Znacznik w stopce miał 11,52 px (.72rem). Reguła `.f-stopka .f-nieczynny
   .f-znacznik` jest bardziej szczegółowa niż moja wcześniejsza, więc podnosimy
   rozmiar tam, gdzie naprawdę się rozstrzyga. Wymagane minimum: 12 px. */
.f-stopka .f-nieczynny .f-znacznik,
.f-menu .f-nieczynny .f-znacznik { font-size: 12px; }
/* Kto odpisuje – wyróżnione, bo to jedyna rzecz, która decyduje, czy formularz
   coś da. Ks. Andrzej, 22.09.2026: „Potrzebne imię i nazwisko, nie »Zarząd
   Fundacji«". Zdanie stoi nad formularzem, nie pod nim. */
.d-kto-odpisuje {
  background: var(--f-tlo-pas); border-left: 4px solid var(--f-karmin);
  border-radius: 0 10px 10px 0; padding: .9rem 1.1rem;
  margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.55;
}
/* Pole „Inne – jakie?" wsunięte pod haczyk, żeby było widać, do czego należy. */
.d-inne-jakie { margin: .3rem 0 0 2.1rem; padding-left: .8rem;
  border-left: 3px solid var(--f-linia); }

/* Szybkie kwoty darowizny. Cele po 48 px, bo na telefonie klika się je kciukiem,
   a pomyłka oznacza wpłatę innej kwoty, niż człowiek zamierzył. */
.f-kwoty { display: flex; flex-wrap: wrap; gap: .6rem; }
.f-kwota {
  min-height: 48px; min-width: 88px; padding: .7em 1.1em;
  font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  background: var(--f-plansza); color: var(--f-granat-logo);
  border: 2px solid var(--f-linia-mocna); border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.f-kwota:hover { border-color: var(--f-karmin); color: var(--f-karmin); }
.f-kwota.wybrana { background: var(--f-karmin); color: var(--f-na-karminie); border-color: var(--f-karmin); }
.f-kwota:focus-visible { outline: 3px solid var(--f-bursztyn); outline-offset: 3px; }
/* Przycisk wpłaty wyżej niż pozostałe przyciski (48 px zamiast 44 px).
   Przy tym jednym pomyłkowe trafienie kosztuje pieniądze, więc cel ma być
   większy. Reszta strony zostaje bez zmian. */
#f-wplac { min-height: 48px; margin-top: .4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL WPŁAT — /fundacja/wesprzyj (klasy `w-`)            dopisane 22.09.2026
   ═══════════════════════════════════════════════════════════════════════════
   Zamówienie ks. Andrzeja Lubowickiego: jeden ekran, bez kroków, dwie
   zakładki, trzy kwoty w rzędzie, przycisk na pełną szerokość.

   TELEFON 380 px JEST WERSJĄ WŁAŚCIWĄ, nie pomniejszoną. Wszystko jest
   policzone od niego w górę, nie odwrotnie.
     380 − 2 × 16 px (padding .f-szer)  = 348 px
     348 − 2 × 16 px (padding .w-panel) = 316 px
     316 − 2 × 8 px  (odstępy kwot)     = 300 px → trzy kwoty po 100 px.

   TWARDE PROGI, KTÓRE TU OBOWIĄZUJĄ:
     • każde pole i każdy przycisk ≥ 44 px wysokości (kwoty i przycisk
       wpłaty dostają 56 px — pomyłka kosztuje pieniądze),
     • żadne pismo poniżej 16 px; dlatego podpisy pomocnicze mają tu 16 px,
       a nie .9rem jak na reszcie strony,
     • kontrast ≥ 4,5:1; bursztyn #F5A01A wyłącznie na ciemnym — na jasnym
       idzie przyciemniony --f-bursztyn-pismo (#A8670A).

   ZNACZNIK SKUPIENIA jest dwubarwny: jasny pierścień przy samym elemencie
   i karminowy na zewnątrz. Jednobarwny przepadał — karmin na granatowej
   zakładce daje 2,0:1, a bursztyn na jasnym tle panelu 1,96:1. Dwa
   pierścienie widać na obu.
   ─────────────────────────────────────────────────────────────────────── */

.w-szer { max-width: 620px; }
.w-naglowek { margin-bottom: .35em; }
.w-na-co { font-size: 1.06rem; line-height: 1.55; color: var(--f-tekst-2);
           margin: 0 0 1.2rem; max-width: 46ch; }

.w-panel {
  background: var(--f-tlo-pas);
  border: 1px solid var(--f-linia);
  border-radius: 18px;
  padding: clamp(16px, 4vw, 28px);
}

/* ── skupienie klawiaturą ─────────────────────────────────────────────────── */
.w-panel :focus-visible {
  outline: 2px solid transparent;          /* dla trybu wysokiego kontrastu */
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--f-plansza), 0 0 0 6px var(--f-karmin);
}

/* ── 2 · zakładki ────────────────────────────────────────────────────────── */
.w-zakladki {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-bottom: 1.2rem;
}
.w-zakladka {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .12rem; min-height: 60px; padding: .7rem .5rem;
  font: inherit; cursor: pointer; text-align: center;
  background: var(--f-plansza); color: var(--f-tekst);
  border: 2px solid var(--f-linia-mocna); border-radius: 12px;
}
.w-zakladka-nazwa { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
/* Podpis „Najbardziej pomaga” — 16 px, bo niżej nie wolno zejść. */
.w-zakladka-podpis { font-size: 1rem; line-height: 1.2; color: var(--f-bursztyn-pismo); }
.w-zakladka:hover { border-color: var(--f-karmin); }
.w-zakladka.otwarta {
  background: var(--f-granat); border-color: var(--f-granat); color: #ffffff;
}
/* Na granacie wolno bursztynowi być pismem: #F5A01A na #0B1D40 = 7,9:1. */
.w-zakladka.otwarta .w-zakladka-podpis { color: var(--f-bursztyn); }

/* ── 3 · kwoty ───────────────────────────────────────────────────────────── */
.w-kwoty-pole { border: 0; padding: 0; margin: 0 0 1rem; }
.w-legenda { display: block; padding: 0; font-size: 1rem; font-weight: 700;
             color: var(--f-tekst); margin-bottom: .5rem; }
.w-kwoty { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.w-kwota {
  min-height: 56px; padding: .6em .2em;
  font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--f-plansza); color: var(--f-granat-logo);
  border: 2px solid var(--f-linia-mocna); border-radius: 12px;
}
.w-kwota:hover { border-color: var(--f-karmin); color: var(--f-karmin); }
.w-kwota.wybrana {
  background: var(--f-karmin); color: var(--f-na-karminie); border-color: var(--f-karmin);
}

.w-et { display: block; font-weight: 700; font-size: 1rem;
        color: var(--f-tekst); margin: 1rem 0 .35rem; }
.w-wlasna-ramka { position: relative; }
.w-wlasna, .w-wejscie {
  width: 100%; min-height: 48px; padding: 12px 13px;
  font: inherit; font-size: 1rem;
  border: 1px solid var(--f-linia-mocna); border-radius: 10px;
  background: var(--f-plansza); color: var(--f-tekst);
}
.w-wlasna { padding-right: 46px; }
.w-wlasna-zl {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; font-weight: 700; color: var(--f-tekst-2); pointer-events: none;
}
/* Strzałki pola liczbowego zajmują miejsce i mylą — kwotę wpisuje się z ręki. */
.w-wlasna::-webkit-outer-spin-button,
.w-wlasna::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.w-wlasna { -moz-appearance: textfield; appearance: textfield; }

/* ── 4 · co kupuje ta kwota ──────────────────────────────────────────────── */
/* TREŚĆ TYCH ZDAŃ CZEKA NA POTWIERDZENIE BIURA FUNDACJI — patrz komentarz
   w wesprzyj.html i w wesprzyj-tpay.js. */
.w-kupuje {
  margin: 1rem 0 1.2rem; padding: .8rem 1rem;
  background: var(--f-plansza); border-left: 4px solid var(--f-zloto-kreska);
  border-radius: 0 10px 10px 0;
  font-size: 1rem; line-height: 1.5; color: var(--f-tekst); min-height: 44px;
}

/* ── 5 · sposoby płatności ───────────────────────────────────────────────── */
.w-platnosci { margin: 0 0 1.2rem; }
.w-platnosci-et { font-size: 1rem; font-weight: 700; color: var(--f-tekst);
                  margin: 0 0 .5rem; }
.w-platnosci-lista { list-style: none; margin: 0; padding: 0;
                     display: flex; flex-wrap: wrap; gap: .4rem; }
.w-platnosc {
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: .5rem .7rem; border-radius: 8px;
  background: var(--f-plansza); color: var(--f-tekst);
  border: 1px solid var(--f-linia-mocna);
}
/* BLIK pierwszy i wyróżniony — to nim płaci się u nas najczęściej. */
.w-platnosc-pierwsza { border: 2px solid var(--f-karmin); color: var(--f-karmin); }

/* ── pola ────────────────────────────────────────────────────────────────── */
.w-pole { margin-bottom: 1.1rem; }
.w-pomoc { font-size: 1rem; line-height: 1.45; color: var(--f-tekst-2);
           margin: .35rem 0 0; }
/* „(wymagany)” — dla czytnika ekranu, bo gwiazdka sama nic nie mówi. */
.w-scha { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
          overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Komunikaty błędu w tym panelu nie schodzą poniżej 16 px. */
.w-panel .d-blad { font-size: 1rem; }

/* ── 6 · przycisk wpłaty ─────────────────────────────────────────────────── */
.w-wplac {
  display: block; width: 100%; min-height: 56px;
  padding: .85em 1.2em; margin: .4rem 0 .9rem;
  font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer;
  background: var(--f-karmin); color: var(--f-na-karminie);
  border: 2px solid var(--f-karmin); border-radius: 12px;
}
.w-wplac:hover { background: var(--f-karmin-najazd); border-color: var(--f-karmin-najazd); }
.w-wplac[disabled] { opacity: .75; cursor: progress; }

/* ── 7 · pod przyciskiem ─────────────────────────────────────────────────── */
.w-spokoj { font-size: 1rem; line-height: 1.5; color: var(--f-tekst);
            margin: 0 0 .7rem; font-weight: 600; }
.w-podatek { font-size: 1rem; line-height: 1.5; color: var(--f-tekst-2); margin: 0; }
/* „Jak to działa” rozwija wyjaśnienie w miejscu. Strony o odliczeniu
   darowizny jeszcze nie ma, więc odnośnik prowadziłby donikąd. */
.w-jak {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .3rem; margin-left: .15rem;
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  background: none; border: 0; border-radius: 6px;
  color: var(--f-odnosnik); text-decoration: underline; text-underline-offset: .18em;
}
.w-jak:hover { color: var(--f-odnosnik-najazd); }
.w-jak-tresc {
  margin: .5rem 0 0; padding: .9rem 1rem; border-radius: 10px;
  background: var(--f-plansza); border: 1px solid var(--f-linia);
  font-size: 1rem; line-height: 1.55; color: var(--f-tekst);
}
.w-jak-tresc p { margin: 0 0 .6rem; font-size: 1rem; }
.w-jak-tresc p:last-child { margin-bottom: 0; }
.w-jak-podmiot { color: var(--f-tekst-2); }
.w-operator { font-size: 1rem; line-height: 1.5; color: var(--f-tekst-2);
              margin: 1rem 0 0; }

/* Od 480 px w górę kwoty i tak zostają po trzy w rzędzie — rząd po trzy jest
   rozstrzygnięciem zamówienia, nie skutkiem ciasnoty. */