/*
  render-telemetry-hud.css — STUDENT sample skin: Telemetry HUD
  ===========================================================================
  DESIGN DIRECTION (owner, 2026-08-23): the LitRPG / isekai "game system" look —
  "somebody gets reincarnated with a game system or teleported to a new world
  with a game system that monitors their level up. This is basically the closest
  to real life we're gonna get to that, because I want that AR ideology over it."

  That genre has real conventions, and this skin leans on them on purpose:
    · the panel is an OVERLAY on the world, never a document element
    · frames are drawn, partial and bracketed — not closed rectangles
    · system voice is small, wide-tracked, uppercase
    · nothing is fully opaque

  Source: six-terminals.html §03 "brackets, negative space" — the design the owner picked.

  Pure Render layer — no Primer change (owner ruling R-0823-01: the skeleton is
  bones only; construction belongs to the skin).

  Token law (D-S07-NS-02): --theme-* only. Complete assignment (D-TPL-TOK-02).
  Selector coverage matches render-fight-night.css 1:1 (D-S07-SKIN-02).
  STATUS: sample, pending owner approval.
  ===========================================================================
*/

:root[data-theme="telemetry-hud"] {
  --theme-bg-canvas: #0A0603;
  --theme-bg-surface: rgba(255, 154, 46, 0.04);
  --theme-bg-frosted: rgba(255, 154, 46, 0.06);
  --theme-bg-card: rgba(255, 154, 46, 0.08);
  --theme-x-bg-sunken: rgba(0, 0, 0, 0.4);
  --theme-border-inactive: rgba(255, 154, 46, 0.32);
  --theme-border-active: #FF9A2E;

  --theme-text-main: #FFFFFF;
  --theme-x-text-secondary: #F2E3D2;
  --theme-text-muted: rgba(255, 154, 46, 0.66);
  --theme-x-text-inverse: #0A0603;
  --theme-x-text-disabled: rgba(242, 227, 210, 0.34);

  --theme-accent-primary: #FF9A2E;
  --theme-accent-secondary: #B86A18;
  --theme-x-accent-hover: #FFC182;
  --theme-x-accent-active: #E0821F;
  --theme-x-accent-disabled: rgba(255, 154, 46, 0.25);
  --theme-x-accent-text: #0A0603;
  --theme-x-focus-ring: #FFC182;

  --theme-state-healthy: #7FD98A;
  --theme-state-warning: #FF9A2E;
  --theme-state-error: #FF5A48;
  --theme-x-state-info: #FFC182;

  --theme-x-elevation-1: 0 0 10px rgba(255, 154, 46, 0.14);
  --theme-x-elevation-2: 0 0 30px rgba(255, 154, 46, 0.2);
  --theme-x-elevation-3: 0 0 48px rgba(255, 154, 46, 0.4);
  --theme-accent-glow: 0 0 14px rgba(255, 154, 46, 0.7);
  --theme-accent-glow-secondary: 0 0 22px rgba(255, 154, 46, 0.45);
  --theme-x-glass-tint: rgba(10, 6, 3, 0.7);
  --theme-backdrop-blur: 3px;

  --theme-x-font-family-base: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --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="telemetry-hud"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
  font-family: var(--theme-x-font-family-base);
}

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

:root[data-theme="telemetry-hud"] .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="telemetry-hud"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}
:root[data-theme="telemetry-hud"] .bu-soffit a { color: var(--theme-text-muted); }
:root[data-theme="telemetry-hud"] .bu-soffit a:hover { color: var(--theme-text-main); }

:root[data-theme="telemetry-hud"] .bu-btn {
  background: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}
:root[data-theme="telemetry-hud"] .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="telemetry-hud"] .bu-btn:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }
:root[data-theme="telemetry-hud"] .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="telemetry-hud"] .bu-btn-secondary {
  background: transparent;
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}
:root[data-theme="telemetry-hud"] .bu-btn-secondary:hover { border-color: var(--theme-border-active); color: var(--theme-accent-primary); }
:root[data-theme="telemetry-hud"] .bu-btn-secondary:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; }
:root[data-theme="telemetry-hud"] .bu-btn-secondary.is-active {
  border-color: var(--theme-border-active);
  background: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}

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

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

