/* =====================================================================
   POHÁDKOVÝ VZHLED (storybook redesign 10/2026) - načítá se po brand.css
   Podle návrhu Ondřeje (scratch reference "kouzelné čtení"): tokeny, tlačítka,
   ilustrované ikony, sekce úvodní stránky, sdílené UI (dialogy, katalog,
   čtečka) a 3D dráček v2. Pořadí oddílů = pořadí kaskády.
   Zamčené barvy voleb (--grass/--sky/--tang/--cherry) se tu NEMĚNÍ.
   ===================================================================== */

/* ===================== 00-base ===================== */
/* =====================================================================
   00-BASE - základ pohádkového vzhledu (plan.md §2, §3 „Layout rule“)
   Tokeny dne + barevné rodiny --pal-*, noční doplňky (teplá noc zůstává),
   typografie, .eyebrow, sdílená tlačítka, sprite .art-icon, keyframes,
   focus, kontejner sekcí. Sekce samotné se stylují v dalších souborech.
   ZAMČENÉ: --grass / --sky / --tang / --cherry (barvy voleb, namluvené
   v audiu) a --on-candy #162147 se tu NEDEFINUJÍ.
   ===================================================================== */

/* ── Tokeny: den ─────────────────────────────────────────────────────── */
:root {
  /* Papír a inkoust */
  --paper:      #FFFDF7;   /* stránka, jak to funguje, patička */
  --paper-2:    #FFF8E8;
  --card:       #FFFFFF;
  --ink:        #253B47;   /* --on-candy zůstává #162147 (style.css) */
  --ink-2:      #3E5661;
  --ink-soft:   #697580;   /* 4.63:1 na papíru */
  --ink-faded:  #5F6B74;   /* šedé nápovědy, 5.4:1 na papíru */
  --ink-ghost:  #A9B4AE;   /* jen dekorace, nikdy text */
  --line:       #DFE5DF;
  --line-soft:  #EDF1EC;
  --line-strong:#CBD5C8;

  /* Akce: malinová ztmavená z #d64076 kvůli AA (bílá 4.95:1) */
  --action:      #CC3369;
  --action-2:    #9A2850;  /* tvrdý stín CTA */
  --action-soft: #FDE6ED;
  --action-text: #B73766;  /* zvýrazněná slova, 5.5:1 na papíru */
  --cta-bg:       #CC3369;
  --cta-bg-hover: #B8295C;
  --cta-ink:      #FFFFFF;
  /* Plán říká „none“, ale starší pravidla (sticky CTA, ceník, výzva…) skládají
     stín z var(--cta-glow) - takhle dostanou rovnou tvrdý stín z návrhu */
  --cta-glow:     0 5px 0 var(--action-2);

  /* Zlatá zvýraznění z návrhu */
  --highlight:      #F9D577;
  --highlight-soft: #FFE9A0;

  /* Focus: oranžová prošla na papíru (3.8), šalvěji (3.4) i navy (3.6) */
  --focus-ring:     #C46A12;
  --focus-ring-w:   3px;
  --focus-ring-gap: 4px;

  /* Chrom nálepek: jemný obrys a světlý tvrdý stín místo inkoustového */
  --outline:    1.5px solid var(--line-strong);
  --hard-color: #DCE4D6;
  --hard-xs: 0 2px 0 var(--hard-color);
  --hard-sm: 0 3px 0 var(--hard-color);
  --hard:    4px 6px 0 var(--hard-color);
  --hard-lg: 5px 8px 0 var(--hard-color);

  /* Rádiusy */
  --radius-md:      14px;
  --radius:         19px;
  --radius-lg:      25px;
  --radius-xl:      28px;
  --radius-organic: 20px 16px 22px 17px;   /* tlačítka „od ruky“ */

  /* Typografie: váha 1000 z návrhu = 900 (proměnné fonty končí na 900) */
  --w-heavy:    900;
  --fs-h2:      clamp(36px, 3.4vw, 46px);
  --ls-h2:      -1.2px;
  --fs-h3:      25px;
  --fs-eyebrow: 12px;
  --ls-eyebrow: 1.5px;

  /* Maskot v2: zelený hliněný dráček (šalvějová rodina) */
  --mascot:   #9DB989;
  --mascot-2: #7E9C6B;

  /* Hrací tvary v pozadí vypnuté - sekce mají vlastní ilustrace */
  --bg-shape-alpha: 0;

  /* Barevné rodiny (plán §2.1): -1 plocha, -edge obrys, -shadow tvrdý stín,
     -ink text (>= 4.5:1 na -1 i na bílé), -badge / -badge-ink štítek.
     Maskot: zelený = sage, fialový = lav, modrý = blue. */
  --pal-sage-1: #EEF3E5;  --pal-sage-edge: #BCCCAF;  --pal-sage-shadow: #CAD8BE;  --pal-sage-ink: #56755A;
  --pal-sage-badge: #F9E9B7;  --pal-sage-badge-ink: #675528;
  --pal-lav-1: #F1ECF8;   --pal-lav-edge: #C6B6D9;   --pal-lav-shadow: #D8CEE6;   --pal-lav-ink: #7A5A99;
  --pal-lav-badge: #E2D9FA;   --pal-lav-badge-ink: #51406E;
  --pal-apricot-1: #FFF1E4; --pal-apricot-edge: #D8C0A0; --pal-apricot-shadow: #E5D6BF; --pal-apricot-ink: #8D6038;
  --pal-apricot-badge: #FFDEC0; --pal-apricot-badge-ink: #774923;
  --pal-blue-1: #EAF4F9;  --pal-blue-edge: #AECDDD;  --pal-blue-shadow: #B5CCD9;  --pal-blue-ink: #314569;
  --pal-blue-badge: #D6E8F3;  --pal-blue-badge-ink: #314569;
  --pal-honey-1: #FBEFD6; --pal-honey-edge: #E8C66E; --pal-honey-shadow: #EED6C6; --pal-honey-ink: #635025;
  --pal-honey-badge: #F9D777; --pal-honey-badge-ink: #635025;   /* stuha ceníku */
  --pal-parents: #E3C56C;
  --pal-faq:     #F7F9F4;
  --pal-bedtime: #263850;   /* navy ve dne i v noci */

  /* Starší levandulová vrstva = nová rodina lav */
  --lav-1:   var(--pal-lav-1);
  --lav-2:   var(--pal-lav-shadow);
  --lav-ink: var(--pal-lav-ink);

  /* Vedlejší (obrysové) tlačítko */
  --ghost-edge:   #91AD9C;
  --ghost-ink:    #335C4C;
  --ghost-hover:  #E9F2E7;
  --ghost-shadow: #DCE6D8;

  /* Ilustrovaná pozadí sekcí (hero, rodiče): v noci ztmavit */
  --world-filter: none;

  /* Kontejner sekcí (plán §3 Layout rule) - šířka __inner, % ze sekce */
  --wrap: min(1200px, calc(100% - 96px));
}
@media (max-width: 1150px) { :root { --wrap: calc(100% - 64px); } }
@media (max-width: 850px)  { :root { --wrap: calc(100% - 42px); } }
@media (max-width: 480px)  { :root { --wrap: calc(100% - 36px); } }

/* ── Noc: teplá báze z brand.css zůstává (theme.js „žádná studená navy“),
      tady jen doplňky pro nové tokeny ─────────────────────────────── */
:root[data-theme="night"] {
  --line-strong:    #57526A;
  --action-soft:    color-mix(in oklab, #CC3369 24%, #1A1626);
  --action-text:    #F397B6;   /* 8.3:1 na papíru, 6.7:1 na kartě */
  --highlight-soft: color-mix(in oklab, #F9D577 22%, #1A1626);
  --bg-shape-alpha: 0;
  --world-filter:   brightness(.5) saturate(.9);

  --pal-sage-1: #252E2A;    --pal-sage-edge: color-mix(in oklab, #252E2A 80%, #fff);    --pal-sage-shadow: color-mix(in oklab, #252E2A 88%, #fff);    --pal-sage-ink: #B9D3A8;
  --pal-sage-badge: color-mix(in oklab, #F9E9B7 26%, #252E2A);  --pal-sage-badge-ink: #EBD9A6;
  --pal-lav-1: #2D2740;     --pal-lav-edge: color-mix(in oklab, #2D2740 80%, #fff);     --pal-lav-shadow: color-mix(in oklab, #2D2740 88%, #fff);     --pal-lav-ink: #D2BEF0;
  --pal-lav-badge: color-mix(in oklab, #E2D9FA 24%, #2D2740);   --pal-lav-badge-ink: #DCCFF7;
  --pal-apricot-1: #33291F; --pal-apricot-edge: color-mix(in oklab, #33291F 80%, #fff); --pal-apricot-shadow: color-mix(in oklab, #33291F 88%, #fff); --pal-apricot-ink: #E9C49C;
  --pal-apricot-badge: color-mix(in oklab, #FFDEC0 24%, #33291F); --pal-apricot-badge-ink: #F2D2B0;
  --pal-blue-1: #22293A;    --pal-blue-edge: color-mix(in oklab, #22293A 80%, #fff);    --pal-blue-shadow: color-mix(in oklab, #22293A 88%, #fff);    --pal-blue-ink: #B4D2EE;
  --pal-blue-badge: color-mix(in oklab, #D6E8F3 24%, #22293A);  --pal-blue-badge-ink: #C9DEF2;
  --pal-honey-1: #332B1C;   --pal-honey-edge: color-mix(in oklab, #332B1C 80%, #fff);   --pal-honey-shadow: color-mix(in oklab, #332B1C 88%, #fff);   --pal-honey-ink: #E8D29A;
  --pal-honey-badge: color-mix(in oklab, #F9D777 30%, #332B1C); --pal-honey-badge-ink: #F6E3AE;
  --pal-parents: #3A3222;
  --pal-faq:     #211F2C;

  --lav-1:   var(--pal-lav-1);
  --lav-2:   var(--pal-lav-shadow);
  --lav-ink: var(--pal-lav-ink);

  --ghost-edge:   var(--pal-sage-edge);
  --ghost-ink:    var(--pal-sage-ink);
  --ghost-hover:  var(--pal-sage-1);
  --ghost-shadow: var(--pal-sage-shadow);
}

/* ── Rám stránky ─────────────────────────────────────────────────────── */
body {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
#playful-bg { display: none; }   /* konfety (playful.js) jsou DOM, ne canvas - zůstávají */
#view-library { overflow-x: clip; }

/* Focus: stejný oranžový prstenec i na plochách, které ho dřív přepínaly na
   papírový (na světlém podkladu by zmizel). Noc si drží žlutý z brand.css. */
.cta-section, .site-footer, .pricing__card--featured { --focus-ring: #C46A12; }

/* Cíl programového fokusu (nadpis pohledu, sekce, <main>) - není to ovládací
   prvek, obrys by jen orámoval celou sekci (app.js focusQuietly) */
[data-focus-quiet]:focus { outline: none; }

/* „Přeskočit na obsah“: skrytý, dokud na něj nedojde Tab */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font: var(--w-heavy) 15px/1.4 var(--font);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--action-2);
  transform: translateY(calc(-100% - 20px));
}
.skip-link:focus-visible { transform: none; }

/* ── Typografie ──────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);   /* 800, v noci 700 (brand.css) */
  line-height: 1.07;
}
.section-title {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: 1.07;
  text-wrap: balance;
}
.eyebrow,
.section-kicker {
  font-family: var(--font);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-heavy);
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

/* ── Kontejner sekcí: sekce přes celou šířku s vlastním pozadím,
      jejich __inner je kontejner (bez záporných :before z návrhu) ──── */
.hero, .how, .bookshelf, .parents, .pricing, .faq, .site-footer { padding-inline: 0; }
.hero__inner,
.how__inner,
.bookshelf__inner,
.parents__inner,
.pricing__inner,
.faq__inner,
.cta-section__inner,
.site-footer__inner {
  width: var(--wrap);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}
/* Hlavička je v návrhu taky .wrap: tady jen šířka, vzhled pilulky je v 10-header */
.nav { margin-inline: 0; }
.nav__inner { width: var(--wrap); max-width: none; margin-inline: auto; box-sizing: border-box; }

/* ── Tlačítka ────────────────────────────────────────────────────────── */
/* Volby (.btn--choice) mají vlastní zamčený vzhled - sem nepatří */
.btn:where(:not(.btn--choice)) {
  border-radius: var(--radius-organic);
  font-weight: var(--w-heavy);
}
.btn--primary {
  background: var(--cta-bg);
  color: var(--cta-ink);
  border: 0;
  box-shadow: 0 5px 0 var(--action-2);
  transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint), background-color var(--dur-fast) var(--ease-out-quint);
}
.btn--primary:hover { background: var(--cta-bg-hover); color: var(--cta-ink); box-shadow: 0 5px 0 var(--action-2); transform: none; }
.btn--primary:active { box-shadow: 0 2px 0 var(--action-2); transform: none; }

.btn--ghost {
  background: var(--card);
  color: var(--ghost-ink);
  border: 1px solid var(--ghost-edge);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--ghost-shadow);
}
.btn--ghost:hover { background: var(--ghost-hover); color: var(--ghost-ink); box-shadow: 0 3px 0 var(--ghost-shadow); transform: none; }
.btn--ghost:active { box-shadow: 0 1px 0 var(--ghost-shadow); transform: none; }

.btn--sm    { font-size: 14px; padding: 13px 22px; min-height: 45px; }
.btn--large { font-size: 17px; padding: 16px 25px; min-height: 62px; }

/* Pohyb jen pro ty, kdo ho chtějí */
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover  { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--action-2); }
  .btn--primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--action-2); }
  .btn--ghost:hover    { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ghost-shadow); }
  .btn--ghost:active   { transform: translateY(2px); box-shadow: 0 1px 0 var(--ghost-shadow); }
}
/* Dotyk: po ťuknutí se nezasekne hover (style.css vrací --action a --hard-sm) */
@media (hover: none) {
  .btn--primary:hover:not(.btn--choice--picked) { background: var(--cta-bg); box-shadow: 0 5px 0 var(--action-2); transform: none; }
  .btn--ghost:hover:not(.btn--choice--picked)   { background: var(--card); box-shadow: 0 3px 0 var(--ghost-shadow); transform: none; }
}

/* ── Ilustrované ikony (sprite 3x2 z assets/storybook/icons.webp) ─────
   <span class="art-icon icon-book" style="--s:31px" aria-hidden="true"></span>
   Jen ilustrace (kroky, poznámky, ceník, noční přepínač…); funkční ovladače
   dál používají čárový sprite #i-*. */
.art-icon {
  --s: 60px;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  background: url("/assets/storybook/icons.webp") 0 0 / 300% 200% no-repeat;
  vertical-align: middle;
}
.art-icon.icon-book    { background-position: 0 0; }
.art-icon.icon-compass { background-position: 50% 0; }
.art-icon.icon-heart   { background-position: 100% 0; }
.art-icon.icon-moon    { background-position: 0 100%; }
.art-icon.icon-leaf    { background-position: 50% 100%; }
.art-icon.icon-star    { background-position: 100% 100%; }

/* ── Pohyb: keyframes existují jen bez reduced motion ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bookTurn {
    0%   { opacity: .45; transform: perspective(800px) rotateY(-8deg) translateX(7px); }
    100% { opacity: 1;   transform: perspective(800px) rotateY(0) translateX(0); }
  }
  @keyframes pageEnter {
    from { opacity: .2; transform: translateX(12px); }
    to   { opacity: 1;  transform: translateX(0); }
  }
  @keyframes twinkle {
    0%, 100% { opacity: .4; }
    50%      { opacity: 1; }
  }
}
/* Globální blok ve style.css zkracuje animace na 0.01 ms; nekonečné smyčky
   navíc úplně vypnout (i když je sekce přidá pod jiným jménem třídy) */
@media (prefers-reduced-motion: reduce) {
  .bedtime__stars { animation: none !important; }
}

/* ===================== 10-header ===================== */
/* =====================================================================
   10-HEADER - nav#main-nav jako bílá pilulka z návrhu (plán §3.1)
   Logo = hlava zeleného dráčka + dvouřádkové „hravý / příběh.“,
   odkazy s .anchor-link a podtržením, noční přepínač ([data-theme-toggle],
   theme.js) a výzva. Na rozdíl od návrhu zůstává přilepená (nese přihlášení).
   Lišta: logo | #nav-links (odkazy, přihlášení / uživatel) | .nav__actions
   (měsíc + výzva) | hamburger. Do 980 px je #nav-links rozbalovací karta
   pod pilulkou, měsíc a výzva zůstávají v liště (jako v návrhu na mobilu).
   ===================================================================== */

/* Rozměry pilulky - sdílené i pro kotvy (a pro hero, kdyby chtěl zajet pod ni) */
:root {
  --nav-h: 80px;            /* výška pilulky */
  --nav-mt: 17px;           /* odstup od horního okraje = přilepená poloha */
  --nav-space: calc(var(--nav-mt) + var(--nav-h));
}
@media (max-width: 850px) { :root { --nav-h: 72px; --nav-mt: 12px; } }
@media (max-width: 480px) { :root { --nav-h: 60px; --nav-mt: 10px; } }

/* Skok na kotvu končí kousek pod přilepenou pilulkou (dřív 6.25rem v brand.css) */
html { scroll-padding-top: calc(var(--nav-space) + 14px); }

/* ── Lišta ───────────────────────────────────────────────────────────── */
.nav {
  --nav-edge:   #E7E1D0;
  --nav-shadow: #DDD5C766;
  --nav-pad:    23px;
  top: var(--nav-mt);
  margin-top: var(--nav-mt);
}
:root[data-theme="night"] .nav {
  --nav-edge:   #4A4560;
  --nav-shadow: #0B091266;
}

.nav__inner {
  position: relative;           /* kotva rozbalovací karty (sklo ji drží i tak) */
  height: var(--nav-h);
  padding: 0 var(--nav-pad);
  gap: 25px;
  background: var(--glass);     /* den #FFFFFFF0, noc teplá rgba(45,40,60,.94) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--nav-edge);
  border-radius: 25px;
  box-shadow: 0 5px 0 var(--nav-shadow);
}
/* Po odscrollování (app.js .nav--solid) jen výraznější stín */
.nav--solid .nav__inner {
  box-shadow: 0 5px 0 var(--nav-shadow), 0 16px 34px -20px rgba(37, 59, 71, 0.42);
}
:root[data-theme="night"] .nav--solid .nav__inner {
  box-shadow: 0 5px 0 var(--nav-shadow), 0 16px 34px -18px rgba(0, 0, 0, 0.6);
}
/* Pruh nad přilepenou pilulkou: obsah by v něm prosvítal useknutý (kousky
   nadpisů nad lištou). Po odscrollování ho překryje papír, který k půlce
   pilulky vybledne. .nav je sticky se z-indexem = vlastní vrstva, takže
   ::before se z-indexem -1 kreslí pod .nav__inner, ne pod stránkou. */
.nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--nav-mt));
  height: calc(var(--nav-mt) + var(--nav-h) / 2);
  background: linear-gradient(var(--paper) 35%, transparent);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.nav--solid::before { opacity: 1; }

/* ── Logo: hlava dráčka + „hravý / příběh.“ ─────────────────────────── */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 14px;
}
.nav__logo-mark {
  height: 47px;
  width: auto;
  display: block;
  rotate: -6deg;
  transform-origin: 50% 85%;
  transition: rotate var(--dur-fast) var(--spring-pop);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav__logo:hover .nav__logo-mark { rotate: -14deg; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .nav__logo:hover .nav__logo-mark { rotate: -6deg; }
}
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 26px;
  line-height: 0.83;
  letter-spacing: -1px;
  color: var(--ink);
  white-space: nowrap;
}
.nav__logo-text > span { display: block; }
.nav__logo-dot { font-style: normal; color: var(--action); }
:root[data-theme="night"] .nav__logo-dot { color: var(--action-text); }

/* ── Odkazy (desktop) ───────────────────────────────────────────────── */
.nav__links {
  flex: 1 1 auto;
  min-width: 0;
  gap: 29px;
}
/* Odkazy uprostřed volného místa, přihlášení vpravo u výzvy */
.nav__links > .nav__link:first-child { margin-left: auto; }
.nav__links .nav__divider {
  margin: 0 -10px 0 auto;
  width: 1.5px;
  height: 24px;
  background: var(--line);
}
.nav__links .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--w-heavy);
  line-height: 1.7;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-quint);
}
.nav__links .nav__link:hover { background: none; }
@media (hover: hover) { .nav__links .nav__link:hover { color: var(--action-text); } }
/* Zlaté podtržení roste zleva doprava */
.nav__links .nav__link::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 4px;
  border-radius: 50%;
  background: #F2CC69;
  transition: right 0.2s var(--ease-out-quint);
}
@media (hover: hover) { .nav__links .nav__link:hover::after { right: 0; } }

/* ── Výzva (měsíc nočního režimu v liště od 2026-10-28 není) ─────────── */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.nav__actions .nav__cta {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Výzva „Začít zdarma“ je v přilepené liště na všech šířkách (i na telefonu,
   jako v návrhu), spodní pilulka #sticky-cta by ji jen zdvojovala. Prvek, ID
   i logika v app.js zůstávají; návrat = smazat toto pravidlo a v 80-footer.css
   vrátit rezervu pod patičkou. */
.sticky-cta { display: none; }

/* ── Hamburger (do 980 px) ──────────────────────────────────────────── */
.nav__hamburger {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--card);
  border: 1.5px solid var(--nav-edge);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--nav-edge);
}
.nav__hamburger:hover { transform: none; box-shadow: 0 3px 0 var(--nav-edge); }
.nav__hamburger.is-active { background: var(--pal-sage-1); }
@media (hover: hover) { .nav__hamburger:hover { background: var(--pal-sage-1); } }
.nav__hamburger span { left: 11.5px; right: 11.5px; height: 2.5px; background: var(--ink); }
.nav__hamburger span:nth-child(1) { top: 13.5px; }
.nav__hamburger span:nth-child(2) { top: 19.5px; }
.nav__hamburger span:nth-child(3) { top: 25.5px; }
.nav__hamburger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Uživatel (přihlášený) a jeho nabídka ───────────────────────────── */
.nav__user { margin-left: 0; }
.nav__user-btn {
  min-height: 44px;
  /* Opticky souměrně: vpravo 13 px + prázdno kolem šipky (3,5 px) = vlevo 16 px */
  padding: 4px 13px 4px 16px;
  gap: 6px;
  background: var(--card);
  border: 1.5px solid var(--nav-edge);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--nav-edge);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--w-heavy);
  color: var(--ink);
}
.nav__user-btn:hover { transform: none; box-shadow: 0 3px 0 var(--nav-edge); }
/* S načtenou fotkou účtu (is-loaded z app.js): kolečko těsně u okraje, soustředně s půlkruhem tlačítka */
.nav__user-btn:has(.nav__avatar.is-loaded) { padding-left: 5px; }
@media (hover: hover) { .nav__user-btn:hover { background: var(--pal-sage-1); } }
.nav__avatar { width: 32px; height: 32px; border: 1.5px solid var(--pal-sage-edge); }
.nav__dropdown {
  top: calc(100% + 14px);
  padding: 8px;
  background: var(--card);
  border: 1.5px solid var(--nav-edge);
  border-radius: 19px;
  box-shadow: 0 5px 0 var(--nav-shadow), 0 24px 48px -24px rgba(37, 59, 71, 0.4);
}
.nav__dropdown-item {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}
.nav__dropdown-item:hover { background: none; }
@media (hover: hover) { .nav__dropdown-item:hover { background: var(--pal-sage-1); } }
.nav__dropdown-icon { color: var(--pal-sage-ink); }
.nav__dropdown-divider { height: 1.5px; background: var(--line); }
.nav__dropdown-item--danger,
.nav__dropdown-item--danger .nav__dropdown-icon { color: var(--status-error); }
@media (hover: hover) { .nav__dropdown-item--danger:hover { background: var(--action-soft); color: var(--status-error); } }

/* ── Užší desktop ───────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .nav__links { gap: 19px; }
  .nav__links .nav__link { font-size: 13px; }
  .nav__actions { gap: 13px; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .nav__inner { gap: 18px; --nav-pad: 18px; }
  .nav__links { gap: 16px; }
  .nav__logo-text { font-size: 24px; }
  .nav__logo-mark { height: 43px; }
}

/* ── Telefon a tablet: rozbalovací karta pod pilulkou ───────────────── */
@media (max-width: 980px) {
  .nav__inner { gap: 12px; }
  .nav__actions { margin-left: auto; gap: 10px; }
  .nav__hamburger { display: inline-flex; }

  .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    max-height: calc(100vh - var(--nav-space) - 24px);
    max-height: calc(100dvh - var(--nav-space) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border: 1.5px solid var(--nav-edge);
    border-radius: 21px;
    box-shadow: 0 5px 0 var(--nav-shadow), 0 26px 50px -26px rgba(37, 59, 71, 0.45);
  }
  :root[data-theme="night"] .nav__links { box-shadow: 0 5px 0 var(--nav-shadow), 0 26px 50px -20px rgba(0, 0, 0, 0.65); }
  .nav__links > .nav__link:first-child { margin-left: 0; }
  .nav__links .nav__link {
    min-height: 48px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 16px;
  }
  .nav__links .nav__link:hover { color: var(--ink); }
  @media (hover: hover) { .nav__links .nav__link:hover { background: var(--pal-sage-1); } }
  .nav__links .nav__link:active { background: var(--pal-sage-1); }
  .nav__links .nav__link::after { display: none; }
  /* Čára mezi odkazy a účtem (brand.css ji pod 980 px schovává) */
  .nav__links .nav__divider { display: block; width: auto; height: 1.5px; margin: 6px 10px; }
  .nav__login { text-align: left; }
  /* Přihlášený: tlačítko se jménem a pod ním položky účtu (inline display:flex z app.js) */
  .nav__user { margin-left: 0; flex-direction: column; align-items: stretch; }
  .nav__user-btn { width: 100%; justify-content: flex-start; padding: 6px 14px; box-shadow: none; border-radius: 14px; }
  .nav__user-btn:has(.nav__avatar.is-loaded) { padding-left: 6px; }
  .nav__dropdown { position: static; padding: 4px 0 0; border: 0; box-shadow: none; background: transparent; }
  .nav__dropdown-item { min-height: 48px; padding: 10px 14px; font-size: 15px; }
}
/* Tablet: menu jako karta vpravo pod hamburgerem, ne přes celou šířku */
@media (min-width: 601px) and (max-width: 980px) {
  .nav__links { left: auto; width: min(100%, 340px); }
}
@media (max-width: 850px) {
  .nav { --nav-pad: 16px; }
  .nav__inner { border-radius: 21px; }
  .nav__links { border-radius: 19px; }
}
@media (max-width: 480px) {
  .nav { --nav-pad: 10px; }
  .nav__inner { gap: 8px; border-radius: 18px; }
  .nav__links { top: calc(100% + 8px); border-radius: 18px; }
  .nav__logo { gap: 4px; }
  .nav__logo-mark { height: 36px; }
  .nav__logo-text { font-size: 20px; }
  .nav__actions { gap: 8px; }
  .nav__actions .nav__cta.btn--sm { font-size: 13px; padding: 9px 12px; min-height: 44px; border-radius: 12px; }
}
@media (max-width: 374px) {
  .nav__logo-mark { height: 32px; }
  .nav__logo-text { font-size: 17px; letter-spacing: -0.6px; }
  .nav__actions .nav__cta.btn--sm { padding-inline: 10px; }
}
/* Nejužší telefony: jen hlava dráčka (název je na stránce hned pod lištou) */
@media (max-width: 339px) {
  .nav__logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Telefon na šířku (a jiná nízká okna): lišta by zabrala čtvrtinu výšky
   a rozbalovací menu by nemělo kam. Kotvy se posunou samy přes --nav-space. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --nav-h: 56px; --nav-mt: 6px; }
  .nav__logo-mark { height: 34px; }
  .nav__logo-text { font-size: 20px; }
  .nav__actions .nav__cta.btn--sm { min-height: 44px; padding-block: 8px; }
}

