html,body{margin:0;padding:0}


/* Pielgrzymka Edukacji Domowej — mapa modlitwy i szkół.
   ────────────────────────────────────────────────────────────────────────────
   Moduł jest CIEMNY. Granat wieży jasnogórskiej ze znaku pielgrzymki niesie
   całość, błękit otwartej księgi jest akcentem, a złoto aureoli zostaje
   jedynym ciepłym kolorem na stronie.

   To nie jest wybór estetyczny, tylko treściowy: świecy nie widać w dzień.
   Na ciemnym granacie każde zapalone światło czyta się natychmiast, choć
   zajmuje ułamek powierzchni mapy — a o to w tym module chodzi.

   Wszystkie barwy siedzą w zmiennych. Żeby dopasować moduł do innego motywu,
   wystarczy nadpisać `.ped { --ped-plomien: … }` w motywie potomnym.
   ──────────────────────────────────────────────────────────────────────────── */

.ped, .ped-zglos, .ped-wykaz, .ped-piesn {
  --ped-noc:      #04142a;   /* najciemniejsze — plansza mapy i pieśni */
  --ped-tlo:      #071d38;   /* tło modułu */
  --ped-papier:   #0e2c50;   /* karty, panele, pola */
  --ped-pole:     #0a2444;   /* wnętrze pól formularza */
  --ped-tekst:    #e9f2fd;   /* tekst główny */
  --ped-glebia:   #9dbcdd;   /* tekst poboczny */
  --ped-blekit:   #4a9fd8;   /* błękit ze znaku — odnośniki, przyciski wtórne */
  --ped-brzeg:    #1d4372;
  --ped-ziemia:   #12365f;   /* diecezja, w której nikt jeszcze nie zapalił świecy */
  --ped-granica:  #214d7f;   /* linie między diecezjami */
  --ped-najazd:   #1a4674;
  --ped-zloto:    #fdc845;   /* złoto ze znaku — liczby, sigla, akcenty */
  --ped-plomien:  #ffb524;   /* płomień świecy */
  --ped-blask:    #ffe08a;   /* poświata wokół płomienia */
  --ped-zar:      #5a3f07;   /* przygasły żar — od niego zaczyna się blask */
  --ped-alarm:    #ff9b8b;
  --ped-zgoda:    #7ddba8;
  --ped-knot:     #fff3cf;   /* jasny punkt w środku płomienia */
  --ped-akcent-tekst: var(--ped-zloto);   /* na granacie złoto jest czytelne */

  color: var(--ped-tekst);
  font-family: inherit;
}

/* ── Wersja jasna ─────────────────────────────────────────────────────────
   Ta sama identyfikacja, odwrócone role: biel i błękit niosą stronę, granat
   schodzi do tekstu, złoto zostaje płomieniem. Bliżej strony pielgrzymkaed.pl;
   lepiej się drukuje i lepiej czyta w pełnym słońcu.
   Zmieniamy WYŁĄCZNIE zmienne — żadna reguła niżej nie wie o motywach. */
/* MODUŁY ZAGNIEŻDŻONE MUSZĄ IŚĆ ZA MOTYWEM RODZICA.
   Wiersz 18 nadaje ciemną paletę wszystkim czterem rodzajom modułów:
   `.ped, .ped-zglos, .ped-wykaz, .ped-piesn`. Kiedy `.ped-piesn` leży
   WEWNĄTRZ `.ped` z przełączonym motywem, jego własna deklaracja (0,1,0)
   bije wartość odziedziczoną — i pieśń wraca do barw nocnych, tyle że na
   białym tle. Zmierzone 1.09.2026 po kliknięciu „Biało-czerwona":
   23 napisy poniżej progu, najgorsze 1,13 : 1, czyli praktycznie niewidoczne.
   Nikt tego nie zgłosił, bo motyw trzeba najpierw włączyć.
   Selektor potomny daje 0,3,0 i rozstrzyga. */
.ped[data-motyw="jasny"], .ped-zglos[data-motyw="jasny"],
.ped-wykaz[data-motyw="jasny"], .ped-piesn[data-motyw="jasny"],
.ped[data-motyw="jasny"] .ped-zglos,
.ped[data-motyw="jasny"] .ped-wykaz,
.ped[data-motyw="jasny"] .ped-piesn {
  --ped-noc:      #e4ecf7;
  --ped-tlo:      #ffffff;
  --ped-papier:   #f6f9fd;
  --ped-pole:     #ffffff;
  --ped-tekst:    #093e7a;
  --ped-glebia:   #3c648f;
  --ped-blekit:   #2b84be;
  --ped-brzeg:    #cfdcee;
  --ped-ziemia:   #dae6f4;
  --ped-granica:  #b3c7e0;
  --ped-najazd:   #c7d9ee;
  --ped-zloto:    #8a5e00;   /* pociemnione: #b87f08 dawało kontrast 3.27 (próg 4.5) */
  --ped-plomien:  #f0a30a;
  --ped-blask:    #ffd97a;   /* poświata płomienia — GRAFIKA, nie tekst */
  --ped-zar:      #f7e9c6;
  --ped-alarm:    #a3271b;
  --ped-zgoda:    #1f7a4c;
  --ped-knot:     #a86a00;
  --ped-akcent-tekst: #8a5e00;   /* akcent CZYTELNY na jasnym tle (kontrast > 4.5) */
}

.ped, .ped-zglos, .ped-wykaz {
  max-width: 980px;
  margin: 0 auto;
  background: var(--ped-tlo);
  border-radius: 18px;
  padding: clamp(18px, 3.5vw, 34px);
}
/* Zagnieżdżone bloki (formularz szkół wewnątrz mapy) nie dokładają drugiego
   tła ani drugiego marginesu — inaczej powstaje ramka w ramce. */
.ped .ped-zglos, .ped .ped-wykaz { background: none; padding: 0; border-radius: 0; }

/* Pola mają szerokość 100% i wewnętrzny odstęp naraz. Bez tej reguły na wąskim
   ekranie wystają poza stronę i cała witryna zaczyna przewijać się w bok.
   Wiele motywów ustawia to u siebie — ale nie wszystkie, a moduł ma działać
   w każdym, do którego ktoś go wklei. */
.ped, .ped-zglos, .ped-wykaz,
.ped *, .ped-zglos *, .ped-wykaz * { box-sizing: border-box; }

/* ── Przełącznik wersji ───────────────────────────────────────────────────── */
.ped-gora { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ped-motyw {
  font: inherit; font-size: .85em; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--ped-brzeg);
  background: var(--ped-papier); color: var(--ped-glebia);
}
.ped-motyw:hover { background: var(--ped-ziemia); color: var(--ped-tekst); }
.ped-motyw.wybrany {
  background: var(--ped-plomien); color: var(--ped-noc); border-color: var(--ped-plomien);
}
.ped-motyw-kropka {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0, 0, 0, .18);
}
.ped-motyw:focus-visible { outline: 2px solid var(--ped-plomien); outline-offset: 2px; }

/* ── Wersja biało-czerwona ────────────────────────────────────────────────
   Barwy narodowe wzięte dosłownie: biel jako grunt, czerwień jako światło.
   Płomień świecy ma czerwoną łunę i BIAŁY rdzeń — samo światło modlitwy jest
   więc biało-czerwone, bez doklejania flagi w rogu strony.

   CZERWIEŃ JEST JEDNA: #ce1126. Do 1.09.2026 stało tu zdanie „czerwień to
   #D4213D, ta z ustawy o godle" — a arkusz malował #ce1126, chorągiewka
   #d4213d, próbka przy przełączniku znów #d4213d. Trzy czerwienie i jedno
   powołanie się na ustawę, którego kod nie wykonywał.
   Ustawa opisuje barwę współrzędnymi CIE, nie kodem szesnastkowym; #D4213D
   jest jednym z jej przeliczeń na ekran, #ce1126 drugim. Żadne nie jest
   „tym z ustawy" w sensie prawnym. Wybieram #ce1126, bo na bieli daje
   5,63 : 1 wobec 5,14 : 1 dla #D4213D (zmierzone), więc czyta się jako
   pismo, a nie tylko jako plama — i bo cały motyw już na niej stoi.
   Gdyby miała obowiązywać ta druga, zmienia się ten jeden wiersz. */
