/**
 * KNOMAD Design System - G5 Cockpit Theme
 * Single source of truth for all styling
 * DO NOT create inline styles or duplicate these values
 */

/* @import MUST come before any other CSS rules to be valid */
@import url('day-mode-effects.css');
@import url('night-mode-effects.css');

:root {
  /* ============================================
     COLOR PALETTE - Brand Identity
     ============================================ */

  /* Primary Brand Color (Cyan) */
  --cyan-rgb: 0, 200, 255;
  --cyan: rgb(var(--cyan-rgb));
  --cyan-05: rgba(var(--cyan-rgb), 0.05);
  --cyan-10: rgba(var(--cyan-rgb), 0.1);
  --cyan-15: rgba(var(--cyan-rgb), 0.15);
  --cyan-20: rgba(var(--cyan-rgb), 0.2);
  --cyan-25: rgba(var(--cyan-rgb), 0.25);
  --cyan-30: rgba(var(--cyan-rgb), 0.3);
  --cyan-40: rgba(var(--cyan-rgb), 0.4);
  --cyan-50: rgba(var(--cyan-rgb), 0.5);
  --cyan-60: rgba(var(--cyan-rgb), 0.6);
  --cyan-80: rgba(var(--cyan-rgb), 0.8);
  --cyan-90: rgba(var(--cyan-rgb), 0.9);

  /* Dark Backgrounds */
  --dark-bg-1: rgba(15, 25, 35, 0.9);
  --dark-bg-2: rgba(25, 35, 45, 0.9);
  --dark-bg-1-solid: rgba(15, 25, 35, 0.95);
  --dark-bg-2-solid: rgba(25, 35, 45, 0.95);
  --dark-bg-1-opaque: rgba(15, 25, 35, 0.98);
  --dark-bg-2-opaque: rgba(25, 35, 45, 0.98);

  /* Text Colors */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-tertiary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-disabled: rgba(255, 255, 255, 0.4);
  --text-inverse: rgba(255, 255, 255, 1); /* Maximum contrast for active buttons */

  /* Semantic Colors */
  --success: #34c759;
  --success-rgb: 52, 199, 89;
  --warning: #ff9500;
  --warning-rgb: 255, 149, 0;
  --error: #ff3b30;
  --error-rgb: 255, 59, 48;
  --info: var(--cyan);

  /* Neutral Colors */
  --white: #ffffff;
  --black: #000000;
  --black-30: rgba(0, 0, 0, 0.3);
  --black-50: rgba(0, 0, 0, 0.5);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-primary: 'Segoe UI', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Golden Ratio: φ = 1.618, 1/φ = 0.618 */
  --phi: 1.618;

  /* Font Scale (Golden Ratio from 13px base)
     13 / 1.618 = 8px (too small, use 10px floor)
     13 * 1.0 = 13px (base)
     13 * 1.618 = 21px (heading) */
  --font-size-xs: 10px; /* floor */
  --font-size-sm: 11px; /* labels, hints */
  --font-size-base: 13px; /* body text */
  --font-size-md: 15px; /* emphasized */
  --font-size-lg: 18px; /* section headers */
  --font-size-xl: 21px; /* modal titles (13 * φ) */
  --font-size-xxl: 34px; /* hero (21 * φ) */

  /* Font Weights - stepped for hierarchy */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-base: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-caps: 0.08em; /* uppercase labels */

  /* Text Opacity Scale (Golden Ratio stepdown)
     1.0 → 0.618 → 0.382 → 0.236 */
  --opacity-primary: 0.95; /* main text */
  --opacity-secondary: 0.82; /* supporting text (0.95 * 0.86) */
  --opacity-muted: 0.6; /* hints, disabled */
  --opacity-faint: 0.38; /* watermarks */

  /* ============================================
     SPACING SYSTEM (8px base)
     ============================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============================================
     BORDER & RADIUS
     ============================================ */
  --border-thin: 1px;
  --border-base: 2px;
  --border-thick: 3px;

  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS & GLOWS
     ============================================ */
  --shadow-sm: 0 2px 8px var(--cyan-15);
  --shadow-base: 0 4px 16px var(--cyan-20);
  --shadow-md: 0 8px 24px var(--cyan-25);
  --shadow-lg: 0 8px 32px var(--cyan-30);

  --glow-sm: 0 0 4px var(--cyan-30);
  --glow-base: 0 0 6px var(--cyan-30);
  --glow-md: 0 0 8px var(--cyan-40);
  --glow-lg: 0 0 12px var(--cyan-50);

  /* ============================================
     Z-INDEX HIERARCHY
     Standardized stacking context scale
     ============================================ */
  --z-base: 1;
  --z-canvas: 10;
  --z-panel: 100;
  --z-sticky: 200;
  --z-dropdown: 1000;
  --z-modal-backdrop: 9000;
  --z-modal: 10000;
  --z-toast: 11000;
  --z-tooltip: 12000;

  /* ============================================
     GRADIENTS
     ============================================ */
  --gradient-dark: linear-gradient(145deg, var(--dark-bg-1), var(--dark-bg-2));
  --gradient-dark-solid: linear-gradient(145deg, var(--dark-bg-1-solid), var(--dark-bg-2-solid));
  --gradient-dark-opaque: linear-gradient(145deg, var(--dark-bg-1-opaque), var(--dark-bg-2-opaque));
  --gradient-cyan: linear-gradient(90deg, var(--cyan-15), var(--cyan-25));
  --gradient-cyan-hover: linear-gradient(90deg, var(--cyan-20), var(--cyan-30));
  --gradient-button-hover: linear-gradient(145deg, var(--cyan-15), var(--cyan-25));
  --gradient-button-active: linear-gradient(145deg, var(--cyan-25), var(--cyan-40));

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-modal: 5000;
  --z-toast: 10000;
  --z-tooltip: 10001;

  /* ============================================
     COMPONENT-SPECIFIC
     ============================================ */

  /* Buttons */
  --btn-padding: var(--space-2) var(--space-4);
  --btn-border: var(--border-thin) solid var(--cyan-40);
  --btn-radius: var(--radius-sm);

  /* Inputs */
  --input-bg: var(--black-30);
  --input-text: var(--text-primary); /* White text for dark input backgrounds */
  --input-border: var(--border-thin) solid var(--cyan-30);
  --input-border-focus: var(--border-thin) solid var(--cyan-60);
  --input-padding: var(--space-2) var(--space-3);
  --input-radius: var(--radius-sm);

  /* Panels */
  --panel-bg: var(--gradient-dark-solid);
  --panel-border: var(--border-base) solid var(--cyan-50);
  --panel-radius: var(--radius-md);
  --panel-shadow: var(--shadow-sm);

  /* Modals */
  --modal-bg: var(--gradient-dark-opaque);
  --modal-border: var(--border-base) solid var(--cyan-60);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-lg);
  --modal-backdrop: rgba(0, 0, 0, 0.85);

  /* Dropdowns */
  --dropdown-header-bg: var(--gradient-cyan);
  --dropdown-header-hover-bg: var(--gradient-cyan-hover);
  --dropdown-content-bg: var(--dark-bg-1-solid);
  --dropdown-border: var(--border-base) solid var(--cyan-50);

  /* UI Scaling */
  --ui-zoom: 1;

  /* ============================================
     BUTTON DNA - Unified System (Theme-Aware)
     Reference: .ballistics-action-btn styling
     ============================================ */

  /* Base Button Appearance */
  --btn-bg: linear-gradient(145deg, var(--dark-bg-1), var(--dark-bg-2));
  --btn-text: var(--text-tertiary); /* Default low contrast */
  --btn-text-enabled: var(--text-primary); /* High contrast when enabled */
  --btn-text-ready: var(--text-inverse); /* Maximum contrast when ready */
  --btn-border: var(--border-thin) solid var(--cyan-40);
  --btn-shadow: none;

  /* Hover State */
  --btn-hover-bg: linear-gradient(145deg, var(--cyan-15), var(--cyan-25));
  --btn-hover-border: var(--cyan-60);
  --btn-hover-shadow: var(--glow-md);

  /* Active/Pressed State */
  --btn-active-bg: linear-gradient(145deg, var(--cyan-25), var(--cyan-40));
  --btn-active-border: var(--cyan-80);

  /* Typography */
  --btn-font-size: 0.85rem;
  --btn-font-weight: 500;
  --btn-letter-spacing: 0.02em;

  /* Animation */
  --btn-transition:
    background 0.2s ease, border 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;

  /* Disabled State */
  --btn-disabled-opacity: 0.5;

  /* ============================================
     LEGACY/COMPATIBILITY VARIABLES
     Added to fix undefined variable warnings
     ============================================ */

  /* Generic semantic aliases */
  --bg-secondary: var(--dark-bg-2);
  --border-color: var(--cyan-30);
  --accent-color: var(--cyan);

  /* Button row - golden target active state */
  --gt-active: var(--cyan);

  /* Tracker component colors */
  --tracker-text: var(--text-primary);
  --tracker-text-muted: var(--text-muted);
  --tracker-value-color: var(--cyan);
  --tracker-meta-bg: var(--dark-bg-1);
  --tracker-warning-bg: rgba(255, 149, 0, 0.15);
  --tracker-warning-border: var(--warning);
  --tracker-warning-text: var(--warning);

  /* Status colors */
  --warning-bright: #ffcc00;
  --gt-danger: var(--error);
  --gt-success: var(--success);
  --gt-warning: var(--warning);

  /* Surface aliases */
  --surface-elevated: var(--dark-bg-2);
  --surface-input-bg: var(--black-30);
  --color-success: var(--success);
  --color-info: var(--info);

  /* Ballistics compact aliases */
  --bg-dark: var(--dark-bg-1);
  --bg-panel: var(--dark-bg-2);
  --bg-input: var(--black-30);
  --accent-cyan: var(--cyan);

  /* Text special */
  --text-special: var(--cyan);

  /* Color semantic aliases */
  --color-accent: var(--cyan);
  --color-warning: var(--warning);
  --color-danger: var(--error);

  /* Oracle domain */
  --context-percent: 0.5;
  --accent-green: var(--success);
  --dark-bg-3: rgba(10, 15, 20, 0.95);
  --oracle-accent: var(--cyan);

  /* Validation */
  --luminova: var(--cyan);

  /* Send It mode */
  --base-bg: var(--dark-bg-1);
  --base-border: var(--cyan-30);
  --base-bg-secondary: var(--dark-bg-2);
  --base-bg-alt: rgba(20, 30, 40, 0.9);
  --error-color: var(--error);

  /* Mobile app */
  --bg-primary: var(--dark-bg-1);
  --text-color: var(--text-primary);

  /* Planning canvas */
  --planning-ink-bold: #1a1a2e;
  --planning-paper: #f5f5dc;
  --planning-paper-grid: rgba(0, 0, 0, 0.05);

  /* Project window */
  --font-family: var(--font-primary);
  --cyan-35: rgba(var(--cyan-rgb), 0.35);

  /* Range card storage toast colors */
  --color-error-bg: rgba(255, 59, 48, 0.15);
  --color-error: var(--error);
  --color-error-text: #ff6b6b;
  --color-warning-bg: rgba(255, 149, 0, 0.15);
  --color-warning-text: #ffaa00;
  --color-info-bg: rgba(0, 200, 255, 0.15);
  --color-info-text: var(--cyan);

  /* Golden target semantic colors */
  --gt-color-surface: var(--dark-bg-2);
  --gt-color-border: var(--cyan-30);
  --gt-color-input-bg: var(--black-30);
  --gt-color-hover: var(--cyan-20);
  --gt-color-badge: var(--cyan);
  --gt-silver: #c0c0c0;

  /* Range card colors */
  --ink-green: #228b22;
  --success-color: var(--success);

  /* Shot plotter */
  --bg-tertiary: rgba(30, 40, 50, 0.9);
  --grid-color: rgba(0, 200, 255, 0.1);
  --bg-elevated: var(--dark-bg-2);
  --accent-orange: #ff9500;
  --bg-hover: var(--cyan-15);

  /* Styles.css legacy aliases */
  --cyan-500: var(--cyan);
  --cyan-400: rgba(var(--cyan-rgb), 0.8);
  --surface-canvas: var(--dark-bg-1);
  --surface-input: var(--black-30);
  --surface-card: var(--dark-bg-2);
  --green: var(--success);
  --gt-accent: var(--cyan);
  --gt-accent-light: var(--cyan-30);
  --warning-color: var(--warning);
  --border-accent: var(--cyan-40);
  --accent-error: var(--error);
  --gradient-success: linear-gradient(135deg, var(--success), #2ecc71);

  /* Welcome state */
  --bg-surface: var(--dark-bg-1);
  --accent-hover: var(--cyan-20);

  /* Workflow engine */
  --surface: var(--dark-bg-2);

  /* Luminova (disk glow effects) */
  --luminova-accent: var(--cyan);
  --luminova-secondary: rgba(var(--cyan-rgb), 0.5);

  /* Workflow engine borders */
  --border-light: var(--cyan-20);
  --surface-darker: rgba(10, 15, 20, 0.95);
  --info-border: var(--cyan-40);
  --warning-border: var(--warning);
  --success-border: var(--success);
}

