/* Aplikacja na telefon. Na telefonie zajmuje caly ekran razem z bezpiecznymi marginesami
   systemu, od 520 px stoi posrodku jako kolumna strony, pod paskiem strony.
   Na desktopie nie ma juz sceny z opisem makiety (naglowek, spis ekranow, trzy kroki,
   instalacja): to byla strona pokazowa prototypu, a klient ma dostac sama aplikacje. */
html, body { height: 100%; }
body { background: var(--tlo); }
.scena { min-height: 100dvh; display: grid; }
/* Dziecko siatki ma domyslnie min-height: auto, wiec lista wydarzen (1316 px)
   rozpychala ramke telefonu poza wiersz 1fr i przyciski schodzily pod krawedz ekranu. */
.scena > * { min-width: 0; min-height: 0; }
.ramka { width: 100%; }
.apka {
  position: relative; display: flex; flex-direction: column;
  height: 100dvh; min-height: 100dvh;
  background: var(--tlo); overflow: hidden;
}
/* Nad apka stoi pasek serwisu, a apka miala wlasne 100dvh, wiec strona przewijala sie
   o wysokosc paska, a lista w apce osobno: dwa przewijania w jednym ekranie. Body jest
   kolumna na wysokosc okna, apka bierze reszte pod paskiem, a rozwiniete menu zabiera
   jej miejsce zamiast wydluzac strone. Blok stoi za regula .apka, bo przy tej samej
   specyficznosci wygrywa pozniejsza. */
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body > .pasek { flex: none; }
.scena { flex: 1 1 auto; min-height: 0; }
.ramka { height: 100%; min-height: 0; }
.apka { height: 100%; min-height: 0; }
/* Od 768 px apka stoi jak zwykla podstrona serwisu: kolumna na tle strony,
   bez obudowy telefonu. Ramka z obwodka, szare tlo wokol i drugie logo pod paskiem
   strony wygladaly jak makieta prototypu, a nie jak strona, na ktora wchodzi klient.
   Szerokosc kolumny trzyma wiersz listy w rozmiarze karty, a nie paska przez caly ekran.
   Ponizej 768 px nie ma miejsca na boczne zakladki, wiec apka jest calym ekranem jak na telefonie. */
@media (min-width: 768px) {
  .scena { display: flex; justify-content: center; padding: 0 16px; }
  .ramka { width: 100%; max-width: 640px; height: 100%; display: grid; }
  .apka { border: 0; border-radius: 0; }
}
/* Na telefonie apka jest calym ekranem, a w zainstalowanej aplikacji (Sklep Play, ikona
   na ekranie) zawsze. Pasek strony wtedy znika: z aplikacji nie ma skoku na strone www,
   a jedyna nawigacja to zakladki na dole. Blok stoi po regulach ramki, zeby je nadpisac. */
@media (max-width: 767.98px), (display-mode: standalone) {
  body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: var(--tlo); }
  body > .pasek, .pomin { display: none; }
  .scena { display: block; flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 0; }
  .ramka { position: static; width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .apka { height: 100%; min-height: 0; border: 0; border-radius: 0; }
}

.apka__glowa {
  position: relative; display: grid; grid-template-columns: minmax(76px, 1fr) minmax(0, auto) minmax(76px, 1fr); flex: none; align-items: center; gap: 12px; min-height: 60px;
  padding: calc(8px + env(safe-area-inset-top)) 18px 10px;
  border-bottom: 1px solid var(--linia);
}
/* Tytul ekranu stoi na srodku, jak w pasku aplikacji na telefon: boczne kolumny sa rowne
   (przycisk Wstecz po lewej, pusta po prawej), wiec srodek siatki to srodek ekranu.
   Napisu Biletovo w prawej kolumnie juz nie ma: powtarzal logo z ekranu logowania
   i ikone aplikacji, a na glebszych ekranach i tak znikal. */
.apka__lewa { display: contents; }
.apka__glowa h1 { grid-column: 2; text-align: center; }
.apka__wstecz { grid-column: 1; justify-self: start; }
.apka__glowa h1 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.03em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apka__wstecz {
  width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
  border: 1px solid var(--linia-mocna); border-radius: var(--r); background: none; color: var(--tekst);
  cursor: pointer; flex: none; margin-left: -6px;
}
.apka.jest-glebiej .apka__wstecz { display: inline-flex; }

/* min-height: 0 jest tu obowiazkowe: dziecko flexa w kolumnie ma domyslnie
   min-height: auto, wiec lista wydarzen rozpychala .apka na wysokosc calej tresci
   i pasek zakladek wyjezdzal poza ekran telefonu.
   Pasek zakladek stoi nad ta ramka, wiec pod nia nie ma zadnego celu dotykowego:
   wiersz listy przyciety krawedzia przewijania nie ma juz na czym lezec
   (pomiar 390 px: bylo 81% pokrycia wiersza na zakladce, jest 0). */
