/*
 * Komponenty design systému. Tokeny jsou v tokens.css, tady je jejich použití.
 *
 * Devět pravidel specifikace platí i tady a sedm z nich hlídá bin/design-lint.php.
 * Nejdůležitější: jistota se nikdy nenese barvou, „neposouzeno" nikdy nešedne
 * a součet podporujících a zpochybňujících důkazů neexistuje.
 */

@import url("tokens-F0ZtUhm.css");

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--pismo);
    font-size: var(--fs-zaklad);
    line-height: var(--lh-zaklad);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--action);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--focus);
    text-decoration-thickness: 2px;
}

a:focus-visible,
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

/* ---- Typografie ------------------------------------------------------- */

.t-mikro {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: var(--fs-mikro);
    line-height: var(--lh-mikro);
    letter-spacing: var(--ls-mikro);
}

.t-meta {
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    letter-spacing: var(--ls-meta);
    color: var(--ink-muted);
}

.t-tabulka {
    font-size: var(--fs-tabulka);
    line-height: var(--lh-tabulka);
    letter-spacing: var(--ls-tabulka);
}

.t-veta {
    font-size: var(--fs-veta);
    line-height: var(--lh-veta);
    letter-spacing: var(--ls-veta);
}

.t-veta-lg {
    font-size: var(--fs-veta-lg);
    line-height: var(--lh-veta-lg);
    letter-spacing: var(--ls-veta-lg);
}

.t-nadpis-s,
.t-nadpis-m,
.t-nadpis-l {
    font-weight: 600;
    margin: 0;
}

.t-nadpis-s {
    font-size: var(--fs-nadpis-s);
    line-height: var(--lh-nadpis-s);
    letter-spacing: var(--ls-nadpis-s);
}

.t-nadpis-m {
    font-size: var(--fs-nadpis-m);
    line-height: var(--lh-nadpis-m);
    letter-spacing: var(--ls-nadpis-m);
}

/* Jen studentská služba. V dílně se nikdy nepoužije. */
.t-nadpis-l {
    font-size: var(--fs-nadpis-l);
    line-height: var(--lh-nadpis-l);
    letter-spacing: var(--ls-nadpis-l);
}

/* Identifikátory a čísla. Mono proto, že se porovnávají mezi řádky nad sebou. */
.t-id {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
}

.cislo {
    font-variant-numeric: tabular-nums;
}

/* Formulace požadavku začíná slovesem a nikdy nemá typografii tématu.
   Pravidlo 06: když se ten rozdíl setře, systém přestane fungovat. */
.formulace {
    font-size: var(--fs-veta);
    line-height: var(--lh-veta);
    letter-spacing: var(--ls-veta);
    color: var(--ink);
}

.tema {
    font-size: var(--fs-zaklad);
    font-weight: 600;
    letter-spacing: -0.008em;
    color: var(--ink);
}

/* ---- Jistota ---------------------------------------------------------- */

/* Tři osy po čtyřech hodnotách je 64 kombinací na řádek. Barva to neunese
   a pořadí hodnot nenese vůbec — jistota je proto tvar a výška výplně. */
.jistota {
    display: inline-flex;
    gap: var(--sp-4);
    align-items: flex-end;
}

.jistota__osa {
    width: var(--jistota-s);
    height: var(--jistota-v);
    border-radius: 1px;
    border: 1px solid var(--line-strong);
    background: var(--surface-sunken);
    display: flex;
    align-items: flex-end;
    flex: none;
}

.jistota__vypln {
    width: 100%;
    background: var(--mark);
    border-radius: 0 0 1px 1px;
}

.jistota__osa--vysoka .jistota__vypln {
    height: 100%;
}

.jistota__osa--stredni .jistota__vypln {
    height: 62%;
}

.jistota__osa--nizka .jistota__vypln {
    height: 30%;
}

/* Neposouzeno není nula na škále. Je to jiný tvar, ne slabší hodnota —
   proto tečkovaný obrys stejné síly a žádná výplň. Pravidlo 02 zakazuje
   ztlumit ho šedí nebo průhledností. */
.jistota__osa--neposouzeno {
    border: 1.25px dotted var(--mark-unassessed);
    background: transparent;
}

.jistota__osa--neposouzeno .jistota__vypln {
    display: none;
}

/* ---- Stav ------------------------------------------------------------- */

.stav {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    font-size: var(--fs-meta);
    padding: 3px 9px;
    border-radius: var(--r-2);
    white-space: nowrap;
}

.stav__stupne {
    display: inline-block;
    width: 22px;
    height: 6px;
    border-radius: 1px;
    box-sizing: border-box;
}

.stav--supported {
    color: var(--chip-supported-ink);
    background: var(--chip-supported-bg);
    border: 1px solid var(--chip-supported-line);
}

.stav--supported .stav__stupne {
    border: 1px solid var(--state-supported);
    background: linear-gradient(to right, var(--state-supported) 0 33.33%, transparent 33.33% 100%);
}

.stav--verified {
    color: var(--chip-verified-ink);
    background: var(--chip-verified-bg);
    border: 1px solid var(--chip-verified-line);
}

.stav--verified .stav__stupne {
    border: 1px solid var(--state-verified);
    background: linear-gradient(to right, var(--state-verified) 0 66.66%, transparent 66.66% 100%);
}

.stav--published {
    color: var(--chip-published-ink);
    background: var(--chip-published-bg);
    border: 1px solid var(--chip-published-line);
}

.stav--published .stav__stupne {
    border: 1px solid var(--state-published);
    background: var(--state-published);
}

/* ---- Činnost ---------------------------------------------------------- */

/* Patnáct rozlišitelných barev při AA neexistuje a činnost je uspořádaná
   škála, ne kategorie. Je to proto slovo v pevném sloupci plus ukazatel pásma. */
.cinnost {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    font-size: var(--fs-meta);
    color: var(--ink-muted);
    white-space: nowrap;
}

.cinnost__pasmo {
    display: inline-flex;
    gap: 2px;
}

.cinnost__pip {
    width: 4px;
    height: 9px;
    border-radius: 1px;
    background: var(--line);
}

.cinnost__pip--zapnuto {
    background: var(--mark);
}

/* ---- Důkazní souhrn --------------------------------------------------- */

/* Podporující plné vpravo, zpochybňující šrafované vlevo. Součet se
   nezobrazuje nikdy — tři pro a dvě proti vypadají po sečtení jako pět pro
   a to je jediné číslo v systému, které aktivně lže (pravidlo 05). */
.dukazy {
    display: flex;
    align-items: center;
    width: 84px;
    height: 14px;
}

.dukazy__zpochybnuje,
.dukazy__podporuje {
    height: 14px;
}

.dukazy__zpochybnuje {
    border: 1px solid var(--mark);
    border-radius: var(--r-1) 0 0 var(--r-1);
    background: repeating-linear-gradient(135deg, transparent 0 2px, var(--mark) 2px 3.5px);
    margin-left: auto;
}

.dukazy__podporuje {
    background: var(--mark);
    border-radius: 0 var(--r-1) var(--r-1) 0;
    margin-right: auto;
}

/* ---- Nepřítomnost hodnoty --------------------------------------------- */

/* Tři různé stavy, tři různá vyjádření. Jejich záměna je nejčastější způsob,
   jak nástroj tohohle druhu ztratí důvěru. */

/* Vlastnost světa: běh předmětu u historických dat prostě není znám.
   Vypisuje se slovem, protože je to hodnota — ne prázdná buňka (pravidlo 03). */
.nezjisteno {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: var(--fs-tabulka);
    color: var(--ink-muted);
    border-bottom: 1px dotted var(--line-strong);
}

/* Vlastnost naší práce: nikdo se na to zatím nedíval. */
.neposouzeno {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    font-size: var(--fs-tabulka);
    color: var(--ink-soft);
}

.neposouzeno__znak {
    width: 9px;
    height: 14px;
    border: 1.25px dotted var(--mark-unassessed);
    border-radius: 1px;
    flex: none;
}

/* Porucha. Jediný ze tří stavů s nárokem na červenou a jediný, který musí
   nabídnout akci (pravidlo 04). */
.porucha {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    font-size: var(--fs-tabulka);
    color: var(--attention-ink);
    font-weight: 500;
}

.porucha__znak {
    width: 15px;
    height: 15px;
    background: var(--attention);
    color: var(--on-accent);
    border-radius: var(--r-1);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    flex: none;
}

/* ---- Tabulka ---------------------------------------------------------- */

