/* =====================================================================
   ZASIEW — arkusz stylów
   ---------------------------------------------------------------------
   Paleta i typografia wg sekcji 11 briefu.
   Kontrasty sprawdzone pod WCAG 2.1 AA:
     atrament na papierze     16,4:1
     atrament na słońcu        7,4:1
     atrament na liściu        4,9:1
     papier na zieleni         4,8:1
     biel na zieleni           5,1:1  (stopka)
     zieleń ciemna na papierze 6,1:1
   Zasada z briefu: NIGDY biały tekst na żółtym ani na liściu.
   ===================================================================== */

:root {
  /* paleta podstawowa */
  /* Akcent: liściasta zieleń. Zastąpiła żółć marki (#F4C430) — serwis ma
     zostać przy jednej rodzinie barw. Jest na tyle jasna, że atrament
     na jej tle daje 5,5:1, więc nadaje się na tło etykiet i plakietek. */
  --akcent:       #7CB342;
  --akcent-jasny: #DDEBD2;
  --lisc:         #7CB342;
  --zielen:       #2E7D4E;
  --atrament:     #173D28;
  --papier:       #FBF8EE;

  /* odcienie pochodne */
  --zielen-ciemna:  #256B41;
  --zielen-glebia:  #1C5233;
  --papier-cien:    #F6F1E4;
  --papier-mocny:   #EFE8D6;
  --obrys:          #E2DAC4;
  --obrys-mocny:    #CFC3A4;
  --atrament-slaby: #4A6B58;

  /* Akcenty ilustracji — świadomie zgaszone. Interfejs ma być cichy,
     kolor niesie ilustracja i pinezki na mapie, nie tła sekcji. */
  --szalwia:        #B7C7AD;
  --szalwia-jasna:  #D6DFD0;
  --piasek:         #EFE7D2;

  /* stany */
  --blad:        #A62B1F;
  --blad-tlo:    #FBEAE7;
  --sukces:      #1F6B45;
  --sukces-tlo:  #E6F2EA;
  --uwaga-tlo:   #EDF4E4;

  /* typografia */
  --font-naglowki: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-tekst:    'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* wymiary */
  --obszar-max:  1240px;
  --obszar-waski: 760px;
  --promien:      14px;
  --promien-maly: 9px;
  --cien:         0 2px 4px rgba(23, 61, 40, .07), 0 8px 24px rgba(23, 61, 40, .07);
  --cien-mocny:   0 6px 14px rgba(23, 61, 40, .13), 0 22px 48px rgba(23, 61, 40, .13);
  --naglowek-h:   4.75rem;
}

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

/* Atrybut `hidden` musi wygrywać z regułami układu (np. `.pole { display: block }`).
   Bez tego pole e-mail przy zgodzie na kontakt pokazywałoby się od razu, mimo że
   ma być odsłaniane dopiero po jej zaznaczeniu. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--atrament);
  background: var(--papier);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

body.bez-przewijania { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-naglowki);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--atrament);
  letter-spacing: -.005em;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.2rem; }

p, ul, ol, dl, figure, table { margin: 0 0 1rem; }

a {
  color: var(--zielen-ciemna);
  text-decoration-thickness: .09em;
  text-underline-offset: .17em;
}
a:hover { color: var(--atrament); }

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--papier-mocny);
  padding: .1em .35em;
  border-radius: 5px;
}

hr { border: 0; border-top: 2px dotted var(--obrys); margin: 2rem 0; }

/* ---------------------------------------------------------------------
   Widoczny fokus (WCAG 2.4.7) — nigdy nie usuwamy obrysu bez zamiennika
--------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--atrament);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Na ciemnej zieleni (stopka, przycisk główny) obrys fokusa musi być jasny.
   Jasny akcent na zieleni #2E7D4E daje 4,4:1 — powyżej progu 3:1 z WCAG 1.4.11.
   Sam akcent byłby na to za ciemny. */
.stopka :focus-visible,
.przycisk--glowny:focus-visible {
  outline-color: var(--akcent-jasny);
}

/* ---------------------------------------------------------------------
   Narzędzia
--------------------------------------------------------------------- */
.obszar {
  width: 100%;
  max-width: var(--obszar-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, .4rem + 2.4vw, 2.5rem);
}
.obszar--waski { max-width: var(--obszar-waski); }

.tylko-dla-czytnika {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wiodacy { font-size: 1.15rem; line-height: 1.6; color: var(--atrament); }
.drobne  { font-size: .9rem; color: var(--atrament-slaby); }
.wymagane { color: var(--blad); font-weight: 700; }

.pomin-do-tresci {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--atrament);
  color: var(--papier);
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--promien-maly) var(--promien-maly);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.pomin-do-tresci:focus { top: 0; color: var(--papier); }

.widok { flex: 1 0 auto; }
.widok:focus { outline: none; }

/* ---------------------------------------------------------------------
   Przyciski
--------------------------------------------------------------------- */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  font-family: var(--font-naglowki);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: .7em 1.35em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  min-height: 44px;              /* wygodny cel dotykowy */
}
.przycisk:active { transform: translateY(1px); }
.przycisk[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.przycisk--glowny {
  background: var(--zielen);
  color: var(--papier);
  border-color: var(--zielen);
}
.przycisk--glowny:hover { background: var(--zielen-glebia); border-color: var(--zielen-glebia); color: var(--papier); }

.przycisk--obrys {
  background: transparent;
  color: var(--zielen-ciemna);
  border-color: var(--zielen-ciemna);
}
.przycisk--obrys:hover { background: var(--zielen-ciemna); color: var(--papier); }

.przycisk--pusty {
  background: transparent;
  color: var(--zielen-ciemna);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.przycisk--pusty:hover { background: var(--papier-mocny); color: var(--atrament); }

.przycisk--niebezpieczny {
  background: transparent;
  color: var(--blad);
  border-color: var(--blad);
}
.przycisk--niebezpieczny:hover { background: var(--blad); color: #fff; }

.przycisk--maly { font-size: .9rem; padding: .45em .95em; min-height: 38px; }
.przycisk--duzy { font-size: 1.1rem; padding: .85em 1.7em; }

.link-jak-przycisk {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--zielen-ciemna);
  text-decoration: underline; cursor: pointer;
}

/* ---------------------------------------------------------------------
   Pasek trybu demonstracyjnego
--------------------------------------------------------------------- */
.pasek-demo {
  background: var(--papier-cien);
  color: var(--atrament-slaby);
  border-bottom: 1px solid var(--obrys);
  box-shadow: inset 3px 0 0 var(--akcent);
  font-size: .82rem;
}
.pasek-demo__wnetrze { padding-block: .5rem; }
.pasek-demo strong { color: var(--atrament); }
.pasek-demo code { background: var(--papier-mocny); font-size: .95em; }

/* ---------------------------------------------------------------------
   Nagłówek i menu
--------------------------------------------------------------------- */
/* Nagłówek zlewa się z treścią — zamiast twardej kreski ma tylko delikatny
   cień pojawiający się dopiero po przewinięciu.
   ---------------------------------------------------------------------
   ŻADNEGO `backdrop-filter` ani `transform` na tym elemencie: obie te
   własności tworzą blok zawierający dla potomków `position: fixed`,
   a wysuwany panel menu jest właśnie takim potomkiem — przyklejałby się
   wtedy do nagłówka zamiast wypełniać okno. */
.naglowek {
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 900;
  transition: box-shadow .25s ease;
}
.naglowek--przewiniety {
  box-shadow: 0 1px 0 rgba(23, 61, 40, .07), 0 6px 20px rgba(23, 61, 40, .05);
}
.naglowek__wnetrze {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--naglowek-h);
  flex-wrap: wrap;
}

.marka {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--atrament);
  margin-right: auto;
}
.marka__tekst { display: flex; flex-direction: column; line-height: 1.15; }
.marka__nazwa {
  font-family: var(--font-naglowki);
  font-size: 1.6rem;
  letter-spacing: .06em;
  font-weight: 700;
}
.marka__podtytul { font-size: .8rem; color: var(--atrament-slaby); }

.menu { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* Znaki instytucji prowadzącej stoją po prawej, na końcu paska menu.
   Są w oryginalnych barwach — nagłówek jest jasny, więc nie trzeba kontry. */
.logotypy--naglowek {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 0 .6rem;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--obrys);
  padding-left: 1.4rem;
}
.logotypy--naglowek .logotypy__obraz { filter: none; }
.logotypy--naglowek a { display: flex; }
.menu__lista {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: .25rem;
  flex-wrap: wrap;
}
.menu__link {
  display: block;
  padding: .5rem .7rem;
  border-radius: var(--promien-maly);
  text-decoration: none;
  color: var(--atrament);
  font-weight: 600;
  font-size: .95rem;
}
.menu__link:hover { background: var(--papier-cien); color: var(--atrament); }
.menu__link--aktywny { color: var(--zielen-ciemna); background: transparent; font-weight: 700; }

