/* ============================================================================
   Vizuálna vrstva detailu znamenia.
   Poradie: tokeny → základ → pomocné → hlavička → hero → reklama → výklad
            → sekcie → upsell → odber → pätička → responzivita.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Plochy */
    --bg:            #f6f1ea;
    --bg-hero:       #ece6f4;
    --surface:       #fffdf9;
    --surface-soft:  #f2ecf7;

    /* Text */
    --ink:           #1f1b2e;
    --ink-soft:      #4a4459;
    --muted:         #6e6779;

    /* Akcenty */
    --brand:         #6d4aae;
    --brand-deep:    #1e1b39;
    --brand-soft:    #eee8f8;
    --warm:          #d98b3f;
    --warm-soft:     #fbe9d4;

    /* Sekčné akcenty */
    --rose:          #c85f8c;
    --rose-soft:     #fadfe9;
    --indigo:        #5d55b8;
    --indigo-soft:   #e5e0f7;
    --amber:         #b4762a;
    --amber-soft:    #fbe6c8;
    --green:         #3f7f5c;
    --green-soft:    #dcefe1;
    --violet:        #6d4aae;
    --violet-soft:   #ece5f8;

    /* Linky a tiene */
    --line:          #e5dccf;
    --line-strong:   #cfc3b3;
    --shadow-sm:     0 1px 2px rgba(31, 27, 46, 0.04);
    --shadow-md:     0 8px 24px -12px rgba(31, 27, 46, 0.18);

    /* Rozmery */
    --max-width:     74rem;
    --gutter:        1.5rem;
    --header-h:      4rem;
    /* Výška prilepenej lišty dní. Nula je predvolená, lebo lištu má iba detail
       znamenia; stránka s ňou si ju nastaví cez :has() nižšie. Kotvy aj lepivý
       panel počítajú s obidvoma pásmi naraz cez --sticky-h. */
    --daybar-h:      0rem;
    --sticky-h:      calc(var(--header-h) + var(--daybar-h));
    --r-sm:          0.65rem;
    --r-md:          1rem;
    --r-lg:          1.35rem;

    /* Typografia */
    --font-sans:     Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif:    Georgia, "Iowan Old Style", "Times New Roman", serif;

    /* Znaky zverokruhu. Bežný textový font ich nemá, takže by ich prehliadač
       vzal z emoji fontu a namiesto tenkého symbolu by vykreslil farebný
       obrázok. Tento stack ich drží ako text. */
    --font-symbol:   "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sticky-h) + 1rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin-top: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Pomocné ─────────────────────────────────────────────────────────────── */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -120%);
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: var(--brand-deep);
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* Placeholder namiesto zatiaľ nedodaného obrázka alebo reklamy.
   Rozmer sa píše do atribútu data-ph, takže je vidieť priamo v HTML. */
.ph {
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background-color: var(--surface-soft);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(109, 74, 174, 0.05) 0 10px,
        rgba(109, 74, 174, 0) 10px 20px
    );
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.ph::after {
    content: attr(data-ph);
}

/* ── Tlačidlá ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Tlačidlo skryté atribútom `hidden` musí zmiznúť: `display: inline-flex` z .btn
   inak prebije `display: none`, ktoré [hidden] dáva prehliadač, a na stránke
   svietia aj varianty, ktoré tam v danom stave nepatria. */
.btn[hidden] { display: none; }

.btn--primary {
    background: var(--brand-deep);
    color: #fff;
}

.btn--primary:hover {
    background: #2c2752;
}

.btn--lg {
    min-height: 3.25rem;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
}

.btn--block {
    width: 100%;
}

/* ── Hlavička ────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 241, 234, 0.85);
    backdrop-filter: blur(10px);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
    background: rgba(240, 234, 225, 0.96);
    box-shadow: var(--shadow-sm);
}

/* Spoločný obsahový stĺpec. `main` ho zámerne nemá — hero potrebuje ísť
   cez celú šírku okna, takže šírku držia až jednotlivé bloky vnútri. */
.site-header__inner,
.daybar__inner,
.site-footer__inner,
.hero__inner,
.ad,
.reading,
.signs,
.promises,
.pitch,
.origin,
.signup {
    width: min(calc(100% - 2 * var(--gutter)), var(--max-width));
    margin-inline: auto;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--header-h);
}

/* `min-width: 0` je poistka pre úzke telefóny: značka je jediná pružná časť
   hlavičky, takže keď sa riadok nezmestí, ubudne z názvu (ellipsis nižšie)
   a nie z navigácie či CTA. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--warm);
    text-decoration: none;
}

.brand__mark {
    flex: 0 0 auto;
}

.brand__name {
    overflow: hidden;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Navigácia sedí vpravo pri CTA, nie v strede hlavičky: je v nej jediná
   položka a v strede by pôsobila ako stratené slovo medzi značkou a tlačidlom. */
.main-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 1.75rem;
    margin-left: auto;
}

/* Položka menu, nie tlačidlo: rám a výplň má v hlavičke jediný prvok — CTA.
   Odkaz od okolia odlíši teplá šípka a plná farba textu, takže sa nečíta ako
   druhý nadpis vedľa značky, ale ostane odkazom. */
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.main-nav__chevron {
    flex: 0 0 auto;
    color: var(--warm);
    transition: transform 0.15s ease;
}

/* Ikona pri textovom odkaze (RSS v pätičke). Zostáva tu aj po tom, čo ju
   navigácia v hlavičke stratila — pätička je rovnako na každej stránke. */
.nav-icon {
    flex: 0 0 auto;
    color: var(--warm);
}

.main-nav a:hover {
    color: var(--brand);
}

/* Šípka sa pri hoveri posunie o dva pixely — smer, ktorým odkaz vedie.
   Pri prefers-reduced-motion sa posun deje bez prechodu (pravidlo v závere). */
.main-nav a:hover .main-nav__chevron {
    transform: translateX(2px);
}

.main-nav a[aria-current="page"] {
    color: var(--brand);
}

/* Odsadenie od navigácie drží gap hlavičky; margin-left: auto by pri jedinej
   položke navigácie odtlačil tlačidlo až za ňu. */
.site-header__actions {
    flex: 0 0 auto;
    margin-left: 0;
}

/* ── Lišta dní ───────────────────────────────────────────────────────────── */

/* Lišta ostáva pri čítaní výkladu na očiach, prilepená tesne pod hlavičkou —
   preskočiť na iný deň tak ide bez rolovania späť hore. Preto má aj krycie
   pozadie: pôvodný gradient do priehľadna by nechal text presvitať. */
.daybar {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: var(--bg-hero);
    border-bottom: 1px solid var(--line);
}

/* Prilepená lišta zaberá miesto pod hlavičkou, takže o ňu musia vedieť kotvy
   aj lepivý panel osobného horoskopu. Hodnota je jej výška na jeden riadok —
   preto sa nižšie stráži, aby na mobile do druhého riadka nezalomila. */
html:has(.daybar) {
    --daybar-h: 3.4rem;
}

.daybar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0;
}

