/* Strona ze spisem kursow (wersja publiczna, plik spis-kursow.html).
   Kolory i typografia pochodza z fundamentu (app-css-01) — tu tylko uklad.
   Wszystkie reguly celuja w KLASY `spis-*`, zadna w goly znacznik. */

/* Pasek naglowka — ten sam gradient, wysokosc i biala czcionka co naglowek
   lewego panelu w aplikacji (.brand), zeby spis nie wygladal jak obca strona. */
/* Przypiety do gory okna — nie znika przy przewijaniu (Tom 2026-10-24); dotyczy
   strony glownej i ekranow konta (konto.html), ktore uzywaja tego samego paska. */
.spis-pasek {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  box-sizing: border-box;
  padding: 7px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  display: flex;
  align-items: center;
}

/* Tlo paska idzie przez cala szerokosc okna, ale napis trzyma sie tej samej
   niewidzialnej kolumny co tresc nizej. Bez tego na szerokim ekranie tytul
   zostawal przy lewej krawedzi, a tresc uciekala na srodek (zmierzone 486 px
   rozjazdu przy oknie 1920). Ta sama szerokosc i padding co `.spis-strona`. */
.spis-pasek-srodek {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.spis-pasek-tytul {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 600;
}

.spis-strona {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.spis-wstep {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.spis-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
}

/* Druga grupa kafli („Pozostałe kursy”) pod kupionymi — ten sam odstep co miedzy
   lista a sekcja „Jak to działa”. Dwie klasy, bo `.spis-sekcja-tytul` nizej w pliku
   zeruje gorny margines. */
.spis-sekcja-tytul.spis-sekcja-pozostale {
  margin-top: 2.5rem;
}

.spis-pusto {
  margin: 0;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   TRYB CZYTANIA (wersja publiczna, klasa `tryb-czytania` na <body>)

   Aplikacja lokalna NIGDY nie dostaje tej klasy, wiec ponizsze reguly sa dla niej
   martwe. Chowamy to, czego wersja publiczna nie obsluguje — serwer i tak odrzuca
   te akcje, a przycisk, ktory nic nie robi, to blad interfejsu (regula 21
   UI_GUIDELINES: zero martwych odwolan).
   --------------------------------------------------------------------------- */

.czytanie-powrot {
  display: none;
}

/* Powrot do spisu stoi w naglowku lewego panelu (gradient akcentu), wiec musi byc
   BIALY — dawny `--accent-dark` byl dokladnie kolorem konca gradientu i znikal
   w tle. Krój i wielkosc jak tytul kursu, ktory dotad stal w tym miejscu. */
.tryb-czytania .czytanie-powrot {
  display: inline-block;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
}

.tryb-czytania .czytanie-powrot:hover,
.tryb-czytania .czytanie-powrot:focus-visible {
  text-decoration: underline;
}

/* Tytul kursu stoi w naglowku okna glownego (nad OG) — tak samo w aplikacji
   lokalnej, jak i w wersji publicznej (Tom, 2026-09-09; wczesniej tylko tu).
   Tam tlo jest jasne, wiec czcionka bierze zwykly kolor tekstu, nie bialy.
   Pogrubienie i kolor takie same jak naglowek h1 tresci lekcji (.block h1,
   app-css-06-tresc.css), zeby oba naglowki wygladaly spojnie (Tom, 2026-08-31). */
/* Opakowanie „Kurs: ” + tytuł — jeden kawałek paska, żeby oba trzymały się
   tej samej linii i kurczyły się RAZEM (patrz moveTitleToTopbar, app-01). */
.app-title-wrap {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.topbar #appTitle {
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent-dark);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topbar #appTitle[contenteditable="true"] {
  cursor: text;
}

.topbar #appTitle[contenteditable="true"]:focus {
  overflow: visible;
  white-space: normal;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-radius: 6px;
}

/* #status pokazywal sciezke pliku lekcji („Strona: 01-01 | content/pages/01-01.json") —
   informacja dla autora kursu, nie dla czytelnika. Jego miejsce zajmuje tytul kursu. */
.tryb-czytania #toolbar,
.tryb-czytania #moreMenuBtn,
.tryb-czytania #learningModeBtn,
.tryb-czytania #courseInfoBtn,
.tryb-czytania #saveState,
.tryb-czytania #aiFlow,
.tryb-czytania #status,
.tryb-czytania .menu-actions {
  display: none;
}

/* Narzedzia edycji wewnatrz tresci: uchwyty przeciagania, narzedzia list i tabel,
   zmiana rozmiaru obrazu, pasek tagow strony. Przy czytaniu nie maja zastosowania. */
.tryb-czytania .view-drag-hint,
.tryb-czytania .list-row-tools,
.tryb-czytania .table-col-toolrow,
.tryb-czytania .image-resize-handle,
.tryb-czytania .page-tags-meta {
  display: none;
}

/* MIEJSCA NA ILUSTRACJE to notatki AUTORA kursu („tu wstaw obraz"), nie tresc dla
   czytelnika. Trzeci, ostatni bezpiecznik: nawet gdyby ktos opublikowal kurs z pustymi
   miejscami mimo ostrzezenia przy zapisie dokumentow, czytelnik ich nie zobaczy. */
.tryb-czytania .image-slot,
.tryb-czytania .lp-tag-ilu {
  display: none;
}

/* Tresc zostaje zaznaczalna (kopiowanie cytatu), ale nie miga w niej kursor pisania —
   samo zablokowanie zapisu nie wystarczy, jesli pole WYGLADA na edytowalne. */
.tryb-czytania [contenteditable] {
  caret-color: transparent;
}

/* Znak marki „Rozwijam się" w pasku naglowka (uwaga Toma 2026-10-13: zwykly napis
   wygladal slabo, ma byc w stylu logo; 2026-10-17: logo = sowa Toma, przy PRAWYM brzegu
   paska — jak na stronie kursu). Mala kopia sowy (zasoby/sowa-znak.png, 5 KB zamiast
   1,6 MB oryginalu) — jedno miejsce dla spisu kursow i ekranow konta. Adres /assets/
   strona publiczna juz przepuszcza (publikacja.py). */
.spis-pasek-marka {
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.spis-pasek-srodek {
  display: flex;
  align-items: center;
}

.spis-pasek-srodek::after {
  content: "";
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-left: auto;
  background: url("/assets/sowa-znak.png") center / contain no-repeat;
}

/* Gdy pod paskiem stoi duza sowa z powitaniem, mala na pasku bylaby powtorzeniem
   (Tom 2026-10-17). Klase daje spis-kursow.js razem z odslonieciem powitania. */
.z-powitaniem .spis-pasek-srodek::after {
  display: none;
}

/* „Zaloguj się" w pasku (tylko niezalogowany w sklepie, wstawia spis-kursow.js) — przy
   prawym brzegu, z obrysem, zeby wygladalo na przycisk. Gdy sowa w pasku jest widoczna,
   stoi zaraz za nim. */
.spis-pasek-zaloguj {
  margin-left: auto;
  padding: .35rem .9rem;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.spis-pasek-srodek:has(.spis-pasek-zaloguj)::after {
  margin-left: .75rem;
}

.spis-pasek-zaloguj:hover,
.spis-pasek-zaloguj:focus-visible {
  background: #fff;
  color: var(--accent-dark);
}

/* Menu „Moje konto" zalogowanego klienta (buduja je spis-kursow.js i konta_http.py) —
   prawy gorny rog paska, jak na innych stronach z kontem (audyt wygladu 2026-11-04).
   Przycisk w tym samym ksztalcie co „Zaloguj się", lista rozwija sie pod nim. */
.konto-menu {
  position: relative;
  margin-left: auto;
}

.spis-pasek-srodek:has(.konto-menu)::after {
  margin-left: .75rem;
}

.konto-menu-przycisk {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .9rem;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.konto-menu-przycisk::-webkit-details-marker {
  display: none;
}

/* Strzalka w dol rysowana dwiema krawedziami — nie znak z czcionki. */
.konto-menu-przycisk::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.konto-menu[open] > .konto-menu-przycisk::after {
  margin-top: .2rem;
  transform: rotate(-135deg);
}

.konto-menu-przycisk:hover,
.konto-menu-przycisk:focus-visible,
.konto-menu[open] > .konto-menu-przycisk {
  background: #fff;
  color: var(--accent-dark);
}

.konto-menu-lista {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  padding: .5rem 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.konto-menu-email {
  margin: 0 0 .35rem;
  padding: .5rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.konto-menu-adres {
  color: var(--text);
}

.konto-menu-pozycja {
  padding: .6rem 1rem;
  color: var(--text);
  font-size: 1rem;
  text-decoration: none;
}

.konto-menu-pozycja:hover,
.konto-menu-pozycja:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* „się" lzejsze od „Rozwijam" — dwa ciezary w jednym napisie daja mu charakter znaku. */
.spis-pasek-marka-lekko {
  font-weight: 400;
  opacity: .9;
}

.spis-pasek-marka:hover,
.spis-pasek-marka:focus-visible {
  opacity: .9;
}

/* Powitanie na stronie glownej strony dla klientow (pomysl Toma 2026-10-17): sowa macha
   skrzydlem, obok dymek „Witaj na rozwijamsie.pl". Widoczne tylko w sklepie — strona
   testowa z haslami grupowymi zostaje bez niego (spis-kursow.js zdejmuje `hidden`).
   Sowa po PRAWEJ, przy prawej krawedzi kolumny tresci (Tom 2026-10-17) — w HTML stoi
   pierwsza, wiec kolejnosc odwraca `row-reverse`. */
.spis-powitanie {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 1.75rem;
  margin: 0 0 2rem;
}

.spis-powitanie[hidden] {
  display: none;
}

.spis-powitanie-sowa {
  flex: 0 0 auto;
  width: 190px;
  height: auto;
}

/* Dymek z ogonkiem wskazujacym na sowe po prawej (obrocony kwadrat z tym samym obrysem). */
.spis-powitanie-dymek {
  position: relative;
  margin: 0;
  padding: 1.1rem 1.6rem;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 22px;
  box-shadow: var(--shadow);
  color: var(--accent-dark);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Dwa wiersze dymku: powitanie duze, pod nim mniejsze, losowane zdanie. */
.spis-powitanie-witaj,
.spis-powitanie-zdanie {
  margin: 0;
}

.spis-powitanie-zdanie {
  margin-top: .35rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.spis-powitanie-dymek::before {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--panel);
  border-right: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  .spis-powitanie {
    gap: 1.1rem;
    margin-bottom: 1.5rem;
  }

  .spis-powitanie-sowa {
    width: 120px;
  }

  .spis-powitanie-dymek {
    padding: .8rem 1rem;
    font-size: 1.15rem;
  }

  .spis-powitanie-zdanie {
    font-size: .95rem;
  }
}

/* ---------------------------------------------------------------------------
   STRONA GLOWNA SKLEPU (tylko strona dla klientow; sekcje odslania spis-kursow.js):
   haslo z przyciskiem, pasek liczb, „Jak to dziala”, stopka. Tekst: projekt sprzedazy,
   materialy/STRONA_GLOWNA_projekt.md (projekt 2, 2026-10-24). Kolory tylko z fundamentu.
   --------------------------------------------------------------------------- */
.spis-haslo[hidden],
.spis-jak[hidden],
.spis-stopka[hidden] {
  display: none;
}

/* Odstep pod haslem jak miedzy grupami kafli (2.5rem) — po usunieciu przycisku
   i paska liczb naglowek listy stal za blisko opisu (24 px). */
.spis-haslo {
  margin: 0 0 2.5rem;
}

.spis-haslo-tytul {
  margin: 0 0 .6rem;
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--accent-dark);
}

.spis-haslo-opis {
  max-width: 40rem;
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text);
}

/* Naglowki sekcji („Od czego chcesz zacząć?”, „Jak to działa”). */
.spis-sekcja-tytul {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

/* „Jak to działa” celowo NIE wyglada jak kafle kursow (Tom 2026-11-04): bez ramek
   i tla, oddzielone linia, z pelnymi kolkami numerow — nic tu nie jest do klikniecia.
   Od 2026-11-08 (Tom) stoi nad lista kursow, wiec linia oddziela ja od dolu. */
.spis-jak {
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.spis-jak-kroki {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  line-height: 1.5;
}

.spis-jak-krok {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.spis-jak-nr {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-dark);
  /* Kolor tla strony zamiast bialego: w ciemnym motywie akcent jest jasny. */
  color: var(--panel);
  font-weight: 700;
}

.spis-jak-nazwa {
  display: block;
  color: var(--text);
}

.spis-jak-opis {
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width: 700px) {
  .spis-jak-kroki {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.spis-stopka {
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.spis-stopka-linki {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  color: var(--muted);
  font-size: .95rem;
}

.spis-stopka-odnosnik {
  color: var(--accent-dark);
  font-weight: 600;
}

@media (max-width: 600px) {
  .spis-haslo-tytul {
    font-size: 1.6rem;
  }

  .spis-haslo-opis {
    font-size: 1rem;
  }
}