/*! Liquid Glass — core material CSS (pairs with liquid-glass.js)
 *
 * Any element with [data-lg] becomes glass. The engine inserts two layers
 * (.lg__refract, .lg__tint) and adds the .lg class. Everything else here is
 * driven by custom properties the engine writes per element.
 *
 * Layer stack, all on NEGATIVE z inside the element's own stacking context, so
 * any content (even bare text nodes) paints above the material:
 *   .lg__refract  z -3   backdrop: SVG refraction (Chromium) or blur fallback
 *   .lg__tint     z -2   adaptive tint + bevel / thickness shadows
 *   ::before      z -1   uneven rim highlight (conic gradient masked to a ring)
 *   ::after       z -1   soft specular bloom following the light
 */

:root {
  /* Tuning parameters — unitless so JS can read them. Override per page. */
  --lg-refraction: 56;   /* px  displacement scale (rim offset ≈ half)          */
  --lg-bezel: 22;        /* px  width of the refracting rim band                 */
  --lg-aberration: 1.2;  /* px  red/blue channel split at the rim                */
  --lg-blur: 3;          /* px  frost. Keep low (2–8): content must stay legible */
  --lg-saturate: 1.45;   /* ×   backdrop saturation                              */
  --lg-brightness: 1.05; /* ×   backdrop brightness                              */
  --lg-tint: 0.5;        /* 0–1 adaptive tint strength                           */
  --lg-highlight: 1;     /* 0–2 rim / specular intensity                         */
}

.lg {
  --r: 22px;                                        /* corner radius (the map follows border-radius) */
  --tint-rgb: 255,255,255; --tint-a: .1; --tint-mul: 1;
  --fg: #fff; --fg-shadow: rgba(0,0,0,.25);
  --la: 315deg; --lx: 20%; --ly: 10%;               /* light direction / position (engine) */
  --flex: 0;                                        /* 0…1.5 press amount (engine) */
  --hl-k: calc(var(--lg-highlight) * (1 + var(--flex) * .6));
  border-radius: var(--r);
  color: var(--fg);
  text-shadow: 0 1px 1px var(--fg-shadow);
  box-shadow: 0 16px 36px -18px rgba(0,0,0,.36), 0 4px 10px -4px rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
}

/* Own stacking context via z-index. Never isolation/opacity/filter/mask/clip-path
   on the glass or ANY ancestor: those create a Backdrop Root and the refraction
   would see nothing behind it. */
:where(.lg) { position: relative; z-index: 0; }

.lg[data-lg="clear"] { --tint-mul: .45; }
.lg[data-lg="thick"] { --tint-mul: 1.9; }

.lg__refract {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  z-index: -3; pointer-events: none;
}
.lg__tint {
  position: absolute; inset: 0; border-radius: inherit; z-index: -2; pointer-events: none;
  background: rgba(var(--tint-rgb), calc(var(--tint-a) * var(--tint-mul)));
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255, calc(.2 * var(--hl-k))),
    inset 1.5px 2px 1.5px -1px rgba(255,255,255, calc(.55 * var(--hl-k))),
    inset -1.5px -2px 2px -1px rgba(255,255,255, calc(.16 * var(--hl-k))),
    inset 0 -14px 22px -18px rgba(0,0,0,.3),
    inset 0 12px 22px -16px rgba(255,255,255, calc(.28 * var(--hl-k)));
}
.lg-fallback .lg__tint { background: rgba(var(--tint-rgb), calc(var(--tint-a) * var(--tint-mul) * 1.7)); }
.lg[data-lg="tinted"] > .lg__tint { background: color-mix(in srgb, var(--lg-color, #0a84ff) 72%, rgba(var(--tint-rgb), .2)); }

.lg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 85% at var(--lx) var(--ly), rgba(255,255,255, calc(.15 * var(--hl-k))), rgba(255,255,255,0) 52%),
    radial-gradient(80% 60% at calc(100% - var(--lx)) calc(100% - var(--ly)), rgba(255,255,255, calc(.05 * var(--hl-k))), rgba(255,255,255,0) 60%);
}
.lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  padding: calc(1.1px + var(--flex) * .6px);
  background: conic-gradient(from calc(var(--la) - 180deg),
    rgba(255,255,255, calc(.2 * var(--hl-k))) 0deg, rgba(255,255,255,0) 64deg,
    rgba(255,255,255, calc(.5 * var(--hl-k))) 138deg, rgba(255,255,255, calc(.95 * var(--hl-k))) 174deg,
    rgba(255,255,255, calc(.72 * var(--hl-k))) 194deg, rgba(255,255,255,0) 276deg,
    rgba(255,255,255, calc(.2 * var(--hl-k))) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}