/* Responsive overrides for phones, tablets, and laptops. */
html {
    min-width: 320px;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: 100dvh;
    overflow-x: hidden;
}

#root {
    min-height: 100dvh;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.MuiDialog-paper,
.MuiDrawer-paper,
.MuiPopover-paper,
.MuiMenu-paper {
    max-width: calc(100vw - 24px);
}

@media (pointer: coarse) {
    .MuiButtonBase-root:not(.MuiChip-root),
    .MuiButton-root,
    .MuiIconButton-root,
    .MuiListItemButton-root {
        min-height: 44px;
    }
}

@media (max-width: 600px) {
    body {
        overscroll-behavior-x: none;
    }

    .MuiContainer-root {
        padding-right: 12px;
        padding-left: 12px;
    }

    .MuiToolbar-root {
        min-height: 56px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .MuiInputBase-input,
    .MuiSelect-select,
    textarea {
        font-size: 16px !important;
    }

    .MuiDialog-paper {
        width: calc(100vw - 24px);
        margin: 12px;
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
    }

    .MuiDialogActions-root {
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    }

    .MuiDrawer-paper[style*='bottom'],
    .MuiBottomNavigation-root {
        padding-bottom: env(safe-area-inset-bottom);
    }

    #root > .MuiStack-root:has(#username) {
        min-height: 100dvh;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:first-child {
        min-height: 32dvh;
        padding: 16px;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:first-child svg {
        font-size: clamp(112px, 38vw, 170px) !important;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:nth-child(2) {
        min-height: 68dvh;
        padding: 20px 20px max(72px, env(safe-area-inset-bottom));
        justify-content: flex-start;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:nth-child(2) > .MuiStack-root {
        width: 100%;
        max-width: 420px;
        gap: 16px;
    }

    #root > .MuiStack-root:has(#username) .MuiButton-root {
        min-height: 48px;
        border-radius: 12px;
    }
}

@media (min-width: 601px) and (max-width: 1199px) {
    .MuiContainer-root {
        padding-right: 20px;
        padding-left: 20px;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:first-child {
        min-height: 42dvh;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:nth-child(2) {
        min-height: 58dvh;
    }
}

@media (min-width: 1200px) {
    .MuiContainer-root {
        max-width: 1440px;
        padding-right: 28px;
        padding-left: 28px;
    }

    #root > .MuiStack-root:has(#username) > .MuiStack-root:nth-child(2) > .MuiStack-root {
        width: min(100%, 420px);
    }
}