/* ============================================================================
   01-reset.css — normalizacja przeglądarki
   Tylko to, co naprawdę potrzebne. Bez agresywnego zerowania wszystkiego.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* PRZYWRÓCONE 11.08.2026 — 1:1 z produkcją (CLOUDE/public/styles.css:25137):
     body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -.005em; }
   Usunąłem te trzy ustawienia dziś, rozumując z teorii („antialiased pochodzi
   z macOS i na Windowsie kasuje ClearType"). Rozumowanie było poprawne
   w oderwaniu od projektu i BŁĘDNE tutaj: wersja produkcyjna, której użytkownik
   używa codziennie i która wygląda dobrze, ma je wszystkie trzy. Po ich zdjęciu
   tekst w v12 zaczął wyglądać na poszarpany — czyli te ustawienia NIE były
   przyczyną miękkości, tylko trzymały wygląd, do którego przyzwyczajony jest
   użytkownik.
   ZASADA, którą tu złamałem: najpierw sprawdź, jak robi to działająca wersja,
   dopiero potem zmieniaj. Poniżej zostaje oryginalny opis tego, CO te
   ustawienia robią — jako wiedza, nie jako uzasadnienie zmiany.

   ---- opis techniczny (bez zmian w kodzie) ----
   Zgłoszenie: „czcionki są niewyraźne i nieostre w całym GUI, aż oczy bolą".
   Zmierzone na maszynie użytkownika: Windows, `devicePixelRatio: 1.25`
   (skalowanie ekranu 125%), `-webkit-font-smoothing: antialiased`,
   `letter-spacing: -0.065px`.

   1. `-webkit-font-smoothing: antialiased` — TO BYŁA GŁÓWNA PRZYCZYNA.
      To ustawienie pochodzi z macOS, gdzie ścieńcza zbyt grube litery.
      Na Windowsie robi coś zupełnie innego: KASUJE wygładzanie podpikselowe
      (ClearType) i przełącza tekst na wygładzanie w skali szarości. Litery
      tracą wtedy ostre krawędzie i robią się cieńsze — dokładnie „niewyraźne
      i nieostre". Bez tej deklaracji przeglądarka wraca do ClearType.

   2. `text-rendering: optimizeLegibility` — wymusza ligatury i kerning,
      przez co szerokości znaków przestają być całkowite. Przy skalowaniu 125%
      każdy ułamek ląduje między pikselami ekranu. Wartość domyślna (`auto`)
      daje przeglądarce wolną rękę i ostrzejszy rezultat.

   3. `letter-spacing: -.005em` — przy 13 px to −0,065 px na KAŻDĄ literę.
      Jako światło jest niezauważalne, ale spycha każdy kolejny znak na
      ułamkową pozycję. To była zgodność 1:1 z monolitem v8 (tam też jest
      −.005em) i za nią płaciliśmy ostrością. Świadomie rezygnujemy:
      tekst będzie odrobinę szerszy niż w v8, a wiersze mogą łamać się
      w innych miejscach.
   ---- koniec opisu ----
   ZMIENIAĆ TE TRZY WYŁĄCZNIE RAZEM Z PRODUKCJĄ. Osobno powodują, że v12
   wygląda inaczej niż to, co użytkownik ma przed oczami na co dzień. */
/* RM3 (v15 b14, 04.10.2026): program ma wyglądać jak zatwierdzony WZÓR wyglądu, a nie jak monolit v8 — `body` jak we wzorze:
   bez ścieśnienia liter (wzór go nie ma; tytuły mają własne −.01em), wygładzanie `antialiased` (wzór), krój i skala z tokenów. */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--t-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; }
