/* H10 D-only primary-page trial over the immutable H9 release.
 * The controller owns the retained numbers. Only content scrolls inside them;
 * live viewport units below are for OUTER backdrop paint, never content bounds.
 * HOME chrome/MAIN remain H9. An active video shell excludes EVERY rule.
 * No fonts, icon sizes, media ownership, gestures, transforms or animations are
 * changed. Slide settings/support, login/signup, small dialogs, and Voice Admin
 * deliberately retain their previous layout and animation policy.
 */

/* Standalone documents: one non-scrolling background, one content owner.
 * H3 still loads for compatibility; scoped !important geometry below prevents
 * its live min(dvh, compact-height) bounds from winning on the primary page.
 */
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-viewport-shell="true"]) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-viewport-shell="true"]) body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--d-reserve-canvas) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    overflow-anchor: none;
}
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-viewport-shell="true"]) body::before,
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-viewport-shell="true"]) body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    background: #101820;
    pointer-events: none;
    z-index: 2;
}
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-viewport-shell="true"]) body::before {
    top: 0;
    height: var(--d-reserve-top);
}
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-viewport-shell="true"]) body::after {
    top: var(--d-reserve-end);
    bottom: 0;
}

/* Start keeps the real existing container, its button order and TTS handlers.
 * The video container is a sibling, is never reparented, and has no new rule.
 */
html[data-d-reserved-pages="h10"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) .lesson-container {
    position: fixed !important;
    top: var(--d-reserve-top) !important;
    left: var(--d-reserve-left) !important;
    right: var(--d-reserve-right) !important;
    width: auto !important;
    height: var(--d-reserve-height) !important;
    max-height: var(--d-reserve-height) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) .lesson-container > :is(#startLearningBtn,#situation-overlay) {
    flex-shrink: 0;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #exitBtn {
    top: calc(var(--d-reserve-top) + 16px) !important;
    right: calc(var(--d-reserve-right) + 16px) !important;
}

/* Sentence-card practice retains its custom swipe viewport and its existing
 * inner text scroller, rather than turning the card into a page scroller.
 * Dropdown, recognition/result overlays, and administrator TTS stay original.
 */