.tabulka {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.tabulka thead th {
    background: var(--surface-sunken);
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: var(--ls-meta);
    color: var(--ink-muted);
    text-align: left;
    padding: var(--sp-8) var(--radek-buňka);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.tabulka tbody td {
    height: var(--radek);
    padding: 0 var(--radek-buňka);
    font-size: var(--radek-text);
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.tabulka tbody tr:last-child td {
    border-bottom: 0;
}

.tabulka tbody tr[aria-selected='true'] td {
    background: var(--action-weak);
}

/* Souhrnný řádek. Do 19. 8. 2026 měly obrazovky dvě tabulky — plochou
   `.jadro__tabulka` a kartovou `.tabulka` — a čtyři z devíti obrazovek
   používaly tu plochou. Tabulka je jedna; součet pod ní je součet, ne
   další řádek dat, a musí se od těla oddělit sám. */
.tabulka tfoot th,
.tabulka tfoot td {
    height: var(--radek);
    padding: 0 var(--radek-buňka);
    font-size: var(--radek-text);
    background: var(--surface-sunken);
    border-top: 1px solid var(--line);
    vertical-align: middle;
}

.tabulka tfoot th {
    text-align: left;
    font-weight: 500;
}

/* Buňka s víc řádky textu se nesmí svisle vystředit — v tabulce, kde má
   jeden sloupec větu a druhý číslo, by se rozjely základní linky. */
.tabulka--text tbody td {
    padding: var(--sp-8) var(--radek-buňka);
    vertical-align: top;
}

/* ---- Akce ------------------------------------------------------------- */

.akce {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    font-family: inherit;
    font-size: var(--fs-zaklad);
    font-weight: 500;
    padding: var(--sp-6) var(--sp-12);
    border-radius: var(--r-2);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.akce--hlavni {
    background: var(--action);
    border-color: var(--action);
    color: var(--on-accent);
}

.akce--ticha {
    background: transparent;
    border-color: var(--line);
    color: var(--action);
}

.akce--ticha:hover {
    background: var(--surface-sunken);
    color: var(--focus);
}

.akce--mikro {
    font-size: var(--fs-mikro);
    padding: var(--sp-2) var(--sp-8);
    gap: var(--sp-4);
}

/* Formulářová pole mají jeden vzhled a nezávisí na tom, jestli si někdo
   vzpomněl na třídu. Do 19. 8. 2026 byly v systému **čtyři** varianty téhož
   pole — `.vstup`, `.pole__vstup`, pravidla uvnitř `.podklad__formular`
   a na obrazovce právního posouzení nic, takže tam pole vypadala jako
   výchozí prvky prohlížeče. Uživatel to nahlásil jako „tam není nastylovaný
   žádný input box".

   Zaškrtávátka a přepínače jsou z pravidla vyjmuté: jsou to ovládací prvky
   s vlastním tvarem, ne pole na text. */
.stranka input:not([type='hidden'], [type='radio'], [type='checkbox']),
.stranka select,
.stranka textarea,
.vstup {
    font-family: inherit;
    font-size: var(--fs-zaklad);
    padding: var(--sp-6) var(--sp-12);
    border-radius: var(--r-2);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}

.stranka textarea {
    resize: vertical;
}

.stranka input:focus-visible,
.stranka select:focus-visible,
.stranka textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

/* Specificita schválně přes `.stranka`: bez ní by zmenšení prohrálo
   s pravidlem pro holé prvky výš. */
.stranka .vstup--maly,
.vstup--maly {
    font-size: var(--fs-tabulka);
    padding: var(--sp-4) var(--sp-8);
}

/* Tlačítko je široké podle svého popisku, ne podle formuláře.
   Formuláře rozporu, právního posouzení i vydání balíku jsou sloupcový
   flex, takže potvrzovací tlačítko roztáhly přes celý box — „Vypořádat"
   měřilo 1046 px. Široké tlačítko čte oko jako pruh, ne jako cíl, a u tří
   různě širokých formulářů vypadá pokaždé jinak. */
.rozpor__formular > .akce,
.pravni__formular > .akce,
.balik__formular > .akce,
.podklad__formular > .akce,
.balik__formular > .tlacitko,
.pravni__formular > .tlacitko {
    align-self: flex-start;
}

.akce:disabled {
    cursor: not-allowed;
    color: var(--ink-faint);
    background: var(--surface-sunken);
}

/* Klávesa je součástí popisku, ne bublina po najetí. Nikdy číslo ani Y/Z —
   na české klávesnici jsou číslice pod Shiftem a Y se Z jsou prohozené. */
.akce__klavesa {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: var(--fs-mikro);
    padding: 1px 4px;
    border-radius: var(--r-1);
    border: 1px solid currentcolor;
    opacity: 0.7;
}

/* ---- Právní brána ----------------------------------------------------- */

/* Brána je stav obrazovky, ne reakce na kliknutí (pravidlo 08). */
.brana {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: var(--sp-16);
}

.brana__polozka {
    display: flex;
    gap: var(--sp-8);
    align-items: flex-start;
    padding: var(--sp-6) 0;
}

.brana__znak {
    width: 15px;
    height: 15px;
    border-radius: var(--r-1);
    display: grid;
    place-items: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    flex: none;
    margin-top: 1px;
}

.brana__znak--ok {
    background: var(--gate-ok-bg);
    color: var(--gate-ok-ink);
}

.brana__znak--tvrdy {
    background: var(--gate-hard-bg);
    color: var(--gate-hard-ink);
}

.brana__znak--mekky {
    background: var(--gate-soft-bg);
    color: var(--gate-soft-ink);
}

.brana__znak--neposouzeno {
    border: 1.25px dotted var(--mark-unassessed);
    color: var(--ink-muted);
}

/* ---- Sdělení mezí ----------------------------------------------------- */

/* Meze poznání dostávají vlastní plochu a klidný tón, ne varovný odznak.
   Ani u studenta, ani v dílně to není žlutý pruh. */
.meze {
    background: var(--surface-sunken);
    border-left: 2px solid var(--line);
    padding: var(--sp-12) var(--sp-16);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-size: var(--fs-zaklad);
    color: var(--ink-muted);
}

/* ---- Galerie a přihlášení --------------------------------------------- */

/* Galerie je ukázka, ne obrazovka dílny. Rozvržení je proto volnější, než
   jaké bude mít fronta — od té se čeká hustota, od téhle čitelnost. */


.galerie__hlavicka {
    margin-bottom: var(--sp-40);
}

.galerie__hlavicka p {
    max-width: 70ch;
    margin: var(--sp-8) 0 var(--sp-16);
}

.galerie__prepinace {
    display: flex;
    gap: var(--sp-8);
}

.galerie__sekce {
    margin-bottom: var(--sp-40);
}

.galerie__sekce > p {
    max-width: 74ch;
    margin: var(--sp-4) 0 var(--sp-16);
}

.galerie__mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-32);
}

.galerie__vzorky {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: var(--sp-16);
}

.galerie__vzorky--husto {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-8) var(--sp-20);
}

.galerie__vzorek {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
}

.prihlaseni {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--sp-24);
}

.prihlaseni__formular {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    width: 100%;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: var(--sp-24);
}

.prihlaseni__formular h1 {
    margin-bottom: var(--sp-8);
}

.prihlaseni__formular input {
    font-family: inherit;
    font-size: var(--fs-zaklad);
    padding: var(--sp-8);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
}

.prihlaseni__formular button {
    margin-top: var(--sp-8);
    justify-content: center;
}

/* Text jen pro odečítač obrazovky. Stav a jistota nesou informaci i bez barvy
   a bez tvaru — kdo je nevidí, musí je slyšet. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Fronta k posouzení

   Jedna položka na obrazovce, ne tabulka. Šířka je omezená na čtecí míru,
   protože kurátor tu čte formulaci a zdrojové otázky — ne přehled. Akce jsou
   dole a v pořadí potvrdit / zamítnout / odložit, tedy od nejčastější.
   --------------------------------------------------------------------------- */


.fronta__hlavicka {
    margin-bottom: var(--sp-32);
}

.fronta__hlavicka p {
    margin: var(--sp-4) 0 var(--sp-12);
}

.fronta__zprava {
    margin: 0 0 var(--sp-20);
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--action);
    background: var(--action-weak);
}

.fronta__polozka {
    padding: var(--sp-32);
    border: 1px solid var(--line);
    border-radius: var(--r-6);
    background: var(--surface);
}

.fronta__tema {
    margin: 0 0 var(--sp-12);
}

/* Formulace je to, o čem se rozhoduje. Dostává vlastní řádek a největší
   stupeň na stránce — všechno ostatní je kontext.

   Je to pole, ne text: kurátor, který smí jen potvrdit nebo zamítnout, zamítne
   i skoro dobrou formulaci. Nesmí ale vypadat jako formulář — orámované pole
   uprostřed ohniska by táhlo oko k sobě místo k obsahu. Rámeček proto přijde
   až při najetí a při psaní. */
.fronta__formulace {
    margin: 0 0 var(--sp-16);
}

.fronta__vstup {
    display: block;
    width: 100%;
    padding: var(--sp-4) var(--sp-8);
    margin-left: calc(-1 * var(--sp-8));
    border: 1px solid transparent;
    border-radius: var(--r-4);
    background: transparent;
    color: inherit;
    font: inherit;
    resize: vertical;
}

.fronta__vstup:hover {
    border-color: var(--line-soft);
}

.fronta__vstup:focus {
    border-color: var(--line);
    background: var(--canvas);
    outline: none;
}

.fronta__puvodni {
    margin: 0 0 var(--sp-16);
}

