/* Liquid Glass on the web — controls and navigation only, never content (HIG).
   A translucent fill, a bright top rim, a hairline outer edge, soft depth. */

.glass {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        inset 0 1px 0 var(--glass-edge),
        inset 0 0 0 1px var(--glass-rim),
        var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--glass-solid); }
}

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