/* ==========================================================================
   Obrazovky garantky (templates/garant/*, prototyp pilotu Main.dc.html)

   Jen tokeny dílny, žádné vlastní odstíny. Hlavička, tlačítka (.akce),
   dlaždice, sdělení a meze jsou komponenty dílny; tady je jen to, co
   prototyp přidal: volby jako dlaždice ve třech sloupcích, panel
   připomínky, výsledek cvičné položky a karty Moje práce.
   Samostatný soubor, aby se pilot nepletl s app.css ostatních obrazovek.
   ========================================================================== */

/* Atribut `hidden` musí vyhrát nad `display: flex` komponent níž — jinak
   by panel připomínky a výsledek cvičné položky byly vidět hned. */
.garant [hidden] {
    display: none !important;
}

/* Odkaz vypadající jako tlačítko nemá podtržení (tlačítka dílny jsou <button>). */
.garant a.akce {
    text-decoration: none;
}

.garant a.akce--hlavni:hover {
    color: var(--on-accent);
}

.garant a.akce:not(.akce--hlavni, .akce--ticha):hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

/* Odstavce dílny nemají reset (vizual-dilny.md, past 2). Uvnitř obrazovek
   garantky rozestupy drží flex gap, ne okraje. */
.garant p,
.garant h2,
.garant ul,
.garant ol,
.garant fieldset {
    margin: 0;
}

/* ---- Hlavička obrazovky ------------------------------------------------ */

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

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

.garant-sloupec--12 {
    gap: var(--sp-12);
}

.garant-radek {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-8) var(--sp-12);
}

.garant-radek--nahore {
    align-items: flex-start;
}

.garant-radek--vlevo {
    justify-content: flex-start;
    align-items: center;
}

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

.garant-akce form {
    margin: 0;
}

.garant-nadpis-s {
    font-size: var(--fs-zaklad);
    font-weight: 600;
    letter-spacing: -0.008em;
}

.garant-nadpis-s--tlumeny {
    color: var(--ink-muted);
}

/* Nadpisek sekce verzálkami (prototyp „ZKOUMANÝ POŽADAVEK“, „DRUH PŘIPOMÍNKY“). */
.garant-nadpisek {
    font-size: var(--fs-mikro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.garant-odstavec {
    max-width: 64ch;
}

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

.garant-tlumene-slabe {
    color: var(--ink-faint);
}

.garant-id {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-faint);
}

.garant-cisla {
    font-variant-numeric: tabular-nums;
}

.garant-cisla strong {
    font-weight: 500;
    color: var(--ink);
}

.garant-seznam {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    max-width: 64ch;
    padding-left: var(--sp-20);
}

.garant-oddil {
    padding-top: var(--sp-24);
    border-top: 1px solid var(--line);
}

/* ---- Plochy -------------------------------------------------------------- */

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

.garant-panel--tesny {
    gap: var(--sp-12);
    padding: var(--sp-20);
}

.garant-panel--volny {
    gap: var(--sp-8);
}

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

.garant-karta.garant-radek {
    flex-direction: row;
    align-items: center;
}

/* Rozhodovací položka: stejná plocha jako položka fronty. */
.garant-polozka {
    display: flex;
    flex-direction: column;
    gap: var(--sp-20);
    padding: var(--sp-32);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-6);
}

.garant-zamceno {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding: var(--sp-24);
    border: 1px dashed var(--line);
    border-radius: var(--r-6);
}

.garant-prazdno {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    padding: var(--sp-40);
    border: 1px dashed var(--line);
    border-radius: var(--r-6);
    text-align: center;
}

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

.garant-meze h2 {
    color: var(--ink);
}

.garant-meze ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-left: var(--sp-20);
}

/* ---- Vítejte ------------------------------------------------------------- */

.garant-body {
    gap: var(--sp-20);
}

.garant-bod {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-12);
    align-items: baseline;
}

.garant-bod__cislo {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
    color: var(--ink-faint);
}

.garant-bod__nadpis {
    font-size: var(--fs-zaklad);
    font-weight: 600;
    letter-spacing: -0.008em;
}

.garant-bod__text {
    grid-column: 2;
    max-width: 64ch;
    font-size: var(--fs-veta);
    line-height: var(--lh-veta);
    letter-spacing: var(--ls-veta);
}

/* ---- Moje práce ---------------------------------------------------------- */

