/* Spis rozdziałów dokumentu — arkusz partu `strona-spis.php`.
 *
 * `canvas:Regulamin Marginalia` l. 58–88 (lepkie pasmo 260 px),
 * `canvas:Regulamin Marginalia Mobile` M2, l. 98–132 (pasek i nakładka).
 *
 * ⚠︎ **POZYCJA 25 CHECKLISTY „OPCJI B" JEST TUTAJ, W TRZECH REGUŁACH.**
 * Wymaganie brzmi: przy czternastu pozycjach **nagłówek i blok wersji zostają
 * przyklejone na stałe, a przewija się wyłącznie lista rozdziałów** — własnym
 * przewijaniem, nie razem ze stroną. Poprawnej klatki nie było przez trzy
 * rundy poprawek, ale wzorzec działa w nakładce mobilnej (canvas M2) i stamtąd
 * jest przeniesiony:
 *
 *     kontener   flex w pionie + `min-height: 0`
 *     głowa      flex: 0 0 auto
 *     lista      flex: 1 1 auto; min-height: 0; overflow-y: auto
 *     stopka     flex: 0 0 auto
 *
 * `min-height: 0` na kontenerze i na liście nie jest ozdobą: bez niego element
 * `flex` nie kurczy się poniżej rozmiaru treści i lista zamiast własnego
 * suwaka rozpycha pasmo, wypychając blok wersji poza okno. To jest dokładnie
 * ta usterka, którą trzy rundy zamawiały do naprawienia.
 *
 * Punkt łamania 1099 px jest wspólny z `strona.css` i z aparatem wpisu:
 * powyżej działa pasmo, poniżej — pasek i nakładka. Wymiana jest zupełna.
 */

/* ─── PASMO (desktop) ────────────────────────────────────────── */

.szewko-strona-spis {
  display: flex;
  position: sticky;
  flex-direction: column;

  /* Ponad falą domykającą arkusz (`.szewko-strona__fala`, `z: 5`). Pasmo
     kończy się razem z siatką dokumentu, czyli DOKŁADNIE tam, gdzie leży fala
     — bez tego przycisk „Drukuj / zapisz PDF" znikał pod nią na ostatnim
     ekranie długiego dokumentu. Złapane na zrzucie stopki z 1440 px. */
  z-index: 10;

  /* Odstęp kotwicy liczony, nie przepisany. Cztery pliki canvasu podają trzy
     różne liczby (90, 80 i `114` wpisane w JS), bo każdy przepisywał WYNIK
     działania „dolna krawędź paska + 24 px". Tutaj jest to działanie;
     `--szewko-pasek-wysokosc` stoi w `header.css`. */
  top: calc(var(--szewko-pasek-wysokosc) + var(--space-lg));

  /* `100vh − 138px` z canvasu, rozpisane na składniki: wysokość paska,
     odstęp nad spisem i taki sam odstęp pod nim. */
  min-height: 0;
  max-height: calc(100vh - var(--szewko-pasek-wysokosc) - var(--space-lg) * 2);

  @media (max-width: 1099px) {
    display: none;
  }
}

.admin-bar .szewko-strona-spis {
  top: calc(var(--szewko-pasek-wysokosc) + var(--space-lg) + 32px);
  max-height: calc(100vh - var(--szewko-pasek-wysokosc) - var(--space-lg) * 2 - 32px);
}

.szewko-strona-spis__nadtytul {
  flex: 0 0 auto;
  margin: 0 0 10px;
  color: var(--color-camel-brown);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Suwak wąski i w tonacji palety — natywny jasnoszary walec na papierze widać
   bardziej niż tekst (runda r1, punkt 13; canvas ma na to własne reguły
   `.spis::-webkit-scrollbar`). */
.szewko-strona-spis__lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 var(--space-sm) 0 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-camel-brown) 28%, transparent) transparent;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-camel-brown) 28%, transparent);
  }

  & a {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    min-height: 44px;
    border-left: 2px solid transparent;
    padding: 9px 0 9px 13px;
    color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    text-wrap: pretty;

    &:hover {
      color: var(--color-desert-rust);
    }
  }

  /* Pozycja aktywna — kreska Desert Rust przy lewej krawędzi, pogrubienie
     i pełny kontrast. Klasy nie ma: stan niesie `aria-current`, czyli ten sam
     atrybut, którym czytnik ekranu dowiaduje się, gdzie jesteśmy. Jedna
     prawda, dwóch odbiorców. */
  & a[aria-current='true'] {
    border-left-color: var(--color-desert-rust);
    color: var(--color-smoked-tent);
    font-weight: 600;
  }
}

.szewko-strona-spis__numer {
  color: color-mix(in srgb, var(--color-camel-brown) 85%, transparent);
  font-family: var(--font-ui);
}

/* ─── BLOK WERSJI I DRUKU (przyklejony na stałe) ─────────────── */

.szewko-strona-spis__stopka {
  flex: 0 0 auto;
}

.szewko-strona-spis__kreska {
  height: 1px;
  margin: 18px 0 16px;
  background: color-mix(in srgb, var(--color-camel-brown) 20%, transparent);
}