.menu__konto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.menu__uzytkownik {
  font-size: .82rem;
  color: var(--atrament-slaby);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etykietka {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1em .5em;
  border-radius: 999px;
  background: var(--papier-mocny);
  color: var(--atrament);
}
.etykietka--admin { background: var(--akcent); }

/* Przycisk menu jest neutralny — atrament na papierze, bez zieleni.
   Trzy kreski zamieniają się w krzyżyk po otwarciu. */
.menu-przelacznik {
  display: none;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 0;
  padding: .5rem .2rem;
  font: inherit;
  font-family: var(--font-naglowki);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  color: var(--atrament);
  z-index: 1002;
}
.menu-przelacznik__ikona {
  display: grid;
  gap: 5px;
  width: 22px;
}
.menu-przelacznik__ikona span {
  display: block; width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.menu-przelacznik--otwarty .menu-przelacznik__ikona span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-przelacznik--otwarty .menu-przelacznik__ikona span:nth-child(2) { opacity: 0; }
.menu-przelacznik--otwarty .menu-przelacznik__ikona span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu__zaslona {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(23, 61, 40, .35);
  backdrop-filter: blur(2px);
}
body.menu-otwarte { overflow: hidden; }

/* ---------------------------------------------------------------------
   Sekcje ogólne
--------------------------------------------------------------------- */
.sekcja { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.sekcja--cicha { background: var(--papier-cien); }
.sekcja:focus { outline: none; }

.sekcja__tytul {
  margin-bottom: 1.2rem;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
}
.sekcja__wstep { max-width: 60ch; font-size: 1.1rem; }
.sekcja__stopka { margin-top: 2.5rem; }

/* =====================================================================
   SLIDER — strona główna jako pięć slajdów przesuwanych w poziomie
   ---------------------------------------------------------------------
   Za wszystkimi slajdami stoi JEDEN ciągły pejzaż. Zmiana slajdu przesuwa
   jego warstwy w poziomie z różną prędkością (im bliżej widza, tym szybciej),
   więc przejście czyta się jak wędrówka wzdłuż krajobrazu, a nie jak
   przeskok między ekranami.
   ===================================================================== */
/* Slider jest o 2,5 rem niższy niż ekran, żeby na dole wystawał pasek zieleni
   ze stopki. Bez tego pełnoekranowy slajd nie daje żadnego znaku, że strona
   ma ciąg dalszy, i stopka bywa nieodnaleziona. */
.slajder {
  /* Miejsce zarezerwowane na kropki slajdów i pauzę — dużo mniej niż zajmował
     pasek z podpisami, bo kropki są ledwie widoczne. */
  --wys-sterowania: 2.4rem;
  --odstep-slajdu: clamp(2rem, 5vh, 4rem);   /* oddech nad i pod treścią */
  position: relative;
  height: min(calc(100svh - var(--naglowek-h) - 2.5rem), 900px);
  overflow: hidden;
  background: var(--papier);
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
body.ma-pasek-demo .slajder {
  height: min(calc(100svh - var(--naglowek-h) - 3.4rem - 2.5rem), 900px);
}

.slajder__pejzaz { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.scena__warstwa {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 124%;
  min-width: 1180px;
  /* Bez tego globalna reguła `img { max-width: 100% }` przycięłaby warstwę
     do szerokości okna i przy krawędzi pojawiłby się pionowy szew. */
  max-width: none;
  height: auto;
  /* Przesunięcie od myszy siedzi w marginesie, przesunięcie slajdu
     w `translate` — dzięki temu nie kasują się nawzajem. */
  margin-left: calc(-62% + var(--przesuniecie-myszy, 0px) * (var(--glebia) * 0.5));
  translate: var(--przesuniecie-slajdu, 0px) 0;
  transition: translate .8s cubic-bezier(.55, .06, .2, 1);
  will-change: translate;
}
.scena__warstwa--niebo { width: 134%; margin-left: -67%; }

/* Pejzaż z JEDNEGO pliku. Warstwy w wersji wielowarstwowej są przezroczystymi
   plastrami przyklejonymi do dolnej krawędzi — pojedyncza ilustracja jest za to
   zamkniętym kadrem o własnych proporcjach, więc trzeba ją kadrować jak zdjęcie
   w tle. Bez tego przy szerokości 124% okna górna połowa (niebo) wyjeżdża
   ponad ekran i zostają same pasy trawy. */
.slajder__pejzaz--plaski .scena__warstwa {
  width: calc(100% + 440px);
  min-width: 0;
  height: 100%;
  margin-left: calc(-50% - 220px);
  object-fit: cover;
  object-position: center bottom;
}

/* Zasłona pod treścią. Na dalszych slajdach gęstnieje, bo tam jest więcej
   tekstu — krajobraz cofa się w tło, zamiast z nim konkurować. */
.slajder__mgla {
  position: absolute;
  inset: 0;
  transition: opacity .8s ease, background .8s ease;
  background: linear-gradient(97deg,
    rgba(251, 248, 238, .96) 0%,
    rgba(251, 248, 238, .90) 30%,
    rgba(251, 248, 238, .52) 52%,
    rgba(251, 248, 238, .14) 68%,
    rgba(251, 248, 238, 0)   82%);
}


.slajder__tor {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  transition: transform .8s cubic-bezier(.55, .06, .2, 1);
  will-change: transform;
}

.slajd {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  /* UWAGA: żadnego `overscroll-behavior: contain`. Slajd wypełnia cały ekran,
     więc gdyby zatrzymywał przewijanie u siebie, kółko myszy nigdy nie
     dociągnęłoby strony do stopki. Domyślne łańcuchowanie przewijania jest
     tu jedyną drogą w dół. */
  overflow-x: hidden;
  overflow-y: auto;
  padding-block: var(--odstep-slajdu) calc(var(--odstep-slajdu) + var(--wys-sterowania));
}
.slajd__tresc { width: 100%; padding-block: 1rem; }

/* Slajdy 2–4 mają ten sam układ co pierwszy: treść po lewej, jedna duża
   postać wektorowa po prawej. Postać jest wyłącznie ozdobna (aria-hidden),
   więc na wąskim ekranie znika bez straty informacji.
   ---------------------------------------------------------------------
   Te trzy slajdy mają być identyczne wymiarowo: ta sama siatka, ta sama
   szerokość kolumny tekstu, ta sama wysokość bloku treści i przycisk
   zawsze na tej samej wysokości. Dlatego kolumna tekstu jest kolumną
   flex o stałej minimalnej wysokości, a akcje dosuwa do dołu `margin-top: auto`. */
.slajd__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  /* zob. .slajd--wstep niżej — tam proporcja kolumn jest inna */
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: center;
  width: 100%;
}
.slajd__uklad .slajd__tresc {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Treść razem z przyciskiem stoi pośrodku bloku — przycisk ma być
     tuż pod tekstem, a nie dopchnięty do dolnej krawędzi. */
  justify-content: center;
  max-width: 36rem;
  /* Wysokość równa najdłuższemu z trzech slajdów — dzięki temu wszystkie
     zajmują identyczne miejsce, a przycisk stoi zawsze na tej samej
     wysokości. Na niskich ekranach blok się kurczy, a nadmiar treści
     przewija się wewnątrz slajdu. */
  min-height: min(39rem, 62vh);
}
.slajd__uklad .slajd__akcje { margin-top: 0; padding-top: 1.6rem; }
/* Slajd otwierający z postacią: kolumna tekstu szersza niż na pozostałych,
   bo tytuł jest tu dwa razy większy. Sam tytuł też schodzi o stopień —
   inaczej „które ludzie tworzą sami” nie mieści się w wierszu i łamie się
   w przypadkowym miejscu, zamiast tam, gdzie stoi <br>. */
.slajd--wstep .slajd__uklad { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
/* Tytuł otwierający ma się łamać wyłącznie tam, gdzie stoi <br> — czyli na
   dwie linijki. Dłuższa z nich ma w Baloo 2 700 szerokość 12,15 em, a kolumna
   tekstu obok postaci to na szerokim ekranie ~580 px: przy 3,4 rem linijka
   wychodziła na 660 px i zawijała się na trzecią, a niżej i na czwartą.
   2,7 rem mieści się z zapasem 9–30% w całym zakresie od ~420 px wzwyż.
   Przy zmianie treści tytułu przelicz to na nowo — dłuższy tekst znów się
   złamie, a wtedy trzeba albo skrócić, albo zejść z rozmiarem. */
.slajd--wstep .slajd__uklad .slajd__tytul-glowny {
  font-size: clamp(1.9rem, .75rem + 2vw, 2.7rem);
}
.slajd__figura {
  justify-self: center;
  /* Postać stoi na dole slajdu, a nie w pionowym środku — inaczej unosiłaby się
     nad linią gruntu pejzażu i sylwetki z tła wyglądałyby jak inna scena.
     Ujemny margines zjada dolny odstęp slajdu, żeby stopy dosięgły krawędzi. */
  align-self: end;
  margin-bottom: 0;
  height: min(58vh, 500px);
  width: auto;
  max-width: 100%;
}
/* Odbicie w poziomie — postać ma patrzeć w stronę tekstu, nie poza slajd. */
.slajd__figura--odbita { transform: scaleX(-1); }

/* W kolumnie kroki układają się pionowo — trzy obok siebie byłyby ściśnięte.
   Odstępy są ciaśniejsze niż zwykle, żeby ten slajd zmieścił się w tej samej
   wysokości bloku co dwa pozostałe. */
.slajd__uklad .kroki {
  grid-template-columns: 1fr;
  gap: 1.05rem;
  margin-top: 1.3rem;
  /* Ostatni krok nie ma marginesu dolnego, jaki ma akapit — bez tego przycisk
     stał bliżej treści niż na „O projekcie” i „Zostań liderem”. */
  margin-bottom: 1rem;
}
.slajd__uklad .krok {
  border-top: 0;
  padding-top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
}
.slajd__uklad .krok__numer {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  letter-spacing: 0;
  color: var(--zielen);
}
.slajd__uklad .krok__tytul {
  grid-column: 2;
  font-family: var(--font-tekst);
  font-size: 1.02rem;
  line-height: 1.62;
  font-weight: 700;
  margin: 0;
}
.slajd__uklad .krok p {
  grid-column: 2;
  font-size: 1.02rem;
  line-height: 1.62;
}

.slajd__tytul-glowny {
  font-size: clamp(2.2rem, 1.3rem + 4vw, 4.2rem);
  line-height: 1.07;
  letter-spacing: -.02em;
  margin-bottom: 1.4rem;
  /* Tytuł ma się złamać dokładnie tam, gdzie stoi <br> — nie wcześniej. */
  max-width: 24ch;
}
.slajd__tytul {
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  margin-bottom: 1.1rem;
}
.slajd__wiodacy { font-size: 1.14rem; line-height: 1.62; max-width: 46ch; }
.slajd__opis {
  max-width: 46ch;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  line-height: 1.62;
  color: #2C4C3A;
  margin-bottom: 2.2rem;
}
.slajd p { max-width: 46ch; font-size: 1.02rem; line-height: 1.62; }
.slajd__akcje { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
/* Slajdy 2–4 mają po jednym przycisku o różnej długości napisu („Załóż konto”
   kontra „Przeczytaj raport”). Wspólna szerokość minimalna sprawia, że przy
   przewijaniu slajdów przycisk nie zmienia rozmiaru.

   Slajd otwierający jest wyjątkiem: ma DWA przyciski w wariancie „duży”
   i mają stać obok siebie. Wymuszona szerokość zepchnęłaby drugi do
   następnego wiersza, dlatego wariant „duży” jest z tej reguły wyjęty. */
.slajd__uklad .slajd__akcje .przycisk:not(.przycisk--duzy) {
  min-width: 13rem;
  justify-content: center;
}
.slajd__akcje .przycisk--duzy { flex: 0 0 auto; }
/* Pusty wiersz między zdaniem o stanie mapy a hasłem — to dwie różne
   rzeczy: fakt i zachęta. */
.slajd__licznik { margin: 1.4rem 0 0; display: grid; gap: 1.1rem; font-size: .95rem; }
.slajd__rosnie { color: var(--zielen-ciemna); font-weight: 700; }

/* --- sterowanie slajdami: kropki ---
   ---------------------------------------------------------------------
   Wcześniej stał tu pasek z podpisami slajdów — powtarzał menu z nagłówka,
   więc został z niego sam znak, ile jest slajdów i który trwa. Nazwy są
   w menu u góry, tu wystarczą cztery kropki.

   Kropki stoją pod kolumną tekstu, a nie pośrodku: po lewej mgła nad
   pejzażem jest najgęstsza, więc kontrast nie zależy od tego, co akurat
   wypadnie pod spodem. Punkt dotykowy ma 28 px przy 8-piksełowej kropce —
   sam znak jest dyskretny, cel kliknięcia nie. */
.slajder__sterowanie {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(.7rem, 2vh, 1.3rem);
  z-index: 3;
  pointer-events: none;
}
.slajder__sterowanie-wnetrze {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  pointer-events: none;
}

.slajder__kropki {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}
.slajder__kropka {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.slajder__kropka-znak {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(34, 48, 42, .28);
  transition: background .25s ease, transform .25s ease;
}
.slajder__kropka:hover .slajder__kropka-znak { background: rgba(34, 48, 42, .55); }
.slajder__kropka--aktywna .slajder__kropka-znak {
  background: var(--zielen);
  transform: scale(1.3);
}

.slajder__pauza {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-left: .35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: rgba(34, 48, 42, .38);
  pointer-events: auto;
  transition: color .25s ease, background .25s ease;
}
.slajder__pauza:hover { color: var(--atrament); background: rgba(251, 248, 238, .8); }
.slajder__pauza-ikona {
  width: 7px; height: 9px;
  border-left: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}
.slajder__pauza--zatrzymana .slajder__pauza-ikona {
  width: 0; height: 0;
  border: 4.5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
}
/* Bez automatu (ograniczony ruch) pauza nie ma czego zatrzymywać. */
.slajder--bez-automatu .slajder__pauza { display: none; }


/* ---------------------------------------------------------------------
   Odsłanianie treści przy przewijaniu
   Stan początkowy nakładamy tylko wtedy, gdy JavaScript włączył ruch —
   bez niego treść jest od razu widoczna.
--------------------------------------------------------------------- */
.ruch-wlaczony [data-odslon] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.ruch-wlaczony [data-odslon].odslonione { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   Kroki „jak to działa”
--------------------------------------------------------------------- */
.kroki {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.krok { border-top: 2px solid var(--obrys); padding-top: 1.2rem; }
.krok__numer {
  display: block;
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  color: var(--zielen-ciemna);
  margin-bottom: .5rem;
}
.krok__tytul { font-size: 1.15rem; margin-bottom: .5rem; }
.krok p { color: var(--atrament-slaby); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Oś czasu — trzy odnośniki
--------------------------------------------------------------------- */
.os-linki { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.8rem; }
.os-linki a {
  padding: .45rem 1.1rem;
  border: 1.5px solid var(--obrys-mocny);
  border-radius: 999px;
  text-decoration: none;
  color: var(--atrament);
  font-weight: 600;
  font-size: .95rem;
  background: var(--papier);
}
.os-linki a:hover { border-color: var(--zielen); background: var(--papier); color: var(--zielen-glebia); }

/* ---------------------------------------------------------------------
   Kafelki
--------------------------------------------------------------------- */
.kafelki {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--obrys);
}
.kafelek { border-bottom: 1px solid var(--obrys); }
.kafelek__link {
  display: block;
  position: relative;
  height: 100%;
  padding: 1.6rem 2.6rem 1.6rem 0;
  text-decoration: none;
  color: var(--atrament);
  transition: padding-left .2s ease, color .2s ease;
}
.kafelek__link:hover { padding-left: .7rem; color: var(--zielen-glebia); }
.kafelek__tytul { font-size: 1.12rem; margin-bottom: .3rem; }
.kafelek__opis { margin: 0; color: var(--atrament-slaby); font-size: .93rem; }
.kafelek__strzalka {
  position: absolute;
  right: 1rem; top: 1.7rem;
  color: var(--zielen-ciemna);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateX(-6px);
}
.kafelek__link:hover .kafelek__strzalka { opacity: 1; transform: none; }

@media (min-width: 700px) {
  .kafelki { column-gap: 3rem; }
}

/* ---------------------------------------------------------------------
   Informacje / komunikaty w treści
--------------------------------------------------------------------- */
/* Ramka informacyjna: cienki obrys, bez grubej kreski z lewej. Ta kreska
   czytała się na stronie jak pasek doklejony do treści. Odmiany różni sam
   kolor tła i obrysu. */
.informacja {
  background: var(--papier-cien);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-maly);
  padding: 1rem 1.15rem;
  margin-block: 1.4rem;
  font-size: .96rem;
}
.informacja > *:last-child { margin-bottom: 0; }
.lista-prosta { margin: 0 0 .9rem; padding-left: 1.2rem; }
.lista-prosta li { margin-bottom: .35rem; }
.informacja__tytul { font-size: 1.05rem; margin-bottom: .4rem; }
.informacja--uwaga  { background: var(--uwaga-tlo);  border-color: var(--zielen-ciemna); }
.informacja--sukces { background: var(--sukces-tlo); border-color: var(--zielen); }
.informacja--blad   { background: var(--blad-tlo);   border-color: var(--blad); }

/* --- dokument do pobrania ---
   Blok stoi na stronie wniosku o konto lidera i prowadzi do wzoru
   upoważnienia. Celowo NIE jest ramką „informacja”: to nie komunikat,
   tylko rzecz do zabrania ze sobą, więc ma własny, spokojniejszy ton. */
.do-pobrania {
  background: var(--papier-cien);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-maly);
  padding: 1.1rem 1.2rem;
  margin-block: 1.5rem;
}
.do-pobrania__tytul {
  font-size: 1.02rem;
  margin: 0 0 .35rem;
}
.do-pobrania__opis {
  font-size: .92rem;
  color: var(--atrament-slaby);
  margin: 0 0 .85rem;
}
.do-pobrania__pliki {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Strona mapy
--------------------------------------------------------------------- */
/* Wysokość liczona tak samo jak dla slidera na stronie głównej: o 2,5 rem
   mniej niż ekran, żeby na dole wystawał pasek zieleni ze stopki — znak,
   że strona ma ciąg dalszy. */
.mapa-strona {
  background: var(--papier);
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--naglowek-h) - 2.5rem);
}
body.ma-pasek-demo .mapa-strona {
  height: calc(100svh - var(--naglowek-h) - 3.4rem - 2.5rem);
}

/* Pasek nad mapą: tytuł, oś czasu, przełącznik widoku i przycisk dodania
   wpisu. Bez kreski pod spodem — strona ma być płaska jak strona główna,
   a nie podzielona na piętra. */
.mapa-strona__pasek {
  background: var(--papier);
  flex: none;
}
.mapa-strona__pasek-wnetrze {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .8rem;
}
.mapa-strona__tytul { font-size: 1.3rem; margin: 0; color: var(--zielen-ciemna); }
.strona__akcja { margin-left: auto; flex: none; }

/* Wyszukiwarka miejsc stoi w pasku nad mapą, a nie w kolumnie filtrów:
   na wąskim ekranie kolumna znika razem z listą wyników, a adresu szuka
   się właśnie wtedy, patrząc na mapę. */
.szukaj-miejsca {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: .4rem;
  flex: 1 1 18rem;
  max-width: 32rem;
  margin: 0;
}
.szukaj-miejsca__pole { flex: 1 1 auto; min-width: 0; }
.szukaj-miejsca .przycisk { flex: none; white-space: nowrap; }
/* Podpowiedzi wychodzą nad mapę, zamiast rozpychać pasek. Warstwa 800 leży
   nad kafelkami, pinezkami i dymkami Leafletu (najwyżej 700), a pod
   przyklejonym nagłówkiem strony (900). */
.podpowiedzi--nad-mapa {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  right: 0;
  z-index: 800;
  margin: 0;
  box-shadow: 0 8px 24px rgba(23, 61, 40, .14);
}


/* Oś czasu stoi w lewej kolumnie, nad kategoriami. Pigułki zawijają się
   w wierszu, więc mieszczą się i przy szerokiej, i przy wąskiej kolumnie. */
.os-czasu__opcje {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.4rem;
}
.os-czasu__opcja { position: relative; cursor: pointer; }
.os-czasu__opcja input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.os-czasu__etykieta {
  display: block;
  padding: .34rem .8rem;
  border: 1px solid var(--obrys-mocny);
  border-radius: 999px;
  font-weight: 600;
  font-size: .86rem;
  color: var(--atrament-slaby);
  background: var(--papier);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.os-czasu__opcja:hover .os-czasu__etykieta {
  border-color: var(--zielen);
  color: var(--atrament);
}
/* Wybrany zakres w zieleni marki — jeden mocny akcent na całą kolumnę. */
.os-czasu__opcja input:checked + .os-czasu__etykieta {
  background: var(--zielen);
  border-color: var(--zielen);
  color: var(--papier);
}
.os-czasu__opcja input:focus-visible + .os-czasu__etykieta {
  outline: 3px solid var(--atrament);
  outline-offset: 2px;
}

.przelacznik-widoku { display: none; gap: 0; }
.przelacznik-widoku__opcja {
  padding: .5rem 1rem;
  border: 2px solid var(--obrys);
  background: var(--papier);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--atrament);
  min-height: 44px;
}
.przelacznik-widoku__opcja:first-child { border-radius: 999px 0 0 999px; }
.przelacznik-widoku__opcja:last-child  { border-radius: 0 999px 999px 0; border-left-width: 0; }
.przelacznik-widoku__opcja[aria-pressed="true"] { background: var(--akcent); border-color: var(--atrament); }

.mapa-strona__uklad {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  min-height: 0;
  /* ta sama kolumna, co reguła .obszar na pozostałych stronach */
  width: 100%;
  max-width: var(--obszar-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, .4rem + 2.4vw, 2.5rem);
  padding-block: 1.1rem 1.4rem;
  gap: 1.2rem;
}
/* Kolumna dzieli się na część stałą (oś czasu, kategorie) i przewijaną
   (wyniki). Wcześniej przewijała się całość, więc szukając wpisu traciło się
   z oczu filtry, którymi się go szuka. */
.panel-boczny {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel-boczny > .os-czasu__opcje,
.panel-boczny > .filtry { flex: none; }

.filtry { margin-bottom: 1.6rem; }
.filtry__grupa { border: 0; padding: 0; margin: 0 0 1.2rem; }
.filtry__grupa legend {
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--atrament-slaby);
  padding: 0;
  margin-bottom: .5rem;
}
/* Równa siatka, nie zawijany rząd: pigułki o różnej długości nazw układały
   się w poszarpane wiersze z dziurami na końcach. Kolumny wyrównują je
   do wspólnej szerokości i na mapie, i w formularzu. */
.filtry__checkboxy {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  /* Ciasno, bo blok stoi nad wynikami i nie może zjadać kolumny. Węższe
     kolumny obcięłyby najdłuższe nazwy („rzemieślnicze”, „animacyjne”). */
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  gap: .1rem .2rem;
}
.pole--zbior .filtry__checkboxy {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .2rem .4rem;
}
.pole--zbior .checkbox-kolor { font-size: .92rem; padding: .4rem .6rem; gap: .55rem; }
.pole--zbior .checkbox-kolor__kropka { width: 13px; height: 13px; }

/* Kategoria to wiersz do klikania: kropka w barwie pinezki, nazwa, a po
   zaznaczeniu jasne tło i ciemniejszy tekst. Systemowy kwadracik chowamy —
   kropka i tło niosą tę samą informację, a nie dublują znaczników. */
.checkbox-kolor {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .45rem;
  cursor: pointer;
  font-size: .84rem;
  color: var(--atrament-slaby);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.checkbox-kolor:hover { border-color: var(--obrys-mocny); color: var(--atrament); }
.checkbox-kolor input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.checkbox-kolor__kropka {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--kolor-kategorii, var(--zielen));
  flex: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.checkbox-kolor:has(input:checked) {
  background: var(--papier-cien);
  border-color: var(--obrys-mocny);
  color: var(--atrament);
  font-weight: 600;
}
.checkbox-kolor:has(input:checked) .checkbox-kolor__kropka {
  background: var(--kolor-kategorii, var(--zielen));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kolor-kategorii, var(--zielen)) 22%, transparent);
}
.checkbox-kolor:has(input:focus-visible) {
  outline: 3px solid var(--zielen-ciemna);
  outline-offset: 2px;
}

.wyniki {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 0;
}
.wyniki__naglowek { font-size: 1.1rem; margin-bottom: .2rem; }
.wyniki__licznik { font-size: .9rem; color: var(--atrament-slaby); margin-bottom: 1rem; }
.wyniki__lista {
  list-style: none;
  margin: 0;
  padding: 0 .5rem .5rem 0;
  display: grid;
  gap: .5rem;
  align-content: start;
  overflow-y: auto;
  min-height: 0;
}
.wyniki__ladowanie, .wyniki__pusto, .wyniki__blad, .wyniki__uwaga {
  padding: 1rem;
  background: var(--papier-cien);
  border-radius: var(--promien-maly);
}
.wyniki__blad { background: var(--blad-tlo); color: var(--blad); }

.wynik__karta {
  border: 1px solid var(--obrys);
  border-left: 3px solid var(--kolor-wpisu, var(--zielen));
  border-radius: var(--promien-maly);
  padding: .7rem .85rem;
  background: var(--papier);
}
.wynik__karta:hover { border-color: var(--zielen); border-left-color: var(--kolor-wpisu, var(--zielen)); }
.wynik__tytul { font-size: 1rem; margin-bottom: .2rem; }
.wynik__tytul a { text-decoration: none; }
.wynik__tytul a:hover { text-decoration: underline; }
/* Termin z ikoną terminarza — ta sama forma na liście i w dymku na mapie. */
.karta__termin {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .86rem;
  color: var(--atrament-slaby);
  margin: .2rem 0 0;
}
.karta__termin .ikona { width: 15px; height: 15px; flex: none; margin-top: .12rem; }
.dymek__termin { margin-bottom: .45rem; }

/* Tytuł wyniku jest przyciskiem: kliknięcie pokazuje inicjatywę na mapie,
   przybliża kadr i otwiera dymek. Wygląda jak odnośnik, bo tak się zachowuje. */
.wynik__otworz {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--zielen-ciemna);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(31, 91, 56, .3);
  text-underline-offset: .16em;
  cursor: pointer;
}
.wynik__otworz:hover { text-decoration-color: currentColor; }


/* Sama mapa dostaje zaokrąglenie — panel filtrów zostaje na papierze,
   bez ramki, żeby strona nie rozpadała się na pudełka. */
.mapa-strona__mapa {
  position: relative;
  min-height: 0;
  border-radius: var(--promien);
  overflow: hidden;
}
.mapa-kontener { position: absolute; inset: 0; background: var(--papier-cien); }

/* ---------------------------------------------------------------------
   Stylizacja podkładu mapowego
   ---------------------------------------------------------------------
   Kafelki OpenStreetMap są kolorowe i „głośne”. Odbarwiamy je filtrem CSS,
   dzięki czemu jedynym kolorem na mapie zostają pinezki inicjatyw.
   Robimy to filtrem, a nie zewnętrznym dostawcą stylizowanych kafelków —
   nie dokładamy kolejnego podmiotu, któremu przeglądarka wysyła adres IP
   (patrz Polityka prywatności, pkt 4), i nie ma dodatkowych kosztów.
   Filtr działa tylko na warstwie kafelków; znaczniki są poza nim.
--------------------------------------------------------------------- */
.leaflet-tile-pane {
  filter: grayscale(1) contrast(.88) brightness(1.06) sepia(.10);
}
.mapa-kontener .leaflet-container,
.mapa-wyboru .leaflet-container { background: #EDEAE2; }

.kontrolka-lokalizacji button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--papier);
  border: 0;
  cursor: pointer;
  color: var(--atrament);
}
.kontrolka-lokalizacji button:hover { background: var(--papier-mocny); }
.kontrolka-lokalizacji button[disabled] { opacity: .5; cursor: progress; }


/* ---------------------------------------------------------------------
   Pinezki i klastry
--------------------------------------------------------------------- */
.pinezka { background: none; border: 0; }
.pinezka svg { filter: drop-shadow(0 2px 2px rgba(23, 61, 40, .35)); }
.pinezka:focus-visible svg { outline: 3px solid var(--atrament); outline-offset: 2px; }
.pinezka--wyrozniona svg { transform: scale(1.15); }

.klaster {
  background: var(--zielen);
  border: 3px solid var(--papier);
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  box-shadow: 0 2px 6px rgba(23, 61, 40, .4);
}
.klaster__liczba {
  color: var(--papier);
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: .95rem;
}

.okrag-przyblizenia {
  stroke: var(--zielen);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  fill: var(--lisc);
  fill-opacity: .18;
}

/* dymek Leafletu */
.leaflet-popup-content-wrapper {
  border-radius: var(--promien-maly);
  border: 2px solid var(--obrys);
  box-shadow: var(--cien-mocny);
}
.leaflet-popup-content { margin: .9rem 1rem; font-family: var(--font-tekst); }
.leaflet-container { font-family: var(--font-tekst); }
.leaflet-container a { color: var(--zielen-ciemna); }

.dymek__tytul {
  font-size: 1.05rem;
  margin-bottom: .3rem;
  padding-left: .6rem;
  border-left: 4px solid var(--kolor-wpisu, var(--zielen));
}
.dymek__opis { font-size: .9rem; margin-bottom: .5rem; }
.dymek__akcje { margin: .6rem 0 0; }

/* ---------------------------------------------------------------------
   Znaczki i plakietki
--------------------------------------------------------------------- */
.znaczki { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.znaczek {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  padding: .12em .6em;
  border: 1.5px solid var(--obrys);
  border-radius: 999px;
  background: var(--papier);
}
.znaczek__kropka {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--kolor-kategorii, var(--zielen));
  border: 1px solid var(--atrament);
}

.plakietka {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  padding: .12em .6em;
  border-radius: 999px;
  background: var(--papier-mocny);
  border: 1.5px solid var(--obrys);
  white-space: nowrap;
}
.plakietka abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }
.plakietka--status-niezweryfikowane { background: var(--papier-mocny); }
.plakietka--status-I  { background: var(--akcent-jasny); border-color: var(--akcent); }
.plakietka--status-II { background: var(--lisc); border-color: var(--zielen); color: var(--atrament); }
.plakietka--czas-minione   { background: var(--papier-mocny); }
.plakietka--czas-teraz     { background: var(--akcent); border-color: var(--atrament); }
.plakietka--czas-planowane { background: var(--akcent-jasny); }
.plakietka--stan-w_moderacji    { background: var(--uwaga-tlo); border-color: var(--akcent); }
.plakietka--stan-zarchiwizowane { background: var(--papier-mocny); color: var(--atrament-slaby); }

/* ---------------------------------------------------------------------
   Pełna karta inicjatywy
--------------------------------------------------------------------- */
.strona-karty { padding-block: 2.2rem 1.5rem; }
.okruszki { font-size: .9rem; margin-bottom: 1rem; }
.karta-pelna__naglowek { border-bottom: 3px solid var(--kolor-wpisu, var(--zielen)); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.karta-pelna__plakietki { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.karta-pelna__zdjecie { margin: 0 0 1.5rem; }
.karta-pelna__zdjecie img { width: 100%; border-radius: var(--promien); border: 2px solid var(--obrys); }
.karta-pelna__opis { font-size: 1.08rem; }
.karta-pelna__uwaga, .karta__uwaga {
  background: var(--uwaga-tlo);
  border-left: 5px solid var(--akcent);
  padding: .8rem 1rem;
  border-radius: var(--promien-maly);
  font-size: .93rem;
}
.karta-pelna__mapka {
  height: 320px;
  margin-block: 1.5rem;
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  overflow: hidden;
}
.karta-pelna__mapka[hidden] { display: none; }
.karta-pelna__stopka { border-top: 1px dotted var(--obrys); padding-top: .9rem; margin-top: 1.2rem; }
.karta__lokalizacja { display: flex; align-items: flex-start; gap: .35rem; font-size: .9rem; color: var(--atrament-slaby); margin-bottom: .4rem; }
.karta__lokalizacja .ikona { width: 16px; height: 16px; flex: none; margin-top: .18rem; }

.dane { display: grid; gap: 0; margin-bottom: 1.5rem; }
.dane__wiersz {
  display: grid;
  grid-template-columns: minmax(160px, 32%) 1fr;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dotted var(--obrys);
}
.dane dt { font-weight: 700; }
.dane dd { margin: 0; }

.lista-linkow { padding-left: 1.2rem; }

/* ---------------------------------------------------------------------
   Formularze
--------------------------------------------------------------------- */
/* Strony użytkowe (logowanie, wniosek o konto, zgłoszenie, panel) czyta się
   tak jak dokument w oknie: wąska kolumna, spokojne pismo, zielone nagłówki.
   Wcześniej każda z nich miała własny stopień i czarne nagłówki. */
.strona-formularza,
.panel { font-size: 1rem; }
.strona-formularza h1,
.strona-formularza h2,
.panel h1,
.panel h2 { color: var(--zielen-ciemna); }
.strona-formularza h1,
.panel h1 { font-size: 1.75rem; }
.strona-formularza h2,
.panel h2 { font-size: 1.15rem; }
.strona-formularza .wiodacy,
.panel .wiodacy { font-size: 1.06rem; }

/* Logowanie to jedno pytanie i dwa pola — nie potrzebuje szerokości strony.
   Kolumna zwężona do formularza, nagłówek zejmuje o stopień, wstęp drobny.
   Ten sam spokój, co w oknie z regulaminem. */
.logowanie {
  max-width: 27rem;
  padding-block: 3rem 1.5rem;
}
.logowanie h1 { margin-bottom: .4rem; }   /* wielkość z .strona-formularza h1 */
.logowanie__wstep {
  font-size: .95rem;
  color: var(--atrament-slaby);
  margin-bottom: 1.6rem;
}
.logowanie .formularz { margin-top: 0; }
.logowanie .formularz__wyslij { margin-top: 1.4rem; }
.logowanie .informacja { padding: .9rem 1rem; font-size: .92rem; }
.logowanie .informacja ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.strona-formularza { padding-block: 2.5rem 1.5rem; }
.formularz { margin-top: 2rem; }
.formularz--waski { max-width: 26rem; }

.formularz__grupa {
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  padding: 1.4rem 1.5rem 1rem;
  margin: 0 0 1.6rem;
  background: var(--papier);
}
.formularz__grupa--zgody { background: var(--papier-cien); }
.formularz__legenda {
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--zielen-ciemna);
  letter-spacing: .01em;
  padding-inline: .5rem;
}
.formularz__wyslij { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }

/* Pola układają się w dwóch kolumnach, zamiast ciągnąć się jednym słupkiem
   przez pół ekranu. Na całą szerokość idą tylko te, które tego potrzebują:
   pola z długim tekstem, zgody, listy wyboru i klauzule. */
@media (min-width: 660px) {
  .formularz__grupa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.3rem;
    align-items: start;
  }
  .formularz__grupa > legend { grid-column: 1 / -1; }
  .formularz__grupa > *:not(.pole) { grid-column: 1 / -1; }
  .formularz__grupa > .pole:has(textarea),
  .formularz__grupa > .pole--zbior,
  .formularz__grupa > .pole--szerokie { grid-column: 1 / -1; }

  /* Jednokolumnowe zostają: logowanie (dwa pola) i zgłoszenie inicjatywy,
     gdzie pola mają iść na całą szerokość ramki. */
  .formularz--waski .formularz__grupa,
  .formularz--pelne .formularz__grupa { display: block; }
}

/* Wstęp na stronie wniosku o konto: zwykły tekst, bez ramki. Przycisk
   pobrania stoi na końcu, już po instrukcji odesłania. */
.wstep-wniosku { margin-bottom: 2.2rem; }
.wstep-wniosku .wiodacy { margin-bottom: 1rem; }
.wstep-wniosku__pobranie { margin: 1.3rem 0 0; }

.pole { display: block; margin-bottom: 1.15rem; position: relative; }
.pole:last-child { margin-bottom: .6rem; }
.pole--zbior { border: 0; padding: 0; margin: 0 0 1.2rem; }
/* Termin: pola dobierane do rytmu. Pary „od–do” stoją obok siebie, dni
   tygodnia to rząd pigułek, a terminy niestandardowe — lista wierszy. */
.godziny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 1rem;
}

/* Pigułki wielokrotnego wyboru. `.dni-tygodnia` to rząd skrótów dni przy
   terminie cyklicznym, `.pigulki` — ten sam wygląd dla wyborów opisanych
   słowem (odbiorcy w formularzu zgłoszenia i w panelu). Bez kodowania
   kolorem, bo kolor w tym serwisie znaczy typ działania i nic innego. */
.dni-tygodnia,
.pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
}
.dzien, .pigulka { position: relative; display: block; cursor: pointer; }
.dzien input,
.pigulka input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.dzien span,
.pigulka span {
  display: block;
  min-width: 3.1rem;
  padding: .38rem .5rem;
  text-align: center;
  border: 1px solid var(--obrys-mocny);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--atrament-slaby);
  background: var(--papier);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Nazwy odbiorców są długie („osoby z doświadczeniem migracji”) — pigułka
   dostaje więcej luzu po bokach i tekst do lewej, żeby nie wyglądała
   jak przycisk-guzik na pół wiersza. */
