/* kurs-tryb-nauki.css
 *
 * Wyciagniete z 10 modulow narzedziem tools/styl-wyciagnij.py.
 * Edytuj tutaj — zmiana dziala we wszystkich modulach korzystajacych
 * z tego arkusza (wpis "css" w meta.json).
 */

#licznikModulu {
    position: fixed; right: 22px; bottom: 22px; width: 96px; height: 96px;
    border-radius: 50%; display: grid; place-items: center; z-index: 200;
    background: rgba(255, 255, 255, .88); border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(32, 34, 56, .16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .18s ease, box-shadow .18s ease;
    font-variant-numeric: tabular-nums; user-select: none;
}
#licznikModulu:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px rgba(32, 34, 56, .22); }
#licznikModulu svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#licznikModulu circle { fill: none; stroke-width: 7; }
#licznikModulu .tlo { stroke: var(--line); }
#licznikModulu .postep { stroke: #6950c7; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; transition: stroke-dashoffset .35s ease, stroke .35s ease; }
#licznikModulu.ukonczone .postep { stroke: #17692a; }
#licznikModulu .srodek { position: relative; text-align: center; line-height: 1.05; }
#licznikModulu .procent { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
#licznikModulu .ile { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
:root[data-motyw="ciemny"] #licznikModulu { background: rgba(27, 36, 56, .9); border-color: #2a3550; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
:root[data-motyw="ciemny"] #licznikModulu .procent { color: #ece9f7; }
:root[data-motyw="ciemny"] #licznikModulu .tlo { stroke: #2a3550; }
@media (max-width: 520px) {
    #licznikModulu { width: 80px; height: 80px; right: 12px; bottom: 12px; }
    #licznikModulu .procent { font-size: 18px; }
    #licznikModulu .ile { font-size: 9.5px; }
}
@media print { #licznikModulu { display: none; } }
.instant-quiz-item.zablokowane .opcje-lista { pointer-events: none; }
.instant-quiz-item.zablokowane .opcja-label { cursor: default; }
.instant-quiz-item.zablokowane .opcja-label.ukryta-opcja { display: none; }

.kroki-pasek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 22px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.kroki-tytul { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kroki-kropki { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.kropka { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 Inter, system-ui, sans-serif; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; padding: 0; transition: all .15s ease; }
.kropka:hover { border-color: #b9bccf; }
.kropka.aktywna { border-color: #6950c7; color: #6950c7; box-shadow: 0 0 0 3px rgba(105, 80, 199, .15); }
.kropka.zdobyta { background: #17692a; border-color: #17692a; color: #fff; }
.kropka.zdobyta.aktywna { box-shadow: 0 0 0 3px rgba(23, 105, 42, .2); }
.krok-nawigacja { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; }
.krok-postep { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.krok-postep.krok-gotowe { color: #17692a; }
.krok-pomin { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-decoration: none; cursor: pointer; }
.krok-pomin:hover { color: var(--ink); text-decoration: underline; }
:root[data-motyw="ciemny"] .kropka { background: #1b2438; border-color: #2a3550; }
:root[data-motyw="ciemny"] .kropka.zdobyta { background: #17692a; border-color: #17692a; }

/* Tryb podrecznika: informacje o postepie zamazane, zeby nie rozpraszaly przy czytaniu */.kroki-tytul, .kroki-kropki, #licznikModulu { transition: filter .22s ease, opacity .22s ease; }
.tryb-podrecznik .kroki-tytul,
.tryb-podrecznik .kroki-kropki,
.tryb-podrecznik #licznikModulu {
    filter: blur(5px); opacity: .5; pointer-events: none; user-select: none;
}

/* Zaliczenie sekcji: zielona plakietka z ptaszkiem */
.krok h2.ma-flage { padding-right: 86px; }
.check {
    position: absolute; right: 0; top: -4px; width: 72px; height: 72px;
    pointer-events: none; opacity: .28;
    animation: check-pop .4s cubic-bezier(.2, 1.5, .5, 1);
}
.check svg { width: 100%; height: 100%; display: block; }
@keyframes check-pop {
    0% { transform: scale(.55); }
    100% { transform: scale(1); }
}
:root[data-motyw="ciemny"] .check circle:first-child { fill: #40c057; }
@media (max-width: 520px) { .check { width: 54px; height: 54px; } .krok h2.ma-flage { padding-right: 66px; } }

/* Osadzanie animacji i symulacji (iframe + link pelnoekranowy) */
.anim-embed { width: 100%; height: 560px; display: block; margin: 10px 0 6px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; }
.anim-fullscreen { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 13px;
  font-weight: 700; color: #6950c7; text-decoration: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; background: var(--soft); }
.anim-fullscreen:hover { background: #eeeaff; border-color: #b9bccf; }
:root[data-motyw="ciemny"] .anim-fullscreen { color: #b197fc; background: #1b2438; border-color: #2a3550; }
:root[data-motyw="ciemny"] .anim-fullscreen:hover { background: #202b42; }
@media (max-width: 640px) { .anim-embed { height: 480px; } }

/* Ramka "przeczytaj fragment" — uczeń wraca do sekcji, z której pochodzi pytanie. */
.fragment-btn { margin-top: 10px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-xs); background: var(--soft); color: var(--purple);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fragment-btn:hover { background: var(--purple-soft); border-color: var(--purple); }
.fragment-okno { width: min(720px, calc(100vw - 32px)); max-height: 82vh; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  color: var(--ink); box-shadow: var(--shadow); }
.fragment-okno::backdrop { background: rgba(20, 22, 38, .55); }
.fragment-tytul { margin: 0 0 12px; font-size: 19px; }
.fragment-tresc { max-height: 56vh; overflow: auto; font-size: 15px; line-height: 1.65; }
.fragment-tresc h3 { margin-top: 16px; }
.fragment-stopka { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.fragment-link { font-size: 13px; }
.fragment-zamknij { padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--soft); font: inherit; font-size: 13px; cursor: pointer; }
:root[data-motyw="ciemny"] .fragment-okno { background: #141b2d; }