/**
 * Obrlobus – vzhled „Příchod“ (podle obrazu Příchod). Načítá se PO site-base.css (includes/header.php),
 * jediný vzhled webu (Pastel i vyšívaná varianta vyřazené, archivy assets/css/pastel-archiv a vysivka-archiv).
 * Společné rozložení je v site-base.css; proměnné --pastel-* jsou jen společné tokeny s hodnotami Příchodu.
 *
 * Pravidla (read/claude/vizual-prichod-plan.md):
 *  - jen Jakubova původní paleta (Procreate, před efekty),
 *  - dva motivy podle denní doby na zařízení: světlý = ráno a den (7–19 h), tmavý = večer a noc;
 *    ruční volba (přepínač v liště) se uloží a má přednost – data-theme na <html> nastavuje header.php,
 *  - jeviště: malovaná opona / mlha + kouř (Texturelabs Atmosphere 205, 207, 195) + šum ~7 %,
 *  - tlačítka „skládání“ (Jakubův návrh buttons.svg): samostatné tlačítko = pilulka / kruh; ve skupině
 *    vedle sebe nebo pod sebou mají vnější rohy plné zaoblení a rohy, kterými se dotýkají, malé (sekce 4),
 *  - globální: proměnné design-system.css se tu přemapují na paletu Příchodu, takže je převezmou
 *    i komponenty, které Příchod ještě nestyluje (fáze F2–F5 doplní čtečku, hlavní stránku, seznamy…).
 */

