/* ═══════════════════════════════════════════════════════════════
   WARIANT C — pełny redesign
   Ładowany PO a-wizualny.css i b-panel.css, więc ma całą warstwę
   wizualną i przebudowany panel. Do tego zmienia sam pulpit:
   inny rytm siatki, kafle zamiast list, mocna hierarchia.
   ═══════════════════════════════════════════════════════════════ */

/* Pulpit czytał się jak jednolita ściana kart tej samej wagi.
   Tu jest wyraźny podział: jedna rzecz teraz → przedmioty → reszta. */
.view{padding:var(--s12) var(--s10) var(--s20);max-width:1280px;}

/* ── STREFA 1: jedna rzecz na teraz, na pełnej szerokości ── */
.now{padding:var(--s12) var(--s10);margin-bottom:var(--s10);
  border-radius:1.25rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--deep) 0%,#1C2936 50%,#33270F 150%);}
/* poświata w rogu wiąże kafel z duszkiem obok */
.now::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent) 0,transparent 58%);}
.now h2{font-size:2.6rem;line-height:1.08;letter-spacing:-.03em;font-weight:600;}
.now p{font-size:var(--t-base);max-width:52ch;}
.now-cta .btn{padding:var(--s4) var(--s8);font-size:var(--t-base);}
.now-dz{--r:132px !important;}

/* ── STREFA 2: przedmioty jako kafle, nie wiersze listy ── */
.grid-2{grid-template-columns:1fr;gap:var(--s10);}

/* pierwsza karta w siatce (przedmioty) rozkłada wiersze na kafle */
.card-b .subj{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);margin-bottom:var(--s3);
  background:var(--surface);box-shadow:var(--sh-sm);}
.card-b .subj:first-of-type{border-top:1px solid var(--line);}
.card-b .subj:hover{background:var(--surface);box-shadow:var(--sh-md);
  transform:translateY(-1px);}
.card-b .subj::before{left:var(--s3);}
.subj .dd{font-size:2.1rem;line-height:1;letter-spacing:-.04em;}
.subj .nm{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em;}

/* karta bez ramki wokół kafli — rama jest już na kaflach */
.card:has(.subj){background:transparent;border:0;box-shadow:none;}
.card:has(.subj) .card-h{padding-left:0;padding-right:0;}
.card:has(.subj) .card-b{padding-left:0;padding-right:0;}
.card:has(.subj):hover{box-shadow:none;}

/* ── STREFA 3: reszta pulpitu w dwóch równych kolumnach ── */
.stack{gap:var(--s8);}

/* nagłówki sekcji dostają rangę nagłówków strony, nie podpisów */
.card-h h2{font-size:var(--t-xl);letter-spacing:-.025em;}

