/* =============================================================================
   Axlon — sdilena vrstva Kitu
   -----------------------------------------------------------------------------
   Pravidla, ktera patri VIC NEZ JEDNE komponente. Portovano ze zmrazene
   explorace design/components.css, sekce 1.4, 5, 9 (avatar), 11, 13 a 19.

   PROC EXISTUJE
       Scoped CSS jedne komponenty nedosahne na markup, ktery kresli jina.
       Do inkrementu 4a se to resilo kopiemi - a kazda kopie byla vada, ktera
       cekala:

         * `.axl-tip` bydlelo v DataTable. Bublina v horni liste AppShellu proto
           NEBYLA VIDET vubec. Zapsano jako dluh v inkrementu 3b.
         * `.axl-card` bydlelo v DataTable. Karta KpiTile by se vykreslila jako
           pruhledny obdelnik bez ramecku.
         * `.axl-avatar` bydlelo v AppShellu. Medailonek v hlavicce DetailPanelu
           by mel velikost pisma, ne kolecko.

       Kopie by fungovala, ale duplicita mezi dvema komponentami znamena
       chybejici tretí misto - tohle je ono. Odznak dostal v inkrementu 3a
       vlastni komponentu, protoze si ho komponenta kresli SAMA; tyhle tridy si
       naopak kresli KAZDY VOLAJICI ve svem markupu, takze komponenta z nich
       byt nemuze.

   HRANICE PROTI ZAKLADOVE VRSTVE
       axl-base.css nese sekci "0. Zaklad" - podminky, ve kterych vsechno stoji
       (box-sizing, font: inherit, prstenec zaostreni). Nic z toho nema tridu.
       Tady jsou naopak POJMENOVANE plochy a pomucky. Deleni je podle toho, co
       hlida brana: brana-zakladu.py overuje, ze axl-base.css nese celou sekci 0,
       a slucovanim obou souboru by o tu kontrolu prisla.

   CO TU NENI: `.axl-loadbar`, `.axl-badge` a `.axl-chip`. Prvni kresli jen
   DataTable, druhe dve maji vlastni komponentu.
   ========================================================================== */

/* --- Obsah a mrizka (sekce 1.4) ----------------------------------------- */

.axl-content {
    padding: var(--axl-space-lg);
    display: grid;
    gap: var(--axl-space-lg);
}

.axl-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--axl-space-lg);
}

.axl-col-3  { grid-column: span 3; }
.axl-col-4  { grid-column: span 4; }
.axl-col-5  { grid-column: span 5; }
.axl-col-6  { grid-column: span 6; }
.axl-col-7  { grid-column: span 7; }
.axl-col-8  { grid-column: span 8; }
.axl-col-12 { grid-column: span 12; }

/* Zlomy jsou jedina cisla mimo tokenovy model - media query neumi custom
   property. Explorace to sama rika a odpovidaji sirce, pri ktere prestane byt
   citelna rada ctyr dlazdic, resp. dvou karet.

   Tokenova brana proto NEZAKAZUJE px v prelude media query - ale trva na tom,
   aby to bylo jedno ze zlomu, ktere vyhlasila explorace. Vlastni cislo tudy
   neprojde. Viz tools/brana-tokenu.sh, kontrola 2. */
@media (max-width: 1400px) {
    .axl-col-3 { grid-column: span 6; }
    .axl-col-5, .axl-col-7 { grid-column: span 12; }
}

@media (max-width: 1000px) {
    .axl-col-4, .axl-col-6, .axl-col-8 { grid-column: span 12; }
}

/* --- Karta (sekce 5) ----------------------------------------------------- */
/* Jedina plocha, ze ktere jsou slozene KpiTile, ChartCard, MapCard i DataTable.
   NENI to komponenta: explorace o ni mluvi jako o PLOSE a kazdy, kdo ji sklada,
   potrebuje sahnout na jeji telo. Obal by tomu bud zabranil (scoped CSS na cizi
   telo nedosahne), nebo pridal krabici, kterou explorace nema. */