/* Neutrální pruh pokroku jako trychtýř materiálů — dílna barevný progress
   bar nemá a čas není hodnocení. */
.garant-postup {
    height: 6px;
    background: var(--surface-sunken);
    border-radius: var(--r-4);
    overflow: hidden;
}

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

.garant-dlazdice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-16) var(--sp-24);
    align-items: start;
    padding: var(--sp-8) 0;
}

/* Štítek stavu oblasti. Stav nese tvar rámečku i text, ne jen barvu. */
.garant-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(--chip-supported-ink);
    background: var(--chip-supported-bg);
    border: 1px solid var(--chip-supported-line);
}

.garant-stitek--nezacato {
    background: transparent;
    border: 1px dotted var(--mark-unassessed);
}

.garant-stitek--hotovo {
    color: var(--chip-verified-ink);
    background: var(--chip-verified-bg);
    border-color: var(--chip-verified-line);
}

@media (max-width: 640px) {
    .garant-dlazdice {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Úvod ---------------------------------------------------------------- */

.garant-volby {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    overflow: hidden;
}

.garant-volby__radek {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-12);
    padding: var(--sp-8) var(--sp-12);
    background: var(--surface);
}

.garant-volby__nazev {
    font-weight: 500;
}

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

.garant-ukazka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: var(--sp-6) var(--sp-16);
    align-items: start;
    padding-top: var(--sp-12);
    border-top: 1px solid var(--line-soft);
}

.garant-ukazka__volba {
    justify-self: start;
    padding: var(--sp-8) var(--sp-12);
    border: 1px solid var(--action);
    border-radius: var(--r-2);
    background: var(--action-weak);
}

.garant-ukazka__proc {
    grid-column: 1 / -1;
    max-width: 72ch;
}

/* ---- Zkoumaný požadavek -------------------------------------------------- */

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

.garant-zkoumany--zapusteny {
    padding: var(--sp-16);
    background: var(--surface-sunken);
    border-radius: var(--r-4);
}

/* Téma a znění se liší velikostí i řezem (pravidlo 06): téma je „o čem“,
   znění „co s tím umět“. */
.garant-tema {
    font-size: var(--fs-zaklad);
    font-weight: 600;
    letter-spacing: -0.008em;
}

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

/* ---- Navržené předpoklady a volby ----------------------------------------- */

.garant-dvojice-seznam {
    display: flex;
    flex-direction: column;
}

.garant-dvojice-seznam--oddelene {
    padding-top: var(--sp-20);
    border-top: 1px solid var(--line);
}

.garant-otazka-mala {
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--ink-muted);
}

.garant-dvojice-seznam > .garant-otazka-mala {
    padding-top: var(--sp-16);
    border-top: 1px solid var(--line);
}

.garant-dvojice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--sp-20) 0;
    border-bottom: 1px solid var(--line-soft);
    scroll-margin-top: var(--sp-80);
}

.garant-dvojice__hlava {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-8);
    align-items: baseline;
}

.garant-dvojice__hlava--s-akci {
    grid-template-columns: 24px minmax(0, 1fr) auto;
}

.garant-dvojice__tema {
    grid-column: 2;
}

.garant-odsazene {
    margin-left: var(--sp-32);
}

/* Šest voleb jako dlaždice ve třech sloupcích (prototyp :357-364). */
.garant-moznosti {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    padding-left: var(--sp-32);
}

.garant-moznost {
    display: grid;
    grid-template-columns: auto minmax(0, 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);
    cursor: pointer;
}

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

/* Vybraná volba: rámeček akce a slabé pozadí akce, stejně jako rozpory. */
.garant-moznost:has(input:checked) {
    border-color: var(--action);
    background: var(--action-weak);
}

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

.garant-moznost input {
    align-self: center;
    margin: 0;
}

.garant-moznost__popis {
    grid-column: 2;
}

.garant-popis {
    padding-left: var(--sp-32);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--ink-muted);
}

@media (max-width: 640px) {
    .garant-moznosti {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0;
    }

    .garant-odsazene,
    .garant-popis {
        margin-left: 0;
        padding-left: 0;
    }
}

/* ---- Chybí v jádře ------------------------------------------------------- */

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

.garant-chybi input[type='checkbox'] {
    grid-row: span 2;
}

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

.garant-pole input,
.garant-pole textarea {
    width: 100%;
}

