/* ══════════════════════════════════════════════════════════
   OCEAN — LIQUID GLASS
   The ONE effect we allow. Reserved for floating surfaces:
   the bottom nav, sheets/modals, toast and the FAB.
══════════════════════════════════════════════════════════ */

.glass {
  position:relative;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--sh-glass);
}
/* liquid highlight — a soft light-reactive sheen along the top edge */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, var(--glass-hi) 0%, transparent 42%),
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.35), transparent 60%);
  opacity:.7; mix-blend-mode:screen;
}
:root[data-theme="dark"] .glass::before,
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .glass::before{ mix-blend-mode:overlay; opacity:.5; } }

/* Fallback when backdrop-filter is unsupported → solid surface */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:var(--surface); }
  .glass::before{ display:none; }
}