/* Uklady wspolne wszystkich zakladek: pasek, glowa podstrony, listwa liczb, formularze,
   pule i licznik, pytania, stopka, kasa. Szkielet pasm (.pas, .pas__glowa, .pas__tresc)
   siedzi w baza.css. Uklady jednej zakladki leza w css/strony/<zakladka>.css i laduja
   sie tylko na niej (glowna, katalog, wydarzenie, kontakt, organizator, konto, regulamin).
   Rodzenstwo przez grid i gap, nigdy margines na elemencie. */

/* ---------- pasek gorny ----------
   PRZEBUDOWA: pasek to jeden rzad o trzech strefach (grid: 1fr auto 1fr).
   Marka po lewej, pozycje na srodku, jedna akcja po prawej. Przedtem pozycje
   i akcja siedzialy w jednym <nav> rozciagnietym flexem, wiec linki wisialy
   tuz przy logo, a srodek paska byl pusty.
   Ponizej 720 px srodkowa strefa chowa sie pod przycisk z aria-label="Menu"
   i rozwija jako panel w drugim wierszu siatki (klik, nie hover: dotyk hovera nie ma).
   Miary: rzad 68 px (44 px cel dotykowy plus 12 px oddechu z gory i z dolu),
   odstep miedzy pozycjami 24 px, znak marki 28 px wysokosci, promien z --r.
   Boczny oddech bierze --brzeg (16 px na telefonie, 48 px na 1280 px), nie osobna
   liczbe: marka ma stac w tej samej pionowej linii co tresc strony, inaczej pasek
   wisi obok ukladu i widac, ze to dwa rozne siatki.
   Kolumny to 1fr auto 1fr, nie auto 1fr auto: przy auto 1fr auto srodkowy tor lezy
   miedzy strefami o roznej szerokosci (marka 107 px, akcja 115 px), wiec pozycje
   wypadaly 4 px obok srodka paska. Rowne tory boczne daja odchylenie 0 px. */
/* Oddech od gornej krawedzi kadru: na telefonie bez wyciecia env(safe-area-inset-top)
   wynosi 0 px, wiec marka startowala 12,2 px od samej krawedzi ekranu i na zrzucie
   logo z napisem czytalo sie jako przyciete. Podloga 8 px daje 20,2 px do znaku marki,
   a tam gdzie system zglasza wyciecie, dalej wygrywa jego wartosc. */
.pasek {
  background: var(--tlo-2);
  border-bottom: 1px solid var(--linia-mocna);
  padding-top: max(env(safe-area-inset-top), 8px);
}
/* Pasek idzie od krawedzi do krawedzi ekranu, nie do miary tresci: marka stoi przy samej
   lewej krawedzi, akcja przy samej prawej. Oddech boczny to jedna liczba po obu stronach
   (16 px na telefonie, 24 px od 768 px), wiec odleglosc marki od lewej rowna sie odleglosci
   przycisku od prawej co do piksela. Przedtem pasek trzymal miare tresci (max-width 1180 px),
   wiec na 1280 px marka zaczynala sie dopiero 98 px od krawedzi. */
.pasek__wnetrze {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: var(--s4); row-gap: 0;
  min-height: 68px; padding-block: var(--s3);
  padding-inline: 16px;
}
@media (min-width: 768px) { .pasek__wnetrze { padding-inline: 24px; } }

/* Lewa strefa. Marka: znak i nazwa serwisu, jedyne miejsce z logo (stopka juz go nie powtarza) */
/* Odstep znak i nazwa: 12 px na telefonie, 16 px od 768 px (skala odstepow, gap na
   pojemniku, zaden margines nie wisi na obrazku). Znak i napis maja wspolna linie srodka
   przez align-items: center. */
.marka {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px;
  font-family: var(--afisz); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tekst); text-decoration: none; flex: none;
}
@media (min-width: 768px) { .marka { gap: var(--s4); } }
/* Logo Biletovo: napis malymi literami w jednym pliku SVG (ikony/logo-poziome.svg, 3379 na 736; wyciecie w "b" to karb biletu). */
/* Wysokosc 30 px: male litery maja nizsza wysokosc x niz dawne wersaliki, a przy 30 px logo trzyma dawna szerokosc 138 px. */
.marka__logo { display: block; width: auto; height: 30px; flex: none; }

/* Prawa strefa: przycisk panelu i jedna akcja. Bez JS nie ma czym sterowac panelem,
   wiec przycisk pokazuje sie tylko przy .js. */
.pasek__akcje { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s3); }
.pasek__akcja { min-height: 44px; padding: 10px var(--s4); font-size: 0.875rem; white-space: nowrap; }
/* Jedyna akcja w pasku to logowanie. Nowe konto zaklada sie na stronie konta (zakladka
   Rejestracja) albo przy zakupie, wiec drugi przycisk w pasku tylko rozpraszal. */
.pasek__menu { display: none; }
.js .pasek__menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0;
  background: none; border: 1px solid var(--linia-mocna); border-radius: var(--r);
  color: var(--tekst); cursor: pointer;
}
.pasek__menu-znak {
  width: 18px; height: 2px; background: currentColor; flex: none;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.pasek--otwarty .pasek__menu { border-color: var(--akcent); color: var(--akcent); }
@media (hover: hover) { .js .pasek__menu:hover { border-color: var(--akcent); color: var(--akcent); } }

/* Srodkowa strefa: pozycje wysrodkowane w tym, co zostalo miedzy marka a akcja. */
.pasek__nawigacja { grid-column: 2; min-width: 0; }
.pasek__nawigacja ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s5);
}
.pasek__nawigacja a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 1rem; color: var(--tekst-2); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.pasek__nawigacja a[aria-current] { color: var(--akcent); font-weight: 500; border-bottom-color: var(--akcent); }
/* Hover i focus pozycji nawigacji ida w akcent (ten sam odcien co stan biezacy, tylko
   bez pogrubienia), wiec zielen znaczy "tu zaraz trafisz" na kazdej podstronie. */
@media (hover: hover) { .pasek__nawigacja a:hover { color: var(--akcent); border-bottom-color: var(--akcent); } }
.pasek__nawigacja a:focus-visible { color: var(--akcent); }

/* Do 719 px pozycje nie mieszcza sie miedzy marka a akcja: schodza do panelu
   w drugim wierszu siatki. Bez JS panel jest po prostu rozwiniety, bo przycisk
   pokazuje sie tylko przy .js. Rozwijanie rusza opacity i transform, nic wiecej. */
@media (max-width: 719px) {
  /* Pierwszy wiersz ma stale 44 px, inaczej po rozwinieciu panelu rzad z marka
     kurczyl sie z 68 px na 56 px i cala gora podskakiwala przy kliknieciu. */
  .pasek--otwarty .pasek__wnetrze { grid-template-rows: 44px auto; row-gap: var(--s3); }
  .pasek__nawigacja { grid-column: 1 / -1; grid-row: 2; }
  .pasek__nawigacja ul { display: grid; gap: 0; justify-content: stretch; }
  .pasek__nawigacja li { border-top: 1px solid var(--linia); }
  .js .pasek__nawigacja { display: none; }
  .js .pasek--otwarty .pasek__nawigacja { display: block; animation: panel-w-dol 200ms var(--ease-out) both; }
  /* Tory boczne na "auto", nie "1fr": przy 200% stopnia pisma rowne tory 1fr dawaly
     prawej strefie 163 px, a menu z przyciskiem potrzebuja 247 px, wiec pasek robil sie
     414 px szeroki na ekranie 390 px (przewijanie w bok i uciety napis). Tory auto
     kurcza sie do wlasnej tresci, a lamany napis na przycisku pozwala prawej strefie
     zejsc do 186 px. Srodkowy tor jest tu pusty (pozycje siedza w panelu), wiec
     przejmuje role odstepu miedzy marka a akcjami. */
  .pasek__wnetrze { grid-template-columns: auto minmax(var(--s4), 1fr) auto; }
  .pasek__akcja { white-space: normal; padding-inline: var(--s3); font-size: 0.8125rem; letter-spacing: 0.03em; }
  .marka__logo { height: 28px; }
}

@keyframes panel-w-dol {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pasek--otwarty .pasek__nawigacja { animation: none; }
}

/* Od 720 px trzy strefy stoja w jednym rzedzie, przycisk panelu jest niepotrzebny. */
@media (min-width: 720px) {
  .js .pasek__menu { display: none; }
}

/* Kotwica przewija strone tak, ze cel laduje pod przyklejonym paskiem: naglowek rozdzialu
   znikal za nim w calosci. Zapas 88 px to wysokosc paska (68 px) i odstep. */
@media (min-width: 1000px) { [id] { scroll-margin-top: 88px; } }

/* Od 1000 px pasek jest przyklejony do gory. */
@media (min-width: 1000px) {
  .pasek { position: sticky; top: 0; z-index: 40; }
  .pasek__wnetrze { column-gap: var(--s5); }
}

/* Strumien: tresc i stopka. Minimalna szerokosc 0, zeby dluga nazwa nie rozpychala siatki. */
.strumien { min-width: 0; }
/* Krotka strona (katalog z jednym wydarzeniem: 1277 px w oknie 1370 px) zostawiala pod stopka
   93 px golego tla. Body i strumien to kolumny na cala wysokosc okna, a main bierze nadmiar,
   wiec stopka stoi na dole okna. Dluga strona rosnie jak dotad. */
body:has(> .strumien > .stopka) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(> .strumien > .stopka) > .strumien { flex: 1 0 auto; display: flex; flex-direction: column; }
.strumien > main { flex: 1 0 auto; }

/* ---------- wskazniki: listwa liczb pod czolem (PRZEBUDOWA UKLADU) ----------
   Bylo: <dl> z trzema <div>, etykieta przed liczba w kodzie i odwrocona w CSS wierszami
   subgridu, pionowe kreski miedzy pozycjami i wspolny tor auto-fit, ktory na 390 px
   lamal trzy pozycje na dwie plus jedna (osierocona liczba w drugim rzedzie).
   Jest: lista <ul>, w kodzie najpierw WARTOSC, pod nia nazwa, wiec kolejnosc czytania
   jest ta sama dla oka i dla czytnika ekranu, bez zadnego przestawiania wierszami.
   Siatka jawna, nie auto-fit: jedna kolumna do 599 px, trzy rowne kolumny od 600 px
   (tablet 768 px i desktop 1280 px maja rzad trzech). Odstep 24 px na kazdej szerokosci.
   Zero kresek pionowych: listwe od czola oddziela jedna linia 1 px w szarym z palety.
   Liczba 40 px waga 600 w mono z tabular-nums, nazwa 14 px w szarosci opisu. */
