/*
  Vzhľad wrapper vrstvy Gate.Ui — dizajnový systém aplikácie („Modernist", redizajn 2026-08-18).
  Zdrojom farieb, mierky a tvaru je BLOK TOKENOV nižšie; Fluent tokeny web komponentov
  (--neutral-*, --accent-*) sú z neho odvodené, takže rám a knižnica kreslia jednou paletou.
  Farba nikdy nie je jediným nositeľom informácie (WCAG 2.1 AA / EN 301 549) — stav vždy
  nesie aj text.
*/

/* ── farebná schéma ──────────────────────────────────────────────────────── */

/*
  Aplikácia sleduje SYSTÉMOVÚ schému používateľa (`prefers-color-scheme`) a riadi ju VÝHRADNE
  táto kaskáda — `FluentDesignTheme` je od redizajnu preč (viď Ui/GateTheme.razor): jeho
  JavaScript prepočítaval akcentovú paletu z Fluent modrej a našu prepisoval. Vlastný prepínač
  témy zámerne nie je: inak by vznikol stav v prehliadači, ktorý sa môže rozísť so systémom.

  Tvar je hranatý všade (polomer 0), plocha plochá (tieň má len modálny prekryv) a akcent je
  jeden — červená značky. To nie je vkus, ale pravidlo čitateľnosti dátovej obrazovky: farba
  ostáva voľná pre stav, nie pre dekoráciu.
*/
:root {
    /*
      Natívne prvky (<select>, <input type="date">, posuvníky, zaostrenie) kreslí prehliadač
      podľa `color-scheme`. Bez tohto riadku by v tmavej schéme ostali biele — svetlé okno
      uprostred tmavej stránky.
    */
    color-scheme: light dark;

    /* ── písmo ─────────────────────────────────────────────────────────── */

    /*
      Archivo (SIL OFL 1.1, samostatne hostené vo `wwwroot/fonts/` — dôvod a licencia sú
      v app.css). Systémové rodiny za ním sú záloha na tú sekundu, kým sa woff2 dopočíta,
      a poistka pre stanicu, kde by sa súbor nenačítal vôbec.
    */
    --gate-font: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --gate-font-heading: var(--gate-font);
    --gate-heading-weight: 800;

    /* ── farby ─────────────────────────────────────────────────────────── */

    --gate-bg: #f3f2f2;
    --gate-surface: #eae9e9;
    --gate-text: #201e1d;

    /*
      Akcent má TRI znenia a nie je to zbytočnosť: #ec3013 má na ploche stránky kontrast
      3,8 : 1, čo stačí na plochy a obruby (non-text ≥ 3 : 1), ale NIE na text ani na výplň
      pod bielym textom (≥ 4,5 : 1). Preto:
        --gate-accent       plochy, obruby, značky, zaostrenie (nikdy pod malým textom),
        --gate-accent-text  akcentový TEXT (predtext, hviezdička, odkaz, číslo sekcie) 5,6 : 1,
        --gate-accent-fill  výplň, na ktorej stojí text (primárne tlačidlo, monogram) 5,0 : 1.
      Predloha používa accent-700 pre predtext a hviezdičky sama, takže to nie je odklon
      od nej, len jeho dôsledné dotiahnutie.
    */
    --gate-accent: #ec3013;
    --gate-accent-2: #e15b47;
    --gate-accent-text: #ae1800;
    --gate-accent-fill: #c92610;
    --gate-accent-fill-hover: #ae1800;
    --gate-accent-fill-active: #7c1405;

    /*
      Linka a tlmený text sa počítajú z farby textu, nie z vlastných hexov — tak sa v tmavej
      vetve mení jediná hodnota a pomery ostanú. Predloha má tlmený text na 55 % (3,8 : 1 na
      ploche stránky, teda pod AA); 68 % drží 5,1 : 1 na ploche a 4,9 : 1 na paneli.
      Obruba vstupu je 60 % (≥ 3 : 1 voči výplni aj voči ploche — WCAG 1.4.11), predlohových
      40 % dáva len 2,2 : 1 a pole je od okolia takmer nerozoznateľné.
    */
    --gate-divider: color-mix(in srgb, var(--gate-text) 40%, transparent);
    --gate-muted: color-mix(in srgb, var(--gate-text) 68%, transparent);
    --gate-input-border: color-mix(in srgb, var(--gate-text) 60%, transparent);
    --gate-input-border-hover: color-mix(in srgb, var(--gate-text) 75%, transparent);

    /*
      Staršie mená tej istej linky. Kaskáda ich používa na desiatkach miest (a golden testy
      ich citujú), takže sa neprepisujú — ukazujú na nové tokeny, aby zdroj ostal jeden.
    */
    --gate-border: var(--gate-divider);
    --gate-border-strong: var(--gate-input-border);

    /*
      Tonálne rady. Generované v OKLCH na jednej spoločnej škále svetlosti, takže rovnaký
      stupeň ktorejkoľvek roly má rovnakú vizuálnu hodnotu (prevzaté z predlohy).
    */
    --gate-neutral-100: #f8f4f4;
    --gate-neutral-200: #eae7e7;
    --gate-neutral-300: #d7d3d3;
    --gate-neutral-400: #bab6b6;
    --gate-neutral-500: #9b9797;
    --gate-neutral-600: #7d7979;
    --gate-neutral-700: #605d5d;
    --gate-neutral-800: #444141;
    --gate-neutral-900: #2d2b2b;

    --gate-accent-100: #fff2ef;
    --gate-accent-200: #ffe0d9;
    --gate-accent-300: #ffc4b8;
    --gate-accent-400: #ff9783;
    --gate-accent-500: #ff563c;
    --gate-accent-600: #dd2b0f;
    --gate-accent-700: #ae1800;
    --gate-accent-800: #7c1405;
    --gate-accent-900: #4d170e;

    /*
      TICHÉ PLOCHY (štítok, aktívna záložka, riadok pod kurzorom). Tonálne rady vyššie sa
      v tmavej schéme NEOTÁČAJÚ — stupeň 100 je svetlý v oboch — takže by z nich v tmavej
      schéme vznikli svietiace obdĺžniky na tmavej karte. Preto majú tieto tri roly vlastný
      pár tokenov, ktorý sa vo vetve nižšie prepne na priehľadný nádych vlastnej farby.
    */
    --gate-neutral-soft: var(--gate-neutral-100);
    --gate-neutral-soft-text: var(--gate-neutral-800);
    /*
      Akcentová TICHÁ PLOCHA je stupeň 200, nie 100. Stovka (#fff2ef) je SVETLEJŠIA než plocha
      stránky (#f3f2f2) — pomer 1,02 : 1 — takže štítok „Koncept" v hlavičke dokumentu ani
      aktívna záložka sprievodcu na ploche stránky nemali hranu vôbec a splývali s pozadím
      (nález sweepu 2026-08-18). Stupeň 200 drží 1,12 : 1 voči ploche stránky a 8,6 : 1 pre
      text stupňa 800 na sebe — teda stále nad hranicou pre bežný text.
    */
    --gate-accent-soft: var(--gate-accent-200);
    --gate-accent-soft-text: var(--gate-accent-800);
    /*
      NAJTICHŠIA AKCENTOVÁ PLOCHA — podklad aktívnej záložky sprievodcu. Predloha na tom mieste
      má stupeň 100 a pre záložku je to správne: hranu jej dáva 2 px akcentová linka, na ktorej
      stojí, takže ju podklad niesť nemusí (štítok ju niesť musí, a práve preto stúpil na stupeň
      200 — viď `--gate-accent-soft` vyššie). Silnejší odtieň by z pásu záložiek spravil druhé
      akcentové miesto vedľa hlavného úkonu obrazovky.
    */
    --gate-accent-faint: var(--gate-accent-100);
    --gate-hover-soft: color-mix(in srgb, var(--gate-text) 7%, transparent);

    /* ── rozmery ───────────────────────────────────────────────────────── */

    --gate-space-1: 4px;
    --gate-space-2: 8px;
    --gate-space-3: 12px;
    --gate-space-4: 16px;
    --gate-space-6: 24px;
    --gate-space-8: 32px;

    /*
      HRANATÉ VŠETKO. Nie je to štýlová póza: zaoblenie je v tejto zostave jediný tvarový
      signál, ktorý by musel byť konzistentný naprieč vlastnou kaskádou aj tieňovými stromami
      FluentUI — a tam sa polomer počíta z `--control-corner-radius`. Nula je jediná hodnota,
      ktorú obe strany kreslia rovnako.
    */
    --gate-radius: 0;
    --gate-radius-panel: 0;

    /*
      Vyvýšenie — mäkký tieň s odtieňom atramentu. V aplikácii ho nesie JEDINÁ vrstva:
      modálny prekryv. Karty a panely sú ploché, oddeľuje ich plocha a linka.
    */
    --gate-shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
    --gate-shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
    --gate-shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

    /*
      Bočný panel a horná lišta sú tmavé v OBOCH schémach — je to jediná plocha, ktorá sa
      neprekresľuje podľa systému, takže stačí jedna sada hodnôt a jedna kontrola kontrastu.
      Podklad je farba textu stránky, popredie jej plocha: text 14,5 : 1, popis skupiny
      6,4 : 1, značka aktívnej položky (akcent) 4,4 : 1 — všetko nad hranicou svojej roly.
    */
    --gate-nav-bg: #201e1d;
    --gate-nav-fg: #f3f2f2;
    --gate-nav-text: color-mix(in srgb, var(--gate-nav-fg) 80%, transparent);
    --gate-nav-label: color-mix(in srgb, var(--gate-nav-fg) 55%, transparent);
    --gate-nav-hover: color-mix(in srgb, var(--gate-nav-fg) 8%, transparent);
    --gate-nav-active: color-mix(in srgb, var(--gate-nav-fg) 12%, transparent);
    --gate-nav-marker: var(--gate-accent);
    --gate-nav-border: color-mix(in srgb, var(--gate-nav-fg) 30%, transparent);
    /*
      Výška hornej lišty na úzkej obrazovke. Je to token, nie číslo opísané v troch súboroch:
      lištu drží MainLayout (sticky `.sidebar`), prekryvnú navigáciu NavMenu (`.nav-scrollable`
      od spodnej hrany lišty) a odsadenie skoku na prvok app.css (`scroll-padding-top`).
      Rozídená hodnota by nechala pod lištou pás obsahu alebo dieru.
    */
    --gate-nav-bar-h: 3.5rem;

    /*
      Sémantické farby stavov — LEN pre údaje (štítok, hláška, riadok registra), nikdy pre
      chrómu. Znenia sú tmavšie než akcent: štítky majú pod textom ~8 % nádych vlastnej farby
      NAD plochou, ktorá nie je biela, takže svetlejšie hodnoty tam padali pod AA.
      Odkaz je akcentový text — jediná modrá v aplikácii by bola druhý akcent.
    */
    --gate-link: var(--gate-accent-text);
    --gate-danger: #b10e1c;
    /*
      Zelená je o dva stupne tmavšia než ostatné sémantické znenia a je to výpočet, nie vkus:
      štítok stavu stojí na 10 % nádychu VLASTNEJ farby, takže si podklad pod textom sám
      zosvetlí. Pôvodné #0e700e dávalo na tom nádychu 4,32 : 1 — teda pod hranicou 4,5 : 1 pre
      11 px text štítku (nález kontroly 2026-08-19). #0a5c0a drží 5,8 : 1 na ploche karty aj na
      ploche stránky. Tmavá vetva ostáva svetlá (#7ee787) — tam je pomer opačný.
    */
    --gate-success: #0a5c0a;
    /*
      Jantárová z rovnakého dôvodu ako zelená o riadok vyššie: na vlastnom 10 % nádychu mala
      #815200 pomer 4,42 : 1, teda tesne pod hranicou pre 11 px text štítku (odmerané na
      `/plnenia` a `/zmluvna-vetva/kontroly`). #7a4d00 drží 4,8 : 1.
    */
    --gate-warning: #7a4d00;
    --gate-info: #0d5ea6;
    /* Zvýraznený riadok registra (napr. končiaca zmluva) — plocha, nie text. */
    --gate-highlight: #fff4e5;
    --gate-diff-added: #e6ffed;
    --gate-diff-removed: #ffeef0;
    /*
        Scrim pod modálnymi prekryvmi (potvrdzovací dialóg, paleta Ctrl+K). Bez neho ostáva
        stránka za dialógom v plnom kontraste a prekryv sa o ňu perie o pozornosť — tieň na
        hrane karty na oddelenie vrstiev nestačí. V tmavej schéme musí byť hustejší: tmavá
        stránka pod polopriehľadnou čiernou inak takmer nezmení jas.
    */
    --gate-scrim: rgba(32, 30, 29, .5);
}

:root,
/*
  … a KAŽDÝ web komponent knižnice zvlášť. Nestačí `:root`: dizajnový systém FAST si odvodené
  tokeny vpisuje ako INLINE ŠTÝL na uzol svojho stromu — odmerané v Playwrighte to bol
  `article.content`, teda prvok medzi koreňom a komponentmi, a jeho vlastná hodnota prebije
  dedenie z `:root` bez ohľadu na `!important` (dôležitosť rozhoduje len medzi pravidlami, ktoré
  na TEN ISTÝ prvok sedia). Zapísať tokeny priamo na komponenty je jediné miesto, kde už FAST
  nemôže stáť medzi nami a tieňovým stromom — a je to lacné: komponentov sú na obrazovke
  desiatky, kým univerzálny selektor by tých 47 premenných rozdal tisícom prvkov.

  Zoznam je menovitý a stráži ho komponentový test `FluentTokenScopeTests`: nový wrapper
  v `Ui/` so sebou musí priniesť aj svoju značku sem, inak by sa kreslil paletou knižnice.
*/
fluent-button,
fluent-card,
fluent-dialog,
fluent-progress-ring,
fluent-text-area,
fluent-text-field,
fluent-search,
fluent-number-field,
fluent-select,
fluent-combobox,
fluent-listbox,
fluent-option,
fluent-checkbox,
fluent-anchor,
fluent-divider,
fluent-tooltip {
    /* ── Fluent tokeny web komponentov ─────────────────────────────────── */

    /*
      ZÁKLADNÉ HODNOTY FLUENT TOKENOV. Tieňové štýly web komponentov FluentUI čítajú dizajnové
      tokeny (--accent-fill-*, --neutral-*, --design-unit…) z CSS premenných, ktoré normálne
      zapisuje ich JavaScriptový design systém. Merané v runtime tejto aplikácie (SSR + Server
      interactive): tokeny na :root NEPRIŠLI — akcentové tlačidlo sa potom kreslí priehľadné
      s tmavým textom, karta bez podkladu a scoped pravidlo balíka `fluent-card[b-…]` počíta
      padding z prázdnej premennej, teda 0.

      Od redizajnu tu už nie sú predvolené hodnoty FAST, ale PREKLAD nášho systému do jeho
      slovníka: komponenty knižnice tak kreslia našou paletou, naším písmom a bez zaoblenia,
      a to aj v tieňových stromoch, do ktorých vlastným pravidlom nedosiahneme.

      PREČO `!important` (a prečo len tu): dizajnový systém FAST si drží vlastný hárok
      `:root { … }` v `document.adoptedStyleSheets` a pri KAŽDEJ zmene svetlosti vrstvy —
      teda pri každom prepnutí systémovej schémy — doň prepočíta a zapíše celú paletu zo
      SVOJEJ akcentovej farby (Fluent modrá). Prijaté hárky sú v kaskáde za bežnými, takže by
      pri zhodnej špecificite vyhrali: odmerané v Playwrighte, ktorý schému vynucuje —
      primárne tlačidlo tam bolo rgb(3,106,196) namiesto našej červenej, kým v prehliadači bez
      prepnutia schémy ostalo správne. `!important` je jediná vrstva kaskády nad tým, ktorá sa
      dá zapísať v hárku. Platí VÝHRADNE pre tento slovník; naše vlastné `--gate-*` tokeny ho
      nemajú, lebo o nich knižnica nevie. Kto potrebuje Fluent token prebiť na konkrétnom prvku
      (napr. vypnúť prstenec zaostrenia), musí tam `!important` použiť tiež.
    */
    --design-unit: 4 !important;
    --density: 0 !important;
    /*
      Výška ovládacích prvkov knižnice = `--base-height-multiplier` × `--design-unit`, teda
      9 × 4 = 36 px. Musí sedieť s minimom natívnych vstupov nižšie (`.gate-input`) na pixel:
      každý rad, ktorý mieša natívne pole s Fluent tlačidlom, sa inak rozíde (nález testovania
      2026-08-07, vtedy 42 vs. 32 px). 36 px je zároveň miera z predlohy.
    */
    --base-height-multiplier: 9 !important;
    --control-corner-radius: 0 !important;
    --layer-corner-radius: 0 !important;
    --stroke-width: 1 !important;
    --focus-stroke-width: 2 !important;
    --body-font: var(--gate-font) !important;
    --type-ramp-base-font-size: 14px !important;
    --type-ramp-base-line-height: 20px !important;

    --accent-fill-rest: var(--gate-accent-fill) !important;
    --accent-fill-hover: var(--gate-accent-fill-hover) !important;
    --accent-fill-active: var(--gate-accent-fill-active) !important;
    /*
      Tieňový štýl tlačidla skladá pozadie ako viacvrstvový `background` shorthand
      (výplň v padding-box + obruba v border-box). Ak čo len jedna premenná vo vzorci
      chýba, celý shorthand je neplatný a tlačidlo je priehľadné — preto obruby musia
      byť v základe tiež.
    */
    --accent-stroke-control-rest: var(--gate-accent-fill) !important;
    --accent-stroke-control-hover: var(--gate-accent-fill-hover) !important;
    --accent-stroke-control-active: var(--gate-accent-fill-active) !important;
    --accent-foreground-rest: var(--gate-accent-text) !important;
    --accent-foreground-hover: var(--gate-accent-fill-active) !important;
    --foreground-on-accent-rest: #f3f2f2 !important;
    --foreground-on-accent-hover: #f3f2f2 !important;
    --foreground-on-accent-active: #f3f2f2 !important;

    --neutral-foreground-rest: var(--gate-text) !important;
    --neutral-foreground-hint: var(--gate-muted) !important;
    --fill-color: var(--gate-surface) !important;
    --neutral-fill-input-rest: var(--gate-surface) !important;
    --neutral-fill-input-hover: var(--gate-surface) !important;
    --neutral-fill-rest: var(--gate-surface) !important;
    --neutral-fill-hover: #dedcdc !important;
    --neutral-fill-active: #d3d1d1 !important;
    --neutral-fill-stealth-rest: transparent !important;
    --neutral-fill-stealth-hover: color-mix(in srgb, var(--gate-text) 7%, transparent) !important;
    --neutral-stroke-rest: var(--gate-input-border) !important;
    --neutral-stroke-hover: var(--gate-input-border-hover) !important;
    --neutral-stroke-control-rest: var(--gate-input-border) !important;
    --neutral-stroke-control-hover: var(--gate-input-border-hover) !important;
    --neutral-stroke-control-active: var(--gate-input-border) !important;
    --neutral-stroke-input-rest: var(--gate-input-border) !important;
    --neutral-stroke-input-hover: var(--gate-input-border-hover) !important;
    --neutral-stroke-divider-rest: var(--gate-divider) !important;
    --neutral-stroke-strong-rest: var(--gate-text) !important;
    --neutral-fill-strong-rest: var(--gate-neutral-600) !important;
    --neutral-fill-strong-hover: var(--gate-neutral-700) !important;
    --neutral-layer-1: var(--gate-bg) !important;
    --neutral-layer-2: var(--gate-surface) !important;
    --neutral-layer-3: var(--gate-surface) !important;
    --neutral-layer-floating: var(--gate-surface) !important;
    --focus-stroke-outer: var(--gate-accent) !important;
    --focus-stroke-inner: var(--gate-bg) !important;
}

@media (prefers-color-scheme: dark) {
    :root {
        /*
          Tmavá schéma prepisuje ZÁKLAD, nie odvodeniny: linky, tlmený text, obruby aj Fluent
          tokeny sa počítajú z `--gate-text` a `--gate-surface`, takže sa prepnú samy.
          Kontrast overený: text 15 : 1 na ploche stránky, tlmený text 4,9 : 1, obruba vstupu
          3,3 : 1 (non-text AA), text na akcentovej výplni 5,0 : 1.
        */
        --gate-bg: #1b1a19;
        --gate-surface: #262423;
        --gate-text: #f3f2f2;

        --gate-divider: color-mix(in srgb, var(--gate-text) 35%, transparent);
        --gate-muted: color-mix(in srgb, var(--gate-text) 72%, transparent);
        --gate-input-border: color-mix(in srgb, var(--gate-text) 55%, transparent);
        --gate-input-border-hover: color-mix(in srgb, var(--gate-text) 75%, transparent);

        /*
          Akcentový TEXT musí byť v tmavej schéme svetlejší, nie tmavší: #ae1800 má na ploche
          #1b1a19 kontrast 2,1 : 1. Stupeň 400 drží 7,9 : 1. Výplň zostáva rovnaká — text na
          nej je svetlý v oboch schémach, takže sa pomer nemení.
        */
        --gate-accent-text: var(--gate-accent-400);

        /*
          Tiché plochy v tmavej schéme sú NÁDYCH, nie svetlý stupeň radu (dôvod viď svetlá
          vetva).

          NEUTRÁLNY TÓN JE NAJTICHŠÍ V OBOCH SCHÉMACH (R54, položka #199). So 14 % nádychu
          a PLNÝM textom sa z neho v tmavej schéme stal najkontrastnejší predmet v tabuľke:
          „Neaktívny", „Ukončená" a „Návrh" prebíjali sémanticky podfarbené „Aktívny" a
          „Končiaca", teda presne naopak než vo svetlej schéme — tá istá tabuľka mala v dvoch
          schémach opačnú hierarchiu štítkov. Nádych klesol na 10 % a text na 80 %: štítok drží
          8,3 : 1 (teda hlboko nad 4,5 : 1 pre 11 px text), ale je tichší než sémantické tóny
          (zelený 9,1 : 1) aj než akcentový, ktorý si svojich 20 % ponecháva — je to stav
          dokumentu, nie „nič".
        */
        --gate-neutral-soft: color-mix(in srgb, var(--gate-text) 10%, transparent);
        --gate-neutral-soft-text: color-mix(in srgb, var(--gate-text) 80%, transparent);
        --gate-accent-soft: color-mix(in srgb, var(--gate-accent) 20%, transparent);
        --gate-accent-soft-text: var(--gate-accent-400);
        /*
          Najtichšia akcentová plocha je aj tu o stupeň slabšia než plocha štítku: stupeň 100
          zo svetlého radu by na tmavej stránke bol takmer biely obdĺžnik (rady sa v tmavej
          schéme neotáčajú), takže tú istú rolu nesie 12 % nádych akcentu — 1,1 : 1 voči ploche
          stránky, teda presne toľko, koľko má stupeň 100 vo svetlej schéme.
        */
        --gate-accent-faint: color-mix(in srgb, var(--gate-accent) 12%, transparent);

        --gate-nav-bg: #121110;

        --gate-link: var(--gate-accent-text);
        --gate-danger: #ff9b9b;
        --gate-success: #7ee787;
        --gate-warning: #f0c36d;
        --gate-info: #79c0ff;
        --gate-highlight: #4a3a17;
        --gate-diff-added: #123018;
        --gate-diff-removed: #3a1218;
        --gate-scrim: rgba(0, 0, 0, .6);

    }

    /*
      Fluent tokeny, ktoré sa z tokenov vyššie NEODVODIA samy (majú vlastné hodnoty pre tmavú
      plochu). Zvyšok — výplne, obruby, vrstvy, akcent — je v svetlej vetve zapísaný cez
      `var(...)`, takže sa prepočíta sám. Zoznam prvkov je ten istý a z toho istého dôvodu.
    */
    :root,
    /*
      … a KAŽDÝ web komponent knižnice zvlášť. Nestačí `:root`: dizajnový systém FAST si odvodené
      tokeny vpisuje ako INLINE ŠTÝL na uzol svojho stromu — odmerané v Playwrighte to bol
      `article.content`, teda prvok medzi koreňom a komponentmi, a jeho vlastná hodnota prebije
      dedenie z `:root` bez ohľadu na `!important` (dôležitosť rozhoduje len medzi pravidlami, ktoré
      na TEN ISTÝ prvok sedia). Zapísať tokeny priamo na komponenty je jediné miesto, kde už FAST
      nemôže stáť medzi nami a tieňovým stromom — a je to lacné: komponentov sú na obrazovke
      desiatky, kým univerzálny selektor by tých 47 premenných rozdal tisícom prvkov.
    
      Zoznam je menovitý a stráži ho komponentový test `FluentTokenScopeTests`: nový wrapper
      v `Ui/` so sebou musí priniesť aj svoju značku sem, inak by sa kreslil paletou knižnice.
    */
    fluent-button,
    fluent-card,
    fluent-dialog,
    fluent-progress-ring,
    fluent-text-area,
    fluent-text-field,
    fluent-search,
    fluent-number-field,
    fluent-select,
    fluent-combobox,
    fluent-listbox,
    fluent-option,
    fluent-checkbox,
    fluent-anchor,
    fluent-divider,
    fluent-tooltip {
        --neutral-fill-hover: #343130 !important;
        --neutral-fill-active: #403d3c !important;
        --neutral-fill-strong-rest: var(--gate-neutral-500) !important;
        --neutral-fill-strong-hover: var(--gate-neutral-400) !important;
    }

    /*
        Lišta so správou (FluentMessageBar) si tmavý variant zapína triedou `dark`, ktorú pridáva
        podľa `GlobalState.Luminance` — teda podľa stavu v C#, ktorý sa napĺňa až spätným volaním
        z JavaScriptu. Staticky vykreslená stránka o tmavej schéme nevie, takže by lišta ostala
        na svetlom podklade s tmavým textom z knižnice a v tmavej schéme by nesvietila len ona.

        Podklady a obrysy hlášok už kreslíme sami (sekcia „karty, štítky, správy" nižšie) a idú
        z tokenov, takže sa prepnú spolu s celou schémou. Tu ostáva JEDINÁ vec, ktorú token
        nespraví: farba textu. Balík ju v tmavom variante vpisuje natvrdo, a keď sa trieda `dark`
        nepridá, ostane text tmavý na tmavom podklade (axe: `color-contrast`, serious).
        Predradené `body` je kvôli špecificite — bez neho by pravidlo z balíka (načítané neskôr)
        vyhralo zhodu.
    */
    body .gate-message .fluent-messagebar,
    body .gate-message .fluent-messagebar .content,
    body .gate-message .fluent-messagebar .title {
        color: var(--gate-text);
    }
}

/* ── rám: zbalený bočný panel (rail) ─────────────────────────────────────── */

/*
    ŠÍRKA BOČNÉHO PANELA JE STAV PREHLIADAČA, NIE SERVERA. Prepínač v hornej lište je natívny
    `<input type="checkbox" id="gate-rail">` a rozloženie naň reaguje selektorom `:has()` —
    žiadny `@@onclick`, žiadny okruh, žiadne prekreslenie stránky. Musí to tak byť: rám aplikácie
    je vykresľovaný STATICKY, takže obsluha udalosti by v ňom na obrazovkách bez interaktívneho
    ostrova (rozcestník, prihlásenie) nespravila nič.

    Pravidlá stoja TU, a nie v izolovaných štýloch komponentu, z dvoch dôvodov: (1) siahajú cez
    hranicu dvoch komponentov (prepínač je v MainLayout, panel v NavMenu), (2) izolácia dopisuje
    značku rozsahu za posledný jednoduchý selektor a vnútro `:has()` je krehké miesto, kde na ňu
    netreba spoliehať. Špecificita je vďaka `#gate-rail` (1,3,0) vyššia než izolované pravidlá
    rozmerov panela (0,2,0), takže tieto vyhrajú bez `!important`.

    Voľbu si medzi obrazovkami pamätá cookie (`wwwroot/js/gate-rail.js` → `MainLayout`), nie
    tento hárok — kaskáda kreslí len to, čo je práve zaškrtnuté.
*/
.gate-nav__rail {
    display: none;
}

@media (min-width: 641px) {
    .page:has(#gate-rail:checked) .sidebar {
        width: 58px;
    }

    /* Značka s podtitulom aj celý zoznam odkazov sa v 58 px pruhu nahradia ikonami. */
    .page:has(#gate-rail:checked) .sidebar .top-row,
    .page:has(#gate-rail:checked) .sidebar .nav-scrollable {
        display: none;
    }

    .page:has(#gate-rail:checked) .gate-nav__rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 16px 0;
    }
}

/*
    ODZNAK POČTU PRI POLOŽKE „MOJE ÚLOHY".

    Prečo tu, a nie v izolovaných štýloch `NavMenu.razor.css`: odznak je SÚRODENEC odkazu, nie
    jeho obsah (číslo vnútri `<a>` by sa stalo súčasťou prístupného názvu položky, podľa ktorého
    hľadá rám aplikácie E2E), a odkazy sa vykresľujú cez `RenderFragment`, takže by k nim
    izolácia potrebovala `::deep` a pravidlo by sa čítalo horšie, než čo popisuje.

    Obal je `position: relative` a odznak v ňom PLÁVA pri pravej hrane. Nie je to ozdoba
    rozloženia: keby odznak stál v riadku ako druhá bunka, odkaz by prestal siahať cez celú
    šírku panela a klikateľná plocha položky by sa zmenšila o jeho šírku. Takto sa nemení nič —
    a `pointer-events: none` dbá na to, aby klik na číslo dopadol na odkaz pod ním.

    Farby: akcentová výplň `--gate-accent-fill` (#c92610) s bielym textom je jediná výplň
    s malým textom v celom rozhraní a je vybraná tak, aby na nej biele 11 px písmo držalo
    kontrast. Rádius 0 ako všetko ostatné (redizajn 2026-08). `tabular-nums` drží šírku čísla
    stálu, takže odznak pri prechode z 9 na 10 úloh nepodskočí.
*/
.gate-nav__item {
    display: block;
    position: relative;
}

.gate-nav__badge {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    min-width: 1.25rem;
    padding: 1px 5px;
    border-radius: 0;
    background: var(--gate-accent-fill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── pomôcky ─────────────────────────────────────────────────────────────── */

.gate-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gate-stack > * + * {
    margin-top: 1rem;
}

/*
    Zoznam, ktorý NIE JE odrážkový text — rad ponúk (výsledky hľadania v číselníku CPV) alebo rad
    zistení (diskrepancie plnenia). Guľôčky a odsadenie od prehliadača z neho robia citát v strede
    obrazovky; obsahom sú pritom položky na výber alebo krátke vety o stave, nie výpočet v texte.
*/
.gate-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

/*
    TEXT, KTORÝ SI NESIE VLASTNÉ ZALOMENIA — telo e-mailu v náhľade výzvy. Náhľad má ukázať
    presne to, čo adresátovi príde, teda aj prázdne riadky a odseky zo šablóny; obyčajný odsek
    by ich zlial do jednej vety.

    Prehliadač dáva `<pre>` monospace a vodorovný posun — obidve sú tu chybné: je to list pre
    človeka, nie výpis kódu, a vodorovný posun v strede stránky sa nedá prehliadnuť. Písmo preto
    ostáva písmom stránky a dlhé riadky sa zalomia.
*/
.gate-pre {
    margin: 0;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
    JEDINÝ obal pre riadok poskladaný z viacerých prvkov — text + štítok, štítok + štítok,
    dátum + lehota + štítok (UAT N-0042).

    Medzeru NESMIE niesť biele miesto v markupe. Razor ho okolo riadkov s `@if`, `else` a `}`
    zahadzuje — a práve tam býva podmienený štítok — takže štítok za textom alebo za iným
    štítkom skončil nalepený BEZ MEDZERY (odmerané 0,0 px: hlavička dokumentu „Koncept|kolo 1",
    register priamych zadaní „koncept|rozpracované"; vizuálny audit 2026-08-08). Medzeru preto
    nesie `gap` obalu, ktorý na bielom mieste v markupe nezávisí, a rovnaká je vo všetkých
    zostavách — na rozdiel od medzislovnej medzery (~4 px) či ručného `margin`-u.

    `inline-flex` je zámerné: v mriežke `.gate-detail` sa položka aj tak blokifikuje na `flex`,
    v bunke tabuľky ostane obal široký len na svoj obsah a nerozťahuje stĺpec. Zvislé zarovnanie
    je na stred — rovnaká os, akú má štítok mimo obalu (`.gate-badge { vertical-align: middle }`),
    takže sa obe zostavy na obrazovke nerozídu.
*/
.gate-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

/*
    Doplnok popisu („vlastník: …", „len na čítanie") nesie mimo obalu vlastnú medzeru marginom,
    lebo popis poľa žiadny obal nemá. V `.gate-inline` by sa margin a `gap` sčítali (14,4 px
    proti 8 px vedľa), preto tu odsadenie preberá obal.
*/
.gate-inline .gate-field__badge {
    margin-inline-start: 0;
}

/*
    ODSEK, KTORÝ JE RADOM, JE BLOKOVÝ RAD (R2-N5 dorábka, 22. 9. 2026). `.gate-inline` je
    `inline-flex`, aby v bunke tabuľky alebo vo vete ostal široký len na svoj obsah — lenže
    `<p class="gate-inline">` je odsek: rad odkazov pod vetou, cesta späť pod hlavičkou. Ako
    inline-flex sa taký odsek postavil do TOHO ISTÉHO riadku ako text pred ním, a keďže Razor
    biele miesto okolo `@if` zahadzuje, prilepil sa na vetu bez medzery: v náleze „menej než dve
    ponuky" na obrazovke určenia PHZ dal výber textu „…spôsob určenia.Zopakovať prieskum trhu".
    Odsek preto začína vlastným riadkom; `gap`, zalamovanie aj stredová os ostávajú zo základu.
    Odstup medzi susedmi radu nesie VÝHRADNE hárok — výslovná medzera v značkovaní nič nepridá:
    ohybné rozloženie biele miesto medzi položkami nekreslí a do skopírovaného textu ani do
    `innerText` sa nedostane, položky sú blokové a prehliadač medzi ne kladie zalomenie (odmerané
    v prehliadači 22. 9. 2026 nad náhľadom e-mailu s výzvou).
*/
p.gate-inline {
    display: flex;
}

/*
    VETA PRI ODKAZE V RADE NENESIE VLASTNÉ ODSADENIE. `.gate-help` mimo obalu je odsek pod
    tabuľkou alebo pred tlačidlom a odstup zhora (.5rem) patrí k nemu; v rade je to sused —
    ohybná položka, ktorej sa zvislý okraj započíta do zarovnania, takže veta sedela o 4 px
    nižšie než názov súboru vedľa nej a po zalomení stála o 8 px ďalej od riadku nad sebou.
    Odstup v rade drží výhradne `gap` obalu (tá istá úvaha ako pri `.gate-field__badge` vyššie).
*/
.gate-inline > .gate-help {
    margin: 0;
}

.gate-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

/*
    Odsadenie pod panelom nesie panel sám. Keby si ho ponechalo aj pole, jeho spodná hrana by
    bola o riadok vyššie než tlačidlá vedľa — `align-items: flex-end` zarovnáva vonkajšie okraje.
*/
.gate-toolbar .gate-field {
    margin-bottom: 0;
    /*
        A POLE SA ZOVRIE OKOLO SVOJHO OVLÁDAČA (položka #240). Formulárové minimum 12 rem (192 px)
        platilo aj v paneli, kým vstup si v ňom šírku berie vlastnú (~168 px) — v poli tak ostalo
        ~24 px mŕtveho miesta pri pravom okraji a to sa čítalo ako väčšia medzera k susedovi:
        odmerané 24 px medzi filtrami na `/suppliers` a `/plany` proti 8 px na `/contracts`
        a `/ulohy`, a 40 px pred tlačidlom „Hľadať". Rozstup radu má určovať `gap` panela, nie
        zvyšok po formulárovej mierke.
    */
    min-width: 0;
}

/*
    POPIS POĽA V PANELI JE ZNAČKA NAD VSTUPOM, NIE POPIS POĽA FORMULÁRA. Formulárová miera
    (14 px / 600) z neho robí druhý nadpis: rad štyroch filtrov nad tabuľkou potom váži toľko
    čo nadpis obrazovky a oko nemá kam ísť najskôr (nález sweepu 2026-08-18 — `/objednavky`,
    `/suhrnne-spravy`, `/plnenia`). Predloha má pre tento druh poľa vlastnú mieru
    (`.field > label` = 12 px v tlmenej farbe) a presne tú si panel berie. Váha 500, nie 400:
    inak by popis splynul s nápovedou pod radom, ktorá je tiež tlmená.

    Platí pre KAŽDÉ pole v paneli, nielen pre filtre — panel úkonu (`/dodatky`, `/eks`) je tá
    istá zostava „rad polí + tlačidlo" a dva rôzne hlasy popisu v jednej karte sa nedajú
    vysvetliť ničím, čo by používateľ videl.
*/
.gate-toolbar .gate-field__label,
.gate-action-panel__controls .gate-field__label,
.gate-action-panel__expanded .gate-field__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gate-muted);
}

/*
    VÝNIMKA: PANEL, KTORÝ STOJÍ VNÚTRI FORMULÁRA, HOVORÍ HLASOM FORMULÁRA (položka #279). Tlmený
    12 px popis je správny nad tabuľkou, kde štyri formulárové popisy vážia toľko čo nadpis
    obrazovky (dôvod pravidla vyššie). Na `/plany/{id}/polozky/nova` je tá istá zostava nástrojom
    NA vyplnenie poľa („Hľadať v číselníku CPV") a stojí medzi poľami formulára — jediný tlmený
    popis medzi nimi sa nečítal ako názov poľa, ale ako nápoveda k poľu nad ním. Hlas je vlastnosť
    KONTEXTU panela, nie poľa, preto modifikátor na paneli.
*/
.gate-toolbar--in-form .gate-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gate-text);
}

/*
    To isté pre áno/nie prepínač: formulárový margin-bottom by ho v paneli filtrov zdvihol
    16 px nad rad (nález testovania: register priamych zadaní — „tlačidlá nelícujú"). Jeho
    21 px riadok sa navyše centruje na výšku vstupov (32 px), aby text popisu stál na jednej
    osi s textom tlačidiel.
*/
.gate-toolbar .gate-checkbox,
.gate-toolbar .gate-checkgroup {
    margin-bottom: 0;
}

/*
    Prepínač si v paneli PONECHÁVA mriežku zo základného pravidla (štvorček | popis) a dostáva
    len výšku radu. Predtým tu bol `inline-flex` so zalamovaním, takže dlhý popis („Výsledkom
    bude rámcová dohoda (najviac 12 mesiacov)") sa na 375 px zalomil POD štvorček a začínal
    o 17 px vľavo od prvého riadku — presne tá odchýlka, ktorú základné pravidlo odstránilo
    (vizuálny audit 2026-08-08, znovu nájdené na `/eks` pri sweepe 2026-08-18).
*/
.gate-toolbar .gate-checkbox {
    min-height: 36px;
}

/*
    Výber v paneli filtrov si berie šírku podľa AKTUÁLNE zvolenej položky (v paneli je `width: auto`
    — viď výnimku nižšie), takže „Všetky stavy" zmenší pole na pár znakov a rad filtrov sa pri
    každom prepnutí prekreslí do inej šírky. Spodná hranica ho drží na mieste; strop naďalej rieši
    `max-width: 100%` na `.gate-select`.

    A ŠÍRKA JE JEDNA PRE VŠETKY PANELY (položka #240, znovu #282). Spodná hranica sama nestačila:
    šírku určuje práve zvolená položka, takže ten istý filter „Stav" meral 160 px na `/suppliers`
    a `/contracts`, ale 282 px na `/plany` — dva registre vedľa seba potom vyzerali ako dve rôzne
    aplikácie.

    TU STÁLO `width: 14rem` A NEROBILO NIČ. `GateSelect` sa kreslí cez `GateFieldShell`, teda
    vnútri obalu `.gate-field__control`, a výnimka panela
    `.gate-toolbar .gate-field__control > .gate-select { width: auto }` je o triedu ťažšia (tri
    proti dvom) a stojí v hárku neskôr — prepísala teda každé jedno pole. Hárok tvrdil jednu
    šírku a obrazovka merala štyri: 160 / 160 / 282 („Predložený generálnemu riaditeľovi")
    / 416 px (názvy definícií na strope 26 rem). Mŕtva deklarácia je preč a šírku určuje jediné
    pravidlo — to, ktoré tú výnimku prebíja (nižšie v tomto hárku, hľadaj „ŠÍRKU VÝBERU V PANELI
    NEURČUJE JEHO NAJDLHŠIA VOĽBA").
*/
.gate-toolbar .gate-select {
    min-width: 10rem;
    max-width: 100%;
}

/*
    Veta pod radom polí („prečo je úkon neaktívny") má odstup aj ZDOLA, keď za ňou nasleduje
    ďalší rad: bez neho stojí 8 px pod svojím radom a 0 px nad popisom nasledujúceho, teda sa
    číta ako jeho nadpis (kontrola 2026-08-19, `/dodatky`).
*/
p.gate-help + .gate-toolbar {
    margin-top: 1rem;
}

/*
    Riadok tlačidiel pod obsahom (uložiť/zrušiť, rozhodnutie konania). Zalamovanie je povinné —
    bez neho by sa rad tlačidiel na mobile nezmestil a roztiahol by stránku do vodorovného
    posunu (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-actions,
.gate-wizard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: 1rem;
}

/*
    Rad akcií o dvoch stranách: vľavo navigácia, vpravo úkony (sprievodca formulárom). Skupiny sú
    samostatné flex boxy, takže sa na úzkom výreze zalomia ako celok — tlačidlá jednej skupiny sa
    nikdy nerozdelia medzi dva riadky pred tým, než sa zalomí celá skupina. Zalomená skupina
    začína zľava: `space-between` s jediným prvkom na riadku ho posadí na začiatok.
*/
.gate-actions--split {
    justify-content: space-between;
}

/*
    RAD ÚKONOV PRI PRAVOM OKRAJI. Predloha kladie úkony dokumentu na lepiacu lištu vpravo
    (`.gate-actionbar` → `.gate-actions__group--end`); formulár, ktorý lištu nemá (editačné
    obrazovky registrov, úkon v karte), potrebuje to isté zarovnanie bez lišty. Vľavo pod
    popismi polí sa tlačidlá čítali ako ďalší riadok formulára, nie ako jeho záver.

    `flex-end` (nie `space-between`): rad má JEDNU stranu, takže sa aj jediné tlačidlo drží
    pri pravom okraji. Zalamovanie a medzeru dedí zo základu `.gate-actions`.
*/
.gate-actions--end {
    justify-content: flex-end;
}

/*
    A POZNÁMKA K ÚKONU IDE S ÚKONOM (položka #274). Vysvetlenie, prečo je úkon obmedzený, je
    ďalší blokový súrodenec radu, takže začínalo pri ĽAVOM okraji karty, kým tlačidlo stálo pri
    pravom — na `/pnvo/{id}` je to pri 1280 px poznámka od x=310 pod tlačidlom končiacim na
    x=1240, a to na siedmich miestach. Kým boli úkony vľavo, dvojica držala pokope sama; zoskupenie
    na jednu hranu ju rozlomilo.

    Posúva sa KRABICA, nie text (`margin-inline-start: auto`, nie `text-align: end`): je to veta,
    a zarovnaná doprava by mala roztrhaný ľavý okraj. Pod 640 px strop 52 ch šírku stĺpca aj tak
    presiahne, takže `auto` nemá čo posunúť a poznámka ostáva cez celý riadok ako doteraz.
*/
.gate-actions--end + .gate-help,
.gate-actions--end + .gate-help + .gate-help {
    max-width: 52ch;
    margin-inline-start: auto;
}

.gate-actions__group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/*
    Skupina, ktorá má ostať pri pravom okraji aj keď je v rade sama. `space-between` s jediným
    prvkom ho posadí doľava — pri jednodielnom formulári (bez Späť/Ďalej) by sa úkony nad
    dokumentom presťahovali na opačnú stranu než pri viacdielnom.
*/
.gate-actions__group--end {
    margin-inline-start: auto;
}

/*
    HLAVIČKA OBRAZOVKY. Pásma pod sebou: predtext (`.gate-kicker`, kreslí ho rám — viď
    Components/Layout/PageKicker.razor), nadpis so štítkami a doplňujúci riadok; akcie stoja
    vpravo pri nadpise. Celok uzatvára 2 px linka — jediný oddeľovač, ktorý obrazovka dostáva
    zadarmo, takže hlavička nikdy nesplýva s obsahom pod sebou.

    Nadpis rastie (`flex: 1 1 auto`), takže akcie sadnú k pravému okraju aj bez `space-between`
    — a keď je akcií viac, ostanú pri sebe namiesto toho, aby sa rozliezli po riadku.
    Rad štítkov ide `order`-om na vlastný riadok pod nadpis (predloha) a jeho `flex-basis: 100%`
    zaručí zalomenie aj vtedy, keď by sa vedľa nadpisu ešte zmestil.
*/
.gate-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem 1.5rem;
    align-items: flex-end;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gate-divider);
    /*
        MEDZERA POD LINKOU. Bez nej začínala prvá karta presne na pixel pod 2 px linkou, takže
        sa linka čítala ako HORNÝ OBRYS karty — a to protirečí pravidlu, že karty sú ploché a
        bez obrysu (kontrola 2026-08-19, položka #44; namerané zhodne na ~20 trasách: linka
        y=195–196, plocha karty od y=197). Predloha necháva pod linkou ~30 px podkladu.
        Hlavička DOKUMENTU si nulu ponecháva — pod ňou nasleduje pás panelov alebo záložky,
        teda ďalšia časť tej istej hlavičky, nie obsah stránky.
    */
    margin-bottom: var(--gate-space-6);
}

.gate-page-header--document,
.gate-page-header.gate-form__part-header {
    margin-bottom: 0;
}

/*
    NULA PLATÍ PRE PÁS PANELOV A ZÁLOŽKY, NIE PRE HLÁŠKU (dávka G). Pod hlavičkou dokumentu
    nasleduje spravidla ďalšia časť tej istej hlavičky — preto tam medzera nie je. Keď však
    hneď za ňou stojí hláška („Konanie čaká na rozhodnutie") alebo súhrn chýb, ich 1 px obrys
    sa nalepí na 2 px linku hlavičky (odmerané na `/formular/1ae0ef60…`: spodok hlavičky 314,
    vrch hlášky 314) a z dvojice sa stane jeden rám okolo ničoho. Hláška si preto medzeru
    vypýta sama — aj cez obal, do ktorého ju obrazovka zabalí kvôli `data-testid`.
*/
.gate-page-header--document + .gate-message,
.gate-page-header--document + .gate-summary,
.gate-page-header--document + div:has(> .gate-message, > .gate-summary) {
    margin-top: var(--gate-space-4);
}

.gate-page-header > h1,
.gate-page-header > h2,
.gate-page-header > h3 {
    flex: 1 1 auto;
    margin: 0;
}

.gate-page-header > .gate-inline {
    order: 2;
    flex-basis: 100%;
}

/*
    NA TELEFÓNE STOJÍ HLAVNÝ ÚKON VŽDY POD NADPISOM (položka #243). Hlavička je zalamovací flex
    a nadpis `flex: 1 1 auto`, takže o tom, či tlačidlo pristane VEDĽA nadpisu alebo POD ním,
    rozhodovala jediná vec — dĺžka nadpisu. Odmerané pri 375 px: `/contracts` („Register zmlúv")
    drží „Nová zmluva" na riadku nadpisu vpravo, `/suppliers` a `/plany` (dlhšie názvy) ho tlačia
    na vlastný riadok na x=16. Šestnásť registrov má pritom totožné značkovanie, takže sa rozdiel
    nedá odstrániť na stránke.

    Celý riadok pre nadpis vyberá tú podobu, ktorú väčšina aj tak ukazuje — a je to tá, ktorá
    prežije zalomený nadpis. Pri 1280 px sa nemení nič: pravidlo platí len pod 641 px, kde na
    nadpis a úkon vedľa seba aj tak nie je miesto.
*/
@media (max-width: 640.98px) {
    .gate-page-header > h1 {
        flex-basis: 100%;
    }
}

/*
    HLAVIČKA DOKUMENTU (formulár, konanie). Názov dokumentu je veta, nie nadpis registra: v predlohe
    stojí v úzkom stĺpci 22 znakov, takže sa číta ako blok textu a nie ako pás cez celú obrazovku.
    `pretty` (nie `balance`) je zámer predlohy — pri troch a viac riadkoch rieši `pretty` osamelé
    slovo na konci, kým `balance` by riadky vyrovnal do rovnakej dĺžky a stratil prirodzený spád.
    Register si nadpis naďalej berie celý — tam je to jednoriadkový názov plochy.
*/
.gate-page-header--document > h1 {
    flex: 0 1 auto;
    max-width: 22ch;
    text-wrap: pretty;
}

/*
    Viac akcií v hlavičke stránky. Bez vlastného obalu by sa zalamovali po jednej — hlavička má
    mať dve strany, nie tri. Jedna akcia obal nepotrebuje.
*/
.gate-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
}

/*
    PREDTEXT OBRAZOVKY — názov skupiny, do ktorej stránka patrí („Registre", „Prípravná fáza",
    „Formulár"). Kreslí ho rám z navigácie, nie stránka, takže žiadna obrazovka o ňom nevie a
    žiadna sa nemôže rozísť s menu. Verzálky sú tu vedomá výnimka z konvencie aplikácie: je to
    jediný prvok, ktorý sa nečíta ako slovo, ale ako značka — a čítačke obrazovky ho komponent
    schová (`aria-hidden`), lebo to isté slovo nesie zvýraznená položka navigácie.
*/
.gate-kicker {
    margin-bottom: .5rem;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gate-accent-text);
}

/*
    Doplňujúci riadok hlavičky (číslo dokumentu, verzia definície, tlačová šablóna). Ide na
    vlastné pásmo pod štítky — je to metadáta dokumentu, nie jeho názov.
*/
.gate-page-header__meta {
    order: 3;
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
    color: var(--gate-muted);
}

/*
    ODDEĽOVAČ „·" MEDZI ÚDAJMI META RIADKU — a je to jedno miesto pre všetky obrazovky, nie znak
    dopísaný v každej stránke.

    Predloha (`PGR-10/2025 · definícia … · tlačová šablóna …`, spec §6.1) ho má; oprava #179/#266
    ho ale nezoslabila, iba ODSTRÁNILA — meta riadok odvtedy oddeľoval údaje jedine 10 px medzerou
    a tri rôzne tvrdenia o dokumente splývali do jedného pásma. Pôvodný nález bol pritom užší: „·"
    zapísaná ako SAMOSTATNÁ položka flexu sa pri 375 px zalomí ako ktorákoľvek iná, takže raz visela
    na konci riadku a raz viedla nový.

    Tu je oddeľovač súčasťou položky, PRED ktorou stojí (`::before`), takže sa zalomiť samostatne
    nedá ani vo flexe (položka je atomická), ani v blokovom náhradnom rozvrhnutí (medzi „·" a prvým
    slovom položky nie je medzera, teda ani miesto na zlom). Pravý odstup nesie `margin`, ľavý `gap`
    obalu — preto sa hodnota margin-u rovná stĺpcovej medzere daného radu, inak by bodka visela
    bližšie k jednej strane. Čítačke obrazovky sa oddeľovač neohlasuje (prázdny alternatívny text);
    prehliadač bez tejto podpory si nechá prvú deklaráciu.

    POZNÁMKA PRE STRÁNKY: odkaz patrí v meta riadku na PRVÉ miesto — oddeľovač vloženej položky by
    inak zdedil jeho podčiarknutie (CSS dekoráciu textu na potomkovi odkazu vypnúť nevie).
*/

/*
    PRÁZDNA POLOŽKA SA NEPOČÍTA. Podpisová doložka vypisuje dátum aj pri kroku, ktorý ešte nikto
    nepodpísal — vtedy je to prázdny `span`, ktorý by si aj tak vypýtal medzeru radu a (keďže
    `:empty` sa netýka generovaného obsahu) aj vlastný oddeľovač. Doložka by potom končila bodkou
    bez toho, čo mala oddeliť — presne ten nález, ktorý oddeľovače kedysi zrušil. `display: none`
    prázdnu položku odstráni z radu, takže sa oddeľovač nevykreslí ani pri nej, ani za ňou.
*/
.gate-page-header__meta > :empty,
.gate-signatures__item > :empty {
    display: none;
}

.gate-page-header__meta > * + *::before,
.gate-signatures__item > * + *::before {
    content: "·";
    content: "·" / "";
    color: var(--gate-muted);
}

.gate-page-header__meta > * + *::before {
    /* `.gate-inline` má stĺpcovú medzeru .5rem — margin ju zrkadlí, aby bodka stála v strede. */
    margin-inline-end: .5rem;
}

.gate-signatures__item > * + *::before {
    /* Podpisová doložka má vlastný rad s medzerou 10 px (viď `.gate-signatures__item`). */
    margin-inline-end: 10px;
}

/*
    ÚVODNÁ VETA OBRAZOVKY medzi hlavičkou a prvým panelom (číselníky, skartačný plán, auditný
    denník). Bez stropu sa tiahne cez celú šírku obsahu — na 1 280 px je to ~120 znakov na
    riadok, teda nad pásmom čitateľnosti. Strop platí len na vetu HNEĎ pod hlavičkou; tá istá
    trieda vo vnútri karty ostáva nedotknutá (tam jej šírku určuje karta).
*/
.gate-page-header + .gate-help,
.gate-form__section-head + .gate-help,
.gate-form__section-head + p {
    /*
        Ten istý strop platí pre úvodný odsek SEKCIE formulára (kolo 7, nález 288): bez neho sa
        veta pod číslovaným nadpisom tiahla cez ~130 znakov, kým nápoveda poľa o pár riadkov
        nižšie sa lámala na ~45 — dve šírky čítania v jednom formulári.
    */
    max-width: 92ch;
}

/*
    ODSADENIE PLOCHY OBSAHU ako token. Hodnotu drží `.content` (MainLayout.razor.css + app.css),
    ale potrebuje ju aj prvok hlboko vnútri stránky — lepiaca lišta úkonov si ním ruší odsadenie,
    aby jej linka siahala od okraja po okraj. Bez tokenu by sa hodnota opisovala druhýkrát
    a pri zmene odsadenia by sa lišta ticho rozišla s obsahom.
*/
.content {
    --gate-content-pad: 1rem;
    /*
        NEPRIEHĽADNÝ PODKLAD, NA KTOROM PRVOK PRÁVE STOJÍ. Potrebuje ho každý, kto musí niečo
        PREKRYŤ: pripnutý stĺpec úkonov v tabuľke (inak by pod ním presvital posúvaný obsah)
        a maska náznaku posunu na okrajoch obalu tabuľky. `--gate-bg` sa na to použiť nedá —
        vnútri karty je podkladom `--gate-surface`, takže by prekrytie svietilo o stupeň inak.
        Token sa preto prepisuje na každej ploche, ktorá vlastný odtieň má (nižšie).
    */
    --gate-ground: var(--gate-bg);
}

/*
    PLOCHA OBSAHU S LEPIACOU LIŠTOU JE STĹPEC (R31 / položka #86). Lišta úkonov má `margin-top: auto`,
    lenže to v BLOKOVOM toku neznamená nič — na krátkom formulári preto visela hneď pod poslednou
    sekciou a pod ňou ostal holý podklad (odmerané: `/plany/novy` 271 px, `/plany/{id}/upravit`
    286 px pri 1280×800). Stĺpcový flex dá lište zvyšok výšky a posadí ju na spodok výrezu; na
    dlhom formulári ostáva lepivosť nezmenená.

    `:has()` je zámerné zúženie: stĺpcový flex ruší SKLADANIE zvislých margínov susedov, takže by
    na 60 obrazovkách bez lišty ticho zväčšil odstupy. Takto sa mení výlučne tých ~10 formulárov,
    ktoré lištu naozaj majú. Vnútri sprievodcu je lišta vnorená v `div.gate-wizard`
    (`display: contents`), preto potomkový selektor, nie `> `.
*/
.content:has(.gate-actionbar) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 641px) {
    .content {
        --gate-content-pad: 24px;
    }
}

@media (min-width: 1800px) {
    .content {
        --gate-content-pad: 3.5rem;
    }
}

/*
    PÁS INFORMAČNÝCH PANELOV nad formulárom (predloha): nadväzujúca obrazovka, overenie v registri
    zákazov, prevzatie overení. Nie sú to karty — kartu by na ploche stránky odlíšil odtieň a nad
    formulárom by z nich boli tri sivé ostrovy. Panely oddeľujú LEN linky mriežky, presne ako
    hlavičku od obsahu; celok uzatvára tá istá 2 px linka.

    ZVISLÁ LINKA MEDZI PANELMI VISÍ NA VODOROVNEJ (Juraj, 29. 9. 2026: „nerobí T, ale ako keby
    dve oddelené čiary"). V predlohe stojí pás hneď pod hlavičkou a linka hlavičky je zároveň jeho
    hornou hranou, takže sa so zvislou linkou stretá do „┬". Rad „Stiahnuť PDF / DOCX" ([GEN-01])
    ale stojí POD linkou hlavičky (jedna anatómia radov odkazov, N-4), takže zvislá linka začínala
    o 60 px nižšie v prázdnom podklade (odmerané pri 1366 px: linka hlavičky 312–314, zvislá linka
    od 376). To isté spravila hláška „Konanie čaká na rozhodnutie" alebo súhrn chýb či upozornení
    nad pásom.
    Pás si preto hornú linku kreslí SÁM; linka hlavičky ju nahrádza len vtedy, keď pás stojí
    priamo pod ňou — inak by sa zdvojila.
*/
.gate-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px solid var(--gate-divider);
    border-bottom: 2px solid var(--gate-divider);
}

.gate-page-header--document + .gate-panels {
    border-top: 0;
}

/*
    Rad odkazov na stiahnutie je tak pásmo medzi dvoma linkami a jeho odkazy (44 px vrátane
    odsadenia) v ňom stoja na strede — vlastný spodný okraj 16 px by ich odtlačil k linke hlavičky
    (22 px nad textom, 38 px pod ním). Veta o nedodanej šablóne DOCX okraj zdola nemá vôbec,
    takže by na linke pásu ležala; dostáva odstup, ktorý nesie aj hláška (12 px).
*/
.gate-downloads:has(+ .gate-panels) {
    margin-bottom: 0;
}

.gate-help:has(+ .gate-panels) {
    margin-bottom: var(--gate-space-3);
}

.gate-panel {
    min-width: 0;
    padding: var(--gate-space-4) var(--gate-space-6);
}

/*
    Zvislá linka stojí len MEDZI panelmi — panel, ktorý je v rade sám (alebo posledný v nepárnom
    počte), by ju mal na pravej strane bez suseda. Krajné panely si zároveň rušia vonkajšie
    odsadenie, aby text začínal na tej istej zvislej osi ako nadpis nad ním.
*/
.gate-panel:nth-child(odd) {
    padding-inline-start: 0;
}

.gate-panel:nth-child(odd):not(:last-child) {
    border-inline-end: 2px solid var(--gate-divider);
}

.gate-panel:nth-child(even),
.gate-panel:nth-child(odd):last-child {
    padding-inline-end: 0;
}

/* Tretí a ďalší panel začína nový riadok — hranicu medzi riadkami nesie linka nad ním. */
.gate-panel:nth-child(n+3) {
    border-top: 2px solid var(--gate-divider);
}

/*
    Pás s JEDINÝM panelom. Mriežka má dva stĺpce, takže osamotený panel dostal polovicu šírky
    a vedľa neho ostala prázdna polovica obrazovky uzavretá 2 px linkou — predloha má na tom
    mieste vždy dva panely. Sám si vezme celý pás.

    A TEXT SI VEZME MIERU CELÉHO RIADKU (položka #273). Pravidlo `grid-column: 1 / -1` funguje
    (odmerané naživo na `/formular/1ae0ef60…` aj `/formular/00938f04…`: panel 962 px v páse
    962 px), ale text v ňom držal 52 ch = 387 px, teda 40 % riadku — a stopäťdesiatznaková
    nápoveda sa v ňom lámala na tri riadky, takže pás naďalej vyzeral ako dvojpanelový rad, ktorému
    chýba druhý panel. 52 ch je strop pre POLOVIČNÝ stĺpec; keď panel drží celý riadok, platí preň
    tá istá miera ako pre inú celoriadkovú prózu v tomto hárku (76 ch).
*/
.gate-panels > .gate-panel:only-child {
    grid-column: 1 / -1;
}

.gate-panels > .gate-panel:only-child .gate-panel__text {
    max-width: 76ch;
}

.gate-panel__title {
    display: block;
    margin: 0 0 6px;
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

/*
    Názov panela je zároveň odkaz na nadväzujúcu obrazovku — ale ostáva TMAVÝ (R38 / položka #127).
    Dva súrodenecké panely v jednom rade mali rôznu farbu nadpisu (ľavý akcentový, pravý tmavý),
    takže vyzerali ako dva rôzne komponenty; predloha má oba `rgb(32,30,29)`. Že je nadpis odkaz,
    hovorí podčiarknutie pod kurzorom a šípka za textom — nie farba, ktorá je v tejto sústave
    vyhradená hlavnému úkonu.
*/
a.gate-panel__title {
    color: var(--gate-text);
    text-decoration: none;
}

a.gate-panel__title:hover {
    text-decoration: underline;
}

.gate-panel__text {
    margin: 0 0 var(--gate-space-3);
    max-width: 52ch;
    font-size: 13px;
    color: var(--gate-muted);
}

/*
    KARTA V PANELI NESADÁ NA RAD ÚKONOV NAD ŇOU (28. 9. 2026, E2E sonda „okraje sa nespájajú").
    Panel prístupu končí časovou osou „Kto na tom pracoval" (karta) a pred ňou stojí rad úkonov
    žiadosti („Schváliť" / „Zamietnuť", „Požiadať o prístup"). Rad má odstup len zhora, karta len
    zdola, takže sa tlačidlá dotýkali plochy karty (medzera 0 px). Vety panela majú odstup zdola
    samy (12 px), preto sa pri nich okraj karty zrazí a nič nepribudne.
*/
.gate-panel > * + .gate-card {
    margin-top: var(--gate-space-4);
}

/* Výsledok úkonu stojí vedľa tlačidla, na jeho osi — preto rovnaká výška ako ovládacie prvky. */
.gate-panel__result {
    min-height: 36px;
    font-size: 12px;
}

.gate-panel__result-label {
    color: var(--gate-muted);
}

.gate-panel__text:last-child {
    margin-bottom: 0;
}

/* Rad „tlačidlo + výsledok" v paneli — tá istá os ako v paneli filtrov, len bez odsadenia pod ním. */
.gate-panel .gate-toolbar {
    margin-bottom: 10px;
}

.gate-panel .gate-toolbar:last-child {
    margin-bottom: 0;
}

/* Pod 900 px sa panely poskladajú pod seba — dva stĺpce sú tam užšie než ich vlastný text. */
@media (max-width: 899.98px) {
    .gate-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    .gate-panel {
        padding-inline: 0;
    }

    .gate-panel:nth-child(odd):not(:last-child) {
        border-inline-end: 0;
    }

    .gate-panel + .gate-panel {
        border-top: 2px solid var(--gate-divider);
    }
}

/* ── obrazovka dokumentu s bočným stĺpcom (Ui/GateDocumentLayout.razor) ──── */

/*
    ROZLOŽENIE PODĽA PREDLOHY „POŽIADAVKA NA VO" (majiteľ produktu, 6. 10. 2026). Pod hlavičkou
    stoja dva stĺpce: sekcie obrazovky a úzky bočný stĺpec s tým, čo o zázname platí počas celého
    čítania — kto ho vedie, kto si oň môže požiadať a kto na ňom pracoval. Bok je v strome PRVÝ
    (dôvod v komponente), takže ho úzka obrazovka bez ďalšieho pravidla postaví nad obsah.

    Na užšej obrazovke idú karta prístupu a časová os vedľa seba, keď sa zmestia dve miery po
    18 rem — pod sebou by odsunuli prvú sekciu o celú výšku okna nižšie. Prázdny bok (panel
    prístupu ešte číta alebo záznam vlastníka nemá) sa skryje, aby nad obsahom nevisela medzera.
*/
.gate-doc {
    min-width: 0;
}

.gate-doc__aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--gate-space-6) var(--gate-space-8);
    align-items: start;
    margin-bottom: var(--gate-space-8);
    overflow-wrap: anywhere;
}

.gate-doc__aside:not(:has(> *)) {
    display: none;
}

.gate-doc__main {
    min-width: 0;
}

/*
    ŠIROKÁ OBRAZOVKA: dva stĺpce a lepiaci bok. Hranica je šírka OKNA, pri ktorej aj s rozbaleným
    bočným panelom navigácie (270 px), odsadením plochy a posuvníkom ostane hlavnému stĺpcu ~745 px
    — riadky polí aj tabuľka oslovených dodávateľov sa doň zmestia bez vodorovného posunu. Prečo
    nie kontajnerový dopyt, hovorí komponent (obmedzenie rozloženia by uväznilo modálny dialóg).

    Prázdny bok si tu miesto DRŽÍ: panel prístupu sa dočíta až po stránke, a keby sa stĺpec objavil
    dodatočne, celý obsah by sa pod rukou zúžil a preskočil.

    Bok LEPÍ pod hornou lištou rámu (`--gate-nav-bar-h`) a nikdy nie je vyšší než výrez — dlhá
    stopa záznamu by inak svoj koniec ukázala až na konci stránky. Pri dlhom obsahu sa posúva sám
    v sebe.
*/
@media (min-width: 1400px) {
    .gate-doc {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 18rem;
        column-gap: var(--gate-space-8);
        align-items: start;
    }

    .gate-doc__main {
        grid-column: 1;
        grid-row: 1;
    }

    .gate-doc__aside,
    .gate-doc__aside:not(:has(> *)) {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: var(--gate-space-6);
        position: sticky;
        top: calc(var(--gate-nav-bar-h) + var(--gate-space-6));
        max-height: calc(100dvh - var(--gate-nav-bar-h) - 2 * var(--gate-space-6));
        overflow-y: auto;
        margin-bottom: 0;
    }
}

/*
    KARTA PRÍSTUPU V BOKU (`DokumentPristupPanel Bocny`). Jediná plocha boku: odtieň karty a 3 px
    akcentová linka hore (predloha). Pravidlá pásu panelov (`:nth-child` — krajné odsadenie,
    zvislá linka medzi panelmi) sú písané pre `.gate-panels` a na panel v boku nesmú dosiahnuť,
    preto selektor menuje obal aj obe triedy (špecificita 0-3-0 ako pravidlo zvislej linky).
*/
.gate-doc__aside > .gate-panel.gate-panel--aside {
    padding: var(--gate-space-4);
    border: 0;
    border-top: 3px solid var(--gate-accent);
    background: var(--gate-surface);
    --gate-ground: var(--gate-surface);
}

/*
    Názov karty je odkaz na samostatnú obrazovku prístupu (ostáva ním), v boku sa však kreslí ako
    návestie bloku — verzálky 13 px, rovnako ako nadpis časovej osi pod ním. Dva bloky boku tak
    majú jeden hlas.
*/
.gate-panel--aside .gate-panel__title,
.content .gate-trail__title,
.content .gate-doc-block__title {
    margin: 0 0 var(--gate-space-2);
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Vety karty sú jej obsahom, nie poznámkou pod niečím — plná farba textu, šírku drží stĺpec. */
.gate-panel--aside .gate-panel__text {
    max-width: none;
    color: var(--gate-text);
}

/*
    KARTA DOKUMENTU V BOKU (pripomienkovanie návrhu zmluvy, predloha 6. 10. 2026). Obrazovka nemá
    panel prístupu — kartu boku nesie dokument, ku ktorému návrh patrí: druh dokumentu ako
    predtext, číslo (odkaz, kto dokument smie čítať) a predmet. Predtext má hlas predtextu
    obrazovky (`.gate-kicker`), len v tlmenej farbe — akcent v karte nesie linka hore a odkaz.
*/
.gate-doc-card__kicker {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gate-muted);
}

.gate-doc-card__cislo {
    display: inline-block;
    margin-bottom: var(--gate-space-3);
    font-size: 16px;
}

/*
    ÚDAJE BOKU — menovka nad hodnotou, nie mriežka dvoch stĺpcov: stĺpec boku má 18 rem a dvojica
    stĺpcov by z „Žiadosť o návrh zmluvy“ spravila tri riadky po jednom slove.
*/
.gate-doc-facts {
    margin: 0;
}

.gate-doc-facts dt {
    font-size: 12px;
    color: var(--gate-muted);
}

.gate-doc-facts dd {
    margin: 0 0 var(--gate-space-2);
    font-size: 14px;
}

.gate-doc-facts dd:last-child {
    margin-bottom: 0;
}

/*
    BLOK BOKU BEZ PODKLADU (stav pripomienkovania pod kartou dokumentu): návestie vo verzálkach ako
    nadpis časovej osi, pod ním štítok stavu a vety o stave. Odsadenie o 4 px drží jeho text na
    jednej hrane s obsahom karty nad ním, ktorá má vnútorný okraj.
*/
.gate-doc-block {
    min-width: 0;
    padding: 0 var(--gate-space-1);
}

.gate-doc-block__veta {
    margin: var(--gate-space-3) 0 0;
    font-size: 13px;
    text-wrap: pretty;
}

.gate-doc-block .gate-doc-facts {
    margin-top: var(--gate-space-4);
}

/*
    AKCENTOVÁ POZNÁMKA (predloha „Pripomienkovanie zmluvy“, 6. 10. 2026 — brána predloženia
    požiadavky). Pravidlo, ktoré drží ďalší krok, nie chyba ani varovanie: najtichší akcentový
    podklad, 3 px akcentová hrana vľavo a text v tmavom akcentovom stupni (light 800 na 100 =
    11 : 1, dark 400 na 12 % akcentu). Žltá ani zelená sa do akcentovej obrazovky nepridáva.
*/
.gate-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--gate-space-3) var(--gate-space-4);
    border-left: 3px solid var(--gate-accent);
    background: var(--gate-accent-faint);
    color: var(--gate-accent-soft-text);
}

.gate-callout > svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--gate-accent-text);
}

.gate-callout > p {
    margin: 0;
    max-width: 80ch;
    font-size: 13px;
    text-wrap: pretty;
}

/*
    ČASOVÁ OS V BOKU (`StopaSubjektuCasovaOs Bocna`): jedna zvislá linka cez celý zoznam a na nej
    štvorcové značky udalostí (predloha). Najnovšia udalosť má značku v akcente, ostatné neutrálnu;
    schválenie a zamietnutie si farbu tónu ponechávajú (tón posiela server a farba nie je jediným
    nosičom — sloveso udalosti stojí v texte). Zoznam je odsadený o polovicu značky, aby ju
    posúvateľný bok neorezal.
*/
.gate-trail {
    min-width: 0;
}

.gate-trail .gate-timeline {
    margin-inline-start: 5px;
    padding-inline-end: var(--gate-space-1);
    border-inline-start: 2px solid var(--gate-divider);
}

.gate-trail .gate-timeline__item {
    position: relative;
    padding: 0 0 var(--gate-space-4) var(--gate-space-4);
    border-inline-start: 0;
    font-size: 13px;
}

.gate-trail .gate-timeline__item:last-child {
    padding-bottom: 0;
}

.gate-trail .gate-timeline__item::before {
    content: "";
    position: absolute;
    top: 4px;
    inset-inline-start: -6px;
    width: 10px;
    height: 10px;
    background: var(--gate-neutral-600);
}

.gate-trail .gate-timeline__item:first-child::before {
    background: var(--gate-accent);
}

.gate-trail .gate-timeline__item.gate-timeline__item--approve::before {
    background: var(--gate-success);
}

.gate-trail .gate-timeline__item.gate-timeline__item--reject::before {
    background: var(--gate-danger);
}

.gate-trail .gate-timeline__meta {
    font-size: 12px;
}

/* ── sekcia agendovej obrazovky (Ui/GateAgendaSection.razor) ────────────── */

/*
    KAPITOLA NA PLOCHE STRÁNKY, NIE KARTA (predloha „Požiadavka na VO", 6. 10. 2026). Sekciu
    otvára linka vo farbe textu — silnejšia než deliace linky riadkov (40 %), takže sa sekcie
    čítajú ako celky aj bez vlastného podkladu. Označenie (poradie alebo písmeno časti) je
    v akcentovom texte, nadpis o stupeň pod nadpisom obrazovky.

    Sekcia nemá podklad, preto sa jej pravidlá `.gate-card …` netýkajú: pole má výplň plochy
    (`--gate-surface` na `--gate-bg`), presne ako ho kreslí predloha.
*/
.gate-agenda {
    min-width: 0;
    margin-bottom: var(--gate-space-8);
    padding-top: var(--gate-space-4);
    border-top: 2px solid var(--gate-text);
}

.gate-agenda__head {
    display: flex;
    align-items: baseline;
    gap: var(--gate-space-3);
    margin-bottom: var(--gate-space-3);
}

.gate-agenda__marker {
    flex: 0 0 auto;
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 13px;
    color: var(--gate-accent-text);
    font-variant-numeric: tabular-nums;
}

.gate-agenda__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.content .gate-agenda__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    text-wrap: pretty;
}

.gate-agenda__subtitle {
    margin: 6px 0 0;
    max-width: 80ch;
    font-size: 13px;
    color: var(--gate-muted);
    text-wrap: pretty;
}

/*
    BLOK V SEKCII (`GateFormSection` — „Oslovení dodávatelia", „Rozhodnutie o postupe zadávania")
    je návestie bez vlastnej linky: hranicu sekcie už drží silná linka nad ňou a riadky pod
    návestím majú svoje linky samy. Linka pod návestím by bola tretí vodorovný predel na pár
    riadkoch (predloha ju nemá). Blok, ktorým sekcia začína, horný odstup nepotrebuje — ten nesie
    hlava sekcie.
*/
.gate-agenda .gate-form__section-head {
    border-bottom: 0;
}

.gate-agenda__body > .gate-form__section:first-child {
    padding-top: 0;
}

/*
    Samostatný blok obsahu vnútri karty (napr. návrh na zlúčenie položiek podľa CPV).

    Odstup zhora má blok VŽDY, nielen medzi dvoma blokmi: prvý blok karty inak začínal tesne pod
    titulkom karty a jeho nadpis (16 px/800, tá istá miera ako titulok) sa čítal ako druhý riadok
    titulku — na registri plnení a objednávok to boli dva ťažké riadky nad sebou bez hranice
    (sweep 2026-08-18). Linku medzi blokmi kreslí až susedské pravidlo nižšie; prvému ju netreba,
    tam hranicu drží samotný titulok karty.
*/
.gate-section {
    margin-top: 1.25rem;
}

.gate-section + .gate-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--gate-divider);
}

/* ── panel ďalšieho kroku (Ui/GateActionPanel.razor) ─────────────────────── */

/*
    Akčná zóna karty registra. Pôvodne to bol holý rad `.gate-wizard__actions`, v ktorom vedľa
    seba stálo pole, tlačidlo, vysvetľujúca veta, deštruktívny úkon a veta o ďalšom kroku — na
    širokej obrazovke jedna stuha bez poradia dôležitosti, na telefóne päť zalomených riadkov bez
    väzby (vizuálny audit registra objednávok 2026-08-12). Panel obsah rozvrstvuje zhora nadol:
    čo nasleduje → prečo → čím sa to vykoná → poznámka → deštruktívny úkon.

    Vlastné pozadie, tieň ani nový odtieň zámerne nemá — je to časť karty, nie karta v karte.
    Oddeľuje ho jediná linka a ten istý zvislý rytmus, aký má samostatný blok obsahu
    (`.gate-section + .gate-section` vyššie), takže sa karta nerozpadne na dva rôzne systémy.
*/
.gate-action-panel {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gate-border);
}

/*
    Predtext nad názvom úkonu. Verzálky sa zámerne nepoužívajú — čítačky obrazovky ich hláskujú
    po písmenách (konvencia naprieč aplikáciou); odlíšenie nesie veľkosť, hrúbka a tlmená farba.
*/
.gate-action-panel__kicker {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--gate-muted);
}

/*
    Názov úkonu je skutočný podnadpis (h3 v karte, ktorej titulok je h2) — čítačka obrazovky tak
    prejde register po krokoch, ktoré sa od používateľa čakajú.

    Miera je miera POPISU POĽA (14 px/600), nie nadpisu, a je to rozhodnutie o hierarchii
    (položka #96). Deklarované .9375 rem sa nikdy neuplatnilo — `.content h3` (0,1,1) prebilo
    triedu (0,1,0), takže názov úkonu vyšiel 16 px, teda presne toľko čo TITULOK karty nad ním,
    a v jednej karte tak stáli dve rôzne stvárnenia `h3`: „POTVRDENIA Z TRHOVISKA" 12 px
    verzálkami a „Zapísať číslo objednávky zo SAP" 16 px (odmerané na `/objednavky`).

    Verzálky sem nepatria: predel bloku je NÁVESTIE, toto je VETA („Zapísať číslo objednávky zo
    SAP"), a čítačka obrazovky by ju hláskovala. Hlas popisu poľa je preto správna odpoveď — je to
    existujúca miera sústavy, nie štvrtá.
*/
.content .gate-action-panel__step-name,
.gate-action-panel__step-name {
    margin: .125rem 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
}

/* Vybavený záznam ďalší krok nemá — jedna tichá veta namiesto prázdnej hlavičky. */
.gate-action-panel__done {
    margin: 0;
    color: var(--gate-muted);
    font-size: .8125rem;
}

/*
    Veta o stave patrí POD hlavičku, nie za tlačidlo: vysvetľuje, prečo sa úkon žiada, a človek
    ju má prečítať skôr, než začne vypĺňať. Za tlačidlom ju čítal až ten, kto už klikol.
*/
.gate-action-panel__context {
    margin: .35rem 0 0;
    color: var(--gate-muted);
    font-size: .8125rem;
}

/*
    Rad ovládacích prvkov (pole + hlavný úkon). `flex-end` zarovnáva tlačidlo na spodnú hranu
    poľa — popis poľa stojí nad vstupom, takže stredové zarovnanie by tlačidlo zdvihlo do polovice
    popisu (ten istý idiom má `.gate-toolbar`). Zalamovanie je povinné: bez neho by rad na úzkej
    obrazovke roztiahol stránku do vodorovného posunu (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-action-panel__controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: flex-end;
    margin-top: .75rem;
}

/*
    Odsadenie pod poľom nesie rad, nie pole — inak by spodná hrana poľa stála o riadok vyššie než
    tlačidlo vedľa neho (to isté rieši `.gate-toolbar .gate-field`).

    Šírka: číslo objednávky zo SAP má desať znakov a spôsob doručenia je krátky výber — pole cez
    celú šírku karty by sľubovalo dlhú hodnotu. `flex-basis` je východisko aj strop; zmenšiť sa
    smie po `min-width` poľa (12 rem), takže sa rad zalomí až vtedy, keď naozaj nie je miesto.
*/
.gate-action-panel__controls .gate-field {
    flex: 0 1 18rem;
    margin-bottom: 0;
}

/*
    RIADOK FORMULÁRA AJ V PANELI ÚKONU (kolo 6, `/objednavky`). Rad ovládania je toolbarová
    zostava: popis NAD vstupom a vstup pri ľavom okraji. Pri poli „Číslo objednávky zo SAP" to
    v karte registra rozbilo mriežku — popis stál nad vstupom, vstup pri ľavej hrane a úkon
    („Zapísať") vedľa neho, kým každý iný riadok tej istej karty má popis vľavo a ovládanie
    vpravo. Obrazovka si preto smie vypýtať riadkový idióm tak, že pole zabalí do
    `.gate-form__fields` — obal si vezme celú šírku radu a mriežka poľa sa nemá s čím deliť.
*/
.gate-action-panel__controls > .gate-form__fields {
    flex: 1 1 100%;
}

/*
    A POPIS V ŇOM HOVORÍ HLASOM FORMULÁRA, NIE PANELA (tá istá výnimka ako `.gate-toolbar--in-form`,
    položka #279): tlmený 12 px popis je značka nad vstupom v rade filtrov, ale v riadku „popis
    vľavo, ovládanie vpravo" by z názvu poľa spravil nápovedu.
*/
.gate-action-panel__controls .gate-form__fields .gate-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gate-text);
}

/* Doplnková poznámka (lehota na vrátenie skenu) — nie je to úkon, preto tlmená a až pod ovládaním. */
.gate-action-panel__note {
    margin: .5rem 0 0;
    color: var(--gate-muted);
    font-size: .8125rem;
}

/*
    Rozbalený vedľajší krok (zadanie dôvodu pred zrušením). Rám je tu preto, že krok má vlastné
    pole aj vlastnú dvojicu tlačidiel — bez neho by „Potvrdiť zrušenie" splynulo s hlavným úkonom
    panela a nebolo by vidieť, ktorého úkonu sa dvojica týka. Orámovanie je to isté ako pri
    skupine polí (`.gate-fieldset`), žiadny nový odtieň ani tieň.
*/
.gate-action-panel__expanded {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
}

.gate-action-panel__expanded-title {
    margin: 0 0 .5rem;
    font-size: .875rem;
    font-weight: 600;
}

.gate-action-panel__expanded .gate-field {
    margin-bottom: .75rem;
}

/*
    Deštruktívny úkon stojí bokom od primárneho: na širokej obrazovke pri pravom okraji a o riadok
    nižšie (idiom `.gate-actions--split`), aby sa naň nedalo kliknúť „poslepiačky" pri mierení na
    hlavnú akciu. Veta o tom, prečo je úkon neaktívny, ostáva hneď pri ňom — o dva riadky nižšie
    by sa čítala ako poznámka k niečomu inému. Veta si berie zvyšok riadku, takže tlačidlo ostáva
    vpravo aj vtedy, keď je pri ňom vysvetlenie.
*/
.gate-action-panel__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1rem;
}

.gate-action-panel__secondary .gate-help {
    flex: 1 1 16rem;
    margin: 0;
}

/*
    Prázdna zóna sa nevykresľuje: zrušená objednávka nemá čo ponúknuť ani v rade ovládania, ani
    v deštruktívnej zóne, a prázdny flex box by po sebe nechal iba odsadenie. `:empty` je tu
    spoľahlivé, lebo Razor uzly z holého bieleho miesta zahadzuje (viď poznámka pri `.gate-inline`).
*/
.gate-action-panel__controls:empty,
.gate-action-panel__secondary:empty {
    display: none;
}

/*
    Telefón — rovnaký zlom ako zvyšok rámu aplikácie. Polia aj tlačidlá idú pod seba na plnú
    šírku: na 375 px displeji ostáva v rade dvoch tlačidiel sotva 150 px na jedno a text úkonu
    („Potvrdiť preukázateľné doručenie") sa doň nezmestí — buď by pretiekol do vodorovného posunu
    (WCAG 2.1 AA, 1.4.10 Reflow), alebo by sa zalomil do nečitateľnej kocky. Výška 2,75 rem je
    dotykový cieľ (WCAG 2.2 AA, 2.5.8), tá istá hodnota ako v rýchlej navigácii.
*/
@media (max-width: 640.98px) {
    .gate-action-panel__controls,
    .gate-action-panel__secondary,
    .gate-action-panel .gate-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gate-action-panel__controls .gate-field,
    .gate-action-panel__secondary .gate-help {
        flex-basis: auto;
    }

    /*
        Na plnú šírku sa hostiteľ roztiahne sám ako položka stĺpcového flexu
        (`align-items: stretch`), tlačidlo v tieňovom strome ju musí dobrať — inak by v širokom
        hostiteľovi stálo úzke tlačidlo pri ľavom okraji. Dotykovú výšku 2,75 rem si tlačidlo
        berie zo spoločného základu v sekcii tlačidiel; opakovať ju tu by znamenalo dve miesta,
        ktoré sa pri zmene hodnoty rozídu.
    */
    .gate-action-panel fluent-button::part(control) {
        width: 100%;
    }
}

/* ── tlačidlá (Ui/GateButton.razor → fluent-button.gate-button) ──────────── */

/*
    TLAČIDLO. Vzhľad je celý v tejto kaskáde, nie v parametroch knižnice: `fluent-button` kreslí
    svoju plochu v tieňovom strome z Fluent tokenov, ktoré sme prepísali na našu paletu, a všetko
    ostatné (písmo, odsadenie, výška, medzera pri ikone) sa musí adresovať cez `::part(control)`
    — vonkajší hárok má v kaskáde prednosť pred tieňovým stromom, takže netreba `!important`.

    Písmo je nadpisové (800): tlačidlo je príkaz, nie veta, a v predlohe je to jediné miesto
    mimo nadpisov, kde sa ťažká hmotnosť používa. Veľkosť 14 px sa zhoduje so vstupom vedľa
    neho, výška 36 px s celým radom ovládacích prvkov.
*/
fluent-button.gate-button::part(control) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 14.4px;
    border-radius: var(--gate-radius);
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 14px;
    line-height: 1.2;
}

/* Ikona v tlačidle je kresba na účiarí — bez `block` jej pod ňou ostane miesto na spodky písmen. */
fluent-button.gate-button svg {
    display: block;
}

/*
    Kresba + text v jednom tlačidle. Obsah sa v tieňovom strome FluentUI vkladá do RIADKOVÉHO
    `<span class="content">`, takže blokový `<svg>` (pravidlo vyššie) by text odtlačil na druhý
    riadok — tlačidlo „Späť" bolo dvojriadkové. Vlastný flex rad to rieši bez zásahu do knižnice
    a bez toho, aby sa kresba vrátila na účiarie.
*/
fluent-button.gate-button .gate-button__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/*
    NEAKTÍVNE TLAČIDLO MÁ JEDINÉ STVÁRNENIE — TVAR AKO KEBY STLAČITEĽNÉ, LEN STLMENÝ.

    Knižnica ho stlmuje rôznymi cestami podľa vzhľadu (akcentovému a neutrálnemu nasadí sivú
    VÝPLŇ, tichému len priehľadnosť), takže na obrazovke vznikli tri rôzne neaktívne tlačidlá —
    a sivá výplň bola ťažšia než susedné POVOLENÉ sekundárne tlačidlo s priehľadným podkladom:
    na registri zákaziek bolo zakázané „Založiť zákazku a spis" najvýraznejší ovládač stránky,
    teda afordancia naruby (nález kontroly 2026-08-19, položka #10).

    Jedna hodnota z predlohy (spec §5.1: rovnaký tvar, `opacity: .45`, `cursor: not-allowed`)
    to zjednotí. Aby priehľadnosť naozaj stlmila NÁŠ tvar a nie ten knižničný, musí každý vzhľad
    dostať späť svoju vlastnú kresbu aj v stave `[disabled]` — inak by cez .45 presvitala sivá
    výplň FluentUI. Kontrast tu nie je téma: neaktívny ovládací prvok je z WCAG 1.4.3 vyňatý
    („Incidental: inactive user interface components"), a práve o to ide — má vyzerať vypnuto.
*/
fluent-button.gate-button[disabled]::part(control) {
    opacity: .45;
    cursor: not-allowed;
}

fluent-button.gate-button[appearance="accent"][disabled]::part(control) {
    background: var(--gate-accent-fill);
    border-color: var(--gate-accent-fill);
    color: #f3f2f2;
}

fluent-button.gate-button[appearance="neutral"][disabled]::part(control) {
    background: transparent;
    border-color: var(--gate-divider);
    color: var(--gate-text);
}

fluent-button.gate-button[appearance="lightweight"][disabled]::part(control) {
    background: transparent;
    color: var(--gate-accent-text);
}

/*
    Deštruktívne tlačidlo si obrys drží aj vypnuté — z toho istého dôvodu ako ostatné vzhľady.
    (Doteraz tu bola opačná úvaha: „červený obrys okolo nestlačiteľného sľubuje akciu, ktorá
    nie je." Lenže tvar sľubuje akciu rovnako pri každom vzhľade, a keď sa jeden variant správa
    inak, vznikne z toho tretie neaktívne stvárnenie — presne to, čo pravidlo vyššie ruší.
    Že sa tlačidlo stlačiť nedá, hovorí priehľadnosť a kurzor, nie zmena farebnej rodiny.)
*/
fluent-button.gate-button--danger[disabled] {
    color: var(--gate-danger);
}

fluent-button.gate-button--danger[disabled]::part(control) {
    border-color: var(--gate-danger);
}

/*
    Vedľajšie tlačidlo (Fluent „Neutral"). Knižnica mu kreslí výplň `--neutral-fill-rest`, čo je
    v tejto palete plocha vstupu — na karte s tou istou plochou by tlačidlo zmizlo. Predloha má
    namiesto výplne obrys, takže sa tlačidlo drží tvarom a nie odtieňom.
*/
fluent-button.gate-button[appearance="neutral"]::part(control) {
    background: transparent;
    border-color: var(--gate-divider);
    color: var(--gate-text);
}

fluent-button.gate-button[appearance="neutral"]:hover::part(control) {
    background: color-mix(in srgb, var(--gate-text) 7%, transparent);
    border-color: var(--gate-divider);
}

fluent-button.gate-button[appearance="neutral"]:active::part(control) {
    background: color-mix(in srgb, var(--gate-text) 14%, transparent);
}

/*
    Tiché tlačidlo (Fluent „Lightweight"). Je to akcia v texte — farbu nesie akcentový TEXT,
    nie výplň; podfarbenie pribudne až pod kurzorom, aby sa dalo trafiť.
*/
fluent-button.gate-button[appearance="lightweight"]::part(control) {
    padding-inline: 4px;
    color: var(--gate-accent-text);
}

fluent-button.gate-button[appearance="lightweight"]:hover::part(control) {
    background: color-mix(in srgb, var(--gate-accent) 10%, transparent);
    color: var(--gate-accent-text);
}

/* Zaostrenie je jeden prstenec s odstupom — rovnaká kresba ako všade inde mimo vstupov. */
fluent-button.gate-button:focus-visible::part(control),
fluent-button.gate-button:focus-within::part(control) {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/*
    DOTYKOVÝ CIEĽ NA TELEFÓNE — jedna hodnota pre celú aplikáciu (WCAG 2.2 AA, 2.5.8; 2,75 rem =
    44 px). Predtým si ju pridával každý rad zvlášť (panel ďalšieho kroku, lepiaca lišta, paleta
    Ctrl+K), takže tlačidlo v karte registra, v hlavičke obrazovky alebo pod formulárom ostalo
    na desktopovej výške 36 px — a to je práve tá výška, do ktorej sa prstom mieri najhoršie.

    Výšku musia dostať OBAJA — hostiteľ aj tlačidlo v tieňovom strome. Samotné `::part(control)`
    vyrobí 44 px vysoké tlačidlo vnútri nižšieho hostiteľa, takže mu spodok vytečie von
    a rozostupy v rade sa rozídu (odmerané v paneli ďalšieho kroku: `hostH 32 / ctrlH 44`).

    JEDINÁ výnimka je bunka registra: tam pravidlo so špecifickejším selektorom drží 36 px, aby
    riadok tabuľky neprerástol (viď sekciu tabuliek). Odkaz v tvare tlačidla (`.gate-download`)
    ide s tlačidlami — v rade úkonov stojí vedľa nich a rozdiel 8 px by z radu spravil schody.
*/
@media (max-width: 640.98px) {
    fluent-button.gate-button {
        min-height: 2.75rem;
    }

    fluent-button.gate-button::part(control) {
        min-height: 2.75rem;
        /*
            A DLHÝ POPIS ÚKONU SA ZALOMÍ. Tieňový štýl drží text na jednom riadku, takže
            „Podať požiadavku na dodatok" si vypýtalo 313 px v 256 px širokej karte a roztiahlo
            CELÚ stránku do vodorovného posunu — hostiteľ pritom 256 px poslušne dodržal, pretečel
            až obsah v tieňovom strome (odmerané na 320 px: `/dodatky` 345 > 320, `/pnvo/{id}`
            340 > 320, `/zakazky/{id}` 326 > 320, `/zmr/prieskum/{id}` 324 > 320; WCAG 2.1 AA,
            1.4.10 Reflow). Platí pre KAŽDÉ tlačidlo, nielen pre rad úkonov: rovnaké popisy stoja
            aj v paneli filtrov a v paneli úkonu karty, a ktorýkoľvek z nich stránku roztiahne.
        */
        white-space: normal;
        text-align: center;
    }

    .gate-download {
        min-height: 2.75rem;
    }
}

/*
    ZBALENÝ BLOK ZA SEKUNDÁRNYM ÚKONOM (`<details class="gate-disclosure">`). Výnimočný
    formulár (skrátený zápis rozbehnutej zákazky) nesmie stáť otvorený nad registrom, kvôli
    ktorému sa obrazovka otvára. Ovládačom je `summary` v tvare sekundárneho tlačidla — nie
    odkaz a nie holý riadok textu.
*/
.gate-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 14.4px;
    border: 1px solid var(--gate-divider);
    background: transparent;
    color: var(--gate-text);
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}

.gate-disclosure > summary::-webkit-details-marker {
    display: none;
}

/*
    ZNAČKA OTVORENIA JE KRESLENÁ, NIE PÍSANÁ (kolo 6). Stav bloku hovorilo znamienko „+" / „−"
    vysadené ako text v pseudoprvku. Písmenná sadzba v tvare ikony je ale presne to, čo si
    aplikácia inde nedovolí — každý iný znak v rozhraní je inline SVG s `currentColor`
    (`Components/Layout/NavGlyphs.razor`, `Ui/GateQuickNav.razor`), knižnica ikon ani webfont
    v dodávateľskom reťazci nie sú. Navyše sa „+" pred popisom čítalo ako „pridať", teda ako
    sľub úkonu, ktorý tlačidlo nerobí — rozbaľuje blok.

    Značku preto kreslí `svg.gate-disclosure__glyph` v samotnom `summary` a stav sa vyjadruje
    OTOČENÍM, nie výmenou znaku: zavretý blok ukazuje šípku nadol, otvorený nahor.
*/
.gate-disclosure__glyph {
    flex: 0 0 auto;
}

.gate-disclosure[open] > summary .gate-disclosure__glyph {
    transform: rotate(180deg);
}

.gate-disclosure > summary:hover {
    background: color-mix(in srgb, var(--gate-text) 7%, transparent);
}

.gate-disclosure > summary:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

@media (max-width: 640.98px) {
    .gate-disclosure > summary {
        min-height: 2.75rem;
    }
}

/*
    ZBALENÉ VYSVETLENIE (`<details class="gate-help">`) — tá istá kresba znamienka, iná váha.
    Je to nápoveda, nie úkon, takže tvar tlačidla nedostáva; ale natívny trojuholník `<summary>`
    dostať nesmie ani ona (položka #183): navigácia aj ostatné rozbaľovače kreslia vlastnú značku
    a jediný systémový trojuholník na `/plnenia` bol cudzí prvok z inej sústavy (spec §0.1 —
    ikony sú kreslené, žiadna knižnica).

    `display: inline-flex` zruší `display: list-item`, ktorým prehliadač značku generuje;
    `list-style: none` a `::-webkit-details-marker` sú poistka pre prehliadače, ktoré si značku
    kreslia aj mimo zoznamového boxu.
*/
details.gate-help > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gate-text);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

details.gate-help > summary::-webkit-details-marker {
    display: none;
}

details.gate-help > summary::before {
    content: "+";
    font-variant-numeric: tabular-nums;
}

details.gate-help[open] > summary::before {
    content: "\2212";
}

details.gate-help > summary:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/* ── polia ───────────────────────────────────────────────────────────────── */

.gate-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1rem;
    min-width: 12rem;
}

.gate-field__label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
}

/*
    Hviezdička povinnosti je AKCENT, nie chyba: prázdne povinné pole ešte nie je chyba a červená
    z rodiny `--gate-danger` by to tvrdila pri každom nedotknutom formulári (predloha používa na
    tomto mieste accent-700). Chybu naďalej nesie farba popisu a text pod poľom.

    MEDZERU PRED HVIEZDIČKOU NESIE MEDZERNÍK, NIE MARGIN (položka #285). Razor zahadzuje biele
    miesto medzi popisom a značkou (rovnaký dôvod ako pri `.gate-inline`), takže ich dovtedy
    oddeľovalo iba 2,4 px marginu — a to je miera, ktorá po „o" a „t" („Číslo zmluvy *", „Predmet *")
    vyzerá ako medzera, ale po „ľ" v „Dodávateľ" naráža do mäkčeňa: mäkčeň aj hviezdička sedia
    v tej istej výške nad dotiahom, takže sa čítajú ako jeden pokazený znak. Odsadenie sa preto
    presunulo do textu — obal vypisuje NEZLOMITEĽNÚ MEDZERU pred hviezdičkou (`GateFieldShell`).
    Tri dôsledky: medzera sa počíta z písma popisu (teda sa zmenší spolu s ním v paneli filtrov),
    zalomiť sa na nej nedá (hviezdička nikdy neostane sama na druhom riadku popisu) a je to
    typografická medzera, nie rozostup krabíc.

    `.1em` navyše je vôľa pre diakritiku, ktorá presahuje do pravého postranku glyfu (ľ, ť, ď).
    Zámerne v `em`: 12 px popis panela filtrov by z pevnej miery dostal opticky väčšiu medzeru
    než 14 px popis formulára.
*/
.gate-field__required {
    color: var(--gate-accent-text);
    margin-inline-start: .1em;
}

.gate-field__badge {
    margin-inline-start: .4rem;
    font-weight: 400;
    font-size: .75rem;
    color: var(--gate-muted);
}

/*
    STAV POĽA JE ZNAČKA, NIE TLMENÉ SLOVO (predloha §6.5, dávka G). „len na čítanie" hovorí to
    isté, čo štítok stavu vedľa neho — že sa s dokumentom nedá hýbať —, ale kreslilo sa ako
    obyčajný tlmený text, takže v hlavičke časti splynulo s vetou „vlastník: vecný gestor"
    a v hlavičke sekcie s jej názvom. Doplnenie k popisu (vlastník) tlmeným textom OSTÁVA —
    to je údaj, nie stav.
*/
.gate-field__badge--tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--gate-radius);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
    background: var(--gate-neutral-soft);
    font-size: .6875rem;
    white-space: nowrap;
    vertical-align: middle;
}

/*
    „(povinné)" pod popisom poľa. V predlohe je to samostatný riadok 11 px pod názvom — ale len
    v RIADKOVOM rozvrhnutí formulára, kde má popis vlastnú bunku. V paneli filtrov alebo v bunke
    tabuľky by z jedného slova vznikol druhý riadok, ktorý rad polí rozhodí, preto tam ostáva
    veta iba pre čítačku obrazovky (trieda `gate-visually-hidden` na tom istom prvku) a povinnosť
    nesie `aria-required` vstupu. Odkrýva ju až pravidlo pri riadkovom formulári nižšie.
*/
.gate-field__required-note {
    font-weight: 400;
    color: var(--gate-muted);
}

/* Vysvetlenie pod poľom. Odsadenie nesie medzera v `.gate-field`, preto tu žiadne nie je. */
.gate-field__help {
    margin: 0;
    font-size: 12px;
    color: var(--gate-muted);
}

/* To isté vysvetlenie mimo poľa — veta nad tabuľkou alebo pred tlačidlom, tá odstup potrebuje. */
.gate-help {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-field__errors {
    font-size: .8125rem;
    color: var(--gate-danger);
}

.gate-field__errors-list {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.gate-field--invalid .gate-field__label {
    color: var(--gate-danger);
}

/*
    UPOZORNENIE PRI POLI NIE JE CHYBA (R3-N2, 23. 9. 2026). Pravidlá podkladov určenia PHZ sú
    upozornenia — uzavrieť sa smie aj bez podkladu —, ale pole ich kreslilo červenou vetou pod
    červenou menovkou, takže uzavretý dokument po úspešnom úkone „svietil" ako chybný.

    Blok upozornení (`Ui/GateFieldMessages.razor`) má farbu upozornenia a INÚ KRESBU než chyby:
    chyby majú odrážky, upozornenia zvislú linku pri okraji bez odrážok. Farba tak nie je jediný
    nosič rozdielu (WCAG 1.4.1) — ďalší je tvar a pre čítačku obrazovky skrytá predpona
    „Upozornenie:". Menovka poľa ostáva v bežnej farbe textu a vstup bez rámu chyby: pole
    s upozornením nie je chybné. Kontrast `--gate-warning`: 6,5 : 1 na ploche stránky vo svetlej
    schéme, v tmavej je jantárová svetlá (#f0c36d) nad tmavou plochou.
*/
.gate-field__warnings {
    font-size: .8125rem;
    color: var(--gate-warning);
}

.gate-field__warnings-list {
    margin: 0;
    padding: 0 0 0 .6rem;
    list-style: none;
    border-inline-start: 2px solid currentColor;
}

/*
    CIEĽ PRESUNU ZO SÚHRNU VALIDÁCIÍ. Presun na pole (`scrollIntoView({ block: 'start' })` z
    `js/gate-focus.js`) mieri na obal poľa, aby bol vidieť aj popis — a lepkavá hlavička rámu by
    ho inak prekryla presne ako súhrn (viď `.gate-summary` nižšie). Ten istý odstup má aj nadpis
    sekcie, na ktorý ukazuje veta o celej sekcii.

    AKTÍVNE POLE = to, ktorého vetu si používateľ v súhrne vybral. Na obrazovke s tromi červenými
    poľami vedľa seba nestačí rám chyby — vybrané má navyše prstenec s odstupom, rovnaká kresba ako
    zaostrenie inde, len vo farbe nálezu. Zhasne, keď nález zmizne (rozhoduje obal poľa).
*/
.gate-field,
[data-field],
.gate-form__section-title {
    scroll-margin-top: calc(var(--gate-nav-bar-h, 3.5rem) + var(--gate-space-4));
}

.gate-field--active {
    outline: 2px solid var(--gate-danger);
    outline-offset: 6px;
}

/*
    Vybraný nález je UPOZORNENIE (R3-N2) — prstenec je vo farbe upozornenia. Červený prstenec okolo
    poľa, ktoré nič neblokuje, by znovu tvrdil chybu. Triedu dáva `GateAktivnePole` len vtedy, keď
    pole chybu nemá; pri chybe rozhoduje chyba.
*/
.gate-field--active-warning {
    outline-color: var(--gate-warning);
}

/*
    Hodnota, ktorú pole len ukazuje (počíta ju systém — „Výška DPH", „EUR s DPH"). Je to plocha
    vstupu bez vstupu: rovnaká výplň, rovnaká výška aj obruba ako `.gate-input` nižšie, takže
    v rade polí nevznikne diera. Prerušovaná obruba je preč — v hranatom systéme pôsobila ako
    chyba vykreslenia; „nedá sa písať" hovorí tlmená hodnota a štítok „len na čítanie".
*/
.gate-field__readonly {
    box-sizing: border-box;
    margin: 0;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    background: var(--gate-surface);
    font-size: 14px;
}

.gate-field__readonly--multiline {
    white-space: pre-wrap;
}

.gate-field__readonly--number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gate-select,
.gate-date,
.gate-time,
.gate-input {
    /*
        Bez tohto je vstup v prehliadačovom `content-box`: min-height + padding + obruba dávajú
        o 14 px viac, zatiaľ čo Fluent komponenty (tlačidlá, textové polia) merajú svojich 36 px
        v border-boxe. Každý rad, ktorý mieša natívny vstup s Fluent prvkom, bol preto krivý —
        vstup prečnieval nad tlačidlo (nález testovania: register objednávok, priame zadania…).
        Border-box zjednocuje výšku všetkých ovládacích prvkov na 36 px = `--base-height-multiplier`
        × `--design-unit`; obsahu ostáva 22 px, riadok písma má 21 px, takže text sa nezmení.
    */
    box-sizing: border-box;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--gate-input-border);
    border-radius: var(--gate-radius);
    background: var(--gate-surface);
    color: var(--gate-text);
    caret-color: var(--gate-accent);
    font: inherit;
    font-size: 14px;
    /*
        Natívny <select> sa bez obmedzenia roztiahne na šírku svojej najdlhšej položky. Popisy
        z číselníkov a taxatívnych dôvodov bývajú celé vety, takže by na mobile roztlačili stránku
        do vodorovného posunu (WCAG 2.1 AA, 1.4.10 Reflow).
    */
    max-width: 100%;
}

/*
    VÝBER SI MUSÍ NECHAŤ MIESTO NA VLASTNÚ ŠÍPKU. Natívny `<select>` kreslí prehliadač a jeho
    šípka sedí NAD obsahom poľa — pri dlhej voľbe („Schválený podklad (súhrnná informácia /
    žiadosť o povolenie)") tak prekryla posledné znaky a text sa navyše orezal presne na hrane
    ovládača, bez výpustky (kontrola 2026-08-19, položka #31). Nedialo sa to z nedostatku
    miesta: 2 rem vyhradených vpravo problém rieši aj v 359 px poli na 1 280 px obrazovke.

    Výpustka je druhá polovica: bez nej sa hodnota končí uprostred slova a nie je poznať, či
    je to celá voľba. Zavretý text si `<select>` skracuje sám, rozbalená ponuka ostáva celá.
*/
.gate-select {
    padding-inline-end: 2rem;
    text-overflow: ellipsis;
}

/*
    Obruba pod kurzorom. Je to jediný signál „sem sa dá písať" pred kliknutím — v plochom
    systéme bez tieňov a bez zaoblenia nič iné pole neoznačí.
*/
.gate-select:hover,
.gate-date:hover,
.gate-time:hover,
.gate-input:hover {
    border-color: var(--gate-input-border-hover);
}

/*
    Zaostrenie vstupu: JEDEN prstenec tesne na obrube (`offset: 0`), nie dva krúžky nad sebou.
    Obruba sa zároveň prefarbí na akcent — bez toho by pri 2 px prstenci nebolo poznať, či je
    zaostrený vstup, alebo plocha okolo neho. Mimo vstupov (tlačidlá, odkazy, dlaždice) má
    prstenec odstup 2 px, aby neprekryl vlastnú kresbu prvku.
*/
.gate-select:focus-visible,
.gate-date:focus-visible,
.gate-time:focus-visible,
.gate-input:focus-visible {
    border-color: var(--gate-accent);
    outline: 2px solid var(--gate-accent);
    outline-offset: 0;
}

.gate-wizard__link:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: -2px;
}

/*
    ROVNAKÝ POVRCH PRE VŠETKY VSTUPY — Fluent aj natívne.

    Tieňový štýl textového poľa FluentUI skladá plochu ako viacvrstvový `background`
    (`padding-box <výplň>, border-box <obruba>`) a tá „obruba" je GRADIENT: boky splývajú
    s výplňou (#414141 na #3d3d3d), spodok je výrazne svetlý (#9a9a9a). Natívny <select>
    alebo dátum vedľa neho má pritom ROVNAKÚ VÝPLŇ — obe rodiny čítajú
    `--neutral-fill-input-rest` — ale jednotnú tenkú obrubu. V jednom rade formulára potom
    pole so svetlou spodnou linkou pôsobí, akoby malo svetlejší podklad než jeho susedia
    (nález z testovania tmavej schémy: „Odkaz na písomné poverenie" na /admin/delegacie,
    filtre registra subjektov). Rozdiel teda nie je vo výplni, ale v obrube.

    Zjednocuje sa preto obruba a zaoblenie; výplň ostáva na spoločnom tokene, takže sa obe
    rodiny nemôžu rozísť ani po zmene témy. Vonkajšie `::part()` má v kaskáde prednosť pred
    tieňovým stromom (aj pred jeho `:host(:hover)` pravidlami), takže gradient prebije jedna
    plná farba bez `!important`. Textová oblasť má obrubu na `control` (samotné <textarea>),
    ostatné polia na obale `root` — to je stavba komponentov, nie náš výber.
*/
fluent-text-field::part(root),
fluent-search::part(root),
fluent-number-field::part(root),
fluent-text-area::part(control) {
    background: var(--gate-surface);
    border: 1px solid var(--gate-input-border);
    border-radius: var(--gate-radius);
}

fluent-text-field:hover::part(root),
fluent-search:hover::part(root),
fluent-number-field:hover::part(root),
fluent-text-area:hover::part(control) {
    border-color: var(--gate-input-border-hover);
}

/* Text v poli má rovnakú mieru ako v natívnom vstupe vedľa — inak rad polí „poskakuje". */
fluent-text-field::part(control),
fluent-search::part(control),
fluent-number-field::part(control),
fluent-text-area::part(control) {
    font-family: var(--gate-font);
    font-size: 14px;
    caret-color: var(--gate-accent);
}

/*
    Zástupný text. Tieňový štýl ho farbí Fluent tokenom, ktorý v behu tejto aplikácie nemusí
    prísť (viď statický základ tokenov hore) — vtedy je deklarácia neplatná a zástupný text zdedí
    farbu hodnoty, čiže prázdne pole vyzerá ako vyplnené. Vlastná hodnota to drží v oboch stavoch:
    kontrast 6,2 : 1 (svetlá) a 6,7 : 1 (tmavá) voči výplni poľa, teda nad hranicou aj pre bežný
    text — a zároveň zreteľne odlíšená od skutočnej hodnoty. Samostatné pravidlo pre natívne polia
    je zámerné: prehliadač, ktorý by za `::part()` nevedel zreťaziť ďalší pseudoprvok, by pri
    spoločnom zozname zahodil celé pravidlo.
*/
fluent-text-field::part(control)::placeholder,
fluent-search::part(control)::placeholder,
fluent-number-field::part(control)::placeholder,
fluent-text-area::part(control)::placeholder {
    color: var(--gate-muted);
    opacity: 1;
}

.gate-input::placeholder {
    color: var(--gate-muted);
    opacity: 1;
}

/*
    ZAKÁZANÝ NATÍVNY VSTUP VYZERÁ ZAKÁZANE. Fluent prvky si sivý vzhľad kreslia samy, natívne
    (`.gate-input`, `.gate-select`, `.gate-date`, textová oblasť) nie, takže v jednom rade
    stálo zakázané pole s rovnakým obrysom ako povolené — na `/sutazna-dokumentacia` z toho
    bol formulár, do ktorého sa dá písať, ale nedá sa odoslať. Miera je rovnaká ako pri
    tlačidlách (R23).
*/
.gate-input:disabled,
.gate-select:disabled,
.gate-date:disabled,
.gate-time:disabled,
.gate-number__input:disabled,
textarea.gate-input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/*
    A JE TO JEDNA MIERA PRE VŠETKY DRUHY POLÍ (kolo 6). Pravidlo vyššie stlmuje NATÍVNE vstupy
    na .45, prvky knižnice si však berú vlastný token `--disabled-opacity` (.3) v `:host([disabled])`
    tieňového stromu — takže v jednom rade mal zakázaný dátum a zakázané číslo obrubu 180, kým
    zakázaný text a textová oblasť vedľa nich 198 (odmerané vo svetlej schéme). Sú to dva rôzne
    stupne „vypnutosti" na tej istej obrazovke bez toho, aby to čokoľvek znamenalo — presne ten
    nález, ktorý pravidlo vyššie riešilo medzi natívnym a knižničným poľom.

    VYHRÁVA .45, teda TMAVŠÍ tón (180): je to hodnota z predlohy (§5.1) a tú istú nesú neaktívne
    tlačidlá (R23, `fluent-button.gate-button[disabled]::part(control)`), takže celá aplikácia
    stlmuje jedným krokom. Obruba sa pritom v oboch rodinách počíta z `--gate-input-border`,
    takže sa tón nemôže rozísť ani po zmene témy.

    Pravidlo je VONKAJŠIE a mieri na hostiteľa, takže prebíja `:host([disabled])` v tieňovom
    strome (dokumentové pravidlá majú pred `:host` prednosť) — nenásobí sa s ním na .135.
*/
fluent-text-field[disabled],
fluent-search[disabled],
fluent-number-field[disabled],
fluent-text-area[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/*
    Zaostrenie rovnakým rámčekom ako natívne vstupy vyššie. `:focus-within` je nutné: skutočný
    <input> žije v tieňovom strome, takže hostiteľský prvok sám nikdy nie je zaostrený.

    Vlastný prstenec knižnice sa vypína (`--focus-stroke-width: 0` na hostiteľovi): tieňový
    strom si kreslí svoj rámček z toho tokenu a nad naším prstencom by vznikli DVA krúžky
    tesne vedľa seba — v hranatom systéme to vyzerá ako rozdvojená obruba, nie ako zaostrenie.
*/
fluent-text-field:focus-within,
fluent-search:focus-within,
fluent-number-field:focus-within,
fluent-text-area:focus-within {
    /* `!important` je nutné: základ tokenu je tiež dôležitý (viď blok tokenov hore). */
    --focus-stroke-width: 0 !important;
    outline: 2px solid var(--gate-accent);
    outline-offset: 0;
    border-radius: var(--gate-radius);
}

fluent-text-field:focus-within::part(root),
fluent-search:focus-within::part(root),
fluent-number-field:focus-within::part(root),
fluent-text-area:focus-within::part(control) {
    border-color: var(--gate-accent);
}

/*
    CHYBNÝ OVLÁDACÍ PRVOK MÁ ČERVENÝ OBRYS (R30 / položka #84).

    Po zamietnutom uložení sedelo `aria-invalid`, popis sčervenel a chybová veta stála pod poľom —
    ale samotný rámček vstupu bol vzorkovaný `color(srgb .1255 .1176 .1137 / .6)`, teda PRESNE tá
    istá hodnota ako pri platnom poli vedľa neho. Prázdne povinné IČO tak vyzeralo rovnako ako
    prázdne nepovinné IČ DPH a vidiaci používateľ nemal ako nájsť, čo doplniť.

    Obrys je 1 px v `--gate-danger` + rovnaká 1 px vnútorná linka — vizuálne 2 px bez toho, aby sa
    zmenila geometria poľa (2 px `border` by pole zväčšilo o 2 px a rad by sa rozišiel). Farba NIE
    JE jediný nosič: `aria-invalid`, červený popis aj zoznam chýb pod poľom ostávajú (WCAG 1.4.1).

    Blok stojí ZA pravidlami pre `:hover` a `:focus-visible` zámerne — majú rovnakú váhu, takže
    o víťazovi rozhoduje poradie v súbore. Prstenec zaostrenia (`outline`) je iná vlastnosť, takže
    zaostrené chybné pole má aj akcentový prstenec, aj červený obrys.
*/
.gate-field--invalid .gate-input,
.gate-field--invalid .gate-select,
.gate-field--invalid .gate-date,
.gate-field--invalid .gate-time,
.gate-field--invalid .gate-number__input,
.gate-field--invalid textarea.gate-input,
.gate-field--invalid .gate-input:hover,
.gate-field--invalid .gate-select:hover,
.gate-field--invalid .gate-date:hover,
.gate-field--invalid .gate-time:hover {
    border-color: var(--gate-danger);
    box-shadow: inset 0 0 0 1px var(--gate-danger);
}

.gate-field--invalid fluent-text-field::part(root),
.gate-field--invalid fluent-search::part(root),
.gate-field--invalid fluent-number-field::part(root),
.gate-field--invalid fluent-select::part(control),
.gate-field--invalid fluent-combobox::part(control),
.gate-field--invalid fluent-text-area::part(control),
.gate-field--invalid fluent-text-field:hover::part(root),
.gate-field--invalid fluent-search:hover::part(root),
.gate-field--invalid fluent-number-field:hover::part(root),
.gate-field--invalid fluent-text-area:hover::part(control) {
    border-color: var(--gate-danger);
    box-shadow: inset 0 0 0 1px var(--gate-danger);
}

/*
    V bunke tabuľky nesie chybu ukazovateľ na obale ovládania (`.gate-field--compact`, sekcia
    tabuliek nižšie) — vnútorná linka na samotnom vstupe by sa s ním zdvojila.
*/
.gate-field--compact.gate-field--invalid .gate-input,
.gate-field--compact.gate-field--invalid .gate-select,
.gate-field--compact.gate-field--invalid .gate-date,
.gate-field--compact.gate-field--invalid .gate-time,
.gate-field--compact.gate-field--invalid .gate-number__input,
.gate-field--compact.gate-field--invalid fluent-text-field::part(root),
.gate-field--compact.gate-field--invalid fluent-number-field::part(root),
.gate-field--compact.gate-field--invalid fluent-text-area::part(control) {
    box-shadow: none;
}

/*
    POLE NA KARTE JE STUDŇA, NIE ĎALŠIA PLOCHA. Výplň vstupu je `--gate-surface` — presne tá
    istá farba, akú má karta —, takže na karte splynul vstup s podkladom a pole držala len 1 px
    obruba: rad filtrov nad tabuľkou vyzeral ako obtiahnuté prázdno, nie ako miesto na písanie
    (Fáza A, potvrdené sweepom 2026-08-18 na všetkých registroch). Predloha má polia na PLOCHE
    STRÁNKY, kde ten istý odtieň krok tvorí; na karte ho treba obrátiť.

    Vnútri karty preto vstup preberá plochu stránky (`--gate-bg`) — vo svetlej schéme o stupeň
    svetlejšia než karta, v tmavej o stupeň tmavšia. Obruba drží ≥ 3 : 1 voči obom (svetlá
    4,2 : 1 voči novej výplni, tmavá 5,5 : 1), takže sa nezhorší nič, čo bolo v poriadku.

    Zoznam je menovitý a mieri na PRVKY, nie na Fluent token: `--neutral-fill-input-rest` čítajú
    aj tieňové stromy, ktoré vstup nie sú (tlačidlo, karta), takže prepnutie tokenu na karte by
    prefarbilo aj ich. Platí to pre KAŽDÚ plochu z tohto odtieňa — karta aj panel dialógu; inak
    by pole v potvrdení nezvratného úkonu (odôvodnenie skartácie) alebo v palete Ctrl+K malo ten
    istý problém, len o vrstvu vyššie.
*/
.gate-card .gate-input,
.gate-card .gate-select,
.gate-card .gate-date,
.gate-card .gate-time,
.gate-card .gate-field__readonly,
.gate-card .gate-attachments__list,
.gate-dialog__panel .gate-input,
.gate-dialog__panel .gate-select,
.gate-dialog__panel .gate-date,
.gate-dialog__panel .gate-time,
.gate-quicknav__panel .gate-input {
    background: var(--gate-bg);
}

.gate-card fluent-text-field::part(root),
.gate-card fluent-search::part(root),
.gate-card fluent-number-field::part(root),
.gate-card fluent-text-area::part(control),
.gate-dialog__panel fluent-text-field::part(root),
.gate-dialog__panel fluent-search::part(root),
.gate-dialog__panel fluent-number-field::part(root),
.gate-dialog__panel fluent-text-area::part(control),
.gate-quicknav__panel fluent-search::part(root) {
    background: var(--gate-bg);
}

/*
    To isté pre polia knižnice, ktoré si plochu berú z tokenu a `::part()` na ne nedosiahne
    (výber a jeho rozbalený zoznam). Token sa tu prepisuje na SAMOTNOM prvku, takže sa nedotkne
    ničoho iného na karte.
*/
.gate-card fluent-select,
.gate-card fluent-combobox,
.gate-card fluent-listbox,
.gate-dialog__panel fluent-select,
.gate-dialog__panel fluent-combobox {
    --neutral-fill-input-rest: var(--gate-bg) !important;
    --neutral-fill-input-hover: var(--gate-bg) !important;
}

/*
    VSTUP A JEHO ÚKON V JEDNEJ BUNKE (`GateTextField.Trailing`, položky #189/#224/#230). Vstup si
    berie zvyšok riadku, tlačidlo svoju prirodzenú šírku; na úzkom výreze sa tlačidlo zalomí pod
    vstup (a tam už mu podlaha 44 px stačí). Bez `min-width: 0` by sa web komponent nezmenšil pod
    svoju predvolenú šírku a rad by pretiekol bunku.
*/
.gate-field__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/*
    Vstup si drží mieru KRÁTKEHO poľa (14 rem ≈ strop `--w-short`): slot nesie identifikátor
    a jeho vyhľadanie, nie vetu — osemznakové IČO v 460 px poli je ten istý nález ako #94.
*/
.gate-field__action > fluent-text-field {
    flex: 0 1 14rem;
    min-width: 0;
    width: auto;
}

/*
    Úkon môže byť aj v obale (obrazovka si ho značkuje `data-testid`), preto selektor mieri na
    „všetko okrem vstupu", nie na `fluent-button`.

    ÚKON SA ZMESTÍ DO BUNKY, AJ KEĎ SI SO SEBOU NESIE VETU (R2-N2). Obal úkonu drží popri tlačidle
    aj vysvetľujúci odsek — pri IČO je to „Údaje sa načítajú z registra: … Načítanie sa sprístupní
    po zadaní celého IČO." — a `flex-shrink: 0` znamenalo, že sa bunka merala na NEZALOMENÚ dĺžku
    tej vety. Odmerané na `/suppliers/new` pri 1366 px: rad ovládania 819 px, obal úkonu 1 076 px,
    teda o 257 px za pravým okrajom, a celá stránka dostala vodorovný posun (obsah 1 513 px);
    pri 1920 px to bolo to isté, len s väčšou medzerou. Vodorovný posun tela stránky je porušenie
    WCAG 2.1 AA 1.4.10 (Reflow) a testovanie ho vidí ako rozbitú obrazovku — horný pás aj lišta
    úkonov sú zrazu užšie než formulár medzi nimi.

    `flex-shrink: 1` sa PRED zmrštením stále najprv zalomí (rad má `flex-wrap: wrap`), takže úkon,
    ktorý sa vedľa vstupu zmestí, ostáva presne tam, kde bol; zmrštenie príde na rad, až keď je
    položka sama širšia než riadok — a vtedy je zalomená veta jediná správna odpoveď. `min-width: 0`
    vypína automatické minimum ohybnej položky, ktoré by inak držalo šírku najširšieho tlačidla
    v obale. Platí pre KAŽDÝ formulár s týmto vzorom, nie pre jedno pole.
*/
.gate-field__action > :not(fluent-text-field) {
    flex: 0 1 auto;
    min-width: 0;
}

/*
    VÝBER A JEHO ÚKON (`GateSelect.Trailing` — „Pridať útvar“). Výber nesie celé názvy útvarov,
    nie osemznakový identifikátor, takže si berie zvyšok riadku ako stopercentný výber bez úkonu;
    úkon ostáva na svojej miere. Pod 14 rem sa úkon zalomí pod výber. Pravidlo „všetko okrem
    vstupu“ vyššie prebije špecificitou (0-2-0 proti 0-1-1), nie poradím.
*/
.gate-field__action > .gate-select {
    flex: 1 1 14rem;
    min-width: 0;
    vertical-align: bottom;
}

/*
    A TLAČIDLO ÚKONU SI V TEJ BUNKE ZALOMÍ POPIS — pri KAŽDEJ šírke okna, nie len na telefóne.

    Tieňový strom FluentUI drží text tlačidla na jednom riadku, takže hostiteľ poslušne dodrží
    šírku bunky a pretečie až obsah v ňom (tá istá mechanika ako pri dotykovom pravidle nižšie
    pri 320 px). Bunka ovládania je pritom OVEĽA užšia než okno: mriežka riadku poľa dáva ľavému
    stĺpcu 32 % a na tablete (768 px) ostane ovládaniu 206 px — a „Načítať údaje podľa IČO
    z verejne dostupných registrov" si pýta 381 px, teda 151 px vodorovného posunu celej stránky
    (odmerané maticou obrazoviek, R2-N2). Popis úkonu pri poli je veta, nie jedno slovo, takže sa
    zalomiť musí; o tom, koľko riadkov si vezme, rozhoduje šírka bunky, nie dĺžka vety.
*/
.gate-field__action fluent-button.gate-button {
    max-width: 100%;
}

.gate-field__action fluent-button.gate-button::part(control) {
    white-space: normal;
}

/*
    Na telefóne vstup vypĺňa šírku poľa ako každý iný ovládač (R51) — inak by mal formulár dva
    pravé okraje (presne nález #167). Tlačidlo sa zalomí pod neho a plnošírkový pás z úkonu pri
    poli ani tam nerobíme (H12) — ostáva úzke, na svoju vlastnú mieru.

    ALE NEPOSÚVA SA K PRAVÉMU OKRAJU (položka #284). Doteraz ho tam tlačil `margin-inline-start: auto`
    a výsledok bol na `/suppliers/new` pri 375 px nerozoznateľný od odosielacieho tlačidla panela
    filtrov: vstup cez celú šírku (16 → 358) a pod ním tlačidlo pri pravom okraji (147 → 358) —
    presne tvar „pole a pod ním Hľadať". „Načítať z registra podľa IČO" pritom formulár neodosiela,
    je to pomôcka JEDNÉHO poľa: číta z neho a píše doň. Zarovnanie s ĽAVOU hranou vstupu to hovorí
    bez slova — úkon patrí k poľu nad sebou, nie k formuláru pod sebou. K pravému okraju sa drží
    to, čo obrazovku posúva ďalej (`.gate-toolbar > fluent-button`, `.gate-actions--end`).

    Zarovnanie na začiatok nie je treba zapisovať: `.gate-field__action` je ohybný rad bez
    `justify-content`, teda `flex-start`. Desktopový rad (úkon v riadku vstupu) sa nemení.
*/
@media (max-width: 640.98px) {
    .gate-field__action > fluent-text-field {
        flex: 1 1 100%;
    }
}

/*
    Polia FluentUI sú `inline-block` a bez šírky sa zmestia len na svoj predvolený počet znakov —
    v stĺpci formulára potom textové polia „plávajú" užšie než natívny <select> alebo dátum vedľa
    nich (nález testovania: pole Popis referencie bolo neúmerne malé). Šírku určuje stĺpec
    formulára, nie komponent; horná hranica ostáva na `.gate-form`, takže riadok nikdy neprerastie
    čitateľnú dĺžku. Priamy potomok zámerne: vnorené zostavy (napr. `.gate-number`) si šírku riadia
    samy.
*/
.gate-field__control > fluent-text-field,
.gate-field__control > fluent-text-area,
.gate-field__control > fluent-number-field,
.gate-field__control > fluent-search,
.gate-field__control > fluent-select,
.gate-field__control > fluent-combobox {
    width: 100%;
}

/*
    Web komponenty aj natívne vstupy sú inline-block a v riadkovom boxe stoja na účiarí — pod
    nimi tak v obale poľa ostáva ~4 px miesta na spodky písmen (riadok 14 px / 1.5). Pole je
    potom o tie 4 px vyššie než samotný vstup a v paneli filtrov, ktorý `align-items: flex-end`
    zarovnáva rad na spodok POLÍ, sa tlačidlo vedľa poľa prepadne presne o túto medzeru pod
    vstup (nález testovania: „tlačidlá nelícujú so vstupmi"). Spodné zvislé zarovnanie medzeru
    ruší. Deti flex zostáv (`.gate-number__input`) vertical-align ignorujú — tam je neškodné.
*/
.gate-field__control > fluent-text-field,
.gate-field__control > fluent-text-area,
.gate-field__control > fluent-number-field,
.gate-field__control > fluent-search,
.gate-field__control > fluent-select,
.gate-field__control > fluent-combobox,
.gate-field__control > .gate-input,
.gate-field__control > .gate-select,
.gate-field__control > .gate-date,
.gate-field__control > .gate-time,
.gate-field > .gate-input,
.gate-field > .gate-select,
.gate-field > .gate-date,
.gate-field > .gate-time {
    vertical-align: bottom;
}

/*
    Výšku textovej oblasti nesie atribút `rows` (Gate.Ui: `GateTextArea.Rows`). Zvislé zväčšenie
    ponechávame používateľovi, vodorovné nie — to by roztiahlo stránku do vodorovného posunu
    (WCAG 2.1 AA, 1.4.10 Reflow). Vonkajší `::part()` má v kaskáde prednosť pred tieňovým stromom.
*/
.gate-field__control > fluent-text-area::part(control) {
    width: 100%;
    resize: vertical;
}

/*
    TEXTOVÁ OBLASŤ MÁ VŽDY ASPOŇ 90 px (spec §5.2, položka #159). Výšku síce nesie atribút `rows`,
    ale obrazovka, ktorá ho nenastaví, dostala od knižnice 54 px — teda dva riadky pre „Poznámku
    k zmluve", kým tá istá trieda mala inde 132 px (odmerané na `/contracts/{id}/edit` proti
    `/suppliers/{id}`). Pole na odsek musí vyzerať ako pole na odsek, nech ho volá ktokoľvek.

    Bunka opakovateľnej tabuľky je výnimka: tam je výška riadku spoločná pre celý register
    a 90 px v jednej bunke by nafúklo všetkých šestnásť stĺpcov (`rows="2"`, viď FormFieldRenderer).
*/
fluent-text-area::part(control) {
    min-height: 90px;
}

.gate-table td fluent-text-area::part(control) {
    min-height: 36px;
}

/*
    To isté platí pre natívne prvky Gate UI (výber a dátum). Bez šírky si `<select>` berie šírku
    svojej najdlhšej položky a `<input type="date">` šírku podľa formátu prehliadača — vedľa
    stopercentného textového poľa potom pôsobia ako miniatúry. Dátum má strop: dlhší než jeho
    obsah byť nepotrebuje.
*/
.gate-field__control > .gate-select {
    width: 100%;
}

.gate-field__control > .gate-date {
    width: 100%;
    max-width: 14rem;
}

/* Čas je päť znakov — dátumový strop by z neho spravil poloprázdny rámček. */
.gate-field__control > .gate-time {
    width: 100%;
    max-width: 9rem;
}

/* Prepínač v bunke ovládania riadkového formulára si zvislú medzeru riadku nepripočítava. */
.gate-field__control > .gate-checkbox {
    margin-bottom: 0;
}

/*
    Ručne poskladané pole BEZ obalu `GateFieldShell` — `<div class="gate-field">` s popisom
    a natívnym vstupom priamo v ňom. Pravidlá vyššie mieria na `.gate-field__control`, ktorý
    vyrába len shell, takže takýto vstup ostal na predvolenej šírke prehliadača (~20 znakov):
    do „Čísla zmluvy" a „Predmetu" sa napísaný text nezmestil (UAT nálezy N-0009/N-0015).
    Šírku určuje stĺpec formulára rovnako ako pri Gate.Ui poliach; dátum si drží strop, dlhší
    než jeho vlastný obsah byť nepotrebuje.

    Správna oprava je vymeniť ručné pole za wrapper `Gate.Ui` (tam žije aj parsovanie a
    prístupnosť) — toto pravidlo je záchranná sieť pre miesta, kde ručné pole ešte ostalo.
*/
.gate-field > .gate-input,
.gate-field > .gate-select {
    width: 100%;
}

.gate-field > .gate-date {
    width: 100%;
    max-width: 14rem;
}

.gate-field > .gate-time {
    width: 100%;
    max-width: 9rem;
}

/*
    Filtre nad zoznamom stoja vedľa seba v riadku — tam by 100 % roztiahlo jedno pole cez celý
    panel a ostatné by zalomilo pod seba.
*/
.gate-toolbar .gate-field__control > fluent-text-field,
.gate-toolbar .gate-field__control > fluent-search,
.gate-toolbar .gate-field__control > fluent-select,
.gate-toolbar .gate-field__control > fluent-combobox,
.gate-toolbar .gate-field__control > .gate-select,
.gate-toolbar .gate-field__control > .gate-date,
.gate-toolbar .gate-field__control > .gate-time {
    width: auto;
}

/* Tá istá výnimka pre ručne poskladané pole v paneli filtrov. */
.gate-toolbar .gate-field > .gate-input,
.gate-toolbar .gate-field > .gate-select,
.gate-toolbar .gate-field > .gate-date,
.gate-toolbar .gate-field > .gate-time {
    width: auto;
}

/*
    ŠÍRKU VÝBERU V PANELI NEURČUJE JEHO NAJDLHŠIA VOĽBA (položka #282). `width: auto` znamená pri
    natívnom `<select>` „zovri sa okolo najdlhšej `<option>`", takže ten istý filter meral 160 px
    na `/suppliers` a `/contracts`, 282 px na `/plany` a 416 px na `/ulohy` — štyri registre
    s rovnakým radom filtrov vyzerali ako štyri aplikácie a rad sa pri prechode medzi nimi
    zakaždým posunul inam. Značkovanie za to nemohlo: všetky štyri panely nesú tú istú triedu
    `gate-field--capped` a líšia sa iba obsahom číselníka.

    Zavretý výber nemusí byť taký široký ako jeho najdlhšia voľba: rozbalenú ponuku kreslí
    prehliadač ako vlastnú vrstvu, ktorú šírka ovládača neoreže, a zavretý text si `<select>`
    skráti sám. Miera je preto SPOLOČNÉ DNO panela (10 rem = 160 px, `min-width` vyššie) — teda
    hodnota, na ktorej už dva zo štyroch panelov stáli.

    Zovretie („nerásť do zvyšku riadku", `flex: 0 1 auto` na `.gate-field--capped`) sa nemení, len
    sa už nerastie ani z obsahu ponuky. Na úzkom výreze pevnú mieru prepíše `max-width` z pravidiel
    vyššie a mediálny dopyt nižšie, takže z nej nikdy nevznikne vodorovný posun.

    Pravidlo MUSÍ stáť za oboma výnimkami vyššie: má rovnakú váhu (tri triedy), takže o víťazovi
    rozhoduje poradie v hárku.
*/
.gate-toolbar .gate-field__control > .gate-select,
.gate-toolbar .gate-field > .gate-select,
.gate-toolbar > .gate-select {
    width: 10rem;
}

/*
    VÝNIMKA: VÝBER, KTORÉHO PONUKA JE SAMA DÁTOVOU SADOU (položka #282, druhá polovica). „Číselník"
    na `/admin/ciselniky` a „Zostava" na `/zostavy` nie sú filtre nad tabuľkou — sú to prepínače
    toho, ČO obrazovka vôbec ukazuje, a celý rozdiel medzi voľbami je v ich texte („Finančné limity
    zákazky (12)" proti „Kategórie výdavkov (37)"). Zovreté na spoločné dno filtrov by z nich
    ostali prvé dve slová a používateľ by nevedel, na čo sa práve pozerá.

    Zovretie okolo ponuky sa im preto vracia — ale so SPOLOČNÝM stropom, aby ten istý prepínač
    nemeral 589 px na jednej obrazovke a 363 px na druhej. 35 rem (560 px) je tá istá miera, akú
    má najširšie pole formulára, takže sa prepínač nerozíde so vzorom obrazovky pod ním; `100%`
    ho na úzkom výreze ďalej drží vnútri panela.

    STROP PATRÍ AJ POĽU, nielen ovládaču — šírku RADU počíta flexbox z hypotetickej veľkosti
    položky, a tou je vnútorná šírka najdlhšej voľby (rovnaký dôvod ako pri `--capped` nižšie).

    Váha je zámerne tri triedy, nie štyri: pravidlo tak prebije mieru filtra o pár riadkov vyššie
    (rovnaká váha, neskoršie poradie), ale na telefóne mu ustúpi — tam ovládač vypĺňa šírku poľa
    ako každý iný (R51).
*/
.gate-toolbar .gate-field--picker {
    max-width: min(35rem, 100%);
}

.gate-toolbar .gate-field--picker .gate-select {
    width: auto;
    max-width: min(35rem, 100%);
}

/*
    Filter, do ktorého sa píše celá veta („Číslo alebo predmet zmluvy"). Predvolená šírka poľa
    v paneli je ~12 rem (`.gate-field`) a vstup v ňom si drží prirodzenú šírku prehliadača, takže
    sa doň nezmestil ani vlastný zástupný text — používateľ nevedel, čo sa od neho pýta.

    Zámerne NIE `--wide`: ten je obsadený a znamená čosi iné (celý riadok mriežky formulára,
    `GateFieldShell.Wide`). Vstup vypĺňa pole na 100 %, čo je výnimka z výnimky panela vyššie —
    preto je selektor o triedu dlhší, aby prebil `width: auto`.
*/
.gate-field--long {
    min-width: 17rem;
}

.gate-toolbar .gate-field--long .gate-field__control > fluent-text-field,
.gate-toolbar .gate-field--long .gate-field__control > fluent-search {
    width: 100%;
}

/*
    Pole, do ktorého sa píše CELÁ VETA a stojí v paneli úkonu (nie filtra) — „Názov uzatváraného
    dodatku" na /dodatky. Panel s ním nesie aj dva výbery s dlhými voľbami („§ 18 ods. 1 písm. a)
    — vyhradená zmena v súťažných podkladoch"), ktoré si berú šírku podľa textu, takže na názov
    ostalo ~12 rem a používateľ z neho videl pár slov (UAT N-0091). `--long` by pridalo 5 rem —
    málo; tu treba celý riadok panela, preto `flex-basis`.

    Rozdiel oproti `--wide`: ten hovorí o mriežke formulára (`GateFieldShell.Wide`), toto o riadku
    panela `.gate-toolbar` (flex). Vstup vypĺňa pole na 100 %, čo je výnimka z výnimky panela
    vyššie — preto je selektor o triedu dlhší, aby prebil `width: auto`.
*/
.gate-toolbar .gate-field--full {
    flex-basis: 100%;
}

.gate-toolbar .gate-field--full .gate-field__control > fluent-text-field,
.gate-toolbar .gate-field--full .gate-field__control > fluent-search {
    width: 100%;
}

/*
    Výber, ktorého ponuka nesie celé názvy dokumentov („Príloha č. 13 — Súhrnná správa o zákazkách
    s nízkymi hodnotami"). Natívny <select> si berie šírku podľa NAJDLHŠEJ položky, takže jediné
    pole roztiahlo panel filtrov cez 750 px, hoci zavreté ukazuje dve slová (nález z testovania:
    „Typ dokumentu" na /ulohy). Strop je zámerne na konkrétnom poli, nie na všetkých výberoch —
    väčšina ponúk je krátka a plná šírka je pre ne správna. Zavretý text si <select> skráti sám
    a rozbalená ponuka ostáva v plnej šírke, takže sa nič nestratí.

    Strop musí ustúpiť VÝREZU: 416 px je na telefóne viac než celá plocha obsahu (375 − 2 × 16 px),
    takže z tej istej hodnoty vznikol vodorovný posun celej stránky (odmerané na `/ulohy`:
    448 > 375; WCAG 2.1 AA, 1.4.10 Reflow). `min()` to rieši pri zdroji — druhé pravidlo
    v mediálnom dopyte by sa pri zmene hodnoty s týmto ticho rozišlo.
*/
.gate-field--capped .gate-select {
    max-width: min(26rem, 100%);
}

/*
    STROP PATRÍ AJ SAMOTNÉMU POĽU, NIE LEN JEHO OVLÁDAČU. Pravidlo vyššie zovrie `<select>`,
    ale šírku RADU počíta flexbox z hypotetickej veľkosti položky — a tou je vnútorná šírka
    najdlhšej voľby (odmerané: `.gate-field` ostalo ~750 px široké na `/ulohy`, ~810 px na
    `/plneniach`). Tlačidlo „Filtrovať" tak odletelo na x=1072, hoci jeho výber končil na
    x=725, a inde sa rad zalomil a tlačidlo ostalo pod orezaným výberom.

    Strop je len v PANELI FILTROV: v riadkovom formulári je položkou celý riadok (popis
    aj ovládanie), takže šírku tam určuje druh údaja.
*/
/*
    OHRANIČENÉ POLE PANELA SA NEROZŤAHUJE (položka #216). `flex: 1 1 16rem` mu prikazovalo rásť do
    zvyšku riadku, takže odosielacie tlačidlo odplávalo od posledného filtra — odmerané `/plany`
    143 px pred tlačidlom, `/admin/definicie` 265 px medzi výberom a vstupom. Panel je rad polí
    a hneď za nimi tlačidlo; šírku poľa určuje jeho OBSAH (výber s dlhými voľbami má vlastný
    strop 26 rem), nie voľné miesto vedľa. Rast preto 0 a základ `auto`: pole sa zmenší, keď treba,
    ale nikdy nenaťahuje rad. Na telefóne ho pravidlo nižšie prepíše na celý riadok.
*/
.gate-toolbar .gate-field--capped {
    flex: 0 1 auto;
    max-width: min(26rem, 100%);
}

/*
    POD 641 px BERIE OVLÁDAČ PANELA CELÝ RIADOK. Filtre si držali desktopovú šírku, takže na
    `/suppliers` stál 176 px vstup v 311 px stĺpci (135 px mŕtveho miesta) a štyri polia
    `/auditu` vyrobili písmeno L s tlačidlom vedľa štvrtého.

    ZOZNAM JE MENOVITÝ A MUSÍ POKRYŤ CELÝ RAD — stačí jeden druh ovládača mimo neho a panel má
    zase dva pravé okraje. Doplnené o áno/nie prepínač a skupinu volieb: krátky popis („Len
    končiace zmluvy") ich nechal 178 px širokých medzi dvoma 311 px poľami, takže `/contracts`
    meral [343, 343, **210**, 343] a `/pnpz` [343, **188**, 343] (položka #91). Holý
    `<select>`/`<input>` v paneli (registre ich používajú bez obalu `.gate-field`) je v zozname
    tiež a `fluent-button` je bez triedy `.gate-button` — o šírke v rade rozhoduje DRUH prvku,
    nie to, či prešiel cez wrapper dizajnového systému.

    Zarovnanie radu na spodné hrany (`align-items: flex-end`, UAT N-0103) sa nemení: každý
    ovládač má na telefóne vlastný riadok, takže naň nie je čo zarovnávať; na desktope platí
    ďalej. Pole `--full` má svoj `flex-basis: 100 %` už z desktopu.

    PRAVIDLO STOJÍ ZA STROPOM VYŠŠIE A JE TO NUTNÉ: `.gate-toolbar > .gate-field` má rovnakú
    váhu ako `.gate-toolbar .gate-field--capped`, takže o víťazovi rozhoduje poradie v súbore.
    Nad stropom by ohraničené pole ostalo na telefóne 26 rem široké namiesto celého riadku.
*/
@media (max-width: 640px) {
    .gate-toolbar > .gate-field,
    .gate-toolbar > .gate-checkbox,
    .gate-toolbar > .gate-checkgroup,
    .gate-toolbar > .gate-money,
    .gate-toolbar > .gate-select,
    .gate-toolbar > .gate-input,
    .gate-toolbar > .gate-date,
    .gate-toolbar > .gate-time,
    .gate-toolbar > select,
    .gate-toolbar > input {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    /*
        Tlačidlo panela stojí POD poľami — ale svojou vlastnou šírkou pri pravom okraji, nie ako
        pás cez celý riadok (H12, položka #214). Pravidlo „ovládač vypĺňa šírku poľa" (R51) platí
        pre VSTUPY, nie pre úkony: plnošírkové tlačidlo je na telefóne najťažší prvok obrazovky
        a na `/zakazky/{id}` z neho boli dva („Určiť spôsob vyhodnotenia", „Vyhotoviť oznámenie"),
        kým rovnaké tlačidlá v rade úkonov ostali úzke. Vlastný riadok tlačidlu vyjde sám —
        polia nad ním si berú 100 %; `margin-inline-start: auto` ho posunie k pravému okraju,
        rovnako ako rad úkonov v karte (`.gate-actions--end`).
    */
    .gate-toolbar > fluent-button {
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    /* Druhé a ďalšie tlačidlo panela ostáva pri prvom (skupina úkonov, nie stĺpec pásov). */
    .gate-toolbar > fluent-button ~ fluent-button {
        margin-inline-start: 0;
    }

    /*
        A S POĽOM AJ OVLÁDAČ V ŇOM. Celý riadok si vypýtalo POLE, ale vstup v ňom si držal
        prirodzenú šírku z výnimky pre desktopový rad (`width: auto` o pár sekcií vyššie) —
        odmerané pravé okraje SAMOTNÝCH ovládačov: `/audit` [180, 208, 343] (dva dátumy, dve
        textové polia, tlačidlo) a `/suppliers` [208, 343]. Panel tak mal jeden pravý okraj len
        na papieri: používateľ vidí schody vstupov a pod nimi tlačidlo cez celú šírku.

        Dôvod výnimky platí len na desktope — tam by 100 % roztiahlo prvé pole cez celý panel.
        Na telefóne je každé pole vlastným riadkom, takže je to naopak: `auto` je jediné, čo tam
        rad rozbíja. Strop dátumu (14 rem) ide preč z rovnakého dôvodu.
    */
    .gate-toolbar .gate-field__control > fluent-text-field,
    .gate-toolbar .gate-field__control > fluent-search,
    .gate-toolbar .gate-field__control > fluent-select,
    .gate-toolbar .gate-field__control > fluent-combobox,
    .gate-toolbar .gate-field__control > .gate-select,
    .gate-toolbar .gate-field__control > .gate-input,
    .gate-toolbar .gate-field__control > .gate-date,
    .gate-toolbar .gate-field__control > .gate-time,
    .gate-toolbar .gate-field > .gate-input,
    .gate-toolbar .gate-field > .gate-select,
    .gate-toolbar .gate-field > .gate-date,
    .gate-toolbar .gate-field > .gate-time {
        width: 100%;
        max-width: 100%;
    }

    /*
        Číselné pole má vlastný strop 18 rem (aby „Rok 2026" nestál v poli na pol obrazovky) —
        v 343 px rade z neho vznikol 288 px vstup pod 343 px výberom, teda ten istý schod
        (`/plnenia`, `/suhrnne-spravy`, `/eks`, `/dodatky`, `/pnpz`). Na telefóne je strop
        zbytočný: šírku poľa už ohraničuje displej.
    */
    .gate-toolbar .gate-number__input {
        max-width: 100%;
    }
}

/*
    SKUPINA SÚVISIACICH POLÍ s vlastným popisom (hradené výdavky po rozpočtových rokoch).

    Rám je preč. Natívny `<fieldset>` kreslí obrys s vrubom okolo `<legend>` — a bol to JEDINÝ
    orámovaný prvok v celej sústave, kde sú karty aj panely ploché (kontrola 2026-08-19,
    položka #57). Na úzkom výreze bola navyše dvojriadková legenda širšia než vrub, takže
    zožrala horný obrys a ostala z neho otvorená škatuľa. Skupinu drží pokope jej NADPIS, tak
    ako blok obsahu drží nadpis sekcie — nie kresba okolo nej.

    Legenda je PODNADPIS, nie návestie sekcie (14 px/600, vetná sadzba). Kostým číslovanej
    sekcie (12 px/800, verzálky, rozpalta .1em) nosila dovtedy celý — ale bez čísla a bez 2 px
    linky, teda dve z troch znakov toho návestia jej chýbali a vyzerala ako sekcia, ktorá sa
    nedopočítala (kontrola 2026-08-19, položka #173). Skupina polí je podskupina VNÚTRI sekcie:
    o stupeň tichšia než sekcia nad ňou a o stupeň hlasnejšia než popis poľa pod ňou. Časť
    formulára, ktorá si zaslúži verzálky, si zaslúži aj číslo — a to je `GateFormSection`.

    `min-width: 0` je nutné — `<fieldset>` má predvolenú minimálnu šírku podľa obsahu, takže by
    široká tabuľka v ňom roztiahla stránku (WCAG 1.4.10 Reflow).
*/
.gate-fieldset {
    border: 0;
    border-radius: var(--gate-radius);
    padding: 0;
    margin: 0 0 1rem;
    min-width: 0;
}

.gate-fieldset > legend {
    padding-inline: 0;
    margin-bottom: var(--gate-space-2);
    font-family: var(--gate-font-heading);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
}

/*
    Číselné pole so značkou meny. Šírku určuje stĺpec formulára — bez tohto pravidla si natívny
    <input> berie predvolenú šírku ~20 znakov a na širokouhlej obrazovke pôsobí ako miniatúra
    vedľa susedného <select> (UAT nález „polia na písanie sú príliš maličké"). Sumy sú kratšie než
    veta, preto má pole strop; `min-width: 0` drží značku meny v riadku aj v úzkom stĺpci.
*/
.gate-number {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
}

/*
    ČÍSLO VO FORMULÁRI SA ZAROVNÁVA DOĽAVA. Zarovnanie doprava je idióm TABUĽKY: tam pod sebou
    stoja ďalšie čísla a spoločná pravá hrana je práve to, čo sa číta. V osamotenom poli robí
    opak — „Rok 2026" alebo „Počet rovnopisov 5" sa prilepí na pravý okraj 194 px poľa, teda
    pol riadku od svojho popisu, a rad polí pod sebou má hodnoty na piatich rôznych osiach
    (kontrola 2026-08-19, položka #63). `tabular-nums` ostáva — to je o tvare číslic, nie o osi.
*/
.gate-number__input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 18rem;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

/* V bunke tabuľky sa pravá hrana vracia — tam je spoločná os celého stĺpca. */
.gate-table td .gate-number__input {
    text-align: right;
}

.gate-number__suffix {
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-checkbox,
.gate-checkgroup {
    margin-bottom: 1rem;
}

/*
    Prepínač a jeho popis sú JEDEN riadok s dvoma stĺpcami — nie riadkový text, do ktorého je
    štvorček vsadený. Ako blok sa dlhý popis zalomil pod samotný štvorček („Čestné vyhlásenie
    o hospodárnosti… / záujmov a o zachovaní mlčanlivosti", príloha č. 13) a druhý riadok začínal
    o 17 px vľavo od prvého, teda pod ovládacím prvkom. Skupina prepínačov (`.gate-checkgroup__item`)
    aj panel filtrov (`.gate-toolbar .gate-checkbox`) to pritom robili správne — bola to odchýlka
    jediného prvku, nie zámer (vizuálny audit 2026-08-08).

    Mriežka je na to lepšia než flex: nápoveda a chyba sú ďalšie deti obalu a patria POD popis,
    nie vedľa neho — v mriežke ich stačí poslať do druhého stĺpca. Stĺpcová medzera (.4rem) je
    prevzatá zo skupiny prepínačov, aby obe zostavy vyzerali rovnako.

    ŠTVORČEK STOJÍ PRI PRVOM RIADKU POPISU, NIE V POLOVICI ODSEKU. Zvislé zarovnanie na stred
    má zmysel pri jednoriadkovom popise — a taký popis tu skoro nikdy nie je: „Čestné vyhlásenie
    o hospodárnosti pri vynakladaní verejných prostriedkov…" má na formulári tri riadky a na
    375 px displeji aj päť, takže sa štvorček odsunul k druhému či tretiemu riadku a prestal
    vyzerať ako ovládač TEJTO vety. Prepínač sa číta zľava doprava a zhora nadol: musí stáť tam,
    kde veta začína. Optický stred prvého riadku (16 px štvorček proti ~21 px riadku písma) drží
    odsadenie pri samotnom štvorčeku nižšie — je to tá istá .25rem, akú riadkovému formuláru dáva
    pravidlo v sekcii mriežky poľa, takže sa výrezy nerozídu.
*/
.gate-checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .25rem .4rem;
}

.gate-checkbox > .gate-field__help,
.gate-checkbox > .gate-field__errors,
.gate-checkbox > .gate-field__warnings {
    grid-column: 2;
}

.gate-checkgroup {
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    padding: .5rem .75rem;
}

/*
    Popis skupiny volieb. Od R36 to už NIE JE `<legend>` v `<fieldset>`, ale `<span>` v prvku
    `role="group"` (viď `Ui/GateCheckboxGroup.razor`): vykreslená legenda je v prehliadači prvok
    MIMO bežného toku, takže sa nedala poslať do ľavej bunky riadku formulára a celá skupina —
    popis aj všetky prepínače — ostávala v popisnom stĺpci, kým ovládací stĺpec zíval prázdny
    (položka #143 na `/plany/{id}/polozky/nova`). Miera je tá istá, akú mala legenda.
*/
.gate-checkgroup__legend {
    display: block;
    margin-bottom: var(--gate-space-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/*
    Voľba skupiny je tá istá dvojica ako samostatný prepínač, a preto aj to isté zarovnanie:
    štvorček pri PRVOM riadku popisu. Voľby z číselníka bývajú celé vety („prieskum trhu s priamym
    písomným oslovením min. 3 potenciálnych dodávateľov"), takže sa na strede odsunul štvorček do
    polovice odseku a v rade volieb pod sebou nebolo poznať, ktorý patrí ku ktorej.
*/
.gate-checkgroup__item {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
    padding: .1rem 0;
}

/*
    Prílohy poľa. Natívny `input[type=file]` si celý ovládací prvok kreslí prehliadač a jeho
    popisky sa NEDAJÚ preložiť — na slovenskej obrazovke stálo „Choose File / No file chosen"
    (nález vizuálneho auditu: prílohy k PNPZ, sekcia CRZ registra zmlúv). Vstup preto ostáva
    v strome (kvôli klávesnici, `id` a udalosti), ale schová sa technikou `.gate-visually-hidden`
    a kliká sa na jeho `<label>` v tvare tlačidla.
*/
.gate-attachments {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    /*
        Skrytý vstup je absolútne umiestnený — bez obsahovacieho bloku by sa viazal až na plochu
        stránky a odtiaľ by ju roztiahol do vodorovného posunu.
    */
    position: relative;
}

/*
    Zoznam priložených súborov je PLOCHA (predloha kreslí na tom mieste orámované pole), nie holý
    zoznam: bez nej sa mená súborov čítali ako ďalší odsek formulára a nebolo poznať, kde príloha
    začína a kde končí.
*/
.gate-attachments__list {
    list-style: none;
    margin: 0;
    padding: var(--gate-space-2) var(--gate-space-3);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--gate-surface);
    border: 1px solid var(--gate-divider);
}

/*
    PRÁZDNA PRÍLOHA JE VETA, NIE PRÁZDNA PLOCHA. Blok prílohy mal dve podoby prázdneho stavu
    v jednej sekcii: pole, do ktorého sa dá nahrávať, povedalo „Zatiaľ nie je priložený žiadny
    súbor." vedľa tlačidla (`.gate-attachments__chosen`), kým zamknuté pole tú istú vetu položilo
    do orámovanej plochy NAD miesto tlačidla. Dve rozvrhnutia pre ten istý stav sa v §14 prílohy
    č. 13 čítali ako dva rôzne druhy poľa — a prázdny orámovaný obdĺžnik navyše sľuboval obsah,
    ktorý v ňom nie je.

    Platí preto jedno rozvrhnutie: veta (a keď sa dá nahrávať, tlačidlo pred ňou). PLOCHA je
    vyhradená OBSAHU — orámovaný zoznam sa objaví, až keď je čo vypísať (`.gate-attachments__list`
    vyššie). Znenie sa nemení a blok nemizne: veta stojí na tom istom mieste, kde stála plocha.
*/
.gate-attachments__empty {
    margin: 0;
    font-size: 12px;
    color: var(--gate-muted);
}

.gate-attachments__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.gate-attachments__name {
    /* Názvy súborov nemajú medzery, na úzkej obrazovke by inak vytiekli z karty. */
    overflow-wrap: anywhere;
}

/*
    NÁZOV PRÍLOHY JE ODKAZ NA JEJ STIAHNUTIE (UAT N-0134) a nesie preto aj `.gate-download`:
    je to akcia, ktorá potrebuje kliknuteľnú plochu (WCAG 2.2 AA, 2.5.8). Tvar `inline-flex`
    z toho odkazu ale robí položku mriežky s predvoleným `min-width: auto`, takže by názov bez
    medzier v bunke riadku opakovateľnej sekcie tabuľku roztiahol namiesto toho, aby sa zalomil.
*/
a.gate-attachments__name {
    min-width: 0;
}

.gate-attachments__size {
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-attachments__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/*
    Popis v tvare vedľajšieho tlačidla (GateButton Secondary = Fluent Neutral): rovnaká výška
    32 px v border-boxe ako všetky ostatné ovládacie prvky, rovnaká výplň z Fluent tokenu.
    Obruba je zámerne VLASTNÁ (`--gate-input-border`), nie priehľadná ako u Fluent Neutral:
    výplň `--neutral-fill-rest` (#f5f5f5) má voči ploche karty (~#f3f3f3) kontrast pod 1,1 : 1,
    takže tlačidlo bez obruby na karte nevidno (WCAG 2.1 AA, 1.4.11 Non-text Contrast) — rovnaký
    dôvod, pre ktorý má vlastnú obrubu aj `.gate-input`.
*/
.gate-attachments__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 14.4px;
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    background: transparent;
    color: var(--gate-text);
    font-family: var(--gate-font-heading);
    font-size: 14px;
    font-weight: var(--gate-heading-weight);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Kresba na účiarí — bez `block` jej pod ňou ostane miesto na spodky písmen (ako v tlačidle). */
.gate-attachments__button svg {
    display: block;
    flex: 0 0 auto;
}

.gate-attachments__button:hover {
    background: color-mix(in srgb, var(--gate-text) 7%, transparent);
}

/*
    Zaostrenie kreslí popis, nie vstup: vstup je skrytý, takže vlastný rámček by nebolo vidieť.
    `:focus-visible` (nie `:focus`) — po kliknutí myšou sa rámček nekreslí, po klávese Tab áno.
*/
.gate-attachments__input:focus-visible + .gate-attachments__button {
    outline: 2px solid var(--gate-accent);
    outline-offset: 1px;
}

/*
    Uzamknutý vstup (prebieha ukladanie). Prehliadač kliknutie na popis neaktívneho vstupu
    zahodí sám — trieda len povie, že sa o tom vie.
*/
.gate-attachments__button--disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Náhrada za neprekladateľné „No file chosen" — meno vybraného súboru alebo stav prázdneho poľa. */
.gate-attachments__chosen {
    font-size: .8125rem;
    color: var(--gate-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gate-attachments__error {
    margin: 0;
    font-size: .8125rem;
    color: var(--gate-danger);
}

/*
    PRÍLOHA V BUNKE TABUĽKY JE KOMPAKTNÁ (N16). Mimo tabuľky je príloha blok: zoznam súborov,
    pod ním rad s tlačidlom a stav. V bunke opakovateľnej sekcie z toho vznikol najvyšší prvok
    riadku — na `/formular/dd6de8a8…` §02 mal riadok 146 px proti 54 px susedných tabuliek,
    lebo sa k výške tlačidla pripočítal ešte stav („Zatiaľ nie je priložený žiadny súbor.")
    na vlastnom riadku pod ním. V bunke stoja tlačidlo aj stav na JEDNEJ osi (rad sa zalomí
    až keď sa nezmestí) a plochy sú o stupeň nižšie; zvislý rytmus v tabuľke určujú riadky.
*/
.gate-table td .gate-attachments {
    gap: .25rem;
}

/* Odsadenie má len PLOCHA so zoznamom; prázdny stav je od kola 6 veta, ktorá ho nepotrebuje. */
.gate-table td .gate-attachments__list {
    padding: var(--gate-space-1) var(--gate-space-2);
}

.gate-table td .gate-attachments__chosen {
    font-size: .75rem;
}

.gate-money {
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

/* Popis peňažnej trojice — ten istý prechod z `<legend>` na `<span>` a z toho istého dôvodu. */
.gate-money__legend {
    display: block;
    margin-bottom: var(--gate-space-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.gate-money__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem 1rem;
}

/*
    NATÍVNY PREPÍNAČ. Značku aj rámček kreslí prehliadač; jediné, čo sa dá povedať bez toho, aby
    sa prvok prekresľoval vlastnou kresbou (a strácal správanie z operačného systému), je farba
    značky. `accent-color` je zároveň jediná cesta, ako do štvorčeka dostať farbu značky —
    predloha ju má akcentovú. Rozmer 16 px je hodnota z predlohy; dotykový cieľ nesie popis
    vedľa neho (celý riadok je klikateľný cez `<label for>`).
*/
.gate-checkbox input[type="checkbox"],
.gate-checkgroup__item > input[type="checkbox"] {
    accent-color: var(--gate-accent);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
}

/*
    OPTICKÝ STRED PRVÉHO RIADKU. Horné zarovnanie (pravidlá vyššie) posadí 16 px štvorček na
    hornú hranu ~21 px riadku písma, takže sa o ~3 px „vznáša" nad účiarou prvého slova. Odsadenie
    ho spustí na os toho riadku; hodnota je tá istá .25rem, akú štvorčeku v riadkovom rozvrhnutí
    formulára dáva pravidlo v sekcii mriežky poľa — jedna miera, aby sa výrezy nerozišli.

    Pravidlo musí stáť ZA spoločným `margin: 0` vyššie (rovnaká špecificita, rozhoduje poradie)
    a mieri len na priame deti obalu: štvorček zabalený v prázdnom popise (`.gate-checkbox__box`,
    R56) posúva jeho obal, inak by sa odsadenie spočítalo dvakrát.
*/
.gate-checkbox > input[type="checkbox"],
.gate-checkbox > .gate-checkbox__box,
.gate-checkgroup__item > input[type="checkbox"] {
    margin-top: .25rem;
}

/*
    PRÁZDNY POPIS AKO DOTYKOVÁ PLOCHA ŠTVORČEKA (R56, položka #164). Vzniká len pri prepínači
    bez viditeľného popisu (viď `Ui/GateCheckbox.razor`) a na širokej obrazovke sa správa ako
    samotný štvorček — plochu si berie až na dotykovej šírke, kde je 20 px cieľ neprijateľný.
*/
.gate-checkbox__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

/*
    PODPISOVÁ DOLOŽKA (Ui/GateSignatureBlock.razor) — projekcia rozhodnutých krokov konania.
    Nadpis je popis riadku formulára, nie ďalší nadpis obsahu: rovnaká miera aj hmotnosť ako
    popis poľa, inak by doložka na konci prílohy pôsobila ako nová kapitola.
*/
.gate-signatures__title {
    margin: 0 0 var(--gate-space-2);
    font-family: var(--gate-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
}

.gate-signatures__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gate-space-2);
}

/*
    Jeden podpis je rad údajov, nie odsek: funkcia, meno, dátum a poznámka stoja vedľa seba
    a zalomia sa až vtedy, keď na ne nie je miesto. Medzeru nesie `gap` — biele miesto v markupe
    Razor okolo `@if` zahadzuje (tá istá úvaha ako pri `.gate-inline`).
*/
.gate-signatures__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding-bottom: var(--gate-space-2);
    border-bottom: 1px solid var(--gate-divider);
    font-size: 13px;
}

.gate-signatures__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gate-signatures__role {
    font-weight: 600;
}

.gate-signatures__date,
.gate-signatures__note {
    color: var(--gate-muted);
    font-size: 12px;
}

/*
    STATICKÝ PRÁVNY TEXT (Ui/GateStaticText.razor). Nadpis je popis, znenie je obsah — mimo
    riadkového formulára stoja pod sebou, v ňom si ich pravidlo nižšie rozdelí do dvoch buniek.
*/
.gate-statictext {
    margin-bottom: 1rem;
}

.gate-statictext__title {
    margin: 0 0 var(--gate-space-1);
    font-family: var(--gate-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
}

.gate-statictext > p {
    margin: 0;
    max-width: 76ch;
    font-size: 13px;
    text-wrap: pretty;
}

/* ── tabuľky ─────────────────────────────────────────────────────────────── */

/*
    Obal každej tabuľky. Registre PGR majú 6 – 10 stĺpcov a na tablete ani na mobile sa nezmestia;
    bez tohto obalu vytečú z karty von, ale stránka sa NEROZŠÍRI (rám aplikácie je flex
    s `min-width: 0`) — pravé stĺpce sa teda nedajú prečítať ani k nim doposúvať. WCAG 2.1 AA,
    1.4.10 Reflow: obsah smie mať vlastný vodorovný posun, nesmie však zmiznúť.

    V značkovaní má obal `tabindex="0"`: posúvateľná oblasť musí byť ovládateľná aj klávesnicou
    (WCAG 2.1 AA, 2.1.1 — axe: `scrollable-region-focusable`). Bez neho sa k pravým stĺpcom
    dostane len myš alebo dotyk.
*/
.gate-table-wrap {
    overflow-x: auto;
    /*
        Obal musí byť aj obsahovacím blokom: popisy pre čítačku obrazovky (.gate-visually-hidden)
        sú absolútne umiestnené a bez toho by sa viazali až na .page — z posúvateľnej oblasti by
        vyskočili a roztiahli celú stránku do vodorovného posunu.
    */
    position: relative;
    /*
        NÁZNAK POSUNU. Obal sa síce posúval, ale nič to nehovorilo — bez tieňa, bez zosvetlenia
        okraja, bez trvalého posuvníka. Používateľ tak na registri subjektov nevidel odkaz
        „Detail" (jediná cesta do záznamu) a nemal ako zistiť, že za pravým okrajom niečo je
        (kontrola 2026-08-19, položka #3; nameraný pretok 214–1 429 px).

        Kresba je klasický trik s dvomi vrstvami pozadia rôzneho `background-attachment`:
        LINKA je pripnutá k RÁMU (`scroll`, teda stojí na hrane obalu), MASKA v farbe podkladu
        je pripnutá k OBSAHU (`local`, teda cestuje s ním). Kým je obsah na kraji, maska linku
        prekryje; len čo sa odsunie, linka sa odhalí. Nič sa nepočíta v JavaScripte a pri
        tabuľke, ktorá sa celá zmestí, nie je vidieť nič.

        Prečo linka a nie tieň: tieň má v tejto sústave jedinú vrstvu (modálny prekryv).
        2 px linka v tej istej farbe ako pravítka tabuľky hovorí to isté a patrí sem.
    */
    background:
        linear-gradient(var(--gate-ground, var(--gate-bg)), var(--gate-ground, var(--gate-bg))) 0 0 / 2px 100% no-repeat local,
        linear-gradient(var(--gate-ground, var(--gate-bg)), var(--gate-ground, var(--gate-bg))) 100% 0 / 2px 100% no-repeat local,
        linear-gradient(var(--gate-divider), var(--gate-divider)) 0 0 / 2px 100% no-repeat scroll,
        linear-gradient(var(--gate-divider), var(--gate-divider)) 100% 0 / 2px 100% no-repeat scroll;
    /* Tenký NATÍVNY posuvník — v hustom registri je široký pruh Windowsu ďalšia vodorovná stena. */
    scrollbar-width: thin;
}

/* Zaostrenie posúvateľnej oblasti musí byť vidieť (WCAG 2.1 AA, 2.4.7). */
.gate-table-wrap:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

.gate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* Číslice rovnakej šírky — sumy v stĺpci sa dajú porovnať pohľadom, nie čítaním. */
    font-variant-numeric: tabular-nums;
}

/*
    Opakovateľná sekcia formulára má v bunkách vstupné polia, ktoré sa pod istú šírku nezmestia.
    Bez tohto minima ostane rám tabuľky pri 100 % a bunky z neho vytečú von — obal
    .gate-table-wrap potom nemá čo posúvať a na mobile sa roztiahne celá stránka. S ním sa tabuľka
    roztiahne na svoju prirodzenú šírku a posúva sa len vo vlastnom obale (WCAG 2.1 AA, 1.4.10).

    Minimum je `min-content`, nie `max-content`: pri `max-content` sa každý stĺpec nafúkne na svoj
    NAJŠIRŠÍ nezalomený obsah — teda na celý nadpis stĺpca v jednom riadku („Ide o čiastkovú
    objednávku z rámcovej dohody" = 483 px) a pri výbere z číselníka na najdlhšiu položku
    („Poľnohospodárske, farmárske, rybárske, lesnícke a súvisiace produkty" = 670 px). Príloha
    č. 14 tak žiadala 4 169 px na šestnásť stĺpcov, v ktorých sa reálne píšu týždne, sumy a dátumy.
    Pri `min-content` sa nadpis zalomí a šírku určujú minimá polí podľa typu údaja (nižšie) —
    údaje sa neskracujú a žiadny stĺpec nemizne.
*/
.gate-repeat .gate-table {
    min-width: min-content;
}

.gate-table caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: .35rem;
}

.gate-table th,
.gate-table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--gate-divider);
    vertical-align: top;
}

/*
    ÚDAJ V BUNKE STOJÍ NA STREDNEJ OSI RIADKU. Horné zarovnanie je správne pre bunku s poľom
    (tam sedí popis chyby pod vstupom), ale v registri sa riadok skladá z hodnôt rôznej dĺžky —
    trojriadkový predmet zákazky vedľa jednoriadkovej sumy — a pri hornom zarovnaní visel odkaz
    „Detail" o dva riadky vyššie než text, ku ktorému patrí (Fáza A, potvrdené sweepom
    2026-08-18). Stredná os je zároveň predvoľba CSS pre bunku tabuľky, ktorú predloha nemení.

    Hlavičky si horné/spodné zarovnanie ponechávajú (pravidlá nižšie): popis stĺpca sedí na
    údajoch, nie v strede prázdna nad nimi. Opakovateľná sekcia formulára ostáva hore tiež —
    tam sú v bunkách VSTUPY, ktorých chyba sa vypisuje pod nimi, a stred by rad polí rozhodil.
*/
.gate-table td {
    vertical-align: middle;
}

.gate-repeat .gate-table td {
    vertical-align: top;
}

/*
    BUNKA ÚKONU JE VÝNIMKA AJ TU (dávka G). Dôvod horného zarovnania platí pre VSTUPY — chyba
    sa vypisuje pod nimi a rad polí musí začínať na jednej osi. V bunke úkonu žiadny vstup nie
    je, takže tlačidlo „Odstrániť" viselo ~8 px nad stredom riadku a pri riadku s dvojriadkovým
    poľom ešte vyššie. Na strednej osi stojí tam, kde v registri (pravidlo o kus vyššie).
*/
.gate-repeat .gate-table td.gate-table__actions {
    vertical-align: middle;
}

/*
    NA TELEFÓNE SA ZAROVNANIE VRACIA HORE. Register sa tam posúva vodorovne, takže o výške riadku
    rozhoduje stĺpec, ktorý práve NIE JE vidieť — päťriadkový dôvod vpravo spraví zo stĺpca „Číslo
    zmluvy" vľavo prázdny pás s hodnotou v jeho strede a prvý záznam začína 150 px pod hlavičkou
    (odmerané na `/suhrnne-spravy` pri sweepe 2026-08-18). Stredová os má zmysel tam, kde je celý
    riadok v jednom pohľade; kde nie je, je čitateľnejší spoločný horný okraj.
*/
@media (max-width: 640.98px) {
    .gate-table td {
        vertical-align: top;
    }
}

/*
    OVLÁDACÍ PRVOK V BUNKE JE KOMPAKTNÝ. Tlačidlo aj odkaz na stiahnutie majú mimo tabuľky
    36 px — je to výška radu ovládacích prvkov. V bunke z toho vznikne 53 px vysoký riadok
    registra proti 37 px v predlohe, takže tabuľka s akciou v poslednom stĺpci je o tretinu
    redšia než tá istá tabuľka bez nej (Fáza A). Kompaktných 28 px drží dotykový cieľ nad
    hranicou 24 × 24 px (WCAG 2.2 AA, 2.5.8) a dátový riadok na ~40 px.

    Netýka sa to buniek FORMULÁROVEJ tabuľky (`.gate-cell`): tam nie sú akcie, ale vstupy,
    a tie musia držať spoločnú výšku radu — inak sa opakovaná sekcia rozíde s formulárom
    nad sebou (nález testovania 2026-08-07, 42 vs. 32 px).

    Výšku musia dostať OBAJA. V tieňovom strome ju diktuje `height` (počíta sa
    z `--base-height-multiplier`), nie `min-height` — samotné minimum ju nezmenší. A hostiteľ si
    výšku berie od svojho obsahu, takže bez pravidla na ňom by ostal 36 px vysoký a riadok
    registra by sa nezmenil (odmerané: 53 px proti 37 px v predlohe).
*/
.gate-table td:not(.gate-cell) fluent-button.gate-button {
    height: 28px;
    min-height: 28px;
    /* Hostiteľ je riadkový box — na účiarí by pod ním ostalo miesto na spodky písmen (4 px). */
    vertical-align: middle;
}

.gate-table td:not(.gate-cell) fluent-button.gate-button::part(control) {
    height: 28px;
    min-height: 28px;
    padding-block: 3px;
}

.gate-table td .gate-download {
    min-height: 28px;
}

/*
    ODKAZ NA STIAHNUTIE V RIADKU PREHĽADU (`.gate-detail dd`) má na myši kompaktnú mieru ako
    v bunke registra. S 36 px a centrovaním stál o pol riadku pod svojou menovkou a riadok bol
    vyšší než susedia (riadok „Verzia“ v kole pripomienkovania, 6. 10. 2026). Plocha ostáva nad
    hranicou 24 × 24 px (WCAG 2.2 AA, 2.5.8). Na telefóne pravidlo neplatí — tam drží odkaz
    dotykovú mieru zo spoločného pravidla.
*/
@media (min-width: 641px) {
    .gate-detail dd .gate-download {
        min-height: 24px;
        padding-block: 0;
    }
}

/*
    NA DOTYKOVEJ OBRAZOVKE SA VÝŠKA VRACIA NA PLNÝCH 36 px. Kompaktných 28 px je nad hranicou
    veľkosti cieľa (WCAG 2.2 AA, 2.5.8 = 24 × 24 px), ale prstom sa do nich mieri ťažko; register
    sa na telefóne aj tak posúva vodorovne, takže o pár pixelov výšky riadku tam nejde.
    Špecificita je vyššia než spoločný dotykový základ tlačidiel (sekcia tlačidiel vyššie), takže
    bunka registra 44 px nedostane a riadok sa nenafúkne.
*/
@media (max-width: 640.98px) {
    .gate-table td:not(.gate-cell) fluent-button.gate-button,
    .gate-table td:not(.gate-cell) fluent-button.gate-button::part(control) {
        height: 2.75rem;
        min-height: 2.75rem;
    }

    .gate-table td:not(.gate-cell) fluent-button.gate-button::part(control) {
        padding-block: 8px;
    }

    .gate-table td .gate-download {
        min-height: 2.75rem;
    }

    /*
        ÚKON V PRIPNUTEJ BUNKE SI SMIE VYPÝTAŤ JEDEN RIADOK (kolo 6, dávka H). Spoločné dotykové
        pravidlo tlačidiel (`fluent-button.gate-button::part(control) { white-space: normal }`)
        vzniklo preto, aby dlhý popis úkonu NEROZTIAHOL STRÁNKU pri 320 px — a to je správne
        všade, kde tlačidlo stojí v toku stránky. V pripnutej bunke registra ale žiadna taká
        hrozba nie je: obal `.gate-table-wrap` sa posúva vodorovne sám a šírku pripnutého stĺpca
        aj tak určuje najširší úkon. Zalomenie tam preto len rozseká popis („Použiť / toto /
        znenie" na troch riadkoch na `/zmluvna-vetva/zmluvy/{id}/anonymizacia`).

        Je to VÝSLOVNÁ voľba registra, nie plošné pravidlo: bunka si ju pýta triedou
        `gate-nowrap`. Úkon dlhší než výrez by pripnutý prekryl pol obrazovky, takže o tom
        rozhoduje obrazovka, ktorá svoje popisy pozná. Samotná bunka ostáva `white-space: normal`
        (pravidlo stohovania je špecifickejšie), takže úkony pod sebou stoja ďalej.
    */
    .gate-table td.gate-table__actions.gate-nowrap fluent-button.gate-button::part(control) {
        white-space: nowrap;
    }
}

/*
    Široký register, ktorý má vecne daný počet stĺpcov (príloha č. 10 Plánu VO ich má osemnásť).
    Vodorovný posun ostáva pre úzke výrezy, ale na bežnej pracovnej ploche (1440 px) sa tabuľka
    musí zmestiť celá: odseknutý posledný stĺpec čítal používateľ ako chybu obrazovky, nie ako
    posúvateľnú oblasť — o možnosti posunúť sa nevedel (nález vizuálneho auditu).

    Šetrí sa tam, kde to nestojí zrozumiteľnosť: vodorovné odsadenie buniek (18 stĺpcov × 2 strany
    je pri .6rem takmer 350 px samotnej medzery) a veľkosť písma o stupeň nižšie. Údaje sa
    neskracujú a žiadny stĺpec nemizne — tabuľka je štruktúra prílohy, nie výber z nej.
*/
.gate-table--dense th,
.gate-table--dense td {
    padding: .4rem .3rem;
}

.gate-table--dense {
    font-size: .75rem;
}

.gate-table--dense thead th {
    font-size: .6875rem;
}

/* Prvý a posledný stĺpec držia odsadenie od okraja karty — inak text lipne na ráme. */
.gate-table--dense th:first-child,
.gate-table--dense td:first-child {
    padding-inline-start: 0;
}

.gate-table--dense th:last-child,
.gate-table--dense td:last-child {
    padding-inline-end: 0;
}

/*
    Hlavička stĺpca je popis, nie údaj — nesie ju veľkosť a váha písma, nie plocha. Verzálky
    s rozpaltou sú tu vedomá výnimka z konvencie (predloha): popis stĺpca je značka nad údajom,
    číta sa v jednom pohľade a čítačka obrazovky ho ohlási ako hlavičku bunky, nie po písmenách.
    Dvojitá linka pod hlavičkou oddeľuje popisy od údajov silnejšie než riadky medzi sebou.
*/
.gate-table thead th {
    padding-block: 8px;
    border-bottom: 2px solid var(--gate-divider);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gate-muted);
    vertical-align: bottom;
}

/*
    Nápoveda stĺpca pod jeho hlavičkou. Je to vysvetlenie, nie popis — preto slabšia váha písma
    a normálne zalomenie; stĺpec sa podľa nej NEROZŤAHUJE (šírku určujú minimá polí v bunkách).
*/
.gate-table__col-help {
    display: block;
    margin-top: .15rem;
    font-weight: 400;
    font-size: .6875rem;
    line-height: 1.3;
    text-wrap: pretty;
    /*
        Nápoveda je VETA — verzálky a rozpalta z hlavičky stĺpca sa na ňu nesmú preniesť
        (v hlavičke sú značkou nad údajom, tu by z vysvetlenia spravili nečitateľný pás).
    */
    text-transform: none;
    letter-spacing: normal;
}

/*
    HLAVIČKA S VYSVETLENÍM SI PÝTA ŠÍRKU VETY (N16 / dávka G). Vysvetlenie stĺpca je veta, ale
    šírku bunky určuje najužší údaj v stĺpci — v 112 px stĺpci sa z „Uvedie sa názov totožný
    s názvom v Pláne VO." stalo osem riadkov a hlavička devätnásťstĺpcovej prílohy vyrástla na
    145 px, teda pás, ktorý pri vodorovnom posune stojí nad tabuľkou stále. Tabuľka sa v obale
    aj tak posúva, takže ŠÍRKA je lacná a VÝŠKA drahá: hlavička s vysvetlením preto dostáva
    spodnú hranicu šírky a veta sa zalomí na dva-tri riadky ako pri ostatných stĺpcoch.
*/
.gate-table th:has(> .gate-table__col-help) {
    min-width: 12rem;
}

/*
    Vo formulárovej tabuľke sa hlavičky zarovnávajú HORE. Register má hlavičky jednoriadkové
    a dole vyzerajú lepšie (sedia na údajoch), tu ich však nápoveda stĺpca rozťahuje na niekoľko
    riadkov — najvyššia hlavička potom určuje výšku celého riadku a všetky ostatné popisy odpláva
    dolu, takže medzi nadpisom sekcie a prvým popisom stĺpca zíva prázdny pás.
*/
.gate-repeat .gate-table thead th {
    vertical-align: top;
}

/*
    A HLAVIČKA OPAKOVACEJ TABUĽKY SA NELÁME UPROSTRED SLOVA (položka #271). Vo formulárovej
    tabuľke prináša šírkovú podlahu len BUNKA (`.gate-table td.gate-cell > *` má `min-width: 0`
    a jednotlivé druhy polí si minimum vracajú samy) — hlavička žiadnu nemá. Len čo si teda jeden
    stĺpec vypýta veľa, rozvrhnutie stlačí ostatné pod šírku ich vlastného najdlhšieho slova a
    verzálkový popis sa oreže vnútri neho: §09 vykreslilo „ODPOVE / ODOSLA / OSLOVEN / SUBJEKT",
    §02 „STRUČNÝ OPIS PREDME". `min-content` je presne to potrebné minimum — najdlhšie slovo
    popisu; čokoľvek širšie rieši vodorovný posun obalu (WCAG 2.1 AA, 1.4.10).

    `:not(:has(…))` je nutné: bez neho by toto pravidlo (0,2,2) prebilo špecifickejšie znejúce
    `.gate-table th:has(> .gate-table__col-help)` (0,2,1) a ticho zahodilo 12 rem podlahu, ktorú
    tam N16 dala pre hlavičku s vysvetlením.
*/
.gate-repeat .gate-table thead th:not(:has(> .gate-table__col-help)) {
    min-width: min-content;
}

/*
    Riadková hlavička a súčtový riadok sú naopak údaje — len zvýraznené. Súčet oddeľuje od
    riadkov nad ním dvojitá linka (predloha): je to iný druh čísla, nie ďalší záznam.
*/
.gate-table tbody th,
.gate-table tfoot th,
.gate-table tfoot td {
    font-weight: 600;
}

.gate-table tfoot th,
.gate-table tfoot td {
    border-top: 2px solid var(--gate-divider);
}

.gate-table tbody tr:hover {
    background: color-mix(in srgb, var(--gate-text) 4%, transparent);
}

/* Číselný stĺpec. Zarovnanie musí prebiť `text-align: left` z pravidla pre bunky vyššie. */
.gate-num,
.gate-table th.gate-num,
.gate-table td.gate-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
    POSLEDNÁ ČÍSLICA SA NESMIE OPRIEŤ O HRANU OBALU (položka #229). Peňažný stĺpec býva posledný
    a je zarovnaný vpravo, takže mu na odstup od hrany ostávalo 8 px odsadenia bunky — a keď
    tabuľka pretiekla obal čo len o pixel, hrana obalu rozpolila poslednú číslicu súčtu
    (odmerané na `/plany/{id}`: písmo končí x=1239, hrana 1238–1239). Číslo je jediné, čo na
    peňažnej tabuľke musí lícovať, preto má posledný stĺpec o polovicu širší pravý okraj.
*/
.gate-table th:last-child.gate-num,
.gate-table td:last-child.gate-num {
    padding-inline-end: 12px;
}

/*
    HLAVIČKA ČÍSELNÉHO STĹPCA SA ZALAMUJE (položka #231, H11). Nedeliteľnosť patrí ČÍSLU —
    „59 830,00 EUR" rozlomené na dva riadky vyzerá ako dve sumy —, ale nie POPISU stĺpca:
    „Rozpočtový rok 2027 (v EUR)" si ako jeden riadok vypýtal 295 px a matica harmonogramu
    prerástla obal, takže tretia hlavička sa orezala uprostred slova (x=1255) a štvrtý stĺpec
    SPOLU zmizol z pohľadu. Zarovnanie vpravo (N9) ostáva — mení sa len to, či popis smie
    použiť dva riadky. Od kola 6 platí to isté pre `.gate-nowrap` (viď nižšie), takže popis, ktorý
    je sám osebe nedeliteľný, si jeden riadok pýta výslovne triedou `.gate-head--nowrap`.
*/
.gate-table th.gate-num {
    white-space: normal;
}

/*
    Stĺpec, ktorého hodnota je jeden nedeliteľný údaj — označenie predpisu („PGR-10/2025"),
    dátum, evidenčné číslo. Lomka a spojovník sú pre prehliadač miesta na zalomenie, takže sa
    taký údaj v úzkom stĺpci rozpadne na dva riadky a vyzerá ako dva údaje. Tabuľka má vlastný
    vodorovný posun (`.gate-table-wrap`), takže širší stĺpec stránku neroztiahne.
*/
.gate-nowrap,
.gate-table th.gate-nowrap,
.gate-table td.gate-nowrap {
    white-space: nowrap;
}

/*
    HLAVIČKA TAKÉHO STĹPCA SA NAOPAK ZALAMUJE (položky #255, #263 — to isté, čo #231 vyriešil pre
    číselné stĺpce). Nedeliteľnosť patrí HODNOTE, nie POPISU: „SKARTÁCIA NAJSKÔR" v jednom riadku
    si vypýtalo 149 px na stĺpec, v ktorom stojí desaťznakový dátum (94 px), a dvojica takých
    hlavičiek posunula skartačný plán o 111 px za obal — pripnutá bunka úkonov potom zasiahla
    do stĺpca s dátumom a „01.05.2024" sa vykreslilo ako „01.05.202". Dátum, ktorý stratí poslednú
    číslicu, sa nečíta ako odrezaný, ale ako INÝ, hodnoverný dátum, a to na registri, ktorého
    jediným zmyslom je vedieť, kedy sa spis smie zničiť.

    Šírka je v tabuľke lacná (obal sa posúva), výška drahá (hlavička stojí nad údajmi stále) —
    ale tu platí opak: zalomená hlavička stojí dva riadky a UŠETRÍ desiatky pixelov šírky, ktoré
    rozhodujú o tom, či sa register na pracovnú plochu zmestí celý.
*/
.gate-table th.gate-nowrap {
    white-space: normal;
}

/*
    Popis, ktorý je sám osebe nedeliteľný, si jeden riadok vypýta výslovne. Jediný taký v celej
    aplikácii je „P. Č." (položka #259): štyri znaky nad jednocifernou poradovkou pridali
    zalomením ~20 px výšky hlavičky za nič.
*/
.gate-table th.gate-head--nowrap {
    white-space: nowrap;
}

/*
    STAVOVÝ STĹPEC REGISTRA. Štítok je nedeliteľná pilulka a stav je to, kvôli čomu sa do registra
    pozerá; odrezaný na „Vyhlás…", „Vyhodn…", „Historic…" nehovorí nič (položka #263, odmerané na
    `/zakazky`: z hlavičky STAV bolo pri 1280 px vidieť 45 px). Trieda robí dve veci naraz:
    hodnotu drží na jednom riadku a stĺpcu dáva spodnú hranicu šírky, takže sa nedá stlačiť pod
    mieru štítku ani vtedy, keď si susedné stĺpce vypýtajú viac.

    Je to zároveň ZNAČKA pre `wwwroot/js/gate-table.js`: hranica pripnutej bunky ani okraj obalu
    nesmú takýto stĺpec preseknúť v pokojovom stave — buď je celý vidieť, alebo je celý za hranou.

    Spodná hranica šírky tu vedome NIE JE. Štítok je nedeliteľná pilulka, takže minimum stĺpca sa
    o jeho šírku opiera samo; pevná podlaha by k tomu pridala prázdno práve tam, kde o pár pixelov
    rozhoduje, či sa register na pracovnú plochu zmestí celý (odmerané: 7 rem posunulo `/audit`
    o 21 px za obal, hoci stav mal 91 px a čítal sa celý).
*/
.gate-table th.gate-cell--state,
.gate-table td.gate-cell--state {
    white-space: nowrap;
}

/*
    Opak: HODNOTA BEZ MIESTA NA ZALOMENIE — prihlasovacie meno („referent.vo@socpoist.internal"),
    kód, cesta. Prehliadač ju berie ako jedno slovo, takže si stĺpec vypýta jeho celú šírku; dva
    také stĺpce vedľa seba natiahli tabuľku nad šírku karty a posledný stĺpec ostal odseknutý za
    jej okrajom (nález na „Potvrdenie finančného krytia"). Zalomenie v strede slova je pri týchto
    údajoch prijateľné — skrátenie s výpustkou nie, sú to identifikátory, ktoré sa čítajú celé.

    To isté v MRIEŽKE DETAILU (`.gate-detail dd`): prihlasovacie meno v poverení na
    `/admin/delegacie` pretieklo pri 320 px celú stránku (položky #108/#109). Tabuľka má vlastný
    vodorovný posun obalu, mriežka detailu nie — tam je zalomenie jediná cesta von.
*/
.gate-table td.gate-cell--break,
.gate-detail dd.gate-cell--break {
    overflow-wrap: anywhere;
}

/*
    STĹPEC, V KTOROM STOJÍ VETA. Tabuľky písané ručne (kroky konania, časová os spisu) nemajú
    triedy `.gate-cell--*` z dynamického rendereru, takže sa ich stĺpce na úzkom výreze zmestili
    do najdlhšieho SLOVA: „Požiadavku vypracoval a za opis predmetu zákazky zodpovedá vecný
    gestor" sa na 375 px rozpadla na sedem riadkov a riadok tabuľky narástol na 256 px (odmerané).
    Spodná hranica stĺpca to zastaví; širší obsah si miesto vypýta ďalej sám a zvyšok rieši
    vodorovný posun obalu (WCAG 2.1 AA, 1.4.10 Reflow) — hodnota sa neskracuje a stĺpec nemizne.

    HRANICA JE INÁ NA TELEFÓNE A INÁ NA PRACOVNEJ PLOCHE (kolo 6, položky #241/#263). Pod 641 px
    sa register posúva vždy, takže 13 rem je čistý zisk: zastaví rozpad vety na slovo pod slovom.
    Nad 641 px je 13 rem naopak DÔVOD pretečenia — dva vetné stĺpce po 208 px poslali `/zakazky`,
    `/skartacny-plan` aj `/audit` za obal, hoci by sa boli zmestili, a pripnutá bunka úkonov potom
    prekryla stavy a dátumy. Tam stačí 9 rem: tabuľka má `width: 100 %`, takže voľné miesto sa
    rozdeľuje podľa rozdielu min/max obsahu a vetný stĺpec z neho dostane najviac aj bez podlahy —
    podlaha len bráni tomu, aby ho susedia stlačili pod čitateľnú mieru.
*/
.gate-table th.gate-cell--sentence,
.gate-table td.gate-cell--sentence {
    min-width: 13rem;
}

@media (min-width: 641px) {
    .gate-table th.gate-cell--sentence,
    .gate-table td.gate-cell--sentence {
        min-width: 9rem;
    }
}

/*
    ODTLAČOK SÚBORU (`Ui/GateHash.razor`) — NA POŽIADANIE, CELÝ LEN TAM, KDE HO NIEKTO PREPISUJE.

    R2-N1 (22. 9. 2026): odtlačok prilepený na koniec vety o veľkosti a čase odoslania („…
    10:38SHA-256 603f1ffc…") testovanie prečítalo ako poruchu vykreslenia — dostal vlastný riadok
    s menovkou a skrátený tvar. R3-N1 (re-test 23. 9. 2026): ani pomenovaný skrátený kód vecný
    používateľ nečíta, vidí v ňom len šum („stále sa tam tie kódy zobrazujú"). Na pracovných
    obrazovkách preto stojí LEN prepínač; menovka, celá hodnota a veta o nej sa kreslia až po jeho
    stlačení. Celý odtlačok bez prepínača ostáva v stĺpci prehľadu odovzdaní, odkiaľ ho prijímateľ
    balíka prepisuje do `sha256sum`.

    Od 23. 9. 2026 (rozhodnutie Juraja) je prepínač SIVÁ IKONA ODTLAČKU na konci riadku, ku ktorému
    patrí — nie akcentový text „Zobraziť odtlačok SHA-256" na vlastnom riadku pod ním: pri štyroch
    súboroch to boli štyri akcentové riadky vedľajšieho úkonu, ktorý nikto neklikne. Koreň je preto
    `display: contents` (`.gate-hash--on-demand`): ikona je posledným susedom radu volajúceho
    (`.gate-inline` pri súbore, veta hlášky pri definícii) a otvorený obsah si v ohybnom rade vezme
    celý riadok pod ním. Dedené vlastnosti (miera `.gate-help` — 13 px, tlmená farba) z koreňa
    prechádzajú na deti aj bez jeho vlastného boxu. Blok s okrajom zhora ostal len režimu celej
    hodnoty v stĺpci registra.
*/
.gate-hash {
    min-width: 0;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-hash--on-demand {
    display: contents;
}

/*
    Prepínač — tichá ikona. Kresba je tá istá ako `.gate-rowtoggle` (pole 28 px, na telefóne 44 px),
    ale v TLMENEJ farbe, nie v akcente: je to vedľajší úkon pri každom súbore a akcent patrí úkonom
    a odkazom (odkaz na stiahnutie stojí hneď vedľa). Pri prejdení myšou a v otvorenom stave ikona
    stmavne na farbu textu a dostane jemné neutrálne podfarbenie; obrys zamerania je akcentový ako
    všade. Natívne `<button>` je zámerné — stav nesie `aria-expanded`, ktorý `GateButton` neprepúšťa.

    Pole 28 px (WCAG 2.2 AA, 2.5.8 žiada aspoň 24 px) sa zmestí do riadku súboru, ktorý má kvôli
    odkazu na stiahnutie 36 px, takže riadok nenarastie; kresba 16 px v ňom stojí na stred.
*/
.gate-hash__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gate-muted);
    vertical-align: middle;
    cursor: pointer;
}

.gate-hash__toggle:hover,
.gate-hash__toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--gate-text) 8%, transparent);
    color: var(--gate-text);
}

.gate-hash__toggle:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

.gate-hash__glyph {
    flex: 0 0 auto;
}

@media (max-width: 640.98px) {
    /* Dotykový cieľ má na telefóne jednu podlahu pre celú aplikáciu (WCAG 2.2 AA, 2.5.8). */
    .gate-hash__toggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/*
    Otvorený obsah: menovka a hodnota v zalamovacom rade, veta o odtlačku pod nimi. Na riadku
    súboru je ohybnou položkou radu `.gate-inline` a `flex-basis: 100%` ho postaví na vlastný riadok
    cez celú šírku; v bežnom texte (hláška pri definícii) je blok, takže riadok začne sám. Na širokej
    obrazovke stojí hodnota vedľa menovky; keď sa vedľa nej celá nezmestí, zalomí sa rad a hodnota
    dostane vlastný riadok (jej šírku ohraničuje `max-width`), až potom sa láme ona.
*/
.gate-hash__detail {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    min-width: 0;
}

.gate-hash__label {
    flex: 0 0 auto;
}

/*
    Hodnota. Zalomiť sa musí aj v strede „slova" (odtlačok nemá medzery ani spojovníky, bežné
    zalomenie nemá kde zabrať) — na to je `overflow-wrap: anywhere`, nie `word-break: break-all`:
    prvé zalomí len vtedy, keď sa riadok inak nezmestí, druhé láme vždy a bez ohľadu na miesto,
    takže trhalo aj údaje, ktoré sa pohodlne zmestili (kontrola 2026-08-19, položka #20 —
    `ZPP-2026-0001` na tri riadky vedľa 35 px nevyužitej šírky).

    `min-width: 0` a `max-width: 100%` sú tu preto, že hodnota je 64 znakov bez jediného miesta
    na zalomenie: bez nich by automatické minimum ohybnej položky držalo celú dĺžku a riadok by
    vytlačil obsah karty za pravý okraj (WCAG 2.1 AA, 1.4.10 Reflow) — na 375 px je to vodorovný
    posun celej stránky. `display: block` platí pre stĺpec registra, kde hodnota ohybnou položkou
    nie je a pevnú šírku (nižšie) by inak riadkový prvok ignoroval.
*/
.gate-hash__value {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    line-height: 1.35;
    overflow-wrap: anywhere;
    color: var(--gate-text);
}

/* Veta o odtlačku stojí pod hodnotou cez celú šírku — nie ako ďalší sused v rade. */
.gate-hash__help {
    flex-basis: 100%;
}

/*
    V BUNKE REGISTRA MÁ HODNOTA PEVNÚ ŠÍRKU — zhruba dva riadky po 32 znakoch. Prehľad odovzdaní
    ukazuje odtlačok celý (`GateHashMode.WholeInColumn` — prijímateľ balíka ho odtiaľ prepisuje do
    `sha256sum`), a 64 znakov v jednom riadku si vzalo pol tabuľky, ostatné stĺpce vytlačilo do
    vodorovného posunu obalu a stĺpec s časom potom vyzeral odseknutý (UAT N-0127). Tabuľka má
    vlastný vodorovný posun (`.gate-table-wrap`), takže pevná šírka stránku neroztiahne.
*/
.gate-table .gate-hash__value {
    width: 16rem;
}

/*
    Poznámka pod riadkom registra — celá veta, ktorá sa do stĺpca nezmestí (napríklad dôvod, prečo
    k behu nie je protokol). V úzkej bunke sa slovenská veta zalomí takmer slovo pod slovo a riadok
    narastie cez celú obrazovku (UAT N-0127), preto stojí pod ním cez `colspan`.

    Aby sa nečítala ako samostatný záznam, drží sa riadku nad sebou: ten nemá spodnú čiaru, poznámka
    nemá vrchnú medzeru a zvýraznenie pri prejdení myšou platí pre obe naraz.
*/
.gate-table tbody tr.gate-row--with-note > td {
    border-bottom: 0;
}

.gate-table tbody tr.gate-row--note > td {
    padding-top: 0;
}

/* Prvá veta poznámky nadväzuje priamo na riadok nad ňou, takže si odstup zhora neberie. */
.gate-table tbody tr.gate-row--note > td > .gate-help:first-child {
    margin-top: 0;
}

.gate-table tbody tr.gate-row--note:hover {
    background: transparent;
}

.gate-table tbody tr.gate-row--with-note:hover + tr.gate-row--note {
    background: color-mix(in srgb, var(--gate-text) 4%, transparent);
}

/*
    PREPÍNAČ PODROBNOSTÍ RIADKU (`button.gate-rowtoggle` v stĺpci `.gate-table__toggle`).

    Register, ktorý má viac údajov než stĺpcov (príloha č. 10 má osemnásť), ich neschováva za
    odchod z obrazovky, ale otvorí pod riadkom — obsah drží idióm `.gate-row--note`, ktorý tu už
    je, ovládač je tento prepínač. Stojí PRVÝ: je to zvislá os, po ktorej oko listuje, a v poslednom
    stĺpci by súťažil s úkonom riadku (a v pretečenej tabuľke by ho prekryl pripnutý stĺpec úkonov).

    Stĺpec je najužší, aký sa dá: `width: 1%` v tabuľke s `table-layout: auto` znamená „ber si len
    toľko, koľko potrebuje obsah". Bunka nesmie rásť s riadkom — prepínač patrí k prvému riadku
    hodnoty, nie do stredu zalomeného predmetu zákazky.

    Kresba je TICHÉ TLAČIDLO (akcentový text, podfarbenie až pod kurzorom) — tá istá miera ako
    `fluent-button.gate-button[appearance="lightweight"]`. Natívne `<button>` je tu zámerné:
    stav rozbalenia nesie `aria-expanded`, ktorý wrapper `GateButton` neprepúšťa, a rovnaký dôvod
    má vlastné tlačidlo v sprievodcovi formulárom aj v palete Ctrl+K.

    Značka je OTOČENÁ ŠÍPKA, nie vymenený znak — to isté, čo robí `<details class="gate-disclosure">`;
    žiadny znak vysadený ako text a žiadna ikonová knižnica.
*/
.gate-table th.gate-table__toggle,
.gate-table td.gate-table__toggle {
    width: 1%;
    padding-inline-end: 0;
    vertical-align: top;
    white-space: nowrap;
}

.gate-rowtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gate-accent-text);
    cursor: pointer;
}

.gate-rowtoggle:hover {
    background: color-mix(in srgb, var(--gate-accent) 10%, transparent);
}

.gate-rowtoggle:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

.gate-rowtoggle__glyph {
    flex: 0 0 auto;
}

.gate-rowtoggle[aria-expanded="true"] .gate-rowtoggle__glyph {
    transform: rotate(180deg);
}

/*
    Prehľad v rozbalenom riadku si vrchnú linku neberie — riadok nad ním ju už má (`.gate-row--note`
    nadväzuje priamo naň) a dve linky nad sebou by z podrobností spravili samostatný záznam.
*/
.gate-table tbody tr.gate-row--note > td > .gate-detail {
    border-top: 0;
}

@media (max-width: 640.98px) {
    /* Dotykový cieľ má na telefóne jednu podlahu pre celú aplikáciu (WCAG 2.2 AA, 2.5.8). */
    .gate-rowtoggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/*
    ZVÝRAZNENÝ RIADOK REGISTRA UŽ NEMÁ PODFARBENIE. Končiaca zmluva mala celý riadok v
    `--gate-highlight` cez celú šírku tabuľky — hoci štítok „Končiaca" v tom istom riadku tú
    informáciu už nesie (kontrola 2026-08-19, položka #77). Plošný farebný pás je chróma, a
    farba v tejto sústave patrí ÚDAJU, nie ploche pod ním; v registri s piatimi stavmi by sa
    z toho stala mapa pruhov, v ktorej sa nedá nájsť riadok podľa obsahu.

    Trieda ostáva definovaná zámerne: obrazovky ju na riadok naďalej vešajú (`ZmluvaList`) a
    je to platný háčik pre neskoršie NEfarebné zvýraznenie. Dnes nekreslí nič.
*/
.gate-row--warning {
    background: transparent;
}

/*
    RIADOK SKUPINY V TABUĽKE. Dve tabuľky pod sebou si každá zvolila vlastné šírky stĺpcov,
    takže sa stĺpce v strede karty rozišli; skupiny sú preto v jednej tabuľke a oddeľuje ich
    riadok s názvom. Nie je to hlavička stĺpcov — verzálky a rozstup má ako predel bloku (§6.5).
*/
.gate-table tbody tr.gate-table__group > th {
    padding: 14px 8px 6px;
    border-bottom: 2px solid var(--gate-divider);
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--gate-muted);
}

.gate-table tbody tr.gate-table__group:hover {
    background: transparent;
}

.gate-table__empty td {
    color: var(--gate-muted);
    font-style: italic;
}

.gate-table__actions {
    white-space: nowrap;
}

/*
    STĹPEC ÚKONOV SA PRIPÍNA, LEN KEĎ TABUĽKA PRETEČIE SVOJ OBAL (R50 / položky #82, #141, #162,
    #163, #169, #170, #171, #181, NEW-2).

    Dve predchádzajúce znenia pripínali podľa NÁHRADY za pretečenie a obe boli chybné z tej istej
    príčiny — pretečenie nezávisí od šírky okna, ale od pomeru šírky obsahu a obalu:
      • pripnúť VŽDY (kolo 2) prekrylo koniec susedného stĺpca aj tam, kde sa tabuľka zmestila
        (`/skartacny-plan` prišiel o celý stĺpec STAV);
      • pripnúť LEN POD 641 px (kolo 3) poslalo úkony pri 1 280 px úplne mimo obal — na
        `/skartacny-plan` bolo z bunky [1289–1469] vidieť 0 zo 181 px, na `/plany/financne-krytie`
        0 zo 144 px, a nič nenaznačovalo, že tam nejaký úkon je.

    Rozhoduje preto meranie: `wwwroot/js/gate-table.js` porovná `scrollWidth` s `clientWidth` a
    zapíše na obal triedu. Bez JavaScriptu sa nepripne nič a tabuľka sa len posúva — teda stav,
    ktorý je bezpečný (nič sa neprekrýva), nie rozbitý.

    HRANA MUSÍ BYŤ VIDIEŤ (#162). Predtým ju niesli dve deklarácie a ani jedna nekreslila:
    `border-left` na bunke sa pri `border-collapse: collapse` zlúči do obrysu TABUĽKY, takže
    s pripnutou bunkou necestuje a ostane na pôvodnom mieste; a prvá vrstva tieňa mala farbu
    plochy, takže na ploche nebola vidieť. Linku preto nesie VNÚTORNÝ tieň (`inset` s kladným
    posunom kreslí 1 px pás pri ľavej hrane bunky) — ten sa zlučovaniu obrysov vyhýba.

    MÄKKÝ VONKAJŠÍ TIEŇ JE PREČ (R64, položka #237). Geometria `-8px 0 8px -8px` kládla obdĺžnik
    tieňa presne pod nepriehľadnú výplň bunky, takže sa z neho vykreslili nanajvýš ~4 px a naľavo
    od pravítka ostala plochá plocha (odmerané 243 svetlá / 27 tmavá, bez prechodu). Deklarácia,
    ktorá nič nekreslí, je len sľub gradientu v systéme, ktorý gradienty nemá — afordanciu nesie
    1 px hrana a nepriehľadný podklad.

    Podklad musí byť NEPRIEHĽADNÝ (`--gate-ground`), inak cezeň presvitá posúvaný riadok; preto
    ten token existuje: v karte je podkladom plocha karty, na ploche stránky plocha stránky.
    Zvýraznenie riadku pod myšou sa do tej istej plochy primiešava, nenavrstvuje sa na priehľadno.
*/
.gate-table-wrap--overflowing .gate-table th.gate-table__actions,
.gate-table-wrap--overflowing .gate-table td.gate-table__actions {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--gate-ground, var(--gate-bg));
    box-shadow: inset 1px 0 0 var(--gate-divider);
}

/*
    Hlavička je pripnutá v oboch smeroch naraz (vodorovne sama, zvisle nie), takže sa musí kresliť
    NAD pripnuté bunky tela — inak by pri posune prvý riadok tela prekryl popis stĺpca úkonov.
*/
.gate-table-wrap--overflowing .gate-table thead th.gate-table__actions {
    z-index: 2;
}

.gate-table-wrap--overflowing .gate-table tbody tr:hover > td.gate-table__actions {
    background: color-mix(in srgb, var(--gate-text) 4%, var(--gate-ground, var(--gate-bg)));
}

/*
    A OBSAH SA MUSÍ DO PRIPNUTEJ BUNKY ZMESTIŤ (#169). Pripnutie nemení šírku, ktorú bunke pridelilo
    rozvrhnutie tabuľky — a to ju pri pretečení stlačí pod jej vlastný obsah: na `/admin/ciselniky`
    pri 375 px stálo 242 px úkonov v 199 px bunke, takže si nezvratný úkon orezal vlastný popis na
    „Ukončiť platn". Zákaz zalomenia (`.gate-table__actions` vyššie) preto v pripnutom stave
    ustupuje: úkony sa poskladajú pod seba a bunka si vypýta len šírku najširšieho z nich.
*/
.gate-table-wrap--overflowing .gate-table th.gate-table__actions,
.gate-table-wrap--overflowing .gate-table td.gate-table__actions {
    white-space: normal;
}

/*
    A ÚKONY SA V PRIPNUTEJ BUNKE SKLADAJÚ POD SEBA, NIE VEDĽA SEBA (položka #255). Zalomenie
    (`flex-wrap`) šírku bunky neurčuje — určuje ju najširší riadok, ktorý sa ešte poskladá vedľa
    seba, takže dvojica „Zaevidovať retenciu" + „Skartovať" si v skartačnom pláne vypýtala 181 px
    a o toľko zasiahla do susedného stĺpca s dátumom. Stĺpec pod seba drží bunku na šírke
    NAJŠIRŠIEHO JEDNÉHO úkonu; riadok registra tým narastie o výšku druhého tlačidla, čo je
    v pripnutom stave prijateľná cena za to, že vedľajší stĺpec ostane celý.
*/
.gate-table-wrap--overflowing .gate-table td.gate-table__actions > .gate-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/*
    Bunka s úkonom má NIŽŠIE odsadenie než ostatné: výšku riadku určuje najvyššia bunka, takže
    8 px nad a pod 28 px tlačidlom (pravidlo vyššie) by z riadku spravilo 45 px proti 37 px
    riadku s obyčajným textom. So 4 px sa riadok registra vráti na mieru predlohy a tlačidlo
    v ňom ostane opticky na strede.
*/
.gate-table td.gate-table__actions {
    padding-block: 4px;
}

/*
    ÚKONY POD SEBOU MAJÚ ODSADENIE BEŽNEJ BUNKY (28. 9. 2026, sonda „okraje sa nespájajú"). 4 px
    platí pre JEDNO tlačidlo, ktoré má ostať na strede riadku. Keď sú úkony zoznamom pod sebou
    (stĺpec úkonov číselníka) alebo sa v pripnutej bunke poskladajú pod seba, riadok je vysoký
    podľa nich — a spodný obrys posledného tlačidla stál 3,5 px od linky riadku, teda na nej
    (odmerané na `/admin/ciselniky`). Pri zozname platí bežných 8 px bunky.
*/
.gate-table td.gate-cell-acts:has(> div + div),
.gate-table-wrap--overflowing .gate-table td.gate-table__actions:has(> .gate-inline > * + *) {
    padding-block: var(--gate-space-2);
}

/*
    Rad úkonov v BUNKE nemá odsadenie zhora. `.gate-actions` ho nesie preto, že mimo tabuľky
    stojí pod obsahom ako jeho záver — v bunke z toho bolo 16 px prázdna nad tlačidlom a riadok
    registra prerástol susedov (register plnení). To isté ako pri `.gate-cell > *`: zvislý rytmus
    v tabuľke určujú riadky, nie prvky v nich.
*/
.gate-table td > .gate-actions {
    margin-top: 0;
}

/*
    STĹPEC ÚKONOV REGISTRA AKO ZOZNAM. Päť odkazov v jednom riadku oddelených bodkou si
    vypýtalo šírku celej vety a stĺpec sa krájal uprostred slov. Každý úkon je vlastný riadok
    a nedeliteľný cieľ; stĺpec si tak berie len šírku najdlhšieho z nich.
*/
.gate-table td.gate-cell-acts > div {
    white-space: nowrap;
}

.gate-table td.gate-cell-acts > div + div {
    margin-top: 4px;
}

/*
    ── bunka formulárovej tabuľky ───────────────────────────────────────────────────────────────

    Vstupné pole má mimo tabuľky minimum 12 rem (aby v mriežke formulára nezostal stĺpik užší než
    jeho vlastný popis). V bunke je to nesprávna miera: šestnásť stĺpcov prílohy č. 14 tak žiadalo
    vyše 3 000 px a tabuľka sa posúvala aj tam, kde by sa na pracovnú plochu (1440 px) zmestila.
    Minimum sa preto určuje podľa TYPU údaja — dátum a suma majú danú dĺžku, text nie.

    Hodnoty sa neskracujú a žiadny stĺpec nemizne: minimum tabuľky (`min-content`) platí ďalej,
    takže širší obsah si miesto vypýta a zvyšok rieši vodorovný posun obalu (WCAG 2.1 AA, 1.4.10).

    Selektor je `> *`, nie `.gate-field`: prepínač a skupina prepínačov si obal poľa nekreslia
    (`.gate-checkbox` / `.gate-checkgroup`), takže by z pravidla vypadli a ich stĺpec by sa vrátil
    k šírke najdlhšieho slova v nadpise.
*/
.gate-table td.gate-cell > * {
    /* Zvislú medzeru medzi poľami nesie mriežka formulára, nie bunka — v tabuľke je to prázdny pás. */
    margin-bottom: 0;
    min-width: 0;
}

/*
    Vstup si v bunke berie celú šírku stĺpca a NESMIE si ju diktovať sám: natívny <select> aj
    <input type="date"> majú vlastnú prirodzenú šírku (najdlhšia položka číselníka, resp. maska
    dátumu), ktorou by stĺpec roztiahli späť na to, čo min-content na tabuľke práve odstránilo.
*/
.gate-table td.gate-cell .gate-select,
.gate-table td.gate-cell .gate-date,
.gate-table td.gate-cell .gate-time,
.gate-table td.gate-cell .gate-input,
.gate-table td.gate-cell fluent-text-field,
.gate-table td.gate-cell fluent-text-area {
    width: 100%;
    min-width: 0;
}

/*
    Minimá a stropy podľa TYPU údaja. Dvojica min/max drží stĺpec v rozsahu, ktorý údaj naozaj
    potrebuje: `min-width` bráni tomu, aby sa vstup stlačil na nečitateľnú šírku, `max-width`
    orezáva prirodzenú šírku obsahu (inak by ju stĺpec prevzal aj pri min-content).
*/
/*
    ČÍSELNÁ BUNKA LÍCUJE SO SÚČTOM. Obsah bunky má strop šírky, takže v širšom stĺpci stál pri
    jeho ľavej hrane a pomlčky dátových riadkov boli o ~90 px vľavo od súčtového riadku, ktorý
    je zarovnaný na pravú hranu bunky. Číslo aj pomlčka sa tlačia doprava — spoločná pravá
    hrana je to jediné, čo sa v peňažnej tabuľke číta.
*/
.gate-table td.gate-cell--number {
    text-align: right;
}

.gate-table td.gate-cell--number > * {
    min-width: 6rem;
    max-width: 9rem;
    margin-inline-start: auto;
}

.gate-table td.gate-cell--date > * {
    /* Natívny dátumový vstup potrebuje „dd. mm. rrrr" aj ikonu kalendára. */
    min-width: 9rem;
    max-width: 10rem;
}

/* Čas je päť znakov; segmenty a šípky krokovania si však vypýtajú viac než holý text. */
.gate-table td.gate-cell--time > * {
    min-width: 6.5rem;
    max-width: 8rem;
}

/*
    Prepínač je úzky, jeho stĺpec nie: šírku tu diktuje NADPIS („Ide o čiastkovú objednávku
    z rámcovej dohody"). Bez spodnej hranice spadne stĺpec na najdlhšie slovo nadpisu a hlavička
    sa rozsype na osem riadkov, ktoré natiahnu celý hlavičkový riadok tabuľky.
*/
.gate-table td.gate-cell--bool > * {
    min-width: 7rem;
    max-width: 9rem;
}

.gate-table td.gate-cell--choice > * {
    min-width: 8.5rem;
    max-width: 12rem;
}

.gate-table td.gate-cell--text > * {
    min-width: 9rem;
    max-width: 14rem;
}

.gate-table td.gate-cell--long > * {
    min-width: 12rem;
    max-width: 18rem;
}

/*
    ── opakovateľná sekcia: bunka a jej stĺpec ──────────────────────────────────────────────────

    PORADOVÝ STĹPEC NIE JE SUMA. Číslo riadku („P. č.") dostávalo šírkový rozpočet peňažnej bunky
    (`--number`, podlaha 6 rem), takže jednociferná poradovka merala 112 px — a to na tabuľkách,
    kde o každý stĺpec ide (príloha č. 14 ich má devätnásť). Podlaha peňažného stĺpca existuje
    preto, aby sumy pod sebou lícovali so súčtom; poradovka nemá s čím lícovať a nemá čo porovnávať.
    Šírku stĺpca preto určí jeho popis: `.gate-cell--ordinal` žiadnu podlahu nedeklaruje, takže
    platí `min-width: 0` zo spoločného pravidla pre bunky a stĺpec spadne na nedeliteľné „P. Č."
    v hlavičke (~48 px aj s odsadením bunky). Zarovnanie doprava ostáva ako pri číslach — nad ním
    stojí hlavička s triedou `gate-num` (prideľuje ju `FormSectionRenderer`).
*/
.gate-repeat .gate-table td.gate-cell--ordinal {
    text-align: right;
}

/*
    A OVLÁDACÍ PRVOK VYPĹŇA CELÚ BUNKU. Stropy šírky podľa druhu údaja (vyššie) sú ROZPOČET
    STĹPCA — hovoria, koľko si smie stĺpec vypýtať z voľného miesta. Lenže sedia na obale poľa,
    teda aj na jeho VYKRESLENEJ šírke: len čo sa tabuľka celá zmestila do obalu a rozvrhnutie
    rozdelilo zvyšok miesta medzi stĺpce, ostal ovládací prvok stáť na strope a vedľa neho zívala
    prázdna časť bunky (odmerané: `<select>` 135 px v 254 px bunke). Pole, do ktorého sa píše,
    má hranicu bunky — inak sa rad polí v riadku číta ako rozsypaný.

    Zrušiť strop sa dá LEN v opakovateľnej sekcii a len na vykreslenej šírke: `min-width` podlahy
    ostávajú nedotknuté, takže pri pretečení (tabuľka na `min-content`) sa nemení vôbec nič —
    stĺpce stoja na svojich podlahách presne ako doteraz. Mení sa iba delenie VOĽNÉHO miesta:
    stĺpec, ktorý zo svojho obsahu vie využiť viac, si ho vezme, a jeho pole to miesto aj vyplní.
*/
.gate-repeat .gate-table td.gate-cell > * {
    max-width: none;
}

/*
    ZAMKNUTÁ HODNOTA V BUNKE JE TEXT, NIE PLOCHA VSTUPU. Zamknutý riadok opakovateľnej sekcie
    kreslil v každej bunke orámované políčko, takže tabuľka oslovených dodávateľov vyzerala ako
    mriežka neaktívnych vstupov — pri šiestich stĺpcoch je to šesť rámikov na riadok bez jediného
    miesta, kam sa dá písať. Linky tabuľky bunky oddeľujú samy.

    Zarovnanie čísel doprava tu na rozdiel od formulára OSTÁVA: v stĺpci pod sebou stoja ďalšie
    čísla a spoločná pravá hrana je to, čo sa v tabuľke číta.
*/
.gate-table td > .gate-field__readonly,
.gate-table td .gate-field .gate-field__control > .gate-field__readonly {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/*
    Chyba v bunke: kompaktný ukazovateľ namiesto vety. Vetu by musel niesť stĺpec, ktorý sa podľa
    nej roztiahne — „Pole „Stručný opis predmetu nákupu" je povinné." je širšie než ktorýkoľvek
    reálny údaj v tom stĺpci. Znenie sa preto vypisuje pod tabuľkou (.gate-repeat__errors), v bunke
    ostáva rám, `aria-invalid` na vstupe a to isté znenie v `title`.

    Farba NIE je jediný nosič informácie (WCAG 2.1 AA, 1.4.1): to isté hlási `aria-invalid`,
    `aria-describedby` a zoznam pod tabuľkou.
*/
.gate-field--compact.gate-field--invalid .gate-field__control {
    border-radius: var(--gate-radius);
    box-shadow: 0 0 0 2px var(--gate-danger);
}

/* Prepínač si chyby vykresľuje sám (mimo .gate-field__control), ukazovateľ preto patrí na vstup. */
.gate-checkbox.gate-field--compact.gate-checkbox--invalid input[type="checkbox"] {
    outline: 2px solid var(--gate-danger);
    outline-offset: 2px;
}

/*
    Upozornenie v bunke (R3-N2): ukazovateľ má INÝ TVAR než chyba — prerušovaný jantárový rám
    namiesto plného červeného —, takže sa bunka s upozornením od chybnej nelíši len farbou
    (WCAG 1.4.1). Znenie stojí v zozname upozornení pod tabuľkou (.gate-repeat__warnings) a v
    `title` bunky; `aria-invalid` upozornenie nedáva.
*/
.gate-field--compact.gate-field--warning .gate-field__control {
    border-radius: var(--gate-radius);
    outline: 2px dashed var(--gate-warning);
    outline-offset: 1px;
}

.gate-checkbox.gate-field--compact.gate-checkbox--warning input[type="checkbox"] {
    outline: 2px dashed var(--gate-warning);
    outline-offset: 2px;
}


/*
    POD TABUĽKOU OPAKOVATEĽNEJ SEKCIE NIČ NESADÁ NA JEJ LINKU (Juraj, 28. 9. 2026). Tlačidlo
    „Pridať navrhovaný hospodársky subjekt“ stálo priamo na spodnej linke posledného riadku —
    linka a horná hrana obrysu tlačidla splynuli do jednej hrubej čiary (odmerané na časti C
    prílohy č. 1: linka 2 053 px, tlačidlo 2 054 px). Nápoveda o počte riadkov sa na linku
    lepila rovnako. Odstup nesie obal sekcie, nie obrazovka, takže platí pre každú opakovateľnú
    tabuľku aj pre sekciu bez riadkov (veta + tlačidlo). Tlačidlo má väčší odstup než veta:
    je to úkon pod tabuľkou, nie jej ďalší riadok.
*/
.gate-repeat > * + .gate-field__help {
    margin-top: var(--gate-space-2);
}

.gate-repeat > * + .gate-button {
    margin-top: var(--gate-space-3);
}

/*
    Chyby riadkov pod tabuľkou. Zoznam je mimo posúvateľnej oblasti, takže sa zalamuje na šírku
    stránky a na šírku stĺpca nemá žiadny vplyv.
*/
.gate-repeat__errors {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--gate-danger);
}

.gate-repeat__errors ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    list-style: none;
}

.gate-repeat__errors ul ul {
    list-style: disc;
}

.gate-repeat__errors-row {
    font-weight: 600;
}

/*
    Upozornenia riadkov pod tabuľkou (R3-N2) — vlastný zoznam za chybami, s kresbou upozornenia
    pri poli: farba `--gate-warning` a zvislá linka namiesto odrážok. V spoločnom červenom zozname
    by sa veta, ktorá úkonu nebráni, čítala ako dôvod, prečo úkon neprejde.
*/
.gate-repeat__warnings {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--gate-warning);
}

.gate-repeat__warnings ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    list-style: none;
}

.gate-repeat__warnings ul ul {
    padding-inline-start: .6rem;
    border-inline-start: 2px solid currentColor;
}

.gate-repeat__warnings-row {
    font-weight: 600;
}

/*
    Odkaz na stiahnutie dokumentu alebo na založenie nového (DOCX, PDF, XLSX, ZIP). Je to akcia,
    nie veta v texte, takže potrebuje kliknuteľnú plochu: holý riadok textu má výšku 18 px, čo je
    pod hranicou 24 × 24 px (WCAG 2.2 AA, 2.5.8 Target Size) a na dotykovej obrazovke sa doň
    používateľ netrafí.
*/
.gate-download {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-block: .25rem;
}

/*
    A JEDEN Z NICH JE ÚKON, NIE ODKAZ (R2-N5). Náhľad zväzku výzvy sa skladá až na požiadanie
    a server ho môže odmietnuť — nezreťaziteľná príloha sa spozná až jej otvorením. `<a download>`
    by takú odpoveď uložil ako súbor s príponou .pdf, v ktorom je chybová správa, takže tento
    jediný „download" je natívne `<button>`: súbor vydá okruh a vetu odmietnutia vypíše obrazovka.
    Pre používateľa je to tá istá vec ako susedné stiahnutie, preto má aj tú istú kresbu —
    podčiarknutý akcentový text na priehľadnom podklade (tak kreslil aj prepínač odtlačku, kým
    ho 23. 9. 2026 nenahradila sivá ikona).
*/
button.gate-download {
    padding-inline: 0;
    border: 0;
    background: transparent;
    color: var(--gate-accent-text);
    font: inherit;
    text-align: start;
    text-decoration: underline;
    cursor: pointer;
}

button.gate-download:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/*
    Kým sa zväzok skladá, úkon je neaktívny a hovorí to aj kresbou: podčiarknutie zmizne (nie je
    čo stlačiť) a farba klesne na popisnú. Miera 36 px ostáva, aby riadok pod rukou neposkočil.
*/
button.gate-download[disabled] {
    color: var(--gate-muted);
    text-decoration: none;
    cursor: default;
}

/*
    V BUNKE REGISTRA MÁ ÚKON MIERU BUNKY, NIE STRÁNKY (položka #269). 36 px je cieľ MIMO tabuľky;
    štyri takéto odkazy v jednej bunke priameho zadania spravili z riadku 156 px. R1 pre ovládací
    prvok v bunke určuje 28 px na myši a 44 px na dotyku a `.gate-table__actions { padding-block:
    4px }` je napísané presne pre tú výšku. 28 px je stále nad hranicou 24 × 24 px (WCAG 2.2 AA,
    2.5.8). Rad odkazov POD kartou (`.gate-downloads`) v tabuľke nie je a svojich 36/44 px si drží.
*/
.gate-table td.gate-cell-acts .gate-download,
.gate-table td.gate-table__actions .gate-download {
    min-height: 28px;
    padding-block: 0;
}

@media (max-width: 640.98px) {
    .gate-table td.gate-cell-acts .gate-download,
    .gate-table td.gate-table__actions .gate-download {
        min-height: 2.75rem;
    }
}

/*
    ODKAZ V TVARE SEKUNDÁRNEHO TLAČIDLA (R45, položky #201/#250 a export spisu). Hlavný úkon
    obrazovky má mať tvar tlačidla — lenže na troch miestach prvok `<button>` byť NESMIE:
      • `/Error` a `/not-found` sa vykresľujú staticky (chybová obrazovka musí fungovať aj vtedy,
        keď okruh nebeží), takže obsluhu kliknutia by nemal kto vykonať;
      • „Exportovať spis (ZIP)" je navigácia na koncový bod s `Content-Disposition: attachment` —
        `<a download>` drží pravý klik, „uložiť ako" aj otvorenie na novej karte, ktoré by
        tlačidlo s presmerovaním zahodilo.
    Deklarácie sú doslovný prepis tvaru, ktorý v tomto hárku už raz stojí pre `<summary>`
    rozbaľovača — teda sekundárne tlačidlo bez tieňového stromu Fluentu. Keď sa mení vzhľad
    sekundárneho tlačidla, menia sa obe miesta.
*/
.gate-linkbutton {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 14.4px;
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    background: transparent;
    color: var(--gate-text);
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 14px;
    line-height: 1.2;
    /* Aj v `:hover` — základné pravidlo pre odkaz podčiarknutie vracia a v tvare tlačidla by to
       bola druhá chróma. */
    text-decoration: none;
    cursor: pointer;
}

.gate-linkbutton:hover {
    background: color-mix(in srgb, var(--gate-text) 7%, transparent);
    color: var(--gate-text);
    text-decoration: none;
}

.gate-linkbutton:active {
    background: color-mix(in srgb, var(--gate-text) 14%, transparent);
}

.gate-linkbutton:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

@media (max-width: 640.98px) {
    .gate-linkbutton {
        min-height: 2.75rem;
    }
}

/*
    HLAVNÝ PRECHOD V TVARE PRIMÁRNEHO TLAČIDLA (predloha „Požiadavka na VO", 6. 10. 2026):
    „Otvoriť formulár požiadavky" v hlavičke obrazovky. Ostáva ODKAZOM — je to navigácia, ktorú
    treba vedieť otvoriť aj na novej karte —, tvar a farby však preberá z primárneho tlačidla
    (`--gate-accent-fill`, text #f3f2f2 v oboch schémach, 5,0 : 1). Akcentová výplň patrí na
    obrazovke jednému úkonu, preto ju obrazovka dáva len vtedy, keď iný primár nekreslí.

    Ikona v tlačidle (stiahnutie) je ručné SVG v `currentColor`, rovnako ako ikony rámu.
*/
.gate-linkbutton--primary {
    border-color: var(--gate-accent-fill);
    background: var(--gate-accent-fill);
    color: #f3f2f2;
}

.gate-linkbutton--primary:hover {
    border-color: var(--gate-accent-fill-hover);
    background: var(--gate-accent-fill-hover);
    color: #f3f2f2;
}

.gate-linkbutton--primary:active {
    border-color: var(--gate-accent-fill-active);
    background: var(--gate-accent-fill-active);
}

.gate-linkbutton > svg {
    display: block;
    flex: 0 0 auto;
}

/*
    A V BUNKE REGISTRA MÁ TEN ISTÝ TVAR MIERU BUNKY (kolo 6, register zmlúv). Stĺpec úkonov
    na `/zmluvna-vetva/zmluvy` niesol „Otvoriť" a „Prejsť na kartu" ako HOLÝ podčiarknutý text:
    v pripnutej bunke na 375 px to bol dotykový cieľ bez akejkoľvek chrómy — nedalo sa povedať,
    že je to úkon, a nie popis. Tvar dostávajú z `.gate-linkbutton`, teda z toho istého
    sekundárneho tlačidla, aké má rad úkonov `/plnenia`; ODKAZOM ale ostávajú zámerne (voľba ide
    cez adresu `?zmluva=…`, takže sa dá poslať aj otvoriť na novej karte — presne dôvod, pre ktorý
    táto trieda existuje).

    Miera je tá istá, akú si v bunke berie `.gate-download` o kus vyššie: 28 px na myši (nad
    hranicou 24 × 24 px, WCAG 2.2 AA 2.5.8) a 44 px na dotyku, aby riadok registra neprerástol
    susedov. Odsadenie zhora a zdola nesie bunka (`.gate-table__actions { padding-block: 4px }`).
*/
.gate-table td.gate-cell-acts .gate-linkbutton,
.gate-table td.gate-table__actions .gate-linkbutton {
    min-height: 28px;
    padding-block: 0;
}

@media (max-width: 640.98px) {
    .gate-table td.gate-cell-acts .gate-linkbutton,
    .gate-table td.gate-table__actions .gate-linkbutton {
        min-height: 2.75rem;
        padding-block: 4px;
    }
}

/*
    RAD ODKAZOV NA STIAHNUTIE. Tri odkazy „Stiahnuť CSV / XLSX / PDF" pod sebou boli tá istá
    veta v troch kópiách a dva odkazy `/auditu` mali medzi sebou 9 px, teda dva dotykové ciele
    8 px od seba. Rad má preto vlastný obal s medzerou 16 px, spoločný uvádzací text
    a oddeľovače; na dotyku sa ciele dvíhajú na 44 px (WCAG 2.2 AA, 2.5.8).
*/
.gate-downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.gate-downloads__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.gate-downloads__label {
    color: var(--gate-muted);
    font-size: .8125rem;
}

/*
    ODDEĽOVACIA BODKA MEDZI ODKAZMI UŽ NIE JE (položka #257, dodatok H7). Rad odkazov drží odstup
    medzerou (`gap`); bodka bola navyše a pri zalomení radu sa vedela osamiť na konci riadku —
    „Stiahnuť DOCX ·" ako posledné, čo z riadku ostane, je preklep, nie interpunkcia. Trieda je
    preč aj z hárku: pravidlo, ktoré nemá čo zafarbiť, je len sľub prvku, ktorý sa už nekreslí.
*/

/* Krátky odkaz („XLSX") potrebuje vodorovnú plochu — 36 px na výšku samo o sebe nestačí. */
.gate-downloads .gate-download {
    padding-inline: .25rem;
}

@media (max-width: 640px) {
    .gate-downloads .gate-download {
        min-height: 2.75rem;
        padding-inline: .5rem;
    }
}

/*
    UKAZOVATEĽ VYČERPANIA (`<progress>` v prehľade čerpania rámcovej dohody, zmluvy a plnení).
    Natívny prvok si kreslí prehliadač: zaoblený pás v systémovej modrej — teda tvar aj farba,
    ktoré tento systém nemá, a v troch riadkoch pod sebou druhý akcent popri hlavnom úkone
    obrazovky. `appearance: none` je jediná cesta, ako mu kresbu vziať; hodnota sa potom farbí
    pseudoprvkami, ktoré má každý prehliadačový základ vlastné (preto sú tu obidva zápisy).

    DRÁHA MUSÍ BYŤ VIDIEŤ AJ PRI NULE. Predtým to bol orámovaný obdĺžnik s priehľadným vnútrom,
    takže pri 0 % ostala prázdna 1 px linka s číslom „0 %" POD ňou — čítalo sa to ako prázdne
    vstupné pole, nie ako merač (kontrola 2026-08-19, položka #66). Obrys je preto preč a
    dráhu nesie plná plocha v farbe pravítok: pri nule je merač stále merač, len prázdny.

    Výplň je akcentová. Akcent je v tejto sústave presne toto — značka a plocha bez malého
    textu; hodnota vedľa nesie číslo, takže farba nič neurčuje sama. Je zároveň jediné znenie,
    ktoré sa od dráhy odlíši v oboch schémach.

    Merač je `inline-block`: percento stojí VEDĽA neho na tej istej osi, nie pod ním.
*/
progress.gate-progress-bar {
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
    max-width: 12rem;
    height: 6px;
    margin-inline-end: var(--gate-space-2);
    border: 0;
    border-radius: var(--gate-radius);
    background: var(--gate-divider);
}

/* Dráhu kreslí hostiteľ vyššie — pseudoprvok ju len nesmie prekryť vlastnou farbou. */
progress.gate-progress-bar::-webkit-progress-bar {
    background: transparent;
}

progress.gate-progress-bar::-webkit-progress-value {
    background: var(--gate-accent);
}

progress.gate-progress-bar::-moz-progress-bar {
    background: var(--gate-accent);
}

/*
    PREKROČENÉ ČERPANIE JE STAV, NIE HLAVNÝ ÚKON. Merač nad 100 % (`/plnenia`, 100,9 %) sa kreslil
    čistým akcentom, kým hodnota „Zostatok −500,00 EUR" priamo nad ním už bola v `--gate-danger` —
    dve červené v jednom riadku, z toho jedna akcentová (položka #150, R2). Akcent je vyhradený
    hlavnému úkonu obrazovky; prekročenie patrí k sémantickým farbám dát.
*/
progress.gate-progress-bar--danger::-webkit-progress-value {
    background: var(--gate-danger);
}

progress.gate-progress-bar--danger::-moz-progress-bar {
    background: var(--gate-danger);
}

.gate-pager {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    margin-top: 1rem;
}

/*
    Listovanie je jedna dvojica tlačidiel, nie tri samostatné prvky v rade. Bez vlastného obalu
    zalamoval panel po jednotlivých prvkoch, takže na 360 px ostalo „Predošlá" v riadku s údajom
    o strane a „Ďalšia" spadla pod ne — dve tlačidlá tej istej akcie skončili v rôznych riadkoch
    a ďaleko od seba (nález z testovania na mobile: register subjektov). Obal sa zalamuje ako
    celok a text o strane sa zalomí za ním. Na 360 px má dvojica spolu ~200 px, takže sa do
    riadka zmestí; `nowrap` je poistka, aby ju neroztrhlo ani pri dlhšom preklade.
*/
.gate-pager__buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    align-items: center;
}

/*
    STRÁNKOVANIE, ZA KTORÝM EŠTE NIEČO STOJÍ, SI DRŽÍ ODSTUP AJ ZDOLA (28. 9. 2026, E2E sonda
    „okraje sa nespájajú"). Stránkovanie je záver tabuľky, preto má odstup len zhora — lenže pod
    registrom položiek plánu stojí ešte súčet plánu (`plan-suhrn-spolu`) a tlačidlá „Predošlá /
    Ďalšia" sadli spodným obrysom na jeho hornú linku (medzera 0 px pri 768 aj 1280 px).
*/
.gate-pager:not(:last-child) {
    margin-bottom: var(--gate-space-4);
}

/* ── prehľad údajov (definičný hárok) ────────────────────────────────────── */

/*
    Dvojstĺpcový výpis „popis — hodnota" na detailoch. Prvý stĺpec má `minmax`, aby sa smel
    zmenšiť: pri `max-content` by najdlhší popis prerástol kartu a hodnoty v druhom stĺpci by
    sa odrezali (WCAG 2.1 AA, 1.4.10 Reflow).
*/
/*
    Stĺpec popisov je ohraničený polovicou zoznamu: `max-content` bez stropu si pri dlhom popise
    („Evidenčné číslo (správa registratúry)") vzal na tablete toľko, že hodnote ostalo menej než
    `min-width` poľa (12 rem) — pole a tlačidlo v bunke pretiekli a stránka dostala vodorovný
    posun (E2E Reflow 1.4.10). Dlhý popis sa má zalomiť, nie vyhladovať hodnotu.
*/
/*
    Od redizajnu je to MRIEŽKA S LINKAMI (predloha, prehľad „len na čítanie"), nie voľná dvojica
    stĺpcov: pri ôsmich údajoch pod sebou sa bez riadkovej linky nedalo očami udržať, ktorá
    hodnota patrí ku ktorému popisu. Popis je o stupeň menší a tlmený, hodnota v bežnej miere —
    rozdiel váhy nesie hierarchiu, nie hrúbka písma.
*/
/*
    Strop menovkového stĺpca je 32 % — tá istá miera, akú má riadkový formulár. Pri 40 % mal
    detail subjektu menovky v ~400 px stĺpci (41,5 %), kým jeho vlastný editačný formulár
    v 35 %, takže menovky pri prechode z prezerania do úpravy poskočili (položka #75).
*/
.gate-detail {
    display: grid;
    grid-template-columns: minmax(8rem, 32%) minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--gate-divider);
}

/*
    PREHĽAD HNEĎ POD NADPISOM SEKCIE NEKRESLÍ DRUHÚ LINKU (28. 9. 2026, sonda „okraje sa nespájajú").
    Nadpis sekcie stojí na 2 px linke a prehľad si pod ňu kreslil vlastnú 1 px hornú linku — dve
    čiary bez medzery sa čítali ako jedna hrubá (výsledok určenia PHZ vo výzve, blok
    pripomienkovania návrhu zmluvy v B2 prílohy č. 1 a v prílohe č. 2). Riadky polí pod nadpisom
    hornú linku nemajú, za ich prvú linku slúži linka nadpisu — prehľad sa správa rovnako. Platí aj
    pre prehľad, ktorým začína blok pripojený pod nadpis (`.gate-pripomienkovanie`).
*/
.gate-form__section-head + .gate-detail,
.gate-form__section-head + * > .gate-detail:first-child {
    border-top: 0;
}

/*
    A DVA PREHĽADY POD SEBOU SÚ JEDNA MRIEŽKA. Súčet plánu a súčet vyfiltrovaných položiek stoja
    ako dva `dl` hneď za sebou — spodná linka posledného riadku prvého a horná linka druhého sa
    zliali do dvojitej čiary. Za hornú linku druhého slúži spodná linka prvého.
*/
.gate-detail + .gate-detail {
    border-top: 0;
}

.gate-detail dt {
    padding: 10px var(--gate-space-4) 10px 0;
    border-inline-end: 1px solid var(--gate-divider);
    border-bottom: 1px solid var(--gate-divider);
    font-size: 12px;
    color: var(--gate-muted);
}

/*
    Hodnota býva DLHÝ NEDELITEĽNÝ REŤAZEC (e-mail, číslo dokumentu, identifikátor). Bunka ho na
    úzkom výreze nemá kde zlomiť, takže si vypýta vlastnú šírku a vytlačí prehľad z karty von.
    `anywhere` na rozdiel od `break-word` vstupuje aj do výpočtu minimálnej šírky, čo je presne
    to, čo tu treba; bežné slová sa ním nelámu, kým je pre ne miesto (tá istá technika ako pri
    názvoch priložených súborov).
*/
/*
    ĽAVÁ HRANA HODNOTY JE JEDNA (NEW-H). Prehľad aj rad polí majú menovkový stĺpec 32 %, ale
    odstup za ním si každý počítal inak: mriežka poľa má medzeru 24 px (`--gate-space-6`), prehľad
    mal odsadenie 16 px — na karte, kde stoja pod sebou (`/zmluvna-vetva/zmluvy`: tri prehľady
    a sedem blokov polí), tak hodnoty začínali na troch rôznych zvislých osiach (odmerané 619 /
    630 / 632 px). Odsadenie hodnoty sa preto rovná medzere mriežky formulára.
*/
.gate-detail dd {
    margin: 0;
    padding: 10px 0 10px var(--gate-space-6);
    border-bottom: 1px solid var(--gate-divider);
    font-size: 14px;
    overflow-wrap: anywhere;
}

/*
    HODNOTA, KTORÁ JE SAMA NÁLEZOM. Nie štítok a nie hláška: číslo, ktoré prekročilo hranicu
    („Zostatok −500,00 EUR", „Vyčerpanie 100,9 %"). Dovtedy stálo v tlmenej sivej ako všetko
    ostatné, takže jediný skutočný problém karty bol jej najmenej nápadný prvok. Farba nesie
    ÚDAJ, nie chrómu — vetu k nemu píše sekcia diskrepancií, takže farba nie je jediným
    nosičom informácie (WCAG 2.1 AA, 1.4.1).
*/
.gate-value--warning {
    color: var(--gate-warning);
    font-variant-numeric: tabular-nums;
}

.gate-value--danger {
    color: var(--gate-danger);
    font-variant-numeric: tabular-nums;
}

/*
    Nepárny počet buniek uzatvára posledná cez oba stĺpce — inak by mala mriežka vpravo dole
    vyrezaný zárez a čítala by sa ako nedokreslená (kontrola 2026-08-19, položka #29). Pri
    dvojiciach `dt`/`dd` to nenastane, ale prehľad sa skladá aj podmienene a jeden `dt` bez
    hodnoty stačí na to, aby sa počet rozišiel.
*/
.gate-detail > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-inline-end: 0;
}

/*
    NA KARTE JE MRIEŽKA BEZ ZVISLEJ LINKY A O STUPEŇ HUSTEJŠIA. Karta registra nesie aj sedem
    prehľadov pod sebou (karta zmluvy) a každý z nich si kreslil vlastnú zvislú linku cez celú
    výšku — z karty sa stala mriežkovaná tabuľka, v ktorej sa nedalo očami nájsť, kde jeden
    prehľad končí a druhý začína (nález sweepu 2026-08-18: `/eks`, `/objednavky`,
    `/zmluvna-vetva/kontroly`, `/zmluvna-vetva/zmluvy`). Dvojicu drží pokope riadková linka,
    ktorá ostáva; zvislá bola druhý oddeľovač tej istej väzby.

    Na ploche stránky (mimo karty) si prehľad zvislú linku PONECHÁVA: tam stojí sám, nie
    v rade siedmich, a linka je jediné, čo mu dáva tvar.
*/
.gate-card .gate-detail dt {
    padding-block: 8px;
    padding-inline-end: var(--gate-space-3);
    border-inline-end: 0;
}

/*
    Hustejšia je len ZVISLÁ miera. Ľavá hrana hodnoty ostáva na mieste, ktoré určuje mriežka
    formulára (`--gate-space-6`) — polovičné odsadenie tu bolo tichou výnimkou z pravidla o kus
    vyššie a vracalo presne ten rozdiel, ktorý NEW-H odstránil: na karte zmluvy začínala hodnota
    prehľadu na x=620, kým vstup rovnakého riadku o kus nižšie na x=632 (dodatok kontroly kola 5).
*/
.gate-card .gate-detail dd {
    padding-block: 8px;
    padding-inline-start: var(--gate-space-6);
}

/*
    V SEKCII AGENDY MÁ PREHĽAD TVAR PREDLOHY: bez zvislej linky (rovnaká úvaha ako na karte —
    tvar mu dáva sekcia, nie linka) a bez hornej linky, lebo nad prvým riadkom stojí hlava sekcie
    so silnou linkou. Riadok je o dva pixely vzdušnejší než na karte (10 px, predloha).
*/
.gate-agenda .gate-detail {
    border-top: 0;
}

.gate-agenda .gate-detail dt {
    padding-block: 10px;
    padding-inline-end: var(--gate-space-3);
    border-inline-end: 0;
}

.gate-agenda .gate-detail dd {
    padding-block: 10px;
}

/*
    Pole v bunke detailného zoznamu sleduje šírku bunky. Globálne `min-width: 12 rem` poľa je
    správne vo formulárovej mriežke, ale úzka bunka `dd` ho dať nemusí — pole sa vtedy zmenší
    namiesto pretečenia cez okraj karty (tá istá regresia ako strop stĺpca popisov vyššie).
*/
.gate-detail .gate-toolbar .gate-field {
    flex: 1 1 auto;
    min-width: 0;
}

.gate-detail .gate-toolbar .gate-field fluent-text-field {
    width: 100%;
    min-width: 0;
}

/*
    Hodnota poskladaná z viacerých prvkov (dátum + lehota + štítok) nemá vlastnú triedu —
    nesie ju spoločný obal `.gate-inline` (viď pomôcky hore). Predtým to bola samostatná
    `.gate-detail__value`, teda druhé meno pre tú istú vec: rovnaká zostava v bunke tabuľky
    alebo v hlavičke dokumentu si ju vziať nemohla a rozišli sa medzery.
*/

/* Pod 480 px sa dvojica presunie pod seba — dva stĺpce sa na displej telefónu nezmestia. */
@media (max-width: 480px) {
    .gate-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /*
        Zvislá linka medzi stĺpcami zaniká spolu so stĺpcami; riadok drží pokope linka pod
        hodnotou. Variant na karte sa musí uviesť menovite: jeho selektor je špecifickejší,
        takže by inak vyhral aj tu a dvojica by si na telefóne ponechala vodorovné odsadenie
        stĺpcov, ktoré už neexistujú.
    */
    .gate-detail dt,
    .gate-card .gate-detail dt,
    .gate-agenda .gate-detail dt {
        padding: 8px 0 0;
        border-inline-end: 0;
        border-bottom: 0;
    }

    .gate-detail dd,
    .gate-card .gate-detail dd,
    .gate-agenda .gate-detail dd {
        padding: 0 0 8px;
    }
}

/*
    REFERENČNÁ HODNOTA NAD TABUĽKOU SÚM (UAT report 6, bod 3, 29. 9. 2026). Riadok prehľadu
    „predpokladaná hodnota zákazky — suma“ a veta o rozdiele stoja nad harmonogramom
    (`GateSumReferenceBlock`). Prehľad hneď pod nadpisom sekcie hornú linku nekreslí (pravidlo
    vyššie, za ňu slúži linka nadpisu). Odstup od tabuľky nesie obal: bez vety o rozdiele by spodná
    linka prehľadu sadla priamo na hornú hranu tabuľky (rámčeky sa nedotýkajú, 28. 9. 2026).
*/
.gate-sum-reference {
    margin-bottom: var(--gate-space-3);
}

/* ── karty, štítky, správy ───────────────────────────────────────────────── */

/*
    Karta je plochý panel: obrys namiesto tieňa. Vlastnosti sa nastavujú na hostiteľskom prvku
    <fluent-card>, kde autorský štýl prebíja predvoľby z jeho tieňového stromu (`:host`) —
    inak by si karta ponechala vlastné zaoblenie aj vyvýšenie.
*/
.gate-card {
    display: block;
    box-sizing: border-box;
    margin-bottom: 1rem;
    /*
        Karta je PLOCHA, nie orámovaný ostrov: odlišuje ju odtieň podkladu (--gate-surface na
        ploche stránky), nie linka ani tieň. Obrys okolo plochy, ktorá už má vlastnú farbu, je
        druhý oddeľovač tej istej hrany — v hranatom systéme z toho vzniká „rám v ráme".
    */
    border: 0;
    border-radius: var(--gate-radius-panel);
    background: var(--gate-surface);
    /*
        Karta je vysoká podľa svojho OBSAHU. Tieňový strom `<fluent-card>` si nastavuje
        `:host { height: var(--card-height, 100%) }` a odkedy je `main` stĺpcový flex (kvôli
        lepiacej lište úkonov na spodku obrazovky), má jeho položka `.content` po rozvrhnutí
        URČITÚ výšku — percento sa teda zrazu má o čo oprieť a karta sa roztiahla na celý
        zvyšok okna. Na obrazovke s jedným krátkym panelom (číselníky, zostavy) z toho bol
        200 px prázdneho podkladu pod jediným výberom.
    */
    height: auto;
    /* Vyvýšenie má v tomto systéme JEDINÁ vrstva — modálny prekryv. Karty sú ploché. */
    box-shadow: none;
    /* Vlastný tieň si kreslí aj tieňový strom karty; token ho vypína pri zdroji. */
    --elevation-shadow-card-rest: none;
    --elevation-shadow-card-hover: none;
    /*
        <fluent-card> si v tieňovom strome zapína `:host { content-visibility: auto; }`. Prehliadač
        vtedy obsah karty MIMO výrezu vôbec nevykreslí — karta síce drží svoju výšku, ale ostane
        prázdna. Na obrazovke sa to prejaví len na okamih pri rýchlom posune, v celostránkovom
        zábere (audit, tlač, PDF) však ostanú karty pod prehnutím prázdne natrvalo: presne tak
        vyzerali „prázdne panely" pod tabuľkou definícií (audit 2026-08-07) — nič v nich nechýbalo,
        len sa nevykreslili. Obsah karty je navyše vylúčený z hľadania v stránke (Ctrl+F).
        Autorský štýl na hostiteľskom prvku prebíja `:host`, takže stačí vrátiť predvolenú hodnotu.
    */
    content-visibility: visible;
    /*
        <fluent-card> si v tieňovom strome zapína aj `:host { contain: content; }`, teda
        `layout paint style`. PAINT containment robí z karty OBMEDZUJÚCI BLOK pre potomkov
        s `position: fixed` a zároveň im oreže vykreslenie na svoju plochu — modálny dialóg
        vykreslený vnútri karty sa tak vycentroval do karty, scrim prekryl len ju a text
        dialógu vytiekol cez okraje (UAT N-0111, obrazovka „Odovzdanie údajov").
        Predvolená hodnota to vracia späť: dialóg sa opäť vzťahuje na výrez.
        Rovnaká trieda nálezu ako `content-visibility` vyššie — dedená optimalizácia knižnice,
        ktorá mení význam pozicovania. Cena je zanedbateľná: karty sú desiatky prvkov, nie tisíce.
    */
    contain: none;
    /*
        Karta je vlastná NEPRIEHĽADNÁ plocha, takže všetko, čo musí niečo prekryť (pripnutý
        stĺpec úkonov, maska náznaku posunu v tabuľke), si tu berie jej odtieň — nie odtieň
        stránky. Viď komentár pri `--gate-ground` v `.content`.
    */
    --gate-ground: var(--gate-surface);
}

/* To isté pre plochy prekryvov — dialóg aj paleta majú podklad karty. */
.gate-dialog__panel,
.gate-quicknav__panel {
    --gate-ground: var(--gate-surface);
}

/*
    Odsadenie kariet má v balíku FluentUI vlastné scoped pravidlo `fluent-card[b-…]`
    so špecificitou 0-1-1, ktoré jednoduchú triedu (0-1-0) prebije — a počíta hodnotu
    z `--design-unit`. Zdvojená trieda (0-2-0) vyhráva bez `!important` a drží odsadenie
    v našich rukách nezávisle od verzie balíka.
*/
.gate-card.gate-card {
    padding: 12px 16px;
}

.gate-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
}

/* Predradené `.gate-card` je kvôli špecificite — inak by vyhrala hierarchia nadpisov z app.css. */
.gate-card .gate-card__title {
    margin: 0 0 .25rem;
    font-family: var(--gate-font-heading);
    font-size: 16px;
    font-weight: var(--gate-heading-weight);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.gate-card__subtitle {
    margin: 0 0 .5rem;
    color: var(--gate-muted);
    font-size: 13px;
}

/*
    PODNADPIS V KARTE. Titulok karty je 16 px/800 a `.content h3` bol tiež 16 px/800, takže
    hierarchia sa vnútri karty zrútila — dva rovnaké hlasy pod sebou (položka #16). Podnadpis
    preto preberá tvar sekčnej hlavy z predlohy: 12 px, verzálky, rozstup .1em. Je menší než
    text pod ním zámerne — rovnako ako „01 IDENTIFIKÁCIA" v dynamickom formulári.

    Selektor je POTOMKOVSKÝ, nie priamy (položka #96). Podnadpis vnorený o úroveň hlbšie —
    v paneli ďalšieho kroku alebo v samostatnom bloku karty — si ponechal 16 px, takže na
    `/objednavky` stáli v jednej karte dva rôzne `h3`: „POTVRDENIA Z TRHOVISKA" 12 px verzálkami
    a „Zapísať číslo objednávky zo SAP" 16 px. Dve výnimky sú menovité a zámerné: titulok karty
    (ten JE 16 px/800) a názov úkonu v paneli ďalšieho kroku — je to veta, nie návestie, a vo
    verzálkach by sa hláskovala.

    Dlhá nedeliteľná hodnota v podnadpise (e-mail poverenia na `/admin/delegacie`) sa musí zlomiť:
    vo verzálkach si vypýtala 315 px v 256 px karte a pretečenie sa cez kartu prenieslo na celú
    stránku (položka #109, vodorovný posun pri 320 px).
*/
.content .gate-card__body h3:not(.gate-card__title):not(.gate-action-panel__step-name) {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .1em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/*
    Úkony v hlavičke karty. Hlavička je rad o dvoch stranách (`justify-content: space-between`),
    takže obal drží úkony pokope pri pravom okraji — bez neho by sa na úzkom výreze zalamovali
    po jednom a karta by mala tri strany namiesto dvoch. Je to tá istá úvaha aj tá istá kresba
    ako pri `.gate-page-header__actions`; zvislé zarovnanie je na STRED, lebo hlavička karty
    zarovnáva na účiarie nadpisu a tlačidlo účiarie nemá.
*/
.gate-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
}

/*
    Lišta so správou má vo FluentUI vlastnú minimálnu šírku, ktorá je na mobile širšia než
    obrazovka — pretiekla by stránku do vodorovného posunu (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-message > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/*
    HLÁŠKA MÁ ODSTUP OD SUSEDOV (Juraj, 28. 9. 2026: „aby sa nám okrajmi nespájali prvky“). Hláška
    je orámovaný panel, ale na rozdiel od karty (`margin-bottom: 1rem`) a súhrnu chýb nemala žiadny
    vlastný odstup. Pod riadkami prehľadu (`/eks`, `/dodatky`, `/suhrnne-spravy`) preto sadla horná
    linka hlášky na spodnú linku posledného riadku, dve hlášky pod sebou (`/admin/podpisova-matica`)
    splynuli do dvojitej čiary a karta pod hláškou (`/pnpz`, `/zmr/drobne-nakupy`) sa na ňu nalepila
    (odmerané sondou nad všetkými obrazovkami gate-test: medzera 0 px).

    Odstup nesie hláška sama — zhora, keď pred ňou niečo stojí, zdola, keď za ňou niečo nasleduje.
    Na kraji svojho rámu (prvá alebo posledná v karte) ho nepridáva, tam drží odsadenie rám. Obal,
    do ktorého ju obrazovka zabalí kvôli `data-testid`, dostáva to isté pravidlo. `:where` drží
    špecificitu najviac jednej triedy, takže menovité pravidlá (hláška pod hlavičkou dokumentu)
    vyhrávajú.
*/
.gate-message:where(:not(:first-child)),
:where(div:has(> .gate-message:only-child):not(:first-child)) {
    margin-top: var(--gate-space-3);
}

.gate-message:where(:not(:last-child)),
:where(div:has(> .gate-message:only-child):not(:last-child)) {
    margin-bottom: var(--gate-space-3);
}

/*
    HLÁŠKA JE PLOCHÝ PANEL — TÁ ISTÁ KRESBA AKO SÚHRN VALIDÁCIÍ (`.gate-summary` nižšie).

    Doteraz sa prefarbovala len výplň a obrys, takže z knižnice ostala celá jej ANATÓMIA:
    mriežka `24px 1fr auto` s kruhovým ikonovým čipom v prvom stĺpci, `min-height: 36px`,
    odsadenie `0 12px` a 12 px text. Na obrazovke z toho bola orámovaná škatuľa s kruhom
    v sústave, kde sú karty ploché a polomer je nula — a kruh bol jediný oblý tvar v celej
    aplikácii (kontrola 2026-08-19, položka #11).

    Prečo to vyzeralo dobre na `/formular/*`: tá obrazovka NEUKAZUJE hlášku, ale súhrn
    validácií (`GateValidationSummary`), čo je vlastné značkovanie bez FluentUI. Rozdiel teda
    nebol medzi stránkami, ale medzi dvoma komponentmi — a preto sa opravuje tu, jedným radom
    pravidiel, ktorý platí na všetkých 216 miestach.

    IKONA MIZNE. Význam nesie text (a `role="alert"`/`status` na obale), nie glyf; farba obrysu
    je druhý, tichší nosič. S ikonou zaniká aj jej 24 px stĺpec, takže sa mriežka prekresľuje
    na „text | zavrieť".

    Predradené `body` je kvôli špecificite: pravidlá balíka majú značku rozsahu (`[b-…]`), teda
    (0,2,0) — `body .gate-message .X` dáva (0,2,1) a vyhrá bez `!important`. Obrys sa MUSÍ
    zapisovať po zložkách: balík ho kreslí skratkou na `.fluent-messagebar.intent-*`, čo je
    (0,3,0), a naša skratka (0,2,1) by prehrala na šírke aj štýle.
*/
body .gate-message .fluent-messagebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--gate-space-3);
    align-items: start;
    min-height: 0;
    padding: var(--gate-space-3) var(--gate-space-4);
    border-radius: var(--gate-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--gate-divider);
    font-size: 13px;
}

body .gate-message .fluent-messagebar.intent-info,
body .gate-message .fluent-messagebar.intent-success,
body .gate-message .fluent-messagebar.intent-warning,
body .gate-message .fluent-messagebar.intent-error {
    border-width: 1px;
    border-style: solid;
}

/* Kruhový čip s glyfom — jediný oblý tvar v sústave s polomerom 0. */
body .gate-message .fluent-messagebar-icon {
    display: none;
}

body .gate-message .fluent-messagebar-message {
    grid-column: 1;
    min-width: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Nadpis hlášky je vlastný riadok, nie prvé slovo vety — tá istá miera ako v súhrne validácií. */
body .gate-message .fluent-messagebar-message .title {
    display: block;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Úkony hlášky idú pod text: v riadku by súperili so zatvorením v treťom stĺpci. */
body .gate-message .fluent-messagebar-container-action {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: var(--gate-space-2) 0 0;
}

body .gate-message .fluent-messagebar-close {
    grid-column: 2;
    align-self: start;
}

/*
    INFORMAČNÁ HLÁŠKA JE NEUTRÁLNA, NIE MODRÁ (R40 / položka #148).

    Kontrola hlásila, že `/objednavky` a `/komisie` „stále nesú Fluent chrómu". Nenesú: obe lišty
    sú `GateMessage` a majú presne plochú kresbu podľa §5.7 — vzorkované rgb(129,166,202) obrys /
    rgb(221,224,229) výplň je NAŠA `--gate-info` (#0d5ea6) na 60 % a 8 %. Problém je, že modrá bola
    JEDINÁ chromatická farba v celej aplikácii (token `--gate-info` sa nepoužíval nikde inde), a na
    obrazovke, kde je hláška zároveň prázdnym stavom karty, sa z nej stal najvýraznejší prvok
    stránky — v tmavej schéme doslova jediný farebný obdĺžnik.

    Informácia nie je STAV ÚDAJA, je to poznámka; §1 vyhradzuje sémantickú farbu dátam, nie chróme.
    Neutrálna hláška preto berie linku pravítok a 4 % nádych textu — číta sa ako panel, nie ako
    značka. Úspech, upozornenie a chyba si svoje znenia PONECHÁVAJÚ: tam farba naozaj nesie stav.
*/
body .gate-message .fluent-messagebar.intent-info {
    background-color: color-mix(in srgb, var(--gate-text) 4%, transparent);
    border-color: var(--gate-divider);
}

body .gate-message .fluent-messagebar.intent-success {
    background-color: color-mix(in srgb, var(--gate-success) 8%, transparent);
    border-color: color-mix(in srgb, var(--gate-success) 60%, transparent);
}

body .gate-message .fluent-messagebar.intent-warning {
    background-color: color-mix(in srgb, var(--gate-warning) 8%, transparent);
    border-color: color-mix(in srgb, var(--gate-warning) 60%, transparent);
}

body .gate-message .fluent-messagebar.intent-error {
    background-color: color-mix(in srgb, var(--gate-danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--gate-danger) 60%, transparent);
}

/*
    ŠTÍTOK. Plný obdĺžnik s tichou výplňou, nie obrysová pilulka: v hranatom systéme by obrys
    okolo dvoch slov pôsobil ako ďalšie tlačidlo. Základ (neutrálny tón) je najsvetlejší stupeň
    neutrálneho radu s najtmavším textom — kontrast 11 : 1 a na ploche karty aj na ploche
    stránky je rozdiel viditeľný bez linky.
*/
.gate-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--gate-radius);
    font-size: 11px;
    letter-spacing: .02em;
    font-weight: 500;
    border: 0;
    background: var(--gate-neutral-soft);
    color: var(--gate-neutral-soft-text);
    /*
        AJ NEUTRÁLNY ŠTÍTOK MÁ HRANU (H3, položky #219/#220). Tichá výplň má voči PLOCHE STRÁNKY
        sotva 1,04 : 1 (odmerané #f8f4f4 na #f3f2f2), takže štítok mimo karty — „kolo 1"
        v hlavičke, „hotové" v páse sprievodcu, „Označené ručne" v anonymizácii — nebolo vidieť
        vôbec, a v jednom stĺpci registra tak sémantické stavy vyzerali ako štítky a neutrálne
        ako podfarbené slovo. Hranu preto nesie ten istý vnútorný 1 px obrys ako pri sémantických
        tónoch, len o stupeň tichší (38 % proti 40 %): neutrálny štítok má ostať najtichší
        z celého radu (R54), nie len najbledší.

        30 % bolo pritom PRIMÁLO (položka #244): pomer sa počíta z farby textu štítku, a tá je
        v neutrálnom rade stredne tmavá sivá, nie sýty stav — nameraný krok výplň → obrys bol
        preto 42 proti 81 pri sémantických, teda polovičný obrys pri rovnakej deklarácii. Pri
        38 % je krok ~68: obrys tej istej hrúbky a čitateľnosti, stále o kúsok tichší.
    */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
    /*
        ŠTÍTOK JE JEDNORIADKOVÁ PILULKA. V úzkom stĺpci registra sa „Čaká na finančného gestora"
        zalomilo na tri riadky a pilulka narástla z 22 px na 80 px — vedľa jednoriadkových
        súrodencov v tom istom stĺpci to rozbilo rytmus celej tabuľky (kontrola 2026-08-19,
        položka #30). Stĺpec si šírku vypýta a zvyšok rieši vodorovný posun obalu tabuľky;
        v texte (hlavička dokumentu, riadok metaúdajov) štítok stojí sám a zalomiť sa nemá.
    */
    white-space: nowrap;
    /*
        Štítok je o stupeň menší než text okolo neho. Na účiarí (predvolené `baseline`) preto
        sedí opticky nízko a pod ním ostáva miesto na spodky písmen susedného riadka — rovnaká
        štrbina, akú riešia natívne vstupy vyššie. Stredová os ho zarovná s textom, vedľa
        ktorého stojí, a je to tá istá os, akú drží obal `.gate-inline` (`align-items: center`).
    */
    vertical-align: middle;
}

/*
    Informačný štítok je AKCENTOVÝ (predloha `tag-accent`): je to stav dokumentu, nie chyba —
    „Koncept", „kolo 1", číslo dokumentu. Akcentová dvestovka pod textom stupňa 800 drží 8,6 : 1.

    Obrys je tu z rovnakého dôvodu ako pri sémantických tónoch nižšie: tichá výplň má voči ploche
    stránky sotva 1,1 : 1, takže štítok MIMO karty (hlavička dokumentu, riadok metaúdajov) nemal
    hranu a čítal sa ako podfarbené slovo, nie ako štítok. Odtieň je akcent, nie farba textu —
    plný stupeň 800 na 40 % by z tichého štítku spravil tmavý rám.
*/
.gate-badge--info {
    background: var(--gate-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gate-accent) 35%, transparent);
    color: var(--gate-accent-soft-text);
}

/*
    Sémantické tóny nesú 10 % nádych vlastnej farby a jej plné znenie v texte — pri takom pomere
    ostáva text nad hranicou 4,5 : 1 v oboch schémach. Tenký obrys tej istej farby na 40 % je
    tu preto, že podfarbenie 10 % samo o sebe nemá voči karte 3 : 1 (WCAG 1.4.11) a štítok by
    na nej v tmavej schéme stratil hranu. Prehliadač bez `color-mix` (mimo cieľového Edge)
    štítok len nepodfarbí; farba textu nesie stav aj tak.
*/
.gate-badge--success,
.gate-badge--warning,
.gate-badge--danger {
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent);
}

.gate-badge--success {
    color: var(--gate-success);
}

.gate-badge--warning {
    color: var(--gate-warning);
}

.gate-badge--danger {
    color: var(--gate-danger);
}

/*
    ŠTÍTOK V HLÁŠKE — DVA NÁDYCHY NAD SEBOU. Nádych sa vyššie mieša do PRIEHĽADNA, takže keď
    štítok stojí vnútri hlášky, ktorá má vlastný 8 % nádych, obidva sa sčítajú a text stratí to,
    čo mu na ploche stránky ostáva: „dodatočné vyjadrenie" (jantárový štítok v modrej hláške na
    obrazovke havárie) spadol na 4,4 : 1 a axe ho hlásil ako `color-contrast` závažnosti serious.
    Tu sa preto nádych mieša do PLOCHY STRÁNKY, nie do toho, čo je práve pod ním — pomer je tým
    rovnaký v hláške aj mimo nej.
*/
.gate-message .gate-badge--success,
.gate-message .gate-badge--warning,
.gate-message .gate-badge--danger {
    background: color-mix(in srgb, currentColor 10%, var(--gate-bg));
}

/*
    V TMAVEJ SCHÉME NESIE SÉMANTICKÝ TÓN DVOJNÁSOBNÝ NÁDYCH (R54 / NEW-C, položka #219).
    R54 počítal so 20 % pri sémantických a 10 % pri neutrálnom — v kóde však mali oba 10 %,
    takže rozdiel medzi „Ukončená" a „Aktívna" robila len farba textu a neutrálny štítok mal
    na karte dokonca SILNEJŠIU výplň (odmerané 57,4 proti 53,3 a 52,6 pri podklade 36,4).
    So 20 % je poradie také, aké má byť: neutrálny najtichší, sémantické nad ním. Kontrast
    textu na vlastnom nádychu ostáva nad 4,5 : 1 (zelený 6,1 : 1, jantárový 5,8 : 1,
    červený 5,1 : 1 na ploche karty).
*/
@media (prefers-color-scheme: dark) {
    .gate-badge--success,
    .gate-badge--warning,
    .gate-badge--danger {
        background: color-mix(in srgb, currentColor 20%, transparent);
    }

    /*
        A NEUTRÁLNY ŠTÍTOK JE V TMAVEJ SCHÉME NAJTICHŠÍ Z CELÉHO RADU — aj proti akcentovému
        (dodatok D2 kontroly kola 5). R54 porovnával neutrálny len so sémantickými a prehliadol
        akcentový „info": nameraná výplň neutrálneho 49,48,47 proti akcentovej 68,30,24 na ploche
        s jasom 26 je dvojnásobný odstup od podkladu (22 proti 14) a obrys 95 proti 126 je
        v prepočte na odstup trojnásobný (68 proti 35). Neutrálny štítok pritom nenesie žiadny
        stav — je to najtichšia možná značka, takže v poradí hlasitosti patrí úplne naspodok.

        Hodnoty sú odvodené z merania: výplň `text 5 %` dá jas ~36 (odstup 10 < 14) a obrys
        `currentColor 14 %` jas ~57 (odstup 31 < 35). Text štítku sa nemení — ten stav nesie.

        Zoznam `:not(...)` je nevyhnutný: pravidlo stojí v hárku NIŽŠIE než tónové varianty, takže
        holé `.gate-badge` s rovnakou špecificitou by im v tmavej schéme prepísalo výplň.
    */
    .gate-badge:not(.gate-badge--info):not(.gate-badge--success):not(.gate-badge--warning):not(.gate-badge--danger):not(.gate-badge--outline) {
        background: color-mix(in srgb, var(--gate-text) 5%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
    }

    /* V hláške sa nádych mieša do plochy stránky (dôvod vyššie) — pomer sa nesmie rozísť. */
    .gate-message .gate-badge--success,
    .gate-message .gate-badge--warning,
    .gate-message .gate-badge--danger {
        background: color-mix(in srgb, currentColor 20%, var(--gate-bg));
    }
}

/*
    Obrysový štítok — hodnota, ktorá ešte nie je zistená („neoverené"). Prázdna plocha s akcentovým
    obrysom hovorí „miesto na odpoveď", nie „stav" (predloha `tag-outline`).
*/
.gate-badge--outline {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--gate-accent);
    color: var(--gate-accent-text);
}

/*
    Súhrn validácií je plochý panel s nádychom svojej severity — nie karta s prúžkom. Linka
    okolo celého bloku (nie len pri jednom okraji) ho drží pokope aj vtedy, keď je zoznam chýb
    dlhší než výrez.
*/
.gate-summary {
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    padding: var(--gate-space-3) var(--gate-space-4);
    margin-bottom: 1rem;
    background: var(--gate-surface);
    /*
        SÚHRN SA PRESÚVA POD LIŠTU, NIE POD ŇU (R30 / položka #85). Panel si po zamietnutí berie
        fokus a `scrollIntoView({ block: 'start' })` ho posadí na hornú hranu VÝREZU — lenže tam
        stojí lepkavá hlavička rámu, takže prvých ~56 px vrátane titulku „Subjekt sa nepodarilo
        uložiť (3)" ostalo pod ňou a používateľ videl holé odrážky (odmerané `top = 0` pri 1280).
        Odsadenie skoku je výška lišty plus dych; na telefóne to isté rieši `scroll-padding-top`
        na `html` (app.css), tu je hodnota zapísaná na prvku, lebo lepkavú lištu má aj desktop.
    */
    scroll-margin-top: calc(var(--gate-nav-bar-h, 3.5rem) + var(--gate-space-6));
}

.gate-summary--errors {
    border-color: color-mix(in srgb, var(--gate-danger) 60%, transparent);
    background: color-mix(in srgb, var(--gate-danger) 8%, transparent);
}

.gate-summary--warnings {
    border-color: color-mix(in srgb, var(--gate-warning) 60%, transparent);
    background: color-mix(in srgb, var(--gate-warning) 8%, transparent);
}

.gate-summary__title {
    margin: 0 0 .35rem;
    font-size: 14px;
    font-weight: 600;
}

.gate-summary ul {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 13px;
}

/*
    ODKAZ NA MIESTO NA TEJ ISTEJ STRÁNKE (`Ui/GateFieldLink.razor`) je TLAČIDLO v podobe odkazu —
    `<a href="#…">` pri `<base href="/">` a navigačnej interceptcii Blazoru odvedie na Domov (viď
    hlavička komponentu). Tlačidlo preto zhadzuje všetku chrómu tlačidla a berie si písmo aj farbu
    svojho okolia: v súhrne chýb je červené, v upozorneniach hnedé, v paneli odpovede úkonu také,
    ako text vedľa neho — modrý odkaz v červenom paneli by tvrdil, že vedie preč zo stránky.
    Podčiarknutie je jediné, čo vetu s miestom odlíši od vety bez miesta, a to je zámer: kliknúť
    sa dá len tam, kde je kam. Zaostrenie je jeden prstenec ako všade inde mimo vstupov.

    VYBRANÁ VETA (`aria-current`) ostáva zvýraznená, kým sa nevyberie iná: po presune na pole
    a späť je to jediné miesto, z ktorého sa dá prečítať, ktorú z dvadsiatich viet práve riešim.
    Značka je plná odrážka namiesto prázdnej a tučné písmo — bez farby navyše, tá patrí severite.
*/
.gate-fieldlink {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
    cursor: pointer;
}

.gate-fieldlink:hover,
.gate-fieldlink:focus-visible {
    text-decoration-thickness: 2px;
}

.gate-fieldlink:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gate-summary li.gate-summary__item--active {
    font-weight: 600;
    list-style-type: disc;
}

.gate-summary li.gate-summary__item--active > .gate-summary__link[aria-current] {
    text-decoration-thickness: 2px;
}

.gate-busy {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-inline-end: .4rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gate-spin 1s linear infinite;
}

@keyframes gate-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gate-busy {
        animation: none;
    }

    /*
        Lišta so správou sa vo FluentUI prelína 1,5 sekundy a knižnica sama systémové nastavenie
        „obmedziť pohyb" nesleduje. Pre používateľa s vestibulárnou poruchou je práve prelínanie
        oznamu nepríjemné, preto ho vypíname tu. Predradené `body` a výber podľa atribútu sú kvôli
        špecificite — pravidlo z balíka je načítané neskôr a pri zhode by vyhralo.
    */
    body .gate-message .fluent-messagebar[animation] {
        animation: none;
    }
}

/* ── sprievodca ──────────────────────────────────────────────────────────── */

/*
    OBAL SPRIEVODCU NIE JE PLOCHA — je to len zoskupenie pre kaskádový parameter
    (`Ui/GateWizard.razor`). Kým mal vlastný box, bol OBSAHUJÚCIM BLOKOM lepiacej lišty pod ním:
    lišta sa smie „lepiť" len v rozsahu svojho rodiča, a ten na dokumente s pásom informačných
    panelov začína AŽ POD prehnutím (odmerané na 375 px: hlavička + panely = 820 px, výška výrezu
    812 px). Lišta preto po otvorení dokumentu nebola vidieť vôbec a objavila sa až po odscrollovaní
    k prvej sekcii — hoci jej celý zmysel je byť dosiahnuteľná odkiaľkoľvek. Predloha ju má ako
    dieťa hlavného stĺpca; `display: contents` obal odstráni z rozvrhnutia a rodičom lišty sa stane
    plocha obsahu, ktorá siaha od hornej hrany stránky po jej spodok. Obal nemá žiadnu vlastnú
    kresbu ani rolu, takže sa tým nič nestráca (kontrakt `div.gate-wizard` v DOM-e ostáva).
*/
.gate-wizard {
    display: contents;
}

/*
    ZÁLOŽKY ČASTÍ. Rad sedí na 2 px linke, po ktorej sa aktívna záložka „prepadá" akcentovou
    hranou (predloha) — teda tá istá kresba, akú má hlavička dokumentu nad ním. Medzera medzi
    záložkami je nulová: sú to susedné plochy jedného pásu, nie samostatné tlačidlá.

    LINKU NESIE KAŽDÁ ZÁLOŽKA, NIE PÁS. Pri štyroch a viac častiach sa rad zalomí na dva riadky
    — a spoločná linka pod celým pásom je potom len pod tým DRUHÝM. Aktívna karta v prvom riadku
    si pritom brala akcentovú hranu s prekrytím (`margin-bottom: -2px`), takže tá hrana skončila
    uprostred bloku, priamo nad tretím krokom, a čítala sa ako predel medzi riadkami namiesto
    podčiarknutia aktívnej karty (kontrola 2026-08-19, položka #13).

    Keď linku nesie položka, každý riadok pásu má svoju vlastnú a akcentová hrana ostáva presne
    pod svojou kartou.

    ZÁLOŽKY VYPĹŇAJÚ RIADOK (dodatok ku kontrole kola 2). Predtým si šírku brali podľa obsahu
    a zvyšok posledného riadku dopĺňala prázdna položka `::after` — jej linka síce siahala po
    okraj, ale pri zalomení sa rozdelenie medzi riadkami rozišlo: horný riadok končil uprostred
    a pod ním visel holý úsek bez linky. `flex: 1 1 auto` na položke rozdelí voľné miesto medzi
    záložky KAŽDÉHO riadku, takže každý riadok je presne plný, linka je súvislá od okraja po okraj
    a akcentový úsek sedí pod aktívnou záložkou. Výplňová položka tým stráca zmysel a musí zmiznúť
    — inak by si na poslednom riadku vypýtala svoj podiel voľného miesta.
*/
.gate-wizard__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gate-wizard__step {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 2px solid var(--gate-divider);
}

/* Tlačidlo vypĺňa svoju záložku — inak by podfarbenie aktívnej karty končilo pri texte. */
.gate-wizard__step > .gate-wizard__link {
    flex: 1 1 auto;
    min-width: 0;
}

/*
    Krok sprievodcu je ZÁLOŽKA, nie pilulka: číslo v štvorčeku, popis vedľa neho a plocha, ktorá
    pri aktívnom kroku sadá na spoločnú linku pod radom. Obrys okolo každého kroku (pôvodný stav)
    vyrábal z ôsmich častí prílohy č. 1 osem tlačidiel v rade — a ani jedno z nich nebolo akciou.
*/
.gate-wizard__link {
    display: flex;
    gap: 10px;
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--gate-radius);
    padding: 12px 16px;
    font: inherit;
    font-size: 14px;
    color: var(--gate-muted);
    cursor: pointer;
    text-align: start;
}

.gate-wizard__link:hover:not([disabled]) {
    background: var(--gate-hover-soft);
}

/*
    Aktívna záložka. Podfarbenie a akcentová hrana idú na položku zoznamu, nie na tlačidlo:
    hrana má prekryť spoločnú linku pásu (`margin-bottom: -2px`), takže musí byť na prvku, ktorý
    na nej stojí. Farbu a hrúbku písma nesie ďalej tlačidlo — to je to, čo sa číta.

    Podklad je NAJTICHŠÍ akcentový stupeň (`--gate-accent-faint`), nie plocha štítku
    (`--gate-accent-soft`): tá stúpla na stupeň 200 kvôli štítkom, ktoré musia mať hranu samy,
    a v páse záložiek by z toho vznikla druhá výrazná akcentová plocha hneď vedľa hlavného úkonu
    obrazovky. Záložke hranu dáva linka pod ňou, takže jej stačí stupeň 100 z predlohy.
*/
.gate-wizard__step--active {
    background: var(--gate-accent-faint);
    border-bottom-color: var(--gate-accent);
}

.gate-wizard__step--active .gate-wizard__link {
    color: var(--gate-accent-text);
    font-weight: 600;
}

.gate-wizard__link[disabled] {
    cursor: not-allowed;
    opacity: .45;
}

/*
    KROKOVNÍK, PO KTOROM SA NEDÁ KLIKAŤ. Sled procesu (určenie predpokladanej hodnoty) má tú istú
    kresbu ako sprievodca formulárom, ale medzi jeho fázami sa preskakovať nedá — poradie určuje
    stav dokumentu a konania. Krok je preto `span`, nie `button`; z pôvodného pravidla si berie
    všetko okrem jednej vlastnosti: ruka nad prvkom, ktorý nič nevykoná, je sľub akcie.
*/
.gate-wizard__link--staticky {
    cursor: default;
}

/*
    Číslo kroku. Aktívne je plné (výplň, na ktorej stojí text — preto `--gate-accent-fill`),
    ostatné sú obrysové: rad tak nesie jeden jediný akcentový bod, teda miesto, kde človek stojí.
*/
.gate-wizard__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid var(--gate-divider);
    border-radius: var(--gate-radius);
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 12px;
}

.gate-wizard__step--active .gate-wizard__number {
    border-color: var(--gate-accent-fill);
    background: var(--gate-accent-fill);
    color: #f3f2f2;
}

/*
    Vybavená časť. Je to ŠTÍTOK v rade záložiek (predloha), nie zelený text: rad by inak niesol
    druhú farbu popri akcente a stav „hotové" by kričal viac než to, kde človek práve stojí.
*/
.gate-wizard__done {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .02em;
    background: var(--gate-neutral-soft);
    color: var(--gate-neutral-soft-text);
}

/*
    Na telefóne má každá záložka VLASTNÝ riadok. Tri záložky vedľa seba majú na 375 px displeji
    ~110 px na kus, teda dva znaky názvu a číslo; a keby sa niektorá zalomila a iná nie, linky pod
    nimi by sa rozišli do schodov. Celá šírka drží pás ako zoznam krokov pod sebou — linky lícujú.
*/
@media (max-width: 640.98px) {
    .gate-wizard__step {
        flex-basis: 100%;
    }
}

.gate-wizard__panel:focus-visible {
    outline: 2px solid var(--gate-accent);
}

/*
    LEPIACA LIŠTA ÚKONOV (predloha). Rad pod formulárom sa drží pri spodnej hrane okna, takže
    „Odovzdať časť" a „Predložiť na schválenie" sú dosiahnuteľné aj uprostred jedenásťsekciového
    dokumentu — dovtedy sa k nim scrollovalo cez celú prílohu a používateľ nevedel, či tam vôbec
    sú. V toku ostáva (nie `fixed`), takže na konci dokumentu doskočí na svoje miesto a posledné
    pole nikdy neprekryje.

    Triedu prideľujú VÝHRADNE dva wrappery — `Ui/GateWizard.razor` (dokument so sprievodcom)
    a `Ui/GateActionBar.razor` (ručne písaný formulár bez sprievodcu). Základnú triedu radu
    (`.gate-actions` / `.gate-wizard__actions`) používa 69 obrazoviek ako obyčajný rad tlačidiel
    pod kartou a tie sa lepiť nemajú, preto je lepivosť samostatný modifikátor.

    Lišta sa „lepí" len v rozsahu svojho RODIČA, takže musí byť priamym potomkom plochy obsahu —
    v karte by zmizla spolu s ňou (to je aj dôvod, prečo má obal sprievodcu `display: contents`).

    Vodorovné odsadenie je záporný margin proti odsadeniu `.content` (token `--gate-content-pad`
    nižšie), aby linka lišty siahala od okraja po okraj ako v predlohe. Spodný bezpečný pás
    (`env(safe-area-inset-bottom)`) je kvôli gestovému pruhu na telefónoch.
*/
.gate-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* Mimo stĺpcového flexu je to neškodné; v ňom drží lištu pri spodnej hrane krátkej stránky. */
    margin-top: auto;
    margin-inline: calc(-1 * var(--gate-content-pad, 1rem));
    padding: var(--gate-space-3) var(--gate-content-pad, 1rem);
    padding-bottom: calc(var(--gate-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--gate-bg);
    border-top: 2px solid var(--gate-divider);
}

/*
    NA KONCI DOKUMENTU LIŠTA NESADÁ NA POSLEDNÚ LINKU (28. 9. 2026, sonda „okraje sa nespájajú").
    `margin-top: auto` drží lištu pri spodnej hrane krátkej stránky, ale na dlhej je z neho nula —
    lišta doskočí na svoje miesto priamo pod posledný riadok polí a jej 2 px linka splynie s jeho
    spodnou linkou do jednej hrubej čiary (odmerané na prílohe č. 1, krok „Posúdenie Odboru VO",
    medzera 0 px). Automatický okraj sa nedá zdola ohraničiť, preto odstup nesie prvok PRED lištou:
    jeho spodný okraj ostáva aj vtedy, keď si voľné miesto vezme `auto`.
*/
:has(+ .gate-actionbar) {
    margin-bottom: var(--gate-space-6);
}

/*
    Vysvetlenie namiesto chýbajúceho úkonu („tento dokument sa nepredkladá na schválenie").
    Berie si zvyšok riadku, takže skupina tlačidiel ostane pri pravom okraji aj vtedy, keď je
    v lište jediná — predtým veta stála MEDZI tlačidlami v tej istej skupine a odtlačila
    „Odovzdať časť" k ľavému okraju.
*/
.gate-actionbar__note {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    color: var(--gate-muted);
}

/*
    LIŠTA ÚKONOV NA TELEFÓNE. Štyri tlačidlá v jednom rade sa na 320 – 375 px displej nezmestia;
    bez zásahu z nich boli TRI zalomené riadky (odmerané 150 px výšky), teda pás, ktorý zožral
    pätinu výrezu. Rozvrhnutie je preto dvojriadkové: hore pohyb po krokoch a vedľajší úkon,
    dole hlavný úkon cez celú šírku. Dotykovú výšku 2,75 rem si tlačidlá berú zo spoločného
    základu v sekcii tlačidiel (WCAG 2.2 AA, 2.5.8).
*/
@media (max-width: 640.98px) {
    /*
        Späť/Ďalej sú na telefóne IKONY. Text ostáva v strome pre čítačku obrazovky aj pre testy
        (technikou `gate-visually-hidden`), takže prístupné meno tlačidla sa nemení — mizne len
        jeho kresba, ktorá v dvojici so šípkou hovorí to isté dvakrát.
    */
    .gate-actionbar__nav .gate-button__label > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .gate-actionbar__nav fluent-button::part(control) {
        min-width: 2.75rem;
        padding-inline: 10px;
    }

    /*
        ÚKONY OSTÁVAJÚ SKUPINOU A KAŽDÝ SI DRŽÍ SVOJU ŠÍRKU (položka #214, H12). Predtým sa
        skupina rozpúšťala (`display: contents`) a poslednému tlačidlu sa dával celý riadok:
        lišta tak mala DVA riadky (122 px, 15 % výrezu) aj na formulári s dvoma krátkymi
        úkonmi — „Zrušiť" 79 px vpravo hore a pod ním „Uložiť" ako 343 px akcentový pás cez
        celú šírku. Jednotlačidlový formulár (`/dokumenty/novy`, 70 px) pritom dokazoval, že
        správna podoba existuje.

        Skupina si teraz berie zvyšok riadku (`flex: 1 1 auto`, `min-width: 0`) a zarovnáva
        úkony k pravému okraju. Čo sa zmestí, ostane v jednom rade; čo sa nezmestí, zalomí sa
        VNÚTRI skupiny — opäť vpravo a opäť vo vlastnej šírke, takže z lišty nikdy nie je pás
        a viac než dva riadky nevznikajú.
    */
    .gate-actionbar > .gate-actionbar__acts {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }

    /* Veta o chýbajúcom úkone má na úzkom výreze vlastný riadok — vedľa tlačidla ostanú dve slová. */
    .gate-actionbar__note {
        flex-basis: 100%;
        font-size: 12px;
    }
}

/*
    KOTVA PRESUNU — kresba komponentu `Ui/GateFocusAnchor.razor` (UAT N-0130). Úkon, ktorý zmení
    obsah INDE na stránke, musí používateľa presunúť tam; obal je LEN cieľ presunu: žiadny povrch
    ani odsadenie, aby karta v ňom vyzerala presne ako karty vedľa nej (odsadenie nesie
    `margin-bottom` karty samotnej).

    Samotný posun robí `wwwroot/js/gate-focus.js` (`scrollIntoView({ block: 'start' })` a až potom
    `focus({ preventScroll: true })`) — holé `FocusAsync` posúva „vycentruj, ak treba", takže pri
    karte vyššej než výrez nechá jej nadpis nad horným okrajom.

    KOTVA STOJÍ POD LIŠTOU RÁMU, NIE POD ŇOU (UAT report 5, N1, 28. 9. 2026). `block: 'start'`
    posadí hornú hranu kotvy na hornú hranu VÝREZU — lenže tam stojí lepiaca lišta rámu, a tú má aj
    desktop (`.top-row` v MainLayout.razor.css), nielen telefón. Nadpis karty by ostal pod ňou,
    teda presne stav, ktorý mal presun odstrániť (tá istá trieda ako `.gate-summary`). Na úzkom
    výreze lištu odráta `scroll-padding-top` na `html` (app.css), preto tu stojí len dych; na
    širokom ho nesie kotva sama, výška lišty plus dych. Výsledok je na oboch rovnaký.

    Zaostrenie musí byť vidieť (WCAG 2.1 AA, 2.4.7), ale len keď o ňom používateľ potrebuje vedieť:
    `:focus-visible` rámček po klávese nakreslí, po kliknutí myšou nie — tá istá úvaha a tá istá
    kresba ako pri paneli sprievodcu o riadok vyššie.
*/
.gate-focus-anchor {
    scroll-margin-top: var(--gate-space-4);
}

@media (min-width: 641px) {
    .gate-focus-anchor {
        scroll-margin-top: calc(var(--gate-nav-bar-h, 3.5rem) + var(--gate-space-4));
    }
}

.gate-focus-anchor:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/* ── formulár, konanie ───────────────────────────────────────────────────── */

/*
    Stĺpec formulára. Šírka je obmedzená kvôli čitateľnosti — vstupné pole cez celú širokouhlú
    obrazovku sa ťažko skenuje a popis vľavo je od hodnoty vpravo priďaleko. Rytmus medzi poľami
    nesie `margin-bottom` na `.gate-field`, nie medzera mriežky, aby sa odsadenia nesčítavali.

    52rem bolo primalo: mriežka nižšie z nej vyskladala tri stĺpce po ~15rem, takže „Názov predmetu
    zákazky" (1024 znakov) sa zadával do políčka širokého ~220 px aj na obrazovke 1920 px
    (UAT nález „polia na písanie sú príliš maličké"). Strop drží riadok pod ~90 znakov, čo je
    stále v pásme čitateľnosti.
*/
.gate-form {
    max-width: 1240px;
}

.gate-form__part {
    margin-bottom: 1.5rem;
}

/*
    HLAVIČKA ČASTI FORMULÁRA (predloha: riadok pod záložkami častí). Je to `.gate-page-header`
    s modifikátorom, nie vlastná stavba — testy aj čítačka obrazovky ju poznajú pod tou istou
    triedou. Rozdiel oproti hlavičke obrazovky: názov je o stupeň menší (20 px), pásmo je zovreté
    zhora aj zdola a uzatvára ho TENKÁ linka — hrubá 2 px linka patrí hlavičke dokumentu a rad
    sekcií pod ňou by inak mal dve rovnako silné hrany nad sebou.
*/
.gate-form__part-header {
    align-items: center;
    gap: var(--gate-space-3);
    padding: var(--gate-space-4) 0;
    border-bottom-width: 1px;
}

/*
    Názov časti nerastie (štítok stavu má stáť hneď za ním, nie pri pravom okraji), ale ZMENŠIŤ sa
    musí: `flex: 0 0 auto` by mu na 375 px displeji nechal šírku celého riadku textu a stránka by
    dostala vodorovný posun (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-page-header.gate-form__part-header > h3 {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 20px;
}

/*
    Štítok stavu a vlastník stoja v predlohe VEDĽA názvu, nie pod ním — riadok je krátky a druhé
    pásmo by z neho spravilo ďalšiu hlavičku (spec §6.4). Preto sa ruší zalomenie, ktoré má
    hlavička obrazovky.

    Selektor je zámerne o triedu ŠPECIFICKEJŠÍ, než musí byť. `.gate-form__part-header > .gate-inline`
    má presne tú istú váhu ako `.gate-page-header > .gate-inline` s `flex-basis: 100%` vyššie, takže
    o jednoriadkovom rade rozhodovalo iba poradie v hárku — a rad sa pri 1280 px kreslil zalomený
    (nadpis na jednom riadku, štítok s vlastníkom na druhom) napriek 560 px voľného miesta
    (kontrola kola 7). Poradie v súbore nie je kontrakt: presúvanie blokov pri údržbe hárku by
    zalomenie vrátilo bez toho, aby sa čokoľvek „zmenilo".

    Zapisuje sa celá skratka `flex`, nie len `flex-basis`: rad má ostať širokým presne podľa svojho
    obsahu, teda bez rastu aj po prebití ktorýmkoľvek skorším pravidlom hlavičky.
*/
.gate-page-header.gate-form__part-header > .gate-inline {
    order: 0;
    flex: 0 1 auto;
}

/*
    DÔVOD VRÁTENIA ČASTI (nález 2026-09-07). Nie je to ďalší štítok do radu, ale VETA — voľný text
    na 2 000 znakov by z pilulky spravil odsek s obrysom. Dostáva preto vlastný riadok hlavičky:
    `flex: 1 0 100%` ho zalomí pod dvojicu nadpis + rad štítkov (hlavička je zalamovací flex a
    `align-items: center` platí pre každý riadok zvlášť, takže sa zvislé zarovnanie nikde
    nerozhádže), `order: 1` ho drží ZA radom štítkov, ktorý si tu berie `order: 0`. Rovnaké
    pravidlo platí na telefóne — hlavička sa zalamuje v každej šírke, vlastné mobilné pravidlo by
    len opakovalo to isté.

    Farbu má jedine menovka a je to `--gate-warning`, teda ten istý tón, aký nesie štítok stavu
    „Vrátená na dopracovanie" — riadok sa má čítať ako jeho pokračovanie, nie ako druhý nález.
    Znenie dôvodu ostáva bežným textom (pokyn na prečítanie, nie výstraha) a čas s autorom
    v zátvorke sú tlmené: hovoria, odkiaľ pokyn prišiel, nie čo treba spraviť.
*/
.gate-page-header.gate-form__part-header > .gate-form__part-return {
    flex: 1 0 100%;
    order: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gate-text);
}

.gate-form__part-return-label {
    font-weight: 600;
    color: var(--gate-warning);
    margin-right: .25rem;
}

.gate-form__part-return-meta {
    color: var(--gate-muted);
}

/* ── sekcia formulára ────────────────────────────────────────────────────── */

.gate-form__section {
    padding-top: var(--gate-space-6);
}

/*
    Nadpis sekcie je v predlohe DVOJICA: poradové číslo v akcentovom texte a názov verzálkami
    na 2 px linke. Číslo nie je ozdoba — je to jediná vec, ktorou sa dá v jedenásťsekciovom
    dokumente odvolať na miesto („doplňte sekciu 07"), a v tlačenej prílohe má rovnaký zmysel.
*/
.gate-form__section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: var(--gate-space-2);
    border-bottom: 2px solid var(--gate-divider);
}

.gate-form__section-no {
    flex: 0 0 auto;
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 12px;
    color: var(--gate-accent-text);
    font-variant-numeric: tabular-nums;
}

/*
    Názov sekcie. Verzálky sú tá istá vedomá výnimka ako pri predtexte obrazovky (`.gate-kicker`):
    prepis robí CSS, takže v DOM-e aj v prístupnostnom strome ostáva pôvodné znenie a čítačka ho
    neháskuje po písmenách. Sekcia je predel, nie nadpis obsahu — preto 12 px a nie hierarchická
    veľkosť; váhu jej dáva hmotnosť, rozstup písmen a linka pod ňou.

    Prvok je zároveň vlastný flex rad: názov vľavo, značka „len na čítanie" pri pravom okraji
    (predloha). Značka musí ostať VNÚTRI nadpisu — je to kontrakt komponentových testov.
*/
.gate-form__section .gate-form__section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Značka je údaj, nie nadpis — verzálky ani rozstup písmen si nepreberá. */
.gate-form__section .gate-form__section-title .gate-field__badge {
    flex: 0 0 auto;
    margin-inline-start: 0;
    font-family: var(--gate-font);
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
}

/* ── riadok poľa ─────────────────────────────────────────────────────────── */

/*
    RIADKOVÉ ROZVRHNUTIE (predloha). Jedno pole = jeden riadok: popis v ľavej bunke, ovládanie
    v pravej, pod nimi tenká linka. Predtým to bola mriežka troch stĺpcov, v ktorej pole
    s dlhým popisom stálo vedľa poľa s krátkym a rad polí nemal spoločnú os — v jedenástich
    sekciách prílohy č. 13 z toho bola mozaika, nie dokument.

    Vysvetlenie ide POD popis (ľavá bunka), chyby POD ovládanie (pravá) — čítajú sa v tom poradí,
    v akom sa s poľom pracuje. Ovládanie sa drží v prvom riadku mriežky, takže dlhé vysvetlenie
    ho neposunie nadol.

    Hustú mriežku si obrazovka, ktorá ju potrebuje, vypýta modifikátorom `--grid` nižšie.
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-statictext {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    align-items: start;
    gap: var(--gate-space-1) var(--gate-space-6);
    margin: 0;
    padding: var(--gate-space-4) 0;
    border-bottom: 1px solid var(--gate-divider);
    min-width: 0;
}

/*
    VYSVETLENIE OSTÁVA POD SVOJÍM POPISOM AJ PRI VYSOKOM OVLÁDAČI.

    Ľavý stĺpec sú DVA riadky (popis, vysvetlenie), pravý je JEDNA bunka cez oba
    (`.gate-field__main` = ovládanie + chyby). Druhý riadok je pružný, takže výška pravej bunky
    padne doňho a popis ani vysvetlenie sa nehnú: `align-self: start` ich drží pri hornej hrane
    svojich stôp. Bez toho narástol riadok 1 s ovládačom a vysvetlenie odplávalo o jeho výšku
    nižšie (namerané 40 px na `/formular/126c1496…`, 53 px na anonymizácii).

    Chyby sú vnútri pravej bunky, teda vždy tesne pod ovládaním — samostatnou položkou mriežky
    sa zarovnávali na spodok celého riadku (položka #126).
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field {
    grid-template-rows: min-content 1fr;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__label {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__help {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__main {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    min-width: 0;
}

/*
    Pravá bunka je stĺpec: ovládanie a pod ním chyby. Medzeru nesie `gap`, nie margin — chybový
    blok je podmienený a margin by po jeho zmiznutí ostal na ovládaní.
*/
.gate-field__main {
    display: flex;
    flex-direction: column;
    gap: var(--gate-space-1);
    min-width: 0;
}

/*
    „(povinné)" sa v riadkovom formulári odkrýva: má vlastnú bunku, takže z neho nevznikne
    prekážka v rade. Deklarácie rušia techniku `gate-visually-hidden` — prvok nesie obe triedy,
    aby ostal čitateľný pre čítačku obrazovky aj tam, kde ho vidieť nie je (viď poznámku pri
    `.gate-field__required-note` vyššie).

    PLATÍ AJ PRE SKUPINY (N6, poznámka pri položke #168). Prepínač, skupina volieb aj peňažná
    trojica niesli iba hviezdičku, kým každé bežné povinné pole na tej istej obrazovke malo pod
    popisom aj slovo — dva slovníky povinnosti v jednom formulári. Znenie je jedno, miesto je
    jedno; blokom sa stáva všade tam, kde má popis vlastnú bunku (pri prepínači je to bunka
    s jeho vlastným popisom, takže od neho neodíde ani pri 375 px).
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > label > .gate-field__required-note,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-checkgroup__legend > .gate-field__required-note,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-money__legend > .gate-field__required-note,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__label > .gate-field__required-note {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 11px;
}

/*
    ŠÍRKA OVLÁDANIA PODĽA DRUHU ÚDAJA (predloha). Pole cez celú šírku riadku sľubuje dlhú hodnotu:
    dátum, IČO ani sadzba DPH ju nemajú, a osemznakové IČO v 700 px poli vyzerá ako chyba
    vykreslenia. Triedu prideľuje `FormFieldRenderer` z typu poľa a jeho obmedzení, nie obrazovka.
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-date > .gate-field__main > .gate-field__control {
    max-width: 200px;
}

/* Čas je kratší než dátum: dva segmenty a dvojbodka, teda ani nie tri štvrtiny jeho miery. */
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-time > .gate-field__main > .gate-field__control {
    max-width: 150px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-short > .gate-field__main > .gate-field__control {
    max-width: 220px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-number > .gate-field__main > .gate-field__control {
    max-width: 260px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-select > .gate-field__main > .gate-field__control {
    max-width: 360px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-text > .gate-field__main > .gate-field__control {
    max-width: 560px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-area > .gate-field__main > .gate-field__control {
    max-width: 640px;
}

/*
    Tie isté miery aj pre polia poskladané RUČNE (editačné obrazovky mimo dynamického rendereru):
    trieda vyššie prichádza z definície formulára, ktorú tieto obrazovky nemajú. Strop je tu na
    samotnom ovládacom prvku, takže sa s triedou nebije — kto má oboje, dostane menší z nich.
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-date {
    max-width: 200px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-time {
    max-width: 150px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-select,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-select,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-combobox {
    max-width: 360px;
}

/*
    VÝNIMKA: VÝBER S DLHÝMI POLOŽKAMI. Strop 360 px vyššie stojí na PRVKU, kým miera podľa druhu
    údaja stojí na jeho OBALE — dva rôzne prvky, takže sa neprebíjajú a menší z nich vyhral vždy.
    Pole, ktoré si vypýtalo mieru dlhého textu (560 px), tak ostalo 360 px široké a zavretá
    hodnota sa v ňom orezala: „(bez čísla) — DEMO-VYZVA-01 — servis a údržba…" merala 500 px
    v 360 px rámčeku (položka #94). Trieda `--w-text` na poli je vedomé rozhodnutie o šírke —
    buď z definície cez `FormFieldRenderer` (voľba nad 40 znakov = 560 px, voľba ako celá veta
    nad 64 znakov = 640 px), alebo z obrazovky — a preto má prednosť pred plošným stropom. Strop
    nemizne, presúva sa na obal: `100 %` je 560, resp. 640 px.
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-text .gate-field__control > .gate-select,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-text .gate-field__control > fluent-select,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-text .gate-field__control > fluent-combobox,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-area .gate-field__control > .gate-select,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-area .gate-field__control > fluent-select,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field--w-area .gate-field__control > fluent-combobox {
    max-width: 100%;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-number,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-number-field {
    max-width: 260px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-input,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-text-field,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-search,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-field__readonly {
    max-width: 560px;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-text-area {
    max-width: 640px;
}

/*
    Skupiny s VLASTNOU vnútornou mriežkou (peňažná trojica, skupina volieb, prepínač, podpisová
    doložka). Rám a vlastné odsadenie im mizne, aby sa z nich v rade riadkov nestal orámovaný
    ostrov (predloha kreslí konečnú zmluvnú cenu ako štvoricu polí bez rámu).
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-money,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-signatures {
    margin: 0;
    padding: var(--gate-space-4) 0;
    border: 0;
    border-bottom: 1px solid var(--gate-divider);
}

/*
    SKUPINA JE RIADOK DEFINIČNEJ MRIEŽKY, nie odsek (R36, NEW-3; položky #39 a #143).

    Prepínač, skupina volieb aj peňažná trojica stáli v riadkovom formulári CELÉ v popisnom
    stĺpci (x ≈ 294…584) a ovládací stĺpec (626…1255) ostal prázdny — hoci každé textové pole
    na tej istej obrazovke dvojstĺpcové je. Pri skupine volieb a peňažnej trojici to nebolo
    zabudnutie, ale dôsledok `<fieldset>`: vykreslená legenda je prvok MIMO bežného toku, takže
    sa do bunky mriežky poslať nedá. Obidva komponenty preto od R36 kreslia `role="group"`
    a popis ako `<span>` (viď `Ui/GateCheckboxGroup.razor`, `Ui/GateMoneyField.razor`).

    Platí len od 641 px: pod ním je formulár jednostĺpcový a dotykový cieľ prepínača rieši R19.
*/
@media (min-width: 641px) {
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money {
        display: grid;
        grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
        align-items: start;
        gap: var(--gate-space-1) var(--gate-space-6);
    }

    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-checkgroup__legend,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-money__legend {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }

    /*
        SAMOSTATNÝ PREPÍNAČ MÁ ŠTVORČEK AJ SVOJ POPIS V JEDNEJ BUNKE (R53, položka #198).

        Dvojstĺpcový riadok z R36 vznikol pre SKUPINU volieb — tam je vľavo otázka a vpravo
        odpovede. Na osamotenom prepínači to isté pravidlo rozdelilo dvojicu, ktorá je jeden
        ovládací prvok: 16 px štvorček stál sám v ovládacom stĺpci (x = 626) a jeho znenie
        („Predmetom zmluvy sú ekologické vozidlá…") o 330 px vľavo v popisnom stĺpci, bez čohokoľvek,
        čo by ich spájalo. Pri 375 px sa pritom ten istý prvok kreslil správne ako `[štvorček] popis`,
        takže si dva výrezy protirečili.

        Štvorček aj popis preto obsadia DRUHÝ stĺpec a rovnaký riadok; popis si na štvorček nechá
        miesto ľavým odsadením, cez ktoré štvorček „presvitá". Je to jedna bunka, nie prekryv:
        odsadenie popisu je prázdna plocha a klik do nej patrí štvorčeku nad ňou (a inak popisu,
        ktorý prepína to isté). Ľavá bunka ostáva prázdna — rytmus riadkov sa nesmie zlomiť len
        preto, že tento ovládač popis vľavo nemá.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > input[type="checkbox"],
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > .gate-checkbox__box {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: start;
        margin-top: .25rem;
    }

    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > label:not(.gate-checkbox__box) {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        /* 16 px štvorček + .4rem medzera skupiny prepínačov — tá istá dvojica ako v riadku voľby. */
        padding-inline-start: calc(16px + .4rem);
    }

    /*
        Voľby skupiny sú samostatné riadky v pravej bunke — mriežka ich preto ukladá do jedného
        stĺpca pod seba (`grid-row: auto` by z každej voľby spravil ďalší riadok celej mriežky
        a popis by ostal osamotený hore).
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-checkgroup__item {
        grid-column: 2;
    }

    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-checkbox,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-money__grid {
        grid-column: 2;
    }

    /*
        Nápoveda patrí pod popis, teda do druhého riadku ĽAVÉHO stĺpca. Bez určeného riadku by ju
        automatické ukladanie posadilo vedľa POSLEDNEJ voľby (kurzor mriežky sa medzitým posunul
        na jej riadok) — teda o pol obrazovky nižšie než popis, ku ktorému patrí.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-field__help,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-field__help {
        grid-column: 1;
        grid-row: 2;
    }

    /*
        A KEĎ POPIS SKUPINY NIE JE VIDIEŤ, VYSVETLENIE JE V ĽAVEJ BUNKE SAMO — vtedy patrí do
        PRVÉHO riadku. Skupina volieb, ktorej legenda je ten istý text ako nadpis sekcie nad ňou,
        ju vypisuje len pre čítačku obrazovky (`FormSectionRenderer.SkupinaSNadpisomVLegende`).
        Skrytý popis je mimo toku, takže prestáva byť položkou mriežky a prvý riadok si výšku
        berie od PRVEJ VOĽBY v pravej bunke — vysvetlenie pripnuté do druhého riadku tak spadlo
        na os druhej voľby a v inak prázdnom stĺpci pôsobilo, akoby plávalo v strede riadku
        (`/formular/1ae0ef60…` §03 „Zdroj financovania / druh výdavku": jediná veta v ľavej bunke
        stála o voľbu nižšie než horná hrana zoznamu).

        Riešenie je zaradenie, nie zarovnanie: `align-self` posúva položku vnútri JEJ STOPY, a tá
        stopa je celá o riadok nižšie. Ostatné skupiny sa nemenia — pri viditeľnom popise ostáva
        vysvetlenie pod ním, kam patrí.
    */
    .gate-form__fields:not(.gate-form__fields--grid)
        > .gate-checkgroup:has(> .gate-checkgroup__legend.gate-visually-hidden)
        > .gate-field__help {
        grid-row: 1;
        align-self: start;
    }

    /*
        Vysvetlenie osamoteného prepínača ide pod JEHO POPIS, teda do druhého stĺpca (R53):
        ľavá bunka je zámerne prázdna, takže by tam nápoveda visela sama a od vety, ktorú
        vysvetľuje, by ju delila celá šírka popisného stĺpca.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > .gate-field__help {
        grid-column: 2;
        grid-row: 2;
        padding-inline-start: calc(16px + .4rem);
    }

    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > .gate-field__errors,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-field__errors,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-field__errors,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkbox > .gate-field__warnings,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-field__warnings,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-field__warnings {
        grid-column: 2;
    }
}

/*
    Podpisová doložka je obyčajný `<div>` (nie `<fieldset>`), takže sa do dvoch buniek rozdeliť
    dá — a v predlohe presne tak stojí: „Podpisy" vľavo, znenie vpravo.
*/
.gate-form__fields:not(.gate-form__fields--grid) > .gate-signatures {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    align-items: start;
    gap: var(--gate-space-1) var(--gate-space-6);
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-signatures > .gate-signatures__title {
    grid-column: 1;
    margin: 0;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-signatures > .gate-signatures__list,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-signatures > .gate-field__help {
    grid-column: 2;
    margin: 0;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-money > .gate-money__legend,
.gate-form__fields:not(.gate-form__fields--grid) > .gate-checkgroup > .gate-checkgroup__legend {
    padding-inline: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Statický právny text: popis vľavo, znenie vpravo — presne ako pole (predloha, „Vyhlásenie"). */
.gate-form__fields:not(.gate-form__fields--grid) > .gate-statictext > .gate-statictext__title {
    grid-column: 1;
    margin: 0;
    font-family: var(--gate-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
}

.gate-form__fields:not(.gate-form__fields--grid) > .gate-statictext > p {
    grid-column: 2;
    margin: 0;
    max-width: 76ch;
    font-size: 13px;
    text-wrap: pretty;
}

/* Posledný riadok sekcie linku nekreslí — pod ním je už rám ďalšej sekcie. */
.gate-form__fields:not(.gate-form__fields--grid) > :last-child {
    border-bottom: 0;
}

/*
    TELEFÓN: JEDEN STĹPEC A PORADIE ZO ZNAČKOVANIA (NEW-11, položka #113).

    Dve bunky sa na 375 px displej nezmestia. Pole preto prestáva byť mriežkou a stáva sa
    obyčajným stĺpcom — poradie tak určuje značkovanie, teda POPIS → (povinné) → NÁPOVEDA →
    OVLÁDANIE → CHYBY. Predtým to bola mriežka s určenými riadkami, v ktorej nápoveda spadla POD
    ovládanie: na desktope sa čítala pred ním, na telefóne za ním a tá istá obrazovka mala dve
    rôzne poradia čítania.
*/
@media (max-width: 640.98px) {
    /*
        `align-items` MUSÍ USTÚPIŤ SPOLU S MRIEŽKOU (R51, položky #167 a N1). Riadkové rozvrhnutie
        vyššie nastavuje `align-items: start` — v mriežke to znamená „drž popis pri hornej hrane
        svojej bunky", ale v STĹPCOVOM flexe je to priečna os, teda „každé dieťa len tak široké,
        aké je jeho vlastné písmo". Deklarácia sa mediálnym dopytom neprepisovala, takže sa ticho
        preniesla do jednostĺpcového rozvrhnutia a ovládače sa zmrštili na svoju prirodzenú šírku:
        odmerané v 343 px stĺpci 176 px pri textovom poli, 148 px pri dátume, 178 px pri sume —
        51–57 % plnenia a hodnoty orezané uprostred slova („DEMO — servis a"). Pod 641 px preto
        vypĺňa ovládač celý stĺpec; kindové šírky sú `max-width`, a tie sa nižšie rušia.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: var(--gate-space-3) 0;
    }

    /*
        A s ním aj `align-self` na jednotlivých bunkách — tá istá pasca o úroveň nižšie: mriežka
        ním drží popis, vysvetlenie aj ovládaciu bunku pri hornej hrane svojej stopy, v stĺpcovom
        flexe je to však šírka. Bez tohto riadku ostal celý blok ovládania (`.gate-field__main`)
        široký presne toľko, koľko jeho obsah — teda 178 px v 343 px poli, hoci samo pole už
        rozťahovať vedelo.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__label,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__help,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__main {
        align-self: stretch;
    }

    /*
        To isté pre skupiny s vlastnou stavbou. Statický právny text bol horší prípad tej istej
        chyby (N1, BLOKÁTOR): mriežka sa zúžila na jeden stĺpec, ale znenie si nechalo
        `grid-column: 2` z desktopu, takže si vyrobilo implicitný druhý stĺpec — a na popis
        v prvom stĺpci ostalo **0 px**. Popis z nulovej bunky vytiekol a vykreslil sa PRIAMO NA
        hodnote (odmerané na `/formular/dd6de8a8…` „Predmet podania": popis [16…16], znenie
        [22…359], teda úplný prekryv). Flexový stĺpec žiadne stĺpcové zaradenia nepozná, takže
        sa taká diera nemá kde vziať.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-statictext,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-signatures {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: var(--gate-space-3) 0;
    }

    /*
        Šírka podľa druhu údaja na telefóne neplatí — 220 px „krátke" pole je na 343 px displeji
        takmer celý riadok a rad polí by mal roztrhanú pravú hranu. Selektor musí mať tú istú
        váhu ako pravidlá `--w-*` vyššie (0,4,0), inak by ich mediálny dopyt neprebil.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field > .gate-field__main > .gate-field__control,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-statictext > p {
        max-width: none;
    }

    /*
        A ovládač v ňom si šírku nediktuje sám. Dátum aj výber majú vlastný strop (14 rem, resp.
        360 px) pre desktopový rad — na telefóne z neho vznikne druhá pravá hrana vedľa textových
        polí, ktoré idú po okraj. Zoznam je menovitý a mieri na prvky, nie na obal: strop na obale
        ruší pravidlo vyššie, tento ruší strop na samotnom ovládači.
    */
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-date,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-time,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-select,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-select,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-combobox,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-text-field,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-search,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-number-field,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > fluent-text-area,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-number,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-input,
    .gate-form__fields:not(.gate-form__fields--grid) > .gate-field .gate-field__control > .gate-field__readonly {
        max-width: none;
        width: 100%;
    }
}

/*
    PREHĽAD LEN NA ČÍTANIE (predloha, sekcia „Overenie oprávnenia a zápisu v registroch ÚVO").
    Sekcia, v ktorej sa nedá vyplniť nič, nie je rad vstupov — je to výpis. Kreslí sa preto ako
    mriežka buniek s linkami: popis 12 px tlmene, hodnota 14 px, plocha vstupu mizne. DOM sa
    nemení (tie isté polia, tie isté identifikátory), mení sa len rozvrhnutie.
*/
.gate-form__fields.gate-form__fields--readonly {
    display: grid;
    /* Dva stĺpce ako v predlohe; pod ~46 rem sa mriežka zloží do jedného (`min(100%, …)`). */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
    border-inline-start: 1px solid var(--gate-divider);
}

.gate-form__fields.gate-form__fields--readonly > .gate-field {
    display: block;
    margin: 0;
    min-width: 0;
    padding: var(--gate-space-3) var(--gate-space-4);
    border-inline-end: 1px solid var(--gate-divider);
    border-bottom: 1px solid var(--gate-divider);
}

/*
    NEPÁRNY POČET BUNIEK UZATVÁRA POSLEDNÁ BUNKA CEZ OBA STĹPCE. Pri piatich údajoch boli prvé
    dva riadky plné a tretí mal vyplnenú len ľavú bunku — obdĺžnik mriežky tak mal vpravo dole
    vyrezaný zárez a čítal sa ako nedokreslený (kontrola 2026-08-19, položka #29, sekcia 08
    „Overenie oprávnenia a zápisu v registroch ÚVO"). Pri jednostĺpcovej mriežke (úzky výrez)
    je pravidlo neškodné — jeden stĺpec je `1 / -1` aj tak.
*/
.gate-form__fields.gate-form__fields--readonly > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.gate-form__fields.gate-form__fields--readonly > .gate-field > .gate-field__label {
    display: block;
    margin-bottom: var(--gate-space-1);
    font-size: 12px;
    font-weight: 400;
    color: var(--gate-muted);
}

/*
    ÁNO/NIE V PREHĽADE. Prepínač nemá obal `.gate-field`, takže by v mriežke prehľadu ostal
    jedinou bunkou bez linky a bez odsadenia — dierou v inak pravidelnej mriežke. Kresba bunky je
    tá istá ako pri ostatných poliach; popis si prepínač nesie vedľa seba (je to veta o stave, nie
    hodnota pod menom údaja), preto sa neprepisuje na tlmený riadok nad hodnotou.
*/
.gate-form__fields.gate-form__fields--readonly > .gate-checkbox {
    margin: 0;
    min-width: 0;
    align-items: start;
    padding: var(--gate-space-3) var(--gate-space-4);
    border-inline-end: 1px solid var(--gate-divider);
    border-bottom: 1px solid var(--gate-divider);
    font-size: 14px;
}

/*
    HODNOTA LEN NA ČÍTANIE JE TEXT, NIE PLOCHA VSTUPU — v prehľade aj v riadkovom formulári.

    Plochu vstupu jej dovtedy kreslila trieda `.gate-field__readonly` a jej ŠÍRKU určoval druh
    údaja (dátum 200 px, suma 260 px, výber 360 px, text 560 px) — teda pravidlo, ktoré má zmysel
    pre POLE, do ktorého sa píše. V zamknutej sekcii z toho vznikol stĺpec orámovaných obdĺžnikov
    rôznej šírky, v ktorých stála samá pomlčka: roztrhaná pravá hrana a päť sľubov písania naraz
    (vizuálny audit častí PNVO, sekcia „Stanovenie PHZ v rámci jedného postupu podľa § 108").

    Čísla sa zarovnávajú na začiatok: zarovnanie doprava je idióm TABUĽKY, kde pod sebou stoja
    ďalšie čísla (a tam ostáva — viď pravidlo pri bunkách). Osamotená suma odtlačená k pravému
    okraju bunky sa od svojho popisu vzďaľuje o pol obrazovky; `tabular-nums` ostáva.
*/
/*
    JEDNO STVÁRNENIE V CELOM FORMULÁRI (R55, položky #106 a #197). Selektor bol viazaný na
    PRIAMEHO potomka `.gate-form__fields`, takže pole vnorené hlbšie — hodnota vnútri peňažnej
    trojice, pole v podskupine — z pravidla vypadlo a vrátilo sa k základnému orámovanému
    políčku: na `/komunikacia/{id}` tak stáli dve zamknuté hodnoty v rámčeku vedľa desiatok
    hodnôt bez neho (odmerané: `border-top-width: 1px` proti `0px`). Hĺbka vnorenia o vzhľade
    hodnoty nerozhoduje — rozhoduje, či stojí vo formulári (riadok/mriežka prehľadu) alebo
    v bunke tabuľky, a tá si kompaktné stvárnenie drží špecifickejším pravidlom v sekcii tabuliek.
*/
.gate-form__fields.gate-form__fields--readonly .gate-field__readonly,
.gate-form__fields:not(.gate-form__fields--grid) .gate-field__control > .gate-field__readonly {
    /*
        Výška radu ostáva, plocha vstupu mizne. Nula tu bola prehnaná: riadok so zamknutou
        hodnotou mal 119 px proti ~69 px susedov, lebo text nemal výšku ovládacieho prvku a
        mriežka sa okolo neho stiahla — v stĺpci ovládania z toho bola diera (kontrola
        2026-08-19, položka #74). 36 px je miera celého radu ovládacích prvkov.

        HODNOTA ZAČÍNA HORE, NIE NA STREDE (dodatok D5 kontroly kola 5). Stredová os platila len
        pre jednoriadkovú podobu, kým viacriadková (pravidlo hneď nižšie) začínala hore — tá istá
        vec teda mala dve podoby a rozhodovalo o tom, ktorý obal ju vykreslil, nie čo čitateľ
        vidí: vypočítaná hodnota v §04 stála ~10 px pod svojím popisom, kým hodnota v §01 s ním
        lícovala. 7 px odsadenia nie je nové číslo — je to hodnota viacriadkovej podoby a kladie
        prvý riadok textu presne tam, kam ho kladie skutočný 36 px vstup (6 px odsadenie + 1 px
        obrys), takže zamknutá hodnota a živé pole v jednom stĺpci začínajú na jednej osi.
    */
    display: flex;
    align-items: flex-start;
    min-height: 36px;
    padding-block: 7px;
    padding-inline: 0;
    border: 0;
    background: transparent;
    text-align: start;
}

/* Viacriadková hodnota začína hore — na strede by odsek „plával" v roztiahnutej bunke. */
.gate-form__fields.gate-form__fields--readonly .gate-field__readonly--multiline,
.gate-form__fields:not(.gate-form__fields--grid) .gate-field__control > .gate-field__readonly--multiline {
    display: block;
    padding-block: 7px;
}

/*
    HUSTÁ MRIEŽKA — pôvodné rozvrhnutie, ktoré si obrazovka vypýta modifikátorom. Panel s dvoma
    krátkymi poľami vedľa seba (úkon v karte registra) je v riadkovom rozvrhnutí zbytočne vysoký:
    tam je mriežka správna odpoveď.
*/
.gate-form__fields--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0 1rem;
}

/*
    Pole, ktoré potrebuje celý riadok — dlhý text (odôvodnenie, opis predmetu). V troch stĺpcoch
    z neho ostal úzky stĺpik s popisom na štyri riadky nad ním.
*/
.gate-form__fields--grid > .gate-field--wide {
    grid-column: 1 / -1;
}

/*
    Peňažná trojica má VLASTNÚ mriežku (cena bez DPH, sadzba, výška DPH, cena s DPH). Vtesnaná do
    jednej bunky mriežky formulára sa z nej stane vysoký orámovaný stĺpec, vedľa ktorého ostanú
    dve nízke polia a pod nimi diera na polovicu obrazovky (UAT N-0107). Vo vlastnom riadku sa jej
    polia rozložia vodorovne a skupina sedí v rytme formulára.
*/
.gate-form__fields--grid > .gate-money--wide {
    grid-column: 1 / -1;
}

/*
    V mriežke formulára určuje šírku vstupu STĹPEC, nie samotný prvok. Dátum a číselné pole majú
    inak vlastný strop (14 rem / 18 rem), ktorý mal zabrániť tomu, aby boli dlhšie než ich obsah —
    v mriežke s ~19 rem stĺpcami z toho ale vznikli roztrhané pravé hrany: text a výber siahali po
    okraj stĺpca, dátum a suma končili o kus skôr (nález vizuálneho auditu: „Zaevidovať poverenie",
    „Potvrdenie finančného krytia"). Strop preto v mriežke neplatí — mimo nej (detaily, panely
    filtrov) ostáva v platnosti.
*/
.gate-form__fields .gate-field__control > .gate-date,
.gate-form__fields .gate-field > .gate-date,
.gate-form__fields .gate-field__control > .gate-time,
.gate-form__fields .gate-field > .gate-time {
    max-width: none;
}

.gate-form__fields .gate-number__input {
    max-width: none;
}

.gate-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gate-timeline__item {
    border-inline-start: 2px solid var(--gate-divider);
    padding: .35rem 0 .75rem .75rem;
}

.gate-timeline__item--reject {
    border-inline-start-color: var(--gate-danger);
}

.gate-timeline__item--approve {
    border-inline-start-color: var(--gate-success);
}

.gate-timeline__meta {
    font-size: .8125rem;
    color: var(--gate-muted);
}

.gate-timeline__trace {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    white-space: pre-wrap;
}

.gate-json-editor {
    width: 100%;
    min-height: 22rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8125rem;
}

.gate-diff {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    white-space: pre;
    overflow-x: auto;
}

.gate-diff__added {
    background: var(--gate-diff-added);
}

.gate-diff__removed {
    background: var(--gate-diff-removed);
}

/* ── potvrdenie nezvratného úkonu (Ui/GateConfirmDialog.razor) ────────────────────────────── */

/*
    Rozmery a plocha dialógu. `FluentDialog` si vpisuje `--dialog-width: 500px` priamo do
    štýlu prvku (inline), takže tú premennú z hárku prepísať nemožno — ide sa cez `::part(control)`:
    vonkajší štýl má v kaskáde prednosť pred pravidlami tieňového stromu, ktoré z premennej
    počítajú. Strop podľa výrezu je povinný — pevných 500 px na 375 px širokej obrazovke znamená
    vodorovný posun (WCAG 2.1 AA, 1.4.10 Reflow). Umiestnenie a `z-index` (999, teda nad lepkavou
    lištou rámu) rieši komponent sám, tie sa tu nepreberajú.
*/
fluent-dialog.gate-dialog::part(control) {
    /*
        `width` A `padding` POTREBUJÚ `!important`. Odmerané v prehliadači: z tohto bloku sa
        uplatnia `box-sizing`, `max-height`, `overflow`, `margin-block` aj `border`, ale `width`
        a `padding` NIE — panel ostal 452 px so 24 px odsadením namiesto 440/16 (kontrola kola 2,
        položka #98). Zdroj prebitia nie je v žiadnom hárku stránky ani v prijatých hárkoch
        tieňového stromu (prehľadané všetky); rovnaké pravidlo vložené do dokumentu NESKÔR sa
        pritom uplatní. Je to tá istá trieda problému, akú má blok Fluent tokenov na začiatku
        hárku — a `!important` je jediná vrstva kaskády, ktorá sa dá zapísať v hárku.
    */
    /* `box-sizing` — bez neho sa 16 px odsadenie pripočíta k šírke a strop podľa výrezu neplatí. */
    box-sizing: border-box;
    /*
        440 px je miera zo špecifikácie (§5.8) — tá istá, akú má paleta Ctrl+K nižšie; 32 rem
        = 512 px bolo o pätinu viac a dva prekryvy tej istej sústavy mali dve rôzne šírky
        (kontrola kola 2, položka #98).
    */
    width: min(440px, calc(100vw - 2rem)) !important;
    height: auto;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 16px !important;
    border: 0;
    border-radius: var(--gate-radius-panel);
    background: var(--gate-surface);
    box-shadow: var(--gate-shadow-lg);
}

/*
    Scrim oboch modálnych prekryvov (hodnota a dôvod: token --gate-scrim). Knižnica kreslí
    prekryvnú vrstvu priehľadnú, takže stránka za dialógom ostávala v plnom kontraste a
    o pozornosť sa s ním prela — najviac to bolo vidieť na palete Ctrl+K nad rozcestníkom.
    Adresuje sa `::part(overlay)` z tieňového stromu; klik na scrim rieši knižnica (dismiss),
    tu sa mení len plocha.
*/
fluent-dialog.gate-dialog::part(overlay),
fluent-dialog.gate-quicknav::part(overlay) {
    background: var(--gate-scrim);
}

.gate-dialog__title {
    margin: 0;
    font-family: var(--gate-font-heading);
    font-weight: var(--gate-heading-weight);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.gate-dialog__body {
    margin-top: .75rem;
    font-size: 14px;
    opacity: .85;
}

/*
    VAROVANIE PRED DÔSLEDKOM ÚKONU (R3-N2, 23. 9. 2026) — slot `LeadContent` potvrdzovacieho
    dialógu, ktorý nesie varovný `GateMessage` (napr. „Určenie uzatvárate s týmito
    upozorneniami:"). Stojí pod otázkou a MIMO tela: telo je tlmené (`opacity: .85`) a varovanie,
    ktoré sa má prečítať prvé, nesmie byť tichšie než veta o dôsledku pod ním. Odrážky v ňom
    majú odsadenie výpočtu pod poľom, aby dva zoznamy tej istej povahy nevyzerali každý inak.
*/
.gate-dialog__lead {
    margin-top: .75rem;
}

.gate-dialog__lead ul {
    margin: .25rem 0 0;
    padding-inline-start: 1.1rem;
}

.gate-dialog__message {
    margin: 0;
}

/*
    VÝPOČET V TELE DIALÓGU — veci, ktoré si má používateľ prejsť pred nezvratným úkonom (napr.
    zmeny nadriadeného v zozname adresátov pred odoslaním výzvy). Guľôčky tu ostávajú: je to naozaj
    odrážkový výpočet viet, nie rad ponúk na výber, ktorým je `.gate-list`. Odsadenie je to isté
    ako pri výpočte chýb pod poľom, aby dva zoznamy tej istej povahy nevyzerali každý inak.
    Upozornenia potvrdenia uzavretia určenia PHZ sem od R3-N2 nepatria — stoja vo varovnom bloku
    `.gate-dialog__lead` nad telom.
*/
.gate-dialog__bullets {
    margin: 0;
    padding-inline-start: 1.1rem;
}

/*
    POPIS POĽA V DIALÓGU JE POPIS POĽA, NIE ĎALŠIA VETA (dodatok D1 kontroly kola 5). Tlmených
    13 px hneď 12 px pod vetou dialógu splynulo s behovým textom, takže povinné odôvodnenie
    nezvratného úkonu vyzeralo ako pokračovanie odseku a nie ako niečo, čo treba vyplniť.
    Miera je odteraz tá istá ako pri poli formulára (14 px / 600, plná farba textu — telo dialógu
    má `opacity: .85`, preto sa farba musí uviesť výslovne) a pole sa od vety oddeľuje celým
    odstupom bloku, nie polovičným.
*/
.gate-dialog__reason-label {
    margin: 1.25rem 0 .375rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--gate-text);
}

/*
    Zopakovaný dôvod je CITÁT toho, čo používateľ napísal — nie ďalšia veta aplikácie. Zvislá
    linka a odsadenie ho odlíšia od textu dialógu; `pre-wrap` zachová jeho vlastné zalomenia
    a `overflow-wrap` udrží dlhé slovo vnútri dialógu (WCAG 2.1 AA, 1.4.10 Reflow).
*/
.gate-dialog__reason {
    margin: 0;
    padding: .35rem 0 .35rem .75rem;
    border-inline-start: 2px solid var(--gate-divider);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
    ODSTUP NAD BLOKOM POĽA. Doplnkový obsah dialógu je spravidla pole s odôvodnením (skartácia
    spisu, stiahnutie definičnej sady) a stálo hneď pod vetou dialógu bez jediného pixla vlastného
    odstupu: odmerané 8 px pri 1280 a 11 px pri 375, teda menej než rozostup riadkov samotného
    odseku (10 px) — popis poľa sa preto čítal ako posledný riadok vety, nie ako niečo, čo treba
    vyplniť (kontrola kola 7).

    Predošlá náprava (D1) odstup pridala nad POPIS ZOPAKOVANÉHO DÔVODU, čo je iné pásmo dialógu —
    a to sa navyše pri prázdnom dôvode nevykresľuje vôbec, takže na vzdialenosť vety od poľa
    nemala vplyv. Odstup patrí NAD CELÝ BLOK poľa; pod popis sa pridať nesmie, lebo medzera medzi
    popisom a jeho nápovedou drží dvojicu pokope.
*/
.gate-dialog__body > .gate-field {
    margin-top: var(--gate-space-4);
}

/*
    Voľby dialógu stoja pri PRAVOM okraji panela (predloha). Vľavo ich čítalo oko hneď po nadpise,
    teda skôr než vetu o tom, čo sa chystá stať — a pri nezvratnom úkone je poradie „najprv veta,
    potom tlačidlo" celá pointa potvrdenia. Zvyšok radu (medzera, zalamovanie) drží `.gate-actions`,
    ktoré je na tom istom prvku.
*/
.gate-dialog__actions {
    margin-top: 1.25rem;
    justify-content: flex-end;
}

/*
    VÝBER ZÁZNAMU Z REGISTRA V POLI FORMULÁRA (`Ui/GateEntityPicker`, UAT report 4, 25. 9. 2026).
    V bunke tabuľky stojí meno prepojeného subjektu a pod ním jediné tlačidlo — obidve sa zalamujú
    na šírku stĺpca, takže šesťstĺpcová tabuľka návrhu hospodárskych subjektov nedostane vodorovný
    posun. Popis tlačidla sa zalamuje v bunke pri každej šírke (tá istá úvaha ako pri úkone v riadku
    poľa, R2-N2): tieňový strom FluentUI ho inak drží na jednom riadku a obsah pretečie.
*/
.gate-entity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    min-width: 0;
}

.gate-entity__name {
    margin: 0;
    overflow-wrap: anywhere;
}

.gate-entity fluent-button {
    max-width: 100%;
}

.gate-entity fluent-button::part(control) {
    white-space: normal;
    text-align: start;
}

/*
    Zhody v dialógu sú RAD PONÚK (`.gate-list`), nie odrážkový text: celé tlačidlo je cieľ výberu,
    meno je prvý riadok a IČO s prípadným stavom druhý, tlmený. Na 375 px sa meno zalomí, nie
    pretečie za okraj panela.
*/
.gate-entity__hits > li + li {
    margin-top: .375rem;
}

.gate-entity__hits fluent-button {
    width: 100%;
}

.gate-entity__hits fluent-button::part(control) {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
    text-align: start;
}

.gate-entity__hit-title {
    display: block;
    font-weight: 600;
}

.gate-entity__hit-detail {
    display: block;
    color: var(--gate-muted);
    font-size: 13px;
}

.gate-entity__intro {
    margin-top: .5rem;
}

/*
    Druhá cesta dialógu (verejný register) je oddelená linkou — je to iný zdroj údajov a iný
    výsledok (bez väzby na register), nie pokračovanie zoznamu zhôd.
*/
.gate-entity__more {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gate-divider);
}

.gate-entity__subtitle {
    margin: 0 0 .25rem;
    font-size: 16px;
    font-weight: 600;
}

/* ── navigačná cesta, skok na obsah a deštruktívne tlačidlo ──────────────── */

/*
    Skok na obsah (MainLayout.razor). Skrytý je tou istou technikou ako `.gate-visually-hidden`
    vyššie — 1 × 1 px s orezaním, teda prvok, ktorý klávesnica aj čítačka obrazovky NÁJDU (na
    rozdiel od `display: none`). Odsun doľava je zámerne nulový: klasické `margin: -1px` by pri
    kontrole „text mimo okna" vyzeralo ako pretečenie stránky.
*/
.gate-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    text-decoration: none;
}

/*
    Po zaostrení je to plnohodnotná tabletka v ľavom hornom rohu OKNA (`fixed`, nie `absolute`):
    stránka môže byť odrolovaná a skratka musí byť tam, kde ju človek čaká. Podklad je plocha
    bočného panela — tá je tmavá v OBOCH schémach, takže biely text na nej drží kontrast bez
    druhej sady farieb. `z-index` je nad lepkavým panelom (20) aj hornou lištou (1), ale pod
    dialógom (999) a núdzovou lištou rámu (1000): skratka nesmie prekryť správu o chybe.
*/
.gate-skip-link:focus-visible {
    position: fixed;
    z-index: 900;
    width: auto;
    height: auto;
    clip: auto;
    margin: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--gate-radius);
    background: var(--gate-nav-bg);
    color: var(--gate-nav-fg);
    font-size: 14px;
    /*
        Prstenec musí byť aj tu. Skratka je PRVÁ vec, ktorú používateľ klávesnice na stránke
        stlačí, a dostávala predvolený 1 px čierny obrys prehliadača — teda inú kresbu než
        všetko ostatné v aplikácii (kontrola 2026-08-19, položka #14). Tmavá tabletka na ploche
        stránky si akcentový prstenec s odstupom nesie bez straty kontrastu.
    */
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/*
    Navigačná cesta (Components/Layout/Breadcrumb.razor). Je to orientácia, nie nadpis — preto
    tlmené písmo a žiadna vlastná farba nad rámec tokenov, ktoré majú overený kontrast v oboch
    schémach.

    Od redizajnu je to samostatný PÁS pod hornou lištou, nie riadok vnútri obsahu: cesta patrí
    k rámu (kde som), nie k stránke (čo tu je), a linka pod ňou oddeľuje tmavú chrómu od plochy
    obsahu. Odsadenie je preto rovnaké ako v lište a v obsahu, aby všetky tri pásma stáli na
    jednej zvislej osi.
*/
.gate-breadcrumb {
    display: flex;
    align-items: center;
    padding: 10px 1rem;
    border-bottom: 1px solid var(--gate-divider);
    font-size: 12px;
    color: var(--gate-muted);
}

@media (min-width: 641px) {
    .gate-breadcrumb {
        padding-inline: 24px;
    }
}

/* Široký monitor — cesta drží rovnaký ľavý okraj ako obsah pod ňou (MainLayout.razor.css). */
@media (min-width: 1800px) {
    .gate-breadcrumb {
        padding-inline: 3.5rem;
    }
}

/*
    Zalamovanie je povinné: na 375 px širokej obrazovke sa štvorpoložková cesta do riadka
    nezmestí a bez `wrap` by roztiahla stránku do vodorovného posunu (WCAG 2.1 AA, 1.4.10).
    Medzeru medzi položkami nesie `gap`, nie biele miesto v značkovaní — to Razor okolo `@if`
    zahadzuje (rovnaký dôvod ako pri `.gate-inline`).
*/
.gate-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    Výška 24 px (vrátane odsadenia) je dotykový cieľ podľa WCAG 2.2 AA, 2.5.8 — samotný riadok
    písma má sotva 18 px a na telefóne sa doň používateľ netrafí. Platí pre celý rad, aby sa
    položky cesty nerozbehli po výške.
*/
.gate-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

/*
    Odkaz v ceste dedí tlmenú farbu pásu (predloha) a akcent si berie až pod kurzorom: rad
    modrých/červených odkazov nad každou obrazovkou by preťahoval oko na orientáciu namiesto
    na obsah. Že je to odkaz, hovorí kurzor, podčiarknutie pod myšou a rola v strome.
*/
.gate-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding-inline: .125rem;
    border-radius: var(--gate-radius);
    color: inherit;
    text-decoration: none;
    touch-action: manipulation;
}

.gate-breadcrumb__link:hover {
    color: var(--gate-accent-text);
    text-decoration: underline;
}

.gate-breadcrumb__link:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/* Oddeľovač je kresba — v prístupnostnom strome nie je (`aria-hidden` v komponente). */
.gate-breadcrumb__sep {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--gate-muted);
}

/*
    Aktuálna obrazovka je v plnej farbe textu a zámerne NIE JE tučná: v páse tlmených odkazov ju
    odlíši už samotný jas (predloha), takže hrúbka je zbytočný druhý signál.
*/
.gate-breadcrumb__current {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--gate-text);
}

/*
    Deštruktívne tlačidlo (`GateButtonVariant.Danger`). Wrapper mu dáva Fluent vzhľad `outline`,
    takže sa doteraz kreslilo ÚPLNE rovnako ako sekundárne — červený tón bol len sémantika v C#
    a na obrazovke po ňom nebolo ani stopy (poznámka pri UAT N-0100).

    Farbu textu preberá tieňový strom sám: `.control` má `color: inherit`, takže stačí prefarbiť
    hostiteľa. Obrys treba adresovať cez `::part(control)` — vonkajší hárok má v kaskáde prednosť
    pred pravidlami tieňového stromu, ktoré obrys kreslia z akcentového tokenu.

    Podfarbenie pod kurzorom drží tiež hostiteľ: vzhľad `outline` si vpisuje
    `background: transparent !important` priamo do `.control` a DÔLEŽITÉ pravidlo tieňového stromu
    sa zvonku prebiť nedá. Priehľadná výplň ale znamená, že cez ňu vidno podklad hostiteľa — tint
    je preto na ňom a zaobľuje sa tým istým polomerom (`border-radius` má hostiteľ z Fluent
    tokenu). Sila 8 % a zápis cez `color-mix` sú tie isté ako pri štítkoch stavov.

    Vypnuté tlačidlo si obrys PONECHÁVA — pravidlo je vyššie v sekcii tlačidiel
    (`gate-button--danger[disabled]`). Selektor `:not([disabled])` tu ostáva preto, že hover
    a stav pokoja majú vlastné znenia; tvar sa medzi stavmi nemení, mení sa priehľadnosť.
*/
fluent-button.gate-button--danger:not([disabled]) {
    color: var(--gate-danger);
}

fluent-button.gate-button--danger:not([disabled])::part(control) {
    border-color: var(--gate-danger);
}

fluent-button.gate-button--danger:not([disabled]):hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ── rýchla navigácia Ctrl+K (Ui/GateQuickNav.razor + Components/Layout/QuickNav.razor) ──── */

/*
    Tlačidlo v hornej lište — vyhľadávacie „políčko", ktoré nič nepýta, len otvorí paletu.
    Je TICHÉ a natívne (nie GateButton): lišta nesie identitu prihláseného, nie akcie obrazovky.
    Stojí na TMAVEJ ploche lišty, takže obrys aj text idú z farieb rámu (`--gate-nav-*`), nie
    z farieb obsahu — inak by v lište svietil svetlý obdĺžnik. Výška 2 rem je nad hranicou
    24 × 24 px pre veľkosť cieľa (WCAG 2.2 AA, 2.5.8), na dotyku sa rozťahuje na 44 px nižšie.
*/
.gate-quicknav-opener {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 5px 9px;
    border: 1px solid var(--gate-nav-border);
    border-radius: var(--gate-radius);
    background: transparent;
    color: var(--gate-nav-fg);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    /* Bez toho čaká dotykový prehliadač na dvojklik a tlačidlo reaguje s oneskorením ~300 ms. */
    touch-action: manipulation;
    transition: border-color 120ms ease, color 120ms ease;
}

.gate-quicknav-opener:hover {
    border-color: var(--gate-accent);
    color: var(--gate-accent-400);
}

.gate-quicknav-opener:focus-visible {
    outline: 2px solid var(--gate-accent);
    outline-offset: 2px;
}

/* Lupa je kresba — význam nesie slovo vedľa nej (`aria-hidden` v komponente). */
.gate-quicknav-opener__icon {
    flex: 0 0 auto;
    display: block;
}

/*
    Popis je tlmený, ale nie neviditeľný: 70 % svetlej farby na tmavej lište drží 8,4 : 1.
    Priehľadnosť namiesto vlastnej farby je zámer — pod kurzorom sa celé tlačidlo prefarbí
    na akcent naraz a popis ide s ním.
*/
.gate-quicknav-opener__label {
    opacity: .7;
}

/*
    Nápoveda skratky. Vlastné pozadie ani obrys nemá zámerne — je to šepot vedľa popisu, nie
    druhé tlačidlo; nadpisové písmo ju odlíši od slova pred ňou. Pre čítačku obrazovky je skrytá
    (`aria-hidden` v komponente): prístupný názov tlačidla skratku už nesie.
*/
.gate-quicknav-opener__hint {
    border: 0;
    padding: 0;
    opacity: .5;
    font-family: var(--gate-font-heading);
    font-size: 11px;
    line-height: 1.4;
}

/*
    Hostiteľ dialógu je vyňatý z toku (`absolute`): stojí v hornej lište, ktorá je flex kontajner
    s medzerou 1 rem, takže aj prvok s nulovou plochou by do nej vniesol 16 px medzery navyše —
    a to práve vtedy, keď je paleta otvorená. Vzhľadu sa to nedotkne: vlastná plocha dialógu
    (`positioning-region`) je `position: fixed` z knižnice.
*/
fluent-dialog.gate-quicknav {
    position: absolute;
}

/*
    FAREBNÝ SVET DIALÓGU JE SVET OBSAHU, NIE JEHO HOSTITEĽA. Paletu Ctrl+K stavia rám v hornej
    lište, ktorá je tmavá — a dialóg je v strome jej dieťaťom, takže z nej zdedil SVETLÉ písmo
    a na svetlom paneli palety zmizli všetky položky okrem vybranej (odmerané: text #f3f2f2 na
    ploche #eae9e9). Prekryv sa pritom vykresľuje nad celým výrezom, nie v lište; jeho farby
    preto musia byť deklarované, nie zdedené. Platí pre oba dialógy — potvrdzovací sa dnes
    kreslí v obsahu, ale zajtra ho môže otvoriť tlačidlo v lište.
*/
fluent-dialog.gate-quicknav,
fluent-dialog.gate-dialog {
    color: var(--gate-text);
}

/*
    Paleta stojí PRI HORNOM okraji, nie v strede okna: oko sa po otvorení nemusí presúvať dole
    a späť hore k výsledkom, a na nízkom okne ju neodtlačí klávesnica telefónu. Predvolené
    centrovanie drží `margin: auto` na samotnom dialógu, preto sa musí prebiť oboje —
    zarovnanie oblasti aj margin.
*/
/*
    PALETA ZAČÍNA PRESNE POD LIŠTOU. Odsadenie 6 vh bolo 48 px v 800 px okne, teda o 8 px vyššie
    než spodná hrana 56 px lišty — panel jej posledný pás prekryl a počas hľadania sa nedalo
    povedať, kde v aplikácii človek je (položka #124). Náprava potom prestrelila opačným smerom:
    s medzerou 8 px navyše začínal panel na y = 64, teda 7 px POD hlavičkou, a medzi rámom
    a prekryvom ostal pruh stránky, cez ktorý presvitala obrazovka pod ním (kolo 3, #124).
    R39 žiada lícovanie: horná hrana panela = spodná hrana lišty. Lišta má rovnakú výšku na
    desktope aj na telefóne, takže hodnotu nesie ten istý token.
*/
fluent-dialog.gate-quicknav::part(positioning-region) {
    align-items: flex-start;
    padding-block: var(--gate-nav-bar-h, 3.5rem) 1.5rem;
}

fluent-dialog.gate-quicknav::part(control) {
    /*
        Strop podľa výrezu je povinný — pevná šírka na 375 px širokej obrazovke znamená vodorovný
        posun (WCAG 2.1 AA, 1.4.10 Reflow). Rovnaký zápis ako pri potvrdzovacom dialógu vyššie.
        440 px je miera zo špecifikácie (§5.8); 34 rem = 544 px bolo o tretinu viac, než paleta
        potrebuje — sú to krátke názvy obrazoviek, nie vety (kontrola 2026-08-19, položka #47).

        `box-sizing` je nutné: bez neho sa 16 px odsadenie pripočíta k šírke a z „440" je 472.
    */
    box-sizing: border-box;
    /* `!important` — z rovnakého dôvodu ako pri potvrdzovacom dialógu vyššie. */
    width: min(440px, calc(100vw - 2rem)) !important;
    height: auto;
    /* Rovnaká aritmetika ako odsadenie oblasti vyššie — inak by panel prerástol výrez. */
    max-height: calc(100vh - var(--gate-nav-bar-h, 3.5rem) - 1.5rem);
    margin-block: 0;
    overflow: hidden;
    padding: 16px !important;
    border: 0;
    border-radius: var(--gate-radius-panel);
    background: var(--gate-surface);
    box-shadow: var(--gate-shadow-lg);
}

/*
    Panel si berie výšku dialógu, aby sa posúval LEN zoznam a pole hľadania ostalo na mieste.
    Od výšky prekryvu sa MUSÍ odrátať jeho 16 px odsadenie zhora aj zdola: bez toho bol panel
    o 16 px vyšší než jeho obsahová krabica a spodné pásmo — riadok klávesovej nápovedy — sa
    orezalo napoly hranou dialógu (odmerané: panel 688 px v 672 px krabici, položka #99).
*/
.gate-quicknav__panel {
    /*
        MIERY PALETY NA JEDNOM MIESTE. Výšku zoznamu treba dopočítať (viď `.gate-quicknav__results`)
        a bez pomenovaných hodnôt by sa tá istá aritmetika opisovala tretíkrát — pri zmene výšky
        riadku alebo pätičky by sa ticho rozišla:
          • `--gate-quicknav-row`    — výška jedného riadku zoznamu (aj popisu skupiny),
          • `--gate-quicknav-chrome` — všetko ostatné v paneli: pole hľadania, medzera nad zoznamom
            a pätička s nápovedou (s rezervou na jej zalomenie do dvoch riadkov),
          • `--gate-quicknav-max`    — výška, ktorú panelu necháva prekryv.
        Rezerva je zámerne štedrá: keby bola menšia než skutočné pásma, flex by zoznam stlačil pod
        vypočítaný strop a rez by opäť padol doprostred riadku.
    */
    --gate-quicknav-row: 2.25rem;
    --gate-quicknav-chrome: 6rem;
    --gate-quicknav-max: calc(100vh - var(--gate-nav-bar-h, 3.5rem) - 1.5rem - 2 * var(--gate-space-4));

    display: flex;
    flex-direction: column;
    max-height: var(--gate-quicknav-max);
}

/*
    HLAVIČKA PALETY — pole hľadania a (na dotyku) zatvorenie. Na myši a klávesnici je zatvorenie
    Esc alebo klik mimo panela; na dotykovej obrazovke nie je ani jedno zjavné, takže musí byť
    vidieť tlačidlo (kontrola 2026-08-19, položka #48).
*/
.gate-quicknav__header {
    display: flex;
    align-items: center;
    gap: var(--gate-space-2);
    flex: 0 0 auto;
}

.gate-quicknav__search {
    width: 100%;
    flex: 1 1 auto;
}

/*
    Zatvorenie je viditeľné LEN na dotykovej šírke: na myši ho nahrádza Esc a klik na scrim,
    a krížik vedľa poľa hľadania by bol v hustej palete tretí ovládací prvok nad zoznamom.
*/
.gate-quicknav__close {
    display: none;
}

@media (max-width: 640.98px) {
    .gate-quicknav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex: 0 0 auto;
        /* Dotykový cieľ 44 × 44 px (WCAG 2.2 AA, 2.5.8). */
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 1px solid var(--gate-divider);
        border-radius: var(--gate-radius);
        background: transparent;
        color: var(--gate-text);
        cursor: pointer;
        touch-action: manipulation;
    }

    .gate-quicknav__close:hover {
        background: var(--gate-hover-soft);
    }

    .gate-quicknav__close:focus-visible {
        outline: 2px solid var(--gate-accent);
        outline-offset: 2px;
    }
}

/*
    Posúva sa zoznam, nie celý dialóg: pole hľadania musí ostať vidieť aj po dvadsiatej položke.
    `overscroll-behavior` drží posun prstom vnútri zoznamu — inak by „prešiel" na stránku pod ním.
*/
.gate-quicknav__results {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: .75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    /*
        ZOZNAM KONČÍ NA HRANE RIADKU, NIE UPROSTRED PÍSMEN. Odsadenie ani náznakový prúžok
        posledný riadok nezachránili: pri 375 px z neho pod spodnou hranou ostávalo 13 px
        horných častí glyfov, čo sa číta ako chyba vykreslenia, nie ako „posuň sa ďalej"
        (kontrola kola 7, dva samostatné nálezy k tomu istému pásmu).

        Rez sa preto nekreslí — POSÚVA SA. Výška zoznamu je celočíselný násobok riadku:
        `round(down, …)` odreže zvyšok, ktorý by inak ukázal časť ďalšieho riadku, a `max(…)`
        drží aspoň jeden riadok aj na veľmi nízkom okne. Aby na násobku naozaj záležalo, má
        rovnakú výšku aj popis skupiny (pravidlo nižšie) — inak by mriežku rozhodil hneď prvý
        medzinadpis. Po posunutí prstom alebo šípkou drží zarovnanie `scroll-snap`.

        Bez podpory `round()` deklarácia prepadne a zoznam sa vráti k pôvodnému správaniu
        (vyplní zvyšok panela) — teda k stavu, ktorý funguje, len rieže menej pekne.
    */
    max-height: max(
        var(--gate-quicknav-row),
        round(down, calc(var(--gate-quicknav-max) - var(--gate-quicknav-chrome)), var(--gate-quicknav-row)));
    scroll-snap-type: y proximity;
    /*
        Že za spodnou hranou niečo je, hovorí posuvník — a ten sa objaví PRÁVE VTEDY, keď sa
        zoznam posúvať dá. Predtým to hovoril prúžok kreslený pozadím, lenže ten sa riadil
        rovnakou podmienkou len náhodou: v prefiltrovanom stave (obsah sa zmestí) zmizol, takže
        paleta mala dve rôzne chrómy podľa toho, koľko sa práve našlo (kontrola kola 7). Stála
        deliaca linka medzi zoznamom a pätičkou je teraz na pätičke, kde patrí.
    */
    scrollbar-width: thin;
}

/*
    Popis sekcie je ten istý text ako v bočnom paneli a rovnako tlmený — orientácia, nie nadpis.
    Bez VERZÁLOK: slovenské názvy so skratkami („EKS (§ 109)", „MF SR") sa v nich čítajú horšie
    a čítačka obrazovky ich hláskuje.
*/
.gate-quicknav__caption {
    /*
        Popis skupiny je RIADOK ZOZNAMU, nie vsuvka medzi riadkami. Mal vlastnú výšku (~23 px) a
        nad každou skupinou ešte 10 px odstup, takže obsah zoznamu nemal jednotný krok — a výška
        zoznamu odvodená z výšky riadku by potom na hrane riadku aj tak nekončila (kontrola kola 7).
        Rovnaký krok pre popis aj položku je zároveň to, čo robí paleta v prekryvnej navigácii.
    */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--gate-quicknav-row);
    padding: 0 .5rem;
    scroll-snap-align: start;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--gate-muted);
}

/*
    Riadok má 36 px — tú istú mieru ako celý rad ovládacích prvkov (spec §5.8). Paleta má ukázať
    čo najviac cieľov naraz, inak sa v nej roluje viac, než by sa hľadalo v paneli; 40 px
    (32 px + 2 × 4 px odsadenia) bolo o riadok menej na obrazovku (položka #124). Na dotykovej
    obrazovke sa rozťahuje nižšie.
*/
.gate-quicknav__item {
    position: relative;
    display: flex;
    align-items: center;
    /* Miera riadku má JEDEN zdroj — z nej sa počíta aj výška zoznamu (`.gate-quicknav__panel`). */
    min-height: var(--gate-quicknav-row);
    padding: 0 .5rem;
    border-radius: var(--gate-radius);
    cursor: pointer;
    scroll-snap-align: start;
    font-size: .875rem;
    line-height: 1.3;
    touch-action: manipulation;
}

.gate-quicknav__item:hover {
    background-color: color-mix(in srgb, var(--gate-text) 7%, transparent);
}

/*
    VYBRANÝ RIADOK BEZ FAREBNÉHO PÁSIKA. Špecifikácia (§5.8) farebné prúžky zamieta plošne —
    v sústave, kde ani aktívna položka navigácie nie je jediné miesto s akcentom, robil 3 px
    pásik z palety druhý ovládací systém (kontrola 2026-08-19, položka #46).

    Farba pritom nie je jediným nositeľom informácie (WCAG 2.1 AA, 1.4.1): vybraný riadok nesie
    aj HRÚBKU písma (600 proti 400) a plochu 7 %, čo sú dva netextové signály nezávislé od
    farby. Fokus je vo vyhľadávacom poli, takže sa toto musí dať prečítať bez neho — a dá.
*/
.gate-quicknav__item--vybrana {
    background-color: color-mix(in srgb, var(--gate-text) 7%, transparent);
    color: var(--gate-accent-text);
    font-weight: 600;
}

/* Jedna tichá veta, nie prázdny rámik s ikonou — odpoveď „nič som nenašiel" nepotrebuje viac. */
.gate-quicknav__empty {
    margin: .75rem 0 0;
    padding: .25rem .5rem;
    color: var(--gate-muted);
    font-size: .875rem;
}

/*
    PÄTIČKA PALETY. Nesie STÁLU deliacu linku: predtým ju kreslil spodok zoznamu, a to len vtedy,
    keď bolo čo posúvať — paleta tak mala dve rôzne chrómy podľa toho, koľko sa práve našlo
    (nefiltrovaný stav linku mal, prefiltrovaný nie; kontrola kola 7). Odsadenie zľava je to isté
    ako pri riadku zoznamu (.5rem): text pätičky stál o 8 px vľavo od menoviek, ku ktorým hovorí.
*/
.gate-quicknav__hint {
    flex: 0 0 auto;
    margin: .75rem 0 0;
    padding: .5rem .5rem 0;
    border-top: 1px solid var(--gate-divider);
    color: var(--gate-muted);
    font-size: .75rem;
}

/*
    Dve znenia tej istej vety — klávesové a dotykové. „Šípkami vyberte, Esc zavrie" je na dotykovej
    obrazovke návod k zariadeniu, ktoré tam nie je, ale pätičku preto zahodiť nemožno: bez nej
    končí zoznam holou hranou panela a nikto nepovie, čo s paletou ďalej (kontrola kola 7 —
    nápoveda sa pri 375 px nevykreslila vôbec). Prepína sa `display: none`, takže čítačka
    obrazovky číta vždy len to znenie, ktoré na danej šírke platí.
*/
.gate-quicknav__hint-touch {
    display: none;
}

@media (max-width: 640.98px) {
    /*
        Na telefóne je paleta prakticky celoobrazovková a riadky sú dotykové ciele (WCAG 2.2 AA,
        2.5.8). Nápoveda ostáva, len vymení znenie za dotykové — klávesové skratky tu nemá čím
        stlačiť (viď `.gate-quicknav__hint-keys` / `-touch`).

        PANEL ZAČÍNA POD LIŠTOU APLIKÁCIE. Predtým stál od y=18, teda v polovici 56 px lišty:
        prekryl značku aj prepínač navigácie, takže sa počas hľadania nedalo povedať, kde v
        aplikácii človek je (kontrola 2026-08-19, položka #48). Lišta je jediný pás rámu, ktorý
        má ostať vidieť vždy — paleta je nad obsahom, nie nad rámom.
    */
    fluent-dialog.gate-quicknav::part(positioning-region) {
        padding-block: calc(var(--gate-nav-bar-h, 3.5rem) + env(safe-area-inset-top, 0px)) 1rem;
    }

    fluent-dialog.gate-quicknav::part(control) {
        max-height: calc(100dvh - var(--gate-nav-bar-h, 3.5rem) - 1rem);
    }

    /*
        Tie isté tri miery ako na širokej obrazovke, len dotykové: riadok je 44 px (WCAG 2.2 AA,
        2.5.8), pätička sa na 311 px širokom paneli môže zalomiť do dvoch riadkov (preto 7.5rem
        rezervy) a strop panela počíta s `dvh` a s 1rem spodným odsadením prekryvu.
    */
    .gate-quicknav__panel {
        --gate-quicknav-row: 2.75rem;
        --gate-quicknav-chrome: 7.5rem;
        --gate-quicknav-max: calc(100dvh - var(--gate-nav-bar-h, 3.5rem) - 1rem - 2 * var(--gate-space-4));
    }

    /*
        Na dotyku je nápoveda o ťuknutí a o krížiku v hlavičke — klávesové znenie je tu návod
        k zariadeniu, ktoré nie je pripojené. Pätička ako taká ostáva: je to jediné, čo pod
        zoznamom uzatvára panel.
    */
    .gate-quicknav__hint-keys {
        display: none;
    }

    .gate-quicknav__hint-touch {
        display: inline;
    }

    /*
        Hľadanie si na telefóne berie zvyšok riadku lišty: je to jediné pole v ráme a pilulka
        široká podľa slova „Hľadať" (80 px) pôsobila v prázdnom páse ako zabudnuté tlačidlo.
        Výška 36 px je miera radu ovládacích prvkov — dotykový cieľ 44 px drží pás okolo nej
        (`.top-row` má na telefóne 48 px, klikateľná je celá pilulka aj s odsadením pásu).
        Zarovnanie doľava necháva lupu a slovo na osi obsahu pod lištou.
    */
    .gate-quicknav-opener {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-height: 2.75rem;
    }

    .gate-quicknav-opener__hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gate-quicknav-opener {
        transition: none;
    }
}

/* ── dotyková podlaha 44 px (WCAG 2.2 AA, 2.5.8) ─────────────────────────── */

/*
    JEDNO MIESTO PRE CELÚ APLIKÁCIU. Podlaha bola dovtedy uplatnená len tam, kde na ňu niekto
    myslel — tlačidlá a prepínač navigácie merali 44 px, ale vstup 36, dátum 38, drobčeková
    cesta 24, `summary` 20 a štvorček prepínača 16 px. Na jednom formulári to bolo 64 prvkov
    pod hranicou (kontrola 2026-08-19, položka #1) a v jednom rade panela filtrov stál 36 px
    výber vedľa 44 px tlačidla, teda viditeľný schod.

    Hodnota je 2.75rem = 44 px a nesie ju `min-height` na PRVKU, nie odsadenie: odsadenie by
    pri `box-sizing: content-box` narástlo nad 44 px (tá istá pasca ako v prekryvnej navigácii).
    Web komponenty knižnice musia dostať výšku aj do tieňového stromu (`::part`), inak by
    hostiteľ narástol a ovládací prvok v ňom ostal nízky.

    Bunka registra tu zámerne NIE JE: má vlastné pravidlo v sekcii tabuliek (R1 — na dotyku
    tiež 44 px, ale so špecifickejším selektorom, aby sa nebilo s hustotou riadku).

    BLOK STOJÍ NA KONCI HÁRKU A JE TO NUTNÉ. Mediálny dopyt špecificitu nezvyšuje, takže
    `@media { .gate-select { min-height: 2.75rem } }` prehráva so ZÁKLADNÝM `.gate-select
    { min-height: 36px }`, keď základ stojí v súbore nižšie (odmerané: výber ostal na 36 px).
    Podlaha musí byť posledné slovo kaskády, inak ju prebije ktorékoľvek neskoršie pravidlo
    rovnakej váhy — a to je presne to, čo sa stalo pri prvom pokuse o túto opravu.
*/
@media (max-width: 640.98px) {
    .gate-input,
    .gate-select,
    .gate-date,
    .gate-time,
    .gate-number__input,
    .gate-attachments__button {
        min-height: 2.75rem;
    }

    fluent-text-field::part(control),
    fluent-search::part(control),
    fluent-number-field::part(control),
    fluent-select::part(control),
    fluent-combobox::part(control) {
        min-height: 2.75rem;
    }

    fluent-text-field,
    fluent-search,
    fluent-number-field,
    fluent-select,
    fluent-combobox {
        min-height: 2.75rem;
    }

    /*
        VÝŠKU MUSÍ DOSTAŤ AJ RÁMČEK, NIE LEN HOSTITEĽ A VNÚTRO (položka #111). Hostiteľ meral
        44 px, ale kresbu poľa nesie `::part(root)` — obal s obrubou a výplňou — a ten ostal na
        36 px. Vedľa natívneho `<select>` alebo dátumu (44 px) tak stálo Fluent pole s viditeľne
        nižším rámčekom: dotykový cieľ sedel, vizuálny rytmus radu nie.
    */
    fluent-text-field::part(root),
    fluent-search::part(root),
    fluent-number-field::part(root) {
        min-height: 2.75rem;
    }

    /*
        Textová oblasť si výšku berie z `rows` a od R49/#159 má základ 90 px — podlahu potrebuje
        len tam, kde ju základ nemá, teda v bunke tabuľky (`rows="2"`, 36 px).
    */
    .gate-table td fluent-text-area::part(control) {
        min-height: 2.75rem;
    }

    /*
        ŠTVORČEK OSTÁVA 16→20 px, DOTYKOVÁ PLOCHA JE CELÝ RIADOK AJ CELÝ POPIS (R29, položka #83).
        Zväčšiť samotný `<input>` by znamenalo prekresliť ho vlastnou kresbou a stratiť správanie
        z operačného systému. Obal riadku 44 px mal — ale klikalo sa na POPIS a ten meral 19–23 px,
        teda výšku svojho textu. Popis preto dostáva výšku riadku a zvislé centrovanie: text ostane
        na svojej osi vedľa štvorčeka a prstom sa dá trafiť kdekoľvek v riadku.
    */
    .gate-checkbox,
    .gate-checkgroup__item {
        min-height: 2.75rem;
    }

    .gate-checkbox > label:not(.gate-visually-hidden),
    .gate-checkgroup__item > label:not(.gate-visually-hidden) {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /*
        „(POVINNÉ)" OSTÁVA PRI POPISE, KU KTORÉMU PATRÍ (N6, dávka G). Riadok vyššie robí
        z popisu flex kontajner kvôli dotykovej ploche — a blokové „(povinné)" sa v ňom stalo
        ďalšou položkou RADU, takže sa pri dlhom popise odtlačilo k pravému okraju obrazovky
        (`/formular/bf2e570b…`, `/formular/00938f04…` pri 375 px). Zalomenie ho vráti pod
        popis, teda tam, kde stojí pri každom inom poli formulára.
    */
    .gate-checkbox > label:not(.gate-visually-hidden) {
        flex-wrap: wrap;
    }

    .gate-checkbox > label > .gate-field__required-note {
        flex-basis: 100%;
    }

    /*
        Prepínač bez viditeľného popisu si plochu berie z prázdneho popisu okolo štvorčeka
        (R56, položka #164) — ten musí byť 44 px v OBOCH smeroch, nielen na výšku.
    */
    .gate-checkbox > label.gate-checkbox__box {
        justify-content: center;
        min-width: 2.75rem;
    }

    .gate-checkbox input[type="checkbox"],
    .gate-checkgroup__item > input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /*
        A OSOU JE PRVÝ RIADOK POPISU, NIE STRED 44 px CIEĽA. Kým štvorček stál na strede riadku,
        sedeli obidva v strede toho istého bloku a lícovali. Od horného zarovnania (sekcia
        prepínača vyššie) stojí štvorček hore, takže sa zhora musí začať čítať aj popis — inak by
        jednoriadková veta visela ~12 px pod svojím štvorčekom. Dotykový cieľ sa nemení: popis si
        44 px výšky ponecháva, mení sa len os textu v ňom.

        Prázdny popis okolo štvorčeka (R56) je výnimka — nie je to text, ale 44 × 44 px plocha,
        v ktorej má 20 px štvorček ostať na strede.
    */
    .gate-checkbox > label:not(.gate-visually-hidden):not(.gate-checkbox__box),
    .gate-checkgroup__item > label:not(.gate-visually-hidden) {
        align-items: flex-start;
    }

    /*
        Odsadenie štvorčeka sa na telefóne vracia na nulu: 20 px štvorček proti ~21 px riadku
        písma stojí na osi prvého riadku sám, kým na desktope mu 16 px chýbali ~3 px.
    */
    .gate-checkbox > input[type="checkbox"],
    .gate-checkbox > .gate-checkbox__box,
    .gate-checkgroup__item > input[type="checkbox"] {
        margin-top: 0;
    }

    /*
        Cesta, rozbaľovač a pilulka hľadania. Cesta má štyri odkazy pod sebou v jednom páse,
        takže jej stačí výška riadku — vodorovné odsadenie by rad roztiahlo do dvoch riadkov.
    */
    .gate-breadcrumb__item,
    .gate-breadcrumb__link,
    .gate-breadcrumb__sep,
    .gate-breadcrumb__current {
        min-height: 2.75rem;
    }

    /*
        A CESTA SA NA TELEFÓNE NEZALAMUJE (položka #242). 44 px dotykový cieľ je správny, ale
        v kombinácii so zalomením z neho vznikol pás vysoký 88 px — štvrtý pruh rámu nad obsahom,
        v ktorom ostal oddeľovač „/" visieť sám na konci prvého riadku (odmerané na
        `/suppliers/new`: 153 → 197 px). Cesta je orientácia; keď sa nezmestí, patrí jej vodorovný
        posun (ako registru), nie druhý riadok.

        POSÚVA SA ZOZNAM, NIE PÁS (položka #283). Posun niesol `.gate-breadcrumb` — teda prvok,
        ktorý siaha po okraj výrezu — a `overflow` orezáva na hranici VÝPLNE, nie obsahu, takže
        text tiekol popod pravé 16 px odsadenie až na hranu displeja: cesta `/suppliers/new`
        („Domov / Register hospodárskych subjektov / Nový hospodársky subjekt") končila poslednou
        stopou na x=374 z 375 a slovo „subjekt" jednoducho zmizlo za hranou — bez výpustky, bez
        zalomenia a bez akéhokoľvek náznaku, že sa dá posunúť. To isté platilo pre najhlbšiu cestu
        aplikácie (`/plany/{id}/polozky/{pid}`, päť položiek).

        Posun preto patrí ZOZNAMU vnútri pásu: pás si ponecháva svoje odsadenie, rez padne na
        x=359 a posledných 16 px výrezu ostane prázdnych — teda je na prvý pohľad vidieť, že cesta
        pokračuje, a žiadna stopa nekončí na poslednom stĺpci pixelov. Odsadenie zľava zároveň
        prestalo byť nedosiahnuteľné: pri posunutom zozname ostáva medzera aj na jeho konci.

        `min-width: 0` je nutné a je to zároveň dôvod, prečo sa nikam nerozšíri STRÁNKA: zoznam je
        položkou ohybného pásu a jeho vnútorné minimum je celá cesta (`nowrap` + nedeliteľné
        položky), takže bez neho by sa nezmenšil a pretiekol by do vodorovného posunu celého
        dokumentu (WCAG 2.1 AA, 1.4.10 Reflow).

        Posuvník sa nekreslí — pás má vlastnú hranu a zoznam obsahuje odkazy, takže je dosiahnuteľný
        aj klávesnicou (axe `scrollable-region-focusable`); `overscroll-behavior-inline: contain`
        drží gesto v páse, aby sa posun neprelial na históriu prehliadača.
    */
    .gate-breadcrumb__list {
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .gate-breadcrumb__item,
    .gate-breadcrumb__link,
    .gate-breadcrumb__current {
        white-space: nowrap;
    }

    /*
        Odsadenie pásu sa o tú istú mieru zmenšuje. Bez toho by 44 px riadok plus 2 × 10 px
        odsadenia spravil zo štvrtého pásu rámu 64 px — a tri pásy chrómu nad obsahom si na
        812 px displeji berú pätinu okna skôr, než sa ukáže prvý údaj.
    */
    .gate-breadcrumb {
        padding-block: 0;
    }

    summary {
        min-height: 2.75rem;
    }

    .gate-quicknav-opener {
        min-height: 2.75rem;
    }

    /*
        Názov panela je zároveň odkaz na nadväzujúcu obrazovku — teda ovládací prvok, hoci
        vyzerá ako nadpis. Riadok 16 px písma má 19 px, takže sa doň prstom nedá trafiť.
    */
    a.gate-panel__title {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /*
        SAMOSTATNÝ ODKAZ JE DOTYKOVÝ CIEĽ (R29, položka #83). Formulárové ovládače aj tlačidlá
        podlahu mali, odkazy nie — a práve odkaz býva JEDINÁ cesta do záznamu: „Otvoriť" v registri
        zákaziek meral 15 px, „Otvoriť vyhlásenie" 23 px, „otvoriť register" 37 px, „Späť na
        dokument" 14 px. Riadok textu má 15–23 px, teda tretinu cieľa, ktorý WCAG 2.2 AA (2.5.8)
        žiada.

        `inline-flex` so `align-items: center` zväčší cieľ bez toho, aby sa posunul text: odkaz
        ostane na svojej účiare, len okolo neho pribudne kliknuteľná plocha. `max-width: 100%`
        drží dlhý popis vnútri bunky (atomický inline blok by sa inak nezalomil a roztiahol by
        tabuľku), `vertical-align: middle` ho zarovná s textom vedľa.
    */
    .gate-table a,
    .gate-card a,
    .gate-agenda a,
    .gate-detail a,
    .gate-list a,
    .gate-actions a,
    .gate-timeline a,
    .gate-page-header__meta a {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-height: 2.75rem;
        vertical-align: middle;
    }

    /*
        VÝNIMKA PRE ODKAZ VO VETE (WCAG 2.2 AA, 2.5.8 — „Inline"). Odkaz vnorený do behu textu sa
        zväčšiť nedá bez toho, aby sa riadky vysvetlenia od seba odtrhli; norma ho preto z podlahy
        vyníma. Zoznam je menovitý a mieri na TLMENÉ VYSVETĽUJÚCE pásma; k nim pribudol ODSEK
        (`p`) vnútri karty, detailu, zoznamu a časovej osi (H14, regresia R29): podlaha z neho
        robila 39–48 px rozostupy MEDZI RIADKAMI JEDNEJ VETY, takže odstavec vyzeral roztrhaný na
        samostatné bloky. Meta riadok hlavičky (`.gate-page-header__meta`) medzi ne nepatrí —
        tam odkaz stojí sám a cieľom je.
    */
    .gate-card p a,
    .gate-agenda p a,
    .gate-detail p a,
    .gate-list p a,
    .gate-timeline p a,
    .gate-table td p a,
    .gate-help a,
    .gate-field__help a,
    .gate-panel__text a,
    .gate-card__subtitle a,
    .gate-statictext a,
    .gate-message a,
    .gate-summary li a,
    .gate-table__col-help a,
    .gate-action-panel__context a,
    .gate-action-panel__note a,
    .gate-actionbar__note a {
        display: inline;
        min-height: 0;
    }
}