/* Klasy narzędziowe — pojedyncza właściwość, oparta na tokenach skórki.
   Import jako ostatni w components.css: mają wygrywać z regułami komponentów
   przy równej specyficzności, bo po to się je dokleja w szablonie. */

.u-muted { color: var(--color-text-muted); }
.u-secondary { color: var(--color-text-secondary); }
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.u-flex { display: flex; }
.u-col { display: flex; flex-direction: column; }
.u-center { display: flex; align-items: center; }
.u-wrap { flex-wrap: wrap; }

.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

/* Ukrycie wizualne z zachowaniem dostępności: element zostaje w drzewie
   dostępności i w kolejności fokusu klawiatury, znika tylko z ekranu.
   display:none i visibility:hidden są tu błędem — wyjmują kontrolkę
   z nawigacji klawiaturą.
   Bez bieżącego użycia w szablonach — dat-check chowa swój natywny input
   własną regułą w forms.css. Zostaje mimo to: to jedyny poprawny wzorzec
   na „ukryj wizualnie, zostaw dla czytnika ekranu" i następny przypadek,
   który go potrzebuje, nie powinien wymyślać go od nowa (albo sięgać po
   display:none i po cichu wyciąć element z nawigacji klawiaturą). */
.u-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}