.wskazniki {
  list-style: none;
  margin: var(--s5) 0 0; padding: var(--s5) 0 0;
  border-top: 1px solid var(--linia);
  /* Tory wchodza same i maja miare w rem, nie w procentach: na 1280 px cztery pozycje
     rozkladaja sie na cala szerokosc listwy (linia konczy sie na 1175 px, wiec ostatnia
     kolumna dochodzi do linii, a nie zostawia 235 px pustki), na telefonie sa dwa tory
     po dwie pozycje, a przy 200% stopnia pisma 8rem = 256 px i listwa wraca do jednego
     toru, zamiast ciagnac strone w bok.
     Miara toru to 8rem, nie 10rem: przy 10rem dwa tory potrzebowaly 344 px, a listwa ma
     358 px tylko wtedy, gdy pasek przewijania lezy NA tresci. Z paskiem zabierajacym
     15 px (przegladarka na biurku, telefon z klasycznym paskiem) zostawalo 343 px i
     cztery pozycje spadaly w jeden slupek na 368 px wysokosci. 8rem daje dwa tory juz
     od 280 px szerokosci listwy, wiec 320 px ekranu tez trzyma uklad 2 x 2. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s5);
}
.wskaznik { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.wskaznik__ile {
  font-family: var(--mono); font-size: 2.5rem; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--tekst); font-variant-numeric: tabular-nums;
}
/* min-width: 0 plus break-word: przy 200% pisma na 375 px samo slowo "Wolnych" ma
   wiecej niz kolumna, a element siatki z domyslnym min-width: auto nie ma sie gdzie
   zlamac i ciagnie strone w bok. */
.wskaznik__co {
  min-width: 0; font-size: 0.875rem; letter-spacing: 0.02em; line-height: 1.4;
  color: var(--tekst-3); overflow-wrap: break-word;
}

/* Stara listwa .metryki zostaje w arkuszu, bo uzywa jej wydarzenia.html (szyna z bokiem).
   Strona glowna jej juz nie wola. */
.metryki {
  margin: var(--s5) 0 0; padding: var(--s5) 0 var(--s5);
  border-top: 1px solid var(--linia);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  grid-template-rows: auto auto; gap: var(--s5);
  overflow: hidden;
}
@media (max-width: 599px) { .metryki { gap: var(--s4); } }
.metryka {
  position: relative;
  display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--s2);
  align-content: start; align-items: start; min-width: 0;
}
.metryka dt { grid-row: 2; min-width: 0; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--tekst-3); line-height: 1.4; overflow-wrap: break-word; }
.metryka dd { grid-row: 1; min-width: 0; margin: 0; align-self: start; font-family: var(--mono); font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--tekst); font-variant-numeric: tabular-nums; }
.metryka dd span { display: block; margin-top: var(--s1); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--tekst-3); }

/* ---------- glowa podstrony ----------
   Sciezka, tytul przez cala szerokosc, zdanie wprowadzajace i listwa faktow pod linia.
   Fakty zeszly z prawej kolumny na wlasna listwe: w kolumnie 4fr trzy pary
   etykieta i wartosc lamaly sie na sylaby przy 200% pisma. */
.glowa { padding-block: var(--s6); border-bottom: 2px solid var(--kreska); }
/* Listwa faktow ma wlasny dolny oddech, wiec glowa z listwa nie dokłada drugiego. Bez
   listwy (kontakt, kasa, karta nieznalezionego wydarzenia) przyciski i tytul stały
   0 do 20 px od kreski zamykajacej. */
.glowa:has(> .pasek-faktow:not([hidden])) { padding-bottom: 0; }
.sciezka ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tekst-3); }
.sciezka li + li::before { content: "/"; margin-right: var(--s2); color: var(--linia-mocna); }
.sciezka a { color: var(--tekst-3); text-decoration: none; }
@media (hover: hover) { .sciezka a:hover { color: var(--akcent); } }
.glowa h1 { font-size: clamp(2.25rem, 5.4vw, 3.5rem); max-width: 18ch; }
/* Lead stoi na 1.25rem (20 px), nie na 1.125rem (18 px): 18 px siedzialo dwa piksele
   od tekstu podstawowego i czytalo sie jak niedokladnosc, a nie jak osobny stopien skali. */
.glowa__lead { margin-top: var(--s4); max-width: 48ch; font-size: 1.25rem; color: var(--tekst-2); }
/* Pasek faktow na podstronach czyta sie tym samym wzorem, co listwa liczb w czole
   strony glownej: rowne tory zamiast zbitego flexa, kreska w SRODKU szczeliny, a nie
   ramka dookola, etykieta mono nad liczba i wspolna linia bazowa liczb dzieki subgrid.
   Flex z gap 48 px zbijal cztery fakty w lewa polowe miary i zostawial prawa pusta. */
.pasek-faktow {
  list-style: none; margin: var(--s5) 0 0; padding: var(--s5) 0 var(--s5);
  border-top: 1px solid var(--linia);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  grid-template-rows: auto auto; gap: var(--s5) var(--s6);
  overflow: hidden;
}
.pasek-faktow li {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--s2);
  align-content: start; min-width: 0;
  margin-left: calc(var(--s6) / -2); padding-left: calc(var(--s6) / 2 - 1px);
  border-left: 1px solid var(--linia-mocna);
}
.pasek-faktow span { min-width: 0; font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-3); line-height: 1.4; overflow-wrap: break-word; }
.pasek-faktow b { min-width: 0; align-self: start; font-family: var(--mono); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--tekst); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
/* Adres sali w jednym torze zawijal na cztery linie ("Hala / Widowiskowa, /
   ul. Przykladowa / 12") i podnosil caly pasek ze 103 px do 210 px, a pod czterema
   pozostalymi etykietami stala pusta polowa toru. Wartosc opisowa bierze dwa tory
   siatki, wiec ten sam adres mieści sie w dwoch liniach BEZ nowego stopnia pisma:
   liczby i tekst zostaja w tych samych 1.5 rem. Na waskim ekranie regula nie dziala,
   bo tam pasek ma jeden tor. */
@media (min-width: 640px) {
  .pasek-faktow li.fakt--szeroki { grid-column: span 2; }
}

/* ---------- kontakt: glowa jednostrumieniowa i szyna samoobslugi ----------
   Glowa kontaktu byla para kolumn (tytul po lewej, lead i trzy fakty po prawej),
   a pasmo nizej mialo formularz stojacy samotnie w miarze 1084 px. Teraz glowa idzie
   jedna kolumna z listwa faktow, a formularz dzieli pasmo z lista spraw, ktore
   zalatwia sie BEZ zgloszenia: odpowiedz stoi obok pola, nie o jedna sekcje wyzej. */
/* Glowa kontaktu byla pionowym stosem: sciezka, etykieta, tytul, lead i dopiero listwa,
   razem 362 px na pierwszym ekranie, z czego polowa to odstepy miedzy piecioma blokami.
   Tytul i lead ida teraz jednym rzedem (lead dosuniety do dolnej linii tytulu), wiec
   znika caly rzad leadu, a listwa faktow zostaje na pelnej szerokosci, taka sama jak na
   wydarzeniach i u organizatora. To NIE jest powrot do odrzuconej pary kolumn: tam po
   prawej stronie stal lead RAZEM z faktami i listwa gubila szerokosc. */
.glowa--pomoc { padding-top: var(--s4); }
.glowa--pomoc .sciezka { margin-bottom: var(--s2); }
.glowa--pomoc .glowa__wiersz { display: grid; gap: var(--s4); align-items: end; }
@media (min-width: 900px) {
  .glowa--pomoc .glowa__wiersz {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
    column-gap: var(--s6);
  }
}
.glowa--pomoc .glowa__slowo { display: grid; gap: var(--s2); min-width: 0; }
/* Dwa skroty staly bok w bok bez odstepu, ramka w ramke. */
.glowa__skroty { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0 0; }
/* Glowa konta czyta sie tym samym wzorem co glowa kontaktu: tytul po lewej, zdanie
   wprowadzajace po prawej, zamiast dwoch rzedow jeden pod drugim. */
/* .glowa nie ma dolnego paddingu, a kreska zamykajaca szla przez ogonki liter w "bilety".
   24 px oddechu odsuwa ja od linii pisma, tak samo jak w glowie dwustrumieniowej. */
.glowa--konto { padding-bottom: var(--s6); }
.glowa--konto .glowa__wiersz { display: grid; gap: var(--s4); align-items: end; }
.glowa--konto .glowa__lead { margin-top: 0; max-width: 46ch; }
@media (min-width: 900px) {
  .glowa--konto .glowa__wiersz {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
    column-gap: var(--s6);
  }
}
.glowa--pomoc .glowa__lead { margin-top: 0; max-width: 46ch; }
/* PRZEBUDOWA: trzy terminy odpowiedzi zeszly z listwy pod tytulem do prawej kolumny
   glowy. Listwa przez cala szerokosc zabierala 130 px wysokosci i powtarzala rytm
   metryk ze strony glownej; w kolumnie te same trzy liczby czytaja sie z gory na dol,
   etykieta nad wartoscia, a pierwszy ekran kontaktu skraca sie o caly rzad. */
.glowa__terminy { display: grid; gap: 0; align-content: end; min-width: 0; margin: 0; }
.glowa__termin {
  display: grid; gap: 2px; padding-block: var(--s3);
  border-top: 1px solid var(--linia);
}
.glowa__termin:first-child { border-top: 0; }
.glowa__termin dt {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tekst-3);
}
.glowa__termin dd {
  margin: 0; font-family: var(--mono); font-size: 1.25rem; line-height: 1.2;
  color: var(--tekst); font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
@media (min-width: 900px) {
  .glowa--pomoc .glowa__wiersz { align-items: start; }
  .glowa__terminy { padding-left: var(--s5); border-left: 1px solid var(--linia); }
}
/* Ponizej 640 px listwa faktow lamala sie na dwa tory po 179 px: trzeci fakt zostawal
   sam w drugim rzedzie, a obok niego swiecila pusta polowa miary. Do tego wartosci
   ("2 dni robocze") zawijaly sie na dwie linie przy etykiecie w jednej, wiec rzedy
   subgrid mialy rozna wysokosc. Na waskim ekranie fakty ida wiec jedna kolumna,
   etykieta po lewej i wartosc po prawej, rozdzielone cienka kreska: ten sam wzor
   czytania co listwa metryk. Regula siedzi pod .glowa--pomoc, bo .pasek-faktow jest
   uzyty takze na wydarzeniach i u organizatora i tam uklad ma zostac. */
/* PRZENIESIENIE Z .glowa--pomoc NA CALY .pasek-faktow: uklad wierszowy dostal na poczatku
   tylko kontakt, wiec u organizatora i na pozostalych podstronach listwa dalej lamala sie
   na dwa waskie tory. Zmierzone na 390 px: kontakt 130 px, organizator 247 px, czyli ten
   sam komponent w dwoch wysokosciach i dwoch wzorach czytania na jednej szerokosci.
   Teraz kazda listwa faktow ponizej 640 px idzie jedna kolumna: etykieta po lewej,
   wartosc po prawej, rzedy rozdzielone cienka kreska. Desktop bez zmian (od 640 px
   dalej dziala siatka auto-fit z kreska w akcencie). */
@media (max-width: 639px) {
  .pasek-faktow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 0;
    padding-block: var(--s3) var(--s4);
  }
  .pasek-faktow li {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    grid-row: auto; grid-template-rows: none;
    gap: var(--s1) var(--s4);
    margin-left: 0; padding: var(--s3) 0 0;
    border-left: 0; border-top: 1px solid var(--linia);
  }
  .pasek-faktow li:first-child { border-top: 0; padding-top: var(--s1); }
  .pasek-faktow b { align-self: baseline; font-size: 1.25rem; }
  /* Glowa kontaktu ma wlasny padding listwy (specyficznosc 0,2,0), wiec bez tej linii
     wygrywalby on z ustawieniem dla waskiego ekranu i pasek rosl z 130 na 134 px. */
  .glowa--pomoc .pasek-faktow { padding-block: var(--s3) var(--s4); }
}
/* Pasmo zgloszenia stalo na siatce 0,3 do 0,7: lista spraw w waskim torze po lewej,
   formularz w szerokim po prawej, przez co ciezar calej sekcji siedzial po prawej
   stronie osi strony. Teraz oba tory sa rowne, wiec os pasma pokrywa sie z osia kadru.
   Odstep pionowy schodzi z 96 na 64 px z obu stron: pasmo ma jeden rzad tresci, a nie
   kilka, wiec 96 px zostawialo pusty pas nad naglowkiem. Regula idzie przez klase, bo
   #zgloszenie istnieje takze u organizatora i nie ma sie tam zmienic. */
.pas--zgloszenie { padding-block: var(--s8); }
/* PRZEBUDOWA: pasmo zgloszenia niesie sam formularz, a cztery sprawy, ktore czytelnik
   zalatwia BEZ pisania do nas, stoja pod nim jako osobne pasmo z siatka kart. Wczesniej
   lista lezala w drugim torze obok formularza: na telefonie i tak spadala pod niego, a na
   szerokim ekranie ciagnela wzrok w bok w trakcie wypelniania pol. Kolejnosc w HTML
   zostaje ta sama co przedtem: najpierw formularz, potem sprawy. */