/* Témata jako filtr. Řádek odkazů, ne rozbalovací seznam — kurátor má vidět,
   kde je práce, ne ji hledat. */
.fronta__temata {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-12);
    margin-bottom: var(--sp-20);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid var(--line-soft);
}

.fronta__tema-odkaz--vybrano {
    font-weight: 600;
    text-decoration: none;
}

.fronta__sloucit {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin-bottom: var(--sp-16);
}

.fronta__sloucit select {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-8) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--canvas);
    color: var(--ink);
    font: inherit;
}

/* Vzít zpět stojí mimo položku a je tiché. Je to oprava překliku, ne akce,
   o které se rozhoduje — kdyby bylo stejně výrazné jako Potvrdit, dělalo by
   z každého rozhodnutí dvě. */
.fronta__zpet {
    margin-top: var(--sp-24);
}

.fronta__zpet-tlacitko {
    padding: 0;
    border: none;
    background: none;
    color: var(--ink-faint);
    font: inherit;
    font-size: var(--t-meta-velikost, 0.875rem);
    text-decoration: underline;
    cursor: pointer;
}

.fronta__cinnost {
    margin: 0 0 var(--sp-24);
}

.fronta__priznaky {
    display: grid;
    gap: var(--sp-8);
    margin-bottom: var(--sp-24);
}

.fronta__zdroje {
    padding-top: var(--sp-20);
    border-top: 1px solid var(--line);
}

.fronta__zdroje h2 {
    margin: 0 0 var(--sp-8);
}

.fronta__otazky {
    margin: 0 0 var(--sp-12);
    padding-left: var(--sp-20);
    display: grid;
    gap: var(--sp-8);
}

.fronta__cislo {
    color: var(--ink-faint);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.fronta__test {
    display: block;
    margin-top: var(--sp-2);
}

/* Tvar znění na vlastním řádku. Vedle textu by se četl jako jeho pokračování
   — a „tvrzení ano/ne" přilepené za otázku je horší než žádný údaj. */
.fronta__tvar {
    display: block;
    margin-top: var(--sp-2);
    color: var(--ink-muted);
}

/* Síla podložení. Vlastní plocha, protože je to jediné číslo na obrazovce,
   podle kterého se dá o podložení rozhodnout — délka seznamu otázek nad ním
   svádí k opačnému závěru. Slabé podložení není porucha a červenou nedostane
   (pravidlo 04): potvrdit jednohlasý návrh je legitimní, jen z něj nevznikne
   ověřený požadavek. */
.fronta__hlasy {
    margin: 0 0 var(--sp-12);
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--line);
    background: var(--surface-sunken);
}

.fronta__hlasy--slabe {
    border-left-style: dashed;
}

/*
 * Co stojí za tématem návrhu. Tři podoby téhož odstavce, protože fronta
 * pouští dopředu podložené návrhy a kurátor musí vidět proč. Barva se bere
 * z tokenů; plná čára znamená autoritativní podklad, tečkovaná žádný.
 */
.fronta__zatematem {
    margin: 0 0 var(--sp-12);
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--line);
    background: var(--surface-sunken);
}

.fronta__zatematem--osnova {
    border-left-color: var(--state-verified);
}

.fronta__zatematem--bez {
    border-left-style: dotted;
}

.fronta__akce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-8);
    margin: var(--sp-24) 0;
}

.fronta__zamitnout {
    display: flex;
    gap: var(--sp-8);
    flex: 1 1 320px;
}

.fronta__zamitnout input {
    flex: 1;
    padding: var(--sp-8) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--canvas);
    color: var(--ink);
    font: inherit;
}

/* ---------------------------------------------------------------------------
   Znalostní jádro
   Na rozdíl od fronty je tohle přehled, ne ohnisko: rozhoduje se o postupu
   hotového požadavku a k tomu je potřeba vidět celek. Šířka proto není
   omezená na čtecí míru — sloupec „co brání dál" je tu ten podstatný a musí
   se vejít celý.
   --------------------------------------------------------------------------- */


.jadro__hlavicka {
    margin-bottom: var(--sp-32);
}

.jadro__hlavicka p {
    margin: var(--sp-4) 0 var(--sp-12);
}

/* Volná cesta je stav, ne prázdno — vypisuje se slovem (pravidlo 03). */
.jadro__volno {
    color: var(--ink-faint);
}

.jadro__akce form {
    margin: 0;
}

.fronta__prazdno {
    padding: var(--sp-40);
    border: 1px dashed var(--line);
    border-radius: var(--r-6);
    text-align: center;
}

.jadro__odkaz {
    color: inherit;
    text-decoration-color: var(--line);
}

/* ---------------------------------------------------------------------------
   Profil milníku

   Několik tabulek pod sebou, protože týž požadavek smí být ve víc profilech.
   Oddíly proto potřebují vlastní vzduch — bez něj by se dvě tabulky slily
   v jednu a opakovaný řádek by vypadal jako duplicita v datech.
   --------------------------------------------------------------------------- */
.milnik {
    margin-block: var(--sp-40);
}

.milnik__zbytek {
    list-style: none;
    padding: 0;
    margin: var(--sp-20) 0 0;
    display: grid;
    gap: var(--sp-8);
}

/* ---------------------------------------------------------------------------
   Podklady jednoho požadavku

   Zpátky na čtecí míru: tady se čte, co za požadavkem stojí, a píše se pasáž
   ze sylabu. Přehledová šířka jádra by z důkazních účtů udělala tabulku, přes
   kterou se přejíždí očima — a přejet se dá i přes nevypořádaný protidůkaz.
   --------------------------------------------------------------------------- */


.podklad__hlavicka {
    margin-bottom: var(--sp-24);
    padding: var(--sp-24);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.podklad__hlavicka h1 {
    margin: var(--sp-4) 0 var(--sp-12);
}

.podklad__hlavicka p {
    margin: 0 0 var(--sp-4);
}

.podklad__stav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-16);
}

.podklad__postup {
    margin-bottom: var(--sp-24);
    padding: var(--sp-20);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.podklad__postup form {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    flex-wrap: wrap;
}

/* Překážka má vlastní plochu a klidný tón. Je to odpověď domény na otázku
   „proč to nejde dál", ne porucha — červená patří konfliktu (pravidlo 04). */
.podklad__preskazka {
    margin: 0 0 var(--sp-24);
    padding: var(--sp-16) var(--sp-20);
    border-left: 4px solid var(--line);
    background: var(--surface-sunken);
    border-radius: var(--r-3);
}

.podklad__sekce {
    margin-bottom: var(--sp-24);
    padding: var(--sp-24);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.podklad__sekce h2 {
    margin: 0 0 var(--sp-4);
}

.podklad__sekce .tabulka {
    margin-top: var(--sp-16);
}

/* Autoritativnost je vlastnost druhu podkladu, ne jeho síla. Proto slovo
   v rámečku, ne výraznější barva — sylabus není „lepší" důkaz, je to důkaz,
   který vznikl mimo naši dílnu. */
.podklad__autorita {
    display: inline-block;
    margin-left: var(--sp-4);
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* Nevypořádaný protidůkaz je tvrdý blokátor, a to je jeden ze dvou důvodů,
   proč smí být červený (pravidlo 04). */
.podklad__blokuje {
    color: var(--attention);
    font-weight: 600;
}

.podklad__hledani {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8);
    margin: var(--sp-16) 0;
}

.podklad__hledani input {
    flex: 1 1 260px;
    padding: var(--sp-8) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--canvas);
    color: var(--ink);
    font: inherit;
}

.podklad__formular {
    display: grid;
    gap: var(--sp-8);
    justify-items: start;
    margin-top: var(--sp-16);
}

/* Tady je pole na celou šířku formuláře — vzhled nese sdílené pravidlo. */
.podklad__formular input[type="text"],
.podklad__formular textarea,
.podklad__formular select {
    width: 100%;
}

/* Znění námitky nad formulářem. Kurátor má mít před očima, co vypořádává —
   text v tabulce o dvě obrazovky výš je z hlediska rozhodování nic. */
.podklad__namitka {
    margin: 0;
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--line);
    background: var(--surface);
}

/* Závěr vypořádání zůstává v účtech vedle původní námitky. Namísto smazání,
   protože vypořádaný rozpor a žádný rozpor jsou dvě různé věci. */
.podklad__zaver {
    margin: var(--sp-8) 0 0;
}

.podklad__vyber {
    width: 100%;
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-4);
}

.podklad__moznost {
    display: flex;
    align-items: baseline;
    gap: var(--sp-8);
}

/* Doporučené body osnovy. Odlišené rámečkem, ne barvou pozadí — je to nabídka,
   kam se dívat, ne stav. Barevná plocha by z pořadí udělala tvrzení. */
.podklad__vyber--doporucene {
    border-color: var(--line);
}

/* Materiál z cizího předmětu se nabízí schválně — sylabus varianty pod jejími
   záznamy nemusí být vůbec. Že je cizí, ale musí být vidět, jinak by ho
   kurátor připnul, aniž by o tom věděl. */
.podklad__moznost--cizi span {
    color: var(--ink-faint);
}

