/* ---------- Wspólny system kolorystyczny apki: fiolet + lawenda ----------
   Wydzielone z gramatyka.html/slownictwo.html (spec_redesign_pozostale_strony.md,
   Krok 1) po tym, jak te dwie strony i 5 kolejnych przekroczyły próg "reguły trzech"
   dla zduplikowanych tokenów motywu. Źródło prawdy dla wartości: poprawiona wersja
   gramatyka.html (nie ta specyfikacja) — fiolet + lawendowe tło, JEDEN kolor
   systemowy całej apki, nie per moduł. Każda strona podpina ten plik przez
   <link rel="stylesheet" href="theme.css"> w <head>, PRZED swoim własnym <style>
   (żeby lokalne reguły mogły w razie potrzeby coś nadpisać, choć obecnie żadna
   strona tego nie robi).

   Paleta zweryfikowana pod WCAG AA (kontrast >= 4.5:1 dla zwykłego tekstu) — patrz
   historia dostrajania w gramatyka.html/slownictwo.html. Kolory "vivid" (--accent/
   --success/--warn/--error) służą jako tła/obramowania (kontrast bez znaczenia);
   osobne tokeny *-text (przyciemnione warianty) używane WYŁĄCZNIE tam, gdzie kolor
   jest kolorem czcionki. --ink-on-accent to stały ciemny odcień tekstu na "vivid"
   przyciskach w OBU motywach (te barwy zostają jasne/pastelowe nawet w ciemnym
   motywie z założenia, więc ciemny tekst na nich działa wszędzie).

   Motyw jest zastosowany atrybutem data-theme na <html>, ustawianym synchronicznie
   przez theme-init.js (blokujący <script src> w <head>, zapobiega FOUC) i
   przełączanym w runtime przez MojangShared.initThemeToggle() (shared.js). Bez
   jawnego wyboru usera obowiązuje prefers-color-scheme systemu (poniższy @media),
   z jasnym jako domyślny fallback. */
