/**
 * SANCTUARY DESIGN SYSTEM — ATMOSPHERE & CIRCADIAN NIGHT ENGINE
 * Phase 6: Melatonin Night Mode (Zero Blue Light), Bedside Density (S13) & Privacy Veil (S2)
 *
 * Implements:
 * - Melatonin-Safe Circadian Night Mode (pure #000000 OLED, amber ink >= 4.5:1, zero blue light)
 * - Dusk Transition Mode (warm sunset tones)
 * - Bedside Dimmer Overlay (0% to 60% software-dimming for ultra-sensitive night eyes)
 * - App-Switcher Privacy Veil (S2: frosted blur overlay showing gold Sanctuary Crest on blur)
 * - Dynamic body[data-*] atmosphere synchronization (gear, radar, circadian, window)
 * - Preferences Panel components for Engine › Vault
 */

/* ==========================================================================
   1. CIRCADIAN NIGHT MODE (Pure #000000 OLED & Melatonin-Safe Warm Amber)
   ========================================================================== */

body[data-circadian="night"] {
  /* Surfaces: Pure #000000 OLED true black */
  --obs-0: #000000;
  --obs-1: #070503;
  --obs-2: #0e0a07;
  --obs-3: #18110b;
  --obs-4: #22180f;

  --glass: rgba(14, 10, 7, 0.92);
  --glass-card: rgba(14, 10, 7, 0.94);
  --glass-modal: rgba(7, 5, 3, 0.98);

  --hairline: rgba(240, 163, 91, 0.16);
  --hairline-strong: rgba(240, 163, 91, 0.32);
  --hairline-subtle: rgba(240, 163, 91, 0.08);

  /* Ink & Typographic Contrast: Melatonin-safe ember/amber with >= 4.5:1 contrast against #000000 */
  --ink-1: #ffcf9e; /* ~14.6:1 contrast against #000000 — primary text */
  --ink-2: #d4a373; /* ~9.1:1 contrast against #000000 — secondary text */
  --ink-3: #a37243; /* ~4.96:1 contrast against #000000 — tertiary labels / metadata */
  --ink-4: #6b4a2b; /* Faint disabled ink */

  /* Accents: Shift off cool tones into warm amber/ember/mauve/gold */
  --champagne: #f0a35b;
  --champagne-deep: #c97e3a;
  --gold: #f0a35b;
  --gold-light: #ffcf9e;
  --gold-dim: rgba(240, 163, 91, 0.15);

  --sage: #a8b894;
  --emerald: #a8b894;
  --emerald-dim: rgba(168, 184, 148, 0.15);

  --honey: #e09f53;
  --amber: #e09f53;
  --amber-dim: rgba(224, 159, 83, 0.15);

  --lavender: #ba9ebb;
  --candle: #d4af37;
  --ember: #ff8c42;

  /* Legacy variable re-mapping */
  --bg-base: #000000;
  --bg-surface: var(--obs-2);
  --bg-card: var(--glass);
  --bg-card-hover: var(--obs-3);
  --border: var(--hairline);
  --border-gold: var(--hairline-strong);
  --border-subtle: var(--hairline-subtle);
  --text: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --shadow-glow: 0 0 25px rgba(240, 163, 91, 0.12);

  background-color: #000000 !important;
  color: var(--ink-1);
}

/* OLED Canvas & Root Containment in Night Mode */
body[data-circadian="night"] #mainApp {
  background-color: #000000;
}

body[data-circadian="night"] #hud {
  background: rgba(0, 0, 0, 0.94);
  border-bottom-color: var(--hairline);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

body[data-circadian="night"] #sanctuaryNav {
  background: rgba(0, 0, 0, 0.94);
  border-top-color: var(--hairline);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.85);
}

body[data-circadian="night"] .card {
  background: var(--glass-card);
  border-color: var(--hairline);
  color: var(--ink-1);
}

body[data-circadian="night"] .card.gold-trim {
  border-color: var(--hairline-strong);
  box-shadow: 0 0 15px rgba(240, 163, 91, 0.10);
}

