/* ═══ WYBÓR PRZEDMIOTU PRZY WGRYWANIU ═══
   Ten sam szkielet co okno doładowania (.np*), więc wygląda jak reszta
   aplikacji i nie wymaga własnego nagłówka ani stopki. */
.wg-okno{width:min(520px,100%);}

.wg-lista{display:grid;gap:var(--s2);padding:var(--s6) var(--s8) var(--s3);
  max-height:38vh;overflow-y:auto;}
.wg-p{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);text-align:left;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);}
.wg-p:hover{border-color:var(--ink-3);}
.wg-p.on{border-color:var(--accent);background:var(--accent-bg);}
.wg-p-n{font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;}
.wg-p-m{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);flex:none;}

.wg-nowy{padding:var(--s3) var(--s8) var(--s5);}
.wg-nowy label{display:block;font-size:var(--t-xs);color:var(--ink-2);
  font-weight:500;margin-bottom:var(--s2);}
/* Nazwa dostaje resztę miejsca, data tyle, ile zajmuje — pole daty ma
   szerokość narzuconą przez przeglądarkę i rozjeżdża równy podział. */
.wg-pola{display:flex;gap:var(--s3);}
.wg-pola input{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);background:var(--bg);
  color:var(--ink);font-family:var(--f-sans);min-width:0;}
.wg-pola #wgNazwa{flex:1;}
.wg-pola #wgData{flex:none;font-family:var(--f-mono);font-size:var(--t-xs);}
.wg-pola input:focus{outline:none;border-color:var(--accent);}
.wg-hint{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;margin-top:var(--s3);}

.np-stopka .btn-p[disabled]{opacity:.45;cursor:not-allowed;}

@media(max-width:560px){
  .wg-lista,.wg-nowy{padding-left:var(--s5);padding-right:var(--s5);}
  .wg-pola{flex-direction:column;}
  .wg-pola #wgData{width:100%;}
}

/* Uwaga przy częściowym niepowodzeniu: część plików weszła, część nie.
   Kolor ostrzegawczy, ale bez czerwieni — notatki jednak powstały. */
.przetw-uwaga{color:var(--accent-ink);font-weight:500;}
.przetw-zamknij{display:block;margin:var(--s5) auto 0;}

/* Potwierdzenie po wysłaniu linku do logowania. Zastępuje formularz,
   bo drugie kliknięcie „Wyślij link" i tak trafi w limit dostawcy poczty. */
.gate-wyslane{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
  background:var(--accent-bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s5);}
.gate-wyslane b{color:var(--ink);}

/* Pusty kafel pulpitu. Ton informacyjny, nie ostrzegawczy — brak treści
   przy pierwszym logowaniu jest normalny, a nie awarią. */
.pl-pusto-kafel{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6;
  padding:var(--s2) 0 var(--s4);max-width:40ch;}

/* Powrót z pojedynczego przedmiotu do listy. Po lewej, bo to ruch wstecz,
   a pasek nad kartą trzyma go poza treścią przedmiotu. */
.pm-wstecz{justify-content:flex-start;}
.pm-wstecz a{text-decoration:none;}
.pm-jeden .card-h h2{display:none;}
/* bez tytułu pigułka z terminem stoi na początku wiersza, nie po pustce */
.pm-jeden .card-h{gap:var(--s4);}

/* ═══ WZORY Z SILNIKA ═══
   Wzór jest tu treścią, nie ozdobą, więc dostaje największy stopień pisma
   i krój jednoelementowy — w proporcjonalnym „Σ(xᵢ − x̄)²" rozjeżdżają się
   odstępy wokół znaków działań. */
.wzr-siatka{display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.wzr{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s6);
  background:var(--surface);display:flex;flex-direction:column;gap:var(--s2);}
.wzr-e{font-family:var(--f-mono);font-size:1.02rem;line-height:1.5;
  color:var(--ink);overflow-wrap:anywhere;}
.wzr-n{font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;}
.wzr-d{font-size:var(--t-xs);color:var(--ink-2);line-height:1.6;margin:0;}
.wzr-s{margin-top:auto;padding-top:var(--s2);color:var(--ink-3);}
@media(max-width:640px){.wzr-siatka{grid-template-columns:1fr;}}

/* ═══ KAFLE ZAKUPU W KONCIE ═══
   Cena największa, bo to jedyna liczba, dla której student tu patrzy.
   Nazwa nad nią, zawartość pod — kolejność decyzji: co to jest, ile
   kosztuje, co dostaję. */