:root {
  --bg: #FAF7FC;
  --card: #F1EBFA;
  --well: #FCFAFE;            /* "wgłębione" powierzchnie: inputy, kafelki, podpowiedź */
  --border: #E4D9F0;
  --text: #3D3833;
  --muted: #6B6055;           /* 5.8:1 na --bg, 5.3:1 na --card — AA OK */
  --accent: #BB97EB;          /* primary (fiolet) — tło/ramki; z --ink-on-accent 4.82:1 */
  --accent-hover: #C2A2EF;
  --accent-text: #6B3FA0;     /* fiolet jako TEKST (np. ikona 🔊) — 7.0:1/6.3:1 AA OK */
  --success: #6FCF97;         /* secondary (szałwia) — tło/ramki; z --ink-on-accent 6.1:1 */
  --success-text: #227A4C;    /* szałwia jako TEKST — 5.0:1 na bg, 4.8:1 na card, AA OK */
  --warn: #FFC857;            /* accent (złoty) — odznaki/wyróżnienia */
  --warn-text: #8A5F14;       /* złoty jako TEKST — 5.35:1/5.09:1, AA OK */
  --error: #E86A5C;           /* złagodzony koralowy czerwony — tło/ramki */
  --error-text: #C24632;      /* jako TEKST — 4.7:1/4.5:1, AA OK */
  --ink-on-accent: #3D3833;   /* stały ciemny tekst na "vivid" przyciskach, oba motywy */
  --shadow-color: rgba(74, 58, 107, 0.14);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 24px;

  /* ---------- SKALA WARSTW (z-index) — jedyne źródło prawdy dla całej apki ----------
     Wprowadzona po trzeciej awarii przełącznika motywu (2026-09-05): przycisk był
     przykryty pełnoekranowym overlayem modala, bo warstwy nie były nigdzie opisane
     i każdy nowy element chrome dostawał liczbę "na wyczucie". Audyt wykazał też
     przypadkową KOLIZJĘ (.glossary-tooltip i przełącznik motywu miały oba 40, więc
     o kolejności decydowała kolejność w DOM, nie decyzja projektowa).

     ZASADA: nie wpisuj liczb wprost w z-index — użyj tokenu. Nowy element wybiera
     najbliższy pasujący poziom; jeśli żaden nie pasuje, dopisz tu nowy token wraz
     z uzasadnieniem, zamiast wstawiać surową liczbę w pliku strony.

     Odstępy między poziomami są celowe (zostawiają miejsce na wstawki bez
     przenumerowania wszystkiego).

       --z-local        1   stackowanie WEWNĄTRZ komponentu (np. .modal-box .btn-row);
                            nie ma znaczenia poza swoim rodzicem
       --z-chrome      20   stały "chrome" strony w narożnikach (.auth-corner) —
                            świadomie POD modalem: klik "Zaloguj się" otwiera własny
                            modal, więc blokowanie go przy otwartym modalu jest poprawne
       --z-popover     25   przejściowe popovery wywołane przez użytkownika
                            (.glossary-tooltip — tłumaczenie klikniętego słowa):
                            NAD treścią i nad chrome (user właśnie je wywołał),
                            ale POD modalem (dymek nie ma prawa lewitować nad modalem)
       --z-modal       30   overlaye modali (.modal-overlay: changelog, auth) —
                            blokują treść strony pod sobą, i tak ma być
       --z-global-control 40  globalna kontrolka dostępna ZAWSZE (.theme-toggle-corner):
                            jedyny element celowo NAD modalem — zmiana motywu jest
                            idempotentna, nie nawiguje i nie otwiera własnego okna,
                            więc nie ma powodu blokować jej informacyjnym popupem
  */
  --z-local: 1;
  --z-chrome: 20;
  --z-popover: 25;
  --z-modal: 30;
  --z-global-control: 40;
}
/* Ciemny motyw: domyślnie z systemu (prefers-color-scheme), jeśli user nic świadomie
   nie wybrał — nadpisywany przez [data-theme] dopiero gdy jest zapisany wybór. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #201C29;
    --card: #2B2438;
    --well: #1A1621;
    --border: #3D3550;
    --text: #F5EFE6;
    --muted: #B0A392;
    --accent: #B794F4;        /* "jaśniejszy/mniej nasycony fiolet" — 4.72:1 z --ink-on-accent, 6.8:1 jako tekst na --bg */
    --accent-hover: #C4A8F7;
    --accent-text: #B794F4;
    --success: #8FD9AC;
    --success-text: #8FD9AC;
    --warn: #FFD37A;
    --warn-text: #FFD37A;
    --error: #F0958A;
    --error-text: #F0958A;
    --shadow-color: rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg: #201C29;
  --card: #2B2438;
  --well: #1A1621;
  --border: #3D3550;
  --text: #F5EFE6;
  --muted: #B0A392;
  --accent: #B794F4;
  --accent-hover: #C4A8F7;
  --accent-text: #B794F4;
  --success: #8FD9AC;
  --success-text: #8FD9AC;
  --warn: #FFD37A;
  --warn-text: #FFD37A;
  --error: #F0958A;
  --error-text: #F0958A;
  --shadow-color: rgba(0, 0, 0, 0.35);
}

