/* ═══════════════════════════════════════════════════════════════
   WIDOKI NAUKI — układ podporządkowany mechanice uczenia się
   Każdy ekran robi co innego, więc każdy dostaje inne reguły:

   NOTATKA   czytanie długiego tekstu → miara linii, interlinia, spokój
   TEST      aktywne przypominanie     → jedno pytanie, duże cele, brak rozpraszaczy
   FISZKI    powtórki                  → jedna karta na środku, minimum klików
   ŚCIĄGA    ostatnia godzina          → maksimum treści na ekranie i na kartce
   FEYNMAN   tłumaczenie własnymi sł.  → puste pole i cisza dookoła
   ═══════════════════════════════════════════════════════════════ */

/* ═══ NOTATKA ═══
   Tekst czyta się najlepiej przy 60–75 znakach w linii i interlinii
   ~1,7. Domyślny widok był szerszy, więc oko gubiło początek wiersza. */
html[data-widok="notatka"] .view{max-width:none;padding:var(--s8) var(--s6) var(--s20);}
.note{max-width:68ch;margin:0 auto;font-size:1.0625rem;line-height:1.75;}
.note p{margin-bottom:var(--s5);}
.note h2,.note h3{font-family:var(--f-serif);letter-spacing:-.02em;
  margin:var(--s10) 0 var(--s4);line-height:1.25;}
.note h2{font-size:1.5rem;} .note h3{font-size:1.2rem;}
.note h2:first-child,.note h3:first-child{margin-top:0;}
.note ul,.note ol{margin:0 0 var(--s5) var(--s5);}
.note li{margin-bottom:var(--s2);}
/* źródło slajdu ma być sprawdzalne, ale nie ma przerywać zdania */
.note .ref{font-size:9px;opacity:.55;transition:opacity .16s var(--ease);}
.note .nb:hover .ref{opacity:1;}
/* pasek narzędzi przykleja się, żeby źródła i tryb były zawsze pod ręką */
.note-bar{position:sticky;top:var(--wys-top,56px);z-index:10;background:var(--bg);
  padding:var(--s3) 0;margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);max-width:68ch;margin-left:auto;margin-right:auto;}
.note-meta{max-width:68ch;margin:0 auto var(--s6);}
/* Termin egzaminu przy notatce. Oddzielony kropką od reszty metadanych,
   bo to jedyna informacja, która zmienia się z dnia na dzień. */
.nm-egz{display:inline-block;margin-left:var(--s2);padding-left:var(--s2);
  border-left:1px solid var(--line);color:var(--accent-ink);}
