/* H4 is an explicit D-only presentation layer over the pinned H3 release.
 * Keep H1/H2/H3 geometry, original scroll owners, account/history handlers and
 * all media/rotation code. A visible video shell excludes EVERY rule below. */

/* Start uses its real existing toggle, including its original TTS handlers.
 * The long phrase label may wrap; the switch and the word "Word" must not
 * shrink into a vertical stack when the description or larger text is narrow. */
html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #situation-overlay .situation-header {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}
html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #situation-tts-toggle {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 8px;
}
html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #tts-label-line {
    flex: 1 1 180px;
    min-width: 0;
    margin-right: 0 !important;
    overflow-wrap: normal;
    word-break: normal;
}
html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #tts-switch-track {
    flex: 0 0 38px;
}
html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-normal-canvas="h3"][data-d-normal-page="lesson"]:not([data-d-viewport-shell="true"]) #tts-label-word {
    flex: 0 0 auto;
    margin-left: 0 !important;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Phone-sized portrait and short touch-landscape views use a page-like sheet,
 * not an inset narrow card. Tablet/large-window framing is left unchanged.
 * H1's active marker already requires a coarse pointer; duplicating that media
 * test here would give an instrumented local fixture a different CSS path.
 * All dimensions come from H1's retained canvas and learned safe frame; neither
 * a new live-viewport owner nor a scroll/resize correction is introduced. */
@media (max-width: 1000px) {
    html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-page-bars="h1"][data-d-sheet-layout="compact"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) :is(#auth-modal[data-profile-view="true"], .learning-history-modal) {
        --d-h4-sheet-top: max(20px, var(--d-home-top));
        --d-h4-sheet-right: var(--d-home-right);
        --d-h4-sheet-bottom: var(--d-home-bottom);
        --d-h4-sheet-left: var(--d-home-left);
        /* H1 safe-frame already excludes the bottom inset. Subtract only the
         * retained top; otherwise a bottom-safe phone loses the inset twice. */
        --d-h4-sheet-height: max(1px, calc(var(--d-home-safe-frame) - var(--d-h4-sheet-top)));
        box-sizing: border-box;
        padding: var(--d-h4-sheet-top) var(--d-h4-sheet-right) var(--d-h4-sheet-bottom) var(--d-h4-sheet-left);
        align-items: flex-start;
        overflow: hidden;
        background: var(--d-home-backdrop, var(--background-color));
    }
    html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-page-bars="h1"][data-d-sheet-layout="compact"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) #auth-modal[data-profile-view="true"] > .firebase-auth-container {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: var(--d-h4-sheet-height);
        max-height: var(--d-h4-sheet-height);
        min-height: 0;
        margin: 0;
        padding: 20px;
        border-radius: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-anchor: none;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    html[data-d-layout-test="h4"][data-d-normal-canvas-test="h3"][data-d-page-bars="h1"][data-d-sheet-layout="compact"]:not([data-d-viewport-shell="true"]):not([data-d-home-keyboard="true"]) .learning-history-modal > .modal-content {
        --history-content-padding: 16px;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: var(--d-h4-sheet-height);
        max-height: var(--d-h4-sheet-height);
        min-height: 0;
        margin: 0;
        padding: var(--history-content-padding);
        border-radius: 0;
        box-shadow: none;
        /* Keep the original fixed header and pagination rows. The SAME native
         * modal-body scrolls all records inside this now full-width sheet. */
        overflow-x: hidden;
        overflow-y: hidden;
    }
}