/* Písmo nadpisů stránek = stejné jako v administraci: Cinzel Decorative 700 (soubory v assets/fonts, licence OFL) */
@font-face {
    font-family: "Cinzel Decorative";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../fonts/cinzel-decorative-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cinzel Decorative";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../fonts/cinzel-decorative-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   1) Tokeny – světlý motiv (ráno a den) je základ, tmavý níže
   ========================================================================= */
:root[data-look="prichod"] {
    /* Příchod */
    --pr-stage: #dde2e5;
    /* lišta prohlížeče a přetažení stránky (iPhone) = horní okraj jeviště na telefonu, změřeno; header.php
       (pozadí Jakub 11. 10.: web_background_light/dark → backdrop-light/dark.webp) */
    --pr-chrome: #bdbdbc;
    /* přesah pevných vrstev za okraj okna: Safari na iOS 26 kreslí stránku i pod horní lištou a spodním
       panelem s adresou, pevné vrstvy s inset: 0 tam nesahají → bez přesahu je pod lištami ostrý text na ploché barvě */
    --pr-bleed: 160px;
    --pr-stage-img: url("../../images/prichod/backdrop-light.webp");
    --pr-haze-op: 0.30;
    --pr-floor-op: 0.70;
    --pr-wisps-op: 0.10;
    --pr-noise-op: 0.10;
    --pr-ink: #1b1b1b;
    --pr-ink-2: #2c2c2c;
    --pr-muted: #5a5e62;
    --pr-link: #2a553e;
    --pr-btn: #2a553e;
    --pr-btn-ink: #f2f4f5;
    --pr-btn-hi: rgba(87, 183, 132, 0.85);
    --pr-ghost-line: rgba(27, 27, 27, 0.4);
    --pr-control: #357a52;
    --pr-icon-btn: #f2f4f5;
    --pr-icon-btn-ink: #1b1b1b;
    --pr-bar: rgba(242, 244, 245, 0.55);
    --pr-panel: rgba(242, 244, 245, 0.92);
    --pr-gold: #c8961e;
    --pr-buckle: #e6b43d;
    --pr-mark: #c8961e;
    --pr-fav: rgba(212, 165, 44, 0.4);
    --pr-focus-light: rgba(255, 255, 255, 0.5);
    --pr-edge: rgba(242, 244, 245, 0.78);
    --pr-fog: rgba(242, 244, 245, 0.62);
    --pr-track: rgba(27, 27, 27, 0.15);
    --pr-ca-red: rgba(255, 40, 90, 0.4);
    --pr-ca-cyan: rgba(40, 220, 255, 0.4);
    /* tlačítka: samostatné = pilulka / kruh; ve skupině malé zaoblení tam, kde se dotýkají (sekce 4) */
    --pr-btn-radius: 999px;
    --pr-btn-radius-sm: 999px;
    --pr-icon-radius: 50%;
    --pr-stack-inner: 7px;
    --pr-stack-gap: 6px;
    --pr-card-radius: 6px;
    /* nadpisy stránek jako v administraci (Jakub 8. 10.) */
    --pr-font-title: "Cinzel Decorative", "Trajan Pro", Georgia, serif;

    /* design-system.css → paleta Příchodu */
    --color-ink: var(--pr-ink);
    --color-ink-soft: var(--pr-ink-2);
    --color-muted: var(--pr-muted);
    --color-muted-light: #9a9ea2;
    --color-linen: var(--pr-stage);
    --color-cream: #f2f4f5;
    --color-paper: #dde2e5;
    --color-white: #f2f4f5;
    --color-sage: var(--pr-link);
    --color-sage-light: var(--pr-control);
    --color-sage-muted: rgba(42, 85, 62, 0.12);
    --color-gold: var(--pr-gold);
    --color-gold-soft: var(--pr-fav);
    --color-night: #1b1b1b;
    --tint-rgb: 27 27 27;
    --surface-glass: var(--pr-panel);
    --surface-glass-soft: rgba(242, 244, 245, 0.7);
    --surface-elevated: #f2f4f5;
    --surface-overlay: rgba(18, 30, 42, 0.72);
    --border-soft: rgba(27, 27, 27, 0.18);
    --border-hairline: rgba(27, 27, 27, 0.1);
    --antracit: var(--pr-panel);
    --accent: var(--pr-ink);
    --accent-blue: var(--pr-btn);
    --accent-blue-soft: var(--pr-control);
    --panel-bg: #f2f4f5;
    --panel-soft: #dde2e5;
    --text-muted: var(--pr-muted);
    --pastel-charcoal: #1b1b1b;
    --pastel-chalk: #f2f4f5;
    --pastel-brass: #d4a52c;
    --pastel-teal: #357a52;
    --pastel-teal-deep: #1c342c;
    --pastel-leather: #23323d;
    --pastel-ocean: #2a4a66;
    --pastel-emerald: #2a553e;
    --pastel-lipstick: #1b1b1b;
    --pastel-kraft: #9a9ea2;
    --pastel-cream: #dde2e5;
    --pastel-bar: #121e2a;
    --pastel-bar-ink: #f2f4f5;
    --pastel-sheet: #f2f4f5;
    --pastel-sheet-ink: #1b1b1b;
    --pastel-primary: var(--pr-btn);
    --pastel-primary-ink: var(--pr-btn-ink);
    --pastel-active: var(--pr-control);
    --pastel-active-ink: #f2f4f5;
    --pastel-line: #1b1b1b;
    --pastel-track: var(--pr-track);
    /* crayon efekty pastelu vypnuté (masky, 9-slice okraje, tahy, oddělovače, zrno, papír) */
    --paper-texture: none;
    --pastel-grain: none;
    --pastel-tooth: none;
    --pastel-tooth-soft: none;
    --pastel-mask: none;
    --pastel-mask-a: none;
    --pastel-mask-b: none;
    --pastel-mask-c: none;
    --pastel-mask-top: none;
    --pastel-mask-bottom: none;
    --pastel-edge-a: none;
    --pastel-edge-b: none;
    --pastel-edge-c: none;
    /* 9-slice tvary (mask-box-image) – místo otřepaných crayon okrajů čisté tvary Příchodu ve stejném rozměru:
       obrys a plocha 400×128 / výřez 58 (samostatná pilulka), panel 512×512 / výřez 48 (zaoblení 6 px).
       Nesmí být none: prvky s obrysem mají plochu v barvě textu a tvar jim dává teprve maska. */
    --pr-mask-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='128'%3E%3Cpath d='M58.0 1.2H342.0A56.8 56.8 0 0 1 398.8 58.0V70.0A56.8 56.8 0 0 1 342.0 126.8H58.0A56.8 56.8 0 0 1 1.2 70.0V58.0A56.8 56.8 0 0 1 58.0 1.2Z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");
    --pr-mask-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='128'%3E%3Cpath d='M58 0H342A58 58 0 0 1 400 58V70A58 58 0 0 1 342 128H58A58 58 0 0 1 0 70V58A58 58 0 0 1 58 0Z'/%3E%3C/svg%3E");
    --pr-mask-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M12 0H500A12 12 0 0 1 512 12V500A12 12 0 0 1 500 512H12A12 12 0 0 1 0 500V12A12 12 0 0 1 12 0Z'/%3E%3C/svg%3E");
    --pastel-box: var(--pr-mask-box);
    --pastel-box-a: var(--pr-mask-box);
    --pastel-box-b: var(--pr-mask-box);
    --pastel-box-c: var(--pr-mask-box);
    /* tah pod nadpisem = tenká linka 3 px uprostřed plochy (maska roztažená na 100 %) */
    --pastel-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Crect y='2.5' width='100' height='3'/%3E%3C/svg%3E");
    /* oddělovače (border-image 1200×16, výřez 16) = jemná linka; barva je v obrázku, proto zvlášť pro tmavý motiv */
    --pastel-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='16'%3E%3Crect y='6.75' width='1200' height='2.5' fill='%231b1b1b' fill-opacity='0.32'/%3E%3C/svg%3E");
    --pastel-rule-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='16'%3E%3Crect y='6.75' width='1200' height='2.5' fill='%231b1b1b' fill-opacity='0.18'/%3E%3C/svg%3E");
    --pill-line-a: var(--pr-mask-line);
    --pill-line-b: var(--pr-mask-line);
    --pill-fill-a: var(--pr-mask-fill);
    --pill-fill-b: var(--pr-mask-fill);
    --pastel-control: var(--pr-icon-btn);
    --pastel-control-ink: var(--pr-icon-btn-ink);
    --pastel-control-hover: var(--pr-icon-btn);
    --pastel-control-active: var(--pr-control);
    --pastel-control-active-ink: #f2f4f5;
    --logo-stop-inner: #bc782d;
    --logo-stop-bright: #e6b43d;
    --logo-stop-outer: #bc782d;
    --logo-hole-fill: #1b1b1b;
    --logo-hole-stroke: #1b1b1b;
    /* knoflík loga: zlatá má na světlém jevišti stejný jas jako pozadí → jemný stín (Jakub 11. 10., varianta A) */
    --pr-logo-shadow: drop-shadow(0 1.5px 2px rgba(27, 27, 27, 0.5));
    --pr-pin-shadow: drop-shadow(0 1.5px 2px rgba(27, 27, 27, 0.5)); /* špendlíky na světlé mapě, stejně jako logo */
    /* lepíky (dlaždice oblastí): těsný stín u papíru + měkký pod ním; při najetí delší (Jakub 11. 10.) */
    --pr-note-shadow: drop-shadow(0 1px 1.5px rgba(27, 27, 27, 0.3)) drop-shadow(0 8px 12px rgba(27, 27, 27, 0.28));
    --pr-note-shadow-hover: drop-shadow(0 2px 2px rgba(27, 27, 27, 0.26)) drop-shadow(0 16px 20px rgba(27, 27, 27, 0.3));
    --shadow-md: 0 10px 26px rgba(27, 27, 27, 0.18);
    --shadow-lg: 0 18px 42px rgba(27, 27, 27, 0.24);
    color-scheme: light;
}

/* Tmavý motiv (večer a noc). Bez JavaScriptu rozhodne nastavení systému – proto blok i v @media. */
:root[data-look="prichod"][data-theme="dark"] {
    --pr-stage: #121e2a;
    --pr-chrome: #303c46;
    --pr-logo-shadow: none;
    --pr-pin-shadow: drop-shadow(0 1px 1.5px rgba(27, 27, 27, 0.35));
    --pr-note-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
    --pr-note-shadow-hover: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45));
    --pr-stage-img: url("../../images/prichod/backdrop-dark.webp");
    --pr-haze-op: 0.22;
    /* tmavý motiv: přízemní mlha přes celou šířku slabší – jinak světlý text u spodního okraje ztrácí kontrast */
    --pr-floor-op: 0.3;
    --pr-wisps-op: 0.10;
    --pr-noise-op: 0.14;
    --pr-ink: #f2f4f5;
    --pr-ink-2: #dde2e5;
    --pr-muted: #9a9ea2;
    --pr-link: #57b784;
    --pr-ghost-line: rgba(242, 244, 245, 0.45);
    --pr-icon-btn: #121e2a;
    --pr-icon-btn-ink: #f2f4f5;
    --pr-bar: rgba(18, 30, 42, 0.55);
    --pr-panel: rgba(18, 30, 42, 0.94);
    --pr-gold: #d4a52c;
    --pr-fav: rgba(212, 165, 44, 0.24);
    --pr-focus-light: rgba(87, 183, 132, 0.11);
    --pr-edge: rgba(8, 31, 33, 0.62);
    --pr-fog: rgba(8, 31, 33, 0.58);
    --pr-track: rgba(242, 244, 245, 0.18);
    --color-muted-light: #5a5e62;
    --color-cream: #2c2c2c;
    --color-paper: #121e2a;
    --color-white: #23323d;
    --color-sage-muted: rgba(87, 183, 132, 0.14);
    --tint-rgb: 242 244 245;
    --surface-glass-soft: rgba(18, 30, 42, 0.72);
    --surface-elevated: #23323d;
    --surface-overlay: rgba(0, 0, 0, 0.72);
    --border-soft: rgba(242, 244, 245, 0.18);
    --border-hairline: rgba(242, 244, 245, 0.1);
    --panel-bg: #23323d;
    --panel-soft: #2c2c2c;
    --pastel-sheet: #23323d;
    --pastel-sheet-ink: #f2f4f5;
    --pastel-line: #f2f4f5;
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --pastel-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='16'%3E%3Crect y='6.75' width='1200' height='2.5' fill='%23f2f4f5' fill-opacity='0.34'/%3E%3C/svg%3E");
    --pastel-rule-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='16'%3E%3Crect y='6.75' width='1200' height='2.5' fill='%23f2f4f5' fill-opacity='0.2'/%3E%3C/svg%3E");
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-look="prichod"]:not([data-theme="light"]) {
        --pr-stage: #121e2a;
        --pr-chrome: #303c46;
        --pr-logo-shadow: none;
        --pr-pin-shadow: drop-shadow(0 1px 1.5px rgba(27, 27, 27, 0.35));
        --pr-note-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
        --pr-note-shadow-hover: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45));
        --pr-stage-img: url("../../images/prichod/backdrop-dark.webp");
        --pr-haze-op: 0.22;
        /* tmavý motiv: přízemní mlha přes celou šířku slabší – jinak světlý text u spodního okraje ztrácí kontrast */
        --pr-floor-op: 0.3;
        --pr-wisps-op: 0.10;
        --pr-noise-op: 0.14;
        --pr-ink: #f2f4f5;
        --pr-ink-2: #dde2e5;
        --pr-muted: #9a9ea2;
        --pr-link: #57b784;
        --pr-ghost-line: rgba(242, 244, 245, 0.45);
        --pr-icon-btn: #121e2a;
        --pr-icon-btn-ink: #f2f4f5;
        --pr-bar: rgba(18, 30, 42, 0.55);
        --pr-panel: rgba(18, 30, 42, 0.94);
        --pr-gold: #d4a52c;
        --pr-fav: rgba(212, 165, 44, 0.24);
        --pr-focus-light: rgba(87, 183, 132, 0.11);
        --pr-edge: rgba(8, 31, 33, 0.62);
        --pr-fog: rgba(8, 31, 33, 0.58);
        --pr-track: rgba(242, 244, 245, 0.18);
        --color-muted-light: #5a5e62;
        --color-cream: #2c2c2c;
        --color-paper: #121e2a;
        --color-white: #23323d;
        --color-sage-muted: rgba(87, 183, 132, 0.14);
        --tint-rgb: 242 244 245;
        --surface-glass-soft: rgba(18, 30, 42, 0.72);
        --surface-elevated: #23323d;
        --surface-overlay: rgba(0, 0, 0, 0.72);
        --border-soft: rgba(242, 244, 245, 0.18);
        --border-hairline: rgba(242, 244, 245, 0.1);
        --panel-bg: #23323d;
        --panel-soft: #2c2c2c;
        --pastel-sheet: #23323d;
        --pastel-sheet-ink: #f2f4f5;
        --pastel-line: #f2f4f5;
        --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
        --pastel-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='16'%3E%3Crect y='6.75' width='1200' height='2.5' fill='%23f2f4f5' fill-opacity='0.34'/%3E%3C/svg%3E");
        --pastel-rule-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='16'%3E%3Crect y='6.75' width='1200' height='2.5' fill='%23f2f4f5' fill-opacity='0.2'/%3E%3C/svg%3E");
        --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
        color-scheme: dark;
    }
}

/* =========================================================================
   2) Jeviště – opona / mlha, kouř a šum. Vrstvy jsou fixní (i na iOS, bez background-attachment).
   ========================================================================= */
:root[data-look="prichod"] {
    /* plocha mimo jeviště (přetažení stránky na iPhonu) navazuje na lištu prohlížeče */
    background-color: var(--pr-chrome, var(--pr-stage));
}

/* LIŠTY SAFARI (iOS 26) – pravidlo ze zdrojového kódu WebKitu (LocalFrameView::fixedContainerEdges, WKWebView
   _updateFixedColorExtensionViews): Safari se podívá doprostřed horního a spodního okraje okna; najde-li tam pevný
   nebo lepivý prvek, který se počítá jako „lišta stránky“, zakryje prostor pod svou lištou a Dynamic Islandem
   PLNOU barvou (barva prvku, jinak vzorek pixelů). Bez takového prvku je pod lištami vidět stránka (jako v Chromu).
   Pevný / lepivý prvek u okraje se NEPOČÍTÁ, když:
     - je užší než 90 % šířky okna a nižší než 90 % výšky,
     - je vyšší než 105 % výšky okna a není „ztmavovací vrstva“ (vrstvy s přesahem --pr-bleed),
     - má opacity pod 0,1 nebo nemá pozadí, backdrop-filter ani obsah.
   „Ztmavovací vrstva“ = má pozadí, nemá obsah a má opacity < 1 nebo poloprůhlednou barvu pozadí → počítá se vždy.
   Proto pevné vrstvy přes celé okno NESMÍ mít opacity < 1 (průhlednost dává maska s konstantní průhledností)
   a pásy rozostření jsou průhledné rámečky přes celou výšku okna, viditelný pás nese vnitřní ::before.
   Nepřidávat pevné prvky u okraje s vlastním pozadím (dřívější proužky .pr-bar-tint lištu naopak vybarvily). */