html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .card-practice-container {
    position: fixed !important;
    top: var(--d-reserve-top) !important;
    left: var(--d-reserve-left) !important;
    right: var(--d-reserve-right) !important;
    width: auto !important;
    height: var(--d-reserve-height) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .card-container {
    min-height: 0;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .practice-settings {
    top: 16px !important;
    right: 16px !important;
}

/* The reserved short landscape frame has less vertical room than the original
 * viewport-sized card. Reclaim ornamental spacing, not text/icon size: the
 * microphone row stays 56px and the existing text-container remains scrollable.
 * This query remains the same on either side of a transient system-bar resize.
 */
@media (orientation: landscape) and (max-height: 500px) {
    html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .card-practice-container > .header {
        margin-bottom: 8px;
    }
    html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .practice-card {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .swipe-indicator {
        margin-bottom: 0;
    }
    html[data-d-reserved-pages="h10"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .swipe-indicator .arrow-container {
        display: none;
    }
}

/* Ordinary main-based pages: Story setup, credits, audio diagnostics, and the
 * D installation/setup document. Auth/paid requests are unaffected. Authored
 * widths, padding, colors and responsive columns stay in their own stylesheets.
 */
html[data-d-reserved-pages="h10"]:not([data-d-normal-page="home"]):not([data-d-normal-page="lesson"]):not([data-d-normal-page="practice"]):not([data-d-normal-page="payment"]):not([data-d-viewport-shell="true"]) body > main {
    position: fixed !important;
    top: var(--d-reserve-top) !important;
    left: var(--d-reserve-left) !important;
    right: var(--d-reserve-right) !important;
    width: auto !important;
    height: var(--d-reserve-height) !important;
    max-height: var(--d-reserve-height) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="credits"]:not([data-d-viewport-shell="true"]) body > main {
    max-width: 430px;
}

/* Standalone subscription page only. Its long card starts at the top rather
 * than flex-centering overflowing content above the reachable scroll range.
 * Back and the existing logout action have their own retained control space.
 * The HOME inline-payment overlay is intentionally not selected.
 */
html[data-d-reserved-pages="h10"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .payment-container {
    position: fixed !important;
    top: var(--d-reserve-top) !important;
    left: var(--d-reserve-left) !important;
    right: var(--d-reserve-right) !important;
    width: auto !important;
    height: max(1px, calc(var(--d-reserve-height) - var(--d-reserve-footer))) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    justify-content: flex-start !important;
    padding: 68px 20px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .payment-card {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    /* The original <=480px rule adds 10px margins to a 100%-wide card.
     * The reserved scrollport already provides side padding; adding those
     * margins again creates the remaining 10px horizontal scroll range.
     * Retain the authored vertical margin and all interior card spacing.
     */
    margin-left: 0;
    margin-right: 0;
}
/* The original 200%-wide pulsing pseudo and negative-right circles inflate
 * scrollWidth beyond the bounded payment scrollport. Remove only these
 * ornaments; the authored purple gradient and all payment content stay intact.
 */
html[data-d-reserved-pages="h10"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .payment-container::before {
    content: none;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .payment-container > .decoration-circle {
    display: none;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .payment-container > .back-button {
    position: fixed !important;
    top: calc(var(--d-reserve-top) + 12px) !important;
    left: calc(var(--d-reserve-left) + 20px) !important;
}
html[data-d-reserved-pages="h10"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .bottom-logout-container {
    top: max(var(--d-reserve-top), calc(var(--d-reserve-end) - 44px)) !important;
    right: calc(var(--d-reserve-right) + 20px) !important;
    bottom: auto !important;
}

/* Primary full-view HOME/standalone profile, History and Analysis only.
 * The outer paint may grow when bars retract; the actual card and its scroll
 * owner are bounded by the shared retained (or keyboard-aware) dialog frame.
 */
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) :is(#auth-modal[data-profile-view="true"],.learning-history-modal,#analysis-modal) {
    box-sizing: border-box;
    top: 0 !important;
    bottom: auto !important;
    height: max(var(--d-reserve-canvas), 100dvh) !important;
    padding-top: var(--d-reserve-dialog-top) !important;
    padding-bottom: 0 !important;
    align-items: flex-start !important;
    overflow: hidden !important;
}
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #auth-modal[data-profile-view="true"] > .firebase-auth-container,
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) .learning-history-modal > .modal-content,
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #analysis-modal > .analysis-card {
    box-sizing: border-box;
    height: var(--d-reserve-dialog-height) !important;
    max-height: var(--d-reserve-dialog-height) !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-anchor: none;
}
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #auth-modal[data-profile-view="true"] > .firebase-auth-container {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) .learning-history-modal > .modal-content,
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #analysis-modal > .analysis-card {
    display: flex;
    flex-direction: column;
    overflow-y: hidden !important;
}
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) .learning-history-modal :is(.modal-header,.history-pagination-footer),
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #analysis-modal :is(.analysis-header,.analysis-btn-container) {
    flex: 0 0 auto;
    min-width: 0;
}
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) .learning-history-modal .modal-body,
html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #analysis-modal .analysis-content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
}

/* Very short usable windows/keyboard frames cannot fit independent header,
 * list and footer rows. Scroll the same complete primary card instead of
 * shrinking fonts or making the last row unreachable. No extra wrapper is
 * added; close actions and existing event targets remain the same elements.
 */
html[data-d-reserved-pages="h10"][data-d-reserve-compact="true"]:not([data-d-viewport-shell="true"]) .learning-history-modal > .modal-content,
html[data-d-reserved-pages="h10"][data-d-reserve-compact="true"]:not([data-d-viewport-shell="true"]) #analysis-modal > .analysis-card {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
html[data-d-reserved-pages="h10"][data-d-reserve-compact="true"]:not([data-d-viewport-shell="true"]) .learning-history-modal .modal-body,
html[data-d-reserved-pages="h10"][data-d-reserve-compact="true"]:not([data-d-viewport-shell="true"]) #analysis-modal .analysis-content {
    flex: 0 0 auto;
    overflow: visible !important;
}

/* Main Full PWA: vertical content spacing only; retained frames and controls stay owned by existing styles. */
@media (pointer: coarse) and (orientation: portrait) {
    html[data-d-normal-page="home"][data-d-page-bars="h1"][data-d-home-shell="h9"]:not([data-d-viewport-shell="true"]) main {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    html[data-d-normal-page="home"][data-d-page-bars="h1"][data-d-home-shell="h9"]:not([data-d-viewport-shell="true"]) main #menu-container > .card {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    html[data-d-reserved-pages="h10"][data-d-normal-page="home"]:not([data-d-reserve-keyboard="true"]):not([data-d-viewport-shell="true"]) #auth-modal[data-profile-view="true"] > .firebase-auth-container {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) .learning-history-modal > .modal-content {
        padding-top: max(12px, calc(var(--history-content-padding, 16px) - 4px)) !important;
        padding-bottom: max(12px, calc(var(--history-content-padding, 16px) - 4px)) !important;
    }
    html[data-d-reserved-pages="h10"]:not([data-d-viewport-shell="true"]) #analysis-modal .analysis-content {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    html[data-d-reserved-pages="h10"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #situation-overlay {
        padding-top: 26px;
        padding-bottom: 26px;
        margin-top: 20px;
    }
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 480px) {
    html[data-d-reserved-pages="h10"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #situation-overlay {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}