/* Labels and QR ink remain ordinary, sharp content over the optical surface. */
.liquid-control[data-liquid-glass] {
  isolation: isolate;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent;
  transition-property: transform, box-shadow, color;
}
.liquid-control > .lg-material {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.lg-material > .lg-frost,
.lg-material > .lg-backdrop,
.lg-material > .lg-optics {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.lg-frost {
  background: linear-gradient(-75deg, #ffffff0d, #ffffff33, #ffffff0d);
}
.liquid-control:not(.orb-qr-card) > .lg-material > .lg-frost {
  background-image: linear-gradient(-75deg,
    rgb(255 255 255 / calc(var(--button-opacity, .2) * .25)),
    rgb(255 255 255 / var(--button-opacity, .2)),
    rgb(255 255 255 / calc(var(--button-opacity, .2) * .25))),
    linear-gradient(rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)), rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)));
}
/* Preserve the original marketing pill's milky face and delicate chrome edge.
   Only the backdrop treatment changes from blur to refraction. */
:is(.mgb--header, .mgb--hero, .mgb--heroLarge) .liquid-control > .lg-material > .lg-frost {
  background-color: rgb(255 255 255 / clamp(0, calc(var(--button-opacity, .2) * 2.75), .9));
  background-image: linear-gradient(-75deg,
    rgb(255 255 255 / calc(var(--button-opacity, .2) * .5)),
    rgb(255 255 255 / calc(var(--button-opacity, .2) * 1.5)),
    rgb(255 255 255 / calc(var(--button-opacity, .2) * .5))),
    linear-gradient(rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)), rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)));
}
.lg-backdrop {
  backdrop-filter: blur(1.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.2);
}
.lg-optics { opacity: .92; transition: opacity 220ms ease; }
.liquid-control:hover > .lg-material > .lg-optics { opacity: 1; }
.liquid-control .mgb-ring, .liquid-control .mgb-label, .liquid-control .mgb-shine,
.ado-link.liquid-control::after { border-radius: inherit; }
/* Same hairline as the existing CTA rings, including the QR and small controls. */
.liquid-control:not(.mgb-btn):not(.ado-link)::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset: -.5px; padding: 1px; border-radius: inherit; box-sizing: border-box;
  background: conic-gradient(from var(--angle-1, -75deg) at 50% 50%,
    #0008, #0000 5% 40%, #0008 50%, #0000 60% 95%, #0008),
    linear-gradient(#ffffff80, #ffffff80);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: inset 0 0 0 .5px #ffffff59;
  transition: --angle-1 500ms ease;
}
.liquid-control:not(.mgb-btn):not(.ado-link):hover::after { --angle-1: -125deg; }
.mgb-btn.liquid-control .mgb-label { z-index: 1; }
.ado-link.liquid-control > .lg-material { position: absolute; z-index: -1; }
.gs-trigger.liquid-control .lg-frost,
.bts-trigger.liquid-control .lg-frost,
.dock-switch.liquid-control .lg-frost { background-color: #f9fbfcce; }
.discover-mode button.liquid-control[aria-pressed="true"] { color: #17232b; }
.discover-mode button.liquid-control[aria-pressed="true"] .lg-frost { background-color: #f5f8fce8; }
.discover-mode button.liquid-control[aria-pressed="false"] { box-shadow: none !important; }
.discover-mode button.liquid-control[aria-pressed="false"] > .lg-material { opacity: .2; }
.discover-mode button.liquid-control:hover > .lg-material { opacity: 1; }
.discover-mode button.liquid-control > .lg-material { transition: opacity 200ms ease; }
html[data-navink="dark"] #nav .mgb-btn.liquid-control .mgb-label { color: #fff; text-shadow: 0 1px 2px #0006; }
html[data-navink="dark"] #nav .liquid-control .lg-frost { background-color: #1e273338; }

/* Original QR geometry and shadows come from qrtilt.js. The code stays sharp
   over white; the surrounding surface uses the same thin edge as the buttons. */
.orb-qr-card.liquid-control .lg-frost {
  background: linear-gradient(-75deg, #ffffff57, #ffffff9e, #ffffff57);
  backdrop-filter: blur(1.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.2);
}
.orb-qr-card.liquid-control .qr-media {
  border-radius: calc(clamp(19px, 1.97vw, 26px) - clamp(6px, .6vw, 9px));
  background: white;
}
.orb-qr-card.liquid-control .qr-img { border-radius: inherit; }
.orb-qr-card.liquid-control .qr-foil,
.orb-qr-card.liquid-control .qr-grating,
.orb-qr-card.liquid-control .qr-sheen { display: none; }
.orb-qr-card.liquid-control .lg-optics { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .liquid-control > .lg-material, .lg-optics { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .liquid-control[data-liquid-glass] > .lg-material > .lg-frost { background: #f9fbfc; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .liquid-control .lg-backdrop { display: none; }
}
@media (forced-colors: active) {
  .liquid-control[data-liquid-glass] { border: 1px solid ButtonText !important; }
  .liquid-control > .lg-material { display: none; }
}