/* ===================== 20-hero ===================== */
/* =====================================================================
   20-HERO - úvod #uvod (plan.md §3.2)
   Alpská ilustrace přes celou šířku (podleze i pod plovoucí hlavičku),
   text pro rodiče vlevo, živá ukázka (js/hero-demo.js) jako „ukázková
   knížka“ vpravo. Na <= 850 px jeden sloupec: text / výzva / knížka.
   Volby v ukázce drží ZAMČENÉ barvy, tvary i pořadí (--choice-color ze
   style.css); z návrhu se bere jen chrom: rádius, tvrdý stín, náklon,
   dvě kolonky. Malinové CTA nikdy nestojí mezi volbami.
   ===================================================================== */

/* ── Rám sekce ───────────────────────────────────────────────────────── */
.hero {
  --hero-sky: #A4D4DA;
  /* O kolik ilustrace přesahuje nahoru pod lepkavou hlavičku (ta stojí
     nad hero v toku stránky). Víc, než je hlavička vysoká - přebytek
     skončí nad horním okrajem dokumentu. */
  --hero-bleed: 150px;
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  padding: 0 0 48px;
  gap: 0;
  background: var(--hero-sky);
}
:root[data-theme="night"] .hero { background: #1E2A30; }

.hero__world {
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(-1 * var(--hero-bleed));
  width: 100%;
  max-width: none;
  height: calc(100% + var(--hero-bleed));
  object-fit: cover;
  object-position: center bottom;
  background: var(--hero-sky);     /* než se obrázek načte, je tam aspoň nebe */
  filter: saturate(.9);
  pointer-events: none;
  user-select: none;
}
:root[data-theme="night"] .hero__world { filter: brightness(.48) saturate(.9); background: #1E2A30; }
/* Smyčka pozadí (js/hero-demo.js): stejné místo i ořez jako obrázek, ukáže se až když hraje.
   Pomalý náběh: Chrome a Safari na Macu video mírně zesvětlí (správa barev videa), tak ať to není cuk */
.hero__world--video { opacity: 0; background: transparent; transition: opacity 1.6s ease; }
:root[data-theme="night"] .hero__world--video { background: transparent; }
.hero__world--video.is-playing { opacity: 1; }

/* Teplý závoj zleva (pod textem) */
.hero::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--hero-bleed)) 0 0;
  background: linear-gradient(90deg, #FFE5B02B, transparent 65%);
  pointer-events: none;
}
:root[data-theme="night"] .hero::before { background: linear-gradient(90deg, #1A162666, transparent 65%); }

/* Rozmazaný krémový „oblak“ za textem - čitelnost nad ilustrací */
.hero__glow {
  position: absolute;
  z-index: -1;
  top: 25px;
  bottom: 75px;
  left: max(15px, calc(50% - 630px));
  width: min(635px, 50%);
  background: #FFF4E0D1;
  border-radius: 32%;
  filter: blur(36px);
  pointer-events: none;
}
:root[data-theme="night"] .hero__glow { background: color-mix(in srgb, var(--paper) 80%, transparent); }

/* ── Mřížka: text | knížka, pod textem výzva ───────────────────────── */
.hero .hero__inner--demo {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "intro book" "cta book";
  grid-template-rows: auto auto;
  column-gap: 53px;
  row-gap: 0;
  align-items: center;
  align-content: center;
  padding-block: 60px 24px;     /* návrh 53 px + místo pro dráčka nad knížkou */
  max-width: none;
  flex: none;
}
.hero__copy  { grid-area: intro; align-self: end; padding-bottom: 26px; }
.hero__book  { grid-area: book; position: relative; min-width: 0; }
.hero__after { grid-area: cta; align-self: start; margin: 0; padding-bottom: 50px; }

/* ── Text pro rodiče ─────────────────────────────────────────────────── */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 13px 6px 7px;
  font: var(--w-heavy) 12px/1.5 var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #745B21;
  background: #FFE9A0;
  border: 1px solid #EED585;
  border-radius: 30px;
  box-shadow: none;
  rotate: -3deg;
}
.hero__badge::before { content: none; }
.hero__badge .art-icon { --s: 23px; }
:root[data-theme="night"] .hero__badge { color: #F6E3AE; background: #3B3221; border-color: #6E5D33; }

.hero__title {
  font-size: clamp(43px, 5.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -2px;
  margin: 25px 0 18px;
  max-width: none;
  text-wrap: wrap;
  color: var(--ink);
  /* style.css ořezává nadpis na verzálky (text-box-trim): řádky by se slisovaly
     a zvýrazňovač by ležel na účaří místo pod řádkem jako v návrhu */
  text-box-trim: none;
}
.hero__title-line { display: block; white-space: nowrap; }
/* Šířka podle textu: zvýrazňovač jen pod slovy, ne přes celý sloupec (krátký řádek „a učí se.“) */
.hero__accent { position: relative; z-index: 0; width: fit-content; color: var(--action); }
/* Zvýrazňovač pod druhým řádkem (Ondřejův návrh) */
.hero__accent::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 7px;
  right: 17px;
  bottom: 0;
  height: 8px;
  border-radius: 50%;
  background: #F5D3AD;
  rotate: -2deg;
}
:root[data-theme="night"] .hero__accent { color: #F58BB1; }
:root[data-theme="night"] .hero__accent::after { background: #6A4350; }

.hero__subtitle {
  margin: 0;
  max-width: 400px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* Podnadpis pod h1 (Štěpán 2026-10-24): výraznější než odstavec, ale pořád pod nadpisem */
.hero__tagline {
  margin: 0 0 14px;
  max-width: 440px;
  font: 700 25px/1.32 var(--font-display);
  letter-spacing: -.3px;
  color: var(--ink);
  text-wrap: balance;
}
/* Stejné jemné usazení jako nadpis a odstavec (heroSettle v style.css) */
@media (prefers-reduced-motion: no-preference) {
  .hero__tagline { animation: heroSettle 0.6s var(--ease-out-quint) 0.02s both; }
}

.hero__invite {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 23px 0 0;
  font: italic 800 14px/1.4 var(--font);
  color: #5F4F2C;               /* 6.5:1 na obloze (návrhová #796744 měla 4.47) */
  rotate: -4deg;
}
.hero__invite .art-icon { --s: 40px; }
.hero__invite > i { font-style: normal; font-size: 30px; line-height: 1; color: #D2A949; }
:root[data-theme="night"] .hero__invite { color: #D9C9A6; }

/* ── Dvě tlačítka: výzva a „Všechny příběhy“ ──────────────────
   Ondřej 2026-10-26: výzva sjede na 3 příběhy zdarma, druhé tlačítko otevře Všechny příběhy a je stejně
   velké jako výzva. Mřížka má šířku širšího z nich a obě tlačítka ji vyplní. Lišta „Bez registrace / Bez
   reklam / Bez karty“ je pryč. */
.hero__actions { display: grid; width: fit-content; max-width: 100%; gap: 14px; margin: 0; }
.hero__actions > .btn { width: 100%; justify-content: center; }
.hero__cta.btn {
  gap: 10px;
  min-height: 62px;
  padding: 16px 25px;
  font-size: 17px;
  line-height: 1.3;
  background: var(--cta-bg);
  color: var(--cta-ink);
  border: 0;
  border-radius: var(--radius-organic);
  box-shadow: 0 5px 0 var(--action-2);
  rotate: -1deg;
}
.hero__cta .art-icon { --s: 31px; filter: drop-shadow(0 2px 2px #64261840); }
.hero__cta.btn:hover  { background: var(--cta-bg-hover); color: var(--cta-ink); box-shadow: 0 5px 0 var(--action-2); transform: none; }
.hero__cta.btn:active { box-shadow: 0 2px 0 var(--action-2); transform: none; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero__cta.btn:hover  { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--action-2); }
  .hero__cta.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--action-2); }
}

/* Druhé tlačítko: stejný tvar a velikost, krémové s tmavě zelenou (stojí na pestré ilustraci, kontrast 7:1) */
.hero__browse.btn {
  --browse-ink: #2E5A43;
  gap: 10px;
  min-height: 62px;
  padding: 14px 25px;
  font: var(--w-heavy) 17px/1.3 var(--font);
  color: var(--browse-ink);
  background: #FFFAF0;
  border: 2.5px solid var(--browse-ink);
  border-radius: var(--radius-organic);
  box-shadow: 0 5px 0 var(--browse-ink);
  text-decoration: none;
}
.hero__browse .art-icon { --s: 31px; }
.hero__browse.btn:hover  { background: #F1F7EC; color: var(--browse-ink); box-shadow: 0 5px 0 var(--browse-ink); transform: none; }
.hero__browse.btn:active { box-shadow: 0 2px 0 var(--browse-ink); transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero__browse.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--browse-ink); }
}
:root[data-theme="night"] .hero__browse.btn { --browse-ink: #9FD3A6; color: #DCEBD5; background: #2D283C; box-shadow: 0 5px 0 #5E8C67; }
:root[data-theme="night"] .hero__browse.btn:hover { background: #38324A; color: #DCEBD5; }

/* ── Ukázková knížka (#hero-demo) ───────────────────────────────────── */
.hero-demo {
  --book-paper: #FFFEF8;
  --book-ink: #365747;
  --book-label: var(--pal-sage-ink);
  position: relative;
  isolation: isolate;
  width: auto;
  margin: 0;
  padding: 15px;
  background: var(--book-paper);
  border: 2px solid var(--book-ink);
  border-radius: 24px 25px 25px 20px;
  box-shadow: 5px 7px 0 #DBE4C2, 8px 11px 0 var(--book-ink);
  rotate: 1.2deg;
}
/* Hřbet stránek: linka těsně za levým okrajem */
.hero-demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px 2px 12px -7px;
  border-left: 1px solid #C6CDBD;
  border-radius: 10px;
  pointer-events: none;
}
:root[data-theme="night"] .hero-demo {
  --book-paper: var(--card);
  --book-ink: #7E8C74;
  box-shadow: 5px 7px 0 #3B4437, 8px 11px 0 var(--book-ink);
}
:root[data-theme="night"] .hero-demo::before { border-left-color: #57526A; }

/* Dekorace kolem knížky */
.hero-demo__spark {
  position: absolute;
  z-index: 2;
  top: -20px;
  left: -28px;
  font-size: 44px;
  line-height: 1;
  color: #D78498;
  rotate: -10deg;
  pointer-events: none;
}
.hero-demo__whisper {
  position: absolute;
  z-index: 2;
  top: -22px;
  right: 82px;
  padding: 5px 14px;
  font: var(--w-heavy) 12px/1.4 var(--font);
  color: #796229;
  background: #FFE495;
  border: 1px dashed #C8A94E;
  border-radius: 9px;
  box-shadow: 0 3px 0 #E7C46B5C;
  rotate: 5deg;
  white-space: nowrap;
  pointer-events: none;
}
:root[data-theme="night"] .hero-demo__whisper { background: #E9CF7E; color: #4F3F14; box-shadow: none; }

/* Dráček (zelený) je mluvčí bublinky: sedí na horním rohu knížky */
.hero-demo__mascot {
  position: absolute;
  z-index: 3;
  top: -64px;
  right: -10px;
  bottom: auto;
  --mascot-size: 88px;
  pointer-events: none;
}
.hero-demo__mascot::before { content: none; }

/* Hlavička: štítek + název. Roh knížky zdobí dráček, pečeť z návrhu
   by se s ním a s bublinkou tlačila - zůstává v HTML, ale skrytá. */
.hero-demo__head {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 0;
  margin: 0;
  padding: 2px 5px 12px;
}
.hero-demo__heading { display: flex; flex-direction: column; min-width: 0; }
.hero-demo__tag {
  padding: 0;
  font: var(--w-heavy) 12px/1.4 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--book-label);
  background: none;
  border-radius: 0;
  white-space: nowrap;
}
.hero-demo__title {
  flex: none;
  margin: 3px 0 0;
  font: 800 25px/1.1 var(--font-display);
  letter-spacing: -.3px;
  color: var(--ink);
}
.hero-demo__seal {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF0C3;
  rotate: 9deg;
}
.hero-demo__seal .art-icon { --s: 34px; }
:root[data-theme="night"] .hero-demo__seal { background: #4A3F25; }

/* Scéna */
.hero-demo__body { display: block; }
.hero-demo__art {
  position: relative;
  height: 235px;
  aspect-ratio: auto;
  border-radius: 13px;
  background: #5C7F55;
  overflow: hidden;
}
.hero-demo__art img { object-position: center 43%; }
/* V noci ilustraci ztlumit jako ve čtečce (brand.css .reader__image-img) */
:root[data-theme="night"] .hero-demo__art img { filter: brightness(.85) saturate(.9) sepia(.12); }
.hero-demo__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 70px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 5px;
  font: var(--w-heavy) 12px/1.3 var(--font);
  color: #4A6640;
  background: #FFFFFFE6;
  border-radius: 30px;
  rotate: -2deg;
  pointer-events: none;
}
.hero-demo__caption .art-icon { --s: 26px; }
:root[data-theme="night"] .hero-demo__caption { color: #2F4A2A; background: #F3EFE4E6; }
.hero-demo__dots { position: absolute; right: 14px; bottom: 17px; display: flex; gap: 5px; pointer-events: none; }
.hero-demo__dots span { width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF99; transition: background var(--dur-fast); }
.hero-demo__dots span.is-on { background: #FCE193; }

/* Text a rozhodnutí */
.hero-demo__text { display: flex; flex-direction: column; padding: 16px 4px 0; container-type: inline-size; }
.hero-demo__hint {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font: var(--w-heavy) 12px/1.5 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--book-label);
}
.hero-demo__step { flex: none; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.hero-demo__p {
  margin: 6px 0 0;
  min-height: calc(2 * 1.3em);       /* krátká i delší scéna drží stejnou výšku knížky */
  font: 800 20px/1.3 var(--font-display);   /* stránka knížky: nadpisové písmo jako v návrhu */
  /* Písmo roste s šířkou stránky (~30 znaků na šířku písma): všechny scény
     ukázky pak mají právě dva řádky a knížka mezi kroky neposkakuje */
  font-size: clamp(17px, 3.35cqi, 21px);
  letter-spacing: -.3px;
  color: var(--ink);
  text-wrap: pretty;
}
.hero-demo__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

/* Nápověda pod volbami (jako patička stránky v návrhu) */
.hero-demo__foot { margin: 12px 0 0; text-align: right; font: italic 600 12px/1.4 var(--font); color: var(--ink-faded); }

/* Volby: zamčená barva z --choice-color, nový chrom */
.hero-demo .btn--choice {
  --choice-soft: color-mix(in oklab, var(--choice-color) 15%, var(--book-paper));
  --choice-edge: color-mix(in oklab, var(--choice-color) 52%, var(--book-paper));
  --choice-shade: color-mix(in oklab, var(--choice-color) 62%, #6E7F70);
  min-height: 63px;
  padding: 9px 12px 9px 10px;
  gap: 10px;
  font: var(--w-heavy) 15px/1.3 var(--font);
  color: var(--ink);
  background: var(--choice-soft);
  border: 1.5px solid var(--choice-edge);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--choice-shade);
  rotate: -1deg;
}
.hero-demo .btn--choice-1 { rotate: 1deg; }
.hero-demo .btn--choice__shape { width: 35px; height: 35px; border-width: 1.5px; }
.hero-demo .btn--choice__shape svg { width: 19px; height: 19px; }
.hero-demo .btn--choice__chev { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-demo .btn--choice:hover { transform: translateY(-3px); rotate: 0deg; box-shadow: 0 6px 0 var(--choice-shade); }
}
.hero-demo .btn--choice:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--choice-shade); }
.hero-demo .choices--decided .btn--choice--picked { background: var(--choice-color); border-color: var(--choice-shade); box-shadow: 0 3px 0 var(--choice-shade); rotate: 0deg; }
:root[data-theme="night"] .hero-demo .btn--choice {
  --choice-soft: color-mix(in oklab, var(--choice-color) 18%, var(--book-paper));
  --choice-edge: color-mix(in oklab, var(--choice-color) 45%, var(--book-paper));
  --choice-shade: color-mix(in oklab, var(--choice-color) 30%, #12101A);
}
/* Zvolená volba v noci: plná (zesvětlená) barva, text zpět do denního inkoustu */
:root[data-theme="night"] .hero-demo .choices--decided .btn--choice--picked { color: var(--on-candy); }

/* Listování: stránka se „otočí“ (keyframes bookTurn jen bez reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-demo.is-turning .hero-demo__art,
  .hero-demo.is-turning .hero-demo__p { animation: bookTurn .5s ease both; transform-origin: left center; }
}

/* Konec ukázky: překryje stránku, hlavička s dráčkem zůstává nad ním */
.hero-demo__end { background: var(--book-paper); border-radius: 22px 23px 23px 18px; padding: 86px 24px 24px; gap: 8px; }
.hero-demo__end-title { font: 800 28px/1.15 var(--font-display); letter-spacing: -.4px; }
.hero-demo__end p { max-width: 38ch; margin: 0; font: 700 16px/1.5 var(--font); color: var(--ink-2); text-wrap: balance; }
.hero-demo__end-actions { gap: 12px; margin-top: 10px; }
.hero-demo__end .btn--primary { box-shadow: 0 5px 0 var(--action-2); }
.hero-demo__end .btn--primary:hover { background: var(--cta-bg-hover); box-shadow: 0 5px 0 var(--action-2); transform: none; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero-demo__end .btn--primary:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--action-2); }
}
/* Jiná cesta ukázkou: od 2026-10-28 jen nenápadný odkaz pod dvěma tlačítky (zdarma / všechny příběhy) */
.hero-demo__again {
  margin-top: 4px;
  padding: 8px 10px;
  min-height: 40px;
  background: none;
  border: 0;
  font: 700 14px/1.3 var(--font);
  color: var(--ink-faded);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hero-demo__again:hover { color: var(--ink); }

/* „Příběh se změnil!“ - vlevo nahoře, ať se nepere s bublinkou dráčka */
.hero-demo__sticker {
  top: -18px;
  right: auto;
  left: 34px;
  z-index: 4;
  padding: 4px 12px;
  font: var(--w-heavy) 12px/1.4 var(--font);
  letter-spacing: 1px;
  color: var(--on-candy);
  background: var(--highlight);
  border: 1px solid #E2B94F;
  box-shadow: 0 3px 0 #E7C46B80;
  rotate: -3deg;
}

/* Poznámka pod knížkou */
.hero-demo__note {
  display: table;
  margin: 25px auto 0;
  padding: 4px 12px;
  font: 700 13.5px/1.5 var(--font);
  text-wrap: balance;
  color: #5B6A58;
  background: #FFFAF0E8;
  border-radius: 24px;
  rotate: -2deg;
}
.hero-demo__note > span { padding-right: 4px; color: #D4849C; }
:root[data-theme="night"] .hero-demo__note { color: #D3DECB; background: #2D283CE0; }

/* ── <= 1150 px: užší dva sloupce ─────────────────────────────────── */
@media (max-width: 1150px) {
  .hero .hero__inner--demo { column-gap: 33px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding-top: 56px; }
  .hero__subtitle { font-size: 18px; }
  .hero__tagline { font-size: 22px; }
  .hero__invite { font-size: 13px; gap: 5px; }
  .hero__invite .art-icon { --s: 33px; }
  .hero__cta.btn, .hero__browse.btn { font-size: 16px; padding-inline: 20px; }
  .hero-demo { padding: 13px; }
  .hero-demo__art { height: 220px; }
  .hero-demo__title { font-size: 23px; }
  .hero-demo__choices { gap: 8px; }
  .hero-demo .btn--choice { font-size: 14px; gap: 7px; padding-inline: 8px; }
  .hero-demo .btn--choice__shape { width: 31px; height: 31px; }
}

/* Nízký notebook (okno do ~820 px výšky): hlavní tlačítko hero musí být vidět bez posouvání
   i s podnadpisem (2026-10-24). Pozvánka „Tak kudy se vydáme?“ je jen ozdoba, na mobilu chybí taky. */
@media (min-width: 851px) and (max-height: 820px) {
  .hero__invite { display: none; }
  .hero .hero__inner--demo { padding-top: 40px; }
  .hero__title { margin: 18px 0 14px; }
}

/* ── <= 850 px: jeden sloupec, text / výzva / knížka, na střed ───────
   Výzva stojí nad ukázkou, aby „Číst první příběh zdarma“ bylo vidět bez
   posouvání i na 375x667 (pod ukázkou byla na y = 830, audit 2026-10-14). */
@media (max-width: 850px) {
  .hero { padding-bottom: 38px; }
  .hero__world { object-position: 48% bottom; }
  .hero__glow { top: 0; bottom: 110px; left: 8%; width: 84%; filter: blur(28px); }
  .hero .hero__inner--demo {
    width: min(590px, var(--wrap));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "cta" "book";
    padding-block: 27px 21px;
    gap: 0;
    text-align: center;
  }
  .hero__copy { align-self: auto; padding-bottom: 26px; }
  .hero__title { font-size: 56px; line-height: 1.05; margin: 19px 0 13px; }
  .hero__title-line { white-space: normal; }
  .hero__accent { margin-inline: auto; }
  .hero__accent::after { left: 15%; right: 15%; height: 6px; }
  .hero__subtitle { max-width: 26em; margin-inline: auto; font-size: 17px; text-wrap: balance; }
  .hero__tagline { max-width: 22em; margin-inline: auto; font-size: 21px; }
  .hero__invite { display: none; }

  .hero__book { width: calc(100% - 12px); margin: 4px auto 0; text-align: left; }
  .hero-demo__mascot { --mascot-size: 76px; top: -46px; right: -10px; }
  .hero-demo__whisper { right: 72px; top: -18px; padding: 4px 10px; }
  .hero-demo__head { padding-right: 66px; }
  .hero-demo__art { height: 220px; }
  .hero-demo__title { font-size: 24px; }
  .hero-demo__p { min-height: 0; }
  .hero-demo__choices { gap: 10px; }
  .hero-demo .btn--choice { font-size: 15px; gap: 9px; padding: 10px; }
  .hero-demo .btn--choice__shape { width: 35px; height: 35px; }
  .hero-demo__note { margin-top: 24px; }

  /* Spodní okraj = místo pro dráčka a šeptandu, které přečnívají nad knížku */
  .hero__after { align-self: auto; padding-bottom: 0; margin: 0 0 52px; display: flex; flex-direction: column; align-items: center; }
  .hero__actions { gap: 12px; }
  .hero__cta.btn, .hero__browse.btn { font-size: 16px; padding-inline: 25px; }
}

/* ── <= 480 px: telefon ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero { padding-bottom: 26px; }
  .hero__world { object-position: 52% bottom; }
  .hero__glow { bottom: 75px; left: 4%; width: 92%; filter: blur(24px); }
  .hero .hero__inner--demo { padding-block: 19px 20px; }
  .hero__copy { padding-bottom: 18px; }
  .hero__badge { letter-spacing: 1px; padding: 3px 10px 3px 5px; gap: 4px; }
  .hero__badge .art-icon { --s: 19px; }
  .hero__title { font-size: 43px; letter-spacing: -1.3px; line-height: 1.03; margin: 14px 0 9px; }
  .hero__accent::after { left: 9%; right: 9%; height: 5px; }
  .hero__subtitle { max-width: 300px; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
  .hero__tagline { max-width: 320px; margin-bottom: 10px; font-size: 19px; }

  .hero__book { width: calc(100% - 4px); }
  .hero-demo {
    padding: 10px;
    border-radius: 19px;
    box-shadow: 3px 5px 0 #DBE4C2, 6px 8px 0 var(--book-ink);
    rotate: .6deg;
  }
  :root[data-theme="night"] .hero-demo { box-shadow: 3px 5px 0 #3B4437, 6px 8px 0 var(--book-ink); }
  .hero-demo__spark { font-size: 28px; left: -11px; top: -13px; }
  /* Dráček sedí uvnitř pravého horního rohu */
  .hero-demo__mascot { --mascot-size: 64px; top: -22px; right: 2px; }
  .hero-demo__whisper { top: -16px; right: 66px; padding: 3px 9px; rotate: 4deg; }
  .hero-demo__head { padding: 2px 62px 9px 2px; gap: 8px; }
  .hero-demo__title { font-size: 22px; }
  .hero-demo__art { height: 157px; border-radius: 10px; }
  .hero-demo__caption { left: 8px; bottom: 9px; gap: 4px; padding: 2px 9px 2px 3px; }
  .hero-demo__caption .art-icon { --s: 21px; }
  .hero-demo__dots { right: 11px; bottom: 13px; }
  .hero-demo__dots span { width: 5px; height: 5px; }
  .hero-demo__text { padding: 11px 2px 0; }
  .hero-demo__hint { letter-spacing: .8px; }
  .hero-demo__p { margin-top: 5px; font-size: 18px; line-height: 1.3; letter-spacing: -.2px; }
  .hero-demo__choices { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .hero-demo__foot { margin-top: 9px; }
  .hero-demo .btn--choice { min-height: 50px; padding: 6px 10px; gap: 10px; border-radius: 12px; rotate: 0deg; }
  .hero-demo .btn--choice-1 { rotate: 0deg; }
  .hero-demo .btn--choice__shape { width: 31px; height: 31px; }
  .hero-demo__end { padding: 70px 16px 16px; }
  .hero-demo__end-title { font-size: 24px; }
  .hero-demo__end p { font-size: 15px; }
  .hero-demo__note { margin-top: 20px; }

  .hero__after { margin: 0 0 30px; }
  .hero__cta.btn, .hero__browse.btn { font-size: 16px; min-height: 59px; padding: 13px 24px; }
}

/* ===================== 25-how ===================== */
/* =====================================================================
   25-HOW - „Jak to funguje“ #jak-to-funguje (plan.md §3.3) a lesní
   předěl .garden-divider (§3.4). Kroky jsou <ol>; tečkované cestičky
   mezi nimi kreslí ::before/::after seznamu (sloupce 2 a 4 mřížky),
   takže v seznamu zůstávají jen tři položky.
   ===================================================================== */

.how {
  --how-blob-1: #FFF0BC;
  --how-blob-2: var(--action-soft);
  --how-blob-3: #EAF1DB;
  position: relative;
  padding: 70px 0 40px;
  background: var(--paper);
  color: var(--ink);
}
:root[data-theme="night"] .how {
  --how-blob-1: var(--pal-honey-1);
  --how-blob-3: var(--pal-sage-1);
}
.how__inner { position: relative; }

/* Dekorace v rozích kontejneru */
.how__deco { position: absolute; --s: 95px; pointer-events: none; }
.how__deco--star { left: -30px; top: -15px; rotate: -18deg; opacity: .85; }
.how__deco--leaf { right: -31px; top: 32px; rotate: 26deg; }

/* Nadpis */
.how__head { text-align: center; }
.how__eyebrow { margin: 0; color: var(--ink); }
.how__title {
  margin: 14px 0 0;
  font-size: clamp(32px, 2.85vw, 41px);
  letter-spacing: -1.2px;
  line-height: 1.07;
  text-wrap: balance;
  color: var(--ink);
}
.how__lead { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

/* Kroky: 1fr | cesta | 1fr | cesta | 1fr */
.how__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.how__step { position: relative; z-index: 1; grid-row: 1; }
.how__step:nth-child(1) { grid-column: 1; rotate: -2deg; }
.how__step:nth-child(2) { grid-column: 3; }
.how__step:nth-child(3) { grid-column: 5; rotate: 2deg; }
.how__steps::before,
.how__steps::after {
  content: "·········";
  grid-row: 1;
  align-self: start;
  margin-top: 80px;
  font: 700 30px/1 var(--font);
  letter-spacing: 4px;
  color: #DBB36E;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
  pointer-events: none;
}
.how__steps::before { grid-column: 2; rotate: -10deg; }
.how__steps::after  { grid-column: 4; rotate: 10deg; }

/* Ilustrace kroku: ikona na barevné „kaňce“, číslo v zlatém kolečku */
.how__art {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.how__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 95px;
  height: 85px;
  border-radius: 47% 53% 43% 57%;
  background: var(--how-blob-1);
  rotate: -12deg;
}
.how__step:nth-child(2) .how__art::before { background: var(--how-blob-2); rotate: 13deg; }
.how__step:nth-child(3) .how__art::before { background: var(--how-blob-3); rotate: 0deg; }
.how__art .art-icon { --s: 100px; transition: transform .3s var(--ease-out-quint); }
.how__art b {
  position: absolute;
  right: -3px;
  bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F9D577;
  border: 3px solid var(--paper);
  font: 800 16px/1 var(--font-display);
  color: #1B3051;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .how__step:hover .how__art .art-icon { transform: rotate(-9deg) scale(1.08); }
}

.how__step-title {
  margin: 16px 0 0;
  font-size: 25px;
  line-height: 1.14;
  letter-spacing: -.3px;
  color: var(--ink);
}
.how__step-desc {
  max-width: 17.5em;
  margin: 9px auto 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* ── Lesní předěl (kapradí, houby, motýli) nad knihovnou ──────────── */
.garden-divider {
  --bf-k: .4948;                /* měřítko předlohy 1536 px na dlaždici 760 px (motýli i jejich let) */
  position: relative;
  z-index: 1;
  height: 290px;
  margin-top: -20px;
  background: url("/assets/storybook/woodland-plants.webp") center bottom / 760px auto repeat-x;
  pointer-events: none;
  user-select: none;
}
:root[data-theme="night"] .garden-divider { filter: brightness(.55) saturate(.85); }

/* Motýli (scripts/woodland_split.py): rostliny se opakují po dlaždicích, motýli ne - pět jich poletuje nad
   celou šířkou. Obrázek motýla má tělo svisle uprostřed, každá polovina = křídlo, které mává kolem těla
   (rotateY). Natočení (--heading) je libovolné, motýl je souměrný. */
.garden-divider .bf {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * var(--bf-k) * var(--sc, 1) * 1px);
  height: calc(var(--h) * var(--bf-k) * var(--sc, 1) * 1px);
}
.garden-divider .bf__path,
.garden-divider .bf__tilt { display: flex; width: 100%; height: 100%; }
.garden-divider .bf__tilt { rotate: var(--heading); perspective: 220px; }
.garden-divider .bf__tilt > i {
  flex: 1 1 50%;
  background: var(--img) 0 0 / 200% 100% no-repeat;
  transform-origin: 100% 50%;
}
.garden-divider .bf__tilt > i + i { background-position: 100% 0; transform-origin: 0 50%; }
.bf--orange { --img: url("/assets/storybook/butterfly-orange.webp"); --w: 202; --h: 138; }
.bf--blue   { --img: url("/assets/storybook/butterfly-blue.webp");   --w: 176; --h: 119; }
.bf--pink   { --img: url("/assets/storybook/butterfly-pink.webp");   --w: 182; --h: 123; }
.bf--1 { --x: 7%;  --y: 30px; --heading: 22deg; }
.bf--2 { --x: 26%; --y: 4px;  --heading: -30deg; --sc: .9; }
.bf--3 { --x: 47%; --y: 52px; --heading: 18deg; }
.bf--4 { --x: 68%; --y: 12px; --heading: -16deg; --sc: .82; }
.bf--5 { --x: 87%; --y: 40px; --heading: 26deg; --sc: .95; }

/* Pohyb sekce „Jak to funguje“ a motýlů: jen bez reduced motion a jen když je sekce vidět (.is-live
   z js/playful.js; mimo obrazovku žádná animace neběží), jinak vše stojí na místě jako dřív. Ikony kroků
   hýbou jednotlivými vlastnostmi (translate/scale/rotate), takže se nepřepisuje transform z najetí myší. */
@media (prefers-reduced-motion: no-preference) {
  .how.is-live .how__deco--star { animation: howTwinkle 5.6s ease-in-out infinite; }
  .how.is-live .how__deco--leaf { animation: howSway 6.4s ease-in-out infinite; }
  .how.is-live .how__step:nth-child(1) .art-icon { animation: howFloat 4.8s ease-in-out infinite; }
  .how.is-live .how__step:nth-child(2) .art-icon { animation: howBeat 2.8s ease-in-out .4s infinite; }
  .how.is-live .how__step:nth-child(3) .art-icon { transform-origin: 50% 14%; animation: howSwing 4.2s ease-in-out -1s infinite; }
  .how.is-live .how__art::before { animation: howBlob 9s ease-in-out infinite alternate; }
  .how.is-live .how__step:nth-child(2) .how__art::before { animation-delay: -3s; }
  .how.is-live .how__step:nth-child(3) .how__art::before { animation-delay: -6s; }
  /* Po tečkách cestičky běží světlo: z kroku 1 do 2, pak z 2 do 3 */
  .how.is-live .how__steps::before,
  .how.is-live .how__steps::after {
    -webkit-mask: linear-gradient(90deg, #000a 0 38%, #000 46% 54%, #000a 62% 100%) 100% 0 / 300% 100% no-repeat;
    mask: linear-gradient(90deg, #000a 0 38%, #000 46% 54%, #000a 62% 100%) 100% 0 / 300% 100% no-repeat;
    animation: howPath 3.6s linear infinite;
  }
  .how.is-live .how__steps::after { animation-delay: 1.8s; }
  .garden-divider.is-live .bf__path { animation: bfDrift1 17s ease-in-out infinite; }
  .garden-divider.is-live .bf--2 .bf__path { animation: bfDrift2 21s ease-in-out -7s infinite; }
  .garden-divider.is-live .bf--3 .bf__path { animation: bfDrift3 19s ease-in-out -3s infinite; }
  .garden-divider.is-live .bf--4 .bf__path { animation: bfDrift2 23s ease-in-out -15s infinite reverse; }
  /* Pravý okraj: dráha, která se doprava vzdálí jen málo (bfDrift2 max +40 px předlohy), ať motýl nevylétne z obrazovky */
  .garden-divider.is-live .bf--5 .bf__path { animation: bfDrift2 18s ease-in-out -11s infinite; }
  .garden-divider.is-live .bf__tilt > i { animation: bfFlapL 1.7s ease-in-out infinite; }
  .garden-divider.is-live .bf__tilt > i + i { animation-name: bfFlapR; }
  .garden-divider.is-live .bf--2 .bf__tilt > i { animation-duration: 1.45s; animation-delay: -.5s; }
  .garden-divider.is-live .bf--3 .bf__tilt > i { animation-duration: 1.95s; animation-delay: -1.1s; }
  .garden-divider.is-live .bf--4 .bf__tilt > i { animation-duration: 1.55s; animation-delay: -.2s; }
  .garden-divider.is-live .bf--5 .bf__tilt > i { animation-duration: 1.8s; animation-delay: -.8s; }

  @keyframes howTwinkle {
    0%, 100% { transform: translateY(0) rotate(0) scale(1); }
    50%      { transform: translateY(-7px) rotate(9deg) scale(1.07); }
  }
  @keyframes howSway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(5deg) translateY(-3px); }
  }
  @keyframes howFloat {
    0%, 100% { translate: 0 0;    rotate: 0deg; }
    50%      { translate: 0 -6px; rotate: -3deg; }
  }
  @keyframes howBeat {
    0%, 42%, 100% { scale: 1; }
    10%           { scale: 1.09; }
    20%           { scale: 1.01; }
    30%           { scale: 1.06; }
  }
  @keyframes howSwing {
    0%, 100% { rotate: -6deg; }
    50%      { rotate: 6deg; }
  }
  @keyframes howBlob {
    0%   { border-radius: 47% 53% 43% 57%; scale: 1; }
    50%  { border-radius: 58% 42% 55% 45%; scale: 1.04; }
    100% { border-radius: 42% 58% 48% 52%; scale: .98; }
  }
  @keyframes howPath {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  }
  /* Motýl tři-čtyřikrát mávne a pak plachtí s křídly skoro roztaženými */
  @keyframes bfFlapL {
    0%, 60%, 100%  { transform: rotateY(-10deg); }
    8%, 24%, 40%   { transform: rotateY(-70deg); }
    16%, 32%, 48%  { transform: rotateY(-8deg); }
  }
  @keyframes bfFlapR {
    0%, 60%, 100%  { transform: rotateY(10deg); }
    8%, 24%, 40%   { transform: rotateY(70deg); }
    16%, 32%, 48%  { transform: rotateY(8deg); }
  }
  /* Smyčky letu v pixelech předlohy (* --bf-k), natočení se k nim jemně přiklání */
  @keyframes bfDrift1 {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25%      { translate: calc(70px * var(--bf-k)) calc(-36px * var(--bf-k)); rotate: 10deg; }
    50%      { translate: calc(130px * var(--bf-k)) calc(10px * var(--bf-k)); rotate: -6deg; }
    75%      { translate: calc(50px * var(--bf-k)) calc(34px * var(--bf-k)); rotate: -14deg; }
  }
  @keyframes bfDrift2 {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    30%      { translate: calc(-80px * var(--bf-k)) calc(28px * var(--bf-k)); rotate: -12deg; }
    60%      { translate: calc(-20px * var(--bf-k)) calc(60px * var(--bf-k)); rotate: 8deg; }
    80%      { translate: calc(40px * var(--bf-k)) calc(20px * var(--bf-k)); rotate: 14deg; }
  }
  @keyframes bfDrift3 {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    20%      { translate: calc(-50px * var(--bf-k)) calc(-40px * var(--bf-k)); rotate: -10deg; }
    55%      { translate: calc(60px * var(--bf-k)) calc(-60px * var(--bf-k)); rotate: 12deg; }
    80%      { translate: calc(90px * var(--bf-k)) calc(0px * var(--bf-k)); rotate: 4deg; }
  }
}

/* ── <= 1150 px ──────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .how__deco { --s: 70px; }
  .how__deco--star { left: -20px; }
  .how__deco--leaf { right: -20px; }
}

/* ── <= 850 px: tři sloupce bez cestiček ───────────────────────────── */
@media (max-width: 850px) {
  .how { padding: 49px 0 40px; }
  .how__title { font-size: 36px; }
  .how__lead { font-size: 16px; }
  .how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .how__steps::before,
  .how__steps::after { content: none; }
  .how__step:nth-child(1) { grid-column: 1; }
  .how__step:nth-child(2) { grid-column: 2; }
  .how__step:nth-child(3) { grid-column: 3; }
  .how__art .art-icon { --s: 90px; }
  .how__step-title { font-size: 22px; }
  .how__step-desc { font-size: 14px; }
  .how__deco--star { --s: 55px; top: -30px; left: -16px; }
  .how__deco--leaf { --s: 60px; top: -36px; right: -14px; }
  .garden-divider { --bf-k: .3516; height: 210px; background-size: 540px auto; }
  .bf--5 { --x: 80%; }
}

/* ── <= 480 px: jeden sloupec, ikona vlevo ─────────────────────────── */
@media (max-width: 480px) {
  .how { padding: 44px 0 27px; }
  .how__title { font-size: 32px; }
  .how__lead { font-size: 16px; }
  .how__steps { grid-template-columns: minmax(0, 1fr); gap: 23px; margin-top: 28px; text-align: left; }
  .how__step:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    rotate: 0deg;
    display: grid;
    grid-template-columns: 93px minmax(0, 1fr);
    column-gap: 17px;
    align-items: center;
  }
  .how__art { grid-row: 1 / 3; }
  .how__art .art-icon { --s: 88px; }
  .how__art::before { width: 78px; height: 69px; }
  .how__art b { right: 0; width: 25px; height: 25px; font-size: 14px; }
  .how__step-title { margin: 0; align-self: end; font-size: 24px; }
  .how__step-desc { max-width: none; margin: 5px 0 0; align-self: start; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
  /* Štítek se zalomí do dvou řádků na střed, hvězdička má vlevo místo */
  .how__eyebrow { max-width: 250px; margin-inline: auto; text-wrap: balance; }
  .how__deco--star { --s: 45px; left: -6px; top: -26px; }
  .how__deco--leaf { --s: 48px; top: -28px; right: -6px; }
  .garden-divider {
    --bf-k: .2865;
    height: 170px;
    margin-top: -12px;
    background-image: url("/assets/storybook/woodland-plants-768.webp");
    background-size: 440px auto;
  }
  /* Na úzkém displeji jen tři motýli */
  .bf--4, .bf--5 { display: none; }
  .bf--1 { --x: 6%; }
  .bf--2 { --x: 40%; }
  .bf--3 { --x: 72%; --y: 30px; }
}

/* ===================== 30-library ===================== */
/* =====================================================================
   30-LIBRARY - #pribehy „Tři dveře. Spousta ještě!“ (plán §3.5)
   Šalvějová sekce přes celou šířku: hlavička vlevo, „Překvap nás!“ a
   mávající dráček vpravo, tři pohádkové karty v barevných rodinách
   (story-card--sage|lav|apricot z js/library.js FEATURED, náklon podle
   pořadí story-card--0..2), fialový dráček s knížkou a inkoustová pilulka
   do „Všech příběhů“. Prefix .stories přebíjí starší pravidla z brand.css.
   ===================================================================== */

.bookshelf.stories {
  --st-muted: var(--ink-faded);          /* #5F6B74: 4.8:1 na šalvěji (--ink-soft jen 4.2) */
  --st-dash:  #C3D0B6;                   /* čárkované linky z návrhu */
  --st-pill-bg: #FFFFFFA1;
  --st-pill-edge: #BAC8A8;
  background: var(--pal-sage-1);
  padding-block: 52px 60px;
}
:root[data-theme="night"] .bookshelf.stories {
  --st-muted: var(--ink-soft);
  --st-dash:  var(--pal-sage-edge);
  --st-pill-bg: color-mix(in oklab, var(--card) 70%, transparent);
  --st-pill-edge: var(--pal-sage-edge);
}

/* ── Hlavička: text vlevo, vpravo „Překvap nás!“ a mávající dráček ──── */
.stories .stories__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 30px;
  margin: 0 0 42px;
  text-align: left;
}
/* justify-items: brand.css ho má center a nový Chrome ho uplatní i v blokovém rozvržení */
.stories .stories__intro { grid-column: 1; display: block; justify-items: normal; text-align: left; }
.stories .stories__eyebrow { margin: 0; color: var(--ink); }
.stories .stories__title {
  margin: 15px 0 0;
  font: var(--w-display) 44px/1.07 var(--font-display);
  letter-spacing: -1.2px;
  color: var(--ink);
  text-wrap: balance;
}
.stories .stories__sub {
  margin: 12px 0 0;
  max-width: 46ch;
  font: 600 16px/1.7 var(--font);
  color: var(--st-muted);
}
/* Štítek (#library-subtitle, text mění library.js): čárkovaná pozvánka z návrhu */
.stories .stories__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 7px 15px 7px 11px;
  background: var(--st-pill-bg);
  border: 1px dashed var(--st-pill-edge);
  border-radius: 17px;
  font: var(--w-heavy) 13px/1.35 var(--font);
  color: var(--pal-sage-ink);
}
.stories .stories__pill-ico { width: 18px; height: 18px; stroke: var(--pal-sage-ink); }

.stories .stories__aside {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.stories .stories__mascot { --mascot-size: 150px; margin-block: -12px -18px; }
.stories .stories__mascot::after { right: -4%; top: 18%; }

.stories__surprise {
  --sp-bg: #FFF4D7;
  --sp-edge: #D6B46D;
  --sp-ink: #675125;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 9px 19px 9px 9px;
  background: var(--sp-bg);
  border: 1px dashed var(--sp-edge);
  border-radius: 15px;
  font: var(--w-heavy) 14px/1.2 var(--font);
  color: var(--sp-ink);
  white-space: nowrap;
  cursor: pointer;
  transform: rotate(4deg);
}
.stories__surprise .art-icon { --s: 35px; }
:root[data-theme="night"] .stories__surprise {
  --sp-bg: var(--pal-honey-1);
  --sp-edge: var(--pal-honey-edge);
  --sp-ink: var(--pal-honey-badge-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .stories__surprise { transition: transform 300ms var(--ease-out-quint); }
  .stories__surprise:active { transform: rotate(-3deg) scale(.97); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stories__surprise:hover { transform: rotate(-3deg); }
}

/* ── Karty: tři dveře v barevných rodinách, ručně položené ─────────── */
.stories .story-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  max-width: none;
  margin: 0;
  padding-bottom: 12px;          /* prostřední karta je o 12 px níž */
}
.stories .story-card {
  --t-edge: var(--pal-sage-edge);
  --t-shadow: var(--pal-sage-shadow);
  --t-ink: var(--pal-sage-ink);
  --t-badge: var(--pal-sage-badge);
  --t-badge-ink: var(--pal-sage-badge-ink);
  --tilt: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--t-edge);
  border-radius: 19px;
  box-shadow: 4px 6px 0 var(--t-shadow);
  overflow: hidden;
  transform: var(--tilt);
}
.stories .story-card--lav {
  --t-edge: var(--pal-lav-edge); --t-shadow: var(--pal-lav-shadow); --t-ink: var(--pal-lav-ink);
  --t-badge: var(--pal-lav-badge); --t-badge-ink: var(--pal-lav-badge-ink);
}
.stories .story-card--apricot {
  --t-edge: var(--pal-apricot-edge); --t-shadow: var(--pal-apricot-shadow); --t-ink: var(--pal-apricot-ink);
  --t-badge: var(--pal-apricot-badge); --t-badge-ink: var(--pal-apricot-badge-ink);
}
/* Noc: tmavé -edge/-shadow rodin skoro splynou s papírem - lem a stín
   z barvy písma rodiny, karta jen nádechem do její barvy */
:root[data-theme="night"] .stories .story-card {
  --t-edge: color-mix(in oklab, var(--t-ink) 58%, var(--card));
  --t-shadow: color-mix(in oklab, var(--t-ink) 30%, var(--pal-sage-1));
  background: color-mix(in oklab, var(--t-ink) 7%, var(--card));
}
.stories .story-card--0 { --tilt: rotate(-1.3deg); }
.stories .story-card--1 { --tilt: translateY(12px) rotate(.7deg); }
.stories .story-card--2 { --tilt: rotate(1.3deg); }
.stories .story-card:active { transform: var(--tilt); box-shadow: 2px 3px 0 var(--t-shadow); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stories .story-card:hover { transform: translateY(-8px) rotate(0deg); box-shadow: 4px 9px 0 var(--t-shadow); }
  .stories .story-card:hover .story-card__img { scale: 1.05; }
  .stories .story-card:active { transform: translateY(-3px) rotate(0deg); box-shadow: 2px 3px 0 var(--t-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .stories .story-card:hover .story-card__img { scale: none; }
}

.stories .story-card__art {
  position: relative;
  display: block;
  flex: none;
  height: 300px;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: #294032;
  border: 0;
  border-bottom: 1px solid var(--t-edge);
}
.stories .story-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.stories .story-card__img--cover { object-position: 50% 30%; }
/* Přístup (Zdarma / V předplatném) jako nalepený štítek */
.stories .story-card__tag {
  position: absolute;
  top: 17px; left: 15px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--t-badge);
  color: var(--t-badge-ink);
  font: var(--w-heavy) 12px/1.2 var(--font);
  letter-spacing: .7px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: 0 3px 0 #00000012;
}
.stories .story-card__open {
  position: absolute;
  right: 16px; bottom: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 6px 7px;
  border-radius: 50px;
  background: #FFFFFFED;
  color: #394B42;
  font: var(--w-heavy) 13px/1.2 var(--font);
  transform: rotate(-4deg);
  box-shadow: 0 3px 12px #11223333;
}
.stories .story-card__open .art-icon { --s: 26px; }

.stories .story-card__body {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0;
  padding: 22px 21px 19px;
}
.stories .story-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: var(--w-heavy) 12px/1.4 var(--font);
  letter-spacing: 1px;
  color: var(--t-ink);
}
.stories .story-card__meta > :first-child { text-transform: uppercase; }
.stories .story-card__meta > :last-child { letter-spacing: 0; white-space: nowrap; }
.stories .story-card__title {
  margin: 13px 0 10px;
  font: var(--w-display) 27px/1.1 var(--font-display);
  letter-spacing: -.5px;
  color: var(--ink);
  text-wrap: balance;
}
.stories .story-card__line {
  margin: 0;
  min-height: 47px;
  font: 600 14px/1.7 var(--font);
  color: var(--ink-soft);
}
.stories .story-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 19px;
  padding-top: 15px;
  border-top: 1px dashed var(--line);
}
.stories .story-card__ends { font: 600 12px/1.4 var(--font); color: var(--ink-soft); }
.stories .story-card__cta {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font: var(--w-heavy) 13px/1.3 var(--font);
  color: var(--action-text);
  text-align: right;
}
.stories .story-card__spark { color: #DAA652; }

/* ── Objevování: fialový dráček čte, za ním jen měkká levandulová záře ── */
.stories .stories__discovery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  max-width: 850px;
  margin: 58px auto 0;
}
.stories__discovery-art {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 300px;
  padding: 8px 0 14px;
}
.stories__discovery-art::before {
  content: "";
  position: absolute;
  inset: 18% 0 0;
  background: radial-gradient(closest-side, var(--pal-lav-1), transparent);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}
/* Zlaté jiskry: jeden znak, dvě kopie přes text-shadow */
.stories__discovery-art::after {
  content: "✦";
  position: absolute;
  top: 8%; right: 6%;
  font: 400 26px/1 var(--font);
  color: #DAA652;
  text-shadow: -232px 46px 0 #E2C17B, -20px 150px 0 #E8C66E;
  pointer-events: none;
}
.stories__discovery-mascot { position: relative; --mascot-size: 236px; filter: drop-shadow(0 6px 6px #52734F17); }
.stories__discovery-text { min-width: 0; }
.stories__discovery-eyebrow { margin: 0; color: var(--pal-lav-ink); }
.stories__discovery-title {
  margin: 10px 0 0;
  max-width: 11em;
  font: var(--w-display) 33px/1.1 var(--font-display);
  letter-spacing: -.5px;
  color: var(--ink);
  text-wrap: balance;
}
.stories__discovery-sub {
  margin: 11px 0 0;
  font: 600 15px/1.6 var(--font);
  color: var(--st-muted);
}
.stories__discovery-sub > span { display: block; }

/* ── Do všech příběhů: inkoustová pilulka, šeptaná poznámka, důvěra ── */
.stories .bookshelf__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
}
.stories .stories__all {
  --all-shadow: color-mix(in oklab, var(--ink) 72%, #000);
  min-height: 52px;
  padding: 13px 22px 13px 26px;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 30px;
  font: var(--w-heavy) 15px/1.2 var(--font);
  box-shadow: 0 4px 0 var(--all-shadow);
  transform: none;
}
.stories .stories__all:hover { background: var(--ink-2); color: var(--paper); box-shadow: 0 4px 0 var(--all-shadow); transform: none; }
.stories .stories__all:active { box-shadow: 0 1px 0 var(--all-shadow); transform: translateY(3px); }
:root[data-theme="night"] .stories .stories__all { --all-shadow: color-mix(in oklab, var(--ink) 45%, var(--pal-sage-1)); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stories .stories__all { transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint), background-color var(--dur-fast) var(--ease-out-quint); }
  .stories .stories__all:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--all-shadow); }
  .stories .stories__all:hover svg { translate: 3px 0; }
  .stories .stories__all svg { transition: translate var(--dur-fast) var(--ease-out-quint); }
}
.stories .stories__note {
  margin: 6px 0 0;
  font: italic 600 14px/1.5 var(--font);
  color: var(--st-muted);
  text-align: center;
}
.stories .stories__trust {
  display: flex;
  justify-content: center;
  width: min(800px, 100%);
  margin: 10px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--st-dash);
  font: 700 13px/1.45 var(--font);
  color: var(--st-muted);
}
.stories .stories__trust-ico { stroke: var(--pal-sage-ink); }

/* ── Do 1150: menší karty, ať se tři vejdou ────────────────────────── */
@media (max-width: 1150px) {
  .stories .story-cards { gap: 22px; }
  .stories .story-card__art { height: 260px; }
  .stories .story-card__body { padding: 20px 17px 16px; }
  .stories .story-card__title { font-size: 25px; }
  .stories .story-card__foot { flex-wrap: wrap; }
  .stories .stories__mascot { --mascot-size: 130px; }
}

/* ── Do 850: jeden sloupec karet bez náklonu ───────────────────────── */
@media (max-width: 850px) {
  .bookshelf.stories { padding-block: 44px 48px; }
  .stories .stories__head { margin-bottom: 34px; column-gap: 18px; }
  .stories .stories__title { font-size: 36px; }
  .stories .stories__sub { font-size: 15px; }
  .stories .stories__aside { flex-direction: column-reverse; gap: 4px; }
  .stories .stories__mascot { --mascot-size: 120px; margin-block: -10px 0; }
  .stories .story-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin-inline: auto;
    gap: 30px;
    padding-bottom: 0;
  }
  .stories .story-card { --tilt: none; }
  .stories .story-card__art { height: 320px; }
  .stories .story-card__body { padding: 24px; }
  .stories .story-card__title { font-size: 29px; }
  .stories .story-card__line { min-height: 0; font-size: 16px; }
  .stories .story-card__foot { flex-wrap: nowrap; }
  .stories .story-card__ends,
  .stories .story-card__cta { font-size: 13px; }
  .stories .stories__discovery { gap: 22px; margin-top: 44px; }
  .stories__discovery-art { width: 41%; max-width: 260px; }
  .stories__discovery-mascot { --mascot-size: min(200px, 30vw); }
  .stories__discovery-art::after { text-shadow: -150px 40px 0 #E2C17B, -14px 110px 0 #E8C66E; }
  .stories__discovery-title { font-size: 28px; }
  .stories .bookshelf__more { margin-top: 38px; }
}

/* ── Telefon: hlavička pod sebe, „Překvap nás!“ vlevo, dráček vpravo ─ */
@media (max-width: 600px) {
  .stories .stories__head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-bottom: 30px; }
  .stories .stories__aside {
    grid-column: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
  }
  .stories .stories__surprise { margin: 0 0 14px 4px; }
  .stories .stories__mascot { --mascot-size: 112px; margin: -26px 6px -8px 0; }
}
@media (max-width: 480px) {
  .bookshelf.stories { padding-block: 36px 44px; }
  .stories .stories__title { font-size: 35px; }
  .stories .stories__sub { font-size: 15px; padding-right: 8px; }
  .stories .story-card__art { height: 285px; }
  .stories .story-card__body { padding: 22px 19px 19px; }
  .stories .story-card__title { font-size: 28px; }
  .stories .story-card__line { font-size: 15px; }
  .stories .story-card__foot { gap: 6px; }
  .stories .story-card__ends { font-size: 12px; }
  .stories .stories__discovery { gap: 12px; margin-top: 38px; }
  .stories__discovery-art { width: 44%; padding-bottom: 8px; }
  .stories__discovery-mascot { --mascot-size: 138px; }
  .stories__discovery-art::after { font-size: 20px; top: 4%; text-shadow: -118px 34px 0 #E2C17B, -6px 96px 0 #E8C66E; }
  .stories__discovery-eyebrow { font-size: 12px; letter-spacing: 1px; }
  .stories__discovery-title { font-size: 24px; }
  .stories__discovery-sub { margin-top: 8px; font-size: 13px; line-height: 1.55; }
  .stories .stories__note { font-size: 13px; }
  .stories .stories__all { font-size: 14px; padding-inline: 20px 18px; }
}

/* ===================== 40-parents ===================== */
/* =====================================================================
   40-PARENTS - sekce Pro rodiče #pro-rodice (plan.md §3.6)
   Venkovská ilustrace (img.parents__world) + teplý přeliv (::after),
   vláček na kolejích vlevo dole, fialový dráček se srdcem vpravo dole,
   karta pro rodiče a čtyři poznámky (ul#proc-my drží starou kotvu).
   Náklon poznámek je vlastnost `rotate`, aby se nepral s transformací
   .animate-on-scroll (style.css).
   ===================================================================== */
.parents {
  /* Místní paleta sekce (den) */
  --parents-card:        #FFFAF0;
  --parents-card-edge:   #F5E7CD;
  --parents-card-shadow: 0 12px 35px #5545191C;
  --parents-note:        #FFFDF8;
  --parents-note-edge:   #ECDCB5;
  --parents-note-shadow: #EDDFBD66;
  --parents-eyebrow:     #665438;   /* 7.1:1 na kartě */
  --parents-text:        #3F4F56;
  --parents-note-text:   #46565E;
  --parents-hand:        #65543E;
  --parents-rule:        #E8DCC8;
  --parents-swash:       #E6BB70;
  --parents-overlay: linear-gradient(180deg, #FFE5AD30, #FFE6B16B 25%, #FFE8B97A 62%, transparent 85%);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pal-parents);
  padding-block: 85px 185px;
  color: var(--ink);
}

/* Ilustrace sekce a teplý přeliv přes ni */
.parents__world {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  filter: var(--world-filter);
}
.parents::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--parents-overlay);
  pointer-events: none;
}

/* Vláček na malovaných kolejích (dekorace) */
.parents__train {
  position: absolute;
  z-index: 0;
  width: 350px;
  height: auto;
  left: max(25px, calc(50% - 500px));
  bottom: -20px;
  pointer-events: none;
  user-select: none;
}

/* Fialový dráček se srdcem sedí v louce napravo od kolejí */
.parents__mascot {
  --mascot-size: 156px;
  position: absolute;
  z-index: 0;
  right: max(28px, calc(50% - 540px));
  bottom: 8px;
  pointer-events: none;
}

/* Obsah */
.parents__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: center;
}

/* Karta pro rodiče */
.parents__copy {
  background: var(--parents-card);
  border: 1px solid var(--parents-card-edge);
  border-radius: var(--radius-xl);
  padding: 32px 34px;
  box-shadow: var(--parents-card-shadow);
}
.parents__eyebrow {
  color: var(--parents-eyebrow);
  line-height: 1.6;
  text-wrap: balance;
}
.parents__title {
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  margin-block: 17px 22px;
  color: var(--ink);
}
.parents__title > span {
  position: relative;
  color: var(--action-text);
  white-space: nowrap;
}
/* Tah štětcem pod „váš hlas.“ */
.parents__title > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  border-radius: 50%;
  background: var(--parents-swash);
  transform: rotate(-3deg);
}
.parents__lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--parents-text);
  text-wrap: pretty;
}
.parents__lead > span { display: block; }
.parents__handwriting {
  margin-top: 23px;
  padding-top: 19px;
  border-top: 1px solid var(--parents-rule);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.6;
  color: var(--parents-hand);
}

/* Čtyři poznámky */
.parents__notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.parents__note {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 22px;
  background: var(--parents-note);
  border: 1px solid var(--parents-note-edge);
  border-radius: 17px;
  box-shadow: 0 5px 0 var(--parents-note-shadow);
  rotate: .6deg;
}
.parents__note:nth-child(2) { rotate: -.6deg; margin-left: 20px; }
.parents__note:nth-child(3) { rotate: .5deg; }
.parents__note:nth-child(4) { rotate: -.4deg; margin-left: 12px; }
.parents__note > .art-icon { --s: 70px; }
.parents__note-title {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.parents__note p {
  margin-top: 6px;
  text-wrap: pretty;
  font-size: 16px;
  line-height: 1.65;
  color: var(--parents-note-text);
}

/* ── Noc: teplá báze, ilustrace ztlumená přes --world-filter ─────────── */
:root[data-theme="night"] .parents {
  --parents-card:        #2B2520;
  --parents-card-edge:   #5A4E3E;
  --parents-card-shadow: 0 12px 35px #0000004D;
  --parents-note:        #2F2924;
  --parents-note-edge:   #574C3D;
  --parents-note-shadow: #0000004D;
  --parents-eyebrow:     #E2D0AB;
  --parents-text:        #DCD3C4;
  --parents-note-text:   #D6CDBE;
  --parents-hand:        #E2D0AB;
  --parents-rule:        #54493A;
  --parents-swash:       #C99A4E;
  --parents-overlay: linear-gradient(180deg, #3A322233, #3A322299 25%, #3A322280 62%, transparent 85%);
}
:root[data-theme="night"] .parents__train { filter: brightness(.83); }

/* ── ≤1150 ───────────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .parents__copy { padding: 28px; }
  .parents__title { font-size: 39px; }
  .parents__note { padding: 20px; gap: 14px; }
  .parents__note > .art-icon { --s: 60px; }
  .parents__note-title { font-size: 23px; }
  .parents__mascot { --mascot-size: 140px; }
}

/* ── ≤850: jeden sloupec, vláček a dráček spolu dole uprostřed ───────── */
@media (max-width: 850px) {
  .parents { padding-block: 65px 195px; }
  .parents__world { object-position: 65% bottom; }
  .parents {
    --parents-overlay: linear-gradient(180deg, #FFEAC482, #FFEAC4A6 70%, transparent 95%);
  }
  :root[data-theme="night"] .parents {
    --parents-overlay: linear-gradient(180deg, #3A322282, #3A3222A6 70%, transparent 95%);
  }
  .parents__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
    gap: 28px;
  }
  .parents__copy { padding: 30px; }
  .parents__title { font-size: 43px; }
  .parents__note:nth-child(n) { margin-left: 0; }
  .parents__note p { font-size: 16px; }
  .parents__train { width: 300px; left: calc(50% - 230px); bottom: -18px; }
  .parents__mascot { --mascot-size: 138px; right: auto; left: calc(50% + 78px); bottom: 14px; }
}

/* ── ≤480 ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .parents { padding-block: 65px 180px; }
  .parents__world { object-position: 59% bottom; }
  .parents__inner { gap: 22px; }
  .parents__copy { padding: 24px 22px; border-radius: 24px; }
  /* 35px jako návrh; na úzkých telefonech (360) se zmenší, ať „budou si pamatovat“ zůstane na řádku */
  .parents__title { font-size: min(35px, calc((100vw - 82px) / 8.8)); }
  .parents__lead { font-size: 16px; }
  .parents__lead > span { display: inline; }
  .parents__handwriting { font-size: 14px; margin-top: 19px; padding-top: 16px; }
  .parents__note { padding: 20px 17px; align-items: flex-start; gap: 13px; }
  .parents__note > .art-icon { --s: 49px; }
  .parents__note-title { font-size: 22px; }
  .parents__note p { font-size: 15px; }
  .parents__train { width: 250px; left: max(6px, calc(50% - 186px)); bottom: -14px; }
  .parents__mascot { --mascot-size: 116px; left: auto; right: max(10px, calc(50% - 186px)); bottom: 12px; }
}

/* ===================== 50-pricing ===================== */
/* 50-pricing: #cenik toggle chips, free + library cards (plan §3.7) */
/* =====================================================================
   CENÍK #cenik - medová sekce se dvěma kartami podle návrhu:
   karta „Váš první příběh“ (zdarma) je zvýrazněná malinovým rámem a stuhou,
   karta knihovny Hravý příběh+ je klidnější (šalvěj, obrysové tlačítko).
   Přepínač období = skutečné .age-tab záložky z pricing-section.js (čipy).
   Všechna pravidla jsou pod #cenik: přebijí starý ceník ve style.css/brand.css
   a nesahají na karty plánů v okně členství (.members-plan).
   Barvy z návrhu jsou ověřené na AA (text >= 4.5:1 na své ploše).
   ===================================================================== */

#cenik {
  /* Sekce */
  --pr-bg:        var(--pal-honey-1);
  --pr-glow-warm: #FFCA7166;
  --pr-glow-cool: #8CC6E969;
  --pr-lead:      #4D626F;   /* 5.6:1 na medu (--ink-soft by mělo jen 4.1) */
  --pr-reassure:  #596151;
  /* Karta zdarma (zvýrazněná) */
  --pr-first-bg:     #FFFCF6;
  --pr-first-edge:   #CD4A79;
  --pr-first-shadow: 0 10px 0 #EED6C6, 0 18px 40px #81513015;
  --pr-first-label:  #925033;
  --pr-first-price:  #C63E70;
  --pr-first-note:   #755444;
  --pr-first-small:  #675C4C;
  --pr-first-desc:   #53636C;
  --pr-first-unit:   #5F6B74;   /* „Kč“ u nuly; návrhová #677990 má jen 4.3:1 */
  /* Karta knihovny (klidnější) */
  --pr-lib-bg:     #F7FAF5;
  --pr-lib-edge:   #CBDACD;
  --pr-lib-shadow: 0 5px 0 #DCE6D8;
  --pr-lib-ink:    #304D4D;
  --pr-lib-label:  #5B7162;
  --pr-lib-soft:   #526764;
  --pr-lib-price:  #2B494D;
  --pr-lib-btn-bg: #FFFDF8;
  /* Společné */
  --pr-rule:      #E6DFD4;
  --pr-check:     #38745F;
  --pr-ribbon:    var(--pal-honey-badge);       /* #F9D777 */
  --pr-ribbon-ink: var(--pal-honey-badge-ink);  /* #635025 */
  --pr-tag-bg:    #EDF4E6;
  --pr-tag-edge:  #D1DDC6;
  --pr-tag-ink:   #586A3D;
  --pr-chip-bg:   #FFFFFF;
  --pr-chip-edge: var(--pr-lib-edge);
  --pr-cover-edge: #FFFFFF;

  position: relative;
  isolation: isolate;
  padding-block: 78px 65px;
  background:
    radial-gradient(ellipse at 8% 85%, var(--pr-glow-warm), transparent 48%),
    radial-gradient(ellipse at 95% 12%, var(--pr-glow-cool), transparent 50%),
    var(--pr-bg);
}
#cenik::before,
#cenik::after { display: none; }

/* ── Hlavička ─────────────────────────────────────────────────────── */
#cenik .pricing__head { text-align: center; margin: 0 auto 46px; max-width: 760px; }
#cenik .section-kicker {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  rotate: 0deg;
  color: var(--ink);
}
#cenik .section-kicker::before { display: none; }
#cenik .section-title {
  font-size: clamp(39px, 3.5vw, 50px);
  line-height: 1.15;
  letter-spacing: -1.2px;
  margin: 15px 0;
  color: var(--ink);
  text-box-trim: none;   /* style.css ořezává řádek - návrh počítá s plnou výškou */
}
#cenik .section-title em { font-style: normal; color: var(--action-text); }
#cenik .section-subtitle {
  max-width: 650px;
  margin: 12px auto 0;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--pr-lead);
  text-wrap: balance;
}

