/*
 * 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-la2u_1Z.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;
}

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

/* ---- 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 oklch(0.72 0.012 264);
    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: oklch(0.36 0.02 264);
    background: oklch(0.96 0.004 264);
    border: 1px solid oklch(0.88 0.006 264);
}

.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: oklch(0.36 0.10 165);
    background: oklch(0.955 0.03 165);
    border: 1px solid oklch(0.86 0.06 165);
}

.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: oklch(0.34 0.13 291);
    background: oklch(0.955 0.03 291);
    border: 1px solid oklch(0.85 0.07 291);
}

.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 oklch(0.70 0.012 264);
}

/* 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: oklch(0.36 0.02 264);
}

.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: oklch(0.45 0.14 25);
    font-weight: 500;
}

.porucha__znak {
    width: 15px;
    height: 15px;
    background: var(--attention);
    color: oklch(1 0 0);
    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);
}

/* ---- 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: oklch(1 0 0);
}

.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: oklch(0.93 0.03 165);
    color: oklch(0.40 0.10 165);
}

.brana__znak--tvrdy {
    background: oklch(0.94 0.05 25);
    color: oklch(0.48 0.16 25);
}

.brana__znak--mekky {
    background: oklch(0.94 0.06 60);
    color: oklch(0.45 0.12 55);
}

.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 {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--sp-40) var(--sp-24) var(--sp-80);
}

.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 {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--sp-40) var(--sp-24) var(--sp-80);
}

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

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

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

.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 {
    padding: var(--sp-40) var(--sp-24) var(--sp-80);
}

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

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

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

.jadro__tabulka {
    width: 100%;
    border-collapse: collapse;
}

.jadro__tabulka th,
.jadro__tabulka td {
    padding: var(--sp-8) var(--sp-12);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}

.jadro__tabulka thead th {
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

.jadro__cislo {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    text-align: right;
}

/* 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 {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--sp-40) var(--sp-24) var(--sp-80);
}

.podklad__hlavicka {
    margin-bottom: var(--sp-24);
}

.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);
}

/* 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-32);
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--line);
    background: var(--surface-sunken);
}

.podklad__sekce {
    margin-bottom: var(--sp-40);
    padding-top: var(--sp-24);
    border-top: 1px solid var(--line-soft);
}

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

.podklad__sekce .jadro__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);
}

.podklad__formular input[type="text"],
.podklad__formular textarea,
.podklad__formular select {
    width: 100%;
    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;
    resize: vertical;
}

/* 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);
}

.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);
}

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

.rozcestnik,
.naklady,
.balik {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--sp-32) var(--sp-24) var(--sp-80);
}

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

.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;
}

.karta-varianty__stavy,
.balik__stavy,
.jadro__pocty {
    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__cisla {
    display: flex;
    gap: var(--sp-32);
    margin: 0;
}

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

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

.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;
}

/* 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 {
    margin: var(--sp-12) 0 0;
    padding-left: var(--sp-20);
    color: var(--ink-muted);
}

.balik__formular {
    display: grid;
    gap: var(--sp-12);
    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);
}

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

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

/* ---- 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čí. */
.mapa {
    display: flex;
    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 {
    display: flex;
    gap: var(--sp-20);
    flex: none;
}

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

/* Chybějící sylabus je slovo, ne nula (pravidlo 03). Mřížka čísel by ho
   ale roztáhla na výšku dvou řádků, proto se sazba srovná zpátky. */
.mapa__cislo--nezname {
    font-size: var(--fs-meta);
    font-family: var(--pismo);
}

/* ---- 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: oklch(0.93 0.005 264);
    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);
}

.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 oklch(0.88 0.006 264);
    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 oklch(0.86 0.008 264);
    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. */
.materialy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-32);
    padding: var(--sp-24) var(--sp-32) var(--sp-56);
    max-width: 1200px;
}

.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);
}

.materialy__blok h2 {
    margin: 0;
}

.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__cislo {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

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

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

/* Požadavky bez odborné kontroly. Konstatování, ne výstraha — vydání to
   nebrání a rám v barvě poruchy by tvrdil opak. */
.balik__bezkontroly {
    margin-top: var(--sp-16);
    padding-left: var(--sp-12);
    border-left: 2px solid var(--jistota-s);
}

/* 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 {
    max-width: 62rem;
    margin: 0 auto;
    padding: var(--sp-32) var(--sp-24) var(--sp-80);
    display: flex;
    flex-direction: column;
    gap: var(--sp-24);
}

.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 {
    display: flex;
    flex-direction: column;
    gap: var(--sp-24);
    max-width: 76rem;
    margin: 0 auto;
    padding: var(--sp-24) var(--sp-16);
}

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

.pravni__popis {
    max-width: 60ch;
}

.pravni__souhrn {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
}

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

/* Prázdno je tu legitimní stav, ne chybějící data — proto plocha, ne šeď. */
.pravni__prazdno {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: var(--sp-20);
    background: var(--surface-sunken);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-4);
}

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

.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;
}

.rozpor__moznost {
    display: flex;
    align-items: baseline;
    gap: var(--sp-8);
    font-size: var(--fs-zaklad);
    line-height: var(--lh-zaklad);
}

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

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