/* ---------- Przełącznik jasny/ciemny motyw ----------
   Identyczny mechanizm/wygląd/miejsce na stronie na każdej stronie apki — jedna
   wspólna definicja zamiast N kopii. Zachowanie (JS) w shared.js
   (MojangShared.initThemeToggle), znacznik <div class="theme-toggle-corner">...
   w <body> każdej strony (patrz gramatyka.html/slownictwo.html jako wzorzec).

   WAŻNE (incydent 2026-09-05, druga iteracja): etykieta przycisku ("🌙 Ciemny" /
   "☀️ Jasny") jest teraz w HTML-u i przełączana CZYSTYM CSS-em na podstawie atrybutu
   data-theme, a NIE wstawiana przez JS. Wcześniej initThemeToggle() ustawiał
   btn.innerHTML, ale shared.js ładuje się na samym końcu <body> (po ~12 dużych
   plikach z danymi) — do tego momentu przycisk był PUSTY: bezkształtny owal 30x40px
   (zmierzone: ~480 ms przy wolnym łączu, a przy zablokowanym/niedostępnym shared.js
   PERMANENTNIE). Teraz etykieta jest poprawna już przy pierwszym malowaniu, bo
   theme-init.js ustawia data-theme synchronicznie w <head>, więc przycisk nigdy nie
   renderuje się pusty i nie zależy od tego, czy JS w ogóle dojdzie. */

/* Domyślnie (motyw jasny) przycisk PROPONUJE przejście na ciemny. */
.theme-toggle-label-light { display: none; }
.theme-toggle-label-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-label-dark { display: none; }
  :root:not([data-theme="light"]) .theme-toggle-label-light { display: inline; }
}
:root[data-theme="dark"] .theme-toggle-label-dark { display: none; }
:root[data-theme="dark"] .theme-toggle-label-light { display: inline; }
/* Jawny wybór jasnego motywu wygrywa nad ciemnym systemowym (specyficzność + kolejność). */
:root[data-theme="light"] .theme-toggle-label-dark { display: inline; }
:root[data-theme="light"] .theme-toggle-label-light { display: none; }
.theme-toggle-corner {
  position: fixed;
  top: 14px;
  left: 16px;
  /* Celowo NAD modalem — uzasadnienie przy definicji tokenu (SKALA WARSTW na górze).
     Incydent 2026-09-05 (trzecia awaria tego przycisku): przełącznik miał z-index 20,
     a modal "Co nowego" to `position:fixed; inset:0; z-index:30` z tłem
     rgba(...,0.55) — czyli PRZEZROCZYSTA warstwa na CAŁYM ekranie nad przyciskiem.
     Efekt: przycisk był doskonale widoczny (przeświecał przez półprzezroczyste tło),
     ale każde kliknięcie łapał overlay, więc "nic się nie działo". Dotyczyło każdego
     użytkownika, który nie widział jeszcze najnowszego wpisu changelogu — czyli
     każdego nowego/niezalogowanego, na wszystkich 7 stronach. */
  z-index: var(--z-global-control);
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--well);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 40px;
  box-shadow: 0 2px 8px var(--shadow-color);
}
.theme-toggle-btn:hover { border-color: var(--accent); background: var(--well); box-shadow: 0 2px 8px var(--shadow-color); transform: none; }

/* ---------- Stały "chrome" w prawym górnym narożniku (logowanie / użytkownik) ----------
   Przeniesione tutaj z 7 plików HTML, w których było skopiowane BAJT W BAJT — ta
   duplikacja była powodem, dla którego usterka poniżej istniała wszędzie naraz i
   nigdzie nie dało się jej naprawić w jednym miejscu (tak samo jak wcześniej z
   .theme-toggle-corner). */