/* ── Karty ────────────────────────────────────────────────────────── */
#cenik .pricing__cards {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 28px;
  align-items: stretch;         /* obě karty končí na jedné lince */
  max-width: 1110px;
  margin: 0 auto;
}
#cenik .pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 31px 32px 25px;
  border-radius: var(--radius-xl);
  color: var(--ink);
  rotate: 0deg;
  transition: none;
}
#cenik .pricing__card:hover { transform: none; }

#cenik .pricing__card--first {
  background: var(--pr-first-bg);
  border: 2px solid var(--pr-first-edge);
  box-shadow: var(--pr-first-shadow);
}
#cenik .pricing__card--featured {
  background: var(--pr-lib-bg);
  border: 1px solid var(--pr-lib-edge);
  box-shadow: var(--pr-lib-shadow);
  color: var(--pr-lib-ink);
}
#cenik .pricing__card--featured:hover { box-shadow: var(--pr-lib-shadow); }
#cenik .pricing__card--featured::before { display: none; }

/* Stuha přes horní hranu karty zdarma */
#cenik .pricing__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin: -49px -11px 16px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--pr-ribbon);
  color: var(--pr-ribbon-ink);
  font-size: 12px;
  font-weight: var(--w-heavy);
  letter-spacing: .8px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  rotate: -1deg;
}
#cenik .pricing__ribbon .art-icon { --s: 25px; }