.axl-card {
    background: var(--axl-color-surface);
    border: var(--axl-border-hair) solid var(--axl-color-border);
    border-radius: var(--axl-radius-surface);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.axl-card__head {
    display: flex;
    align-items: center;
    gap: var(--axl-space-sm);
    padding: var(--axl-space-md);
    border-bottom: var(--axl-border-hair) solid var(--axl-color-border-subtle);
    min-height: var(--axl-control-h-xl);
}

.axl-card__title {
    margin: 0;
    font-family: var(--axl-font-display);
    font-size: var(--axl-text-title-sm);
    line-height: var(--axl-text-title-sm-lh);
    font-weight: var(--axl-weight-semibold);
}

.axl-card__sub {
    font-size: var(--axl-text-caption);
    color: var(--axl-color-text-secondary);
}

.axl-card__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--axl-space-sm);
}

.axl-card__body {
    padding: var(--axl-space-md);
    flex: 1 1 auto;
    min-width: 0;
}

.axl-card__body--flush { padding: 0; }

.axl-card__foot {
    padding: var(--axl-space-sm) var(--axl-space-md);
    border-top: var(--axl-border-hair) solid var(--axl-color-border-subtle);
    background: var(--axl-color-surface-sunken);
    border-end-start-radius: var(--axl-radius-surface);
    border-end-end-radius: var(--axl-radius-surface);
}

/* --- Medailonek (sekce 1.2) --------------------------------------------- */
/* Kresli ho horni lista AppShellu i hlavicka DetailPanelu. */

.axl-avatar {
    width: var(--axl-control-h-md);
    height: var(--axl-control-h-md);
    border-radius: var(--axl-radius-pill);
    background: var(--axl-color-action-subtle);
    color: var(--axl-color-action-subtle-fg);
    display: grid;
    place-items: center;
    font-size: var(--axl-text-caption);
    font-weight: var(--axl-weight-semibold);
    flex: none;
}

/* V radku tabulky musi byt avatar mensi nez radek, jinak dolehne na delici linku. */
.axl-avatar--sm {
    width: var(--axl-table-avatar);
    height: var(--axl-table-avatar);
    font-size: var(--axl-text-micro);
}

/* --- Bublina a ikona vysvetleni (sekce 11) ------------------------------ */
/* Ciste CSS, funguje na hover i na klavesnici. Kresli ji hlavicka tabulky,
   popisek dlazdice, horni lista i seznam v detailu. */

.axl-tip { position: relative; }

.axl-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + var(--axl-space-2xs));
    left: 0;
    z-index: var(--axl-z-popover);
    max-width: var(--axl-tooltip-max-w);
    width: max-content;
    padding: var(--axl-space-2xs) var(--axl-space-sm);
    background: var(--axl-n-900);
    color: var(--axl-n-25);
    border: var(--axl-border-hair) solid var(--axl-n-700);
    border-radius: var(--axl-radius-control);
    box-shadow: var(--axl-shadow-md);
    font-size: var(--axl-text-caption);
    line-height: var(--axl-text-caption-lh);
    font-weight: var(--axl-weight-regular);
    letter-spacing: var(--axl-tracking-normal);
    text-transform: none;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    /* display: none, ne opacity + visibility. Skryty, ale vysazeny prvek se pocita
       do rolovatelneho presahu - rodic s overflow: auto pak ukaze posuvniky, i kdyz
       se obsah vejde. */
    display: none;
}

.axl-tip:hover::after,
.axl-tip:focus-visible::after { display: block; }

.axl-tip--end::after { left: auto; right: 0; }

/* Uvnitr rolovatelne tabulky se bublina otevira dolu - nahore by ji orizl ram. */
.axl-tip--below::after {
    bottom: auto;
    top: calc(100% + var(--axl-space-2xs));
}

/* Kreslena ikona, ne pismeno "i" v kolecku. Glyf ma vlastni postranni vyrovnani
   a v krouzku sedi opticky mimo stred; SVG ma stred v souradnicich. */
.axl-info {
    display: inline-grid;
    place-items: center;
    width: var(--axl-icon-sm);
    height: var(--axl-icon-sm);
    color: var(--axl-color-text-muted);
    cursor: help;
    background: none;
    border: 0;
    padding: 0;
    flex: none;
}

.axl-info:hover { color: var(--axl-color-text); }

.axl-info > .axl-icon { width: 100%; height: 100%; }