.pigulka span { padding-inline: .8rem; text-align: left; }
.dzien:hover span,
.pigulka:hover span { border-color: var(--zielen); color: var(--atrament); }
.dzien:has(input:checked) span,
.pigulka:has(input:checked) span {
  background: var(--zielen);
  border-color: var(--zielen);
  color: var(--papier);
}
.dzien:has(input:focus-visible) span,
.pigulka:has(input:focus-visible) span {
  outline: 3px solid var(--zielen-ciemna);
  outline-offset: 2px;
}

.terminy-lista { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .5rem; }

/* Lista odnośników — wiersz to samo pole i krzyżyk, bez podpisu nad każdym;
   nazwa grupy stoi raz, nad całą listą. */
.linki-lista { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.link-wiersz { display: flex; align-items: center; gap: .5rem; }
.link-wiersz .pole__kontrolka { flex: 1; }
.link-wiersz__usun {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--obrys-mocny);
  border-radius: 50%;
  background: var(--papier);
  color: var(--atrament-slaby);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.link-wiersz__usun:hover { border-color: var(--blad); color: var(--blad); }
.termin-wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .9rem;
  padding: .7rem .85rem;
  background: var(--papier-cien);
  border-radius: var(--promien-maly);
}
.termin-wiersz .pole { flex: 0 1 auto; }
/* Tu pola stoją w jednym rzędzie z przyciskiem usuwania, więc biorą tyle
   miejsca, ile naprawdę potrzebują — inaczej wiersz rozpycha ramkę. */