/* Ilustrace v záhlaví karty: ikona + vějíř obálek / štítek */
#cenik .pricing__visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 84px;
  margin: 0 0 19px;
}
#cenik .pricing__visual > .art-icon { --s: 72px; rotate: -5deg; }
#cenik .pricing__covers { display: flex; align-items: center; padding: 0 8px; }
#cenik .pricing__covers img {
  display: block;
  width: 57px;
  height: 73px;
  margin-left: -6px;
  object-fit: cover;
  border: 3px solid var(--pr-cover-edge);
  border-radius: 10px;
  background: var(--pr-lib-bg);
  box-shadow: 0 4px 7px #293E4920;
}
#cenik .pricing__covers img:nth-child(1) { rotate: -10deg; }
#cenik .pricing__covers img:nth-child(2) { position: relative; z-index: 1; translate: 0 -5px; }
#cenik .pricing__covers img:nth-child(3) { rotate: 10deg; }
#cenik .pricing__tag {
  padding: 6px 12px;
  border: 1px solid var(--pr-tag-edge);
  border-radius: 20px;
  background: var(--pr-tag-bg);
  color: var(--pr-tag-ink);
  font-size: 12px;
  font-weight: var(--w-heavy);
  letter-spacing: .8px;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: 3deg;
}

/* Text karty */
#cenik .pricing__label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--w-heavy);
  letter-spacing: 1.2px;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--pr-first-label);
}
#cenik .pricing__card--featured .pricing__label { color: var(--pr-lib-label); }
#cenik .pricing__card-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 31px;
  line-height: 1.14;
  letter-spacing: -.3px;
  color: var(--ink);
}
#cenik .pricing__card--featured .pricing__card-title { color: var(--pr-lib-ink); }
#cenik .pricing__desc {
  margin: 15px 0 0;
  min-height: 53px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--pr-first-desc);
  text-wrap: balance;
}
#cenik .pricing__card--featured .pricing__desc { color: var(--pr-lib-soft); }

/* Přepínač období: dva čipy, aktivní = inkoustový */
#cenik .pricing__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#cenik .pricing__toggle .age-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min, 44px);
  padding: 8px 16px;
  border: 1px solid var(--pr-chip-edge);
  border-radius: 30px;
  background: var(--pr-chip-bg);
  color: var(--pr-lib-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 2px 0 var(--pr-chip-edge);
  transform: none;
  transition: background-color var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease;
}
#cenik .pricing__toggle .age-tab:hover { background: var(--pr-tag-bg); box-shadow: 0 2px 0 var(--pr-chip-edge); transform: none; }
#cenik .pricing__toggle .age-tab:active { box-shadow: none; transform: none; }
#cenik .pricing__toggle .age-tab--active,
#cenik .pricing__toggle .age-tab--active:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--ink) 55%, transparent);
}
#cenik .pricing__save-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 0;
  border-radius: 20px;
  background: var(--highlight);
  color: var(--pal-honey-badge-ink);
  font-family: var(--font);
  font-size: 12px;
  font-weight: var(--w-heavy);
  letter-spacing: .2px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Cena */
#cenik .pricing__price { margin: 23px 0 0; }
#cenik .pricing__toggle + .pricing__price { margin-top: 8px; }
#cenik .pricing__card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 0;
}
#cenik .pricing__amount {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 68px;
  line-height: 1.07;
  letter-spacing: -1px;
  color: var(--pr-first-price);
  font-variant-numeric: normal;  /* style.css dává tabulární číslice - „79“ by se rozjelo */
}
/* Velké je jen číslo, měna malým Nunitem (jako v návrhu) */
#cenik .pricing__unit {
  margin-left: 7px;             /* mezera jako v návrhu (malá mezera 18px písma nestačí) */
  font: 800 18px/1 var(--font);
  letter-spacing: 0;
  color: var(--pr-lib-soft);
  white-space: nowrap;
}
#cenik .pricing__card--first .pricing__unit { color: var(--pr-first-unit); }
#cenik .pricing__card--featured .pricing__amount { color: var(--pr-lib-price); }
#cenik .pricing__period {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  color: var(--pr-lib-soft);
  white-space: nowrap;
}
#cenik .pricing__per-day {
  margin: 4px 0 0;
  font: 700 13px/1.5 var(--font);
  color: var(--pr-first-note);
}
#cenik .pricing__card--featured .pricing__per-day { color: var(--pr-lib-soft); }
#cenik .pricing__discount {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 2px 0 0;
  font: 700 13px/1.5 var(--font);
  color: var(--pr-lib-soft);
}
#cenik .pricing__original-price { color: var(--pr-lib-soft); text-decoration: line-through; text-decoration-thickness: 2px; }

/* Výhody: dvě jemné linky, zelená fajfka bez bubliny */
#cenik .pricing__features {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 22px 0;
  list-style: none;
  border-top: 1px solid var(--pr-rule);
  border-bottom: 1px solid var(--pr-rule);
  font-size: 15px;
}
#cenik .pricing__features li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}
#cenik .pricing__card--featured .pricing__features li { color: var(--pr-lib-ink); }
#cenik .pricing__features .ico,
#cenik .pricing__card--featured .pricing__features .ico {
  flex: none;
  align-self: flex-start;
  width: 16px;
  height: 16px;
  margin-top: .3em;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--pr-check);
  stroke-width: 3.2;
}

/* Tlačítka */
#cenik .pricing__card .btn {
  width: 100%;
  margin-top: 0;
  white-space: normal;
  text-align: center;
}
/* Karta zdarma je v řádku natažená na výšku karty knihovny: tlačítko dolů */
#cenik .pricing__card--first .pricing__cta { margin-top: auto; }
#cenik .pricing__cta {
  gap: 7px;
  min-height: 58px;
  padding: 12px 14px;
  font-size: 17px;
  line-height: 1.3;
}
#cenik .pricing__cta .art-icon { --s: 28px; }
#cenik .pricing__subscribe,
#cenik .pricing__card--featured .btn--ghost {
  min-height: 58px;
  padding: 12px 20px;
  border: 1px solid var(--ghost-edge);
  border-radius: 16px;
  background: var(--pr-lib-btn-bg);
  color: var(--ghost-ink);
  font-size: 16px;
  font-weight: var(--w-heavy);
  line-height: 1.3;
  box-shadow: 0 3px 0 var(--ghost-shadow);
}
#cenik .pricing__card--featured .btn--ghost:hover { background: var(--ghost-hover); color: var(--ghost-ink); }
#cenik .pricing__card--featured .btn--ghost:disabled { opacity: .7; cursor: progress; }
#cenik .pricing__cancel-note {
  margin: 15px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--pr-first-small);
}
#cenik .pricing__card--featured .pricing__cancel-note { color: var(--pr-lib-soft); }
#cenik .pricing__cancel-note a { color: inherit; text-underline-offset: 2px; }

/* Dráček (fialový, čte) sedí v rohu karty knihovny - na místě hvězdičky z návrhu */
#cenik .pricing__mascot {
  position: absolute;
  top: auto;
  right: -24px;
  bottom: -30px;
  z-index: 2;
  --mascot-size: 100px;
  pointer-events: none;
}

/* Ujištění pod kartami */
#cenik .pricing__reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 650px;
  margin: 35px auto 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--pr-reassure);
}
#cenik .pricing__reassurance .art-icon { --s: 35px; }

/* ── Pohyb: jen bez reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  #cenik .pricing__covers img { transition: rotate .25s var(--ease-out-quint, ease-out), translate .25s var(--ease-out-quint, ease-out); }
  #cenik .pricing__card--first:hover .pricing__covers img:nth-child(1) { rotate: -14deg; translate: -3px 0; }
  #cenik .pricing__card--first:hover .pricing__covers img:nth-child(2) { translate: 0 -9px; }
  #cenik .pricing__card--first:hover .pricing__covers img:nth-child(3) { rotate: 14deg; translate: 3px 0; }
  #cenik .pricing__card--featured .btn--ghost { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
  #cenik .pricing__card--featured .btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ghost-shadow); }
  #cenik .pricing__card--featured .btn--ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ghost-shadow); }
}
@media (hover: none) {
  #cenik .pricing__card--featured .btn--ghost:hover { background: var(--pr-lib-btn-bg); transform: none; box-shadow: 0 3px 0 var(--ghost-shadow); }
}

/* ── Tablet ≤ 1150 ──────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  #cenik .pricing__card { padding-inline: 26px; }
  #cenik .pricing__ribbon { margin-inline: -5px; }
}

/* ── ≤ 850: karty pod sebou ─────────────────────────────────────────── */
@media (max-width: 850px) {
  #cenik .pricing__head { max-width: 650px; }
  #cenik .pricing__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 500px;
  }
  #cenik .pricing__card--featured { margin-top: 6px; }
}

/* ── Telefon ≤ 480 ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #cenik .section-title { font-size: 39px; }
  #cenik .section-subtitle { font-size: 16px; }
  #cenik .pricing__head { margin-bottom: 47px; }
  #cenik .pricing__card { padding: 27px 23px 24px; border-radius: var(--radius-lg); }
  #cenik .pricing__card--featured { padding-top: 25px; }
  #cenik .pricing__ribbon { margin: -46px -11px 14px; padding: 8px 9px; gap: 6px; letter-spacing: .5px; }
  #cenik .pricing__ribbon .art-icon { --s: 22px; }
  #cenik .pricing__visual { height: 72px; margin-bottom: 17px; }
  #cenik .pricing__visual > .art-icon { --s: 60px; }
  #cenik .pricing__covers img { width: 49px; height: 63px; }
  #cenik .pricing__tag { padding: 6px 10px; letter-spacing: .6px; }
  #cenik .pricing__card-title { font-size: 29px; }
  #cenik .pricing__amount { font-size: 62px; }
  #cenik .pricing__unit,
  #cenik .pricing__period { font-size: 17px; }
  #cenik .pricing__features,
  #cenik .pricing__features li { font-size: 14px; }
  #cenik .pricing__cta { font-size: 15px; gap: 5px; }
  #cenik .pricing__cta .art-icon { --s: 24px; }
  #cenik .pricing__cancel-note { font-size: 12px; }
  #cenik .pricing__mascot { --mascot-size: 76px; right: -12px; bottom: -26px; }
  #cenik .pricing__reassurance {
    align-items: flex-start;
    margin-top: 31px;
    padding-inline: 12px;
    font-size: 14px;
    text-align: left;
  }
  #cenik .pricing__reassurance .art-icon { --s: 30px; }
}

/* ── Noc: teplá báze, medová sekce ztlumená, karty na tmavých plochách ── */
:root[data-theme="night"] #cenik {
  --pr-bg:        var(--pal-honey-1);                 /* #332B1C */
  --pr-glow-warm: #FFCA7114;
  --pr-glow-cool: #8CC6E914;
  --pr-lead:      var(--ink-soft);
  --pr-reassure:  var(--ink-soft);
  --pr-first-bg:     var(--card);
  --pr-first-edge:   #E0709A;
  --pr-first-shadow: 0 10px 0 color-mix(in oklab, #CC3369 34%, var(--paper)), 0 18px 40px #0000004D;
  --pr-first-label:  var(--pal-apricot-ink);          /* #E9C49C */
  --pr-first-price:  var(--action-text);              /* #F397B6 */
  --pr-first-note:   var(--pal-apricot-ink);
  --pr-first-small:  var(--ink-soft);
  --pr-first-desc:   var(--ink-soft);
  --pr-first-unit:   var(--ink-soft);
  --pr-lib-bg:     var(--pal-sage-1);                 /* #252E2A */
  --pr-lib-edge:   var(--pal-sage-edge);
  --pr-lib-shadow: 0 5px 0 var(--pal-sage-shadow);
  --pr-lib-ink:    var(--ink);
  --pr-lib-label:  var(--pal-sage-ink);               /* #B9D3A8 */
  --pr-lib-soft:   var(--ink-soft);
  --pr-lib-price:  var(--ink);
  --pr-lib-btn-bg: color-mix(in oklab, var(--pal-sage-1) 70%, var(--paper));
  --pr-rule:      var(--line);
  --pr-check:     var(--pal-sage-ink);
  --pr-tag-bg:    var(--pal-sage-badge);
  --pr-tag-edge:  var(--pal-sage-edge);
  --pr-tag-ink:   var(--pal-sage-badge-ink);
  --pr-chip-bg:   color-mix(in oklab, var(--pal-sage-1) 70%, var(--paper));
  --pr-cover-edge: var(--card);
}
:root[data-theme="night"] #cenik .pricing__covers img { filter: brightness(.85) saturate(.9) sepia(.12); }
:root[data-theme="night"] #cenik .pricing__save-badge { background: var(--highlight); color: #3A2E10; }

/* ===================== 60-faq ===================== */
/* =====================================================================
   60-FAQ - Otázky rodičů #otazky (plan §3.8)
   Jeden sloupec (max 820), bílé karty <details>, „+“ v kolečku, které se
   při otevření otočí na „ד. Sekce má šalvějově bílé pozadí s klenutým
   horním okrajem: o hloubku klenby (--faq-curve) se přesouvá přes konec
   ceníku, takže v rozích klenby prosvítá pozadí ceníku (sekce nad ní).
   Vlevo od nadpisu přemýšlí modrý dráček, vpravo nahoře kompas jako
   v návrhu. Starší pravidla (style.css, brand.css: dva sloupce, inkoustové
   obrysy, šipka) přebíjí vyšší specificita .faq .faq__*.
   ===================================================================== */
