/* Narrative surfaces only. Keep chart styles, theme tokens and layout metrics
   in style.css unchanged. Opt in with data-glass and an aria-hidden pane. */
[data-glass] {
  --glass-radius: 22px;
  --glass-fill: rgba(186, 217, 250, 0.045);
  --glass-light: rgba(160, 210, 255, 0.09);
  --glass-edge: rgba(225, 242, 255, 0.42);
  --glass-edge-low: rgba(159, 200, 241, 0.12);
  --glass-shade: rgba(0, 7, 20, 0.2);
  position: relative;
  isolation: isolate;
  border-radius: var(--glass-radius);
}

/* Keep text fully opaque and links above the non-interactive material. */
[data-glass] > :not(.glass-pane) { position: relative; z-index: 1; }

.glass-pane {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 6% 0%, var(--glass-light), transparent 62%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 38% 74%, rgba(190, 226, 255, 0.025)),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
  backdrop-filter: blur(6px) saturate(135%);
  box-shadow:
    inset 0 0 0 1px var(--glass-edge-low),
    inset 0 2px 1px -1px rgba(243, 250, 255, 0.32),
    inset 0 -2px 1px -1px rgba(207, 233, 255, 0.16),
    0 8px 22px -15px var(--glass-shade);
}

/* A masked one-pixel reflection: sharp at every corner, no blurred halo. */
.glass-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg,
    rgba(245, 251, 255, 0.78) 0%,
    var(--glass-edge) 12%,
    var(--glass-edge-low) 38%,
    rgba(200, 229, 255, 0.3) 58%,
    var(--glass-edge-low) 76%,
    rgba(237, 248, 255, 0.62) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  transition: opacity 180ms ease;
}

/* Opt-ins override existing opaque card fills without touching shared tokens. */
.section [data-glass] {
  background: transparent;
  border-color: transparent;
}

/* The frontier was originally masked by these cards. Preserve that footprint
   below the glass so its linework is never blurred, tinted or newly exposed. */
#about [data-glass]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--surface);
}

/* Glass only on the featured paper's narrative header. The opaque paper body,
   disclosures and all research figures retain their original rendering. */
#research .paper { border-radius: 22px; }
.paper__head[data-glass] { border-radius: 21px 21px 0 0; }
.paper__head[data-glass]::before { display: none; }

/* Workflow columns have no side padding. Place their surface inside the
   existing grid gutters instead of changing text or canvas dimensions. */
.build-group[data-glass] > .glass-pane { inset: -2px -8px 0; }

/* These grids keep their exact one-pixel gap and box size. */
#toolkit .kit,
#toolkit .stats--achievements {
  background: transparent;
  border-color: transparent;
  border-radius: 22px;
}
/* Retain the kit's original chart mask; the neural backdrop fades behind it. */
#toolkit .kit { background: var(--surface); }
.kit__row[data-glass] { --glass-radius: 18px; }
.kit__row[data-glass] > .glass-pane { inset: 2px 0; }
.kit__row[data-glass]:first-child { border-radius: 21px 21px 18px 18px; }
.kit__row[data-glass]:last-child { border-radius: 18px 18px 21px 21px; }
.achievement[data-glass] { --glass-radius: 20px; }
.achievement[data-glass] > .glass-pane { inset: 0 3px; }

@media (hover: hover) and (pointer: fine) {
  [data-glass]:hover > .glass-pane::after { opacity: 1; }
}
[data-glass]:focus-within > .glass-pane::after { opacity: 1; }

:root[data-theme="light"] [data-glass] {
  --glass-fill: rgba(255, 255, 255, 0.22);
  --glass-light: rgba(135, 179, 217, 0.08);
  --glass-edge: rgba(64, 104, 142, 0.32);
  --glass-edge-low: rgba(48, 86, 124, 0.22);
  --glass-shade: rgba(30, 61, 91, 0.17);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) [data-glass] {
    --glass-fill: rgba(255, 255, 255, 0.22);
    --glass-light: rgba(135, 179, 217, 0.08);
    --glass-edge: rgba(64, 104, 142, 0.32);
    --glass-edge-low: rgba(48, 86, 124, 0.22);
    --glass-shade: rgba(30, 61, 91, 0.17);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-pane { background-color: var(--surface); }
}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass-pane::after {
    padding: 0;
    background: none;
    border: 1px solid var(--glass-edge);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-pane {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-pane::after { transition: none; }
}

@media (forced-colors: active) {
  .glass-pane {
    background: Canvas;
    outline: 1px solid CanvasText;
    outline-offset: -1px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px CanvasText;
  }
  .glass-pane::after { display: none; }
}