/* ═══════════════════════════════════════════════════════════════
   POZOSTAŁE WIDOKI — każdy pod swoją rolę w nauce
   Wspólna zasada: szerokość dobrana do tego, CO się na ekranie robi.
   Czyta się wąsko, przegląda szeroko, szuka gęsto.
   ═══════════════════════════════════════════════════════════════ */

/* ── PRZEDMIOTY: przegląd stanu semestru ──
   Szeroko, bo porównuje się przedmioty między sobą. */
html[data-widok="przedmioty"] .view{max-width:1100px;}
html[data-widok="przedmioty"] .card{margin-bottom:var(--s5);}
html[data-widok="przedmioty"] .card-h h2{font-size:var(--t-lg);}

/* ── POWTÓRKI: kolejka na dziś ──
   Wąsko i duże cele — to lista do odklikania, nie do studiowania. */
html[data-widok="powtorki"] .view{max-width:820px;}
html[data-widok="powtorki"] .subj,
html[data-widok="powtorki"] .card-b > a{padding:var(--s5) var(--s2);}
html[data-widok="powtorki"] .dd{font-size:var(--t-lg);font-weight:600;}

/* ── SŁABE PUNKTY: naprawa błędów ──
   Liczba błędów prowadzi wzrok. Kolor ostrzegawczy, ale nie karcący —
   to ma zachęcać do powrotu, nie zawstydzać. */
html[data-widok="slabe"] .view{max-width:860px;}
html[data-widok="slabe"] .dd{width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,#C2410C 12%,transparent);
  color:#C2410C;font-family:var(--f-mono);font-size:var(--t-sm);font-weight:600;}
html[data-widok="slabe"] .mt{font-size:var(--t-xs);}

/* ── LUKI I SPRZECZNOŚCI: co się nie zgadza ──
   Brak i sprzeczność to dwie różne rzeczy — muszą wyglądać różnie. */
html[data-widok="luki"] .view{max-width:880px;}
.luk{border-left:3px solid var(--line);padding-left:var(--s5);margin-bottom:var(--s6);}
.luk-h{font-family:var(--f-serif);font-size:var(--t-md);font-weight:600;
  letter-spacing:-.01em;margin-bottom:var(--s2);}
.luk-o{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);}
.luk-sec{margin-bottom:var(--s10);}

/* ── WZORY: tablica do zerkania ──
   Gęsto i wielokolumnowo — szuka się wzrokiem, nie czyta po kolei. */
html[data-widok="wzory"] .view{max-width:1180px;}
html[data-widok="wzory"] .fx{break-inside:avoid;}
.fx-co,.fx{font-family:var(--f-mono);}

/* ── WYKRESY: manipulacja parametrem ──
   Wykres duży, suwaki tuż pod nim — inaczej oko traci związek
   między ruchem suwaka a zmianą krzywej. */
html[data-widok="wykresy"] .view{max-width:1000px;}
.wyk-svg{width:100%;height:auto;}
.wyk-ctrl{margin-top:var(--s4);}
.wyk-wniosek{font-size:var(--t-sm);line-height:1.6;border-left:2px solid var(--accent);
  padding-left:var(--s4);margin-top:var(--s5);}

/* ── ZADANIA KROK PO KROKU: rozwiązywanie ──
   Krok ma być na tyle duży, żeby dało się go przepisać na kartkę. */
html[data-widok="zadania"] .view{max-width:840px;}
.zad-t{font-size:var(--t-base);line-height:1.65;}
.zad-kroki{counter-reset:krok;}
.zad-k{font-size:var(--t-sm);line-height:1.7;padding:var(--s4) 0;
  border-top:1px solid var(--line-2);}
.zad-k:first-child{border-top:0;}

/* ── SCHEMATY: struktura pojęć ──
   Wyśrodkowane i duże — to obrazek, który ma zostać w pamięci. */
html[data-widok="schematy"] .view{max-width:940px;}
.sch{padding:var(--s6) 0;}
.drzewo{font-size:var(--t-sm);}

/* ── OŚ CZASU: chronologia ──
   Wąsko, bo czyta się z góry na dół jak historię. */
html[data-widok="linia"] .view{max-width:780px;}
.os-p{font-size:var(--t-sm);line-height:1.65;}
.os-uwaga{font-size:var(--t-xs);color:var(--ink-2);}

/* ── ARTYKUŁY (prawo): numer to klucz ──
   Numer artykułu wyróżniony, bo po nim się szuka i po nim pyta
   egzaminator. */
