/* Samouczek (plan 65): warstwa oprowadzania nad żywą stroną + spis rozdziałów (/samouczek).
   Rysuje ją static/js/samouczek.js. Trzy elementy: .sam-tlo łapie kliknięcia, .sam-okno to podświetlona sekcja
   (wielki cień robi mgłę na reszcie strony), .sam-karta to szklana karta kroku (warstwa pływająca, jest na liście
   szkła w app.css). Mgła jest z koloru tła, więc w jasnym motywie strona blednie, a w ciemnym ciemnieje.
   Jedyny ruch: okno i karta przejeżdżają z sekcji na sekcję na wspólnej krzywej; tekst tylko się przygasza. */

.sam { position: fixed; inset: 0; z-index: 80; --sam-mgla: color-mix(in srgb, var(--bg) 74%, transparent); transition: opacity var(--t-wej) var(--ease); }
.sam-start, .sam-znika { opacity: 0; }
.sam-znika { transition-duration: var(--t-wyj); pointer-events: none; }
.sam-start *, .sam-sledzi .sam-okno { transition: none !important; }
.sam-tlo { position: absolute; inset: 0; }

/* Wyjątek od „tylko transform i opacity”: okno zmienia rozmiar, bo skalowanie zniekształciłoby zaokrąglenia i obrys.
   To jeden pusty element w osobnej warstwie (contain), więc układ treści strony się nie przelicza. */
.sam-okno {
  position: absolute; border-radius: 16px; pointer-events: none; contain: layout size;
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 200vmax var(--sam-mgla);
  transition: left var(--t-wej) var(--ease), top var(--t-wej) var(--ease), width var(--t-wej) var(--ease), height var(--t-wej) var(--ease);
}
.sam-bez-celu .sam-okno { box-shadow: 0 0 0 200vmax var(--sam-mgla); border-radius: 0; }

/* ---------- Karta kroku ---------- */
.sam-karta {
  position: absolute; left: 0; top: 0; width: 376px; max-width: calc(100vw - 24px); padding: 20px 20px 16px; border-radius: 22px;
  transition: transform var(--t-wej) var(--ease);
}
.sam-karta h2 { font: 600 18px/1.25 var(--font-head); letter-spacing: -0.015em; margin: 0 36px 8px 0; text-wrap: balance; outline: none; }
.sam-tekst p { margin: 0 0 9px; color: var(--muted); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.sam-tekst p:last-child { margin-bottom: 0; }
.sam-tekst b { color: var(--text); font-weight: 600; }
.sam-tekst kbd { position: relative; top: -1px; margin: 0 1px; color: var(--muted); }
.sam-zmiana h2, .sam-zmiana .sam-tekst { animation: sam-tekst var(--t-wej) var(--ease); }
@keyframes sam-tekst { from { opacity: 0; } }
.sam-zamknij { position: absolute; top: 12px; right: 12px; border-radius: 50%; }

.sam-postep { height: 3px; margin: 16px 0 12px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.sam-postep span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transition: transform var(--t-wej) var(--ease); }
.sam-stopka { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sam-gdzie { min-width: 0; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-przyciski { display: flex; gap: 8px; flex: none; }
.sam-przyciski .przycisk { padding: 7px 15px; }
.sam-przyciski .przycisk[hidden] { display: none; }

/* Telefon: karta dokuje się na dole (kciuk), a gdy sekcja sama pływa na dole (pasek, arkusz), na górze. */
@media (max-width: 760px) {
  .sam-karta { left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: none; padding: 18px 18px 14px; transform: none !important; }
  .sam-karta.sam-gora { top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
  .sam-stopka { flex-wrap: wrap; }
  .sam-przyciski { margin-left: auto; }
}

/* ---------- Spis rozdziałów ---------- */
.sam-spis { max-width: 760px; }
.sam-spis .zdanie { max-width: 30ch; }
.sam-spis .rzad-pod { font-size: 13px; }
.sam-spis-stopka { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 4px 2px 0; }
.sam-spis-stopka p { margin: 0; }
.sam-pytania-pod { margin: 10px 4px 0; }

/* ---------- Pytania i odpowiedzi (/samouczek/pytania, plan 65d) ---------- */
.pyt-spis { max-width: 760px; }
.pyt-spis .zdanie { max-width: 40ch; }
.pyt-szukaj { flex: 0 1 300px; min-width: 200px; }
.pyt-szukaj input { padding: 6px 12px; font-size: 13.5px; border-radius: 999px; }
.pyt { border-top: 1px solid var(--line); }
.pyt:first-child { border-top: 0; }
.pyt > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 4px; cursor: pointer; list-style: none; color: var(--text); font-weight: 500; }
.pyt > summary::-webkit-details-marker { display: none; }
.pyt > summary .kolo { flex: none; }
.pyt > summary .pyt-strzalka { margin-left: auto; color: var(--faint); transition: transform var(--t-wej, .2s) var(--ease, ease); }
.pyt[open] > summary .pyt-strzalka { transform: rotate(90deg); }
.pyt:target > summary, .pyt > summary:hover { color: var(--accent); }
.pyt-odp { padding: 0 4px 16px 48px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 64ch; }
.pyt-odp p { margin: 0 0 8px; }
.pyt-odp b { color: var(--text); font-weight: 600; }
.pyt-odp .pyt-wiecej { color: var(--faint); font-size: 13.5px; }
.pyt-odp .pyt-zrodlo { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; }
@media (max-width: 760px) { .pyt-odp { padding-left: 4px; } }

/* ---------- Zaproszenie na pulpicie (osoba, która samouczka jeszcze nie ruszyła) ---------- */
.sam-zaproszenie { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 14px 0 0; padding: 10px 12px 10px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.sam-zaproszenie p { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 13.5px; text-wrap: pretty; }
.sam-zaproszenie p b { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; }
.sam-zaproszenie .i { color: var(--faint); }
.sam-zaproszenie-akcje { display: flex; align-items: center; gap: 14px; flex: none; }
@media (max-width: 760px) {
  .sam-zaproszenie { flex-wrap: wrap; }
  .sam-zaproszenie-akcje { width: 100%; justify-content: flex-end; }
}