.termin-wiersz .pole__kontrolka { width: 11rem; max-width: 100%; }
.termin-wiersz input[type="time"].pole__kontrolka,
.termin-wiersz .pole__kontrolka[placeholder="GG:MM"] { width: 8.5rem; }
.termin-wiersz .pole { margin-bottom: 0; }
.termin-wiersz__usun {
  align-self: end;
  width: 34px; height: 34px;
  margin-bottom: .1rem;
  border: 1px solid var(--obrys-mocny);
  border-radius: 50%;
  background: var(--papier);
  color: var(--atrament-slaby);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.termin-wiersz__usun:hover { border-color: var(--blad); color: var(--blad); }
.radio-lista--pozioma {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
}

.wybor-mapy__podpis { margin: 0 0 .35rem; }

.pole--wciecie { margin-left: 2rem; margin-top: .7rem; }
.pole--wciecie .pole:last-of-type { margin-bottom: .35rem; }
.pole--wbudowane { display: flex; align-items: center; gap: .5rem; margin-bottom: 0; }
.pole--wbudowane .pole__etykieta { margin-bottom: 0; white-space: nowrap; }

/* Etykieta jest rzędem: tekst, gwiazdka pola wymaganego i znak zapytania.
   Bez tego znak zapytania wisiał na linii bazowej i przy każdym polu
   wypadał odrobinę inaczej — zwłaszcza w <legend>, gdzie przeglądarki
   liczą wyrównanie po swojemu. */
.pole__etykieta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem .4rem;
  font-weight: 700;
  margin-bottom: .35rem;
}