/* ============================================
   UTILITY CLASSES - Common Patterns
   ============================================ */

/* Layout Utilities */
.flex-row {
  display: flex;
  gap: var(--space-2);
}
.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

/* Spacing Utilities */
.gap-1 {
  gap: var(--space-1);
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}

/* Text Utilities */
.text-mono {
  font-family: var(--font-mono);
}
.text-uppercase {
  text-transform: uppercase;
}
.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-muted {
  color: var(--text-muted);
}
.text-cyan {
  color: var(--cyan);
}

/* =============================================================================
   PRODUCTION TYPOGRAPHY CLASSES
   Golden Ratio proportions for consistent visual hierarchy
   ============================================================================= */

/* Label - Small uppercase labels for controls, hints */
.typo-label {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  line-height: var(--line-height-tight);
}

/* Body - Default readable text */
.typo-body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
}

/* Control - Button and interactive element text */
.typo-control {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
}

/* Section Header - Dropdown headers, panel titles */
.typo-section {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
}

/* Heading - Modal titles, major sections */
.typo-heading {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

/* Hint - Small helper text, field descriptions */
.typo-hint {
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--text-muted);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
}

/* Accent - Emphasized text with brand color */
.typo-accent {
  color: var(--accent-primary, var(--cyan));
}

/* Border Utilities */
.border-cyan {
  border: var(--border-thin) solid var(--cyan-50);
}
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-base {
  border-radius: var(--radius-base);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}

/* ============================================
   COMPONENT CLASSES - Reusable Components
   ============================================ */

/* Standard Label with Flex */
.inline-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Builder Modal Base */
.builder-modal {
  width: calc(100vw - 600px);
  height: 90vh;
  max-width: none;
  padding: 0;
  border: var(--modal-border);
  border-radius: var(--modal-radius);
  background: var(--modal-bg);
  box-shadow: var(--modal-shadow);
}

.builder-modal::backdrop {
  background: var(--modal-backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Modal Header */
.modal-header {
  padding: var(--space-3);
  background: var(--gradient-cyan);
  border-bottom: var(--border-thin) solid var(--cyan-50);
}

.modal-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Modal Iframe */
.modal-iframe {
  width: 100%;
  height: calc(100% - 50px);
  border: none;
}

/* Panel Base */
.panel {
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--space-4);
}

/* Button Variants */
.btn {
  padding: var(--btn-padding);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-primary);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  cursor: pointer;
  transition: var(--btn-transition);
}

.btn:hover:not(:disabled) {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-hover-shadow);
}