body[data-circadian="night"] .sheet {
  background: var(--glass-modal);
  border-color: var(--hairline-strong);
  color: var(--ink-1);
}

body[data-circadian="night"] .sheet-backdrop {
  background: rgba(0, 0, 0, 0.88);
}

body[data-circadian="night"] input,
body[data-circadian="night"] textarea,
body[data-circadian="night"] select {
  background: #090704;
  color: var(--ink-1);
  border-color: var(--hairline);
}

body[data-circadian="night"] input:focus,
body[data-circadian="night"] textarea:focus,
body[data-circadian="night"] select:focus {
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(240, 163, 91, 0.18);
}

body[data-circadian="night"] .btn-action {
  background: linear-gradient(135deg, rgba(240, 163, 91, 0.22), rgba(201, 126, 58, 0.32));
  color: var(--ink-1);
  border: 1px solid var(--hairline-strong);
}

body[data-circadian="night"] .btn-action:hover {
  background: linear-gradient(135deg, rgba(240, 163, 91, 0.32), rgba(201, 126, 58, 0.45));
  border-color: var(--champagne);
}

body[data-circadian="night"] .pill-btn {
  background: rgba(240, 163, 91, 0.08);
  border-color: var(--hairline);
  color: var(--ink-2);
}

body[data-circadian="night"] .pill-btn.active,
body[data-circadian="night"] .pill-btn.is-active {
  background: rgba(240, 163, 91, 0.22);
  border-color: var(--champagne);
  color: var(--champagne);
}

body[data-circadian="night"] .sanctuary-segmented-bar {
  background: rgba(14, 10, 7, 0.85);
  border-color: var(--hairline);
}

body[data-circadian="night"] .sanctuary-seg-btn {
  color: var(--ink-3);
}

body[data-circadian="night"] .sanctuary-seg-btn.is-active,
body[data-circadian="night"] .sanctuary-seg-btn.active {
  background: rgba(240, 163, 91, 0.15);
  border-color: var(--hairline-strong);
  color: var(--champagne);
}

body[data-circadian="night"] .chronos-card {
  background: rgba(14, 10, 7, 0.94);
  border-color: var(--hairline);
}

body[data-circadian="night"] .chronos-window-header {
  background: rgba(14, 10, 7, 0.92);
  border-color: var(--hairline);
}

/* ==========================================================================
   2. DUSK TRANSITION ATMOSPHERE (18:30 – 21:10 Hearth Cadence)
   ========================================================================== */

body[data-circadian="dusk"] {
  --glass: rgba(18, 16, 22, 0.82);
  --glass-card: rgba(18, 16, 22, 0.88);
  --champagne: #eecda3;
  --hairline: rgba(238, 205, 163, 0.14);
  --hairline-strong: rgba(238, 205, 163, 0.28);
}

/* ==========================================================================
   3. BEDSIDE DIMMER OVERLAY (0% to 60% Software Layer)
   ========================================================================== */

#bedsideDimOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  background-color: #000000;
  opacity: var(--bedside-dim-opacity, 0);
  transition: opacity var(--dur-2) var(--ease-out);
}

/* ==========================================================================
   4. APP-SWITCHER PRIVACY VEIL (S2 Resolution)
   Full-screen obsidian/frosted blur overlay showing gold Sanctuary Crest
   ========================================================================== */

#privacyVeil {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(7, 8, 11, 0.98);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 120ms ease-out, visibility 120ms;
}

#privacyVeil.is-active,
#privacyVeil.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.privacy-veil-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  max-width: 320px;
}

.privacy-veil-crest {
  color: var(--champagne);
  margin-bottom: var(--sp-3);
  filter: drop-shadow(0 0 20px rgba(232, 213, 181, 0.25));
  animation: veilPulse 3s ease-in-out infinite;
}

.privacy-veil-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--champagne);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.privacy-veil-subtitle {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}

@keyframes veilPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(232, 213, 181, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-veil-crest {
    animation: none;
  }
}

/* ==========================================================================
   5. HUD CIRCADIAN BUTTON & MODE INDICATOR
   ========================================================================== */

.hud-circadian-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  min-width: 36px;
  padding: 0 var(--sp-2-5);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out);
  white-space: nowrap;
}

