/*
 * Normalizacja i style elementów podstawowych.
 *
 * Zamiast gotowego arkusza normalizującego (normalize.css) — kilkanaście
 * własnych reguł. Gotowy arkusz zawiera w większości poprawki dla przeglądarek
 * dawno wycofanych z użycia; te reguły dotyczą wyłącznie zachowań, które
 * faktycznie przeszkadzają.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * Zerowanie marginesów domyślnych. Przeglądarka nadaje je nagłówkom
 * i akapitom, przez co odstępy powstają w dwóch niezależnych miejscach:
 * z marginesu domyślnego i z układu. Odstępami zarządza wyłącznie układ.
 */
* {
    margin: 0;
}

html {
    /*
     * Punkt odniesienia dla jednostek rem. Nie ustawiamy tu rozmiaru pisma
     * w pikselach — nadpisałoby to ustawienie przeglądarki, przez co
     * użytkownik, który powiększył domyślną czcionkę ze względu na wzrok,
     * nie odczułby żadnej zmiany.
     */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;

    /* Wygładzanie pisma — bez niego tekst na ciemnym tle wygląda na grubszy. */
    -webkit-font-smoothing: antialiased;
}

/*
 * Atrybut `hidden` musi ukrywać element ZAWSZE.
 *
 * Przeglądarka realizuje go regułą `display: none` z arkusza domyślnego, więc
 * przegrywa z każdą własną regułą ustawiającą `display` — a takich reguł mamy
 * wiele (`.connection-status { display: flex }`, panele menu, komunikaty
 * błędów). Skutkiem był błąd widoczny w interfejsie: wskaźnik „Łączenie…"
 * zostawał na ekranie mimo nawiązanego połączenia, bo `element.hidden = true`
 * nie miało żadnego efektu wizualnego.
 *
 * `!important` jest tu użyte świadomie i jest to jedyne jego wystąpienie
 * w arkuszach poza regułami ograniczenia ruchu: element ukryty ma być ukryty
 * bez względu na to, co ustawi jego własna klasa.
 */
[hidden] {
    display: none !important;
}

/* Obrazy jako elementy blokowe dopasowane do kontenera. Domyślne zachowanie
   liniowe dodaje pod nimi kilka pikseli miejsca na linię bazową tekstu. */
img,
svg {
    display: block;
    max-width: 100%;
}

/*
 * Pola formularza nie dziedziczą kroju pisma od dokumentu — trzeba to
 * ustawić jawnie, inaczej wyświetlają się domyślnym krojem systemowym,
 * odmiennym od reszty interfejsu.
 */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* Łamanie długich wyrazów — bez tego adres URL wklejony w opis zadania
   rozpycha kartę poza szerokość kolumny. */
p,
h1, h2, h3, h4,
li,
dd {
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    line-height: var(--leading-tight);
    font-weight: 600;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

ul, ol {
    list-style: none;
    padding: 0;
}

/*
 * Widoczność fokusu.
 *
 * Obrys fokusu jest usuwany tylko tam, gdzie zastępujemy go własnym —
 * nigdy bezwarunkowo. Dla osoby poruszającej się po interfejsie klawiaturą
 * brak wskaźnika fokusu oznacza, że nie wiadomo, gdzie się jest.
 *
 * `:focus-visible` zamiast `:focus`: przeglądarka sama rozstrzyga, czy fokus
 * powstał z klawiatury (pokazujemy pierścień), czy z kliknięcia myszą
 * (pierścień byłby zbędnym hałasem).
 */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Ograniczenie ruchu — respektuje ustawienie systemowe osób, u których
   animacje wywołują zawroty głowy lub nudności. Nie usuwamy przejść
   całkowicie, tylko skracamy je do wartości nieodczuwalnej: dzięki temu
   zdarzenia zakończenia animacji, na których opiera się kod, nadal padają. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Treść widoczna wyłącznie dla czytników ekranu. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pasek przewijania dopasowany do motywu — domyślny jasny pasek na ciemnym
   tle jest widoczny jako jasny prostokąt przy krawędzi. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}