/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  LIQUID GLASS — the reusable material primitive                        ║
   ║                                                                        ║
   ║  Drop `.liquid-glass` on ANY element (button, pill, nav, card) to give ║
   ║  it the standard frosted-glass material. The content inside is yours.  ║
   ║                                                                        ║
   ║  THE EFFECT = 3 CO-LOCATED PIECES (it looks like "just frost" if you   ║
   ║  read only one of them — that is the trap):                            ║
   ║   1. KNOBS  → the --lg-* control panel in  tokens.css   (tune here)    ║
   ║   2. CLASS  → this file                                  (the recipe)  ║
   ║   3. SVG    → #liquid-glass filter injected by assets/liquid-glass.js  ║
   ║              (+ map assets/liquid-glass-map.webp). This is the          ║
   ║              REFRACTION layer — injected at RUNTIME, present in NO      ║
   ║              .css/.html file. Do NOT conclude "transparent" just        ║
   ║              because the CSS only shows frost.                          ║
   ║                                                                        ║
   ║  Variants:  .liquid-glass--orange  → the "Vote" CTA tint               ║
   ║             .liquid-glass--nav     → FIXED / WIDE bars (top + bottom    ║
   ║                                      nav). SAME material as the base —   ║
   ║                                      only invisible plumbing differs:    ║
   ║                                      frost on the element (§9) + a       ║
   ║                                      width-sized refraction filter so a  ║
   ║                                      fixed wide bar composites & doesn't ║
   ║                                      over-throw. Same glass, not a look. ║
   ║                                                                        ║
   ║  The existing .btn--ghost / .btn--yellow-ghost / .glass-tabs / .botnav ║
   ║  read the SAME --lg-* panel via the --glass-* aliases, so they already  ║
   ║  match this primitive. Use this class for any NEW glass surface.        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.liquid-glass {
  position: relative;
  isolation: isolate;                   /* keep the lens behind THIS element's own content */
  /* v2: the primitive sets its own label colour. Without this a bare
     `<button class="liquid-glass">` inherits the UA default `buttontext`
     (pure black) and measures ~1.13:1 on a dark canvas. Form controls do not
     inherit colour, so relying on inheritance is not enough. The ink follows
     THE GROUND, not the material — see --lg-ink in liquid-glass-tokens.css. */
  color: var(--lg-ink);
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;             /* the host element sets the shape */
  background: var(--lg-fill);
  box-shadow: var(--lg-shine);
  -webkit-backdrop-filter: var(--lg-frost);
          backdrop-filter: var(--lg-frost);
  pointer-events: none;               /* a full-cover pseudo must never eat clicks */
}

/* SHEEN — the GLOSSY reflection: a broad white top-light that fades down the glass,
   like light on a wet/polished surface. Separate from the edge bevel (--lg-shine).
   On its own pseudo (no transform/backdrop) so it stays crisp; sits above the frost,
   below the content. Tune strength with --lg-sheen. */
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, var(--lg-sheen, 0.18)) 0%,
    rgba(255, 255, 255, calc(var(--lg-sheen, 0.18) * 0.3)) 16%,
    rgba(255, 255, 255, 0) 48%);
}

/* Chromium with the refraction filter live → add the SVG displacement.
   Non-Chromium / iOS keep the plain frost above (see assets/liquid-glass.js). */
.glass-refract .liquid-glass::before {
  /* var(--lg-refract) = this element's OWN size-matched lens (set by liquid-glass.js);
     falls back to the shared filter before JS runs / for un-processed elements. */
  -webkit-backdrop-filter: blur(var(--lg-blur)) var(--lg-refract, url(#liquid-glass)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) var(--lg-refract, url(#liquid-glass)) saturate(var(--lg-sat));
}

/* ORANGE tint — the "Vote" CTA */
.liquid-glass--orange::before { background: var(--lg-fill-orange); }

/* FIXED / WIDE bars (top + bottom nav) — the SAME glass material as the base
   .liquid-glass: SAME --lg-fill (white-5%), SAME --lg-shine, SAME --lg-frost (8px).
   It is NOT a different look. The only two differences are invisible plumbing that
   fixed positioning physically requires:
     (1) the frost sits on the ELEMENT (+ translateZ) instead of the ::before lens —
         a fixed element's backdrop-filter only composites that way; a ::before on a
         fixed element renders see-through (NAV_SCROLL_BEHAVIOR.md §9).
     (2) the url() refraction is a per-element filter SIZED to the bar (built in
         liquid-glass.js for [data-lg-refract]) — the SAME #liquid-glass recipe + map,
         just sized so a wide box doesn't over-throw and go see-through.
   So nav + button are the same fill, same frost, same shine, same refraction. */
.liquid-glass--nav {
  background: var(--lg-fill);               /* SAME white-5% as the button */
  -webkit-backdrop-filter: var(--lg-frost); /* frost-only fallback; refraction added under .glass-refract below */
          backdrop-filter: var(--lg-frost);
  transform: translateZ(0);                 /* §9: own GPU layer so a fixed bar composites */
  isolation: auto;
  /* NO box-shadow here on purpose: transform + backdrop-filter on the SAME box
     wash out an inset box-shadow → the bar reads MATTE (verified). So the specular
     shine moves to the ::before lens below, which has no transform/backdrop and
     stays crisp. Same split the product uses: frost on .botnav, shine on
     .botnav__list. */
}
/* SHINE lens — re-enabled for fixed bars (base hid it). Carries ONLY the specular
   --lg-shine (no fill, no frost, no transform) so the gloss renders crisp on top of
   the element's frost → the nav now reads as shiny as the button. inset / z-index /
   border-radius / pointer-events are inherited from .liquid-glass::before above. */
.liquid-glass--nav::before {
  display: block;
  background: none;                /* fill is on the element */
  -webkit-backdrop-filter: none;   /* frost is on the element */
          backdrop-filter: none;
}
.glass-refract .liquid-glass--nav::before {
  -webkit-backdrop-filter: none;   /* keep the shine lens frost-free when refraction is on */
          backdrop-filter: none;
}
/* refraction on the nav ELEMENT (Chromium): its OWN size-matched lens via --lg-refract */
.glass-refract .liquid-glass--nav {
  -webkit-backdrop-filter: blur(var(--lg-blur)) var(--lg-refract, url(#liquid-glass)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) var(--lg-refract, url(#liquid-glass)) saturate(var(--lg-sat));
}