/* ==========================================================================
   Liquid Glass for the web · material layer
   --------------------------------------------------------------------------
   Load order:  liquid-glass.css  →  lg-shapes.css (generated)
   Also needed: the inline <svg> from lg-filters.svg, once per page.

   Markup
     <nav class="lg lg-tabbar">…</nav>               backdrop mode
     <div class="lg lg-card">                         mirror mode
       <div class="lg-mirror" aria-hidden="true">…copy of what is behind…</div>
       …content…
     </div>
     <div class="lg">…</div>                          frost only (any size, no refraction)

   Layers inside every .lg element, bottom to top
     .lg-mirror  optional child: a copy of the backdrop, refracted with filter (all engines)
     ::before    refraction of the live backdrop with backdrop-filter: url() (Chromium only)
     ::after     frost, tint, inner glow and rim light (all engines)
     children    your content

   Keep url() and blur() on separate layers. Safari and Firefox drop a
   backdrop-filter that contains url() entirely, so merging them would also
   lose the frost in those browsers.
   ========================================================================== */

:root {
  --lg-tint: rgb(255 255 255 / .26);          /* regular */
  --lg-tint-clear: rgb(255 255 255 / .06);    /* clear, for lenses over media */
  --lg-tint-tinted: rgb(247 248 251 / .72);   /* tinted, more opaque */
  --lg-solid: rgb(244 246 249);               /* reduced transparency */
  --lg-blur: 6px;
  --lg-blur-clear: 1px;
  --lg-blur-tinted: 18px;
  --lg-saturate: 170%;

  --lg-ink: #10141a;                          /* text and icons on glass */
  --lg-halo: rgb(255 255 255 / .75);          /* glow behind text on busy backdrops */
  --lg-hair: rgb(255 255 255 / .40);          /* hairline edge */
  --lg-rim-hi: rgb(255 255 255 / .92);        /* specular rim, top left */
  --lg-rim-lo: rgb(255 255 255 / .55);        /* specular rim, bottom right */
  --lg-glow: rgb(255 255 255 / .30);          /* inner glow */
  --lg-shadow: rgb(16 24 40 / .22);
  --lg-spring: cubic-bezier(.34, 1.45, .55, 1);
}

/* Dark tokens. Follows the OS setting unless the page forces a theme with
   [data-theme] or a .light / .dark class on <html>. Adapt the selectors to
   the project's own dark-mode switch if it uses something else. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --lg-tint: rgb(24 28 34 / .42);
    --lg-tint-clear: rgb(255 255 255 / .04);
    --lg-tint-tinted: rgb(30 34 41 / .78);
    --lg-solid: rgb(28 32 38);
    --lg-ink: #f2f4f7;
    --lg-halo: rgb(0 0 0 / .60);
    --lg-hair: rgb(255 255 255 / .16);
    --lg-rim-hi: rgb(255 255 255 / .55);
    --lg-rim-lo: rgb(255 255 255 / .28);
    --lg-glow: rgb(255 255 255 / .08);
    --lg-shadow: rgb(0 0 0 / .55);
  }
}
:root[data-theme="dark"], :root.dark {
  --lg-tint: rgb(24 28 34 / .42);
  --lg-tint-clear: rgb(255 255 255 / .04);
  --lg-tint-tinted: rgb(30 34 41 / .78);
  --lg-solid: rgb(28 32 38);
  --lg-ink: #f2f4f7;
  --lg-halo: rgb(0 0 0 / .60);
  --lg-hair: rgb(255 255 255 / .16);
  --lg-rim-hi: rgb(255 255 255 / .55);
  --lg-rim-lo: rgb(255 255 255 / .28);
  --lg-glow: rgb(255 255 255 / .08);
  --lg-shadow: rgb(0 0 0 / .55);
}

/* --- the element ----------------------------------------------------------
   :where() keeps these at zero specificity, so a component's own position,
   radius or shadow wins. Shape classes from lg-shapes.css set size and radius
   with higher specificity, because those must match the map. */
:where(.lg) {
  position: relative;
  border-radius: 999px;
  box-shadow: 0 12px 32px -12px var(--lg-shadow), 0 2px 8px -3px var(--lg-shadow);
}
.lg {
  --lg-fill: var(--lg-tint);
  --lg-frost: var(--lg-blur);
  isolation: isolate;
}

/* --- layers ---------------------------------------------------------------- */
.lg::before,
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* refraction of the live backdrop: lg-shapes.css sets backdrop-filter: url(#lg-<shape>) here */

/* frost, tint, inner glow and rim light */
.lg::after {
  background: var(--lg-fill);
  -webkit-backdrop-filter: blur(var(--lg-frost)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-frost)) saturate(var(--lg-saturate));
  box-shadow:
    inset 1.5px 1.5px 0 -.5px var(--lg-rim-hi),
    inset -1px -1px 0 -.25px var(--lg-rim-lo),
    inset 0 0 0 .5px var(--lg-hair),
    inset 0 0 22px -6px var(--lg-glow);
  transition: background-color .35s ease;
}

/* mirror mode: a copy of the backdrop, refracted with a plain filter */
.lg > .lg-mirror {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}
.lg:has(> .lg-mirror)::before { content: none; }

/* --- variants -------------------------------------------------------------- */
.lg--clear  { --lg-fill: var(--lg-tint-clear);  --lg-frost: var(--lg-blur-clear); }
.lg--tinted { --lg-fill: var(--lg-tint-tinted); --lg-frost: var(--lg-blur-tinted); }

/* page-wide switch, like the Clear / Tinted setting in iOS 26.1:
   <html data-lg="tinted"> */
:root[data-lg="tinted"] .lg { --lg-fill: var(--lg-tint-tinted); --lg-frost: var(--lg-blur-tinted); }

/* press: the pane swells slightly on a springy curve */
.lg--press { transition: transform .45s var(--lg-spring); }
.lg--press:active { transform: scale(1.04); }

/* --- content helpers ------------------------------------------------------- */
.lg-ink { color: var(--lg-ink); }
.lg-halo { text-shadow: 0 0 8px var(--lg-halo); }
.lg-halo svg, svg.lg-halo { filter: drop-shadow(0 0 4px var(--lg-halo)); }

/* --- accessibility ---------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .lg::before { content: none; }
  .lg > .lg-mirror { display: none; }
  .lg::after {
    background: var(--lg-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .lg { --lg-fill: var(--lg-tint-tinted); --lg-frost: var(--lg-blur-tinted); }
  .lg::after { box-shadow: inset 0 0 0 1px var(--lg-ink); }
}
@media (forced-colors: active) {
  .lg::before { content: none; }
  .lg > .lg-mirror { display: none; }
  .lg::after {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid CanvasText;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lg--press, .lg::after { transition: none; }
  .lg--press:active { transform: none; }
}