.ped[data-motyw="patriotyczny"], .ped-zglos[data-motyw="patriotyczny"],
.ped-wykaz[data-motyw="patriotyczny"], .ped-piesn[data-motyw="patriotyczny"],
.ped[data-motyw="patriotyczny"] .ped-zglos,
.ped[data-motyw="patriotyczny"] .ped-wykaz,
.ped[data-motyw="patriotyczny"] .ped-piesn {
  /* BIAŁO-CZERWONE, NIE RÓŻOWE. Wcześniej wszystkie płaszczyzny miały domieszkę
     różu (#f6f0f1, #fdf9fa, #f1e2e5) i całość czytała się jako blady pastel.
     Teraz biel jest bielą — czysta, bez domieszki — a czerwień jedna, krwista,
     ta sama na fladze, w akcentach i na mapie. Dwie barwy, nie dziesięć odcieni.

     Czerwień #ce1126 to barwa flagowa w odczycie ekranowym: kontrast 5,63 na
     bieli (zmierzone 1.09.2026; wcześniej stało tu 6,1 — powyżej progu 4,5
     tak czy inaczej, ale liczba ma być zmierzona, a nie oszacowana), czyli
     czytelna także jako tekst, nie tylko jako plama. */
  --ped-noc:      #ffffff;
  --ped-tlo:      #ffffff;
  --ped-papier:   #ffffff;
  --ped-pole:     #ffffff;
  --ped-tekst:    #17171a;
  --ped-glebia:   #55555c;   /* szarość neutralna, bez różu */
  --ped-blekit:   #ce1126;   /* rolę akcentu przejmuje czerwień */
  --ped-brzeg:    #e6e6e9;   /* obramowania: szarość, żeby biel została bielą */
  --ped-ziemia:   #f7f7f8;   /* diecezja bez świecy — biel z ledwie widocznym cieniem */
  --ped-granica:  #c9c9cf;
  --ped-najazd:   #fdeef0;   /* najazd kursorem: ślad czerwieni, nie róż */
  --ped-zloto:    #ce1126;   /* krwista czerwień flagowa */
  --ped-plomien:  #ce1126;
  --ped-blask:    #ff8fa1;   /* poświata płomienia — GRAFIKA, nie tekst */
  --ped-zar:      #fff2f4;
  --ped-alarm:    #8a1010;
  --ped-zgoda:    #1f7a4c;
  --ped-knot:     #ffffff;   /* biały rdzeń płomienia */
  --ped-akcent-tekst: #b30e20;   /* ciemniejsza czerwień do tekstu: 7,00 (zmierzone) */
}

/* Na białym gruncie sam biały rdzeń zniknąłby, więc dostaje czerwony obrys. */
.ped[data-motyw="patriotyczny"] .ped-plomyk-punkt,
.ped-piesn[data-motyw="patriotyczny"] .ped-plomyk-punkt {
  stroke: var(--ped-plomien); stroke-width: 1px; vector-effect: non-scaling-stroke;
}
/* Przycisk „Zapal światło": biel na czerwieni zamiast granatu na złocie. */
.ped[data-motyw="patriotyczny"] .ped-zapal { color: #ffffff; }
.ped[data-motyw="patriotyczny"] .ped-zapal:hover { background: #b30e20; color: #fff; }
.ped[data-motyw="patriotyczny"] .ped-slowo-przycisk,
.ped[data-motyw="patriotyczny"] .ped-zapisy-przycisk { color: #ffffff; }
.ped[data-motyw="patriotyczny"] .ped-piesn-przycisk.wybrana { color: #ffffff; }

/* ── Nagłówek ─────────────────────────────────────────────────────────────── */
.ped-naglowek { text-align: center; margin-bottom: 26px; }
.ped-logo {
  display: block; margin: 0 auto 18px;
  width: 260px; max-width: 62%; height: auto;
}
.ped-nadtytul {
  font-size: .78em; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ped-zloto); margin: 0 0 .5em;
}
.ped-tytul { margin: 0 0 .4em; line-height: 1.2; text-wrap: balance; color: var(--ped-tekst); }
.ped-wstep { margin: 0 auto; max-width: 56ch; color: var(--ped-glebia); line-height: 1.65; }

/* ── Liczby ───────────────────────────────────────────────────────────────── */
.ped-liczby {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.ped-liczba {
  background: var(--ped-papier); border: 1px solid var(--ped-brzeg);
  border-radius: 12px; padding: 16px 12px; text-align: center;
}
.ped-liczba strong {
  display: block; font-size: 1.9em; line-height: 1.1;
  color: var(--ped-zloto); font-variant-numeric: tabular-nums;
}
.ped-liczba span { font-size: .85em; color: var(--ped-glebia); }
.ped-liczba em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: .78em; color: var(--ped-glebia); opacity: .8;
}
/* Kafel szkół odróżnia się znacznikiem, nie kolorem — obok świec ma stać
   równorzędnie, a nie konkurować o uwagę. */
.ped-liczba--szkoly { border-left: 3px solid var(--ped-blekit); }
.ped-liczba--szkoly strong { color: var(--ped-blekit); }

/* ── Pasek intencji u góry ────────────────────────────────────────────────
   Pierwsza rzecz po nagłówku. Kto wchodzi, ma najpierw zobaczyć, o co modlą się
   inni — dopiero wtedy zapalenie własnej świecy przestaje być wypełnianiem
   formularza, a staje się dołączeniem. */
.ped-pasek-intencji {
  background: var(--ped-papier);
  border: 1px solid var(--ped-brzeg);
  border-left: 4px solid var(--ped-plomien);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px; margin-bottom: 18px;
}
.ped-pasek-tytul {
  margin: 0 0 10px; font-size: .74em; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ped-zloto);
}
.ped-pasek-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  max-height: 168px; overflow-y: auto;
}
.ped-pasek-lista li {
  padding: 8px 12px; background: var(--ped-pole);
  border: 1px solid var(--ped-brzeg); border-radius: 9px;
  font-size: .93em; line-height: 1.5;
}
/* Świeżo dopisana intencja rozjaśnia się na chwilę — żeby było widać, że
   właśnie doszła, a nie żeby migać bez powodu. */
.ped-pasek-lista li.swieza { animation: ped-doszla 2.4s ease-out; }
@keyframes ped-doszla {
  0%   { background: var(--ped-zar); transform: translateY(-4px); }
  100% { background: var(--ped-pole); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ped-pasek-lista li.swieza { animation: none; } }

/* ── Własna intencja przy Słowie ─────────────────────────────────────────── */
.ped-moja-intencja {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--ped-pole); border-radius: 9px;
  font-size: .95em; line-height: 1.55;
}
.ped-moja-intencja span {
  display: block; font-size: .82em; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ped-zloto); margin-bottom: 3px;
}

/* ── Chwila decyzji, po modlitwie ────────────────────────────────────────── */
.ped-decyzja {
  margin-top: 22px; padding: 26px 24px; text-align: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ped-plomien) 12%, var(--ped-papier)), var(--ped-papier));
  border: 1px solid var(--ped-plomien);
  border-radius: 14px;
  animation: ped-wejscie 1.1s ease-out;
}
@keyframes ped-wejscie {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ped-decyzja { animation: none; } }
.ped-decyzja-nad {
  margin: 0 0 6px; font-size: .74em; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ped-zloto);
}
.ped-decyzja h3 { margin: 0 0 8px; color: var(--ped-tekst); text-wrap: balance; }
.ped-decyzja p { margin: 0 0 16px; color: var(--ped-glebia); }
.ped-decyzja-male { margin: 14px 0 0 !important; font-size: .87em; opacity: .85; }

/* ── Zapisy na pielgrzymkę ───────────────────────────────────────────────── */
/* Stoją nisko, po modlitwie — kto zapalił świecę, zrobił już pierwszy krok
   i wtedy pytanie o drugi brzmi naturalnie, a nie jak zaczepka na wejściu. */
.ped-zapisy {
  margin-top: 30px; padding: 26px 24px; text-align: center;
  background: var(--ped-papier);
  border: 1px solid var(--ped-brzeg); border-top: 3px solid var(--ped-plomien);
  border-radius: 4px 4px 14px 14px;
}
.ped-zapisy-nad {
  margin: 0 0 6px; font-size: .74em; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ped-zloto);
}
.ped-zapisy h3 { margin: 0 0 6px; color: var(--ped-tekst); }
.ped-zapisy p { margin: 0 0 16px; color: var(--ped-glebia); }
.ped-zapisy-przycisk {
  display: inline-block; padding: 17px 38px; border-radius: 11px;
  background: var(--ped-plomien); color: var(--ped-noc);
  font-weight: 800; text-decoration: none; font-size: 1.22em;
  letter-spacing: .01em;
  box-shadow: 0 0 24px rgba(255, 181, 36, .26);
}
.ped-zapisy-przycisk:hover { background: var(--ped-blask); }

/* ── Mapa ─────────────────────────────────────────────────────────────────── */
.ped-plansza {
  background: radial-gradient(ellipse at 50% 42%,
              color-mix(in srgb, var(--ped-noc) 82%, var(--ped-blekit)) 0%,
              var(--ped-noc) 72%);
  border: 1px solid var(--ped-brzeg);
  border-radius: 16px; padding: 12px; position: relative;
}
.ped-mapa { position: relative; }
.ped-mapa svg { width: 100%; height: auto; display: block; }

