/* Glassy chrome — app hosts (web + maui), every world EXCEPT high-contrast, so
   the animated backdrop shows through the sidebar + bottom nav. Each world's
   own --os-glass-* tokens tint the glass to that world. high-contrast opts out
   entirely: opaque chrome, no blur, no translucency. */
html[data-host="web"]:not([data-theme="high-contrast"]) .side-nav--v2,
html[data-host="maui"]:not([data-theme="high-contrast"]) .side-nav--v2 {
    background: var(--os-glass-bg-strong);
    backdrop-filter: blur(var(--os-glass-blur));
    -webkit-backdrop-filter: blur(var(--os-glass-blur));
    border-right: 1px solid var(--os-glass-border);
    box-shadow: var(--os-shadow-md), var(--os-glass-highlight);
}

html[data-host="web"]:not([data-theme="high-contrast"]) .bottom-nav--v2,
html[data-host="maui"]:not([data-theme="high-contrast"]) .bottom-nav--v2 {
    background: var(--os-glass-bg-strong);
    backdrop-filter: blur(var(--os-glass-blur));
    -webkit-backdrop-filter: blur(var(--os-glass-blur));
    border-top: 1px solid var(--os-glass-border);
    box-shadow: var(--os-shadow-md), var(--os-glass-highlight);
}

/* Shell transparency — the fixed backdrop layer (z-index 0) shows through the
   .app-layout shell on every world except high-contrast. This rule MUST live
   here (a plain stylesheet), not in AppLayout.razor.css: Blazor's scoped-CSS
   compiler emits `:global()` literally, the browser drops the rule as invalid,
   and the shell silently stays opaque. */
html[data-host="web"]:not([data-theme="high-contrast"]) .app-layout,
html[data-host="maui"]:not([data-theme="high-contrast"]) .app-layout {
    background-color: transparent;
}

/* high-contrast: no backdrop layer at all — display none beats any JS state.
   Same scoped-CSS constraint as above: html-anchored, so it lives here. */
html[data-theme="high-contrast"] .os-animated-bg {
    display: none;
}