/* ════════════════════════════════════════════════════════════════════════
   JARVIS — immersive HUD layer
   ────────────────────────────────────────────────────────────────────────
   Every rule in this file is scoped to :root[data-theme="jarvis"], so the
   file is completely inert under Classic / Windows 2000 / Ivory. The color + font
   TOKENS live in variables.css (that block alone re-skins every page); this
   file adds the flourishes that make it feel like Tony Stark's interface:

     · a faint animated cyan grid + scanline backdrop on the work canvas
     · a one-shot "boot" shimmer on first paint
     · cyan glow on primary controls, focus rings, the FAB and active nav
     · a reactor pulse on the brand monogram + FAB
     · monospace HUD section labels with corner brackets
     · a cohesion pass that neutralises the handful of warm-gold / serif
       values hardcoded in base files so nothing leaks the light themes

   Loaded LAST in index.html so these overrides win the cascade.
   All looping motion is disabled under prefers-reduced-motion (bottom).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Canvas depth — a subtle radial vignette under the grid ──────────────── */
:root[data-theme="jarvis"] #content {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(63,208,255,0.07), transparent 60%),
    var(--bg);
}

/* ── Animated grid + scanline backdrop ──────────────────────────────────────
   Painted into #content via pseudo-elements. pointer-events:none so the work
   area stays fully clickable; the panes (position:relative) paint above. */
:root[data-theme="jarvis"] #content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(63,208,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,208,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 55%, transparent 100%);
}

:root[data-theme="jarvis"] #content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(63,208,255,0.06) 48%,
    rgba(63,208,255,0.10) 50%,
    rgba(63,208,255,0.06) 52%,
    transparent 100%
  );
  background-size: 100% 220px;
  background-repeat: no-repeat;
  animation: jarvis-scan 7.5s linear infinite;
}

@keyframes jarvis-scan {
  0%   { background-position: 0 -240px; }
  100% { background-position: 0 110vh; }
}

/* Keep real page content above the backdrop layers. */
:root[data-theme="jarvis"] #content > .pane,
:root[data-theme="jarvis"] #content > .split-divider,
:root[data-theme="jarvis"] #content > .drop-overlay {
  position: relative;
  z-index: 1;
}

/* ── Boot shimmer — one-shot sweep across the canvas on first paint ───────── */
:root[data-theme="jarvis"] #main { position: relative; }
:root[data-theme="jarvis"] #main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(63,208,255,0.14) 50%,
    transparent 65%
  );
  background-size: 280% 100%;
  opacity: 0;
  animation: jarvis-boot 1.5s ease-out 1 both;
}

@keyframes jarvis-boot {
  0%   { opacity: 0;   background-position: 120% 0; }
  15%  { opacity: 1; }
  100% { opacity: 0;   background-position: -60% 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   GLOW — primary controls, focus rings, active states
   ════════════════════════════════════════════════════════════════════════ */

:root[data-theme="jarvis"] .btn-primary {
  box-shadow: 0 0 0 1px rgba(63,208,255,0.35), 0 0 14px rgba(63,208,255,0.30);
  letter-spacing: 0.02em;
}
:root[data-theme="jarvis"] .btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(63,208,255,0.55), 0 0 20px rgba(63,208,255,0.45);
}

/* Secondary / ghost / ribbon buttons get a soft glow on hover only. */
:root[data-theme="jarvis"] .btn-secondary:hover,
:root[data-theme="jarvis"] .btn-ghost:hover,
:root[data-theme="jarvis"] .btn-ribbon:hover,
:root[data-theme="jarvis"] .btn-add:hover {
  box-shadow: 0 0 12px rgba(63,208,255,0.22);
}

/* Focus rings glow instead of sitting flat. */
:root[data-theme="jarvis"] input:focus,
:root[data-theme="jarvis"] select:focus,
:root[data-theme="jarvis"] textarea:focus,
:root[data-theme="jarvis"] .tag-input-wrap:focus-within {
  outline-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(63,208,255,0.40), 0 0 14px rgba(63,208,255,0.25);
}

/* Active selection tiles (theme picker, call mode) read as energised. */
:root[data-theme="jarvis"] .theme-tile.is-active,
:root[data-theme="jarvis"] .call-mode-tile.is-active {
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(63,208,255,0.30);
}

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR — glowing edge + nav reticles
   ════════════════════════════════════════════════════════════════════════ */

:root[data-theme="jarvis"] #sidebar {
  border-right-color: rgba(63,208,255,0.30);
  box-shadow: 1px 0 16px rgba(63,208,255,0.10), inset -1px 0 0 rgba(63,208,255,0.08);
}

