/* ═══ JĘZYK GRAFICZNY BIBLIOTEKI MATERIAŁÓW FORMACYJNYCH ════════════════════
   Jeden arkusz dla wszystkich ekranów, na których pokazywane są kursy,
   działy i konspekty — w panelu Stowarzyszenia i na stronie dzieła.

   ── PO CO POWSTAŁ ────────────────────────────────────────────────────────
   Ks. dr Andrzej Lubowicki, Asystent Generalny, 2.09.2026:
   „styl formacji w rodzinach i ten w moim panelu ma być taki sam".

   Zmierzone tego dnia narzędziem `porownaj-styl-formacji.js` (porównanie
   WYLICZONYCH stylów w przeglądarce, nie deklaracji w plikach): 210 różnic
   na 30 porównywanych częściach. Powód nie był drobiazgiem: te same reguły
   stały w DWÓCH miejscach — w `web/panel/kurs.html` i w
   `web/panel/formacja.html` — a strona dzieła miała trzecie, własne.
   Trzy kopie tego samego języka rozjeżdżają się przy pierwszej poprawce.

   Teraz jest jeden plik i wszyscy biorą z niego. Poprawka w promieniu
   zaokrąglenia albo w barwie działu dochodzi wszędzie naraz albo nigdzie.

   ── JEDYNE ODSTĘPSTWO WZGLĘDEM POPRZEDNIEGO STANU: PRÓG 13 px ────────────
   Biblioteka schodziła z pismem do 10,56 px (etykiety metryczki), 11,2 px
   (nadtytuł) i 12 px (znaczniki). Na ekranie osoby funkcyjnej, która ogląda
   go codziennie, to przechodzi; na stronie czytanej przez rodziców — nie.
   Wszystkie takie miejsca mają tu 13 px i są oznaczone komentarzem
   „próg 13 px". Reszta wartości jest przeniesiona co do piksela.

   ── CZEGO TU NIE MA ──────────────────────────────────────────────────────
   Rzeczy, które należą do jednego ekranu, a nie do języka: sklep i ceny,
   pasek podglądu, okno z konspektem, kafle zasobów modlitewnych, pasek
   stanu prac. Zostają w swoich plikach.

   wersja:       1.0.0
   utworzony:    2026-09-02
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PALETA ─────────────────────────────────────────────────────────────────
   Wartości przeniesione z `web/panel/kurs.html`. Strony, które mają własny
   odcień barwy wiodącej (`--granat`), nadpisują go po wczytaniu tego pliku. */
:root{
  --tlo:#f7f4ee; --plansza:#fff; --plansza2:#f1ede3; --tekst:#16223a;
  --tekst2:#5c6a7e; --linia:#ded7c7; --granat:#24487f; --zloto:#8a6410;
  /* BARWY DZIAŁÓW — ODCIENIE POPRAWIONE POMIAREM, NIE PRZEPISANE.
     Zmierzone w bibliotece przed zmianą: barwa działu jest tam pismem
     (etykiety metryczki, znaczniki wyróżnione, przycisk „Co jest w środku"),
     a #1f8a4c dawało 4,38 : 1 na planszy i 3,57 : 1 na własnej pastylce 16% —
     poniżej progu 4,5 : 1. #a35a1e na pastylce dawało 4,19 : 1.
     Te same barwy w odcieniu, który przechodzi: najgorszy przypadek w całej
     palecie to 5,35 : 1 na pastylce i 6,82 : 1 na planszy.
     Trzy dalsze barwy (d3–d5) są dołożone, bo „5 Filarów" ma pięć działów
     plus wstęp, a biblioteka miała nazwane tylko trzy. */
  --tozsam:#8a4a10; --formac:#17683a; --wstep:#4a5a72;
  --dz3:#1d5085; --dz4:#8a2f6b; --dz5:#5a3a7a;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tlo:#0d1521; --plansza:#151f2d; --plansza2:#1c2735; --tekst:#e8eef6;
  --tekst2:#93a2b5; --linia:#2a3748; --granat:#9dbbe8; --zloto:#e8c26e;
  --tozsam:#e8a86a; --formac:#6ed69a; --wstep:#a8b6cc;
  --dz3:#8fc0f0; --dz4:#f09ad6; --dz5:#c3a4e8;
}}
:root[data-theme="dark"]{
  --tlo:#0d1521; --plansza:#151f2d; --plansza2:#1c2735; --tekst:#e8eef6;
  --tekst2:#93a2b5; --linia:#2a3748; --granat:#9dbbe8; --zloto:#e8c26e;
  --tozsam:#e8a86a; --formac:#6ed69a; --wstep:#a8b6cc;
  --dz3:#8fc0f0; --dz4:#f09ad6; --dz5:#c3a4e8;
}

/* ── PODSTAWA ────────────────────────────────────────────────────────────── */
body{margin:0;padding:22px clamp(12px,3vw,30px) 90px;background:var(--tlo);
  color:var(--tekst);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;font-size:15.5px}