/* Znak zapytania przy etykiecie odsłania wyjaśnienie do pola. Wyjaśnienie
   jest w dokumencie od początku — przycisk tylko je pokazuje — więc czytnik
   ekranu i wyszukiwanie na stronie mają do niego dostęp zawsze. */
.znak-pytania {
  display: grid;
  place-items: center;
  flex: none;
  width: 19px; height: 19px;
  padding: 0;
  border: 1px solid var(--obrys-mocny);
  border-radius: 50%;
  background: none;
  color: var(--atrament-slaby);
  font: 700 .78rem/1 var(--font-tekst);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.znak-pytania:hover {
  background: var(--zielen);
  border-color: var(--zielen);
  color: var(--papier);
}
.znak-pytania[aria-expanded="true"] {
  background: var(--zielen-ciemna);
  border-color: var(--zielen-ciemna);
  color: var(--papier);
}
/* Wyjaśnienie wisi nad układem jako dymek — pokazanie go nie przesuwa
   niczego w formularzu. Wychodzi po najechaniu na znak, po ustawieniu
   na nim fokusa i po kliknięciu (ekrany dotykowe nie mają najechania). */
.znak-pytania__otoczka { position: relative; display: inline-flex; }
.pole__podpowiedz--chowana {
  position: absolute;
  left: -.6rem;
  top: calc(100% + .5rem);
  z-index: 20;
  width: max-content;
  max-width: min(24rem, 70vw);
  margin: 0;
  padding: .6rem .75rem;
  font-weight: 400;
  color: var(--atrament);
  background: var(--papier);
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--promien-maly);
  box-shadow: var(--cien);
  opacity: 0;
  visibility: hidden;
  /* Dymek nie łapie myszy — kursor nigdy w niego nie „wpada”, więc znika
     dokładnie wtedy, gdy zjeżdża się ze znaku zapytania. */
  pointer-events: none;
  transition: opacity .12s ease;
}
/* Dzióbek dymka — wskazuje znak, od którego wyszedł. */
.pole__podpowiedz--chowana::before {
  content: '';
  position: absolute;
  left: .95rem;
  top: -5px;
  width: 8px; height: 8px;
  background: var(--papier);
  border-left: 1px solid var(--obrys-mocny);
  border-top: 1px solid var(--obrys-mocny);
  rotate: 45deg;
}
.znak-pytania:hover + .pole__podpowiedz--chowana,
.znak-pytania:focus + .pole__podpowiedz--chowana {
  opacity: 1;
  visibility: visible;
}
/* Kontrolki: cienki obrys jak w reszcie serwisu, lekko wpuszczone tło —
   pole ma być rozpoznawalne jako miejsce do pisania, ale nie krzyczeć
   dwupikselową ramką przy każdym wierszu formularza. */
