/* ---------------------------------------------------------------
   Liquid glass material. Tune per theme with the custom properties:
     --glass-tint     fill over the backdrop
     --glass-rim      specular rim strength (0-1)
     --glass-shadow   drop shadow
     --glass-filter   colour treatment applied after refraction
   --------------------------------------------------------------- */
.glass {
  --glass-tint: rgba(255, 255, 255, 0.14);
  --glass-rim: 0.9;
  --glass-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.35);
  --glass-filter: saturate(1.9) brightness(1.06);
  position: relative;
  isolation: isolate;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(18px) saturate(1.9);
  backdrop-filter: blur(18px) saturate(1.9);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, calc(0.75 * var(--glass-rim))),
    inset 0 -1px 0.5px rgba(255, 255, 255, calc(0.25 * var(--glass-rim))),
    inset 0 0 0 0.5px rgba(255, 255, 255, calc(0.35 * var(--glass-rim))),
    inset 0 0 22px -6px rgba(255, 255, 255, calc(0.35 * var(--glass-rim))),
    var(--glass-shadow);
  transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.4), box-shadow 0.3s ease;
}

/* Specular rim: bright where light hits (top-left), faint opposite. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, calc(0.95 * var(--glass-rim))) 0%,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, calc(0.55 * var(--glass-rim))) 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);
  pointer-events: none;
}

/* Pointer highlight. */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -40%),
    rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 65%);
  opacity: var(--glow, 0);
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Pressable glass swells a little, like iOS controls. */
.glass.is-press { cursor: pointer; }
.glass.is-press:hover { transform: scale(1.035); }
.glass.is-press:active { transform: scale(0.97); transition-duration: 0.12s; }

/* Light theme: glass over pale paper needs more body to read. */
.glass.is-light {
  --glass-tint: rgba(255, 255, 255, 0.42);
  --glass-shadow: 0 1px 1px rgba(28, 26, 23, 0.04), 0 14px 40px -16px rgba(28, 26, 23, 0.28);
  --glass-filter: saturate(1.6) brightness(1.04);
}
.glass.is-dark {
  --glass-tint: rgba(20, 22, 26, 0.28);
  --glass-rim: 0.7;
}

/* Browsers without backdrop-filter: a solid, still-legible panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(250, 249, 246, 0.92); }
  .glass.is-dark { background: rgba(20, 22, 26, 0.9); }
}

/* --- Liquid tab bar droplet (LiquidGlass.tabs) ------------------ */
.lg-tabs { position: relative; display: flex; align-items: center; }
.lg-tabs > a { position: relative; z-index: 1; }
.lg-drop {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.8),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.25),
    inset 0 0 12px -2px rgba(255, 255, 255, 0.45),
    0 4px 14px -6px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.is-light .lg-drop, .lg-tabs.is-light .lg-drop {
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 1),
    0 0 0 0.5px rgba(28, 26, 23, 0.06),
    0 4px 14px -6px rgba(28, 26, 23, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .glass, .glass.is-press:hover { transition: none; transform: none; }
}