.btn:active:not(:disabled) {
  background: var(--btn-active-bg);
  border-color: var(--btn-active-border);
  transform: translateY(1px);
}

.btn:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  box-shadow: none;
}

.btn--ghost {
  background: var(--cyan-05);
  border: var(--border-thin) solid var(--cyan-30);
  color: var(--cyan-90);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--cyan-15);
  border-color: var(--cyan-50);
  box-shadow: var(--glow-base);
}

.btn--danger {
  border-color: var(--error);
  color: var(--error);
}

.btn--danger:hover:not(:disabled) {
  background: rgba(var(--error-rgb), 0.15);
  border-color: var(--error);
  box-shadow: 0 0 8px rgba(var(--error-rgb), 0.4);
}

/* Input Base */
.input {
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  width: 100%;
  transition: all var(--transition-base);
}

.input:focus {
  border: var(--input-border-focus);
  outline: none;
  box-shadow: var(--glow-base);
}

/* ============================================
   THEME USAGE GUIDE (for future agents)
   ============================================

   ALWAYS use CSS variables from this file.
   NEVER create new color values inline.
   NEVER use rgba(0, 200, 255, ...) directly.

   GOOD:
   .my-component {
     background: var(--dark-bg-1);
     border: var(--border-thin) solid var(--cyan-50);
     color: var(--text-primary);
   }

   BAD:
   .my-component {
     background: rgba(15, 25, 35, 0.9);
     border: 1px solid rgba(0, 200, 255, 0.5);
     color: rgba(255, 255, 255, 0.95);
   }

   For spacing: Use var(--space-*) or utility classes
   For colors: Use var(--cyan-*), var(--text-*), etc.
   For common patterns: Use .flex-row, .inline-label, etc.

   ============================================ */

/* ============================================
   DEV MODE
   Hide advanced dropdowns by default (Basic Mode)
   Show them when Dev Mode is enabled (.is-dev-mode)
   ============================================ */
[data-mode='advanced'] {
  display: none !important;
}

.is-dev-mode [data-mode='advanced'] {
  display: block !important;
}

/* Feature flags: Hide dev-stage elements by default */
[data-stage='dev'] {
  display: none !important;
}

/* Show dev-stage elements in developer mode */
.is-dev-mode [data-stage='dev'],
.mode-developer [data-stage='dev'] {
  display: block !important;
}

/* For flex containers, use flex instead of block */
.is-dev-mode .toolbar[data-stage='dev'],
.mode-developer .toolbar[data-stage='dev'] {
  display: flex !important;
}

/* ============================================
   MODE TOGGLE - Pill Switch
   Custom switch component for Basic/Advanced mode
   ============================================ */

/* Container: flexbox to align track and label */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

/* Hide native checkbox but keep accessible for keyboard/screen readers */
.mode-toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Track: the pill background */
.mode-toggle-track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background: var(--dark-bg-2);
  border: var(--border-thin) solid var(--cyan-30);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Thumb: the sliding knob */
.mode-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Label text */
.mode-toggle-label {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: color var(--transition-base);
}

/* CHECKED STATE: When Basic Mode is active */
.mode-toggle input:checked + .mode-toggle-track {
  background: var(--cyan-30);
  border-color: var(--cyan);
  box-shadow:
    inset 0 1px 3px var(--cyan-15),
    var(--glow-sm);
}

.mode-toggle input:checked + .mode-toggle-track .mode-toggle-thumb {
  left: 22px; /* 40px track - 14px thumb - 4px padding = 22px */
  background: var(--cyan);
  box-shadow: 0 2px 6px var(--cyan-40);
}

.mode-toggle input:checked ~ .mode-toggle-label {
  color: var(--cyan);
}

/* HOVER STATE */
.mode-toggle:hover .mode-toggle-track {
  border-color: var(--cyan-50);
}

.mode-toggle:hover .mode-toggle-label {
  color: var(--text-primary);
}

.mode-toggle input:checked:hover + .mode-toggle-track {
  background: var(--cyan-40);
  border-color: var(--cyan-80);
}

/* FOCUS STATE: Keyboard accessibility */
.mode-toggle input:focus + .mode-toggle-track {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.mode-toggle input:focus:not(:focus-visible) + .mode-toggle-track {
  outline: none;
}

/* ACTIVE/PRESSED STATE */
.mode-toggle:active .mode-toggle-track {
  transform: scale(0.98);
}

/* DISABLED STATE (if needed in future) */
.mode-toggle input:disabled + .mode-toggle-track {
  opacity: 0.4;
  cursor: not-allowed;
}

.mode-toggle input:disabled ~ .mode-toggle-label {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   FIELD VIEW MODE - Luminova Effect
   ============================================ */

/**
 * Field View simulates manufactured KNOMAD appearance:
 * - Dark background (night view)
 * - Superluminova glow on engraved elements
 * - Numbers positioned inside bezel edge
 */

/* Luminova color palette */
:root {
  --luminova-primary: #00e5ff; /* Crisp cyan-blue */
  --luminova-primary-rgb: 0, 229, 255;
  --luminova-glow: rgba(0, 229, 255, 0.6);
  --luminova-soft: rgba(0, 229, 255, 0.15);
  --luminova-transmission: rgba(0, 229, 255, 0.08);
  --field-bg: #0a0a0a; /* Near-black */
  --field-polycarbonate: #1a1a1a; /* Dark polycarbonate */
}

/* Field View container styling */
.preview.field-view {
  background:
    linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85)),
    image-set(
        url('/static/img/topo-background.webp') type('image/webp'),
        url('/static/img/topo-background.webp') type('image/jpeg')
      )
      center/cover no-repeat,
    var(--field-bg) !important;
  border-radius: 0.5rem; /* Match engineer view exactly */
  overflow: hidden; /* Clip content to rounded corners */
  padding: 0 !important; /* Remove padding that exposes background */
  border: none !important; /* Remove dashed border in field view */
  box-shadow: none; /* Remove any shadow that might show edges */
  /* Let flexbox handle sizing - same as engineer view */
}

.preview.field-view .preview-canvas {
  /* Transparent - let parent's tinted topo show through */
  background: transparent;
  border-radius: 0.5rem; /* Match engineer view exactly */
  /* Same constraints as engineer view - square aspect ratio */
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
}

/* Hide SVG topo-background since CSS handles it */
.preview.field-view .topo-background {
  display: none !important;
}

/* ============================================
   FIELD VIEW: HIDDEN ELEMENTS (Engineering only)
   ============================================ */

/* Hide engineering inspection elements in Field View */
.preview.field-view .preview-canvas .spiral-nodes,
.preview.field-view .preview-canvas .nodes:not(.wind-nodes),
.preview.field-view .preview-canvas .spokes,
.preview.field-view .preview-canvas .template-axle,
.preview.field-view .preview-canvas .axle-circle,
.preview.field-view .preview-canvas .hub-circle,
.preview.field-view .preview-canvas [data-layer='centerCircle'],
.preview.field-view .preview-canvas #da-low-spiral,
.preview.field-view .preview-canvas #da-high-spiral,
.preview.field-view .preview-canvas #wind-spiral,
.preview.field-view .preview-canvas g.nodes:not(.wind-nodes) {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   FIELD VIEW: VISIBLE ELEMENTS (Manufactured)
   ============================================ */

/* Bezel edge - very fine soft perpendicular glow (light emitting from edge, not face cut) */
.preview.field-view .preview-canvas .bezel-circle,
.preview.field-view .preview-canvas .template-bezel {
  stroke: var(--luminova-soft);
  stroke-width: 0.3;
  filter: url(#luminovaTransmit);
  fill: none;
  opacity: 0.7;
}

/* Trajectory spiral - crisp lines, no blur (matches reticle weight) */
.preview.field-view .preview-canvas .spiral-path,
.preview.field-view .preview-canvas .main-spiral,
.preview.field-view .preview-canvas .trued-spiral {
  stroke: var(--luminova-primary) !important;
  filter: none;
}

/* G2 (Rifle 2) spiral - crisp lines, no blur */
.preview.field-view .preview-canvas #rifle2-spiral,
.preview.field-view .preview-canvas #rifle2-spiral path {
  stroke: var(--luminova-primary) !important;
  filter: none;
}

/* Wind spiral - HIDE the line in Field View, only nodes are engraved */
/* Note: wind-spiral is an ID not a class, but adding both for safety */
.preview.field-view .preview-canvas .wind-spiral,
.preview.field-view .preview-canvas #wind-spiral {
  display: none !important;
  visibility: hidden !important;
}

