/* ═══════════════════════════════════════════════════════════════
   LISTA PRZEDMIOTÓW I WYKŁADÓW

   Domyślny jest wariant A (kafelki). B i C zostają pod ?lista=b i ?lista=c
   do porównania na realnych danych. Wszystkie operują na tym samym HTML
   z app.js: .card > .card-h (nazwa, pigułka, gotowość) i .card-b > a.subj
   (.dd czas, .nm tytuł, .mt meta, .pg procent + pasek).

   Wspólny problem, który rozwiązują: pierwotny wiersz niósł pięć liczb
   naraz (minuty, slajdy, procent, pasek, zapowiedź), więc żadna nie była
   pierwsza i skanowało się to źle.
   ═══════════════════════════════════════════════════════════════ */

/* ── A: KAFELKI WYKŁADÓW (wybrany 2026-07-26) ─────────────────────
   Poprawki po pierwszej wersji, wszystkie z obserwacji realnego ekranu:
   · kafelek szerszy (min 300 px) — „Podatek VAT w księgach" łamał się
     na dwie linie i rozjeżdżał wysokości sąsiadów w rzędzie;
   · czas zszedł pod tytuł zamiast stać obok — walczył o wzrok z nazwą,
     a jest informacją drugorzędną;
   · opanowanie duże, przy pasku — to jedyna liczba, dla której się tu
     przychodzi, więc dostaje najwięcej miejsca;
   · wykład w przetwarzaniu ma własny, spokojny stan zamiast wyglądać
     jak kafelek, któremu czegoś brakuje. */
/* :has(.subj) zamiast samego .card-b.tight — reguła powstała dla listy
   wykładów, ale sam selektor łapał KAŻDĄ zwartą listę w karcie, w tym
   listę wgranych plików na ekranie materiałów. Efekt było widać dopiero
   na realnych danych: dwa pliki ustawiały się obok siebie i czytały jak
   jeden wiersz. Zawężenie po zawartości opisuje intencję dokładnie. */
[data-lista="a"] .card-b.tight:has(.subj){display:grid;gap:16px;padding:18px 20px 22px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

[data-lista="a"] .subj{display:flex;flex-direction:column;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;
  position:relative;overflow:hidden;min-height:158px;
  transition:transform .18s ease,border-color .18s,box-shadow .18s;}
[data-lista="a"] .subj:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 10px 28px rgba(0,0,0,.10);}

/* tytuł pierwszy w hierarchii; stała wysokość dwóch linii trzyma równy rząd */
[data-lista="a"] .subj .nm{font-size:1.06rem;line-height:1.35;font-weight:600;
  display:block;margin-bottom:6px;min-height:2.7em;}

/* meta w jednej linii, bez zawijania na „zapowiedziane" */
[data-lista="a"] .subj .mt{font-size:var(--t-xs);color:var(--ink-3);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* czas na dole, drobny — nie konkuruje z tytułem */
[data-lista="a"] .subj .dd{order:3;display:flex;align-items:baseline;gap:5px;
  margin-top:auto;padding-top:14px;color:var(--ink-3);}
[data-lista="a"] .subj .dd b{font-size:.95rem;font-weight:600;color:var(--ink-2);}
[data-lista="a"] .subj .dd small{font-size:.6rem;letter-spacing:.1em;}

/* opanowanie — jedyna duża liczba na kafelku */
[data-lista="a"] .subj .pg{order:4;display:flex;align-items:center;gap:12px;margin-top:10px;}
[data-lista="a"] .subj .pg .p{font-family:var(--f-serif);font-size:1.6rem;
  font-weight:600;line-height:1;flex:none;}
[data-lista="a"] .subj .trk{flex:1;height:4px;border-radius:2px;}

/* kreska u dołu kafelka: ten sam postęp, czytelny z odległości */
[data-lista="a"] .subj::after{content:"";position:absolute;left:0;bottom:0;height:3px;
  width:var(--post,0%);background:var(--accent);opacity:.55;}

/* wykład jeszcze przetwarzany — stan spokojny, nie „zepsuty" */
[data-lista="a"] .subj[style*="cursor:default"],
[data-lista="a"] .subj[style*="cursor: default"]{
  border-style:dashed;opacity:1;background:transparent;}
[data-lista="a"] .subj[style*="cursor:default"] .nm{color:var(--ink-3);}
[data-lista="a"] .subj[style*="cursor:default"]::after{display:none;}

@media(max-width:640px){
  [data-lista="a"] .card-b.tight:has(.subj){grid-template-columns:1fr;}
  [data-lista="a"] .subj{min-height:0;}
  [data-lista="a"] .subj .nm{min-height:0;}
}

/* ── B: WIERSZ Z JEDNĄ LICZBĄ WIODĄCĄ ─────────────────────────────
   Lista skanowana w pionie: po lewej duże opanowanie, obok tytuł,
   reszta w szarości. Najlepsza przy wielu wykładach. */
[data-lista="b"] .card-b.tight{padding:4px 0;}
[data-lista="b"] .subj{gap:18px;padding:14px 20px;border-radius:0;
  border-bottom:1px solid var(--line-2);}
[data-lista="b"] .subj:last-child{border-bottom:0;}
[data-lista="b"] .subj:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);}
[data-lista="b"] .subj .dd{display:none;}
[data-lista="b"] .subj .pg{order:-1;flex:none;width:64px;text-align:right;}
[data-lista="b"] .subj .pg .p{font-size:1.5rem;font-weight:600;font-family:var(--f-serif);}
[data-lista="b"] .subj .trk{width:56px;margin-left:auto;height:2px;}
[data-lista="b"] .subj .nm{font-size:.98rem;}
[data-lista="b"] .subj .mt{opacity:.65;}

