/* Belka jest wspolna dla aplikacji ucznia (czarnej) i dla panelu (jasnego), wiec barwy
   przychodza ze zmiennych --belka-*, ustawianych w arkuszu konkretnej strony.
   Tutaj jest wylacznie uklad. */

:root {
  --belka-h: 44px;
  /* Wysokosc razem z wcieciem na notch — tyle ubywa ekranom pod belka. */
  --belka-pelna: calc(var(--belka-h) + env(safe-area-inset-top, 0px));
}

.belka {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--belka-pelna);
  padding: env(safe-area-inset-top, 0px)
           max(14px, env(safe-area-inset-right)) 0
           max(14px, env(safe-area-inset-left));
  background: var(--belka-bg);
  border-bottom: 1px solid var(--belka-line);
  color: var(--belka-fg);
  font-size: 14px;
}

.belka-kto {
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Srodek jest elastyczny i moze byc pusty. Od 2026-09-10 aplikacja wstawia tu nazwe
   ekranu i jego licznik — ekrany nie maja wlasnych naglowkow. `min-width: 0` pozwala
   tytulowi sie skrocic zamiast rozpychac belke. */
.belka-srodek {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--belka-muted);
  font-size: 13px;
}

/* Nazwa ekranu. Kropka rozdzielajaca siedzi w `::before`, wiec pojawia sie i znika razem
   z tytulem — na ekranie przejsciowym belka pokazuje samo imie, bez wiszacej kropki.
   Skracanie wielokropkiem jest tutaj, a nie na `.belka-srodek`: licznik i plakietka maja
   zostac czytelne przy dlugim „Sesja 10 wrzesnia, 09:12". */
.belka-tytul {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.belka-tytul:not(:empty)::before { content: "·"; margin-right: 6px; }

/* Licznik ekranu — dzis wylacznie dymki rozmowy („7/20"). Cyfry tabelaryczne, bo zmienia
   sie w miejscu (zasada z DESIGN.md). */
.belka-meta {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Prawa krawedz: plakietka jezyka. `flex: none` — sciska sie tytul, nigdy ona. */
.belka-prawo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Hamburger stoi PRZED imieniem, wiec zadnego `margin-left: auto` — to on jest
   pierwszym elementem belki, a nie ostatnim. */
.belka-menu > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: -8px;
  border-radius: 10px;
  color: var(--belka-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.belka-menu > summary::-webkit-details-marker { display: none; }
.belka-menu > summary:hover,
.belka-menu[open] > summary { background: var(--belka-hover); color: var(--belka-fg); }

/* Szuflada z lewej krawedzi, na pelna wysokosc pod belka. `position: fixed` liczy sie
   wzgledem okna, wiec nie ma znaczenia, ze <details> siedzi w srodku belki. */
.belka-lista {
  position: fixed;
  left: 0;
  top: var(--belka-pelna);
  bottom: 0;
  width: min(78vw, 288px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--belka-panel);
  border-right: 1px solid var(--belka-line);
  box-shadow: 12px 0 40px var(--belka-cien);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2;
}

/* Przyciemnienie reszty strony. Klikniecie w nie zamyka menu — obsluguje to belka.js,
   ktory i tak lapie klikniecia poza <details>. */
.belka-menu[open]::after {
  content: "";
  position: fixed;
  inset: var(--belka-pelna) 0 0 0;
  background: rgba(0, 0, 0, .55);
  z-index: 1;
}

/* <details> przechodzi z display:none na display:flex, wiec przejscie sie nie odpali —
   animacja owszem, bo startuje w chwili pojawienia sie elementu. */
@media (prefers-reduced-motion: no-preference) {
  .belka-menu[open] .belka-lista { animation: belka-wysun .2s cubic-bezier(.2,.7,.3,1); }
  @keyframes belka-wysun {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }
}

/* Naglowek grupy pozycji („Język"). */
.belka-grupa {
  padding: 14px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--belka-muted);
}

.belka-kres {
  height: 1px;
  margin: 8px 4px;
  background: var(--belka-line);
}

.belka-form { margin: 0; }

.belka-poz {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--belka-fg);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.belka-poz:hover:not(:disabled) { background: var(--belka-hover); }

/* Ikona jest wyciszona, dopoki pozycja nie jest wskazana albo aktywna — ma prowadzic
   wzrok po liscie, a nie konkurowac z podpisem. */
.belka-ico { flex: none; color: var(--belka-muted); }
.belka-poz:hover:not(:disabled) .belka-ico { color: inherit; }

/* Jezyk, w ktorym idzie nauka. Klase dokłada app.js, bo wybor siedzi w localStorage
   i serwer o nim nie wie. */
.belka-poz.is-teraz,
.belka-poz.is-teraz .belka-ico { color: var(--accent, currentColor); }
.belka-poz.is-teraz { font-weight: 600; }
/* Pozycje jeszcze niedzialajace: wyszarzone i nieklikalne, ale widoczne — maja mowic,
   co tu bedzie, a nie znikac. */
.belka-poz:disabled { color: var(--belka-muted); opacity: .5; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .belka-poz, .belka-menu > summary { transition: background .12s ease, color .12s ease; }
}