.nm-egz.blisko{color:var(--ostrzezenie,#C2410C);font-weight:600;}
/* cytat prowadzącego to najważniejsze zdanie na stronie */
.note .cue{border-left:3px solid var(--accent);background:var(--accent-bg);
  padding:var(--s4) var(--s5);border-radius:0 var(--r-md) var(--r-md) 0;
  margin:var(--s6) 0;font-size:var(--t-sm);line-height:1.6;}

/* ═══ TEST ═══
   Aktywne przypominanie działa, gdy nic nie podpowiada odpowiedzi.
   Panel boczny gaśnie, pytanie rośnie, odpowiedzi są dużymi celami. */
html[data-widok="test"] .side{opacity:.35;transition:opacity .24s var(--ease);}
html[data-widok="test"] .side:hover,
html[data-widok="test"] .side:focus-within,
html[data-widok="test"] .side.open{opacity:1;}
html[data-widok="test"] .top{opacity:.55;}
html[data-widok="test"] .view{max-width:780px;padding-top:var(--s10);}
.quiz .q,.quiz .big{font-family:var(--f-serif);font-size:1.6rem;line-height:1.3;
  letter-spacing:-.02em;margin-bottom:var(--s8);}
/* odpowiedź jako duży cel: mniej pomyłek, szybsze tempo */
.opt{padding:var(--s5) var(--s6);border-radius:var(--r-md);border:1.5px solid var(--line);
  font-size:var(--t-base);line-height:1.45;transition:all .16s var(--ease);
  display:flex;gap:var(--s4);align-items:flex-start;}
.opt:hover{border-color:var(--ink-3);background:var(--bg-2);transform:translateX(2px);}
.opt .lb{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  width:20px;flex:none;padding-top:2px;}
/* wyjaśnienie jest ważniejsze niż sam wynik — dlatego dostaje wagę */
.quiz .src,.score .src{font-size:var(--t-sm);line-height:1.6;}
.quiz-bar{height:3px;}
.score .big{font-size:2.6rem;letter-spacing:-.03em;}

/* ═══ FISZKI ═══
   Powtórka ma być jednym ruchem: karta na środku, ocena pod spodem,
   klawiatura zamiast celowania myszą. */
html[data-widok="fiszki"] .view{max-width:720px;padding-top:var(--s10);}
.fkarta{min-height:clamp(240px,38vh,340px);display:flex;flex-direction:column;
  justify-content:center;padding:var(--s10);border-radius:1rem;
  box-shadow:var(--sh-lg);cursor:pointer;}
.fk-front{font-family:var(--f-serif);font-size:1.5rem;line-height:1.35;
  letter-spacing:-.02em;text-align:center;}
.fk-back{font-size:var(--t-base);line-height:1.65;margin-top:var(--s6);
  padding-top:var(--s6);border-top:1px solid var(--line);}
.fk-hint{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  text-align:center;margin-top:var(--s6);}
.fk-src{font-family:var(--f-mono);font-size:10px;color:var(--accent);}
/* podpowiedź klawiszy — po dwóch powtórkach ręka schodzi z myszy */
.fisz-klawisze{display:flex;gap:var(--s4);justify-content:center;
  margin-top:var(--s6);font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--ink-3);flex-wrap:wrap;}
.fisz-klawisze kbd{background:var(--surface);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:var(--r-sm);padding:2px 7px;
  font-family:inherit;font-size:10px;color:var(--ink-2);}

/* ═══ ŚCIĄGA ═══
   Ostatnia godzina przed egzaminem: liczy się gęstość, nie elegancja.
   Wiele kolumn, mały odstęp, gotowe do druku na jednej kartce. */
html[data-widok="sciaga"] .view{max-width:1240px;}
/* Ściąga ma wyglądać jak ściąga, nie jak zestaw kart. Ramki, cienie
   i złote wersaliki tylko odbierały miejsce i rozbijały rytm czytania —
   zostaje sama typografia i cienka kreska nad sekcją. */
.sheet{columns:3;column-gap:var(--s8);font-size:var(--t-xs);line-height:1.55;}
.sheet-blk{break-inside:avoid;margin:0 0 var(--s6);padding:0;
  border:0;border-top:1.5px solid var(--ink);border-radius:0;background:transparent;
  padding-top:var(--s2);}
.sheet-blk h4{font-family:var(--f-sans);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:var(--s3);}
/* hasło pogrubione, definicja zwykła — para czyta się jednym rzutem oka */
.sheet-blk .k{font-family:var(--f-sans);font-size:var(--t-xs);font-weight:600;
  color:var(--ink);letter-spacing:0;}
.sheet-blk p,.sheet-blk div{margin-bottom:var(--s3);}
/* wzory to jedyne miejsce, gdzie monospace niesie treść */
.sheet-blk .fx,.sheet-blk code{font-family:var(--f-mono);font-size:11px;
  background:var(--bg-2);padding:3px 6px;border-radius:var(--r-sm);
  display:inline-block;margin-top:2px;}
.sheet-blk .src,.sheet-blk .s{font-family:var(--f-mono);font-size:9px;
  color:var(--ink-3);letter-spacing:.04em;}
@media(max-width:1100px){.sheet{columns:2;}}
@media(max-width:700px){.sheet{columns:1;}}
@media print{
  /* Cel: jedna kartka A4 (maks 2 strony przy druku dwustronnym). Wąskie
     marginesy, trzy ciasne kolumny, drobne pismo — ściąga, nie dokument. */
  @page{size:A4;margin:8mm}
  .side,.top,.note-bar,.plakietka-wariantu,.tabs,.zrodla-btn,.pas-duszka,
  .toast,.czat-fab{display:none !important;}
  .view{padding:0 !important;max-width:none !important;margin:0 !important;}
  .sheet{columns:3;column-gap:10pt;font-size:7.6pt;line-height:1.3;}
  .sheet-blk{border-color:#bbb;break-inside:avoid;padding:4pt 6pt;margin-bottom:5pt;}
  .sheet-blk h4{font-size:8pt;margin-bottom:3pt;}
  .sheet-blk p,.sheet-blk div{margin-bottom:2.5pt;}
  .sheet-blk .fx,.sheet-blk code{font-size:7pt;padding:1pt 3pt;margin-top:1pt;}
  .sheet-blk .katex{font-size:.82em;}
  .sheet + .lab{display:none;}
}

/* ═══ TRYB FEYNMANA ═══
   Tłumaczenie własnymi słowami wymaga pustej kartki i ciszy.
   Wszystko poza polem tekstowym schodzi na drugi plan. */
html[data-widok="feynman"] .side{opacity:.3;transition:opacity .24s var(--ease);}
html[data-widok="feynman"] .side:hover,
html[data-widok="feynman"] .side:focus-within,
html[data-widok="feynman"] .side.open{opacity:1;}
html[data-widok="feynman"] .view{max-width:760px;padding-top:var(--s10);}
.fey-prompt{font-family:var(--f-serif);font-size:1.45rem;line-height:1.35;
  letter-spacing:-.02em;margin-bottom:var(--s6);}
.fey-moje textarea,.fey-moje{min-height:clamp(180px,26vh,300px);
  font-size:var(--t-base);line-height:1.7;}
.fey-instr{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
  border-left:2px solid var(--line);padding-left:var(--s4);margin-bottom:var(--s6);}
.fey-ocena{font-size:var(--t-sm);line-height:1.65;}

/* ═══ POWTÓRKI ═══ jedna lista, duże cele, bez ozdób */
html[data-widok="powtorki"] .view{max-width:860px;}