/* ── C: OŚ POSTĘPU ────────────────────────────────────────────────
   Wykłady jako punkty na osi, w kolejności zajęć. Ma sens tam, gdzie
   kolejność wykładów znaczy coś merytorycznie. */
[data-lista="c"] .card-b.tight{padding:12px 20px 20px 8px;}
[data-lista="c"] .subj{position:relative;padding:12px 12px 12px 40px;gap:14px;border-radius:10px;}
[data-lista="c"] .subj::before{content:"";position:absolute;left:16px;top:0;bottom:0;
  width:2px;background:var(--line-2);}
[data-lista="c"] .subj:first-child::before{top:50%;}
[data-lista="c"] .subj:last-child::before{bottom:50%;}
[data-lista="c"] .subj::after{content:"";position:absolute;left:11px;top:50%;
  width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);}
[data-lista="c"] .subj:hover::after{border-color:var(--accent);}
[data-lista="c"] .subj .dd{flex:none;opacity:.6;}
[data-lista="c"] .subj .pg .trk{width:72px;}
[data-lista="c"] .subj .nm{font-size:.98rem;}

/* Nagłówek sekcji przedmiotu — wspólny dla wszystkich wariantów. */
[data-lista] .card-h{align-items:baseline;gap:12px;}
[data-lista] .card-h h2{font-size:1.15rem;}

/* Plakietka „zapowiedziane" — sygnał od prowadzącego, więc wygląda jak
   etykieta, a nie jak doklejony fragment zdania przycięty w pół słowa. */
[data-lista="a"] .zap-tag{display:inline-block;margin-top:8px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;
  color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 16%,transparent);}
/* tytuł: rezerwujemy jedną linię, drugą tylko gdy trzeba — mniej pustki */
[data-lista="a"] .subj .nm{min-height:1.35em;}

/* ── FOKUS Z KLAWIATURY ───────────────────────────────────────────
   Sprawdzone 2026-07-26: elementy klikalne miały outline:none, więc
   nawigacja tabulatorem nie pokazywała, gdzie się jest. Dotyczy każdego,
   kto nie używa myszy, ale też każdego, kto wypełnia formularz z klawiatury.
   :focus-visible, a nie :focus — obwódka pojawia się przy tabulatorze,
   nie przy kliknięciu myszą. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, .subj:focus-visible{
  outline:2px solid var(--accent,#E8B658);
  outline-offset:3px;border-radius:8px;}
.subj:focus-visible{outline-offset:2px;}
/* pominięcie nawigacji nie ma sensu bez widocznego fokusu — teraz ma */

/* ── STANY PUSTE POZOSTAŁYCH EKRANÓW ──────────────────────────────
   Ten sam układ co pusty pulpit: jedna oś, duszek, jedno zdanie,
   najwyżej jedno wezwanie. Bez ramek udających interfejs. */
.pusty-ekran{display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:center;min-height:min(58vh,520px);padding:var(--s10) var(--s6);}
.pusty-dz{--r:132px;margin-bottom:var(--s5);}
.pusty-ekran h2{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.25;margin:0 0 var(--s3);}
.pusty-ekran p{color:var(--ink-2);line-height:1.65;max-width:44ch;margin:0 0 var(--s6);}
.pusty-ekran .btn{padding:12px 24px;}

/* ── EKRAN WGRYWANIA: jedna oś i jeden stopień ────────────────────
   Zmierzone 2026-07-26: tytuł strony stał na 290 px, a nagłówki sekcji
   pod nim na 315 px — 25 px rozjazdu, czyli dokładnie wcięcie zawartości
   karty. Oko widzi to jako „coś tu jest krzywo", nie umiejąc nazwać.
   Tytuł dosuwamy do osi treści, bo to ona rządzi resztą ekranu.
   Napis w strefie upuszczania zostaje wyśrodkowany — tam środek jest
   celowy i nie należy do tej osi. */
/* Tytuł strony NIE jest przesuwany: siedzi w górnym pasku, nie w treści,
   więc ma własną oś na każdym ekranie. Dosuwanie go do kart byłoby zmianą
   układu całej aplikacji, nie poprawką usterki — zostawiam do decyzji.
   Normalizujemy tylko stopień nagłówków sekcji. */
html[data-widok="wgraj"] .view h2{font-size:1.15rem;}

/* Strefa wgrywania w trakcie liczenia stron. Liczenie trwa ułamek sekundy,
   ale przy kilkunastu plikach widać przerwę — bez sygnału wygląda to na
   kliknięcie, które nic nie zrobiło. */
.drop.liczy{opacity:.6;pointer-events:none;position:relative;}
.drop.liczy::after{content:"Liczę strony…";position:absolute;inset:auto 0 12px 0;
  text-align:center;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--accent-ink);letter-spacing:.08em;}

/* ── EKRAN CZEKANIA I BŁĘDU ───────────────────────────────────────
   Jedna oś, duszek, lista etapów. Bez pasków procentowych: procent
   przy pracy, której czasu nie znamy dokładnie, kłamie i widać to
   wtedy, gdy utknie na 90%. Etapy nie kłamią — albo są zrobione,
   albo trwają. */
.czek{display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:center;min-height:min(70vh,620px);padding:var(--s10) var(--s6);}
.czek-dz{--r:150px;margin-bottom:var(--s5);}
.czek h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:0 0 var(--s2);}
.czek-sub{color:var(--ink-2);margin:0 0 var(--s8);font-size:var(--t-sm);}

.czek-etapy{list-style:none;margin:0 0 var(--s8);padding:0;text-align:left;
  width:min(420px,100%);display:flex;flex-direction:column;gap:var(--s4);}
.czek-e{display:flex;align-items:flex-start;gap:var(--s4);opacity:.4;
  transition:opacity .4s ease;}
.czek-e.zrobiony,.czek-e.trwa{opacity:1;}
.czek-e b{display:block;font-size:.95rem;font-weight:600;margin-bottom:2px;}
.czek-e i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);}

.czek-znak{flex:none;width:18px;height:18px;border-radius:50%;margin-top:3px;
  border:2px solid var(--line);position:relative;}
.czek-e.zrobiony .czek-znak{background:var(--accent);border-color:var(--accent);}
.czek-e.zrobiony .czek-znak::after{content:"";position:absolute;left:4px;top:1px;
  width:4px;height:8px;border:solid var(--deep,#0D141C);border-width:0 2px 2px 0;
  transform:rotate(42deg);}
/* etap trwający pulsuje — jedyny ruch na ekranie, więc niesie informację */
.czek-e.trwa .czek-znak{border-color:var(--accent);animation:czekPuls 1.4s ease-in-out infinite;}
@keyframes czekPuls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}}

.czek-wolne{font-size:var(--t-xs);color:var(--ink-3);margin:0;}
.czek-blad .czek-sub{max-width:46ch;}
@media(prefers-reduced-motion:reduce){.czek-e.trwa .czek-znak{animation:none;}}

/* Zdanie „możesz zamknąć kartę" jest ważniejsze niż pasek postępu: bez
   niego student siedzi i patrzy przez cztery minuty. Ton spokojny,
   więc kolor drugoplanowy i mały stopień. */
.przetw-wolne{font-size:var(--t-xs);color:var(--ink-3);margin:var(--s5) 0 0;text-align:center;}

/* ── PLANER: kiedy się uczysz ─────────────────────────────────
   Dni tygodnia jako przełączniki, nie jako pole wyboru z listy:
   student ma zobaczyć swój tydzień jednym rzutem oka i dotknąć
   dnia, nie rozwijać menu. */
.pl2-minuty-zwiez{padding:var(--s5) var(--s6);}
.pl2-minuty-zwiez h2{font-size:var(--t-lg);margin-bottom:var(--s4);}
.pl2-dni{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);}
.pl2-dzien{min-width:44px;min-height:44px;padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--r-2);background:transparent;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--ink-2);
  cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),
  border-color .16s var(--ease);}
.pl2-dzien:hover{border-color:var(--accent);}
.pl2-dzien.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.pl2-dni-op{margin-top:var(--s3);}

/* Brak czasu przed egzaminem — ostrzeżenie, nie wyrzut. Stąd ton
   ostrzegawczy, a nie czerwień błędu. */
.pl2-brak{margin:var(--s3) 0;padding:var(--s3) var(--s4);
  border-left:3px solid var(--warn,#D08055);border-radius:0 var(--r-2) var(--r-2) 0;
  background:color-mix(in srgb,var(--warn,#D08055) 8%,transparent);
  font-size:var(--t-sm);line-height:1.5;}

/* Na telefonie panel dostępności musi zmieścić się nad planem, a nie
   zamiast niego: siedem dni w jednym rzędzie, mniejsze przyciski minut,
   ciaśniejsze odstępy. Wysokość celu dotykowego zostaje 44 px. */
@media (max-width: 700px) {
  .pl2-minuty-zwiez{padding:var(--s4);}
  .pl2-minuty-zwiez h2{font-size:var(--t-base);margin-bottom:var(--s3);}
  .pl2-minuty-w{gap:var(--s2);}
  .pl2-minuty-w .btn{padding:var(--s2) var(--s3);font-size:var(--t-sm);flex:1 1 auto;}
  .pl2-dni{gap:4px;flex-wrap:nowrap;justify-content:space-between;}
  .pl2-dzien{min-width:0;flex:1 1 0;padding:var(--s2) 0;font-size:var(--t-xs);}
  .pl2-dni-op{margin-top:var(--s2);text-align:center;}
}