/* Nagłówki i akapity bez domyślnych marginesów — odstępy dajemy świadomie */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
/* Kontrolki dziedziczą typografię — inaczej przeglądarka wstawia własną */
input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }
/* ============================================================================
   JEDNO PODŚWIETLENIE FOKUSU NA CAŁĄ APLIKACJĘ — ujednolicone 11.08.2026
   ----------------------------------------------------------------------------
   Były DWA i wyglądały zupełnie inaczej:
     1. tutaj — twardy obrys 2 px odsunięty o 2 px NA ZEWNĄTRZ elementu,
     2. `03-kontrolki.css` — miękka poświata 4 px w barwie akcentu na polach.
   Pole tekstowe dostawało poświatę, a przycisk, zakładka i wiersz tabeli
   twardy obrys — więc przechodząc tabulatorem przez okno widziało się dwa
   różne języki wizualne.

   Do tego obrys z `outline-offset: 2px` leży 4 px POZA elementem, a okna mają
   `overflow: hidden` — przy polu stojącym blisko krawędzi podświetlenie było
   ucinane (zgłoszone przez użytkownika w oknie „Edytuj projekt").

   Zostaje POŚWIATA, bo to ona jest w tej aplikacji od zawsze na polach i jest
   łagodniejsza. Realizuję ją jako `outline` w tej samej barwie i grubości co
   `box-shadow` na polach — wygląda identycznie, ale NIE wchodzi w układ
   (nie przesuwa treści) i nie sumuje się z cieniami komponentów.
   `outline-offset: 0` sprawia, że pierścień leży NA krawędzi elementu, więc
   nie ma czego uciąć. */
:focus-visible { outline: var(--s-1) solid color-mix(in srgb, var(--accent) 18%, transparent); outline-offset: 0; }
:focus:not(:focus-visible) { outline: none; }
/* UWAGA: NIE wstawiać tu bloku `prefers-reduced-motion`, który zeruje czas
   WSZYSTKICH animacji. Monolit v8 nie ma takiej reguły, a przy włączonym
   w Windows „ogranicz animacje" zabijała ona m.in. obracający się pierścień
   ekranu ładowania — wyglądał jak zamrożony obrazek. Jeżeli kiedyś ma wrócić,
   to punktowo (konkretne ozdobniki), nigdy gwiazdką na całą aplikację. */
/* UKRYWANIE w jednym miejscu (W2, 27.09; było też w 06-elementy i 19-modale-tresc): (0,2,0) wygrywa z „display” pojedynczej klasy
   niezależnie od kolejności arkuszy, więc [hidden] i .hidden chowają zawsze, choć reguła stoi w resecie. */
:root :is([hidden], .hidden) { display: none; }

/* PASKI PRZEWIJANIA — JEDNO MIEJSCE NA CAŁĄ APLIKACJĘ (13.08.2026).
   Tor jest PRZEZROCZYSTY (koniec z białym paskiem na kolorowym tle), a suwak ma
   zaokrąglone końce. Zaokrąglenie i „odsunięcie od ścianki" robi przezroczysta
   ramka + `background-clip: content-box` — to jedyny sposób, żeby w przeglądarkach
   opartych na Chrome suwak nie dotykał krawędzi i miał promień na obu końcach.
   Firefox dostaje to samo przez `scrollbar-width` / `scrollbar-color`.
   Wymiary i kolory z tokenów (00-tokens.css) — zmienia się je TAM, nie tutaj. */
/* UWAGA — TU BYLA MOJA POMYLKA (13.08.2026). Ustawienie `scrollbar-width` na wszystkim
   WYLACZA w Chrome cala obsluge `::-webkit-scrollbar-*`: przegladarka przechodzi na swoj
   wlasny cienki pasek, ktory ma BIALY tor i wlasne strzalki — czyli dokladnie to, co
   uzytkownik zglaszal po pierwszej poprawce. Standardowe wlasciwosci zostawiamy wiec
   TYLKO tam, gdzie nie ma czesci webkitowych (Firefox). */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--pasek-kolor) transparent; }
}
*::-webkit-scrollbar { width: var(--pasek-szerokosc); height: var(--pasek-szerokosc); }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { border: var(--pasek-wciecie) solid transparent; border-radius: var(--r-pill); background-color: var(--pasek-kolor); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--pasek-kolor-hover); }
/* Strzałki na końcach paska: w trybie własnego paska Chrome rysuje im domyślny,
   kanciasty kwadrat. Nikt ich nie używa (przewija się kółkiem albo suwakiem), a psuły
   cały efekt zaokrąglenia — dlatego znikają. */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }