/* ==========================================================================
   Lepidlo portálu nad IBM Carbonem
   ==========================================================================
   Carbon (`../carbon/styles.min.css`) dává komponenty, barvy, odsazení
   a tmavý režim. Tenhle soubor smí jen dvě věci:

     1. složit rozvržení z tokenů Carbonu (`--cds-*`) tam, kde Carbon žádné
        nemá — kostra stránky, nadpisy, tabulka na mobilu, matice oprávnění;
     2. doplnit prvky, které Carbon nemá (ukazatel síly hesla, záložní kódy).

   **Barva ani odsazení se tady nepíšou číslem.** Jen `var(--cds-…)`
   a `var(--portal-…)` z `tokens.css`. Překlep v názvu proměnné se nikde
   neprojeví chybou — hodnota se prostě nepoužije — a tmavý režim je
   přepnutí hodnot proměnných, ne druhá sada stylů. Výjimkou jsou hranice
   rozložení (`@media`), které kopírují breakpointy Carbonu: md 42 rem,
   lg 66 rem. Třídy Carbonu se tu nepřepisují ani nepřejmenovávají.
   ========================================================================== */

/* Atribut `hidden` musí platit i tam, kde třída Carbonu nastavuje `display`
   (`.cds--btn` je `inline-flex` a přebila by ho). Bez toho by se schované
   tlačítko ukázalo. */
[hidden] { display: none !important; }

/* ----------------------------------------------------------- kostra stránky -- */

/* Mřížka (`cds--grid`) si odsazení po stranách řeší sama, proto z obsahu
   Carbonovo vodorovné odsazení odpadá — jinak by na telefonu zbylo na
   text jen necelých dvě třetiny šířky. */
.portal-content.cds--content {
    padding-inline: 0;
    padding-block: var(--cds-spacing-06);
}

@media (min-width: 42rem) {
    .portal-content.cds--content { padding-block: var(--cds-spacing-07); }
}

/* Stránky, které nepíšou vlastní třídy (nové obrazovky webu), používají holé
   `h1`, `h2`, `p`, `code` a Carbonovy komponenty. Carbonův reset z nich
   udělá neodlišitelný text bez odsazení, proto tu mají základ z jeho typografie.
   Specificita je jen „element" (`:where()` kolem rodiče ji nuluje), stejná
   jako u resetu Carbonu, který má v souboru pořadí před tímhle — takže
   vyhrává tohle; třída Carbonu i třída portálu ho ale vždy přebijí a tenhle
   základ tak nikdy nepřepíše komponentu, jen vyplní, co jí chybí. */
:where(.portal-content, .portal-bare__main) h1 {
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-04-font-size);
    font-weight: var(--cds-heading-04-font-weight);
    line-height: var(--cds-heading-04-line-height);
    letter-spacing: var(--cds-heading-04-letter-spacing);
}

:where(.portal-content, .portal-bare__main) h2 {
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-03-font-size);
    font-weight: var(--cds-heading-03-font-weight);
    line-height: var(--cds-heading-03-line-height);
    letter-spacing: var(--cds-heading-03-letter-spacing);
}

:where(.portal-content, .portal-bare__main) h3 {
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-compact-02-font-size);
    font-weight: var(--cds-heading-compact-02-font-weight);
    line-height: var(--cds-heading-compact-02-line-height);
    letter-spacing: var(--cds-heading-compact-02-letter-spacing);
}

:where(.portal-content, .portal-bare__main) p {
    font-size: var(--cds-body-long-01-font-size);
    font-weight: var(--cds-body-long-01-font-weight);
    line-height: var(--cds-body-long-01-line-height);
    letter-spacing: var(--cds-body-long-01-letter-spacing);
}

:where(.portal-content, .portal-bare__main) code {
    font-family: var(--cds-code-02-font-family);
    font-size: var(--cds-code-02-font-size);
}

/* Odsazení mezi sourozenci uvnitř dlaždice a sloupce mřížky; kontejnery,
   které si rozestupy řeší samy (`cds--stack-vertical`), se nechávají být. */