html[data-widok="artykuly"] .view{max-width:880px;}
.art-nr{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent);
  font-weight:600;letter-spacing:.04em;}
.art{line-height:1.7;font-size:var(--t-sm);}

/* ── KAZUSY: stan faktyczny kontra rozwiązanie ──
   Rozwiązanie musi być wizualnie oddzielone, żeby dało się
   najpierw pomyśleć samemu. */
html[data-widok="kazusy"] .view{max-width:840px;}
.kaz{line-height:1.7;font-size:var(--t-sm);}
.kaz-stan{background:var(--bg-2);border-radius:var(--r-md);padding:var(--s5);
  margin-bottom:var(--s5);}

/* ── SŁOWNICZEK: szybkie sprawdzenie ──
   Dwie kolumny, gęsto — to indeks, nie lektura. */
html[data-widok="slownik"] .view{max-width:1060px;}
/* hasła renderują się jako .gl-row, nie .term — dwie kolumny skracają
   drogę wzroku o połowę przy szukaniu pojęcia */
html[data-widok="slownik"] .card-b{columns:2;column-gap:var(--s10);}
html[data-widok="slownik"] .gl-row{break-inside:avoid;display:block;
  padding:var(--s3) 0;border-top:1px solid var(--line-2);border-bottom:0;}
html[data-widok="slownik"] .gl-row .t{font-weight:600;font-size:var(--t-sm);
  margin-bottom:2px;}
html[data-widok="slownik"] .gl-row .d{font-size:var(--t-xs);line-height:1.55;
  color:var(--ink-2);}
html[data-widok="slownik"] .gl-row .s{font-family:var(--f-mono);font-size:9px;
  color:var(--accent);letter-spacing:.05em;}
@media(max-width:820px){html[data-widok="slownik"] .card-b{columns:1;}}

/* ── EGZAMIN USTNY: mówienie na głos ──
   Cisza dookoła, duże pole na odpowiedź, panel przygaszony. */
html[data-widok="ustny"] .side{opacity:.32;transition:opacity .24s var(--ease);}
html[data-widok="ustny"] .side:hover,
html[data-widok="ustny"] .side:focus-within,
html[data-widok="ustny"] .side.open{opacity:1;}
html[data-widok="ustny"] .view{max-width:760px;padding-top:var(--s10);}
.ust{font-size:var(--t-base);line-height:1.7;}
.ust-tryby{gap:var(--s3);margin-bottom:var(--s6);}

/* ── TRYB RATUNKOWY: mało czasu, dużo stresu ──
   Najostrzejsza hierarchia w całej aplikacji: jedna rzecz naraz,
   duży krok, zero ozdób. Kolor ostrzegawczy tylko na liczniku czasu. */
html[data-widok="ratunek"] .view{max-width:800px;padding-top:var(--s8);}
html[data-widok="ratunek"] .card-h h2{font-size:var(--t-xl);letter-spacing:-.025em;}
html[data-widok="ratunek"] .poz{font-size:var(--t-base);line-height:1.6;
  padding:var(--s5);border-radius:var(--r-md);border:1px solid var(--line);
  margin-bottom:var(--s3);}
html[data-widok="ratunek"] .poz-nota{font-size:var(--t-sm);color:var(--ink-2);}

/* ── WGRAJ PLIKI: początek wszystkiego ──
   Strefa upuszczania ma być największym elementem na ekranie. */
html[data-widok="wgraj"] .view{max-width:940px;}

/* ── duszek towarzyszący w widokach, gdzie robi się trudno ── */
.dz-obok{--r:72px;flex:none;}
.pas-duszka{display:flex;align-items:center;gap:var(--s5);
  background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s5) var(--s6);
  margin-bottom:var(--s6);}
.pas-duszka p{font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);margin:0;}
.pas-duszka b{color:var(--ink);font-weight:600;}
@media(max-width:700px){.pas-duszka{flex-direction:column;text-align:center;}}

/* ── LOGO: aplikacja miała 24px glif i 18px napis, landing 40/33 —
   ten sam znak nie może mieć dwóch rozmiarów w jednym produkcie ── */
.side-top .brand{font-size:1.55rem;letter-spacing:-.025em;gap:var(--s3);}
.side-top .gl{width:34px;height:34px;border-radius:var(--r-md);}
.side-top .gl .dz{--r:27px;}
.gate .brand{font-size:1.9rem;letter-spacing:-.025em;}
.gate .gl{width:40px;height:40px;border-radius:var(--r-md);}
.gate .gl .dz{--r:31px;}

