/* Zerowanie roznic miedzy przegladarkami. Nic tu nie wyglada - tylko
   sprowadzamy znaczniki do przewidywalnego punktu wyjscia. */

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

    /* Marginesy ustawiamy swiadomie w `base`, nie dziedziczymy ich po
       przegladarce - inaczej pierwszy naglowek w karcie zawsze odpycha jej
       gorna krawedz i kazdy komponent musi to gasic osobno. */
    body,
    h1, h2, h3, h4, h5, h6,
    p, figure, blockquote, dl, dd, ul, ol, pre {
        margin: 0;
    }

    ul, ol {
        padding: 0;
    }

    /* Listy uzywane jako nawigacja - a takich jest tu wiekszosc - nie maja
       byc listami wypunktowanymi. */
    :where(ul, ol)[role="list"],
    :where(nav, .app-sidebar, .side-menu) :where(ul, ol) {
        list-style: none;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Obrazy zachowuja sie jak blok o wlasnej proporcji, a nie jak litera
       na linii bazowej - to kasuje zagadkowy odstep pod kazdym <img>. */
    img, svg, video, canvas, iframe {
        display: block;
        max-width: 100%;
    }

    img {
        height: auto;
    }

    /* `hidden` ma chowac naprawde. Przegladarka daje temu atrybutowi
       `display: none` we wlasnym arkuszu, wiec bije go KAZDA regula z klasy -
       wystarczy, ze schowany pojemnik dostanie `.stack` albo `.cluster`,
       i panel "dodatkowe opcje" stoi otwarty, mimo ze przycisk obok mowi
       "Pokaz". `!important` jest tu na miejscu: to nie jest wyglad do
       nadpisania, tylko stan elementu. */
    [hidden] {
        display: none !important;
    }

    /* Pola formularza nie dziedzicza kroju ani rozmiaru pisma - bez tego
       kazdy <input> i <select> pisze systemowym krojem w 13.33px. */
    input, button, textarea, select {
        font: inherit;
        color: inherit;
        letter-spacing: inherit;
    }

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

    textarea {
        resize: vertical;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* Dlugie numery seryjne i adresy nie rozpychaja kontenera. */
    p, li, h1, h2, h3, h4, td, th {
        overflow-wrap: break-word;
    }

    /* Kto prosi system o mniej ruchu, dostaje mniej ruchu. */
    @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;
        }
    }
}