:where(.portal-content) :where(.cds--tile, [class*="cds--col-"]):not(.cds--stack-vertical) > :where(* + *) {
    margin-block-start: var(--cds-spacing-03);
}

:where(.portal-content) :where(.cds--tile, [class*="cds--col-"]):not(.cds--stack-vertical) > :where(* + h2, * + h3) {
    margin-block-start: var(--cds-spacing-06);
}

/* Sloupce mřížky pod sebou (na telefonu) nebo v dalším řádku se nedotýkají. */
.portal-content .cds--row > [class*="cds--col"] { margin-block-end: var(--cds-spacing-05); }


/* ---------------------------------------------------------------- hlavička -- */

.portal-header__user {
    display: none;
    align-self: center;
    padding-inline: var(--cds-spacing-05);
    color: var(--cds-text-secondary);
    font-size: var(--cds-body-compact-01-font-size);
    line-height: var(--cds-body-compact-01-line-height);
    letter-spacing: var(--cds-body-compact-01-letter-spacing);
    white-space: nowrap;
}

@media (min-width: 42rem) {
    .portal-header__user { display: block; }
}

.portal-header__form { display: flex; margin: 0; }

/* Akce v hlavičce (účet, odhlášení) vystředí u Carbonu třída `cds--btn--icon-only`,
   kterou nese jeho tlačítko s popiskem v bublině. Tady je bublina nahrazená
   `title` a popiskem pro čtečku, takže se vystředění píše znovu. */
.portal-header__account,
.portal-header__logout {
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.portal-header__logout { color: var(--cds-text-primary); }

/* Ikony v hlavičce mají barvu jako u Carbonovy akce s ikonou: tlumená, při
   najetí plná. Odkaz by je jinak obarvil barvou odkazů. */
.portal-header__account svg,
.portal-header__logout svg { fill: var(--cds-icon-secondary); }

@media (any-hover: hover) {
    .portal-header__account:hover svg,
    .portal-header__logout:hover svg { fill: var(--cds-icon-primary); }
}

/* Odhlášení má na telefonu jen ikonu (popisek zůstává pro čtečku a v `title`),
   od šířky tabletu i slovo — kdo ikonám nevěří, tlačítko přečte. */
.portal-header__label {
    position: absolute;
    overflow: hidden;
    margin: -1px;
    block-size: 1px;
    inline-size: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 42rem) {
    .portal-header__logout {
        inline-size: auto;
        gap: var(--cds-spacing-03);
        padding-inline: var(--cds-spacing-05);
    }

    .portal-header__label {
        position: static;
        overflow: visible;
        margin: 0;
        block-size: auto;
        inline-size: auto;
        clip: auto;
        color: var(--cds-text-primary);
        font-size: var(--cds-body-compact-01-font-size);
        line-height: var(--cds-body-compact-01-line-height);
        letter-spacing: var(--cds-body-compact-01-letter-spacing);
    }
}

/* Tlačítko nabídky: dvě ikony, vidět je podle stavu. */
.portal-nav-toggle__close { display: none; }
.portal-nav-toggle[aria-expanded="true"] .portal-nav-toggle__open { display: none; }
.portal-nav-toggle[aria-expanded="true"] .portal-nav-toggle__close { display: block; }

/* ------------------------------------------------------- boční navigace -- */

/* Nadpis skupiny položek („Správa"). Carbon žádný nemá — jeho boční nabídka
   rozděluje skupiny jen čárou. */
.portal-nav__heading {
    padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-03);
    color: var(--cds-text-secondary);
    font-size: var(--cds-label-01-font-size);
    line-height: var(--cds-label-01-line-height);
    letter-spacing: var(--cds-label-01-letter-spacing);
}

/* Navigace má trvale `cds--side-nav--expanded` (podle něj Carbon posouvá
   obsah doprava o její šířku), takže na počítači je vidět sama. Pod 66 rem
   ji lepidlo schová a obsah vrátí na celou šířku; otevře ji až tlačítko
   v hlavičce (třída `portal-nav--open`, `app.js`) a pak překrývá obsah. */
