/* =============================================================================
   Axlon — zakladova vrstva Kitu
   -----------------------------------------------------------------------------
   Portovana sekce "0. Zaklad" ze zmrazene explorace, design/components.css.

   PROC CELA SEKCE, A NE JEN CO SI KOMPONENTA VYZADA
       Pravidlo granularity rika, ze se portuje jen to, co si komponenta vyzada.
       Na zakladovou vrstvu se ale nevztahuje: nic z ni si zadna komponenta
       vyzadat NEUMI, protoze to nejsou jeji vlastnosti - je to podminka, ve
       ktere vsechny stoji.

       Dokazovalo se to dvakrat, oba doklady jsou z odectu:

         * Inkrement 2a: bez `box-sizing: border-box` mela bunka s height 30 px
           a spodni linkou 1 px vysku 31 px. Pres 25 radku skoro cely radek.
         * Inkrement 3a: bez `:where(button, ...) { font: inherit }` dedil tab
           font prohlizece, tedy Arial misto tokenoveho stacku. Sirka slova
           "Prehled" 55,69 px proti 56,66 px explorace.

       Obojí je neviditelne okem a obojí naslo az meritko. Portovat sekci po
       kouscich znamena hledat tyhle vady jednu po druhe - proto je tu cela.

   CO TU NENI: `body` a `html`. Ty patri APLIKACI, ne komponentove knihovne -
   katalog i zive stranky si je nesou samy (viz story-canvas.css). Kit nesmi
   prepsat plochu, do ktere ho nekdo vlozi.

   Nekterá pravidla nize maji kopii ve scoped CSS jednotlivych komponent, ktera
   vznikla driv, nez tahle vrstva. Kopie nejsou v rozporu (tytez hodnoty), ale
   je to duplicita - otevrena otazka v reportu inkrementu 3a.
   ========================================================================== */

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

/* Tlacitko a pole si od prohlizece nesou vlastni font a barvu. Bez tohohle
   pravidla dedi komponenta font prohlizece a rozejde se s tokenovou vrstvou,
   aniz by to bylo videt. */
:where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}

/* Tlacitko si od prohlizece nese ramecek a vodorovny padding. Obojí posouva
   obsah mimo osu a v tmave navigaci prosvita jako ramecek z roku 2005.
   Reset ma nulovou specificitu - kazde pravidlo komponenty ho prebije. */
:where(button) {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: inherit;
}

:where(a) {
    color: var(--axl-color-text-link);
    text-decoration: none;
}

:where(a:hover) { text-decoration: underline; }

/* Prstenec zaostreni na vsem, co ho nema vlastni. Nulova specificita, takze
   komponenta si ho muze prebit - a kdyz zapomene, prstenec presto je. */
:focus-visible {
    outline: var(--axl-focus-width) solid var(--axl-color-focus);
    outline-offset: var(--axl-focus-offset);
    border-radius: var(--axl-radius-small);
}

/* Text jen pro odecitac obrazovky. */
.axl-vh {
    position: absolute;
    width: var(--axl-border-hair);
    height: var(--axl-border-hair);
    margin: calc(-1 * var(--axl-border-hair));
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Ciselny text. Bez tabulkovych cislic se husty sloupec neda cist svisle.
   Kit si tuhle tridu v inkrementu 2a prepsal po svem a PRISEL PRITOM o tabulkove
   cislice - hlavicka jednotky merila 32,63 px misto 34,46 px explorace. */
.axl-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
}

.axl-unit {
    color: var(--axl-color-text-muted);
    font-size: var(--axl-text-caption);
}

/* Rozmery ikon. Sem patri proto, ze ikonu kresli KAZDA komponenta ve svem markupu
   (inline SVG, jako explorace) a scoped CSS jedne komponenty na SVG druhe nedosahne.
   Umistovani ikony uvnitr komponenty naopak zustava v jejim scoped CSS - tam uz
   je SVG jeji vlastni. */
.axl-icon {
    width: var(--axl-icon-md);
    height: var(--axl-icon-md);
    flex: none;
    display: block;
}

.axl-icon--sm { width: var(--axl-icon-sm); height: var(--axl-icon-sm); }

.axl-icon--lg { width: var(--axl-icon-lg); height: var(--axl-icon-lg); }