/* ==========================================================================
   Liquid glass bottom navigation — the phone bar as a drop of glass, with a
   lens over the current tab (ui/liquid-nav.js).

   Loaded last: mobile-glass-nav.css owns the layout, while
   product-ui-cleanup.css, glass-system.css and steppe-light.css each restyle
   the bar, several with !important. This file only changes the material,
   so it wins with one id-level selector and !important on the contested
   properties.

   The glass lives on ::before, not on the bar itself: an element with a
   backdrop filter becomes the backdrop root of everything inside it, and the
   lens would then see the bar alone instead of the page under it.
   ========================================================================== */

@media (max-width: 1023px) {
    :root {
        /* Dark themes: smoked glass, fine edges, restrained light. */
        --tp-drop-tint: color-mix(in srgb, var(--tp-color-surface-raised) 52%, transparent);
        --tp-drop-rim: rgba(255, 255, 255, 0.12);
        --tp-drop-glint: rgba(255, 255, 255, 0.22);
        --tp-drop-shade: rgba(0, 0, 0, 0.45);
        --tp-drop-icon: color-mix(in srgb, var(--tp-color-text) 84%, transparent);
        --tp-lens-tint: rgba(255, 255, 255, 0.05);
        --tp-lens-arc: rgba(0, 0, 0, 0.32);
        --tp-lens-edge: rgba(255, 255, 255, 0.50);
    }

    html[data-theme="steppe-light"] {
        /* Light theme: clear glass, bright hairline edges, light shadow. */
        --tp-drop-tint: rgba(255, 255, 255, 0.46);
        --tp-drop-rim: rgba(255, 255, 255, 0.75);
        --tp-drop-glint: rgba(255, 255, 255, 0.90);
        --tp-drop-shade: rgba(60, 48, 24, 0.20);
        --tp-drop-icon: color-mix(in srgb, var(--tp-color-text) 86%, transparent);
        --tp-lens-tint: rgba(255, 255, 255, 0.32);
        --tp-lens-arc: rgba(60, 48, 24, 0.14);
        --tp-lens-edge: rgba(255, 255, 255, 0.95);
    }

    html body #tp-mobile-nav.tp-mobile-nav {
        overflow: visible;
        /* The bar owns its gestures: a drag along it moves the lens, never
           the page or the browser back swipe. */
        touch-action: none;
        min-height: 62px !important;
        padding: 6px !important;
        border: 0 !important;
        border-radius: 31px !important;
        background: transparent !important;
        background-image: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* The glass body of the bar. */
    html body #tp-mobile-nav.tp-mobile-nav::before {
        content: '';
        position: absolute;
        z-index: 0;
        inset: 0;
        border-radius: inherit;
        background: var(--tp-drop-tint);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        box-shadow:
            0 12px 30px -14px var(--tp-drop-shade),
            inset 0 0 0 0.5px var(--tp-drop-rim),
            inset 0 1px 0 var(--tp-drop-glint);
        pointer-events: none;
    }

    /* A faint sheen on the upper half, as light falls on curved glass. */
    html body #tp-mobile-nav.tp-mobile-nav::after {
        content: '';
        position: absolute;
        z-index: 0;
        inset: 1px;
        border-radius: inherit;
        background: linear-gradient(180deg, color-mix(in srgb, var(--tp-drop-glint) 30%, transparent), transparent 42%);
        pointer-events: none;
    }

    html body #tp-mobile-nav .tp-mobile-nav__item {
        z-index: 1;
        min-height: 50px !important;
        gap: 3px;
        border-radius: 24px !important;
        color: var(--tp-drop-icon);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.01em;
        transition: color 160ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 120ms ease-out;
    }

    html body #tp-mobile-nav .tp-mobile-nav__item i { font-size: 18px; filter: none; }

    /* Every tab is named, as on iOS; the lens shows which one is current. */
    html body #tp-mobile-nav .tp-mobile-nav__item > span:not(.nav-badge) {
        max-width: 100%;
        opacity: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The press answers on touch-down. */
    html body #tp-mobile-nav .tp-mobile-nav__item:active {
        transform: scale(0.94);
        transition-duration: 90ms;
    }

    /* Without the lens (no script yet, or it is off) the active tab is a
       small tinted capsule. */
    html body #tp-mobile-nav .tp-mobile-nav__item.is-active {
        color: var(--tp-color-primary);
        background: color-mix(in srgb, var(--tp-color-primary) 16%, transparent) !important;
        box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tp-color-primary) 34%, var(--tp-drop-rim)) !important;
    }

    /* ── The lens ─────────────────────────────────────────────────────────── */

    /* With the lens on, it is the highlight; the tab under it stays plain and
       its own icon fades as far as the lens covers it (ui/liquid-nav.js sets
       --tp-under-lens), or the magnified copy would sit over a double. */
    html body #tp-mobile-nav.has-lens .tp-mobile-nav__item.is-active {
        background: transparent !important;
        box-shadow: none !important;
    }
    html body #tp-mobile-nav.has-lens > .tp-mobile-nav__item > * { opacity: calc(1 - var(--tp-under-lens, 0)); }

    html body #tp-mobile-nav .tp-lens {
        position: absolute;
        z-index: 2;
        top: -4px;
        left: 0;
        width: var(--tp-lens-w, 84px);
        height: calc(100% + 8px);
        border-radius: 999px;
        overflow: hidden;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(var(--tp-lens-x, 0px), 0, 0) scale(var(--tp-lens-sx, 1), var(--tp-lens-sy, 1));
        will-change: transform;
        background: var(--tp-lens-tint);
        /* Thick glass: what passes under it goes soft, so only the magnified
           copy reads sharply. */
        -webkit-backdrop-filter: blur(6px) saturate(170%) brightness(1.06);
        backdrop-filter: blur(6px) saturate(170%) brightness(1.06);
        box-shadow:
            /* refraction darkens the edge a touch at the top and bottom */
            inset 0 8px 9px -8px var(--tp-lens-arc),
            inset 0 -8px 9px -8px var(--tp-lens-arc),
            /* a hairline rim, lit from above */
            inset 0 0 0 0.75px var(--tp-lens-edge),
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14),
            0 6px 16px -8px rgba(0, 0, 0, 0.40);
        transition: opacity 180ms ease;
    }

    html body #tp-mobile-nav .tp-lens.is-visible { opacity: 1; }

    /* Dispersion on the rim: a faint split of colour at the rounded ends,
       where the glass curves most, and none along the flat top and bottom. */
    html body #tp-mobile-nav .tp-lens::after {
        content: '';
        position: absolute;
        z-index: 2;
        inset: 0;
        padding: 1.5px;
        border-radius: inherit;
        background: conic-gradient(from 0deg,
            transparent 0 16%,
            #ffd27a 21%, #ff6b8b 25%, #b06bff 29%, #4cc9f0 33%,
            transparent 38% 62%,
            #4dffb8 67%, #4cc9f0 71%, #ff6bd6 75%, #ffd27a 79%,
            transparent 84% 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        filter: blur(0.6px);
        opacity: 0.32;
        mix-blend-mode: screen;
        pointer-events: none;
    }

    /* Specular highlight on the upper curve of the lens. */
    html body #tp-mobile-nav .tp-lens::before {
        content: '';
        position: absolute;
        z-index: 2;
        left: 18%;
        right: 18%;
        top: 2px;
        height: 26%;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
        opacity: 0.22;
        pointer-events: none;
    }

    /* A magnified copy of the bar, aligned with the real one, seen through the lens. */
    html body #tp-mobile-nav .tp-lens__row {
        position: absolute;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
    }

    html body #tp-mobile-nav .tp-lens__row .tp-mobile-nav__item {
        color: var(--tp-color-primary);
        background: transparent !important;
        box-shadow: none !important;
        transition: none;
    }
}