@media (max-width: 65.98rem) {
    .portal-nav:not(.portal-nav--open) {
        inline-size: 0;
        visibility: hidden;
    }

    .portal-nav.cds--side-nav--expanded ~ .portal-content {
        margin-inline-start: 0;
    }
}

/* Přepínač stránek Správy je tu jen pro mobil; na počítači stejné položky
   nabízí boční navigace. */
@media (min-width: 66rem) {
    .portal-subnav { display: none; }
}

/* ------------------------------------------------ přihlášení a chybové stránky -- */

.portal-bare__main {
    min-block-size: 100vh;
    padding-block: var(--cds-spacing-09) var(--cds-spacing-07);
}

.portal-bare__brand {
    margin-block-end: var(--cds-spacing-07);
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-compact-02-font-size);
    font-weight: var(--cds-heading-compact-02-font-weight);
    line-height: var(--cds-heading-compact-02-line-height);
    letter-spacing: var(--cds-heading-compact-02-letter-spacing);
}

.portal-error__code {
    color: var(--cds-text-secondary);
    font-size: var(--cds-heading-05-font-size);
    font-weight: var(--cds-heading-05-font-weight);
    line-height: var(--cds-heading-05-line-height);
}

/* ------------------------------------------------------------- typografie -- */

/* Carbon u hlaviček a odstavců nic nenastavuje (jeho reset je shodí na
   `font: inherit`), typ písma se bere z tokenů typografie. */
.portal-title {
    margin: 0;
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-04-font-size);
    font-weight: var(--cds-heading-04-font-weight);
    line-height: var(--cds-heading-04-line-height);
    letter-spacing: var(--cds-heading-04-letter-spacing);
}

.portal-subtitle {
    margin: 0;
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-03-font-size);
    font-weight: var(--cds-heading-03-font-weight);
    line-height: var(--cds-heading-03-line-height);
    letter-spacing: var(--cds-heading-03-letter-spacing);
}

.portal-lead {
    margin-block-end: 0;
    max-inline-size: var(--portal-measure);
    margin-block-start: var(--cds-spacing-03);
    color: var(--cds-text-secondary);
    font-size: var(--cds-body-long-01-font-size);
    font-weight: var(--cds-body-long-01-font-weight);
    line-height: var(--cds-body-long-01-line-height);
    letter-spacing: var(--cds-body-long-01-letter-spacing);
}

.portal-eyebrow {
    margin-block-end: var(--cds-spacing-02);
    color: var(--cds-text-secondary);
    font-size: var(--cds-label-01-font-size);
    line-height: var(--cds-label-01-line-height);
    letter-spacing: var(--cds-label-01-letter-spacing);
}

.portal-note {
    max-inline-size: var(--portal-measure);
    color: var(--cds-text-secondary);
    font-size: var(--cds-helper-text-01-font-size);
    line-height: var(--cds-helper-text-01-line-height);
    letter-spacing: var(--cds-helper-text-01-letter-spacing);
}

.portal-strong { font-weight: 600; }

/* Neproporcionální písmo pro kódy, přihlašovací jména a časy. U vstupního
   pole se mění jen rodina písma, ne velikost. */
.portal-mono { font-family: var(--cds-code-02-font-family); }

.portal-tile-text {
    color: var(--cds-text-primary);
    font-size: var(--cds-body-long-01-font-size);
    line-height: var(--cds-body-long-01-line-height);
}

/* ---------------------------------------------------- formuláře a tlačítka -- */

/* Plnošířkové tlačítko (přihlášení, nastavení hesla). Carbon má tlačítka
   nejvýš 12,25 rem; na úzkém sloupci formuláře je pohodlnější celá šířka. */
.portal-btn--block {
    inline-size: 100%;
    max-inline-size: none;
}

/* Skupiny tlačítek se na telefonu skládají pod sebe a hlavní akce je nahoře:
   v DOM je pořadí Carbonu (vedlejší vlevo, hlavní vpravo), `column-reverse`
   ho obrátí. */