/* Ekran logowania: sam duszek zamiast studni — to powitanie, więc macha
   i trzyma książkę, zamiast wyglądać z otworu. */
.gate-dz{--r:210px !important;display:block;margin:0 auto var(--s8);}
@media(max-width:900px){.gate-dz{--r:130px !important;margin-bottom:var(--s5);}}

/* Logo w aplikacji miało własny gradient (#141E2A → #59401A) i inne
   proporcje niż landing. Ten sam znak musi wyglądać identycznie w obu
   miejscach — przepisujemy wartości z landingu. */
.side-top .gl,.gate .gl{
  background:linear-gradient(170deg,var(--deep) 30%,var(--accent) 190%) !important;
  border-radius:var(--r-sm) !important;}
.side-top .gl::after,.gate .gl::after{display:none;}
.side-top .brand{font-size:1.62rem;letter-spacing:-.025em;gap:var(--s3);font-weight:600;}
.side-top .gl{width:36px;height:36px;}
.side-top .gl .dz{--r:28px;bottom:-2px;}
.gate .brand{font-size:2.05rem;letter-spacing:-.025em;gap:var(--s3);font-weight:600;}
.gate .gl{width:40px;height:40px;}
.gate .gl .dz{--r:31px;bottom:-3px;}

.wyloguj{display:block;width:100%;text-align:left;padding:var(--s2) 0;
  font-size:var(--t-xs);color:#788594;transition:color .16s var(--ease);cursor:pointer;}
.wyloguj:hover{color:#fff;}

/* ═══ DODAWANIE PRZEDMIOTU ═══ */
.np-tlo{position:fixed;inset:0;background:rgba(14,22,32,.55);z-index:400;display:grid;place-items:center;padding:var(--s5);}
.np{position:relative;width:min(420px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s8);box-shadow:var(--sh-lg);}
.np-x{position:absolute;top:var(--s4);right:var(--s4);width:30px;height:30px;
  border-radius:var(--r-sm);color:var(--ink-3);cursor:pointer;}
.np-x:hover{background:var(--bg-2);color:var(--ink);}
.np h3{font-family:var(--f-serif);font-size:var(--t-xl);letter-spacing:-.02em;margin-bottom:var(--s6);}
.np-l{display:block;font-size:var(--t-xs);color:var(--ink-2);margin-bottom:var(--s5);font-weight:500;}
.np-l input,.np-l select{display:block;width:100%;margin-top:var(--s2);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);}
.np-l input:focus,.np-l select:focus{outline:none;border-color:var(--accent);}
.np-opc{color:var(--ink-3);font-weight:400;}
.np-pod{display:block;margin-top:var(--s2);font-size:10px;color:var(--ink-3);font-weight:400;}
.np-ok{width:100%;justify-content:center;padding:var(--s4);}

/* pusty stan i pasek z przyciskiem */
.pusty-start{text-align:center;padding:var(--s16) var(--s5);max-width:520px;margin:0 auto;}
.pusty-start .dz{display:block;margin:0 auto var(--s6);}
.pusty-start h2{font-family:var(--f-serif);font-size:var(--t-2xl);letter-spacing:-.025em;margin-bottom:var(--s3);}
.pusty-start p{color:var(--ink-2);line-height:1.6;margin-bottom:var(--s8);}
.pm-pasek{display:flex;justify-content:flex-end;margin-bottom:var(--s5);}

/* ═══ PRÓBNY EGZAMIN ═══ */
.egz-hero{display:flex;align-items:center;gap:var(--s8);padding:var(--s8);margin-bottom:var(--s6);
  border-radius:1rem;background:linear-gradient(140deg,var(--deep) 0%,#1C2836 55%,#33260F 150%);
  color:var(--on-deep);box-shadow:var(--sh-lg);flex-wrap:wrap;}
.egz-dz{--r:104px !important;flex:none;}
.egz-hero h2{font-size:var(--t-2xl);color:#fff;letter-spacing:-.025em;margin-bottom:var(--s3);}
.egz-hero p{color:#A8B2BD;font-size:var(--t-sm);max-width:52ch;margin-bottom:var(--s5);}
.egz-hero .lab{color:var(--deep-3);margin-bottom:var(--s2);}
.egz-start{background:var(--on-deep);color:var(--deep);font-weight:600;}
.egz-w{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;
  border-top:1px solid var(--line-2);font-size:var(--t-sm);}
.egz-w:first-child{border-top:0;}
.egz-w-t{flex:1;}
.egz-w-n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);}
.egz-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:#C2410C;background:color-mix(in srgb,#C2410C 12%,transparent);padding:2px 7px;border-radius:var(--r-pill);}
@media(max-width:700px){.egz-hero{flex-direction:column;text-align:center;}}

/* okno dodawania przedmiotu — układ dwukolumnowy z nagłówkiem i stopką */
.np{width:min(520px,100%);padding:0;overflow:hidden;}
.np-gora{display:flex;align-items:center;gap:var(--s5);padding:var(--s6) var(--s8);
  background:var(--bg-2);border-bottom:1px solid var(--line);}
.np-dz{--r:76px !important;flex:none;}
.np-gora h3{font-family:var(--f-serif);font-size:var(--t-xl);letter-spacing:-.02em;margin:0 0 4px;}
.np-sub{font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;margin:0;}
.np-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding:var(--s8);}
.np-pelna{grid-column:1/-1;}
.np-l{margin-bottom:0;}
.np-stopka{display:flex;justify-content:flex-end;gap:var(--s3);align-items:center;
  padding:var(--s5) var(--s8);background:var(--bg-2);border-top:1px solid var(--line);}
.np-anuluj{font-size:var(--t-sm);color:var(--ink-2);padding:var(--s3) var(--s4);cursor:pointer;}
.np-anuluj:hover{color:var(--ink);}
.np-stopka .btn-p{padding:var(--s3) var(--s6);}
@media(max-width:560px){.np-body{grid-template-columns:1fr;}.np-gora{padding:var(--s5);}}

/* wybór przedmiotu do egzaminu */
.egz-wyb{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) var(--s6);margin-bottom:var(--s3);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);}
.egz-wyb:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}
.egz-wyb-t{display:block;font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;}
.egz-wyb-m{display:block;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);margin-top:2px;}
.egz-wyb-n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent);flex:none;}