.auth-corner {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  /* Bez tego ograniczenia element rósł wraz z długością nazwy użytkownika: przy
     ekranie 360px i nazwie "Michal Sikorski Testowy" zmierzono x=0, szerokość 344px
     — czyli CAŁA szerokość ekranu. Zasłaniał wtedy link "← Strona główna"
     (elementFromPoint w jego środku zwracał .auth-corner, klik nie dochodził).
     Zostawiamy miejsce po lewej na przełącznik motywu (~116px + odstęp). */
  max-width: calc(100% - 140px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.auth-corner button {
  padding: 8px 14px;
  font-size: 0.82rem;
  min-height: 40px;
  flex: none;              /* przycisk "Wyloguj" nigdy się nie zwęża ani nie łamie */
}
.auth-corner .user-badge {
  color: var(--muted);
  min-width: 0;
  /* Nazwa ZAWIJA SIĘ, nigdy nie jest ucinana. Wcześniej było tu
     overflow:hidden + text-overflow:ellipsis + white-space:nowrap, co przy 360px
     i dłuższej nazwie dawało samo "..." — nieczytelne. Imię użytkownika musi być
     widoczne w całości niezależnie od długości, także gdy nie ma w nim spacji. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.auth-corner .user-badge strong { color: var(--text); }

/* ---------- Miejsce na stały chrome, żeby nie przykrywał treści ----------
   Oba narożniki są position:fixed i zajmują pas y=14..54. Treść stron startowała
   od padding-top:32px, więc pierwszy element nagłówka (link "← Strona główna",
   zmierzony na y=32..64) wchodził DOKŁADNIE pod ten pas i był nieklikalny.
   Rezerwujemy pas pionowo — to naprawia problem niezależnie od szerokości nazwy
   użytkownika i od tego, jak szeroki jest ekran.

   Selektor `html body` (nie samo `body`) jest celowy: każda strona ustawia własny
   skrótowy `padding: 32px 16px 60px` w swoim <style>, który ładuje się PO tym
   pliku i nadpisałby samo `body { padding-top }`. Wyższa specyficzność wygrywa
   niezależnie od kolejności. */
@media (max-width: 900px) {
  html body { padding-top: 68px; }

  /* Na wąskich ekranach chrome PRZESTAJE być przyklejony i odjeżdża ze scrollem.
     Powód: element position:fixed zawsze w końcu przykryje treść, która pod niego
     wjedzie — zmierzone na 360px po przescrollowaniu: pigułka nawigacji
     "💬 Sytuacje życiowe" (czytanie.html) i zakładki "🗣️ Rozmowy"/"✉️ Maile"
     (sytuacje-zyciowe.html) stawały się nieklikalne. Rezerwacja miejsca u góry
     rozwiązuje tylko pozycję startową, nie przewinięcie.
     Na desktopie zostaje fixed — tam kolumna treści (max 720px, wyśrodkowana)
     nigdy nie wchodzi pod narożniki. */
  .theme-toggle-corner,
  .auth-corner { position: absolute; }

  /* Na wąskich ekranach powitanie dostaje WŁASNĄ LINIĘ pod przyciskami, zamiast
     walczyć o miejsce w jednym rzędzie z "Wyloguj" (co kończyło się ucięciem do
     "..."). Kontener rozciągamy na całą szerokość, żeby nazwa miała gdzie się
     zawinąć; pierwszy rząd to sam przycisk, drugi to powitanie. */
  .auth-corner {
    left: 16px;
    max-width: none;
  }
  .auth-corner .user-badge {
    order: 2;            /* pod przyciskiem "Wyloguj" */
    flex: 1 0 100%;      /* własna, pełnej szerokości linia */
    text-align: right;
    line-height: 1.35;
  }

  /* Rezerwacja pionowa musi uwzględnić tę drugą linię — ale TYLKO gdy powitanie
     faktycznie jest (u gościa jest sam przycisk "Zaloguj się", jeden rząd).
     Gdyby :has() nie było wspierane, zostaje 68px: powitanie ma
     pointer-events:none, więc w najgorszym razie nachodzi wizualnie, ale nadal
     niczego nie blokuje. */
  html body:has(.auth-corner .user-badge) { padding-top: 104px; }
}

/* Części NIEinteraktywne chrome nie łapią kliknięć — blokować może wyłącznie sam
   przycisk, nie otaczający go kontener ani tekst "Zalogowano jako: ...".
   (Na 360px szeroki .user-badge przykrywał link "← Strona główna".) */
.theme-toggle-corner,
.auth-corner { pointer-events: none; }
.theme-toggle-corner > *,
.auth-corner button { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}