@media (max-width: 41.98rem) {
    .portal-content .cds--btn-set {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .portal-content .cds--btn-set .cds--btn { max-inline-size: none; }
}

.portal-toolbar { justify-content: flex-end; }

/* Nápověda pod zaškrtávátkem je odsazená pod text, ne pod čtvereček. */
.portal-checkbox-help { padding-inline-start: var(--cds-spacing-06); }

/* Věta u pole, kterou kreslí `partials/flash` v režimu `field`. */
.portal-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--cds-spacing-03);
    margin-block-start: var(--cds-spacing-02);
    color: var(--cds-text-error);
    font-size: var(--cds-helper-text-01-font-size);
    line-height: var(--cds-helper-text-01-line-height);
}

.portal-field-error__icon { flex: none; fill: var(--cds-support-error); }

/* Akce u hlášky („Vrátit") sedí v pruhu Carbonu vpravo. */
.portal-flash { max-inline-size: none; }
.portal-flash__action { margin-inline-start: auto; }

/* Filtry nad seznamem: pole pod sebou na telefonu mají mezeru, kterou jim
   Carbon u sloupců mřížky nedává. */
.portal-filters > [class*="cds--col"] { margin-block-end: var(--cds-spacing-05); }

/* ------------------------------------------------------- dlaždice webů -- */

/* Název, doména a výzva pod sebou vždy — rozlomení na dva sloupce podle
   délky názvu by vyrobilo dlaždice, které vypadají každá jinak. */
.portal-site-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cds-spacing-04);
    padding: var(--cds-spacing-05);
}

.portal-site-tile__text { display: flex; flex-direction: column; gap: var(--cds-spacing-02); }

.portal-site-tile__name {
    color: var(--cds-text-primary);
    font-size: var(--cds-heading-compact-02-font-size);
    font-weight: var(--cds-heading-compact-02-font-weight);
    line-height: var(--cds-heading-compact-02-line-height);
}

.portal-site-tile__domain {
    color: var(--cds-text-secondary);
    font-size: var(--cds-code-01-font-size);
}

.portal-site-tile__open {
    display: inline-flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    color: var(--cds-link-primary);
}

.portal-site-tile__open svg { fill: currentColor; }

/* -------------------------------------------- seznamy hodnot, kódy, odkazy -- */

.portal-sl-label { color: var(--cds-text-secondary); }
.portal-sl-split {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cds-spacing-03) var(--cds-spacing-05);
}

/* Záložní kódy se opisují ručně: neproporcionální písmo a dost místa. */
.portal-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--cds-spacing-03);
}

.portal-codes li {
    padding: var(--cds-spacing-03) var(--cds-spacing-04);
    background: var(--cds-layer-accent);
    color: var(--cds-text-primary);
    font-size: var(--cds-code-02-font-size);
}

/* Odkaz na heslo a opisovaný klíč: dlouhý řetězec bez mezer, který se musí
   zalomit, jinak by na telefonu vyjel z obrazovky. */
.portal-key {
    padding: var(--cds-spacing-04);
    background: var(--cds-layer-accent);
    color: var(--cds-text-primary);
    font-size: var(--cds-code-02-font-size);
    line-height: var(--cds-code-02-line-height);
    overflow-wrap: anywhere;
}

/* Zdroj textu pro tlačítko „Zkopírovat": je v dokumentu, ale nevidí ho nikdo. */
.portal-copy-source {
    position: absolute;
    overflow: hidden;
    margin: -1px;
    block-size: 1px;
    inline-size: 1px;
    clip: rect(0 0 0 0);
    white-space: pre;
}

.portal-qr svg { max-inline-size: 14rem; block-size: auto; }

/* Prvky, které fungují jen s JavaScriptem, se bez něj nekreslí (třídu `js`
   dává `<html>` skript při startu); a naopak náhrada, která bez skriptu
   zastupuje to, co skript přináší. */
html:not(.js) .portal-js-only { display: none !important; }
html.js .portal-no-js-only { display: none !important; }

/* --------------------------------------------------- ukazatel síly hesla -- */

/* Nápověda, ne kontrola — rozhoduje `PasswordPolicy` na serveru. Čtyři
   dílky, jak je plní `app.js` přes `data-on`. Barva dílků nese známku jen
   doplňkově: slovo („Síla hesla: Dobré") stojí pod nimi. */