.daybar__date {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.day-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.day-nav a,
.day-nav [aria-current] {
    display: block;
    padding: 0.3rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}

.day-nav a {
    border-color: var(--line);
    color: var(--muted);
}

.day-nav a:hover {
    border-color: var(--brand);
    color: var(--ink);
}

.day-nav [aria-current] {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 650;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

/*
 * Hero je pás s fotkou na pozadí — aj pod textom. Čitateľnosť drží gradient nad
 * fotkou: vľavo takmer nepriehľadný, vpravo priehľadný, takže text sedí na
 * svetlej ploche a motív ostáva vidieť.
 *
 * Šírka: do šírky layoutu je pás ukotvený o okraje okna, nad ňou sa zastaví.
 * Ukotvenie rieši to, že odsadený pás s ostrými hranami pôsobí, akoby na stránke
 * plával; strop zase to, že fotka má pomer 2:1, takže na širšom okne by z nej
 * 'cover' pri pevnej výške odrezal väčšinu a ostal by úzky prúžok.
 *
 * Strop je o dva guttery širší než obsahový stĺpec — teda presne o tie okraje
 * layoutu, ktoré má hero ignorovať. Vďaka tomu sa text vnútri nelepí na hranu
 * fotky a zároveň lícuje so zvyškom stránky pri každej šírke okna.
 *
 * Adresa fotky je relatívna k tomuto súboru, nie k stránke: styles.css je vždy
 * v /assets/, kdežto stránka sa podáva aj z dvojúrovňovej adresy /<znamenie>/<deň>.
 *
 * Fotku pre konkrétnu stránku možno vymeniť prepísaním --hero-image na jej
 * triede; hodnota nižšie je spoločná predvoľba pre rozcestník aj detaily.
 */
.hero {
    width: min(100%, calc(var(--max-width) + 2 * var(--gutter)));
    margin-inline: auto;

    /* Jedna výška pásu pre celý web — rozcestník, detail znamenia aj Astrozin.
       Nie je to spodná hranica, do ktorej obsah dorastie, ale výška, ktorú
       obsah nemá prerásť: keby ju prerástol, orezal by sa výrez fotky a pás by
       bol na každej stránke inak vysoký. Rozsah 26–31rem je zvolený tak, aby sa
       doň zmestil aj najvyšší obsah — hero detailu znamenia s medailónom,
       veľkým titulkom a dvoma tlačidlami. */
    --hero-h: clamp(26rem, 21.5rem + 13.7vw, 31rem);

    --hero-image: url("hero-scope.webp");
    --hero-overlay: linear-gradient(
        95deg,
        var(--bg) 0%,
        rgba(246, 241, 234, 0.94) 30%,
        rgba(246, 241, 234, 0.55) 52%,
        rgba(246, 241, 234, 0.08) 76%,
        rgba(246, 241, 234, 0) 100%
    );

    position: relative;
    /* Bez zaoblenia, na rozdiel od kariet a panelov nižšie: hero je fotografia,
       nie prvok rozhrania, a ostrá hrana ho drží v editoriálnej polohe. */
    background-color: var(--bg-hero);
    background-image: var(--hero-overlay), var(--hero-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Štítok s rozmerom. Zmizne spolu s atribútom data-ph v šablóne. */
.hero[data-ph]::after {
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    max-width: calc(100% - 2rem);
    color: var(--muted);
    content: attr(data-ph);
    text-align: right;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Text sadá na spodok pásu, nie do jeho stredu: výšku pásu tak drží
   `--hero-h` a nie obsah, a vyšší obsah (medailón, dva riadky titulku) rastie
   nahor do voľného miesta namiesto toho, aby pás natiahol. */
.hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: var(--hero-h);
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.hero__text {
    max-width: 34rem;
}

.hero__id {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.sign-badge {
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 9vw, 6.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--warm-soft);
    color: var(--warm);
    font-family: var(--font-symbol);
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    font-variant-emoji: text;
    line-height: 1;
}

.hero h1 {
    margin: 0;
    font-size: clamp(3rem, 8vw, 5.5rem);
    letter-spacing: -0.045em;
}

/* Chybová/notice stránka (index.php send_notice) má vetový titulok — "Takú
   stránku tu nemáme", nie jednoslovné meno znamenia, ktorému patrí základný
   stupeň vyššie. Rovnaký menší stupeň ako rozcestník (.hero--home h1
   nižšie) — z rovnakého dôvodu, dlhší text potrebuje menšie písmo. */
.hero--notice h1 {
    font-size: clamp(2.25rem, 5.4vw, 3.75rem);
    letter-spacing: -0.035em;
}

.sign-range {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.meta-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--warm);
}

/* Štítok, keď sa podáva starší deň než dnešný. Vkladá ho index.php. */
.stale-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 34rem;
    margin: 0 0 1.5rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--warm);
    border-radius: var(--r-sm);
    background: var(--warm-soft);
    color: #7a4a12;
    font-size: 0.9rem;
    line-height: 1.45;
}

.lead {
    max-width: 34ch;
    margin: 0 0 2rem;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    line-height: 1.5;
}

/* ── Reklama ─────────────────────────────────────────────────────────────── */

/* Blok je skrytý, kým v ňom reklama naozaj nie je. Vyplnenú jednotku označí
   AdSense sám cez data-ad-status="filled" — až vtedy sa blok ukáže.
   Zámerne sa nekontroluje "unfilled": ten atribút vznikne len keď AdSense
   odpovie. Pri neschválenej doméne, blokovači reklám alebo odmietnutom načítaní
   skriptu nevznikne vôbec a blok by ostal visieť ako prázdny rám so štítkom. */
.ad {
    display: none;
    margin-block: clamp(2rem, 5vw, 3rem);
    padding: 0.75rem;
    border-radius: var(--r-md);
    background: rgba(232, 226, 216, 0.6);
}

.ad:has(> .ad__slot[data-ad-status="filled"]) {
    display: block;
}

.ad__label {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}

/* Rezervovaná výška — obsah pod reklamou sa nesmie posunúť (CLS). */
.ad__slot {
    min-height: 250px;
    border-radius: var(--r-md);
}

/* ── Dlhší výklad ────────────────────────────────────────────────────────── */

.reading {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.reading__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.reading__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
    gap: 1.75rem;
}

.reading__sections {
    display: grid;
    gap: 1rem;
    grid-column: 1;
    grid-row: 1;
}

/* ── Jedna sekcia ────────────────────────────────────────────────────────── */

.section {
    padding: clamp(1.25rem, 3vw, 1.85rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--sticky-h) + 1rem);
}

.section__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.section__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--violet-soft);
    color: var(--violet);
}

.section--rose   .section__icon { background: var(--rose-soft);   color: var(--rose); }
.section--indigo .section__icon { background: var(--indigo-soft); color: var(--indigo); }
.section--amber  .section__icon { background: var(--amber-soft);  color: var(--amber); }
.section--green  .section__icon { background: var(--green-soft);  color: var(--green); }
.section--violet .section__icon { background: var(--violet-soft); color: var(--violet); }

.section__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

.section__toggle {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.15s ease, color 0.15s ease;
}

.section__toggle:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Rozbalené = šípka hore. Zbalené = šípka dole (základný stav ikony). */
.section__toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* Sekčný highlight — viditeľný vždy, aj keď je detail zbalený.
   Text je zámerne tmavý, nie v akcentovej farbe: rose a amber na svetlom
   podklade nedosiahnu 4,5:1. Farbu nesie linka vľavo a ikona sekcie. */
.section__highlight {
    margin: 1.1rem 0 0.9rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--violet);
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.5;
}

.section--rose   .section__highlight { border-left-color: var(--rose); }
.section--indigo .section__highlight { border-left-color: var(--indigo); }
.section--amber  .section__highlight { border-left-color: var(--amber); }
.section--green  .section__highlight { border-left-color: var(--green); }

.section__body {
    margin-top: 0.9rem;
}

.prose {
    max-width: 62ch;
    color: var(--ink-soft);
}

.prose p:first-child { margin-top: 0; }
.prose p:last-child  { margin-bottom: 0; }

/* Zbalený stav pridáva JavaScript. Bez neho je text celý. */
.section.is-collapsed .prose {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

/* Upozornenie pod výkladom sekcie. Tlmené zámerne — patrí k textu nad ním,
   nesúťaží s ním o pozornosť. */
.section__note {
    max-width: 62ch;
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Zbalená sekcia ukazuje dva riadky výkladu; upozornenie pod nimi by viselo
   bez textu, ku ktorému patrí. */
.section.is-collapsed .section__note {
    display: none;
}

/* ── Panel osobného radixu (značka [[cta:4]]) ────────────────────────────────
   Formulár na dátum, čas a miesto narodenia aj s plochou, na ktorej stojí.

   Tu a nie v inline štýle stránky /osobny-horoskop/: značka [[cta:4]] smie
   prísť aj do článku Astrozinu či denného horoskopu, a detail znamenia
   nenačítava ani blog.css, nieto štýl cudzej stránky.

   Plocha je tá istá ako pri paneli osobného horoskopu v detaile znamenia
   (.upsell) a pod článkom — pozvánka tak vyzerá ako pokračovanie tlačidla,
   ktoré na ňu poslalo, a nie ako cudzí prvok.

   Umiestnenie a sticky správanie sem nepatria: to je vec stránky, na ktorej
   panel stojí, a /osobny-horoskop/ si ich drží vo svojom inline štýle. */

.radix-panel {
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--brand-soft), var(--surface-soft));
    box-shadow: var(--shadow-md);
    /* Kvôli container query nižšie: polia sa majú riadiť šírkou panela, nie
       šírkou okna. Panel raz stojí v úzkom stĺpci vedľa textu, inokedy na celej
       šírke článku — o oboch prípadoch šírka okna nehovorí nič. */
    container-type: inline-size;
}

/* Odsadenie patrí telu, nie panelu: pás s hodinovým limitom je jeho HLAVIČKA
   a musí dosadnúť na hrany. Panel sám odsadený nie je. */
.radix-panel__body {
    padding: clamp(1.35rem, 3vw, 1.85rem);
}

/* Keď panel nesie hlavičku, telo pod ňou dýcha menej: oddelenie už spravila
   linka a plná výška odsadenia by za ňou nechala dieru. */
.radix-panel__quota + .radix-panel__body {
    padding-top: clamp(0.9rem, 2vw, 1.2rem);
}

/* Hodinový limit prehliadača (app.js: radixQuota). Nie je to blok vložený do
   panela, ale jeho ožltnutá hlavička — preto vlastné zaoblenie horných rohov
   namiesto 'overflow: hidden' na paneli: to by orezalo aj rozbaľovací zoznam
   miest (.hw-geo__list je v paneli pozicovaný absolútne).
   Spodná linka miesto rámčeka dokola — rámček by pás od panela odtrhol. */
