/* Zakladka: regulamin (regulamin.html): spis tresci w szynie, terminy, rozdzialy.
   Plik laduje sie tylko na tej stronie, po baza.css i strona.css, wiec reguly
   wspolne (pasek, glowa podstrony, formularze, stopka) sa w strona.css. */

/* ---------- regulamin ---------- */
.spis { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 0.875rem; line-height: 1.4; }
/* Pozycja spisu bez podkreslenia (user: "zeby nie byl podkreslony"): numer stoi we wlasnej
   kolumnie 2ch wyrownanej do prawej, wiec 1 i 15 maja jedna os, a zawiniety tytul
   ("Serwis w przegladarce i aplikacja (PWA)") wraca pod tytul, nie pod numer. */
.spis a { display: grid; grid-template-columns: 2ch minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; padding-block: 6px; color: var(--tekst-2); text-decoration: none; }
.spis a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: var(--r-mid); }
@media (hover: hover) { .spis a { transition: color var(--fast) var(--ease-out); } .spis a:hover { color: var(--tekst); } .spis a:hover .spis__nr { color: var(--akcent); } }
/* Numer pozycji sklejal sie z nazwa rozdzialu ("1Zakup"), bo .spis__nr nie mial
   zadnej reguly w arkuszu. Odstep 8 px rozdziela cyfre od slowa. */
.spis__nr { white-space: nowrap; font-family: var(--mono); font-weight: 500; color: var(--tekst-3); text-align: right; font-variant-numeric: tabular-nums; transition: color var(--fast) var(--ease-out); }
/* Spis lezy poziomym paskiem nad trescia, wiec pozycje ida w kolumnach, a nie w jednym
   dlugim rzedzie: przy 6 pozycjach rzad lamal sie na nierowne dwa wiersze. */
/* Na telefonie spis jest jedna kolumna wierszy zamknietych kreska: przy zawijanym rzedzie
   szesc pozycji ukladalo sie w 3 + 1 + 2, wiec numery nie staly w jednej osi i blok czytal
   sie jak rozsypane odnosniki. Wiersz ma 44 px, tyle co minimum celu dotykowego. */
/* Klikalny jest caly wiersz, nie sam napis: przy odnosniku wysokosci 22 px palec trafial
   w polowe wiersza, a 44 px na li bylo tylko pusta ramka wokol celu. */
@media (max-width: 559px) { .spis li { min-height: 44px; display: flex; align-items: stretch; border-top: 1px solid var(--linia); } .spis li > a { flex: 1; display: grid; align-content: center; min-height: 44px; padding-block: 6px; } }
@media (min-width: 560px) { .spis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); } }

/* Strona dokumentu: naglowki paragrafow stoja na marginesie, tak jak w drukowanym
   regulaminie, a spis i terminy leza poziomym paskiem nad trescia. Poprzedni uklad
   (waska kolumna z boku) zostawial po lewej pusty prostokat 480 na 850 px przez cala
   dlugosc dokumentu, bo spis konczyl sie po 570 px, a rozdzialy szly jeszcze 1000 px nizej. */
/* Naglowek strony trzyma te sama miare co dokument, zeby h1 i pierwszy paragraf
   stanely na jednej osi: przy 1084 px naglowek zaczynal sie 132 px na lewo od tresci. */
/* PRZEBUDOWA UKLADU DOKUMENTU: spis tresci nie otwiera juz dokumentu, tylko stoi lepka
   szyna po lewej przez cala jego dlugosc, a rozdzialy ida szerokim strumieniem obok.
   Terminy zeszly do glowy strony, bo to liczby calego regulaminu, nie jego wstep.
   Miara rosnie z 820 na 980 px, bo pasmo dzieli sie teraz na dwie kolumny. */
.pas--dokument, .glowa--dokument { --miara: 980px; }
/* Glowa dokumentu nie ma paska faktow, ktory na pozostalych stronach daje oddech nad
   kreska. Bez tego akapit wstepu dotykal linii, a tresc rozdzialow startowala 50 px
   pod nim zamiast wymaganych 96 px. 48 px tutaj plus 48 px paddingu sekcji daje 96 px. */
.glowa--dokument { padding-bottom: var(--s7); }
/* Od 900 px sekcja ma juz 96 px paddingu z gory, wiec 48 px pod leadem robilo 144 px
   pustki: tytul wisial nad kreska, a spis startowal pol ekranu nizej. Na tej szerokosci
   24 px pod leadem i 64 px nad spisem daja 88 px odstepu zamiast 144. */