/* Wind nodes - show with luminova glow in Field View */
.preview.field-view .preview-canvas .wind-nodes,
.preview.field-view .preview-canvas g.nodes.wind-nodes {
  display: block !important;
  visibility: visible !important;
}

.preview.field-view .preview-canvas .wind-nodes circle {
  fill: var(--luminova-primary) !important;
  stroke: var(--luminova-primary) !important;
  filter: url(#luminovaGlow);
}

/* Lead nodes - independent layer for moving target visualization (PRD-32) */
/* Smaller circles (30% of wind nodes) positioned at lead spiral points */
.preview.field-view .preview-canvas .lead-nodes,
.preview.field-view .preview-canvas g.lead-nodes {
  display: block !important;
  visibility: visible !important;
}

.preview.field-view .preview-canvas .lead-nodes circle {
  fill: var(--luminova-primary) !important;
  stroke: var(--luminova-primary) !important;
  filter: url(#luminovaGlow);
}

/* Field Day: Lead nodes use chalk white like wind nodes */
.preview.field-view.field-day .preview-canvas .lead-nodes circle {
  fill: var(--luminova-chalk) !important;
  stroke: var(--luminova-chalk) !important;
  filter: none !important;
}

/* Egg shapes are rendered as polygons with .da-egg class */
/* NOTE: No filter on parent .eggs-layer to avoid double-filtering */
/* Crisp stroke with subtle glow aura - single filter application */
.preview.field-view .preview-canvas .eggs-layer polygon,
.preview.field-view .preview-canvas .eggs-overlay polygon,
.preview.field-view .preview-canvas .da-egg {
  fill: none !important;
  stroke: var(--luminova-primary) !important;
  stroke-width: 0.3 !important;
  filter: url(#luminovaGlow);
}

/* Bezel numbers - 20% smaller with thin stroke matching trajectory line */
.preview.field-view .preview-canvas .bezel-numbers text {
  fill: var(--luminova-primary);
  filter: url(#luminovaGlow);
  font-size: 0.8em; /* 20% smaller */
  stroke: none !important; /* Remove stroke - fill only for thin appearance */
  font-weight: 400 !important; /* Normal weight, not bold */
}

/* CNC glyph paths - STROKED (not filled) single-line font */
.preview.field-view .preview-canvas .bezel-numbers path.bezel-number-glyph,
.preview.field-view .preview-canvas .bezel-number-glyph {
  fill: none !important; /* CNC glyphs are stroked, not filled */
  stroke: var(--luminova-primary) !important;
  filter: none; /* Clean lines — matches spiral (no blur) */
}

/* Filled paths (circles, markers) */
.preview.field-view .preview-canvas .bezel-numbers circle {
  fill: var(--luminova-primary);
  filter: url(#luminovaGlow);
}

/* Disk Identity text — luminovaGlow (same as wind nodes, bezel numbers).
   Was luminovaTransmit (stdDev=4) which made it look flat and dead. */
.preview.field-view .preview-canvas .disk-identity text,
.preview.field-view .preview-canvas .disk-identity-text {
  fill: var(--luminova-primary) !important;
  filter: url(#luminovaGlow);
  stroke: none !important;
  font-weight: 400 !important;
}

/* KNOMAD DXF logo — full luminova glow, override renderer's 0.36 stroke-opacity */
.preview.field-view .preview-canvas .knomad-logo-path {
  stroke: var(--luminova-primary) !important;
  stroke-opacity: 1 !important;
  filter: url(#luminovaGlow) !important;
}

/* Disk Identity G2 line */
.preview.field-view .preview-canvas .g2-identifier-line,
.preview.field-view.field-night .preview-canvas .g2-identifier-line {
  stroke: var(--luminova-primary) !important;
  stroke-width: 1.5px !important;
  filter: url(#luminovaGlow);
  opacity: 0.85;
}

/* Disk Identity - Field View Day (chalk white, no glow) */
.preview.field-view.field-day .preview-canvas .disk-identity text,
.preview.field-view.field-day .preview-canvas .disk-identity-text {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
}

/* Disk Identity G2 line - chalk white in field view day */
.preview.field-view.field-day .preview-canvas .g2-identifier-line {
  stroke: var(--luminova-chalk) !important;
  filter: none !important;
}

/* Reticle — NO glow filter.  The reticle is a precision measurement scale;
   blur makes tick marks appear thicker and destroys interpolation accuracy.
   Keep luminova COLOR but render crisp.  Glow is reserved for the
   polycarbonate body (spiral, bezel, lanyard, eggs, comets). */
.preview.field-view .preview-canvas .reticle-layer,
.preview.field-view .preview-canvas .reticle-group,
.preview.field-view .preview-canvas [class*='reticle']:not(.reticle-number-glyph) {
  filter: none;
}

.preview.field-view .preview-canvas .reticle-layer path:not(.reticle-number-glyph),
.preview.field-view .preview-canvas .reticle-layer line,
.preview.field-view .preview-canvas .reticle-group path:not(.reticle-number-glyph),
.preview.field-view .preview-canvas .reticle-group line,
.preview.field-view .preview-canvas .scale-axis,
.preview.field-view .preview-canvas .scale-tick {
  stroke: var(--luminova-primary) !important; /* Match spiral: luminova color */
  fill: none;
  /* No stroke-width override — use whatever the renderer sets inline */
}

.preview.field-view .preview-canvas .reticle-layer text,
.preview.field-view .preview-canvas .reticle-group text,
.preview.field-view .preview-canvas .scale-label {
  /* Color now controlled by CanvasColors.js - do not use !important */
  fill: var(--luminova-primary);
  stroke: none;
  opacity: 1; /* Match other luminova elements — was 0.9, caused dimmer appearance */
  /* font-size unchanged - inherit from source */
}

/* CNC glyph paths for reticle numbers - STROKED (not filled) single-line font */
.preview.field-view .preview-canvas .reticle-number-glyph {
  fill: none !important;
  stroke: var(--luminova-primary) !important;
  /* stroke-width controlled by SVG attribute via VCC Reticle # Stroke slider */
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision; /* Crisp curves without pixelation */
  vector-effect: non-scaling-stroke; /* Consistent stroke width at any zoom */
  filter: none !important; /* Override inherited luminovaTransmit - blur made numbers splotchy/parallax */
  opacity: 1 !important; /* Override inherited 0.85 opacity that causes muddy appearance */
}

/* View Mode Toggle Button */
.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--dark-bg-2);
  border: 1px solid var(--cyan-30);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.view-mode-toggle:hover {
  background: var(--cyan-10);
  border-color: var(--cyan-50);
}

.view-mode-toggle.active {
  background: var(--cyan-20);
  border-color: var(--luminova-primary);
  color: var(--luminova-primary);
}

.view-mode-toggle .icon {
  width: 14px;
  height: 14px;
}

/* Toolbar divider for rotation controls */
.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--cyan-30);
  margin: 0 4px;
}

/* ============================================
   FIELD VIEW DAY MODE: Polycarbonate Daytime
   Simulates 2x 0.375" thick clear polycarbonate disks in daylight
   Luminova = white epoxy paste in 0.015" milled channels
   ============================================ */

/* Day mode color palette - chalk white luminova */
.preview.field-view.field-day,
.field-day {
  --luminova-chalk: #f5f5f0; /* Chalk white - luminova in daylight */

  /* Override ALL color variables - cascades to all JS-rendered elements */
  --luminova-primary: #f5f5f0;
  --luminova-bright: #ffffff;
  --luminova-soft: rgba(245, 245, 240, 0.15);
  --accent-primary: #f5f5f0; /* Main spiral uses this */
  --spiral-wind: #f5f5f0;
  --spiral-da-low: #f5f5f0;
  --spiral-da-high: #f5f5f0;
  --spiral-rifle2: #f5f5f0; /* G2 spiral */

  /* Darker topo background for day mode - less washed out */
  background:
    linear-gradient(rgba(5, 8, 12, 0.94), rgba(5, 8, 12, 0.94)),
    image-set(
        url('/static/img/topo-background.webp') type('image/webp'),
        url('/static/img/topo-background.webp') type('image/jpeg')
      )
      center/cover no-repeat,
    #050508 !important;
}

/* Remove glow filters from specific element types - NOT blanket * */
.preview.field-view.field-day .preview-canvas path,
.preview.field-view.field-day .preview-canvas line,
.preview.field-view.field-day .preview-canvas text,
.preview.field-view.field-day .preview-canvas polygon,
.preview.field-view.field-day .preview-canvas circle {
  filter: none !important;
}

/* Remove glow from PARENT GROUPS that have filter applied (wind-nodes, eggs, spirals) */
.preview.field-view.field-day .preview-canvas .wind-nodes,
.preview.field-view.field-day .preview-canvas .eggs-layer,
.preview.field-view.field-day .preview-canvas .eggs-overlay,
.preview.field-view.field-day .preview-canvas .spiral-path,
.preview.field-view.field-day .preview-canvas .main-spiral,
.preview.field-view.field-day .preview-canvas .trued-spiral,
.preview.field-view.field-day .preview-canvas .rifle2-spiral,
.preview.field-view.field-day .preview-canvas .bezel-circle,
.preview.field-view.field-day .preview-canvas .template-bezel,
.preview.field-view.field-day .preview-canvas .bezel-numbers,
.preview.field-view.field-day .preview-canvas .reticle-layer,
.preview.field-view.field-day .preview-canvas .reticle-group,
.preview.field-view.field-day .preview-canvas [class*='reticle'] {
  filter: none !important;
}

/* Spiral paths - chalk white */
.preview.field-view.field-day .preview-canvas .spiral-path path,
.preview.field-view.field-day .preview-canvas #main-spiral path,
.preview.field-view.field-day .preview-canvas #trued-spiral path,
.preview.field-view.field-day .preview-canvas #wind-spiral path,
.preview.field-view.field-day .preview-canvas #da-low-spiral path,
.preview.field-view.field-day .preview-canvas #da-high-spiral path,
.preview.field-view.field-day .preview-canvas #rifle2-spiral path {
  stroke: var(--luminova-chalk) !important;
}

/* Nodes/dots - chalk white (only in .nodes groups, not all circles) */
.preview.field-view.field-day .preview-canvas .nodes circle,
.preview.field-view.field-day .preview-canvas .wind-nodes circle {
  fill: var(--luminova-chalk) !important;
  stroke: var(--luminova-chalk) !important;
}

/* Eggs - chalk white */
.preview.field-view.field-day .preview-canvas .da-egg {
  stroke: var(--luminova-chalk) !important;
}

/* Bezel numbers - chalk white */
.preview.field-view.field-day .preview-canvas .bezel-numbers text {
  fill: var(--luminova-chalk) !important;
}

/* CNC glyph paths - chalk white stroke */
.preview.field-view.field-day .preview-canvas .bezel-number-glyph {
  stroke: var(--luminova-chalk) !important;
  filter: none !important; /* No glow in day mode */
}

/* Mobile DA eggs - stroke only (no fill) to match desktop field view */
.mobile-disk-preview .da-egg {
  fill: none !important;
  stroke: var(--luminova-primary) !important;
  stroke-width: 0.3 !important;
  filter: url(#luminovaGlow);
}

/* Mobile DA eggs - day mode adjustment */
.mobile-disk-preview.field-day .da-egg {
  stroke: var(--luminova-chalk) !important;
}

/* Reticle - chalk white */
.preview.field-view.field-day .preview-canvas .reticle-layer path,
.preview.field-view.field-day .preview-canvas .reticle-layer line,
.preview.field-view.field-day .preview-canvas .reticle-group path,
.preview.field-view.field-day .preview-canvas .reticle-group line,
.preview.field-view.field-day .preview-canvas .scale-axis,
.preview.field-view.field-day .preview-canvas .scale-tick {
  stroke: var(--luminova-chalk) !important;
}

.preview.field-view.field-day .preview-canvas .reticle-layer text,
.preview.field-view.field-day .preview-canvas .reticle-group text,
.preview.field-view.field-day .preview-canvas .scale-label {
  fill: var(--luminova-chalk) !important;
}

/* CNC glyph paths for reticle numbers - chalk white, no glow */
.preview.field-view.field-day .preview-canvas .reticle-number-glyph {
  stroke: var(--luminova-chalk) !important;
  filter: none !important;
}

/* KNOMAD logo - chalk white */
.preview.field-view.field-day .preview-canvas .knomad-logo-path {
  stroke: var(--luminova-chalk) !important;
}

/* Lanyard strokes - satin patina finish on outer edge (touched by hands) */
.preview.field-view.field-day #spiralPreview .lanyard-outline,
.field-day #spiralPreview .lanyard-outline {
  stroke: var(--luminova-chalk) !important;
  stroke-width: 0.6 !important; /* Slightly thicker for satin effect */
  stroke-opacity: 0.7 !important; /* More opaque - frosted satin patina */
}
.preview.field-view.field-day #spiralPreview .lanyard-edge,
.field-day #spiralPreview .lanyard-edge {
  stroke: #ffffff !important;
  stroke-width: 0.2 !important; /* Slightly thicker highlight */
  stroke-opacity: 0.85 !important; /* More visible - satin finish */
}

/* Lanyard reveal edge - metallic mirror line for polycarbonate depth (DAY MODE ONLY) */
.preview.field-view.field-day #spiralPreview .lanyard-reveal,
.field-day #spiralPreview .lanyard-reveal {
  stroke: rgba(255, 255, 255, 0.9) !important;
  stroke-width: 0.12 !important; /* Very fine metallic line */
  stroke-opacity: 1 !important;
  filter: drop-shadow(0 0 1px rgba(220, 235, 255, 0.9)) !important; /* Icy shimmer */
}

/* Lanyard reveal shadow - dark grey bevel line opposite the bright reveal (DAY MODE ONLY) */
.preview.field-view.field-day #spiralPreview .lanyard-reveal-shadow,
.field-day #spiralPreview .lanyard-reveal-shadow {
  stroke: rgba(40, 45, 50, 0.7) !important;
  stroke-width: 0.12 !important; /* Match reveal line width */
  stroke-opacity: 1 !important;
  filter: none !important;
}

/* Bezel grip - finer stroke widths for day mode (ID selector for max specificity) */
.preview.field-view.field-day #spiralPreview .bezel-grip-outline,
.field-day #spiralPreview .bezel-grip-outline {
  stroke: var(--luminova-chalk) !important;
  stroke-width: 0.5 !important; /* Finer than night mode 0.72 */
  stroke-opacity: 0.45 !important;
}
.preview.field-view.field-day #spiralPreview .bezel-grip-edge,
.field-day #spiralPreview .bezel-grip-edge {
  stroke: #ffffff !important;
  stroke-width: 0.15 !important; /* Finer than night mode 0.24 */
  stroke-opacity: 0.65 !important;
}