/* Metadane na pergaminie idą Camel Brownem przy kryciu co najmniej 85 %
   (4,67:1) — próg z `PORT.md` §2d. */
.szewko-strona-spis__wersja {
  margin: 0;
  color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
}

.szewko-strona-spis__drukuj {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: none;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-camel-brown) 85%, transparent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  gap: var(--space-sm);
  text-transform: uppercase;
  cursor: pointer;

  &[hidden] {
    display: none;
  }

  &:hover {
    color: var(--color-desert-rust);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  &:focus-visible {
    outline: 2px solid var(--color-desert-rust);
    outline-offset: 3px;
  }
}

/* ─── PRZYKLEJONY PASEK ROZDZIAŁU (≤ 1099 px) ────────────────── */

.szewko-strona-spis__pasek-slot {
  position: sticky;
  z-index: 60;
  top: var(--szewko-pasek-wysokosc);

  @media (min-width: 1100px) {
    display: none;
  }
}

/* Pasek administratora jest przyklejony do góry okna i nie przesuwa elementów
   `fixed` — ta sama korekta co przy nawigacji w `header.css`. */
.admin-bar .szewko-strona-spis__pasek-slot {
  top: calc(var(--szewko-pasek-wysokosc) + 32px);

  @media screen and (max-width: 782px) {
    top: calc(var(--szewko-pasek-wysokosc) + 46px);
  }
}

.szewko-strona-spis__pasek {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 28%, transparent);
  padding: 0 var(--space-lg);
  background: var(--color-smoked-tent);
  gap: 12px;
  text-align: left;
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: -3px;
  }
}

.szewko-strona-spis__pozycja {
  color: var(--color-parchment);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.szewko-strona-spis__strzalka {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-sand-gold);
}

/* ─── NAKŁADKA SPISU (≤ 1099 px) ─────────────────────────────── */

/* ⚠︎ Nakładka dokumentu jest JASNA, a nakładka spisu wpisu ciemna — i to nie
   jest niekonsekwencja. Canvas M2 rysuje ją na pergaminie z tą samą fakturą
   arkusza, co dokument pod spodem: spis rozdziałów ma być tym samym papierem,
   po którym się nawiguje, a nie osobnym ekranem. Skrypt jest wspólny, wygląd
   nie musi być. */
.szewko-strona-spis__nakladka {
  position: fixed;
  z-index: 400;
  top: var(--szewko-pasek-wysokosc);
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-parchment);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--color-parchment) 40%, transparent),
      color-mix(in srgb, var(--color-parchment) 40%, transparent)
    ),
    url("../img/scenes/produkt-tlo-metryka-b-cieplejszy-len.webp");
  background-position: center top;
  background-size: auto, 1200px 1200px;
  background-repeat: repeat, repeat;

  &[hidden] {
    display: none;
  }
}

.admin-bar .szewko-strona-spis__nakladka {
  top: calc(var(--szewko-pasek-wysokosc) + 32px);

  @media screen and (max-width: 782px) {
    top: calc(var(--szewko-pasek-wysokosc) + 46px);
  }
}

.szewko-strona-spis__panel {
  display: flex;
  flex-direction: column;
  height: 100%;

  &:focus-visible {
    outline: none;
  }
}

.szewko-strona-spis__panel-glowa {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in srgb, var(--color-camel-brown) 20%, transparent);
  padding: 10px 10px 10px var(--space-lg);
  gap: 12px;
}

.szewko-strona-spis__panel-tytul {
  color: var(--color-camel-brown);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.szewko-strona-spis__zamknij {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-camel-brown);
  font-size: 20px;
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid var(--color-desert-rust);
    outline-offset: -3px;
  }
}

.szewko-strona-spis__lista--nakladka {
  padding: 6px var(--space-lg) 12px;

  & a {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    min-height: 46px;
    padding: var(--space-sm) 0 var(--space-sm) 12px;
    font-size: 16px;
  }
}

/* W nakładce blok wersji i druku ma własny margines dolny — canvas M2 l. 123
   (`padding: 0 24px 20px`). W paśmie tego marginesu nie ma, bo pasmo kończy
   się razem z lepkim kontenerem. */
.szewko-strona-spis__nakladka .szewko-strona-spis__stopka {
  padding: 0 var(--space-lg) 20px;
}

/* ─── DRUK ───────────────────────────────────────────────────── */

/* Aparat nawigacyjny nie ma na papierze czego robić: spis prowadzi kotwicami,
   przyklejony pasek nie ma do czego się przykleić, a przycisk druku na
   wydruku jest żartem.
   ⚠︎ Reguła stoi TUTAJ, a nie w `strona.css`, i to nie jest kwestia porządku:
   `page.php` kolejkuje `strona.css` PRZED partami, więc ten arkusz ładuje się
   później i przy równej specyficzności wygrywa. Ta sama reguła napisana tam
   nie działała. */
@media print {
  .szewko-strona-spis,
  .szewko-strona-spis__pasek-slot,
  .szewko-strona-spis__nakladka {
    display: none;
  }
}