.faq {
  --faq-bg:         var(--pal-faq);
  --faq-card:       var(--card);
  --faq-edge:       #E2E7DC;
  --faq-edge-hover: var(--pal-sage-edge);
  --faq-chip:       #EDF1E9;
  --faq-chip-hover: #E1E9DA;
  --faq-chip-ink:   var(--pal-sage-ink);   /* #829478 z návrhu má jen 2.8:1 */
  --faq-curve:      28px;
  --faq-mascot:     132px;
  --faq-under:      20px;   /* klenba #vyzva pod FAQ zasahuje o tolik dovnitř (70-bedtime.css) */

  position: relative;
  z-index: 1;
  isolation: isolate;
  margin-top: calc(-1 * var(--faq-curve));
  padding-block: calc(37px + var(--faq-curve)) calc(90px + var(--faq-under));   /* 65 od vrcholu klenby jako v návrhu */
  background: var(--faq-bg);
  border-radius: 50% 45% 0 0 / calc(var(--faq-curve) - 6px) var(--faq-curve) 0 0;
}
:root[data-theme="night"] .faq {
  --faq-edge:       var(--line);
  --faq-edge-hover: color-mix(in oklab, var(--pal-sage-ink) 45%, var(--card));
  --faq-chip:       color-mix(in oklab, var(--pal-sage-ink) 16%, var(--card));
  --faq-chip-hover: color-mix(in oklab, var(--pal-sage-ink) 26%, var(--card));
  --faq-chip-ink:   var(--pal-sage-ink);
}

.faq .faq__inner { position: relative; }

/* Kompas z návrhu (ilustrovaný sprite), jen dekorace */
.faq .faq__compass {
  --s: 100px;
  position: absolute;
  top: -38px;
  right: 0;
  rotate: 18deg;
  opacity: .8;
  pointer-events: none;
}
:root[data-theme="night"] .faq .faq__compass { opacity: .55; filter: brightness(.85) saturate(.85); }

/* ── Hlavička: text na středu, dráček vlevo vedle něj ── */
.faq .faq__head {
  display: grid;
  grid-template-columns: minmax(var(--faq-mascot), 1fr) minmax(0, max-content) minmax(var(--faq-mascot), 1fr);
  align-items: center;
  column-gap: 24px;
  margin: 0;
}
.faq .faq__mascot {
  grid-column: 1;
  justify-self: end;
  --mascot-size: var(--faq-mascot);
  /* dráček je vyšší než nadpis: přesahuje nahoru i dolů, hlavička tak nemění výšku */
  margin-block: calc((var(--faq-mascot) - 76px) / -2);
}
.faq .faq__head-text { grid-column: 2; text-align: center; min-width: 0; }
.faq .faq__eyebrow { margin: 0; color: var(--ink); }
.faq .faq__title {
  margin: 14px 0 0;
  max-width: none;
  font-size: 40px;
  letter-spacing: -1.2px;
  line-height: 1.07;
  color: var(--ink);
  text-wrap: balance;
  text-box-trim: none;   /* style.css ořezává .section-title na verzálky - návrh počítá s plným řádkem */
}

/* ── Seznam: jeden sloupec ── */
.faq .faq__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 820px;
  margin: 48px auto 0;          /* dráček přesahuje hlavičku o 28 px - nesmí sedět na první otázce */
}
.faq .faq__item {
  background: var(--faq-card);
  border: 1px solid var(--faq-edge);
  border-radius: 16px;
  box-shadow: none;
  translate: none;
}
.faq .faq__item[open] { background: var(--faq-card); border-color: var(--faq-edge-hover); box-shadow: none; }

.faq .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 20px 24px;
  border-radius: 15px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: var(--w-heavy);
  line-height: 1.55;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq .faq__q::-webkit-details-marker { display: none; }
.faq .faq__q::marker { content: ""; }
.faq .faq__q-text { min-width: 0; text-wrap: pretty; }
.faq .faq__q:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 3px; }

/* „+“ v kolečku; otevřeno = otočené o 45° na „ד */
.faq .faq__chevron {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: var(--faq-chip);
  color: var(--faq-chip-ink);
  rotate: 0deg;
  transform: none;
}
.faq .faq__chevron svg { width: 14px; height: 14px; }
.faq .faq__item[open] .faq__chevron { rotate: 45deg; background: var(--faq-chip); color: var(--faq-chip-ink); }
.faq .faq__q:hover .faq__chevron { transform: none; }

.faq .faq__a {
  margin: -6px 0 0;
  padding: 0 64px 20px 24px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Kontakt pod seznamem */
.faq .faq__more {
  max-width: 820px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-faded);   /* --ink-soft má na pozadí FAQ jen 4.45:1 */
}
.faq .faq__more a {
  display: inline-block;
  padding-block: 10px;            /* cíl ťuknutí 44+ px bez posunu řádku */
  margin-block: -10px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--faq-edge-hover);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* Najetí myší jen tam, kde myš je (na dotyku by „zamrzlo“) */
@media (hover: hover) {
  .faq .faq__item:hover { border-color: var(--faq-edge-hover); translate: none; box-shadow: none; }
  .faq .faq__q:hover .faq__chevron { background: var(--faq-chip-hover); }
  .faq .faq__more a:hover { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: no-preference) {
  .faq .faq__item { transition: border-color var(--dur-fast) var(--ease-out-quint); }
  .faq .faq__chevron { transition: rotate .3s var(--ease-out-quint), background-color var(--dur-fast) var(--ease-out-quint); }
}

/* ── Šířky (zlomy z návrhu) ── */
@media (max-width: 1150px) {
  .faq .faq__compass { --s: 75px; right: -12px; }
}
@media (max-width: 850px) {
  .faq { --faq-mascot: 112px; padding-block: calc(40px + var(--faq-curve)) calc(65px + var(--faq-under)); }
  .faq .faq__compass { --s: 65px; top: -44px; right: -9px; opacity: .65; }
  .faq .faq__title { font-size: 35px; }
  .faq .faq__q { font-size: 16px; }
}
@media (max-width: 719px) {
  .faq { --faq-mascot: 104px; }
  .faq .faq__head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .faq .faq__mascot { margin-block: 0; }
  .faq .faq__list { margin-top: 33px; }   /* dráček stojí nad textem, nepřesahuje */
}
@media (max-width: 480px) {
  .faq { --faq-curve: 18px; padding-top: calc(26px + var(--faq-curve)); }
  .faq .faq__compass { --s: 52px; top: -30px; right: -6px; }
  .faq .faq__title { font-size: 33px; }
  .faq .faq__list { margin-top: 26px; }
  .faq .faq__q { gap: 13px; padding: 18px 15px; font-size: 15px; }
  .faq .faq__a { padding: 0 20px 18px 15px; font-size: 14px; }
  .faq .faq__more { font-size: 14px; }
}

/* ===================== 70-bedtime ===================== */
/* =====================================================================
   70-BEDTIME - závěrečná výzva #vyzva „na dobrou noc“ (plan.md §3.9)
   Navy sekce přes celou šířku s malovaným vesmírem (img.bedtime__world)
   a přelivem zleva (::before), měsíc s astronautem vpravo (na telefonu
   pod textem), modrý spící dráček dole mezi textem a měsícem, hvězdičky
   ✧ ✦ ✧ blikají (jen bez reduced motion). Ve dne i v noci stejná.
   Třída .cta-section zůstává (JS a patička na ni míří) - její starší
   vzhled ze style.css a brand.css se tu neutralizuje, brand.css se nemění.
   ===================================================================== */
.cta-section.bedtime {
  /* Místní paleta (navy ve dne i v noci) */
  --bedtime-eyebrow: #F4D78E;   /* 10.3:1 na navy */
  --bedtime-text:    #D9E2F1;   /* 10.6:1 na navy */
  --bedtime-star:    #E2C17B;
  --bedtime-overlay: linear-gradient(90deg, #233953C9, transparent 65%);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-height: 440px;
  margin: 0;
  /* Klenba zasahuje do spodku FAQ (to si o stejných 20 px prodlouží padding),
     takže v rozích klenby je pozadí FAQ, ne papír stránky */
  margin-top: -20px;
  z-index: 2;
  padding: 85px 0 95px;
  background: var(--pal-bedtime);
  color: #fff;
  border: 0;
  border-radius: 50% 50% 0 0 / 20px 20px 0 0;
  box-shadow: none;
}
/* Noc z brand.css by panel přebarvila na papír s obrysem - sekce zůstává navy */
:root[data-theme="night"] .cta-section.bedtime {
  background: var(--pal-bedtime);
  color: #fff;
  border: 0;
}

/* Vesmír a přeliv pod textem (staré hvězdičky z ::before nahrazuje přeliv) */
.bedtime__world {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 65%;
  pointer-events: none;
  user-select: none;
}
.cta-section.bedtime::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bedtime-overlay);
  pointer-events: none;
}
.cta-section.bedtime::after { display: none; }

/* Měsíc s malým astronautem (dekorace) */
.bedtime__moon {
  position: absolute;
  z-index: 0;
  width: 390px;
  height: auto;
  max-width: none;
  right: max(15px, calc(50% - 610px));
  top: 50%;
  transform: translateY(-48%);
  pointer-events: none;
  user-select: none;
}

/* Spící modrý dráček na měsíční pláni mezi textem a měsícem */
.cta-section.bedtime .cta-section__mascot {
  --mascot-size: 210px;
  position: absolute;
  z-index: 0;
  left: calc((100% - var(--wrap)) / 2 + var(--wrap) * .46);
  bottom: 4px;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 30px #F8CE7630);
}

/* Text vlevo, pravá část patří měsíci */
.cta-section.bedtime .cta-section__inner {
  position: relative;
  z-index: 1;
  display: block;
  padding-right: 41%;
  text-align: left;
}
.bedtime__copy { max-width: none; }
.bedtime__eyebrow {
  margin: 0;
  color: var(--bedtime-eyebrow);
}
.bedtime__title {
  margin: 18px 0 0;
  color: #fff;
  font-size: 52px;
  line-height: 1.09;
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.bedtime__desc {
  margin: 20px 0 0;
  text-shadow: 0 1px 8px #16243ACC;   /* čitelnost přes malované hvězdy */
  color: var(--bedtime-text);
  font-size: 16px;
  line-height: 1.6;
}

/* CTA: sdílené primární tlačítko (brand.css ho tu dřív měnil) */
.cta-section.bedtime .cta-section__btn {
  margin-top: 30px;
  gap: 10px;
}
.cta-section.bedtime .cta-section__btn .art-icon {
  --s: 31px;
  filter: drop-shadow(0 2px 2px #64261840);
}
.cta-section.bedtime .btn--primary,
.cta-section.bedtime .btn--primary:hover {
  background: var(--cta-bg);
  color: var(--cta-ink);
  border: 0;
  box-shadow: 0 5px 0 var(--action-2);
  transform: none;
}
.cta-section.bedtime .btn--primary:hover { background: var(--cta-bg-hover); }
.cta-section.bedtime .btn--primary:active { box-shadow: 0 2px 0 var(--action-2); }
@media (prefers-reduced-motion: no-preference) {
  .cta-section.bedtime .btn--primary:hover  { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--action-2); }
  .cta-section.bedtime .btn--primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--action-2); }
}
/* Dotyk: style.css by po ťuknutí nechal tlačítko žluté (stará výzva) */
@media (hover: none) {
  .cta-section.bedtime .btn--primary:hover:not(.btn--choice--picked) {
    background: var(--cta-bg);
    box-shadow: 0 5px 0 var(--action-2);
    transform: none;
  }
}

.cta-section.bedtime .cta-section__trust {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--bedtime-text);
  font: 700 14px/1.4 var(--font);
  text-shadow: 0 1px 8px #16243ACC;
}
.bedtime__trust-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--bedtime-eyebrow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hvězdičky kolem textu (pozice z návrhu, vztažené k obsahu sekce) */
.bedtime__stars span {
  position: absolute;
  color: var(--bedtime-star);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.bedtime__stars span:nth-child(1) { left: -32px; top: -42px; font-size: 35px; opacity: .5; }
.bedtime__stars span:nth-child(2) { right: 43%; top: 8px; font-size: 21px; }
/* třetí v návrhu right:45% - tam teď spí dráček, proto o kus vlevo */
.bedtime__stars span:nth-child(3) { right: 63%; bottom: -35px; font-size: 30px; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .bedtime__stars span { animation: twinkle 4s ease-in-out infinite; }
  .bedtime__stars span:nth-child(2) { animation-delay: 1s; }
  .bedtime__stars span:nth-child(3) { animation-delay: 2s; }
}
@media (prefers-reduced-motion: reduce) {
  .bedtime__stars span { animation: none !important; }
}

/* ── ≤1150: užší kontejner, menší měsíc ─────────────────────────────── */
@media (max-width: 1150px) {
  .bedtime__title { font-size: 46px; }
  .bedtime__moon { width: 340px; right: 10px; }
  /* vlevo od měsíce (ten má 340 px a 10 px od kraje), ne pod jeho cípem */
  .cta-section.bedtime .cta-section__mascot { --mascot-size: 170px; left: auto; right: 372px; }
  .bedtime__stars span:nth-child(1) { left: -18px; }
}

/* ── ≤850 (tablet): text na 65 %, měsíc přesahuje vpravo ────────────── */
@media (max-width: 850px) {
  .cta-section.bedtime { padding-block: 65px; min-height: 380px; }
  .cta-section.bedtime { --bedtime-overlay: linear-gradient(90deg, #233953B3, transparent 85%); }
  .bedtime__world { object-position: center bottom; }
  .cta-section.bedtime .cta-section__inner { padding-right: 35%; }
  .bedtime__title { font-size: 37px; }
  .bedtime__desc { font-size: 15px; }
  .bedtime__moon { width: 270px; right: -35px; }
  .cta-section.bedtime .cta-section__btn { font-size: 15px; padding-inline: 18px; }
  /* spí pod cípem měsíce, napravo od tlačítka */
  .cta-section.bedtime .cta-section__mascot { --mascot-size: 150px; right: 200px; bottom: 0; }
}

/* ── ≤600 (telefon): text na střed, měsíc pod ním, dráček spí vlevo dole ── */
@media (max-width: 600px) {
  .cta-section.bedtime {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: 55px 25px;
    --bedtime-overlay: linear-gradient(180deg, #1E355280, transparent 80%);
  }
  .bedtime__world { object-position: 55% bottom; }
  .cta-section.bedtime .cta-section__inner { order: 1; padding-right: 0; text-align: center; }
  .bedtime__title { font-size: 42px; }
  .cta-section.bedtime .cta-section__trust { justify-content: center; }
  .bedtime__moon {
    order: 2;
    position: relative;
    display: block;
    width: min(240px, 60%);
    right: auto;
    top: auto;
    transform: rotate(-5deg);
    margin: 30px max(10px, 4%) -15px auto;
  }
  .cta-section.bedtime .cta-section__mascot { --mascot-size: 124px; left: max(6px, 3%); right: auto; bottom: 4px; }
  .bedtime__stars span:nth-child(2) { right: 0; top: -20px; }
  /* třetí do prázdného nebe vlevo od měsíce (v návrhu padla na raketu) */
  .bedtime__stars span:nth-child(3) { right: auto; left: 7%; bottom: -78px; }
}
@media (max-width: 480px) {
  .bedtime__title { font-size: 38px; }
  .bedtime__desc { font-size: 15px; }
  .cta-section.bedtime .cta-section__btn { font-size: 14px; padding-inline: 18px; gap: 6px; }
  .cta-section.bedtime .cta-section__btn .art-icon { --s: 26px; }
  .bedtime__stars span:nth-child(1) { left: -6px; top: -36px; font-size: 28px; }
}

/* ===================== 80-footer ===================== */
/* =====================================================================
   80-FOOTER - footer.site-footer v pohádkovém vzhledu (plán §3.10)
   Papír bez rámečku, značka = hlava dráčka + „hravý / příběh.“ a věta
   „Příběhy, které prožijete spolu.“; skupiny odkazů zůstávají (zrušení
   předplatného, cookies, kontakt) - bohatší než tři odkazy návrhu.
   Odkazy 12-13 px tučně (900), na dotyku řádky 44 px.
   ===================================================================== */

.site-footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 0;
  padding-top: 56px;
}
/* Bez rezervy 5rem pro #sticky-cta (style.css) - pilulka je skrytá (10-header.css) */
.site-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
/* Za novou večerní sekcí (navy přes celou šířku) bez mezery; stará karta
   výzvy si odstup nechává (brand.css), dokud ji sekce „bedtime“ nenahradí */
.cta-section.bedtime + .sticky-cta + .site-footer,
.cta-section.bedtime + .site-footer { margin-top: 0; }
:root[data-theme="night"] .site-footer { background: var(--paper); color: var(--ink); }

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

/* ── Značka ─────────────────────────────────────────────────────────── */
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 14px;
}
.site-footer__mark {
  height: 40px;
  width: auto;
  display: block;
  rotate: -6deg;
  transform-origin: 50% 85%;
  transition: rotate var(--dur-fast) var(--spring-pop);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-footer__brand:hover .site-footer__mark { rotate: -14deg; }
}
.site-footer__logo-text {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 21px;
  line-height: 0.83;
  letter-spacing: -0.8px;
  color: var(--ink);
  white-space: nowrap;
}
.site-footer__logo-text > span { display: block; }
.site-footer__logo-dot { font-style: normal; color: var(--action); }
:root[data-theme="night"] .site-footer__logo-dot { color: var(--action-text); }

.site-footer__tagline {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink-2);
}
.site-footer__text {
  max-width: 34ch;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── Skupiny odkazů ─────────────────────────────────────────────────── */
.site-footer__col { min-width: 0; }
.site-footer__heading {
  margin: 0 0 10px;
  padding-top: 13px;              /* lícuje s textem značky */
  font-family: var(--font);
  font-size: 12px;
  font-weight: var(--w-heavy);
  letter-spacing: 1.5px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--pal-sage-ink);
}
.site-footer__link,
button.site-footer__link {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 4px 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--w-heavy);
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-quint);
}
.site-footer__link:hover {
  color: var(--action-text);
  transform: none;
  text-decoration: underline 3px #F2CC69;
  text-underline-offset: 5px;
}

.site-footer__social { gap: 8px; margin-top: 10px; }
.site-footer__social-link {
  width: 44px;                    /* dotykový cíl; zvětšené ::after sousedů se nepřekrývají */
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--pal-sage-1);
  color: var(--pal-sage-ink);
  box-shadow: 0 3px 0 var(--pal-sage-shadow);
}
/* Zvětšená zásahová plocha (style.css ::after, -6 px) jen do půlky mezery,
   ať se sousední ikony nepřekrývají */
.site-footer__social-link::after { inset: -4px; }
.site-footer__social-link:hover { color: var(--on-candy); transform: none; box-shadow: 0 3px 0 var(--pal-honey-edge); }
@media (prefers-reduced-motion: no-preference) {
  .site-footer__social-link:hover { transform: translateY(-2px) rotate(-6deg); }
}

/* ── Spodní řádek ───────────────────────────────────────────────────── */
.site-footer__bottom {
  width: var(--wrap);
  max-width: none;
  margin: 34px auto 0;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  text-align: left;
}
.site-footer__bottom p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-soft);
}
.site-footer__bottom .site-footer__operator { margin-top: 4px; font-weight: 600; }

/* ── Tablet: značka přes celou šířku, odkazy ve třech sloupcích ─────── */
@media (max-width: 980px) {
  .site-footer { padding-top: 44px; }
  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .site-footer__col--brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
  }
  .site-footer__brand { margin: 0; grid-row: 1 / span 2; }
  .site-footer__tagline { margin: 0; align-self: end; }
  .site-footer__text { align-self: start; max-width: 52ch; }
  .site-footer__heading { padding-top: 0; }
  /* Dotyk: řádek odkazu 44 px */
  .site-footer__link,
  button.site-footer__link { min-height: 44px; padding-block: 0; font-size: 14px; }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .site-footer__col--brand { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .site-footer__brand { grid-row: auto; margin-bottom: 2px; }
  .site-footer__tagline { align-self: auto; }
  /* Kontakt (poslední skupina) přes celou šířku */
  .site-footer__col:last-child { grid-column: 1 / -1; }
}

/* ===================== 85-ui ===================== */
/* =====================================================================
   85-UI - sdílené rozhraní mimo landing (plan.md §4)
   Dialogy (přihlášení, předplatné, souhlas, uvítání, potvrzení, smazání
   účtu, in-app, detail knihy), katalog „Všechny příběhy“ (filtry, karty
   knih), oblíbené a prázdné stavy, čtečka (lišta, obrázek, karta, volby,
   konec příběhu, nabídky), toasty a plovoucí výzva.
   Jen vzhled: žádné ID, třídy ani JS se nemění. .modal-overlay se tu
   NIKDY nesahá na display (otevírá ho app.js inline stylem).
   ZAMČENÉ: barvy voleb --grass/--sky/--tang/--cherry, jejich pořadí a
   tvary - z návrhu se bere jen chrom (rádius, okraj, tvrdý stín).
   Pohyb jen v prefers-reduced-motion: no-preference.
   ===================================================================== */

:root {
  --ui-overlay:       #12253CBB;                 /* závoj pod dialogem (návrh) */
  --ui-dialog-shadow: 0 30px 120px #11122B50;
  --ui-pop-shadow:    0 18px 46px -12px #12253C3D;   /* plovoucí nabídky */
  --ui-book-paper:    #FFFEF8;                   /* papír knížky (jako ukázka v hero) */
  --ui-bar-edge:      #E7E1D0;                   /* skleněná lišta = pilulka navigace */
  --ui-bar-shadow:    #DDD5C766;
  --ui-gold:          #F9D777;                   /* hlavní akce konce příběhu */
  --ui-gold-shade:    #D4B052;
  --ui-gold-ink:      #4F3F14;
  --ui-toast-bg:      #FFF6D6;
  --ui-toast-edge:    #E8C66E;
  --ui-toast-ink:     #715628;                   /* 6.4:1 na --ui-toast-bg */
}
:root[data-theme="night"] {
  --ui-overlay:       #0B0912CC;
  --ui-dialog-shadow: 0 30px 120px #000000A6;
  --ui-pop-shadow:    0 18px 46px -12px #000000A6;
  --ui-book-paper:    var(--card);
  --ui-bar-edge:      #4A4560;
  --ui-bar-shadow:    #0B091266;
  --ui-gold:          color-mix(in oklab, #F9D777 34%, #332B1C);
  --ui-gold-shade:    color-mix(in oklab, #F9D777 16%, #1A1626);
  --ui-gold-ink:      #F6E3AE;
}

/* =====================================================================
   DIALOGY
   ===================================================================== */
/* Závoj: jen pozadí a rozmazání (display řídí výhradně app.js) */
.modal-overlay {
  background: var(--ui-overlay);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.modal,
.book-detail {
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-dialog-shadow);
}
.modal { padding: 34px 30px 30px; }

/* Zavírací křížek: čtvereček z nástrojů čtečky v návrhu (35 px, rádius 10);
   zásahová zóna 46 px dává ::after ze style.css (inset -6px -> tady -5px) */
.modal__close {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--line);
}
.modal__close::after { inset: -5px; }
.modal__close:hover { background: var(--pal-sage-1); color: var(--ink); }
.modal__close:active { transform: translateY(1px); box-shadow: none; }

.modal__title,
.consent-dialog__title,
.onboarding__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(26px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--ink);
  text-wrap: balance;
}
.modal__title { margin-bottom: 22px; }

/* ── Pole formulářů ──────────────────────────────────────────────────── */
.field { gap: 6px; }
.field__label {
  padding-left: 2px;
  font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field__hint { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-faded); }

.auth-form__input,
.favorites-search__input {
  min-height: 50px;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme="night"] .auth-form__input,
:root[data-theme="night"] .favorites-search__input { background: var(--paper-2); }
.auth-form__input:hover,
.favorites-search__input:hover { border-color: color-mix(in oklab, var(--line-strong) 55%, var(--ink)); }
/* Jeden fokus pro všechna pole: plný prstenec (den #C46A12, noc žlutá z brand.css) */
.auth-form__input:focus-visible,
.favorites-search__input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--line-strong);
  background: var(--card);
  box-shadow: none;
}
.auth-form__input[aria-invalid="true"] { border-color: var(--status-error); box-shadow: 0 0 0 3px var(--cherry-soft); }

.field__eye { color: var(--ink-soft); }
.field__eye:hover,
.field__eye[aria-pressed="true"] { background: var(--pal-sage-1); color: var(--ink); }

.auth-form { gap: 12px; }
.auth-form__submit { margin-top: 6px; }
.auth-form__intro { font-size: 16px; color: var(--ink-soft); }

/* „nebo“: štítek jako .eyebrow, tenké linky */
.auth-form__divider { justify-content: center; margin: 20px 0 10px; }
.auth-form__divider span {
  padding: 0 12px;
  font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font);
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-faded);
}
.auth-form__divider::before,
.auth-form__divider::after { height: 1px; background: var(--line); }

/* Odkazy: šalvějový textový odkaz (jako dřívější odkaz pod výzvou v hero) */
.auth-form__toggle { margin-top: 18px; font-size: 15px; color: var(--ink-soft); }
.auth-form__toggle a {
  color: var(--ghost-ink);
  font-weight: var(--w-heavy);
  text-decoration: underline 2px;
  text-decoration-color: color-mix(in oklab, var(--ghost-ink) 45%, transparent);
  text-underline-offset: 5px;
}
.auth-form__toggle a:hover { text-decoration-color: currentColor; }
.auth-form__helper a { color: var(--ink-soft); text-underline-offset: 4px; }
.auth-form__helper a:hover { color: var(--ghost-ink); text-decoration: underline; }

/* Zaškrtávátko: šalvějová plocha, bílá fajfka (v noci tmavá) */
.auth-form__consent { gap: 10px; font-weight: 700; }
.auth-form__consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--line);
}
.auth-form__consent input:checked { background: var(--ghost-ink); border-color: var(--ghost-ink); }
.auth-form__consent input:checked::after { border-color: var(--card); }
.auth-form__consent input:active { transform: translateY(1px); box-shadow: none; }

/* ── Tlačítka v dialozích ────────────────────────────────────────────── */
/* Google = vedlejší tlačítko (šalvějové obrysové jako .btn--ghost) */
.btn--google {
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--ghost-edge);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--ghost-shadow);
}
.btn--google:hover { background: var(--ghost-hover); transform: none; box-shadow: 0 3px 0 var(--ghost-shadow); }
.btn--google:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ghost-shadow); }

/* Nevratná akce: bílá s třešňovým okrajem a tečkou (ne malinová - ta je CTA) */
.btn--danger {
  background: var(--card);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--cherry) 55%, var(--card));
  box-shadow: 0 3px 0 color-mix(in oklab, var(--cherry) 28%, var(--card));
}
.btn--danger::before { border: 0; width: 10px; height: 10px; }
.btn--danger:hover:not(:disabled) { background: var(--cherry-soft); transform: none; box-shadow: 0 3px 0 color-mix(in oklab, var(--cherry) 28%, var(--card)); }
.btn--danger:disabled { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); box-shadow: none; }