@media (max-width: 639px) {
  .pas--zgloszenie { padding-block: var(--s7); }
}
.karty-pomocy {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s4);
}
.karta-pomocy {
  display: grid; gap: var(--s2); align-content: start;
  padding: var(--s4); border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--tlo);
}
.karta-pomocy h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.karta-pomocy p { max-width: 38ch; font-size: 0.875rem; color: var(--tekst-2); }
.karta-pomocy__akcja { font-size: 0.875rem; }

/* ---------- szyna obok rozkladu ----------
   PRZEBUDOWA UKLADU: kategorie byly osobnym pasmem POD rozkladem terminow (wlasna glowa,
   wlasny naglowek h2, 64 px oddechu z gory, rzad siedmiu kafli przez cala miare 1084 px).
   Dwa pasma jedno pod drugim mowily o tym samym: co jest w sprzedazy. Teraz rozklad i
   kategorie stoja OBOK SIEBIE w jednym pasmie: tablica w szerokim strumieniu (0.66),
   kategorie w szynie po prawej (0.34), jedna pod druga jak spis peronow.
   Zysk mierzony wysokoscia strony, nie liczba linii kodu: pasmo kategorii (glowa plus
   rzad kafli) przestalo zajmowac wlasny kawalek strony, a szyna wypelnia miejsce, ktore
   przy samej tablicy zostawalo puste po prawej. */
.szyna { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.szyna__glowa {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s1) var(--s4); padding-bottom: var(--s3); border-bottom: 2px solid var(--kreska);
}
.szyna__meta { font-family: var(--mono); font-size: 0.75rem; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
/* Kafle kategorii w szynie maja reguly w css/strony/glowna.css, zaraz za .kierunki:
   tu przegrywaly z nia, bo glowna.css laduje sie pozniej przy tej samej wadze selektora. */

/* ---------- siatki ogolne ----------
   Rodzenstwo dostaje kolumny z gridu, nie z marginesow. Dwa pola to zestawienie
   dwoch blokow rownej wagi, kafle to od dwoch do czterech rownych kart. */
.dwa-pola { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 860px) { .dwa-pola { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
.kafle { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 620px) { .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .kafle--cztery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); } }
.kafel { display: grid; gap: var(--s2); align-content: start; border-top: 1px solid var(--kreska); padding-top: var(--s3); min-width: 0; }
.kafel h3 { font-size: 1rem; }
.kafel p { color: var(--tekst-2); font-size: 0.875rem; max-width: 42ch; }
.kafel__stan { justify-self: start; }

/* Uklad z panelem: tresc szeroka, panel waski. Panel stoi po LEWEJ na kasie
   (podsumowanie kwoty ma byc pierwsze przy czytaniu) i po prawej tam, gdzie jest dodatkiem. */
.dwuszereg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .dwuszereg { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); } }
@media (min-width: 900px) { .dwuszereg--odwrotny { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- zakladki dzialow pytan: przebudowa komponentu (#pytania) ----------
   Bylo: siatka czterech KAFLI (przycisk .filtr z ramka 1 px, wybrany na zielonym tle),
   czyli cztery pudelka z wlasnymi krawedziami stojace nad lista, ktora tez ma krawedzie.
   Na 390 px kafle szly dwa na dwa i zabieraly 112 px wysokosci samym sterowaniem.
   Jest: pasek zakladek bez ramek, oparty na jednej szarej linii 1 px pod calym rzedem.
   Wybrany dzial niesie trzy znaki naraz: kolor tekstu, grubsze pismo i podkreslenie
   2 px w akcencie, wiec stan widac takze bez koloru. Podkreslenie rysuje ::after, a nie
   border, zeby licznik kresek w sekcji dalej widzial same linie 1 px w szarym.
   Krotka nazwa dzialu (data-dzial) zamiast pelnego tytulu: cztery zakladki mieszcza sie
   w jednym wierszu na 390 px, zamiast lamac sie trzy plus jedna. */
.zakladki {
  display: flex; flex-wrap: wrap; gap: 0 var(--s5);
  margin: 0 0 var(--s5); padding: 0;
  border-bottom: 1px solid var(--linia);
}
.zakladka {
  position: relative; appearance: none; -webkit-appearance: none;
  margin: 0; padding: var(--s3) 0; min-height: 48px;
  background: none; border: 0; font: inherit; font-size: 1rem; color: var(--tekst-3);
  cursor: pointer; text-align: left; min-width: 0; overflow-wrap: anywhere;
  transition: color var(--fast) var(--ease-out);
}
.zakladka::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--akcent); opacity: 0;
  transition: opacity var(--fast) var(--ease-out);
}
.zakladka[aria-selected="true"] { color: var(--tekst); font-weight: 600; }
.zakladka[aria-selected="true"]::after { opacity: 1; }
@media (hover: hover) { .zakladka:hover { color: var(--tekst); } }

/* Widoczny pasek zakladek: dzialy ida jedna kolumna (widac jeden dzial naraz, wiec
   drugi tor zostawalby pusty) i nie maja juz wlasnej kreski u gory: linia paska
   zakladek domyka liste od gory, druga rownolegla linia 4 px nizej byla ramka. */
.zakladki:not([hidden]) ~ .pytania--dzialy { grid-template-columns: minmax(0, 1fr); gap: 0; }
.zakladki:not([hidden]) ~ .pytania--dzialy .pytania__tytul {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.zakladki:not([hidden]) ~ .pytania--dzialy .pytania__kategoria { border-top: 0; }
/* Przelaczenie dzialu: lista nie pojawia sie skokiem, tylko wchodzi w 200 ms, tyle samo
   co rozwiniecie odpowiedzi. Animujemy WYLACZNIE opacity i transform, wiec przegladarka
   nie przelicza ukladu i nic nie miga. Wysokosci nie animujemy w ogole: skrypt podpiera
   #pytania-lista wysokoscia najwyzszego dzialu zmierzona przy starcie, wiec kontener
   stoi w miejscu przy kazdej zmianie zakladki. */
@keyframes dzial-wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pytania__kategoria--wejscie { animation: dzial-wejscie 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .pytania__kategoria--wejscie { animation: none; } }

/* ---------- filtry ---------- */
.filtry { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filtr {
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--tlo); color: var(--tekst-2); font: inherit; font-size: 0.875rem; cursor: pointer;
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.filtr[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent); color: var(--na-akcencie); font-weight: 600; }
@media (hover: hover) {
  .filtr:hover { border-color: var(--tekst); color: var(--tekst); }
  .filtr[aria-pressed="true"]:hover { background: var(--akcent-hover); border-color: var(--akcent-hover); color: var(--na-akcencie); }
}

/* Zakladki w panelu to nawigacja, nie akcja. Wypelniona zakladka konkurowala
   o wzrok z przyciskiem "Zaloguj sie", czyli dwa razy "kliknij tutaj".
   Aktywna niesie kreske i grubosc, wiec widac ja takze bez koloru. */
.filtry[role="tablist"] { gap: var(--s5); border-bottom: 1px solid var(--linia-mocna); }
.filtry[role="tablist"] .filtr {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; padding-inline: 0; margin-bottom: -1px;
}
.filtry[role="tablist"] .filtr[aria-selected="true"] {
  background: none; color: var(--tekst); font-weight: 600; border-bottom-color: var(--akcent);
}
@media (hover: hover) {
  .filtry[role="tablist"] .filtr:hover { color: var(--tekst); border-bottom-color: var(--linia-mocna); }
  .filtry[role="tablist"] .filtr[aria-selected="true"]:hover { background: none; color: var(--tekst); border-bottom-color: var(--akcent-hover); }
}

/* Przelaczanie logowanie / rejestracja na koncie: przelacznik z suwakiem. Tor na tle
   strony, suwak (jasniejsza plytka z ramka) jedzie pod wybrana zakladke, a panel wjezdza
   z tej strony, w ktora poszla zakladka. Dwa rowne tory, zeby suwak mial stala szerokosc.
   Stan czyta sie z plytki i grubosci pisma, nie z koloru, a akcent zostaje dla przycisku. */
#konto-goscie .przelacznik-konta {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  padding: 4px; border: 1px solid var(--linia); border-radius: var(--r); background: var(--tlo);
}
#konto-goscie .przelacznik-konta::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border: 1px solid var(--linia-mocna); border-radius: var(--r-mid); background: var(--tlo-3);
  transition: transform 260ms cubic-bezier(0.2, 0, 0, 1); pointer-events: none;
}
#konto-goscie .przelacznik-konta:has(#tab-rejestracja[aria-selected="true"])::before { transform: translateX(100%); }
#konto-goscie .przelacznik-konta .filtr {
  position: relative; z-index: 1; min-height: 44px; margin: 0; padding: 8px 12px;
  border: 0; border-radius: var(--r-mid); background: none; text-align: center;
  font-family: var(--afisz); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-3);
}
#konto-goscie .przelacznik-konta .filtr[aria-selected="true"] { background: none; color: var(--tekst); font-weight: 700; }
@media (hover: hover) {
  #konto-goscie .przelacznik-konta .filtr:hover { background: none; color: var(--tekst); }
}
@keyframes wjazd-z-prawej { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes wjazd-z-lewej { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.wjazd--prawo { animation: wjazd-z-prawej 260ms cubic-bezier(0.2, 0, 0, 1) both; }
.wjazd--lewo { animation: wjazd-z-lewej 260ms cubic-bezier(0.2, 0, 0, 1) both; }

/* ---------- lista wydarzen: wiersz peronowy ----------
   Kolumna odjazdu (godzina w mono) niesie hierarchie, kadr jest dodatkiem, cena stoi
   w prawej kolumnie tabelarycznie. Rytm wiersza 96 px, czyli 4 x 24. */
.lista { display: grid; gap: 0; border-top: 2px solid var(--kreska); }
/* Tytul pasma ma juz belke 2 px, wiec blok pod nim (lista, cennik, etapy, pytania)
   nie dostaje drugiej: dwie kreski 22 do 26 px od siebie czytaly sie jak pusty wiersz
   tabeli. Belka tytulu jest gorna krawedzia bloku. */
.pas__glowa:has(+ :is(.lista, .cennik-rzad, .etapy, .pytania)) { margin-bottom: 0; }
.pas__glowa + :is(.lista, .cennik-rzad, .pytania) { border-top: 0; }
.pas__glowa + .etapy > .etap { border-top: 0; }
/* Kolumna odjazdu na telefonie ma 6.5 rem: najdluzszy dzien tygodnia
   ("poniedzialek,") mierzy 100 px, wiec przy 4.5 rem (72 px) wchodzil na tytul. */
.poz {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  grid-template-areas: "data tresc" "data dol";
  gap: var(--s2) var(--s4);
  min-height: 96px; padding: var(--s4) 0;
  border-bottom: 1px solid var(--linia);
  text-decoration: none; color: var(--tekst);
  transition: background-color var(--fast) var(--ease-out);
}
@media (min-width: 700px) {
  .poz {
    grid-template-columns: 6rem 120px minmax(0, 1fr) minmax(0, 12rem);
    grid-template-areas: "data obraz tresc dol";
    align-items: center; gap: var(--s5);
    padding: var(--s5) 0;
  }
}
/* Kadr pod zdjecie wydarzenia: proporcje stale, obraz wypelnia ramke w calosci.
   Na telefonie wypada, bo kolumna odjazdu i tytul maja pierwszenstwo. */
.poz__obraz { grid-area: obraz; display: none; aspect-ratio: 4 / 3; background: var(--tlo-3); border: 1px solid var(--linia); border-radius: var(--r-mid); overflow: hidden; }
@media (min-width: 700px) { .poz__obraz { display: block; } }
.poz__obraz img { width: 100%; height: 100%; object-fit: cover; }
/* Kolumna odjazdu: godzina duza, data pod nia mala. Tak wyglada tablica na peronie. */
.poz__data {
  grid-area: data; display: grid; gap: 2px; align-content: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tekst);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
}
.poz__data small { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-3); }
.poz__tresc { grid-area: tresc; min-width: 0; display: grid; gap: 4px; align-content: center; }
.poz__nazwa { font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (max-width: 699px) { .poz__nazwa { font-size: 1rem; } }
.poz__meta { color: var(--tekst-3); font-size: 0.875rem; overflow-wrap: anywhere; }
.poz__dol { grid-area: dol; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
@media (min-width: 700px) { .poz__dol { display: grid; justify-items: end; gap: var(--s2); align-content: center; } }
.poz__cena { min-width: 0; font-family: var(--mono); font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; }
.poz__cena small { display: block; font-family: var(--font); font-weight: 400; color: var(--tekst-3); font-size: 0.75rem; }
@media (hover: hover) {
  .poz:hover { background: var(--tlo-2); }
  .poz:hover .poz__nazwa { color: var(--akcent); }
}

.panel { display: grid; gap: var(--s4); align-content: start; border: 1px solid var(--linia-mocna); border-radius: var(--r); padding: var(--s5); background: var(--tlo-2); }
.panel--lepki { position: sticky; top: 88px; }
/* Od 1100 px pasek dalej jest przyklejony, wiec panel nie moze wjechac wyzej niz 88 px. */
@media (min-width: 1100px) { .panel--lepki { top: 88px; } }
.panel .etykieta { margin-bottom: 0; }
/* Zasady konta: lista definicji w szynie obok biletow. Przedtem te same dwa teksty
   stały kartami na pelna szerokosc pod siatka biletow, czyli dwa pudla z naglowkiem
   h3 tam, gdzie wystarcza tytul i zdanie. */
.zasady { margin: 0; display: grid; gap: var(--s2); }
.zasady dt { font-size: 1rem; font-weight: 600; }
/* 15 px wypadalo ze skali projektu (12, 14, 16, 20, 32): trzy stopnie po 1 px od siebie
   czytaja sie jak niedokladnosc, nie jak hierarchia. Opis zasady idzie 16 px. */
.zasady dt + dd { margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--linia); color: var(--tekst-2); font-size: 1rem; }
.zasady dt:last-of-type + dd { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* ---------- formularze ----------
   Blok formularza to fieldset: legenda niesie nazwe grupy, odstepy ida z gap,
   wiec pola nie potrzebuja wlasnych marginesow. */
.blok-formularza { display: grid; gap: var(--s4); margin: 0; padding: 0 0 var(--s5); border: 0; }
.blok-formularza > legend { padding: 0; margin-bottom: var(--s3); float: left; width: 100%; }
.blok-formularza .pole { margin-bottom: 0; }
.rzad-akcji { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* Kasa: kod rabatowy z przyciskiem w jednym rzedzie i pola faktury pod zaznaczeniem.
   Przycisk ma wysokosc pola (48 px), a przy duzym pismie schodzi pod pole zamiast je sciskac. */
.pole__napis { display: block; font-size: 0.875rem; font-weight: 500; color: var(--tekst); margin-bottom: 6px; }
.pole-z-akcja { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pole-z-akcja input { flex: 1 1 8rem; min-width: 0; text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.04em; }
.pole-z-akcja input::placeholder { text-transform: none; font-family: var(--font); letter-spacing: 0; }
.pole-z-akcja .przycisk { flex: none; min-height: 48px; }
.pole__stan--ok { color: var(--tekst); }
.pole__stan--ok::before { content: "✓ "; font-weight: 700; }
.pole-faktury { display: grid; gap: var(--s2); }
.pole-faktury .podpowiedz { margin: 0; }
.pola-faktury { display: grid; gap: var(--s4); }
.pola-faktury[hidden] { display: none; }
.pola-faktury .podpowiedz { margin: 0; }
/* Rachunek w kasie i zamowienie w symulatorze: opis do lewej, kwota do prawej, cyfry
   rownej szerokosci. Razem oddziela cienka linia, bez pudla. */
.rachunek-tabela, .zamowienie { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rachunek-tabela th, .zamowienie th { padding: var(--s2) var(--s3) var(--s2) 0; text-align: left; font-weight: 400; color: var(--tekst-2); vertical-align: baseline; }
.rachunek-tabela td, .zamowienie td { padding: var(--s2) 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: baseline; }
.rachunek-tabela .rachunek__razem th, .rachunek-tabela .rachunek__razem td { padding-top: var(--s3); border-top: 1px solid var(--linia-mocna); font-size: 1rem; font-weight: 600; color: var(--tekst); }
.rachunek-tabela .rachunek__vat th, .rachunek-tabela .rachunek__vat td { padding-top: 0; color: var(--tekst-2); }
/* Przycisk pod karta formularza stal 1 px od jej ramki i wygladal jak jej doklejona stopka. */
#form-organizator, #form-kontakt { display: grid; gap: var(--s5); }

/* ---------- formularz kontaktu ----------
   Panel z terminami zniknal, wiec pasmo nie jest juz para strumieni: zostaje sam
   formularz, wysrodkowany w mierze. Bez tego formularz staje w prawej polowie,
   a lewa 800 px zostaje pusta (pasmo mierzylo 1602 x 1331 px przy 1612 px ekranu). */
/* PRZEBUDOWA: formularz nie dzieli juz pasma z lista spraw, wiec karta idzie przez cala
   miare pasma, a pola stoja trzema torami (temat, adres, numer). Miara 44rem zostawiala
   prawa polowe kadru pusta, a pola i tak mialy po 300 px. */
.formularz-kontakt { width: 100%; }
/* Pole wiadomosci rozciaga sie w dol, ale nie bez konca: 320 px to szesc wierszy
   z zapasem, dalej rosnie pasek przewijania w polu, nie cala strona. */
.formularz-kontakt textarea { min-height: 176px; max-height: 320px; }

/* Wlasne rozwijanie tematu. Natywny <select> zostaje w kodzie (id, wartosc, temat
   z adresu, wysylka), skrypt tylko zaklada na niego przycisk z lista. Bez JS
   dziala natywny select, wiec pole nie przestaje byc polem. */
.wybor { position: relative; }
.wybor__przycisk {
  width: 100%; min-height: 48px; padding: 11px 48px 11px 13px;
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s3);
  background: var(--tlo); border: 1px solid var(--linia-mocna); border-radius: var(--r-mid);
  color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease-out);
}
.wybor__przycisk::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; background: var(--akcent);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transition: transform var(--fast) var(--ease-out);
}
.wybor__przycisk[aria-expanded="true"] { border-color: var(--akcent); }
.wybor__przycisk[aria-expanded="true"]::after { transform: rotate(180deg); }
@media (hover: hover) { .wybor__przycisk:hover { border-color: var(--akcent); } }
.wybor__lista {
  position: absolute; z-index: 5; inset-inline: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--tlo); border: 1px solid var(--akcent); border-radius: var(--r-mid);
  max-height: 260px; overflow-y: auto;
  animation: wybor-rozwin 140ms var(--ease-out);
}
.wybor__lista[hidden] { display: none; }
@keyframes wybor-rozwin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wybor__lista { animation: none; } .wybor__przycisk::after { transition: none; } }
.wybor__opcja {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 44px; padding: 10px var(--s3); border-radius: var(--r-mid);
  color: var(--tekst-2); cursor: pointer;
}
.wybor__opcja[aria-selected="true"] { background: var(--akcent-tlo); color: var(--akcent-ciemny); font-weight: 500; }
.wybor__opcja[aria-selected="true"]::after { content: "\2713"; font-family: var(--mono); }
.wybor__opcja.jest-pod-kursorem { background: var(--tlo-2); color: var(--tekst); }
.wybor__opcja[aria-selected="true"].jest-pod-kursorem { background: var(--akcent-tlo); color: var(--akcent-ciemny); }
.dane-lista { margin: 0; border-top: 1px solid var(--kreska); }

