/* ===========================================================
   Mobile frame
   The app is designed for phones only. On a real phone it fills
   the screen. In a desktop / tablet browser it is shown as a
   centered phone-width column instead of stretching.

   How it works:
   - #phone is the "screen": fixed width cap, full height, and a
     transform, which makes every `position: fixed` element inside
     (bottom nav, action bars, sheets, toasts) anchor to the phone
     column instead of the browser window.
   - #app (the Blazor root) is the scroll container, so the fixed
     bars stay put while the page content scrolls.
   =========================================================== */

:root {
    --phone-w: 430px;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #2a2723; /* backdrop shown beside the phone column on wide screens */
}

#phone {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--phone-w);
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
    transform: translateZ(0); /* containing block for position: fixed descendants */
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 12px 48px rgba(0,0,0,.45);
}

#app {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

    #app::-webkit-scrollbar {
        display: none;
    }

    /* theme.css sizes the shell to the window; size it to the phone instead */
    #app .app-shell {
        min-height: 100%;
        box-shadow: none;
    }

/* Boot spinner (shown until Blazor has started) */
.boot-loader {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 100dvh;
    background: #fff;
}

    .boot-loader svg {
        display: block;
        animation: boot-flip 1.2s ease-in-out infinite;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }

@keyframes boot-flip {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

/* Error bar must stay inside the phone column */
#phone #blazor-error-ui {
    position: absolute;
}