/* ==========================================================================
   Liquid-glass utility layer (warm light theme).
   SVG filter primitives live in assets/svg-defs.html, injected once by
   js/glass-defs.js. Everything here just references url(#id).
   ========================================================================== */

.glass {
  position: relative;
  background:
    linear-gradient(160deg, var(--glass-highlight) 0%, transparent 46%),
    linear-gradient(180deg, var(--glass-fill-1) 0%, var(--glass-fill-2) 100%);
  border: 1px solid var(--stage-border);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(13px) saturate(125%);
  backdrop-filter: blur(13px) saturate(125%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 10px 26px -12px var(--glass-shadow),
    0 2px 6px -2px var(--glass-shadow);
  /* Isolate layout/style work so a blurred panel doesn't drag siblings into
     its recalcs. Deliberately NOT `contain: paint` - that clips glows and
     shadows that are meant to bleed past the border box. */
  contain: layout style;
}

/* Panels that want the organic refraction (feDisplacementMap) on top of the
   flat blur.

   Two constraints shape this, both found by testing rather than assumed:

   1. `backdrop-filter` chained with a url(#svg-filter) renders as a flat
      opaque block in current Chromium. So backdrop-filter stays
      blur()/saturate() only, and the SVG warp runs as a separate regular
      `filter`, which DOES reliably distort what shows through.

   2. A regular `filter` applies to the element AND its text content - which
      made card copy visibly wobble and hurt legibility. So the warp lives on
      a ::before layer that carries only the glass, and the real content
      paints above it, perfectly crisp. Negative z-index puts that layer
      above the host's own background but below its flow content. */
.glass-refract,
.glass-refract-soft {
  isolation: isolate;
}

.glass-refract::before,
.glass-refract-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.glass-refract::before {
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  filter: url(#liquid-refract);
}

.glass-refract-soft::before {
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  filter: url(#liquid-refract-soft);
}

.glass-goo {
  filter: url(#liquid-goo);
}

.glass-card {
  padding: var(--space-5);
}

.glass-card:hover {
  border-color: var(--stage-border-strong);
}

/* ---- glow utilities ------------------------------------------------- */

.glow-gold {
  box-shadow: 0 6px 20px -6px var(--glow-gold-soft), 0 0 18px -2px var(--glow-gold-soft);
}

.glow-accent {
  box-shadow: 0 6px 20px -6px var(--glow-accent-soft), 0 0 18px -2px var(--glow-accent-soft);
}

.glow-coral {
  box-shadow: 0 6px 18px -6px var(--glow-coral-soft);
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}