/* --- Stavy: prazdno, nacitani, chyba (sekce 13) ------------------------- */
/* Tri rozdilne obrazy, tri rozdilna sdeleni. Kresli je telo tabulky, telo
   dlazdice, telo karty grafu i telo detailu. */

.axl-state {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--axl-space-sm);
    padding: var(--axl-space-4xl) var(--axl-space-lg);
    min-height: var(--axl-chart-h);
    align-content: center;
}

.axl-state__art { color: var(--axl-color-text-muted); }

.axl-state--error .axl-state__art { color: var(--axl-color-risk-fg); }

.axl-state__title {
    font-size: var(--axl-text-title-sm);
    font-weight: var(--axl-weight-semibold);
}

.axl-state__text {
    color: var(--axl-color-text-secondary);
    font-size: var(--axl-text-body);
    max-width: var(--axl-panel-w);
}

.axl-state__actions {
    display: flex;
    gap: var(--axl-space-sm);
    margin-top: var(--axl-space-sm);
}

.axl-state__detail {
    font-family: var(--axl-font-mono);
    font-size: var(--axl-text-micro);
    color: var(--axl-color-text-muted);
    background: var(--axl-color-surface-sunken);
    border: var(--axl-border-hair) solid var(--axl-color-border-subtle);
    border-radius: var(--axl-radius-control);
    padding: var(--axl-space-2xs) var(--axl-space-sm);
    margin-top: var(--axl-space-sm);
}

/* Kostra drzi tvar obsahu, ktery prijde. Nikdy prazdna plocha. */
.axl-skel {
    display: block;
    background: var(--axl-color-border-subtle);
    border-radius: var(--axl-radius-small);
    height: var(--axl-space-md);
    position: relative;
    overflow: hidden;
}

.axl-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--axl-color-surface-hover), transparent);
    transform: translateX(-100%);
    animation: axl-shimmer var(--axl-motion-slow) var(--axl-ease) infinite;
    animation-duration: calc(var(--axl-motion-slow) * 6);
}

@keyframes axl-shimmer {
    to { transform: translateX(100%); }
}

.axl-skel--text   { height: var(--axl-space-md); }
.axl-skel--line   { height: var(--axl-space-sm); }
.axl-skel--metric { height: var(--axl-space-2xl); width: 60%; }
.axl-skel--block  { height: 100%; border-radius: var(--axl-radius-control); }

/* Kostra prouzku dlazdice. V exploraci stoji v sekci 19, protoze vyska je
   vlastnost dlazdice, ne kostry. */
.axl-skel--spark { height: var(--axl-kpi-spark-h); }

/* --- Odkazove tlacitko (sekce 4) --------------------------------------- */
/* Kresli ho FilterBar ("Zrusit vse") i chybovy stav dlazdice ("Zkusit znovu"). */

.axl-link-btn {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: var(--axl-color-text-link);
    font-size: var(--axl-text-caption);
    text-decoration: underline;
    text-underline-offset: var(--axl-space-3xs);
}

/* --- Seznam udaju a seznam udalosti (sekce 17) ------------------------- */
/* Typograficke vzory, ne komponenty: nemaji zadne chovani a obsah bunky si
   kresli obrazovka (jednotka, ikona vysvetleni, tlacitko kopirovani). Obal by
   kazdou hodnotu protahl fragmentem a nic za to nedal. */

.axl-deflist {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--axl-space-2xs) var(--axl-space-md);
    margin: 0;
    font-size: var(--axl-text-body);
}

.axl-deflist dt { color: var(--axl-color-text-secondary); }

.axl-deflist dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Technicky identifikator. Jediné misto, kde se v rozhrani ukaze. */
.axl-deflist dd.axl-mono {
    font-family: var(--axl-font-mono);
    font-size: var(--axl-text-caption);
    color: var(--axl-color-text-muted);
}

.axl-eventlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.axl-eventlist li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--axl-space-sm);
    align-items: center;
    padding-block: var(--axl-space-sm);
    border-bottom: var(--axl-border-hair) solid var(--axl-color-border-subtle);
}

.axl-eventlist li:last-child { border-bottom: 0; }

.axl-event__time {
    font-variant-numeric: tabular-nums;
    color: var(--axl-color-text-muted);
    font-size: var(--axl-text-caption);
}

.axl-event__where {
    color: var(--axl-color-text-secondary);
    font-size: var(--axl-text-caption);
}

