/* ==========================================================================
   App shell for small screens (public + member pages)
   Bottom tab bar, safe areas, touch comfort. Loaded from inc/head.php.
   ========================================================================== */

:root {
    --tab-h: 62px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; }

/* Never let images or embeds push the page wider than the screen */
img, video, iframe, svg { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
pre { overflow-x: auto; }

/* ---- Tab bar (phones only) ------------------------------------------------ */
.app-tabbar { display: none; }

@media (max-width: 767.98px) {
    body.has-tabbar { padding-bottom: calc(var(--tab-h) + var(--safe-bottom)); }

    .app-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        display: flex;
        height: calc(var(--tab-h) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        background: rgba(8, 12, 22, 0.94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(255, 255, 255, 0.09);
    }
    .app-tabbar.light {
        background: rgba(255, 255, 255, 0.96);
        border-top-color: #e5e7eb;
    }
    .app-tabbar a {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 10.5px;
        font-weight: 700;
        color: #64748b;
        text-decoration: none;
        transition: color 0.15s, transform 0.1s;
    }
    .app-tabbar a i { font-size: 19px; }
    .app-tabbar a:active { transform: scale(0.94); }
    .app-tabbar a.active { color: #38bdf8; }
    .app-tabbar.light a.active { color: #2563eb; }
    .app-tabbar a.active::before {
        content: "";
        position: absolute;
        top: 0; left: 30%; right: 30%;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: currentColor;
    }
    .app-tabbar a.cta { color: #fff; }
    .app-tabbar a.cta span.pillcta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        font-size: 12px;
    }

    /* Sticky top bars sit below the status bar in installed mode */
    header.dark-navbar, nav.dark-navbar { padding-top: var(--safe-top); }

    /* Comfortable inputs: 16px stops iOS from zooming on focus */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
    button, .dark-btn-primary, .dark-btn-secondary { min-height: 42px; }

    /* Content should not run under the install banner */
    .container-page { padding-left: 1rem; padding-right: 1rem; }
}

/* Smooth momentum scrolling, no rubber-band pull on installed app */
@media (display-mode: standalone) {
    body { overscroll-behavior-y: none; user-select: none; -webkit-user-select: none; }
    input, textarea, [contenteditable], pre, code, .selectable { user-select: text; -webkit-user-select: text; }
}

/* ---- Install banner ------------------------------------------------------- */
#installBanner {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--tab-h) + var(--safe-bottom) + 10px);
    z-index: 70;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #111a30;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
    font-size: 13px;
}
#installBanner.show { display: flex; }
#installBanner img { width: 38px; height: 38px; border-radius: 10px; }
#installBanner .txt { flex: 1; min-width: 0; line-height: 1.3; }
#installBanner .txt b { display: block; color: #fff; }
#installBanner button { min-height: 36px; border: 0; border-radius: 10px; padding: 0 14px; font-weight: 700; cursor: pointer; }
#installBanner .go { background: #2563eb; color: #fff; }
#installBanner .no { background: transparent; color: #94a3b8; padding: 0 8px; }
@media (min-width: 768px) { #installBanner { left: auto; right: 20px; bottom: 20px; max-width: 380px; } }