/* ============================================================
   iPAD SIDE RAIL (preview 2026-10-19) — loaded after shell.css / slim-menu.css / home-sept.css,
   only with html.pv-rail (?preview=rail). Every rule is inside 769–1199px: phone and desktop are untouched.
   Like deijs.eu on iPad: a floating rail on the left holds logo · pages · time · theme · menu;
   the top bar, bottom bar and LOC/SYS huts go; Up / Down = vertical stepper at the right middle.
   The rail itself reuses the .rail / .tab rules that are still in shell.css (section 2).
   ============================================================ */
@media (max-width: 768px), (min-width: 1200px) { html.pv-rail .rail { display: none !important; } }

@media (min-width: 769px) and (max-width: 1199px) {
    html.pv-rail, html.pv-rail body.sept-shell { --sh-top-h: 0px; --sh-bot-h: 0px; --sh-rail-w: calc(104px + var(--sh-safe-l)); }

    /* chrome that the rail replaces */
    html.pv-rail header.topbar,
    html.pv-rail .mobile-bottom-bar,
    html.pv-rail .hud-container,
    html.pv-rail .theme-toggle { display: none !important; }
    html.pv-rail body.shell { padding-left: var(--sh-rail-w); padding-bottom: 0; }

    /* ---------- rail ---------- */
    html.pv-rail .rail { z-index: 1000; animation: bkRailIn .9s var(--sh-ease) .15s both; overflow: hidden; }
    html.pv-rail .rail::after { display: none; } /* static line → travelling spark below */
    html.pv-rail .rail-brand { background: var(--sh-grad); margin-bottom: 8px; }
    html.pv-rail .rail-brand span { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 4px; transform: rotate(45deg); font-size: 0; }
    html.pv-rail .rail-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; }
    html.pv-rail .rail-btn { display: grid !important; place-items: center; width: 52px; height: 52px; border-radius: var(--r-ui); }
    html.pv-rail body.menu-open #railMenuBtn { color: var(--sh-accent); border-color: rgba(var(--sh-accent-rgb), .5); }

    /* one spark travels down the rail's right edge, like the pulse on the header line */
    html.pv-rail .rail-spark { position: absolute; top: 18px; bottom: 18px; right: -1px; width: 2px; overflow: hidden; pointer-events: none; }
    html.pv-rail .rail-spark::before {
        content: ''; position: absolute; left: 0; width: 100%; height: 38%; top: -40%;
        background: linear-gradient(180deg, transparent, rgba(140, 0, 40, .9) 30%, #ff005a 55%, #ff6aa8 70%, transparent);
        filter: drop-shadow(0 0 6px rgba(var(--sh-accent-rgb), .9));
        animation: bkRailSpark 5.5s cubic-bezier(.45, 0, .25, 1) infinite;
    }

    /* ---------- clock: tall condensed digits, hours over minutes ---------- */
    html.pv-rail .rail-clock {
        display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 4px;
        font: 800 2.05rem/0.92 'Big Shoulders Display', 'Arial Narrow', sans-serif;
        font-variant-numeric: tabular-nums; letter-spacing: .02em;
    }
    html.pv-rail .rail-clock span {
        background: linear-gradient(180deg, #fff 0%, #ffd1e2 55%, #ff5c93 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    html.pv-rail[data-theme="light"] .rail-clock span { background: linear-gradient(180deg, #1a1816 0%, #5a2a3a 55%, #e0004f 100%); -webkit-background-clip: text; background-clip: text; }
    html.pv-rail .rail-colon { display: flex; gap: 6px; height: 7px; align-items: center; }
    html.pv-rail .rail-colon b { width: 4px; height: 4px; border-radius: 50%; background: var(--sh-accent); box-shadow: 0 0 8px var(--sh-accent); animation: bkTick 1s steps(1) infinite; }

    /* ---------- Up / Down: vertical stepper at the right middle (deijs.eu position) ---------- */
    html.pv-rail body .viewpoint-nav:not([hidden]) {
        display: flex !important; flex-direction: column; align-items: center; gap: 2px;
        position: fixed; left: auto; right: calc(10px + var(--sh-safe-r)); top: 50%; bottom: auto;
        transform: translateY(-50%); z-index: 990;
        padding: 5px; border-radius: 22px;
        background: var(--sh-glass); border: 1px solid var(--sh-border);
        -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
        box-shadow: var(--sh-shadow);
        animation: bkStepIn .8s var(--sh-ease) .6s both;
    }
    html.pv-rail body .viewpoint-btn {
        width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
        background: none; border: 0; color: var(--sh-text); font-size: 1rem;
    }
    html.pv-rail body .viewpoint-btn:hover { background: var(--sh-surface-2); color: var(--sh-accent); }
    html.pv-rail body .viewpoint-btn:disabled { opacity: .3; }
    html.pv-rail body .viewpoint-indicator {
        display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px 0; gap: 1px;
        font: 700 1rem/1.2 var(--font-heading); letter-spacing: .02em; color: var(--sh-text);
    }
    html.pv-rail body .viewpoint-indicator .vp-of { font: 600 .78rem/1.2 var(--font-heading); color: var(--sh-muted); }
    html.pv-rail body .viewpoint-indicator .vp-of em { font-style: normal; opacity: 1; margin: 0; }
    html.pv-rail body .viewpoint-indicator #totalViewpoints { font-size: inherit; color: inherit; }
    html.pv-rail body.menu-open .viewpoint-nav { opacity: 0; pointer-events: none; }
    /* text never runs under the stepper: hero content centres between rail and stepper */
    html.pv-rail body.has-pager .vp-hero { padding-right: 76px !important; }
}
@keyframes bkRailIn { from { transform: translateX(-140%); } }
@keyframes bkRailSpark { 0% { top: -40%; } 70%, 100% { top: 100%; } }
@keyframes bkTick { 50% { opacity: .25; } }
@keyframes bkStepIn { from { opacity: 0; transform: translate(24px, -50%); } }
@media (prefers-reduced-motion: reduce) {
    html.pv-rail .rail, html.pv-rail .rail-spark::before, html.pv-rail .rail-colon b, html.pv-rail body .viewpoint-nav { animation: none !important; }
}
@media print { html.pv-rail .rail { display: none !important; } }