.btn--portal {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  box-shadow: 0 4px 0 color-mix(in oklab, var(--ink) 60%, #000);
}
.btn--portal:hover { background: color-mix(in oklab, var(--ink) 88%, var(--paper)); transform: none; box-shadow: 0 4px 0 color-mix(in oklab, var(--ink) 60%, #000); }
.btn--danger-ghost { font-weight: var(--w-heavy); border-radius: 14px; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn--google:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ghost-shadow); }
  .btn--danger:hover:not(:disabled) { transform: translateY(-2px); }
  .btn--portal:hover { transform: translateY(-2px); }
}
/* Dotyk: ťuknutí nesmí nechat viset šedý stín ze style.css (.btn:hover v hover:none) */
@media (hover: none) {
  .btn--google:hover:not(.btn--choice--picked) { background: var(--card); box-shadow: 0 3px 0 var(--ghost-shadow); }
  .btn--danger:hover:not(:disabled):not(.btn--choice--picked) { background: var(--card); box-shadow: 0 3px 0 color-mix(in oklab, var(--cherry) 28%, var(--card)); }
  .btn--portal:hover:not(.btn--choice--picked) { background: var(--ink); box-shadow: 0 4px 0 color-mix(in oklab, var(--ink) 60%, #000); }
}

/* ── Potvrzení, souhlas, in-app, smazání účtu ───────────────────────── */
.consent-dialog__icon { margin-bottom: 14px; }
.consent-dialog__icon .icon-bubble {
  width: 68px;
  height: 68px;
  border: 1px solid var(--pal-sage-edge);
  border-radius: 50%;
  background: var(--pal-sage-1);
  color: var(--pal-sage-ink);
  box-shadow: 0 3px 0 var(--pal-sage-shadow);
}
.consent-dialog__icon .icon-bubble--amber {
  border-color: var(--pal-honey-edge);
  background: var(--pal-honey-1);
  color: var(--pal-honey-ink);
  box-shadow: 0 3px 0 var(--pal-honey-shadow);
}
.consent-dialog__icon .icon-bubble--green {
  border-color: var(--pal-sage-edge);
  background: var(--pal-sage-1);
  color: var(--pal-sage-ink);
}
.consent-dialog__title { margin-bottom: 10px; }
.consent-dialog__text { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 22px; }
.consent-dialog__actions { gap: 12px; }
/* Přidat na plochu (iPhone): očíslovaný návod místo odstavce */
.install-steps { margin: 0 0 22px; padding-left: 1.35em; text-align: left; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.install-steps li + li { margin-top: 8px; }
.install-steps strong { color: var(--ink); font-weight: 800; }
/* Nápověda pod tlačítkem Google v aplikaci z plochy na iPhonu */
.auth-form__hint { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-align: center; }

/* ── Uvítání: tři výhody v barevných rodinách ───────────────────────── */
.onboarding__subtitle { font-size: 16px; color: var(--ink-soft); margin-bottom: 22px; }
.onboarding__features { gap: 10px; margin-bottom: 24px; }
.onboarding__feature {
  --f-bg: var(--pal-sage-1); --f-edge: var(--pal-sage-edge); --f-ink: var(--pal-sage-ink);
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--f-bg);
  border: 1px solid var(--f-edge);
  border-radius: 17px;
  font-weight: 800;
  line-height: 1.4;
}
.onboarding__feature:nth-child(2) { --f-bg: var(--pal-lav-1); --f-edge: var(--pal-lav-edge); --f-ink: var(--pal-lav-ink); }
.onboarding__feature:nth-child(3) { --f-bg: var(--pal-apricot-1); --f-edge: var(--pal-apricot-edge); --f-ink: var(--pal-apricot-ink); }
.onboarding__feature-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--f-edge);
  border-radius: 50%;
  background: var(--card);
  color: var(--f-ink);
}
.onboarding__feature-icon .ico { width: 22px; height: 22px; }

/* ── Členství: okno předplatného (#subscription-modal) ──────────────────
   Obsah kreslí app.js: renderMembersOffer (nabídka = nepřihlášený, bez předplatného, zrušené)
   a renderMemberStatus (člen). Nabídka vypadá jako detail knihy: šalvějový pruh s obálkami
   a fialovým dráčkem, karty plánů, osa „kdy se platí“, jedno hlavní tlačítko. Telefon do 540 px
   = list od spodního okraje s přilepeným tlačítkem, od 860 px dva sloupce. Jen tokeny z :root
   (okno se otevírá i nad čtečkou v noční paletě). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.modal--subscription { max-width: 28rem; }
.modal--subscription:focus { outline: none; }   /* fokus po vykreslení je jen kvůli čtečce obrazovky (přečte nový nadpis) */
.modal--subscription .modal__close { z-index: 3; }
.modal.modal--members { padding: 0; overflow: clip; }

.members { display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; color: var(--ink); }
.modal--members .modal-loading { padding: 3rem 1.5rem; }   /* načítání v širokém okně (bez vnitřního odsazení) */

/* Šalvějový pruh s vějířem obálek (obálky přesahují pruh dolů jako v detailu knihy) */
.members__art {
  position: relative;
  height: 148px;
  padding: 14px 18px 0;
  background: linear-gradient(to bottom, var(--pal-sage-1) 0 116.5px, var(--pal-sage-edge) 116.5px 118px, transparent 118px);
  border-radius: calc(var(--radius-lg) - 1.5px) calc(var(--radius-lg) - 1.5px) 0 0;   /* rohy i bez overflow: clip (Safari 15) */
}
.members__covers { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 128px; }
.members__cover {
  flex: none;
  display: block;
  width: 60px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--card);
  border: 1.5px solid var(--pal-sage-edge);
  border-radius: 6px 12px 12px 6px;
  box-shadow: 4px 6px 0 var(--pal-sage-shadow);
}
.members__cover--left { rotate: -9deg; translate: 16px 2px; }
.members__cover--mid { position: relative; z-index: 1; width: 76px; rotate: -1.5deg; }
.members__cover--right { rotate: 9deg; translate: -16px 2px; }
:root[data-theme="night"] .members__cover { filter: brightness(.85) saturate(.9) sepia(.12); }
.members__lock { position: absolute; z-index: 2; left: 50%; bottom: -10px; translate: -50% 0; white-space: nowrap; }
.members__mascot { position: absolute; z-index: 2; right: 6px; bottom: 4px; --mascot-size: 78px; pointer-events: none; }

.members__head { display: grid; gap: 4px; padding: 14px 20px 0; }
.members__eyebrow {
  margin: 0;
  font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pal-sage-ink);
}
.modal--subscription .members__title {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 26px;
}

/* Co člen dostane: tři barevné rodiny jako uvítání (.onboarding__feature) */
.members__perks { display: grid; align-content: start; gap: 6px; margin: 0; padding: 12px 20px 0; list-style: none; }
.members__perk { display: flex; align-items: center; gap: 10px; font: 800 14.5px/1.35 var(--font); color: var(--ink); }
.members__perk-icon {
  --p-edge: var(--pal-sage-edge); --p-ink: var(--pal-sage-ink);
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--p-edge); border-radius: 50%;
  background: var(--card); color: var(--p-ink);
}
.members__perk:nth-child(2) .members__perk-icon { --p-edge: var(--pal-lav-edge); --p-ink: var(--pal-lav-ink); }
.members__perk:nth-child(3) .members__perk-icon { --p-edge: var(--pal-apricot-edge); --p-ink: var(--pal-apricot-ink); }
.members__perk:nth-child(4) .members__perk-icon { --p-edge: var(--pal-honey-edge); --p-ink: var(--pal-honey-ink); }
.members__perk-icon .ico { width: 18px; height: 18px; vertical-align: 0; }

/* Pravý sloupec: plány, osa plateb, tlačítko, důvěra, přihlášení */
.members__offer { display: grid; min-width: 0; }
.members__buy { display: grid; gap: 12px; padding: 16px 20px 0; }
/* Testovací platby (?test-platby=1, js/payments.js): nenápadný rámeček nad plány, ať admin ví, že platí testovací kartou */
.members__test {
  margin: 0;
  padding: 7px 12px;
  border: 1px dashed var(--pal-apricot-edge);
  border-radius: 12px;
  background: var(--pal-apricot-1);
  color: var(--pal-apricot-ink);
  font: 600 13px/1.45 var(--font);
}
.members__test strong { display: block; letter-spacing: 1.2px; }
.members__test span { white-space: nowrap; }

/* Měsíčně / Ročně: dvě karty s cenou (nativní radio přes celou kartu, šipky přepínají samy) */
.members__plans { min-width: 0; margin: 0; padding: 0; border: 0; }
.members__plan-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding-top: 6px; }
.members-plan { position: relative; display: block; min-width: 0; cursor: pointer; }
.members-plan__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.members-plan__box {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  height: 100%;
  min-height: 96px;
  padding: 15px 12px 12px 14px;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 var(--line-strong);
}
.members-plan__radio {
  position: absolute; top: 13px; right: 12px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 2px solid var(--ink-soft); border-radius: 50%;
  background: var(--card); color: var(--card);
}
.members-plan__radio svg { width: 12px; height: 12px; opacity: 0; }
.members-plan__name { padding-right: 26px; font: var(--w-heavy) 14px/1.3 var(--font); color: var(--ink); }
.members-plan__price { font: var(--w-display) 27px/1.05 var(--font-display); letter-spacing: -0.6px; color: var(--ink); white-space: nowrap; }
.members-plan__price small { font: 800 15px/1 var(--font); letter-spacing: 0; color: var(--ink-soft); }
.members-plan__note { font: 700 13px/1.35 var(--font); color: var(--ink-soft); }
.members-plan__ribbon {
  position: absolute; top: -11px; left: 12px;
  padding: 1px 9px;
  border-radius: 14px;
  background: var(--pal-honey-badge);
  color: var(--pal-honey-badge-ink);
  font: var(--w-heavy) 12px/1.5 var(--font);
  white-space: nowrap;
  rotate: -2deg;
}
@media (hover: hover) {
  .members-plan:hover .members-plan__input:not(:checked) + .members-plan__box { background: color-mix(in oklab, var(--pal-sage-1) 55%, var(--card)); }
}
/* Na šalvěji má --ink-soft jen 4.17:1, proto poznámka a „Kč“ v --ink-2 */
.members-plan:hover .members-plan__note,
.members-plan:hover .members-plan__price small,
.members-plan__input:checked + .members-plan__box .members-plan__note,
.members-plan__input:checked + .members-plan__box .members-plan__price small { color: var(--ink-2); }
.members-plan__input:checked + .members-plan__box {
  padding: 14.5px 11.5px 11.5px 13.5px;   /* silnější okraj o 0,5 px: obsah se neposune */
  border: 2px solid var(--ink);
  background: var(--pal-sage-1);
  box-shadow: 0 3px 0 color-mix(in oklab, var(--ink) 55%, transparent);
}
.members-plan__input:checked + .members-plan__box .members-plan__radio { top: 12.5px; right: 11.5px; border-color: var(--ink); background: var(--ink); }
.members-plan__input:checked + .members-plan__box .members-plan__radio svg { opacity: 1; }
.members-plan__input:focus-visible + .members-plan__box { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 3px; }

/* Cena na den pod kartami tarifů (2026-10-29, dřív „Dnes / první platba“; --ink-soft na medu má jen 4.13:1,
   proto --pal-honey-ink) */
.members__perday {
  display: grid; gap: 1px;
  margin: 0; padding: 10px 14px;
  border: 1px dashed var(--pal-honey-edge); border-radius: var(--radius-md);
  background: var(--pal-honey-1);
  font: 700 13px/1.35 var(--font); color: var(--pal-honey-ink);
  text-align: center;
}
.members__perday strong { font: var(--w-heavy) 17px/1.3 var(--font); color: var(--ink); }

/* Tlačítko a drobný text (na telefonu přilepené dole, viz @media níž) */
.members__foot { display: grid; gap: 8px; padding: 14px 20px 0; background: var(--card); }
.members__cta.btn { width: 100%; min-height: 58px; padding-inline: 1rem; font-size: 17px; white-space: normal; text-align: center; text-wrap: balance; }   /* 320 px: „Odemknout za 1 390 Kč ročně“ se zalomí, nepřeteče */
.members__fine { margin: 0; font: 600 13px/1.5 var(--font); color: var(--ink-soft); text-align: center; }
.members__fine a { color: inherit; text-underline-offset: 2px; }
.members__trust {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px;
  margin: 14px 20px 0; padding: 12px 0 18px;
  border-top: 1px dashed var(--line-strong);
  font: 800 13px/1.4 var(--font); color: var(--pal-sage-ink);
  text-align: center;
}
.members__trust .ico { width: 16px; height: 16px; vertical-align: 0; }
.members__trust .nowrap { white-space: nowrap; }
.members__trust-break { display: none; }
@media (max-width: 420px) {
  .members__trust-sep { display: none; }
  .members__trust-break { display: block; flex-basis: 100%; height: 0; }
}
/* Nepřihlášený: „Už máte účet? Přihlaste se“ hned pod nadpisem (v .members__head), vidět bez posouvání
   i na telefonu s lištami Safari. Cíl dotyku 44 px, záporné okraje drží řádek opticky těsně u nadpisu. */
.members__login { margin: -8px 0 -10px; padding: 0; text-align: left; font: 700 14px/1.4 var(--font); color: var(--ink-2); }
.members__login button {
  min-height: var(--tap-min, 44px); padding: 0 6px; margin-left: -2px;
  border: 0; background: none;
  font: inherit; font-weight: var(--w-heavy); color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.members__login button:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 2px; border-radius: 8px; }
.sub-status__badge {
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--pal-sage-edge);
  border-radius: 30px;
  background: var(--pal-sage-1);
  color: var(--pal-sage-ink);
  font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font);
  letter-spacing: 1.2px;
}
.sub-status__badge--canceling { border-color: var(--pal-honey-edge); background: var(--pal-honey-1); color: var(--pal-honey-ink); }
.sub-status__badge--past-due  { border-color: color-mix(in oklab, var(--action) 35%, var(--card)); background: var(--action-soft); color: var(--action-text); }
.sub-status__badge__dot { width: 8px; height: 8px; }
.sub-info {
  padding: 16px 18px;
  background: var(--pal-faq);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.sub-info__row { gap: 12px; font-size: 14px; }
.sub-actions { gap: 10px; }

/* Stav člena: dráček podle stavu, nadpis, štítek, řádky, akce (užší okno) */
.member-status { display: grid; gap: 14px; justify-items: center; text-align: center; }
.member-status__mascot { --mascot-size: 96px; margin: -10px 0 -6px; }
.member-status .members__eyebrow { margin-bottom: -10px; }
.modal--subscription .member-status .modal__title { margin: 0; padding-inline: 0.5rem; }
.member-status .sub-status__badge { margin: -4px 0 0; }
.member-status .sub-info { justify-self: stretch; text-align: left; }
.member-status .sub-info__label { color: var(--ink-faded); }   /* --ink-soft má na --pal-faq jen 4.45:1 */
.member-status__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.member-status__text strong { color: var(--ink); }
.member-status__actions { display: grid; gap: 10px; justify-self: stretch; }
.member-status__actions .btn { width: 100%; }
.member-status__actions .btn--danger-ghost { justify-self: center; min-height: var(--tap-min, 44px); }
.member-status__hint,
.member-status__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.member-status__hint { margin-top: -6px; }

/* Přihlášení z okna členství: proč se přihlašovat (js/app.js showAuthModal) */
.auth-context { margin: -12px 0 16px; font: 700 14px/1.5 var(--font); color: var(--ink-2); text-align: center; text-wrap: balance; }

@keyframes members-sheet-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .members-plan__box { transition: border-color 150ms, background-color 150ms, box-shadow 150ms; }
}
@media (prefers-reduced-motion: reduce) {
  .modal--subscription { animation: none; }
}

/* Telefon: list od spodního okraje, hlavní tlačítko přilepené dole (vidět hned i na 375x667) */
@media (max-width: 540px) {
  #subscription-modal { padding: 12px 0 0; }
  .modal.modal--subscription {
    max-width: none;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal.modal--subscription:not(.modal--members) { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .members__foot {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 14px;
    padding: 12px 20px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }
  .members__trust { margin-top: 4px; }
  .members__offer > :last-child { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (max-width: 540px) and (prefers-reduced-motion: no-preference) {
  .modal.modal--subscription { animation: members-sheet-up 260ms var(--ease-out-quint, ease-out) both; }
}
/* Tablet: stejný jeden sloupec jako karta uprostřed */
@media (min-width: 541px) and (max-width: 859px) {
  .modal.modal--members { max-width: 30rem; }
}
/* Počítač: vlevo šalvějový sloupec (obálky a výhody), vpravo nadpis, plány a tlačítko */
@media (min-width: 860px) {
  .modal.modal--members { max-width: 50rem; }
  .members {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "art head" "art buy" "perks buy";
  }
  .members__art {
    grid-area: art;
    height: auto;
    padding: 34px 24px 0;
    background: var(--pal-sage-1);
    border-right: 1.5px solid var(--pal-sage-edge);
    border-radius: calc(var(--radius-lg) - 1.5px) 0 0 0;
  }
  .members__covers { height: 196px; }
  .members__cover { width: 100px; }
  .members__cover--left { translate: 22px 4px; }
  .members__cover--mid { width: 124px; }
  .members__cover--right { translate: -22px 4px; }
  .members__lock { bottom: -14px; }
  .members__mascot { right: auto; left: 4px; bottom: -26px; --mascot-size: 92px; }
  .members__perks {
    grid-area: perks;
    gap: 12px;
    padding: 44px 24px 28px;
    background: var(--pal-sage-1);
    border-right: 1.5px solid var(--pal-sage-edge);
    border-radius: 0 0 0 calc(var(--radius-lg) - 1.5px);
  }
  .members__perk { gap: 12px; font-size: 15px; }
  .members__perk-icon { width: 40px; height: 40px; }
  .members__perk-icon .ico { width: 20px; height: 20px; }
  .members__head { grid-area: head; gap: 6px; padding: 40px 36px 0; }
  .modal--subscription .members__title { padding-right: 44px; font-size: 30px; }
  .members__offer { grid-area: buy; align-content: start; }
  .members__buy { padding: 18px 36px 0; }
  .members__foot { padding: 16px 36px 0; }
  .members__trust { margin: 16px 36px 0; padding-bottom: 22px; }
  .members__login { margin: -6px 0 -12px; }
  .members-plan__box { min-height: 104px; padding: 16px 14px 13px 16px; }
  .members-plan__input:checked + .members-plan__box { padding: 15.5px 13.5px 12.5px 15.5px; }
  .members-plan__radio { top: 14px; right: 13px; }
  .members-plan__input:checked + .members-plan__box .members-plan__radio { top: 13.5px; right: 12.5px; }
  .members-plan__price { font-size: 30px; }
}

/* ── Novinky 2026-10-29 ──────────────────────────────────────────────
   Sekce #novinky na úvodní stránce (3 nejnovější, za příběhy), přehled /novinky a jedna novinka
   /novinky/<slug> v #view-news. Karty kreslí js/news.js: bílá karta v barevné rodině (šalvěj /
   levandule / meruňka dokola jako karty knih), nahoře obálka knihy jako knížka na ploše rodiny,
   bez knihy dráček. Celá karta je klikací přes odkaz v nadpisu (natažený ::after, fokus kolem karty).
   Do 850 px karty pod sebou, obrázek vlevo vedle textu. Jen tokeny z :root, mimo čtečku vždy den,
   pohyb jen bez „omezit pohyb“. */
.news {
  position: relative;
  padding-block: 64px 74px;
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in oklab, var(--highlight) 24%, transparent), transparent 46%),
    radial-gradient(ellipse at 96% 100%, color-mix(in oklab, var(--pal-blue-edge) 26%, transparent), transparent 50%),
    var(--paper);
}
.news[hidden] { display: none !important; }
.news__inner { width: var(--wrap); margin-inline: auto; box-sizing: border-box; }
.news__head {
  position: relative;
  max-width: 640px;
  margin: 0 auto 38px;
  text-align: center;
}
.news__eyebrow { margin: 0; color: var(--pal-lav-ink); }
.news__title {
  margin: 12px 0 0;
  font: var(--w-display) 44px/1.07 var(--font-display);
  letter-spacing: -1.2px;
  color: var(--ink);
  text-wrap: balance;
}
/* Šedý text na pozadí se září: --ink-faded (4.9:1 i v nejsvětlejším místě záře), --ink-soft by tam měl jen 4.0-4.3 */
.news__sub { margin: 10px 0 0; font: 600 16px/1.65 var(--font); color: var(--ink-faded); }
/* Hvězdička kousek za koncem nadpisu „Novinky“ (nadpis je na středu, široký asi 160 px) */
.news__deco { --s: 50px; position: absolute; top: 16px; left: calc(50% + 100px); rotate: 14deg; opacity: .9; pointer-events: none; }
.news__more { display: flex; justify-content: center; margin-top: 40px; }
.news__all { gap: 8px; padding-inline: 24px 20px; }

/* Karty */
.news-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}
.news-card {
  --t-1: var(--pal-sage-1);
  --t-edge: var(--pal-sage-edge);
  --t-shadow: var(--pal-sage-shadow);
  --t-ink: var(--pal-sage-ink);
  --tilt: none;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--t-edge);
  border-radius: 19px;
  box-shadow: 4px 6px 0 var(--t-shadow);
  transform: var(--tilt);
}
.news-card--lav {
  --t-1: var(--pal-lav-1); --t-edge: var(--pal-lav-edge); --t-shadow: var(--pal-lav-shadow); --t-ink: var(--pal-lav-ink);
}
.news-card--apricot {
  --t-1: var(--pal-apricot-1); --t-edge: var(--pal-apricot-edge); --t-shadow: var(--pal-apricot-shadow); --t-ink: var(--pal-apricot-ink);
}
/* Ručně položené jen na úvodní stránce (v přehledu by náklon ve více řadách rušil) */
.news .news-card--0 { --tilt: rotate(-1deg); }
.news .news-card--1 { --tilt: translateY(10px) rotate(.6deg); }
.news .news-card--2 { --tilt: rotate(1deg); }
.news .news-cards { padding-bottom: 10px; }
/* Jen 1-2 zveřejněné novinky (data-count z js/news.js): karty na střed pod nadpisem, jinak by vpravo zůstala
   prázdná třetina. Přehled /novinky má nadpis vlevo, tam sloupce podle počtu (níž u .news-cards--page). */
@media (min-width: 851px) {
  .news .news-cards[data-count="1"] { grid-template-columns: minmax(0, 380px); justify-content: center; }
  .news .news-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .news-card { transition: transform 300ms var(--ease-out-quint), box-shadow 300ms var(--ease-out-quint); }
  .news-card:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 4px 10px 0 var(--t-shadow); }
  .news-card:hover .news-card__cover { rotate: 0deg; }
  .news-card__cover { transition: rotate 300ms var(--ease-out-quint); }
}

.news-card__art {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  height: 184px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in oklab, var(--card) 70%, transparent), transparent 62%),
    var(--t-1);
  border-bottom: 1px solid var(--t-edge);
  border-radius: 17.5px 17.5px 0 0;
}
.news-card__cover,
.news-article__cover {
  display: block;
  width: auto;
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--card);
  border: 1.5px solid var(--t-edge);
  border-radius: 5px 11px 11px 5px;
  box-shadow: 4px 5px 0 var(--t-shadow);
}
.news-card__cover { height: 144px; rotate: -3deg; }
.news-card__mascot,
.news-article__mascot { display: block; line-height: 0; }
.news-card__mascot { --mascot-size: 142px; margin-bottom: -6px; align-self: end; }

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 20px 21px 18px;
}
.news-card__date {
  margin: 0;
  font: var(--w-heavy) 12px/1.4 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-ink);
}
.news-card__title {
  margin: 10px 0 8px;
  font: var(--w-display) 24px/1.14 var(--font-display);
  letter-spacing: -.4px;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.news-card__link { color: inherit; text-decoration: none; }
.news-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 19px; }
.news-card__link:focus-visible { outline: none; }
.news-card__link:focus-visible::after { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 4px; }
.news-card__perex { margin: 0 0 14px; font: 600 15px/1.65 var(--font); color: var(--ink-soft); overflow-wrap: anywhere; }
/* „Číst dál“ drží dole: karty v řadě mají stejnou výšku, i když je perex různě dlouhý */
.news-card__more {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font: var(--w-heavy) 14px/1.3 var(--font);
  color: var(--action-text);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .news-card__more svg { transition: translate var(--dur-fast) var(--ease-out-quint); }
  .news-card:hover .news-card__more svg { translate: 3px 0; }
}