.ped-diec {
  fill: var(--ped-ziemia);
  stroke: var(--ped-granica);
  stroke-width: 30;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .25s ease;
}
.ped-diec:hover { fill: var(--ped-najazd); }

/* Blask rośnie z liczbą świec — `--blask` liczy skrypt WZGLĘDEM najjaśniejszej
   diecezji. Gdyby liczyć bezwzględnie, przy pięciu świecach w całym kraju mapa
   byłaby jednolicie ciemna i nie mówiłaby nic.

   Mieszamy złoto z PRZYGASŁYM ŻAREM, a nie z granatem tła. Złoto i granat są
   barwami dopełniającymi — ich mieszanka daje brudną oliwkę i diecezja
   z jedną świecą wyglądałaby na zabłoconą zamiast na ledwo tlącą się. */
.ped-diec.pali {
  fill: color-mix(in srgb, var(--ped-plomien) calc(14% + var(--blask) * 86%), var(--ped-zar));
  filter: drop-shadow(0 0 calc(6px + 22px * var(--blask)) var(--ped-blask));
  animation: ped-drga 3.8s ease-in-out infinite;
}
@keyframes ped-drga { 0%, 100% { opacity: .88; } 45% { opacity: 1; } }

/* Znaczniki szkół — celowo inne w formie, nie tylko w kolorze: kto nie odróżnia
   barw, ma rozróżnić kształtem.
   Obrys liczymy w pikselach ekranu, nie w jednostkach mapy — viewBox ma prawie
   37 000 jednostek szerokości, więc „stroke-width: 2” wyszłoby cieńsze niż
   jedna dwudziesta piksela i znacznik byłby niewidoczny. */