/* ═══ SYSTEM STRON: limit i doładowania ═══ */
.st-okno{width:min(500px,100%);}
.st-pakiety{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:var(--s6) var(--s8) var(--s3);}
.st-pak{display:flex;flex-direction:column;gap:2px;padding:var(--s4);text-align:left;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  cursor:pointer;transition:all .16s var(--ease);}
.st-pak:hover{border-color:var(--ink-3);transform:translateY(-1px);}
.st-pak.polecany{border-color:var(--accent);background:var(--accent-bg);}
.st-ile{font-size:var(--t-xs);color:var(--ink-2);font-family:var(--f-mono);}
.st-cena{font-family:var(--f-serif);font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;}
.st-opis{font-size:10px;color:var(--ink-3);line-height:1.35;}
.st-nota{font-size:var(--t-xs);color:var(--ink-3);padding:0 var(--s8) var(--s5);line-height:1.5;}
/* podpowiedź o Passie XL — pokazywana tylko przy dużym niedoborze stron */
.st-xl{color:var(--ink-2);}
.st-xl b{color:var(--ink);}
.st-xl a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}
@media(max-width:560px){.st-pakiety{grid-template-columns:1fr;}}
.st-licznik{display:flex;align-items:center;gap:var(--s4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);
  margin-bottom:var(--s5);}
.st-l-pasek{width:120px;height:5px;background:var(--line);border-radius:3px;overflow:hidden;flex:none;}
.st-l-pasek i{display:block;height:100%;background:var(--accent);border-radius:3px;}
.st-l-txt{font-size:var(--t-sm);color:var(--ink-2);}
.st-l-txt b{color:var(--ink);font-size:var(--t-md);}
.st-l-hint{display:block;font-family:var(--f-mono);font-size:10px;color:var(--ink-3);margin-top:2px;}
.st-l-btn{margin-left:auto;font-size:var(--t-xs);color:var(--accent);padding:var(--s2) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;}
.st-l-btn:hover{border-color:var(--accent);background:var(--accent-bg);}
/* Na telefonie te trzy elementy nie mieszczą się w jednym rzędzie: pasek ma
   sztywne 120 px, przycisk nie łamie słów, a na tekst zostawało 37 px —
   zmierzone przy szerokości okna 390 px. Podpowiedź łamała się wtedy po
   jednym słowie w linii i rosła do 211 px wysokości. Na wąskim ekranie
   tekst dostaje własny wiersz, a pasek z przyciskiem schodzą pod niego. */
@media(max-width:560px){
  .st-licznik{flex-wrap:wrap;}
  .st-l-txt{flex:1 1 100%;order:-1;}
}