.pole__kontrolka {
  display: block;
  width: 100%;
  padding: .62rem .8rem;
  font: inherit;
  color: var(--atrament);
  background: var(--papier);
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--promien-maly);
  min-height: 44px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pole__kontrolka::placeholder { color: var(--atrament-slaby); opacity: .75; }
.pole__kontrolka:hover { border-color: var(--atrament-slaby); }
.pole__kontrolka:focus-visible {
  border-color: var(--zielen);
  box-shadow: 0 0 0 3px rgba(46, 125, 78, .14);
  outline: none;
}
textarea.pole__kontrolka { min-height: 7rem; resize: vertical; }
/* Daty i godziny czytelną czernią, nie atramentem marki — ten ostatni ma
   zielony podkład (#22302A) i w krótkim ciągu cyfr rzuca się w oczy. */
input[type="date"].pole__kontrolka,
input[type="time"].pole__kontrolka,
input[type="month"].pole__kontrolka,
.pole__kontrolka[data-z-formatem] { color: #232323; }
select.pole__kontrolka { cursor: pointer; }
.pole__podpowiedz { display: block; font-size: .86rem; color: var(--atrament-slaby); margin-top: .35rem; }
.pole__przelacznik {
  position: absolute; right: .5rem; top: 2.05rem;
  background: none; border: 0; padding: .3rem .5rem;
  font: inherit; font-size: .82rem;
  color: var(--zielen-ciemna); cursor: pointer; text-decoration: underline;
}

.pole--blad .pole__kontrolka { border-color: var(--blad); background: var(--blad-tlo); }
.pole--blad .pole__etykieta { color: var(--blad); }
.pole--blad.zgoda { background: var(--blad-tlo); border-radius: var(--promien-maly); }

.siatka-dwa { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.2rem; }

.radio-lista, .zgody { list-style: none; margin: 0; padding: 0; }
.radio, .checkbox {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .45rem .3rem;
  cursor: pointer;
  border-radius: var(--promien-maly);
}
.radio:hover, .checkbox:hover { background: var(--papier-mocny); }
.radio input, .checkbox input {
  width: 20px; height: 20px;
  margin-top: .18rem;
  accent-color: var(--zielen);
  flex: none;
}

.zgoda { padding: .6rem 0; border-bottom: 1px dotted var(--obrys); }
.zgoda:last-child { border-bottom: 0; }
.zgoda__ranga {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--akcent);
  color: var(--atrament);
  border-radius: 999px;
  padding: .1em .55em;
  margin-right: .4em;
  vertical-align: .1em;
}
.zgoda__ranga--opcjonalna { background: var(--papier-mocny); border: 1px solid var(--obrys); }
.zgoda__linki { display: block; font-size: .87rem; color: var(--atrament-slaby); margin-top: .2rem; }

.klauzula {
  margin-top: 1.2rem;
  border: 2px solid var(--obrys);
  border-radius: var(--promien-maly);
  background: var(--papier);
}
.klauzula > summary {
  padding: .8rem 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-naglowki);
}
.klauzula__tresc { padding: 0 1rem 1rem; font-size: .9rem; color: var(--atrament-slaby); }

.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.podsumowanie-bledow {
  background: var(--blad-tlo);
  border: 2px solid var(--blad);
  border-radius: var(--promien-maly);
  padding: 1rem 1.2rem;
  margin-block: 1.5rem;
}
.podsumowanie-bledow__tytul { color: var(--blad); font-size: 1.1rem; margin-bottom: .5rem; }
.podsumowanie-bledow ul { margin: 0; padding-left: 1.2rem; }
.podsumowanie-bledow a { color: var(--blad); }

