/* Mobile shell — keep the navigation bar fixed and let page content scroll
   underneath it. iOS standalone mode is detected explicitly in App.razor and
   gets the class html.pwa-standalone.

   Important: the installed iOS app now uses an opaque status bar (not
   black-translucent). That means iOS itself reserves the status-bar area and
   the web viewport starts below it. We must therefore NOT add safe-area-top a
   second time in CSS. */
@media (max-width: 1023px) {
    body .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        height: 3.25rem !important;
        padding-top: 0 !important;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        box-sizing: border-box;
        background: var(--surface-2);
        z-index: 101;
    }

    /* One and only one top offset: exactly the fixed topbar height. */
    .app-shell:has(.topbar) .app-main {
        padding-top: 3.25rem !important;
    }

    /* Keep the ordinary page breathing room from app.css. */
    .app-shell:has(.topbar) .content {
        padding-top: 1.25rem !important;
    }

    /* The global app.css historically added env(safe-area-inset-top) to the
       whole shell. In an installed iOS app that is now wrong because the
       opaque native status bar already owns that area. */
    html.pwa-standalone body .app-shell {
        padding-top: 0 !important;
    }

    html.pwa-standalone body .topbar {
        top: 0 !important;
        height: 3.25rem !important;
        padding-top: 0 !important;
    }

    html.pwa-standalone body .app-main {
        padding-top: 3.25rem !important;
    }

    html.pwa-standalone body .content {
        padding-top: 1.25rem !important;
    }
}