/**
 * Mobile App Shell
 *
 * Bottom tab bar + sticky page-bar primitives for the mobile-app-feeling
 * redesign. Visible only on viewports <= 768px wide. Coexists with the
 * existing desktop header and mobile-nav-overlay (hamburger).
 *
 * Phase 1 deliverable. Page-bar is shipped as a primitive here so individual
 * pages can opt into it in later phases without further infrastructure work.
 */

/* ============================================================
 * Bottom tab bar — primary mobile navigation
 * ============================================================ */

.mas-tab-bar {
    /* Hidden by default; revealed only inside the mobile breakpoint below. */
    display: none;
}

@media (max-width: 768px) {
    /* Hide the desktop site header on mobile — the bottom tab bar covers
       primary navigation, the You tab covers auth, and each page's own
       page-header serves as the top chrome. The hamburger menu becomes
       redundant once tab bar nav is in place.

       The mobile-nav-overlay (rendered as a sibling of <header>) stays
       in the DOM since some legacy code still queries it; it's just no
       longer reachable from the visible UI. */
    body > header {
        display: none;
    }

    /* Hide the global site footer on mobile too — its links and social
       icons live on the You page in a more compact form. Saves vertical
       space on every other page where the footer wasn't earning it. */
    body > .site-footer {
        display: none;
    }

    /* Reserve room at the bottom of every page so the floating tab bar
       doesn't cover the last bit of scrollable content. */
    body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom));
    }

    /* Footer sits above the tab bar on mobile rather than under it.
       Without this the footer's last line would be hidden behind the bar. */
    .site-footer {
        margin-bottom: calc(58px + env(safe-area-inset-bottom));
    }

    /* Immersive routes (e.g. deck-builder) hide the tab bar and reclaim
       the bottom padding. Pages on these routes provide their own back
       affordance. The body class is toggled by mobile-app-shell.ts on
       every route change. */
    body.mas-immersive .mas-tab-bar {
        display: none;
    }
    body.mas-immersive {
        padding-bottom: 0;
    }
    body.mas-immersive .site-footer {
        margin-bottom: 0;
    }

    /* When the More-tab opens the hamburger overlay, leave the tab bar
       uncovered so the user can tap More again to close (or pick a different
       tab). The overlay's z-index (9999) still sits above page content but
       below the tab bar's stacking context. Scoped to non-immersive routes
       so deck-builder (no tab bar) keeps the full-height overlay. */
    body:not(.mas-immersive) .mobile-nav-overlay {
        height: calc(100% - 58px - env(safe-area-inset-bottom));
    }

    .mas-tab-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: var(--z-mobile-tab-bar, 1200);

        height: calc(58px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);

        background: var(--mas-tab-bar-bg, rgba(249, 249, 251, 0.85));
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 0.5px solid var(--mas-tab-separator, rgba(60, 60, 67, 0.18));

        display: flex;
        align-items: stretch;
    }

    body.dark-theme .mas-tab-bar {
        --mas-tab-bar-bg: rgba(28, 28, 30, 0.85);
        --mas-tab-separator: rgba(84, 84, 88, 0.4);
    }

    .mas-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;

        background: none;
        border: none;
        padding: 6px 4px 4px;
        margin: 0;

        color: var(--mas-tab-color, #8e8e93);
        font-size: 10px;
        font-weight: 500;
        font-family: inherit;
        line-height: 1;
        letter-spacing: -0.01em;

        cursor: pointer;
        transition: transform 0.1s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mas-tab-item:active {
        transform: scale(0.94);
    }

    .mas-tab-item.active {
        color: var(--mas-tab-color-active, #007aff);
    }

    body.dark-theme .mas-tab-item.active {
        color: var(--mas-tab-color-active, #0a84ff);
    }

    .mas-tab-icon {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
    }

    .mas-tab-icon svg {
        width: 26px;
        height: 26px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: fill 0.15s ease, stroke-width 0.15s ease;
    }

    /* Active tab uses filled icons (iOS pattern) */
    .mas-tab-item.active .mas-tab-icon svg {
        fill: currentColor;
        fill-opacity: 0.18;
    }

    .mas-tab-label {
        font-size: 10px;
        font-weight: 500;
    }

    /* Hide the existing "Sticky to bottom" buy-me-coffee floater (if any)
       to avoid overlap with the tab bar. Other floating widgets that want
       to coexist should use the .mas-respect-tab-bar class to lift above it. */
    .mas-respect-tab-bar {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================================
 * Page bar — sticky frosted-glass header per page (Phase 1 primitive)
 *
 * Pages that want native-style chrome can render this at the top of
 * their content. Phase 3+ will adopt this incrementally.
 *
 * Markup contract:
 *   <header class="mas-page-bar">
 *     <div class="mas-page-bar-row">
 *       <h1 class="mas-page-bar-title">Cards</h1>
 *       <button class="mas-page-bar-action">Sort</button>  <!-- optional -->
 *     </div>
 *     <!-- optional sub-content (search, chips) -->
 *   </header>
 * ============================================================ */

@media (max-width: 768px) {
    .mas-page-bar {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky, 50);

        margin: 0 -16px 0;  /* Bleed to the screen edges; pages already pad inward */
        padding: 6px 16px 10px;

        background: var(--mas-page-bar-bg, rgba(249, 249, 251, 0.85));
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 0.5px solid var(--mas-page-bar-separator, rgba(60, 60, 67, 0.12));
    }

    body.dark-theme .mas-page-bar {
        --mas-page-bar-bg: rgba(28, 28, 30, 0.85);
        --mas-page-bar-separator: rgba(84, 84, 88, 0.4);
    }

    .mas-page-bar-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 38px;
    }

    .mas-page-bar-title {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary, #000);
        margin: 4px 0 0;
        line-height: 1.1;
    }

    .mas-page-bar-action {
        background: none;
        border: none;
        color: var(--mas-tab-color-active, #007aff);
        font-size: 16px;
        font-weight: 500;
        font-family: inherit;
        padding: 4px 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mas-page-bar-action:active {
        opacity: 0.55;
    }

    .mas-page-bar-icon-btn {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        background: var(--mas-page-bar-icon-bg, rgba(120, 120, 128, 0.12));
        color: var(--mas-tab-color-active, #007aff);
        border: none;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.1s, background-color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .mas-page-bar-icon-btn:active {
        transform: scale(0.92);
    }

    body.dark-theme .mas-page-bar-icon-btn {
        --mas-page-bar-icon-bg: rgba(118, 118, 128, 0.24);
    }
}