.pk-blok{border-top:1px solid var(--line);}
.pk-blok .lab{margin-bottom:var(--s4);}
.pk-siatka{display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
.pk{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:var(--s4) var(--s5);text-align:left;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer;
  transition:border-color .16s var(--ease),transform .16s var(--ease);}
.pk:hover{border-color:var(--accent);transform:translateY(-1px);}
.pk-n{font-size:var(--t-xs);color:var(--ink-2);font-weight:500;}
.pk-c{font-family:var(--f-serif);font-size:var(--t-xl);font-weight:600;
  letter-spacing:-.02em;line-height:1.15;}
.pk-o{font-family:var(--f-mono);font-size:10px;color:var(--ink-3);}
.pk-nota{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;margin-top:var(--s4);}
@media(max-width:560px){.pk-siatka{grid-template-columns:1fr 1fr;}}

/* Pasek zużycia stron w Koncie.
   `.trk` jest znacznikiem liniowym, więc `max-width` w atrybucie stylu
   go nie dotyczył: pasek rozciągał się na całą szerokość wiersza i miał
   24 px wysokości zamiast czterech, bo wysokość brała się z interlinii.
   Ten sam błąd siedział w karcie demonstracyjnej — widać go dopiero,
   gdy pasek jest częściowo wypełniony. */
.pass-trk{display:block;max-width:260px;}

/* ═══ SŁABE PUNKTY NA PULPICIE ═══
   Treścią słabego punktu jest całe pytanie egzaminacyjne, więc bywa długie.
   `.pl-slaby-t` miało już nowrap i ellipsis, ale nic go nie ścieśniało:
   element w siatce rozpycha się do szerokości treści, dopóki nie dostanie
   `min-width: 0`. Wielokropek nie miał kiedy zadziałać, a tekst wychodził
   poza kafel. Ten sam błąd co wcześniej przy nazwie przedmiotu. */
.pl-slaby{min-width:0;}
.pl-slaby > span{min-width:0;overflow:hidden;}
.pl-slaby-t,.pl-slaby-m{display:block;min-width:0;}

/* ═══ WZÓR: SKŁAD ZAMIAST CIĄGU ZNAKÓW ═══
   Świadomie bez LaTeX. Te wzory są w większości słowne („Zysk = Przychody
   ze sprzedaży − Koszty…"), więc złożenie matematyczne nic by nie dało,
   a wymagałoby drugiego pola z silnika. Robotę odwala odstęp wokół działań
   i wyróżniony znak — to po nich oko rozpoznaje wzór. */
.fx-op{font-style:normal;color:var(--accent-ink,var(--accent));
  padding:0 .12em;font-weight:500;}
.wzr-e{font-family:var(--f-sans);font-size:1.06rem;line-height:1.65;
  letter-spacing:-.005em;overflow-wrap:anywhere;}

/* Przykład pod wzorem — powód, dla którego student w ogóle wie, co
   w co podstawić. */
.wzr-p{border-top:1px dashed var(--line);padding-top:var(--s3);margin-top:var(--s2);}
.wzr-p p{font-size:var(--t-xs);color:var(--ink-2);line-height:1.6;margin:2px 0 0;}
.wzr-w{font-family:var(--f-mono);color:var(--ink)!important;font-weight:500;}
.wzr{gap:var(--s3);}

/* Wzór przy zadaniu krok po kroku */
.zad-wzor{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);
  background:var(--bg-2);border-radius:var(--r-sm);}
.zad-wzor .fx{font-size:var(--t-sm);}

/* ═══ ŚCIĄGA ═══ */
.sheet-wiecej{font-family:var(--f-mono);font-size:9px;color:var(--ink-3);
  font-weight:400;letter-spacing:.04em;}

/* ═══ NOTATKA: ODDECH ═══
   Wartości typograficzne (68ch, interlinia 1,75) były dobre — tłok brał się
   z treści, w której połowa akapitów to przepisane przykłady liczbowe.
   To naprawia prompt silnika. Tu dokładamy tylko trochę powietrza między
   akapitami i wyraźniejszą przerwę przed nagłówkiem sekcji. */
.note p{margin-bottom:var(--s6);}
.note h2,.note h3{margin-top:var(--s12);}
.note h2:first-child,.note h3:first-child{margin-top:0;}

/* Wzór na ściądze: krój humanistyczny zamiast maszynowego.
   `.sheet-blk .fx` i `.fx` z k-reszta.css ustawiały font o stałej
   szerokości — i to jest dokładnie ten wygląd „wpisane na klawiaturze",
   o który chodziło. Wzory są tu w większości słowne, więc krój maszynowy
   nie daje nic poza wrażeniem, że to fragment kodu. */
.sheet-blk .fx,html[data-widok="sciaga"] .fx{font-family:var(--f-sans);
  font-size:var(--t-xs);line-height:1.55;letter-spacing:-.005em;}
.zad-wzor .fx{font-family:var(--f-sans);}

/* ═══ NAGŁÓWEK ZADANIA ═══
   `.zad-h .lab{margin-left:auto;flex-shrink:0}` zakładało, że źródło to
   krótki numer slajdu. Silnik potrafi wstawić tam całe zdanie („ZASADA
   PODSTAWOWA: WPŁYW NIESPRZEDANYCH ZAPASÓW…"), które przy flex-shrink:0
   zabierało cały wiersz i ściskało tytuł do wąskiej kolumny łamiącej się
   na pięć linii. Tytuł ma pierwszeństwo, źródło ustępuje. */
.zad-h{flex-wrap:wrap;}
.zad-h h3{flex:1 1 60%;min-width:0;}
.zad-h .lab{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:34%;}
@media(max-width:700px){
  .zad-h h3{flex:1 1 100%;}
  .zad-h .lab{margin-left:0;max-width:100%;}
}