/* ═══ POMOCE POD KIERUNKI SPOZA EKONOMII I PRAWA ═══════════════════
   Sześć widoków dzieli ten sam kształt karty co starsze pomoce, więc
   style ograniczają się do tego, co w każdym z nich jest własne. */

/* tabela różnicowa */
.tr-przewin{overflow-x:auto;margin:var(--s4) 0;}
table.tr{border-collapse:collapse;width:100%;font-size:var(--t-sm);}
table.tr th,table.tr td{border:1px solid var(--line);padding:var(--s3) var(--s4);
  text-align:left;vertical-align:top;}
table.tr thead th{background:var(--bg-2);font-weight:600;color:var(--ink);
  white-space:nowrap;}
table.tr tbody th{background:var(--surface-2);font-weight:500;color:var(--ink-2);
  width:1%;white-space:nowrap;}
.tr-klucz{margin-top:var(--s4);padding:var(--s4);background:var(--accent-bg);
  border-radius:var(--r-md);font-size:var(--t-sm);}
.tr-klucz .lab{display:block;margin-bottom:var(--s1);color:var(--accent-ink);}

/* mechanizmy */
.mc-start,.mc-efekt,.mc-psuje{margin:var(--s3) 0;font-size:var(--t-sm);}
.mc-start .lab,.mc-efekt .lab,.mc-psuje .lab{display:block;margin-bottom:var(--s1);}
.mc-kroki{margin:var(--s4) 0;padding-left:var(--s6);display:flex;
  flex-direction:column;gap:var(--s3);}
.mc-kroki li{font-size:var(--t-sm);line-height:1.5;}
.mc-kroki li::marker{color:var(--accent);font-family:var(--f-mono);}
.mc-psuje{color:var(--warn,#B45309);}

/* badania */
dl.bd{margin:var(--s4) 0;display:grid;grid-template-columns:auto 1fr;
  gap:var(--s2) var(--s5);font-size:var(--t-sm);}
dl.bd dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;white-space:nowrap;}
dl.bd dd{margin:0;line-height:1.5;}
.bd-ogr{margin-top:var(--s4);padding:var(--s4);border-left:3px solid var(--warn,#B45309);
  background:var(--bg-2);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--t-sm);}
.bd-ogr .lab{display:block;margin-bottom:var(--s1);}
@media(max-width:560px){dl.bd{grid-template-columns:1fr;gap:var(--s1) 0;}
  dl.bd dd{margin-bottom:var(--s3);}}

/* kod */
.kd-meta{display:flex;gap:var(--s3);margin:var(--s3) 0;}
.kd-jez,.kd-zl{font-family:var(--f-mono);font-size:var(--t-xs);padding:2px var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);}
.kd-zl{color:var(--accent-ink);border-color:var(--accent);}
pre.kd{margin:var(--s4) 0;padding:var(--s5);background:var(--deep);color:var(--on-deep);
  border-radius:var(--r-md);overflow-x:auto;font-family:var(--f-mono);
  font-size:var(--t-sm);line-height:1.55;}
.kd-op{font-size:var(--t-sm);line-height:1.5;}
.kd-sedno{margin-top:var(--s3);font-size:var(--t-sm);}
.kd-sedno .lab{display:block;margin-bottom:var(--s1);}

/* stanowiska */
.sp{display:grid;gap:var(--s4);margin:var(--s4) 0;}
.sp-k{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);}
.sp-k b{display:block;font-family:var(--f-serif);font-size:var(--t-md);
  margin-bottom:var(--s2);}
.sp-teza{font-size:var(--t-sm);line-height:1.5;margin-bottom:var(--s3);}
.sp-arg,.sp-sl{font-size:var(--t-xs);line-height:1.5;color:var(--ink-2);
  margin-top:var(--s2);}
.sp-arg .lab,.sp-sl .lab{display:block;margin-bottom:2px;}
@media(min-width:720px){.sp{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}}

/* konstrukcje */
.kn-schemat{font-family:var(--f-mono);font-size:var(--t-md);padding:var(--s3) var(--s4);
  background:var(--accent-bg);border-radius:var(--r-md);display:inline-block;
  margin:var(--s3) 0;color:var(--accent-ink);}
.kn-przyklady{margin:var(--s4) 0;display:flex;flex-direction:column;gap:var(--s3);
  list-style:none;padding:0;}
.kn-przyklady li{padding-left:var(--s4);border-left:2px solid var(--line);}
.kn-przyklady b{display:block;font-weight:500;font-size:var(--t-sm);}
.kn-przyklady span{display:block;font-size:var(--t-xs);color:var(--ink-2);
  margin-top:2px;}