/* Stránka se posouvá oknem prohlížeče, ne vlastním kontejnerem: style.css dává html i body „overflow: auto“,
   tím se body stane posuvným kontejnerem a Safari na iPhonu (iOS 26) pak kreslí pevné vrstvy (jeviště,
   rozostření, mlhu) jen mezi lištami – pod lištami byl ostrý text na ploché barvě. Body proto bez posuvného
   kontejneru; přetečení do strany ořízne okno (overflow-x na <html> se přenese na okno, posouvá se dál okno). */
:root[data-look="prichod"] {
    overflow-x: hidden;
}

:root[data-look="prichod"] body {
    overflow: visible;
}

/* tělo stránky průhledné, aby bylo vidět jeviště pod obsahem;
   viewport-fit=cover (header.php): obsah odsazený od výřezů displeje (Dynamic Island, zaoblené rohy, na šířku) */
:root[data-look="prichod"] body {
    background: transparent !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

:root[data-look="prichod"] body .site-header {
    padding-top: env(safe-area-inset-top, 0px);
}

:root[data-look="prichod"] body .site-footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

:root[data-look="prichod"] body::before,
:root[data-look="prichod"] body::after {
    content: "";
    position: fixed;
    inset: calc(-1 * var(--pr-bleed)) 0;
    pointer-events: none;
}

/* malovaná opona (tmavý) / mlha (světlý). Plně neprůhledná – s opacity < 1 by z ní Safari udělal plnou lištu
   (viz LIŠTY SAFARI výše). */
:root[data-look="prichod"] body::before {
    z-index: -2;
    background: var(--pr-stage-img) center / cover no-repeat;
}

/* kouř přidává světlo jako na obraze: opar, závoje a přízemní mlha u spodního okraje */
:root[data-look="prichod"] body::after {
    z-index: -1;
    background:
        url("../../images/prichod/smoke-wisps.webp") center / cover no-repeat,
        url("../../images/prichod/smoke-haze.webp") center / cover no-repeat;
    mix-blend-mode: screen;
    /* síla kouře maskou, ne opacity (lišty Safari, viz výše) */
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, var(--pr-haze-op)), rgba(0, 0, 0, var(--pr-haze-op)));
    mask-image: linear-gradient(rgba(0, 0, 0, var(--pr-haze-op)), rgba(0, 0, 0, var(--pr-haze-op)));
}

/* přízemní mlha u spodního okraje (vlastní síla). Vrstva přes celou výšku okna (lišty Safari, viz výše),
   mlha sama zabírá spodních 38vh + přesah; síla maskou, ne opacity. */
