/* =============================================================================
   Nové stránky plánu 2026-10 (docs/plan-2026-10/02-architektura.md kap. 9.2
   a 9.3): kartička, mřížky, hlavička v2 a spodní menu.

   Načítá ho jen `templates/layout/nove.html.twig` – existující stránky,
   `components.css` ani hlavička webu se nemění. Každá třída začíná `nv-`
   a bere tokeny z `app.css` (`--color-*`, `--space-*`, `--text-*`,
   `--radius*`); průhledné odstíny z nich skládá `color-mix()`. Barvy, pro
   které `app.css` token nemá – lišta hlavičky a fialové tlačítko placené
   karty, převzaté z `components.css`, aby hlavička v2 vypadala jako
   hlavička webu –, jsou jednou jako `--nv-*` na `.nv-stranka` níže
   (odchylka 11 v docs/plan-2026-10/stav/B1-nabidka.md). Stíny jsou černé.
   Přesun do `components.css` a do tokenů `app.css` přijde až se schválením
   majitele (kap. 16).

   Pravidla zadání pro mobil: písmo formulářů alespoň 16 px, žádný vodorovný
   posuv, dotykové cíle alespoň 44 px, spodní menu nepřekrývá souhlas,
   formulář ani klávesnici.

   Prvek se `hidden` je skrytý i tady: pravidlo s `display` by jinak
   přebilo `[hidden]` prohlížeče (ChecksHiddenAgainstStylesheets), proto
   každý `display` nese `:not([hidden])` nebo má vlastní `[hidden]`.
   ============================================================================= */

/* --- Stránka ---------------------------------------------------------------- */

.nv-stranka {
    --nv-menu-vyska: 56px;

    /* Barvy hlavičky webu a tlačítka `.btn--primary` z `components.css`,
       pro které `app.css` token nemá. */
    --nv-lista: #050913;
    --nv-lista-okraj: rgb(154 104 54 / 58%);
    --nv-lista-text: #d9d6d4;
    --nv-fialova-svetla: #2a1642;
    --nv-fialova-tmava: #190e30;
    --nv-fialova-svetla-hover: rgb(79 39 94 / 94%);
    --nv-fialova-tmava-hover: rgb(31 24 54 / 98%);
    --nv-fialova-zare: rgb(121 52 123 / 13%);
}

/* Formuláře nových stránek: 16 px, aby iOS při zaostření nezvětšoval
   stránku, a pole nikdy širší než sloupec. */
.nv-stranka :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='hidden']), select, textarea) {
    max-width: 100%;
    font-size: max(16px, 1rem);
}

.nv-stranka :is(img, video, svg, canvas, iframe) {
    max-width: 100%;
}

/* Video jen po kliknutí a bez zvuku napřed (zadání kap. 4) – šablona dává
   `preload="none"` a bez `autoplay`; tady jen aby nevytékalo. */
.nv-stranka video {
    height: auto;
}

.nv-sirka {
    width: min(100% - 2rem, var(--content));
    margin-inline: auto;
}

.nv-sirka--siroka {
    width: min(100% - 2rem, var(--content-wide));
}

.nv-sekce {
    padding-block: var(--space-6);
}

.nv-sekce + .nv-sekce {
    padding-block-start: 0;
}

.nv-nadpis {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 430;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.nv-nadpis-sekce {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 430;
    line-height: 1.2;
}

.nv-uvod {
    max-width: 42rem;
    margin: 0 0 var(--space-5);
    color: var(--color-text-soft);
}

/* Stav jako tichá věta, ne štítek v rámečku (pravidlo majitele). */
.nv-stav {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

:is(.nv-mrizka, .nv-karta) + .nv-stav {
    margin-block-start: var(--space-3);
}

/* --- Mřížky karet ----------------------------------------------------------- */

.nv-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
}

/* Čtyři rychlé aktivity: 2 × 2 na telefonu, 4 vedle sebe na počítači. */
.nv-mrizka--ctyri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

/* Velká karta přes celou šířku, dvě menší vedle (Ateliér na /dnes). */
.nv-mrizka--velka {
    grid-template-columns: minmax(0, 1fr);
}

@media (width >= 48rem) {
    .nv-mrizka--velka {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .nv-mrizka--velka > :first-child {
        grid-row: span 2;
    }
}

@media (width >= 64rem) {
    .nv-mrizka--ctyri {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

/* --- Kartička (T03) --------------------------------------------------------- *
 * Obrázek → název → jedna věta výsledku → cena nebo tichý štítek → jedno
 * tlačítko. Celá karta je jeden dotykový cíl: `::after` tlačítka ji celou
 * překryje. Obrázek má pevný poměr stran, aby se obsah při načtení
 * neposouval. Dlouhý název se zalomí kdekoli, cena nikdy.                     */

.nv-karta {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.nv-karta:hover,
.nv-karta:focus-within {
    border-color: var(--color-border);
}

.nv-karta:hover {
    transform: translateY(-2px);
}

.nv-karta__obraz {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: var(--color-gold);
    background:
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--color-gold) 13%, transparent), transparent 62%),
        var(--color-band);
    border-block-end: 1px solid var(--color-border-soft);
}

.nv-karta__obraz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

/* Snímek z vlastního videa produktu, ne jeho výsledný soubor – řečeno tiše přímo na obrázku. */
.nv-karta__obraz {
    position: relative;
}

.nv-karta__popisek {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-start: var(--space-2);
    padding: 2px var(--space-2);
    font-size: var(--text-2xs);
    color: var(--color-text-soft);
    background: rgb(5 9 19 / 72%);
    border-radius: var(--radius-sm);
}

/* Obrázek karty se při najetí jen nepatrně přiblíží – karta žije, ale neposkakuje. */
@media (prefers-reduced-motion: no-preference) {
    .nv-karta:hover .nv-karta__obraz img {
        transform: scale(1.04);
    }
}

.nv-motiv {
    width: 64%;
    height: auto;
    opacity: 0.9;
}

.nv-karta--zdarma .nv-motiv {
    color: var(--color-gold-light);
}

.nv-karta__telo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.nv-karta__nazev {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 480;
    line-height: 1.25;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.nv-karta__vysledek {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-soft);
}

.nv-karta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.45em;
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.nv-karta__meta > * + *::before {
    margin-inline-end: 0.45em;
    content: '·';
    content: '·' / '';
}

/* Pata: cena nebo štítek a pod ní tlačítko přes celou šířku – každá karta
   v mřížce stejně, ať je cena dlouhá, nebo krátká. Velká karta a článek mají
   cenu a tlačítko vedle sebe. */
.nv-karta__pata {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
    margin-block-start: auto;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-soft);
}

.nv-karta--velka .nv-karta__pata,
.nv-karta--obsah .nv-karta__pata {
    flex-flow: row wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
}

/* Cena: číslo a měna nikdy na dvou řádcích (Money::format() dává mezi ně
   nezalomitelnou mezeru, tady ještě nowrap pro čtyřmístné ceny). */
.nv-cena {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-gold-bright);
    white-space: nowrap;
}

/* „Zdarma" a „Základ zdarma" jako tichý text, ne odznak. */
.nv-cena--zdarma {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-gold-light);
}

.nv-karta__tlacitko {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-accent-text);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

/* Celá karta je odkaz tlačítka. */
.nv-karta__tlacitko::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
}

.nv-karta__tlacitko--placena {
    color: var(--color-gold-bright);
    background: linear-gradient(180deg, var(--nv-fialova-svetla), var(--nv-fialova-tmava));
    border-color: var(--color-gold-light);
    box-shadow: inset 0 0 18px var(--nv-fialova-zare);
}

.nv-karta:hover .nv-karta__tlacitko {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-light);
}

.nv-karta:hover .nv-karta__tlacitko--placena {
    background: linear-gradient(180deg, var(--nv-fialova-svetla-hover), var(--nv-fialova-tmava-hover));
}

.nv-karta__tlacitko:focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 2px;
}

.nv-karta:has(.nv-karta__tlacitko:focus-visible) {
    border-color: var(--color-gold-light);
}

.nv-karta__tlacitko[aria-disabled='true'] {
    pointer-events: none;
}

/* „Uložit" nad vrstvou odkazu karty, v rohu obrázku. */
.nv-karta__ulozit {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
}

/* Telefon: obyčejná a obsahová karta vodorovně – obrázek vlevo, text vpravo.
   Katalog s dvaceti nástroji je tak seznam, který se dá projet palcem, ne
   dvacet obrazovek obrázků. Velká a kompaktní mají vlastní rozvržení. */
@media (width < 36rem) {
    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) .nv-karta__obraz {
        aspect-ratio: auto;
        min-height: 8.5rem;
        border-block-end: 0;
        border-inline-end: 1px solid var(--color-border-soft);
    }

    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) .nv-motiv {
        width: 86%;
    }

    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) .nv-karta__telo {
        padding: var(--space-3);
    }

    /* „Uložit" v rohu obrázku, jen ikona – jméno tlačítka zůstává pro čtečku. */
    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) .nv-karta__ulozit {
        inset-block-start: var(--space-1);
        inset-inline: var(--space-1) auto;
    }

    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) .nv-ulozit:not([hidden]) {
        padding: 0;
        justify-content: center;
    }

    .nv-karta:not(.nv-karta--velka, .nv-karta--kompaktni) .nv-ulozit__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Velká: obrázek vedle textu od 48rem. */