:root[data-theme="telemetry-hud"] .bu-gauge svg .bg { stroke: var(--theme-border-inactive); }
:root[data-theme="telemetry-hud"] .bu-gauge svg .fg { stroke: var(--theme-accent-primary); }
:root[data-theme="telemetry-hud"] .bu-progress-track { background: var(--theme-x-bg-sunken); }

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

/* --- NEGATIVE SPACE: there is no panel ---------------------------------------
   The defining move of this design is that the container is NOT drawn. There is
   no fill and no closed border — only four corner brackets, edge rank-ticks and
   a targeting reticle floating over the world behind them. That is what makes it
   read as projected onto reality rather than as a card sitting on a page, which
   is the whole point of the AR/game-system direction.

   Brackets ride on border-image so the L-corners stay square at any panel size;
   a stretched background would shear them. The reticle is a separate layer with
   a fixed aspect, pinned right, exactly where the reference places it. */
:root[data-theme="telemetry-hud"] .bu-panel {
  position: relative;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none'><g stroke='%23FF9A2E' opacity='0.5'><circle cx='160' cy='160' r='150' stroke-dasharray='3 13'/><circle cx='160' cy='160' r='126' stroke-dasharray='40 170'/></g><g stroke='%23FF9A2E' stroke-width='2' opacity='0.95' fill='none'><path d='M160 -8 A168 168 0 0 1 264 40'/><path d='M160 328 A168 168 0 0 1 56 280'/></g><g stroke='%23FF9A2E' opacity='0.62'><path d='M160 10 L160 36'/><path d='M160 310 L160 284'/></g></svg>");
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 150%;

  border: 14px solid transparent;
  border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none'><g stroke='%23FF9A2E' stroke-width='3.2' opacity='0.9'><path d='M44 6 L6 6 L6 44'/><path d='M76 6 L114 6 L114 44'/><path d='M44 114 L6 114 L6 76'/><path d='M76 114 L114 114 L114 76'/></g><g fill='%23FF9A2E' opacity='0.8'><rect x='9' y='54' width='12' height='2'/><rect x='9' y='60' width='7' height='2'/><rect x='9' y='66' width='12' height='2'/><rect x='99' y='54' width='12' height='2'/><rect x='104' y='60' width='7' height='2'/><rect x='99' y='66' width='12' height='2'/></g></svg>");
  border-image-slice: 44;
  border-image-width: 44px;
  border-image-outset: 0;
  border-image-repeat: stretch;

  border-radius: 0;
  box-shadow: none;
  color: var(--theme-text-main);
}

/* System voice: small, wide-tracked, uppercase, and lit. */
:root[data-theme="telemetry-hud"] h1, :root[data-theme="telemetry-hud"] h2, :root[data-theme="telemetry-hud"] h3, :root[data-theme="telemetry-hud"] h4, :root[data-theme="telemetry-hud"] h5, :root[data-theme="telemetry-hud"] h6 {
  color: var(--theme-accent-primary);
  font-size: var(--theme-x-font-size-base);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 154, 46, 0.85);
}

/* The key readout stays white and lit — the reference's `p.k` treatment. */
:root[data-theme="telemetry-hud"] .bu-panel strong,
:root[data-theme="telemetry-hud"] .bu-panel b {
  color: #FFFFFF;
  text-shadow: 0 0 10px rgba(255, 154, 46, 0.6);
}

:root[data-theme="telemetry-hud"] .bu-badge-tag {
  background: transparent;
  border: 1px solid var(--theme-border-inactive);
  color: var(--theme-accent-primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ===========================================================================
   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="telemetry-hud"] body {
  background-color: #0A0603;
  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,154,46)' 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,154,46)' 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%, #4A2408 0%, transparent 56%),
    radial-gradient(80% 60% at 6% 100%, #1A0E04 0%, transparent 62%),
    radial-gradient(70% 55% at 94% 76%, #1A0E04 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="telemetry-hud"] body { animation: none; }
}

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