.ped-szkola-znak, .ped-szkola-punkt {
  fill: var(--ped-papier); stroke: var(--ped-tekst);
  stroke-width: 1.5px; vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.ped-szkola-znak:hover, .ped-szkola-punkt:hover { fill: var(--ped-blask); }

/* Barwy łuny płomyka — osobno dla każdej wersji strony. Stopnie gradientu
   dają się stylować jak zwykłe elementy, więc płomień zmienia kolor razem
   z resztą: złoty na granacie, czerwony na bieli. */
.ped-luna-0 { stop-color: var(--ped-blask);   stop-opacity: .95; }
.ped-luna-1 { stop-color: var(--ped-plomien); stop-opacity: .45; }
.ped-luna-2 { stop-color: var(--ped-plomien); stop-opacity: 0; }

/* Płomień świecy — to on ma być widać, nie sam odcień obszaru. */
.ped-plomyk { pointer-events: none; }
.ped-plomyk-punkt { fill: var(--ped-knot); }
.ped-plomyk-luna { animation: ped-migot 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes ped-migot {
  0%, 100% { opacity: .82; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Rozbłysk w chwili zapalenia — żeby nie przeoczyć własnego światła. */
.ped-plomyk.zaplon { animation: ped-zaplon 2.4s ease-out; transform-box: fill-box; }
@keyframes ped-zaplon {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 1; }
}
/* Rozjaśniamy, zamiast animować barwę. Kolor obszaru powstaje z mieszania
   (color-mix) i przeglądarka nie umie go płynnie przeliczyć — animacja koloru
   dawała w połowie drogi stalowy przebłysk zamiast złota. */
.ped-diec.zaplon { animation: ped-blysk 2.4s ease-out; }
@keyframes ped-blysk {
  0%   { filter: drop-shadow(0 0 34px var(--ped-blask)) brightness(2.1) saturate(.7); }
  100% { filter: drop-shadow(0 0 calc(6px + 22px * var(--blask)) var(--ped-blask)) brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ped-diec.pali { animation: none; opacity: 1; }
  .ped-diec, .ped-szkola-znak, .ped-szkola-punkt { transition: none; }
  .ped-plomyk-luna, .ped-plomyk.zaplon, .ped-diec.zaplon { animation: none; }
}

.ped-dymek {
  position: absolute; z-index: 5;
  background: var(--ped-papier); color: var(--ped-tekst);
  border: 1px solid var(--ped-brzeg);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; line-height: 1.45;
  pointer-events: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  max-width: 260px;
}
.ped-dymek b { color: var(--ped-blask); }

/* ── Panel diecezji ───────────────────────────────────────────────────────── */
.ped-szczegoly {
  position: relative;
  margin: 12px 0 0;
  background: var(--ped-papier);
  border: 1px solid var(--ped-brzeg);
  border-left: 4px solid var(--ped-plomien);
  border-radius: 0 12px 12px 0;
  padding: 16px 44px 16px 20px;
  max-height: 340px; overflow-y: auto;
}
.ped-szczegoly-zamknij {
  position: absolute; top: 8px; right: 10px;
  width: 30px; height: 30px; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--ped-glebia);
  font-size: 22px;
}
.ped-szczegoly-zamknij:hover { background: var(--ped-ziemia); color: var(--ped-tekst); }
.ped-szczegoly-tytul { margin: 0 0 4px; font-size: 1.05em; color: var(--ped-tekst); }
.ped-szczegoly-swiece { margin: 0 0 12px; font-size: .88em; color: var(--ped-zloto); font-weight: 650; }
.ped-szczegoly-ile { margin: 0 0 8px; font-size: .85em; color: var(--ped-glebia); }
.ped-szczegoly-pusto { margin: 0; font-size: .9em; color: var(--ped-glebia); }

.ped-szczegoly-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ped-szczegoly-lista li {
  padding: 9px 12px; background: var(--ped-pole);
  border: 1px solid var(--ped-brzeg); border-radius: 8px;
  font-size: .89em; line-height: 1.5;
  overflow-wrap: anywhere;
}
.ped-szczegoly-lista li.niepewna { border-left: 3px solid var(--ped-plomien); }
.ped-szcz-nazwa { display: block; font-weight: 650; }
.ped-szcz-adres { display: block; color: var(--ped-glebia); font-size: .95em; }
.ped-szcz-kontakt { display: block; margin-top: 2px; }
.ped-szcz-kontakt a { color: var(--ped-zloto); }
.ped-szcz-uwaga { display: block; margin-top: 3px; font-size: .88em; color: var(--ped-plomien); }

/* Podpowiedź nie jest pozycją legendy, tylko zdaniem do przeczytania —
   dostaje więc całą szerokość pod nią, a nie miejsce między znakami. */
.ped-podpowiedz { flex-basis: 100%; color: var(--ped-glebia); opacity: .9; }

.ped-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: .85em; color: var(--ped-glebia); padding: 10px 6px 2px;
}
.ped-kropka { width: 11px; height: 11px; display: inline-block; margin-right: 4px; }
.ped-kropka--swieca { border-radius: 50%; background: var(--ped-plomien);
                      box-shadow: 0 0 10px var(--ped-blask); }
.ped-kropka--szkola { background: var(--ped-papier); border: 2px solid var(--ped-tekst);
                      transform: rotate(45deg); }
/* Znak diecezji w legendzie: obrys taki jak na mapie, ze śladem blasku
   w środku — żeby było widać, że to samo oznaczenie mówi o dwóch rzeczach
   naraz: gdzie przebiega granica i ile świec się w niej pali. */
.ped-kropka--diecezja {
  background: color-mix(in srgb, var(--ped-zloto) 22%, transparent);
  border: 1.5px solid var(--ped-glebia);
  border-radius: 3px;
}


/* ── Modlitwa ─────────────────────────────────────────────────────────────── */
/* Tekst modlitwy dostaje szerszy oddech niż reszta strony: krótsza kolumna,
   wyższa interlinia, wyraźne przerwy między zwrotkami. Modlitwę się odmawia,
   a nie przegląda — układ ma prowadzić oko wers po wersie. */
.ped-modlitwa {
  margin-top: 26px;
  background: var(--ped-papier);
  border: 1px solid var(--ped-brzeg);
  border-top: 3px solid var(--ped-plomien);
  border-radius: 4px 4px 14px 14px;
  padding: 30px clamp(18px, 5vw, 46px) 34px;
}

.ped-modlitwa-czolo { text-align: center; margin-bottom: 26px; }
.ped-modlitwa-tytul { margin: 0 0 6px; line-height: 1.25; text-wrap: balance; color: var(--ped-tekst); }
.ped-modlitwa-podtytul {
  margin: 0 0 4px; color: var(--ped-zloto);
  font-weight: 650; font-size: .95em;
}
.ped-modlitwa-okazja {
  margin: 0; color: var(--ped-glebia);
  font-size: .84em; letter-spacing: .02em;
}

.ped-modlitwa-tresc {
  max-width: 54ch; margin: 0 auto;
  font-size: 1.02em; line-height: 1.8;
  color: var(--ped-tekst);
}
/* Wers, który nie mieści się w szerokości, dostaje wcięcie — inaczej jego
   przeniesiony ogon czyta się jak osobna linijka modlitwy i psuje rytm. */
.ped-modlitwa-tresc p {
  margin: 0 0 1.5em;
  padding-left: 1.4em; text-indent: -1.4em;
}
.ped-wezwanie {
  display: block; font-weight: 700;
  color: var(--ped-akcent-tekst); letter-spacing: -.005em;
}

.ped-wezwania-koncowe {
  margin-top: 2em !important;
  padding-top: 1.3em;
  border-top: 1px solid var(--ped-brzeg);
  font-weight: 650;
}
.ped-amen {
  margin: 0 !important; text-align: center;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .92em; color: var(--ped-zloto);
}

/* ── Formularze ───────────────────────────────────────────────────────────── */
.ped-form, .ped-zglos-form { margin-top: 22px; }
.ped-pole { margin-bottom: 16px; }
.ped-pole label, .ped-rodzaj legend {
  display: block; font-weight: 650; margin-bottom: 5px; font-size: .95em;
  color: var(--ped-tekst);
}
.ped-rzad { display: flex; gap: 8px; flex-wrap: wrap; }
.ped-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ped-siatka--trzy { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.ped select, .ped input[type="text"], .ped input[type="email"],
.ped-zglos select, .ped-zglos input, .ped-zglos textarea, .ped-wykaz input[type="search"] {
  width: 100%; padding: 11px 13px; font: inherit;
  border: 1px solid var(--ped-brzeg); border-radius: 10px;
  background: var(--ped-pole); color: var(--ped-tekst);
}
.ped ::placeholder, .ped-zglos ::placeholder, .ped-wykaz ::placeholder {
  color: var(--ped-glebia); opacity: .7;
}
.ped select:focus-visible, .ped input:focus-visible,
.ped-zglos select:focus-visible, .ped-zglos input:focus-visible,
.ped-zglos textarea:focus-visible, .ped-wykaz input:focus-visible {
  outline: 2px solid var(--ped-plomien); outline-offset: 2px; border-color: var(--ped-plomien);
}
.ped-rzad .ped-diecezja { flex: 1; min-width: 220px; width: auto; }

.ped-lok, .ped-zapal, .ped-wyslij, .ped-kopiuj, .ped-pobierz, .ped-fb {
  font: inherit; font-weight: 700; border: 0; border-radius: 10px;
  padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-block;
}
.ped-lok { background: var(--ped-ziemia); color: var(--ped-tekst); white-space: nowrap; }
.ped-lok:hover { background: var(--ped-najazd); }

/* Główny gest strony świeci tak jak świeca na mapie — złoto na granacie. */
.ped-zapal {
  display: block; width: 100%; margin-top: 8px; padding: 15px 20px; font-size: 1.05em;
  background: var(--ped-plomien); color: var(--ped-noc);
  box-shadow: 0 0 24px rgba(255, 181, 36, .28);
}
.ped-zapal:hover { background: var(--ped-blask); }

.ped-wyslij {
  display: block; width: 100%; margin-top: 8px; padding: 15px 20px; font-size: 1.05em;
  background: var(--ped-blekit); color: var(--ped-noc);
}
.ped-wyslij:hover { background: #6fb6e4; }
.ped-zapal:disabled, .ped-wyslij:disabled { opacity: .5; cursor: default; box-shadow: none; }

.ped-male { font-weight: 400; font-size: .85em; color: var(--ped-glebia); }
.ped-wym { color: var(--ped-plomien); }
.ped-stanlok, .ped-info, .ped-z-info { font-size: .9em; margin: 7px 0 0; min-height: 1.3em;
                                        color: var(--ped-glebia); }
.ped-info.blad, .ped-z-info.blad { color: var(--ped-alarm); font-weight: 600; }
.ped-info.ok,   .ped-z-info.ok   { color: var(--ped-zgoda); font-weight: 600; }

.ped-rodzaj { border: 0; padding: 0; margin: 0 0 16px; }
.ped-rodzaj label {
  display: flex; gap: 8px; align-items: baseline;
  font-weight: 400; margin-bottom: 6px; cursor: pointer;
  color: var(--ped-tekst);
}
.ped-rodzaj input { width: auto; }

/* ── Mapa i Słowo obok siebie ─────────────────────────────────────────────
   Na szerokim ekranie Słowo stoi po prawej stronie mapy — w zasięgu wzroku
   w chwili, gdy zapala się świeca. Na wąskim schodzi pod mapę, bo kolumna
   szerokości kciuka nie nadaje się do czytania Pisma. */
.ped-obok {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  align-items: start;
}
@media (max-width: 900px) {
  .ped-obok { grid-template-columns: 1fr; }
}

/* ── Słowo Boże ───────────────────────────────────────────────────────────── */
.ped-slowo {
  padding: 22px 24px 20px;
  background: var(--ped-papier);
  border: 1px solid var(--ped-brzeg); border-left: 4px solid var(--ped-zloto);
  border-radius: 0 14px 14px 0;
  position: sticky; top: 14px;
}
.ped-slowo-nadpis {
  margin: 0 0 12px; font-size: .74em; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ped-zloto);
}
.ped-slowo-zacheta { margin: 0; color: var(--ped-glebia); font-size: .95em; line-height: 1.6; }
.ped-slowo-tresc { margin: 0; padding: 0; border: 0; }
.ped-slowo-tekst {
  font-size: 1.16em; line-height: 1.7; margin: 0 0 .7em; color: var(--ped-tekst);
}
.ped-slowo-sigla {
  font-style: normal; font-weight: 700; color: var(--ped-zloto); font-size: .95em;
}

/* Świeże słowo oddycha przez kilka chwil: łuna wokół ramki i lekki przyrost
   jasności liter. Puls jest wolny i wygasa sam — migający tekst nie daje się
   czytać, a o czytanie tu chodzi. */
.ped-slowo.swieze { animation: ped-oddech 2.6s ease-in-out 3; }
@keyframes ped-oddech {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 181, 36, 0); }
  50%      { box-shadow: 0 0 26px rgba(255, 181, 36, .34); }
}
.ped-slowo.swieze .ped-slowo-tekst { animation: ped-wnikanie 1.1s ease-out; }
@keyframes ped-wnikanie {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

/* ── Zapisy pod Słowem ───────────────────────────────────────────────────── */
.ped-slowo-zapisy {
  margin-top: 16px; padding: 14px 16px; text-align: center;
  background: color-mix(in srgb, var(--ped-plomien) 14%, var(--ped-papier));
  border: 1px solid var(--ped-plomien); border-radius: 11px;
}
.ped-slowo-zapisy p { margin: 0 0 10px; font-size: .93em; color: var(--ped-tekst); }
.ped-slowo-przycisk {
  display: block; padding: 16px 20px; border-radius: 10px;
  background: var(--ped-plomien); color: var(--ped-noc);
  font-weight: 800; text-decoration: none;
  font-size: 1.14em; letter-spacing: .01em;
}
.ped-slowo-przycisk:hover { background: var(--ped-blask); }

.ped-pasek-zapisy {
  float: right; text-transform: none; letter-spacing: 0;
  font-size: 1.05em; font-weight: 650; color: var(--ped-zloto); text-decoration: none;
}
.ped-pasek-zapisy:hover { text-decoration: underline; }

/* Zaproszenie do zapisu daje o sobie znać pulsowaniem — ale POWOLI.
   Cykl trwa prawie dwie sekundy i wygasa sam po kilku powtórzeniach.
   Szybkie miganie bywa niebezpieczne dla osób z padaczką światłoczułą
   i męczy wszystkich pozostałych; wolne tętno przyciąga wzrok i nie razi. */
.ped-slowo-przycisk.migoce,
.ped-zapisy-przycisk.migoce { animation: ped-tetno 1.9s ease-in-out 5; }
@keyframes ped-tetno {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 181, 36, 0); }
  50%      { transform: scale(1.035); box-shadow: 0 0 30px 6px var(--ped-blask); }
}
@media (prefers-reduced-motion: reduce) {
  .ped-slowo-przycisk.migoce, .ped-zapisy-przycisk.migoce { animation: none; }
}

/* Późniejsze przypomnienie — jedno zdanie, bez natarczywości. */
.ped-przypomnienie {
  margin-top: 10px; padding: 10px 14px; border-radius: 9px;
  background: color-mix(in srgb, var(--ped-plomien) 16%, var(--ped-papier));
  border: 1px solid var(--ped-plomien);
  font-size: .93em; color: var(--ped-tekst);
  animation: ped-wejscie .9s ease-out;
}
@media (prefers-reduced-motion: reduce) { .ped-przypomnienie { animation: none; } }