/* Bezel grip reveal edge - metallic mirror line for polycarbonate depth (DAY MODE ONLY) */
.preview.field-view.field-day #spiralPreview .bezel-grip-reveal,
.field-day #spiralPreview .bezel-grip-reveal {
  stroke: rgba(255, 255, 255, 0.9) !important;
  stroke-width: 0.12 !important; /* Very fine metallic line */
  stroke-opacity: 1 !important;
  filter: drop-shadow(0 0 1px rgba(220, 235, 255, 0.9)) !important; /* Icy shimmer */
}

/* Bezel grip reveal shadow - dark grey bevel line opposite the bright reveal (DAY MODE ONLY) */
.preview.field-view.field-day #spiralPreview .bezel-grip-reveal-shadow,
.field-day #spiralPreview .bezel-grip-reveal-shadow {
  stroke: rgba(40, 45, 50, 0.7) !important;
  stroke-width: 0.12 !important; /* Match reveal line width */
  stroke-opacity: 1 !important;
  filter: none !important;
}

/* Hide luminova shadows in day mode */
.field-day #spiralPreview .lanyard-shadow,
.field-day #spiralPreview .bezel-grip-shadow {
  display: none !important;
  visibility: hidden !important;
}

/* Lanyard polycarbonate thickness - stronger smoky blue outer glow */
.field-day #spiralPreview .lanyard-outline,
.field-day #spiralPreview .lanyard-edge {
  filter: drop-shadow(0 0 3px rgba(90, 130, 170, 0.35))
    drop-shadow(0 0 6px rgba(70, 110, 150, 0.25)) drop-shadow(0 0 10px rgba(60, 100, 140, 0.15)) !important;
}

