/* ============================================================
   Eduvia — wspólny komponent wyboru poziomu nauki (Etap -> Klasa)
   Używany identycznie w: quiz_app.html, exam_generator.html,
   notes_generator.html, lesson_planner.html, voice_conversation.html,
   whiteboard.html, onboarding.html.

   Zakłada, że strona hosta już definiuje w :root zmienne:
   --s2, --border, --border-hi, --text, --muted, --muted2,
   --accent2, --h (font nagłówków), --b (font tekstu).
   Wszystkie te strony mają identyczny zestaw zmiennych już dziś.
   ============================================================ */

.lvl-picker{display:flex;flex-direction:column;gap:10px;}

.lvl-stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;}

.lvl-stage-btn{
  min-width:0;padding:13px 6px;background:var(--s2);border:1px solid var(--border);
  border-radius:13px;color:var(--muted2);font-family:var(--h);
  font-size:.74em;font-weight:700;cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;white-space:normal;overflow-wrap:break-word;
}
.lvl-stage-btn svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0;}
.lvl-stage-btn:hover{border-color:var(--border-hi);color:var(--text);transform:translateY(-1px);}
.lvl-stage-btn.active{
  background:rgba(124,106,255,.12);border-color:rgba(124,106,255,.4);
  color:var(--accent2);box-shadow:0 0 16px rgba(124,106,255,.15);
}

.lvl-class-wrap{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .32s ease,opacity .25s ease,margin-top .32s ease;
}
.lvl-class-wrap.open{max-height:420px;opacity:1;margin-top:2px;}

.lvl-class-label{
  font-family:var(--h);font-size:.6em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}

.lvl-class-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:7px;}

.lvl-class-chip{
  min-width:0;padding:9px 5px;background:var(--s2);border:1px solid var(--border);
  border-radius:10px;color:var(--muted2);font-family:var(--h);
  font-size:.73em;font-weight:700;cursor:pointer;transition:all .18s;
  text-align:center;white-space:normal;overflow-wrap:break-word;line-height:1.25;
}
.lvl-class-chip:hover{border-color:var(--border-hi);color:var(--text);}
.lvl-class-chip.active{
  background:rgba(124,106,255,.14);border-color:rgba(124,106,255,.45);
  color:var(--accent2);box-shadow:0 0 10px rgba(124,106,255,.15);
}

/* Podsumowanie aktualnego wyboru - opcjonalny wiersz pod pickerem,
   uzywany np. w ankiecie onboardingowej. */
.lvl-summary{
  font-family:var(--b);font-size:.8em;color:var(--muted2);
  display:flex;align-items:center;gap:6px;margin-top:2px;
}
.lvl-summary strong{color:var(--accent2);font-weight:700;}

/* ============================================================
   Kompaktowy tryb (renderCompact) - jeden przycisk + rozwijany
   panel, uzywany zamiast pelnego .lvl-picker na stronach narzedzi
   (quiz/notatki/sprawdziany/voice/plan nauki), gdzie poziom
   zwykle jest juz auto-wypelniony z ankiety i nie potrzeba calego
   dwuetapowego widoku za kazdym razem. Wariant B: ikona inline,
   bez dodatkowego tla - ten sam wzorzec co linki w bocznym menu.
   ============================================================ */
.lvl-compact-wrap{position:relative;}

.lvl-compact-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;
  background:var(--s2);border:1.5px solid var(--border);border-radius:14px;
  cursor:pointer;text-align:left;font-family:var(--b);transition:all .2s;
}
.lvl-compact-btn:hover{border-color:var(--accent);background:var(--s3,var(--s2));}
.lvl-compact-btn.open{border-color:var(--accent);}
.lvl-compact-icon{width:18px;height:18px;color:var(--accent2);flex-shrink:0;stroke:currentColor;}
.lvl-compact-txt{flex:1;font-weight:700;font-size:.92em;color:var(--text);}
.lvl-compact-txt.placeholder{color:var(--muted2);font-weight:500;}
.lvl-compact-chev{color:var(--muted2);transition:transform .2s;flex-shrink:0;}
.lvl-compact-btn.open .lvl-compact-chev{transform:rotate(180deg);}

/* PRZEBUDOWANE PONOWNIE (31.08.2026). Historia: position:absolute wzgledem
   .lvl-compact-wrap -> position:fixed+portal do body -> "bottom sheet"
   (pelnoekranowe przyciemnione tlo + karta z dolu ekranu, wzorzec z Google
   Maps/Spotify/Uber). Bottom sheet dzialal poprawnie (zmierzony i
   potwierdzony), ale user po przetestowaniu na telefonie zdecydowal, ze
   woli inny kierunek: bez modala/przyciemnionego tla w ogole - panel
   rozwija sie W MIEJSCU, w normalnym ukladzie strony (jak <details> albo
   .lvl-class-wrap w pelnym .lvl-picker wyzej), popychajac tresc pod spodem
   w dol. Bez position:fixed, bez portalu do document.body, bez z-index,
   bez liczenia wysokosci viewportu i pasków .m-hdr/.m-nav - caly zestaw
   problemow z pozycjonowaniem z tego dnia po prostu nie ma tu zastosowania. */
.lvl-compact-inline-wrap{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .32s ease,opacity .25s ease,margin-top .32s ease;
}
.lvl-compact-inline-wrap.open{max-height:420px;opacity:1;margin-top:8px;}

.lvl-compact-inline{
  background:var(--s2);border:1px solid var(--border-hi);border-radius:14px;
  padding:10px;
}

.lvl-sheet-class-label{
  font-family:var(--h);font-size:.6em;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:10px 0 8px;
}

.lvl-stage-row{display:flex;gap:5px;}
.lvl-stage-chip{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 2px;border-radius:10px;background:var(--s1,var(--bg));border:1px solid var(--border);
  cursor:pointer;color:var(--muted2);transition:all .15s;font-family:var(--h);
}
.lvl-stage-chip svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}
.lvl-stage-chip span{font-size:.6em;font-weight:700;white-space:normal;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;text-align:center;line-height:1.15;max-width:100%;}
.lvl-stage-chip:hover{border-color:var(--border-hi);color:var(--text);}
.lvl-stage-chip.active{background:rgba(124,106,255,.12);border-color:var(--accent);color:var(--accent2);}

.lvl-class-row-compact{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.lvl-class-chip-compact{
  min-width:0;padding:9px 2px;border-radius:9px;background:var(--s1,var(--bg));border:1px solid var(--border);
  color:var(--muted2);font-family:var(--h);font-size:.75em;font-weight:700;text-align:center;
  cursor:pointer;transition:all .15s;white-space:normal;overflow-wrap:break-word;line-height:1.2;
}
.lvl-class-chip-compact:hover{border-color:var(--accent);color:var(--text);}
.lvl-class-chip-compact.active{background:var(--accent);border-color:var(--accent);color:#fff;}