/* ---------- karta wydarzenia ---------- */
.powrot { padding-top: var(--s5); }
.naglowek-wydarzenia h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
/* Blok tresci wewnatrz strumienia: naglowek 20 px i wlasny oddech nad soba */
.blok { display: grid; gap: var(--s3); padding-top: var(--s5); }
.blok h2 { font-size: 1.25rem; letter-spacing: -0.02em; }
.tresc--lead { font-size: 1.25rem; max-width: 46ch; }
.pusty-stan--ciasny { padding: var(--s5); }
.pusty-stan--ciasny p { margin-bottom: 0; }
.pula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); min-height: 76px; padding: var(--s4) 0; border-bottom: 1px solid var(--linia); }
.pula:last-of-type { border-bottom: 0; }
.pula__opis { flex: 1 1 160px; min-width: 0; }
.pula__nazwa { font-weight: 500; }
.pula__stan { font-family: var(--mono); font-size: 0.875rem; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.pula__cena { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.licznik { display: flex; align-items: center; gap: 2px; }
.licznik button {
  width: 44px; height: 44px; border: 1px solid var(--linia-mocna); border-radius: var(--r-mid);
  background: var(--tlo); color: var(--tekst); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
/* Znaki − i + z kroju siedzialy ponizej srodka cyfry i mialy rozna dlugosc (Arial przycisku),
   wiec kreski rysujemy same: 12 x 2 px dokladnie na srodku. Tekst zostaje dla czytnikow
   razem z aria-label, tylko jest niewidoczny. */
.licznik button { position: relative; font-size: 0; }
.licznik button::before,
.licznik button:last-child::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 2px; border-radius: 1px; background: currentColor;
}
.licznik button:last-child::after { width: 2px; height: 12px; }
@media (forced-colors: active) { .licznik button::before, .licznik button:last-child::after { background: ButtonText; } }
.licznik button[disabled] { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) { .licznik button:not([disabled]):hover { border-color: var(--akcent); color: var(--akcent); } }
.licznik output { min-width: 40px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- bilet ---------- */
.siatka { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.bilet { border: 1px solid var(--linia-mocna); border-radius: var(--r); background: var(--tlo-2); display: flex; flex-direction: column; overflow: hidden; }
.bilet__glowa { padding: var(--s5); border-bottom: 1px dashed var(--linia-mocna); flex: 1; }
.bilet__glowa h3 { font-size: 1rem; margin: var(--s2) 0 6px; }
.bilet__kod { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); background: var(--tlo); }
.bilet__kod img { width: 88px; height: 88px; flex: none; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-mid); }
.bilet__numer { font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* ---------- pytania ----------
   Dwie kolumny od 900 px: cztery pytania w jednej kolumnie zostawialy prawa polowe
   kadru pusta, a rozwiniete odpowiedzi i tak mieszcza sie w 48ch. */
.pytania { border-top: 1px solid var(--linia); }
.pytania--dwie { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pytania--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); } }
.pytania details { border-bottom: 1px solid var(--linia); }
.pytania summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s4);
  align-items: center; padding: var(--s4) 0; font-size: 1rem; font-weight: 500; min-height: 44px;
  letter-spacing: -0.01em;
}
/* Tytul pytania stoi w jednej linii dzieki skroceniu tekstu w HTML, a NIE dzieki
   nowrap: przy 200% pisma "Wydarzenie odwolane, co dalej?" ma 452 px przy kolumnie
   343 px i twarde nowrap wypychalo cala strone w bok (WCAG 1.4.4). Balance lamie
   dopiero wtedy, gdy tytul naprawde sie nie miesci. */
.pytania summary { text-wrap: balance; min-width: 0; }
.pytania summary > span { min-width: 0; }
.pytania summary::-webkit-details-marker { display: none; }
/* Znacznik: osiem zielonych plusow w kolumnie to osiem zielonych plam, wiec zwiniete
   pytanie ma znacznik szary, a zielony jest wylacznie znak pytania ROZWINIETEGO.
   Stan czyta sie takze bez koloru, bo znak zmienia sie z plusa na minus. */