/* ═══ WYKRESY RYSOWANE OD NOWA ═══ */
.wyk{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  margin-bottom:var(--s5);background:var(--surface);}
.wyk-h{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s2);}
.wyk-h h3{flex:1 1 60%;min-width:0;font-size:var(--t-lg);font-weight:500;}
.wyk-h .lab{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wyk-opis{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;margin-bottom:var(--s4);}
.wyk-plotno{background:var(--bg-2);border-radius:var(--r-md);padding:var(--s3);}
.wyk-svg{width:100%;height:auto;display:block;}
.wyk-os{stroke:var(--line);stroke-width:1.5;}
.wyk-osp{fill:var(--ink-3);font-family:var(--f-mono);font-size:10px;}
.wyk-pkt{fill:var(--ink-2);font-family:var(--f-mono);font-size:10px;}
/* krzywa sterowana suwakiem — łagodne przejście, żeby ruch był czytelny */
.wyk-rusza{transition:d .12s linear;}
.wyk-legendy{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);
  padding:0 var(--s2);}
.wyk-leg{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--ink-2);}
.wyk-leg i{width:14px;height:3px;border-radius:2px;display:inline-block;}
.wyk-suwak{margin-top:var(--s5);}
.wyk-suwak label{display:block;font-size:var(--t-xs);color:var(--ink-2);
  font-weight:500;margin-bottom:var(--s2);}
.wyk-suwak input{width:100%;accent-color:var(--accent);}
.wyk-suwak-o{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;margin-top:var(--s2);}
.wyk-wniosek{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);}
.wyk-wniosek p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;margin-top:2px;}

/* ═══ KAZUSY ═══ */
.kaz{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  margin-bottom:var(--s5);background:var(--surface);}
.kaz-stan{font-size:var(--t-sm);line-height:1.7;margin-bottom:var(--s4);}
.kaz-pyt{font-weight:600;line-height:1.6;margin-bottom:var(--s4);}
.kaz-roz{background:var(--bg-2);border-radius:var(--r-md);padding:var(--s5);}
.kaz-roz p{font-size:var(--t-sm);line-height:1.7;margin-top:var(--s2);}
.kaz-pod{color:var(--ink-2);}

/* ═══ OCENA FISZKI ═══
   Dwa przyciski, bo trzeci stopień („prawie umiałem") w praktyce znaczy
   „nie umiałem", a wybór między trzema opcjami spowalnia to, co ma być
   szybkie. */
.fk-oceny{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;
  margin-top:var(--s6);}
.fk-oceny-o{flex:1 1 100%;text-align:center;font-size:var(--t-xs);
  color:var(--ink-3);margin-top:var(--s2);}

/* ═══ GRUPA ═══ */
.grp-kod{font-family:var(--f-mono);font-size:1.5rem;letter-spacing:.22em;
  font-weight:500;color:var(--accent-ink,var(--accent));margin-bottom:var(--s2);}
.grp-pola{display:flex;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap;}
.grp-pola input{font-family:var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
  background:var(--bg);color:var(--ink);width:9em;}
.grp-pola input:focus{outline:none;border-color:var(--accent);}
/* Ocena fiszki stoi w osobnym wierszu pod nawigacją, nie obok niej —
   „Poprzednia/Następna" to ruch po talii, a „Umiem/Nie umiałem" to
   decyzja o nauce. Zmieszane w jednym rzędzie czytają się jak cztery
   równorzędne opcje. */
.fk-oceny{border-top:1px solid var(--line);padding-top:var(--s5);
  max-width:420px;margin-left:auto;margin-right:auto;}

/* ═══ DEMO BEZ KONTA ═══
   Przycisk na bramce: widoczny, ale podrzędny wobec logowania — demo
   jest ścieżką zapasową, nie główną. */
.gate-demo{display:inline-flex;align-items:center;gap:6px;margin:var(--s4) 0 var(--s2);
  font-size:var(--t-sm);color:var(--ink-2);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;}
.gate-demo:hover{color:var(--ink);}

/* Duszek na ekranie wyniku testu — nad liczbą, w rozmiarze akcentu,
   nie bohatera: liczba wyniku zostaje najważniejsza. */
.score-dz{--r:96px;display:inline-block;margin-bottom:var(--s3);}

/* ── UKŁAD: kolumna treści na środku ──
   Każdy widok ma nadaną szerokość (720–1280 px), ale .main jest
   flex-kolumną, więc treść kleiła się do lewej i przy 1440 px po prawej
   wisiała pusta połowa ekranu. Wyśrodkowanie robi z nadmiaru miejsca
   ramę kompozycji zamiast martwego pola. Pasek góry zostaje na całej
   szerokości — środkuje się tylko treść. */
.view{margin-inline:auto;}

/* ── WZORY SKŁADANE KATEX-EM ──
   Zapis matematyczny idzie przez KaTeX; kontener tylko pilnuje,
   żeby długi wzór przewijał się w sobie zamiast rozpychać kartę. */
.fx-tex{display:block;overflow-x:auto;padding:var(--s1) 0;}
/* ── PLANER ── */
.pl2{max-width:820px;margin-inline:auto;}
.pl2-tryby{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5);
  flex-wrap:wrap;}
