/* Glass surfaces.
   .glass            frosted pane with a specular rim that follows the light
   .glass.liquid     + real refraction in Chromium (see js/lib/glass.js)
   [data-glass=solid] turns every pane opaque for low-power devices

   Layering inside a pane (it is its own stacking context):
     lg-lens (z -1, first child)  tint + refraction filter
     ::after (z -1, last)          inner glow and bottom caustic
     content
     ::before (z 2)                1.4px specular rim                       */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--gloss) * 0.55)) 0%, rgba(255, 255, 255, 0) 42%),
    rgba(var(--tint-rgb), var(--glass-a));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  box-shadow:
    0 1px 1px rgba(0, 20, 50, 0.06),
    0 12px 32px -8px rgba(0, 25, 60, var(--shadow-a)),
    0 36px 70px -40px rgba(0, 25, 60, calc(var(--shadow-a) * 0.9));
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    var(--light),
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.35) 22%,
    rgba(255, 255, 255, 0.06) 48%,
    rgba(255, 255, 255, 0.22) 74%,
    rgba(255, 255, 255, 0.75) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(255, 255, 255, 0.18),
    inset 0 0 22px rgba(255, 255, 255, calc(var(--gloss) * 0.2));
  background: radial-gradient(110% 55% at 50% 108%, rgba(255, 255, 255, calc(var(--gloss) * 0.35)), transparent 62%);
}

lg-lens { display: none; }

[data-glass='liquid'] .glass.liquid {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-glass='liquid'] .glass.liquid > lg-lens {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--gloss) * 0.45)) 0%, rgba(255, 255, 255, 0) 40%),
    rgba(var(--tint-rgb), calc(var(--glass-a) * 0.8));
}

[data-glass='solid'] .glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--gloss) * 0.5)) 0%, rgba(255, 255, 255, 0) 42%),
    rgba(var(--tint-rgb), 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-ink='light'][data-glass='solid'] .glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%), rgba(var(--tint-rgb), 0.95);
}

/* Variations */
.glass.thin { --glass-a: calc(var(--glass-a-base, 0.34) * 0.6); }
.glass.strong {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--gloss) * 0.5)) 0%, rgba(255, 255, 255, 0) 42%),
    rgba(var(--tint-rgb), calc(var(--glass-a) + 0.22));
}
.glass.pill { border-radius: 999px; }
.glass.flat { box-shadow: none; }

/* Inset wells: search boxes, trays */
.well {
  background: rgba(var(--ink-rgb), 0.06);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 6px rgba(0, 20, 50, 0.12), inset 0 0 0 1px rgba(var(--ink-rgb), 0.06), 0 1px 0 rgba(255, 255, 255, 0.45);
}
[data-ink='light'] .well {
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Glass button: a small liquid pane you can press */
.gbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.55em 1.05em;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  border-radius: 999px;
  color: var(--ink);
  transition: transform 0.35s var(--spring);
}
.gbtn:hover { transform: translateY(-1px) scale(1.03); }
.gbtn:active { transform: scale(0.94); }
.gbtn.active { color: var(--accent); }
[data-ink='light'] .gbtn.active { color: color-mix(in srgb, var(--accent) 60%, white); }