/* ==========================================================================
   Hlavička dílny

   Vznikla z měření, ne z estetiky: po přihlášení spadl uživatel do galerie
   komponent a mezi obrazovkami se dalo přecházet jen ručním psaním URL.
   Výška 44 px a mono štítek identity jsou podle návrhu v0.2.
   ========================================================================== */

/* Hlavička drží nahoře. Mapa jádra má devadesát řádků a záložka „Fronta"
   dostupná až po odrolování zpátky nahoru je záložka, kterou nikdo nepoužije. */
.dilna-hlavicka {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    height: 44px;
    padding: 0 var(--sp-16);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.dilna-hlavicka__znacka {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    flex: none;
    color: var(--ink);
    text-decoration: none;
}

.dilna-hlavicka__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--r-3);
    background: var(--action);
    color: var(--surface);
    font-size: var(--fs-mikro);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dilna-hlavicka__nazev {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.dilna-hlavicka__delic {
    flex: none;
    width: 1px;
    height: 18px;
    background: var(--line);
}

.dilna-hlavicka__varianta {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    flex: none;
    font-size: var(--fs-tabulka);
}

/* Kód s verzí akreditace a forma studia jsou to, čím se dvě varianty téhož
   předmětu liší. Mono proto, že se čte znak po znaku — 114-0300/05 a
   114-0400/06 se v proporcionálním písmu pletou. */
.dilna-hlavicka__kod {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: var(--sp-2) var(--sp-6);
    white-space: nowrap;
}

.dilna-hlavicka__nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.dilna-hlavicka__zalozka,
.dilna-hlavicka__vedlejsi,
.dilna-hlavicka__varianta-odkaz {
    font-size: var(--fs-meta);
    padding: var(--sp-4) var(--sp-8);
    border-radius: var(--r-3);
    text-decoration: none;
    white-space: nowrap;
}

.dilna-hlavicka__zalozka {
    color: var(--ink);
}

.dilna-hlavicka__zalozka:hover,
.dilna-hlavicka__vedlejsi:hover,
.dilna-hlavicka__varianta-odkaz:hover {
    background: var(--surface-sunken);
    text-decoration: none;
}

/* Aktivní záložka nese podtržení, ne jen barvu — barva sama je v tomhle
   systému vyhrazená stavu (pravidlo 01). */
.dilna-hlavicka__zalozka--aktivni {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--action);
}

.dilna-hlavicka__vedlejsi {
    color: var(--ink-muted);
}

/* Jméno přihlášeného účtu. Jen údaj, ne odkaz — proto bez hover stavu. */
.dilna-hlavicka__ucet {
    font-size: var(--fs-meta);
    padding: var(--sp-4) var(--sp-8);
    color: var(--ink-muted);
    white-space: nowrap;
}

/* Přepínač režimu vypadá jako ostatní vedlejší odkazy v hlavičce, protože
   je to totéž: nabídka, ne rozhodnutí o datech. Tlačítko, ne odkaz —
   nikam nevede a stránku nemění. */
.dilna-hlavicka__tema {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-meta);
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
}

.dilna-hlavicka__tema:hover {
    color: var(--ink);
}

.dilna-hlavicka__prepinac {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
}

.dilna-hlavicka__varianta-odkaz {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
    border: 1px solid var(--line);
}

.dilna-hlavicka__varianta-odkaz--aktivni {
    color: var(--ink);
    border-color: var(--mark);
}

/* Pruh právní osy. V řádku tabulky právní osa není (rozhodnutí 03) — dokud je
   u všech položek neposouzeno, nenesla by informaci a naučila by oko odznak
   přeskakovat. Tady nese, protože mluví o perimetru jako celku. */
.dilna-pravni {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin: 0;
    min-height: 26px;
    padding: var(--sp-4) var(--sp-16);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-meta);
    color: var(--ink-muted);
}

.dilna-pravni__znak {
    flex: none;
    width: 9px;
    height: 12px;
    border: 1.25px dotted var(--mark-unassessed);
    border-radius: 1px;
}

.dilna-pravni strong {
    font-weight: 500;
    color: var(--ink);
}

/* Odkaz z pruhu je jediná akce v celém řádku, proto se nesmí ztratit mezi
   větou — drží se vpravo a nezalamuje se doprostřed. */
.dilna-pravni__akce {
    flex: none;
    margin-left: auto;
    white-space: nowrap;
    font-weight: 500;
}


/* ==========================================================================
   Sdělovací box a číselná dlaždice
   ========================================================================== */

/* Vlastní plocha, aby věta nesplynula s popiskem vedle. Tón nese levý pruh
   a znak — barva sama by nestačila tomu, kdo ji nerozezná (pravidlo 01). */
.sdeleni {
    display: flex;
    align-items: flex-start;
    margin: var(--sp-12) 0 0;
    gap: var(--sp-12);
    padding: var(--sp-16) var(--sp-20);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--r-3);
}

.sdeleni__znak {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: var(--r-plna);
    background: var(--line);
    color: var(--surface);
    font-size: var(--fs-mikro);
    font-weight: 600;
    line-height: 1;
}

.sdeleni__telo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

.sdeleni__nadpis {
    margin: 0;
    font-weight: 500;
    color: var(--ink);
}

.sdeleni__text {
    margin: 0;
    max-width: 72ch;
    color: var(--ink-muted);
}

.sdeleni__akce {
    align-self: flex-start;
    margin-top: var(--sp-4);
    font-weight: 500;
}

/* Vysvětlení je klidné schválně: je to popis, ne událost. */
.sdeleni--vysvetleni {
    border-left-color: var(--line);
}

/* Závěr domény. Vypadá jako nedodělek a není jím — proto vlastní tón,
   ale žádný poplach. */
.sdeleni--zaver {
    border-left-color: var(--mark);
}

.sdeleni--zaver .sdeleni__znak {
    background: var(--mark);
}

/* Překážka nese barvu akce, ne poplachu: je to odpověď domény na otázku
   „proč to nejde dál", a odpověď na ni je práce, ne porucha (pravidlo 04). */
.sdeleni--prekazka {
    border-left-color: var(--action);
}

.sdeleni--prekazka .sdeleni__znak {
    background: var(--action);
}

/* Jediné místo, kde je červená na místě. */
.sdeleni--konflikt {
    border-left-color: var(--attention);
}

.sdeleni--konflikt .sdeleni__znak {
    background: var(--attention);
}

/* Dlaždice: číslo, co to je, a proč je takové. */
/* Sloupec mřížky se roztáhne, obsah dlaždice ne. Dvě dlaždice na široké
   obrazovce by jinak roztáhly popisek přes půl metru textu. */
.dlazdice {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
    max-width: 16rem;
}

.dlazdice__cislo {
    text-align: left;
    font-size: var(--fs-nadpis-m);
    line-height: var(--lh-nadpis-m);
    letter-spacing: var(--ls-nadpis-m);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.dlazdice__popis {
    font-size: var(--fs-meta);
    color: var(--ink-muted);
}

/* Důvod se zalomí ve svém sloupci. Strop v `ch` by mřížku rozbil zpátky
   na nestejně široké dlaždice. */
.dlazdice__proc {
    max-width: 100%;
}

/* Odkaz uvnitř dlaždice dědí barvu tónu. Bez toho přebije modrá odkazu
   význam čísla a řada dlaždic vypadá, jako by tón neměly. Že je to odkaz,
   nese podtržení. */
.dlazdice__cislo a {
    color: inherit;
}

/* Dlaždice s tónem barví jen číslo — plocha zůstává klidná, aby řada
   dlaždic vedle sebe nevypadala jako semafor.

   Tóny jsou dva a ani jeden neznamená „špatně". `ceka` je práce, která leží
   na člověku; `brani` je tvrdý blokátor. Nula, která je závěrem domény,
   tón **nemá** — obarvit ji by z ní udělalo poruchu, a to je přesně ta
   záměna, které se celý systém vyhýbá (pravidlo 04). */
.dlazdice--ceka .dlazdice__cislo {
    color: var(--caution);
}

.dlazdice--brani .dlazdice__cislo {
    color: var(--attention);
}

.galerie__boxy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

/* Řada dlaždic je mřížka, ne pružná řada.
   Ve flexu si každá dlaždice vzala šířku podle svého nejdelšího řádku, což
   je řádek s důvodem — takže „1 · k rozhodnutí · má dva a víc nezávislých
   hlasů" byla třikrát širší než „0 · zamítnuto" a čísla stála po řadě
   nahodile. Uživatel to 19. 8. 2026 popsal jako „jsou různě vysoko".
   Ve stejně širokých sloupcích drží čísla rytmus a text se zalomí uvnitř
   svého sloupce.

   Odstup nahoře i dole je součástí komponenty. Bez něj se čísla lepila
   na hlavičku nad sebou a na tabulku pod sebou a četla se jako její
   součást, ne jako souhrn. */
.dlazdice-rada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--sp-16) var(--sp-24);
    margin: var(--sp-24) 0;
    align-items: start;
}

/* ==========================================================================
   Stránková schránka
   ========================================================================== */

/* Jedno místo, kde se rozhoduje o šířce, vycentrování a okrajích obrazovky.
   Do téhle chvíle si to řešila každá obrazovka sama a rozešlo se to na šest
   šířek, jedno chybějící `margin: 0 auto` a tři obrazovky bez kontejneru —
   uživatel to popsal jako „jedna přes celou, druhá na střed, třetí doleva,
   čtvrtá vyhozený text". Vzhled aplikace není součet vzhledů obrazovek. */
.stranka {
    max-width: var(--stranka-siroka);
    margin: 0 auto;
    padding: var(--sp-32) var(--sp-24) var(--sp-80);
    display: flex;
    flex-direction: column;
    gap: var(--sp-24);
}

/* Čtení a rozhodování po jednom: fronta, detail požadavku, detail zdroje. */
.stranka--uzka {
    max-width: var(--stranka-uzka);
}

/* Výjimka s důvodem: mapa témat je dvoupanel na celou výšku okna, protože
   bok s mezerami v osnově musí zůstat vidět při procházení tabulky. */
.stranka--plna {
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

@media (max-width: 640px) {
    .stranka {
        padding: var(--sp-20) var(--sp-16) var(--sp-56);
    }
}

/* ==========================================================================
   Rozcestník, náklady a vydání balíku
   ========================================================================== */

.rozcestnik__perex,
.naklady__perex {
    max-width: 62ch;
    color: var(--ink-muted);
    margin: var(--sp-8) 0 0;
}

/* Brána stojí nad kartami a vypadá jako rozhodnutí, ne jako poznámka.
   Zavřená se hlásí barvou překážky — tou samou, jakou má „co brání dál"
   u požadavku, ne červenou konfliktu (pravidlo 04). */
.rozcestnik__brana {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-8);
    margin: var(--sp-32) 0 0;
    padding: var(--sp-24);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--r-5);
}

.rozcestnik__brana--zavrena {
    background: var(--surface-sunken);
    border-left-color: var(--action);
}

.rozcestnik__brana h2 {
    margin: 0;
}

.rozcestnik__brana p {
    margin: 0;
    max-width: 68ch;
}

.rozcestnik__brana .tlacitko {
    margin-top: var(--sp-8);
}

.rozcestnik__varianty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--sp-20);
    margin: var(--sp-32) 0;
}

.karta-varianty {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    padding: var(--sp-20);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.karta-varianty__hlava h2 {
    margin: 0;
}

.karta-varianty__hlava a {
    color: inherit;
    text-decoration: none;
}

.karta-varianty__kod {
    margin: var(--sp-4) 0 0;
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
}

.karta-varianty__jistota {
    margin: 0;
    color: var(--ink-muted);
}

/* Důvod jistoty je vidět celý, ne v titulku. Jistota, u které je vysvětlení
   schované za najetím myší, se čte jako jistota bez vysvětlení. */
.karta-varianty__duvod {
    display: block;
    margin-top: var(--sp-4);
    color: var(--ink-faint);
}

.karta-varianty__cisla {
    display: flex;
    gap: var(--sp-24);
    margin: 0;
}

.karta-varianty__cisla dt {
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
}

.karta-varianty__cisla dd {
    margin: 0;
    font-size: var(--fs-nadpis-s);
    font-variant-numeric: tabular-nums;
}

/* Věta u čísla, ne o dvě obrazovky dál: proč je nula nula a co drží
   čekárnu. Obojí je závěr domény, ne porucha — proto klidný tón. */
.karta-varianty__brzda,
.karta-varianty__cekarna {
    margin: 0;
    padding: var(--sp-8) var(--sp-12);
    background: var(--surface-sunken);
    border-radius: var(--r-3);
    max-width: 60ch;
}

.karta-varianty__stavy,
.balik__stavy {
    display: flex;
    gap: var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
}

.karta-varianty__prazdno {
    margin: 0;
    color: var(--ink-muted);
}

.karta-varianty__akce,
.balik__prepinac {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin-top: auto;
    padding-top: var(--sp-8);
}

.tlacitko {
    display: inline-block;
    padding: var(--sp-6) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-meta);
    text-decoration: none;
    cursor: pointer;
}

.tlacitko:hover {
    background: var(--surface-sunken);
    text-decoration: none;
}

.tlacitko--hlavni {
    background: var(--action);
    border-color: var(--action);
    color: var(--surface);
}

.tlacitko--hlavni:hover {
    background: var(--focus);
    color: var(--surface);
}

.tlacitko[disabled] {
    opacity: 1;
    background: var(--surface-sunken);
    border-color: var(--line);
    color: var(--ink-faint);
    cursor: not-allowed;
}

.rozcestnik__seznam {
    margin: var(--sp-12) 0 0;
    padding-left: var(--sp-20);
    color: var(--ink-muted);
}

.rozcestnik__seznam li {
    margin-bottom: var(--sp-8);
}

.naklady__blok {
    margin-top: var(--sp-40);
}

.naklady__pozn,
.balik__pozn {
    margin: var(--sp-12) 0 0;
    max-width: 78ch;
    color: var(--ink-muted);
}

.c-cislo {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.balik__urovne {
    margin: var(--sp-24) 0;
}

.balik__uroven {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    padding: var(--sp-6) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    color: var(--ink-muted);
    text-decoration: none;
}

.balik__uroven--aktivni {
    color: var(--ink);
    border-color: var(--mark);
    background: var(--surface);
}

.balik__souhrn {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-32);
    padding: var(--sp-20);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.balik__identita,
.balik__prazdno,
.balik__kontrakt,
.balik__vydani {
    margin-top: var(--sp-32);
    padding: var(--sp-20);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.balik__verdikt {
    margin: var(--sp-12) 0 0;
}

/* Id balíku pro platformu a štítek, jestli už je zmrazené. Id je dlouhé
   a bez mezer, na úzké obrazovce se láme kdekoli. */
.balik__id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8) var(--sp-12);
    margin: var(--sp-12) 0 var(--sp-8);
    overflow-wrap: anywhere;
}

/* Stav nese tvar rámečku i text, ne jen barva: tečkovaný = teprve se
   zmrazí, plný = zmrazeno v evidenci. */
.balik__stitek {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-meta);
    padding: 3px 9px;
    border-radius: var(--r-2);
    white-space: nowrap;
    color: var(--ink-muted);
    background: transparent;
    border: 1px dotted var(--mark-unassessed);
}

.balik__stitek--zmrazeno {
    color: var(--chip-verified-ink);
    background: var(--chip-verified-bg);
    border: 1px solid var(--chip-verified-line);
}

/* Tři verdikty, tři různá vyjádření. Neplatný je červený, protože je to tvrdý
   blokátor (pravidlo 04); neověřený není červený ani zelený — je to jiná
   kategorie, ne mezistupeň. */
.balik__verdikt--platny strong {
    color: var(--state-verified);
}

.balik__verdikt--neplatny strong {
    color: var(--attention);
}

.balik__verdikt--neznamy strong {
    color: var(--ink-muted);
}

.balik__nalezy,
.balik__prekazky {
    margin: var(--sp-12) 0 0;
    padding-left: var(--sp-20);
    color: var(--ink-muted);
}

.balik__formular {
    display: grid;
    gap: var(--sp-12);
    justify-items: start;
    max-width: 46ch;
    margin-top: var(--sp-12);
}

.pole {
    display: grid;
    gap: var(--sp-4);
}

.pole__popisek {
    font-size: var(--fs-meta);
    color: var(--ink-muted);
}

/* ---- Mapa témat a požadavků ------------------------------------------- */

/* Hlavní obrazovka dílny podle návrhu v0.2. Dvousloupcová: strom vlevo,
   trvalý bok vpravo. Bok není panel, který se otvírá — mezery v pokrytí
   a rozdíl mezi tématem a požadavkem musí být vidět pořád, protože to je
   to jediné, co obrazovka učí. */
/* Dvoupanel: tabulka a bok vedle sebe. Směr se říká výslovně — `.stranka`
   staví obrazovky do sloupce a mapa je jediná, která ho potřebuje otočit.
   Bez toho se bok propadl pod tabulku a vypadal jako patička. */
.mapa {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100vh - 44px);
}

.mapa__hlavni {
    flex: 1;
    min-width: 0;
    padding: var(--sp-16) var(--sp-20) var(--sp-56);
}

.mapa__hlavicka {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-16);
    flex-wrap: wrap;
}

.mapa__uvod {
    flex: 1;
    min-width: 40ch;
}

.mapa__uvod h1 {
    margin: 0;
}

.mapa__popis {
    margin: var(--sp-4) 0 0;
    max-width: 84ch;
    color: var(--ink-muted);
}

.mapa__cisla {
    flex: none;
    gap: var(--sp-24);
}

/* ---- Shrnutí překážek ------------------------------------------------- */

/* Sloupec „Co brání dál" nesl tutéž větu padesátkrát pod sebou. Tady je
   jednou a nese navíc to, co v řádku nikdy nešlo vidět: kolika požadavků
   se týká. */
.mapa__brzdy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-16);
    margin: var(--sp-12) 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
}

