/* Shared glass light: decoration only; dimensions, text and controls stay intact. */
:root { --glass-cursor-x:50vw; --glass-cursor-y:20vh; --glass-fractal:none; --glass-shift-x:0px; --glass-shift-y:0px; }
.glass-cursor-light { position:fixed; inset:0; z-index:80; pointer-events:none; user-select:none; background:radial-gradient(ellipse 540px 420px at var(--glass-cursor-x) var(--glass-cursor-y),color-mix(in srgb,var(--gold,var(--accent,#c4a2ff)) 7%,transparent),transparent 70%); }
.glass-reactive { --glass-pane-x:50%; --glass-pane-y:0px; --glass-offset:0px;
  background-image:radial-gradient(ellipse 430px 290px at var(--glass-pane-x) var(--glass-pane-y),color-mix(in srgb,var(--gold,var(--accent,#c4a2ff)) 3%,transparent),transparent 76%),var(--glass-fractal),var(--glass-original-background,none);
  background-size:auto,720px 504px,auto; background-repeat:no-repeat,repeat,no-repeat;
  background-position:0 0,calc(var(--glass-shift-x) + var(--glass-offset)) var(--glass-shift-y),0 0;
  outline:1px solid color-mix(in srgb,var(--gold,var(--accent,#c4a2ff)) 20%,transparent); outline-offset:-4px;
}
/* Glass surfaces: a canvas of leaded panes behind the element's own content.
   The element becomes a stacking context so the canvas sits above its
   background and below its text; the script gives static elements a position. */
.glass-surface { isolation:isolate; }
.glass-pane-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; user-select:none; border-radius:inherit; }
/* The hero keeps a clear reading surface: the glass is strong at its edges and
   only a breath of it lies behind the wordmark. */
.home-hero > .glass-pane-canvas { inset:auto; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 13%,rgba(0,0,0,.18) 27%,rgba(0,0,0,.18) 73%,#000 87%,#000 100%); mask-image:linear-gradient(90deg,#000 0,#000 13%,rgba(0,0,0,.18) 27%,rgba(0,0,0,.18) 73%,#000 87%,#000 100%); }
.cta.glass-surface, .devad-support__launcher.glass-surface { overflow:hidden; }
.cta.glass-surface { text-shadow:0 1px 0 #ffffff59; }
@media (prefers-reduced-motion:reduce),(pointer:coarse) { .glass-cursor-light { display:none; } .glass-reactive { --glass-shift-x:0px; --glass-shift-y:0px; } }
@media (prefers-contrast:more),(forced-colors:active) { .glass-cursor-light, .glass-pane-canvas { display:none; } .glass-reactive { background-image:var(--glass-original-background,none); outline:none; } }

/* The window: the page's own background. The script adds the class; without it the page keeps its solid ground. */
html.glass-window-on { background:var(--surface-0,#0d0914); }
html.glass-window-on body { background:transparent; }
/* The window carries the pointer's light behind the page; a second one laid OVER the text washed the theme out. */
html.glass-window-on .glass-cursor-light { display:none; }
html.glass-window-on .hero-glass-edge, html.glass-window-on .hero-glass-light { visibility:hidden; }
html.glass-window-on .home .home-intro { --hero-intro-pad:18px; border-radius:28px; padding:var(--hero-intro-pad) 12px 22px; }
/* THE SCRIM SITS UNDER THE WORDS, NOT UNDER THE MARK (2026-09-23). This plate was the intro's own
   background, so the mark at the top of the intro sat on a disc of --surface-0 while the glass it
   belongs to was hidden behind it. The plate is a pseudo-element now, starting below the mark: the
   wordmark, the tagline and the lead keep their reading surface, and the mark stands in the window.
   IT STARTS WHERE THE MARK ENDS AT EVERY WIDTH (2026-09-23). Its top was a hard-coded 84px - right for
   neither the 64px mark a wide screen gets (18 + 64 + 4 = 86) nor the 52px mark a phone gets
   (18 + 52 + 9 = 79). It is the intro's own padding plus the mark's size and gap now, read from the
   properties site.css sizes .hero-brand-mark by (--hero-mark-size, --hero-mark-gap on .home-intro), so
   the plate follows the mark; web/test_phone_reading.py measures it at 320, 560 and 1280. */
html.glass-window-on .home .home-intro::before { content:''; position:absolute; inset:calc(var(--hero-intro-pad,18px) + var(--hero-mark-size,64px) + var(--hero-mark-gap,4px)) 0 0; z-index:-1; pointer-events:none; border-radius:28px; background:radial-gradient(closest-side, color-mix(in srgb, var(--surface-0,#0d0914) 78%, transparent), color-mix(in srgb, var(--surface-0,#0d0914) 52%, transparent) 70%, transparent); }
/* THE MARK IS A GLASS SURFACE (2026-09-23): its canvas is the light behind its panes, and the mark's
   own SVG - translucent panes, sheen, needle, eye and lead - stays visible above it, so the living
   set shines THROUGH the coloured glass rather than replacing the drawing. */
.priest-mark-glass > .glass-pane-canvas { opacity:.72; }
.glass-window { position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; user-select:none; }
@media (prefers-contrast:more),(forced-colors:active) { .glass-window { display:none; } html.glass-window-on body { background:var(--surface-0,#0d0914); } }

/* 2026-09-19 · THE HOST OF A GLASS CANVAS IS POSITIONED HERE, WITH NO SPECIFICITY. The script used to pin
   `position:relative` inline on any host it read as static; on a slow phone load it read the fixed support
   button before its stylesheet arrived and the button fell to the foot of the page. Any rule that positions
   a host (fixed, absolute, sticky) beats :where(). */
:where(.glass-surface){position:relative}
/* A LABEL ON GLASS HAS A PLATE. Jewel panes in six colours behind 13px text left every glass button
   unreadable in the many-coloured themes. The label sits on a plate of the theme's own ground; the glass is
   whole at both ends of the button and shows through the plate everywhere else. Text takes the theme's ink. */
.cta.glass-surface::after, .devad-support__launcher.glass-surface::after,
.devad-support__header.glass-surface::after, .music-dock__head.glass-surface::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, transparent 0, var(--glass-plate) 16%, var(--glass-plate) 84%, transparent 100%);
  --glass-plate:color-mix(in srgb,var(--surface-0,#0d0914) 80%,transparent);
}
.devad-support__launcher.glass-surface::after { inset:4px; border-radius:12px 12px 2px 12px; background:var(--glass-plate); }
.cta.glass-surface, .music-dock__head.glass-surface { color:var(--text-1,#f4eee2); text-shadow:none; }
.music-dock__head.glass-surface .music-dock__title { text-shadow:none; }
/* SCRIBE'S TOOLBAR HAS TWO CHILDREN WITH NO GROUND OF THEIR OWN (2026-09-19): every button beside them
   already has its own opaque fill (var(--surface-2)); the title field and the save status are plain text
   on whatever is behind them, which is the toolbar's shared background - moving glass once the toolbar
   opts into it (app only: [data-glass-strip] on <header class="scribe-toolbar">). A background swap only,
   the same colour their sibling buttons already use; no layout change. */
.scribe-toolbar.glass-surface .scribe-title-input { background:var(--surface-2,rgba(10,8,14,.55)); }
.scribe-toolbar.glass-surface .scribe-status:not(:empty) { background:var(--surface-2,rgba(10,8,14,.55)); }
@media (prefers-contrast:more),(forced-colors:active) { .glass-surface::after { display:none; } }