.radix-panel__quota {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    /* Je to <p>: bez tohto by ho dedené odsadenie odstavca odtlačilo od horného
       okraja a nad pásom by presvital pruh panela. */
    margin: 0;
    padding: 0.8rem clamp(1.35rem, 3vw, 1.85rem);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 1px solid #e8c9a0;
    background: var(--warm-soft);
    color: #7a4a12;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Vyčerpaný limit: ten istý pás o stupeň naliehavejšie. Nie iná farba —
   červená by z hodinovej brzdy spravila poruchu, ktorou nie je. */
.radix-panel__quota--spent {
    border-bottom-color: #dcb083;
    background: #f6dcc0;
    color: #6d3f0d;
}

.radix-panel__quota svg {
    flex: none;
    transform: translateY(0.15em);
}

.radix-panel__quota strong {
    font-weight: 600;
}

.radix-panel__title {
    margin: 0.9rem 0 0.7rem;
    font-size: 1.5rem;
}

.radix-panel__claim {
    margin: 0 0 1.4rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Polia sú vizuálne kópiou .signup__input, ale s vlastným menom: trieda
   „signup“ na poli s dátumom narodenia by ďalšieho čitateľa poslala hľadať
   odber emailu. */

.radix-form {
    display: grid;
    gap: 1.25rem;
}

/* Predvolene pod sebou — natívny date/time picker potrebuje na úzkom paneli
   celú šírku. */
.radix-form__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Dátum a čas vedľa seba až tam, kde je na dva pickery miesto. Meria sa šírka
   panela, nie okna; kde container queries nie sú, polia ostanú pod sebou. */
@container (min-width: 30rem) {
    .radix-form__fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Mesto je najdlhšia hodnota z troch — dostane celý riadok pod dátumom
       a časom namiesto polovice šírky. */
    .radix-form__field--place {
        grid-column: 1 / -1;
    }

    /* Zarovnanie s inputom vedľa: label + jeho medzera. */
    .radix-form__hint--notime {
        padding-top: 1.9rem;
    }
}

.radix-form__field {
    display: grid;
    gap: 0.35rem;
}

.radix-form__label {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.radix-form__input {
    width: 100%;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.radix-form__input::placeholder {
    color: var(--muted);
}

/* Prehliadač označí neplatné pole sám; farbu mu dáme tú istú, akou hlási chybu
   odber emailu (.is-invalid vyššie). :user-invalid a nie :invalid — inak by
   boli všetky tri polia červené hneď po načítaní, ešte než do nich niekto
   klikne. */
.radix-form__input:user-invalid {
    border-color: #b4462f;
}

.radix-form__hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Pole času má vlastný obal, aby ho app.js vedel skryť jedným prvkom (výklad
   bez známeho času). Rozostupy preberá po .radix-form__field, ktorým bol
   predtým sám. `display: grid` prebíja UA pravidlo pre [hidden], preto ho
   treba vrátiť ručne — inak by sa skryté pole aj tak vykreslilo. */
.radix-form__time {
    display: grid;
    gap: 0.35rem;
}

.radix-form__time[hidden] {
    display: none;
}

/* Veta na mieste chýbajúceho poľa. Nie je to nápoveda pod inputom, ale samotný
   obsah bunky mriežky, tak si berie jej výšku od vrchu. Odsadenie na výšku
   chýbajúceho labelu má zmysel len tam, kde je vedľa nej dátum (dvojstĺpcová
   mriežka nižšie) — pod sebou by to bola len diera. */
.radix-form__hint--notime {
    align-self: start;
}

.radix-form__note {
    margin: 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Súhlasy tesne nad tlačidlom — posledné, čo človek pred spustením prečíta.
   `gap` mriežky .radix-form (1.25rem) by ich od tlačidla odtrhol, tak si držia
   vlastný, tesnejší rozostup. */
.radix-form__consent {
    display: grid;
    gap: 0.15rem;
    margin-bottom: -0.35rem;
}

/* Celý riadok je klikací (je to <label>), takže sa aj správa ako ovládací
   prvok: podfarbí sa pri prejdení myšou a má vlastné odsadenie. */
.radix-form__consent-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
    padding: 0.45rem 0.55rem;
    margin-inline: -0.55rem;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 120ms ease;
}

@media (hover: hover) {
    .radix-form__consent-item:hover {
        background: rgba(255, 255, 255, 0.5);
    }
}

/* Vlastný štvorček, ale stále natívny <input>: appearance:none prekreslí
   vzhľad a nechá klávesnicu, natívnu validáciu aj hlášku prehliadača pri
   nezaškrtnutí. Div s ikonou by o všetky tri prišiel.
   Biela plocha s rámčekom je tá istá reč ako polia formulára vyššie. */
.radix-form__consent-item input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    /* na účiare prvého riadku, nie na jeho vrchole */
    transform: translateY(0.12em);
    border: 1px solid var(--line-strong);
    border-radius: 0.4rem;
    background: #fff;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.radix-form__consent-item input:checked {
    border-color: var(--brand);
    background-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 0.8rem;
    background-position: center;
    background-repeat: no-repeat;
}

@media (hover: hover) {
    .radix-form__consent-item input:hover {
        border-color: var(--brand);
    }
}

.radix-form__consent-item input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Nezaškrtnuté až potom, čo sa človek pokúsil odoslať — rovnaká farba aj
   rovnaké :user-invalid ako pri poliach vyššie, nie vlastný nápad. */
.radix-form__consent-item input:user-invalid {
    border-color: #b4462f;
}

.radix-form__consent-item a {
    color: var(--brand);
    /* Šípku drží pri poslednom slove nezlomiteľná medzera v šablóne; `nowrap`
       na celom odkaze by na úzkom mobile pretiekol z panela. */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Cez celú šírku panela: vedľa neho nič nestojí a zarovnané doľava by pôsobilo
   ako odkaz, nie ako záver formulára. */
.radix-form__submit {
    justify-self: stretch;
}


/* ── Napovedanie mesta (knižnica geonames) ───────────────────────────────────
   Knižnica dodáva len štruktúru a farby si pýta cez custom properties. Tu jej
   dávame tie isté, aké má zvyšok formulára — zoznam má vyzerať ako pokračovanie
   poľa, nie ako cudzí widget.

   Obal .hw-geo vloží knižnica okolo inputu a v mriežke .radix-form__field zaujme
   jeho miesto; medzeru pod ním preto drží samotná mriežka (gap), nie margin. */
.radix-panel .hw-geo,
.radix-form .hw-geo {
    --hw-geo-bg: #fff;
    --hw-geo-fg: var(--ink);
    --hw-geo-muted: var(--muted);
    --hw-geo-border: var(--line);
    --hw-geo-active: var(--brand-soft, #f1f3f8);
    --hw-geo-radius: var(--r-sm);
}

/* Aktívna položka (šípky aj myš) nesie brandovú farbu ako ostatné vybrané
   prvky webu — bez nej sa v zozname nedá klávesnicou zorientovať. */
.radix-form .hw-geo__option.is-active {
    color: var(--brand);
    font-weight: 600;
}

/* Hláška „také mesto nepoznáme" má vyzerať ako nápoveda poľa, nie ako chyba —
   mesto mimo číselníka je bežný stav písania, nie porucha. */
.radix-form .hw-geo__status {
    font-size: 0.82rem;
}

/* ── Vložený text (značka [[text:<id>]]) ─────────────────────────────────────
   Odpoveď na otázku, ktorá pri čítaní vzniká, ale nie je dôvod, prečo človek
   stránku otvoril: vidno z nej pár riadkov a zvyšok rozbalí šípka. Nie je to
   karta ani rám — je to text medzi textom, len skrátený. Vlasová linka nad ním
   ho oddelí od okolitého výkladu bez toho, aby z neho spravila blok.

   Tu a nie v blog.css: značka smie prísť aj v dennom horoskope a detail
   znamenia blog.css nenačítava.

   Markup kreslia makrá v _texts.html, zbalenie robí app.js.

   Šírku berie z okolia — v úzkom stĺpci výkladu vyplní 100 %, na širokej
   stránke sa zastaví skôr, než sa riadok stane nečitateľným. */
.insert {
    width: min(100%, 52rem);
    margin: 1.75rem 0;
    /* Linka zhora aj zdola: text medzi textom by inak mal jasný len začiatok
       a čitateľ by nevedel, kde blok končí a kde pokračuje stránka. Obzvlášť
       v zbalenom stave, kde text pod maskou dobledne — bez spodnej linky by
       vyzeral ako odsek, ktorý sa niekam stratil.
       Spodné odsadenie je rovnaké ako horné, nech blok stojí symetricky;
       posledný prvok tela si nuluje margin nižšie, takže sa nesčítajú. */
    padding: 1.1rem 0 2.2rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.insert__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

/* Nadpis je <span> (viď _texts.html), takže typografiu musí dostať celú
   odtiaľto — nezdedí nič po h2/h3. */
.insert__title {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.3;
}

/* Prepínač je tá istá trieda ako pri sekciách výkladu vyššie, takže sa nemôžu
   rozísť — mení sa len veľkosť a poloha na konci riadka. */
.insert__head .section__toggle {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
    width: 2.25rem;
    height: 2.25rem;
}

/* Bez JavaScriptu je text celý a prepínač by nemal čo prepínať — tlačidlo,
   ktoré nič nerobí, je horšie než žiadne. `.has-js` pridáva app.js na <html>
   hneď na začiatku. */
.has-js .insert__head .section__toggle {
    display: grid;
}

/* Zbalený stav pridáva JavaScript. Bez neho je text celý.

   Rovnaké orezanie a maska ako pri sekciách výkladu, len na viac riadkov: tam
   je nad zbaleným textom vždy viditeľný highlight, ktorý povie, o čo ide, tu
   tú úlohu musia zastať prvé riadky samotného textu. */
.insert--collapsible.is-collapsed .insert__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Typografia vnútri. Odseky, zoznam a odkazy tu musia byť aj tak, lebo
   .article__body (blog.css) sa na denný horoskop nedostane. */
.insert__body p {
    margin: 0 0 1.15rem;
}

.insert__body ul {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem;
}

.insert__body li {
    margin-bottom: 0.4rem;
}

.insert__body a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

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

/* Pripravené pre blok "Prečo tento výklad". Zapnúť až s ľudsky
   formulovanými faktormi — nie s aspektmi a domami. */
.why {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.88rem;
}

.why summary {
    cursor: pointer;
    font-weight: 650;
}

.why__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
}

.why__dir--supports    { color: var(--green); }
.why__dir--complicates { color: var(--amber); }
.why__dir--activates   { color: var(--violet); }

/* ── Panel osobného horoskopu ────────────────────────────────────────────── */

.upsell {
    grid-column: 2;
    grid-row: 1;
}

.upsell__inner {
    position: sticky;
    top: calc(var(--sticky-h) + 1rem);
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(170deg, var(--brand-soft), var(--surface-soft));
    box-shadow: var(--shadow-md);
}

.upsell__title {
    margin: 0 0 0.85rem;
    font-size: 1.5rem;
}

.upsell__claim {
    margin: 0 0 0.85rem;
    font-weight: 650;
}

.upsell__text {
    margin: 0 0 1.15rem;
    color: var(--ink-soft);
    font-size: 0.94rem;
}

.upsell__list {
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
    font-size: 0.94rem;
}

.upsell__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.3rem 0;
}

.upsell__list li::before {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--brand);
    content: "✓";
    font-weight: 700;
}

/* ── Odber emailu ────────────────────────────────────────────────────────── */

.signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem 2.5rem;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: var(--r-lg);
    background: var(--surface-soft);
}

.signup__text {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.signup__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
}

.signup__text h2 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
}

.signup__text p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

/* Odber na rozcestníku je zatiaľ vypnutý: formulár tam musí najprv dostať výber
   znamenia, inak niet na čo prihlásiť. Markup ostáva v šablóne a knižnica ho aj
   tak nechytá (nemá data-subscribers) — až pribudne výber, zmaže sa toto
   pravidlo. */
[data-page-type="home"] .signup {
    display: none;
}

.signup__form {
    display: grid;
    gap: 0.75rem;
}

/* Polia sú vlastná mriežka, nie priame bunky formulára: po prihlásení sa skryjú
   naraz jedným pravidlom a lišta sa tým zmení na poďakovanie. */
.signup__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.signup__input {
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.signup__input::placeholder {
    color: var(--muted);
}

.is-invalid .signup__input {
    border-color: #b4462f;
}

.signup__note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.is-invalid .signup__note {
    color: #b4462f;
}

/* Hláška knižnice 'subscribers'. Kým je prázdna, nesmie zaberať miesto — inak
   by bola pod formulárom diera. Viditeľná je len chyba; text úspechu má web
   vlastný, v .signup__thanks. */
.signup__status {
    margin: 0;
    color: #b4462f;
    font-size: 0.82rem;
}

.signup__status:empty {
    display: none;
}

.signup__thanks {
    display: none;
    gap: 0.6rem;
}

.signup__thanks p {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
}

/* Ikony sedia na prvom riadku textu, nie v strede odseku — poznámka o spame
   sa na mobile láme na dva aj tri riadky. */
.signup__thanks svg {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.signup__thanks-title {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.signup__thanks-title svg {
    color: var(--brand);
}

/* Vlastná plocha, nie ďalší riadok drobným písmom: je to jediná vec, ktorú má
   odberateľ po prihlásení spraviť. */
.signup__thanks-note {
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-sm);
    background: var(--warm-soft);
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.signup__thanks-note svg {
    color: var(--warm);
}

/* Uistenie o odhlásení. Nesie ho aj poznámka pod formulárom, ale tá sa po
   prihlásení skryje — a práve v tejto chvíli je tá istota najviac na mieste. */
.signup__thanks-optout {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Po úspešnom prihlásení sa lišta zmení na poďakovanie. Knižnica formulár sama
   neskrýva, iba označí stav — čo sa s ním stane, je vec webu. Hláška knižnice
   sa nezahodí, len oreže: nesie role="status", takže je to ona, čo čítačka
   obrazovky ohlási. */
.signup__form:has([data-subscribers-state="ok"]) .signup__fields,
.signup__form:has([data-subscribers-state="ok"]) .signup__note {
    display: none;
}

.signup__form:has([data-subscribers-state="ok"]) .signup__thanks {
    display: grid;
}

.signup__form:has([data-subscribers-state="ok"]) .signup__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Ako vzniká tento horoskop ───────────────────────────────────────────── */

/* Jeden riadok medzi výkladom a odberom emailu. Zámerne bez rámu a plochy:
   je to odpoveď na otázku, ktorú si položí len časť čitateľov, a nesmie
   súperiť s odberom pod ním. */
.origin {
    margin-block: 0 clamp(2rem, 5vw, 3rem);
    font-size: 0.92rem;
}

.origin a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    text-decoration: none;
}

.origin a:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* Iskra je dekoratívna. Vlastný font zámerne: v systémovom sans-serife ju
   časť Androidov nemá a nakreslila by prázdny štvorček. */
.origin__mark {
    color: var(--brand);
    font-family: var(--font-symbol);
    line-height: 1;
}

/* Šípka sa pri hoveri posunie o dva pixely — rovnaké gesto ako v hlavičke. */
.origin a svg {
    transition: transform 0.15s ease;
}

.origin a:hover svg {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .origin a svg {
        transition: none;
    }
}

/* ── Pätička ─────────────────────────────────────────────────────────────── */

.site-footer {
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding: 2rem 0 3rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.site-footer__copy {
    margin: 0;
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-footer__nav a {
    text-decoration: none;
}

.site-footer__nav a:hover {
    color: var(--ink);
}

/* ── Predely a tabuľky vo výklade ────────────────────────────────────────── */

.prose hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.prose th,
.prose td {
    padding: 0.6rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

/* ============================================================================
   Rozcestník. Bloky nižšie sa používajú iba na titulnej stránke; hlavička,
   hero, odber a pätička sú spoločné s detailom znamenia a definuje ich vyššie.
   ========================================================================== */

/* Titulok rozcestníka je trojriadkový, takže potrebuje menší stupeň
   než jednoslovné meno znamenia v detaile. */
.hero--home h1 {
    font-size: clamp(2.25rem, 5.4vw, 3.75rem);
    letter-spacing: -0.035em;
}

.hero__accent {
    color: var(--warm);
}

/* Štítok s časom aktualizácie. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 253, 249, 0.75);
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.hero--home .lead {
    max-width: 30ch;
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* ── Mriežka znamení ─────────────────────────────────────────────────────── */

.signs {
    padding: clamp(2rem, 5vw, 3.25rem) 0 0;
}

/* Nadpis vľavo, popisok vpravo a medzi nimi linka cez zvyšok šírky. */
.signs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
}

.signs__title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.signs__head::before {
    flex: 1 1 3rem;
    order: 1;
    height: 1px;
    background: var(--line);
    content: "";
}

.signs__eyebrow {
    order: 2;
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.sign-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sign-card {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    height: 100%;
    padding: 1.35rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sign-card:hover {
    border-color: var(--warm);
    background: linear-gradient(170deg, var(--warm-soft), var(--surface));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sign-card__glyph {
    margin-bottom: 0.35rem;
    color: var(--brand);
    font-family: var(--font-symbol);
    font-size: 1.9rem;
    font-variant-emoji: text;
    line-height: 1;
}

.sign-card__name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
}

.sign-card__range {
    color: var(--muted);
    font-size: 0.85rem;
}

/* Veta má stáť v strede stránky, nie vedľa iskry — preto je iskra nad ňou na
   vlastnom riadku a obe sú centrované. Inak by kratšia veta buď odplávala od
   iskry, alebo by celý blok visel mimo osi stránky. */
.signs__note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    text-align: center;
}

.signs__note svg {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--warm);
    /* Iskra dýcha v rovnakom tempe ako vety — jeden nádych na jedno tvrdenie. */
    animation: claim-breathe 6s ease-in-out infinite;
}

.signs__note strong {
    color: var(--ink);
    font-weight: 650;
}

/* Tri tvrdenia sa striedajú veta po vete — na mobile aj na desktope. Všetky tri
   ležia v tej istej bunke gridu, takže sa prekrývajú a výšku drží tá najdlhšia;
   blok teda pri striedaní neposkakuje. V DOM ostávajú všetky, takže čítačka
   prečíta celú trojicu bez ohľadu na to, ktorá je práve viditeľná. Striedanie je
   celé v CSS: bez JavaScriptu funguje rovnako a pri prefers-reduced-motion sa
   zastaví a ukáže všetky tri pod sebou. */
.claims {
    display: grid;
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}

/* Georgia nemá tenký rez — má len obyčajný a tučný — takže tenučké písmo musí
   prísť z bezpätkovej rodiny, kde váha 100 existuje. Farba je plná: jemnosť robí
   ťah písma, nie priesvitnosť, takže veta v strede cyklu naozaj stojí. */
.claims__item {
    grid-area: 1 / 1;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1rem + 1.25vw, 2rem);
    font-weight: 100;
    letter-spacing: 0.01em;
    line-height: 1.4;
    opacity: 0;
    animation: claim-cycle 18s ease-in-out infinite;
    will-change: opacity;
}

/* Zvýraznené slovo sa nesmie z tenkej vety vylomiť tučným rezom — stačí o stupeň
   vyššia váha a plná farba textu. */
.claims__item strong {
    color: var(--ink);
    font-weight: 300;
}

.claims__item:nth-child(2) {
    animation-delay: 6s;
}

.claims__item:nth-child(3) {
    animation-delay: 12s;
}

/* ── Tri prísľuby ────────────────────────────────────────────────────────── */

.promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.promise {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
}

/* Oddeľovač medzi prísľubmi; prvý ho nemá, inak by lemoval blok zvnútra. */
.promise + .promise {
    border-left: 1px solid var(--line);
}

.promise__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.promise__title {
    margin: 0 0 0.2rem;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: 0;
}

.promise__text {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Osobný horoskop ─────────────────────────────────────────────────────── */

.pitch {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2.75rem);
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--brand-soft), var(--surface-soft));
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.pitch__title {
    margin: 1rem 0 0.85rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.pitch__claim {
    margin: 0 0 1.5rem;
    color: var(--ink-soft);
    font-size: 0.98rem;
}

.pitch__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pitch-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Placeholder má vlastné zaoblenie z .ph — tu ho ruší, aby lícoval s kartou. */
.pitch-card__media {
    aspect-ratio: 16 / 11;
    border-width: 0 0 1px;
    border-radius: 0;
}

/* Karta s článkom: náhľad drží rovnaký rozmer ako placeholder vedľa neho,
   takže mriežka nezávisí od toho, koľko článkov už vyšlo. */
.pitch-card__media--photo,
.pitch-card__media--empty {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--line);
}

.pitch-card__media--photo {
    object-fit: cover;
}

/* Článok bez náhľadu nedostane prázdne miesto ani vymyslený obrázok, ale
   plochu vo farbách webu — rovnako ako v mriežke Astrozinu. */
.pitch-card__media--empty {
    background: linear-gradient(150deg, var(--brand-soft), var(--surface-soft));
}

/* Karta článku je odkazom celá, nielen riadkom "Čítať článok". */
.pitch-card__link {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.pitch-card__link:hover .pitch-card__more {
    text-decoration: underline;
}

/* Neaktívny výklad v páse — tá istá logika ako .p-row--soon v katalógu: stlmený, bez
   hoveru, neklikateľný. Do náhodného výberu sa nedostane, v páse sa objaví iba
   vtedy, keď si ho značka vypýta menom ([[cta:6:zivy-chat]]). */
.pitch-card--soon { opacity: 0.55; }
.pitch-card--soon .pitch-card__link { cursor: default; pointer-events: none; }
.pitch-card--soon .pitch-card__title { color: var(--muted); }
.pitch-card__soon { font-size: 0.78rem; line-height: 1.4; color: var(--muted); }

/* Limit za hodinu na karte (app.js: hubQuota). */
.pitch-card__quota { font-size: 0.78rem; line-height: 1.4; color: var(--amber); }
.pitch-card__quota[hidden] { display: none; }

.pitch-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.9rem 1rem 1rem;
}

.pitch-card__title {
    margin: 0 0 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0;
}

.pitch-card__text {
    margin: 0 0 0.85rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.pitch-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.pitch-card__more:hover {
    text-decoration: underline;
}

/* Odkaz na celý Astrozin — pod trojicou článkov tu aj pod mriežkou "Ďalšie
   články" v detaile blogu (astrozin-detail.html, blog.css sem naň neťahá
   vlastné pravidlo, aby sa nemusel duplikovať). Rovnaký vizuál ako "Zistiť
   viac" vyššie, len mimo karty: jednoduchý text so šípkou, trochu odsadený
   od toho, čo je nad ním. */
.zine-more {
    margin: 1.5rem 0 0;
    text-align: right;
}

.zine-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--brand);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.zine-more a:hover {
    text-decoration: underline;
}

/* ── Responzivita ────────────────────────────────────────────────────────── */

@media (max-width: 64rem) {
    .reading__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Text nad kartami — vedľa troch kariet by mu ostal príliš úzky stĺpec. */
    .pitch {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Panel padá pod výklad — v DOM je až za sekciami,
       takže sa nikdy neukáže pred bezplatným obsahom. */
    .upsell {
        grid-column: 1;
        grid-row: auto;
    }

    .upsell__inner {
        position: static;
    }
}

@media (max-width: 52rem) {
    /* Na úzkych šírkach nemá text kam ustúpiť do strany, takže sa gradient
       otočí na zvislý — dole krycí, hore priehľadný na fotku. Rovnaké stopy
       ako predtým, len zrkadlovo (0deg namiesto 180deg): rovnaká intenzita,
       opačný smer. */
    .hero {
        --hero-overlay: linear-gradient(
            0deg,
            var(--bg) 0%,
            rgba(246, 241, 234, 0.93) 15%,
            rgba(246, 241, 234, 0.62) 40%,
            rgba(246, 241, 234, 0.25) 80%
        );
        /* Na tejto šírke vidno z fotky len úzky zvislý pruh. Zo stredu by to bola
           samá obloha, preto sa výrez posunie k postave vpravo. */
        background-position: 78% top;
    }

    /* Čím užšia obrazovka, tým vyšší pás — z fotky tu ostáva zvislý pruh a text
       pod ním zaberá tým väčšiu časť, čím menej sa ho zmestí do riadku. Bez
       tohto prírastku by najvyšší obsah (detail znamenia s medailónom a
       tlačidlom) vytlačil fotku úplne a z pásu by ostal farebný podklad. */
    .hero {
        --hero-h: max(31rem, 34rem - 8vw);
    }

    .hero__text {
        max-width: none;
    }

    /* Hlavička na mobile ostáva jednoriadková: značka — Astrozin — CTA.
       Navigácia má jedinú položku, takže sa vojde bez prepínača menu. Všetky
       tri časti sú tu o stupeň menšie, aby sa do riadka zmestil celý názov
       webu — na mobile je jedinou vecou, ktorá hovorí, kde návštevník je. */
    .site-header__inner {
        gap: 0.6rem;
    }

    .brand {
        margin-right: auto;
    }

    .brand__mark {
        width: 28px;
        height: 28px;
    }

    .brand__name {
        font-size: 0.95rem;
    }

    .main-nav a {
        font-size: 0.85rem;
    }

    /* Musí sa zmestiť do jedného riadku vedľa značky a navigácie,
       inak hlavička prerastie 64 px z kapitoly B1 zadania. */
    .site-header__actions .btn {
        min-height: 2.25rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .signup {
        grid-template-columns: minmax(0, 1fr);
    }

    .sign-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Prísľuby pod sebou — vedľa seba by z nich ostali dvojslovné stĺpce.
       Oddeľovač sa preto otočí zvisle na vodorovný. */
    .promises {
        grid-template-columns: minmax(0, 1fr);
    }

    .promise {
        padding: 0.9rem 0;
    }

    .promise + .promise {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

/* Na telefónoch sa názov webu nestráca — iba sa zmenší spolu so značkou a
   navigáciou, aby hlavička ostala jednoriadková. Hranica je 26rem a nie šírka
   konkrétneho telefónu: práve tam prestane celý názov vychádzať s väčšími
   stupňami vyššie. Keby ani zmenšenie nestačilo (pod ~320 px), ubudne z názvu
   cez ellipsis; hlavička sa nikdy nezalomí do druhého riadku, lebo od jej
   výšky závisí prilepená lišta dní. */
@media (max-width: 26rem) {
    .site-header__inner {
        gap: 0.4rem;
    }

    .brand {
        gap: 0.4rem;
    }

    .brand__mark {
        width: 24px;
        height: 24px;
    }

    .brand__name {
        font-size: 0.8rem;
    }

    .main-nav a {
        gap: 0.25rem;
        font-size: 0.78rem;
    }

    /* Odkaz sa nesmie lepiť na tlačidlo — vedľa seba by čítali ako jeden prvok.
       Medzeru platí o stupeň menší názov webu a tlačidlo, nie ellipsis: celý
       názov aj celé „Osobný horoskop“ ostávajú na tejto šírke čitateľné. */
    .main-nav {
        margin-right: 0.6rem;
    }

    .site-header__actions .btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* Šípka pri odkaze na Astrozin mizne až pod 360 px. Nad touto hranicou sa do
   jednoriadkovej hlavičky zmestí bez toho, aby ukrojila z názvu webu; pod ňou si
   tých 18 px pýta názov, lebo on nesie informáciu, kde návštevník je — šípka je
   len dekorácia. Hranica je preto 22.4rem a nie šírka konkrétneho telefónu:
   práve tam začne názov mizieť do ellipsis. */
@media (max-width: 22.4rem) {
    .main-nav__chevron {
        display: none;
    }
}

/* Posledný stupeň pre 360 px a užšie telefóny — pätnásť pixelov, ktoré delia
   celý názov webu od orezaného. */
@media (max-width: 23.5rem) {
    .site-header__inner {
        gap: 0.35rem;
    }

    .brand {
        gap: 0.35rem;
    }

    .brand__name {
        font-size: 0.78rem;
    }

    .main-nav a {
        font-size: 0.72rem;
    }

    .main-nav {
        margin-right: 0.45rem;
    }

    .site-header__actions .btn {
        padding: 0.35rem 0.4rem;
        font-size: 0.63rem;
    }
}

@media (max-width: 40rem) {
    :root {
        --gutter: 1rem;
    }

    .ad__slot {
        min-height: 280px;
    }

    .hero__id {
        gap: 0.9rem;
    }

    /* Prilepená lišta dní musí ostať jednoriadková — jej výška je v --daybar-h
       a od nej závisí, kam dosadnú kotvy. Dátum preto na mobile ustúpi
       pilulkám: o pár riadkov nižšie ho nesie meta riadok v hero. Keby sa
       štyri dni predsa nezmestili, roluje sa vnútri lišty, nie stránka. */
    .daybar__date {
        display: none;
    }

    .daybar__inner {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .day-nav {
        min-width: 0;
    }

    .day-nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .day-nav ul::-webkit-scrollbar {
        display: none;
    }

    .lead {
        max-width: none;
    }

    .signup__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .sign-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pitch__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Na úzkej obrazovke drží striedajúca sa veta celú šírku. */
    .claims {
        flex: 1 1 auto;
        width: 100%;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Šesť sekúnd na tvrdenie, 18 s na celé kolo: nádych 1,8 s do plnej sýtosti,
   podržanie 2,6 s, výdych 1,6 s. Veta sa iba prelína, žiadny posun. */
@keyframes claim-cycle {
    0%          { opacity: 0; }
    10%         { opacity: 1; }
    24.4%       { opacity: 1; }
    33.34%      { opacity: 0; }
    100%        { opacity: 0; }
}

/* Iskra dýcha v tom istom rytme — nádych, podržanie, výdych. */
@keyframes claim-breathe {
    0%, 100%    { opacity: 0.4; }
    30%, 70%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.01ms !important;
    }

    /* Striedanie tvrdení sa zastaví a všetky tri ostanú pod sebou — obsah je
       tak celý vidieť aj bez pohybu. `grid-area: auto` ich musí rozobrať z
       jednej bunky, inak by sa po zapnutí viditeľnosti prekryli. */
    .claims__item {
        grid-area: auto;
        opacity: 1;
        animation: none !important;
    }

    .signs__note svg {
        opacity: 0.8;
        animation: none !important;
    }
}

/* ── Pozvánka v texte ([[cta:N]] → _cta.html) ─────────────────────────────
   Prerušuje čítanie, tak vyzerá inak než text okolo: vlastná plocha, farebný
   pruh vľavo a tlačidlo. Zároveň nesmie pôsobiť ako reklamný banner, preto
   drží tie isté tokeny ako zvyšok webu.

   Šírku berie z rodiča, nie z .prose (62ch) — pozvánka je predel v texte,
   nie ďalší odstavec, a v úzkom stĺpci by tlačidlo zlomilo riadok.

   Akcent kreslí inset box-shadow a nie border-left: pruh tak sleduje zaoblenie
   karty namiesto toho, aby z neho v rohu vytŕčal. */
.cta {
    max-width: min(100%, 46rem);
    margin: clamp(2rem, 5vw, 3rem) 0;
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.25rem)
             clamp(1.5rem, 4vw, 2rem);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--brand-soft), var(--surface-soft));
    /* box-shadow: inset 4px 0 0 var(--brand), var(--shadow-md); */
    color: var(--ink);
}

/*
  Vnútro pozvánky je zapísané ako `.cta p.…` / `.cta ul.…` (0-2-1), nie
  `.cta__…` (0-1-0). Dôvod je ten istý ako pri tlačidle nižšie: blog.css sa
  načíta za styles.css a jeho `.article__body p { margin: 0 0 1.15rem }`,
  `.article__body ul { padding-left: 1.35rem }` a `.article__body li` (všetko
  0-2-0) by inak prebili odsadenia pozvánky — v článku by sa poznámka nalepila
  na tlačidlo a odrážky by sa rozliezli, kým v detaile znamenia (kde blog.css
  nie je) by tá istá karta vyzerala správne.

  Prepisovať to v blog.css výnimkou pre `.cta` nejde: pozvánka stojí aj na
  stránkach, ktoré blog.css nenačítajú.
*/
.cta p.cta__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.cta .cta__icon {
    display: inline-flex;
    color: var(--brand);
}

.cta p.cta__title {
    margin: 0 0 0.75rem;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.8vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

/* Text pozvánky nesmie byť plná šírka karty: dlhý riadok sa číta horšie než
   odstavec článku nad ním, ktorý drží .prose na 62ch. */
.cta p.cta__text {
    max-width: 54ch;
    margin: 0 0 1.25rem;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}

/* Odrážky sú dôvody, nie zoznam vlastností — preto bez bodiek.
   Odškrtnutie kreslí ::before, aby v HTML nebolo dekoratívne SVG navyše. */
.cta ul.cta__list {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* `margin: 0` je tu nutné, nie kozmetické: rozostup drží `gap` na zozname
   a `.article__body li { margin-bottom: 0.4rem }` by sa k nemu pripočítal. */
.cta ul.cta__list li {
    position: relative;
    margin: 0;
    padding-left: 1.75rem;
}

.cta ul.cta__list li::before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0.2rem;
    width: 0.7rem;
    height: 0.38rem;
    border: 2px solid var(--brand);
    border-width: 0 0 2px 2px;
    border-radius: 1px;
    transform: rotate(-45deg);
}

/*
  Tlačidlo v tele článku.

  Selektor je `.cta a.btn` (0-2-1), nie `.cta__btn` (0-1-0): blog.css sa načíta
  za styles.css a jeho `.article__body a` (0-2-0) inak prebije `.btn--primary`,
  takže by tlačidlo dostalo fialový podčiarknutý text na tmavej ploche. Farba
  aj podčiarknutie sa preto vracajú tu, nie v blog.css — pozvánka stojí aj
  v detaile znamenia, kde blog.css vôbec nie je.
*/
.cta a.btn {
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.cta a.btn:hover,
.cta a.btn:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Šípka sa pri hoveri posunie — rovnaké gesto ako v hlavičke a v odkaze
   "Ako vzniká tento horoskop". */
.cta a.btn svg {
    transition: transform 0.15s ease;
}

.cta a.btn:hover svg {
    transform: translateX(2px);
}

/* Sľub pod tlačidlom: dôvera je celá pointa tejto ponuky, tak stojí tam, kde
   sa návštevník rozhoduje kliknúť. Nie je to pätička karty, preto je odsadený
   od tlačidla viac než riadky medzi sebou. */
.cta p.cta__note {
    max-width: 54ch;
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Na úzkom mobile je tlačidlo cez celú šírku — inak ostane osamotené v rohu
   a palec ho hľadá. */
@media (max-width: 30rem) {
    .cta a.btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta a.btn:hover,
    .cta a.btn:focus-visible {
        transform: none;
    }

    .cta a.btn svg,
    .cta a.btn:hover svg {
        transition: none;
        transform: none;
    }
}

/* ── Platený výklad (knižnica paywall) ───────────────────────────────────── */

/* Ponuka plateného kroku pod hotovým výkladom na /osobny-horoskop/<kód>.
   Rovnaká reč ako panel s formulárom (.radix-panel): gradient, zaoblenie,
   tieň — je to ďalší krok tej istej cesty, nie cudzí reklamný blok. */
.upsell {
    margin-block: 1.5rem;
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--brand-soft), var(--surface-soft));
    box-shadow: var(--shadow-md);
}

.upsell[hidden] { display: none; }

.upsell__title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.upsell__text {
    margin: 0 0 1.2rem;
    max-width: 52ch;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

.upsell__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

/* Cena stojí pri tlačidle ako jeho súčasť, nie ako ďalší odsek textu. */
.upsell__price {
    font-weight: 700;
    color: var(--ink);
}

/* Hláška stavu (platba neprešla, výklad sa nedokončil) — ten istý tón ako
   štítok staršieho dňa a hodinový limit: upozornenie, nie porucha. */
.upsell__notice {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--warm);
    border-radius: var(--r-sm);
    background: var(--warm-soft);
    color: #7a4a12;
    font-size: 0.9rem;
    line-height: 1.45;
}

.upsell__notice[hidden] { display: none; }

/* Právny riadok: cena s DPH, predajca, platnosť tiketu, odkaz na podmienky.
   Drobné písmo, ale pri tlačidle — zákazník ho má vidieť PRED kliknutím. */
.upsell__legal {
    margin: 1rem 0 0;
    max-width: 60ch;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.upsell__legal a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Kým sa platený beh spúšťa, tlačidlo ostáva vidno, ale neklikateľné. */
.upsell [disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

@media (max-width: 30rem) {
    .upsell__actions .btn { width: 100%; }
}

/* Reklamačný formulár je .radix-form v .radix-panel — iba správa je
   viacriadková. Výška drží ~6 riadkov, ťahať sa dá len zvislo. */
.radix-form__input--textarea {
    min-height: 9rem;
    padding-block: 0.75rem;
    resize: vertical;
    line-height: 1.5;
}

/* Počítadlo znakov správy (app.js): rovnaký tón ako hint, vpravo pod poľom. */
.radix-form__count {
    margin: 0;
    text-align: right;
    color: var(--muted);
    font-size: 0.78rem;
}

/* ── Dobrovoľná podpora: výber sumy v CTA bloku ──────────────────────────── */

/* Celý blok je skrytý, kým app.js nenájde knižnicu paywall — bez nej by
   tlačidlo sľubovalo platobnú bránu a nikam neviedlo. Explicitné display
   prebíja UA pravidlo pre [hidden]. */
.cta--support[hidden],
.cta--support [hidden] { display: none; }

/* Poďakovanie po návrate z brány stojí presne tam, kde stálo tlačidlo. */
.cta__thanks {
    margin: 0.5rem 0 0;
    padding: 0.85rem 1.1rem;
    border-radius: var(--r-sm);
    background: var(--green-soft);
    color: var(--green);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Výber sumy — nie modal, len ďalší riadok bloku. Rozbalí sa po kliknutí na
   „Pozvať na kávu", takže kto sa nerozhodol, formulár pred sebou nemá. */
/* Suma je <button> s aria-pressed, nie rádio: nič sa neodosiela formulárom
   a „vybraté" je presne to, čo hovorí aria-pressed čítačke obrazovky. */

/* Znak meny je vnútri poľa: suma sa píše ako číslo, jednotku netreba písať. */
.support__status {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Prázdna hláška nesmie držať miesto — riadok by pod tlačidlom svietil vždy. */
.support__status:empty { display: none; }

/* Bez platnej sumy sa nedá pokračovať; tlačidlo to ukáže, nezmizne. */
.cta--support .btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

@media (max-width: 30rem) {
    .cta--support .btn { width: 100%; }
}

/* ── Výber výkladu (cta:5) — dlaždice pod formulárom radixu ─────────────── */

/* Skrytý, kým app.js nenájde knižnicu paywall; [hidden] musí vyhrať nad
   display z .cta. */
.cta--picker[hidden] { display: none; }

.upsell-pick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0 0;
}

/* Dlaždica = label s rádiom: klik kdekoľvek vyberie. Rádio je skryté, ale
   fokusovateľné — klávesnica prepína šípkami ako v každej rádiovej skupine. */
.upsell-pick__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 0.9rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upsell-pick__tile input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

.upsell-pick__tile:hover { border-color: var(--brand); }
.upsell-pick__tile:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.upsell-pick__tile.is-on {
    border: 2px solid var(--brand);
    background: var(--surface-soft);
    padding: calc(0.9rem - 1px) calc(0.9rem - 1px) calc(0.75rem - 1px);
}

.upsell-pick__name {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--brand-deep);
}

.upsell-pick__text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--muted);
    min-height: 3.5em;
}

.upsell-pick__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.upsell-pick__price--free { color: var(--green); }

/* značka výberu: prázdny krúžok, vybraný plný s fajkou */
.upsell-pick__mark {
    width: 1.25rem; height: 1.25rem;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    background: #fff;
}
.upsell-pick__tile.is-on .upsell-pick__mark {
    border-color: var(--brand);
    background: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
    background-size: 0.8rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ponuka, ktorá ešte nie je na predaj: vidno ju, vybrať sa nedá. Tlmená, bez
   krúžku, namiesto neho štítok, kedy alebo komu bude dostupná. */
.upsell-pick__tile.is-soon {
    cursor: default;
    border-style: dashed;
    background: transparent;
}
.upsell-pick__tile.is-soon:hover { border-color: var(--line-strong); }
.upsell-pick__tile.is-soon .upsell-pick__name,
.upsell-pick__tile.is-soon .upsell-pick__price { color: var(--muted); }

.upsell-pick__soon {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.upsell-pick__quota {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--amber);
}
.upsell-pick__quota[hidden] { display: none; }

.upsell-pick__legal { margin-top: 0.75rem; }
.upsell-pick__legal[hidden] { display: none; }

/* úzke zariadenie: dlaždice pod sebou, stránka roluje ako doteraz */
@media (max-width: 30rem) {
    .upsell-pick { grid-template-columns: minmax(0, 1fr); }
    .upsell-pick__text { min-height: 0; }
}


/* ── Podstránka výkladu (_produkt-base.html) ─────────────────────────────── */

.produkt {
    width: min(calc(100% - 2 * var(--gutter)), var(--max-width));
    margin-inline: auto;
    padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 3rem);
}
.produkt__crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }
.produkt__crumbs a { color: var(--brand); text-decoration: none; }
.produkt__crumbs a:hover { text-decoration: underline; }

.produkt__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}
@media (min-width: 64rem) {
    .produkt__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
    .produkt__layout .radix-panel { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.produkt__main h1 { margin-top: 0.35rem; }
.produkt__image {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover;
    border-radius: var(--r-md); margin: 0 0 1.25rem;
}
.produkt__soon {
    padding: 0.9rem 1.1rem;
    border-radius: var(--r-sm);
    background: var(--warm-soft);
    color: var(--ink-soft);
}

/* ── Dialóg výsledku platby ──────────────────────────────────────────────────

   Markup dodáva knižnica paywall z fragmentu templates/paywall/result.html.
   Všetko je zavesené na .paywall-modal--strelec, ktorú pridáva náš fragment:
   library/paywall/paywall.css sa v stránke načítava AŽ ZA týmto súborom, takže
   pravidlo na holej .paywall-modal by prehralo na rovnakej špecificite. Trieda
   navyše je lacnejšia než !important a nechá predvolený vzhľad knižnice žiť
   pre weby, ktoré si fragment neprebili. */

.paywall-modal--strelec {
    padding: var(--gutter);
    background: rgba(31, 27, 46, 0.45);
    /* Dialóg vyskakuje aj nad bežiacim výkladom, kde sa text sám dopisuje —
       jemný nábeh, aby to nepôsobilo ako chyba stránky. */
    animation: paywall-fade 0.18s ease-out;
}

.paywall-modal--strelec .paywall-modal__card {
    max-width: 27rem;
    padding: clamp(1.35rem, 4vw, 1.75rem);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1.5rem 3.5rem -1rem rgba(31, 27, 46, 0.35);
    animation: paywall-rise 0.18s ease-out;
}

.paywall-modal--strelec .paywall-modal__head {
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.paywall-modal--strelec .paywall-modal__icon {
    width: 2rem;
    height: 2rem;
}

.paywall-modal--strelec .paywall-modal__icon--ok   { background: var(--green-soft);  color: var(--green); }
.paywall-modal--strelec .paywall-modal__icon--warn { background: var(--warm-soft);   color: var(--amber); }
.paywall-modal--strelec .paywall-modal__icon--wait { background: var(--indigo-soft); color: var(--indigo); }

.paywall-modal--strelec .paywall-modal__title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}

.paywall-modal--strelec .paywall-modal__text {
    color: var(--ink-soft);
    line-height: 1.5;
}

.paywall-modal--strelec .paywall-modal__note {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--muted);
    opacity: 1;
}

/* Kód nákupu: jediná stopa po platbe, ktorú návštevník uvidí (remember: off),
   a zároveň to, čo od neho pýta reklamačný formulár. Preto rámček a nie ďalší
   sivý riadok — má sa dať prečítať a prepísať bez hľadania.
   `user-select: all` = jedno kliknutie označí celý kód aj s predponou; kratší
   výber (len kód) by si vyžiadal vlastné tlačidlo na kopírovanie, čo je pri
   sedemnástich znakoch zbytočná mechanika. */
.paywall-modal--strelec .paywall-modal__code {
    margin-top: 0.85rem;
    padding: 0.6rem 0.8rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--ink);
    word-break: break-all;
    user-select: all;
}

.paywall-modal--strelec .paywall-modal__hint {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
}

.paywall-modal--strelec .paywall-modal__hint a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.paywall-modal--strelec .paywall-modal__hint a:hover { text-decoration: underline; }

.paywall-modal--strelec .paywall-modal__actions {
    gap: 0.6rem;
    margin-top: 1.35rem;
}

/* Tlačidlá dialógu chodia z fragmentu s .btn, takže vzhľad drží stránkový
   komponent — ale prebiť sa musí CELÝ vzhľad, nielen rám. paywall.css cieli na
   `.paywall-modal__actions button` (trieda + element = 0,1,1), čo je viac než
   holé `.btn--primary` (0,1,0), a načítava sa až za týmto súborom: bez týchto
   pravidiel by primárne tlačidlo prišlo o pozadie aj farbu písma a splynulo by
   so zrušovacím. Preto sa tu opakuje aj to, čo .btn--primary už hovorí. */
.paywall-modal--strelec .paywall-modal__actions .btn {
    border-color: transparent;
    padding: 0.6rem 1.2rem;
    min-height: 2.6rem;
}

.paywall-modal--strelec .paywall-modal__actions .btn--primary {
    background: var(--brand-deep);
    color: #fff;
}

.paywall-modal--strelec .paywall-modal__actions .btn--primary:hover {
    background: #2c2752;
}

/* Špecificita musí dorovnať pravidlo nad ňou (.paywall-modal__actions .btn),
   inak by `border-color: transparent` zhaslo aj rám tohto tlačidla. */
.paywall-modal--strelec .paywall-modal__actions .btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink-soft);
}

.paywall-modal--strelec .paywall-modal__actions .btn--ghost:hover {
    background: var(--surface-soft);
    border-color: var(--ink-soft);
}

@keyframes paywall-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes paywall-rise {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .paywall-modal--strelec,
    .paywall-modal--strelec .paywall-modal__card { animation: none; }
}

/* ── Znížená cena na 0 € (register CTA: price '0 €' + was) ─────────────────

   Jedna vizuálna reč na troch miestach: karta v páse (pitch), dlaždica vo
   výbere a hlavička podstránky. Katalóg /osobny-horoskop/ má vlastnú cenovú
   gramatiku v product.css. Zľava má byť VIDIEŤ, nie kričať: prečiarknutá pôvodná
   cena a zelené „zadarmo" v jednom štítku. Zelená je farba bezplatného základu
   (.upsell-pick__price--free), takže 0 € číta návštevník rovnako ako „zadarmo"
   inde na webe — nie ako cudziu kampaň. */

/* štítok na obrázku karty: v rohu pásu, nezasahuje do textu */
.pitch-card__deal,
.upsell-pick__deal {
    position: absolute;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(31, 27, 46, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    color: var(--green);
    white-space: nowrap;
    pointer-events: none;
}
/* Odznak zľavy na dlaždici produktu. Karta musí byť pozičný rodič, inak by sa
   absolútne umiestnil voči stránke. */
.pitch-card__link { position: relative; }
.pitch-card__deal { top: 0.6rem; left: 0.6rem; }
.upsell-pick__deal { top: 0.6rem; right: 0.6rem; }

.upsell-pick__deal s,
.upsell-pick__price--free s,
.produkt__was {
    color: var(--muted);
    font-weight: 500;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--rose);
}
.upsell-pick__deal b { font-weight: 700; }

.upsell-pick__price--free s { margin-right: 0.15em; }

/* dlaždica vo výbere má štítok v pravom hornom rohu; meno sa mu uhne */
.upsell-pick__tile.is-gratis .upsell-pick__name { padding-right: 6.5rem; }

/* hlavička podstránky („0,99 € teraz zadarmo") */
.produkt__was { margin-right: 0.2em; }

/* štítok „nové" — ten istý tvar ako zľava, farba značky namiesto zelenej:
   novinka nie je úspora, je to pozvánka */
.upsell-pick__deal--new { color: var(--brand); }
.upsell-pick__tile.is-new .upsell-pick__name { padding-right: 3.5rem; }

/* ── Panel behu (knižnica dirigent) ────────────────────────────────────────
   Panel na tomto webe nie je záznam behu, ale scéna: hore koleso oblohy, dole
   trojriadkový pás a v ňom vždy jeden beat. Kroky sa striedajú prelínaním.

   Knižnica vie len jedno — pridávať riadky pod seba do [data-dirigent-status].
   Dve zóny z toho robí toto CSS: zoznam dostane pevnú výšku a každý riadok je
   absolútny prekryv cez celý priestor. Vďaka tomu koleso ostáva na scéne aj
   potom, čo jeho krok dohral — schováva sa mu len pás, nie celý riadok.

   Markup riadkov je v templates/dirigent/progress.html, réžia (kto je práve
   na scéne) v assets/app-dirigentpanel.js.

   !important nie je pohodlnosť: panel si rozmery píše inline, takže sa inak
   prebiť nedajú. Knižnica to tak sama robí pri mobilnom centrovaní. */
[data-dirigent-panel] {
    /* Mapa sa OTÁČA, takže o jej mieste nerozhoduje strana štvorca, ale
       opísaná kružnica — a tú ešte oreže `clip-path: circle(52%)`. Scéna je
       preto ŠTVORCOVÁ a rovnako široká ako panel: koleso má potom rovnaký
       vzduch zhora, zdola aj z bokov (320/2 − 0,52 × 260 ≈ 25 px) a text pod
       ním má svoje miesto.

       Predtým bola scéna obdĺžnik 320×260 a koleso ho vypĺňalo celé — rotujúci
       orez s polomerom ~152 px tak vyšiel 22 px pod scénu, teda rovno na prvý
       riadok pásu, a do strán až na hrany panela. */
    --beh-koleso: 260px;
    --beh-scena: 320px;
    --beh-stripe: 84px;
    width: 320px !important;
    padding: 0 !important;                 /* pás siaha na hrany panela */
    border-radius: 14px !important;
    overflow: hidden !important;           /* scéna sa oreže o zaoblené rohy */
}

/* Knižničné × je preč: zavrieť sa dá slovom v poslednom beate. Ostáva
   v DOM-e, lebo klik naň je jediný spôsob, ako zastaviť polling — prenáša
   naň klik app-dirigentpanel.js.

   `data-hw-x` je núdzový východ: keď sa koncový riadok nepodarí dotiahnuť,
   réžia si ho vypýta späť, nech panel nezostane bez cesty von. */
[data-dirigent-panel] > [data-dirigent-close] { display: none !important; }
[data-dirigent-panel][data-hw-x] > [data-dirigent-close] { display: block !important; }

/* Prázdny kontajner knižnice; bez skrytia by pridal 8 px pod pás. */
[data-dirigent-panel] [data-dirigent-actions] { display: none !important; }

[data-dirigent-panel] [data-dirigent-title] {
    margin: 0 !important;
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    color: #8a8a8a;
}

[data-dirigent-panel] [data-dirigent-status] {
    position: relative !important;
    flex: 0 0 auto !important;
    height: calc(var(--beh-scena) + var(--beh-stripe)) !important;
    overflow: hidden !important;
}

/* Riadky, ktoré si knižnica robí k hotovému obsahu (výstup kroku, výsledok
   behu). Nesú tú istú mapu druhý raz a celý text výkladu — do divadla
   nepatria. Réžia ich takisto preskakuje. */
[data-dirigent-panel] [data-dirigent-step^="output:"],
[data-dirigent-panel] [data-dirigent-step^="result:"] { display: none !important; }

.beh { position: absolute; inset: 0; }

/* Scén je toľko, koľko je riadkov, ale vidieť smie práve jednu: tú s najnovším
   kolesom. Réžia jej dá `data-hw-koleso` a predchádzajúcej ho vezme — inak by
   sa v hornej časti prekrývali dve mapy. */
.beh__scena {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--beh-scena);
    display: none;
}

.beh[data-hw-koleso] .beh__scena {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Do scény patrí len inline SVG. Ten istý krok posiela aj raster (PNG náhľad
   tej istej oblohy) a knižnica ho vloží ako <img> — dve mapy na sebe. */
.beh__scena img { display: none; }

.beh__scena svg {
    display: block;
    width: var(--beh-koleso);
    height: var(--beh-koleso);
}

/* Pás: tri riadky pevnej výšky, takže sa panel pri striedaní beatov nehýbe.
   Beat, ktorý má len dva riadky, nechá tretí prázdny. */
.beh__stripe {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--beh-stripe);
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    align-content: center;
    padding: 0 14px 8px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

/* Na scéne je práve jeden riadok; ostatné sú priehľadné, takže striedanie je
   prelínanie a nie preblik. Vyberá ho app-dirigentpanel.js. */
.beh[data-hw-teraz] .beh__stripe { opacity: 1; pointer-events: auto; }

.beh__krok {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

/* Bodky bežiaceho kroku kreslí knižnica. Pevná šírka preto, že text je
   centrovaný — rastúce bodky by ním inak myklo. */
.beh__bodky {
    display: inline-block;
    width: 1.1em;
    text-align: left;
}

.beh__detail {
    margin: 0;
    font-size: 12px;
    color: #777;
}

.beh__akcia {
    margin: 0;
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.beh__odkaz {
    color: var(--brand, #6b4ea8);
    text-decoration: underline;
}

.beh__zavriet {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}

.beh__odkaz:focus-visible,
.beh__zavriet:focus-visible { outline: 2px solid var(--brand, #6b4ea8); outline-offset: 2px; }

/* Mapa v paneli dýcha, kým beh beží: prvky pribúdajú po jednom, potom sa
   v opačnom poradí rozpadnú a skladajú znova (poradie a tempo drží
   app-dirigentpanel.js atribútom data-hw-draw), a celé koleso sa pritom otáča —
   jedna otáčka za 5 s. Po dokončení behu skript mapu zloží a otáčanie dovedie
   do vzpriamenej polohy. */
@keyframes beh-otacka {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes beh-prvok {
    0% { opacity: 0; transform: scale(.2); }
    55% { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes beh-prvok-prec {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(.2); }
}

/* Hotová mapa sa ohlási: celé koleso naskočí dvakrát za sebou. Škáluje sa
   obal, nie samotné SVG — tomu transform patrí otáčaniu. */
@keyframes beh-hotovo {
    0% { opacity: 0; transform: scale(.2); }
    55% { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

.beh__scena [data-hw-done] {
    animation: beh-hotovo .5s cubic-bezier(.34, 1.56, .64, 1) 2 both;
}

/* Glyfy planét: kresba prichádza z ACMS aj s vlastnými štýlmi vnútri SVG,
   web ich pre inline kresbu prebíja vyššou špecificitou. */
.beh__scena svg .zw-planet-glyph {
    fill: #111111;
    font-size: 60px;
    font-weight: 500;
    font-family: "Noto Sans Symbols", "DejaVu Sans", "Segoe UI Symbol", sans-serif;
}

/* Prvok s vlastným transform atribútom nesie v ňom svoje umiestnenie v kresbe
   — CSS transform by atribút prebil a prvok by odskočil inam. Také naskočia
   bez škálovania. */
@keyframes beh-prvok-plocho {
    from { opacity: 0; }
    to { opacity: 1; }
}

.beh__scena svg {
    animation: beh-otacka 5s linear infinite;
    transform-origin: 50% 50%;
    /* Koleso je kruh v štvorci — rohy sa orežú, aby pri otáčaní neprechádzali
       cez text panela. Polomer je väčší než polovica strany, takže samotná
       kresba sa nikde neodreže, mimo ostane len prázdny roh. Tých 2 % navyše
       (≈5 px) pohltí `--beh-okraj`, takže ani orezaný kruh nikam nezasiahne. */
    clip-path: circle(52%);
}

.beh__scena svg [data-hw-draw] { opacity: 0; }

.beh__scena svg [data-hw-draw="in"],
.beh__scena svg [data-hw-draw="out"] {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.beh__scena svg [data-hw-draw="in"] {
    animation: beh-prvok .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.beh__scena svg [data-hw-draw="out"] {
    animation: beh-prvok-prec .35s ease-in both;
}

.beh__scena svg [data-hw-draw="in"][transform] {
    animation: beh-prvok-plocho .3s ease-out both;
}

.beh__scena svg [data-hw-draw="out"][transform] {
    animation: beh-prvok-plocho .25s ease-in reverse both;
}

@media (prefers-reduced-motion: reduce) {
    .beh__stripe { transition: none; }
    .beh__scena [data-hw-done],
    .beh__scena svg,
    .beh__scena svg [data-hw-draw] {
        animation: none;
        opacity: 1;
    }
}

/* ── Pás pri návrate ─────────────────────────────────────────────────────
   Ponuka pre toho, kto si nedokončený výklad odložil do prehliadača. Je to
   pripomienka, nie výzva — preto pás a nie modál, a preto sedí pod hlavičkou
   namiesto toho, aby prekryl obsah, pre ktorý človek prišiel. Markup je
   v _chrome.html a je skrytý, kým app.js nezistí, že je naozaj čo ponúknuť. */
.navrat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    width: min(calc(100% - 2 * var(--gutter)), 60rem);
    margin: 1rem auto 0;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 12px;
    background: var(--surface, #fff);
}

/* Pás sám sa neskrýva: app.js ho vloží až vtedy, keď je čo ponúknuť, a pri
   zabudnutí ho odstráni. Guard `.navrat[hidden]` by tu bol mŕtvy kód.
   Vnútri neho sa ale skrýva — a tam autorské `display` prebíja UA pravidlo pre
   [hidden], rovnako ako pri .btn[hidden] a .upsell[hidden] vyššie. */
.navrat__text { margin: 0; font-size: .95rem; }
.navrat__poznamka { display: block; margin-top: .2rem; color: var(--ink-soft, #666); }
.navrat__poznamka[hidden] { display: none; }

.navrat__akcie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

/* Zabudnutie je úniková akcia, nie ponuka — vyzerá ako odkaz, nie ako tlačidlo. */
.navrat__zabudnut {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: .9rem;
    color: var(--ink-soft, #666);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.navrat__zabudnut:hover { color: var(--ink, #222); }

@media (max-width: 640px) {
    .navrat { flex-direction: column; align-items: flex-start; }
}