:root[data-look="prichod"]::before {
    --pr-floor-h: calc(38vh + var(--pr-bleed));
    content: "";
    position: fixed;
    left: -10%;
    right: -10%;
    top: calc(-1 * var(--pr-bleed));
    bottom: calc(-1 * var(--pr-bleed));
    z-index: -1;
    pointer-events: none;
    background: url("../../images/prichod/smoke-floor.webp") center bottom / 100% var(--pr-floor-h) no-repeat;
    -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, var(--pr-floor-op)) 0, rgba(0, 0, 0, var(--pr-floor-op)) calc(var(--pr-floor-h) * 0.55), transparent var(--pr-floor-h));
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, var(--pr-floor-op)) 0, rgba(0, 0, 0, var(--pr-floor-op)) calc(var(--pr-floor-h) * 0.55), transparent var(--pr-floor-h));
    mix-blend-mode: screen;
}

/* Obsah u okrajů a pod lištami prohlížeče (dotyková zařízení, assets/js/prichod-edge.js): rozostřený sám,
   protože Safari na iOS 26 pod lišty pevné pásy rozostření nepustí, obyčejný obsah ano. Míra = plný pás na telefonu. */
:root[data-look="prichod"] .pr-edge-blur {
    filter: blur(2.5px) !important;
    opacity: 0.7 !important;
    transition: filter 0.25s ease-out, opacity 0.25s ease-out;
}

/* dlouhý prvek přes okraj: od začátku zóny u okraje (t1 / b0) do okraje okna (t0 / b1) plynule mizí do mlhy,
   pod lištou zůstane jen slabý obrys (25 %); hodnoty v px od horního okraje prvku nastavuje prichod-edge.js */
:root[data-look="prichod"] .pr-edge-fade {
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) var(--pr-fade-t0), #000 var(--pr-fade-t1),
        #000 var(--pr-fade-b0), rgba(0, 0, 0, 0.25) var(--pr-fade-b1), rgba(0, 0, 0, 0.25) 100%);
    mask-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) var(--pr-fade-t0), #000 var(--pr-fade-t1),
        #000 var(--pr-fade-b0), rgba(0, 0, 0, 0.25) var(--pr-fade-b1), rgba(0, 0, 0, 0.25) 100%);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-look="prichod"] .pr-edge-blur {
        transition: none;
    }
}

/* rozostření a mlha u spodního okraje obrazovky (stránky mimo čtečku; Jakub 8. 10.: jako ve čtečce, láká
   posunout a číst dál): od spodního okraje plně, do 20 % výšky se rozplyne; přesahuje pod spodní lištu Safari.
   Sílu --pr-site-band (0–1) snižuje ke konci stránky assets/js/prichod-stage.js. Pod hlavičkou a panely (z-index 50). */
:root[data-look="prichod"] .pr-site-band {
    /* Safari na iOS 26 dělá z pevného prvku u okraje s vlastním backdrop-filter / pozadím plnou barvu lišty
       (překrytí) – proto je pevný prvek průhledný rámeček bez pozadí (Safari ho pak kreslí přes celou obrazovku,
       i pod lištami) a rozostření s mlhou nese vnitřní vrstva ::before. Průhlednost (síla pásu) patří vrstvě
       ::before, ne rámečku: rámeček s opacity < 1 by vnitřnímu backdrop-filter zakryl obsah pod ním. */
    /* rámeček přes celou výšku okna (vyšší než okno = Safari ho nebere jako lištu, viz LIŠTY SAFARI výše);
       viditelný pás je vnitřní ::before u spodního okraje */
    position: fixed;
    left: 0;
    right: 0;
    top: calc(-1 * var(--pr-bleed));
    bottom: calc(-1 * var(--pr-bleed));
    z-index: 50;
    pointer-events: none;
}

:root[data-look="prichod"] .pr-site-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(20vh + var(--pr-bleed));
    opacity: var(--pr-site-band, 1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: linear-gradient(0deg, var(--pr-fog) 0%, var(--pr-fog) var(--pr-bleed), transparent 100%);
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 var(--pr-bleed), transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 var(--pr-bleed), transparent 100%);
}

@media (max-width: 768px) {
    :root[data-look="prichod"] .pr-site-band::before {
        -webkit-backdrop-filter: blur(2.5px);
        backdrop-filter: blur(2.5px);
        background: linear-gradient(0deg, color-mix(in srgb, var(--pr-fog) 75%, transparent) 0%, color-mix(in srgb, var(--pr-fog) 75%, transparent) var(--pr-bleed), transparent 100%);
    }
}

/* šum ~7 % přes celou stránku – VYPNUTO (Jakub 8. 10.: zatím jen rozostření, o šumu rozhodne později;
   zapnout = smazat „display: none“ níže). */
:root[data-look="prichod"]::after {
    display: none;
    content: "";
    position: fixed;
    inset: calc(-1 * var(--pr-bleed)) 0;
    z-index: 2147483000;
    pointer-events: none;
    background: url("../../images/prichod/noise.webp") 0 0 / 256px 256px repeat;
    mix-blend-mode: overlay;
    /* síla maskou, ne opacity (lišty Safari, viz výše) */
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, var(--pr-noise-op)), rgba(0, 0, 0, var(--pr-noise-op)));
    mask-image: linear-gradient(rgba(0, 0, 0, var(--pr-noise-op)), rgba(0, 0, 0, var(--pr-noise-op)));
}