.mapa__brzdy strong {
    font-family: var(--pismo-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---- Strom ------------------------------------------------------------ */

.mapa__tabulka {
    margin-top: var(--sp-12);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
}

.mapa__zahlavi,
.mapa__radek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px 300px;
    align-items: center;
    padding: 0 var(--radek-buňka);
}

.mapa__zahlavi {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
}

.mapa__radek {
    min-height: var(--radek);
    border-bottom: 1px solid var(--line-soft);
}

.mapa__radek:last-child {
    border-bottom: 0;
}

/* Téma má vlastní podklad. Odsazení samo nestačí — na patnáctém řádku ho
   oko přestane počítat. */
.mapa__radek--tema {
    background: var(--surface-sunken);
}

.mapa__nazev {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    min-width: 0;
    padding: var(--sp-6) 0;
}

.mapa__glyf {
    flex: none;
    width: 10px;
    font-size: var(--fs-mikro);
    color: var(--mark-unassessed);
}

.mapa__odsazeni {
    display: block;
    flex: none;
    width: 20px;
}

/* Kurzíva jen tady, ne v .tema — makro se používá i v tabulkách, kde
   nemá s čím kontrastovat. */
.mapa__radek--tema .tema {
    font-style: italic;
}

.mapa__odkaz {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.mapa__odkaz:hover,
.mapa__odkaz:focus-visible {
    border-bottom-color: var(--action);
}

/* ---- Podíl průchodných ------------------------------------------------ */

.mapa__pokryti {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding-right: var(--sp-12);
}

.mapa__pruh {
    display: block;
    flex: 1;
    height: 5px;
    border-radius: var(--r-1);
    background: var(--track);
    overflow: hidden;
}

.mapa__pruh-vypln {
    display: block;
    height: 100%;
    background: var(--mark);
}

.mapa__podil {
    flex: none;
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

/* Značka „ověřením by neprošel". Tvar, ne barva: neprůchodnost je normální
   stav rozpracovaného jádra, ne porucha. */
/*
 * Téma bez vlastního dokladu.
 *
 * Achromatické schválně. Není to konflikt ani blokátor — je to chybějící
 * doklad, tedy totéž, co jinde na obrazovkách nese značka „neposouzeno".
 * Červená je vyhrazená rozporu a tady by tvrdila, že je něco špatně;
 * ono to jen ještě není doložené.
 */
.mapa__bezdokladu {
    margin-left: var(--sp-8);
    padding: 0 var(--sp-6);
    border: 1px dotted var(--mark-unassessed);
    border-radius: var(--r-plna);
    color: var(--ink-faint);
    font-size: var(--fs-mikro);
    line-height: var(--lh-mikro);
    white-space: nowrap;
}

.mapa__brzda {
    display: block;
    width: 10px;
    height: 10px;
    border: 1.25px dotted var(--mark-unassessed);
    border-radius: var(--r-plna);
}

.mapa__znamky {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
}

/* Důkazní souhrn je na mapě užší a nižší než v detailu. V plné šířce z něj
   na čtyřiceti řádcích pod sebou vznikne černý sloupec, který přebije stav
   i jistotu — a ty nesou víc. */
.mapa__znamky .dukazy {
    width: 60px;
    height: 10px;
}

.mapa__znamky .dukazy__podporuje,
.mapa__znamky .dukazy__zpochybnuje {
    height: 10px;
}

.mapa__zbytek {
    margin: var(--sp-12) 0 0;
    color: var(--ink-muted);
}

/* ---- Bok -------------------------------------------------------------- */

/* Bok se drží ve výřezu. Mezery v pokrytí sylabu jsou seznam práce, která
   se má dělat při čtení tabulky — odrolované pryč by z nich byl doslov. */
.mapa__bok {
    position: sticky;
    top: 44px;
    align-self: flex-start;
    width: 300px;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    flex: none;
    background: var(--surface);
    border-left: 1px solid var(--line);
}

.mapa__blok {
    padding: var(--sp-12);
    border-bottom: 1px solid var(--line);
}

.mapa__nadpis-boku {
    margin: 0 0 var(--sp-8);
    font-size: var(--fs-mikro);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

/* Pruh osnovy: čtrnáct bodů na jednom pohledu.
   Seznam mezer říká, co chybí; teprve pruh říká, kolik z celku to je.
   Do 19. 8. 2026 byla v boku jen ta první polovina, takže obrazovka
   uměla vyjmenovat díry, ale ne ukázat poměr — a poměr je to, co
   rozhoduje, jestli se s osnovou vůbec něco děje.

   Tvar, ne odstín: připnuté je plné, odvozené má obrys, mezera je
   čárkovaná. Rozdíl drží i na monochromatické tiskárně a u oka,
   které barvy nerozezná. */
.osnova-pruh {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-12);
    padding: 0;
    list-style: none;
}

.osnova-pruh__bod {
    display: grid;
    place-items: center;
    inline-size: var(--sp-24);
    block-size: var(--sp-24);
    border-radius: var(--r-2);
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    line-height: 1;
}

.osnova-legenda__znak--primo,
.osnova-pruh__bod--primo {
    background: var(--mark);
    border: 1px solid var(--mark);
    color: var(--surface);
}

.osnova-legenda__znak--odvozene,
.osnova-pruh__bod--odvozene {
    background: var(--surface-sunken);
    border: 1px solid var(--mark-unassessed);
    color: var(--ink);
}

.osnova-legenda__znak--mezera,
.osnova-pruh__bod--mezera {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--ink-faint);
}

.osnova-legenda {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-12);
    padding: 0;
    list-style: none;
}

.osnova-legenda li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-6);
}

.osnova-legenda__znak {
    inline-size: var(--sp-12);
    block-size: var(--sp-12);
    border-radius: var(--r-1);
    flex: none;
    translate: 0 2px;
}

