/* ===================================================
   APP MODE — the installed app (display-mode: standalone)
   Everything below `@media (display-mode: standalone)` applies only when the site was installed and
   is launched from the home screen; in a normal browser tab the site looks as before. This is CSS
   only, because the CSP forbids the inline script that would otherwise set a class before paint.
   =================================================== */

/* Keep content out from under a notch in landscape (viewport-fit=cover lets the page reach it). Zero elsewhere. */
.dark-body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* The bottom tab bar (_AppTabBar.cshtml) only exists in the installed app. */
.app-tabbar { display: none; }

/* ---- Touch finish: any installed app, any screen size ---- */
@media (display-mode: standalone) {
    .dark-body { -webkit-tap-highlight-color: transparent; }

    /* No 300 ms tap delay or double-tap zoom on things you press. */
    .dark-body a,
    .dark-body button,
    .dark-body input,
    .dark-body select,
    .dark-body textarea,
    .dark-body label,
    .dark-body summary,
    .dark-body [role="button"] { touch-action: manipulation; }

    /* Controls should not start a text selection when held; running text stays selectable. */
    .dark-body button,
    .dark-body .btn,
    .dark-body .dark-nav-link,
    .dark-body .dark-nav-btn,
    .dark-body .app-tab {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

/* ---- Installed app on a phone-sized screen: tab bar, safe areas, bigger targets ---- */
@media (display-mode: standalone) and (max-width: 767px) {
    .dark-body {
        --app-header-height: 56px; /* matches .dark-header in dark-theme.css */
        --app-tabbar-height: 56px;
        --app-touch-target: 44px;
        /* Room for the fixed tab bar below the page content. */
        padding-bottom: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom));
    }

    /* The tab bar replaces the hamburger and the website footer. */
    .dark-hamburger,
    .dark-footer { display: none; }

    .app-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
        height: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--dk-bg);
        border-top: 1px solid rgba(236,228,207,0.10);
    }
    .app-tab {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        padding: 0;
        background: none; border: 0;
        color: rgba(236,228,207,0.55);
        font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em;
        text-decoration: none;
    }
    .app-tab i { font-size: 21px; line-height: 1; }
    .app-tab:hover { color: rgba(236,228,207,0.85); }
    .app-tab-active,
    .app-tab-active:hover { color: var(--dk-amber); }
    /* Scan is the main action of the app, so it stands out from the other tabs. */
    .app-tab-scan i {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 28px; border-radius: 14px;
        background: rgba(245,185,74,0.14); color: var(--dk-amber);
    }

    /* "More" opens the navigation panel as a sheet above the tab bar instead of below the header. */
    .dark-mobile-nav {
        top: auto;
        bottom: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom));
        max-height: calc(100dvh - var(--app-header-height) - var(--app-tabbar-height) - env(safe-area-inset-bottom));
        overflow-y: auto;
        border-bottom: 0;
        border-top: 1px solid rgba(236,228,207,0.10);
    }

    /* The cookie-settings button would sit on top of the tab bar. */
    #stcm-icon.stcm-pos-bottom-right { bottom: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom) + 12px); }

    /* Touch targets of at least 44 px (--app-touch-target); 16 px inputs stop iOS zooming the page when one is focused. */
    .dark-body .btn:not(.btn-sm) { min-height: var(--app-touch-target); }
    .dark-body .btn-sm { min-height: 36px; }
    .dark-body .form-control:not(.form-control-sm),
    .dark-body .form-select:not(.form-select-sm) { min-height: var(--app-touch-target); font-size: 16px; }
    .dark-mobile-search-input,
    .dark-mobile-search-btn,
    .dark-mobile-scan-btn { height: var(--app-touch-target); }
    .dark-mobile-search-input { font-size: 16px; }
    .dark-mobile-nav-links .dark-nav-link { padding-top: 13px; padding-bottom: 13px; }
    .dark-user-btn { min-width: var(--app-touch-target); min-height: var(--app-touch-target); }
}