/* ==========================================================================
   KodeshWay — Liquid Glass (web)
   CANONICAL SOURCE — sync via build/sync_design.sh. Do not hand-edit copies.

   .kw-glass    — translucent chrome (nav bars, sheets, floating controls).
                  Glass is for CHROME ONLY. Reading surfaces stay solid (.kw-card).
   Falls back to a solid surface when backdrop-filter is unsupported or the
   user prefers reduced transparency (mirrors iOS Reduce Transparency).
   ========================================================================== */

.kw-glass {
  background: var(--kw-glass-tint);
  -webkit-backdrop-filter: var(--kw-glass-blur);
  backdrop-filter: var(--kw-glass-blur);
  border: 1px solid var(--kw-glass-border);
  box-shadow: var(--kw-glass-highlight);
}

/* Edge-lit glass — layered inset highlights give real glass depth (bright top
   edge + faint side rims + a soft drop). Additive modifier; compose with
   .kw-glass. Use for featured cards / floating controls, not body surfaces. */
.kw-glass--edge {
  box-shadow:
    var(--kw-glass-highlight),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(255, 255, 255, 0.05),
    0 8px 30px rgba(0, 0, 0, 0.28);
}
[data-theme="light"] .kw-glass--edge {
  box-shadow:
    var(--kw-glass-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    inset 1px 0 0 rgba(0, 0, 0, 0.04),
    inset -1px 0 0 rgba(0, 0, 0, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.10);
}

/* Refractive glass — bends what's behind it via an SVG feDisplacementMap.
   Opt-in; needs the #kw-refract filter present once in the page (aria-hidden,
   0x0). Chromium-mainly; the @supports gate keeps Safari/Firefox on plain blur.
   Keep displacement small (chrome refraction, not a funhouse) so text stays
   legible. */
@supports (backdrop-filter: url(#kw-refract)) {
  .kw-glass--refract {
    -webkit-backdrop-filter: var(--kw-glass-blur) url(#kw-refract);
            backdrop-filter: var(--kw-glass-blur) url(#kw-refract);
  }
}

/* Scrim placed behind a glass surface presented over content (sheets/modals). */
.kw-scrim {
  background: var(--kw-scrim);
}

/* Opaque fallback — no backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kw-glass {
    background: var(--kw-glass-solid);
  }
}

/* Opaque fallback — user prefers reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .kw-glass,
  .kw-glass--refract {
    background: var(--kw-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}