.mapa__mezery {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

/* Čárkovaný rámeček, ne červený odznak. Sylabus není splněný na 100 %
   ani v jednom předmětu a trvalá červená by obrazovku udělala nečitelnou. */
.mapa__mezera {
    border: 1px dashed var(--line);
    border-radius: var(--r-2);
    padding: var(--sp-8);
}

.mapa__mezera-nazev {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
}

.mapa__mezera-text {
    margin-top: var(--sp-2);
    font-size: var(--fs-tabulka);
    line-height: var(--lh-zaklad);
    color: var(--ink);
}

.mapa__pozn {
    margin: var(--sp-8) 0 0;
    color: var(--ink-muted);
}

.mapa__vyklad {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

.mapa__vyklad p {
    margin: 0;
    padding-left: var(--sp-8);
    font-size: var(--fs-tabulka);
    line-height: var(--lh-zaklad);
}

.mapa__vyklad-tema {
    border-left: 2px solid var(--line);
    font-style: italic;
}

.mapa__vyklad-pozadavek {
    border-left: 2px solid var(--action);
}

/* Postup požadavku na jeho detailu. Blokátor stojí vedle tlačítka, ne
   v tooltipu — důvod se má číst dřív, než se na tlačítko sáhne. */
.podklad__postup {
    margin: var(--sp-16) 0;
}

.podklad__postup form {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    flex-wrap: wrap;
}

.podklad__postup .t-meta {
    color: var(--ink-muted);
    max-width: 72ch;
}

@media (max-width: 1100px) {
    .mapa {
        flex-direction: column;
    }

    .mapa__bok {
        position: static;
        width: auto;
        max-height: none;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

/* ---- Obrazovka materiálů ---------------------------------------------- */

/* Obrazovka vede shora dolů podle toho, jak ubývá jistota: trychtýř, co model
   vyčetl, fronta rozporů, seznam. Bloky jsou proto oddělené plochou, ne linkou
   — linka by je udělala rovnocennými a pořadí by přestalo nést význam. */
/* Materiály mají mezi bloky víc vzduchu než ostatní obrazovky: každý blok
   je jiný pohled na tatáž data a bez odstupu splývají v jeden sloupec. */
.materialy {
    gap: var(--sp-32);
}

.materialy__hlavicka {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-16);
    flex-wrap: wrap;
}

.materialy__hlavicka > div:first-child {
    flex: 1;
    min-width: 40ch;
}

.materialy__hlavicka h1 {
    margin: 0;
}

.materialy__popis {
    margin: var(--sp-4) 0 0;
    max-width: 84ch;
    color: var(--ink-muted);
}

.materialy__cisla {
    display: flex;
    gap: var(--sp-20);
    flex: none;
}

.materialy__cislo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Čekající práce se odliší barvou písma, ne odznakem. Odznak u čísla, které
   je většinu času nula, naučí oko to místo přeskakovat. */
.materialy__cislo--ceka {
    color: var(--caution);
}

.materialy__blok {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    padding: var(--sp-24);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.materialy__blok h2 {
    margin: 0;
}

.rozpory__ovladani,
.materialy__ovladani {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    flex-wrap: wrap;
}

.rozpory__ovladani input[type="search"] {
    min-width: 22rem;
    flex: 1 1 22rem;
}

/* Přepínač vypadá jako akce, protože akce to je: otevírá rozhodování.
   Trojúhelník prohlížeče se schovává — nese tutéž informaci dvakrát
   a v každém prohlížeči jinak. */
.rozpor__nadpis-sad {
    margin: 0;
}

.rozpor__prepinac {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    width: fit-content;
    padding: var(--sp-6) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--action);
    font-size: var(--fs-tabulka);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.rozpor__prepinac::-webkit-details-marker {
    display: none;
}

.rozpor__prepinac::before {
    content: '+';
    font-variant-numeric: tabular-nums;
}

.rozpor__rozhodnuti[open] .rozpor__prepinac::before {
    content: '−';
}

.rozpor__rozhodnuti[open] .rozpor__nadpis-sad {
    margin: 0;
}

.rozpor__prepinac {
    margin-bottom: var(--sp-12);
}

/* Stránkování drží stav vlevo a kroky vpravo: kde stojím je informace,
   kam dál je akce, a dvě různé věci nemají splývat do jednoho řádku. */
.strankovani {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    flex-wrap: wrap;
    margin-top: var(--sp-12);
    padding-top: var(--sp-12);
    border-top: 1px solid var(--line-soft);
}

/* Nad výpisem je táž komponenta obrácená: čára pod sebou, ne nad sebou,
   a menší odstup. Je to orientace před prací, ne uzávěr po ní. */
.strankovani--horni {
    margin: 0 0 var(--sp-12);
    padding: 0 0 var(--sp-12);
    border-top: 0;
    border-bottom: 1px solid var(--line-soft);
}

.strankovani__stav {
    margin: 0;
}

.strankovani__kroky {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cíl klikání je celá dlaždice čísla, ne samotná číslice. Tři znaky široký
   odkaz se na dotykovém displeji netrefí a myší se hledá. */
.strankovani__krok {
    display: inline-grid;
    place-items: center;
    min-width: var(--radek);
    height: var(--radek);
    padding: 0 var(--sp-8);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface);
    font-size: var(--fs-tabulka);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--action);
}

.strankovani__krok:hover {
    background: var(--surface-sunken);
}

/* Aktuální strana není odkaz a nesmí jako odkaz vypadat — jinak se na ni
   kliká dokola a nic se neděje. */
.strankovani__krok--tady {
    background: var(--action);
    border-color: var(--action);
    color: var(--surface);
    font-weight: 500;
}

.strankovani__krok--zhasly {
    color: var(--ink-faint);
    background: transparent;
    border-color: var(--line-soft);
}

.strankovani__vypustka {
    padding: 0 var(--sp-4);
    color: var(--ink-faint);
}

.materialy__blok-hlava {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-12);
}

/* Hledací pole musí unést celý svůj popisek. Zkrácený placeholder
   („Hledat podle názvu neb…") slibuje míň, než pole umí. */
.materialy__ovladani input[type="search"] {
    min-width: 22rem;
    flex: 1 1 22rem;
}

.pravni__presety {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.pravni__tlacitka-presetu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

/* Každý cíl skoku má odstup od lepivé hlavičky. Bez něj doskočí prohlížeč
   přesně na hranu prvku a prvních 44 px — typicky nadpis toho, kam skáčeme —
   zůstane schované pod hlavičkou. Platí pro kotvy v adrese i pro
   `scrollIntoView` z controlleru, což jsou obě cesty, kterými se dílna
   vrací na místo práce. */
[id] {
    scroll-margin-top: calc(44px + var(--sp-16));
}

/* ==========================================================================
   Karta a soupis faktů — sdílené komponenty
   ========================================================================== */

/* Karta ohraničuje **jedno tvrzení nebo jednu skupinu údajů**. Obrazovky
   zdrojů ji do 19. 8. 2026 v šabloně používaly, ale v CSS neexistovala —
   výsledkem byl „jen vyhozený text a odkazy", jak to popsal uživatel.
   Prázdná třída je horší než žádná: vypadá jako záměr a nic nedělá. */
.karta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    padding: var(--sp-16);
    margin-top: var(--sp-20);
}

.karta > :first-child {
    margin-top: 0;
}

.karta > :last-child {
    margin-bottom: 0;
}

/* Soupis faktů: `dl` vysazený jako drobná tabulka. Údaj a jeho popis pod
   sebou, sloupce vedle sebe — pět holých vět „formát: pdf" pod sebou se
   čte pomaleji než pět buněk, protože oko musí u každé znovu najít, kde
   končí popis a začíná hodnota. */
/* Uvnitř flexové řady je soupis **celý řádek**, ne sloupec vedle ostatních.
   Bez toho mu flex přidělil 138 px, mřížka spadla na jeden sloupec a pět
   údajů balíku stálo pod sebou přes půl obrazovky — přesně to uživatel
   nahlásil jako „zabírá to zbytečně moc místa a není to přehledné". */
.fakta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    flex: 1 1 100%;
    gap: 1px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
}

/* Čáru kreslí buňka obrysem, ne podklad pod mřížkou. Podklad by dokreslil
   mřížku i tam, kde poslední řádek nedosedl — pět faktů ve čtyřech
   sloupcích by mělo tři prázdné šedé buňky, které nic neznamenají. */
.fakta > div {
    background: var(--surface);
    outline: 1px solid var(--line);
    padding: var(--sp-8) var(--sp-12);
}

.fakta dt {
    font-size: var(--fs-mikro);
    letter-spacing: var(--ls-mikro);
    color: var(--ink-muted);
}

.fakta dd {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-veta);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ==========================================================================
   Obrazovky zdrojů (vrstva A — co stojí v katalogu)
   ========================================================================== */

.zdroj__hlavicka {
    margin-bottom: 0;
}

.zdroj__hlavicka h1 {
    margin: var(--sp-4) 0 0;
}

.zdroj__hlavicka p {
    margin: 0;
}

.zdroj__udaje,
.zdroj__soubor,
.zdroj__moznosti,
.zdroj__vysvetleni,
.zdroj__otazky {
    margin-top: var(--sp-16);
}

.zdroj__udaje > * + *,
.zdroj__soubor > * + * {
    margin-top: var(--sp-12);
}

/* Tvar otázky je návěští, ne nadpis. Vlastník produktu se na schůzce ztratil
   přesně tady („to není otázka, to je odpověď, ne?") — proto stojí nad
   zněním a odlišuje se tvarem, ne velikostí. */
.zdroj__tvar-velky {
    display: inline-block;
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border: 1px solid var(--line);
    border-radius: var(--r-plna);
    padding: var(--sp-2) var(--sp-8);
    margin-bottom: var(--sp-8);
}

.zdroj__zneni {
    margin: 0;
}

.zdroj__varianty {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: var(--sp-12) 0 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
}

.zdroj__varianta {
    display: grid;
    grid-template-columns: var(--sp-20) 1fr auto;
    align-items: baseline;
    gap: var(--sp-8);
    background: var(--surface);
    padding: var(--sp-8) var(--sp-12);
}

/* Označená odpověď se odlišuje podkladem a znakem, ne barvou. Zelená by
   tady četla „ověřeno námi", jenže tohle je tvrzení **katalogu** — a právě
   ten si u rozporných otázek protiřečí. */
.zdroj__varianta--spravna {
    background: var(--surface-sunken);
}

.zdroj__varianta--spravna .zdroj__znak {
    color: var(--mark);
    font-weight: 600;
}

.zdroj__znak {
    font-family: var(--pismo-mono);
    color: var(--ink-faint);
    text-align: center;
}

.zdroj__popis {
    padding-left: var(--sp-12);
    border-left: 2px solid var(--line);
    color: var(--ink-muted);
}

.zdroj__nesoulad {
    color: var(--caution);
}

.zdroj__seznam {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: var(--sp-12) 0 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
}

.zdroj__seznam li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-12);
    background: var(--surface);
    padding: var(--sp-8) var(--sp-12);
}

.zdroj__seznam li:hover {
    background: var(--surface-sunken);
}

.zdroj__seznam a {
    min-width: 0;
}

.zdroj__tvar {
    flex: none;
    white-space: nowrap;
}

.zdroj__navigace {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-top: var(--sp-24);
    padding-top: var(--sp-12);
    border-top: 1px solid var(--line);
}

/* Jediný odkaz v navigaci nesmí skočit doleva, když je to „další" —
   šipka by se čtenáři vysmála směrem, kterým nevede. */
.zdroj__navigace a:only-child:last-child {
    margin-left: auto;
}

.zdroj__otazka-polozka:target {
    scroll-margin-top: 80px;
    background: var(--surface-sunken);
    outline: 2px solid var(--focus);
    border-radius: var(--r-3);
    padding: var(--sp-4) var(--sp-8);
}

.materialy__dvojice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-32);
    align-items: start;
}

.materialy__zdroj {
    margin: 0;
    color: var(--ink-faint);
}

.materialy__potencial {
    display: inline-block;
    font-size: var(--fs-mikro);
    line-height: var(--lh-mikro);
    padding: var(--sp-2) var(--sp-6);
    margin: 0 var(--sp-4) var(--sp-4) 0;
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    color: var(--ink-muted);
}

