/* 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; } /* ── Optional collapsed sidebar (desktop / tablet) ───────────────────────── The sidebar can be collapsed to an icon rail. State carrier is a single attribute on the document root — html[data-sidenav="collapsed"]; absent (or any other value) means expanded, which is the DEFAULT, so the whole mode is opt-in and nothing changes for a user who never touches the toggle. Why and not a Blazor field: each host's carries a tiny inline boot script that reads localStorage('os.sidenav.collapsed') and stamps the attribute BEFORE first paint, so a returning user never sees a 260px sidebar snap to 76px. Blazor cannot run that early, and two owners of one attribute would fight. sidenav.js owns every later flip. These rules MUST live here (a plain stylesheet) and not in SideNav.razor.css / AppLayout.razor.css, for the same reason the shell transparency above does: Blazor's scoped-CSS compiler emits `:global()` literally, the browser drops the rule as invalid, and html-anchored selectors silently never apply. Targeting the component's own class names from a global sheet is fine — `b-*` scoping restricts a component's OWN stylesheet, not other sheets. Everything is wrapped in the ≥768px media query the shell's desktop layout uses: below it .app-sidebar is `display: none` and BottomNav is the nav, so a collapsed rail would have nothing to act on. */ @media (min-width: 768px) { /* Animate the rail width on the shell, not the