.portal-meter { margin-block-start: var(--cds-spacing-03); inline-size: 100%; }

.portal-meter__bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cds-spacing-02);
}

.portal-meter__bar > span {
    display: block;
    block-size: var(--cds-spacing-02);
    background: var(--cds-border-subtle);
}

.portal-meter[data-score="0"] .portal-meter__bar > span[data-on="true"],
.portal-meter[data-score="1"] .portal-meter__bar > span[data-on="true"] { background: var(--cds-support-error); }
.portal-meter[data-score="2"] .portal-meter__bar > span[data-on="true"] { background: var(--cds-support-warning); }
.portal-meter[data-score="3"] .portal-meter__bar > span[data-on="true"],
.portal-meter[data-score="4"] .portal-meter__bar > span[data-on="true"] { background: var(--cds-support-success); }

.portal-meter__text {
    margin-block-start: var(--cds-spacing-02);
    color: var(--cds-text-secondary);
    font-size: var(--cds-helper-text-01-font-size);
    line-height: var(--cds-helper-text-01-line-height);
    letter-spacing: var(--cds-helper-text-01-letter-spacing);
}

/* ---------------------------------------------- tabulka lidí na telefonu -- */

/* Řádek tabulky se na úzké obrazovce rozloží do karty: popisek sloupce
   (`data-label`) vlevo, hodnota vpravo. Hlavička zůstává jako řádek odkazů
   na řazení — kdyby se schovala, na telefonu by se řadit nedalo. */
.portal-row--inactive td { color: var(--cds-text-secondary); }

/* Hlavička sloupce je odkaz, ne tlačítko jako v Carbonu; odkaz se nepodtrhává. */
.portal-table-stack .cds--table-sort { text-decoration: none; color: inherit; }

@media (max-width: 41.98rem) {
    .portal-table-stack,
    .portal-table-stack tbody { display: block; }

    /* Carbon dává řádkům pevnou výšku řádku tabulky; karta je vyšší. */
    .portal-table-stack tr { block-size: auto; }

    .portal-table-stack thead tr { display: flex; flex-wrap: wrap; }
    .portal-table-stack thead th { flex: 1 1 auto; inline-size: auto; }
    .portal-table-stack thead th:last-child { display: none; }

    .portal-table-stack tbody tr {
        display: block;
        padding-block: var(--cds-spacing-03);
        border-block-end: 1px solid var(--cds-border-subtle);
    }

    .portal-table-stack tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--cds-spacing-05);
        block-size: auto;
        min-block-size: var(--cds-spacing-08);
        border: 0;
        text-align: end;
    }

    .portal-table-stack tbody td::before {
        content: attr(data-label);
        color: var(--cds-text-secondary);
        font-size: var(--cds-label-01-font-size);
        text-align: start;
    }

    .portal-table-stack tbody td.portal-table-action { justify-content: flex-end; }

    /* Na telefonu je akce v kartě slovy, ne jen ikonou. */
    .portal-table-action .cds--btn--icon-only {
        inline-size: auto;
        max-inline-size: none;
        gap: var(--cds-spacing-03);
        padding-inline: var(--cds-spacing-05);
    }

    .portal-table-action__label { position: static; }
}

