/* ==========================================================================
   Mobile glass navigation — scoped owner for `<nav id="tp-mobile-nav">`.

   `home-redesign.css` and `phase-one.css` are the historical selector owners of
   the bottom bar and both remain protected here, so this file is loaded last and
   restyles the same selectors at equal specificity instead of editing them.

   The bar is one floating rounded capsule. Items are oval hit areas inside that
   capsule, never separate square cards, and the active item carries its own
   rounded capsule. Colours come from the Toguz Pro token set; the glass effect
   is an enhancement with an opaque fallback, so contrast never depends on it.
   ========================================================================== */

@media (max-width: 1023px) {
    :root {
        /* The pill floats, so the space every screen has to reserve at the
           bottom is the capsule plus its gap — one token keeps
           home-redesign.css, phase-one.css and visual-polish.css in agreement. */
        --tp-mobile-nav-height: 84px;
        --tp-glass-nav-gap: 12px;
        --tp-glass-nav-tint: color-mix(in srgb, var(--tp-color-surface-raised) 72%, transparent);
        --tp-glass-nav-edge: color-mix(in srgb, var(--tp-color-text, #FFFFFF) 14%, transparent);
        --tp-glass-nav-sheen: color-mix(in srgb, var(--tp-color-text, #FFFFFF) 7%, transparent);
    }

    .tp-mobile-nav {
        position: fixed;
        z-index: 100;
        left: max(var(--tp-glass-nav-gap), env(safe-area-inset-left));
        right: max(var(--tp-glass-nav-gap), env(safe-area-inset-right));
        bottom: calc(var(--tp-glass-nav-gap) + env(safe-area-inset-bottom));
        /* One capsule, not five buttons in a row. */
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 2px;
        min-height: 60px;
        padding: 6px;
        border: 1px solid var(--tp-glass-nav-edge);
        border-top: 1px solid var(--tp-glass-nav-edge);
        border-radius: 999px;
        background: var(--tp-glass-nav-tint);
        background-image: linear-gradient(180deg, var(--tp-glass-nav-sheen), transparent 62%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        backdrop-filter: blur(20px) saturate(150%);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.32),
            inset 0 1px 0 var(--tp-glass-nav-sheen);
    }

    .tp-mobile-nav__item {
        position: relative;
        flex: 1 1 0;
        min-width: 44px;
        min-height: 48px;
        padding: 4px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        /* Oval hit areas — the square card look is gone. */
        border-radius: 999px;
        background: transparent;
        color: var(--tp-color-text-muted);
        font: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: color 140ms ease, background-color 140ms ease;
    }

    .tp-mobile-nav__item i { font-size: 17px; line-height: 1; }

    /* A quiet bar: only the current destination is labelled. Every item keeps a
       readable name for assistive technology through its own text node. */
    .tp-mobile-nav__item > span:not(.nav-badge) {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        white-space: nowrap;
        transition: max-width 160ms ease, opacity 160ms ease;
    }

    .tp-mobile-nav__item.is-active {
        /* The active tab is its own rounded capsule inside the shared pill. */
        background: color-mix(in srgb, var(--tp-color-primary) 20%, transparent);
        color: var(--tp-color-primary);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-primary) 28%, transparent);
    }

    .tp-mobile-nav__item.is-active > span:not(.nav-badge) {
        max-width: 12ch;
        opacity: 1;
    }

    .tp-mobile-nav__item:focus-visible {
        outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
        outline-offset: -2px;
        border-radius: 999px;
    }

    /* The whole bar disappears with the screen it belongs to. */
    .tp-mobile-nav[hidden],
    body.global-nav-hidden .tp-mobile-nav { display: none; }
}

/* Without backdrop-filter the tint would be a washed-out translucent strip over
   scrolling content, so the fallback is a fully opaque neutral surface. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    @media (max-width: 1023px) {
        .tp-mobile-nav {
            background: var(--tp-color-surface-raised);
            background-image: none;
        }
    }
}

@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) {
    .tp-mobile-nav {
        background: var(--tp-color-surface-raised);
        background-image: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .tp-mobile-nav__item,
    .tp-mobile-nav__item > span:not(.nav-badge) { transition: none; }
}

@media (max-width: 360px) {
    .tp-mobile-nav { padding: 5px; gap: 0; }
    .tp-mobile-nav__item { padding-inline: 2px; font-size: 9.5px; }
    .tp-mobile-nav__item.is-active > span:not(.nav-badge) { max-width: 9ch; }
}