/*
 * Dokumentácia pre agentúry (T480). Načíta sa len na jej stránkach,
 * zvyšok webu ju nesťahuje. Tokeny a tabuľky sú zo `styl.css`, tu je len
 * to, čo dokumentácia má navyše: ponuka častí, kód a zoznamy polí.
 *
 * TELEFÓN NAJPRV. Ponuka častí je na úzkej obrazovke rad tlačidiel nad
 * obsahom, na širokej stĺpec vedľa neho; tabuľky sa pod 720 px skladajú
 * do kariet pravidlom `.tabulka` zo `styl.css`. Dlhé hodnoty háčikov sa
 * zalomia kdekoľvek, aby stránka nikdy nešla do šírky.
 */

.dok-rozlozenie {
    display: grid;
    gap: 24px;
}
@media (min-width: 1024px) {
    .dok-rozlozenie {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
}

.dok-ponuka ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dok-ponuka a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--linka);
    border-radius: 999px;
    background: var(--plocha);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
}
.dok-ponuka a:hover {
    border-color: var(--linka-silna);
}
.dok-ponuka a[aria-current='page'] {
    border-color: var(--zelena);
    background: var(--zelena-pozadie);
    color: var(--zelena-tmava);
}
@media (min-width: 1024px) {
    .dok-ponuka {
        position: sticky;
        top: calc(var(--vyska-hlavicky) + 24px);
    }
    .dok-ponuka ul {
        flex-direction: column;
        gap: 4px;
    }
    .dok-ponuka a {
        display: flex;
        border-color: transparent;
        border-radius: var(--r-s);
        background: none;
    }
}

/* Článok zo `styl.css` má odsadenie zhora pre samostatnú stránku; tu stojí
   vedľa ponuky častí a začína s ňou v jednej výške. */
.dok-obsah {
    min-width: 0;
}
.dok-obsah.clanok {
    padding-block: 0;
}
.dok-obsah > h2:first-child {
    margin-top: 0;
}
/*
 * Kód a hodnoty sa nedelia spojovníkom: `.clanok` delí slová podľa jazyka
 * stránky a z `data-blok="hlavicka"` by na telefóne bolo „hla-vicka“, čo
 * sa nedá skopírovať do štýlu.
 */
.dok-obsah code,
.dok-polia dd {
    hyphens: manual;
}
.dok-obsah code {
    padding: 1px 6px;
    border-radius: var(--r-xs);
    background: var(--plocha-2);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.dok-obsah .kod-ukazka code {
    padding: 0;
    background: none;
    color: inherit;
}
.dok-obsah .kod-ukazka {
    margin: 12px 0 24px;
    font-size: 0.875rem;
}

.dok-karty {
    display: grid;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
@media (min-width: 720px) {
    .dok-karty {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.dok-karty a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--linka);
    border-radius: var(--r);
    background: var(--plocha);
    box-shadow: var(--tien-1);
    color: var(--ink);
    text-decoration: none;
}
.dok-karty a:hover {
    border-color: var(--zelena);
}
.dok-karty span {
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.dok-kroky,
.dok-body {
    padding-left: 1.25em;
}
.dok-kroky li,
.dok-body li {
    margin-bottom: 10px;
}

.dok-siete {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}
.dok-siete li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--linka);
    border-radius: 999px;
    background: var(--plocha);
    color: var(--ink);
    font-size: 0.9375rem;
}
.dok-stitok {
    color: var(--ink-faint);
    font-size: 0.8125rem;
}

.dok-z-kodu,
.dok-poznamka {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: var(--r-s);
    font-size: 0.9375rem;
}
.dok-z-kodu {
    background: var(--zelena-hmla);
    border: 1px solid var(--zelena-pozadie);
}
.dok-poznamka {
    background: var(--zlta-pozadie);
    border: 1px solid var(--zlta-linka);
}

.dok-tabulka {
    margin: 16px 0 32px;
}
@media (min-width: 720px) {
    .clanok .dok-tabulka th[scope='row'] {
        width: 32%;
    }
}
@media (max-width: 719px) {
    .clanok .dok-tabulka th[scope='row'] {
        width: auto;
    }
}

.dok-definicie,
.dok-polia {
    display: grid;
    gap: 10px;
    margin: 16px 0 24px;
}
.dok-definicie > div,
.dok-polia > div {
    display: grid;
    gap: 2px;
}
@media (min-width: 640px) {
    .dok-definicie > div,
    .dok-polia > div {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 16px;
    }
}
.clanok .dok-definicie,
.clanok .dok-polia {
    grid-template-columns: none;
}
.dok-definicie dd,
.dok-polia dd {
    margin: 0;
}
.dok-polia ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok-stitky {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 28px;
    padding: 0;
    list-style: none;
}
.dok-stitky a {
    text-decoration: none;
}

.dok-blok {
    margin: 0 0 16px;
    padding: 18px;
    border: 1px solid var(--linka);
    border-radius: var(--r);
    background: var(--plocha);
    scroll-margin-top: calc(var(--vyska-hlavicky) + 16px);
}
.dok-blok h3 {
    margin: 0 0 6px;
}
.dok-blok .dok-polia {
    margin-bottom: 0;
}
.dok-polozky {
    margin: 16px 0 0;
    font-weight: 600;
}