/**
 * Glass surface polish — keeps shell LAYOUT, restores apple-glass chrome.
 * Active only when html[data-surface="glass"]. Flat mode ignores this file.
 */

/* ---- Header: floating glass capsule over shell grid ---- */
html[data-surface="glass"]:not([data-theme="lite"]) body .navbar.tl-shell-nav,
html[data-surface="glass"]:not([data-theme="lite"]) body:not(.page-stream) .navbar.tl-shell-nav,
html[data-surface="glass"]:not([data-theme="lite"]) body.page-stream .navbar.tl-shell-nav {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

@media (min-width: 769px) {
    html[data-surface="glass"]:not([data-theme="lite"]) body .navbar.tl-shell-nav {
        padding: 10px 12px 0 !important;
    }

    html[data-surface="glass"]:not([data-theme="lite"]) body .navbar.tl-shell-nav .tl-shell-nav__bar,
    html[data-surface="glass"]:not([data-theme="lite"]) body .navbar.tl-shell-nav .navbar-container {
        border-radius: 24px !important;
        border: 1px solid var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
        border-top-color: var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.22)) !important;
        background: linear-gradient(
            165deg,
            var(--ios-glass-tint, rgba(255, 255, 255, 0.08)),
            var(--ios-glass-bg-medium, rgba(28, 28, 34, 0.72))
        ) !important;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.18)) !important;
    }

    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        html[data-surface="glass"]:not([data-theme="lite"]) body .navbar.tl-shell-nav .tl-shell-nav__bar,
        html[data-surface="glass"]:not([data-theme="lite"]) body .navbar.tl-shell-nav .navbar-container {
            backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
            -webkit-backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
        }
    }

    html[data-surface="glass"]:not([data-theme="lite"]) body .tl-left-sidebar,
    html[data-surface="glass"]:not([data-theme="lite"]) body .tl-left-sidebar.is-expanded,
    html[data-surface="glass"]:not([data-theme="lite"]) body .tl-left-sidebar--drawer.is-expanded {
        border-radius: 24px !important;
        border: 1px solid var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
        border-top-color: var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.22)) !important;
        border-inline-end: 1px solid var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
        margin-inline-end: 14px !important;
        background: linear-gradient(
            165deg,
            var(--ios-glass-tint, rgba(255, 255, 255, 0.08)),
            var(--ios-glass-bg-medium, rgba(28, 28, 34, 0.72))
        ) !important;
        background-color: transparent !important;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.14)) !important;
        backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35)) !important;
        -webkit-backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35)) !important;
    }
}

/* ---- Search field: softer glass inset ---- */
html[data-surface="glass"]:not([data-theme="lite"]) body .tl-shell-nav .search-form {
    background: var(--ios-fill-tertiary, rgba(255, 255, 255, 0.08)) !important;
    border-color: var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
    border-radius: var(--ios-radius-md, 12px) !important;
}

/* ---- Stream cards: allow glass again ---- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-surface="glass"]:not([data-theme="lite"]) .stream-card,
    html[data-surface="glass"]:not([data-theme="lite"]) a.stream-card {
        background: linear-gradient(
            165deg,
            var(--ios-glass-tint, rgba(255, 255, 255, 0.08)),
            var(--ios-glass-bg-medium, rgba(28, 28, 34, 0.72))
        ) !important;
        backdrop-filter: blur(var(--ios-glass-blur-lg, 20px)) saturate(var(--ios-glass-saturate, 1.35));
        -webkit-backdrop-filter: blur(var(--ios-glass-blur-lg, 20px)) saturate(var(--ios-glass-saturate, 1.35));
        border-color: var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
        box-shadow:
            inset 0 1px 0 var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.14)),
            0 8px 24px rgba(0, 0, 0, 0.22) !important;
    }
}

/* ---- Footer: soft glass panel ---- */
html[data-surface="glass"]:not([data-theme="lite"]) body .site-footer.site-footer--shell {
    background: transparent !important;
    border-top: none !important;
}

html[data-surface="glass"]:not([data-theme="lite"]) body .site-footer.site-footer--shell .site-footer-wrap {
    border-radius: 24px !important;
    border: 1px solid var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
    border-top-color: var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.2)) !important;
    background: linear-gradient(
        165deg,
        var(--ios-glass-tint, rgba(255, 255, 255, 0.06)),
        var(--ios-glass-bg-medium, rgba(28, 28, 34, 0.78))
    ) !important;
    padding: 28px 22px 18px !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.12)) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-surface="glass"]:not([data-theme="lite"]) body .site-footer.site-footer--shell .site-footer-wrap {
        backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
        -webkit-backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
    }
}

/* ---- Mobile floating glass chrome ---- */
@media (max-width: 768px) {
    html[data-surface="glass"]:not([data-theme="lite"]) body:not(.page-stream) .navbar.tl-shell-nav,
    html[data-surface="glass"]:not([data-theme="lite"]) body.page-stream .navbar.tl-shell-nav {
        border-radius: 26px !important;
        margin: 8px 10px 0 !important;
        width: auto !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--ios-glass-bg-medium, rgba(28, 28, 34, 0.78)) !important;
        border: 1px solid var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.14)) !important;
    }

    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        html[data-surface="glass"]:not([data-theme="lite"]) body:not(.page-stream) .navbar.tl-shell-nav,
        html[data-surface="glass"]:not([data-theme="lite"]) body.page-stream .navbar.tl-shell-nav {
            backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
            -webkit-backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
        }
    }

    html[data-surface="glass"]:not([data-theme="lite"]) body:not(.page-stream) .mob-bottom-nav {
        border-radius: 30px !important;
        background: var(--ios-glass-bg-medium, rgba(28, 28, 34, 0.78)) !important;
        border: 1px solid var(--ios-glass-border, rgba(255, 255, 255, 0.14)) !important;
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 var(--ios-glass-border-highlight, rgba(255, 255, 255, 0.14)) !important;
    }

    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        html[data-surface="glass"]:not([data-theme="lite"]) body:not(.page-stream) .mob-bottom-nav {
            backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
            -webkit-backdrop-filter: blur(var(--ios-glass-blur-chrome, 28px)) saturate(var(--ios-glass-saturate, 1.35));
        }
    }
}