/* Pohled Novinky: přehled a jedna novinka (patička webu se sem přesouvá z úvodní stránky) */
#view-news {
  overflow-x: clip;
  background:
    radial-gradient(ellipse at 4% 0%, color-mix(in oklab, var(--highlight) 26%, transparent), transparent 44%),
    radial-gradient(ellipse at 98% 18%, color-mix(in oklab, var(--pal-lav-edge) 26%, transparent), transparent 46%),
    var(--paper);
}
.news-page {
  display: block;
  width: var(--wrap);
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(22px, 3vw, 34px) 0 clamp(48px, 7vw, 84px);
  box-sizing: border-box;
}
.news-page__top { margin-bottom: 22px; }
/* Jedna novinka: „Všechny novinky“ zarovnané s levým okrajem karty novinky */
.news-page[data-mode="item"] .news-page__top { max-width: 780px; margin-inline: auto; }
.news-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min, 44px);
  padding: 9px 18px 9px 13px;
  background: var(--card);
  color: var(--ghost-ink);
  border: 1px solid var(--ghost-edge);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--ghost-shadow);
  font: var(--w-heavy) 14px/1.2 var(--font);
  text-decoration: none;
  box-sizing: border-box;
}
.news-back:hover { background: var(--ghost-hover); color: var(--ghost-ink); }
.news-back:active { box-shadow: 0 1px 0 var(--ghost-shadow); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .news-back { transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint); }
  .news-back:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ghost-shadow); }
  .news-back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ghost-shadow); }
}
.news-page__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 36px;
}
.news-page__mascot { --mascot-size: 124px; }
.news-page__eyebrow { margin: 0; color: var(--pal-lav-ink); }
.news-page__title {
  margin: 8px 0 0;
  font: var(--w-display) var(--fs-h2)/1.07 var(--font-display);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
.news-page__lead { margin: 10px 0 0; max-width: 52ch; font: 600 16px/1.65 var(--font); color: var(--ink-faded); }
.news-page__count {
  display: inline-block;
  margin: 14px 0 0;
  padding: 5px 14px;
  background: var(--pal-sage-1);
  color: var(--pal-sage-ink);
  border: 1px solid var(--pal-sage-edge);
  border-radius: 30px;
  font: var(--w-heavy) 13px/1.4 var(--font);
}
.news-page__status { margin: 10px 0 0; font: 700 16px/1.6 var(--font); color: var(--ink-faded); }
.news-cards--page { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px 24px; }
/* Přehled s 1-2 novinkami (data-count z js/news.js): sloupce podle počtu, ať vpravo nezůstane prázdná třetina.
   Jedna novinka = široká karta, obrázek vlevo vedle textu (jako na telefonu, jen větší). */
@media (min-width: 851px) {
  .news-cards--page[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-cards--page[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .news-cards--page[data-count="1"] .news-card { flex-direction: row; }
  .news-cards--page[data-count="1"] .news-card__art {
    flex: 0 0 36%;
    height: auto;
    min-height: 260px;
    border-bottom: 0;
    border-right: 1px solid var(--t-edge);
    border-radius: 17.5px 0 0 17.5px;
  }
  .news-cards--page[data-count="1"] .news-card__cover { height: 190px; }
  .news-cards--page[data-count="1"] .news-card__mascot { --mascot-size: 176px; }
  .news-cards--page[data-count="1"] .news-card__body { padding: 30px 34px 24px; }
  .news-cards--page[data-count="1"] .news-card__title { font-size: 30px; }
  .news-cards--page[data-count="1"] .news-card__perex { max-width: 60ch; font-size: 16px; }
}

/* Jedna novinka: bílá karta v rodině, nahoře obálka knihy nebo dráček, pod ní text */
.news-article {
  --t-1: var(--pal-sage-1);
  --t-edge: var(--pal-sage-edge);
  --t-shadow: var(--pal-sage-shadow);
  --t-ink: var(--pal-sage-ink);
  max-width: 780px;
  margin: 0 auto;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--t-edge);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 0 var(--t-shadow);
}
.news-article--lav { --t-1: var(--pal-lav-1); --t-edge: var(--pal-lav-edge); --t-shadow: var(--pal-lav-shadow); --t-ink: var(--pal-lav-ink); }
.news-article--apricot { --t-1: var(--pal-apricot-1); --t-edge: var(--pal-apricot-edge); --t-shadow: var(--pal-apricot-shadow); --t-ink: var(--pal-apricot-ink); }
.news-article__art {
  display: grid;
  place-items: center;
  height: 264px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 18%, color-mix(in oklab, var(--card) 70%, transparent), transparent 62%),
    var(--t-1);
  border-bottom: 1.5px solid var(--t-edge);
  border-radius: calc(var(--radius-xl) - 1.5px) calc(var(--radius-xl) - 1.5px) 0 0;
}
.news-article__cover { height: 212px; rotate: -2deg; }
.news-article__mascot { --mascot-size: 210px; align-self: end; margin-bottom: -8px; }
.news-article__content { padding: 30px clamp(20px, 5.5vw, 52px) 34px; }
.news-article__date {
  margin: 0 0 10px;
  font: var(--w-heavy) 12px/1.4 var(--font);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-ink);
}
.news-article__title {
  margin: 0;
  font: var(--w-display) clamp(30px, 3.6vw, 44px)/1.08 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* Perex = úvodní odstavec pod nadpisem: větší a tmavší než text (jako náhled v adminu) */
.news-article__lead {
  margin: 16px 0 0;
  max-width: 60ch;
  font: 700 clamp(18px, 1.7vw, 20px)/1.6 var(--font);
  color: var(--ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.news-article__body {
  margin-top: 20px;
  font: 600 17px/1.75 var(--font);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.news-article__body p,
.news-article__body ul { margin: 0 0 1em; max-width: 64ch; }
.news-article__body > :last-child { margin-bottom: 0; }
.news-article__body ul { padding-left: 1.4em; list-style: disc; }
.news-article__body li { margin: .3em 0; padding-left: .2em; }
.news-article__body li::marker { color: var(--t-ink); }
.news-link {
  color: var(--action-text);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.news-link:hover { color: var(--action); text-decoration-thickness: 3px; }
.news-article__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}
.news-article__read .art-icon { --s: 30px; }
.news-article__soon {
  margin: 0;
  padding: 8px 14px;
  background: var(--pal-honey-1);
  color: var(--pal-honey-ink);
  border: 1px dashed var(--pal-honey-edge);
  border-radius: var(--radius-md);
  font: var(--w-heavy) 14px/1.4 var(--font);
}

/* Prázdný přehled, chyba načtení, neexistující novinka */
.news-empty {
  max-width: 36rem;
  margin: 8px auto 0;
  padding: 30px 26px 28px;
  text-align: center;
  background: var(--pal-sage-1);
  border: 1px dashed var(--pal-sage-edge);
  border-radius: var(--radius-lg);
}
.news-empty--error { background: var(--pal-apricot-1); border-color: var(--pal-apricot-edge); }
.news-empty__mascot { --mascot-size: 116px; display: flex; justify-content: center; margin-bottom: 6px; }
.news-empty__title { margin: 0 0 8px; font: var(--w-display) 26px/1.15 var(--font-display); letter-spacing: -.5px; color: var(--ink); text-wrap: balance; }
.news-empty__text { margin: 0; font: 600 16px/1.65 var(--font); color: var(--ink-2); }
.news-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* Do 1150: menší karty, ať se tři vejdou */
@media (max-width: 1150px) {
  .news-cards { gap: 22px; }
  .news-card__body { padding: 18px 17px 16px; }
  .news-card__title { font-size: 22px; }
}
/* Do 850: karty pod sebou, obrázek vlevo vedle textu (tři vysoké karty by byly dlouhé) */
@media (max-width: 850px) {
  .news { padding-block: 48px 56px; }
  .news__head { margin-bottom: 30px; }
  .news__title { font-size: 36px; }
  .news__deco { --s: 40px; top: 18px; left: calc(50% + 78px); }
  .news-cards,
  .news-cards--page { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; gap: 20px; }
  .news .news-card--0, .news .news-card--1, .news .news-card--2 { --tilt: none; }
  .news .news-cards { padding-bottom: 0; }
  .news-card { flex-direction: row; }
  .news-card__art {
    flex: 0 0 150px;
    height: auto;
    min-height: 172px;
    border-bottom: 0;
    border-right: 1px solid var(--t-edge);
    border-radius: 17.5px 0 0 17.5px;
  }
  .news-card__cover { height: 120px; }
  .news-card__mascot { --mascot-size: 116px; align-self: center; margin-bottom: 0; }
  .news-card__body { padding: 16px 18px 14px; }
  .news-card__title { margin: 6px 0 6px; font-size: 21px; }
  .news-card__perex { margin-bottom: 12px; }
  .news-card__more { padding-top: 11px; }
  .news-page__mascot { --mascot-size: 104px; }
  .news-article__art { height: 228px; }
  .news-article__cover { height: 184px; }
  .news-article__mascot { --mascot-size: 180px; }
}
/* Telefon: menší obrázek karty, delší perex zkrátit na čtyři řádky (čtečka obrazovky čte celý) */
@media (max-width: 480px) {
  .news { padding-block: 40px 48px; }
  .news__title { font-size: 34px; }
  .news__sub { font-size: 15px; }
  .news__more { margin-top: 30px; }
  .news-card__art { flex-basis: 104px; min-height: 0; }
  .news-card__cover { height: 96px; rotate: -2deg; }
  .news-card__mascot { --mascot-size: 92px; }
  .news-card__body { padding: 13px 14px 12px 15px; }
  .news-card__date { font-size: 11px; letter-spacing: .7px; }
  .news-card__title { font-size: 19px; line-height: 1.16; }
  .news-card__perex {
    font-size: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .news-card__more { font-size: 13px; }
  /* Dráček vpravo vedle nadpisu, ne nad ním (jinak by hlavička zabrala půl obrazovky) */
  .news-page__head { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: start; margin-bottom: 28px; }
  .news-page__head-text { grid-column: 1; grid-row: 1; }
  .news-page__mascot { --mascot-size: 84px; grid-column: 2; grid-row: 1; margin-top: 6px; }
  .news-article { border-radius: var(--radius-lg); }
  .news-article__art { height: 196px; border-radius: calc(var(--radius-lg) - 1.5px) calc(var(--radius-lg) - 1.5px) 0 0; }
  .news-article__cover { height: 156px; }
  .news-article__mascot { --mascot-size: 150px; }
  .news-article__content { padding: 24px 20px 26px; }
  .news-article__body { font-size: 16px; line-height: 1.7; }
  .news-article__actions { flex-direction: column; align-items: stretch; }
  .news-article__actions .btn { width: 100%; }
  .news-empty { padding: 26px 18px 24px; }
}

/* ── Detail knihy ────────────────────────────────────────────────────
   Obálka stojí jako knížka v šalvějovém rámu, vpravo text a malinové
   „Číst příběh“. Na telefonu malá knížka nahoře na šalvějovém pruhu. */
.book-detail { max-width: 54rem; }
.book-detail__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 0 0 41%;
  aspect-ratio: auto;
  padding: 30px 28px 34px;
  background:
    radial-gradient(ellipse at 28% 18%, color-mix(in oklab, var(--card) 70%, transparent), transparent 62%),
    var(--pal-sage-1);
  border-right: 1.5px solid var(--pal-sage-edge);
}
.book-detail__cover img,
.book-detail__cover .cover-fallback {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1.5px solid var(--pal-sage-edge);
  border-radius: 6px 14px 14px 6px;
  box-shadow: 5px 7px 0 var(--pal-sage-shadow);
  rotate: -1.5deg;
}
.book-detail__cover .cover-fallback { overflow: hidden; }
.book-detail__body { gap: 14px; padding: 40px 36px 32px; }
.book-detail__title {
  font: var(--w-display) clamp(28px, 2.5vw, 36px)/1.12 var(--font-display);
  letter-spacing: -0.8px;
  padding-right: 34px;
  text-wrap: balance;
}
.book-detail__meta { gap: 8px; }
.book-detail__pill {
  gap: 6px;
  padding: 5px 13px;
  background: var(--pal-lav-1);
  color: var(--pal-lav-ink);
  border: 1px solid var(--pal-lav-edge);
  border-radius: 30px;
  box-shadow: none;
  font: var(--w-heavy) 13px/1.4 var(--font);
}
.book-detail__pill--free { background: var(--pal-sage-1); color: var(--pal-sage-ink); border-color: var(--pal-sage-edge); }
/* Placená kniha bez přístupu: medový štítek se zámkem jako „Pro členy“ na kartě (.book-card__badge--locked) */
.book-detail__pill--members { background: var(--pal-honey-badge); color: var(--pal-honey-badge-ink); border-color: var(--pal-honey-edge); }
.book-detail__pill--members svg { flex-shrink: 0; }
.book-detail__desc { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.book-detail__cta.btn { min-height: 62px; font-size: 18px; }

@media (max-width: 640px) {
  .book-detail {
    --bd-cover-h: min(32vh, 240px);
    --bd-band: calc(20px + var(--bd-cover-h) * .58);
    background:
      linear-gradient(to bottom, var(--pal-sage-1) 0 calc(var(--bd-band) - 1.5px), var(--pal-sage-edge) calc(var(--bd-band) - 1.5px) var(--bd-band), transparent var(--bd-band)),
      var(--card);
  }
  .book-detail__cover {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    height: var(--bd-cover-h);
    aspect-ratio: 2 / 3;
    margin-top: 20px;
    padding: 0;
    background: var(--pal-sage-1);
    border: 1.5px solid var(--pal-sage-edge);
    border-radius: 6px 12px 12px 6px;
    box-shadow: 4px 6px 0 var(--pal-sage-shadow);
    overflow: hidden;
    rotate: -2deg;
  }
  .book-detail__cover img,
  .book-detail__cover .cover-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    rotate: 0deg;
  }
  .book-detail__body { padding: 24px 22px 20px; gap: 12px; }
  .book-detail__title { font-size: 28px; padding-right: 0; }
}

@media (max-width: 540px) {
  .modal { padding: 30px 20px 22px; }
}

/* =====================================================================
   KATALOG „VŠECHNY PŘÍBĚHY“ A OBLÍBENÉ
   ===================================================================== */
.allbooks-page,
.favorites-page { padding-top: 34px; padding-bottom: 80px; }

/* Hlavička: krok zpět nad nadpisem, počet vedle nadpisu (ne nadpis vpravo) */
.allbooks-header,
.favorites-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 22px 16px;
  margin-bottom: 28px;
}
.allbooks-header > .favorites-header__back,
.favorites-header > .favorites-header__back { grid-column: 1 / -1; justify-self: start; margin: 0; }
.allbooks-header__title,
.favorites-header__title {
  grid-column: 1;
  margin: 0;
  gap: 12px;
  font: var(--w-display) var(--fs-h2)/1.07 var(--font-display);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
.allbooks-header__count,
.favorites-header__count {
  grid-column: 2;
  margin: 0;
  padding: 6px 14px;
  background: var(--pal-sage-1);
  color: var(--pal-sage-ink);
  border: 1px solid var(--pal-sage-edge);
  border-radius: 30px;
  font: var(--w-heavy) 13px/1.4 var(--font);
  white-space: nowrap;
}
.favorites-header__count { background: var(--pal-lav-1); color: var(--pal-lav-ink); border-color: var(--pal-lav-edge); }
.favorites-header__heart { width: 34px; height: 34px; color: var(--action); }
@media (max-width: 600px) {
  .allbooks-header,
  .favorites-header { grid-template-columns: minmax(0, 1fr); gap: 20px; row-gap: 20px; }
  .allbooks-header__title,
  .favorites-header__title { margin-top: 2px; }
  .allbooks-header__count,
  .favorites-header__count { grid-column: 1; justify-self: start; }
}

/* Zpět do knihovny: vedlejší šalvějové tlačítko */
.favorites-header__back {
  gap: 6px;
  min-height: var(--tap-min);
  padding: 9px 18px 9px 13px;
  background: var(--card);
  color: var(--ghost-ink);
  border: 1px solid var(--ghost-edge);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--ghost-shadow);
  font: var(--w-heavy) 14px/1.2 var(--font);
}
.favorites-header__back:hover { background: var(--ghost-hover); transform: none; box-shadow: 0 3px 0 var(--ghost-shadow); }
.favorites-header__back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ghost-shadow); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .favorites-header__back:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ghost-shadow); }
}

/* Filtry: čipy z návrhu (aktivní = inkoust s papírovým písmem) */
.allbooks-filters,
.favorites-search { gap: 16px; margin-bottom: 34px; }
.allbooks-filters__section { gap: 10px; }
.allbooks-filters__label {
  font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font);
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink);
}
.allbooks-pills { gap: 10px; }
.allbooks-pill {
  gap: 7px;
  min-height: var(--tap-min);
  padding: 9px 17px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  box-shadow: none;
  font: 800 13px/1.2 var(--font);
}
.allbooks-pill:hover { background: var(--pal-sage-1); border-color: var(--pal-sage-edge); box-shadow: none; transform: none; }
.allbooks-pill:active { transform: translateY(1px); }
.allbooks-pill .filter-icon { color: var(--ink-soft); }
.allbooks-pill__n {
  padding: 0 7px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  color: var(--ink-2);            /* ~7:1 na tónu pilulky; --ink-soft měla jen 4.1 */
  font: var(--w-heavy) 12px/1.5 var(--font);
}
.allbooks-pill.allbooks-pill--active,
.allbooks-pill.allbooks-pill--active:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.allbooks-pill--active .filter-icon { color: var(--paper); }
.allbooks-pill--active .allbooks-pill__n { background: #FFFFFF30; color: var(--paper); }
:root[data-theme="night"] .allbooks-pill--active .allbooks-pill__n { background: #00000026; }

.favorites-search__inner { border-radius: 16px; }
.favorites-search__input { padding-left: 44px; border-radius: 16px; }
.favorites-search__icon { left: 16px; color: var(--ink-faded); }

.allbooks-grid,
.favorites-grid { gap: 30px 22px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
@media (max-width: 980px) {
  .allbooks-grid,
  .favorites-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
}

/* ── Karta knihy: bílá karta v barevné rodině (šalvěj / levandule /
      meruňka dokola), uvnitř obálka jako knížka, pod ní název ────────── */
.book-card {
  --t-edge: var(--pal-sage-edge);
  --t-shadow: var(--pal-sage-shadow);
  --t-ink: var(--pal-sage-ink);
  gap: 0;
  padding: 10px 10px 0;
  background: var(--card);
  border: 1.5px solid var(--t-edge);
  border-radius: var(--radius);
  box-shadow: 4px 6px 0 var(--t-shadow);
}
.book-card:nth-child(3n + 2) { --t-edge: var(--pal-lav-edge); --t-shadow: var(--pal-lav-shadow); --t-ink: var(--pal-lav-ink); }
.book-card:nth-child(3n + 3) { --t-edge: var(--pal-apricot-edge); --t-shadow: var(--pal-apricot-shadow); --t-ink: var(--pal-apricot-ink); }
html.theme-ready .book-card,
.book-card {
  transition: transform 300ms var(--ease-out-quint), box-shadow 300ms var(--ease-out-quint),
              background-color .5s, border-color .5s, color .5s;
}
.book-card__cover {
  border: 1px solid var(--t-edge);
  border-radius: 6px 12px 12px 6px;
  box-shadow: inset 6px 0 0 rgba(22, 33, 71, 0.1);
}
.book-card__title {
  min-height: calc(2 * 1.22em);
  max-height: calc(2 * 1.22em);
  margin: 11px 2px 13px;
  padding: 0;
  font: var(--w-display) 16px/1.22 var(--font-display);
  letter-spacing: -0.2px;
  color: var(--ink);
}
@media (hover: hover) {
  .book-card:hover { transform: none; box-shadow: 4px 10px 0 var(--t-shadow); }
  .book-card:hover .book-card__cover { box-shadow: inset 6px 0 0 rgba(22, 33, 71, 0.1); }
  .book-card:hover .book-card__title { color: var(--t-ink); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .book-card:hover { transform: translateY(-8px); }
}
.book-card:active .book-card__cover { box-shadow: inset 6px 0 0 rgba(22, 33, 71, 0.1); }
/* Fokus na celé kartě (dřív žlutý prstenec jen kolem obálky) */
.book-card:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 4px; }
.book-card:focus-visible .book-card__cover { outline: none; }

/* Štítky na obálce (vlevo nahoře jako v návrhu; srdce zůstává vpravo) */
.book-card__badge {
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
  padding: 4px 8px;
  background: var(--pal-lav-badge);
  color: var(--pal-lav-badge-ink);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 3px 0 #00000014;
  font: var(--w-heavy) 11px/1.4 var(--font);
  letter-spacing: .6px;
  rotate: -4deg;
}
.book-card__badge--free { background: var(--pal-sage-1); color: var(--pal-sage-ink); }
/* Štítek „Rozečteno“ (js/book-card.js setCardReading): záložka v barvě „Pokračovat ve čtení“ dole na obálce,
   na malé kartě i na velké kartě v knihovně (tam vlevo dole, „Otevři mě“ zůstává vpravo) */
.reading-badge {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 6px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  box-shadow: 0 3px 0 #00000024;
  font: var(--w-heavy) 11px/1.4 var(--font);
  letter-spacing: .6px;
  text-transform: uppercase;
  rotate: -3deg;
  pointer-events: none;
}
.reading-badge svg { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; }
.stories .story-card__art .reading-badge { left: 15px; bottom: 16px; padding: 6px 10px 6px 8px; font-size: 12px; letter-spacing: .7px; }
/* Rozečtená velká karta: „Otevři mě“ pryč (CTA říká „Pokračovat“), na užších třech sloupcích by se se štítkem překrývala */
.stories .story-card.is-reading .story-card__open { display: none; }
:root .book-card .book-card__badge--locked {
  gap: 4px;
  padding: 4px 8px;
  background: var(--pal-honey-badge);
  color: var(--pal-honey-badge-ink);
  letter-spacing: .3px;
}
.book-card__fav {
  top: 8px;
  right: 8px;
  width: 38px;
  height: 38px;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 #00000014;
  color: var(--ink-soft);
}
.book-card__fav:hover { color: var(--action); transform: none; }
.book-card__fav--active { color: var(--action); background: var(--action-soft); border-color: color-mix(in oklab, var(--action) 35%, var(--card)); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .book-card__fav:hover { transform: scale(1.1) rotate(-6deg); }
}

/* ── Prázdné stavy: šalvějová karta s dráčkem ───────────────────────── */
.favorites-empty,
.library-empty {
  max-width: 34rem;
  margin: 8px auto 0;
  padding: 34px 28px 30px;
  background: var(--pal-sage-1);
  border: 1px dashed var(--pal-sage-edge);
  border-radius: var(--radius-lg);
}
.favorites-empty { background: var(--pal-lav-1); border-color: var(--pal-lav-edge); }
.library-empty { grid-column: 1 / -1; }
.favorites-empty__title {
  font: var(--w-display) 26px/1.15 var(--font-display);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.favorites-empty__text,
.library-empty__text { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.favorites-empty__icon { color: var(--pal-lav-ink); }
.favorites-empty .library-empty__mascot { display: flex; justify-content: center; margin-bottom: 6px; }

/* ── Děkovací stránka 2026-10-29 (/dekujeme, #view-thanks, js/app.js renderThanks) ──────────────
   Medová karta se stuhou členství a dráčkem (vlevo), „vstupenka“ s údaji o předplatném a co přijde
   e-mailem (vpravo, na telefonu pod sebou). Stavy řídí data-state na #thanks: waiting, ok, pending, login.
   Jen tokeny z :root; stránka je vždy ve dne (theme.js mimo čtečku). Pohyb jen bez „omezit pohyb“. */
#view-thanks {
  background:
    radial-gradient(ellipse at 4% 0%, color-mix(in oklab, var(--highlight) 32%, transparent), transparent 50%),
    radial-gradient(ellipse at 98% 24%, color-mix(in oklab, var(--pal-blue-edge) 32%, transparent), transparent 48%),
    var(--paper);
}
#view-thanks [hidden] { display: none !important; }
/* Po objednávce nikdo nemá vidět „Začít zdarma“ (třídu dává app.js už při načtení /dekujeme) */
body.is-thanks .nav__actions .nav__cta { display: none; }
.thanks-page {
  width: var(--wrap);
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 36px) 0 clamp(40px, 6vw, 64px);
}
.thanks { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .thanks { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px; align-items: start; }
}

/* Hlavní karta: medový rám jako karta konce příběhu */
.thanks__hero {
  position: relative;
  isolation: isolate;
  margin-top: 18px;   /* místo pro stuhu přes horní hranu */
  padding: 30px clamp(18px, 4vw, 36px) 28px;
  background: var(--card);
  border: 2px solid var(--pal-honey-edge);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 0 var(--pal-honey-shadow);
  text-align: center;
}
/* Stuha přes horní hranu (jako „Tady začíná vaše dobrodružství“ v ceníku) */
.thanks__ribbon {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: -46px auto 6px;
  padding: 7px 16px 7px 10px;
  border-radius: 14px;
  background: var(--pal-honey-badge);
  color: var(--pal-honey-badge-ink);
  font: var(--w-heavy) var(--fs-eyebrow)/1.4 var(--font);
  letter-spacing: .8px;
  text-transform: uppercase;
  rotate: -1.5deg;
}
.thanks__ribbon .art-icon { --s: 24px; flex: none; }
.thanks__mascot { --thanks-mascot: clamp(108px, 14vw, 146px); position: relative; width: max-content; margin: 12px auto 0; }
.thanks__mascot .mascot { --mascot-size: var(--thanks-mascot); }
/* Smyčka radosti (stav ok) poskakuje pod krabičku dráčka: místo, ať nohy nesahají do nadpisu */
@media (prefers-reduced-motion: no-preference) {
  .thanks[data-state="ok"] .thanks__mascot { margin-bottom: calc(var(--thanks-mascot) * .17); }
}
.thanks__deco { position: absolute; z-index: -1; pointer-events: none; }
.thanks__deco--star  { --s: 46px; left: -48px; top: 8px; rotate: -16deg; }
.thanks__deco--heart { --s: 40px; right: -44px; top: 40px; rotate: 14deg; }

.thanks__title {
  margin: 8px 0 0;
  font: var(--w-display) clamp(31px, 3.4vw, 42px)/1.1 var(--font-display);
  letter-spacing: -1px;
  color: var(--ink);
  text-wrap: balance;
}
/* Zvýrazněné slovo s kaňkou jako „a učí se.“ v hero */
.thanks__title em { position: relative; z-index: 0; font-style: normal; color: var(--action-text); white-space: nowrap; }
.thanks__title em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4px; right: 6px; bottom: 3px;
  height: 9px;
  border-radius: 50%;
  background: var(--highlight-soft);
  rotate: -2deg;
}
.thanks__lead {
  max-width: 31em;
  margin: 12px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.thanks__lead strong { color: var(--ink); font-weight: var(--w-heavy); }

/* Upozornění, když odemykání trvá (pending): meruňková poznámka */
.thanks__notice {
  max-width: 30em;
  margin: 16px auto 0;
  padding: 13px 16px;
  background: var(--pal-apricot-1);
  border: 1px solid var(--pal-apricot-edge);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}
.thanks__notice a { color: var(--action-text); font-weight: var(--w-heavy); text-underline-offset: 2px; }

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  margin-top: 22px;
}
.thanks__cta { gap: 10px; }
.thanks__cta .art-icon { --s: 30px; }
.thanks__cta[aria-disabled="true"] { cursor: progress; opacity: .85; }
@media (max-width: 540px) { .thanks__cta { width: 100%; justify-content: center; } }

/* Textové tlačítko (Zůstat tady, Zatím vybrat příběh zdarma): cíl dotyku 44 px */
.thanks__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  padding: 0 6px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--ghost-ink);
  font: var(--w-heavy) 15px/1.3 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.thanks__link:hover { color: var(--ink); }
.thanks__link:focus-visible,
.thanks__links a:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 2px; }

/* Odpočet (jen ok): viditelný a zastavitelný (WCAG 2.2.1), po vteřinách se nečte nahlas */
.thanks__auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  margin: 10px 0 0;
  font: 800 14px/1.4 var(--font);
  color: var(--ink-faded);
}
.thanks__auto .thanks__link { font-size: 14px; }
/* Věta o odpočtu jen pro čtečku obrazovky (app.js ji připojí k #thanks-status a po zastavení odebere) */
.thanks__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Právě odemčené: dlaždice z karty konce (.reader-next, js/ui.js storyTiles) se štítkem Odemčeno */
.thanks:not([data-state="ok"]) #thanks-unlocked { display: none; }
/* Dvě třídy: .reader-next (karta konce) stojí v souboru níž a jednou třídou by odsazení přebila */
.reader-next.reader-next--thanks { margin-top: 24px; padding-top: 18px; }
.reader-next__badge--unlocked { background: var(--pal-honey-badge); color: var(--pal-honey-badge-ink); }
/* Úzké telefony (obálka pod ~88 px): „Odemčeno“ by se o kraj obálky ořízlo */
@media (max-width: 359px) {
  .reader-next--thanks .reader-next__badge--unlocked { left: 4px; padding: 3px 5px; font-size: 9px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .reader-next--thanks .reader-next__badge--unlocked { animation: thanksPop .5s var(--ease-out-quint) both; animation-delay: calc(var(--i, 0) * 120ms + 250ms); }
  .thanks[data-state="ok"] .thanks__deco--star  { animation: howFloat 4.8s ease-in-out infinite; }
  .thanks[data-state="ok"] .thanks__deco--heart { animation: howFloat 4.2s ease-in-out -1.4s infinite; }
  @keyframes thanksPop {
    0%   { scale: .4; opacity: 0; }
    60%  { scale: 1.12; opacity: 1; }
    100% { scale: 1; opacity: 1; }
  }
}

/* Pravý sloupec: vstupenka „Vaše předplatné“ a co přijde e-mailem */
.thanks__aside { display: grid; gap: 22px; }
@media (min-width: 900px) { .thanks__aside { margin-top: 18px; } }
.thanks-ticket {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--pal-sage-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 5px 0 var(--pal-sage-shadow);
}
.thanks-ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 16px 20px 14px;
  background: var(--pal-sage-1);
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
.thanks-ticket__title { margin: 0; font: var(--w-display) 22px/1.15 var(--font-display); color: var(--ink); }
.thanks-ticket__badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* Odznaky stavu (vlastní, okno předplatného má svoje) */
.thanks-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1.5px solid var(--pal-sage-edge);
  border-radius: 30px;
  background: var(--card);
  color: var(--pal-sage-ink);
  font: var(--w-heavy) var(--fs-eyebrow)/1.4 var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.thanks-badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.thanks-badge--wait { border-color: var(--pal-honey-edge); background: var(--pal-honey-1); color: var(--pal-honey-ink); }
.thanks-badge--test { border-color: transparent; background: var(--pal-apricot-badge); color: var(--pal-apricot-badge-ink); }
.thanks-badge--test::before { content: none; }
.thanks-ticket__rows { display: grid; gap: 10px; margin: 0; padding: 16px 20px 4px; }
.thanks-ticket__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  font-size: 15px;
  line-height: 1.45;
}
.thanks-ticket__row dt { color: var(--ink-faded); font-weight: 700; }
.thanks-ticket__row dd { margin: 0 0 0 auto; color: var(--ink); font-weight: var(--w-heavy); text-align: right; overflow-wrap: anywhere; }
.thanks-ticket__skeleton { display: inline-block; width: 8.5em; height: 13px; border-radius: 7px; background: var(--line-soft); vertical-align: middle; }
/* Útržek vstupenky: perforace a dva půlkruhové výřezy */
.thanks-ticket__stub {
  position: relative;
  margin-top: 14px;
  padding: 16px 20px 20px;
  border-top: 1.5px dashed var(--pal-sage-edge);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.thanks-ticket__stub::before,
.thanks-ticket__stub::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--pal-sage-edge);
}
.thanks-ticket__stub::before { left: -11px; clip-path: inset(0 0 0 50%); }
.thanks-ticket__stub::after  { right: -11px; clip-path: inset(0 50% 0 0); }
.thanks-ticket__stub p { margin: 0; }
.thanks-ticket__stub .btn { margin-top: 12px; min-height: var(--tap-min, 44px); }

