/*
  render-spatial-glass.css — STUDENT sample skin: Spatial Glass
  ===========================================================================
  Owner ruling 2026-08-23: the Primer/skeleton is the BONES ONLY — it says where
  containers live so nothing overflows the screen. It does NOT decide how the page
  renders. Look and feel, including construction (borders, cuts, glass, grain,
  glow, animation), belongs to the SKIN.

  This file is a proof of that: it changes the look substantially and requires
  ZERO Primer changes. The precedent already shipped — render-fight-night.css
  already uses clip-path, @font-face, ::before/content and filter, and
  render-executive-blue.css already uses @keyframes + animation.

  Design source: six-terminals.html §s6 (spatial glass) — heavy blur+saturate, soft radius, inset top highlight.
  Adapted from the owner's own reference file, not invented.

  Token law (D-S07-NS-02 / D-S07-TOKEN-01/-02): --theme-* prefix only. Complete
  assignment (D-TPL-TOK-02) — every token the greyscale reference assigns is
  assigned here. Selector coverage matches render-fight-night.css 1:1 so this skin
  is never partial (D-S07-SKIN-02).

  STATUS: AUTHORED SAMPLE, pending owner approval. Colour values are authored for
  this design, not measured from a legacy source — flagged per the sourcing rule.
  ===========================================================================
*/

:root[data-theme="spatial-glass"] {
  --theme-bg-canvas: #0E1116;
  --theme-bg-surface: rgba(255, 255, 255, 0.10);
  --theme-bg-frosted: rgba(255, 255, 255, 0.14);
  --theme-bg-card: rgba(255, 255, 255, 0.14);
  --theme-x-bg-sunken: rgba(0, 0, 0, 0.25);
  --theme-border-inactive: rgba(255, 255, 255, 0.18);
  --theme-border-active: rgba(255, 255, 255, 0.55);

  --theme-text-main: #FFFFFF;
  --theme-x-text-secondary: rgba(255, 255, 255, 0.78);
  --theme-text-muted: rgba(255, 255, 255, 0.55);
  --theme-x-text-inverse: #0E1116;
  --theme-x-text-disabled: rgba(255, 255, 255, 0.32);

  --theme-accent-primary: #7FB2FF;
  --theme-accent-secondary: #A98CFF;
  --theme-x-accent-hover: #A8CCFF;
  --theme-x-accent-active: #5A93E8;
  --theme-x-accent-disabled: rgba(127, 178, 255, 0.25);
  --theme-x-accent-text: #0E1116;
  --theme-x-focus-ring: #A8CCFF;

  --theme-state-healthy: #6FD08C;
  --theme-state-warning: #F5C065;
  --theme-state-error: #FF7A7A;
  --theme-x-state-info: #7FB2FF;

  --theme-x-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.25);
  --theme-x-elevation-2: 0 26px 60px rgba(0, 0, 0, 0.5);
  --theme-x-elevation-3: 0 0 40px rgba(127, 178, 255, 0.35);
  --theme-accent-glow: 0 0 20px rgba(127, 178, 255, 0.45);
  --theme-accent-glow-secondary: 0 0 26px rgba(169, 140, 255, 0.35);
  --theme-x-glass-tint: rgba(14, 17, 22, 0.55);
  --theme-backdrop-blur: 28px;

  --theme-x-font-family-base: "Inter", system-ui, -apple-system, sans-serif;
  --theme-x-font-size-sm: 0.875rem;
  --theme-x-font-size-base: 1rem;
  --theme-x-font-size-lg: 1.25rem;
  --theme-x-font-size-xl: 1.75rem;
  --theme-x-line-height-base: 1.5;
  --theme-x-space-unit: 0.5rem;
}

:root[data-theme="spatial-glass"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
  font-family: var(--theme-x-font-family-base);
}

:root[data-theme="spatial-glass"] a { color: var(--theme-accent-primary); }
:root[data-theme="spatial-glass"] p, :root[data-theme="spatial-glass"] li { color: var(--theme-x-text-secondary); }
:root[data-theme="spatial-glass"] .bu-brick { color: var(--theme-x-text-secondary); }

