/* Viewport-level course controls: source, lens, then navigation. */

/* Preserve pages where controls were intentionally removed. */
body:has(#courseReveal > .slides > section:nth-child(1).present) .course-nav {
    display: none !important;
}

/* Mission 02 gateway remains lens-free, but Page 18 now supports NOVA Lens. */
body:has(#courseReveal > .slides > section:nth-child(17).present) .reading-lens-launcher {
    display: none !important;
}

/* Align every available control on one lower-right vertical rail. */
.course-nav {
    right: 18px !important;
    bottom: 46px !important;
    left: auto !important;
    z-index: 14500 !important;
    transform: none !important;
}

/* Page 2 follows the approved RenderExact control placement. */
body:has(#unitBeaconHub.present) .course-nav {
    right: 28px !important;
    bottom: 24px !important;
}

.reading-lens-launcher,
body:has(.page-jump-panel.is-open) .reading-lens-launcher {
    right: 39px !important;
    bottom: 100px !important;
    left: auto !important;
}

.text-dock-launcher,
body:has(.page-jump-panel.is-open) .text-dock-launcher {
    right: 39px !important;
    bottom: 162px !important;
    left: auto !important;
}

/* Keep Reveal's page number below the navigation rail without overlap. */
.reveal .slide-number {
    right: 8px;
    bottom: 8px;
}

/* Page 16: keep the complete NOVA module clear of the controls. */
body:has(#courseReveal > .slides > section:nth-child(16).present)
#page15MissionReport .page15-nova-zone {
    position: relative;
    top: -10px;
}

@media (max-width: 900px) {
    .course-nav {
        right: 10px !important;
        bottom: 42px !important;
    }

    .reading-lens-launcher,
    body:has(.page-jump-panel.is-open) .reading-lens-launcher {
        right: 31px !important;
        bottom: 96px !important;
    }

    .text-dock-launcher,
    body:has(.page-jump-panel.is-open) .text-dock-launcher {
        right: 31px !important;
        bottom: 158px !important;
    }
}


/* =========================================================
   2026-08-23 · RESTORE FULL CANVAS + ADAPTIVE FLOATING RAIL
   Keep Reveal at the largest 16:9 fit. Controls float on the
   browser edge and no longer reduce the Reveal viewport width.
========================================================= */
:root {
    --course-control-rail-width: 62px;
    --course-control-edge: max(8px, env(safe-area-inset-right));
}

html,
body {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

/* IMPORTANT: the course canvas always receives the full viewport.
   Do not subtract the control rail from the Reveal width; doing so
   scales the entire 1600x900 deck down and creates excessive top/
   bottom letterboxing in Safari fullscreen. */
#courseReveal {
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
}

/* Remove the old permanent reserved-rail background. The rail is now
   an overlay HUD and does not consume layout width. */
body::after {
    display: none !important;
    content: none !important;
}

/* Compact viewport-level control rail. */
.course-nav {
    position: fixed !important;
    right: var(--course-control-edge) !important;
    bottom: clamp(52px, 6.2dvh, 70px) !important;
    left: auto !important;
    gap: 6px !important;
    z-index: 14500 !important;
    transform: none !important;
}

.course-nav button {
    width: 42px;
    height: 42px;
}

.reading-lens-launcher,
body:has(.page-jump-panel.is-open) .reading-lens-launcher {
    position: fixed !important;
    right: calc(var(--course-control-edge) + 1px) !important;
    bottom: clamp(108px, 14.8dvh, 150px) !important;
    z-index: 15000 !important;
}

.text-dock-launcher,
body:has(.page-jump-panel.is-open) .text-dock-launcher {
    position: fixed !important;
    right: calc(var(--course-control-edge) + 1px) !important;
    bottom: clamp(166px, 22.5dvh, 212px) !important;
    z-index: 15000 !important;
}

/* Page 2 previously had a stronger per-page placement rule; neutralize it
   here so the adaptive edge HUD is consistent on Pages 2/3 as well. */
body:has(#unitBeaconHub.present) .course-nav {
    right: var(--course-control-edge) !important;
    bottom: clamp(52px, 6.2dvh, 70px) !important;
}

/* Reveal page number belongs to the same compact edge HUD. */
.reveal .slide-number {
    position: fixed !important;
    right: var(--course-control-edge) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: 44px;
    box-sizing: border-box;
    padding: 0 !important;
    text-align: center !important;
    pointer-events: none;
    z-index: 14500 !important;
}

/* Page 1 is a clean cinematic entrance. No global controls or page
   number may cover it in Safari/Edge, windowed or fullscreen. */
