/* Frosted-glass nav pill. Keep the fill translucent enough that the
   backdrop-filter in the container kill-switch actually has something to blur —
   an opaque fill here silently disables the glass. */
#bottom-nav,
html[data-theme] #bottom-nav,
body[data-theme] #bottom-nav,
[data-theme] #bottom-nav {
    background: rgba(252, 252, 254, 0.58) !important;
    background-color: rgba(252, 252, 254, 0.58) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.14),
        0 1px 2px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    -webkit-box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.14),
        0 1px 2px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(26px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.7) !important;
}

html[data-theme="light"] #bottom-nav,
body[data-theme="light"] #bottom-nav,
html[data-theme="light-accent"] #bottom-nav,
body[data-theme="light-accent"] #bottom-nav,
html[data-theme="light"][data-theme-variant] #bottom-nav,
body[data-theme="light"][data-theme-variant] #bottom-nav {
    background: rgba(252, 252, 254, 0.58) !important;
    background-color: rgba(252, 252, 254, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="light-accent"] #bottom-nav,
body[data-theme="light-accent"] #bottom-nav {
    background: rgba(252, 252, 254, 0.58) !important;
    background-color: rgba(252, 252, 254, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="light-accent"] .mobile-blocspace-tab-rail,
body[data-theme="light-accent"] .mobile-blocspace-tab-rail {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-top-color: transparent !important;
}

html[data-theme="dark"] #bottom-nav,
body[data-theme="dark"] #bottom-nav,
html[data-theme="dark-accent"] #bottom-nav,
body[data-theme="dark-accent"] #bottom-nav,
html[data-theme="dark"][data-theme-variant] #bottom-nav,
body[data-theme="dark"][data-theme-variant] #bottom-nav {
    background: rgba(22, 22, 26, 0.6) !important;
    background-color: rgba(22, 22, 26, 0.6) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.028)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    -webkit-box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

#bottom-nav > button.bottom-nav-btn {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

html[data-theme="light"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="light"] #bottom-nav > button.bottom-nav-btn,
html[data-theme="light-accent"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="light-accent"] #bottom-nav > button.bottom-nav-btn {
    color: rgba(17, 17, 17, 0.68) !important;
}

html[data-theme="dark"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="dark"] #bottom-nav > button.bottom-nav-btn,
html[data-theme="dark-accent"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="dark-accent"] #bottom-nav > button.bottom-nav-btn {
    color: rgba(255, 255, 255, 0.72) !important;
}

#bottom-nav > button.bottom-nav-btn.active,
#bottom-nav > button.bottom-nav-btn.active i,
#bottom-nav > button.bottom-nav-btn.active .mobile-nav-glyph,
#bottom-nav > button.bottom-nav-btn.active .bottom-nav-label,
#bottom-nav > button.bottom-nav-btn.active .bottom-nav-avatar {
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

.mobile-blocspace-tab-rail {
    background: #ffffff;
    background-color: #ffffff;
    background-image: none;
    border-top-color: transparent;
    box-shadow: none;
}

html[data-theme="light"] .mobile-blocspace-tab-rail,
body[data-theme="light"] .mobile-blocspace-tab-rail,
html[data-theme="light-accent"] .mobile-blocspace-tab-rail,
body[data-theme="light-accent"] .mobile-blocspace-tab-rail {
    background: #ffffff;
    background-color: #ffffff;
    background-image: none;
    border-top-color: transparent;
}

html[data-theme="dark"] .mobile-blocspace-tab-rail,
body[data-theme="dark"] .mobile-blocspace-tab-rail,
html[data-theme="dark-accent"] .mobile-blocspace-tab-rail,
body[data-theme="dark-accent"] .mobile-blocspace-tab-rail {
    background: #050505;
    border-top-color: rgba(255, 255, 255, 0.12);
}

.mobile-blocspace-shell-tab.is-active {
    color: var(--text-primary, #111111) !important;
    background: color-mix(in srgb, var(--text-primary, #111111) 8%, transparent) !important;
    border-radius: 18px !important;
    font-weight: 900 !important;
}

.mobile-blocspace-shell-tab.is-active::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 3px !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--text-primary, #111111) !important;
    transform: translateX(-50%) !important;
}

/* Keep the Bloc Space rail single-select. Global first-button rules elsewhere
   in the mobile shell must not make Home look active beside the real section. */
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active) {
    background: transparent !important;
    color: var(--text-secondary, #6b7280) !important;
    border-radius: 0 !important;
    transition: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active)::after {
    background: transparent !important;
    display: none !important;
    transition: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active {
    background: color-mix(in srgb, var(--text-primary, #111111) 8%, transparent) !important;
    color: var(--text-primary, #111111) !important;
    transition: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active::after {
    background: var(--text-primary, #111111) !important;
}