/* Provisional Subtle Glass default; internal presets retain the same geometry. */
:root[data-material='subtle'], :root[data-material='strong'] {
  --material-base: rgb(250 251 246 / 12%);
  --material-chrome: rgb(250 251 246 / 82%);
  --material-sidebar: rgb(232 232 226 / 78%);
  --material-dock: rgb(250 251 246 / 66%);
  --material-menu: rgb(250 251 246 / 86%);
  --material-blur: 12px;
  --material-menu-blur: 8px;
  --material-edge: rgb(255 255 255 / 54%);
  --material-highlight: rgb(255 255 255 / 52%);
  --material-shadow: 0 7px 22px rgb(49 61 44 / 10%);
  --material-window-shadow: 0 4px 12px rgb(49 61 44 / 8%);
  --material-active-shadow: 0 14px 36px rgb(49 61 44 / 16%), 0 2px 8px rgb(49 61 44 / 8%);
}
:root[data-material='strong'] {
  --material-chrome: rgb(250 251 246 / 70%);
  --material-sidebar: rgb(232 232 226 / 72%);
  --material-dock: rgb(250 251 246 / 48%);
  --material-menu: rgb(250 251 246 / 78%);
  --material-blur: 22px;
  --material-menu-blur: 14px;
  --material-edge: rgb(255 255 255 / 70%);
  --material-highlight: rgb(255 255 255 / 72%);
  --material-shadow: 0 9px 26px rgb(49 61 44 / 13%);
  --material-window-shadow: 0 5px 15px rgb(49 61 44 / 10%);
  --material-active-shadow: 0 17px 42px rgb(49 61 44 / 19%), 0 2px 8px rgb(49 61 44 / 9%);
}
html:is([data-material='subtle'], [data-material='strong']) .app-window {
  background: var(--material-base); border-color: var(--material-edge);
  border-width: var(--border-width); border-radius: var(--radius-window);
  box-shadow: var(--material-window-shadow), inset 0 1px 0 var(--material-highlight);
}
html:is([data-material='subtle'], [data-material='strong']) .app-window.is-active {
  border-color: var(--border-emphasis); box-shadow: var(--material-active-shadow), inset 0 1px 0 var(--material-highlight);
}
html:is([data-material='subtle'], [data-material='strong']) :is(.window-title-bar, .archive-sidebar) {
  background: var(--material-chrome);
  -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur));
}
html:is([data-material='subtle'], [data-material='strong']) .archive-sidebar { background: var(--material-sidebar); }
html:is([data-material='subtle'], [data-material='strong']) :is(.window-content, .archive-reader) { background: var(--surface-content); }
html:is([data-material='subtle'], [data-material='strong']) .archive-layout { background: transparent; }
/* Filtering a Menu Bar ancestor would rebase its fixed dropdowns. Filter a
   noninteractive material backing instead, retaining their viewport anchor. */
html:is([data-material='subtle'], [data-material='strong']) .menu-bar { background: transparent; }
html:is([data-material='subtle'], [data-material='strong']) .menu-bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--material-menu); box-shadow: inset 0 1px 0 var(--material-highlight);
  -webkit-backdrop-filter: blur(var(--material-menu-blur)); backdrop-filter: blur(var(--material-menu-blur));
}
html:is([data-material='subtle'], [data-material='strong']) .dock {
  position: relative; z-index: 0; background: transparent; border-color: var(--material-edge);
  box-shadow: var(--material-shadow);
}
html:is([data-material='subtle'], [data-material='strong']) .dock::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--material-dock);
  -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur));
}
/* Opaque fallback keeps readable surfaces in unsupported browsers. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-material] { --material-base: var(--surface-content); --material-chrome: var(--surface-content); --material-sidebar: var(--wallpaper); --material-menu: var(--surface-content); --material-dock: var(--surface-content); }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-material] { --material-base: var(--surface-content); --material-chrome: var(--surface-content); --material-sidebar: var(--wallpaper); --material-menu: var(--surface-content); --material-dock: var(--surface-content); --material-blur: 0px; --material-menu-blur: 0px; --material-highlight: transparent; --material-edge: var(--border); }
}
/* Mode switching is immediate; no material animation is introduced. */

/* Muted Menu Bar text would lose contrast over dark backdrops. */
html:is([data-material='subtle'], [data-material='strong']) .updates-trigger > span { color: var(--text); }

/* Same opaque fallback is available to internal QA without OS settings changes. */
:root[data-transparency='reduce'] { --material-base: var(--surface-content); --material-chrome: var(--surface-content); --material-sidebar: var(--wallpaper); --material-menu: var(--surface-content); --material-dock: var(--surface-content); --material-blur: 0px; --material-menu-blur: 0px; --material-highlight: transparent; --material-edge: var(--border); }