.apka__tresc {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.apka__tresc::-webkit-scrollbar { width: 0; height: 0; }
/* Filtry kategorii sa przyklejone do gory ramy: lista jedzie pod nimi, a kategoria
   zostaje widoczna. Ujemny margines wyrownuje je do krawedzi przewijanej tresci, a top
   rowny ujemnemu paddingowi .apka__tresc: przy top: 0 pasek stawal 16 px pod glowa
   i w tej szczelinie przewijala sie lista. */
.ekran__glowa { position: sticky; top: -16px; z-index: 2; margin: -16px -18px 0; padding: 16px 18px 6px; background: var(--tlo); border-bottom: 1px solid var(--linia); }
.ekran__glowa .chipy { margin-bottom: 0; padding-bottom: 2px; }
.ekran { display: none; }
.ekran.jest-aktywny { display: block; animation: wejscie 220ms var(--ease-out); }
@keyframes wejscie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Szeroki ekran: lista wydarzen i wyniki szukania ida w dwie kolumny do 1200 px. Przy
   1644 px kolumna 720 px zostawiala po 342 px pustego pola z kazdej strony. Od 1440 px
   karta ma co najmniej 546 px, wezej nazwa zostawalaby z niecalymi 200 px.
   Lista jest kontenerem kart, wiec przy 1200 px wlaczalby sie uklad 48em z kolumna na
   zdjecie, ktorego aplikacja nie rysuje: tu wraca uklad data, nazwa, odcinek z cena. */
@media (min-width: 1440px) and (not (display-mode: standalone)) {
  .apka:not(.jest-zamknieta) .apka__tresc > :is(#ekran-lista, #ekran-szukaj) { max-width: 1200px; }
  #apka .lista-biletow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #apka .lista-biletow > .poz {
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) minmax(0, 11rem);
    grid-template-areas: "data tresc dol";
  }
  #apka .lista-biletow > .poz .poz__tresc { padding-left: var(--s3); }
  #apka .lista-biletow > .poz .poz__nazwa { font-size: 1.125rem; }
  #apka .lista-biletow > :not(.poz) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ekran.jest-aktywny { animation: none; } }

/* Zakladki stoja na dole ekranu, jak w kazdej aplikacji na telefon: kciuk siega do nich
   bez przekladania telefonu. Pasek ma zaokraglone gorne rogi i sam trzyma dolny margines
   systemu (pasek gestow), wiec lista nad nim konczy sie rowno z jego krawedzia. */
.apka__zakladki {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  flex: none;
  container-type: inline-size;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia); border-radius: 16px 16px 0 0; background: var(--tlo-2);
}
/* Przy powiekszonym pismie cztery podpisy nie mieszcza sie w rzedzie, wiec zostaja same ikony,
   a nazwa zakladki dalej czyta sie w czytniku ekranu. */