body:has(#courseReveal > .slides > section:nth-child(1).present) .course-nav,
body:has(#courseReveal > .slides > section:nth-child(1).present) .reading-lens-launcher,
body:has(#courseReveal > .slides > section:nth-child(1).present) .text-dock-launcher,
body:has(#courseReveal > .slides > section:nth-child(1).present) .reveal .slide-number,
body:has(#courseReveal > .slides > section:nth-child(1).present) .page-jump-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pages 2/3 are full-scene pages. Keep the full 1600x900 scene and
   only prevent decorative/parallax overflow from painting outside the
   slide box; do NOT reduce Reveal's available viewport. */
body:has(#courseReveal > .slides > section:nth-child(2).present) #courseReveal,
body:has(#courseReveal > .slides > section:nth-child(3).present) #courseReveal {
    overflow: hidden;
}

/* Short browser windows: compact the HUD itself instead of shrinking
   the entire course. */
@media (max-height: 760px) {
    :root { --course-control-rail-width: 56px; }
    .course-nav {
        right: var(--course-control-edge) !important;
        bottom: 38px !important;
        gap: 4px !important;
    }
    .course-nav button { width: 38px; height: 38px; }
    .reading-lens-launcher,
    body:has(.page-jump-panel.is-open) .reading-lens-launcher {
        right: var(--course-control-edge) !important;
        bottom: 84px !important;
        width: 44px;
        height: 44px;
    }
    .text-dock-launcher,
    body:has(.page-jump-panel.is-open) .text-dock-launcher {
        right: var(--course-control-edge) !important;
        bottom: 134px !important;
        width: 44px;
        height: 44px;
    }
    .reveal .slide-number {
        right: var(--course-control-edge) !important;
        width: 40px;
    }
}

/* Very narrow windows: keep controls usable but visually light. */
@media (max-width: 1180px) {
    .course-nav button { width: 38px; height: 38px; }
    .reading-lens-launcher,
    .text-dock-launcher { transform: scale(.92); transform-origin: right bottom; }
}


/* =========================================================
   2026-08-23 · COMPACT GLOBAL CONTROLS
   Reduce zoom / page-turn controls so the floating HUD is less
   likely to cover dense slide content without shrinking Reveal.
========================================================= */
.course-nav button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}
.course-nav button svg,
.course-nav button .icon {
    transform: scale(.84);
    transform-origin: center;
}
.reading-lens-launcher,
body:has(.page-jump-panel.is-open) .reading-lens-launcher {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
}
.reading-lens-launcher svg,
.reading-lens-launcher .icon {
    transform: scale(.82);
    transform-origin: center;
}
.reveal .slide-number {
    width: 38px !important;
    font-size: 12px !important;
}
@media (max-height: 760px), (max-width: 1180px) {
    .course-nav button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    .reading-lens-launcher,
    body:has(.page-jump-panel.is-open) .reading-lens-launcher {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
}

/* =========================================================
   2026-08-23 · BOTTOM-CENTER NAV + MICRO RIGHT TOOL RAIL
   Render-aligned control placement:
   - Previous / next live outside the teaching canvas at bottom center
   - Page number sits between them
   - Reading Lens + Text Dock share the same compact footprint
========================================================= */
:root {
    --course-micro-control: 32px;
    --course-bottom-nav-y: max(8px, env(safe-area-inset-bottom));
    --course-right-tool-edge: max(10px, env(safe-area-inset-right));
}

/* Bottom-center navigation: do not consume Reveal width. */
.course-nav,
body:has(#unitBeaconHub.present) .course-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--course-bottom-nav-y) !important;
    display: flex !important;
    align-items: center !important;
    gap: 72px !important;
    width: auto !important;
    transform: translateX(-50%) !important;
    z-index: 14500 !important;
}

.course-nav button {
    width: var(--course-micro-control) !important;
    height: var(--course-micro-control) !important;
    min-width: var(--course-micro-control) !important;
    min-height: var(--course-micro-control) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 23px !important;
    line-height: 1 !important;
}

/* Subtle HUD guide lines, matching the approved render direction. */
.course-nav::before,
.course-nav::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(100px, 13vw, 210px);
    height: 1px;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: .7;
}
.course-nav::before {
    right: calc(100% + 16px);
    background: linear-gradient(90deg, transparent, rgba(70,227,242,.78));
}
.course-nav::after {
    left: calc(100% + 16px);
    background: linear-gradient(90deg, rgba(70,227,242,.78), transparent);
}

.course-nav button svg,
.course-nav button .icon {
    transform: scale(.72) !important;
    transform-origin: center !important;
}

/* Put the page number between the arrows. */
.reveal .slide-number {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--course-bottom-nav-y) + 8px) !important;
    width: 34px !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    border: 0 !important;
    color: #f7fbff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 14501 !important;
}

/* Reading Lens and original-text/Text Dock are now equally compact. */
.reading-lens-launcher,
body:has(.page-jump-panel.is-open) .reading-lens-launcher,
.text-dock-launcher,
body:has(.page-jump-panel.is-open) .text-dock-launcher {
    position: fixed !important;
    right: var(--course-right-tool-edge) !important;
    width: var(--course-micro-control) !important;
    height: var(--course-micro-control) !important;
    min-width: var(--course-micro-control) !important;
    min-height: var(--course-micro-control) !important;
    border-radius: 10px !important;
    transform: none !important;
}

.reading-lens-launcher,
body:has(.page-jump-panel.is-open) .reading-lens-launcher {
    bottom: 86px !important;
}

.text-dock-launcher,
body:has(.page-jump-panel.is-open) .text-dock-launcher {
    bottom: 128px !important;
}

.reading-lens-icon,
.text-dock-launcher-mark {
    transform: scale(.72) !important;
    transform-origin: center !important;
}

/* Page 1 remains cinematic and completely control-free. */
body:has(#courseReveal > .slides > section:nth-child(1).present) .course-nav,
body:has(#courseReveal > .slides > section:nth-child(1).present) .reading-lens-launcher,
body:has(#courseReveal > .slides > section:nth-child(1).present) .text-dock-launcher,
body:has(#courseReveal > .slides > section:nth-child(1).present) .reveal .slide-number {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-height: 760px), (max-width: 1180px) {
    :root {
        --course-micro-control: 29px;
    }
    .course-nav {
        gap: 64px !important;
    }
    .course-nav button {
        font-size: 21px !important;
    }
    .reading-lens-launcher,
    body:has(.page-jump-panel.is-open) .reading-lens-launcher {
        bottom: 78px !important;
    }
    .text-dock-launcher,
    body:has(.page-jump-panel.is-open) .text-dock-launcher {
        bottom: 116px !important;
    }
}