.pl2-budzet{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--ink-3);}
.pl2-zmien{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink,var(--accent));
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
[data-theme="dark"] .pl2-zmien{color:var(--accent);}
.pl2-dzien{margin-bottom:var(--s5);}
.pl2-lista{display:flex;flex-direction:column;}
.pl2-poz{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;
  border-bottom:1px solid var(--line);}
.pl2-poz:last-child{border-bottom:0;}
.pl2-ik{flex:none;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font-size:13px;background:var(--bg-2);color:var(--ink-2);}
.pl2-ik-powtorka{color:var(--accent-ink,var(--accent));}
[data-theme="dark"] .pl2-ik-powtorka{color:var(--accent);}
.pl2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  color:inherit;text-decoration:none;}
.pl2-nazwa{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl2-t:hover .pl2-nazwa{color:var(--accent-ink,var(--accent));}
[data-theme="dark"] .pl2-t:hover .pl2-nazwa{color:var(--accent);}
.pl2-meta{font-family:var(--f-mono);font-size:10px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl2-min{flex:none;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);}
/* odhaczenie w widoku dnia — ta sama kratka i skreślenie, co na pulpicie */
.pl2-bx{flex:none;}
.pl2-zrobione .pl2-bx{background:var(--accent);border-color:var(--accent);
  background-image:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
  background-size:9px 9px;background-position:center;background-repeat:no-repeat;}
.pl2-zrobione .pl2-nazwa{text-decoration:line-through;color:var(--ink-3);}
.pl2-przesun{flex:none;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px var(--s2);font-size:var(--t-xs);
  color:var(--ink-2);cursor:pointer;}
.pl2-przesun:hover{border-color:var(--accent);color:var(--accent-ink,var(--accent));}
[data-theme="dark"] .pl2-przesun:hover{color:var(--accent);}
.pl2-staly{flex:none;color:var(--accent-ink,var(--accent));font-size:var(--t-xs);}
[data-theme="dark"] .pl2-staly{color:var(--accent);}
.pl2-stopka{text-align:center;margin-top:var(--s6);}
.pl2-miesiac .kal-siatka{max-width:560px;}
.pl2-kal-ile{position:absolute;right:3px;top:2px;font-size:9px;font-style:normal;
  color:var(--accent-ink,var(--accent));font-family:var(--f-mono);}
[data-theme="dark"] .pl2-kal-ile{color:var(--accent);}
.pl2-kal-op{margin-top:var(--s3);}
/* pytanie o czas dzienny */
.pl2-minuty{text-align:center;padding:var(--s12) var(--s5);max-width:430px;margin-inline:auto;}
.pl2-dz{--r:104px;display:inline-block;margin-bottom:var(--s3);}
.pl2-minuty h2{margin-bottom:var(--s2);}
.pl2-minuty p{color:var(--ink-2);font-size:var(--t-sm);margin-bottom:var(--s5);}
.pl2-minuty-w{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;}
@media(max-width:560px){
  .pl2-poz{flex-wrap:wrap;}
  .pl2-t{flex-basis:calc(100% - 80px);}
  .pl2-przesun{margin-left:38px;}
}

/* skróty klawiszowe nie istnieją na ekranie dotykowym */
@media(hover:none){.fisz-klawisze{display:none;}}

/* wzór słowny w układzie z dema — wyśrodkowany skład tekstowy */
.fx-wzor-t{font-family:var(--f-mono);text-align:center;font-size:var(--t-base);
  line-height:1.7;}
.fx-tex .katex-display{margin:0;}
.fx-tex-in{display:inline-block;vertical-align:middle;max-width:100%;overflow-x:auto;}

/* ── SŁOWNICZEK DO NAUKI ──
   Jedna kolumna do czytania jak w notatce, pojęcia pogrupowane po
   wykładach. Trzy kolumny kart były ścianą — oko nie wiedziało,
   gdzie czytać (uwaga z 30.07). */
.gl-lista{max-width:72ch;margin-inline:auto;}
.gl-pasek{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin:var(--s4) 0 var(--s6);flex-wrap:wrap;}
.gl-wyklad{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink,var(--accent));
  margin:var(--s8) 0 var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);}
[data-theme="dark"] .gl-wyklad{color:var(--accent);}
.gl-wyklad:first-of-type{margin-top:0;}
.gl-wpis{display:block;width:100%;text-align:left;padding:var(--s4) 0;
  border:0;border-bottom:1px solid var(--line);background:none;
  font:inherit;color:inherit;}
.gl-wpis:last-child{border-bottom:0;}
.gl-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);}
.gl-t{font-weight:600;font-size:var(--t-base);color:var(--ink);}
.gl-s{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);flex:none;}
.gl-d{margin:var(--s2) 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);
  max-width:60ch;}
/* tryb sprawdzania: wiersz zakryty zaprasza do kliknięcia */
.gl-wpis.zakryty{cursor:pointer;border-radius:var(--r-sm);}
.gl-wpis.zakryty:hover{background:var(--bg-2);}
.gl-wpis.zakryty:hover .gl-t{color:var(--accent-ink,var(--accent));}
[data-theme="dark"] .gl-wpis.zakryty:hover .gl-t{color:var(--accent);}
.gl-zakryte{color:var(--ink-3);}

