/* A shared, discrete slide selector. The reserved footer is part of the stage. */
:root { --slide-navigation-height: 80px; --slide-navigation-accent: #ff7c3b; }
.slide-navigation, .slide-navigation * { box-sizing: border-box; }
.slide-navigation {
    position: fixed; z-index: 1000; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 19px; width: max-content; max-width: calc(100% - 32px);
    height: 48px; padding: 2px 12px; color: var(--mw-accent, var(--slide-navigation-accent));
    background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
    font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    isolation: isolate;
}
.slide-navigation[hidden] { display: none !important; }
.slide-navigation::before { content: none; }
.slide-navigation__cue, .slide-navigation__keys { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.slide-navigation__cue { gap: 10px; }
.slide-navigation svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slide-navigation__cue svg { width: 23px; height: 30px; }
.slide-navigation__keys > span { margin-left: 8px; }
.slide-navigation__divider { width: 1px; height: 19px; background: #75869f; }
.slide-navigation button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; box-shadow: none; }
.slide-navigation__keys button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 8px; }
.slide-navigation__keys button::before { content: ''; position: absolute; inset: 5px; border: 1px solid #75869f; border-radius: 7px; background: #101d2e; }
.slide-navigation__keys button:hover::before { border-color: #ffad7b; background: #15243a; }
.slide-navigation__previous svg { transform: rotate(180deg); }
.slide-navigation button:disabled { color: #b2bfd1; cursor: default; }
.slide-navigation__selection { position: relative; width: max-content; flex-shrink: 0; }
.slide-navigation__markers { display: flex; height: 44px; align-items: center; }
.slide-navigation__marker { position: relative; flex: 1; min-width: 24px; height: 44px; padding: 0; border-radius: 4px; touch-action: manipulation; }
.slide-navigation__marker::before { content: ''; position: absolute; left: 2px; right: 2px; top: 19px; height: 6px; border-radius: 5px; background: #75869f; }
.slide-navigation__marker.is-past::before { background: #ffad7b; }
.slide-navigation__marker[aria-current=step]::before { background: #ff7c3b; box-shadow: none; }
.slide-navigation__marker:hover::before { background: #ff965f; }
.slide-navigation__tooltip { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(340px, 80vw); padding: 9px 12px; border: 1px solid #75869f; border-radius: 10px; background: #101d2e; color: #f3f2ea; box-shadow: none; pointer-events: none; }
.slide-navigation__count { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slide-navigation :focus-visible { outline: 2px solid #ffad7b; outline-offset: 2px; }
.slide-navigation__status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.slide-navigation-document { height: 100%; overflow: clip !important; }
body.slide-navigation-active { height: 100%; overflow: hidden !important; }
body.slide-navigation-active #site-footer { display: none; }
body.slide-navigation-active .slide-navigation-stage {
    position: fixed !important; top: var(--slide-stage-top, 0px) !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    container-type: size; overflow: clip !important; transform: none !important;
}
.slide-navigation-stage > .slide-navigation-slide { padding-block: 0 !important; height: 100% !important; min-height: 0 !important; overflow: clip !important; }
body.slide-navigation-active .slide-navigation-stage .slide-navigation-content {
    position: absolute !important; left: 50% !important; top: var(--slide-fit-top, 50%) !important;
    height: auto !important; min-height: min-content !important; margin: 0 !important;
    padding-block: clamp(12px, 3cqh, 36px) !important;
    transform: translate(-50%, -50%) scale(var(--slide-fit-scale, 1)) !important; transform-origin: center !important;
}
.slide-navigation-stage > .slide-navigation-slide > :is(.slide-footer, .source) { bottom: calc(var(--slide-navigation-height) + 10px) !important; }
body.slide-navigation-active :is(.progress-rail, .dotrail, .progress-bar, .hud-bottom, .kb-hint, .nav-ctrl, .nav-arrow, #prevButton, #nextButton, #progress-dots, .depth-meter, .depth-indicator, #scroll-hint, #speaking-scroll-hint, .speaking-progress, .speaking-depth-meter, .about-story__rail, .about-story__hint, .ebook-progress-rail, .ebook-panel-nav) { display: none !important; }
body.slide-navigation-active #skip-tour-btn { bottom: 90px !important; }
@media (min-width: 2400px) { :root { --slide-navigation-height: 100px; }.slide-navigation { bottom: 24px; gap: 24px; font-size: 15px; }.slide-navigation__count { font-size: 14px; } }
@media (max-width: 1366px) {
    .slide-navigation { gap: 12px; }
    .slide-navigation__cue, .slide-navigation__keys > span { display: none; }
}
@media (max-width: 980px), print { .slide-navigation { display: none !important; } }
@media print {
    html.slide-navigation-document, body.slide-navigation-active { height: auto; overflow: visible !important; }
    body.slide-navigation-active .slide-navigation-stage { position: static !important; height: auto !important; overflow: visible !important; container-type: normal; }
    body.slide-navigation-active .slide-navigation-stage .slide-navigation-content { position: relative !important; inset: auto !important; transform: none !important; }
    .slide-navigation-stage > .slide-navigation-slide { height: auto !important; overflow: visible !important; }
}
body.slide-navigation-active .about-story__viewport > .about-slide { position: absolute !important; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
body.slide-navigation-active .about-story__viewport > .about-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
body.slide-navigation-active .about-slide__inner { padding-inline: clamp(24px, 5cqi, 120px) !important; }
body.slide-navigation-active .speaking-panels > .speaking-panel { position: absolute !important; inset: 0 !important; }
body.slide-navigation-active .scroll-continue-hint { display: none; }
body.slide-navigation-active .slide-navigation-legacy { display: none !important; }
body.slide-navigation-active .speaking-depth { display: none !important; }
@media print {
    .slide-navigation-stage > .slide-navigation-slide { position: relative !important; inset: auto !important; display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; break-after: page; }
}
/* Citations authored inside the content participate in fitting, not an overlay. */
body.slide-navigation-active .slide-navigation-content :is(.slide-footer, .source:not(.arch-block)) {
    position: relative !important; inset: auto !important; margin-top: 12px !important; flex-shrink: 0;
}
/* Copyright authored inside a transformed body must participate in fitting. */
body.slide-navigation-active .slide-navigation-content :is(.copyright-line,p[style*="position:absolute"][style*="bottom:28px"]) {
    position: relative !important;
    inset: auto !important;
    margin-top: 16px !important;
    flex-shrink: 0;
}
/* The terminal composition can contain long five-column risk labels.
   Let grid children shrink within their own columns before fitting. */
.slide-navigation-content .panels > .pn {
    min-width: 0;
    overflow-wrap: anywhere;
}