:root[data-look="prichod"] ::selection {
    background: var(--pr-fav);
    color: var(--pr-ink);
}

:root[data-look="prichod"] a {
    color: var(--pr-link);
}

/* =========================================================================
   3) Hlavička a patička (stejné na všech stránkách)
   ========================================================================= */
:root[data-look="prichod"] header.site-header {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

:root[data-look="prichod"] .site-utility-bar,
:root[data-look="prichod"] .site-topbar {
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
}

:root[data-look="prichod"] .site-utility-bar {
    color: var(--pr-ink-2) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
}

:root[data-look="prichod"] .site-utility-bar a,
:root[data-look="prichod"] .site-utility-bar button,
:root[data-look="prichod"] .site-utility-bar__label,
:root[data-look="prichod"] .site-utility-account__trigger {
    color: var(--pr-ink-2) !important;
}

:root[data-look="prichod"] .site-utility-bar a:hover,
:root[data-look="prichod"] .site-utility-bar button:hover,
:root[data-look="prichod"] .site-utility-bar a:focus-visible,
:root[data-look="prichod"] .site-utility-bar button:focus-visible {
    color: var(--pr-link) !important;
}

/* logo = Jakubův zlatý knoflík (barvy v SVG); stín jen ve světlém motivu (--pr-logo-shadow) */
:root[data-look="prichod"] .logo-mark .logo-svg-mark {
    filter: var(--pr-logo-shadow, none);
}

/* rozbalovací panel, vyhledávání a menu = sklo nad jevištěm */
:root[data-look="prichod"] .site-topbar-dropdown,
:root[data-look="prichod"] .site-topbar-search-strip,
:root[data-look="prichod"] .site-nav-mega {
    background: var(--pr-panel);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--pr-ink);
}

/* počítač: blok pod knoflíkem je trvale vidět a průhledný (Jakub 10. 10.) → bez skla, jinak pod vyhledáváním a menu
   vznikal rozmazaný pruh. Rozmazání u horního okraje má jen čtečka (vlastní pás, reader-focus.js); telefon = boční panel se sklem. */
