/* =============================================
   THEME SHADER LAYER — Stacking + UI safety
   When a WebGL shader background is active we want:
     - the canvas at z-index 0 (already set inline)
     - all immediate UI siblings to render above it
     - the body's painted background to be invisible
       (so the shader is the actual background, not
       overpainted by the body's themed gradient)
   ============================================= */

html.shader-bg-active body {
    /* Let the shader canvas be the visible background */
    background: transparent !important;
    background-image: none !important;
}

html.shader-bg-active body > *:not(#theme-shader-canvas) {
    position: relative;
    z-index: 1;
}

/* Page wrappers often use position:relative without z-index.
   Make sure they win over z-index:0 canvas in any stacking context. */
html.shader-bg-active .layout,
html.shader-bg-active main,
html.shader-bg-active .settings-container,
html.shader-bg-active .container,
html.shader-bg-active .page-content,
html.shader-bg-active footer {
    position: relative;
    z-index: 1;
}

html.shader-bg-active .pill-nav {
    position: fixed;
    z-index: 10000;
}

html.shader-bg-active .pill-nav__dropdown,
html.shader-bg-active .pill-nav__dropdown-menu {
    z-index: 10001;
}

/* Slight readability boost on light shaders: cards already have
   their own backgrounds so this just nudges contrast a touch. */
html.shader-bg-active .glass-card,
html.shader-bg-active .card {
    backdrop-filter: blur(2px);
}

/* Reduced motion: shader runs one frame and stops; ensure canvas
   isn't accidentally hidden by a stale display:none rule. */
html.shader-bg-active #theme-shader-canvas {
    display: block !important;
}