/* Liquid Glass for the web: translucent material + specular highlight that follows the pointer.
   Reserved for the action layer (cards, bars, buttons) — not every element. */
/* Zero-specificity positioning so components (sticky header, fixed tab bar, toast) keep their own. */
:where(.glass) { position: relative; }
.glass {
  isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
/* Specular highlight; --mx/--my are set by js/ui/glassPointer.js (default: top-start). */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px 160px at var(--mx, 20%) var(--my, 0%), var(--glass-highlight), transparent 70%);
  opacity: .55; transition: opacity var(--dur) var(--ease);
}
.glass--strong { background: var(--glass-strong); }
.glass--pill { border-radius: var(--r-pill); }
.glass--interactive { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.glass--interactive:hover::before { opacity: .9; }
.glass--interactive:active { transform: scale(.98); }

/* One shared glass surface for a group of sibling controls (≈ GlassEffectContainer). */
.glass-group { display: inline-flex; padding: var(--s-1); gap: var(--s-1); }
.glass-group > * { background: transparent; border: 0; box-shadow: none; }

/* Morph input → card (≈ glassEffectID) via View Transitions where supported. */
.morph { view-transition-name: card; }
::view-transition-old(card), ::view-transition-new(card) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease); }

/* Fallbacks: no backdrop-filter, reduced transparency, forced colors. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass::before { display: none; }
}
@media (forced-colors: active) {
  .glass { background: Canvas; border: 1px solid CanvasText; box-shadow: none; backdrop-filter: none; }
  .glass::before { display: none; }
}