@media (width >= 48rem) {
    .nv-karta--velka {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .nv-karta--velka .nv-karta__obraz {
        aspect-ratio: auto;
        min-height: 18rem;
        border-block-end: 0;
        border-inline-end: 1px solid var(--color-border-soft);
    }

    .nv-karta--velka .nv-karta__telo {
        justify-content: center;
        padding: var(--space-6);
    }

    .nv-karta--velka .nv-karta__nazev {
        font-size: var(--text-2xl);
    }

    .nv-karta--velka .nv-karta__vysledek {
        font-size: var(--text-md);
    }
}

/* Kompaktní: rychlé aktivity 2 × 2 na telefonu. Cena nad tlačítkem,
   tlačítko přes celou šířku karty. */
.nv-karta--kompaktni .nv-karta__obraz {
    aspect-ratio: 16 / 9;
}

.nv-karta--kompaktni .nv-motiv {
    width: 46%;
}

.nv-karta--kompaktni .nv-karta__telo {
    gap: var(--space-1);
    padding: var(--space-3);
}

.nv-karta--kompaktni .nv-karta__nazev {
    font-size: var(--text-md);
}

/* Věta se neořezává: kartičky rychlých aktivit mají krátkou větu (nejvýš
   `OfferCatalog::COMPACT_OUTCOME_MAX` znaků), aby se na telefonu vešla
   celá na tři řádky. */
.nv-karta--kompaktni .nv-karta__vysledek {
    font-size: var(--text-xs);
}

.nv-karta--kompaktni .nv-karta__tlacitko {
    padding-inline: var(--space-2);
    letter-spacing: 0.06em;
}

/* Obsah: článek nebo video Magazínu – obrázek 16 : 9, tlačítko jako odkaz. */
.nv-karta--obsah .nv-karta__obraz {
    aspect-ratio: 16 / 9;
}

.nv-karta--obsah .nv-karta__tlacitko {
    min-height: 44px;
    padding-inline: 0;
    letter-spacing: 0.08em;
    border-color: transparent;
}

/* --- Tlačítko „Uložit" (formulář SaveButton, chování C7) -------------------- */

.nv-ulozit-formular {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.nv-ulozit__stav {
    font-size: var(--text-xs);
    color: var(--color-text-soft);
}

.nv-ulozit__stav:empty {
    display: none;
}

.nv-ulozit[hidden] {
    display: none;
}

.nv-ulozit:not([hidden]) {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.85rem;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-soft);
    cursor: pointer;
    background: color-mix(in srgb, var(--color-background) 78%, transparent);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nv-ulozit:hover,
.nv-ulozit:focus-visible {
    color: var(--color-gold-light);
    border-color: var(--color-border);
}

.nv-ulozit[aria-pressed='true'] {
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
}

.nv-ulozit[aria-pressed='true'] .nv-ikona path {
    fill: currentcolor;
}

.nv-ikona {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Hlavička v2 --------------------------------------------------------------- *
 * Telefon: logo, hledání a menu, 56 px. Od 64rem logo, šest odkazů, vpravo
 * hledání, „Moje objednávky" a účet, 72 px. Bez JavaScriptu: menu i hledání
 * jsou `<details>`.                                                             */

.nv-hlavicka {
    position: relative;
    z-index: 20;
    background-color: var(--nv-lista);
    border-block-end: 1px solid var(--nv-lista-okraj);
}

.nv-hlavicka__vnitrek {
    position: relative;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    width: min(100% - 1.5rem, var(--header-width));
    height: 56px;
    margin-inline: auto;
}

.nv-hlavicka__logo {
    flex: 0 0 auto;
    width: 144px;
    height: 36px;
    margin-inline-start: -6px;
    background-image: url("../../images/logo-ifhMIBU.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    /* Logo má vlastní tmavé pozadí o odstín jiné než lišta; zesvětlení ho
       s lištou slije, aby kolem znaku nebyl vidět obdélník. */
    mix-blend-mode: lighten;
}

.nv-hlavicka__menu {
    display: none;
}

.nv-hlavicka__odkaz {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--nv-lista-text);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.08em;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.nv-hlavicka__odkaz:hover,
.nv-hlavicka__odkaz[aria-current='page'] {
    color: var(--color-accent-text);
}

/* Aktuální stránka: zlatá vlasová čára pod odkazem. */
.nv-hlavicka__odkaz[aria-current='page']::after {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: 6px;
    height: 1px;
    content: '';
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
}

.nv-hlavicka__odkaz--neni {
    color: var(--color-muted);
}

.nv-hlavicka__nastroje {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    margin-inline-start: auto;
}

.nv-hlavicka__ikona {
    position: relative;
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-soft);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-pill);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.nv-hlavicka__ikona::-webkit-details-marker {
    display: none;
}

.nv-hlavicka__ikona:hover,
.nv-hlavicka__ikona[aria-current='page'],
details[open] > .nv-hlavicka__ikona {
    color: var(--color-gold-light);
    background: color-mix(in srgb, var(--color-gold) 9%, transparent);
}

/* Popisek „Moje objednávky" jen tam, kde se vejde; jinde zůstává jménem
   odkazu pro čtečku. */
.nv-hlavicka__popis {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.nv-hlavicka__ucet {
    display: none;
}

/* Menu na telefonu a tabletu. */
.nv-menu {
    position: static;
}

.nv-menu__panel {
    position: absolute;
    z-index: 30;
    inset-block-start: 100%;
    inset-inline: -0.75rem;
    display: grid;
    gap: 2px;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--nv-lista);
    border-block-end: 1px solid var(--color-border-soft);
    box-shadow: 0 18px 40px rgb(0 0 0 / 50%);
}

.nv-menu__odkaz {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 48px;
    padding-inline: var(--space-2);
    font-size: var(--text-md);
    color: var(--color-text-soft);
    border-radius: var(--radius-sm);
}

.nv-menu__odkaz:hover,
.nv-menu__odkaz[aria-current='page'] {
    color: var(--color-gold-bright);
    background: color-mix(in srgb, var(--color-gold) 8%, transparent);
}

/* Hledání: panel pod hlavičkou s formulářem stránky hledání (C1). */
.nv-hledani {
    position: static;
}

.nv-hledani__panel {
    position: absolute;
    z-index: 30;
    inset-block-start: 100%;
    inset-inline: -0.75rem;
    padding: var(--space-4);
    background: var(--nv-lista);
    border-block-end: 1px solid var(--color-border-soft);
    box-shadow: 0 18px 40px rgb(0 0 0 / 50%);
}

.nv-hledani__ukazka {
    margin: 0;
    color: var(--color-muted);
}

@media (width >= 48rem) {
    .nv-hlavicka__ucet {
        display: flex;
        align-items: center;
    }
}

@media (width >= 64rem) {
    .nv-hlavicka__vnitrek {
        gap: var(--space-4);
        width: min(100% - 3rem, var(--header-width));
        height: 72px;
    }

    .nv-hlavicka__logo {
        width: 192px;
        height: 48px;
        margin-inline-start: -10px;
    }

    .nv-hlavicka__menu {
        display: flex;
        gap: var(--space-1);
        align-items: center;
        margin-inline: auto;
    }

    .nv-hlavicka__nastroje {
        margin-inline-start: 0;
    }

    .nv-menu {
        display: none;
    }

    .nv-hledani__panel {
        inset-inline: auto 0;
        width: min(28rem, 100vw - 2rem);
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius);
    }
}

@media (width >= 80rem) {
    .nv-hlavicka__popis {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

/* --- Spodní menu (telefon) --------------------------------------------------------- *
 * Dnes / Zdarma / Ateliér / Moje. Nad lištou cookies, dokud je otevřená;
 * pryč při psaní do pole a na stránkách s vlastní lištou dole.              */

.nv-spodni-menu {
    position: fixed;
    z-index: 55;
    inset-inline: 0;
    inset-block-end: 0;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--nv-lista) 97%, transparent);
    border-block-start: 1px solid var(--color-border-soft);
    box-shadow: 0 -12px 30px rgb(0 0 0 / 40%);
    transition: transform var(--transition-fast), visibility var(--transition-fast);
}

.nv-spodni-menu__seznam {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nv-spodni-menu__odkaz {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-height: var(--nv-menu-vyska);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nv-spodni-menu__odkaz:hover,
.nv-spodni-menu__odkaz[aria-current='page'] {
    color: var(--color-gold-bright);
}

html.has-cookie-notice .nv-spodni-menu {
    inset-block-end: var(--cookie-notice-reserve, 4.5rem);
}

/* Klávesnice a pole: hned přes :has(), jinde ovladačem nove-layout-menu. */
.nv-spodni-menu.is-skryte,
.nv-stranka:has(:is(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button'], [type='hidden'], [type='range']), select, textarea, [contenteditable='true']):focus) .nv-spodni-menu {
    visibility: hidden;
    transform: translateY(110%);
}

/* Stránka s vlastní lištou dole (dok vějíře karet, lepivé odeslání). */
.nv-stranka:has(.card-fan__dock:not([hidden]), .form-sticky-submit) .nv-spodni-menu {
    display: none;
}

@media (width < 48rem) {
    .nv-stranka--v2:has(.nv-spodni-menu) {
        padding-block-end: calc(var(--nv-menu-vyska) + env(safe-area-inset-bottom, 0px));
    }

    html.has-cookie-notice .nv-stranka--v2:has(.nv-spodni-menu) {
        padding-block-end: calc(var(--cookie-notice-reserve, 4.5rem) + var(--nv-menu-vyska) + env(safe-area-inset-bottom, 0px));
    }
}

@media (width >= 48rem) {
    .nv-spodni-menu {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nv-karta,
    .nv-karta:hover,
    .nv-spodni-menu {
        transform: none;
        transition: none;
    }
}

/* =============================================================================
   Stránky týmu C1 (plán 2026-10, T07–T10): /dnes, /zdarma, /rok-2027,
   /atelier, /obchod, hledání po webu a informační stránky „O službě"
   a „Obchod a doručení". Stejná pravidla jako výše: jen tokeny `app.css`
   a `--nv-*`, dotykové cíle alespoň 44 px, žádný vodorovný posuv, stav jako
   tichá věta.
   ============================================================================= */

/* --- Společné ---------------------------------------------------------------- */

.nv-odkaz-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-accent-text);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nv-odkaz-tlacitko:hover,
.nv-odkaz-tlacitko:focus-visible {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-light);
}

.nv-panel {
    padding: var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.nv-panel > :last-child {
    margin-block-end: 0;
}

.nv-panel__nadpis {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 480;
    line-height: 1.25;
}

.nv-panel :is(p, li) > a:not(.nv-odkaz-tlacitko) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Souvislý text stránky (rozcestníky a informační stránky). */
.nv-text {
    max-width: 44rem;
    color: var(--color-text-soft);
}

.nv-text :is(h2, h3) {
    margin: var(--space-6) 0 var(--space-3);
    font-family: var(--font-serif);
    font-weight: 450;
    line-height: 1.25;
    color: var(--color-text);
}

.nv-text h2 {
    font-size: var(--text-2xl);
}

.nv-text h3 {
    font-size: var(--text-xl);
}

.nv-text :is(p, ul, ol) {
    margin: 0 0 var(--space-4);
    line-height: 1.65;
}

.nv-text :is(ul, ol) {
    padding-inline-start: 1.25rem;
}

.nv-text li + li {
    margin-block-start: var(--space-2);
}

/* Filtry: obyčejné odkazy v řádku, aktuální podtržený zlatou čarou. */
.nv-filtry {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.nv-filtry a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-soft);
    text-decoration: none;
    border-block-end: 2px solid transparent;
}

.nv-filtry a:hover,
.nv-filtry a[aria-current='page'] {
    color: var(--color-gold-bright);
    border-block-end-color: var(--color-gold-light);
}

/* Formulář hledání na stránce (ne v hlavičce). */
.nv-hledat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
    max-width: 36rem;
    margin: 0 0 var(--space-5);
}

.nv-hledat .field {
    flex: 1 1 14rem;
    margin: 0;
}

.nv-hledat .btn {
    min-height: 44px;
}

/* Formulář v panelu hlavičky v2. */
.nv-hledani__formular {
    display: grid;
    gap: var(--space-2);
}

.nv-hledani__radek {
    display: flex;
    gap: var(--space-2);
}

.nv-hledani__radek .input {
    flex: 1 1 auto;
    min-width: 0;
}

.nv-hledani__radek .btn {
    min-height: 44px;
}

/* Výsledky hledání. */
.nv-vysledky {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.nv-vysledek {
    padding: var(--space-3) var(--space-4);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.nv-vysledek__odkaz {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
}

.nv-vysledek__druh {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.nv-vysledek__text {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}

/* --- /dnes ------------------------------------------------------------------- *
 * „Ať z toho dýchá život" (owner, 3 October 2026, docs/2026-10-03-dnes-zive/):
 * the sky behind the first screen, the rune, the Lenormand card and the Moon
 * of the day drawn in small tiles, the sections that come up as they are
 * reached. The card of the day itself is the `.rt-` block at the end of this
 * file (Čaroděj každý den). Nothing of the motion for less motion.          */

.nv-dnes-den {
    position: relative;
}

.nv-dnes-prvni {
    position: relative;
    isolation: isolate;
}

/* Nebe za úvodem: záře z titulky, dvě tlumené záře a devět hvězd, které
   pomalu dýchají. */
.nv-dnes-nebe {
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: min(100%, 46rem);
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 30%, rgb(25 29 48 / 72%), transparent 40%),
        radial-gradient(circle at 31% 42%, rgb(38 25 71 / 34%), transparent 30%),
        radial-gradient(ellipse 55% 45% at 22% 38%, color-mix(in srgb, var(--color-gold) 8%, transparent), transparent 72%),
        radial-gradient(ellipse 40% 38% at 86% 18%, rgb(121 52 123 / 14%), transparent 72%);
}

.nv-dnes-nebe__hvezda {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--color-gold-bright);
    border-radius: 50%;
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--color-gold-bright) 55%, transparent);
    opacity: 0.35;
    animation: nv-dnes-dech var(--doba, 15s) ease-in-out var(--zpozdeni, 0s) infinite;
}

.nv-dnes-nebe__hvezda--1 { top: 9%; left: 6%; --doba: 13s; }
.nv-dnes-nebe__hvezda--2 { top: 4%; left: 38%; --doba: 17s; --zpozdeni: -4s; }
.nv-dnes-nebe__hvezda--3 { top: 16%; left: 71%; --doba: 15s; --zpozdeni: -9s; width: 2px; height: 2px; }
.nv-dnes-nebe__hvezda--4 { top: 7%; left: 91%; --doba: 19s; --zpozdeni: -2s; }
.nv-dnes-nebe__hvezda--5 { top: 31%; left: 96%; --doba: 14s; --zpozdeni: -7s; width: 2px; height: 2px; }
.nv-dnes-nebe__hvezda--6 { top: 46%; left: 2%; --doba: 18s; --zpozdeni: -11s; width: 2px; height: 2px; }
.nv-dnes-nebe__hvezda--7 { top: 3%; left: 57%; --doba: 16s; --zpozdeni: -6s; width: 2px; height: 2px; }
.nv-dnes-nebe__hvezda--8 { top: 22%; left: 50%; --doba: 20s; --zpozdeni: -13s; width: 2px; height: 2px; }
.nv-dnes-nebe__hvezda--9 { top: 62%; left: 98%; --doba: 12s; --zpozdeni: -3s; }

@keyframes nv-dnes-dech {
    0%,
    100% {
        opacity: 0.12;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.2);
    }
}

/* Pozadí titulní stránky i na /dnes (majitel 4. 10. 2026): tytéž kresby jako
   úvod titulky – svíce a karty vlevo, sféra a kniha vpravo, nebeský kompas
   nahoře – za první obrazovkou. Jen ozdoba: prázdné prvky s aria-hidden.
   Dole se kresby rozplývají do stránky, nekončí hranou. */
.nv-dnes-nebe__kresba {
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    width: 625px;
    height: 625px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.nv-dnes-nebe__kresba--vlevo {
    inset-inline-start: 0;
    background-image: url("../../images/hero-left-1M4Kw6x.webp");
    mask-image:
        linear-gradient(to right, #000 0%, #000 73%, transparent 100%),
        linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-image:
        linear-gradient(to right, #000 0%, #000 73%, transparent 100%),
        linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

.nv-dnes-nebe__kresba--vpravo {
    inset-inline-end: 0;
    background-image: url("../../images/hero-right-5BKftzH.webp");
    mask-image:
        linear-gradient(to left, #000 0%, #000 73%, transparent 100%),
        linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-image:
        linear-gradient(to left, #000 0%, #000 73%, transparent 100%),
        linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

/* Kompas stojí nad volným místem mezi úvodní větou a obrazem vpravo, aby
   jeho linky nešly přes písmo. */
.nv-dnes-nebe__kompas {
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-start: 62%;
    width: 880px;
    aspect-ratio: 1760 / 370;
    background-image: url("../../images/hero-celestial-eQugfyR.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
    mask-image:
        linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
        linear-gradient(to top, transparent, #000 30%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
        linear-gradient(to top, transparent, #000 30%);
    -webkit-mask-composite: source-in;
}

/* Užší okno: kresby se odsunou k okrajům a ztlumí, jako na titulce. */
@media (width < 73.75rem) {
    .nv-dnes-nebe__kresba {
        width: 520px;
        height: 520px;
        opacity: 0.5;
    }

    .nv-dnes-nebe__kresba--vlevo { inset-inline-start: -130px; }
    .nv-dnes-nebe__kresba--vpravo { inset-inline-end: -130px; }
}

/* Telefon: písmo začíná hned nahoře, takže kresby i kompas jen tlumeně za ním. */
@media (width < 48rem) {
    .nv-dnes-nebe__kresba {
        width: 470px;
        height: 470px;
        opacity: 0.31;
    }

    .nv-dnes-nebe__kresba--vlevo { inset-inline-start: -248px; }
    .nv-dnes-nebe__kresba--vpravo { inset-inline-end: -248px; }

    .nv-dnes-nebe__kompas {
        inset-inline-start: 50%;
        width: 540px;
        opacity: 0.2;
    }
}

/* Runa, Lenormand a Měsíc dne: malé skutečné kresby u odkazů. */
.nv-dnes-symboly {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.nv-dnes-symbol__odkaz {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.nv-dnes-symbol__odkaz:hover,
.nv-dnes-symbol__odkaz:focus-visible {
    border-color: var(--color-gold-light);
    transform: translateY(-2px);
}

.nv-dnes-symbol__obraz {
    display: grid;
    flex: 0 0 3.25rem;
    place-items: center;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    color: var(--color-gold-light);
    background:
        radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--color-gold) 16%, transparent), transparent 70%),
        var(--color-band);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.nv-dnes-symbol__obraz svg {
    width: 92%;
    height: auto;
}

/* Rytiny jsou kreslené vlasovými linkami pro velký obraz; u symbolů je
   zesílíme, aby se z nich nestaly ikony. */
.nv-dnes-symbol__obraz svg [stroke]:not([stroke='none']) {
    stroke-width: 1.6px;
    vector-effect: non-scaling-stroke;
}

.nv-dnes-symbol__obraz--runa {
    aspect-ratio: 4 / 5;
    font-family: 'Noto Sans Runic', var(--font-serif);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--color-gold-bright);
    background:
        radial-gradient(ellipse at 50% 35%, rgb(160 160 175 / 22%), transparent 75%),
        linear-gradient(170deg, #2b2d3c, #151724);
    border-radius: 45% 45% 10px 10px;
    text-shadow: 0 0 10px color-mix(in srgb, var(--color-gold) 55%, transparent);
}

.nv-dnes-symbol__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.nv-dnes-symbol__druh {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.nv-dnes-symbol__jmeno {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-gold-bright);
}

@media (width >= 48rem) {
    .nv-dnes-symboly {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Na telefonu jsou dlaždice nižší, ať karta dne nezabere dvě obrazovky. */
@media (width < 36rem) {
    .nv-dnes-symbol__obraz {
        flex-basis: 2.5rem;
    }

    .nv-dnes-symbol__obraz--runa {
        font-size: 1.5rem;
    }
}

/* Hlavička sekce: zlatá linka, nadpis s hvězdičkou a jedna tichá věta. */
.nv-dnes-sekce__hlava {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    align-items: baseline;
    justify-content: space-between;
    margin-block-end: var(--space-4);
    padding-block-start: var(--space-4);
    background: var(--rule-gold) top / 100% 1px no-repeat;
}

.nv-dnes-sekce__hlava .nv-nadpis-sekce {
    margin: 0;
}

.nv-dnes-sekce__hlava .nv-nadpis-sekce::before {
    margin-inline-end: 0.4em;
    font-size: 0.6em;
    color: var(--color-gold);
    vertical-align: 0.2em;
    content: '✶';
    content: '✶' / '';
}

.nv-dnes-sekce__uvod {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

/* Sekce vyjedou, až na ně návštěvník dojede (třídu přidá ovladač nove-dnes;
   bez něj a při „méně pohybu" jsou vidět hned). */
@media (prefers-reduced-motion: no-preference) {
    .nv-dnes-den--ozivena [data-nove-dnes-odhal] {
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }

    .nv-dnes-den--ozivena [data-nove-dnes-odhal]:not(.je-videt) {
        opacity: 0;
        transform: translateY(16px);
    }

    .nv-dnes-den--ozivena [data-nove-dnes-odhal]:not(.je-videt) .nv-anketa__pruh::before {
        width: 0;
    }

    .nv-anketa__pruh::before {
        transition: width 0.6s var(--ease) 0.3s;
    }
}

/* Magazín: jedna velká karta a ostatní menší vedle a pod ní. */
.nv-dnes-magazin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: var(--space-4);
}

.nv-dnes-magazin > :first-child {
    grid-column: 1 / -1;
}

@media (width >= 64rem) {
    .nv-dnes-magazin {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nv-dnes-magazin > .nv-karta--velka:first-child .nv-karta__nazev {
        font-size: var(--text-2xl);
    }
}

.nv-dnes-atelier {
    display: grid;
    gap: var(--space-3);
}

.nv-dnes-atelier__zdarma {
    margin: 0;
    color: var(--color-text-soft);
}

.nv-dnes-atelier__zdarma a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
    .nv-dnes-nebe__hvezda {
        animation: none;
    }

    .nv-dnes-symbol__odkaz {
        transition: none;
    }
}

/* Hotové obrazy Ateliéru: velký a vedle dva menší. */
.nv-galerie {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.nv-galerie__obraz {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: var(--color-band);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.nv-galerie__obraz img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.nv-galerie__obraz--velky,
.nv-galerie--jeden .nv-galerie__obraz {
    grid-column: 1 / -1;
}

@media (width >= 48rem) {
    .nv-galerie:not(.nv-galerie--jeden) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .nv-galerie:not(.nv-galerie--jeden) .nv-galerie__obraz--velky {
        grid-row: span 2;
        grid-column: 1;
    }

    .nv-galerie:not(.nv-galerie--jeden) .nv-galerie__obraz--velky img {
        height: 100%;
    }
}

.nv-galerie__popis {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}

.nv-galerie__stitek {
    font-size: var(--text-xs);
    color: var(--color-muted);
}

/* Krátká videa: plakát a ovládání prohlížeče, nic se nenačítá napřed. */
.nv-videa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.nv-video__ramec {
    margin: 0;
}

.nv-video__prehravac {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: var(--color-background-deep);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.nv-video__popis {
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
}

.nv-video__delka {
    color: var(--color-muted);
    white-space: nowrap;
}

.nv-video__odkaz {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-sm);
}

/* Anketa se skutečnými počty. */
.nv-anketa {
    max-width: 36rem;
}

.nv-anketa__otazka {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
}

.nv-anketa__vysledky {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.nv-anketa__moznost {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

.nv-anketa__pocet {
    color: var(--color-muted);
    white-space: nowrap;
}

.nv-anketa__pruh {
    position: relative;
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-gold) 15%, transparent);
    border-radius: var(--radius-pill);
}

.nv-anketa__pruh::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--podil, 0%);
    content: '';
    background: var(--color-gold-light);
}

/* Pokračování a odběr. */
.nv-pokracovani {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.nv-pokracovani__polozka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.nv-pokracovani__nazev {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.nv-pokracovani__polozka .nv-odkaz-tlacitko {
    grid-row: 1 / span 2;
    grid-column: 2;
}

.nv-dnes-odber p {
    margin: 0 0 var(--space-3);
}

.nv-dnes-odber a:not(.nv-odkaz-tlacitko) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Praktické informace na konci stránek. */
.nv-paticka {
    margin-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border-soft);
}

.nv-sekce.nv-paticka {
    padding-block-start: var(--space-5);
}

.nv-paticka__nadpis {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.nv-paticka__seznam {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nv-paticka__seznam a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-sm);
}

/* Výukové cesty a seznamy odkazů na existující průvodce. */
.nv-lekce {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding-inline-start: 0;
    list-style: none;
}

.nv-odkazy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0 var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.nv-lekce, .nv-odkazy) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --- /rok-2027 --------------------------------------------------------------- */

.nv-znameni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 0 var(--space-4);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.nv-znameni a,
.nv-rok-cina a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nv-rok-cina {
    max-width: 44rem;
    margin-block: var(--space-4);
}

.nv-rok-cina p {
    margin: 0 0 var(--space-2);
    color: var(--color-text-soft);
}

.nv-rok-mrizka {
    margin-block-start: var(--space-4);
}

.nv-rok-cislo {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

@media (width >= 48rem) {
    .nv-rok-cislo {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.nv-text .nv-rok-priklad {
    padding: var(--space-3) var(--space-4);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    background: var(--plate-fill-soft);
    border-inline-start: 2px solid var(--color-gold);
    border-radius: var(--radius-sm);
}

.nv-zpet {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
}

.nv-zpet a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Souvislý text v plné šířce stránky: sloupec zarovnaný vlevo s ostatním
   obsahem, jen řádky omezené na čitelnou délku. */
.nv-sirka.nv-text {
    max-width: none;
}

.nv-sirka.nv-text > * {
    max-width: 44rem;
}

/* Formulář hledání na stránce výsledků (v hlavičce je v panelu). */
.nv-sekce > .nv-hledani__formular {
    max-width: 36rem;
    margin-block-end: var(--space-6);
}

/* --- Malované ilustrace stránek (3. 10. 2026, „ať to ožije“) ---------------- *
 * Obraz u nadpisu /dnes, /zdarma, /atelier a /rok-2027: od 48rem vedle textu,
 * na telefonu jen jemně za textem, aby první obrazovka patřila obsahu. Okraje
 * se rozplývají do pozadí stránky, žádný rámeček.                           */

.nv-s-obrazem {
    position: relative;
    isolation: isolate;
}

/* Na telefonu se obraz u nadpisu neukazuje: za textem by zhoršil čitelnost
   a pod ním by posunul obsah z první obrazovky (Codex 3. 10. 2026). */
.nv-obraz-uvodu {
    display: none;
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: min(100%, 26rem);
    height: auto;
    pointer-events: none;
    opacity: 0.22;
    mask-image: radial-gradient(ellipse 60% 60% at 60% 45%, #000 40%, transparent 100%);
}

@media (width >= 48rem) {
    .nv-s-obrazem > :not(.nv-obraz-uvodu) {
        max-width: 60%;
    }

    .nv-s-obrazem > .nv-filtry,
    .nv-s-obrazem > nav,
    .nv-s-obrazem > form {
        max-width: none;
    }

    /* Vpravo nahoře vedle nadpisu, 16 : 9; text úvodu končí dřív, nic se nepřekrývá. */
    .nv-obraz-uvodu {
        display: block;
        inset-block-start: var(--space-4);
        width: min(36%, 26rem);
        aspect-ratio: 16 / 9;
        object-fit: cover;
        opacity: 0.95;
        mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
    }

    .nv-s-obrazem .nv-obraz-uvodu[src*="ai-hero-atelier"] {
        object-position: 50% 80%;
    }
}

/* Čínský rok 2027 s obrázkem. */
.nv-rok-cina__obraz {
    display: block;
    width: 100%;
    height: auto;
    margin-block-end: var(--space-3);
    border-radius: var(--radius-sm);
}

@media (width >= 48rem) {
    .nv-rok-cina--obraz {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        column-gap: var(--space-5);
        max-width: 52rem;
    }

    .nv-rok-cina--obraz .nv-rok-cina__obraz {
        grid-row: 1 / span 5;
        margin: 0;
    }
}

/* Blok 9 /dnes s ilustrací (Moje místo nebo odběr). */
.nv-dnes-odber--obraz {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.nv-dnes-odber__obraz {
    display: block;
    width: min(100%, 20rem);
    height: auto;
    border-radius: var(--radius);
    mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 70%, transparent 100%);
}

@media (width >= 48rem) {
    .nv-dnes-odber--obraz {
        grid-template-columns: 14rem minmax(0, 1fr);
    }
}

/* =============================================================================
   The card of the day on /dnes (Čaroděj každý den, A6; spec § 2–4, § 10, § 19)

   The visitor's own card: face down with one button, then its meaning at once.
   On a phone the card stands centred above its text; from 48rem the card is
   on the left and the text on the right. The card is 168 px wide on a phone,
   220 px from 48rem and 232 px from 75rem, a portrait of 2 : 3 – one frame
   for the back and the painted face, so the card keeps its size when it
   turns. Text at least 16 px, touch targets at least 44 px. The
   turn itself is assets/controllers/ritual_card_controller.js; nothing here
   moves for a visitor who prefers less motion.
   ============================================================================= */

.rt-ramec {
    display: block;
}

/* Every way in leads to /dnes#karta – the entries on the existing pages, the
   sign-in, the forms of the card. The page opens on the card at once: the
   site's smooth scrolling (app.css) would first paint the new page where
   the old one was scrolled to – often at its footer – and then glide up for
   half a second (Turbo scrolls to the anchor after it renders). Only here,
   so every other page keeps its glide. A little room above the card, the
   same after a Turbo visit and after a full load (where `:target` would
   give it the room of a heading). */
html:has(> body.nv-dnes) {
    scroll-behavior: auto;
}

.rt-stul {
    scroll-margin-block-start: var(--space-4);
}

/* The width of the daily card (Codex for the owner, 10 October 2026): a
   portrait of 2 : 3 at 168 × 252 px on a phone, 220 × 330 px from 48rem
   and 232 × 348 px from 75rem, where it is the first of three columns. */
.rt {
    --rt-karta: 10.5rem;

    padding-block: var(--space-4) var(--space-5);
}

@media (width >= 48rem) {
    .rt {
        --rt-karta: 13.75rem;

        padding-block: var(--space-6);
    }
}

@media (width >= 75rem) {
    .rt {
        --rt-karta: 14.5rem;
    }
}

/* Words standing right on the painted sky keep a dark halo, so that a
   candle or a star of the drawing never shines through a letter. */
:is(.rt-nadtitulek, .rt-nadpis, .rt-datum, .rt-sbirka, .rt-jmeno, .rt-slova, .rt-vety, .rt-tema, .rt-zitra__text, .rt-stav, .rt-stav__veta, .rt-havran__veta, .rt-havran__jmeno, .rt-svice, .rt-cil, .rt-zlata) {
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

/* The heading of the page: the overline, the H1 and the date. */
.rt-hlava {
    margin-block-end: var(--space-5);
}

/* The overline looks like every overline on the site, arrows included
   (owner, 10 October 2026; components.css, Labels). */
.rt-nadtitulek {
    margin: 0 0 var(--space-1);
}

.rt-nadpis {
    margin-block-end: var(--space-1);
}

.rt-datum {
    margin: 0;
    color: var(--color-text-soft);
}

/* The sentence a form of the card leaves, above the card. */
.rt-hlaseni {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
}

.rt-hlaseni .flash {
    margin: 0;
}

/* The card's grid (the owner's wireframe of 9 October 2026). On a phone one
   column: the head, the card, its text; face down then the tiles and the
   panel of the personal reading, turned the panel, the journey and the tiles.
   From 48rem the card stands on the left of its head and text, the rest
   across the width under them, the tiles in a row. From 75rem (1200 px) the
   Moon, the rune and the Lenormand card take the right column over the
   drawings of the sky – before the turn and after; below 75rem the middle
   is too narrow for them (an iPad on its side, a small laptop). There the
   columns are the card, the text and 19rem (304 px) of tiles with 24 px
   between them, the card and the tiles at the top (Codex's proposal HP2,
   point 10): the meaning and the day's step get some 120 px more than they
   had with 22.5rem and 48 px, and wrap less. */
.rt-plocha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    justify-items: center;
    margin: 0;
}

.rt-plocha--rub {
    grid-template-areas: 'hlava' 'karta' 'text' 'symboly' 'nabidka';
}

.rt-plocha--lic {
    grid-template-areas: 'hlava' 'karta' 'text' 'nabidka' 'cesta' 'symboly';
}

.rt-plocha > .rt-hlava { grid-area: hlava; }
.rt-plocha > .rt-otocit,
.rt-plocha > .rt-karta { grid-area: karta; }
.rt-plocha > .rt-plocha__text { grid-area: text; }
.rt-plocha > .rt-pravy { grid-area: symboly; }
.rt-plocha > .rt-nabidka { grid-area: nabidka; }
.rt-plocha > .rt-cesta-blok { grid-area: cesta; }

.rt-plocha > :is(.rt-hlava, .rt-pravy, .rt-nabidka, .rt-cesta-blok) {
    justify-self: stretch;
    min-width: 0;
}

.rt-plocha__text {
    width: 100%;
    min-width: 0;
}

@media (width >= 48rem) {
    .rt-plocha {
        grid-template-columns: var(--rt-karta) minmax(0, 1fr);
        gap: var(--space-5) var(--space-7);
        align-items: start;
        justify-items: start;
    }

    .rt-plocha--rub {
        grid-template-areas:
            'karta hlava'
            'karta text'
            'symboly symboly'
            'nabidka nabidka';
        grid-template-rows: auto 1fr;
    }

    .rt-plocha--lic {
        grid-template-areas:
            'karta hlava'
            'karta text'
            'nabidka nabidka'
            'cesta cesta'
            'symboly symboly';
        grid-template-rows: auto 1fr;
    }

    .rt-plocha--rub > .rt-otocit {
        align-self: center;
    }
}

@media (width >= 75rem) {
    .rt-plocha {
        grid-template-columns: var(--rt-karta) minmax(0, 1fr) 19rem;
        column-gap: var(--space-5);
    }

    .rt-plocha--rub > .rt-otocit {
        align-self: start;
    }

    .rt-plocha--rub {
        grid-template-areas:
            'karta hlava symboly'
            'karta text symboly'
            'nabidka nabidka nabidka';
    }

    .rt-plocha--lic {
        grid-template-areas:
            'karta hlava symboly'
            'karta text symboly'
            'nabidka nabidka nabidka'
            'cesta cesta cesta';
    }

    .rt-plocha > .rt-pravy {
        align-self: start;
    }

    .rt-pravy > .rt-symboly {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The form of the card face down holds the card only; its button stands in
   the text column and belongs to it by `form` (the raven's settings beside
   it are forms of their own). */
.rt-otocit {
    margin: 0;
}

/* One card, two sides, one frame: a portrait of 2 : 3. The back
   (`ritual_art('rub-…')`, 200 × 300 with its plate) and the painted face
   (`.rt-karta--malba`) both fill it, so the card keeps its size when it
   turns (owner and Codex, 10 October 2026). Their corners are the painted
   faces', 6 of 200. A face without a painting – Divination's engraving,
   200 × 340 – stands a little narrower in the frame, on the frame's ink. */
.rt-karta {
    position: relative;
    display: block;
    width: var(--rt-karta);
    aspect-ratio: 2 / 3;
    margin: 0;
    padding: 0;
    background: #0f1424;
    border: 0;
    border-radius: 3% / 2%;
    box-shadow:
        0 16px 36px rgb(0 0 0 / 50%),
        0 0 28px color-mix(in srgb, var(--color-gold) 14%, transparent);
}

/* A back's `<title>` names the drawing for a page that shows it alone; on
   the card – hidden from a screen reader, or a button with a name of its
   own – it would only be a tooltip over the card, so the pointer goes
   through the drawing to the card. */
.rt-karta > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    pointer-events: none;
}

/* The painted face (owner, 8 October 2026: „Malované karty místo linkové
   kresby“; `obrazy.lic`): the card's frame of 2 : 3, the back's size.
   The painting fills it, and its painted frame leaves an
   empty band at its foot (about 87–98 % of the height) for the card's name:
   in the serif and the gold of the drawn card's caption (Divination's
   WizardTarotFace: Georgia, #c9a25e, 15 of 200 – so 7.5 % of the card's
   width, `cqi`, and never under 11 px, which the small cards of the mirror
   would otherwise go below), on the painting's own indigo. The ground is
   that indigo too: should a painting be slow after all, the card is its
   ground and its name, never an empty frame. */
.rt-karta--malba {
    container-type: inline-size;
}

.rt-malba {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: inherit;
}

.rt-malba__jmeno {
    position: absolute;
    inset: auto 6% 2.4%;
    display: grid;
    place-items: center;
    height: 9.8%;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.875rem;
    font-size: max(0.6875rem, 7.5cqi);
    line-height: 1;
    color: #c9a25e;
    text-align: center;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* The small cards of the mirror: at their 11 px the longest names
   („Sedmička pentaklů“) need the band's whole width in a wider serif
   (Noto Serif, DejaVu Serif), so no tracking and a narrower margin. */
.rt-karta--zrcadlo .rt-malba__jmeno {
    inset-inline: 4%;
    letter-spacing: 0;
}

button.rt-karta {
    font: inherit;
    cursor: pointer;
    appearance: none;
}

/* The lift on hover is `translate`, not `transform`: the turn animates
   `transform`, so the lifted card turns without a jump, and a hover that ends
   mid-turn moves it back without stopping the turn. */
@media (prefers-reduced-motion: no-preference) {
    button.rt-karta {
        transition: translate var(--transition), box-shadow var(--transition);
    }

    button.rt-karta:hover {
        translate: 0 -4px;
        box-shadow:
            0 20px 40px rgb(0 0 0 / 55%),
            0 0 36px color-mix(in srgb, var(--color-gold) 26%, transparent);
    }
}

/* While the card's form is on its way (Turbo marks it `aria-busy`), a second
   tap on the card or the button cannot send it again and cut the first; the
   button outside the form is found by its `form`. (The keyboard is kept out
   by ritual-card, which disables both until the face is in.) */
.rt-otocit[aria-busy='true'] button,
.rt-plocha--rub:has(.rt-otocit[aria-busy='true']) button[form='rt-otocit'] {
    pointer-events: none;
}

/* Face down: the one button under the card, the collection and the card of
   the day for everybody. */
.rt-otocit__text {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    text-align: center;
}

@media (width >= 48rem) {
    .rt-otocit__text {
        justify-items: start;
        text-align: start;
    }
}

.rt-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: var(--space-3) var(--space-6);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-gold-bright);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, var(--nv-fialova-svetla), var(--nv-fialova-tmava));
    border: 1px solid var(--color-gold-light);
    border-radius: var(--radius-control);
    box-shadow: inset 0 0 18px var(--nv-fialova-zare);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.rt-tlacitko:hover {
    background: linear-gradient(180deg, var(--nv-fialova-svetla-hover), var(--nv-fialova-tmava-hover));
}

/* A link that looks like a button keeps the look inside a paragraph, where
   app.css underlines every link of running text. */
a.rt-tlacitko {
    color: var(--color-gold-bright);
    text-decoration: none;
}

.rt-tlacitko:disabled {
    cursor: progress;
    opacity: 0.8;
}

.rt-otocit__text > .rt-tlacitko {
    width: min(100%, 22rem);
}

/* A quiet button beside the one main action of the screen: the offer of a
   personal reading, the celebration's button, the settings. */
.rt-tlacitko--tichy {
    min-height: 44px;
    padding-inline: var(--space-5);
    color: var(--color-accent-text);
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
}

.rt-tlacitko--tichy:hover {
    color: var(--color-gold-bright);
    background: transparent;
    border-color: var(--color-gold-light);
}

a.rt-tlacitko--tichy {
    color: var(--color-accent-text);
}

.rt-sbirka {
    margin: 0;
    color: var(--color-text-soft);
    font-variant-numeric: tabular-nums;
}

.rt-vsem {
    margin: 0;
}

.rt-vsem a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-accent-text);
    white-space: nowrap;
    text-underline-offset: 3px;
}

/* Turned: the meaning first, then the topics, the step and the next card. */
/* As wide as the name: the focus it takes after the turn rings the name,
   not the whole column. */
.rt-jmeno {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--space-1);
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 430;
    line-height: 1.1;
    color: var(--color-gold-bright);
}

.rt-jmeno:focus:not(:focus-visible) {
    outline: none;
}

/* The keywords, „naděje · klid · nový pohled“. Each keyword after the first
   carries its dot in the room before it, „· klid“, on one line with it – so
   no line ends with the dot. The list reaches one such room to the left of
   the column, every keyword starts with that room, and the column cuts off
   what lies outside it: the dot of a keyword that starts a line is never
   seen, so no line starts with one either. The keywords are short (19
   letters at most); none is ever cut. */
.rt-slova {
    --rt-oddel: 0.85em;

    margin: 0 0 var(--space-3);
    overflow-x: clip;
    color: var(--color-gold-light);
}

.rt-slova__seznam {
    display: flex;
    flex-wrap: wrap;
    margin-inline-start: calc(-1 * var(--rt-oddel));
}

.rt-slova__slovo {
    position: relative;
    padding-inline-start: var(--rt-oddel);
    white-space: nowrap;
}

.rt-slova__oddel {
    position: absolute;
    inset-inline-start: 0;
    width: var(--rt-oddel);
    text-align: center;
}

.rt-vety {
    max-width: 38rem;
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text);
}

.rt-dnes {
    max-width: 40rem;
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    line-height: 1.6;
    color: var(--color-text-soft);
    background: var(--plate-fill-soft);
    border-inline-start: 2px solid var(--color-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.rt-dnes__uvod {
    font-weight: 600;
    color: var(--color-gold-light);
}

/* The topics: four buttons, the chosen one pressed – a tick and a fill, not
   the colour alone. All four stay on one line at 360 px, the tick included. */
.rt-temata {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}

.rt-cip {
    display: inline-flex;
    gap: 0.35em;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    font: inherit;
    font-weight: 550;
    color: var(--color-text);
    cursor: pointer;
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.rt-cip:hover {
    border-color: var(--color-gold-light);
}

.rt-cip[aria-pressed='true'] {
    color: var(--color-text-inverse);
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
}

.rt-cip[aria-pressed='true']::before {
    font-weight: 700;
    content: '✓';
    content: '✓' / '';
}

.rt-tema {
    max-width: 38rem;
    margin: 0 0 var(--space-5);
    line-height: 1.65;
    color: var(--color-text-soft);
}

.rt-krok {
    max-width: 40rem;
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.rt-krok__nadpis {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.4;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.rt-krok__text {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text);
}

.rt-krok__formular {
    margin: 0;
}

.rt-krok__ulozeny {
    margin: 0;
    color: var(--color-text-soft);
}

.rt-krok__ulozeny::before {
    margin-inline-end: 0.4em;
    color: var(--color-gold-light);
    content: '✓';
    content: '✓' / '';
}

/* The next card: a small back, the hint and when it comes. */
.rt-zitra {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    max-width: 40rem;
    margin: 0 0 var(--space-2);
    padding-block-start: var(--space-4);
    background: var(--rule-gold) top / 100% 1px no-repeat;
}

.rt-karta--mala {
    flex: none;
    width: 3.25rem;
    box-shadow: 0 6px 16px rgb(0 0 0 / 45%);
}

.rt-zitra__text p {
    margin: 0;
}

.rt-zitra__veta {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--color-gold-bright);
}

.rt-zitra__napoveda {
    color: var(--color-text);
}

.rt-zitra__kdy {
    color: var(--color-muted);
}

/* „Jak funguje moje karta“ under the hint (spec § 3, ruling R51): a quiet
   disclosure, closed until asked for, its summary like the settings'. */
.rt-jak {
    max-width: 40rem;
    margin: 0 0 var(--space-2);
}

.rt-jak__text {
    max-width: 34rem;
    margin: 0 0 var(--space-2);
    line-height: 1.55;
    color: var(--color-text-soft);
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

/* A step of an earlier day: a short question above the card, never a gate. */
/* In the middle of the page above the card (the owner, 9 October 2026:
   „když bude co říct, ať tam je, ale uprostřed; když tam nebude co říct, ať
   tam nejsou ani žádná torza“) – without a step to look back at nothing of
   it is printed, and „Přeskočit“ hides it whole. */
.rt-ohlednuti {
    max-width: 46rem;
    margin: 0 auto var(--space-5);
    text-align: center;
    padding: var(--space-3) var(--space-4) var(--space-2);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.rt-ohlednuti[hidden] {
    display: none;
}

/* The heading and „Přeskočit“ share a row; the link drops below the
   heading only when the row is too narrow for both. */
.rt-ohlednuti__hlava {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    align-items: center;
    justify-content: center;
}

.rt-ohlednuti__nadpis {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-gold-light);
}

.rt-ohlednuti__krok {
    margin: 0 0 var(--space-3);
    line-height: 1.5;
    color: var(--color-text);
}

/* Three answers, side by side: one row of three equal columns, each answer on
   one line, at every width from 22.5rem (360 px) – the owner's wish of
   8. 10. 2026 („na mobilu ať jsou ta tři tlačítka vedle sebe, vejde se to,
   přizpůsobit tomu text, písmo“), after the answers had stood one under
   another so as not to be broken in two.

   – The columns share the width of the row and grow no wider than 10rem, so
     on a wide screen the answers stand in the middle, as wide as one another.
   – What has to fit is „Tentokrát ne“, 6.3 em wide. At 360 px a column is
     93 px, 83 px within its border and padding, so the writing is 12 px
     there: it follows the width the row has (`cqi` of the form, 4.1 %) –
     13 px at 390 px, the 16 px of the page from 456 px on – and about 7 px
     at the least are left over. Where container units are not known it is
     12 px, the declaration before the clamp: the clamp's bounds are written
     out (0.75rem and 1rem are --text-xs and --text-md) because a `var()` in
     it would be accepted by every browser and fail only once computed –
     into the inherited 16 px, not into the 12 px before it.
   – Below 22.5rem, narrower than any phone this page is made for, they stand
     one under another as wide as the block, in the writing of the page, as
     before: no row of three can be made to fit there.
   A reader's larger text size breaks a label at its space rather than out of
   its button. */
.rt-ohlednuti__odpovedi {
    display: grid;
    gap: var(--space-2);
    justify-content: center;
    margin: 0 0 var(--space-1);
}

.rt-odpoved {
    min-height: 44px;
    padding: var(--space-1);
    font: inherit;
    line-height: 1.2;
    color: var(--color-text);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

@media (width >= 22.5rem) {
    .rt-ohlednuti__odpovedi {
        grid-template-columns: repeat(3, minmax(0, 10rem));
        container-type: inline-size;
    }

    .rt-odpoved {
        font-size: var(--text-xs);
        font-size: clamp(0.75rem, 4.1cqi, 1rem);
    }
}

.rt-odpoved:hover {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-light);
}

.rt-ohlednuti__preskocit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-muted);
    text-underline-offset: 3px;
}

/* Below the card: the three symbols, the question, one item, the offer. */
/* `.nv-dnes-symboly` sets its margin whole; the row keeps the width of the page. */
.rt-symboly {
    margin: 0 auto var(--space-2);
}

.nv-dnes-symbol__obraz.rt-mesic {
    aspect-ratio: 1;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 50%;
}

.rt-mesic__kotouc {
    overflow: visible;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-gold-bright) 28%, transparent));
}

.rt-mesic__stin {
    fill: color-mix(in srgb, var(--color-gold) 10%, var(--color-band));
    stroke: var(--color-border);
    stroke-width: 0.6;
}

.rt-mesic__svetlo {
    fill: var(--color-gold-bright);
}

.rt-mesic__osvit,
.rt-mesic__znameni {
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}

/* The editorial set's note about the sky, under the Moon's tile – a
   sentence to read, so at the size of the text. */
.rt-mesic__pozn {
    margin: var(--space-2) var(--space-1) 0;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.rt-cteni__karta {
    max-width: 40rem;
}

/* The panel of the personal reading is in the block of the homepage's
   wireframe at the end of this file (.rt-nabidka). Its balance (Čaroděj
   každý den, C3; spec § 17): a quiet sentence in the soft colour of its
   text, never a banner. */
.rt-nabidka__kredit {
    color: var(--color-text-soft);
}

/* =============================================================================
   The progress around the card (Čaroděj každý den, B5; spec § 2, § 5–9, § 19)

   The line under the card face down, the raven by the card with its one
   line, the celebration of the day's rewards with one button, the Candle and
   the next goal, the settings, the backs to choose from, the blocks of the
   seventh, ninth and tenth day, and the journey (/dnes/cesta). Engravings in
   the gold of the page; the gold card's metallic edge. Motion only once, as
   an answer: the seal's stamp and the gold card's sweep of light right after
   the turn (ritual-card adds `rt-efekt`) – nothing loops, and nothing moves
   for a visitor who prefers less.
   ============================================================================= */

/* The line under the card face down: „Svíce: 6 dní · Sbírka: 5/78 · Další
   odměna za 1 návštěvu“, and a sentence about the Candle under it. */
.rt-stav,
.rt-stav__veta {
    margin: 0;
    color: var(--color-text-soft);
}

.rt-stav {
    font-variant-numeric: tabular-nums;
    text-wrap: balance;
}

.rt-stav > span {
    white-space: nowrap;
}

/* On a phone and a tablet the next reward takes a line of its own, so no
   line ends with the dot. */
@media (width < 64rem) {
    .rt-stav__odmena {
        display: block;
    }

    .rt-stav__oddel--odmena {
        display: none;
    }
}

.rt-stav__veta {
    color: var(--color-gold-light);
}

/* The raven by the card: the engraving with its name, and its one line. */
.rt-havran {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    max-width: 40rem;
    justify-items: start;
    text-align: start;
}

.rt-havran:focus {
    outline: none;
}

.rt-havran:focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
}

/* Turned, the block follows the step: a rule above it, like the next card's. */
.rt-havran--po {
    margin: 0 0 var(--space-5);
    padding-block-start: var(--space-4);
    background: var(--rule-gold) top / 100% 1px no-repeat;
}

.rt-havran__radek {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.rt-havran__postava {
    flex: none;
    display: grid;
    justify-items: center;
    width: 5rem;
    margin: 0;
}

@media (width >= 48rem) {
    .rt-havran__postava {
        width: 6rem;
    }
}

.rt-havran__kresba {
    display: block;
    width: 100%;
    color: var(--color-gold-light);
}

.rt-havran__kresba svg {
    display: block;
    width: 100%;
    height: auto;
}

.rt-havran__jmeno {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-gold-light);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Its line: a quiet aside, set off by a hairline towards the raven. */
.rt-havran__veta {
    margin: 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--color-text);
    border-inline-start: 1px solid var(--color-border);
}

/* The Candle and the next goal under the raven, once the card is turned. */
.rt-svice,
.rt-cil {
    margin: 0;
    line-height: 1.55;
}

.rt-svice {
    color: var(--color-text-soft);
}

.rt-cil {
    color: var(--color-gold-light);
}

/* The credit of the ritual that waits for the account (C2): under its reward
   in the celebration, or as a quiet line under the goal – a sentence, what it
   waits for and what can be done about it, never a banner. */
.rt-kredit {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.rt-odmena__text .rt-kredit {
    margin-block-start: var(--space-2);
}

/* A reward with what can be done about it is tall: its mark stays by its
   name, not beside the buttons. */
.rt-odmena:has(.rt-kredit) {
    align-items: start;
}

.rt-odmena:has(.rt-kredit) > .rt-odmena__znak {
    margin-block-start: 0.35rem;
}

.rt-kredit__veta,
.rt-kredit__pozn {
    margin: 0;
    line-height: 1.55;
}

.rt-kredit__veta {
    color: var(--color-gold-light);
}

.rt-kredit__pozn,
.rt-odmena__pozn {
    color: var(--color-text-soft);
}

/* The line stands on the painted sky, like the goal above it. */
.rt-kredit--radek :is(.rt-kredit__veta, .rt-kredit__pozn, .rt-kredit__cesta) {
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

/* „Vaše cesta už má tři stránky. Uložte si ji…“ (D1) leading the credit's
   way to an account: the journey first, then the credit it brings. */
.rt-kredit__cesta {
    margin: 0;
    line-height: 1.55;
    color: var(--color-text);
}

.rt-kredit__akce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    align-items: center;
    margin: 0;
}

/* „Účet už mám – přihlásit se“, the verification e-mail sent again and the
   celebration's „Později“: a button that reads as a link beside the quiet
   one. */
.rt-kredit__odkaz {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font: inherit;
    line-height: 1.4;
    color: var(--color-accent-text);
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: 0;
}

.rt-kredit__odkaz:hover {
    color: var(--color-gold-bright);
}

/* The way to the journey and the settings, in one row as wide as the
   column (the settings open across it). */
.rt-havran__odkazy {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    align-items: start;
    justify-self: stretch;
}

.rt-havran__cesta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-accent-text);
    white-space: nowrap;
    text-underline-offset: 3px;
}

/* Face down on a phone the text column is centred; so is the raven, and
   the way to the journey stands above the settings, which open under
   themselves. */
@media (width < 48rem) {
    .rt-otocit__text .rt-havran {
        justify-items: center;
        margin-inline: auto;
    }

    .rt-otocit__text .rt-havran__odkazy {
        flex-direction: column;
        align-items: center;
    }

    .rt-otocit__text .rt-nastaveni {
        text-align: center;
    }

    /* What the day brought of the visit credit, centred like the line above it. */
    .rt-otocit__text .rt-kredit {
        justify-items: center;
    }

    .rt-otocit__text .rt-nastaveni__obsah {
        margin-inline: auto;
    }
}

/* Beside the card face down the text column is centred against the card:
   the open settings lie over what follows instead of growing the column,
   which would move the card. They hang from the row of links, as wide as
   the text column at most, so they never reach past the page. */
@media (width >= 48rem) {
    .rt-otocit__text .rt-havran__odkazy {
        position: relative;
    }

    .rt-otocit__text .rt-nastaveni__obsah {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 3;
        width: min(100%, 30rem);
        background: var(--plate-fill), var(--color-band);
        box-shadow: 0 18px 40px rgb(0 0 0 / 55%);
    }
}

/* The settings: a small disclosure, closed until asked for – and so is
   „Jak funguje moje karta“ under the hint, which shares its summary. */
.rt-nastaveni {
    max-width: 100%;
}

.rt-nastaveni__odkaz,
.rt-jak__odkaz {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-muted);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.rt-jak__odkaz {
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

.rt-nastaveni__odkaz::-webkit-details-marker,
.rt-jak__odkaz::-webkit-details-marker {
    display: none;
}

.rt-nastaveni__odkaz::after,
.rt-jak__odkaz::after {
    margin-inline-start: 0.4em;
    font-size: 0.8em;
    content: '▾';
    content: '▾' / '';
}

.rt-nastaveni[open] > .rt-nastaveni__odkaz::after,
.rt-jak[open] > .rt-jak__odkaz::after {
    content: '▴';
    content: '▴' / '';
}

.rt-nastaveni__odkaz:hover,
.rt-jak__odkaz:hover {
    color: var(--color-gold-bright);
}

.rt-nastaveni__obsah {
    display: grid;
    gap: var(--space-4);
    width: min(100vw - 2rem, 30rem);
    margin-block-start: var(--space-2);
    padding: var(--space-4);
    text-align: start;
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.rt-nastaveni__formular {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    margin: 0;
}

.rt-zaskrt {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
    color: var(--color-text);
    cursor: pointer;
}

.rt-zaskrt input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--color-gold-light);
}

.rt-nastaveni__pozn,
.rt-pojmenovat__pozn {
    margin: 0;
    color: var(--color-muted);
}

.rt-nastaveni__nadpis {
    margin: 0 0 calc(var(--space-2) * -1);
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* The raven's name: a field and its button in one row, the button below it
   when the row is too narrow. */
.rt-pojmenovat {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    text-align: start;
}

.rt-pojmenovat__popis {
    font-weight: 600;
    color: var(--color-text);
}

.rt-pojmenovat__radek {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rt-pojmenovat__pole {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
}

/* The celebration of the day's rewards: one plate, one button. */
.rt-oslava {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--color-gold) 16%, transparent), transparent 60%),
        var(--plate-fill);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow), 0 0 26px color-mix(in srgb, var(--color-gold) 12%, transparent);
}

.rt-oslava__nadpis,
.rt-navic__nadpis {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.4;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.rt-oslava__odmeny {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rt-odmena {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
}

.rt-odmena__obraz {
    display: block;
    width: 4rem;
    color: var(--color-gold-bright);
}

.rt-odmena__obraz svg {
    display: block;
    width: 100%;
    height: auto;
}

/* A reward without an engraving of its own: a small gold lozenge. */
.rt-odmena__znak {
    justify-self: center;
    width: 0.75rem;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold));
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-gold-bright) 45%, transparent);
    transform: rotate(45deg);
}

.rt-odmena__text p {
    margin: 0;
}

.rt-odmena__nazev {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--color-gold-bright);
}

.rt-odmena__popis {
    line-height: 1.5;
    color: var(--color-text-soft);
}

.rt-oslava__akce {
    margin: 0;
}

/* The choice of the second and the fifth day and its quiet „Později“ beside
   it; the open choice takes the whole row and „Později“ waits under it. */
.rt-oslava__volba {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    align-items: center;
}

.rt-oslava__volba > .rt-otevrit[open] {
    flex-basis: 100%;
}

.rt-oslava__pozdeji {
    margin: 0;
}

/* What an account would bring, said in the celebration of the third and the
   seventh day of a journey nobody is signed in on (ruling R56): one quiet
   sentence and the way to an account under the rewards – a thin gold rule
   above it, never a banner. */
.rt-oslava__pozvanka {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding-block-start: var(--space-3);
    background: var(--rule-gold) top / 100% 1px no-repeat;
}

.rt-oslava__pozvanka-veta {
    margin: 0;
    line-height: 1.55;
    color: var(--color-text-soft);
}

/* A button that opens what it leads to: the backs to choose from, the name. */
.rt-otevrit > summary {
    list-style: none;
}

.rt-otevrit > summary::-webkit-details-marker {
    display: none;
}

.rt-otevrit > summary::after {
    margin-inline-start: 0.5em;
    font-size: 0.8em;
    content: '▾';
    content: '▾' / '';
}

.rt-otevrit[open] > summary::after {
    content: '▴';
    content: '▴' / '';
}

.rt-otevrit[open] > summary {
    margin-block-end: var(--space-3);
}

/* The backs: two in a row on a phone, all four from 36rem; the chosen one
   ringed and ticked, not told by colour alone. */
.rt-ruby {
    margin: 0;
}

.rt-ruby__volby {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 8.5rem));
    gap: var(--space-3);
}

@media (width >= 36rem) {
    .rt-ruby__volby {
        grid-template-columns: repeat(4, minmax(0, 8rem));
    }
}

/* The labyrinth reads from some 140 px on. */
@media (width >= 48rem) {
    .rt-ruby__volby {
        grid-template-columns: repeat(4, minmax(0, 8.75rem));
    }
}

.rt-ruby__volba {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    min-width: 0;
    padding: var(--space-2);
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.rt-ruby__volba:hover {
    border-color: var(--color-border);
}

.rt-ruby__volba[aria-pressed='true'] {
    background: color-mix(in srgb, var(--color-gold) 10%, transparent);
    border-color: var(--color-gold-light);
}

.rt-ruby__karta {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 3% / 2%;
    box-shadow: 0 8px 20px rgb(0 0 0 / 45%);
}

.rt-ruby__karta > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    pointer-events: none;
}

.rt-ruby__nazev {
    font-weight: 600;
    line-height: 1.3;
}

.rt-ruby__volba[aria-pressed='true'] .rt-ruby__nazev::before {
    margin-inline-end: 0.3em;
    color: var(--color-gold-light);
    content: '✓';
    content: '✓' / '';
}

/* The gold form of the card (spec § 8 and § 19): a metallic edge, and once,
   right after the turn, a sweep of light over the drawing. */
.rt-karta--gold {
    box-shadow:
        0 16px 36px rgb(0 0 0 / 50%),
        0 0 34px color-mix(in srgb, var(--color-gold-bright) 38%, transparent);
}

.rt-karta--gold::before {
    position: absolute;
    inset: -3px;
    z-index: 1;
    padding: 3px;
    pointer-events: none;
    content: '';
    background: linear-gradient(135deg, #7d5221, #f8e2a2 22%, #b47c36 42%, #fff1c6 58%, #9b6a2b 78%, #f1c984);
    border-radius: inherit;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.rt-karta--gold::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    content: '';
    background: linear-gradient(105deg, transparent 38%, rgb(255 243 210 / 55%) 50%, transparent 62%) no-repeat;
    background-position: 250% 0;
    background-size: 250% 100%;
    border-radius: inherit;
    mix-blend-mode: screen;
    opacity: 0;
}

.rt-zlata {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
    .rt-karta--gold.rt-efekt::after {
        animation: rt-prejezd 0.9s ease-in-out 0.25s 1 both;
    }

    .rt-odmena__obraz.rt-efekt {
        animation: rt-otisk 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.15s 1 both;
    }
}

/* The band of light enters at the left edge and leaves at the right one:
   the whole of the time is the sweep. */
@keyframes rt-prejezd {
    from {
        background-position: 110% 0;
        opacity: 1;
    }

    to {
        background-position: -10% 0;
        opacity: 1;
    }
}

/* The seal comes down onto the page and settles. */
@keyframes rt-otisk {
    0% {
        opacity: 0;
        transform: scale(1.7) rotate(-14deg);
    }

    55% {
        opacity: 1;
        transform: scale(0.92) rotate(3deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* What a milestone day adds under the raven, and the tenth day's topics. */
.rt-navic {
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
    margin: 0 0 var(--space-5);
}

.rt-navic.rt-vsechna {
    margin-block-start: var(--space-2);
}

/* The seventh, the ninth and the tenth day each bring a block of their
   own: a soft plate with a heading in the serif of the card's name. */
:is(.rt-sedm, .rt-zrcadlo, .rt-vsechna) {
    padding: var(--space-4);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

:is(.rt-zrcadlo, .rt-vsechna) > .rt-navic__nadpis,
.rt-sedm__hlava .rt-navic__nadpis {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 430;
    line-height: 1.2;
    color: var(--color-gold-bright);
    text-transform: none;
    letter-spacing: 0;
}

.rt-sedm__hlava {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.rt-sedm__pecet {
    flex: none;
    width: 3.5rem;
    color: var(--color-gold-bright);
}

@media (width >= 48rem) {
    .rt-sedm__pecet {
        width: 4.5rem;
    }
}

.rt-sedm__pecet svg {
    display: block;
    width: 100%;
    height: auto;
}

.rt-sedm__tabulka {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.rt-sedm__tabulka th {
    padding: 0 var(--space-2) var(--space-2) 0;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-gold-light);
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rt-sedm__tabulka td {
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
    line-height: 1.35;
    color: var(--color-text);
    vertical-align: top;
    border-top: 1px solid var(--color-border-soft);
}

.rt-sedm__tabulka :is(th, td):first-child {
    white-space: nowrap;
}

.rt-sedm__tabulka :is(th, td):last-child {
    padding-inline-end: 0;
}

.rt-znak {
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--color-gold-bright);
}

/* The ninth day: today's card beside an earlier one, and a question. */
.rt-zrcadlo__karty {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}

@media (width >= 48rem) {
    .rt-zrcadlo__karty {
        justify-content: start;
    }
}

.rt-zrcadlo__karta {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    width: 7.5rem;
    margin: 0;
    text-align: center;
}

@media (width >= 48rem) {
    .rt-zrcadlo__karta {
        width: 8.5rem;
    }
}

.rt-karta--zrcadlo {
    width: 100%;
    box-shadow: 0 10px 24px rgb(0 0 0 / 45%);
}

.rt-zrcadlo__popis {
    display: grid;
    line-height: 1.35;
}

.rt-zrcadlo__kdy {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.rt-zrcadlo__jmeno {
    color: var(--color-text);
}

.rt-zrcadlo__otazka {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--color-gold-bright);
}

/* The tenth day: all four topics at once. */
.rt-vsechna__tema h4,
.rt-vsechna__tema p {
    margin: 0;
}

.rt-vsechna__tema {
    display: grid;
    gap: var(--space-1);
}

.rt-vsechna__nazev {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.rt-vsechna__tema--zvolene .rt-vsechna__nazev::before {
    margin-inline-end: 0.35em;
    content: '✓';
    content: '✓' / '';
}

.rt-vsechna__text {
    line-height: 1.65;
    color: var(--color-text-soft);
}

/* ---- „Vaše cesta“ (/dnes/cesta) ---- */
.rt-cesta {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-4) var(--space-7);
}

@media (width >= 48rem) {
    .rt-cesta {
        padding-block: var(--space-6) var(--space-8);
    }
}

.rt-cesta__hlava {
    margin: 0;
}

.rt-cesta__prazdna {
    display: grid;
    gap: var(--space-3);
    max-width: 36rem;
}

.rt-cesta__prazdna p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-soft);
}

.rt-cesta__prazdna .rt-cesta__prazdna-veta {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    color: var(--color-gold-bright);
}

.rt-cesta__prazdna .rt-cesta__akce {
    margin-block-start: var(--space-2);
}

/* The top: the facts one under another on a phone; from 36rem side by
   side, as many as there are (the Candle may be hidden, the next reward
   may be none), filling their rows without a gap – the next reward, twice
   as wide, goes under them when the row is too narrow for it. */
.rt-cesta__prehled {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

@media (width >= 36rem) {
    .rt-cesta__prehled {
        gap: var(--space-3);
    }
}

.rt-cesta__udaj {
    flex: 1 1 100%;
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

@media (width >= 36rem) {
    .rt-cesta__udaj {
        flex: 1 1 10rem;
    }

    .rt-cesta__udaj--cil,
    .rt-cesta__udaj--kredit {
        flex: 2 1 20rem;
    }
}

.rt-cesta__udaj dt {
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.rt-cesta__udaj dd {
    margin: 0;
    line-height: 1.45;
    color: var(--color-text);
}

.rt-cesta__udaj .rt-cesta__hodnota {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1.2;
    color: var(--color-gold-bright);
    font-variant-numeric: tabular-nums;
}

.rt-cesta__udaj .rt-cesta__drobne {
    font-size: var(--text-md);
    color: var(--color-text-soft);
}

/* What today's active day brought of the visit credit: gold, like the
   credit's line on /dnes. */
.rt-cesta__udaj .rt-cesta__dnes {
    color: var(--color-gold-light);
}

.rt-cesta__sekce {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.rt-cesta__nadpis {
    margin: 0;
}

/* The events: a thin gold line down the left, a mark at every event. */
.rt-osa {
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
    margin: 0;
    padding: 0 0 0 var(--space-5);
    list-style: none;
    background: linear-gradient(var(--color-border), var(--color-border)) 0.3rem 0.5rem / 1px calc(100% - 1rem) no-repeat;
}

.rt-osa__udalost {
    position: relative;
    display: grid;
    gap: 0 var(--space-4);
}

@media (width >= 36rem) {
    .rt-osa__udalost {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }
}

.rt-osa__udalost::before {
    position: absolute;
    top: 0.45rem;
    left: calc(var(--space-5) * -1 + 0.3rem - 4px);
    width: 9px;
    height: 9px;
    content: '';
    background: var(--color-gold-light);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--color-band, #0b0f1d);
}

.rt-osa__datum {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.rt-osa__text {
    display: grid;
}

.rt-osa__nazev {
    color: var(--color-text);
}

.rt-osa__detail {
    color: var(--color-text-soft);
}

/* The cabinet: the raven beside a shelf of what it brought. */
.rt-kabinet__obsah {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    align-items: end;
    justify-content: center;
    padding: var(--space-4);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.rt-kabinet__havran {
    display: grid;
    justify-items: center;
    width: 6rem;
    margin: 0;
}

.rt-kabinet__kresba {
    display: block;
    width: 100%;
    color: var(--color-gold-light);
}

.rt-kabinet__kresba svg,
.rt-kabinet__obraz svg {
    display: block;
    width: 100%;
    height: auto;
}

.rt-kabinet__jmeno {
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.rt-kabinet__police {
    flex: 1 1 18rem;
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0 0 var(--space-2);
    list-style: none;
    /* The shelf itself: a gold board under the items. */
    background: linear-gradient(90deg, transparent, var(--color-border) 8%, var(--color-border) 92%, transparent) bottom / 100% 2px no-repeat;
}

/* An item: its engraving beside its name on a phone, above it on the shelf
   of three; opened, where it comes from. */
.rt-kabinet__predmet > summary {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
    padding: var(--space-2);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-sm);
}

@media (width >= 48rem) {
    .rt-kabinet__police {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .rt-kabinet__predmet > summary {
        grid-template-columns: none;
        gap: var(--space-1);
        justify-items: center;
        text-align: center;
    }
}

.rt-kabinet__predmet > summary::-webkit-details-marker {
    display: none;
}

.rt-kabinet__predmet > summary:hover {
    background: color-mix(in srgb, var(--color-gold) 8%, transparent);
}

.rt-kabinet__obraz {
    display: block;
    width: 3.5rem;
    color: var(--color-gold-bright);
}

@media (width >= 48rem) {
    .rt-kabinet__obraz {
        width: 4.5rem;
    }
}

.rt-kabinet__nazev {
    line-height: 1.3;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
}

.rt-kabinet__puvod {
    margin: var(--space-1) 0 0;
    padding: var(--space-2) var(--space-3);
    line-height: 1.5;
    color: var(--color-text-soft);
    background: var(--plate-fill);
    border-radius: var(--radius-sm);
}

.rt-kabinet__prazdny {
    margin: 0;
    color: var(--color-text-soft);
}

/* The pages of the book: number, date, card, and new or again. */
.rt-dny {
    display: grid;
    max-width: 44rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rt-dny__den {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-soft);
}

@media (width >= 36rem) {
    .rt-dny__den {
        grid-template-columns: 2.25rem 7.5rem minmax(0, 1fr) auto;
        align-items: baseline;
    }
}

.rt-dny__den > :not(.rt-dny__strana) {
    grid-column: 2;
}

.rt-dny__strana {
    grid-row: 1 / span 3;
    color: var(--color-gold-light);
    font-variant-numeric: tabular-nums;
}

@media (width >= 36rem) {
    .rt-dny__den > :not(.rt-dny__strana) {
        grid-column: auto;
    }

    .rt-dny__strana {
        grid-row: auto;
    }
}

.rt-dny__datum {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.rt-dny__karta {
    color: var(--color-text);
}

.rt-dny__stav {
    color: var(--color-text-soft);
}

/* A day an amulet held: no page, no card – told in words and set apart. */
@media (width >= 36rem) {
    .rt-dny__den--podrzeny .rt-dny__datum {
        grid-column: 2;
    }

    .rt-dny__den--podrzeny .rt-dny__karta {
        grid-column: 3 / -1;
    }
}

.rt-dny__den--podrzeny .rt-dny__karta {
    font-style: italic;
    color: var(--color-gold-light);
}

/* The second card of a day a sign-in kept (D1): under the day's main card,
   quieter – a record, never a page. */
.rt-dny__druha {
    font-style: italic;
    color: var(--color-text-soft);
}

@media (width >= 36rem) {
    .rt-dny__den > .rt-dny__druha {
        grid-column: 3 / -1;
    }
}

/* „Uložit moji cestu“ (D1, spec § 20) as a block of its own – on „Vaše
   cesta“ under the summary, on /dnes under the morning reminder's offer when
   no credit waits: the reminder's quiet shape, a thin gold rule above. */
.rt-ulozit {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    max-width: 40rem;
    margin: var(--space-3) 0 var(--space-2);
    padding-block-start: var(--space-4);
    background: var(--rule-gold) top / 100% 1px no-repeat;
}

.rt-ulozit__veta {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.35;
    color: var(--color-gold-bright);
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

.rt-ulozit__text {
    margin: 0;
    line-height: 1.55;
    color: var(--color-text);
}

/* What an account would bring (ruling R56): quieter than the offer itself. */
.rt-ulozit__kredit {
    margin: 0;
    line-height: 1.55;
    color: var(--color-text-soft);
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

.rt-cesta__zpet {
    margin: 0;
}

/* =============================================================================
   Ranní připomínka (D2) – the morning reminder (Čaroděj každý den; spec § 16)

   The block under a turned card on /dnes (templates/nove/dnes/_pripominka.html.twig),
   drawn after the hint about the next card, and the small pages behind the
   links of its e-mails – the confirmation, the way out, the link of the
   morning mail and the one that no longer works
   (templates/nove/dnes/pripominka_*.html.twig). Every one of them is in the
   layout of the new pages, which loads this file, so the rules live here
   rather than in a file of their own. Its own `.rt-pripominka` names beside
   the `.rt-` block above, with the same tokens; text at least 16 px, touch
   targets at least 44 px, no motion.
   ============================================================================= */

/* --- The block under the card -------------------------------------------- */

/* Quiet: below the hint about the next card, after the same thin gold rule. */
.rt-pripominka {
    max-width: 40rem;
    margin: var(--space-3) 0 var(--space-2);
    padding-block-start: var(--space-4);
    background: var(--rule-gold) top / 100% 1px no-repeat;
}

.rt-pripominka__otazka,
.rt-pripominka__veta {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.35;
    color: var(--color-gold-bright);
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

.rt-pripominka__veta:focus:not(:focus-visible) {
    outline: none;
}

/* Waiting for the confirmation: a plain sentence, and under it a quiet,
   closed way to another address (the same form) – for a typo. */
.rt-pripominka--ceka .rt-pripominka__veta {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--color-text-soft);
}

.rt-pripominka__jina > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.rt-pripominka__jina > summary::-webkit-details-marker {
    display: none;
}

.rt-pripominka__jina-obsah {
    max-width: 28rem;
    margin-block-start: var(--space-2);
}

/* „Nastavit připomínku“: the button that opens the choice, no marker. */
.rt-pripominka__volba > summary {
    list-style: none;
}

.rt-pripominka__volba > summary::-webkit-details-marker {
    display: none;
}

.rt-pripominka__volba[open] > summary {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-light);
}

/* The two ways: stacked, side by side only from 64rem – between 48 and 64rem
   the text column beside the card is too narrow for two panels. */
.rt-pripominka__kanaly {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

@media (width >= 64rem) {
    .rt-pripominka__kanaly {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }
}

.rt-pripominka__kanal {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.rt-pripominka__nadpis {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.4;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.rt-pripominka__slib {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--color-text);
}

.rt-pripominka__text {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-text-soft);
}

/* The consent: the box and its words are one target. */
.rt-pripominka__souhlas {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--color-text-soft);
    cursor: pointer;
}

.rt-pripominka__souhlas input {
    flex: none;
    margin-block-start: 0.2em;
}

/* „e-mailu“ never breaks at its hyphen. */
.rt-pripominka__celek {
    white-space: nowrap;
}

.rt-pripominka__kanal .rt-tlacitko {
    justify-self: start;
}

/* --- The pages behind the links of the e-mails --------------------------- */

.rt-pripominka-stranka {
    padding-block: var(--space-6) var(--space-7);
}

.rt-pripominka-stranka__panel {
    display: grid;
    gap: var(--space-3);
    max-width: 36rem;
    margin-inline: auto;
    padding: var(--space-5);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--color-text-soft);
}

.rt-pripominka-stranka__panel :is(h1, p, div, form) {
    margin: 0;
}

.rt-pripominka-stranka__panel .nv-nadpis {
    color: var(--color-gold-bright);
}

.rt-pripominka-stranka__co {
    color: var(--color-text);
}

.rt-pripominka-stranka__tise {
    color: var(--color-muted);
}

/* =============================================================================
   The homepage by the approved wireframe (the owner, 9 October 2026: „ok. teď
   teda změň HP dle upraveného wireframe“) – /dnes and `/`.

   The grid of the card is `.rt-plocha` above. Here: the head with the date
   on the over-line, the sentence of what the page is, the button with
   „Zdarma, bez registrace“; the tiles of the Moon, the rune and the Lenormand
   card under each other; the panel of the personal reading with its stronger
   outline; the journey in one block; the three free tools three across; the
   low banner of 2027; the personal readings with the price and the button on
   one line in every row (the owner: „buttony … musí být ve stejné úrovni“);
   the morning card in e-mail as one compact row. Small print at least 12 px,
   the tools' sentences 14 px.
   ============================================================================= */

/* --- The head ------------------------------------------------------------- */

.rt-plocha > .rt-hlava {
    margin: 0;
}

/* „Dnes u Čaroděje · pátek 9. října 2026“: on one line from 48rem, the
   date never broken and its dot always with it; on a phone the date on a
   line of its own, without the dot – never a dot left alone at a line's
   end or start. */
.rt-hlava__radek {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    margin-block-end: var(--space-2);
}

.rt-hlava__radek .rt-nadtitulek {
    margin: 0;
}

/* The date in the overline's letters, as it always was. The row keeps the
   12 px letters it had, a size smaller than the other overlines: with the
   arrows the longest date („čtvrtek 30. listopadu 2026“) still fits on the
   one line at 48rem, which at 13 px it would not. */
.rt-hlava__radek :is(.rt-nadtitulek, .rt-datum) {
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

@media (width >= 48rem) {
    .rt-hlava__radek {
        flex-flow: row wrap;
        gap: var(--space-1) 0;
        align-items: baseline;
    }

    .rt-hlava__radek > p {
        white-space: nowrap;
    }

    .rt-hlava__radek .rt-datum::before {
        margin-inline: 0.5em;
        content: '·';
        content: '·' / '';
    }

    /* On one line the arrows close the whole of it, after the date; on a
       phone they stay around „Dnes u Čaroděje“ and the date is the line
       under it. */
    .rt-hlava__radek .rt-nadtitulek::after {
        content: none;
    }

    .rt-hlava__radek .rt-datum::after {
        margin-inline-start: 10px;
        color: rgb(184 128 66 / 48%);
        letter-spacing: 0;
        content: '⟵';
        content: '⟵' / '';
    }
}

.rt-uvod {
    max-width: 34rem;
    margin: var(--space-3) 0 0;
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-soft);
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

/* On a phone the head is centred over the card, like the button under it.
   The card and its first action come sooner (Codex's proposal HP2, point
   4): the heading face down 28/34 px, its sentence 16/24 within 34
   characters; turned, the card's name 28/34 and its meaning and „Pro
   dnešek“ 16/24, at the left. 16 px between the parts of the grid, 12 px
   between the card and what is under it. */
@media (width < 48rem) {
    .rt-plocha {
        gap: var(--space-4);
    }

    .rt-plocha > .rt-plocha__text {
        margin-block-start: calc(var(--space-3) - var(--space-4));
    }

    .rt-plocha > .rt-hlava {
        text-align: center;
    }

    .rt-hlava__radek {
        justify-content: center;
    }

    .rt-hlava .rt-nadpis {
        font-size: 1.75rem;
        line-height: 2.125rem;
    }

    .rt-uvod {
        max-width: 34ch;
        margin-inline: auto;
        font-size: var(--text-md);
        line-height: 1.5rem;
    }

    .rt-jmeno {
        font-size: 1.75rem;
        line-height: 2.125rem;
    }

    .rt-vyznam {
        text-align: start;
    }

    .rt-vyznam :is(.rt-vety, .rt-dnes) {
        font-size: var(--text-md);
        line-height: 1.5rem;
    }
}

/* --- Face down: the button and „Zdarma, bez registrace“ ----------------- */

.rt-otocit__start {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    width: 100%;
}

.rt-otocit__start > .rt-tlacitko {
    width: min(100%, 22rem);
}

.rt-otocit__zdarma {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}

.rt-vlastni {
    margin: 0;
    color: var(--color-text-soft);
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

.rt-vlastni a {
    color: var(--color-accent-text);
    white-space: nowrap;
    text-underline-offset: 3px;
}

/* One quiet row of links under the card face down: „Vaše cesta →“ for a
   returning visitor, „Společná karta dne pro všechny →“. */
.rt-odkazy {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    justify-content: center;
    margin: 0;
}

.rt-odkazy a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-accent-text);
    white-space: nowrap;
    text-underline-offset: 3px;
    text-shadow: 0 0 3px rgb(5 11 21 / 90%), 0 0 12px rgb(5 11 21 / 85%);
}

@media (width >= 48rem) {
    .rt-odkazy {
        justify-content: start;
    }
}

@media (width >= 48rem) {
    .rt-otocit__start {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
        align-items: center;
        justify-content: start;
    }

    .rt-otocit__start > .rt-tlacitko {
        width: auto;
    }
}

/* --- The tiles: the Moon first, under each other ------------------------- */

/* In the right column the tiles stand over the drawings of the sky: the
   Moon, the sphere and the book stay whole in the background (owner,
   9 October 2026: „ta koláž má být na pozadí, zcela, ne v obsahu“) and show
   through the tiles' plates. */
@media (width >= 48rem) {
    /* The compass stands over the text of the head: only a trace of it, so
       that no line of it crosses a letter. */
    .nv-dnes .nv-dnes-nebe__kompas {
        opacity: 0.4;
    }
}

@media (width >= 75rem) {
    /* The day's step: its words on the left, „Zkusím to“ beside them – only
       where the middle column is as wide as the three columns make it. */
    .rt-plocha--lic .rt-krok:has(.rt-krok__formular) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 var(--space-5);
        align-items: center;
    }

    .rt-plocha--lic .rt-krok:has(.rt-krok__formular) > :not(.rt-krok__formular) {
        grid-column: 1;
    }

    .rt-plocha--lic .rt-krok__formular {
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .rt-plocha--lic .rt-krok:has(.rt-krok__formular) .rt-krok__text {
        margin: 0;
    }
}

/* The right column: the tiles (the owner, 9 October 2026). */
.rt-pravy {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.rt-pravy > .rt-symboly {
    margin: 0;
}

.rt-symboly .nv-dnes-symbol {
    /* Lighter than --plate-fill: the drawing of the sky behind them shows
       through (owner, 9 October 2026). */
    background: linear-gradient(115deg, rgb(24 21 38 / 74%), rgb(11 15 29 / 68%));
    backdrop-filter: blur(1.5px);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    transition: border-color var(--transition-fast);
}

.rt-symboly .nv-dnes-symbol:has(.nv-dnes-symbol__odkaz:hover, .nv-dnes-symbol__odkaz:focus-visible) {
    border-color: var(--color-gold-light);
}

.rt-symboly .nv-dnes-symbol__odkaz {
    background: none;
    border: 0;
}

.rt-symboly .nv-dnes-symbol__odkaz:hover,
.rt-symboly .nv-dnes-symbol__odkaz:focus-visible {
    transform: none;
}

/* The labels of the tiles at 12 px at least. */
.rt-symboly .nv-dnes-symbol__druh {
    font-size: var(--text-xs);
}

/* The Moon's note across the width of its tile. */
.rt-symboly .rt-mesic__pozn {
    margin: 0;
    padding: 0 var(--space-3) var(--space-3);
    font-size: var(--text-sm);
}

/* On a phone the three tiles are one panel (Codex's proposal HP2, point 8):
   three rows in their order, a hairline between them, each as tall as its
   words and at least 64 px; the symbol 32 px wide in its own proportions,
   the label 12/16 px, the name 18/23, the Moon's figures 13/20. */
@media (width < 48rem) {
    .rt-symboly {
        gap: 0;
        background: linear-gradient(115deg, rgb(24 21 38 / 74%), rgb(11 15 29 / 68%));
        backdrop-filter: blur(1.5px);
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius);
    }

    .rt-symboly .nv-dnes-symbol {
        background: none;
        backdrop-filter: none;
        border: 0;
        border-radius: 0;
    }

    .rt-symboly .nv-dnes-symbol + .nv-dnes-symbol {
        border-block-start: 1px solid var(--color-border-soft);
    }

    .rt-symboly .nv-dnes-symbol__odkaz {
        min-height: 64px;
        padding: 10px var(--space-3);
    }

    .rt-symboly .nv-dnes-symbol__obraz {
        flex-basis: 32px;
    }

    .rt-symboly .nv-dnes-symbol__obraz--runa {
        font-size: 1.25rem;
    }

    .rt-symboly .nv-dnes-symbol__druh {
        line-height: 1rem;
    }

    .rt-symboly .nv-dnes-symbol__jmeno {
        font-size: var(--text-lg);
        line-height: 1.4375rem;
    }

    .rt-symboly :is(.rt-mesic__osvit, .rt-mesic__znameni) {
        font-size: var(--text-sm);
        line-height: 1.25rem;
    }

    .rt-symboly .rt-mesic__pozn {
        padding: 0 var(--space-3) 10px;
    }
}

/* --- The panel of the personal reading --------------------------------- */

/* A quiet gold outline without a glow, so that the panel does not compete
   with the card of the day; its heading and its purple button carry it
   (Codex's proposal HP2, point 7). */
.rt-nabidka {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    background: var(--plate-fill);
    border: 1px solid rgb(201 162 94 / 45%);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.rt-nabidka__obsah {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.rt-nabidka__nadpis {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.8125rem;
}

.rt-nabidka__text {
    max-width: 44rem;
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.5rem;
}

.rt-nabidka__ukazka {
    margin: 0;
}

.rt-nabidka__ukazka a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-accent-text);
    text-underline-offset: 3px;
}

.rt-nabidka__akce {
    margin: 0;
}

.rt-nabidka__tlacitko {
    width: 100%;
    min-height: 48px;
    white-space: nowrap;
}

.rt-nabidka__kredit {
    grid-column: 1 / -1;
    margin: 0;
}

@media (width >= 48rem) {
    .rt-nabidka {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-3) var(--space-6);
        align-items: center;
        padding: var(--space-5);
    }

    .rt-nabidka__nadpis {
        font-size: 1.75rem;
        line-height: 2.125rem;
    }

    .rt-nabidka__tlacitko {
        width: auto;
    }
}

/* --- The journey in one block ------------------------------------------ */

.rt-havran.rt-cesta-blok {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    justify-items: stretch;
    max-width: none;
    margin: 0;
    padding: var(--space-5);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.rt-cesta-blok__hlava {
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.rt-cesta-blok__uvod {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.rt-cesta-blok__nadpis {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.4;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* Svíce · Sbírka · Kredit · Další odměna: a row of figures, each with its
   small print under it. */
.rt-udaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-3);
    margin: 0;
}

.rt-udaj {
    display: grid;
    gap: 2px;
    align-content: start;
    min-width: 0;
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid var(--color-border-soft);
}

.rt-udaj dd {
    margin: 0;
}

.rt-udaj__nazev {
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.rt-udaj__hodnota {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--color-gold-bright);
    font-variant-numeric: tabular-nums;
}

.rt-udaj__drobne,
.rt-udaj .rt-cil {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-soft);
}

.rt-udaj .rt-cil {
    color: var(--color-gold-light);
}

/* The Candle's own sentence keeps its look when the figure is one. */
.rt-udaj.rt-svice {
    color: inherit;
}

.rt-cesta-blok__radek {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border-soft);
}

.rt-cesta-blok__radek > .rt-pripominka {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
}

/* The reminder's question opens with its choice, under the button. */
.rt-pripominka__volba > .rt-pripominka__otazka {
    margin-block-start: var(--space-4);
}

/* Open, the reminder's choice takes the whole row under its button. */
.rt-cesta-blok__radek > .rt-pripominka:has(details[open]) {
    flex-basis: 100%;
}

.rt-cesta-blok__zitra {
    margin: 0;
    color: var(--color-text-soft);
}

.rt-cesta-blok__radek > .rt-havran__odkazy {
    gap: 0 var(--space-5);
    align-items: center;
    margin-inline-start: auto;
}

.rt-cesta-blok__radek > .rt-havran__odkazy:has(.rt-podrobnosti[open]) {
    flex-basis: 100%;
    margin-inline-start: 0;
}

.rt-podrobnosti {
    max-width: 100%;
}

.rt-podrobnosti[open] {
    flex-basis: 100%;
    order: 2;
}

.rt-podrobnosti__odkaz {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-muted);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.rt-podrobnosti__odkaz::-webkit-details-marker {
    display: none;
}

.rt-podrobnosti__odkaz::after {
    margin-inline-start: 0.4em;
    font-size: 0.8em;
    content: '▾';
    content: '▾' / '';
}

.rt-podrobnosti[open] > .rt-podrobnosti__odkaz::after {
    content: '▴';
    content: '▴' / '';
}

.rt-podrobnosti__odkaz:hover {
    color: var(--color-gold-bright);
}

.rt-podrobnosti__obsah {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
}

.rt-podrobnosti__obsah > .rt-zitra,
.rt-podrobnosti__obsah > .rt-jak {
    margin: 0;
}

/* Open, the settings stay inside the block on a phone too. */
.rt-podrobnosti__obsah .rt-nastaveni__obsah {
    width: auto;
    max-width: 30rem;
}

@media (width >= 64rem) {
    .rt-cesta-blok__hlava {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: var(--space-6);
    }
}

/* On a phone (Codex's proposal HP2, point 9): more room for whole
   sentences – 16 px of padding, the raven 48 px wide, the four figures
   two by two without their hairlines, the figures 20/26 px and their small
   print 13/20; under them one column: the reminder, the sentence about
   tomorrow, „Podrobnosti“. */
@media (width < 48rem) {
    .rt-havran.rt-cesta-blok {
        padding: var(--space-4);
    }

    .rt-cesta-blok .rt-havran__postava {
        width: auto;
        max-width: 6rem;
    }

    .rt-cesta-blok .rt-havran__kresba {
        width: 48px;
    }

    .rt-udaje {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-4);
    }

    .rt-udaj {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .rt-udaj__hodnota {
        font-size: 1.25rem;
        line-height: 1.625rem;
    }

    .rt-udaj__drobne,
    .rt-udaj .rt-cil {
        font-size: var(--text-sm);
        line-height: 1.25rem;
    }

    .rt-cesta-blok__radek {
        flex-flow: column nowrap;
        align-items: stretch;
    }

    /* Opened, a part stays in the column (its basis of the whole row is a
       row's, not a column's). */
    .rt-cesta-blok__radek > :is(.rt-pripominka, .rt-havran__odkazy) {
        flex-basis: auto;
        margin-inline-start: 0;
    }
}

/* --- Under the daily part ---------------------------------------------- */

/* One rhythm (Codex's proposal HP2, point 5): every block under the daily
   part – the question of the day and the reading in the card's frame, then
   the sections after it – stands 28 px under the one before it on a phone,
   40 px on a computer, with no padding of its own to add to that; its
   heading 12 px under the gold rule and 12 px above its content, its
   sentence 6 px under it. The cards of a row 12 px apart on a phone, 24 px
   on a computer. The side margins stay 16 px. */
.nv-dnes .rt {
    padding-block-end: 0;
}

.nv-dnes :is(.rt-ramec > .nv-dnes-sekce, .nv-dnes-den > .nv-sekce) {
    margin-block: 1.75rem 0;
    padding-block: 0;
}

.nv-dnes .nv-dnes-den > .nv-sekce:last-child {
    margin-block-end: 1.75rem;
}

.nv-dnes .nv-dnes-sekce__hlava {
    gap: 6px var(--space-5);
    margin-block-end: var(--space-3);
    padding-block-start: var(--space-3);
}

.nv-dnes :is(.nv-dnes-rychle, .nv-dnes-sluzby, .nv-dnes-magazin) {
    gap: var(--space-3);
}

@media (width >= 48rem) {
    .nv-dnes :is(.rt-ramec > .nv-dnes-sekce, .nv-dnes-den > .nv-sekce) {
        margin-block-start: 2.5rem;
    }

    .nv-dnes .nv-dnes-den > .nv-sekce:last-child {
        margin-block-end: 2.5rem;
    }

    .nv-dnes :is(.nv-dnes-rychle, .nv-dnes-sluzby, .nv-dnes-magazin) {
        gap: var(--space-5);
    }
}

/* --- The rows of cards of the homepage ---------------------------------- */

/* „Vyzkoušejte si sami“ and „Osobní výklady“ draw their cards in the card's
   homepage layout (`rozlozeni: 'titulka'`, components/nove/_karta.html.twig):
   the picture, the body and the foot – the price and the button – are the
   card's three children. Every picture is whole, in its own 4 : 3, never
   cut and never zoomed when the pointer is over it (the owner, 10 October
   2026: „Náhledy obrázků vlevo jsou děsně ořízlé … Lepší zmenšit na
   mobilu než je kurvit“; Codex's proposal HP2, points 1, 2 and 11). No
   height is fixed, no line clamped: a card is as tall as its words. */
.nv-dnes .nv-karta.nv-karta--titulka .nv-karta__obraz img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
}

/* The foot is the card's own child now: from a computer's rows its rule
   and its margins as they were inside the body. */
.nv-dnes .nv-karta--titulka > .nv-karta__pata {
    margin: auto var(--space-4) var(--space-4);
}

.nv-dnes .nv-karta--titulka > .nv-karta__telo {
    padding-block-end: var(--space-2);
}

/* A phone (below 48rem): a small whole picture of 80 × 60 at the top left,
   the text beside it, the foot under both – the price on the left, the
   button beside it, as wide as the rest of the row and at least 44 px
   high. A card without a picture keeps its drawn motif in the same field,
   48 × 48 at most. Titles 20/25 px, sentences 14/21, the small print 12/18. */
@media (width < 48rem) {
    .nv-dnes .nv-karta.nv-karta--titulka {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-areas:
            'obraz telo'
            'pata pata';
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .nv-dnes .nv-karta.nv-karta--titulka .nv-karta__obraz {
        grid-area: obraz;
        align-self: start;
        width: 80px;
        height: 60px;
        min-height: 0;
        aspect-ratio: 4 / 3;
        background: #0f1424;
        border: 0;
    }

    .nv-dnes .nv-karta.nv-karta--titulka .nv-motiv {
        width: 48px;
        max-width: 100%;
        height: 48px;
    }

    .nv-dnes .nv-karta.nv-karta--titulka .nv-karta__telo {
        grid-area: telo;
        gap: 6px;
        min-width: 0;
        padding: 0;
    }

    .nv-dnes .nv-karta.nv-karta--titulka > .nv-karta__pata {
        grid-area: pata;
        display: grid;
        grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
        gap: var(--space-3);
        align-items: center;
        margin: 0;
        padding-block-start: var(--space-3);
    }

    .nv-dnes .nv-karta.nv-karta--titulka .nv-karta__tlacitko {
        min-width: 0;
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
        letter-spacing: 0.03em;
        white-space: normal;
    }

    .nv-dnes .nv-karta--titulka .nv-karta__nazev {
        font-size: 1.25rem;
        line-height: 1.5625rem;
    }

    .nv-dnes .nv-karta--titulka .nv-karta__vysledek {
        font-size: 0.875rem;
        line-height: 1.3125rem;
    }

    .nv-dnes .nv-karta--titulka .nv-karta__meta {
        font-size: var(--text-xs);
        line-height: 1.125rem;
    }
}

/* Between a phone and a computer the row is wide: the button keeps its
   own width at the right end of the foot instead of stretching over it. */
@media (36rem <= width < 48rem) {
    .nv-dnes .nv-karta.nv-karta--titulka > .nv-karta__pata {
        grid-template-columns: minmax(72px, max-content) auto;
        justify-content: space-between;
    }

    .nv-dnes .nv-karta.nv-karta--titulka .nv-karta__tlacitko {
        min-width: 13rem;
    }
}

/* A computer: in every row the cards are of one height and the foot at
   their bottom, the price above the button – so the buttons of a row stand
   on one line (the owner: „buttony … musí být ve stejné úrovni“), each on
   one line of its own. */
@media (width >= 48rem) {
    :is(.nv-dnes-rychle, .nv-dnes-sluzby) .nv-karta__tlacitko {
        min-height: 44px;
        padding-inline: var(--space-3);
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}

/* „Vyzkoušejte si sami“: one card a row below 48rem; from there three
   across, each picture whole in its own 4 : 3 above the text (about 70 px
   taller a row than the cut 16 : 9 it had). The sentence of each tool at
   14 px. */
.nv-dnes-rychle {
    grid-template-columns: minmax(0, 1fr);
}

.nv-dnes-rychle .nv-karta__vysledek {
    font-size: 0.875rem;
}

@media (width >= 48rem) {
    .nv-dnes-rychle {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nv-dnes-rychle .nv-karta--titulka .nv-karta__obraz img {
        height: auto;
    }
}

/* „Osobní výklady“: a small whole picture of 80 × 60 beside the text at
   every width. One card a row below 75rem – from 48rem the foot on the
   right of the row, the price beside the button; from 75rem three cards of
   one height, the foot under the picture and the text at their bottom,
   the price above the button. The sentence of each at 14 px. */
.nv-dnes-sluzby {
    grid-template-columns: minmax(0, 1fr);
}

.nv-dnes-sluzby .nv-karta__vysledek {
    font-size: 0.875rem;
}

@media (width >= 48rem) {
    .nv-dnes .nv-dnes-sluzby .nv-karta--titulka {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) auto;
        grid-template-areas: 'obraz telo pata';
        gap: var(--space-3) var(--space-4);
        align-items: center;
        padding: var(--space-4);
    }

    .nv-dnes .nv-dnes-sluzby .nv-karta--titulka .nv-karta__obraz {
        grid-area: obraz;
        align-self: start;
        width: 80px;
        height: 60px;
        aspect-ratio: 4 / 3;
        background: #0f1424;
        border: 0;
    }

    .nv-dnes .nv-dnes-sluzby .nv-karta--titulka > .nv-karta__telo {
        grid-area: telo;
        padding: 0;
    }

    /* The buttons of one width at the right end of each card, so that the
       cards under each other end in one column; the price before it. */
    .nv-dnes .nv-dnes-sluzby .nv-karta--titulka > .nv-karta__pata {
        grid-area: pata;
        display: grid;
        grid-template-columns: max-content 13rem;
        gap: var(--space-4);
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
    }
}

@media (width >= 75rem) {
    .nv-dnes-sluzby {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nv-dnes .nv-dnes-sluzby .nv-karta--titulka {
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        grid-template-areas:
            'obraz telo'
            'pata pata';
        align-items: start;
    }

    .nv-dnes .nv-dnes-sluzby .nv-karta--titulka > .nv-karta__pata {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        align-items: stretch;
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--color-border-soft);
    }
}

/* --- The low banner of 2027 ---------------------------------------------- */

/* The whole circle of the zodiac, never a strip of it (Codex's proposal
   HP2, point 6): on a phone a picture of 80 × 60 beside the over-line, the
   heading and the sentence, the button under them across the width; from
   48rem the picture at 256 × 192 on the left, the text and the button in
   the column beside it. No fixed height: the banner is as tall as its
   words. The heading once. */
.nv-dnes-rok__banner {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
        'obraz text'
        'akce akce';
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.nv-dnes-rok__obraz {
    grid-area: obraz;
    display: grid;
    place-items: center;
    width: 80px;
    height: 60px;
    color: var(--color-gold);
    background: #0f1424;
}

.nv-dnes-rok__obraz img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nv-dnes-rok__obraz .nv-motiv {
    width: 48px;
    max-width: 100%;
    height: 48px;
}

.nv-dnes-rok__text {
    grid-area: text;
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

/* Looks like every overline on the site (components.css, Labels). */
.nv-dnes-rok__nadtitulek {
    margin: 0;
}

.nv-dnes-rok__nadpis {
    margin: 0;
}

.nv-dnes-rok__veta {
    margin: 0;
    color: var(--color-text-soft);
}

.nv-dnes-rok__akce {
    grid-area: akce;
    margin: 0;
}

.nv-dnes-rok__akce .nv-odkaz-tlacitko {
    width: 100%;
}

@media (width >= 48rem) {
    .nv-dnes-rok__banner {
        grid-template-columns: 256px minmax(0, 1fr);
        grid-template-areas:
            'obraz text'
            'obraz akce';
        gap: var(--space-3) var(--space-5);
        padding: var(--space-5);
    }

    .nv-dnes-rok__obraz {
        align-self: center;
        width: 256px;
        height: 192px;
    }

    .nv-dnes-rok__obraz .nv-motiv {
        width: 64%;
        height: auto;
    }

    .nv-dnes-rok__text {
        align-self: end;
        gap: var(--space-2);
    }

    .nv-dnes-rok__akce {
        align-self: start;
    }

    .nv-dnes-rok__akce .nv-odkaz-tlacitko {
        width: auto;
    }
}

/* A quiet word over the title – never a badge in a frame. */
.nv-karta__stitek {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* „Karta dne každé ráno e-mailem“: one compact row, a small envelope on the
   left, the text and the button beside it – only while today's card is face
   down: turned in place (the frame swapped, the row outside it), the
   journey's own morning reminder takes over. The envelope is the whole
   picture at 80 × 60, without the mask that faded its edges (Codex's
   proposal HP2); on a phone the button under the picture and the text,
   across both. */
.nv-dnes-den:has(.rt-plocha--lic) .nv-dnes-odber-sekce {
    display: none;
}

.nv-dnes-odber--radek {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    align-items: center;
    padding: var(--space-4);
    background: var(--plate-fill);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.nv-dnes-odber--radek:not(.nv-dnes-odber--obraz) {
    grid-template-columns: minmax(0, 1fr);
}

.nv-dnes-odber--radek .nv-dnes-odber__obraz {
    width: 80px;
    height: 60px;
    object-fit: contain;
    border-radius: 0;
    mask-image: none;
}

.nv-dnes-odber--radek .nv-dnes-odber__text {
    display: grid;
    gap: var(--space-1);
}

.nv-dnes-odber__nadpis {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 480;
    line-height: 1.3;
}

.nv-dnes-odber--radek p.nv-dnes-odber__veta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-soft);
}

.nv-dnes-odber__tlacitko {
    grid-column: 1 / -1;
}

@media (width >= 48rem) {
    .nv-dnes-odber--radek {
        grid-template-columns: 80px minmax(0, 1fr) auto;
        padding: var(--space-4) var(--space-5);
    }

    .nv-dnes-odber--radek:not(.nv-dnes-odber--obraz) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .nv-dnes-odber__tlacitko {
        grid-column: auto;
        justify-self: start;
    }
}

/* „Vaše cesta“ carries what the card face down no longer shows (the owner,
   9 October 2026): the raven speaking on top and the settings after the
   overview. */
.rt-cesta__havran {
    max-width: 40rem;
    margin-block-end: var(--space-5);
}

.rt-cesta__nastaveni {
    margin-block: var(--space-2) var(--space-5);
}