/* Duszek wynurza się w strefie wgrywania — wrzucasz do studni,
   ktoś po drugiej stronie odbiera. Zastępuje anonimową ikonę uploadu. */
.drop-dz{--r:74px;display:inline-block;margin-bottom:var(--s2);}

/* ── Widoki nauki: akcja zamiast martwej listy ── */
/* wyróżnienie „zrób teraz" w powtórkach i słabych punktach */
.subj.pilny{box-shadow:inset 3px 0 0 var(--accent);}
/* selektor dorównuje kafelkowemu [data-lista="a"] .subj .pg .p,
   inaczej szarość kafelka wygrywa z kolorem akcji */
.pg-cta,[data-lista] .subj .pg .p.pg-cta{
  color:var(--accent-ink,var(--accent));font-weight:600;white-space:nowrap;}
[data-theme="dark"] .pg-cta,
[data-theme="dark"] [data-lista] .subj .pg .p.pg-cta{color:var(--accent);}
.subj:hover .pg-cta{text-decoration:underline;text-underline-offset:3px;}

/* pasek postępu fiszek — cienki, pod licznikiem */
.fisz-bar{max-width:560px;margin:var(--s2) auto var(--s4);height:3px;
  border-radius:2px;background:var(--line);overflow:hidden;}
.fisz-bar i{display:block;height:100%;background:var(--accent);
  border-radius:2px;transition:width .3s var(--ease);}

/* plan na pulpicie: wiersz to div, kwadracik jest przyciskiem,
   tytuł linkiem do treści */
.pl-zad{cursor:default;}
.pl-bx{background:none;padding:0;cursor:pointer;flex:none;}
a.pl-zad-t{color:inherit;text-decoration:none;}
a.pl-zad-t:hover{color:var(--accent-ink,var(--accent));text-decoration:underline;
  text-underline-offset:3px;}
[data-theme="dark"] a.pl-zad-t:hover{color:var(--accent);}

/* Duszek z lupą w pustym wyniku szukania */
.srch-dz{--r:56px;display:block;margin:0 auto var(--s2);}

/* Pasek narzędzi ściągi ma kończyć się tam, gdzie karta ściągi.
   Limit 68ch przyszedł z widoku notatki i zostawiał napis „mieści się
   na jednej stronie A4" wystający poza tło paska. */
.view:has(.sheet) .note-bar{max-width:none;}

/* Pasek „wersja pokazowa": przyklejony na dole, nad treścią, nigdy
   nie znika z oczu — bez niego demo wygląda jak cudze konto. */
.demo-pasek{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);
  z-index:350;display:flex;align-items:center;gap:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3) var(--s5);box-shadow:var(--sh-lg);max-width:min(92vw,600px);}
.demo-dz{--r:38px !important;flex:none;}
.demo-t{font-size:var(--t-xs);color:var(--ink-2);line-height:1.45;}
.demo-pasek .btn{flex:none;}
/* Na telefonie pasek robił się kartą na pół ekranu i zasłaniał treść.
   Kompakt: pełna szerokość przy dolnej krawędzi, jedna linia, bez duszka —
   maskotka jest ozdobą, a tu walczy o miejsce z treścią, którą demo sprzedaje. */
@media(max-width:560px){
  .demo-pasek{left:0;right:0;bottom:0;transform:none;max-width:none;
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:var(--s2) var(--s4);gap:var(--s3);}
  .demo-dz{display:none;}
  .demo-t{flex:1;min-width:0;}
}

/* Konto: przełącznik wskazówek + przycisk w jednej kolumnie */
.sam-ustaw{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);}

/* Kafel grupowy z wyborem liczby osób */
.pk-grupa{cursor:default;}
.pk-osoby{display:flex;align-items:center;gap:var(--s1);margin:var(--s1) 0;}
.pk-osoby .pg-krok{width:28px;height:28px;border:1px solid var(--line);
  border-radius:50%;background:var(--bg-2);color:var(--ink);font-size:1rem;
  line-height:1;cursor:pointer;padding:0;}
.pk-osoby .pg-krok:hover:not(:disabled){border-color:var(--accent);}
.pk-osoby .pg-krok:disabled{opacity:.35;cursor:default;}
.pk-ile{font-size:var(--t-xs);color:var(--ink-2);padding:0 var(--s1);white-space:nowrap;}
.pk-ile b{font-family:var(--f-serif);font-size:1.05rem;color:var(--ink);}
.pk-kup{margin-top:var(--s2);align-self:stretch;}

/* ═══ POLOWANIE NA BUGI UI (31.07) ═══ */
/* Zakładki: ZAWSZE jeden wiersz. Zawijanie wypychało pigułkę źródeł do
   osobnego wiersza z pustą przerwą (zrzuty Konrada 02.08) — przy nadmiarze
   zakładki przewijają się poziomo, na dotyku i na desktopie tak samo. */
.tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;align-items:center;}
.tabs::-webkit-scrollbar{display:none;}
.tabs .tab{flex:none;white-space:nowrap;}