.thanks-notes__title { margin: 0 0 10px; font: var(--w-display) 20px/1.2 var(--font-display); color: var(--ink); }
.thanks-notes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.thanks-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--hard-xs);
  text-align: left;
}
.thanks-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--pal-blue-badge);
  color: var(--pal-blue-badge-ink);
}
.thanks-note__icon--receipt { background: var(--pal-honey-badge); color: var(--pal-honey-badge-ink); }
.thanks-note__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thanks-note h3 { margin: 0; font: var(--w-display) 17px/1.25 var(--font-display); color: var(--ink); }
.thanks-note p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.thanks-note strong { color: var(--ink); }

/* Odkazy pod stránkou (globální patička je jen v #view-library) */
.thanks__links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.thanks__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  border-radius: 6px;
  color: var(--ink-faded);
  font: 800 14px/1.3 var(--font);
  text-underline-offset: 3px;
}
.thanks__links a:hover { color: var(--ink); }

/* =====================================================================
   ČTEČKA - skleněná lišta, obrázek a karta knížky, volby, konec
   ===================================================================== */
/* ── Horní lišta: přilepená skleněná pilulka (jako navigace), dole kulatá ── */
.reader-top {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-inline: -14px;
  padding: 10px 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--ui-bar-edge);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 5px 0 var(--ui-bar-shadow);
}
.reader-top__back { margin-left: 0; }
.reader-top__tools { margin-right: 0; gap: 8px; }
.reader-top__back,
.reader-tool {
  min-height: var(--tap-min);
  padding: 0 14px 0 11px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 0 var(--line);
  font: var(--w-heavy) 14px/1.2 var(--font);
}
.reader-tool--icon { width: var(--tap-min); padding: 0; }
.reader-top__back:hover,
.reader-tool:hover,
.reader-tool[aria-expanded="true"] { background: var(--pal-sage-1); border-color: var(--pal-sage-edge); }
.reader-top__back:active,
.reader-tool:active { transform: translateY(1px); box-shadow: none; }
.reader-top__title {
  font: var(--w-display) 18px/1.25 var(--font-display);
  letter-spacing: -0.2px;
  color: var(--ink);
}
/* Cestička: hotové = zelená (zamčený odstín), právě teď = malinová */
.reader-top .path__dot { border-width: 1.5px; border-color: var(--line-strong); background: var(--card); }
.reader-top .path__dot--done { background: var(--grass); border-color: color-mix(in oklab, var(--grass) 55%, #162147); }
.reader-top .path__dot--current { background: var(--action); border-color: var(--action-2); }
.path__more { color: var(--ink-faded); }
@media (max-width: 639px) {
  .reader-top { margin-inline: -10px; padding: 8px 10px; gap: 6px; }
  .reader-top__back { padding: 0; width: var(--tap-min); margin-left: 0; }
  .reader-top__tools { gap: 6px; }
  .reader-tool:not(.reader-tool--icon) { padding: 0 10px; }
  .reader-top__title { font-size: 16px; }
}

/* Plovoucí nabídky (Další možnosti, Režim čtení): karta se stínem */
.reader-more__menu,
.theme-menu {
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--hard-color), var(--ui-pop-shadow);
}
.reader-more__menu { top: calc(100% + 10px); padding: 6px; }
.reader-more__item { min-height: var(--tap-min); border-radius: 12px; font: 800 15px/1.2 var(--font); }
.reader-more__item:hover { background: var(--pal-sage-1); }
.theme-menu { padding: 12px; gap: 12px; }
.theme-menu__opts { gap: 8px; }
.theme-menu__opt {
  padding: 9px 4px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 0 var(--line);
  font: 800 13px/1.2 var(--font);
}
.theme-menu__opt:hover { background: var(--pal-sage-1); }
.theme-menu__opt[aria-pressed="true"],
.theme-menu__opt[aria-pressed="true"]:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--ink) 55%, transparent);
}
:root[data-theme="night"] .theme-menu__opt[aria-pressed="false"] { background: var(--paper-2); border-color: var(--line-strong); }
.theme-menu__bed { font: 800 14px/1.3 var(--font); color: var(--ink-2); }
.theme-menu__select {
  min-height: var(--tap-min);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: 800 14px/1.2 var(--font);
}
.theme-menu__hint { font-size: 12px; line-height: 1.45; color: var(--ink-faded); }

/* ── Obrázek a karta knížky (ozvěna ukázky v hero) ──────────────────── */
.reader__image {
  background: var(--paper-2);
  border: 1.5px solid var(--pal-sage-edge);
  border-radius: var(--radius);
  box-shadow: 4px 6px 0 var(--pal-sage-shadow);
}
:root[data-theme="night"] .reader__image {
  background: var(--paper-2);
  border-color: var(--pal-sage-edge);
  box-shadow: 4px 6px 0 var(--pal-sage-shadow);
}
/* Video stránky (ui.js showImage): tichá smyčka přes obrázek, který je jejím prvním snímkem. Prolne se až po
   prvním přehraném snímku; s „omezit pohyb“ se nevytváří vůbec, pravidlo níž je jen pojistka. */
.reader__image-media { position: relative; width: 100%; height: 100%; }
.reader__image-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out-quint);
  pointer-events: none;
}
.reader__image-video.is-playing { opacity: 1; }
:root[data-theme="night"] .reader__image-video { filter: brightness(.85) saturate(.9) sepia(.12); transition: opacity var(--dur-normal) var(--ease-out-quint), filter 200ms; }
:root[data-theme="night"] .reader__image:hover .reader__image-video,
:root[data-theme="night"] .reader__image:active .reader__image-video { filter: none; }
@media (prefers-reduced-motion: reduce) { .reader__image-video { display: none; } }
/* Přilepený obrázek se při posunu zastaví pod skleněnou lištou, ne pod ní */
@media (min-width: 900px) { .reader__image { top: 72px; } }
@media (max-width: 899px) and (orientation: landscape) { .reader__image { top: 72px; } }
.reader__body {
  isolation: isolate;
  background: var(--ui-book-paper);
  border: 1.5px solid var(--pal-sage-edge);
  border-radius: 24px 25px 25px 20px;
  box-shadow: 5px 7px 0 var(--pal-sage-shadow);
}
/* Hřbet stránek: linka těsně za levým okrajem karty (jako ukázková knížka) */
.reader__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px 2px 14px -7px;
  border-left: 1.5px solid var(--pal-sage-edge);
  border-radius: 12px;
  pointer-events: none;
}
.reader__question {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 1.12em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* Nová stránka se jemně „otočí“ (keyframes pageEnter v 00-base, jen bez reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .reader__text.is-shown { animation: pageEnter .45s var(--ease-out-quint) both; }
}

/* ── Volby: chrom ukázky (rádius 14, okraj v odstínu volby, tvrdý stín),
      bez náklonu. Barva, pořadí a tvar = zamčené --choice-color ─────── */
.reader .btn--choice {
  --choice-soft:  color-mix(in oklab, var(--choice-color) 15%, var(--ui-book-paper));
  --choice-edge:  color-mix(in oklab, var(--choice-color) 52%, var(--ui-book-paper));
  --choice-shade: color-mix(in oklab, var(--choice-color) 62%, #6E7F70);
  background: var(--choice-soft);
  border: 1.5px solid var(--choice-edge);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 var(--choice-shade);
  color: var(--ink);
  rotate: 0deg;
}
:root[data-theme="night"] .reader .btn--choice {
  --choice-soft:  color-mix(in oklab, var(--choice-color) 18%, var(--ui-book-paper));
  --choice-edge:  color-mix(in oklab, var(--choice-color) 45%, var(--ui-book-paper));
  --choice-shade: color-mix(in oklab, var(--choice-color) 30%, #12101A);
}
.reader .btn--choice__shape { border: 1.5px solid color-mix(in oklab, var(--choice-color) 45%, #162147); }
@media (hover: hover) and (pointer: fine) {
  .reader .btn--choice:hover { transform: none; box-shadow: 0 3px 0 var(--choice-shade); background: color-mix(in oklab, var(--choice-color) 22%, var(--ui-book-paper)); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .reader .btn--choice:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--choice-shade); }
}
.reader .btn--choice:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--choice-shade); }
@media (hover: none) {
  .reader .btn--choice:hover:not(.btn--choice--picked) { transform: none; box-shadow: 0 3px 0 var(--choice-shade); }
}
.reader .choices--decided .btn--choice--picked {
  background: var(--choice-color);
  color: var(--on-candy);
  border-color: var(--choice-shade);
  box-shadow: 0 3px 0 var(--choice-shade);
}
/* Vypravěč čte volbu: puls kolem tvrdého stínu v odstínu volby */
@keyframes choicePulse {
  from { box-shadow: 0 3px 0 var(--choice-shade, var(--choice-edge)); }
  to   { box-shadow: 0 3px 0 var(--choice-shade, var(--choice-edge)), 0 0 0 5px color-mix(in oklab, var(--choice-color) 35%, transparent); }
}

/* ── Konec příběhu: medová karta, zlaté hlavní tlačítko ─────────────── */
.reader--end .reader__body {
  background: var(--pal-honey-1);
  border-color: var(--pal-honey-edge);
  box-shadow: 5px 7px 0 var(--pal-honey-shadow);
}
.reader--end .reader__body::before { border-left-color: var(--pal-honey-edge); }
.reader-end__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font);
  letter-spacing: var(--ls-eyebrow);
  color: var(--pal-honey-ink);
}
/* Ilustrovaná hvězdička ze spritu (jen dekorace) */
.reader-end__kicker::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("/assets/storybook/icons.webp") 100% 100% / 300% 200% no-repeat;
}
.reader-end__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  letter-spacing: -1px;
  line-height: 1.07;
}
.reader-end__text { color: var(--ink-2); }
.reader-end__talk {
  gap: 14px;
  padding: 16px 18px;
  background: var(--ui-book-paper);
  border: 1px dashed var(--pal-honey-edge);
  border-radius: 17px;
}
:root[data-theme="night"] .reader-end__talk { background: color-mix(in oklab, var(--pal-honey-1) 55%, var(--paper)); }
.reader-end__talk-ico { stroke: var(--pal-honey-ink); }
.reader-end__talk-kicker { font: var(--w-heavy) var(--fs-eyebrow)/1.5 var(--font); letter-spacing: var(--ls-eyebrow); color: var(--pal-honey-ink); }
.btn.reader-end__close {
  min-height: 64px;
  background: var(--ui-gold);
  color: var(--ui-gold-ink);
  border: 1.5px solid var(--ui-gold-shade);
  border-radius: var(--radius-organic);
  box-shadow: 0 5px 0 var(--ui-gold-shade);
}
.btn.reader-end__close:hover { background: color-mix(in oklab, var(--ui-gold) 88%, var(--card)); transform: none; box-shadow: 0 5px 0 var(--ui-gold-shade); }
.btn.reader-end__close:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ui-gold-shade); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn.reader-end__close:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ui-gold-shade); }
}
@media (hover: none) {
  .btn.reader-end__close:hover:not(.btn--choice--picked) { background: var(--ui-gold); transform: none; box-shadow: 0 5px 0 var(--ui-gold-shade); }
}
.reader-end__replay {
  min-height: var(--tap-min);
  color: var(--ink-2);
  font-weight: var(--w-heavy);
  text-decoration: underline 2px;
  text-decoration-color: color-mix(in oklab, var(--ink-2) 35%, transparent);
  text-underline-offset: 5px;
}
.reader-end__replay:hover { background: none; text-decoration-color: currentColor; }

/* Poslat příběh (js/share.js): na kartě konce vedle „Prozkoumat jinou cestu“ (na úzkém telefonu pod ní),
   v detailu knihy nad hlavním tlačítkem. „Poslat přes WhatsApp“ přibude, jen když telefon sdílet neumí. */
.reader-end__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 6px;
}
.reader-end__share,
.share-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap-min);
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font: var(--w-heavy) 0.95rem/1.2 var(--font);
  text-decoration: underline 2px;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 5px;
  cursor: pointer;
}
.reader-end__share:hover,
.share-wa:hover { color: var(--ink); text-decoration-color: currentColor; }
.book-detail__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.book-detail__share-btn.btn { min-height: 44px; padding: 0.4rem 1rem; gap: 0.45rem; font-size: 15px; }
.book-detail__share .share-wa { padding-inline: 0.35rem; color: var(--ghost-ink); font-size: 15px; }

/* Tipy na další příběh pod tlačítky konce (js/ui.js _nextStories): tři malé obálky v řadě i na telefonu
   (375 px = dlaždice ~95 px), jedno klepnutí = čtení. Zámek / Zdarma / Rozečteno jako na kartách knihovny. */
.reader-next {
  margin-top: 0.9rem;
  padding-top: 1rem;
  border-top: 1.5px dashed var(--pal-honey-edge);
}
.reader-next__title {
  margin: 0 0 0.8rem;
  font: var(--w-display) clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem)/1.2 var(--font-display);
  color: var(--ink);
  text-align: center;
}
.reader-next__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 430px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.reader-next__card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 0 0 2px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  text-align: center;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reader-next__card:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 4px; }
.reader-next__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1.5px solid var(--pal-honey-edge);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 4px 0 var(--pal-honey-shadow);
  transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint);
}
.reader-next__fallback { position: absolute; inset: 0; }
/* Fallback obálka je dělaná pro velkou kartu: na malé dlaždici jen barva a iniciála, název je pod obálkou */
.reader-next__fallback .cover-fallback__title,
.reader-next__fallback .cover-fallback__mascot { display: none; }
.reader-next__fallback .cover-fallback__initial { font-size: 2.4rem; }
.reader-next__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s;
}
.reader-next__cover img.is-loaded { opacity: 1; }
.reader-next__badge {
  position: absolute;
  z-index: 2;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 0 #00000020;
  font: var(--w-heavy) 10px/1.4 var(--font);
  letter-spacing: .5px;
  text-transform: uppercase;
  rotate: -3deg;
  pointer-events: none;
}
.reader-next__badge--free { background: var(--pal-sage-1); color: var(--pal-sage-ink); }
.reader-next__badge--reading { background: var(--cta-bg); color: var(--cta-ink); }
.reader-next__badge--locked {
  left: auto;
  right: 6px;
  bottom: auto;
  top: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: var(--pal-honey-badge);
  color: var(--pal-honey-badge-ink);
  rotate: none;
}
.reader-next__badge--locked svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.reader-next__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font: var(--w-heavy) 0.86rem/1.25 var(--font);
  overflow-wrap: anywhere;
}
.reader-next__card:active .reader-next__cover { transform: translateY(3px); box-shadow: 0 1px 0 var(--pal-honey-shadow); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .reader-next__card:hover .reader-next__cover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--pal-honey-shadow); }
}
@media (max-width: 380px) {
  .reader-next__list { gap: 9px; }
  .reader-next__name { font-size: 0.8rem; }
}

/* Dráček na konci: vedle obrázku by horní polovinou zajel pod lištu -
   sedí proto v rohu karty (pod ním začíná nadpis, ten mu uhne) */
@media (min-width: 900px) {
  .reader--end .reader__mascot { top: 14px; right: 18px; --mascot-size: 84px; }
  .reader--end .reader-end__title { padding-right: 72px; }
}

/* ── Spodní lišta ─────────────────────────────────────────────────────── */
.reader-bottom__back,
.reader-bottom__night { font-weight: var(--w-heavy); border-radius: 12px; }
.reader-bottom__back:hover:not(:disabled),
.reader-bottom__night:hover { background: var(--pal-sage-1); }
.reader--end .reader-bottom__night,
.reader--end .reader-bottom__sound { border: 1px solid var(--line); background: var(--card); box-shadow: 0 2px 0 var(--line); }
.reader-bottom__saved { font-weight: 800; color: var(--ink-faded); }

/* ── Telefon na výšku: obrázek přes celou šířku, volby vždy vidět ────────
   Obrázek je na každé stránce čtverec přes celou šířku karty (Ondřej 2026-10-22: „čtverec musí
   být velký od kraje ke kraji“). Volby jsou panel připevněný nad spodní lištou (position: fixed,
   ve stejné šířce jako karta), takže jsou vidět hned, i když je pod velkým obrázkem dlouhý text;
   text jde dočíst posunutím a přechod do papíru nad panelem napoví, že pokračuje. Karta se natáhne
   až k liště a dole má místo na panel (--reader-choices-h). Polohu a šířku karty a výšku panelu
   měří čtečka (js/app.js: --reader-card-l, --reader-card-w, --reader-choices-h).
   Dřív obrázek bral jen místo, které zbylo po textu a volbách - u dlouhé stránky ~100-150 px
   (2026-10-15 až 22). Tablet a počítač beze změny. */
@media (max-width: 639px) and (orientation: portrait) {
  #view-reader { --reader-bar-h: calc(var(--tap-min) + 0.8rem + env(safe-area-inset-bottom, 0px)); }
  .reader { gap: 0.85rem; padding: 0.55rem 0 0.75rem; }
  .reader__image {
    flex: none;
    align-self: stretch;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
  }
  /* Dráček na kartě konce sedí v rohu karty vedle štítku „Konec příběhu“, ne přes roh velkého obrázku
     ani vedle nadpisu (ten by se zúžil a zalomil na víc řádků) */
  .reader--end .reader__mascot { top: 6px; right: 10px; --mascot-size: 50px; }
  .reader__body {
    --reader-card: var(--ui-book-paper);
    flex: 1 0 auto;
    padding: 1.1rem 1.1rem calc(var(--reader-choices-h, 11rem) + 0.4rem);
  }
  .reader--end .reader__body { --reader-card: var(--pal-honey-1); }
  .reader__question { margin-top: 0.7em; }
  .reader__choices,
  .reader--end .reader__choices {
    position: fixed;
    /* uvnitř okrajů karty (1.5px), ve stejné šířce jako karta */
    left: calc(var(--reader-card-l, 16px) + 1.5px);
    width: calc(var(--reader-card-w, 100vw - 32px) - 3px);
    bottom: calc(var(--reader-bar-h) - 0.9rem);
    z-index: 5;
    gap: 0.75rem;
    margin: 0;
    /* Neprůhledný papír karty (spodní odsazení zakryje text i pod průsvitným
       okrajem lišty); průhledný horní okraj nese přechod (::after) do textu nad panelem */
    border-top: 0.85rem solid transparent;
    padding: 0.15rem 1.1rem 0.9rem;
    background-color: var(--reader-card);
    background-clip: padding-box;
  }
  /* Panel voleb se ukazuje jen ve čtečce (skrytá čtečka ho nesmí nechat viset nad knihovnou) */
  #view-reader.view--hidden .reader__choices { display: none; }
  /* Karta konce: tlačítka (Zavřít knížku, jiná cesta, Poslat) jsou pod textem v kartě, ne v panelu -
     panel by zakryl nadpis konce, a barevné volby, kvůli kterým panel je, tu nejsou */
  .reader--end .reader__body { padding-bottom: 1.15rem; }
  .reader--end .reader__choices {
    position: static;
    width: auto;
    margin: 1.1rem 0 0;
    padding: 0;
    border-top: 0;
    background: none;
  }
  .reader--end .reader__choices::after { display: none; }
  .reader__choices::after {
    content: "";
    position: absolute;
    z-index: -1;   /* pod volbami (prstenec fokusu, puls vypravěče), pořád nad textem karty */
    inset: -0.85rem 0 auto;
    height: 0.85rem;
    background-color: var(--reader-card);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
    mask-image: linear-gradient(to bottom, transparent, #000);
    pointer-events: none;
  }
  /* Přepnutí den/noc: papír voleb mění barvu stejně pomalu jako karta (brand.css) */
  html.theme-ready .reader__choices,
  html.theme-ready .reader__choices::after { transition: background-color .5s; }
  .reader--end .reader__choices { gap: 0.35rem; }
  .reader .btn--choice { min-height: 60px; padding-block: 0.5rem; }
  .reader .btn--choice::after { inset: -6px; }
  .reader-bottom {
    padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
    /* Průhledný okraj lišty pevně 16 px: v procentech rostl se safe-area a přes „Zpět“ prosvítal text karty */
    background: linear-gradient(to top, var(--paper) calc(100% - 16px), color-mix(in oklab, var(--paper) 0%, transparent));
  }
}
/* Nižší telefony (Safari s lištou, menší iPhony): kompaktnější panel voleb, ať nad ním pod velkým
   obrázkem zbude aspoň řádek textu; tlačítko 52 px je pořád pohodlné pro dětský prst */
@media (max-width: 639px) and (orientation: portrait) and (max-height: 780px) {
  .reader__choices { gap: 0.5rem; }
  .reader .btn--choice { min-height: 52px; padding-block: 0.35rem; }
}
/* Nejužší telefony (320 px): „Předchozí stránka“ se nesmí zalomit, jinak je lišta
   vyšší než --reader-bar-h a přilepené volby by pod ni zajely */
@media (max-width: 359px) and (orientation: portrait) {
  .reader-bottom { gap: 0.5rem; }
  .reader-bottom__back,
  .reader-bottom__saved { padding-inline: 0.4rem; white-space: nowrap; }
}

/* =====================================================================
   TOASTY - medová cedulka z návrhu; v noci zůstává inkoustová
   ===================================================================== */
.toast {
  gap: 10px;
  padding: 12px 20px 12px 16px;
  background: var(--ui-toast-bg);
  color: var(--ui-toast-ink);
  border: 1px solid var(--ui-toast-edge);
  border-radius: 20px;
  box-shadow: 0 8px 30px #28435B25;
  font: var(--w-heavy) 15px/1.4 var(--font);
}
.toast::before { width: 11px; height: 11px; border: 0; background: var(--ui-toast-edge); }
.toast--ok::before { background: var(--status-ok); }
.toast--error::before { background: var(--status-error); }
:root[data-theme="night"] .toast {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 10px 30px #00000080;
}
:root[data-theme="night"] .toast::before { background: var(--paper-2); }
:root[data-theme="night"] .toast--ok::before { background: var(--status-ok); }
:root[data-theme="night"] .toast--error::before { background: var(--status-error); }
@media (max-width: 480px) { .toast { font-size: 14px; padding: 11px 16px 11px 14px; } }

/* =====================================================================
   PLOVOUCÍ VÝZVA (#sticky-cta) - teď skrytá (10-header.css); kdyby se
   vrátila, má stejné malinové tlačítko jako ostatní výzvy
   ===================================================================== */
.sticky-cta__btn.btn {
  min-height: 56px;
  padding-inline: 28px;
  box-shadow: 0 5px 0 var(--action-2), 0 14px 32px -10px rgba(22, 33, 71, 0.4);
}

/* ===================== 90-mascot ===================== */
/* =====================================================================
   90-MASCOT - hliněný dráček v2 (plan §6): stín, stavy bez smyčky, noc,
   velikosti míst mimo landing. Základ krabičky a stavů je v brand.css
   (1-110), velikosti sekcí landingu v jejich souborech (20-hero, 30-library,
   40-parents, 50-pricing, 60-faq, 70-bedtime). Barvu volí data-variant
   (zeleny | fialovy | modry) - obrázky ji nesou samy, CSS ji nepotřebuje.
   ===================================================================== */

/* Měkký teplý stín pod sedícím dráčkem (hlína na papíře, ne inkoust) */
.mascot__pose.has-shadow::before {
  left: 10%; right: 10%; bottom: -2.5%; height: 7%;
  background: radial-gradient(closest-side, rgba(70, 58, 30, .16), rgba(70, 58, 30, 0));
}
:root[data-theme="night"] .mascot__pose.has-shadow::before,
.cta-section.bedtime .mascot__pose.has-shadow::before {
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
}

/* HELLO (mávání): smyčku má jen zelený, ostatní barvy jemně dýchají */
.mascot[data-state="hello"] .mascot__pose { animation: m-breathe 3.2s ease-in-out infinite alternate; }

/* Noc: šalvějová hlína na teplé tmě zaniká - jemná zlatavá záře jako u spícího
   dráčka ve večerní sekci (ta má záři na obalu, tady by se zdvojila) */
:root[data-theme="night"] .mascot:not(.cta-section__mascot .mascot) .mascot__pose {
  filter: drop-shadow(0 0 12px rgba(248, 206, 118, .18));
}

/* Ukázka v hero (desktop): sedící dráček je štíhlejší než starý mávající -
   o kousek větší krabička, spodek pořád 36 px pod hranou karty (20-hero má 88/-52) */
@media (min-width: 851px) {
  .hero-demo__mascot { --mascot-size: 100px; top: -64px; }
}

/* ── Velikosti míst mimo landing ──────────────────────────────────────────
   Čtečka a hlavička katalogu drží dřívější velikosti (brand.css, 85-ui.css).
   Sedící hliněný dráček je štíhlejší než starý mávající (šířka 0,74 krabičky
   místo 0,96), v dialozích a prázdných stavech proto o kousek větší krabička. */
.confirm__mascot { --mascot-size: 78px; display: flex; justify-content: center; }
.onboarding__mascot { --mascot-size: 104px; }
#sub-loading-mascot { --mascot-size: 80px; display: flex; justify-content: center; }
.library-empty__mascot { --mascot-size: 116px; }
/* Náhradní obálka: dráček v rohu, bez stínu (sedí na barevné ploše) */
.cover-fallback__mascot .mascot__pose.has-shadow::before { content: none; }

/* Logo v navigaci a patičce = hlava (img), velikosti v 10-header a 80-footer */
.mascot-head { height: 40px; width: auto; aspect-ratio: auto; }