:root[data-theme="spatial-glass"] .bu-rail {
  background-color: var(--theme-x-bg-sunken);
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="spatial-glass"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}
:root[data-theme="spatial-glass"] .bu-soffit a { color: var(--theme-text-muted); }
:root[data-theme="spatial-glass"] .bu-soffit a:hover { color: var(--theme-text-main); }

:root[data-theme="spatial-glass"] .bu-btn {
  background: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}
:root[data-theme="spatial-glass"] .bu-btn:hover {
  background: var(--theme-x-accent-hover);
  border-color: var(--theme-x-accent-hover);
  box-shadow: var(--theme-accent-glow);
}
:root[data-theme="spatial-glass"] .bu-btn:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }
:root[data-theme="spatial-glass"] .bu-btn:disabled {
  background: var(--theme-x-accent-disabled);
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="spatial-glass"] .bu-btn-secondary {
  background: transparent;
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}
:root[data-theme="spatial-glass"] .bu-btn-secondary:hover { border-color: var(--theme-border-active); color: var(--theme-accent-primary); }
:root[data-theme="spatial-glass"] .bu-btn-secondary:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }
:root[data-theme="spatial-glass"] .bu-btn-secondary.is-active {
  border-color: var(--theme-border-active);
  color: var(--theme-x-accent-text);
  background: var(--theme-accent-primary);
}

:root[data-theme="spatial-glass"] .bu-control {
  background: var(--theme-bg-card);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}
:root[data-theme="spatial-glass"] .bu-control:hover { border-color: var(--theme-border-active); }
:root[data-theme="spatial-glass"] .bu-control:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }

:root[data-theme="spatial-glass"] .bu-gate { background: var(--theme-x-glass-tint); }

:root[data-theme="spatial-glass"] .bu-gauge svg .bg { stroke: var(--theme-border-inactive); }
:root[data-theme="spatial-glass"] .bu-gauge svg .fg { stroke: var(--theme-accent-primary); }
:root[data-theme="spatial-glass"] .bu-progress-track { background: var(--theme-x-bg-sunken); }
:root[data-theme="spatial-glass"] .bu-badge-tag {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="spatial-glass"] .bu-status-dot { background: var(--theme-text-muted); }
:root[data-theme="spatial-glass"] .bu-status-dot.is-healthy { background: var(--theme-state-healthy); }
:root[data-theme="spatial-glass"] .bu-status-dot.is-active { background: var(--theme-state-healthy); }
:root[data-theme="spatial-glass"] .bu-status-dot.is-warning { background: var(--theme-state-warning); }
:root[data-theme="spatial-glass"] .bu-status-dot.is-alert { background: var(--theme-state-warning); }
:root[data-theme="spatial-glass"] .bu-status-dot.is-error { background: var(--theme-state-error); }
:root[data-theme="spatial-glass"] .bu-status-dot.is-neutral { background: var(--theme-text-muted); }

/* --- THE CONSTRUCTION: real glass ------------------------------------------
   blur + saturate is what separates glass from "a translucent rectangle": the
   saturate boost makes whatever sits behind the panel bloom through it. The
   1px inset top highlight is the lit edge that makes it read as a physical
   pane. Ported from six-terminals.html §s6.

   The 26px radius is deliberate and legal: the Primer's 5px cap is an
   accessibility rule about interactive controls ("no pill buttons"), and its
   own header exempts panels/cards. Buttons below stay inside the cap. */
:root[data-theme="spatial-glass"] .bu-panel {
  position: relative;
  border-radius: 26px;
  background: var(--theme-bg-surface);
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur)) saturate(190%);
  backdrop-filter: blur(var(--theme-backdrop-blur)) saturate(190%);
  border: 1px solid var(--theme-border-inactive);
  box-shadow: var(--theme-x-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--theme-text-main);
}

:root[data-theme="spatial-glass"] .bu-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 42%);
}