/* ── Prośby o słowo ───────────────────────────────────────────────────────── */
.ped-prosby { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ped-brzeg); }
.ped-prosby-wstep { margin: 0 0 8px; font-size: .85em; color: var(--ped-glebia); }
.ped-prosby-rzad { display: flex; flex-wrap: wrap; gap: 7px; }
.ped-prosba {
  font: inherit; font-size: .86em; font-weight: 650; cursor: pointer;
  padding: 7px 13px; border-radius: 18px;
  border: 1px solid var(--ped-brzeg);
  background: var(--ped-pole); color: var(--ped-tekst);
}
.ped-prosba:hover { background: var(--ped-ziemia); border-color: var(--ped-zloto); }
.ped-prosba:focus-visible { outline: 2px solid var(--ped-plomien); outline-offset: 2px; }
.ped-prosba:disabled { opacity: .5; cursor: default; }
.ped-prosby-info { margin: 8px 0 0; font-size: .85em; color: var(--ped-glebia); min-height: 1.2em; }
.ped-prosby-info.blad { color: var(--ped-alarm); }

@media (prefers-reduced-motion: reduce) {
  .ped-slowo.swieze, .ped-slowo.swieze .ped-slowo-tekst { animation: none; }
}

/* ── Pieśń ────────────────────────────────────────────────────────────────── */
.ped-piesn { margin-top: 24px; }
.ped-piesn-tytul { margin: 0 0 12px; color: var(--ped-tekst); }

/* Obraz pokazujemy CAŁY. Ikony Jasnogórskiej nie przycina się do paska —
   albo widać ją w całości, albo nie ma jej wcale. Stąd `contain` i stała
   proporcja ramki zamiast wykroju na siłę. */
.ped-piesn-obrazy { margin: 0; }
.ped-obrazy {
  position: relative; aspect-ratio: 3 / 2;
  background: var(--ped-noc);
  border: 1px solid var(--ped-brzeg); border-radius: 14px;
  overflow: hidden;
}
.ped-obraz {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 2.2s ease-in-out;
}
.ped-obraz.widoczny { opacity: 1; }

.ped-powieksz {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; line-height: 1;
  font: inherit; font-size: 18px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
  background: rgba(4, 20, 42, .62); color: #fff;
}
.ped-powieksz:hover { background: rgba(4, 20, 42, .85); }
.ped-powieksz:focus-visible { outline: 2px solid var(--ped-blask); outline-offset: 2px; }

/* Pełny ekran: obraz dostaje całą przestrzeń, ramka schodzi z drogi. */
.ped-obrazy:fullscreen { aspect-ratio: auto; border: 0; border-radius: 0; }
.ped-obrazy:fullscreen .ped-obraz { object-fit: contain; }

/* Zapasowe rozsunięcie tam, gdzie pełny ekran jest niedostępny. */
.ped-piesn.ped-rozsuniete .ped-obrazy { aspect-ratio: 16 / 10; }
.ped-piesn.ped-rozsuniete {
  position: relative;
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  padding: 0 clamp(12px, 4vw, 60px);
}

.ped-piesn-pult { padding: 16px 2px 0; }

/* Nazwa pieśni stoi POD paskiem odtwarzania — pasek jest tym, po co się tu
   przychodzi, więc to on ma być pierwszy pod ręką. */
.ped-piesn-jedna + .ped-piesn-jedna { margin-top: 16px; }
.ped-piesn-nazwa {
  margin: 6px 2px 0; color: var(--ped-akcent-tekst);
  font-weight: 650; font-size: .95em; letter-spacing: .02em;
}
.ped-audio { width: 100%; display: block; }
.ped-piesn-podpis {
  margin: 8px 2px 0; text-align: right; font-style: italic;
  color: var(--ped-glebia); font-size: .85em;
}
.ped-piesn-stopka { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ped-obraz { transition: none; }
}

@media (max-width: 640px) {
  .ped-obrazy { aspect-ratio: 4 / 3; }
}

/* ── Udostępnianie ────────────────────────────────────────────────────────── */
.ped-udostepnij {
  margin-top: 18px; padding: 16px 20px; background: var(--ped-ziemia);
  border-radius: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.ped-udostepnij p { margin: 0; font-weight: 600; color: var(--ped-tekst); }
.ped-fb { background: var(--ped-blekit); color: var(--ped-noc); }
.ped-kopiuj, .ped-pobierz { background: var(--ped-pole); color: var(--ped-tekst); }
.ped-kopiuj:hover, .ped-pobierz:hover { background: var(--ped-najazd); }
.ped-udost-info { flex-basis: 100%; margin: 0; }

/* ── Intencje ─────────────────────────────────────────────────────────────── */
.ped-intencje { margin-top: 28px; }
.ped-intencje h3 { margin-bottom: 10px; color: var(--ped-tekst); }
.ped-intencje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ped-intencje li {
  background: var(--ped-papier); border: 1px solid var(--ped-brzeg);
  border-radius: 10px; padding: 12px 16px;
}
.ped-int-tresc { display: block; line-height: 1.55; }
.ped-int-kto { display: block; font-size: .82em; color: var(--ped-zloto); margin-top: 4px; }

/* ── Zachęta i wykaz szkół ────────────────────────────────────────────────── */
.ped-zacheta { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ped-brzeg); }
.ped-zacheta h3 { margin-bottom: .4em; color: var(--ped-tekst); }

.ped-zglos-tytul { margin: 22px 0 14px; color: var(--ped-tekst); }

.ped-wykaz-gora {
  display: flex; gap: 14px; justify-content: space-between;
  align-items: center; flex-wrap: wrap; margin-bottom: 20px;
}
.ped-wykaz-licznik { margin: 0; }
.ped-wykaz-licznik strong { color: var(--ped-zloto); font-size: 1.3em; }
.ped-szukaj { flex: 1; min-width: 240px; max-width: 340px; }

.ped-woj-grupa { margin-bottom: 26px; }
.ped-woj-tytul {
  margin: 0 0 10px; font-size: 1.05em; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ped-zloto);
  display: flex; align-items: baseline; gap: 10px;
}
.ped-woj-ile {
  font-size: .8em; background: var(--ped-ziemia); color: var(--ped-glebia);
  border-radius: 20px; padding: 2px 10px; letter-spacing: 0;
}
.ped-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
             grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ped-szkola {
  background: var(--ped-papier); border: 1px solid var(--ped-brzeg);
  border-radius: 10px; padding: 13px 16px;
  overflow-wrap: anywhere;
}
.ped-szkola--niepewna { border-left: 3px solid var(--ped-plomien); }
.ped-szkola-nazwa { margin: 0 0 4px; font-weight: 650; line-height: 1.4; }
.ped-szkola-adres { margin: 0 0 6px; font-size: .88em; color: var(--ped-glebia); }
.ped-szkola-diec { display: block; font-size: .92em; opacity: .85; }
.ped-szkola-kontakt { margin: 0; font-size: .84em; display: flex; gap: 10px; flex-wrap: wrap; }
.ped-szkola-kontakt a { color: var(--ped-zloto); }
.ped-brak { color: var(--ped-plomien); font-style: italic; }
.ped-uwaga { margin: 6px 0 0; font-size: .8em; color: var(--ped-plomien); }
.ped-nic { padding: 20px; text-align: center; color: var(--ped-glebia); }
.ped-wykaz-stopka { margin-top: 8px; font-size: .9em; color: var(--ped-glebia); }

.ped-stopka {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--ped-brzeg);
  font-size: .82em; color: var(--ped-glebia); text-align: center; line-height: 1.6;
}

@media (max-width: 640px) {
  .ped-siatka { grid-template-columns: 1fr; }
  .ped-zapal, .ped-wyslij { padding: 16px 20px; }
  .ped-lok { width: 100%; }
  .ped-szczegoly { padding: 16px 40px 16px 16px; }
}


/* ── oprawa strony ────────────────────────────────────────────────────────
   Ciemny granat i jedno ciepłe światło. Wokół mapy ma być cicho —
   to mapa i modlitwa są tu treścią. */
:root {
  --noc:      #04101f;
  --tlo:      #071d38;
  --papier:   #0e2c50;
  --tekst:    #e9f2fd;
  --przygaszony: #9dbcdd;
  --brzeg:    #1d4372;
  --zloto:    #fdc845;
  --plomien:  #ffb524;
  --blask:    #ffe08a;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--noc); color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7; font-size: 17px;
}
.opr { max-width: 1020px; margin: 0 auto; padding: 0 18px 80px; }

.czolo { padding: 58px 0 34px; text-align: center; }
.czolo-etykieta {
  font-size: .74em; letter-spacing: .2em; text-transform: uppercase;
  color: var(--zloto); margin: 0 0 14px; font-weight: 700;
}
.czolo h1 {
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1;
  margin: 0 auto 18px; max-width: 18ch; text-wrap: balance; letter-spacing: -.02em;
}
.czolo p { margin: 0 auto; max-width: 54ch; color: var(--przygaszony); font-size: 1.06em; }

/* Płomyk nad tytułem — ten sam gest, który potem powtarza się na mapie. */
.plomyk {
  width: 3px; height: 46px; margin: 0 auto 26px;
  background: linear-gradient(to top, transparent, var(--plomien));
  border-radius: 3px;
  box-shadow: 0 0 26px 5px rgba(255, 181, 36, .42);
}