.pytania summary::after { content: "+"; font-family: var(--mono); font-size: 1.25rem; color: var(--tekst-3); flex: none; width: 24px; text-align: center; transition: transform var(--fast) var(--ease-out); }
.pytania details[open] summary::after { content: "\2212"; transform: rotate(180deg); color: var(--akcent); }
.pytania__tresc { overflow: hidden; }
.pytania__tresc p { padding: 0 0 var(--s5); max-width: 48ch; color: var(--tekst-2); }
.pytania details[open] .pytania__tresc { animation: rozwin 200ms var(--ease-out); }
@keyframes rozwin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pytania details[open] .pytania__tresc { animation: none; } }

/* ---------- sklepy ---------- */
.sklepy { display: flex; flex-wrap: wrap; gap: var(--s3); }
.sklep {
  display: inline-flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s5);
  border: 1px solid var(--linia-mocna); border-radius: var(--r); background: var(--tlo);
  text-decoration: none; color: var(--tekst);
  transition: border-color var(--fast) var(--ease-out);
}
@media (hover: hover) { .sklep:hover { border-color: var(--akcent); color: var(--tekst); } }
.sklep svg { width: 22px; height: 22px; flex: none; color: var(--akcent); }
.sklep span { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-3); }
.sklep strong { display: block; font-size: 0.875rem; font-weight: 500; }

/* Notka: domyslnie neutralna, bo czerwone tlo na zdaniu "zaloguj sie, zeby dokonczyc zakup"
   czyta sie jak blad. Blad ma osobny wariant i znak, wiec rozni sie tez bez koloru. */
.uwaga { max-width: 52ch; border: 1px solid var(--linia-mocna); border-radius: var(--r-mid); padding: var(--s3) var(--s5); background: var(--tlo-2); color: var(--tekst); font-size: 0.875rem; }
.uwaga--blad { border-color: var(--uwaga); background: var(--uwaga-tlo); }
.komunikat-kasy { margin-top: var(--s6); }
.uwaga--blad::before { content: "! "; font-weight: 700; color: var(--uwaga); }

/* ---------- stopka ----------
   PRZEBUDOWA UKLADU (nie kolorow): stopka byla stosem trzech wierszy (marka sama w
   pierwszym, mapa serwisu w drugim, wiersz prawny w trzecim). Na 1280 px pierwszy wiersz
   trzymal 107 px marki i 977 px pustego papieru obok, czyli martwa polac przez cala miare.
   Teraz stopka to JEDNA siatka czterech kolumn: kolumna marki (znak, nazwa, dane
   rejestrowe) i trzy dzialy odnosnikow obok niej, a pod nia listwa linkow prawnych.
   Znikly dwie owijki (.stopka__gora, .stopka__dol) i osobny blok marki.
   Dzial jest <nav aria-label>, nie <section> z <h2>: trzy naglowki drugiego stopnia w
   stopce wchodzily do konspektu strony obok naglowkow tresci ("Serwis" tuz po "Zanim
   kupisz"), a nazwa dzialu jest etykieta nawigacji, nie tytulem rozdzialu.
   Miary: kolumna od 15ch, kolumna marki 1.2fr od 900 px, rynna 48 px, wiersz 32 px. */
.stopka { padding: var(--s8) 0 var(--s6); border-top: 1px solid var(--linia); color: var(--tekst-3); font-size: 0.875rem; row-gap: var(--s6); }
/* Cztery kolumny obok siebie (marka plus trzy mapy) zostawialy na 1280 px kolumny po
   240 px z dwuwyrazowymi linkami i duza dziura pod blokiem marki. Teraz marka jest
   wlasnym wierszem na pelna szerokosc, a mapa serwisu idzie TRZEMA ROWNYMI kolumnami
   od 900 px, dwiema od 560 px i jedna nizej. Odstepy: 48 px w poziomie, 32 px w pionie. */
.stopka__uklad { display: grid; gap: var(--s6) var(--s7); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
@media (min-width: 560px) { .stopka__uklad { column-gap: var(--s7); } }
/* Od 900 px marka bierze reszte miejsca, a dwa dzialy linkow sa tak szerokie jak ich
   tresc i stoja przy prawej krawedzi. Przy trzech rownych kolumnach (329 px) ostatni
   dzial konczyl sie na x 1060, a miara na 1210, wiec po prawej zostawalo 150 px pustki
   nad listwa "Zglos reklamacje, Zasady zakupu" dosunieta do prawej. */
@media (min-width: 900px) { .stopka__uklad { grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: var(--s9); } }
/* Kolumna marki: znak z nazwa, pod nim dane rejestrowe. 12 px miedzy nimi, bo to jeden
   blok jednej firmy, a nie dwie osobne rzeczy. */
.stopka__kto { grid-column: 1 / -1; display: grid; gap: var(--s3); align-content: start; min-width: 0; }
/* Od 900 px marka bierze pierwsza z trzech kolumn: przy pelnym wierszu dla marki pod nia
   staly tylko dwa dzialy i trzecia kolumna (329 px) zostawala pusta po prawej. */
@media (min-width: 900px) { .stopka__kto { grid-column: auto; } }

/* PRZEBUDOWA STOPKI STRONY GLOWNEJ (zlecenie @4: "za duzo pustego miejsca, trzy kolumny,
   policzalne odstepy"). Bylo: jedna siatka, w ktorej blok marki zajmowal caly pierwszy
   wiersz (grid-column: 1 / -1), wiec na 1280 px nad kolumnami stalo 107 px znaku i
   977 px pustego papieru, a pod kolumnami byl jeszcze osobny wiersz linkow prawnych.
   Jest: DWA bloki o innej kolejnosci niz wczesniej. Najpierw same trzy kolumny map
   (nawigacja, organizator, pomoc i dokumenty), a marka zeszla na DOL, do listwy
   zamykajacej, razem z danymi rejestrowymi i linkami prawnymi: to jest stopka stopki,
   nie naglowek.
   Liczby do zmierzenia: 64 px od gory stopki do pierwszego tytulu kolumny (padding),
   48 px miedzy kolumnami na 1280 px, dwie kolumny od 768 px, jedna na 390 px z 32 px
   miedzy blokami, 24 px nad listwa zamykajaca i 1 px linii nad nia. */
/* Jedna kolumna na telefonie robila z nawigacji stopki 566 px, czyli trzy pelne ekrany
   samych odnosnikow (zmierzone na 390 px). Reguly wymuszajacej jedna kolumne juz nie ma:
   tory wchodza same, gdy sie miesza. Miara toru jest w rem, nie w procentach, wiec przy
   200% stopnia pisma 10rem to juz 320 px i stopka sama wraca do jednej kolumny zamiast
   przycinac "Wersja w przegladarce" o 16 px. */
.stopka__kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 560px) { .stopka__kolumny { column-gap: var(--s7); row-gap: var(--s6); } }
@media (min-width: 900px) { .stopka__kolumny { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s7); } }
/* Listwa zamykajaca: marka po lewej, linki prawne po prawej, dane rejestrowe pod nimi
   (pelna szerokosc, bo to zdanie, nie pozycja rzedu). Rodzenstwo idzie flexem z gap,
   zaden element nie ma wlasnego marginesu. */
.stopka__stopa {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  padding-top: var(--s5); border-top: 1px solid var(--linia);
}
.stopka__stopa .marka { margin-right: auto; min-width: 0; }
.stopka__stopa .stopka__linki { min-width: 0; }
.stopka__stopa .stopka__prawne { flex: 1 1 100%; order: 3; }
.stopka__stopa .stopka__linki { border-top: 0; padding-top: 0; margin-left: 0; }
.stopka__dzial { display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.stopka__dzial ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
/* Odnosnik stopki jest BLOKIEM, nie inline-flexem: przy 200% stopnia pisma inline-flex
   rozciagal sie do dlugosci napisu i "Wersja w przegladarce" ciagnelo cala strone 5 px
   w bok. Blok bierze szerokosc toru, a min-width: 0 z lamaniem pozwala mu oddac nadmiar. */
.stopka a { text-decoration: none; color: var(--tekst-2); display: flex; align-items: center; min-height: 32px; min-width: 0; overflow-wrap: anywhere; }
/* Na telefonie cel dotykowy ma 44 px, nie 32 px: w mapie serwisu linki stoja jeden pod drugim
   z odstepem 4 px, wiec przy 32 px sasiednie pozycje lezaly 36 px od siebie i palec trafial
   w sasiada. Na myszy 32 px zostaje, bo kursor celuje dokladnie. */
@media (max-width: 719px) { .stopka__dzial a { min-height: 44px; } }
@media (hover: hover) { .stopka a:hover { color: var(--akcent); } }
.stopka__tytul { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3); margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* 46ch przy 200% pisma to 736 px, czyli dwa razy wiecej niz tor: miara kolumny tekstu
   nie moze byc wieksza od miejsca, ktore naprawde jest. */
.stopka__prawne { margin: 0; max-width: min(46ch, 100%); min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
/* Listwa linkow prawnych zamyka stopke: linia 1 px nad nia zastapila owijke .stopka__dol. */
.stopka__linki { list-style: none; margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--linia); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
@media (min-width: 700px) { .stopka__linki { margin-left: auto; } }
.stopka__linki a { min-height: 44px; }

/* ---------- zestawienie kwot (pasmo kosztow u organizatora) ----------
   Nazwa po lewej, kwota po prawej, wszystkie kwoty w jednej kolumnie z tabular-nums
   i dwoma miejscami po przecinku, waluta zapisana tak samo w kazdym wierszu.
   Sume znaczy cienka linia nad nia i grubszy kroj, nie tlo ani cien: dwie karty
   z ramka i wypelnieniem robily z pasma dwa pudelka postawione obok siebie.
   Pasmo zeszlo ze strony glownej na organizator.html (#prowizja) i zastapilo tam
   blok .cennik, ktory mowil dokladnie to samo drugi raz. Reguly .cennik* wypadly. */
/* Zestawienie kosztow: nazwa po lewej, kwota po prawej, w kazdym z dwoch pol.
   Cennik i przyklad stoja obok siebie (strumien-a i strumien-b pasma .pas--para),
   nie jeden pod drugim: siedem wierszy w jednej kolumnie ciagnelo pasmo do 1227 px
   i zostawialo pol kadru puste. Pola nie maja tla ani ramki, dzieli je rynna.
   Odstepy w polu daje gap siatki, nie margines na elemencie. */
/* ---------- pasmo kosztow u organizatora (#prowizja) ----------
   PRZEBUDOWA UKLADU: pasmo bylo para kolumn (rachunek w szerokim strumieniu, cennik
   w szynie po prawej). Cennik ma trzy krotkie pozycje, rachunek cztery wysokie wiersze,
   wiec pod cennikiem zostawalo ponad 250 px pustego kadru na 1280 px. Teraz cennik jest
   rzedem trzech pozycji pod naglowkiem pasma (ten sam rytm co tory etapow nizej),
   a rachunek stoi pod nim: pozycje po lewej, wynik (wyplata) jako osobny blok po prawej,
   wiec obie kolumny konczy ta sama linia. */
.cennik-rzad { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--kreska); }
@media (min-width: 760px) { .cennik-rzad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cennik-rzad__poz {
  min-width: 0; display: grid; gap: var(--s1); align-content: start;
  padding-block: var(--s4); border-bottom: 1px solid var(--linia);
}
@media (min-width: 760px) {
  /* Kreska pionowa miedzy pozycjami potrzebuje odstepu w srodku toru, wiec padding. */
  .cennik-rzad__poz { padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 0; }
  .cennik-rzad__poz + .cennik-rzad__poz { padding-left: var(--s5); border-left: 1px solid var(--linia); }
  .cennik-rzad__poz:last-child { padding-right: 0; }
}
.cennik-rzad__poz dt { margin: 0; font-size: 1rem; font-weight: 500; }
.cennik-rzad__poz dt span { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 400; color: var(--tekst-3); }
.cennik-rzad__poz dd { margin: 0; font-family: var(--mono); font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--tekst); }
.cennik-rzad__poz dd span { display: block; margin-top: 2px; font-family: var(--font); font-size: 0.75rem; color: var(--tekst-3); }
/* Zero w cenniku jest argumentem sprzedazowym, wiec obie zerowe kwoty ida akcentem.
   Procent i minimum zostaja czarne: to koszt kupujacego, nie zysk organizatora.
   --akcent-ciemny, bo na papierze daje 5,4:1, a --akcent 4,9:1. */
.zestaw__zero dd { color: var(--akcent-ciemny); }

/* Rachunek: policzony przypadek. Pozycje czytaja sie jak wyciag, a wynik stoi obok w bloku
   na tonie akcentu, bo to jedyna liczba, ktora organizator dostaje na konto. */
/* Rachunek startuje wlasnym odstepem od cennika: pasmo .pas nie ma row-gap, wiec bez tego
   tytul przykladu stal 12 px pod kreskami cennika. Od 760 px kreska 1 px zamyka cennik,
   ponizej zamyka go kreska ostatniej pozycji i druga bylaby podwojna. */
.rachunek { display: grid; gap: var(--s6); align-items: stretch; padding-top: var(--s6); }
@media (min-width: 760px) { .rachunek { padding-top: var(--s7); border-top: 1px solid var(--linia); } }
@media (min-width: 900px) { .rachunek { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s7); } }
.rachunek__pozycje { min-width: 0; display: grid; gap: var(--s3); align-content: start; }
.rachunek__wynik {
  min-width: 0; display: grid; gap: var(--s2); align-content: center;
  padding: var(--s5); border: 1px solid var(--akcent-krawedz);
  border-radius: var(--r); background: var(--akcent-tlo);
}
/* Kwota wyplaty ma spacje nierozdzielajace, wiec nie lamie sie i przy 200% stopnia pisma
   rozpychala blok o 133 px poza ekran 390 px. Stopien idzie wiec przez min(): na szerokim
   ekranie zostaje 2rem, na waskim schodzi do 7,5% szerokosci okna, ktora z pismem nie rosnie. */