:root[data-theme="spatial-glass"] h1, :root[data-theme="spatial-glass"] h2, :root[data-theme="spatial-glass"] h3, :root[data-theme="spatial-glass"] h4, :root[data-theme="spatial-glass"] h5, :root[data-theme="spatial-glass"] h6 {
  color: var(--theme-text-main);
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Controls are glass too, but keep the interactive radius cap. */
:root[data-theme="spatial-glass"] .bu-control, :root[data-theme="spatial-glass"] .bu-btn-secondary {
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

/* ===========================================================================
   DEPTH — the parallaxing atmosphere behind the panels
   ===========================================================================
   Owner 2026-08-23: the skins read flat because the panels had nothing to float
   in front of. The reference (panel-theme-kit.html) always had this: a `.sky`
   of stacked radial pools, drifting motes, and a mesh behind the panels.

   The parallax is pure CSS. `background-attachment: fixed` anchors a layer to
   the viewport so it does NOT move on scroll, while a `scroll` layer travels
   with the content. Stack both and they separate as the page moves —
   differential motion is parallax. No JS, no scroll listener, nothing to jank.

   Far to near: colour pools (fixed) -> fine motes (fixed) -> coarse motes
   (scroll) -> vignette (fixed). The coarse layer moving against the fixed ones
   is what the eye actually reads as depth.

   Mobile note: several mobile browsers ignore `background-attachment: fixed`
   and will render this static. That degrades to a still backdrop — no parallax,
   nothing broken — which is the right floor for a scroll effect.
   =========================================================================== */
:root[data-theme="spatial-glass"] body {
  background-color: #0E1116;
  background-image:
    /* 4. vignette — burns the edges so the centre reads deeper */
    radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(0,0,0, 0.55) 100%),
    /* 3. NEAR motes — travel with the content */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='rgb(255,255,255)' opacity='0.55'><circle cx='44.2' cy='71.4' r='1.5'/><circle cx='159.8' cy='30.6' r='1.5'/><circle cx='268.6' cy='105.4' r='1.5'/><circle cx='95.2' cy='197.2' r='1.5'/><circle cx='210.8' cy='244.8' r='1.5'/><circle cx='309.4' cy='214.2' r='1.5'/><circle cx='23.8' cy='285.6' r='1.5'/><circle cx='187.0' cy='319.6' r='1.5'/><circle cx='125.8' cy='139.4' r='1.5'/><circle cx='244.8' cy='57.8' r='1.5'/></g></svg>"),
    /* 2. FAR motes — pinned to the viewport */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'><g fill='rgb(255,255,255)' opacity='0.55'><circle cx='24.7' cy='39.9' r='0.9'/><circle cx='89.3' cy='17.1' r='0.9'/><circle cx='150.1' cy='58.9' r='0.9'/><circle cx='53.2' cy='110.2' r='0.9'/><circle cx='117.8' cy='136.8' r='0.9'/><circle cx='172.9' cy='119.7' r='0.9'/><circle cx='13.3' cy='159.6' r='0.9'/><circle cx='104.5' cy='178.6' r='0.9'/></g></svg>"),
    /* 1. atmosphere: pools of light at infinity */
    radial-gradient(120% 80% at 50% -12%, #243247 0%, transparent 56%),
    radial-gradient(80% 60% at 6% 100%, #161C26 0%, transparent 62%),
    radial-gradient(70% 55% at 94% 76%, #161C26 0%, transparent 64%);
  background-attachment: fixed, scroll, fixed, fixed, fixed, fixed;
  background-size: cover, 340px 340px, 190px 190px, cover, cover, cover;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  animation: bu-atmosphere-drift 90s linear infinite;
}

/* Only the near mote layer drifts; everything else is anchored. Animating just
   one layer's position keeps the parallax reading as depth rather than as the
   whole backdrop sliding. */
@keyframes bu-atmosphere-drift {
  to {
    background-position:
      center, 340px 340px, 0 0, center, center, center;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="spatial-glass"] body { animation: none; }
}

/* The app's own preference, honoured separately from the OS query. */
:root[data-reduced-motion="true"][data-theme="spatial-glass"] body {
  animation: none;
}