/* Bezel grip - subtle smoky blue outer glow */
.field-day #spiralPreview .bezel-grip-outline,
.field-day #spiralPreview .bezel-grip-edge {
  filter: drop-shadow(0 0 2px rgba(100, 140, 180, 0.25))
    drop-shadow(0 0 4px rgba(80, 120, 160, 0.15)) !important;
}

/* Polycarbonate fill - lanyard gets stronger depth shadow */
.field-day #spiralPreview .lanyard-fill {
  filter: drop-shadow(0 0 8px rgba(60, 100, 140, 0.3)) !important;
}
.field-day #spiralPreview .bezel-grip-fill {
  filter: drop-shadow(0 0 6px rgba(70, 110, 150, 0.2)) !important;
}

/* Leather backing is added/removed via JavaScript in app.js */
/* No CSS needed - element only exists in day mode */

/* ============================================
   STADIA NODES - RANGE FINDER
   Theme-aware styling for stadia node circles and labels
   ============================================ */

/* Default (Engineer View) - dark gray for visibility on light background */
.stadia-node-circle {
  fill: none;
  stroke: #333;
  stroke-width: 0.5;
}

/* CONFIRMATION NODES - QC checkpoints at 5.0 mil (100yd) and 1.0 mil (500yd) */
/* Pointer should sit concentrically inside these when bezel shows corresponding range */
.stadia-node-circle.confirmation-node {
  stroke: #e91e63;
  stroke-width: 0.75;
  fill: none;
}

/* ============================================
   RANGE FINDER POINTER
   Arrow element on rotating disk that sweeps across stadia nodes
   ============================================ */

/* Default (Engineer View) - cyan pointer for visibility */
.pointer-arrow-head {
  fill: #00bcd4;
  stroke: #006064;
  stroke-width: 0.5;
}

.pointer-tail {
  stroke: #00bcd4;
  stroke-width: 2;
}

.pointer-attach-point {
  fill: #ff4081;
  stroke: none;
}

/* MVP Pointer Dot - simple cyan dot */
.pointer-dot {
  fill: #00bcd4;
  stroke: none;
}

.range-finder-pointer line {
  stroke: #00bcd4;
  stroke-width: 1;
}

.stadia-node-label {
  fill: #333;
  font-family: sans-serif;
}

.stadia-inch-label {
  fill: #666;
}

.stadia-moa-label {
  fill: #555;
  font-family: sans-serif;
}