.rachunek__kwota { margin: 0; font-family: var(--mono); font-size: min(2rem, 7.5vw); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--akcent-ciemny); }
.kwota-duza { margin: 0; font-family: var(--mono); font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tekst); }
.rachunek__nota { margin: 0; max-width: 34ch; font-size: 0.875rem; color: var(--tekst-2); text-wrap: pretty; }
.zestaw__tytul { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3); }
.zestaw--szeroki { gap: 0; }
.zestaw--szeroki .zestaw__poz { min-height: 64px; padding-block: var(--s3); border-top: 1px solid var(--linia); }
.zestaw--szeroki .zestaw__poz:last-child { border-bottom: 1px solid var(--linia); }
.zestaw--szeroki .zestaw__poz dd { font-size: 1.25rem; }
.zestaw--szeroki .zestaw__poz + .zestaw__suma { margin-top: 0; padding-top: var(--s3); border-top-color: var(--linia-mocna); }
.zestaw { margin: 0; display: grid; gap: var(--s4); }
.zestaw__poz { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); row-gap: var(--s1); align-items: baseline; }
.zestaw__poz dt { margin: 0; min-width: 0; font-size: 1rem; font-weight: 500; }
.zestaw__poz dt span { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 400; color: var(--tekst-3); }
.zestaw__poz dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tekst); }
.zestaw__poz dd span { display: block; margin-top: 2px; font-family: var(--font); font-size: 0.75rem; white-space: normal; color: var(--tekst-3); }
.zestaw__poz:not(.zestaw__suma) + .zestaw__suma { margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--linia-mocna); }
.zestaw__suma dt { font-weight: 600; }
.zestaw__suma dd { font-weight: 600; }
/* Kwota zostaje w wierszu nazwy takze na 390 px: kolumna auto bierze tyle, ile potrzeba
   (najszersza kwota to 186,90 zl), a nazwa zawija sie w kolumnie 1fr. */

/* ---------- rzedy pomocnicze ---------- */
.rzad { display: flex; flex-wrap: wrap; gap: var(--s3); }
.stos { display: grid; gap: var(--s5); align-content: start; }

/* ---------- konto: brama wejsciowa i pasek korzysci ----------
   Pasmo konta bylo para kolumn: formularz w ramce po lewej, lista korzysci w takiej
   samej ramce po prawej. Dwa jednakowe pudelka obok siebie nie mowily, ktore z nich
   jest zadaniem strony. Teraz formularz stoi sam w kolumnie 34 rem (to szerokosc,
   przy ktorej pole e-mail nie jest dluzsze niz wpisywany w nie adres), a korzysci
   leza pod nim listwa na pelnej miarze, tym samym wzorem co pasek faktow w glowie. */
.brama { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
/* Opis konta stoi w glowie biletu NAD formularzem: czytelnik wie, po co zaklada konto,
   zanim zacznie wpisywac haslo. */
#konto-goscie .pas__opis { max-width: 52ch; text-wrap: pretty; }
/* Cztery fakty o koncie leza listwa POD brama, przez cala miare: tym samym wzorem co
   pasek faktow w glowie, kreska nad kazda pozycja zamiast ramki wokol calosci. */
.korzysci--listwa {
  border-top: 0; gap: var(--s4) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.korzysci--listwa .korzysc {
  padding: var(--s3) 0 0; border-bottom: 0; border-top: 1px solid var(--linia-mocna); gap: 2px;
}
/* Stopnie pisma zostaja te ze skali strony (12 i 20 px): posrednie 11 i 17 px czytaly sie
   jako niedokladnosc, a nie jako hierarchia. */
.korzysci--listwa .korzysc dd { font-family: var(--mono); font-size: 1.25rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* Odnosnik w zgodzie jest w srodku zdania i mial 18 px wysokosci celu dotykowego.
   Padding powieksza cel do 34 px, ujemny margines zdejmuje wplyw na rytm linii. */
#konto-goscie .pole--zgoda a { display: inline-block; padding-block: 8px; margin-block: -8px; }

/* Karta zalogowanego konta: kto jest zalogowany, stan konta i akcje w jednym pudelku.
   Wczesniej te same trzy rzeczy lezaly luzem w glowie pasma i "bilety na koncie" bylo
   zdaniem w metryce, a nie liczba z etykieta. */
/* Zielen na karcie konta: to jedyne pudelko na stronie, ktore mowi "to jest TWOJE",
   wiec dostaje ton akcentu zamiast szarego --tlo-2. Ton bierze sie z tej samej rodziny
   co logo (odcien 145), tylko przy jasnosci 94%, wiec tekst --tekst (22%) ma na nim
   zmierzone 14,5:1, a granica 84% jasnosci rozni sie od papieru na tyle, ze karta
   odcina sie od tla takze bez koloru (widac krawedz). */
.karta-konta {
  display: grid; gap: var(--s4); align-content: start;
  padding: var(--s5); border: 1px solid var(--akcent-krawedz); border-radius: var(--r);
  background: var(--akcent-tlo);
}
.karta-konta h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; overflow-wrap: break-word; }
/* Liczba biletow to jedyna wartosc na karcie, ktora zmienia sie w czasie, wiec ona
   niesie akcent, a nie cala listwa: dwie zielone liczby obok siebie znosza sie nawzajem. */
#ko-bilety-stan { color: var(--akcent-ciemny); }
/* Kreski listwy na zielonym tle: --linia-mocna (78% jasnosci, chroma 0.010) gubila sie
   na tle 94%, wiec listwa w karcie dostaje kreske z tej samej rodziny co ramka karty. */
.karta-konta .korzysci--listwa .korzysc { border-top-color: var(--akcent-krawedz); }
/* Przy 200% stopnia pisma adres e-mail (mono, jedno dlugie slowo bez spacji) rozpychal
   karte o 59 px poza ekran 390 px: dziecko siatki ma domyslnie min-width auto, wiec
   najdluzsze slowo wyznacza szerokosc calego pudla. Zero plus lamanie w dowolnym
   miejscu trzyma adres w karcie zamiast przycinac go krawedzia. */
.karta-konta > * { min-width: 0; }
.karta-konta .etykieta { overflow-wrap: anywhere; }
.korzysci--listwa .korzysc dt, .korzysci--listwa .korzysc dd { overflow-wrap: anywhere; }
.karta-konta .etykieta { margin-bottom: calc(var(--s4) * -1 + var(--s2)); }

.korzysci { margin: 0; display: grid; border-top: 1px solid var(--linia); }
/* Szyna ma 300 px: przy ukladzie nazwa po lewej, wartosc po prawej pierwszy wiersz
   ("Limit na jedno zamowienie", "6 szt. z puli") zawijal sie, a trzy nastepne nie,
   wiec lista czytala sie jak zle policzona. Kazdy wiersz stoi wiec w dwoch liniach. */
.korzysc {
  display: grid; gap: 2px; min-width: 0;
  padding: var(--s3) 0; border-bottom: 1px solid var(--linia);
}
.korzysc dt { min-width: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-3); line-height: 1.4; }
.korzysc dd { margin: 0; min-width: 0; font-size: 1rem; color: var(--tekst); overflow-wrap: break-word; }
/* Oba pasma konta stoja jedno pod drugim w jednej kolumnie miary, wiec rytm w pionie
   daje row-gap pasma, a nie margines na dziecku. Pasmo gosca przestalo byc para
   strumieni, wiec stracilo row-gap z .pas--bok-prawy: brama dotykala listwy faktow. */
#konto-zalogowany, #konto-goscie { row-gap: var(--s6); align-content: start; }

/* ---------- glowa dwustrumieniowa: tytul po lewej, lead i fakty po prawej ----------
   Klasy przyszly z nowego ukladu kasy, kontaktu i konta, a arkusz ich nie znal:
   fakty leżały jedna pod druga, a opisy ciagnely sie na 138 znakow w linii. */
.glowa__slowo { display: grid; gap: var(--s3); align-content: start; }
.glowa__obok { display: grid; gap: var(--s5); align-content: start; }
.glowa--para .glowa__lead { margin-top: 0; }
/* .glowa nie ma dolnego paddingu, wiec bez tego kreska zamykajaca szla przez fakty.
   Glowa dwustrumieniowa miala 348 px wysokosci przy 1612 px, z czego 105 px zjadaly
   trzy fakty lamiace sie 2 + 1 w kolumnie 415 px (dwa u gory, jeden sierota u dolu).
   Fakty ida teraz w jeden rzad rownych torow z kreska w szczelinie, tak jak listwa
   liczb w czole i pasek faktow na podstronach, a oddech schodzi z 32 na 24 px. */
.glowa--para { padding-bottom: var(--s6); }
/* Fakty pasma: etykieta i wartosc, nigdy zdanie. Rzad zawija sie na waskim ekranie. */
.fakty { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin: 0; padding: 0; }
.fakt { display: grid; gap: 2px; min-width: 0; flex: 1 1 14ch; }
.fakt dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-3); line-height: 1.4; }
.fakt dd { margin: 0; font-size: 1rem; color: var(--tekst); }