/* ── KOLOR ODNOŚNIKÓW ─────────────────────────────────────────────────────
   Ten arkusz nigdy nie ustawiał koloru linków. Każdy odnośnik bez własnej
   klasy dostawał domyślny granat przeglądarki (#0000ee) i na ciemnym tle
   dawał kontrast 1,80:1 przy wymaganych 4,5:1 — czyli był praktycznie
   niewidoczny. Zmierzone 28.08.2026 na stronie głównej: trzy odnośniki
   w akapicie „możesz iść z nami na trzy sposoby".
   Reguła jest u korzenia, bo inaczej ta sama wada wróci przy pierwszym
   nowym akapicie z linkiem. */
.ped a, .szept a, .opr a {
  color: var(--zloto);
  text-decoration-color: rgba(253, 200, 69, .45);
  text-underline-offset: 3px;
}
.ped a:hover, .szept a:hover, .opr a:hover { color: var(--blask); }
.ped a:visited, .szept a:visited, .opr a:visited { color: var(--zloto); }
.ped a:focus-visible, .szept a:focus-visible, .opr a:focus-visible {
  outline: 2px solid var(--zloto); outline-offset: 2px; border-radius: 3px;
}
/* Odnośniki, które są przyciskami, mają własne tło i własny kolor — te
   reguły nie mogą ich przemalować.

   WYKAZ BYŁ NIEPEŁNY. Reguła złotego pisma z 28.08.2026 przemalowała także
   `.ped-slowo-przycisk` („Zapisz rodzinę") i `.ped-fb` — złote litery na
   pomarańczowym tle dają 1,14:1 przy wymaganych 4,5:1. Główny przycisk
   strony z modlitwą był przez to praktycznie niewidoczny. Zmierzone
   przeglądarką, nie odczytane z arkusza.

   Dlatego wyłączenie jest teraz oparte NA ROLI, nie na wykazie nazw:
   każdy odnośnik, który sam maluje sobie tło, sam odpowiada za swój kolor. */
.ped a.przycisk, .ped a[class*="btn"], .ped a[class*="wyj"],
.ped-nav a, .ped a.wysylam,
.ped a.ped-slowo-przycisk, .ped a.ped-zapisy-przycisk, .ped a.ped-fb,
.ped a.ped-lok, .ped a.ped-zapal, .ped a.ped-wyslij,
.ped a.ped-kopiuj, .ped a.ped-pobierz,
.ped a[class*="przycisk"], .szept a[class*="przycisk"], .opr a[class*="przycisk"] {
  color: inherit;
}

.szept {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--tlo); border: 1px solid var(--brzeg);
  border-left: 3px solid var(--plomien);
  border-radius: 0 12px 12px 0; padding: 15px 20px; margin-bottom: 30px;
  color: var(--przygaszony); font-size: .95em;
}
.szept p { margin: 0; }

.dzial { margin-top: 62px; }
.dzial h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 10px;
  text-wrap: balance; letter-spacing: -.01em;
}
.dzial > p { margin: 0 auto 24px; max-width: 58ch; color: var(--przygaszony); }
.srodek { text-align: center; }

.siatka { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.karta {
  background: var(--tlo); border: 1px solid var(--brzeg);
  border-radius: 14px; padding: 22px 24px; text-align: left;
}
.karta h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--blask); }
.karta p { margin: 0; font-size: .96em; color: var(--przygaszony); }

.stopka {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--brzeg);
  font-size: .86em; color: var(--przygaszony); text-align: center;
}


/* ── Flaga Rzeczypospolitej — tylko w wersji biało-czerwonej ────────────────
   Znak, że to pielgrzymka ogólnopolska. Rysowana dwoma pasami zamiast pliku
   graficznego: proporcja 5:8 jak w ustawie o godle, barwy te same co reszta
   wersji. Obrys jest konieczny — biały pas na białym tle zniknąłby bez niego. */
.ped-flaga { display: none; }
.ped[data-motyw="patriotyczny"] .ped-flaga,
.ped-piesn[data-motyw="patriotyczny"] .ped-flaga,
.ped-modlitwa[data-motyw="patriotyczny"] .ped-flaga {
  display: inline-flex; flex-direction: column; width: 40px; height: 25px;
  border: 1px solid rgba(0,0,0,.22); border-radius: 2px; overflow: hidden;
  vertical-align: -5px; margin-right: 10px; flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.ped-flaga i { display: block; height: 50%; }
.ped-flaga i:first-child { background: #ffffff; }
.ped-flaga i:last-child  { background: #ce1126; }

/* Podpis przy fladze — mówi wprost, co ta wersja znaczy. */
.ped-ogolnopolska { display: none; }
.ped[data-motyw="patriotyczny"] .ped-ogolnopolska {
  display: flex; align-items: center; gap: 2px; margin: 14px 0 4px;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ped-akcent-tekst);
}


/* ── Czytelność przycisków w wersji jasnej ──────────────────────────────────
   Pomiar pokazał to, czego na oko nie widać: jasny tekst (#e4ecf7) na złocie
   (#f0a30a) daje kontrast 1.77, a na błękicie (#2b84be) — 3.43. Przy progu 4.5
   znaczy to, że napis „Zapal światło" i „Zapisz rodzinę" są słabo czytelne
   właśnie tam, gdzie muszą być najczytelniejsze: na przyciskach do działania.

   Na złocie tekst musi być CIEMNY — złoto jest jasne i nie da się na nim
   położyć jasnego pisma. Błękit przyciemniamy, bo tam działa odwrotnie. */
.ped[data-motyw="jasny"] .ped-zapal,
.ped[data-motyw="jasny"] .ped-zapisy-przycisk,
.ped[data-motyw="jasny"] .ped-motyw.wybrany,
.ped-piesn[data-motyw="jasny"] .ped-motyw.wybrany,
.ped-modlitwa[data-motyw="jasny"] .ped-motyw.wybrany {
  color: #17233a;                  /* granat na złocie — kontrast 8.4 */
  font-weight: 700;
}
.ped[data-motyw="jasny"] .ped-fb,
.ped[data-motyw="jasny"] .ped-wyslij {
  background: #1c5d8c;             /* ciemniejszy błękit — kontrast 6.1 z bielą */
  color: #ffffff;
}
.ped[data-motyw="jasny"] .ped-fb:hover,
.ped[data-motyw="jasny"] .ped-wyslij:hover { background: #164a70; }

/* To samo w wersji biało-czerwonej: przyciski akcji z białym pismem na pełnej
   czerwieni — żywe i czytelne naraz. */
.ped[data-motyw="patriotyczny"] .ped-fb,
.ped[data-motyw="patriotyczny"] .ped-wyslij {
  background: #c8102e; color: #ffffff;
}
.ped[data-motyw="patriotyczny"] .ped-fb:hover,
.ped[data-motyw="patriotyczny"] .ped-wyslij:hover { background: #b30e20; }

/* Zdanie pod licznikami. Liczba bez wyjaśnienia bywa czytana jak się komu
   podoba — a tu różnica między „ludźmi" a „zapaleniami" jest istotna. */
.ped-co-liczymy {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ped-glebia);
  max-width: 62ch;
}

/* ── MODLITWA OBOK POLSKI ────────────────────────────────────────────────────
   Panel z ikoną jasnogórską i tekstem modlitwy stoi W KOLUMNIE OBOK MAPY,
   nie na niej. Mapa ma zostać widoczna: to na niej pali się światło, które
   ktoś przed chwilą zapalił, i to ona rozświetla się na Amen.

   Wcześniej panel leżał na środku Polski i zasłaniał dokładnie to, o co chodzi. */
.ped-nad-mapa {
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ped-papier) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--ped-zloto) 42%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  text-align: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-block: 0;
  border-width: 0;
  transition: max-height .7s ease, opacity .7s ease, padding .7s ease;
}
.ped-nad-mapa.widoczna {
  max-height: 80rem;
  opacity: 1;
  padding-block: 18px;
  border-width: 1px;
}
.ped-nad-ikona {
  display: block;
  width: clamp(96px, 42%, 150px);
  margin: 0 auto 12px;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
/* Okno tekstu: zaczyna się od pierwszego wersu — przygaszamy tylko dolną
   krawędź, żeby było widać, że tekst biegnie dalej. */
.ped-nad-modlitwa {
  max-height: min(34vh, 260px);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 84%, transparent);
}
.ped-nad-przewijak {
  transition: transform .2s linear;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ped-tekst);
  text-align: left;
}
.ped-nad-przewijak p { margin: 0 0 12px; }
.ped-nad-przewijak .ped-wezwanie { color: var(--ped-zloto); font-weight: 700; }
.ped-nad-przewijak .ped-modlitwa-wezwania { color: var(--ped-glebia); }
.ped-nad-przewijak .ped-amen { color: var(--ped-zloto); font-weight: 700; letter-spacing: .1em; }
.ped-nad-sigla, .ped-nad-tekst { display: none; }
.ped-nad-stopka {
  margin: 12px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ped-glebia);
}