/* ---- Trychtýř ---------------------------------------------------------- */

/* Pruh je jen obrys čísla vedle sebe, ne samostatné sdělení. Kdyby stál sám,
   sváděl by k odečítání podílu z délky — a ten se má číst z čísla. */
.trychtyr {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trychtyr__krok {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.trychtyr__hlava {
    display: flex;
    align-items: baseline;
    gap: var(--sp-12);
}

.trychtyr__pocet {
    min-width: 5ch;
}

.trychtyr__nazev {
    font-size: var(--fs-zaklad);
    line-height: var(--lh-zaklad);
}

/* Úbytek je to podstatné číslo celého trychtýře, ale není to porucha —
   materiál mimo dosah je pravdivý stav, ne chyba. Proto tlumeně, ne červeně. */
.trychtyr__ubylo {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-faint);
}

.trychtyr__pruh {
    height: 6px;
    background: var(--surface-sunken);
    border-radius: var(--r-4);
    overflow: hidden;
}

.trychtyr__vypln {
    display: block;
    height: 100%;
    background: var(--mark);
}

.trychtyr__proc {
    margin: 0;
    color: var(--ink-muted);
}

/* ---- Fronta rozporů ---------------------------------------------------- */

.rozpor__seznam {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rozpor {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: var(--sp-16);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-5);
}

.rozpor__hlava {
    display: flex;
    align-items: baseline;
    gap: var(--sp-12);
    flex-wrap: wrap;
}

.rozpor__nazev {
    font-size: var(--fs-veta);
    line-height: var(--lh-veta);
}

/* Obě strany rozporu vedle sebe a stejně velké. Kdyby jedna byla nahoře nebo
   větší, obrazovka by za kurátora naznačovala odpověď — a smysl fronty je,
   že se rozhodnout nedá strojově. */
.rozpor__strany {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
}

.rozpor__strana {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-12);
    background: var(--surface-sunken);
    border-radius: var(--r-4);
}

.rozpor__duvod {
    color: var(--ink-muted);
}

.rozpor__akce {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    flex-wrap: wrap;
}

/* Řádek čekající na ruku se odliší podkladem, ne rámečkem. Rámeček by
   v tabulce o sto řádcích rozbil svislé linky sloupců. */
.tabulka__radek--ceka td {
    background: var(--surface-sunken);
}

.tabulka--siroka {
    display: block;
    overflow-x: auto;
}

@media (max-width: 900px) {
    .materialy__dvojice,
    .rozpor__strany {
        grid-template-columns: 1fr;
    }
}

/* Zdroj v důkazních účtech: druh a sloučení hlasu pod odkazem.
   Obojí je věta o tom, čemu se věří — ne popisek, a proto stojí na
   vlastním řádku, ne v závorce za odkazem. */
.podklad__druh,
.podklad__spolecne {
    display: block;
    font-size: var(--fs-mikro);
    line-height: var(--lh-mikro);
    color: var(--ink-faint);
}

.podklad__spolecne {
    margin-top: var(--sp-4);
    color: var(--caution);
}

/*
    Pasáže, které si dílna z materiálu vypsala. Citace je vysazená jinak než
    okolní text schválně — je to cizí věta, ne naše, a čtenář to má poznat
    dřív, než ji přečte.
*/
.zdroj__pasaze {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    margin: var(--sp-12) 0 0;
    padding: 0;
    list-style: none;
}

.zdroj__citace {
    margin: var(--sp-4) 0 0;
    padding-left: var(--sp-12);
    border-left: 2px solid var(--line);
    color: var(--ink-muted);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
}

/* Dvě dráhy fronty. Záložky, ne odkazy v řádku: rozdíl mezi „práce" a
   „čeká na import" je dělicí čára, ne další filtr vedle témat. */
.fronta__drahy {
    display: flex;
    gap: var(--sp-24);
    margin-bottom: var(--sp-8);
    border-bottom: 1px solid var(--line);
}

.fronta__draha {
    padding: var(--sp-8) 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
    text-decoration: none;
}

.fronta__draha--vybrana {
    border-bottom-color: var(--action);
    color: var(--ink);
    font-weight: 600;
}

.fronta__draha-popis {
    margin: 0 0 var(--sp-20);
    max-width: 62ch;
}

/*
 * Rozpory v označené správné odpovědi.
 *
 * Karta na rozhodnutí, ne řádek tabulky. Rozpor se nedá posoudit z jednoho
 * sloupce — je potřeba vidět znění, všechny sady odpovědí i to, kolika
 * výskytů se týká, a teprve pak vybírat.
 */


.rozpory__hlavicka {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

.rozpory__popis {
    max-width: 46rem;
    color: var(--ink-muted);
}

.rozpory__pocty {
    display: flex;
    gap: var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rozpor {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    padding: var(--sp-20);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
}

/* Vypořádaný zůstává čitelný, jen ustoupí. Není to hotová položka seznamu,
   je to rozhodnutí, které musí jít po roce dohledat. */
.rozpor--vyporadany {
    background: var(--surface-sunken);
    border-color: var(--line-soft);
}

.rozpor__zneni {
    font-size: var(--fs-veta);
    line-height: var(--lh-veta);
}

/* Právní posouzení období. Vlastní obrazovka, ne sekce v detailu požadavku:
   posuzuje se období nahrávání, ne soubor, a rozhoduje o něm někdo jiný než
   o požadavcích. */


.pravni__hlavicka {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

.pravni__popis {
    max-width: 60ch;
}

/* Dlaždice souhrnu nesou ještě tlačítko „předvyplnit". Zarovnává se doleva
   pod popisek, ne na výšku čísla — je to nabídka, ne součást hodnoty. */
.pravni__souhrn .akce {
    align-self: flex-start;
    margin-top: var(--sp-4);
}

.pravni__sekce {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

.pravni__formular {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    max-width: 44rem;
    padding: var(--sp-16);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
}

/* Původ formulace, ne její stav. Vlastní tvar (rámeček, ne výplň), aby se
   ve sloupci vedle stavu a jistoty nečetla jako třetí stupeň téže škály. */
.rukou {
    display: inline-block;
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    font-size: var(--fs-mikro);
    color: var(--ink-muted);
    white-space: nowrap;
}

.rozpor__tvar {
    color: var(--ink-muted);
}

.rozpor__cisla {
    color: var(--ink-muted);
}

.rozpor__sady {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rozpor__sady li {
    padding: var(--sp-2) var(--sp-8);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    line-height: var(--lh-mikro);
}

.rozpor--vyporadany .rozpor__sady li {
    background: var(--surface);
}

.rozpor__zaver {
    color: var(--ink-muted);
}

.rozpor__formular {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    padding-top: var(--sp-12);
    border-top: 1px solid var(--line-soft);
}

.rozpor__volba {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Legenda je návěští skupiny, ne věta. Ve `fieldset` bez úpravy splývá
   s volbami pod sebou a čtenář nepozná, kde jedna otázka končí a druhá
   začíná. */
.rozpor__volba > legend {
    padding: 0;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-mikro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Volba je dlaždice, ne holý přepínač s textem vedle.
   Do 19. 8. 2026 tu stály jen systémové radiobuttony a zaškrtávátka
   s větou za nimi; uživatel to nahlásil jako „jsou tam jenom radiolisty
   a checkboxy, chtělo by to nastylovat". Rám dělá z každé volby cíl,
   který jde trefit myší i palcem — u rozhodnutí, které se nedá vzít
   zpět jinak než dalším rozhodnutím, je přesnost kliknutí věc obsahu,
   ne kosmetiky. */
.rozpor__moznost {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-8);
    padding: var(--sp-8) var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface);
    font-size: var(--fs-zaklad);
    line-height: var(--lh-zaklad);
    cursor: pointer;
}

.rozpor__moznost:hover {
    background: var(--surface-sunken);
}

/* Vybraná volba se pozná rámem a podkladem, ne jen tečkou v kolečku.
   Barva je barvou akce, ne výstrahy — vybrat správnou odpověď není chyba. */
.rozpor__moznost:has(input:checked) {
    border-color: var(--action);
    background: var(--action-weak);
}

.rozpor__moznost:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.rozpor__moznost input {
    grid-row: span 2;
    align-self: center;
    margin: 0;
}

.rozpor__moznost .t-meta {
    grid-column: 2;
    color: var(--ink-muted);
}

.rozpor__podpis {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 22rem;
}

/* Dvě skupiny voleb vedle sebe, když je místo. „Jak to dopadlo" a „co platí"
   jsou dvě otázky jednoho rozhodnutí; pod sebou z nich obrazovka dělá dva
   kroky a kurátor si mezi nimi musí pamatovat, co zvolil nahoře. */
@media (min-width: 900px) {
    .rozpor__formular {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .rozpor__podpis,
    .rozpor__formular > .akce {
        grid-column: 1 / -1;
    }

    /* V mřížce `align-self` nestačí — přes celou šířku roztahuje
       `justify-self`, a tlačítko má být široké podle popisku. */
    .rozpor__formular > .akce {
        justify-self: start;
    }
}