@container (max-width: 22em) {
  .apka .zakladka span { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .apka .zakladka svg { width: 26px; height: 26px; }
}
/* Piata zakladka (Sprzedaz, tylko u wlasciciela) zweza kazda do okolo 70 px na telefonie,
   a podpis WYDARZENIA potrzebuje 80, wiec przy pieciu zakladkach podpisy znikaja wczesniej. */
@container (max-width: 30em) {
  .apka__zakladki:has(> #a-zakladka-sprzedaz:not([hidden])) .zakladka span { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .apka__zakladki:has(> #a-zakladka-sprzedaz:not([hidden])) .zakladka svg { width: 26px; height: 26px; }
}
/* Regula .zakladka ze strona.css (zakladki dzialow na podstronach) lapie tez te przyciski,
   wiec wszystko ponizej jest zawezone do .apka i kasuje jej kreske ::after. */
.apka .zakladka {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--tekst-3);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; overflow-wrap: normal;
  cursor: pointer; transition: color var(--fast) var(--ease-out);
}
.apka .zakladka::after { content: none; }
/* Ikona siedzi w pastylce: przy biezacej zakladce pastylka dostaje tlo, wiec miejsce
   czyta sie po ksztalcie, nie tylko po kolorze (w deuteranopii akcent i szarosc sie zlewaja). */
.apka .zakladka svg {
  width: 22px; height: 22px; box-sizing: content-box; padding: 4px 18px; border-radius: 999px;
  transition: background-color var(--fast) var(--ease-out);
}
.apka .zakladka[aria-selected="true"] { color: var(--akcent); font-weight: 600; }
/* Biezaca zakladka na telefonie to maly bilet, jak kupon w bocznej kolumnie komputera:
   pomaranczowy prostokat 58 x 30 px z polokraglymi wycieciami 4 px po bokach i perforacja
   z kropek 8 px od prawej krawedzi (odcinek). Ikona na nim jest ciemna (--na-akcencie),
   bo jasna kreska na pomaranczu nie przechodzi 3:1. Wczesniej byla to owalna pastylka
   z przygaszonym akcentem. */
.apka .zakladka[aria-selected="true"] svg {
  border-radius: var(--r-mid); color: var(--na-akcencie);
  background:
    radial-gradient(circle 1px, color-mix(in oklch, var(--na-akcencie) 55%, transparent) 90%, transparent) right 7px top 1px / 2px 4px repeat-y,
    var(--akcent);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
@media (hover: hover) { .apka .zakladka:hover { color: var(--tekst); } .apka .zakladka[aria-selected="true"]:hover { color: var(--akcent); } }
.apka .zakladka:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
/* Z JS bilet nie siedzi na ikonie, tylko jest jednym elementem pod paskiem i przejezdza
   z ikony na ikone (js/aplikacja.js, ustawBilecik). Rozmiar i miejsce bierze z ikony
   biezacej zakladki, wiec przy 26 px ikonach (duze pismo) dalej ja obejmuje. Ikona robi sie
   ciemna dopiero, gdy bilet do niej dojezdza, a stara jasnieje od razu, gdy z niej zjezdza. */
.apka__bilecik { display: none; }
.apka__zakladki.ma-bilecik { position: relative; }
.apka__zakladki.ma-bilecik .apka__bilecik {
  display: block; position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: var(--bilecik-s, 58px); height: var(--bilecik-w, 30px);
  transform: translate(var(--bilecik-x, 0), var(--bilecik-y, 0));
  border-radius: var(--r-mid);
  background:
    radial-gradient(circle 1px, color-mix(in oklch, var(--na-akcencie) 55%, transparent) 90%, transparent) right 7px top 1px / 2px 4px repeat-y,
    var(--akcent);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 4px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 4px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.apka__zakladki.ma-bilecik .zakladka { position: relative; z-index: 1; }
.apka__zakladki.ma-bilecik .zakladka svg { transition: color 140ms var(--ease-out); }
.apka__zakladki.ma-bilecik .zakladka[aria-selected="true"] svg {
  background: none; -webkit-mask: none; mask: none;
  transition: color 160ms var(--ease-out) 150ms;
}
@media (prefers-reduced-motion: reduce) {
  .apka__zakladki.ma-bilecik .zakladka[aria-selected="true"] svg { transition-delay: 0ms; }
}

/* Lista w aplikacji */
.apka .etykieta { margin: 24px 0 8px; }
.apka .etykieta:first-child { margin-top: 0; }
/* Pozycja listy to bilet z katalogu strony (css/strony/katalog.css, :is(#katalog, #apka) .poz).
   Tu zostaje tylko to, czego przycisk nie dziedziczy po linku. */
.apka .poz { width: 100%; font: inherit; color: var(--tekst); text-align: left; cursor: pointer; }
.apka .lista-biletow { display: grid; }

.szukajka { display: grid; gap: 6px; margin-bottom: 12px; }
.szukajka .podpowiedz, .szukajka .etykieta { margin: 0; }
.szukajka input {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--tlo-2); border: 1px solid var(--linia-mocna); border-radius: var(--r-mid);
  color: var(--tekst); font: inherit;
}
.szukajka input::placeholder { color: var(--tekst-3); }
.chipy { display: flex; min-width: 0; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 6px; scrollbar-width: none; }
.chipy::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 38px; padding: 7px 14px;
  border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: none; color: var(--tekst-2); font: inherit; font-size: 0.875rem;
  cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { border-color: var(--akcent); background: var(--akcent); color: var(--na-akcencie); font-weight: 600; }
/* Kafle miast w pustym stanie szukania: zawijaja sie w rzedy, bo nie ma ich przewijac w bok */
.chipy--zawijane { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.chip .liczba { color: var(--tekst-3); font-size: 0.75rem; }

/* Plansza wydarzenia: ta sama co w bilecie na stronie wydarzenia (css/strony/wydarzenie.css),
   kolor kategorii o jasnosci 30% i chromie 0.045, rozni je sam odcien. Obrazek SVG 8:5
   przyciety do 16:9 mial 227 px wysokosci, ucieta perforacje i spychal pule pod zakladki. */
.plansza-apki { --hk: 60; }
.plansza-apki[data-kategoria="sport"] { --hk: 150; }
.plansza-apki[data-kategoria="teatr"] { --hk: 12; }
.plansza-apki[data-kategoria="konferencja"] { --hk: 245; }
.plansza-apki[data-kategoria="targi"] { --hk: 100; }
.plansza-apki[data-kategoria="kino"] { --hk: 290; }
.plansza-apki[data-kategoria="warsztat"] { --hk: 190; }
.plansza-apki {
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  gap: 8px 16px; min-height: 136px; padding: 16px 18px 18px;
  border-radius: var(--r); background: oklch(30% 0.045 var(--hk)); color: oklch(82% 0.06 var(--hk));
}
.plansza-apki__znak { font-family: var(--afisz); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.plansza-apki__znak:last-child { grid-column: 2; grid-row: 1; text-align: right; }
.plansza-apki__slowo {
  grid-column: 1 / -1; grid-row: 3; font-family: var(--afisz); font-weight: 800;
  font-size: min(2.75rem, calc((100cqi - 36px) / var(--litery, 7) / 0.7)); line-height: 0.9;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--tekst); overflow-wrap: anywhere;
}
.apka h2 { font-size: 1.25rem; }

/* Pasek zakupu jest przyklejony do dolu tresci, tuz nad zakladkami: w przeplywie stal
   pod pulami na 1531 px i trzeba bylo przewinac prawie dwa ekrany, zeby zobaczyc cene.
   Jest ostatni w ekranie, wiec po dojechaniu do konca staje pod ostatnia pula i niczego
   nie przykrywa, a scroll-padding pilnuje, zeby pole z fokusem nie chowalo sie pod nim.
   Kwota i przycisk stoja w jednym rzedzie, pasek ma okolo 76 px zamiast 132. */
.apka__tresc:has(#ekran-wydarzenie.jest-aktywny) { padding-bottom: 0; scroll-padding-bottom: 96px; }
.pasek-dolny {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin: 0 -18px; padding: 14px 18px;
  background: var(--tlo-2); border-top: 1px solid var(--linia-mocna);
}
.pasek-dolny__rzad { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pasek-dolny .przycisk--pelny { width: auto; flex: 1 0 9.5rem; max-width: 13rem; }
.pasek-dolny__kwota { font-family: var(--mono); font-size: 1.25rem; line-height: 1; color: var(--akcent); font-variant-numeric: tabular-nums; }
.pasek-dolny__kwota small { display: block; font-family: var(--font); font-size: 0.75rem; color: var(--tekst-3); margin-top: 6px; }

.bilet-apka { border: 1px solid var(--linia); border-radius: var(--r); background: var(--tlo-2); margin-bottom: 16px; overflow: hidden; }
.bilet-apka__glowa { padding: 16px; }
.bilet-apka__nazwa { font-size: 1rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; margin: 6px 0 4px; }
.bilet-apka__kod { display: flex; align-items: center; gap: 14px; padding: 16px; border-top: 1px dashed var(--linia-mocna); }
.bilet-apka__kod img { width: 80px; height: 80px; background: #fff; border-radius: var(--r-mid); flex: none; }

.apka .panel { padding: 16px; margin-bottom: 16px; }
.apka .pole { margin-bottom: 14px; }

/* ---------- ekran ukladany gapem ----------
   Odstepy w aplikacji szly z atrybutu style na pojedynczych znacznikach, wiec
   kazda zmiana rytmu wymagala ruszania HTML. Tu rodzenstwo ustawia gap, a elementy
   nie nosza wlasnych marginesow. */
.stos-apki, .ekran--stos.jest-aktywny { display: grid; gap: 16px; align-content: start; }
.stos-apki .etykieta, .ekran--stos .etykieta { margin: 0; }
.w-apce__glowa { display: grid; gap: 16px; }
/* Nazwa wydarzenia to glowny napis ekranu. Przy 20 px i interlinii 1,05 dwie linie prawie
   sie stykaly, a napis siedzial 8 px pod plansza i wygladal jak jej podpis. */
.w-apce__glowa h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; }
@media (min-width: 768px) { .w-apce__glowa h2 { font-size: 1.75rem; } }
.w-apce__pule { display: grid; gap: 8px; }
.gotowe__glowa { display: grid; gap: 8px; justify-items: start; }
.stos-apki .panel, .ekran--stos .panel { margin-bottom: 0; }
/* Pasek kupna jest przyklejony do dolu, wiec nie bierze gapu dwa razy. */
.ekran--stos .pasek-dolny { margin-top: 8px; }
.ekran--stos h2 { margin: 0; }

.apka__forma { display: grid; gap: 16px; }
/* Bez sesji aplikacja jest zamknieta (js/aplikacja.js, zablokuj): zostaje sam ekran
   logowania, bez zakladek i bez Wstecz, bo i tak nie ma dokad przejsc. */
.apka.jest-zamknieta .apka__zakladki, .apka.jest-zamknieta .apka__wstecz { display: none; }
#ekran-konto.jest-aktywny { display: grid; gap: 16px; align-content: start; }
/* Zamkniety ekran logowania: w glowie stoi logo (36 px, bylo 30 px nad formularzem),
   a tytul formularza schodzi nad pola, razem z nimi na srodek wolnej wysokosci (pod
   formularzem zostawalo okolo 460 px pustego ekranu). "safe" pilnuje, zeby wyzsza
   rejestracja albo otwarta klawiatura nie ucinaly gory. h1 zostaje dla czytnika ekranu. */
.apka__logo { display: none; }
.apka.jest-zamknieta .apka__logo { display: block; grid-column: 2; justify-self: center; width: auto; height: 30px; }
.apka.jest-zamknieta .apka__glowa h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.apka.jest-zamknieta #ekran-konto.jest-aktywny { min-height: 100%; align-content: safe center; }
#ekran-konto > .uwaga { max-width: none; margin: 0; }
/* Krotkie potwierdzenie (Wylogowano, Haslo zmienione) nie stoi w ukladzie ekranu, tylko
   wisi 12 px pod glowa aplikacji: nie spycha formularza w dol i nie podskakuje nim, gdy
   znika. Znika samo po 3 s (js/aplikacja.js, notka). Bledy zostaja w ukladzie, dopoki
   nie znikna po nastepnej akcji, bo trzeba je przeczytac. */
.apka__dymek {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 5;
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 36px); margin: 0;
  padding: 8px 16px 8px 12px; border: 1px solid var(--linia-mocna); border-radius: 999px;
  background: var(--tlo-2); color: var(--tekst); font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  animation: dymek-wejscie 240ms var(--ease-out) both;
}
.apka__dymek[hidden] { display: none; }
.apka__dymek::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--akcent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%231b1613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.apka__dymek.znika { animation: dymek-wyjscie 180ms cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes dymek-wejscie { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes dymek-wyjscie { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .apka__dymek, .apka__dymek.znika { animation: none; } }
/* Link tekstowy w formularzu (Nie pamietasz hasla?): 44 px celu dotykowego, bez ramki. */
.apka__link {
  justify-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none;
  font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--tekst-2); text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) { .apka__link:hover { color: var(--akcent); } }
/* Tytul formularza: 28 px, czyli stopien nad 20 px tytulu z glowy, ten sam krój i wersaliki. */
.apka .logowanie__tytul { justify-self: center; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; padding-bottom: 8px; }
/* Przejscie miedzy logowaniem, rejestracja i przypomnieniem hasla: formularz, na ktory
   przechodzisz, wjezdza 16 px z tej strony, w ktora idziesz (dalej z prawej, z powrotem
   z lewej), tytul tylko sie pojawia. Same opacity i transform. */
.wjezdza { animation: wjazd-wprzod 280ms var(--ease-out) both; }
[data-kierunek="wstecz"] .wjezdza { animation-name: wjazd-wstecz; }
.logowanie__tytul.wjezdza { animation-name: pojawienie; animation-duration: 220ms; }
@keyframes wjazd-wprzod { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes wjazd-wstecz { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes pojawienie { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wjezdza { animation: none; } }
/* Przejscie miedzy logowaniem a rejestracja: pytanie i przycisk pod formularzem,
   oddzielone linia od glownej akcji, zeby nie konkurowaly ze soba. */
.logowanie__zmiana { display: grid; gap: 12px; justify-items: center; padding-top: 20px; border-top: 1px solid var(--linia); font-size: 0.875rem; color: var(--tekst-2); }
/* Kup bez logowania ma sens tylko przed wejsciem: gosc w zakladce Konto widzi samo logowanie. */
.apka:not(.jest-zamknieta) .logowanie__gosc { display: none; }
.apka__link:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: var(--r); }
.apka__forma[aria-busy="true"] button[type="submit"] { cursor: progress; }
.apka__forma .pole { margin-bottom: 0; }
.apka__forma .blad-pola { margin-top: 0; }

/* Karta osoby bez znaku z pierwsza litera (user: litera "S" obok imienia wygladala
   brzydko). Imie 28 px krojem afiszu z ciasnym trekkingiem, pod nim adres 16 px i data
   14 px w jednym rzedzie, ktory na waskim ekranie zawija sie w dwa. */
.konto-karta { display: grid; gap: 16px; }
.konto-karta__osoba { display: grid; gap: 6px; min-width: 0; }
.konto-karta__dane { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; min-width: 0; }
.konto-karta__imie {
  flex: 1 0 100%; font-family: var(--afisz); font-size: 1.75rem; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: balance;
}
.konto-karta__email { font-size: 1rem; color: var(--tekst-2); overflow-wrap: anywhere; }

.w-apce__opis { color: var(--tekst-2); }
.gotowe__opis { font-size: 1rem; color: var(--tekst-2); }
.pasek-dolny__sztuk { font-size: 0.875rem; color: var(--tekst-2); }


/* Komputer i tablet w przegladarce. Zalogowany jest w aplikacji, nie na stronie www,
   wiec pasek strony znika, a zakladki stoja w bocznej kolumnie z logo, jak w aplikacji
   na komputerze. Tresc zostaje kolumna 640 px obok nich. Glowa zostaje tylko z przyciskiem
   Wstecz na glebszych ekranach, na glownych zakladkach tytul powtarzalby wybrana zakladke,
   wiec zostaje dla czytnika ekranu (i jako kotwica dymka). Bez sesji apka jest sam
   formularzem logowania pod paskiem strony.
   Kolumna zakladek stoi przy lewej krawedzi okna (logo 24 px od lewej, jak w pasku strony),
   a tresc 720 px na srodku reszty okna. Przewija sie cala prawa czesc, wiec kolko myszy
   dziala tez obok listy. Wczesniej zakladki i tresc byly wysrodkowane razem jako blok
   i przy 1447 px kolumna wisiala 276 px od krawedzi. */
@media (min-width: 768px) and (not (display-mode: standalone)) {
  body:has(.apka:not(.jest-zamknieta)) > .pasek { display: none; }
  .ramka { max-width: 944px; }
  .scena:has(.apka:not(.jest-zamknieta)) { padding: 0; }
  .ramka:has(> .apka:not(.jest-zamknieta)) { max-width: none; }
  .apka:not(.jest-zamknieta) {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  }
  .apka__glowa { grid-column: 2; grid-row: 1; }
  .apka__tresc { grid-column: 2; grid-row: 2; }
  .apka:not(.jest-zamknieta) .apka__tresc { padding-inline: clamp(24px, 4vw, 48px); }
  .apka:not(.jest-zamknieta) .apka__tresc > .ekran { max-width: 720px; margin-inline: auto; }
  .apka:not(.jest-zamknieta) .apka__glowa { width: calc(100% - 2 * clamp(24px, 4vw, 48px)); max-width: 720px; justify-self: center; }
  .apka__zakladki {
    grid-column: 1; grid-row: 1 / -1;
    display: flex; flex-direction: column; gap: 4px; container-type: normal;
    padding: 24px 16px; border-top: 0; border-right: 1px solid var(--linia); border-radius: 0; background: none;
  }
  /* Myszka i gladzik nie przesuwaja rzedu w bok jak palec, wiec filtry, ktore sie nie
     mieszcza, schodza do drugiego rzedu zamiast chowac sie za krawedzia. */
  .chipy { flex-wrap: wrap; overflow-x: visible; }
  /* Logo stoi na gorze kolumny, 24 px od gory jak w pasku strony. Nie jest linkiem,
     bo z aplikacji nie wypada sie na strone. Ma 30 px, jak w pasku strony glownej
     (.marka__logo), i jest oddzielone od zakladek linia: 24 px pod logo linia, 16 px pod
     nia pierwsza zakladka. Napis Biletovo w glowie glebszych ekranow zniknal, bo powtarzal
     to logo. */
  .apka__zakladki::before {
    content: ""; display: block; flex: none; height: 30px; margin: 0 -16px 16px; padding-bottom: 24px;
    border-bottom: 1px solid var(--linia);
    background: url("/ikony/logo-poziome.svg?v=247") 24px 0 / auto 30px no-repeat;
    box-sizing: content-box;
  }
  /* Zakladka na komputerze to odcinek biletu, jak ceny na liscie wydarzen: bez ramek
     wokol ikon, ikona 22 px i nazwa 16 px. Biezaca zakladka to pomaranczowy kupon
     z polokraglymi wycieciami po bokach i przerywana perforacja miedzy ikona a nazwa,
     wiec miejsce widac po ksztalcie, nie tylko po kolorze. Ksztalt siedzi na ::before
     (maska wycina wyciecia), bo ::after trzyma linie nad Kontem, ktora wisi nad zakladka
     i maska by ja zjadla. Wczesniej ikony staly w kwadratach 36 px z ramka. */
  .apka .zakladka {
    position: relative; isolation: isolate;
    flex-direction: row; justify-content: flex-start; gap: 16px; min-height: 52px; padding: 0 20px;
    border-radius: var(--r); color: var(--tekst-2);
    font-family: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none;
    transition: color var(--fast) var(--ease-out);
  }
  .apka .zakladka::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r);
    background: transparent;
    -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 8px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 8px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
    transition: background-color var(--fast) var(--ease-out);
  }
  .apka .zakladka svg {
    width: 22px; height: 22px; padding: 0 16px 0 0; border: 0; border-right: 1px dashed transparent; border-radius: 0;
    background: none; color: inherit;
  }
  .apka .zakladka[aria-selected="true"] { color: var(--na-akcencie); font-weight: 600; }
  .apka .zakladka[aria-selected="true"]::before { background: var(--akcent); }
  .apka .zakladka[aria-selected="true"] svg { background: none; border-right-color: color-mix(in oklch, var(--na-akcencie) 45%, transparent); }
  @media (hover: hover) {
    .apka .zakladka:not([aria-selected="true"]):hover { color: var(--tekst); }
    .apka .zakladka:not([aria-selected="true"]):hover::before { background: var(--tlo-3); }
    .apka .zakladka:not([aria-selected="true"]):hover svg { border-right-color: var(--linia-mocna); }
    .apka .zakladka[aria-selected="true"]:hover { color: var(--na-akcencie); }
  }
  .apka .zakladka:focus-visible { outline-offset: 2px; }
  /* Na komputerze kupon jest cala zakladka (::before), wiec przejezdzajacy bilecik z telefonu znika. */
  .apka__zakladki.ma-bilecik .apka__bilecik { display: none; }
  .apka__zakladki.ma-bilecik .zakladka[aria-selected="true"] svg { transition-delay: 0ms; }
  /* Konto (i Sprzedaz u wlasciciela) to ustawienia, nie przegladanie: stoja na dole
     kolumny, a nad nimi idzie linia od krawedzi do krawedzi, jak ta pod logo (16 px nad
     zakladka). Auto margines spycha je w dol, a 33 px pod Biletami to najmniejszy odstep
     w niskim oknie: 16 px, linia, 16 px. Wczesniej grupa stala zaraz pod Biletami, a krotka
     linia 200 px wisiala 11 px nad nia. */
  .apka .zakladka[data-ekran="ekran-bilety"] { margin-bottom: 33px; }
  .apka .zakladka:is(#a-zakladka-sprzedaz:not([hidden]), #a-zakladka-sprzedaz[hidden] + [data-ekran="ekran-konto"]) { position: relative; margin-top: auto; }
  .apka .zakladka:is(#a-zakladka-sprzedaz:not([hidden]), #a-zakladka-sprzedaz[hidden] + [data-ekran="ekran-konto"])::after {
    content: ""; position: absolute; top: -17px; left: -16px; right: -16px; height: 1px; background: var(--linia);
  }
  .apka.jest-zamknieta .apka__logo { display: none; }
  .apka__tresc { padding-inline: 0; }
  .ekran__glowa { margin-inline: 0; padding-inline: 0; }
  .apka__glowa { min-height: 0; padding: 0; border-bottom: 0; }
  .apka:not(.jest-glebiej) .apka__glowa h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .apka.jest-glebiej .apka__glowa { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0 12px; border-bottom: 1px solid var(--linia); }
  .apka.jest-glebiej .apka__glowa h1 { text-align: left; }
  .apka__wstecz { margin-left: 0; }
  .apka.jest-zamknieta #ekran-konto.jest-aktywny { width: 100%; max-width: 400px; margin-inline: auto; }
  /* Pasek zakupu mial ujemny margines 18 px na odstep tresci telefonu, ktorego tu nie ma,
     wiec wystawal 18 px z obu stron kolumny i .apka go przycinala. Tu jest cala karta
     rowna z kolumna, z ramka dookola: przy krotkiej tresci stoi pod pulami, przy dlugiej
     wisi 16 px nad dolem okna. Otwarty dol czytal sie jak uciety pasek. */
  .apka__tresc:has(#ekran-wydarzenie.jest-aktywny) { padding-bottom: 16px; }
  .pasek-dolny { bottom: 16px; margin-inline: 0; padding: 16px 20px; border: 1px solid var(--linia-mocna); border-radius: var(--r); }
}

/* Ponowne wyslanie kodu w czasie blokady (60 s) pokazuje odliczanie i nie reaguje. */
.apka__link:disabled { color: var(--tekst-3); cursor: default; }
@media (hover: hover) { .apka__link:disabled:hover { color: var(--tekst-3); } }

/* ---------- panel sprzedazy (js/panel-sprzedazy.js) ----------
   Te same klocki co reszta aplikacji: lista danych, cienkie linie miedzy wierszami,
   kwota po prawej cyframi rownej szerokosci. Bez kart na kazdy wiersz. */
.panel-sprzedazy { padding-top: 16px; }
.filtry-sprzedazy, .pola-para-apki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.filtry-sprzedazy .pole, .pola-para-apki .pole { margin-bottom: 0; }
.filtry-sprzedazy__szeroki { grid-column: 1 / -1; }
.filtry-sprzedazy input, .filtry-sprzedazy select { min-width: 0; }
.apka .pola-para-apki .pole[hidden] { display: none; }
.pola-para-apki:has(> .pole[hidden]) > .pole { grid-column: 1 / -1; }
.lista-sprzedazy { display: grid; border-top: 1px solid var(--linia); }
.lista-sprzedazy .pusty-stan { margin: 0; padding: 16px 0; border: 0; border-radius: 0; background: none; color: var(--tekst-2); font-size: 0.875rem; }
.rzad-sprzedazy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--linia); }
.rzad-sprzedazy__opis { display: grid; gap: 4px; min-width: 0; }
.rzad-sprzedazy__glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rzad-sprzedazy__kod { font-family: var(--mono); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.rzad-sprzedazy__tytul { font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
.rzad-sprzedazy__meta { font-size: 0.75rem; color: var(--tekst-3); overflow-wrap: anywhere; }
.rzad-sprzedazy__kwota { font-family: var(--mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rzad-sprzedazy--kod .przycisk { min-height: 44px; min-width: 7rem; }
.rzad-sprzedazy__opis .apka__link { justify-self: start; min-height: 44px; padding: 0; color: var(--akcent); }
/* CSV i PDF obok siebie, na waskim ekranie jeden pod drugim (baza 10rem na przycisk). */
.pobierz-sprzedaz { display: flex; flex-wrap: wrap; gap: 12px; }
.pobierz-sprzedaz .przycisk { flex: 1 1 10rem; min-width: 0; min-height: 44px; }
.pobierz-sprzedaz__opis { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--tekst-2); text-wrap: pretty; }
@media (max-width: 359px) {
  .filtry-sprzedazy, .pola-para-apki { grid-template-columns: minmax(0, 1fr); }
}
/* "Procent ceny" w polowie wiersza na telefonie (154 px) ucinal sie na "Procent cer". */
@media (max-width: 479px) { .pola-para-apki--rodzaj { grid-template-columns: minmax(0, 1fr); } }

/* ---------- konto zalogowanego (js/aplikacja.js, rysujKonto) ----------
   Karta osoby z dwoma przyciskami ustawien, pod nia liczby z biletow, zamowienia z bazy
   i opcje sesji. Te same klocki co panel sprzedazy: cienkie linie, kwota po prawej. */
.konto-karta__od { font-size: 0.875rem; color: var(--tekst-3); }
/* ID konta pod imieniem: pierwsze 8 znakow krojem stalej szerokosci, Kopiuj z polem dotyku
   44 px. Podpis i kod sa w jednym wierszu tekstu, wiec stoja na wspolnej linii pisma;
   jako dwa osobne elementy wyrownane do srodka kod Oxanium siedzial 2 px wyzej. */
.konto-karta__id { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; font-size: 0.875rem; color: var(--tekst-3); }
.konto-karta__id code { font-family: var(--mono); font-size: 0.875rem; line-height: 1; letter-spacing: 0.04em; color: var(--tekst-2); overflow-wrap: anywhere; }
.konto-karta__id .apka__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; }
.konto-karta__id .ikona { width: 16px; height: 16px; }
/* Ikony z Material Symbols (Google, licencja Apache 2.0), wersja Outlined, siatka 24
   w ukladzie 960 jednostek, wypelnienie kolorem napisu. */
.ikona { width: 20px; height: 20px; flex: none; fill: currentColor; }
/* Przyciski ustawien to male akcje karty: dwie rowne polowy, 44 px wysokosci, ikona 20 px
   i napis 13 px wersalikami. Oxanium ma wielkie litery 0,70 em nad linia bazowa, a srodek
   wiersza lezy 0,19 em nizej niz srodek liter, stad przesuniecie napisu o 1 px w dol:
   srodek ikony i srodek liter stoja na tej samej wysokosci. */
.konto-karta__akcje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid var(--linia); }
.konto-karta__akcje .przycisk {
  gap: 10px; min-height: 44px; padding: 8px 12px;
  border-radius: 999px; background: var(--tlo); font-size: 0.8125rem; line-height: 1; letter-spacing: 0.05em; color: var(--tekst-2);
}
.konto-karta__akcje .przycisk span { transform: translateY(var(--dol-napisu, 1px)); }
.konto-karta__akcje .przycisk[aria-expanded="true"] { border-color: var(--akcent); color: var(--akcent); background: color-mix(in oklch, var(--akcent) 10%, var(--tlo)); }
@media (max-width: 339px) { .konto-karta__akcje { grid-template-columns: minmax(0, 1fr); } }
/* Formularz imienia i hasla otwiera sie w karcie, pod przyciskiem, ktory go wywolal,
   oddzielony cienka linia: bez drugiej ramki i bez drugiego naglowka, ktory powtarzal
   podpis pola (Imie i nazwisko dwa razy jeden pod drugim). Przycisk zapisu ma szerokosc
   napisu, obok Anuluj; na pelna szerokosc mial 608 px pomaranczu. */
.konto-forma { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--linia); animation: pojawienie 220ms var(--ease-out); }
.konto-forma[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .konto-forma { animation: none; } }
.konto-forma input { background: var(--tlo); }
.konto-forma__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Oxanium 13 px w wierszu 20,8 px stawia wersaliki 1,9 px nad srodkiem przycisku
   (zmierzone na Wlacz weryfikacje: litery 15,6 px od gory, 19,4 px od dolu), wiec
   pole tresci schodzi o 2 px: 10 px u gory, 6 px u dolu. */
.konto-forma__przyciski .przycisk { flex: none; min-height: 44px; padding: 10px 20px 6px; font-size: 0.8125rem; }
@media (max-width: 479px) { .konto-forma__przyciski .przycisk { flex: 1 1 auto; } }
.konto-zamowienia { display: grid; gap: 8px; }
.konto-zamowienia[hidden] { display: none; }
.konto-zamowienia__glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.konto-zamowienia__glowa .apka__link { padding: 0 0 0 12px; }

/* Zamowienie to bilet, jak pozycja na liscie wydarzen: tlo --tlo-2, po lewej nazwa
   wydarzenia 16 px i szczegoly, po prawej za przerywana perforacja odcinek 8.5rem
   z kwota 20 px i stanem. Wyciecia 16 px na gorze i dole perforacji to kola w kolorze
   tla ekranu. Wygasle i anulowane sa przygaszone, oplacone i czekajace maja kwote
   w akcencie. Wczesniej wiersz zaczynal sie od numeru ZAM, a nazwa szla drobnym pismem. */
.lista-zamowien { display: grid; gap: 12px; }
.lista-zamowien .pusty-stan { margin: 0; padding: 16px; font-size: 0.875rem; }
.zamowienie {
  display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; overflow: hidden;
  border-radius: var(--r); background: var(--tlo-2);
}
.zamowienie__opis { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 16px; }
.zamowienie__tytul { font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; text-wrap: pretty; }
.zamowienie__meta { font-size: 0.8125rem; color: var(--tekst-2); overflow-wrap: anywhere; }
.zamowienie__kod { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--tekst-3); overflow-wrap: anywhere; }
.zamowienie__odcinek {
  position: relative; display: grid; align-content: center; justify-items: start; gap: 8px;
  padding: 16px; border-left: 2px dashed var(--linia-mocna);
}
.zamowienie__odcinek::before, .zamowienie__odcinek::after {
  content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--tlo);
}
.zamowienie__odcinek::before { top: -8px; }
.zamowienie__odcinek::after { bottom: -8px; }
.zamowienie__kwota { font-family: var(--afisz); font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--akcent); white-space: nowrap; }
.zamowienie--nieaktywne .zamowienie__tytul { color: var(--tekst-2); }
.zamowienie--nieaktywne .zamowienie__kwota { color: var(--tekst-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.zamowienie__akcje { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--linia); }
.zamowienie__akcje .przycisk { flex: 1 1 8rem; min-height: 44px; }
/* Waski ekran przy duzym pismie: odcinek schodzi pod opis, perforacja idzie poziomo. */
@container (max-width: 20em) {
  .zamowienie { grid-template-columns: minmax(0, 1fr); }
  .zamowienie__odcinek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-left: 0; border-top: 2px dashed var(--linia-mocna); }
  .zamowienie__odcinek::before { top: -9px; left: -8px; }
  .zamowienie__odcinek::after { top: -9px; bottom: auto; left: auto; right: -8px; }
}
.konto-zamowienia { container-type: inline-size; }

/* Wiersze ustawien (Bezpieczenstwo, Pomoc): lista w jednej ramce, wiersz 64 px z ikona
   20 px, nazwa 15 px i podpis 13 px pod nia, po prawej stan albo strzalka. Wczesniej
   linki pomocy staly na srodku jako trzy slowa w rzedzie, a Wyloguj wszedzie byl drugim
   przyciskiem na cala szerokosc, identycznym z Wyloguj sie. */
.konto-lista { display: grid; border: 1px solid var(--linia); border-radius: var(--r); background: var(--tlo-2); overflow: hidden; }
.konto-wiersz {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 12px 16px;
  border: 0; border-top: 1px solid var(--linia); background: none; color: var(--tekst);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) var(--ease-out);
}
.konto-lista > :first-child { border-top: 0; }
.konto-wiersz > .ikona { color: var(--tekst-2); }
.konto-wiersz__tekst { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.konto-wiersz__nazwa { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.konto-wiersz__opis { font-size: 0.8125rem; line-height: 1.4; color: var(--tekst-3); }
.konto-wiersz .plakietka { flex: none; }
.konto-wiersz__strzalka { color: var(--tekst-3); }
.konto-wiersz:disabled { cursor: progress; opacity: 0.6; }
.konto-wiersz:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
@media (hover: hover) {
  .konto-wiersz:hover { background: var(--tlo-3); color: var(--tekst); }
  .konto-wiersz:hover .konto-wiersz__strzalka { color: var(--tekst); }
}
.konto-wiersz[aria-expanded="true"] { background: var(--tlo-3); }

/* Wlaczanie weryfikacji dwuetapowej: pod wierszem, w tej samej ramce. Kod QR na bialym
   polu 184 px (skaner potrzebuje jasnego marginesu), klucz do przepisania grupami po 4. */
.dwa-etapy { display: grid; gap: 16px; margin: 0; padding: 16px; border-top: 1px solid var(--linia); background: var(--tlo); }
.dwa-etapy__wlacz { display: grid; gap: 16px; }
.dwa-etapy__krok { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--tekst-2); }
.dwa-etapy__nr {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--akcent-krawedz); border-radius: 50%;
  font-family: var(--afisz); font-size: 0.75rem; font-weight: 700; color: var(--akcent);
}
.dwa-etapy__qr { justify-self: center; padding: 12px; border-radius: var(--r); background: #fbf8f3; line-height: 0; }
.dwa-etapy__qr img { display: block; width: 184px; height: 184px; }
.dwa-etapy__klucz { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0; font-size: 0.8125rem; color: var(--tekst-3); text-align: center; }
.dwa-etapy__klucz code { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.06em; color: var(--tekst); overflow-wrap: anywhere; }
.dwa-etapy__klucz .apka__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; }
.dwa-etapy__klucz .ikona { width: 16px; height: 16px; }
.dwa-etapy .pole { margin-bottom: 0; }