@media (min-width: 769px) {
    :root[data-look="prichod"] .site-topbar-dropdown,
    :root[data-look="prichod"] .site-topbar-search-strip,
    :root[data-look="prichod"] .site-nav-mega {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

:root[data-look="prichod"] .site-nav-mega__heading {
    color: var(--pr-ink);
}

:root[data-look="prichod"] .site-nav-mega__list a,
:root[data-look="prichod"] .site-breadcrumb__link {
    color: var(--pr-ink-2);
}

:root[data-look="prichod"] .site-nav-mega__list a:hover,
:root[data-look="prichod"] .site-nav-mega__list a:focus-visible,
:root[data-look="prichod"] .site-breadcrumb__link:hover {
    color: var(--pr-link);
}

:root[data-look="prichod"] .site-search {
    background: rgb(var(--tint-rgb) / 0.06);
    border: 1px solid var(--border-soft);
    border-radius: var(--pr-btn-radius-sm);
}

:root[data-look="prichod"] .site-search:focus-within {
    border-color: var(--pr-control);
}

:root[data-look="prichod"] .site-search__input,
:root[data-look="prichod"] .site-search__result {
    color: var(--pr-ink);
}

:root[data-look="prichod"] .site-search__input::placeholder,
:root[data-look="prichod"] .site-search__icon {
    color: var(--pr-muted);
}

:root[data-look="prichod"] .site-search__results,
:root[data-look="prichod"] .site-utility-auth-panel,
:root[data-look="prichod"] .site-auth-overlay__dialog,
:root[data-look="prichod"] .ui-card,
:root[data-look="prichod"] .site-account-menu {
    background: var(--pr-panel);
    color: var(--pr-ink);
    border-color: var(--border-soft);
}

:root[data-look="prichod"] .ui-card__title,
:root[data-look="prichod"] .site-utility-auth-panel__title {
    color: var(--pr-ink);
}

:root[data-look="prichod"] .ui-card__description,
:root[data-look="prichod"] .ui-card__content,
:root[data-look="prichod"] .site-utility-auth-panel__hint {
    color: var(--pr-ink-2);
}

:root[data-look="prichod"] .site-footer {
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    border-top: 1px solid var(--border-hairline);
    color: var(--pr-muted) !important;
}

/* nadpisy: místo tahu pastelem tenká linka barvy pláště */
:root[data-look="prichod"] .page-heading::after,
:root[data-look="prichod"] .obrlobus-section__title.page-heading::after {
    height: 3px !important;
    width: min(120px, 30%) !important;
    border-radius: 2px;
    background: var(--pr-link) !important;
    -webkit-mask: none !important;
    mask: none !important;
}

/* oddělovače: místo tahu pastelem jemná linka */
:root[data-look="prichod"] hr.obrlobus-home-intro-divider,
:root[data-look="prichod"] .page-subsection-divider {
    border-image: none !important;
    border-top: 1px solid var(--border-soft) !important;
}

:root[data-look="prichod"] .site-footer p,
:root[data-look="prichod"] .site-footer__line {
    /* patička stojí v přízemní mlze → v tmavém motivu světlejší text, jinak zaniká */
    color: var(--pr-ink-2) !important;
    opacity: 1 !important;
}

:root[data-look="prichod"] .site-footer__link {
    color: var(--pr-ink-2) !important;
    text-decoration-color: var(--pr-link) !important;
}

:root[data-look="prichod"] .site-footer__link:hover,
:root[data-look="prichod"] .site-footer__link:focus-visible {
    color: var(--pr-link) !important;
}

/* Nadpisy stránek, sekcí a názvy příběhů / postav = písmo nadpisů administrace (Cinzel Decorative).
   Dlouhé texty, nadpisy kapitol ve čtečce a drobné popisky zůstávají ve svých písmech. */
:root[data-look="prichod"] :is(
    .page-heading,
    .site-page-heading,
    .story-title,
    .character-detail-name,
    .obrlobus-section__title,
    .story-archive__section-title,
    .pr-hero__title,
    .banner-content h2
) {
    font-family: var(--pr-font-title) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

/* =========================================================================
   4) Tlačítka – „skládání“ (Jakubův návrh buttons.svg, 8. 10. 2026)
   Samostatné tlačítko = pilulka, ikonové = kruh. Tlačítka ve skupině (vedle sebe nebo pod sebou)
   mají vnější rohy plně zaoblené a rohy, kterými se dotýkají, malé (--pr-stack-inner); mezera --pr-stack-gap.
   Plné zaoblení ve skupině = polovina výšky (--pr-h), ne 999px: prohlížeč by jinak zmenšil i malé rohy na nulu.
   Skupina: .pr-stack (vedle sebe) / .pr-stack--v (pod sebou), tlačítkům nastavit --pr-h (výška).
   Čtečka skládá svá tlačítka v prichod-reader.css (tvar tam nese ::before).
   ========================================================================= */
:root[data-look="prichod"] .pr-stack {
    display: inline-flex;
    gap: var(--pr-stack-gap);
}

:root[data-look="prichod"] .pr-stack--v {
    flex-direction: column;
}

:root[data-look="prichod"] .pr-stack.pr-stack > * {
    height: var(--pr-h, 44px);
    border-radius: var(--pr-stack-inner) !important;
}

:root[data-look="prichod"] .pr-stack:not(.pr-stack--v) > :first-child {
    border-top-left-radius: calc(var(--pr-h, 44px) / 2) !important;
    border-bottom-left-radius: calc(var(--pr-h, 44px) / 2) !important;
}

:root[data-look="prichod"] .pr-stack:not(.pr-stack--v) > :last-child {
    border-top-right-radius: calc(var(--pr-h, 44px) / 2) !important;
    border-bottom-right-radius: calc(var(--pr-h, 44px) / 2) !important;
}

:root[data-look="prichod"] .pr-stack--v > :first-child {
    border-top-left-radius: calc(var(--pr-h, 44px) / 2) !important;
    border-top-right-radius: calc(var(--pr-h, 44px) / 2) !important;
}

:root[data-look="prichod"] .pr-stack--v > :last-child {
    border-bottom-left-radius: calc(var(--pr-h, 44px) / 2) !important;
    border-bottom-right-radius: calc(var(--pr-h, 44px) / 2) !important;
}

:root[data-look="prichod"] .auth-form__submit,
:root[data-look="prichod"] .site-utility-auth-form__submit,
:root[data-look="prichod"] .site-utility-auth-form__google,
:root[data-look="prichod"] .back-link,
:root[data-look="prichod"] .list-chip,
:root[data-look="prichod"] .story-filters__chip,
:root[data-look="prichod"] .story-filters__mobile-toggle,
:root[data-look="prichod"] .story-chapter-menu-btn,
:root[data-look="prichod"] .story-chapter-btn,
:root[data-look="prichod"] .story-reading-theme-btn,
:root[data-look="prichod"] .story-reading-size-btn,
:root[data-look="prichod"] .pr-btn {
    /* pastel dává tlačítkům tvar maskou plochy a nuluje zaoblení – tady vlastní tvar */
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-box-image: none !important;
    border-radius: var(--pr-btn-radius-sm) !important;
}

:root[data-look="prichod"] .site-icon-btn,
:root[data-look="prichod"] .site-theme-toggle,
:root[data-look="prichod"] .pastel-ring,
:root[data-look="prichod"] .obrlobus-promo__nav,
:root[data-look="prichod"] .pr-icon-btn {
    /* pastel dává tlačítkům tvar maskou plochy a nuluje zaoblení – tady vlastní tvar */
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-box-image: none !important;
    border-radius: var(--pr-icon-radius) !important;
}

/* tlačítko Příchodu (nové stránky): výška --pr-h, ve skupině .pr-stack */
:root[data-look="prichod"] .pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: var(--pr-h, 3rem);
    padding: 0 1.6rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

:root[data-look="prichod"] .pr-btn:hover {
    filter: brightness(1.08);
}

:root[data-look="prichod"] .pr-btn:focus-visible {
    outline: 2px dashed currentColor;
    outline-offset: 3px;
}

/* hlavní akce = zelená podšívka pláště */
:root[data-look="prichod"] .auth-form__submit,
:root[data-look="prichod"] .site-utility-auth-form__submit,
:root[data-look="prichod"] .pr-btn--primary {
    /* pastel dává odesílacím tlačítkům plochu s !important (site-base.css) */
    background: var(--pr-btn) !important;
    background-image: none !important;
    color: var(--pr-btn-ink) !important;
    border: 0;
    box-shadow: inset 0 1px 0 var(--pr-btn-hi);
}

:root[data-look="prichod"] .pr-btn--ghost {
    background: transparent;
    color: var(--pr-ink);
    border: 1px solid var(--pr-ghost-line);
}

/* Odkazy „Zpět“, čipy a „Celé …“ = obrysová pilulka; vybraný čip = tyrkys ovládání.
   (Plochu jim v pastelu dává vzhled site-base.css přes --fill, společné rozložení ruší rámeček → !important) */
:root[data-look="prichod"] :is(.back-link, .list-chip, .obrlobus-section__more:not(.obrlobus-section__more--icon), .account-preview__more) {
    background: transparent !important;
    color: var(--pr-ink) !important;
    border: 1px solid var(--pr-ghost-line) !important;
    border-radius: 999px !important;
}

:root[data-look="prichod"] :is(.back-link, .list-chip, .obrlobus-section__more:not(.obrlobus-section__more--icon), .account-preview__more):hover {
    border-color: var(--pr-ink) !important;
}

:root[data-look="prichod"] body .list-chip.is-active {
    background: var(--pr-control) !important;
    border-color: transparent !important;
    color: #f2f4f5 !important;
}

/* šipky karuselů a promo bannerů = kruhová ikonová tlačítka */
:root[data-look="prichod"] :is(.char-catalog__arrow, .obrlobus-promo__nav) {
    background: var(--pr-icon-btn) !important;
    color: var(--pr-icon-btn-ink) !important;
    border-radius: 50% !important;
    rotate: 0deg;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.45) !important;
}

:root[data-look="prichod"] :is(.char-catalog__arrow, .obrlobus-promo__nav):hover {
    background: var(--pr-control) !important;
    color: #f2f4f5 !important;
}

:root[data-look="prichod"] .site-icon-btn,
:root[data-look="prichod"] .pr-icon-btn {
    background: var(--pr-icon-btn);
    color: var(--pr-icon-btn-ink);
    border: 0;
}

/* přepínač motivu v horní liště: jen ikona, plocha tlačítka zůstává průhledná kvůli pohodlnému kliknutí (Jakub 10. 10.) */
:root[data-look="prichod"] .site-theme-toggle {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 36px;
    min-height: 32px;
}

:root[data-look="prichod"] .site-utility-auth-form__input,
:root[data-look="prichod"] .auth-form__input {
    background: rgb(var(--tint-rgb) / 0.06);
    border-color: var(--border-soft);
    color: var(--pr-ink);
}

:root[data-look="prichod"] .site-utility-auth-form__input:focus,
:root[data-look="prichod"] .auth-form__input:focus {
    border-color: var(--pr-control);
}

/* Obrysy kulatých prvků (vyhledávání, „Celá galerie“, kroužky .pastel-ring – sdílení, šipky, mapa).
   Tvar (::before, umístění) dává společné rozložení z site-base.css, obrys a výplň si každý vzhled kreslí sám. */
:root[data-look="prichod"] :is(.site-search, .obrlobus-section__more--icon, .pastel-ring)::before {
    border: 1.2px solid currentColor;
    border-radius: 999px;
    opacity: 0.8;
}

:root[data-look="prichod"] :is(.obrlobus-section__more--icon, .pastel-ring)::before {
    border-radius: 50%;
}

:root[data-look="prichod"] :is(.obrlobus-section__more--icon, .pastel-ring):is(:hover:not(:disabled), :focus-visible, .is-active, .is-done)::before {
    border-color: transparent;
    background: var(--pr-control);
    opacity: 1;
}

:root[data-look="prichod"] :is(.obrlobus-section__more--icon, .pastel-ring):is(:hover:not(:disabled), :focus-visible, .is-active, .is-done) {
    color: #f2f4f5 !important;
}

/* Telefon: menu pod knoflíkem = boční panel (rozložení v site-base.css) – sklo nad jevištěm */
@media (max-width: 768px) {
    :root[data-look="prichod"] body .site-header .site-topbar-dropdown {
        color: var(--pr-ink);
    }

    /* plocha panelu ve vnitřní vrstvě (pevný panel sám bez pozadí – kvůli lištám Safari, viz site-base.css) */
    :root[data-look="prichod"] body .site-header .site-topbar-dropdown::before {
        background: var(--pr-panel);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    /* uvnitř panelu bez vlastních ploch (na počítači jsou vyhledávání a menu samostatné skleněné pruhy) */
    :root[data-look="prichod"] body .site-header .site-topbar-dropdown :is(.site-topbar-search-strip, .site-nav-mega, .site-breadcrumb) {
        background: transparent !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    :root[data-look="prichod"] body .site-nav-mega__column + .site-nav-mega__column {
        border-top: 1px solid var(--border-soft);
    }

    :root[data-look="prichod"] body .site-nav-mega__heading {
        color: var(--pr-ink) !important;
    }

    :root[data-look="prichod"] body .site-nav-mega__heading.is-current {
        color: var(--pr-link) !important;
    }
}

/* =========================================================================
   5) Ohled na čtenáře
   ========================================================================= */
@media (prefers-reduced-transparency: reduce) {
    :root[data-look="prichod"] .pr-site-band,
    :root[data-look="prichod"] body::after,
    :root[data-look="prichod"]::before,
    :root[data-look="prichod"]::after {
        display: none;
    }
}

@media print {
    :root[data-look="prichod"] .pr-site-band,
    :root[data-look="prichod"] body::before,
    :root[data-look="prichod"] body::after,
    :root[data-look="prichod"]::before,
    :root[data-look="prichod"]::after {
        display: none;
    }
}