:root[data-theme="jarvis"] .nav-item.active {
  background: var(--gold-soft);
  text-shadow: 0 0 12px rgba(63,208,255,0.45);
}
:root[data-theme="jarvis"] .nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 16px;
  transform: translateY(-50%);
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 4px var(--gold);
}
:root[data-theme="jarvis"] .nav-item.active .nav-icon {
  filter: drop-shadow(0 0 6px rgba(63,208,255,0.55));
}

/* ── Brand — arc-reactor pulse on the Arsenal logo ── */
/* (glow uses drop-shadow so it follows the image's alpha, not a box). The logo
   itself is shown by layout.css in every appearance; this only animates it. */
:root[data-theme="jarvis"] .brand-logo {
  animation: jarvis-reactor 3.4s ease-in-out infinite;
}
@keyframes jarvis-reactor {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(63,208,255,0.45)); }
  50%      { filter: drop-shadow(0 0 9px rgba(63,208,255,0.80)); }
}

/* Restate the serif brand name to the HUD mono stack (base files hardcode
   'Cormorant Garamond' rather than the --font-display token). */
:root[data-theme="jarvis"] .brand-name {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════════════
   FAB — reactor ring + pulse
   ════════════════════════════════════════════════════════════════════════ */

:root[data-theme="jarvis"] #fab {
  background: radial-gradient(circle at 50% 50%, #aef0ff 0%, var(--gold) 60%, #1d6f93 100%);
  color: #04121d;
  border: 1px solid rgba(174,240,255,0.6);
  box-shadow: 0 0 0 1px rgba(63,208,255,0.5), 0 0 22px rgba(63,208,255,0.5);
  animation: jarvis-reactor 3.4s ease-in-out infinite;
}
:root[data-theme="jarvis"] #fab:hover {
  box-shadow: 0 0 0 1px rgba(174,240,255,0.8), 0 0 30px rgba(63,208,255,0.7);
}

/* ════════════════════════════════════════════════════════════════════════
   HUD LABELS + corner brackets
   ════════════════════════════════════════════════════════════════════════ */

/* Section eyebrow labels read as terminal headers. */
:root[data-theme="jarvis"] .settings-section-label,
:root[data-theme="jarvis"] .form-label {
  font-family: var(--font-display);
  color: var(--gold);
  text-shadow: 0 0 10px rgba(63,208,255,0.25);
}

/* Cyan corner brackets on settings panels — the classic HUD frame. */
:root[data-theme="jarvis"] .settings-section {
  position: relative;
  box-shadow: inset 0 0 24px rgba(63,208,255,0.05);
}
:root[data-theme="jarvis"] .settings-section::before,
:root[data-theme="jarvis"] .settings-section::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--gold);
  opacity: 0.7;
  pointer-events: none;
}
:root[data-theme="jarvis"] .settings-section::before {
  top: 8px; left: 8px;
  border-right: none; border-bottom: none;
}
:root[data-theme="jarvis"] .settings-section::after {
  bottom: 8px; right: 8px;
  border-left: none; border-top: none;
}

/* Big page title gets a faint cyan halo. */
:root[data-theme="jarvis"] .settings-title {
  text-shadow: 0 0 18px rgba(63,208,255,0.25);
}

/* ════════════════════════════════════════════════════════════════════════
   COHESION PASS — neutralise warm-gold / serif values hardcoded in base files
   so the light-theme palette never leaks through under Jarvis.
   ════════════════════════════════════════════════════════════════════════ */

/* layout.css drop overlay hardcodes gold rgba + a serif label. */
:root[data-theme="jarvis"] .drop-zone {
  background: rgba(63,208,255,0.05);
  border-color: rgba(63,208,255,0.35);
}
:root[data-theme="jarvis"] .drop-zone.is-over {
  background: rgba(63,208,255,0.16);
  border-color: var(--gold);
}
:root[data-theme="jarvis"] .drop-label {
  font-family: var(--font-display);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(63,208,255,0.4);
}

/* inputs.css tag-pill hardcodes a gold-rgba border. */
:root[data-theme="jarvis"] .tag-pill {
  border-color: rgba(63,208,255,0.35);
}

/* messages.css SMS toggle "on" track hardcodes a warm brown. */
:root[data-theme="jarvis"] .sms-toggle input:checked + .sms-toggle-track {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(63,208,255,0.45);
}

/* calendar add-button: white "+" on the cyan accent is low-contrast — match
   the btn-primary treatment (dark glyph on the bright accent). */
:root[data-theme="jarvis"] .cal-add-btn {
  color: var(--surface);
  box-shadow: 0 0 14px rgba(63,208,255,0.4);
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill the loops + boot sweep, keep the static styling
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="jarvis"] #content::after,
  :root[data-theme="jarvis"] #main::before,
  :root[data-theme="jarvis"] .brand-logo,
  :root[data-theme="jarvis"] #fab {
    animation: none;
  }
  :root[data-theme="jarvis"] #main::before { display: none; }
}