/* Po Amen tekst zwija się do kilku wersów, a zaproszenie zostaje na wierzchu. */
.ped-nad-mapa.po-modlitwie .ped-nad-modlitwa { max-height: 5.4rem; }
.ped-nad-mapa.po-modlitwie .ped-nad-ikona { width: clamp(72px, 30%, 110px); }

/* Zamknięcie modlitwy: cała diecezja, z której szło światło, rozświetla się
   na kilka sekund. Znak, a nie miganie — stąd długie, spokojne przejście. */
.ped-diec.rozblysk { animation: pedRozblysk 6s ease-out 1; }
@keyframes pedRozblysk {
  0%   { filter: brightness(1); }
  18%  { filter: brightness(2.1) saturate(1.25); }
  100% { filter: brightness(1); }
}

/* Własny płomień rośnie na czas modlitwy — ma być widoczny z drugiego końca
   mapy, a nie ginąć wśród cudzych świateł. */
.ped-plomyk.wielki .ped-plomyk-tresc {
  transform-box: fill-box; transform-origin: center;
  animation: pedWielki .9s ease-out forwards;
}
@keyframes pedWielki { to { transform: scale(2.1); } }

.ped-nad-zapisy {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ped-zloto);
  color: #1b1408;
  font: 700 .9rem/1 system-ui, sans-serif;
  text-decoration: none;
}
.ped-nad-zapisy[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ped-nad-mapa { transition: opacity .3s ease; }
  .ped-nad-przewijak { transition: none; }
  .ped-plomyk.wielki .ped-plomyk-tresc { animation: none; transform: scale(1.8); }
  .ped-diec.rozblysk { animation: none; filter: brightness(1.6); }
}

/* Przycisk pojawia się tylko wtedy, gdy przeglądarka nie pozwoliła zagrać
   nagraniu sama. Wtedy musi dać się w niego kliknąć, choć cały panel nad mapą
   kliknięć nie przyjmuje. */
.ped-nad-graj {
  margin-top: 14px;
  padding: 10px 20px;
  border: 1px solid var(--ped-zloto);
  border-radius: 999px;
  background: transparent;
  color: var(--ped-zloto);
  font: 700 .88rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.ped-nad-graj[hidden] { display: none; }

/* Ikona nad Polską i modlitwa pod nią. Panel jest wysoki, więc tekst dostaje
   własne okno i sunie w nim w rytm nagrania — całość nie rośnie w nieskończoność. */
.ped-nad-ikona {
  display: block;
  width: clamp(84px, 16%, 132px);
  margin: 0 auto 12px;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.ped-nad-modlitwa {
  max-height: min(38vh, 300px);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.ped-nad-przewijak {
  transition: transform .2s linear;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ped-tekst);
}
.ped-nad-przewijak p { margin: 0 0 12px; }
.ped-nad-przewijak .ped-wezwanie { color: var(--ped-zloto); font-weight: 700; }
.ped-nad-przewijak .ped-modlitwa-wezwania { color: var(--ped-glebia); }
.ped-nad-przewijak .ped-amen { color: var(--ped-zloto); font-weight: 700; letter-spacing: .1em; }

/* Własny płomień rośnie na czas modlitwy — ma być widoczny z drugiego końca
   mapy, a nie ginąć wśród cudzych świateł. */
.ped-plomyk.wielki .ped-plomyk-tresc {
  transform-box: fill-box; transform-origin: center;
  animation: pedWielki .9s ease-out forwards;
}
@keyframes pedWielki { to { transform: scale(2.1); } }

.ped-nad-zapisy {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ped-zloto);
  color: #1b1408;
  font: 700 .9rem/1 system-ui, sans-serif;
  text-decoration: none;
}
.ped-nad-zapisy[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ped-plomyk.wielki .ped-plomyk-tresc { animation: none; transform: scale(1.8); }
  .ped-nad-przewijak { transition: none; }
}

/* Po Amen panel schodzi na górę i maleje — rozświetlona diecezja ma być
   widoczna, a to ona jest zakończeniem modlitwy. Zaproszenie zostaje. */
.ped-nad-mapa.po-modlitwie {
  top: 22%;
  width: min(26rem, 78%);
  padding: 14px 18px;
  transition: top .9s ease, width .9s ease, padding .9s ease;
}
.ped-nad-mapa.po-modlitwie .ped-nad-modlitwa { max-height: 5.4rem; }
.ped-nad-mapa.po-modlitwie .ped-nad-ikona { width: clamp(56px, 11%, 84px); }

/* ── MAPA CICHNIE NA CZAS MODLITWY ──────────────────────────────────────────
   Punkty szkół i cudze płomienie gasną, żeby zostało jedno światło — to
   zapalone przed chwilą. Nic nie znika z danych; to zasłona na trzy minuty. */
.ped-plansza.modli-sie .ped-szkola-znak,
.ped-plansza.modli-sie .ped-szkola-punkt {
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.ped-plansza.modli-sie .ped-plomyk:not(.wielki) {
  opacity: .12;
  transition: opacity 1.2s ease;
}
.ped-plansza .ped-szkola-znak,
.ped-plansza .ped-szkola-punkt,
.ped-plansza .ped-plomyk { transition: opacity 1.4s ease; }

/* Prostokąt zapisów rozpala się razem z diecezją — to samo zamknięcie. */
.ped-slowo-zapisy.rozpalona {
  animation: pedRozpalenie 9s ease-out 1;
  border-radius: 14px;
}
@keyframes pedRozpalenie {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ped-zloto) 70%, transparent); }
  12%  { box-shadow: 0 0 34px 6px color-mix(in srgb, var(--ped-zloto) 60%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ped-slowo-zapisy.rozpalona { animation: none;
    box-shadow: 0 0 18px 3px color-mix(in srgb, var(--ped-zloto) 45%, transparent); }
}

/* Wers, który właśnie brzmi. Reszta przygasza się, ale zostaje czytelna —
   modlitwa to całość, a nie ciąg pojedynczych zdań. */
.ped-nad-przewijak .ped-wers {
  margin: 0 0 12px;
  opacity: .45;
  transition: opacity .5s ease, color .5s ease;
}
.ped-nad-przewijak .ped-wers.teraz {
  opacity: 1;
  color: var(--ped-tekst);
}
@media (prefers-reduced-motion: reduce) {
  .ped-nad-przewijak .ped-wers { transition: none; }
}

/* Światło bez konta gaśnie po modlitwie — powoli, żeby było widać, że gaśnie,
   a nie że zniknęło przez usterkę. */
.ped-plomyk.gasnie { animation: pedGasniecie 2.6s ease-in forwards; }
@keyframes pedGasniecie {
  0%   { opacity: 1; }
  60%  { opacity: .35; }
  100% { opacity: 0; }
}
.ped-nad-drogi {
  margin: 10px 0 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ped-glebia);
}
.ped-nad-drogi a { color: var(--ped-zloto); }
.ped-nad-drogi[hidden] { display: none; }

/* ── FLAGA ZAMIAST ŚWIECY W WERSJI BIAŁO-CZERWONEJ ──────────────────────────
   W wersji patriotycznej światło modlitwy ma postać flagi wbitej w diecezję,
   z której ktoś się modli. Płomień i flaga są rysowane razem przy każdym
   świetle; tutaj rozstrzygamy, który z nich widać — dzięki temu przełączenie
   wersji działa od razu, bez przerysowywania mapy. */
/* W KAŻDEJ WERSJI STOI I ŚWIATŁO, I FLAGA. Wcześniej wersja biało-czerwona
   zamieniała jedno na drugie; teraz płomień pali się przy drzewcu, a flaga
   stoi obok niego — bo jedno mówi o modlitwie, a drugie o tym, czyja ona jest.
   Flaga jest odsunięta w bok, żeby oba znaki dały się odczytać osobno. */
.ped-flaga { display: block; transform: translateX(180px); }

