/*
 * MoqiKey Liquid Glass material (SPEC §4a). Light mode only.
 * glass.js adds refraction (.glass--lens on Chromium), the pointer specular and the liquid motion.
 *
 * Classes: .glass (material) · .glass--panel (large, blur only) · .glass--lens (small floating
 * control, refracts where supported) · .glass--chip (pill sizing) · .glass--pressable (liquid press).
 *
 * Rules for components that use it:
 * - Tint one element with --glass-tint (e.g. the cyan CTA); never set `background` on a .glass
 *   element (the specular highlight and the top sheen live in its background layers).
 * - glass.css owns ::after on .glass elements (the rim). ::before is free.
 * - Position glass with `transform` or `translate`; glass.js adds its scale on top of yours.
 * - If you set `transition` on a glass element, keep `--glass-spec 240ms, --gx 520ms, --gy 520ms`
 *   in the list (with var(--ease-out)), or the light snaps instead of easing.
 * - Load order: tokens.css, base.css, glass.css, then component CSS (so component rules win).
 * - Lenses default to clear glass (good for icons and over the silk). A lens that carries text
 *   over busy content (the nav) sets --glass-lens-blur: 8px and --glass-tint: var(--glass-fill).
 * - Glass reads only what is painted behind it inside the nearest ancestor that has opacity < 1,
 *   filter, mask, clip-path or backdrop-filter (another .glass counts). Do not put glass inside
 *   such an ancestor unless you want it to see only that ancestor's content. A .glass--lens
 *   inside another .glass never refracts (it would ghost); to have a lens move over a glass
 *   track (the segmented control), make the track's glass a sibling layer:
 *     <div class="seg"> <span class="seg__bg glass"></span> <button>…</button>…
 *       <span class="seg__thumb glass glass--lens"></span> </div>
 *
 * Per-element knobs (custom properties on the element):
 *   --glass-tint          this element's fill (default: --glass-fill, --glass-fill-strong on panels)
 *   --glass-blur          frost of the plain material
 *   --glass-lens-blur     frost while refracting (lens only; 0 keeps what is under it sharp)
 *   --glass-refract       edge bend, 0–1 (fraction of the bezel), default .42
 *   --glass-bezel         width of the bending band at the rim in px (default: half the radius, 6–20)
 *   --glass-magnify       centre magnification, 1–1.3, default 1.04
 *   --glass-spec-size     radius of the pointer highlight
 *   --glass-sheen         white at the top of the sheen, default .44 (lower on a lens over a label)
 * Call Glass.refresh(el) after changing --glass-refract, --glass-magnify or the radius in JS.
 */

@property --gx {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 26%;
}

@property --gy {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --glass-spec {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.32;
}

/* Low-specificity defaults, so any component rule wins. */
:where(.glass) {
  position: relative;
  border-radius: var(--glass-radius, 22px);
  transition:
    --glass-spec 240ms var(--ease-out),
    --gx 520ms var(--ease-out),
    --gy 520ms var(--ease-out);
}

.glass {
  --_fill: var(--glass-fill);
  isolation: isolate;
  background:
    /* pointer specular (white only); --gx / --gy follow the pointer while it is over the glass */
    radial-gradient(
      circle var(--glass-spec-size, 7.5rem) at var(--gx, 26%) var(--gy, 0%),
      oklch(var(--glass-light) / var(--glass-spec, .32)),
      oklch(var(--glass-light) / calc(var(--glass-spec, .32) * .35)) 38%,
      oklch(var(--glass-light) / 0) 72%
    ),
    /* top sheen, as in the app's Modifier.glass */
    linear-gradient(
      180deg,
      oklch(var(--glass-light) / var(--glass-sheen, .44)),
      oklch(var(--glass-light) / 0) min(56%, 2.75rem)
    ),
    var(--glass-tint, var(--_fill));
  -webkit-backdrop-filter: blur(var(--glass-blur, 18px)) saturate(var(--glass-saturate, 1.7));
  backdrop-filter: blur(var(--glass-blur, 18px)) saturate(var(--glass-saturate, 1.7));
  box-shadow:
    /* top inner highlight and the specular arc that bends round the top corners */
    inset 0 1px 0 0 var(--glass-rim),
    inset 0 1.5px 1.5px -.5px oklch(var(--glass-light) / .9),
    /* faint bottom inner shade */
    inset 0 -1px 0 0 var(--glass-shade),
    /* outer hairline */
    0 0 0 1px var(--glass-hairline),
    var(--glass-shadow);
}

/* The rim: bright where light catches (top left, a little bottom right), fading along the sides. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    150deg,
    oklch(var(--glass-light) / .95) 0%,
    oklch(var(--glass-light) / .32) 30%,
    oklch(var(--glass-light) / .06) 56%,
    oklch(var(--glass-light) / .26) 82%,
    oklch(var(--glass-light) / .7) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Light play: brighter under the pointer (which it follows with a short lag), brightest while
   pressed. */
:where(.glass.is-lit) {
  transition:
    --glass-spec 240ms var(--ease-out),
    --gx 140ms var(--ease-out),
    --gy 140ms var(--ease-out);
}
@media (hover: hover) {
  .glass.is-lit { --glass-spec: .55; }
  .glass--pressable.is-lit { --glass-spec: .9; }
}
.glass.is-lit.glass--panel { --glass-spec: .26; }
.glass.is-pressed { --glass-spec: .95; }

.glass:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Large panels: stronger fill for text, wider shadow, never refraction. */
.glass--panel {
  --_fill: var(--glass-fill-strong);
  --glass-spec-size: 16rem;
  --glass-spec: .18;
  --glass-shadow: var(--shadow-soft);
}
:where(.glass--panel) { border-radius: var(--radius-card); }

/* Small floating controls. Plain blur everywhere; glass.js swaps in the refracting filter
   (blur(--glass-lens-blur) + the lens map + saturate). Icon buttons get clear glass, so what is
   behind visibly bends at the rim; anything with text on it keeps more frost and fill. */
.glass--lens {
  --glass-spec-size: 4.5rem;
  --glass-lens-blur: 1.5px;
}
.glass--lens.is-refracting {
  --_fill: var(--glass-fill-lens);
}

/* Pills for chips (monochrome by default: ink on white glass). */
:where(.glass--chip) {
  display: inline-flex;
  align-items: center;
  gap: .375em;
  min-height: 2rem;
  padding: .375rem .875rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: .875rem;
  line-height: 1.2;
  white-space: nowrap;
}
.glass--chip {
  --glass-spec-size: 4rem;
  --glass-lens-blur: 4px;
}
.glass--chip.is-refracting { --_fill: var(--glass-fill); }

.glass--pressable {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* No backdrop-filter at all: make the fill carry the text on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { --_fill: var(--glass-fill-solid); }
}

/* The OS asks for less transparency: solid enough to read, no refraction (glass.js checks too). */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass--lens.is-refracting,
  .glass--chip.is-refracting { --_fill: var(--glass-fill-solid); }
}

/* The SVG filter defs glass.js injects. */
.glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}