/*
 * Shared frontend viewport contract.
 *
 * Ordinary pages use document scrolling. Dedicated workbenches may opt into
 * the shell model with data-ms-scroll-model="shell". The page templates no
 * longer need to invent their own 100vh/overflow-hidden combination.
 */

:root {
    --ms-safe-top: env(safe-area-inset-top, 0px);
    --ms-safe-right: env(safe-area-inset-right, 0px);
    --ms-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ms-safe-left: env(safe-area-inset-left, 0px);
    --ms-visual-viewport-height: 100dvh;
    --ms-fixed-bottom-height: 0px;
    /* Fixed bars already include env(safe-area-inset-bottom) in their own box. */
    --ms-page-bottom-space: calc(var(--ms-fixed-bottom-height) + 24px);
}

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

html[data-ms-scroll-model="document"],
html[data-ms-scroll-model="document"] body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

[data-ms-viewport-root] {
    box-sizing: border-box;
    min-height: 100svh;
    min-height: 100dvh;
}

[data-ms-viewport-root][data-ms-scroll-model="document"] {
    height: auto !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding-bottom: var(--ms-page-bottom-space) !important;
    scroll-padding-bottom: var(--ms-page-bottom-space) !important;
}

[data-ms-viewport-root][data-ms-scroll-model="shell"] {
    height: var(--ms-visual-viewport-height, 100dvh);
    min-height: var(--ms-visual-viewport-height, 100dvh);
    overflow: hidden;
}

[data-ms-scroll-container] {
    scroll-padding-bottom: var(--ms-page-bottom-space);
}

/* Opt-in pages use their own dock budget; legacy pages keep their original path. */
[data-ms-responsive][data-ms-scroll-model="document"] {
    /* Resolve on the page that owns the measured dock, not on :root. */
    --ms-page-bottom-space: calc(var(--ms-fixed-bottom-height, 0px) + 24px);
    padding-top: var(--ms-fixed-top-height, 56px) !important;
    padding-bottom: var(--ms-page-bottom-space) !important;
}
[data-ms-responsive] .ms-bottom-dock [data-ms-fixed-bottom] {
    padding-bottom: 10px;
}

[data-ms-fixed-bottom] {
    padding-bottom: max(12px, var(--ms-safe-bottom));
}

@supports not (height: 100dvh) {
    [data-ms-viewport-root],
    [data-ms-viewport-root][data-ms-scroll-model="document"] {
        min-height: 100vh;
    }

    [data-ms-viewport-root][data-ms-scroll-model="shell"] {
        height: 100vh;
        min-height: 100vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-ms-viewport-root] {
        scroll-behavior: auto !important;
    }
}