/* Liquid glass surfaces. Pair with glass.js. Tokens can be overridden per element.
 * Rules learned the hard way (PMC site): glass is for fixed chrome and floating controls; in-page panels over moving
 * content use .glass--flow (tinted, no live blur), and nothing clinical or long-form ever sits on live blur. */
.glass {
  --glass-tint: rgb(255 255 255 / .55);
  --glass-tint-2: rgb(255 255 255 / .18);
  --glass-blur: 14px;
  --glass-rim: rgb(255 255 255 / .85);      /* where the key light (top left) hits the edge */
  --glass-rim-dim: rgb(255 255 255 / .25);
  --glass-shade: rgb(16 40 34 / .14);       /* the edge facing away from the light */
  --glint-x: 30%; --glint-y: 0%;
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--glass-tint), var(--glass-tint-2) 60%, rgb(255 255 255 / .3));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),                 /* top lip catches the light */
    inset 1px 0 0 var(--glass-rim-dim),
    inset 0 -1px 0 var(--glass-shade),
    inset 0 0 0 1px rgb(255 255 255 / .22),
    0 1px 1px rgb(16 40 34 / .06),
    0 12px 32px -14px rgb(16 40 34 / .32);          /* soft lift */
}
/* refraction (Chromium): glass.js puts a displacement filter in --glass-refract */
.glass.is-refracting {
  -webkit-backdrop-filter: var(--glass-refract) blur(calc(var(--glass-blur) * .35)) saturate(1.7);
  backdrop-filter: var(--glass-refract) blur(calc(var(--glass-blur) * .35)) saturate(1.7);
}
/* the rim: a 1.5px gradient border, brightest toward the light, drawn with a mask so the fill stays untouched */
.glass::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 210deg at 50% 50%, rgb(255 255 255 / .95), rgb(255 255 255 / .15) 25%, rgb(255 255 255 / .05) 45%,
    rgb(255 255 255 / .55) 60%, rgb(255 255 255 / .1) 80%, rgb(255 255 255 / .95));
  -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);
}
/* the glint: a soft specular highlight that slides with the pointer / scroll (glass.js sets --glint-x/y) */
.glass::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120px 60px at var(--glint-x) var(--glint-y), rgb(255 255 255 / .55), transparent 70%),
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .12) 45%, transparent 55%);
  mix-blend-mode: soft-light;
  transition: background-position .3s;
}
.glass > * { position: relative; z-index: 2; }
.glass > .lq-pill { position: absolute; z-index: 1; }

/* tinted, no live blur: for panels inside the page and anything over moving content */
.glass--flow { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --glass-tint: rgb(255 255 255 / .86); --glass-tint-2: rgb(255 255 255 / .74); }
/* dark glass */
.glass--dark { --glass-tint: rgb(20 36 32 / .62); --glass-tint-2: rgb(20 36 32 / .42); --glass-rim: rgb(255 255 255 / .35); --glass-rim-dim: rgb(255 255 255 / .1); --glass-shade: rgb(0 0 0 / .4); color: #fff; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(250 252 251 / .96); }
  .glass--dark { background: rgb(20 36 32 / .94); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass, .glass.is-refracting { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fbfcfb; }
  .glass--dark { background: #142420; }
  .glass::after { display: none; }
}