/* Field View Night Mode - luminova glow */
.preview.field-view .preview-canvas .stadia-node-circle {
  fill: none;
  stroke: var(--luminova-primary);
  stroke-width: 0.5;
  filter: url(#luminovaGlow);
}

/* Field View Night Mode - Confirmation nodes with enhanced luminova glow */
.preview.field-view .preview-canvas .stadia-node-circle.confirmation-node {
  stroke: var(--luminova-primary);
  stroke-width: 1;
  fill: none;
  filter: url(#luminovaGlow);
}

/* Field View Night Mode - Pointer with luminova glow */
.preview.field-view .preview-canvas .pointer-arrow-head {
  fill: var(--luminova-primary);
  stroke: var(--luminova-soft);
  stroke-width: 0.5;
  filter: url(#luminovaGlow);
}

.preview.field-view .preview-canvas .pointer-tail {
  stroke: var(--luminova-primary);
  stroke-width: 2;
  filter: url(#luminovaGlow);
}

.preview.field-view .preview-canvas .pointer-attach-point {
  fill: var(--luminova-accent, #ff6b9d);
  filter: url(#luminovaGlow);
}

/* Field View Night Mode - Pointer Dot with luminova glow */
.preview.field-view .preview-canvas .pointer-dot {
  fill: var(--luminova-primary);
  stroke: none;
  filter: url(#luminovaGlow);
}

.preview.field-view .preview-canvas .range-finder-pointer line {
  stroke: var(--luminova-primary);
  stroke-width: 1;
  filter: url(#luminovaGlow);
}

.preview.field-view .preview-canvas .stadia-node-label {
  fill: var(--luminova-primary);
  filter: url(#luminovaGlow);
}

.preview.field-view .preview-canvas .stadia-inch-label {
  fill: var(--luminova-primary);
  filter: url(#luminovaGlow);
  opacity: 0.85; /* Slightly dimmer than mils to establish hierarchy */
}

.preview.field-view .preview-canvas .stadia-moa-label {
  fill: var(--luminova-primary);
  filter: url(#luminovaGlow);
  opacity: 0.85; /* Slightly dimmer than mils to establish hierarchy */
}

/* Field View Day Mode - chalk white, no glow */
.preview.field-view.field-day .preview-canvas .stadia-node-circle {
  stroke: var(--luminova-chalk) !important;
  filter: none !important;
}

/* Field View Day Mode - Confirmation nodes with distinct chalk border */
.preview.field-view.field-day .preview-canvas .stadia-node-circle.confirmation-node {
  stroke: var(--luminova-chalk) !important;
  stroke-width: 1 !important;
  fill: none !important;
  filter: none !important;
}

.preview.field-view.field-day .preview-canvas .stadia-node-label {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
}

.preview.field-view.field-day .preview-canvas .stadia-inch-label {
  fill: var(--luminova-chalk) !important;
  opacity: 0.7;
  filter: none !important;
}

.preview.field-view.field-day .preview-canvas .stadia-moa-label {
  fill: var(--luminova-chalk) !important;
  opacity: 0.7;
  filter: none !important;
}

/* Field View Day Mode - Pointer Dot chalk white, no glow */
.preview.field-view.field-day .preview-canvas .pointer-dot {
  fill: var(--luminova-chalk) !important;
  stroke: none !important;
  filter: none !important;
}

.preview.field-view.field-day .preview-canvas .range-finder-pointer line {
  stroke: var(--luminova-chalk) !important;
  stroke-width: 1 !important;
  filter: none !important;
}

/* ============================================
   DISPERSION WHISKERS - σ_v bars perpendicular to spiral
   Shows vertical dispersion at 100yd intervals
   ============================================ */

/* Default (Engineer View) - amber for visibility */
.dispersion-whisker {
  stroke: #ff9800;
  stroke-width: 0.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.dispersion-whisker-center {
  fill: #ff9800;
  opacity: 0.6;
}

.dispersion-whisker-tip {
  fill: #ff9800;
  opacity: 0.75;
}

/* Field View Night Mode - luminova glow */
.preview.field-view .preview-canvas .dispersion-whisker {
  stroke: var(--luminova-secondary, #ffcc00);
  stroke-width: 0.4;
  stroke-linejoin: round;
  filter: url(#luminovaGlow);
  opacity: 0.9;
}

.preview.field-view .preview-canvas .dispersion-whisker-center {
  fill: var(--luminova-secondary, #ffcc00);
  filter: url(#luminovaGlow);
  opacity: 0.7;
}

.preview.field-view .preview-canvas .dispersion-whisker-tip {
  fill: var(--luminova-secondary, #ffcc00);
  filter: url(#luminovaGlow);
  opacity: 0.85;
}

/* Field View Day Mode - chalk white, no glow */
.preview.field-view.field-day .preview-canvas .dispersion-whisker {
  stroke: var(--luminova-chalk) !important;
  stroke-width: 0.4 !important;
  stroke-linejoin: round;
  filter: none !important;
  opacity: 0.7;
}

.preview.field-view.field-day .preview-canvas .dispersion-whisker-center {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
  opacity: 0.5;
}

.preview.field-view.field-day .preview-canvas .dispersion-whisker-tip {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
  opacity: 0.6;
}

/* ============================================
   DISPERSION DIAMOND CONFLICT STATES
   Diamonds that overlap with labels, eggs, or max range
   ============================================ */

/* Any conflict - reduce opacity to avoid visual clutter */
.dispersion-whisker--conflict {
  opacity: 0.4;
}

/* Label conflict - near integer mil values where reticle numbers appear */
.dispersion-whisker--label-conflict {
  stroke-dasharray: 1 1;
}

/* Max range conflict - at the end of spiral, near max range label */
.dispersion-whisker--max-conflict {
  opacity: 0.3;
}

/* DA egg conflict - in the outer zone where eggs render */
.dispersion-whisker--egg-conflict {
  stroke-dasharray: 0.5 0.5;
}

/* Field View Night Mode - conflict states */
.preview.field-view .preview-canvas .dispersion-whisker--conflict {
  opacity: 0.5;
  filter: none; /* Remove glow for conflicting diamonds */
}

/* Field View Day Mode - conflict states */
.preview.field-view.field-day .preview-canvas .dispersion-whisker--conflict {
  opacity: 0.35;
}

/* ============================================
   LEAD NODES - Moving target lead indicators
   Shows ToF × speed lead at 60yd intervals
   ============================================ */

/* Default (Engineer View) - cyan for contrast with amber whiskers */
.lead-node-tick {
  stroke: #00bcd4;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.9;
}

.lead-node-dot {
  fill: #00bcd4;
  opacity: 0.8;
}

.lead-node-label {
  font-size: 6px;
  fill: #00bcd4;
  font-family: monospace;
  opacity: 0.9;
}

/* Field View Night Mode - luminova glow */
.preview.field-view .preview-canvas .lead-node-tick {
  stroke: var(--luminova-primary, #39FF14);
  stroke-width: 2;
  filter: url(#luminovaGlow);
  opacity: 0.9;
}

.preview.field-view .preview-canvas .lead-node-dot {
  fill: var(--luminova-primary, #39FF14);
  filter: url(#luminovaGlow);
  opacity: 0.8;
}

.preview.field-view .preview-canvas .lead-node-label {
  fill: var(--luminova-primary, #39FF14);
  filter: url(#luminovaGlow);
  font-size: 5px;
}

/* Field View Day Mode - chalk white */
.preview.field-view.field-day .preview-canvas .lead-node-tick {
  stroke: var(--luminova-chalk) !important;
  stroke-width: 1.5 !important;
  filter: none !important;
  opacity: 0.7;
}

.preview.field-view.field-day .preview-canvas .lead-node-dot {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
  opacity: 0.6;
}

.preview.field-view.field-day .preview-canvas .lead-node-label {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
  font-size: 5px;
}

/* PRD-33: Lead reticle marker (Field Expedient) */
.lead-marker {
  pointer-events: all;
}

.lead-marker-dot {
  cursor: help;
  transition: opacity 0.2s;
}

.lead-marker-dot:hover {
  opacity: 1 !important;
}

/* Field View Night Mode - luminova glow for lead marker */
.preview.field-view .preview-canvas .lead-marker-dot {
  fill: var(--luminova-primary, #00E5FF);
  stroke: var(--luminova-primary, #00E5FF);
  filter: url(#luminovaGlow);
}

/* Field View Day Mode - chalk white for lead marker */
.preview.field-view.field-day .preview-canvas .lead-marker-dot {
  fill: var(--luminova-chalk) !important;
  stroke: var(--luminova-chalk) !important;
  filter: none !important;
}

/* Lab View - gold color for lead marker */
.preview:not(.field-view) .preview-canvas .lead-marker-dot {
  fill: var(--lead-marker-color, #FFD700);
  stroke: #ffffff;
}

/* PRD-33: Lead marker triangle (Field Expedient) */
.lead-marker-triangle {
  cursor: help;
  pointer-events: all;
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* Field View Night Mode - luminova glow applied at GROUP level to preserve center gap */
.preview.field-view .preview-canvas .lead-marker {
  filter: url(#luminovaGlow);
}
.preview.field-view .preview-canvas .lead-marker-triangle {
  fill: var(--luminova-primary, #00E5FF);
  stroke: var(--luminova-primary, #00E5FF);
}

/* Field View Day Mode - chalk white for lead triangle, no glow */
.preview.field-view.field-day .preview-canvas .lead-marker {
  filter: none !important;
}
.preview.field-view.field-day .preview-canvas .lead-marker-triangle {
  fill: var(--luminova-chalk, #f5f5f0) !important;
  stroke: var(--luminova-chalk, #f5f5f0) !important;
}

/* Lab View - gold/orange color for lead triangle */
.preview:not(.field-view) .preview-canvas .lead-marker-triangle {
  fill: var(--status-warning, #ff9800);
  stroke: var(--status-warning, #ff9800);
}

/* ============================================
   WIND COSINE FAN — Fixed bottom disk reference
   Three dashed spokes at 30°/45°/60° from
   vertical reticle. Same depth treatment as
   reticle (luminovaTransmit, 0.85 opacity).
   ============================================ */

/* Field View Night — luminova glow (softer, fixed-disk depth) */
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-line,
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-tick {
  stroke: var(--luminova-primary) !important;
  filter: url(#luminovaTransmit);
}
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-factor,
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-clock {
  fill: var(--luminova-primary) !important;
  filter: url(#luminovaTransmit);
}
.preview.field-view .preview-canvas .wind-cosine-fan {
  opacity: 0.85; /* Depth dimming — seen through top polycarbonate */
}
/* Reset per-element opacity (Lab uses 0.5–0.7; Field View relies on group 0.85 + filter) */
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-line,
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-tick,
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-factor,
.preview.field-view .preview-canvas .wind-cosine-fan .cosine-fan-clock {
  opacity: 1 !important;
}

/* Field View Day — chalk white, no glow */
.preview.field-view.field-day .preview-canvas .wind-cosine-fan .cosine-fan-line,
.preview.field-view.field-day .preview-canvas .wind-cosine-fan .cosine-fan-tick {
  stroke: var(--luminova-chalk) !important;
  filter: none !important;
}
.preview.field-view.field-day .preview-canvas .wind-cosine-fan .cosine-fan-factor,
.preview.field-view.field-day .preview-canvas .wind-cosine-fan .cosine-fan-clock {
  fill: var(--luminova-chalk) !important;
  filter: none !important;
}

/* Field View Storm — muted luminova, subtle drop-shadow */
.preview.field-view.field-storm .preview-canvas .wind-cosine-fan .cosine-fan-line,
.preview.field-view.field-storm .preview-canvas .wind-cosine-fan .cosine-fan-tick {
  stroke: var(--luminova-storm, #c8d0dc) !important;
}
.preview.field-view.field-storm .preview-canvas .wind-cosine-fan .cosine-fan-factor,
.preview.field-view.field-storm .preview-canvas .wind-cosine-fan .cosine-fan-clock {
  fill: var(--luminova-storm, #c8d0dc) !important;
}

/* Lab/Engineer View — muted cyan for visibility without luminova */
.preview:not(.field-view) .preview-canvas .wind-cosine-fan .cosine-fan-line,
.preview:not(.field-view) .preview-canvas .wind-cosine-fan .cosine-fan-tick {
  stroke: var(--accent-primary, #00bcd4);
}
.preview:not(.field-view) .preview-canvas .wind-cosine-fan .cosine-fan-factor,
.preview:not(.field-view) .preview-canvas .wind-cosine-fan .cosine-fan-clock {
  fill: var(--accent-primary, #00bcd4);
}

/* ============================================
   WEATHER EFFECTS - Rain overlay for Field View
   Demonstrates all-weather capability
   ============================================ */

/* Rain container - positioned over the preview */
.preview.field-view.weather-rain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  background:
    /* Rain streaks layer 1 - fast, thin */
    repeating-linear-gradient(
      95deg,
      transparent,
      transparent 2px,
      rgba(174, 194, 224, 0.15) 2px,
      rgba(174, 194, 224, 0.15) 3px
    ),
    /* Rain streaks layer 2 - slower, thicker */
    repeating-linear-gradient(
        100deg,
        transparent,
        transparent 4px,
        rgba(174, 194, 224, 0.1) 4px,
        rgba(174, 194, 224, 0.1) 6px
      );
  background-size:
    50px 50px,
    80px 80px;
  animation: rain-fall 0.4s linear infinite;
  border-radius: inherit;
}

/* Mist/fog overlay for atmosphere */
.preview.field-view.weather-rain::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(100, 120, 140, 0.15) 70%,
    rgba(80, 100, 120, 0.25) 100%
  );
  border-radius: inherit;
}

/* Rain animation - diagonal falling motion */
@keyframes rain-fall {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      50px 100px,
      80px 160px;
  }
}

/* Day mode rain - slightly more visible against bright background */
.preview.field-view.field-day.weather-rain::before {
  background:
    repeating-linear-gradient(
      95deg,
      transparent,
      transparent 2px,
      rgba(100, 120, 150, 0.2) 2px,
      rgba(100, 120, 150, 0.2) 3px
    ),
    repeating-linear-gradient(
      100deg,
      transparent,
      transparent 4px,
      rgba(100, 120, 150, 0.15) 4px,
      rgba(100, 120, 150, 0.15) 6px
    );
  background-size:
    50px 50px,
    80px 80px;
}

.preview.field-view.field-day.weather-rain::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(150, 160, 170, 0.2) 70%,
    rgba(130, 140, 150, 0.3) 100%
  );
}

/* Weather toggle button icon */
#weatherToggle .weather-icon {
  font-size: 14px;
}

/* Show rain icon when active */
#weatherToggle.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

/* ============================================
   STORM MODE - Overcast lighting with lightning
   Halfway between day and night
   ============================================ */

/* Storm mode base - overcast gray-blue palette */
.preview.field-view.field-storm {
  --luminova-storm: #c8d0dc; /* Muted gray-white luminova */
  --storm-sky: #3a4552; /* Overcast gray-blue */
  --storm-ambient: rgba(180, 195, 210, 0.6); /* Diffuse storm light */

  /* Override luminova colors for storm */
  --luminova-primary: #c8d0dc;
  --luminova-bright: #e0e6ee;
  --luminova-soft: #a8b4c4;
}

/* Storm background - darker overcast */
.preview.field-view.field-storm {
  background:
    radial-gradient(
      ellipse 120% 100% at 50% 0%,
      rgba(60, 75, 90, 0.9) 0%,
      rgba(45, 55, 70, 0.95) 40%,
      rgba(30, 40, 55, 1) 100%
    ),
    image-set(
        url('/static/img/topo-background.webp') type('image/webp'),
        url('/static/img/topo-background.webp') type('image/jpeg')
      )
      center/cover no-repeat,
    #1a2530 !important;
}

/* Storm mode elements - muted luminova without full glow */
.preview.field-view.field-storm .preview-canvas path,
.preview.field-view.field-storm .preview-canvas line,
.preview.field-view.field-storm .preview-canvas text,
.preview.field-view.field-storm .preview-canvas polygon,
.preview.field-view.field-storm .preview-canvas circle {
  filter: drop-shadow(0 0 2px rgba(200, 210, 220, 0.3)) !important;
}

/* Spiral paths - storm luminova */
.preview.field-view.field-storm .preview-canvas .spiral-path path,
.preview.field-view.field-storm .preview-canvas #main-spiral path,
.preview.field-view.field-storm .preview-canvas #trued-spiral path {
  stroke: var(--luminova-storm) !important;
}

/* Lightning flash overlay */
.preview.field-view.field-storm.lightning-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 20%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(220, 230, 255, 0.4) 30%,
    transparent 70%
  );
  z-index: 100;
  pointer-events: none;
  animation: lightning-flash 0.15s ease-out forwards;
  border-radius: inherit;
}

@keyframes lightning-flash {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0.8;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* During lightning flash, boost luminova brightness momentarily */
.preview.field-view.field-storm.lightning-flash .preview-canvas path,
.preview.field-view.field-storm.lightning-flash .preview-canvas text,
.preview.field-view.field-storm.lightning-flash .preview-canvas circle {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 12px rgba(200, 230, 255, 0.6)) !important;
}

/* Storm canvas overlay - rain simulation from StormEngine WebGL */
/* ISOLATION: Only visible when .field-storm is active on parent */
#stormCanvasWebGL,
#sideRainCanvas,
#lightningOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  /* Hidden by default - only shown in storm mode */
  display: none;
}

/* Storm elements only visible in Storm mode */
.preview.field-view.field-storm #stormCanvasWebGL,
.preview.field-view.field-storm #sideRainCanvas,
.preview.field-view.field-storm #lightningOverlay {
  display: block;
}

#stormCanvasWebGL {
  z-index: 1; /* Behind .preview-canvas (z-index: 2) but above background */
}

#sideRainCanvas {
  z-index: 0; /* Behind storm canvas, shows background rain for depth */
}

#lightningOverlay {
  z-index: 200; /* Above everything for flash effect */
}

/* ============================================
   SCENE SELECTOR - Active scene indicators
   ============================================ */

/* Scene selector trigger shows current scene icon */
.scene-selector__trigger .scene-icon {
  margin-right: 4px;
}

/* Hide scene-specific toggles when using scene selector */
.scene-selector-active #dayNightToggle,
.scene-selector-active #weatherToggle {
  display: none;
}

/* ============================================
   STORM CONTROLS BENTO - Compact effect controls
   Only visible in Storm mode
   ============================================ */

.storm-controls-bento {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 200px;
  background: var(--dark-bg-1-solid);
  border: 1px solid var(--cyan-30);
  border-radius: 10px;
  z-index: 1000;
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: none; /* Hidden by default, shown via JS */
}

.storm-controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--cyan-15);
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--cyan-20);
}

.storm-controls-title {
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.5px;
}

.storm-controls-toggle {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
}

.storm-controls-toggle:hover {
  color: var(--cyan);
}

.storm-controls-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.storm-row {
  display: grid;
  grid-template-columns: 55px 1fr 32px;
  align-items: center;
  gap: 6px;
}

.storm-row label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.storm-row input[type='range'] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--cyan-20);
  border-radius: 2px;
  cursor: pointer;
}

.storm-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  cursor: pointer;
}

.storm-row span {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
}

.storm-toggles {
  display: flex;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--cyan-10);
}

.storm-toggles label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

.storm-toggles input[type='checkbox'] {
  width: 12px;
  height: 12px;
  accent-color: var(--cyan);
}

.storm-btn {
  background: var(--cyan-20);
  border: 1px solid var(--cyan-30);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.storm-btn:hover {
  background: var(--cyan-30);
}

.storm-btn:active {
  background: var(--cyan-40);
}