/* The glass rule (mirrors the app: "a BackdropFilter per list item is unshippable").
   1. .glass-chrome  real backdrop-filter, only on one-off chrome (nav, slab, dock, CTA card).
   2. .glass-painted FrostedPanel: translucent fill + 1px gradient hairline + inner top glow,
                     no backdrop-filter, for anything that repeats.
   Refraction lives only in the hero's WebGL scene. Never animate blur, never set
   will-change: backdrop-filter (Safari artifacts). */

.glass-chrome,
.glass-painted {
    --fill: var(--glass-dark-fill);
    --border: var(--glass-dark-border);
    --hairline: var(--hairline-dark);
    --inner-glow: var(--inner-glow-dark);
}

[data-surface="paper"] .glass-chrome,
[data-surface="paper"] .glass-painted,
.glass-chrome[data-surface="paper"],
.glass-painted[data-surface="paper"] {
    --fill: var(--glass-light-fill);
    --border: var(--glass-light-border);
    --hairline: var(--hairline-light);
    --inner-glow: var(--inner-glow-light);
}

.glass-chrome {
    background: var(--fill);
    border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(var(--glass-blur-chrome));
    backdrop-filter: blur(var(--glass-blur-chrome));
}

@media (max-width: 899px) {
    .glass-chrome {
        -webkit-backdrop-filter: blur(var(--glass-blur-mobile));
        backdrop-filter: blur(var(--glass-blur-mobile));
    }
}

.glass-painted {
    border: 1px solid transparent;
    background:
        var(--inner-glow) padding-box,
        linear-gradient(var(--fill), var(--fill)) padding-box,
        var(--hairline) border-box;
}

/* Without backdrop-filter the fill alone must carry legibility. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-chrome {
        background: rgba(22, 16, 9, 0.92);
    }

    [data-surface="paper"] .glass-chrome,
    .glass-chrome[data-surface="paper"] {
        background: rgba(248, 247, 245, 0.95);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .glass-chrome {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--dark-raised);
    }

    [data-surface="paper"] .glass-chrome,
    .glass-chrome[data-surface="paper"] {
        background: #ffffff;
    }
}