/* Text se ukáže, až je zaškrtnuto — bez JavaScriptu, stavem zaškrtávátka. */
.garant-chybi-blok .garant-chybi__text {
    display: none;
}

.garant-chybi-blok:has(.garant-chybi input:checked) .garant-chybi__text {
    display: grid;
}

/* ---- Výsledek cvičné položky ---------------------------------------------- */

.garant-vysledek {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--line);
    background: var(--surface-sunken);
}

.garant-dvojice .garant-vysledek {
    margin-left: var(--sp-32);
}

.garant-vysledek--shoda {
    border-left-color: var(--state-verified);
}

.garant-vysledek__nadpis {
    font-weight: 500;
}

/* ---- Připomínky ---------------------------------------------------------- */

.garant-ulozene {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.garant-ulozene:empty {
    display: none;
}

.garant-ulozena {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-12);
    border-left: 3px solid var(--action);
    background: var(--action-weak);
    font-size: var(--fs-tabulka);
}

.garant-ulozena__nadpis {
    font-weight: 500;
}

.garant-ulozena__stav {
    font-weight: 400;
    color: var(--ink-muted);
}

.garant-ulozena__text {
    color: var(--ink-soft);
}

.garant-panel-pripominky {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    padding: var(--sp-16);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
}

.garant-panel-pripominky__k {
    color: var(--ink);
}

.garant-druhy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
    padding: 0;
    border: 0;
    min-width: 0;
}

.garant-druhy legend {
    padding: 0;
    margin-bottom: var(--sp-4);
}

.garant-druhy .garant-moznost input {
    grid-row: span 2;
}

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

.garant-pripominka--vyrizena {
    background: var(--surface-sunken);
    border-color: var(--line-soft);
}

.garant-pripominka__druh {
    font-weight: 500;
}

.garant-odpoved {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-12);
    border-left: 3px solid var(--line);
    background: var(--surface);
}

.garant-odpoved__nadpis {
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--ink-muted);
}

/* Hláška po uložení (jako hláška fronty). */
.garant-zprava {
    padding: var(--sp-12) var(--sp-16);
    border-left: 3px solid var(--action);
    background: var(--action-weak);
}

@media (max-width: 640px) {
    .garant-druhy,
    .garant-ukazka,
    .garant-volby__radek {
        grid-template-columns: minmax(0, 1fr);
    }

    .garant-polozka {
        padding: var(--sp-20);
    }
}

/* ---- Prohlížeč jádra (docs/57 Ú2) ------------------------------------- */

.prohlizec {
    display: flex;
    flex-direction: column;
    gap: var(--sp-20);
}

.prohlizec__zalozky {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-16);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-8);
}

.prohlizec__zalozky a[aria-current='page'] {
    font-weight: 600;
    text-decoration: none;
}

/* Identita předmětu napravo od záložek (chrání před záměnou variant). */
.prohlizec__predmet {
    margin-inline-start: auto;
    color: var(--ink-muted);
}

.prohlizec__kod {
    font-family: var(--pismo-mono);
    font-size: var(--fs-mikro);
}

.prohlizec__hlavicka {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.prohlizec__hledani {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

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

.prohlizec__pole input {
    flex: 1 1 16rem;
    min-width: 0;
}

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

.prohlizec__osnova,
.prohlizec__seznam {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    margin: 0;
}

.prohlizec__seznam {
    padding-left: 0;
    list-style: none;
}

.prohlizec__tabulka {
    width: 100%;
}

.prohlizec .c-cislo {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.prohlizec-otazka,
.prohlizec-zneni {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-16);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
}

.prohlizec-otazka__zneni,
.prohlizec-zneni__text {
    margin: 0;
    font-weight: 500;
}

.prohlizec-otazka__odpovedi {
    margin: 0;
    padding-left: var(--sp-20);
}

.prohlizec-otazka__spravna {
    font-weight: 600;
}

.prohlizec-otazka__znacka {
    margin-left: var(--sp-6);
    padding: 0 var(--sp-6);
    border-radius: var(--r-1);
    background: var(--chip-verified-bg);
    color: var(--chip-verified-ink);
    font-size: var(--fs-meta);
    font-weight: 500;
}

.prohlizec-zneni__rozpor {
    margin: 0;
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--r-1);
    background: var(--gate-soft-bg);
}

.prohlizec-zneni__sada {
    display: block;
}