/*
 * Jeden pasek przewijania w całej aplikacji: cienki, zaokrąglony, bez strzałek,
 * na przezroczystym tle; ciemnieje po najechaniu. Dołączany na każdej stronie (w <head>).
 *
 * Kolor jest neutralny z przezroczystością (a nie z tokenów strony), bo strony mają różne
 * formaty zmiennych (--muted-fg "R G B" vs "R, G, B") — półprzezroczysty szary wygląda
 * dobrze i w jasnym, i w ciemnym motywie, na każdym tle i tapecie.
 *
 * WAŻNE: nie ustawiaj gdzie indziej scrollbar-width / scrollbar-color (poza "none" do
 * ukrywania). Chrome i Edge, widząc te standardowe właściwości, ignorują ::-webkit-scrollbar
 * i rysują systemowy pasek ze strzałkami. Dlatego Firefox (który zna tylko standard) dostaje
 * je wyłącznie tutaj, w @supports niżej.
 */

:root {
    --sb-size: 8px;
    --sb-thumb: rgba(128, 137, 152, .38);
    --sb-thumb-hover: rgba(128, 137, 152, .62);
}

/* ── Chrome, Edge, Safari, Opera ── */
::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    border-radius: 999px;
    /* 1px przezroczystej ramki = widoczny kciuk 6px z odstępem od krawędzi */
    border: 1px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--sb-thumb-hover);
}

/* ── Firefox (nie zna ::-webkit-scrollbar) ── */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--sb-thumb) transparent;
    }
}