/* wybór lokalizacji */
.szukanie-adresu { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.szukanie-adresu .pole__kontrolka { flex: 1 1 14rem; }
.szukanie-adresu .przycisk { flex: none; white-space: nowrap; }

.podpowiedzi {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  border: 2px solid var(--obrys);
  border-radius: var(--promien-maly);
  background: var(--papier);
  max-height: 15rem;
  overflow-y: auto;
}
.podpowiedzi__pozycja {
  display: block;
  width: 100%;
  text-align: left;
  padding: .6rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--obrys);
  background: none;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  color: var(--atrament);
}
.podpowiedzi__pozycja:hover { background: var(--akcent-jasny); }
.podpowiedzi__stan { padding: .7rem .8rem; font-size: .9rem; color: var(--atrament-slaby); }

.mapa-wyboru {
  height: 340px;
  border: 2px solid var(--obrys);
  border-radius: var(--promien);
  overflow: hidden;
  background: var(--papier-cien);
}
.wybor-mapy { margin-bottom: 1.2rem; }

.podglad-zdjecia { margin-bottom: 1rem; }
.podglad-zdjecia__obraz {
  max-height: 220px;
  border-radius: var(--promien-maly);
  border: 2px solid var(--obrys);
}

.podziekowanie { text-align: center; padding-block: 2rem 3rem; }
.podziekowanie__akcje { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ---------------------------------------------------------------------
   Panel
--------------------------------------------------------------------- */
.panel { padding-block: 2rem 1.5rem; }
.panel__akcje-glowne { margin-bottom: 1.5rem; }
.panel__kto { margin: 0; color: var(--atrament-slaby); font-size: .92rem; }
.panel__akcje-glowne { display: flex; gap: .6rem; margin: 0; flex-wrap: wrap; }
.panel__ladowanie { padding: 2rem; text-align: center; color: var(--atrament-slaby); }

.statystyki {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem;
}
.statystyka {
  background: var(--papier-cien);
  border: 2px solid var(--obrys);
  border-radius: var(--promien-maly);
  padding: .9rem 1rem;
  text-align: center;
}
.statystyka--uwaga { background: var(--uwaga-tlo); border-color: var(--akcent); }
.statystyka__liczba {
  display: block;
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
}
.statystyka__opis { font-size: .85rem; color: var(--atrament-slaby); }

.zakladki { border-bottom: 2px solid var(--obrys); margin-bottom: 1.2rem; }
.zakladki__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; flex-wrap: wrap; }
.zakladki__przycisk {
  background: none;
  border: 2px solid transparent;
  border-bottom: 0;
  border-radius: var(--promien-maly) var(--promien-maly) 0 0;
  padding: .7rem 1.1rem;
  font: inherit;
  font-family: var(--font-naglowki);
  font-weight: 600;
  cursor: pointer;
  color: var(--atrament);
  margin-bottom: -2px;
}
.zakladki__przycisk:hover { background: var(--papier-cien); }
.zakladki__przycisk[aria-selected="true"] {
  background: var(--papier);
  border-color: var(--obrys);
  border-bottom: 2px solid var(--papier);
}
.zakladki__licznik { color: var(--atrament-slaby); font-weight: 400; }

.panel__narzedzia { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.panel__narzedzia[hidden] { display: none; }
.panel__licznik { color: var(--atrament-slaby); font-size: .9rem; }
.panel__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.panel__pusto {
  padding: 2.5rem 1rem;
  text-align: center;
  background: var(--papier-cien);
  border-radius: var(--promien);
  color: var(--atrament-slaby);
}

.panel-wpis {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  border: 2px solid var(--obrys);
  border-left: 6px solid var(--kolor-wpisu, var(--zielen));
  border-radius: var(--promien-maly);
  padding: 1rem 1.2rem;
  background: var(--papier);
}
.panel-wpis__glowna { flex: 1 1 420px; min-width: 0; }
.panel-wpis__tytul { font-size: 1.1rem; margin-bottom: .35rem; }
.panel-wpis__meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .5rem; }
.panel-wpis__opis { font-size: .92rem; color: var(--atrament-slaby); margin-bottom: .4rem; }
.panel-wpis__termin { margin: .25rem 0 0; color: var(--atrament-slaby); }
.panel-wpis__kontakt { margin-bottom: .3rem; }
.panel-wpis__ostrzezenie {
  background: var(--blad-tlo);
  color: var(--blad);
  border-radius: 999px;
  padding: .05em .55em;
  font-size: .75rem;
  font-weight: 700;
  margin-left: .3rem;
}
.panel-wpis__uwaga { color: var(--atrament-slaby); }
.panel-wpis__akcje { display: flex; gap: .4rem; align-items: flex-start; flex-wrap: wrap; }

/* Zakładanie konta z wniosku. Blok stoi w pionie i zajmuje całą szerokość
   kolumny akcji, bo zgoda na upoważnienie musi być nad przyciskiem —
   nie obok niego, gdzie łatwo ją przeoczyć i kliknąć na ślepo. */
.panel-wpis__zaproszenie {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .7rem .8rem;
  /* O stopień jaśniej niż podświetlenie .checkbox:hover (--papier-mocny),
     żeby najechanie na zgodę nadal było widać. */
  background: var(--papier-cien);
  border: 1px dashed var(--obrys);
  border-radius: var(--promien-maly);
}
.panel-wpis__zaproszenie .checkbox { font-size: .9rem; }
/* Przycisk wyłączony ma wyglądać na wyłączony — inaczej administrator
   klika i nie rozumie, dlaczego nic się nie dzieje. */
.panel-wpis__zaproszenie .przycisk[disabled] { opacity: .5; cursor: not-allowed; }

.panel-konto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border: 2px solid var(--obrys);
  border-radius: var(--promien-maly);
  padding: .9rem 1.2rem;
  background: var(--papier);
}
.panel-konto__nazwa { font-size: 1.05rem; margin-bottom: .1rem; }
.panel-konto__akcje { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
/* Podpowiedź widoczna tylko dopóki baza nie zna funkcji konta_liderow() —
   wtedy zamiast adresu stoi identyfikator konta i trzeba powiedzieć dlaczego. */
.panel-konto__brak-maila { color: var(--blad); margin-top: .25rem; }

/* szuflada edycji */
.szuflada { position: fixed; inset: 0; z-index: 1200; }
.szuflada[hidden] { display: none; }
.szuflada__tlo { position: absolute; inset: 0; background: rgba(23, 61, 40, .45); }
.szuflada__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(46rem, 100%);
  background: var(--papier);
  border-left: 3px solid var(--atrament);
  box-shadow: var(--cien-mocny);
  display: flex;
  flex-direction: column;
}
.szuflada__naglowek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid var(--obrys);
  background: var(--papier-cien);
  flex: none;
}
.szuflada__naglowek h2 { margin: 0; font-size: 1.2rem; }
.szuflada__zamknij {
  background: none;
  border: 2px solid var(--obrys);
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--atrament);
  flex: none;
}
.szuflada__zamknij:hover { background: var(--papier-mocny); }
.szuflada__tresc { overflow-y: auto; padding: 1.5rem; }
.formularz--gesty { margin-top: 0; }
.formularz--gesty .formularz__grupa { padding: 1rem 1.1rem .3rem; margin-bottom: 1.2rem; }
.formularz--gesty .pole { margin-bottom: .9rem; }

/* ---------------------------------------------------------------------
   Komunikaty pływające
--------------------------------------------------------------------- */
.komunikaty {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: grid;
  gap: .5rem;
  width: min(34rem, calc(100% - 2rem));
}
.komunikat {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1rem;
  border-radius: var(--promien-maly);
  border: 2px solid var(--atrament);
  background: var(--papier);
  box-shadow: var(--cien-mocny);
}
.komunikat__tresc { margin: 0; flex: 1; font-size: .95rem; }
.komunikat__zamknij {
  background: none; border: 0; font-size: 1.3rem; line-height: 1;
  cursor: pointer; color: inherit; padding: 0 .2rem;
}
.komunikat--sukces { background: var(--sukces-tlo); border-color: var(--zielen); }
.komunikat--blad   { background: var(--blad-tlo);   border-color: var(--blad); }
.komunikat--info   { background: var(--akcent-jasny); border-color: var(--akcent); }

/* ---------------------------------------------------------------------
   Strony treściowe (regulamin, polityka, deklaracja)
--------------------------------------------------------------------- */
.strona-tresci { padding-block: 2.5rem 1.5rem; }
.tresc { font-size: 1.05rem; }
.tresc h2 {
  margin-top: 2.2rem;
  padding-top: .6rem;
  border-top: 2px solid var(--obrys);
}
.tresc h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.tresc ol, .tresc ul { padding-left: 1.4rem; }
.tresc li { margin-bottom: .4rem; }
.tresc table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  display: block;
  overflow-x: auto;
}
.tresc th, .tresc td {
  border: 1px solid var(--obrys);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
}
.tresc th { background: var(--papier-cien); font-family: var(--font-naglowki); }
.tresc blockquote {
  margin: 1.2rem 0;
  padding: .8rem 1.2rem;
  border-left: 5px solid var(--akcent);
  background: var(--uwaga-tlo);
  border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
}
.tresc blockquote > *:last-child { margin-bottom: 0; }