/* Od tabletu je to ikona; text zůstává jen pro čtečku. */
@media (min-width: 42rem) {
    .portal-table-action__label {
        position: absolute;
        overflow: hidden;
        margin: -1px;
        block-size: 1px;
        inline-size: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ------------------------------------------------------ matice oprávnění -- */

/* Hlavička s rolemi se lepí pod horní lištu, tabulka se posouvá s celou
   stránkou — kdyby měla vlastní posuvník, vešlo by se do ní pár řádků.
   Ke stránce se tedy musí posouvat i obal Carbonu (`overflow: visible`),
   jinak by lepení nefungovalo. Obal je tu bez vodorovného posuvníku
   schválně: matice má pevný počet sloupců a na telefon se vejde. */
.portal-perm-wrap .cds--data-table-content { overflow: visible; }

/* Pevné rozložení sloupců: první (název funkce) bere, co zbyde, role mají
   každá stejnou šířku. Bez něj by tlačítka „vše / nic" a dlouhé názvy
   roztáhly tabulku přes šířku telefonu. */
.portal-perm { inline-size: 100%; table-layout: fixed; }
.portal-perm thead th.portal-perm__role { inline-size: 4.5rem; padding-inline: var(--cds-spacing-02); }

@media (max-width: 41.98rem) {
    .portal-perm__role-name {
        font-size: var(--cds-label-01-font-size);
        line-height: var(--cds-label-01-line-height);
    }

    .portal-perm th.portal-perm__what,
    .portal-perm td { padding-inline: var(--cds-spacing-03); }
}

@media (min-width: 42rem) {
    .portal-perm thead th.portal-perm__role { inline-size: 9rem; padding-inline: var(--cds-spacing-03); }
}

.portal-perm thead th {
    position: sticky;
    inset-block-start: var(--portal-header-height);
    z-index: 1;
    vertical-align: bottom;
}

.portal-perm__role { text-align: center; }
.portal-perm__role-name { display: block; }
.portal-perm__role-count {
    display: block;
    color: var(--cds-text-secondary);
    font-weight: 400;
}

/* Ghost tlačítka Carbonu jsou modrá a modrá na šedé hlavičce tabulky
   (`layer-accent`) dává jen 3,8 : 1 — pod hranicí 4,5 : 1 pro běžný text.
   Na téhle ploše proto mají barvu textu ve všech stavech. */
.portal-perm .cds--btn--ghost,
.portal-perm .cds--btn--ghost:hover,
.portal-perm .cds--btn--ghost:active,
.portal-perm .cds--btn--ghost:focus { color: var(--cds-text-primary); }

.portal-perm__all {
    min-block-size: var(--cds-spacing-07);
    padding-inline: var(--cds-spacing-02);
    max-inline-size: none;
    inline-size: 100%;
    justify-content: center;
    white-space: normal;
}

.portal-perm__what { vertical-align: top; }
.portal-perm__name { display: block; color: var(--cds-text-primary); font-weight: 600; }
.portal-perm__hint,
.portal-perm__needs {
    display: block;
    margin-block-start: var(--cds-spacing-02);
    color: var(--cds-text-secondary);
    font-size: var(--cds-helper-text-01-font-size);
    font-weight: 400;
    line-height: var(--cds-helper-text-01-line-height);
}

.portal-perm__section td { padding: 0; background: var(--cds-layer-accent); }

.portal-perm__section-toggle {
    inline-size: 100%;
    max-inline-size: none;
    justify-content: flex-start;
    gap: var(--cds-spacing-03);
}

.portal-perm__section-toggle[aria-expanded="false"] .portal-perm__section-arrow { transform: rotate(-90deg); }
.portal-perm__section-arrow { flex: none; }

.portal-perm__section-title {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    min-block-size: var(--cds-spacing-08);
    padding-inline: var(--cds-spacing-05);
    font-weight: 600;
}

.portal-perm__section-name { font-weight: 600; }
.portal-perm__section-count,
.portal-perm__section-changed { color: var(--cds-text-secondary); font-weight: 400; }

.portal-perm__cell { position: relative; text-align: center; }

.portal-perm__box {
    align-items: center;
    margin: 0;
}

/* Stav políčka nese ikona vedle něj, ne barva: „změněno proti výchozímu
   stavu" a „chybí to, na čem funkce stojí" (A11Y-011, A11Y-012). */
.portal-perm__flag {
    position: absolute;
    inset-block-start: var(--cds-spacing-02);
    inset-inline-end: var(--cds-spacing-02);
    inline-size: var(--cds-spacing-04);
    block-size: var(--cds-spacing-04);
    fill: var(--cds-icon-secondary);
}

.portal-perm__flag--warn { inset-block-start: auto; inset-block-end: var(--cds-spacing-02); fill: var(--cds-support-warning); }

/* Přehled změn před uložením. */
.portal-review {
    display: grid;
    gap: var(--cds-spacing-02);
    color: var(--cds-text-primary);
    font-size: var(--cds-body-long-01-font-size);
}

.portal-perm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cds-spacing-05);
}

