/* ==========================================================================
   The material.

   Two decisions drive everything here:

   1. backdrop-filter is applied ONLY to surfaces that overlap moving content —
      the rail, the topbar, a sticky table head, popovers. A card sitting on a
      static backdrop looks identical with blur and without it, and costs an
      order of magnitude more to paint. Content cards get a pre-composited
      translucent fill instead.
   2. Glass never nests. A .glass inside a .glass doubles the rim and reads as
      plastic; nested sections use .well, which is subtractive.
   ========================================================================== */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background-color: var(--glass-2);
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,0.055) 0%,
      rgba(255,255,255,0.012) 34%,
      rgba(255,255,255,0.000) 62%),
    linear-gradient(200deg,
      rgba(255,255,255,0.030) 0%,
      rgba(255,255,255,0.000) 48%);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--stroke);
}

/* The specular rim: a 1px ring filled with a gradient. A gradient border with
   a radius is only achievable by painting the gradient across the whole box
   and masking out everything but the padding band. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: var(--specular);
  -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,
                linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}

/* Interior sheen — light pooling inside the lens. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--sheen);
  pointer-events: none;
  opacity: .9;
}

.glass > * { position: relative; z-index: 2; }

/* Elevation variants ----------------------------------------------------- */

.glass--1 {
  background-color: var(--glass-1);
  border-radius: 0;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--stroke);
  backdrop-filter: blur(var(--blur-1)) saturate(var(--sat-1))
                   brightness(var(--bdf-brightness));
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(var(--sat-1))
                   brightness(var(--bdf-brightness));
}
.glass--1::before { background: var(--specular-soft); }

.glass--2 { background-color: var(--glass-2); }

.glass--3 {
  background-color: var(--glass-3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--stroke-strong);
  backdrop-filter: blur(var(--blur-3)) saturate(var(--sat-3));
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--sat-3));
}

.glass--4 {
  background-color: var(--glass-4);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4), inset 0 0 0 1px var(--stroke-strong);
  backdrop-filter: blur(var(--blur-4)) saturate(var(--sat-4));
  -webkit-backdrop-filter: blur(var(--blur-4)) saturate(var(--sat-4));
}

/* A sub-panel inside a card. Subtractive, so depth still reads. */
.well {
  background: var(--glass-inset);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--stroke), inset 0 -1px 0 var(--stroke-inset);
  padding: var(--sp-4);
}

.glass--interactive {
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.glass--interactive::before { opacity: .82; }
@media (hover: hover) {
  .glass--interactive:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--stroke-strong);
  }
  .glass--interactive:hover::before { opacity: 1; }
}
.glass--interactive:active { transform: translate3d(0, 0, 0); }

/* ==========================================================================
   Fallbacks. Each of these is a real device, not a hypothetical.
   ========================================================================== */

/* No backdrop-filter: go opaque rather than let text drown. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass--1, .glass--3, .glass--4 { background-color: var(--glass-2-solid); }
  :root { --grain-opacity: 0; }
}

/* The user asked their OS for less transparency. Honour it literally. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--1, .glass--2, .glass--3, .glass--4 {
    background-color: var(--glass-2-solid);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass::after { opacity: 0; }
  .glass::before { background: var(--stroke-strong); }
  #aurora { display: none; }
}

@media (forced-colors: active) {
  .glass, .glass--1, .glass--2, .glass--3, .glass--4 {
    background: Canvas;
    border: 1px solid CanvasText;
    backdrop-filter: none;
    box-shadow: none;
  }
  .glass::before, .glass::after { content: none; }
}