/* --- Usazeni tlacitka, ktere kresli Button ------------------------------ */
/* Tridy, ktere volajici predava tlacitku pres parametr `Class`. Bydli tady ze
   stejneho duvodu jako vsechno ostatni v tomhle souboru: prvek kresli Button,
   takze na nej scoped CSS panelu ani zasobniku hlaseni nedosahne. Zjisteno
   odectem v inkrementu 4b - `.axl-toast__close` merilo 22,63 px misto 26 a
   drzelo `flex: 0 1 auto` misto `none`, protoze pravidlo neplatilo vubec. */

.axl-panel__close { margin-left: auto; }

.axl-toast__close {
    margin-left: auto;
    flex: none;
}

/* --- Legenda karty (sekce 13 a 14) -------------------------------------- */
/* Do inkrementu 5 bydlela jako scoped CSS v ChartCardu. Mapa ma legendu taky - a
   je to TATAZ plocha, ne podobna. Kopie by fungovala presne do chvile, kdy se
   jedna z nich zmeni. Presun sem je totez rozhodnuti jako u `.axl-card`
   v inkrementu 4a: plocha, ze ktere je slozene vic karet, patri do sdilene vrstvy.

   Prouzky serii (`--1` az `--6`) jdou s ni. Pouziva je jen graf, ale rozdelit
   rodinu tridy do dvou souboru je horsi nez nechat pohromade to, co explorace
   sazi pohromade. */

.axl-legend {
    display: flex;
    gap: var(--axl-space-md);
    flex-wrap: wrap;
    font-size: var(--axl-text-caption);
    color: var(--axl-color-text-secondary);
}

.axl-legend__key {
    display: inline-flex;
    align-items: center;
    gap: var(--axl-space-2xs);
}

.axl-legend__swatch {
    width: var(--axl-space-md);
    height: var(--axl-space-3xs);
    border-radius: var(--axl-radius-pill);
    flex: none;
}

.axl-legend__swatch--1 { background: var(--axl-series-1); }
.axl-legend__swatch--2 { background: var(--axl-series-2); }
.axl-legend__swatch--3 { background: var(--axl-series-3); }

/* Explorace nakreslila tri rady, tokeny jich maji sest. Ctvrta az sesta je
   mechanicke pokracovani teze rady, ne nova barva - hodnoty uz v tokenech jsou. */
.axl-legend__swatch--4 { background: var(--axl-series-4); }
.axl-legend__swatch--5 { background: var(--axl-series-5); }
.axl-legend__swatch--6 { background: var(--axl-series-6); }

/* Ctverec misto prouzku - legenda mapy a heatmapy popisuje PLOCHY, ne cary. */
.axl-legend__swatch--box {
    height: var(--axl-space-md);
    border-radius: var(--axl-radius-small);
}

.axl-legend__swatch--cluster {
    background: var(--axl-color-risk-bg);
    border: var(--axl-border-thin) solid var(--axl-color-risk-fg);
}

.axl-legend__swatch--depot { background: var(--axl-color-action); }

/* --- Legenda jako prepinac rad (inkrement 9, SC0002) ---------------------
   VYCHOZI JE POPIS. Kontrakt § ChartCard rika, ze kliknuti do legendy nedela nic;
   zmrazene zadani SC0002 naopak zada legendu, kterou jde rady vypinat. Obojí je
   zmrazene, takze prepinac je VARIANTA, ne nova podoba legendy - karta ho zapne,
   jen kdyz si o nej obrazovka rekne. Otazka je otevrena, ne uzavrena.

   VYPNUTA RADA SE NEPOZNA JEN BARVOU: nese `aria-pressed`, jmeno je preskrtnute
   a vzorek zesedne. Tri kanaly, z nichz dva jsou necervene. */

.axl-legend__key--toggle {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    border-radius: var(--axl-radius-small);
}

.axl-legend__key--toggle[aria-pressed="false"] { color: var(--axl-color-text-muted); }

.axl-legend__key--toggle[aria-pressed="false"] .axl-legend__name { text-decoration: line-through; }

.axl-legend__key--toggle[aria-pressed="false"] .axl-legend__swatch { background: var(--axl-color-border-strong); }

