/*
 * xircuit-glass.css — frosted surfaces.
 *
 * Replaces xircuit-depth.css. The important difference from that file is
 * opacity: it used rgba(255,255,255,.72), which is milky rather than glassy.
 * Real glass is mostly transparent and lets the blur do the work — which is
 * why this only looks right over the nebula ground.
 *
 *   .x-glass       — the standard surface
 *   .x-glass-hi    — raised surface (app bar, tab bar, sticky headers)
 *   .x-glass-quiet — recessed surface (inset panels, table headers)
 *   .x-elevated    — shadow only, no blur; for opaque cards over glass
 *   .x-lift        — hover response for interactive surfaces
 *   .x-flat        — opt OUT of the automatic glass below
 *
 * ── Automatic glass for page content ──────────────────────────────────────
 * `.x-content .mud-paper` is listed alongside `.x-glass` in every rule below,
 * so MudPaper/MudCard get the identical material without tagging ~348 call
 * sites — and there is exactly ONE definition of that material, so the
 * hand-tagged surfaces and the inherited ones cannot drift apart.
 *
 * The scoping is STRUCTURAL, deliberately not an exclusion list. MainLayout
 * renders MudPopoverProvider/MudDialogProvider outside .x-shell, and page
 * content inside .x-content — so every overlay MudBlazor portals (menu,
 * select, autocomplete, picker, tooltip, snackbar, dialog) is already outside
 * this selector and keeps a solid background, which is what keeps a dropdown
 * legible over an already-translucent card. A :not(.mud-popover):not(...)
 * chain would need editing every time MudBlazor adds an overlay type; this
 * does not. Specificity (0,2,0) beats .mud-paper (0,1,0) — no !important.
 */

.x-glass,
.x-glass-hi,
.x-glass-quiet,
.x-content .mud-paper:not(.x-flat) {
  position: relative;
  border-radius: var(--r);
  /* Two layers: the white sheen gradient ON TOP of the base-colour floor. The
     floor is what keeps a surface legible when the ground behind it is a bright
     patch of organisation wash — see --glass-floor in xircuit-tokens.css. Drop
     it and the quiet inks measure 1.25:1. */
  background:
    linear-gradient(148deg,
      var(--glass-a) 0%, var(--glass-b) 62%, var(--glass-a) 100%),
    var(--glass-floor);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-dim);
  isolation: isolate;
}

/* The lit edge. A masked gradient border paints only the 1px ring: bright at
   the top-left, fading to nothing by the bottom-right, as if lit from above.
   This edge is what separates glass from a translucent rectangle. */
.x-glass::before,
.x-glass-hi::before,
.x-glass-quiet::before,
.x-content .mud-paper:not(.x-flat)::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(148deg,
    var(--glass-edge) 0%,
    var(--glass-edge-dim) 42%,
    transparent 60%,
    var(--glass-edge-dim) 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, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Specular sheen across the top third. */
.x-glass::after,
.x-glass-hi::after,
.x-content .mud-paper:not(.x-flat)::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent);
  pointer-events: none;
  opacity: .8;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  .x-glass::after, .x-glass-hi::after,
  .x-content .mud-paper:not(.x-flat)::after { opacity: .5; }
}
:root[data-theme="dark"] .x-glass::after,
:root[data-theme="dark"] .x-glass-hi::after,
:root[data-theme="dark"] .x-content .mud-paper:not(.x-flat)::after { opacity: .5; }
:root[data-theme="light"] .x-glass::after,
:root[data-theme="light"] .x-glass-hi::after,
:root[data-theme="light"] .x-content .mud-paper:not(.x-flat)::after { opacity: .8; }

/* Content must sit above both pseudo-elements. */
.x-glass > *,
.x-glass-hi > *,
.x-glass-quiet > *,
.x-content .mud-paper:not(.x-flat) > * { position: relative; z-index: 2; }

.x-glass-hi {
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--glass-a) 140%, transparent) 0%,
    var(--glass-a) 100%);
}

.x-glass-quiet {
  background: linear-gradient(148deg, var(--glass-b) 0%, transparent 70%);
  box-shadow: inset 0 1px 0 0 var(--glass-edge-dim);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.x-elevated { box-shadow: var(--glass-shadow); }

.x-lift {
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.x-lift:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--glass-shadow),
    0 22px 48px -18px rgba(6, 26, 34, .28),
    inset 0 1px 0 0 var(--glass-edge);
}

@media (prefers-reduced-motion: reduce) {
  .x-lift, .x-lift:hover { transition: none; transform: none; }
}

/*
 * Nested content surfaces. Glass over glass composites into something muddier and
 * MORE opaque than either layer — the opposite of the intent — and pays a second
 * backdrop-filter for the privilege. The outermost surface carries the material;
 * anything nested inside it goes transparent and simply sits on top.
 *
 * The pseudo-elements must go too, or the inner box keeps a lit edge and a sheen
 * that no longer describe a real surface.
 */
.x-content .mud-paper .mud-paper {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.x-content .mud-paper .mud-paper::before,
.x-content .mud-paper .mud-paper::after { content: none; }

/* Fallback: without backdrop-filter the surfaces would be near-invisible
   against the ground, so raise the fill to keep text legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .x-glass, .x-glass-hi, .x-glass-quiet,
  .x-content .mud-paper:not(.x-flat) {
    background: color-mix(in oklab, var(--base) 78%, transparent);
  }
  /* Nested surfaces stay transparent even here — the outer fill is already opaque
     enough to carry the text, and stacking two 78% fills would read as solid. */
  .x-content .mud-paper .mud-paper { background: transparent; }
}