/* pola do uzupełnienia przez IKM */
.do-uzupelnienia {
  background: var(--uwaga-tlo);
  border: 1.5px dashed var(--blad);
  border-radius: 5px;
  padding: .05em .4em;
  font-weight: 700;
  white-space: nowrap;
}

.strona-prawna .tresc { max-width: 68ch; }

/* ---------------------------------------------------------------------
   Stopka
--------------------------------------------------------------------- */
.stopka {
  background: var(--zielen);
  color: #FFFFFF;
  /* Bez własnego marginesu: odstęp nad stopką daje dolne dopełnienie strony.
     Wcześniej oba się sumowały i pod treścią zostawała dziura. */
  margin-top: 0;
  flex: none;
}
.stopka__wnetrze { padding-block: 1.9rem 1.3rem; text-align: center; }


/* Biel na zieleni #2E7D4E daje kontrast 5,05:1 — powyżej progu AA.
   Odnośniki celowo zostają białe: żółć marki na tej zieleni ma tylko
   3,05:1, więc jako kolor tekstu byłaby niedostępna. */
.stopka a { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .55); }
.stopka a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; text-decoration-thickness: .14em; }

/* Stopka bez linii podziału — rytm robią same odstępy. */




/* Wszystkie znaki w jednym rzędzie: IKM, badania, MKiDN, NCK.
   Pliki są białymi kontrami na przezroczystym tle — bez płytek i filtrów. */
/* Wszystko w stopce jest wyśrodkowane. Tekst o dofinansowaniu stoi obok
   logotypów i ma mieścić się w DWÓCH wierszach, żeby jego wysokość zgadzała
   się z wysokością znaków — stąd szeroki limit i mniejszy stopień pisma. */
.stopka__dol {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Logotypy i zdanie o dofinansowaniu to dwie osobne rzeczy — stąd odstęp
     większy niż zwykły, ale bez przesady. */
  gap: 1.4rem;
  margin-bottom: 1.1rem;
}
.logotypy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.logotypy__pozycja { display: flex; }
.logotypy__obraz {
  display: block;
  height: var(--wysokosc-logo, 38px);
  width: auto;
}
.stopka__dofinansowanie {
  margin: 0;
  font-size: .74rem;
  line-height: 1.5;
  max-width: 46rem;
  text-align: center;
  color: rgba(255, 255, 255, .78);
}

/* Najniższa linijka: prawa autorskie i dyskretne odnośniki do dokumentów. */
.stopka__prawa {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1.1rem;
  font-size: .72rem;
  color: rgba(255, 255, 255, .6);
}
.stopka__prawa a {
  color: rgba(255, 255, 255, .78);
  text-decoration-color: rgba(255, 255, 255, .3);
}
.stopka__prawa a:hover { color: #FFFFFF; }

.brak-js { padding-block: 3rem; }

/* ---------------------------------------------------------------------
   Układ responsywny
--------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .menu__link { font-size: .88rem; padding: .45rem .5rem; }
  .menu__uzytkownik { display: none; }
}


@media (max-width: 900px) {
  .menu-przelacznik { display: inline-flex; }

  /* Menu wysuwa się z prawej krawędzi jako panel, zamiast rozpychać nagłówek
     w dół. Nie przesuwa treści strony i nie zmienia jej wysokości. */
  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1001;
    width: min(21rem, 86vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--gora-menu, var(--naglowek-h)) + 1.2rem) 1.6rem 2rem;
    background: var(--papier);
    box-shadow: -12px 0 40px rgba(23, 61, 40, .14);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
  }
  .menu--otwarte { transform: none; visibility: visible; }

  .menu__lista { flex-direction: column; gap: .15rem; }
  .menu__link {
    padding: .85rem .9rem;
    border-radius: var(--promien-maly);
    border-bottom: 0;
    font-family: var(--font-naglowki);
    font-size: 1.15rem;
    font-weight: 600;
  }
  /* Zaznaczenie kreską z lewej — w zieleni marki, jak na szerokim ekranie. */
  .menu__link--aktywny {
    background: var(--papier-cien);
    position: relative;
  }
  .menu__link--aktywny::before {
    content: '';
    position: absolute;
    left: .2rem; top: 50%;
    translate: 0 -50%;
    width: 4px; height: 1.5rem;
    border-radius: 999px;
    background: var(--zielen);
  }
  .menu__konto {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--obrys);
    flex-direction: column;
    align-items: stretch;
  }
  .menu__konto .przycisk { justify-content: center; }
  .menu__uzytkownik { display: block; max-width: none; text-align: center; }

  /* W panelu znaki lądują pod pozycjami menu, bez pionowej kreski. */
  .logotypy--naglowek {
    border-left: 0;
    border-top: 1px solid var(--obrys);
    margin: 0;
    padding: 1.4rem 0 0;
    justify-content: flex-start;
    gap: 1.4rem;
  }
  .menu__konto { margin-top: auto; }


  .przelacznik-widoku { display: flex; }
  .mapa-strona { height: auto; }
  .mapa-strona__uklad { grid-template-columns: 1fr; }
  .panel-boczny { overflow: visible; }
  .mapa-strona__mapa { height: 65vh; min-height: 380px; }
  .mapa-strona__uklad[data-widok="mapa"] .panel-boczny { display: none; }
  .mapa-strona__uklad[data-widok="lista"] .mapa-strona__mapa { display: none; }

  .dane__wiersz { grid-template-columns: 1fr; gap: .1rem; }
  .panel-wpis__akcje { width: 100%; }


  .slajd__uklad { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
  .slajd--wstep .slajd__uklad { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }
  .slajd__figura { height: min(40vh, 320px); }
}

@media (max-width: 560px) {
  .slajd__uklad,
  .slajd--wstep .slajd__uklad { grid-template-columns: 1fr; }
  .slajd__figura { height: min(26vh, 190px); justify-self: end; }
      .formularz__grupa { padding-inline: 1rem; }
  .szuflada__panel { border-left: 0; }
  .przycisk--duzy { width: 100%; }
  .slajd__akcje .przycisk { width: 100%; }
}

/* ---------------------------------------------------------------------
   Poszanowanie prefers-reduced-motion (WCAG 2.3.3)
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .przycisk:active { transform: none; }
  /* Slider działa nadal, tylko zmiana slajdu jest natychmiastowa
     — bez przesuwania i bez przesuwania warstw pejzażu. */
  .slajder__tor, .scena__warstwa, .slajder__mgla { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Tryb wysokiego kontrastu / wymuszonych kolorów
--------------------------------------------------------------------- */
@media (forced-colors: active) {
  .przycisk, .pole__kontrolka, .krok, .kafelek__link, .formularz__grupa {
    border: 2px solid ButtonBorder;
  }
  .znaczek__kropka, }

/* ---------------------------------------------------------------------
   Druk
--------------------------------------------------------------------- */
@media print {
  .naglowek, .stopka, .pasek-demo, .komunikaty,   .przelacznik-widoku,   body { background: #fff; font-size: 11pt; }
  .mapa-kontener, .mapa-wyboru, .karta-pelna__mapka { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* =====================================================================
   OKNO Z DOKUMENTEM
   ---------------------------------------------------------------------
   Regulamin, polityka i deklaracja otwierają się w nakładce. Adresy stron
   nadal działają — okno jest wygodniejszym wejściem, nie zamiennikiem.
   ===================================================================== */
.okno {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 3vh, 2.5rem) clamp(.5rem, 3vw, 2rem);
}
.okno__tlo { position: absolute; inset: 0; background: rgba(23, 61, 40, .45); }
.okno__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Węziej niż dotąd: 64 rem dawało wiersze po ponad 120 znaków, nieczytelne
     w dokumencie prawnym. Teraz kolumna trzyma się szerokości akapitu. */
  width: min(46rem, 100%);
  max-height: 100%;
  background: var(--papier);
  border-radius: var(--promien);
  box-shadow: var(--cien-mocny);
  overflow: hidden;
}
.okno__naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--obrys);
  flex: none;
}
.okno__tytul { margin: 0; font-size: 1.15rem; }
.okno__zamknij {
  flex: none;
  width: 36px; height: 36px;
  border: 1.5px solid var(--obrys);
  border-radius: 50%;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--atrament);
}
.okno__zamknij:hover { background: var(--papier-mocny); }
.okno__tresc {
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2rem);
}
/* Dokument w oknie czyta się z bliska, więc idzie o stopień niżej niż
   na osobnej stronie. Nagłówki paragrafów tracą grube kreski — w wąskiej
   kolumnie dzieliły tekst na plasterki. */
.okno__tresc .tresc { font-size: .95rem; }
.okno__tresc .tresc h2 {
  margin-top: 1.7rem;
  padding-top: 0;
  border-top: 0;
  font-size: 1rem;
  color: var(--zielen-ciemna);
  letter-spacing: .01em;
}
.okno__tresc .tresc h2:first-of-type { margin-top: 0; }
.okno__tresc .tresc ol { padding-left: 1.2rem; }
.okno__tresc .tresc li { margin-bottom: .5rem; }
.okno__tresc .tresc .wiodacy { font-size: 1rem; }
.okno__ladowanie { color: var(--atrament-slaby); }
.okno__stopka {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: .8rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--obrys);
  background: var(--papier-cien);
  flex: none;
}