/* --- Legenda skaly ------------------------------------------------------- */
/* Popisek, prouzek a oba konce drzi pohromade jako JEDNA polozka legendy. */
.axl-legend__key--scale { gap: var(--axl-space-2xs); }

/* --- Podbarveni bunky podle rozsahu sloupce (inkrement 9, SC0002) --------
   PROC JE TO TADY A NE VE SCOPED CSS: kresli to VIC NEZ JEDNA komponenta -
   bunku `DataTable` (pres CellClass) a prouzek `RangeScale`. Kdyby pravidla
   bydlela v jedne z nich, druha by vykreslila jinou barvu pro tyz krok a nikdo
   by si toho nevsiml, dokud by je nepolozil vedle sebe.

   PROC SEKVENCNI SKALA HEATMAPY: tokenova sada ma prave jednu skalu, jejiz kroky
   se lisi SVETLOSTI - a o to tu jde, protoze v sede zustava poradi kroku zachovane.
   Druha skala by znamenala dve odpovedi na tutez otazku.

   BARVA POPREDI SE MENI S KROKEM. Tokeny na to maji dvojici od zacatku
   (--axl-heat-fg-light pro kroky 0-2, --axl-heat-fg-dark pro 3-5), ale explorace
   je nikdy nepouzila: jeji bunky heatmapy jsou prazdne. SC0002 je prvni misto,
   kde na tech krocich stoji CISLO. */

.axl-range { color: var(--axl-heat-fg-light); }

.axl-range--0 { background: var(--axl-heat-0); }
.axl-range--1 { background: var(--axl-heat-1); }
.axl-range--2 { background: var(--axl-heat-2); }

.axl-range--3 { background: var(--axl-heat-3); color: var(--axl-heat-fg-dark); }
.axl-range--4 { background: var(--axl-heat-4); color: var(--axl-heat-fg-dark); }
.axl-range--5 { background: var(--axl-heat-5); color: var(--axl-heat-fg-dark); }

/* Prouzek legendy: sest kroku vedle sebe, bez mezer - je to jedna skala, ne sest
   samostatnych vzorku. */
.axl-range__ramp {
    display: inline-flex;
    border-radius: var(--axl-radius-small);
    overflow: hidden;
}

.axl-range__swatch {
    width: var(--axl-space-md);
    height: var(--axl-space-sm);
    flex: none;
}

/* --- Pole a jeho popisek (sekce 3) -------------------------------------- */
/* Do inkrementu 6 bydlelo ve scoped CSS Selectu. Kresli ho ale i `DateRange` -
   a hlavne ho kresli KAZDY VOLAJICI, ktery si sklada vlastni pole. Presun sem je
   totez rozhodnuti jako u karty ve 4a a legendy v 5. */

.axl-field {
    display: flex;
    flex-direction: column;
    gap: var(--axl-space-2xs);
    min-width: 0;
}

.axl-field__label {
    font-size: var(--axl-text-micro);
    font-weight: var(--axl-weight-semibold);
    letter-spacing: var(--axl-tracking-caps);
    text-transform: uppercase;
    color: var(--axl-color-text-muted);
}

/* display: flex jako u chyby, ne inline. Inline obsah si ve slotu vyrobi strut
   z radkovani radku a slot je pak o pixel vyssi nez s chybou - rozhrani by pri
   zobrazeni chyby poskocilo. Zmereno pri stavbe 3a: 16 px proti 15 px. */
.axl-field__hint {
    display: flex;
    align-items: center;
    font-size: var(--axl-text-micro);
    line-height: var(--axl-text-micro-lh);
    color: var(--axl-color-text-muted);
}

/* Radkovani je tady zamerne totez jako u napovedy. Bez nej ma flexovy radek
   chyby o pixel jinou vysku a rozhrani pri zobrazeni chyby poskoci - presne to,
   co kontrakt zakazuje. Zmereno pri stavbe 3a: 18 px proti 19 px. */
.axl-field__error {
    font-size: var(--axl-text-micro);
    line-height: var(--axl-text-micro-lh);
    color: var(--axl-color-risk-fg);
    display: flex;
    gap: var(--axl-space-3xs);
    align-items: center;
}

/* Misto pro napovedu i chybu je vyhrazene OD ZACATKU - kontrakt to zada, aby
   rozhrani neposkakovalo. Explorace to nema; .axl-field je tam jen sloupec. */
