/* Shared optical material stack. */
.glass-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.glass,
.glass-surface {
  --glass-surface-tint: var(--glass-tint-regular);
  --glass-surface-blur: var(--glass-blur-regular);
  --glass-surface-shadow: var(--glass-shadow-panel);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(142deg, rgba(255, 255, 255, .09), transparent 24%, transparent 74%, rgba(255, 255, 255, .025)),
    var(--glass-surface-tint);
  box-shadow: var(--glass-surface-shadow), var(--glass-inner-edge);
  backdrop-filter: blur(var(--glass-surface-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-surface-blur)) saturate(var(--glass-saturation));
}

.glass::before,
.glass-surface::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, var(--glass-specular), transparent 12%, transparent 70%, var(--reflection-cool)),
    radial-gradient(75% 55% at 8% -5%, var(--reflection-warm), transparent 68%);
  opacity: .48;
  mask: linear-gradient(#000, transparent 42%);
  -webkit-mask: linear-gradient(#000, transparent 42%);
}

.glass::after,
.glass-surface::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -20%;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--material-reflection-opacity, 0);
  background: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, .15), transparent 68%);
  transition: opacity var(--motion-material) var(--ease-material);
}

.glass > *,
.glass-surface > * {
  position: relative;
  z-index: 1;
}

.glass--clear {
  --glass-surface-tint: var(--glass-tint-clear);
  --glass-surface-blur: var(--glass-blur-clear);
  --glass-surface-shadow: var(--glass-shadow-sm);
}

.glass--regular,
.glass-light {
  --glass-surface-tint: var(--glass-tint-regular);
  --glass-surface-blur: var(--glass-blur-regular);
  --glass-surface-shadow: var(--glass-shadow-sm);
}

.glass--dense,
.glass-dense {
  --glass-surface-tint: var(--glass-tint-dense);
  --glass-surface-blur: var(--glass-blur-dense);
}

.glass--strong,
.glass-accent {
  --glass-surface-tint: var(--glass-tint-strong);
  --glass-surface-blur: var(--glass-blur-dense);
}

.glass--elevated {
  --glass-surface-tint: var(--glass-tint-elevated);
  --glass-surface-blur: var(--glass-blur-dense);
  --glass-surface-shadow: var(--glass-shadow-elevated);
  --material-reflection-opacity: .36;
}

.glass--elevated::after {
  filter: url("#glass-distortion-soft");
}

@media (pointer: coarse) {
  .glass--elevated::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint-clear: var(--glass-tint-solid);
    --glass-tint-regular: var(--glass-tint-solid);
    --glass-tint-dense: var(--glass-tint-solid);
    --glass-tint-strong: var(--glass-tint-solid);
    --glass-tint-elevated: var(--glass-tint-solid);
  }
  .glass,
  .glass-surface { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass::after,
  .glass-surface::after { display: none; }
}

@media (prefers-contrast: more) {
  .glass,
  .glass-surface { border-width: 2px; background: var(--glass-tint-solid); }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass,
  .glass-surface { background: var(--glass-tint-solid); }
  .glass::after,
  .glass-surface::after { display: none; }
}

@supports (-moz-appearance: none) {
  .glass,
  .glass-surface {
    background: var(--glass-tint-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass::after,
  .glass-surface::after { display: none; }
}