@media (min-width: 900px) {
  .glowa--dokument { padding-bottom: var(--s5); }
  .pas--dokument { padding-top: var(--s8); }
}
.spis-tresci { display: grid; gap: var(--s3); align-content: start; padding-bottom: var(--s6); }
/* Na telefonie spis polityki mial 689 px, czyli caly ekran odnosnikow przed pierwszym
   zdaniem dokumentu. Teraz ponizej 900 px to jeden wiersz 48 px "Spis tresci, 15 rozdz.",
   ktory rozwija sie dotknieciem. Bez JS spis jest otwarty (atrybut open w HTML). */
.spis-zwijany { border-block: 1px solid var(--linia); }
.spis-zwijany__glowa { display: flex; align-items: center; gap: var(--s3); min-height: 48px; list-style: none; cursor: pointer; }
.spis-zwijany__glowa::-webkit-details-marker { display: none; }
.spis-zwijany__ile { margin-left: auto; font-size: 0.75rem; color: var(--tekst-3); }
.spis-zwijany__glowa::after { content: ""; width: 7px; height: 7px; margin-inline: 4px; border-right: 1.5px solid var(--tekst-3); border-bottom: 1.5px solid var(--tekst-3); transform: translateY(-2px) rotate(45deg); transition: transform var(--fast) var(--ease-out); }
.spis-zwijany[open] > .spis-zwijany__glowa::after { transform: translateY(2px) rotate(-135deg); }
.spis-zwijany__glowa:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.spis-zwijany > .spis { padding-bottom: var(--s3); }
@media (max-width: 559px) { .spis-zwijany > .spis { padding-bottom: 0; } .spis-zwijany .spis li:first-child { border-top: 1px solid var(--linia); } }
@media (min-width: 900px) {
  .spis-tresci { position: sticky; top: 88px; padding-bottom: 0; }
  /* Od 900 px spis jest szyna zawsze otwarta: naglowek nie przelacza, a pozycje dziela
     cienkie linie, jak w spisie drukowanego dokumentu. */
  .spis-zwijany { border-block: 0; }
  .spis-zwijany__glowa { min-height: 0; padding-bottom: var(--s3); cursor: default; pointer-events: none; }
  .spis-zwijany__glowa::after, .spis-zwijany__ile { display: none; }
  /* W szynie spis idzie jedna kolumna: dwa tory w 217 px lamaly kazda pozycje. */
  .spis-tresci .spis { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; border-bottom: 1px solid var(--linia); }
  .spis-tresci .spis li { border-top: 1px solid var(--linia); }
  .spis-tresci .spis a { padding-block: 8px; }
}
.glowa--dokument .terminy { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linia); }
.terminy { margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 560px) { .terminy { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.termin { display: grid; gap: 2px; }
.termin dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-3); }
.termin dd { margin: 0; font-family: var(--mono); font-size: 1rem; color: var(--tekst); font-variant-numeric: tabular-nums; }
/* Naglowek paragrafu na marginesie od 1000 px: 240 px na naglowek, 48 px rynny i reszta
   na tresc, ktora i tak lamie sie na 48ch (okolo 500 px). Stad miara pasma 820 px, a nie 1084 px. */
/* Naglowek rozdzialu wrocil nad tresc: kolumne na marginesie zajmuje teraz spis tresci,
   a dwa marginesy obok siebie (spis i naglowki) zostawialy tresc na 340 px. */
.rozdzial { padding: var(--s6) 0; border-top: 1px solid var(--linia); }
.rozdzial h2 { font-size: 1.25rem; margin: 0; }
/* Numer rozdzialu stal linijke nad tytulem (glowa byla blokiem, zmierzone: "2" na y 1685,
   tytul na y 1707). Teraz numer i tytul leza na jednej linii bazowej, numer w kolumnie 2ch
   jak w spisie, wiec tytuly 1 do 15 zaczynaja sie w jednej osi. */
/* Kolumna numeru ma 1.5rem, nie 2ch: ch liczylo sie z kroju glowy (16 px), wiec kolumna
   miala 21 px, a "11" w kroju numeru (20 px) ma 23 px i lamalo sie na dwie linie ("1" pod "1"). */
.rozdzial__glowa { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; margin-bottom: var(--s3); }
.rozdzial__nr { white-space: nowrap; font-family: var(--mono); font-size: 1.25rem; font-weight: 500; color: var(--akcent); text-align: right; font-variant-numeric: tabular-nums; }
/* Wstep nie ma tytulu, wiec kreska nad nim wisiala samotnie nad pustym miejscem. Bez niej
   pierwsze zdanie startuje na wysokosci etykiety "Spis tresci". */
.rozdzial--wstep { border-top: 0; padding-top: 0; }
.rozdzial p { max-width: 48ch; color: var(--tekst-2); }
.rozdzial p + p { margin-top: var(--s3); }
.rozdzial ol { margin: var(--s3) 0 0; padding-left: var(--s5); max-width: 48ch; color: var(--tekst-2); }
.rozdzial li { margin-bottom: 6px; }