/* No backdrop blur: the clear tint would leave the bar unreadable, so it
   turns into a solid drop that keeps the same shape and light. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    @media (max-width: 1023px) {
        html body #tp-mobile-nav.tp-mobile-nav::before { background: var(--tp-color-surface-raised); }
    }
}

@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) {
    html body #tp-mobile-nav.tp-mobile-nav::before {
        background: var(--tp-color-surface-raised);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html body #tp-mobile-nav .tp-lens {
        background: color-mix(in srgb, var(--tp-color-primary) 16%, var(--tp-color-surface-raised));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html body #tp-mobile-nav .tp-lens::after { display: none; }
}

@media (max-width: 1023px) and (prefers-contrast: more) {
    html body #tp-mobile-nav.tp-mobile-nav::before {
        background: var(--tp-color-surface-raised);
        box-shadow: inset 0 0 0 1px var(--tp-color-text), 0 10px 24px -10px var(--tp-drop-shade);
    }
    html body #tp-mobile-nav.tp-mobile-nav::after,
    html body #tp-mobile-nav .tp-lens::after { display: none; }
    html body #tp-mobile-nav .tp-lens { box-shadow: inset 0 0 0 2px var(--tp-color-primary); }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    html body #tp-mobile-nav .tp-mobile-nav__item,
    html body #tp-mobile-nav .tp-mobile-nav__item:active { transition: none; transform: none; }
}