/* Wyloguj sie zamyka ekran, osobno od list, z ikona wyjscia. */
.konto-wyloguj { margin-top: 8px; }
.konto-wyloguj .ikona { width: 18px; height: 18px; }
#a-konto-dane .dane-rzad dd { overflow-wrap: anywhere; }

/* ---------- platnosc testowa w aplikacji (js/aplikacja.js, pokazPlatnosc) ----------
   Jeden blok: kwota na gorze (40 px, ten sam krój co ceny w katalogu), numer i termin
   pod nia, pozycje cienkimi liniami jak dane wydarzenia, jeden glowny przycisk z kwota
   i Anuluj pod nim. Informacja o trybie testowym to jedno zdanie na dole, nie trzy fakty. */
.platnosc-apki { display: grid; gap: 24px; padding: 24px; border: 1px solid var(--linia-mocna); border-radius: var(--r); background: var(--tlo-2); }
.platnosc-apki__glowa { display: grid; gap: 8px; }
.platnosc-apki__glowa .etykieta { margin: 0; }
.platnosc-apki__kwota { margin: 0; font-family: var(--afisz); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--tekst); }
.platnosc-apki__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-family: var(--mono); font-size: 0.75rem; color: var(--tekst-3); }
.platnosc-apki__pozycje { margin: 0; border-top: 1px solid var(--linia); }
.platnosc-apki__pozycje dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.platnosc-apki__akcje { display: grid; gap: 8px; }
.platnosc-apki__akcje .apka__link { justify-self: center; }
.platnosc-apki .uwaga { margin: 0; max-width: none; }
.platnosc-apki__test { margin: 0; font-size: 0.8125rem; color: var(--tekst-3); text-align: center; }
@media (max-width: 479px) { .platnosc-apki { padding: 20px 16px; } }