/* H8 paint: existing outer backdrops cover expansion; inner bounds remain retained. */
/* H3 D-only normal-page presentation. Every rule is opt-in and excludes the
 * EXISTING video shell. No video selector, transform/containing-block change,
 * root --d-safe-area aliases, font/icon resizing, or touch/STT/TTS changes. */
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]) {
    --d-ui-height: var(--d-home-canvas-height);
    --d-ui-frame: var(--d-home-safe-frame);
    --d-ui-top: var(--d-home-top);
    --d-ui-right: var(--d-home-right);
    --d-ui-bottom: var(--d-home-bottom);
    --d-ui-left: var(--d-home-left);
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:not([data-d-viewport-shell="true"]) {
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    --d-ui-height: var(--d-normal-height);
    --d-ui-frame: min(var(--d-normal-compact-height), max(1px, calc(100dvh - var(--d-normal-bottom))));
    --d-ui-top: var(--d-normal-top);
    --d-ui-right: var(--d-normal-right);
    --d-ui-bottom: var(--d-normal-bottom);
    --d-ui-left: var(--d-normal-left);
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-keyboard="true"]:not([data-d-viewport-shell="true"]) {
    --d-ui-frame: var(--d-normal-compact-height);
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:not([data-d-viewport-shell="true"]) body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--d-ui-height) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    overflow-anchor: none;
}
/* Keep Start's ORIGINAL inner scroll owner and button order/position. */
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) body.lesson-intro-body {
    padding: calc(20px + var(--d-ui-top)) var(--d-ui-right) calc(20px + var(--d-ui-bottom)) var(--d-ui-left);
    overflow: hidden !important;
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) .lesson-container {
    flex: 0 0 auto;
    min-height: 0;
    height: max(1px, calc(var(--d-ui-frame) - 40px - var(--d-ui-top) - var(--d-ui-bottom)));
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-anchor: none;
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #exitBtn {
    top: calc(16px + var(--d-ui-top));
    right: calc(16px + var(--d-ui-right));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:not([data-d-viewport-shell="true"]) #version-badge {
    top: max(0px, calc(var(--d-ui-frame) - 110px)) !important;
    bottom: auto !important;
}
/* Card practice keeps its own card/gesture/STT structure; only outer bounds and
 * safe padding stop following transient bars. The first shorter frame is safe. */
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) body {
    padding: 0;
    overflow-y: hidden;
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .card-practice-container {
    height: var(--d-ui-frame);
    padding: calc(16px + var(--d-ui-top)) calc(16px + var(--d-ui-right)) calc(16px + var(--d-ui-bottom)) calc(16px + var(--d-ui-left));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .practice-settings {
    top: calc(16px + var(--d-ui-top));
    right: calc(16px + var(--d-ui-right));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .practice-dropdown {
    max-height: max(1px, calc(var(--d-ui-frame) - 84px - var(--d-ui-top) - var(--d-ui-bottom)));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]):not([data-d-normal-keyboard="true"]) .result-container {
    top: calc(var(--d-ui-frame) * .5);
    max-height: max(1px, calc(var(--d-ui-frame) - 40px));
    box-sizing: border-box;
    overflow-y: auto;
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]) .recognition-overlay {
    top: calc(var(--d-ui-height) * .05);
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]):not([data-d-normal-keyboard="true"]) .admin-tts-overlay {
    box-sizing: border-box;
    top: 0;
    height: var(--d-ui-frame);
    padding-top: var(--d-ui-top);
    padding-bottom: var(--d-ui-bottom);
}
@media (max-width: 768px) {
    html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="practice"]:not([data-d-viewport-shell="true"]):not([data-d-normal-keyboard="true"]) .admin-tts-summary {
        max-height: calc(var(--d-ui-frame) * .4);
    }
}
/* Ordinary long pages have BODY as the only scroller, with enough stable tail
 * space to reach the last action even after discovering a shorter visible view. */
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) body {
    padding: 0;
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="story"]:not([data-d-viewport-shell="true"]) body {
    padding-top: var(--d-ui-top);
    padding-bottom: calc(var(--d-ui-height) - var(--d-ui-frame) + var(--d-ui-bottom));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .payment-container {
    min-height: var(--d-ui-height);
    box-sizing: border-box;
    padding-top: calc(20px + var(--d-ui-top));
    padding-bottom: calc(80px + var(--d-ui-height) - var(--d-ui-frame) + var(--d-ui-bottom));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="payment"]:not([data-d-viewport-shell="true"]) .bottom-logout-container {
    top: max(0px, calc(var(--d-ui-frame) - 60px - var(--d-ui-bottom)));
    bottom: auto;
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="credits"]:not([data-d-viewport-shell="true"]) body {
    display: block;
    padding: calc(24px + var(--d-ui-top)) calc(24px + var(--d-ui-right)) calc(24px + var(--d-ui-height) - var(--d-ui-frame) + var(--d-ui-bottom)) calc(24px + var(--d-ui-left));
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="credits"]:not([data-d-viewport-shell="true"]) main {
    margin: max(0px, calc((var(--d-ui-frame) - 430px) * .5)) auto 0;
}
/* Shared scoped normal-dialog bounds. Keyboard restores original live modal
 * geometry; the retained background itself is not resized or scroll-corrected. */
html[data-d-normal-canvas-test="h3"]:is([data-d-page-bars="h1"],[data-d-normal-canvas="h3"]):not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]):not([data-d-normal-keyboard="true"]) {
    --d-ui-dialog-top: max(20px, var(--d-ui-top));
    --d-ui-dialog-bottom: max(20px, var(--d-ui-bottom));
    --d-ui-dialog-height: max(1px, calc(var(--d-ui-frame) - var(--d-ui-dialog-top) - var(--d-ui-dialog-bottom)));
}
html[data-d-normal-canvas-test="h3"]:is([data-d-page-bars="h1"],[data-d-normal-canvas="h3"]):not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]):not([data-d-normal-keyboard="true"]) :is(#analysis-modal,.delete-account-modal,.payment-modal,.subscription-modal,.limit-modal,.warning-modal,.user-menu-overlay,.firebase-auth-modal:not([data-profile-view="true"])) {
    box-sizing: border-box;
    top: 0;
    bottom: auto;
    height: max(var(--d-ui-height), 100dvh);
    align-items: flex-start;
    padding-top: var(--d-ui-dialog-top);
    padding-bottom: var(--d-ui-dialog-bottom);
}
html[data-d-normal-canvas-test="h3"]:is([data-d-page-bars="h1"],[data-d-normal-canvas="h3"]):not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]):not([data-d-normal-keyboard="true"]) :is(.delete-account-modal,.payment-modal,.subscription-modal,.limit-modal,.warning-modal) > .modal-content,
html[data-d-normal-canvas-test="h3"]:is([data-d-page-bars="h1"],[data-d-normal-canvas="h3"]):not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]):not([data-d-normal-keyboard="true"]) :is(.user-menu-overlay > .user-menu,.firebase-auth-modal:not([data-profile-view="true"]) > .firebase-auth-container) {
    box-sizing: border-box;
    min-height: 0;
    max-height: var(--d-ui-dialog-height);
    margin-top: 0;
    margin-bottom: 0;
    overflow-y: auto;
    overflow-anchor: none;
}
/* The shared payment document can also open a signed-in profile. HOME remains
 * owned by H2; this rule is for standalone documents only. */
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:not([data-d-viewport-shell="true"]):not([data-d-normal-keyboard="true"]) #auth-modal[data-profile-view="true"] {
    box-sizing: border-box;
    top: 0;
    bottom: auto;
    height: max(var(--d-ui-height), 100dvh);
    align-items: flex-start;
    padding-top: var(--d-ui-dialog-top);
    padding-bottom: var(--d-ui-dialog-bottom);
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:not([data-d-viewport-shell="true"]):not([data-d-normal-keyboard="true"]) #auth-modal[data-profile-view="true"] > .firebase-auth-container {
    box-sizing: border-box;
    min-height: 0;
    max-height: var(--d-ui-dialog-height);
    overflow-y: auto;
    overflow-anchor: none;
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #analysis-modal > .analysis-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: var(--d-ui-dialog-height);
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #analysis-modal :is(.analysis-header,.analysis-btn-container) {
    flex: 0 0 auto;
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #analysis-modal .analysis-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-anchor: none;
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #support-modal {
    top: var(--d-ui-dialog-top);
    bottom: auto;
    max-height: min(calc(var(--d-ui-height) * .85), var(--d-ui-dialog-height));
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #support-modal:not(.open) {
    visibility: hidden;
    transform: translateY(calc(max(var(--d-ui-height), 100dvh) - var(--d-ui-dialog-top) + 1px));
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #support-modal :is(.settings-header,.support-tabs) {
    flex: 0 0 auto;
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #support-modal .support-content {
    min-height: 0;
    overflow-anchor: none;
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) :is(.side-menu,#menu-overlay) {
    box-sizing: border-box;
    top: calc(var(--d-home-top) + 50px);
    bottom: auto;
    height: max(0px, calc(var(--d-home-footer-top) - var(--d-home-top) - 50px));
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #inline-payment-overlay {
    height: var(--d-ui-height) !important;
    overflow-anchor: none;
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #inline-payment-overlay .ipm-container {
    min-height: var(--d-ui-height);
    box-sizing: border-box;
    padding-top: calc(20px + var(--d-ui-top));
    padding-bottom: calc(80px + var(--d-ui-height) - var(--d-ui-frame) + var(--d-ui-bottom));
}
html[data-d-normal-canvas-test="h3"][data-d-page-bars="h1"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #inline-payment-overlay .ipm-logout-container {
    top: max(0px, calc(var(--d-ui-frame) - 60px - var(--d-ui-bottom)));
    bottom: auto;
}

/* H7: normal descendants share retained insets, like the Analysis header.
 * Actual video ownership and editable/keyboard layouts keep their old policy.
 * No transform, scroll correction, height guess or new paint layer. */
html[data-d-normal-canvas-test="h3"]:is([data-d-page-bars="h1"],[data-d-normal-canvas="h3"]):not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]):not([data-d-normal-keyboard="true"]) {
    --d-safe-area-top: var(--d-ui-top);
    --d-safe-area-right: var(--d-ui-right);
    --d-safe-area-bottom: var(--d-ui-bottom);
    --d-safe-area-left: var(--d-ui-left);
}
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:not([data-d-viewport-shell="true"]) {
    background: var(--d-normal-backdrop, var(--background-color, #f8fafc));
}

/* H8 paint: these pages sample an independent outer surface, so BODY paint
 * cannot feed its own previous color back into the H7 backdrop sampler.
 * Use color only to preserve any authored background image/gradient. */
html[data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"]:is([data-d-normal-page="practice"],[data-d-normal-page="payment"]):not([data-d-viewport-shell="true"]) body {
    background-color: var(--d-normal-backdrop, var(--background-color, #f8fafc)) !important;
}