.portal-legend { row-gap: var(--cds-spacing-05); }
.portal-legend__item { block-size: 100%; }
.portal-legend__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cds-spacing-03);
    color: var(--cds-text-primary);
    font-weight: 600;
}

.portal-legend__key { color: var(--cds-text-secondary); font-weight: 400; font-size: var(--cds-code-01-font-size); }
.portal-legend__text {
    margin-block-start: var(--cds-spacing-03);
    color: var(--cds-text-secondary);
    font-size: var(--cds-helper-text-01-font-size);
    line-height: var(--cds-helper-text-01-line-height);
}

.portal-exception {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cds-spacing-03) var(--cds-spacing-05);
}

.portal-exception__role { color: var(--cds-text-secondary); }
.portal-exception__caps {
    flex-basis: 100%;
    color: var(--cds-text-primary);
    font-size: var(--cds-helper-text-01-font-size);
    line-height: var(--cds-helper-text-01-line-height);
}

/* Oprávnění navíc ve formuláři účtu. */
.portal-extra { border: 0; padding: 0; margin: 0; }
.portal-extra__legend { padding: 0; }
.portal-extra__section {
    color: var(--cds-text-secondary);
    font-size: var(--cds-label-01-font-size);
    line-height: var(--cds-label-01-line-height);
    letter-spacing: var(--cds-label-01-letter-spacing);
}

.portal-extra__from-role,
.portal-extra__added { color: var(--cds-text-secondary); }

/* ------------------------------------------------------- dotyk a pohyb -- */

/* Dotykový cíl 44 px platí pro DOTYK, ne pro myš: rozhoduje způsob
   ovládání, ne šířka okna. Na počítači by 44px pole roztahovala formulář
   bez užitku. Carbon má pole 40 px a tlačítka 48 px; dorovnává se jen to,
   co je pod hranicí. */
@media (pointer: coarse) {
    .cds--text-input,
    .cds--select-input,
    .cds--search-input,
    .cds--btn:not(.cds--btn--icon-only),
    .cds--side-nav__link,
    .portal-nav a.cds--header__menu-item,
    .cds--tabs__nav-item,
    .portal-sl-split .cds--link {
        min-block-size: var(--portal-touch-target);
    }

    /* Odkazy v navigaci a odkaz vedle stavu jsou samostatné cíle, ne text
       ve větě; text se v nich vystředí, ne přilepí nahoru. */
    .portal-nav a.cds--header__menu-item,
    .portal-sl-split .cds--link {
        display: flex;
        align-items: center;
        block-size: auto;
    }

    .cds--btn--icon-only {
        min-block-size: var(--portal-touch-target);
        min-inline-size: var(--portal-touch-target);
    }

    .cds--checkbox-label { min-block-size: var(--portal-touch-target); }

    /* Políčko v matici nemá viditelný popisek; klikací plocha je celý štítek
       a musí mít i šířku 44 px, ne jen výšku. Čtvereček a „fajfka" jsou
       pseudoelementy štítku, které Carbon kreslí u jeho levého horního
       rohu — oba se proto posunou na střed (`translate` se skládá s jeho
       vlastním `transform`, nepřepisuje ho). */
    .portal-perm__box .cds--checkbox-label {
        inline-size: var(--portal-touch-target);
        padding-inline-start: 0;
    }

    .portal-perm__box .cds--checkbox-label::before,
    .portal-perm__box .cds--checkbox-label::after {
        translate: var(--portal-checkbox-shift) var(--portal-checkbox-shift);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Nápověda: kroky jsou očíslované — Carbon seznamy číslování resetuje
   (dávka 7, nález axe/okem). Hodnoty jen z tokenů. */
.portal-steps { list-style: decimal; padding-left: var(--cds-spacing-07); margin-bottom: var(--cds-spacing-05); }
.portal-steps li { margin-bottom: var(--cds-spacing-03); }