/* Długi wzór KaTeX przewija się w swoim bloku zamiast wystawać z karty
   (zadania krok po kroku na 390 px). */
.katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%;}

/* Konto na telefonie: wiersz ustawień układa się w kolumnę zamiast
   wypychać przełącznik poza ekran. */
@media(max-width:560px){
  #root .gl-row{grid-template-columns:1fr;gap:var(--s2);}
  .sam-ustaw{align-items:flex-start;}
}

/* Paski narzędzi jadą ze stroną — „Sprawdź się" w słowniczku i zakładki
   przedmiotów były dostępne tylko na samej górze (uwaga Konrada 01.08).
   Tło NIE może być płaskim var(--bg): .main ma gradient (a-wizualny), więc
   płaski kolor odcinał się jako belka w obu motywach. Półprzezroczyste tło
   z rozmyciem zlewa się z gradientem i dalej zakrywa przewijaną treść. */
.tabs{position:sticky;
  /* Przyklejają się POD paskiem góry, a nie do krawędzi ekranu — jego
     realną wysokość publikuje z20-pasek-gory.js. Wcześniej top:0 razem
     z wyższym z-indeksem stawiało zakładki NAD paskiem i oba nachodziły
     na siebie na telefonie. */
  top:var(--wys-top,0px);z-index:19;
  background:color-mix(in srgb,var(--bg) 93%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.gl-pasek{position:sticky;
  /* Pod paskiem góry ORAZ pod zakładkami — obie wysokości ze zmiennych,
     bo obie zmieniają się między telefonem a dużym ekranem. */
  top:calc(var(--wys-top,0px) + var(--wys-tabs,48px));z-index:18;
  background:color-mix(in srgb,var(--bg) 93%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding-top:var(--s2);padding-bottom:var(--s2);margin-top:0;}
/* select w oknie edycji przedmiotu — jak inputy obok */
.wg-pola select{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);background:var(--bg);
  color:var(--ink);font-family:var(--f-sans);}
.pm-wstecz{justify-content:space-between!important;}

/* ═══ WYKRESY: wygląd podręcznikowy ═══ */
.wyk-siatka{stroke:var(--line-2);stroke-width:1}
.wyk-strzalka{fill:var(--ink-3)}
.wyk-duch{opacity:.32;stroke-dasharray:5 5}
.wyk-punkt{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.wyk-kl{font-family:var(--f-mono);font-size:12px}
.wyk-svg .wyk-osp{font-size:12.5px;fill:var(--ink-2)}
.wyk-svg .wyk-pkt{font-size:12px}
.wyk-plotno{padding:var(--s4) var(--s3)}
@media(max-width:640px){
  .wyk{padding:var(--s4)}
  .wyk-plotno{padding:var(--s2) 2px}
  .wyk-svg .wyk-osp{font-size:15px}
  .wyk-svg .wyk-pkt,.wyk-kl{font-size:14px}
  .wyk-h h3{font-size:var(--t-md)}
}

/* ═══ FEYNMAN: tryb ćwiczenia — jedno naraz, jak fiszki ═══
   Pisanie wymaga szerokiego pola POD pytaniem (naturalny kierunek wzroku),
   licznika postępu i zerowego szumu wokół. */
html[data-widok="feynman"] .view{max-width:760px}
.feyn2-pasek{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.feyn2-lic{flex:1;min-width:0;text-align:center}
.feyn2-lic span{font-size:var(--t-sm);color:var(--ink-2);display:block;margin-bottom:6px}
.feyn2-pasek .fisz-bar{max-width:240px;margin:0 auto}
.feyn2 .fey-prompt{margin-bottom:var(--s5)}
.feyn2 textarea{width:100%;min-height:min(300px,38vh);font-size:var(--t-base);
  line-height:1.7;resize:vertical}
.feyn2 .fey-instr{border:0;padding:0;margin-top:var(--s3);color:var(--ink-3)}
.feyn2 .fey-bar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-top:var(--s3)}
@media(max-width:640px){
  .feyn2-pasek{flex-wrap:wrap}
  .feyn2-lic{order:-1;flex-basis:100%}
  .feyn2 textarea{min-height:180px}
  .feyn2 .fey-bar{flex-wrap:wrap}
  .feyn2 .fey-bar .btn{flex:1}
}

/* ═══ ŹRÓDŁA SLAJDÓW: domyślnie schowane poza notatką ═══ */
html[data-zrodla="off"] .gl-s,
html[data-zrodla="off"] .fk-src,
html[data-zrodla="off"] .zad-h .lab,
html[data-zrodla="off"] .wyk-h .lab,
html[data-zrodla="off"] .fx-h .lab,
html[data-zrodla="off"] .art .s,
html[data-zrodla="off"] .expl .src,
html[data-zrodla="off"] .fey-meta,
html[data-zrodla="off"] .sheet-blk .src,
html[data-zrodla="off"] .sheet-blk .s{display:none}
.zrodla-btn{margin-left:auto;flex:none;align-self:center;font-size:12px;
  font-family:var(--f-sans);color:var(--ink-3);background:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;
  margin-bottom:2px;transition:color .15s var(--ease),border-color .15s var(--ease)}
.zrodla-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.tabs .zrodla-btn{margin-left:auto}
.tabs .zrodla-btn:not(:first-child){margin-left:auto}
/* widoki bez zakładek (test, pojedynczy przedmiot): pigułka nad treścią */
.view > .zrodla-btn{display:table;margin:0 0 var(--s4) auto}

/* ═══ PROGRAM POLECEŃ: karta w Koncie ═══ */
.pol-link{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.pol-link code{font-family:var(--f-mono);font-size:var(--t-sm);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;
  overflow-wrap:anywhere;min-width:0}

/* ═══ AUDYT MOBILE 01.08: cele dotykowe i mikrofonty ═══
   Lupka skupienia to udogodnienie desktopowe (mały cel, a bloki na
   telefonie i tak wypełniają ekran) — na dotyku znika. Drobne cele
   dostają niewidzialne powiększenie pola dotyku (::after), a fonty
   poniżej ~11 px podnosimy tylko na wąskim ekranie. */
@media(hover:none){
  .skup-lupa{display:none}
  /* niewidzialne powiększenie pola dotyku małych celów */
  .kal-d,.pl-bx,.oscz-wezel{position:relative}
  .kal-d::after,.pl-bx::after,.oscz-wezel::after{
    content:'';position:absolute;inset:-9px}
}
@media(max-width:640px){
  .pl-r,.pl-proc,.pl-slaby-m,.pl-zap-m{font-size:11px}
  .pl-kolo small{font-size:10px}
  .pl-dni small{font-size:10px}
  [data-lista="a"] .subj .dd small{font-size:.68rem}
  .zap-tag,[data-lista="a"] .zap-tag{font-size:11px}
  .sheet-blk h4{font-size:11.5px}
  .sheet-blk .fx,.sheet-blk code{font-size:12px}
  .st-l-hint,.tp{font-size:11px}
  .oscz-koniec-t{font-size:11.5px}
  .oscz-b{min-height:40px}
}

/* ═══ NOTATKA: uzupełnienia spoza materiałów zwinięte na końcu ═══ */
.gap-sekcja{margin-top:var(--s10);border-top:1px solid var(--line);padding-top:var(--s6)}
.gap-sekcja summary{cursor:pointer;font-weight:600;color:var(--warn);
  font-size:var(--t-sm);list-style-position:inside}
.gap-sekcja summary:hover{text-decoration:underline}
.gap-sekcja .gap-o{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s4) 0}
.gap-sekcja .gap-warn{margin-bottom:var(--s4)}

/* ═══ WYBÓR PAKIETU PO ZALOGOWANIU ═══ */
.pk2-okno{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s8);max-width:680px;width:calc(100vw - 32px);max-height:90vh;overflow-y:auto}
.pk2-okno h2{font-size:var(--t-xl);margin-bottom:var(--s2)}
.pk2-sub{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;margin-bottom:var(--s6);max-width:52ch}
.pk2-siatka{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.pk2-karta{position:relative;text-align:left;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s5);cursor:pointer;display:flex;flex-direction:column;
  gap:4px;transition:border-color .15s var(--ease)}
.pk2-karta:hover{border-color:var(--ink-3)}
.pk2-wyr{border-color:var(--accent)}
.pk2-tag{position:absolute;top:-9px;left:var(--s5);background:var(--accent);color:#fff;
  font-size:10.5px;padding:1px 8px;border-radius:999px}
.pk2-n{font-weight:600}
.pk2-c{font-family:var(--f-mono);font-size:var(--t-lg);color:var(--accent-ink)}
.pk2-o{font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}
.pk2-stopka{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s6)}
.pk2-stopka a{font-size:var(--t-sm);color:var(--ink-2)}
@media(max-width:560px){.pk2-siatka{grid-template-columns:1fr}.pk2-okno{padding:var(--s5)}}

/* Pasek zakładek: cieńsza wizualnie krawędź i oddech nad podkreśleniem —
   twarda linia przez całą szerokość robiła z paska belkę. */
.tabs{border-bottom-color:var(--line-2);padding-top:2px}

/* ═══ POZIOM NOTATKI W PRZYGOTOWANIU ═══ */
.poz-laduje{display:flex;gap:var(--s4);align-items:center;background:var(--bg-2);
  border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s5);
  margin-bottom:var(--s6)}
