/* A small, stationary glass veil under the system status bar. A zero inset
   produces zero height, so ordinary browser windows get no decorative strip. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-feather: min(24px, calc(var(--safe-top) * .45));
  --safe-glass-rgb: 248, 246, 255;
}

body:has(.night-mode) { --safe-glass-rgb: 29, 20, 48; }

/* Dialogs live in the browser's top layer; full-screen story details need
   their own veil. Both layers ignore touches and add no scrolling work. */
body::before,
body::after,
dialog[open]:has(.reference-detail)::before,
dialog[open]:has(.reference-detail)::after {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: calc(var(--safe-top) + var(--safe-feather));
  z-index: 110;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(to bottom, rgba(var(--safe-glass-rgb), .3), rgba(var(--safe-glass-rgb), .1) 65%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}

body::after,
dialog[open]:has(.reference-detail)::after {
  z-index: 111;
  background: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 82%);
}

/* Never stack two copies over a full-screen detail dialog. */
body:has(dialog[open] .reference-detail)::before,
body:has(dialog[open] .reference-detail)::after { content: none; }

@media (prefers-reduced-transparency: reduce) {
  body::before,
  dialog[open]:has(.reference-detail)::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(var(--safe-glass-rgb));
  }
  body::after,
  dialog[open]:has(.reference-detail)::after { content: none; }
}