/* ═══════════════════════════════════════════════════════════════
   WARIANT B — warstwa wizualna + przebudowany panel boczny
   Ładowany PO a-wizualny.css, więc dziedziczy całą warstwę wizualną.
   Zmienia to, co w panelu przytłacza: 18 pozycji naraz bez hierarchii.
   ═══════════════════════════════════════════════════════════════ */

/* Panel węższy nie pomoże — problem jest w liczbie widocznych pozycji.
   Rozwiązanie: sekcje zwijane, domyślnie otwarta tylko „Nauka". */
:root{--nav-w:250px;}

.side{background:linear-gradient(180deg,var(--deep) 0%,#0A1119 100%);}
.side-top{padding:var(--s6) var(--s5);border-bottom:1px solid rgba(255,255,255,.06);}

/* Nagłówek sekcji staje się przyciskiem zwijania */
.side-sec{display:flex;align-items:center;gap:var(--s2);cursor:pointer;
  padding:var(--s5) var(--s5) var(--s2);color:#5C6875;
  transition:color .18s var(--ease);user-select:none;}
.side-sec:hover{color:#8B96A3;}
.side-sec::after{content:"";width:5px;height:5px;margin-left:auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .22s var(--ease);}
.side-sec.zwiniete::after{transform:rotate(-45deg) translateX(-1px);}

/* zwinięta grupa znika bez skoków — max-height zamiast display */
/* 600px ucinało dłuższą grupę i panel nie wiedział, że coś jest niżej —
   stąd brak przewijania do dołu. 2000px starcza na każdą realną listę. */
/* flex:none jest tu kluczowe — bez niego flexbox ściskał grupy, żeby
   zmieścić je w wysokości panelu. Pozycje znikały pod kartą Passa,
   a scrollHeight nie rósł, więc nie było czego przewijać. */
.side-grupa{overflow:hidden;max-height:2000px;flex:none;
  transition:max-height .28s var(--ease);}
.side-sec{flex:none;}
.side-bot{flex:none;}
.side-grupa.zwiniete{max-height:0;}

/* Pozycje: większy cel kliknięcia, wyraźny stan aktywny */
.nav-i{padding:var(--s3) var(--s5);border-radius:0;
  transition:background .16s var(--ease),color .16s var(--ease);}
.nav-i:hover{background:rgba(255,255,255,.045);}
.nav-i.on{background:rgba(224,169,60,.12);color:#fff;font-weight:500;}
.nav-i.on::before{left:0;top:0;transform:none;width:2.5px;height:100%;
  border-radius:0;background:var(--accent);}

/* licznik jako plakietka, nie luźna cyfra */
.nav-i .cnt{background:rgba(255,255,255,.07);border-radius:var(--r-pill);
  padding:1px 7px;font-size:10px;color:#B9C3CE;min-width:20px;text-align:center;}
.nav-i.on .cnt{background:var(--accent);color:var(--deep);font-weight:600;}
.nav-i .cnt.q{background:transparent;color:#4E5A68;}

/* Karta Passa na dole: czytelniejsza, z wyraźnym paskiem zużycia */
.side-bot{padding:var(--s5);border-top:1px solid rgba(255,255,255,.07);}
.pass-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);
  padding:var(--s4);border-radius:var(--r-md);}
.pass-box .bar{height:5px;}
.side-dz{--r:56px !important;top:-38px;}

/* Na wąskim ekranie panel i tak jest wysuwany — zwijanie zbędne */
@media(max-width:900px){
  .side-grupa,.side-grupa.zwiniete{max-height:none;}
  .side-sec{cursor:default;}
  .side-sec::after{display:none;}
}