.poz-laduje p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;margin:0}

/* ═══ PRZETWARZANIE: wyjście z ekranu + mini-pasek postępu ═══ */
.przetw-schowaj{margin-top:var(--s4);background:none;border:0;cursor:pointer;
  color:var(--ink-2);font-size:var(--t-sm);text-decoration:underline;
  text-underline-offset:3px}
.przetw-schowaj:hover{color:var(--ink)}
.przetw-minis{position:fixed;right:16px;bottom:16px;z-index:350;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end}
.przetw-mini{display:flex;
  align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px 8px 10px;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.14);max-width:290px}
.przetw-mini .pm-dz .dz{width:34px;height:34px}
.pm-t{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left}
.pm-t b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:200px}
.pm-pasek{width:100%;height:4px;background:var(--bg-2);border-radius:2px;overflow:hidden}
.pm-pasek i{display:block;height:100%;background:var(--accent);border-radius:2px;
  transition:width .5s var(--ease)}
.przetw-mini.gotowe{border-color:var(--accent)}
.przetw-mini.gotowe b{color:var(--accent-ink)}
@media(max-width:640px){.przetw-minis{right:10px;bottom:76px}}

.przetw-eta{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s3)}
.przetw-eta b{color:var(--ink)}

/* ═══ OKNO POTWIERDZENIA PRZED GENEROWANIEM ═══ */
.potw-lista{list-style:none;margin:var(--s4) 0;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.potw-lista li{display:flex;justify-content:space-between;gap:var(--s4);
  padding:8px 12px;font-size:var(--t-sm);border-bottom:1px solid var(--line-2)}
.potw-lista li:last-child{border-bottom:0}
.potw-lista li span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.potw-lista li span:last-child{flex:none;color:var(--ink-3);font-family:var(--f-mono);
  font-size:var(--t-xs)}
.potw-wiecej{color:var(--ink-3)}
.potw-fakty{display:flex;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s2)}
.potw-fakty>div{display:flex;flex-direction:column;gap:2px}
.potw-fakty b{font-size:var(--t-lg)}

