/* ---------- Liquid Glass material ----------
   .lg-mat is the material layer of a host that contains other glass (bar, toolbar, tracks); .lg-self puts the
   material on the element itself (popovers, toast). Layers, back to front: frosted backdrop (refracted on Chromium),
   tint gradient, pointer glow, the inner rim light and outer hairline, then the specular edge (::before) that is
   brightest top-left and bottom-right, where light runs through the thick rim, and the pointer-lit rim (::after).
   Custom properties do not resolve inside -webkit-backdrop-filter, so the blur values are literal. */
.lg { position: relative; }
.lg > :not(.lg-mat) { position: relative; }
.lg-mat { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lg-mat, .lg-self, .availability-trigger {
  --tint-top: var(--lg-tint-top); --tint-bottom: var(--lg-tint-bottom);
  background:
    radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), var(--lg-glow), transparent 70%),
    linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  /* Thickness: a glow inside the top edge, a shade inside the bottom edge and a thin bright ring along the rim,
     so the material reads as a solid drop of glass even over the near-white Pearl ground. */
  box-shadow:
    inset 0 1px 0 var(--lg-highlight),
    inset 0 10px 16px -12px var(--lg-thick-top),
    inset 0 -10px 18px -12px var(--lg-thick-bottom),
    inset 0 0 6px 0 var(--lg-thick-ring),
    inset 0 -1px 0 var(--lg-shade),
    inset 0 0 0 1px var(--lg-rim),
    0 0 0 0.5px var(--lg-outline),
    var(--lg-shadow);
}
.lg-clear > .lg-mat { --tint-top: var(--lg-clear-top); --tint-bottom: var(--lg-clear-bottom); }
.lg-mat::before, .lg-mat::after, .lg-self::before, .lg-self::after, .availability-trigger::before, .availability-trigger::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lg-mat::before, .lg-self::before, .availability-trigger::before {
  padding: 1px;
  background: linear-gradient(135deg, var(--lg-edge) 0%, var(--lg-edge-soft) 26%, transparent 46%, transparent 62%, var(--lg-edge-soft) 84%, var(--lg-edge) 100%);
}
.lg-mat::after, .lg-self::after, .availability-trigger::after {
  padding: 1.5px; opacity: 0;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), var(--lg-rim-lit), transparent 70%);
  transition: opacity 320ms var(--ease-out);
}
.lg-mat.is-lit::after, .lg-self.is-lit::after, .availability-trigger.is-lit::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .lg-mat, .lg-self, .availability-trigger, .pop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--surface); }
  .bar-inner > .lg-mat { background: var(--bar-solid); }
  .ambient { display: none; }
  .lg-mat::after, .lg-self::after, .availability-trigger::after { display: none; }
}

@media (prefers-contrast: more) {
  :root { --hairline: rgba(18, 38, 66, 0.22); --hairline-strong: rgba(18, 38, 66, 0.4); --thread: rgba(18, 38, 66, 0.4); }
  :root[data-theme="dark"] { --hairline: rgba(255, 255, 255, 0.24); --hairline-strong: rgba(255, 255, 255, 0.4); --thread: rgba(255, 255, 255, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-mat::after, .lg-self::after, .availability-trigger::after { transition-duration: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .pop { transform: none !important; clip-path: none !important; transition: opacity 200ms var(--ease-out); }
}