//
@layer layout {
    @media screen {
        :root, :host, :scope, :where(body) {
            pointer-events: auto;

            //
            transition-behavior: allow-discrete;
            interpolate-size: allow-keywords;
            content-visibility: auto;

            //
            --keyboard-inset-bottom: calc(max(env(keyboard-inset-bottom, 0px), 0px) / max(var(--zoom, 1), 0.125));
            --keyboard-inset-height: calc(max(env(keyboard-inset-height, 0px), 0px) / max(var(--zoom, 1), 0.125));
            /* INVARIANT: fill the large viewport; `min(screen, 100lv*)` undershoots Android availHeight. */
            --screen-fit-inline: max(var(--screen-width, 0px), var(--lv-width, 0px), 100lvi);
            --screen-fit-block: max(var(--screen-height, 0px), var(--lv-height, 0px), 100lvb);
        }

        //
        :root, :scope, :host {
            --scale: 1;
            --translate-x: 0px;
            --translate-y: 0px;

            //
            &, & :where(*) {
                --scale: 1;
                --translate-x: 0px;
                --translate-y: 0px;
            }
        }

        //
        :root, :where(html) {
            translate: none;
            transform: none;
            margin: 0px;
            padding: 0px;
            border: none 0px transparent;
            outline: none 0px transparent;

            //
            background-color: transparent;
            container-type: size;
            container-name: html root;
            contain: none;
            overflow: visible;
            position: fixed;
            inset: 0px;
            inset-block-end: auto;

            //
            min-inline-size: var(--screen-fit-inline, 100lvi);
            min-block-size: var(--screen-fit-block, 100lvb);

            //
            inline-size: stretch;
            block-size: var(--screen-fit-block, 100lvb);

            //
            max-inline-size: var(--screen-fit-inline, 100lvi) !important;
            /* WHY: never `min(100%, …)` on `position: fixed` html (visual viewport / IME). */
            max-block-size: var(--screen-fit-block, 100lvb) !important;
            overflow-anchor: none;

            //
            place-content: start;
            place-items: start;
            place-self: start;

            //
            line-height: normal;
            flex-direction: column;
            display: flex;
        };

        //
        :where(body) {
            //@include fit-viewport();

            //
            & {
                translate: none;
                transform: none;
                margin: 0px;
                padding: 0px;
                border: none 0px transparent;
                outline: none 0px transparent;

                //
                font-size: var(--text-base, 0.9rem);

                //
                overflow: visible;
                position: relative;
                pointer-events: auto;
                inset: auto;

                //
                display: inline flex;
                place-content: start;
                place-items: start;
                place-self: start;

                //
                background-color: transparent;

                // if needs viewport
                container-name: body;
                container-type: size;
                contain: strict;

                //
                min-inline-size: 0px;
                min-block-size: 0px;

                //
                inline-size: stretch;
                block-size: stretch;

                //
                max-inline-size: var(--screen-fit-inline, 100lvi);
                max-block-size: var(--screen-fit-block, 100lvb);
            }

            //
            & > :where(#app, #container, #root, .root) {
                inline-size: stretch;
                block-size: stretch;
                min-inline-size: 0px;
                min-block-size: 0px;
                max-inline-size: var(--screen-fit-inline, 100lvi);
                max-block-size: var(--screen-fit-block, 100lvb);
                background-color: transparent;
                border: none 0px transparent;
                outline: none 0px transparent;
            }

            //
            & > :where(*) {
                max-inline-size: var(--screen-fit-inline, 100lvi);
                max-block-size: var(--screen-fit-block, 100lvb);
            }
        }
        
        :root, :host, :scope, :where(body) {
            pointer-events: auto;

            //
            transition-behavior: allow-discrete;
            interpolate-size: allow-keywords;
            content-visibility: auto;

            //
            --keyboard-inset-bottom: calc(max(env(keyboard-inset-bottom, 0px), 0px) / max(var(--zoom, 1), 0.125));
            --keyboard-inset-height: calc(max(env(keyboard-inset-height, 0px), 0px) / max(var(--zoom, 1), 0.125));
            /* INVARIANT: fill the large viewport; `min(screen, 100lv*)` undershoots Android availHeight. */
            --screen-fit-inline: max(var(--screen-width, 0px), var(--lv-width, 0px), 100lvi);
            --screen-fit-block: max(var(--screen-height, 0px), var(--lv-height, 0px), 100lvb);
        }

        //
        :root, :scope, :host {
            --scale: 1;
            --translate-x: 0px;
            --translate-y: 0px;

            //
            &, & :where(*) {
                --scale: 1;
                --translate-x: 0px;
                --translate-y: 0px;
            }
        }

        //
        :root, :where(html) {
            translate: none;
            transform: none;
            margin: 0px;
            padding: 0px;
            border: none 0px transparent;
            outline: none 0px transparent;

            //
            background-color: transparent;
            container-type: size;
            container-name: html root;
            contain: none;
            overflow: visible;
            position: fixed;
            inset: 0px;
            inset-block-end: auto;

            //
            min-inline-size: var(--screen-fit-inline, 100lvi);
            min-block-size: var(--screen-fit-block, 100lvb);

            //
            inline-size: stretch;
            block-size: var(--screen-fit-block, 100lvb);

            //
            max-inline-size: var(--screen-fit-inline, 100lvi) !important;
            /* WHY: never `min(100%, …)` on `position: fixed` html (visual viewport / IME). */
            max-block-size: var(--screen-fit-block, 100lvb) !important;
            overflow-anchor: none;

            //
            place-content: start;
            place-items: start;
            place-self: start;

            //
            line-height: normal;
            flex-direction: column;
            display: flex;
        };

        //
        :where(body) {
            & {
                translate: none;
                transform: none;
                margin: 0px;
                padding: 0px;
                border: none 0px transparent;
                outline: none 0px transparent;

                //
                font-size: var(--text-base, 0.9rem);

                //
                overflow: visible;
                position: relative;
                pointer-events: auto;
                inset: auto;

                //
                display: inline flex;
                place-content: start;
                place-items: start;
                place-self: start;

                //
                background-color: transparent;

                // if needs viewport
                container-name: body;
                container-type: size;
                contain: strict;

                //
                min-inline-size: 0px;
                min-block-size: 0px;

                //
                inline-size: stretch;
                block-size: stretch;

                //
                max-inline-size: var(--screen-fit-inline, 100lvi);
                max-block-size: var(--screen-fit-block, 100lvb);
            }

            //
            & > :where(#app, #container, #root, .root) {
                inline-size: stretch;
                block-size: stretch;
                min-inline-size: 0px;
                min-block-size: 0px;
                max-inline-size: var(--screen-fit-inline, 100lvi);
                max-block-size: var(--screen-fit-block, 100lvb);
            }

            //
            & > :where(*) {
                max-inline-size: var(--screen-fit-inline, 100lvi);
                max-block-size: var(--screen-fit-block, 100lvb);
            }
        }

        /*
         * INVARIANT: wallpaper / html stay on `--lv-height`. Do not follow
         * `--vv-offset-top` or `--vv-height` — that slides the desktop with the IME.
         * Chrome pin is visualViewport.scrollTo(0) in Viewport.ts.
         */
        :root[data-vk-open],
        html[data-vk-open] {
            overflow: hidden !important;
            overscroll-behavior: none;
        }

        html[data-vk-open] :where(body) {
            overflow: hidden !important;
            overscroll-behavior: none;
        }
    };

};