.czek-szczegol{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  margin-top:var(--s3);max-width:52ch;overflow-wrap:anywhere}

/* krok zadania: wzór przewija się w polu, proza łamie się jak tekst */
.zad-l{overflow-x:auto;max-width:100%}
.zad-l-txt{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;margin-top:4px}

/* ═══ PRZEDMIOTY: poziom 1 — kafle ═══ */
.prz-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--s5)}
.prz-kafel{display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  text-decoration:none;color:var(--ink);transition:border-color .15s var(--ease),
  transform .15s var(--ease)}
.prz-kafel:hover{border-color:var(--accent);transform:translateY(-2px)}
.prz-gora{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.prz-gora h2{font-size:var(--t-md);font-weight:600;min-width:0}
.prz-gora .pill{flex:none}
.prz-proc{font-family:var(--f-mono);font-size:34px;line-height:1;display:flex;
  align-items:baseline;gap:6px}
.prz-proc small{font-size:16px}
.prz-proc .lab{margin-left:2px}
.prz-meta{font-size:var(--t-sm);color:var(--ink-2)}
@media(max-width:640px){.prz-siatka{grid-template-columns:1fr}}


/* Na telefonie tekst jest gęsty i prześwitywał przez półprzezroczyste
   paski. Czytelność przed efektem szkła — tak samo jak w pasku góry.
   czytelność przed efektem */
@media(max-width:700px){
  .tabs,.gl-pasek{background:var(--bg);
    backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* ── odpowiedzi ustne: duszek zamiast emotki mikrofonu ──
   Mówi się do duszka. Słupki obok pokazują, że aplikacja słucha —
   rozpoznanie mowy w przeglądarce nie udostępnia poziomu dźwięku,
   więc nie udajemy pomiaru, tylko sygnalizujemy stan. */
.ust2-wej{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s4)}
.ust-dz{display:flex;align-items:center;gap:var(--s3);background:none;border:none;
  padding:var(--s2);border-radius:var(--r-lg);cursor:pointer;
  transition:background .2s var(--ease)}
.ust-dz:hover{background:var(--bg-2)}
.ust-dz:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ust-fale{display:flex;align-items:center;gap:4px;height:38px}
.ust-fale i{display:block;width:4px;height:8px;border-radius:2px;
  background:var(--ink-3);transition:height .2s var(--ease)}
.ust2-wej.slucha .ust-fale i{background:var(--accent);
  animation:ust-fala 900ms var(--e-miekki,cubic-bezier(.37,0,.63,1)) infinite}
.ust2-wej.slucha .ust-fale i:nth-child(2){animation-delay:110ms}
.ust2-wej.slucha .ust-fale i:nth-child(3){animation-delay:220ms}
.ust2-wej.slucha .ust-fale i:nth-child(4){animation-delay:330ms}
.ust2-wej.slucha .ust-fale i:nth-child(5){animation-delay:440ms}
@keyframes ust-fala{0%,100%{height:8px}50%{height:34px}}
@media(prefers-reduced-motion:reduce){
  .ust2-wej.slucha .ust-fale i{animation:none;height:22px}
}
.ust-podp{display:flex;flex-direction:column;gap:2px;font-size:var(--t-sm)}
.ust2-wej.slucha .ust-podp{color:var(--accent-ink)}
/* stan przepisywania nagrania: słupki gasną i pulsują wolniej */
.ust2-wej.przepisuje .ust-fale i{background:var(--ink-3);
  animation:ust-przepis 1400ms ease-in-out infinite}
.ust2-wej.przepisuje .ust-fale i:nth-child(2){animation-delay:160ms}
.ust2-wej.przepisuje .ust-fale i:nth-child(3){animation-delay:320ms}
.ust2-wej.przepisuje .ust-fale i:nth-child(4){animation-delay:480ms}
.ust2-wej.przepisuje .ust-fale i:nth-child(5){animation-delay:640ms}
@keyframes ust-przepis{0%,100%{opacity:.3}50%{opacity:1}}
.ust2-wej.przepisuje .ust-dz{cursor:progress}