.hud-circadian-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--hairline-strong);
  color: var(--ink-1);
}

.hud-circadian-btn.is-night {
  border-color: rgba(255, 154, 77, 0.45);
  background: rgba(255, 154, 77, 0.14);
  color: var(--ember);
  box-shadow: 0 0 10px rgba(255, 154, 77, 0.25);
}

.hud-circadian-btn.is-manual {
  border-style: dashed;
}

.hud-circadian-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

@media (max-width: 639px) {
  .hud-circadian-badge {
    display: none;
  }
  .hud-circadian-btn {
    padding: 0 6px;
  }
}

/* ==========================================================================
   6. PREFERENCES PANEL (Engine › Vault — S13, S2 & Atmosphere)
   ========================================================================== */

.pref-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pref-card {
  background: var(--obs-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border-color var(--dur-2) var(--ease-out);
}

.pref-card:hover {
  border-color: var(--hairline-strong);
}

.pref-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-subtle);
}

.pref-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pref-item:first-child {
  padding-top: 0;
}

.pref-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.pref-item-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--champagne);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pref-item-desc {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 2px;
}

.pref-item-control {
  margin-top: 6px;
}

.pref-segmented {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pref-seg-btn {
  flex: 1;
  min-width: 80px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out);
  text-align: center;
}

.pref-seg-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-1);
  border-color: var(--hairline-strong);
}

.pref-seg-btn.is-active,
.pref-seg-btn.active {
  background: rgba(232, 213, 181, 0.15);
  border-color: var(--champagne);
  color: var(--champagne);
  box-shadow: 0 0 10px rgba(232, 213, 181, 0.2);
}

body[data-circadian="night"] .pref-seg-btn.is-active,
body[data-circadian="night"] .pref-seg-btn.active {
  background: rgba(240, 163, 91, 0.2);
  border-color: var(--champagne);
  color: var(--champagne);
}

/* Slider Controls */
.pref-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pref-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  transition: background var(--dur-2);
}

.pref-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--champagne);
  border: 2px solid var(--obs-0);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-1) var(--ease-spring);
}

.pref-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.pref-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--champagne);
  border: 2px solid var(--obs-0);
  cursor: pointer;
}

.pref-slider-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--champagne);
  min-width: 44px;
  text-align: right;
}

/* Toggle Switch */
.pref-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pref-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
}

.pref-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pref-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--hairline);
  transition: all var(--dur-2) var(--ease-out);
  border-radius: var(--r-pill);
}

.pref-switch-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: var(--ink-2);
  transition: all var(--dur-2) var(--ease-spring);
  border-radius: 50%;
}

.pref-switch input:checked + .pref-switch-slider {
  background-color: rgba(232, 213, 181, 0.25);
  border-color: var(--champagne);
}

body[data-circadian="night"] .pref-switch input:checked + .pref-switch-slider {
  background-color: rgba(240, 163, 91, 0.3);
  border-color: var(--champagne);
}

.pref-switch input:checked + .pref-switch-slider:before {
  transform: translateX(22px);
  background-color: var(--champagne);
  box-shadow: 0 0 10px rgba(232, 213, 181, 0.5);
}

/* ==========================================================================
   7. DYNAMIC BODY STATE OVERLAYS (Gear, Radar, Protective Mode)
   ========================================================================== */

/* Luteal Sanctuary Shield Tone Hints */
body[data-gear="g25"] .sanctuary-segmented-bar {
  border-color: rgba(157, 142, 196, 0.28);
}

/* Hibernate Shield Tone Hints */
body[data-gear="g3"] .sanctuary-segmented-bar {
  border-color: rgba(212, 175, 55, 0.3);
}

/* Red Radar Protective Mode Atmosphere */
body[data-radar="red"] #hudRadarDot {
  background: var(--ember);
  box-shadow: 0 0 12px rgba(255, 154, 77, 0.85);
  animation: radarRedPulse 2s ease-in-out infinite;
}

@keyframes radarRedPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 154, 77, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-radar="red"] #hudRadarDot {
    animation: none;
  }
}