/* pasek górny scala się z tłem — mniej linii dzielących ekran */
.top{border-bottom:0;padding:var(--s5) var(--s10);
  /* Pasek jest przyklejony do góry (position:sticky z app.css), więc MUSI
     mieć tło — bez niego tekst przewijał się pod nim i prześwitywał.
     Redesign zdjął tło razem z kreską i na telefonie wyglądało to jak
     nachodzące na siebie warstwy. Zostaje czysto (bez kreski) dopóki
     strona jest na górze; kreska i cień pojawiają się przy przewinięciu. */
  background:color-mix(in srgb,var(--bg) 95%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:none;
  transition:box-shadow .2s ease,padding .2s ease;}

/* Przewinięta strona: pasek odcina się delikatnym cieniem zamiast kreską. */
.top.przewiniete{box-shadow:0 1px 0 color-mix(in srgb,var(--line) 70%,transparent),
  0 6px 20px -12px rgba(0,0,0,.28);}

/* Na telefonie pasek zajmował 127 px, czyli 15% ekranu. Po przewinięciu
   kurczy się: znika nadtytuł, tytuł schodzi do rozmiaru czytelnego,
   ale nieodbierającego miejsca notatce. */
@media(max-width:700px){
  .top.przewiniete{padding-top:var(--s3);padding-bottom:var(--s3);}
  .top.przewiniete .crumb{
    max-height:0;opacity:0;margin:0;overflow:hidden;
    transition:max-height .2s ease,opacity .15s ease;}
  .top.przewiniete h1{font-size:var(--t-md);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .top .crumb{max-height:20px;opacity:.7;
    transition:max-height .2s ease,opacity .2s ease;}
  .top h1{transition:font-size .2s ease;}
}
.top h1{font-size:var(--t-xl);letter-spacing:-.025em;}
.top .crumb{opacity:.7;}

/* zapowiedzi i kalendarz: spokojniejsze, żeby nie rywalizowały z górą */
.hint{border-radius:var(--r-md);}

@media(max-width:1100px){
  .view{padding:var(--s8) var(--s6) var(--s16);}
  .now{padding:var(--s8) var(--s6);}
  .now h2{font-size:1.9rem;}
  .now-dz{--r:92px !important;}
  .top{padding:var(--s4) var(--s6);}
}


/* ── PASEK GÓRY NA TELEFONIE ──────────────────────────────────────
   Wyszukiwarka wypychała się do drugiej linii i pasek rósł do 227 px,
   czyli 27% ekranu — przez cały czas czytania notatki. Do tego tytuł
   nie mieścił się w pozostałym miejscu i był ucinany na krawędzi.

   Teraz: lupa jako ikona, tytuł na całą szerokość, wszystko w jednej
   linii. Pole szukania rozwija się dopiero po dotknięciu lupy i wtedy
   zajmuje cały pasek — bo w tym momencie to jedyne, co student robi. */
@media(max-width:700px){
  /* Efekt szkła ładnie wygląda na dużym ekranie, ale na telefonie tekst
     notatki jest gęsty i prześwitywał przez pasek nawet przy 95% krycia.
     Czytelność wygrywa z efektem: pełne tło na telefonie.
     pełne tło na telefonie */
  .top{flex-wrap:nowrap;gap:var(--s3);align-items:center;
    background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .top > div:not(.top-r){min-width:0;flex:1;}
  .top h1{font-size:var(--t-md);line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;}
  .top.przewiniete h1{-webkit-line-clamp:1;}
  .top-r{gap:var(--s1);flex:none;}

  /* Lupa zamiast pola. Szerokość pola zeruje się, zostaje sama ikona
     w polu dotykowym 40 px — poniżej tego trafia się z trudem. */
  .srch{position:relative;}
  .srch input{width:0;padding-left:0;padding-right:0;border:0;
    opacity:0;pointer-events:none;transition:width .2s ease,opacity .15s ease;}
  .srch .ic{position:static;display:flex;align-items:center;
    justify-content:center;width:40px;height:40px;border-radius:50%;
    cursor:pointer;}
  .srch .ic:active{background:var(--tlo-2,rgba(0,0,0,.05));}

  /* Otwarte szukanie zabiera cały pasek: tytuł i pozostałe ikony
     ustępują, bo w tym momencie liczy się tylko wpisywany tekst. */
  .top.szukam > div:not(.top-r),
  .top.szukam .burger,
  .top.szukam .dz-btn,
  .top.szukam .icon-btn:not(.srch-zamknij){display:none;}
  .top.szukam .top-r{flex:1;margin-left:0;}
  .top.szukam .srch{flex:1;}
  .top.szukam .srch input{width:100%;opacity:1;pointer-events:auto;
    padding:var(--s2) var(--s3);border:1px solid var(--line);
    border-radius:999px;}
  .top.szukam .srch .ic{position:absolute;left:8px;width:24px;height:24px;
    pointer-events:none;}
  .top.szukam .srch input{padding-left:34px;}
}

/* Kotwice i przewijanie do elementu nie mogą chować treści pod paskiem. */
:target,[id]{scroll-margin-top:88px;}


/* Pasek notatki (nauczyciel, poziomy, opanowanie) stoi pod paskiem góry
   i razem zjadały 27% ekranu telefonu. Zwężamy odstępy i pozwalamy mu
   przewijać się poziomo zamiast zawijać do trzech linii.
   note-bar na telefonie */
@media(max-width:700px){
  .note-bar{padding:var(--s2) var(--s4);gap:var(--s2);
    overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .note-bar::-webkit-scrollbar{display:none;}
  .note-bar > *{flex:none;}
}