/* Sprawy: pytanie i odpowiedz w dwoch kolumnach, cienka linia zamiast kart. */
.sprawy { display: grid; gap: 0 var(--s7); margin: 0; border-top: 1px solid var(--linia); }
@media (min-width: 760px) { .sprawy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sprawy--pion { grid-template-columns: minmax(0, 1fr); }
.sprawa { display: grid; gap: 4px; padding: var(--s4) 0; border-bottom: 1px solid var(--linia); min-width: 0; }
.sprawa dt { font-weight: 500; }
.sprawa dd { margin: 0; color: var(--tekst-2); max-width: 46ch; }

/* Rozdzialy regulaminu w szerokim strumieniu: kazdy ma wlasna kreske u gory. */
.rozdzialy { display: grid; min-width: 0; }

/* Akcje pod formularzem: kreska oddziela je od pol, zamiast marginesu na przycisku. */
.rzad-akcji--dol { padding-top: var(--s5); border-top: 1px solid var(--linia); align-items: center; }

/* Pola formularza po dwa w rzedzie od 700 px. Ponizej jedno pod drugim. */
.pola-para, .pola-rzad { display: grid; gap: var(--s4); min-width: 0; }
@media (min-width: 700px) {
  .pola-para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pola-rzad > .pole { grid-column: span 1; }
  .pola-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pola-rzad > legend { grid-column: 1 / -1; }
  /* Nazwa wydarzenia jest najdluzsza z trzech i zostawala sama w drugim rzedzie
     (dwa pola u gory, jedno sierota u dolu). Bierze caly rzad, a e-mail i liczba
     miejsc staja pod nia para, wiec blok konczy sie rownym dolem. */
  .blok-formularza.pola-rzad > .pole:first-of-type { grid-column: 1 / -1; }
  /* Zgloszenie organizatora: trzy tory zamiast dwoch. Pole na liczbe miejsc mialo
     509 px szerokosci na wpis dlugosci najwyzej szesciu cyfr, co czytalo sie jak
     pomylka, a e-mail i liczba staly w dwoch rownych polowkach mimo roznej dlugosci
     tresci. Teraz szerokosc pola mowi, ile sie w nim pisze: e-mail bierze dwa tory,
     liczba jeden. Regula celuje w jeden formularz, wiec karta w kasie zostaje bez zmian. */
  #form-organizator > .pola-rzad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #form-organizator > .pola-rzad > .pole:nth-of-type(2) { grid-column: span 2; }
  #form-organizator > .pola-rzad > .pole:nth-of-type(3) { grid-column: span 1; }
}
/* Formularz kontaktu: temat, adres i numer zamowienia w jednym rzedzie od 900 px.
   Ponizej zostaja dwa tory (700 do 899 px) i jeden na telefonie, z bazowej reguly. */
@media (min-width: 900px) {
  #form-kontakt .pola-rzad--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Blok podstawowych danych czyta sie jako jedna karta, a nie luzne pola na tle
   strony: ramka 1 px, wlasne tlo i wciecie 24 px. Legenda dostaje kreske 2 px,
   ta sama, ktora oddziela dzialy pytan, wiec formularz nalezy do tego samego domu. */
.blok-formularza--karta {
  padding: var(--s5); border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--tlo-2); row-gap: var(--s5);
}
.blok-formularza--karta > legend {
  margin: 0 0 var(--s4); padding: 0 0 var(--s3);
  border-bottom: 2px solid var(--kreska);
}

/* ---------- tor kroku zamowienia ----------
   "Krok 2 z 3" bylo samym napisem w listwie faktow: numer bez pokazanej reszty drogi.
   Tor pokazuje wszystkie trzy przystanki naraz, biezacy niesie grubsza kreske, mocniejszy
   kroj i slowo "teraz", wiec stan czyta sie bez koloru. */
/* PRZEBUDOWA UKLADU KASY: tor krokow stoi wlasnym paskiem na pelna miare pod naglowkiem.
   Siatke trzyma lista w srodku, bo sam <nav> niesie miare strony (baza.css). */
/* TOR, TRZECIA WERSJA (2026-10-23): jeden rzad, numer OBOK nazwy, a miedzy krokami kreska,
   ktora wypelnia wolne miejsce. Poprzednie wersje stawialy nazwe pod kolkiem i user
   tego nie chcial ("liczba pod liczba"). Ptaszek zrobionego kroku to maska SVG, nie znak
   z kroju: znak U+2713 wypadal z kroju zastepczego i wygladal na zepsuty. Slowa "teraz"
   i "zrobione" zostaja dla czytnika ekranu, na ekranie stan niesie kolko (pelne albo
   z ptaszkiem) i pogrubiona nazwa, wiec stan widac tez bez koloru. */
.tor-kroku { --znak: 32px; padding-block: var(--s7) var(--s2); }
@media (min-width: 900px) { .tor-kroku ~ .pas, .tor-kroku ~ * > .pas:first-child { padding-top: var(--s8); } }
.tor-kroku__rzad { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-width: 0; }
.tor-kroku__krok { display: flex; align-items: center; gap: var(--s3); flex: none; min-width: 0; color: var(--tekst-3); }
.tor-kroku__krok:not(:last-child) { flex: 1 1 0; }
.tor-kroku__krok:not(:last-child)::after {
  content: ""; flex: 1 1 auto; min-width: var(--s5); height: 2px; margin-inline: var(--s2) var(--s4);
  background: var(--linia-mocna);
}
.tor-kroku__krok.jest-zrobione::after { background: var(--akcent); }
.tor-kroku__krok b {
  display: grid; place-items: center; flex: none; width: var(--znak); height: var(--znak);
  border: 2px solid var(--linia-mocna); border-radius: 50%;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 600; line-height: 1; color: var(--tekst-3);
  font-variant-numeric: tabular-nums;
}
.tor-kroku__krok > span:not(.tor-kroku__stan) { min-width: 0; font-size: 1rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.tor-kroku .jest-teraz { color: var(--tekst); }
.tor-kroku .jest-teraz b { border-color: var(--akcent); background: var(--akcent); color: var(--tlo); }
.tor-kroku .jest-teraz > span:not(.tor-kroku__stan) { font-weight: 700; }
.tor-kroku .jest-zrobione { color: var(--tekst-2); }
/* Zrobiony krok: pelne kolo akcentu z ciemnym ptaszkiem, jak biezacy krok z cyfra. Obwodka 2 px
   stala na pol piksela (x 96,5) i rozmywala sie na dwie blade linie, a ptaszek 14 px z krotkim
   lewym ramieniem siedzial wyzej i w prawo. Teraz 16 px, ramiona wywazone wokol srodka 8/8. */
/* Ukryta cyfra zostaje w siatce kola jako drugi rzad i spychala ptaszek o 3 px w gore,
   wiec ptaszek stoi bezwzglednie na srodku kola, niezaleznie od cyfry. */
.tor-kroku .jest-zrobione b { position: relative; border-color: var(--akcent); background: var(--akcent); color: transparent; font-size: 0; }
.tor-kroku .jest-zrobione b::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: var(--tlo);
  -webkit-mask: var(--ptaszek) center / contain no-repeat; mask: var(--ptaszek) center / contain no-repeat;
}
.tor-kroku {
  --ptaszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.3L6.5 11.4L12.6 4.9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tor-kroku__stan {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Na waskim ekranie trzy nazwy w jednym rzedzie sie nie mieszcza: zostaje nazwa biezacego
   kroku, pozostale kroki to same kolka (nazwy dalej czyta czytnik). */
@media (max-width: 40rem) {
  .tor-kroku { --znak: 28px; padding-top: var(--s6); }
  .tor-kroku__krok:not(.jest-teraz) > span:not(.tor-kroku__stan) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .tor-kroku__krok > span:not(.tor-kroku__stan) { white-space: normal; }
  /* Szerokosc wedlug tresci: nazwa biezacego kroku bierze swoje, kreski dziela reszte. */
  .tor-kroku__krok:not(:last-child) { flex: 1 1 auto; }
  .tor-kroku__krok.jest-teraz { flex-shrink: 1; }
  .tor-kroku__krok:not(:last-child)::after { margin-inline: var(--s2); min-width: var(--s4); }
}

/* Etapy formularza kasy: lista bez wciecia przegladarki (40 px wcinalo pola wzgledem
   przycisku Zaplac i listwy z kwota). Numer etapu stoi w etykiecie, przed nazwa. */
.etapy-formularza { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: etap; }
.etap-formularza { counter-increment: etap; min-width: 0; }
.etap-formularza > .blok-formularza > legend::before {
  content: counter(etap) "  "; color: var(--akcent); white-space: pre;
}

/* ---------- metoda platnosci ----------
   Dwa kafle: BLIK i przelew. Przy przelewie rozwija sie siatka bankow (17 szybkich przelewow
   aktywnych w Przelewy24), a wybrany bank idzie do operatora, wiec kupujacy trafia prosto do
   logowania w swoim banku. W srodku zwykle radio: strzalki i czytnik ekranu dzialaja same.
   Wybrany kafel ma obrys akcentu i pelna kropke radia, wiec stan czyta sie tez bez koloru. */
.metody, .banki { display: grid; gap: var(--s2); min-width: 0; margin: 0; padding: 0; border: 0; }
.metody > legend, .banki > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s2); font-size: 0.875rem; font-weight: 500; color: var(--tekst); }
.metody__rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s3); }
.metoda {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3);
  min-height: 72px; padding: var(--s3) var(--s4); cursor: pointer;
  border: 1px solid var(--linia-mocna); border-radius: var(--r); background: var(--tlo);
}
.metoda input, .bank input {
  appearance: none; width: 20px; height: 20px; margin: 0; flex: none;
  border: 2px solid var(--kreska); border-radius: 50%; background: var(--tlo); cursor: pointer;
}
.metoda input { grid-row: 1 / span 2; }
.metoda__nazwa { grid-column: 2; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--tekst); }
.metoda__opis { grid-column: 2; font-size: 0.875rem; line-height: 1.4; color: var(--tekst-2); }
.metoda__znak { grid-column: 3; grid-row: 1 / span 2; width: 44px; height: auto; }
.metoda input:checked { border-color: var(--akcent); background: var(--akcent); box-shadow: inset 0 0 0 4px var(--tlo); }
.metoda input:focus-visible, .bank input:focus-visible { outline: none; }
.metoda:has(input:focus-visible), .bank:has(input:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 2px; }
.metoda:has(input:checked), .bank:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }

/* Pola zgody (faktura, regulamin): natywny checkbox na ciemnym tle wychodzil szarym
   kwadratem 3 px ponizej srodka napisu. Teraz to ten sam rysunek co radio w kaflach
   (2 px obrys kreski, zaznaczone = pelny akcent z ptaszkiem z maski toru krokow),
   a srodek pola stoi na srodku pierwszej linii napisu: (linia 0.875rem x 1.6 - 20 px pola) / 2,
   liczone od rem, wiec zgadza sie tez przy 200% pisma. */
.pole--zgoda { align-items: flex-start; cursor: pointer; }
.pole--zgoda > span { font-size: 0.875rem; line-height: 1.6; }
.pole--zgoda input[type="checkbox"] {
  appearance: none; display: grid; place-items: center;
  width: 20px; height: 20px; min-height: 20px; margin: max(0px, calc((0.875rem * 1.6 - 20px) / 2)) 0 0; padding: 0;
  border: 2px solid var(--kreska); border-radius: 4px; background: var(--tlo); cursor: pointer;
}
.pole--zgoda input[type="checkbox"]::before {
  content: ""; width: 12px; height: 12px; background: var(--tlo); transform: scale(0);
  -webkit-mask: var(--ptaszek-pola) center / contain no-repeat; mask: var(--ptaszek-pola) center / contain no-repeat;
}
.pole--zgoda input[type="checkbox"]:checked { border-color: var(--akcent); background: var(--akcent); }
.pole--zgoda input[type="checkbox"]:checked::before { transform: none; }
.pole--zgoda input[type="checkbox"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.pole--zgoda input[type="checkbox"][aria-invalid="true"] { border-color: var(--uwaga); }
.pole--zgoda {
  --ptaszek-pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5L13.5 4.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (hover: hover) { .pole--zgoda:hover input[type="checkbox"]:not(:checked) { border-color: var(--tekst-2); } }

/* Siatka bankow widoczna tylko przy przelewie. Logo bankow sa kolorowe na jasne tlo, wiec
   stoja na jasnej plakietce, inaczej granatowe PKO i Pekao znikaja na ciemnej stronie. */
.blok-formularza:not(:has(#k-metoda-przelew:checked)) .banki { display: none; }
/* 6rem daje 6 kafli w kolumnie formularza (652 px), czyli 17 bankow w 3 rzedach bez sieroty. */
.banki__siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6rem), 1fr)); gap: var(--s2); }
.bank {
  position: relative; display: grid; grid-template-rows: 40px auto; gap: var(--s2);
  align-content: start; min-height: 84px; padding: var(--s2); cursor: pointer;
  border: 1px solid var(--linia-mocna); border-radius: var(--r); background: var(--tlo);
}
/* Radio banku jest niewidoczne (klik i tak trafia w etykiete), bo w kaflu 102 px kolko
   zabieralo miejsce nazwie. Wybor niesie obrys, tlo, pogrubiona nazwa i ptaszek przed nia. */