.ped-flaga-maszt { fill: #6b4b2a; }
/* Płótno faluje jak na wietrze: powolne, nieduże wychylenie, bez migania.
   Ruch idzie od masztu, więc punkt obrotu stoi przy drzewcu. */
.ped-flaga-plotno {
  transform-box: fill-box;
  transform-origin: left center;
  animation: pedFalowanie 3.4s ease-in-out infinite;
}
@keyframes pedFalowanie {
  0%, 100% { transform: skewY(0deg)   scaleX(1); }
  30%      { transform: skewY(-2.4deg) scaleX(.97); }
  65%      { transform: skewY(2.1deg)  scaleX(1.02); }
}
/* Zapalona świeca powiększa się na czas modlitwy — flaga tak samo. */
.ped-plomyk.wielki .ped-flaga { filter: drop-shadow(0 0 300px rgba(220, 20, 60, .55)); }
@media (prefers-reduced-motion: reduce) {
  .ped-flaga-plotno { animation: none; }
}

/* Diecezja, z której ktoś się właśnie modli. W czasie modlitwy nie świeci —
   świeci na Amen — ale jest obrysowana, żeby było widać, gdzie stoi świeca. */
.ped-diec.moja-modlitwa {
  stroke: var(--ped-zloto);
  stroke-width: 2.5px;
  vector-effect: non-scaling-stroke;
  fill-opacity: .34;
}
.ped-nad-drogi .ped-nad-intencja { font-weight: 700; }

/* ── OPRAWA OBRAZU W PANELU MODLITWY ────────────────────────────────────────
   Przy ikonie stoją dwie flagi i świeca — w każdej wersji kolorystycznej.
   Znaki są rysowane czystym stylem (bez plików), więc nic się nie dogrywa
   i nic nie miga przy wolnym łączu. */
.ped-nad-obraz {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ped-nad-flaga {
  width: 26px; height: 34px;
  position: relative;
  flex: none;
}
/* Drzewce */
.ped-nad-flaga::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2px; height: 34px; background: #6b4b2a; border-radius: 1px;
}
/* Płótno: biel na górze, czerwień pod nią — jak na fladze. */
.ped-nad-flaga::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 22px; height: 15px;
  background: linear-gradient(to bottom, #ffffff 0 50%, #ce1126 50% 100%);
  border: 1px solid rgba(0, 0, 0, .18);
  transform-origin: left center;
  animation: pedFalaFlagi 3.4s ease-in-out infinite;
}
.ped-nad-flaga--p::after { animation-delay: -1.2s; }

@keyframes pedFalaFlagi {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  32%      { transform: skewY(-4deg) scaleX(.95); }
  68%      { transform: skewY(3.4deg) scaleX(1.03); }
}

/* Świeca przy obrazie — płomień drga jak przy prawdziwym knocie. */
.ped-nad-swieca {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 10px; height: 26px;
  background: linear-gradient(to bottom, #fdf6e3, #e8d6a8);
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 0 12px rgba(253, 200, 69, .5);
}
.ped-nad-swieca::after {
  content: ""; position: absolute; left: 50%; top: -13px;
  width: 9px; height: 14px; margin-left: -4.5px;
  background: radial-gradient(ellipse at 50% 70%, #fff3c4 0%, #fdc845 45%, rgba(253,200,69,0) 72%);
  border-radius: 50% 50% 45% 45%;
  animation: pedDrganie 2.6s ease-in-out infinite;
}
@keyframes pedDrganie {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  40%      { transform: scale(1.14) translateY(-1px); opacity: .92; }
  70%      { transform: scale(.95) translateY(1px); opacity: 1; }
}

/* W CIEMNEJ WERSJI OBRAZ ROZŚWIETLA SIĘ NA CZAS MODLITWY — tak jak ikona
   oświetlona świecami. W jasnej i biało-czerwonej wystarczy delikatna obwódka,
   bo tam poświata na białym tle wygląda jak zabrudzenie. */
.ped-nad-mapa.modli-sie .ped-nad-ikona {
  box-shadow: 0 0 34px 6px rgba(253, 200, 69, .45), 0 8px 26px rgba(0, 0, 0, .5);
  animation: pedOswietlenie 6s ease-in-out infinite;
}
@keyframes pedOswietlenie {
  0%, 100% { box-shadow: 0 0 26px 4px rgba(253, 200, 69, .34), 0 8px 26px rgba(0, 0, 0, .5); }
  50%      { box-shadow: 0 0 40px 8px rgba(253, 200, 69, .52), 0 8px 26px rgba(0, 0, 0, .5); }
}
.ped[data-motyw="jasny"] .ped-nad-mapa.modli-sie .ped-nad-ikona,
.ped[data-motyw="patriotyczny"] .ped-nad-mapa.modli-sie .ped-nad-ikona {
  animation: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ped-zloto) 45%, transparent),
              0 8px 22px rgba(0, 0, 0, .18);
}

@media (prefers-reduced-motion: reduce) {
  .ped-nad-flaga::after, .ped-nad-swieca::after,
  .ped-nad-mapa.modli-sie .ped-nad-ikona { animation: none; }
}

/* Szkoły Benedykta przy modlitwie z diecezji drohiczyńskiej i warszawsko-praskiej.
   Wypisujemy je z wykazu szkół, więc nowa placówka pojawi się tu sama. */
.ped-nad-benedykt {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ped-zloto) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ped-zloto) 38%, transparent);
  text-align: left;
  font-size: .88rem;
  line-height: 1.5;
}
.ped-nad-benedykt[hidden] { display: none; }
.ped-nad-benedykt b { display: block; margin-bottom: 6px; color: var(--ped-zloto); }
.ped-nad-benedykt ul { list-style: none; margin: 0 0 8px; padding: 0; }
.ped-nad-benedykt li {
  display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  padding: 4px 0; color: var(--ped-tekst);
  border-bottom: 1px solid color-mix(in srgb, var(--ped-zloto) 16%, transparent);
}
.ped-nad-benedykt li:last-child { border-bottom: 0; }
.ped-nad-benedykt li .miasto { color: var(--ped-tekst); font-weight: 650; }
.ped-nad-benedykt li span { color: var(--ped-glebia); font-size: .84rem; text-align: right; }
.ped-nad-benedykt a { color: var(--ped-zloto); }

/* ── WYBRANA DIECEZJA I JEJ SZKOŁY ──────────────────────────────────────────
   Kliknięcie w diecezję pokazuje ją na mapie: obrys w barwie akcentu i jej
   punkty szkół w pełnej sile. Reszta kraju przygasza się, ale zostaje
   widoczna — chodzi o policzenie tych szkół, nie o schowanie reszty. */
.ped-plansza.wyrozniona .ped-diec { opacity: .38; transition: opacity .45s ease; }
.ped-plansza.wyrozniona .ped-szkola-punkt,
.ped-plansza.wyrozniona .ped-szkola-znak { opacity: .18; transition: opacity .45s ease; }

.ped-plansza.wyrozniona .ped-diec.wybrana {
  opacity: 1;
  stroke: var(--ped-zloto);
  stroke-width: 2.5px;
  vector-effect: non-scaling-stroke;
}
.ped-plansza.wyrozniona .ped-szkola-punkt.wybrana,
.ped-plansza.wyrozniona .ped-szkola-znak.wybrana {
  opacity: 1;
  fill: var(--ped-zloto);
  stroke: var(--ped-tlo);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
  .ped-plansza.wyrozniona .ped-diec,
  .ped-plansza.wyrozniona .ped-szkola-punkt,
  .ped-plansza.wyrozniona .ped-szkola-znak { transition: none; }
}


/* ── WEJŚCIE DLA PROWADZĄCYCH ─────────────────────────────────────────────
   Nawigacja dzieła prowadzi pielgrzyma. Ten jeden odnośnik prowadzi kogoś
   innego — Joannę Biegańską do kokpitu, Marię Kobylińską do biura. Stoi
   dlatego po prawej, odsunięty, obrysowany: widać go, gdy się go szuka,
   i nie zabiera uwagi, gdy się go nie szuka. */
.ped-nav .ped-nav-wejdz {
  margin-left: auto;
  border: 1px solid var(--brzeg, #1d4372);
  border-radius: 999px;
  padding: 6px 15px;
  color: var(--zloto, #fdc845);
}
.ped-nav .ped-nav-wejdz:hover {
  border-color: var(--zloto, #fdc845);
  color: var(--blask, #ffe08a);
}


/* ── PRZYCISKI ODZYSKUJĄ SWÓJ KOLOR ───────────────────────────────────────
   `color: inherit` przy wyłączeniu reguły odnośników było poprawką w połowie:
   przycisk brał kolor RODZICA, czyli jasne pismo, i lądował jasnym napisem
   na jasnym pomarańczu — 1,56:1 przy wymaganych 4,5:1.

   Przycisk z własnym tłem musi mieć własny, wprost zapisany kolor pisma.
   Reguły stoją na końcu arkusza, żeby nie dało się ich przypadkiem
   wyprzedzić inną regułą o tej samej sile. Zmierzone przeglądarką. */
.ped a.ped-slowo-przycisk,
.ped a.ped-slowo-przycisk:visited,
.ped a.ped-zapisy-przycisk,
.ped a.ped-zapisy-przycisk:visited { color: var(--ped-noc); }

.ped a.ped-fb, .ped a.ped-fb:visited { color: var(--ped-noc); }

.ped a.ped-lok, .ped a.ped-lok:visited,
.ped a.ped-kopiuj, .ped a.ped-kopiuj:visited,
.ped a.ped-pobierz, .ped a.ped-pobierz:visited { color: var(--ped-tekst); }