/* Radkovani MUSI byt na slotu, ne jen na jeho obsahu. Slot s inline textem si
   bere strut z dedeneho radkovani (18 px), zatimco flexovy radek chyby ho nema
   (15 px) - a rozhrani pri zobrazeni chyby poskocilo o tri pixely. Zmereno pri
   stavbe 3a; prvni oprava radkovani jen u napovedy a chyby to nespravila. */
.axl-field__slot {
    display: block;
    min-height: var(--axl-text-micro-lh);
    line-height: var(--axl-text-micro-lh);
}

/* Popisek vedle pole - tak ho kresli explorace ve strankovani (.axl-pager__size).
   Popisek pak neni verzalkovy micro nad polem, ale beznny text na jeho urovni. */
.axl-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--axl-space-sm);
}

.axl-field--inline .axl-field__label {
    font-size: var(--axl-text-caption);
    font-weight: var(--axl-weight-regular);
    letter-spacing: var(--axl-tracking-normal);
    text-transform: none;
    color: var(--axl-color-text);
    white-space: nowrap;
}

/* Vyhrazene misto pod polem ve vodorovne variante nedava smysl - popisek i pole
   stoji na jedne rade a napoveda by radu rozhodila. */
.axl-field--inline .axl-field__slot { display: none; }

/* --- Skupina tlacitek (sekce 2) ----------------------------------------- */
/* Slepene tlacitka. Vnitrni pravidla miri na prvek, ktery kresli Button, takze
   scoped CSS volajiciho na nej nedosahne - stejny duvod jako u `.axl-panel__close`
   vyse. Portovano az v inkrementu 5, protoze prvni si o skupinu rekly ovladace
   priblizeni mapy. */

.axl-btngroup { display: inline-flex; }

.axl-btngroup .axl-btn {
    border-radius: 0;
    margin-left: calc(-1 * var(--axl-border-hair));
}

.axl-btngroup .axl-btn:first-child {
    border-start-start-radius: var(--axl-radius-control);
    border-end-start-radius: var(--axl-radius-control);
    margin-left: 0;
}

.axl-btngroup .axl-btn:last-child {
    border-start-end-radius: var(--axl-radius-control);
    border-end-end-radius: var(--axl-radius-control);
}

.axl-btngroup .axl-btn[aria-pressed="true"] {
    background: var(--axl-color-action-subtle);
    border-color: var(--axl-color-action-border);
    color: var(--axl-color-action-subtle-fg);
    z-index: var(--axl-z-sticky);
}

/* --- Prekryv mapy: shluky a depa (sekce 16) ----------------------------- */
/* PRAVIDLA SE ODSTEHOVALA do Axlon.Shared/wwwroot/axl-map.css (inkrement 7).

   Duvod: znacky kresli interop vrstva v DOM, takze jejich podoba je vlastnost
   MAPY, ne karty, ktera ji ramuje - a mapa je podle konceptu v obou vetvich
   srovnani TATAZ. Dokud bydlely tady, vychozi cesta na ne nedosahla a shluky by
   v ni vysly cerne. Soubor generuje tools/styl-mapy.py z tehoz design/tokens.css
   a pripojuje si ho sam Axlon.Shared, aby ho zadna vetev nemohla zapomenout. */

/* --- Pomucky rozvrzeni a textu (sekce 19) ------------------------------ */

.axl-stack { display: grid; gap: var(--axl-space-md); }

.axl-stack--sm { gap: var(--axl-space-sm); }

.axl-row {
    display: flex;
    gap: var(--axl-space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.axl-row--between { justify-content: space-between; }

.axl-muted { color: var(--axl-color-text-muted); }

.axl-secondary { color: var(--axl-color-text-secondary); }

.axl-caption {
    font-size: var(--axl-text-caption);
    line-height: var(--axl-text-caption-lh);
}

.axl-micro {
    font-size: var(--axl-text-micro);
    line-height: var(--axl-text-micro-lh);
}

.axl-strong { font-weight: var(--axl-weight-semibold); }

/* Explorace pohyb vypina; sdilena vrstva to musi delat taky. */
@media (prefers-reduced-motion: reduce) {
    .axl-skel::after { animation: none; }
}