.bank input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; border-radius: var(--r); }
.bank__znak { display: grid; place-items: center; height: 40px; padding: 6px 8px; border-radius: calc(var(--r) / 2); background: oklch(97% 0.004 var(--h)); }
.bank__znak img { width: 100%; max-width: 88px; height: 26px; object-fit: contain; }
.bank__nazwa { display: flex; gap: 4px; align-items: baseline; font-size: 0.8125rem; line-height: 1.3; color: var(--tekst-2); text-wrap: balance; }
.bank:has(input:checked) .bank__nazwa::before {
  content: ""; flex: none; width: 10px; height: 10px; background: var(--akcent);
  -webkit-mask: var(--ptaszek) center / contain no-repeat; mask: var(--ptaszek) center / contain no-repeat;
}
.bank:has(input:checked) .bank__nazwa { color: var(--tekst); font-weight: 600; }
.banki .blad-pola { margin-top: 0; }
.banki { --ptaszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5L13.5 4.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (hover: hover) {
  .metoda:hover, .bank:hover { border-color: var(--kreska); }
  .metoda:has(input:checked):hover, .bank:has(input:checked):hover { border-color: var(--akcent); }
}
/* Pola kasy ida blokami jeden pod drugim, wiec formularz potrzebuje wlasnego rytmu. */
#form-kasa { display: grid; gap: var(--s5); align-content: start; min-width: 0; }

/* Plakietka ze stanem puli stoi w rzedzie z cena, wiec nie moze sie rozciagac. */

/* Czas trwania kroku: podpis pod opisem, mono jak reszta liczb. */
.krok__czas { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-3); }

/* Glowa tablicy odjazdow: etykieta po lewej, licznik po prawej. */
.tablica__glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.tablica__glowa .etykieta { margin-bottom: 0; }

/* Tytul sekcji zakupu stoi o stopien wyzej niz reszta glow: 32 px zamiast 28 px, ktore
   daje regula telefonu w baza.css. Selektor z identyfikatorem wygrywa niezaleznie od
   kolejnosci arkuszy, wiec dziala tez pod @media (max-width: 599px). */
#zakup .pas__glowa h2 { font-size: 2rem; }

/* Gorny oddech sekcji zakupu na waskim ekranie: wracamy do rytmu .pas, czyli 48 px
   ze skali odstepow (--s7). Od 900 px .pas trzyma swoje 96 px z gory. */
@media (max-width: 899px) {
  #zakup { padding-top: var(--s7); }
}

/* Logo w stopce: znak marki dotykal naglowka "SERWIS" w mapie serwisu (0 px przerwy).
   Po przebudowie oddech niesie siatka .stopka__uklad: 32 px w pionie (gdy kolumny
   skladaja sie jedna pod druga) i 48 px w poziomie na szerokim ekranie, na KAZDEJ
   szerokosci, bez zapytania medialnego. */

/* Sekcja kategorii: 64 px oddechu z gory i 48 px z dolu zamiast 96/48 z .pas--ciasny.
   Rzad kafli ma teraz jedna linie, wiec 96 px nad nim zostawialo martwa polac kadru.
   Poprzednia sekcja konczy sie 48 px, wiec miedzy trescia stoi 112 px, powyzej progu 96. */
/* Kategorie nie maja juz wlasnego pasma: stoja w szynie obok rozkladu (#liczby),
   wiec regula oddechu dla #kategorie zniknela razem z pasmem. */


/* ---------- #pytania: kazde pytanie to bilet ----------
   Wzor: bilet z rozkladu na tej samej stronie. Odcinek po lewej niesie numer pytania
   w dziale (01 do 08, z licznika CSS, wiec HTML sie nie zmienia), perforacja 2 px
   w kreskach i dwa wyciecia w kolorze tla oddzielaja go od tresci pytania. Odpowiedz
   wchodzi pod pytanie w tej samej kolumnie, a odcinek i perforacja rosna razem z biletem.
   Stan otwarcia czyta sie bez koloru: znak zmienia sie z plusa na minus, a numer
   i kwadrat znaku przechodza w akcent. Od 900 px dzialy stoja w pionie obok biletow,
   jak spis kas przy wejsciu, zamiast paska nad lista o szerokosci 1006 px. */
#pytania .pytania { border-top: 0; }
#pytania .pytania__kategoria { counter-reset: pyt; gap: var(--s3); border-top: 0; }
#pytania .pytania details {
  --pien: 2.75rem; --szczelina: var(--s4);
  counter-increment: pyt; position: relative;
  border: 0; border-radius: var(--r); background: var(--tlo-2);
  transition: background-color var(--fast) var(--ease-out);
}
@media (min-width: 600px) { #pytania .pytania details { --pien: 3.5rem; --szczelina: var(--s5); } }
#pytania .pytania summary {
  display: grid; grid-template-columns: var(--pien) minmax(0, 1fr) 32px;
  column-gap: var(--szczelina); align-items: center;
  min-height: 72px; padding: var(--s3) var(--s4);
  font-weight: 600; border-radius: var(--r);
}
#pytania .pytania summary::before {
  content: counter(pyt, decimal-leading-zero);
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tekst-3);
  transition: color var(--fast) var(--ease-out);
}
@media (min-width: 600px) { #pytania .pytania summary::before { font-size: 2rem; } }
#pytania .pytania summary::after {
  content: ""; width: 32px; height: 32px; box-sizing: border-box;
  border: 1px solid var(--linia-mocna); border-radius: var(--r-mid);
  transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
#pytania .pytania details[open] summary::before { color: var(--akcent); }
#pytania .pytania details[open] summary::after { content: ""; transform: none; border-color: var(--akcent); background: var(--akcent-tlo); }
/* Plus i minus to dwie kreski 10 x 2 px na srodku kwadratu, a nie znak z pisma: Oxanium
   stawial "+" 2 px, a minus 1,5 px nad srodkiem, bo znak siedzi w linii pisma, a nie
   w pudelku. Kreski sa pseudoelementami tekstu pytania, liczonymi od prawej krawedzi
   podsumowania (padding 16 px + polowa kwadratu 16 px). Przy otwarciu pionowa kreska
   sklada sie do zera i z plusa zostaje minus. */
#pytania .pytania summary { position: relative; }
#pytania .pytania summary > span::before,
#pytania .pytania summary > span::after {
  content: ""; position: absolute; top: 50%; pointer-events: none;
  background: var(--tekst-3);
  transition: transform var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
#pytania .pytania summary > span::before { right: calc(var(--s4) + 11px); width: 10px; height: 2px; margin-top: -1px; }
#pytania .pytania summary > span::after { right: calc(var(--s4) + 15px); width: 2px; height: 10px; margin-top: -5px; }
#pytania .pytania details[open] summary > span::before { background: var(--akcent); }
#pytania .pytania details[open] summary > span::after { background: var(--akcent); transform: scaleY(0); }
#pytania .pytania summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
/* Perforacja przez cala wysokosc biletu, takze z otwarta odpowiedzia. */
#pytania .pytania details::before {
  content: ""; position: absolute; top: var(--s3); bottom: var(--s3);
  left: calc(var(--s4) + var(--pien) + var(--szczelina) / 2 - 1px);
  border-left: 2px dashed var(--linia-mocna); pointer-events: none;
}
/* Wyciecia: polkola w kolorze tla na gornej i dolnej krawedzi, na osi perforacji.
   Ten sam promien 8 px i ta sama przerwa 12 px co w rozkladzie. */
#pytania .pytania details::after {
  content: ""; position: absolute; top: -8px; bottom: -8px; width: 16px;
  left: calc(var(--s4) + var(--pien) + var(--szczelina) / 2 - 8px);
  background:
    radial-gradient(circle at 50% 8px, var(--tlo) 0 7.5px, transparent 8px) top / 16px 16px no-repeat,
    radial-gradient(circle at 50% 8px, var(--tlo) 0 7.5px, transparent 8px) bottom / 16px 16px no-repeat;
  pointer-events: none;
}
/* Odpowiedz stoi w kolumnie pytania, nie pod odcinkiem. */
#pytania .pytania__tresc { padding: 0 var(--s4) 0 calc(var(--s4) + var(--pien) + var(--szczelina)); }
#pytania .pytania__tresc p { padding: 0 0 var(--s4); max-width: 60ch; }
@media (hover: hover) {
  #pytania .pytania details:hover { background: var(--tlo-3); }
  #pytania .pytania details:hover summary::after { border-color: var(--kreska); }
}

/* Dzialy od 900 px: pionowa lista obok biletow. Pasmo dostaje wlasna siatke z liniami
   o tych samych nazwach co .pas, wiec naglowek dalej idzie przez cala miare.
   Bez JS pasek zakladek jest ukryty i lista zajmuje cala miare jak wczesniej. */
@media (min-width: 900px) {
  #pytania {
    grid-template-columns:
      [pelne-start] minmax(var(--brzeg), 1fr)
      [miara-start] minmax(0, 13rem)
      [rynna] var(--s7)
      [srodek] minmax(0, calc(var(--miara) - 13rem - var(--s7)))
      [miara-end] minmax(var(--brzeg), 1fr) [pelne-end];
  }
  #pytania .zakladki:not([hidden]) {
    grid-column: miara-start / rynna; grid-row: 2; align-self: start;
    flex-direction: column; gap: var(--s1); margin: 0; border-bottom: 0;
  }
  #pytania .zakladki:not([hidden]) ~ .pytania--dzialy { grid-column: srodek / miara-end; grid-row: 2; }
  #pytania .zakladka {
    display: flex; align-items: center; padding: var(--s3) var(--s4);
    border-radius: var(--r); transition: color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
  }
  #pytania .zakladka::after {
    content: "\2192"; left: auto; right: var(--s4); top: 50%; bottom: auto; height: auto;
    transform: translateY(-50%); background: none; color: var(--akcent);
  }
  #pytania .zakladka[aria-selected="true"] { background: var(--tlo-2); }
}
@media (min-width: 900px) and (hover: hover) {
  #pytania .zakladka:hover { background: var(--tlo-2); }
}
/* Przy 200% pisma kolumna odpowiedzi obok odcinka ma ok. 218 px, a "nieobowiazkowy"
   ma 230 px i lamalo sie w srodku. Warunek w em lapie tylko duze pismo (przy 16 px
   dzial ma 22em), wtedy odpowiedz schodzi pod odcinek na cala szerokosc biletu. */
#pytania .pytania__kategoria { container: pyt / inline-size; }
@container pyt (max-width: 17em) {
  #pytania .pytania__tresc { padding-left: var(--s4); }
  #pytania .pytania__tresc p { padding-top: var(--s3); border-top: 1px solid var(--linia); position: relative; background: var(--tlo-2); }
}


/* Kasa po oplaceniu: pasmo nie ma row-gap, wiec opis, karty biletow i przyciski
   stykaly sie ramkami. 24 px miedzy nimi, jak w siatce biletow. */
#kasa-gotowe { row-gap: var(--s5); }
#kasa-gotowe .pas__glowa { margin-bottom: 0; }