/* Keep page surfaces inside the real visual viewport on narrow landscape windows. */
html.viewport-landscape-window,
html.viewport-landscape-window body {
    width: var(--app-viewport-width, 100%);
    min-width: 0;
    max-width: var(--app-viewport-width, 100%);
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden !important;
}

html.viewport-landscape-window body {
    min-height: var(--app-viewport-height, 100vh);
}

html.viewport-landscape-window .header,
html.viewport-landscape-window .batch-toolbar,
html.viewport-landscape-window .modal,
html.viewport-landscape-window .filmstrip-mode,
html.viewport-landscape-window .filmstrip-preview,
html.viewport-landscape-window .success-effect,
html.viewport-landscape-window #navOverlay {
    width: var(--app-viewport-width, 100%);
    max-width: var(--app-viewport-width, 100%);
    left: 0;
    right: auto;
}

html.viewport-landscape-window .modal,
html.viewport-landscape-window .filmstrip-mode,
html.viewport-landscape-window .filmstrip-preview,
html.viewport-landscape-window .success-effect {
    height: var(--app-viewport-height, 100vh);
    min-height: var(--app-viewport-height, 100vh);
}

html.viewport-landscape-window .photos-list,
html.viewport-landscape-window .private-list,
html.viewport-landscape-window .diary-list,
html.viewport-landscape-window .growth-list,
html.viewport-landscape-window .travel-list,
html.viewport-landscape-window .events-list,
html.viewport-landscape-window .exercise-list,
html.viewport-landscape-window .footer-tip,
html.viewport-landscape-window .site-record-footer {
    max-width: var(--app-viewport-width, 100%);
}

html.keyboard-open body.login-scene > .site-record-footer {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}