.sr{max-width:1140px;margin:0 auto}
a{color:var(--zloto)}
/* Nadtytuł. Biblioteka ma tu .7rem (11,2 px) — próg 13 px. */
.eyebrow{margin:0 0 6px;font-size:13px;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase;color:var(--zloto)}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;margin:0 0 6px;
  font-size:clamp(1.8rem,4.4vw,2.5rem);line-height:1.1}
.lid{margin:0 0 20px;max-width:64ch;color:var(--tekst2)}

/* ── PASTYLKI Z LICZBAMI ─────────────────────────────────────────────────── */
.licz{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.licz span{font-size:13.28px;padding:5px 13px;border-radius:999px;
  border:1px solid var(--linia);background:var(--plansza);
  font-variant-numeric:tabular-nums}
.licz b{color:var(--granat)}

/* ── ŚCIEŻKA (grupa kursów) ─────────────────────────────────────────────── */
.sciezka{margin:0 0 30px}
.sciezka-nag{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.sciezka-nag h2{font-family:Georgia,serif;font-weight:400;font-size:1.4rem;margin:0}
.sciezka-nag .dla{font-size:13.28px;color:var(--tekst2)}
.sciezka-linia{height:2px;background:linear-gradient(to right,var(--ac),transparent);
  margin:0 0 15px}

/* ── KAFEL KURSU ────────────────────────────────────────────────────────── */
.kursy{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.kurs{background:var(--plansza);border:1px solid var(--linia);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s}
.kurs:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(11,34,66,.18)}
.kurs .obraz{aspect-ratio:3/2;background:var(--plansza2);position:relative;overflow:hidden}
.kurs .obraz img{width:100%;height:100%;object-fit:cover;display:block}
/* Pastylka rytmu. Biblioteka ma .7rem — próg 13 px. */
.kurs .rytm{position:absolute;left:11px;bottom:11px;font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.94);
  color:#16223a;padding:4px 11px;border-radius:999px}
.kurs .srodek{padding:14px 17px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.kurs h3{margin:0;font-family:Georgia,serif;font-weight:400;font-size:1.18rem;
  line-height:1.2}
.kurs .opis{font-size:13.92px;color:var(--tekst2);margin:0}
.kurs .stopka{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
/* Znacznik. Biblioteka ma .75rem (12 px) — próg 13 px. */
.zn{font-size:13px;padding:3px 9px;border-radius:7px;background:var(--plansza2);
  color:var(--tekst2);font-variant-numeric:tabular-nums}
.zn.akc{background:color-mix(in srgb, var(--ac) 16%, transparent);color:var(--ac);
  font-weight:700}
/* BARWA KURSU JEST POWIERZCHNIĄ, NIE PISMEM — i to nie jest drobiazg.
   `gotow_kurs.barwa` bywa dowolnym odcieniem wpisanym do bazy; zmierzone
   2.09.2026: #C8962C („Wzrastaj") jako pismo na własnej pastylce daje
   2,32 : 1, #a35a1e — 4,19 : 1 na jasnym i 2,79 : 1 na ciemnym gruncie.
   Barwa kursu zostaje więc paskiem i linią (tam próg nie obowiązuje),
   a wyróżniony znacznik na kaflu kursu bierze pismo z `--granat`, które
   jest zmierzone: 9,10 : 1 na planszy jasnej, 8,46 : 1 na ciemnej. */
.kurs .zn.akc{background:color-mix(in srgb, var(--granat) 14%, transparent);
  color:var(--granat)}
.kurs.zasob{border-left:5px solid var(--ac)}
.kurs.pusty{opacity:.62}
.kurs.pusty:hover{transform:none;box-shadow:none}
.kurs .brak{font-size:13px;color:var(--tekst2);font-style:italic}

/* ── DZIAŁ ──────────────────────────────────────────────────────────────── */
.dzial{margin:0 0 26px}
.dzial-nag{display:flex;align-items:baseline;gap:11px;margin:0 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--ac)}
.dzial-nag h2{font-family:Georgia,serif;font-weight:400;font-size:1.35rem;margin:0}
.dzial-nag .ile{font-size:13px;color:var(--tekst2);margin-left:auto;
  font-variant-numeric:tabular-nums}
.d0{--ac:var(--wstep)} .d1{--ac:var(--tozsam)} .d2{--ac:var(--formac)}
.d3{--ac:var(--dz3)} .d4{--ac:var(--dz4)} .d5{--ac:var(--dz5)}

/* ── KAFEL TEMATU ───────────────────────────────────────────────────────── */
.tematy{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.temat{background:var(--plansza);border:1px solid var(--linia);
  border-left:4px solid var(--ac);border-radius:13px;padding:13px 15px;
  display:flex;flex-direction:column;gap:7px}
/* Etykieta miesiąca. Biblioteka ma .7rem — próg 13 px. */
.temat .mies{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--ac)}
.temat h3{margin:0;font-size:1rem;font-weight:650;line-height:1.3}
.temat .stopka-t{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px}
.zajawka{margin:0;font-size:14.08px;line-height:1.5;color:var(--tekst2)}

/* Kafel ze znakiem tematu — rysunek na całą szerokość, treść z marginesem. */
.temat.z-grafika{padding:0;overflow:hidden}
/* Wcięcie treści w kaflu ze znakiem. `.wiecej` i `.znaczniki` DOŁOŻONE:
   w bibliotece wykaz nie obejmował przycisku „Co jest w środku", więc
   dotykał on krawędzi kafla. Poprawka należy się obu stronom, więc stoi
   tutaj, a nie po jednej z nich. */
.temat.z-grafika .mies,.temat.z-grafika h3,.temat.z-grafika .stopka-t,
.temat.z-grafika .zajawka,.temat.z-grafika .szczegoly,
.temat.z-grafika .wiecej,.temat.z-grafika .znaczniki,
.temat.z-grafika .tresc{margin-left:15px;margin-right:15px}
.temat.z-grafika .stopka-t{margin-bottom:13px}
.grafika{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  line-height:0;overflow:hidden;min-height:0;border-radius:0}
.grafika img{width:100%;height:auto;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.temat.z-grafika:hover .grafika img{transform:scale(1.035)}
.grafika:focus-visible{outline:2px solid var(--zloto);outline-offset:-3px}

/* ── PRZYCISKI I PASTYLKI PLIKÓW ────────────────────────────────────────── */
/* POLE DOTYKOWE 44 px. Biblioteka dawała przyciskom 6 px zapasu w pionie,
   czyli około 33 px wysokości — poniżej progu dla palca. `min-height` jest
   dołożony tutaj, a nie po jednej stronie, bo należy się obu: na telefonie
   ksiądz trafia w te przyciski tak samo jak rodzic. Wygląd się nie zmienia,
   rośnie tylko pole trafienia. */
button,.plik{font:inherit;font-size:13.28px;padding:6px 12px;border-radius:9px;
  min-height:44px;border:1px solid var(--linia);background:var(--plansza2);
  color:var(--tekst);cursor:pointer;text-decoration:none;display:inline-flex;
  align-items:center;gap:6px}
button:hover,.plik:hover{border-color:var(--ac)}
button:focus-visible,.plik:focus-visible{outline:2px solid var(--zloto);outline-offset:2px}
.plik{color:var(--granat);font-weight:650}
.plik.prez{color:var(--tozsam)}
.plik.otworz{background:var(--plansza2);color:var(--tekst);font-weight:650}
.plik.otworz:hover{border-color:var(--ac);color:var(--ac)}
.plik .waga{color:var(--tekst2);font-weight:400;font-size:13px}
.bez-plikow{font-size:13px;color:var(--tekst2);font-style:italic}

/* ── ROZWIJANIE TEMATU ──────────────────────────────────────────────────────
   Ks. Andrzej, 29.08.2026: „zrób tak, żeby się wszystko rozwijało
   i podświetlało". Kafel pokazuje tytuł i zdanie; po rozwinięciu — metryczkę. */
.wiecej{background:none;border:0;padding:0;min-height:44px;font:inherit;
  font-size:13.28px;color:var(--ac);font-weight:700;cursor:pointer;
  display:inline-flex;gap:5px;align-items:center;align-self:flex-start}
.wiecej:hover{text-decoration:underline}
.wiecej .strzalka{transition:transform .2s}
.temat.otwarty .wiecej .strzalka,
.wiecej[aria-expanded="true"] .strzalka{transform:rotate(180deg)}
.temat.otwarty{box-shadow:0 0 0 2px var(--ac), 0 12px 30px rgba(11,34,66,.14)}
.szczegoly{margin-top:2px;padding-top:11px;border-top:1px dashed var(--linia)}
.szczegoly dl{display:grid;grid-template-columns:auto 1fr;gap:5px 11px;
  font-size:13.6px;margin:0 0 10px}
/* Etykieta metryczki. Biblioteka ma .66rem (10,56 px) — próg 13 px. */
.szczegoly dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--ac);padding-top:3px}
.szczegoly dd{margin:0;color:var(--tekst2)}
.szczegoly .lista{margin:0 0 10px;padding-left:18px;font-size:13.6px;
  color:var(--tekst2)}
.szczegoly .lista li{margin-bottom:3px}
/* Nagłówek listy. Biblioteka ma .66rem — próg 13 px. */
.szczegoly .nag{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--tekst2);margin:0 0 4px}

.pusto{color:var(--tekst2);padding:20px 0}

/* Ruch ustępuje, gdy człowiek o to prosi. */
@media (prefers-reduced-motion:reduce){
  .wiecej .strzalka{transition:none}
  .grafika img{transition:none}
  .temat.z-grafika:hover .grafika img{transform:none}
  .kurs{transition:none}
  .kurs:hover{transform:none}
}