/* ═══ Unified Operator Deck — shared instrument chrome ═══ */

:root {
  /* Card chrome */
  --deck-card-bg: linear-gradient(145deg, rgba(14, 12, 20, 0.94) 0%, rgba(6, 6, 12, 0.98) 100%);
  --deck-card-border: rgba(140, 120, 60, 0.28);
  --deck-card-radius: 6px;
  --deck-card-padding: 1.25rem;
  --deck-card-shadow: 0 10px 36px rgba(0, 0, 0, 0.72), 0 0 1px rgba(80, 60, 140, 0.25);
  --deck-card-glow: rgba(0, 232, 245, 0.12);
  --deck-card-accent-bar: var(--neon-cyan, #00e8f5);

  /* Section accent (default command deck) */
  --deck-accent: var(--neon-cyan, #00e8f5);
  --deck-accent-secondary: var(--brass-light, #c4ad5a);
  --deck-accent-dim: rgba(0, 232, 245, 0.35);
  --deck-accent-glow: rgba(0, 232, 245, 0.45);
  --deck-accent-bg: rgba(0, 232, 245, 0.06);

  /* Persistent 4px left accent rail */
  --deck-accent-rail: var(--neon-cyan, #00e8f5);
  --deck-accent-rail-glow: rgba(0, 232, 245, 0.48);

  /* Interactive bounding box */
  --deck-interactive-outline: var(--deck-accent-dim);
  --deck-interactive-glow: var(--deck-accent-glow);
  --deck-interactive-radius: var(--deck-card-radius);
  --deck-interactive-dash: 8px;
  --deck-interactive-lift: -1px;
  --deck-interactive-btn-scale: 1.018;

  /* Ambient music UI (Layout sets data-operator-deck) */
  --deck-ambient-ui-opacity: 0.72;
}

/* ── Per-section accent tokens ── */
[data-operator-deck='dashboard'] {
  --deck-accent: var(--neon-cyan, #00e8f5);
  --deck-accent-secondary: var(--brass-light, #c4ad5a);
  --deck-accent-dim: rgba(0, 232, 245, 0.38);
  --deck-accent-glow: rgba(0, 232, 245, 0.5);
  --deck-accent-bg: rgba(0, 232, 245, 0.07);
  --deck-card-accent-bar: var(--neon-cyan);
  --deck-accent-rail: var(--neon-cyan, #00e8f5);
  --deck-accent-rail-glow: rgba(0, 232, 245, 0.5);
  --deck-ambient-ui-opacity: 0.68;
}

[data-operator-deck='fleet'] {
  --deck-accent: var(--neon-cyan, #00e8f5);
  --deck-accent-secondary: var(--neon-green, #2ee810);
  --deck-accent-dim: rgba(0, 232, 245, 0.34);
  --deck-accent-glow: rgba(0, 232, 245, 0.42);
  --deck-accent-bg: rgba(0, 232, 245, 0.05);
  --deck-card-accent-bar: var(--neon-cyan);
  --deck-accent-rail: var(--neon-green, #2ee810);
  --deck-accent-rail-glow: rgba(46, 232, 16, 0.46);
  --deck-ambient-ui-opacity: 0.7;
}

[data-operator-deck='crucible'] {
  --deck-accent: #c9a227;
  --deck-accent-secondary: #e85d4a;
  --deck-accent-dim: rgba(201, 162, 39, 0.42);
  --deck-accent-glow: rgba(232, 93, 74, 0.48);
  --deck-accent-bg: rgba(180, 50, 30, 0.08);
  --deck-card-accent-bar: #c9a227;
  --deck-accent-rail: #c9a227;
  --deck-accent-rail-glow: rgba(201, 162, 39, 0.52);
  --deck-ambient-ui-opacity: 0.75;
}

[data-operator-deck='forge'] {
  --deck-accent: var(--neon-amber, #e89830);
  --deck-accent-secondary: var(--neon-cyan, #00e8f5);
  --deck-accent-dim: rgba(232, 152, 48, 0.42);
  --deck-accent-glow: rgba(255, 180, 60, 0.55);
  --deck-accent-bg: rgba(232, 152, 48, 0.08);
  --deck-card-accent-bar: var(--neon-amber);
  --deck-accent-rail: var(--neon-cyan, #00e8f5);
  --deck-accent-rail-glow: rgba(0, 232, 245, 0.5);
  --deck-ambient-ui-opacity: 1;
}

[data-operator-deck='mission-deck'] {
  --deck-accent: #ff8c3a;
  --deck-accent-secondary: #ffd700;
  --deck-accent-dim: rgba(255, 140, 58, 0.42);
  --deck-accent-glow: rgba(255, 140, 58, 0.55);
  --deck-accent-bg: rgba(255, 140, 58, 0.08);
  --deck-card-accent-bar: #ff8c3a;
  --deck-accent-rail: #a78bfa;
  --deck-accent-rail-glow: rgba(167, 139, 250, 0.52);
  --deck-ambient-ui-opacity: 0.95;
}

[data-operator-deck='builds'] {
  --deck-accent: var(--brass-light, #c4ad5a);
  --deck-accent-secondary: var(--neon-cyan, #00e8f5);
  --deck-accent-dim: rgba(201, 162, 39, 0.38);
  --deck-accent-glow: rgba(201, 162, 39, 0.45);
  --deck-accent-bg: rgba(201, 162, 39, 0.07);
  --deck-card-accent-bar: var(--brass-light);
  --deck-accent-rail: var(--brass-light, #c4ad5a);
  --deck-accent-rail-glow: rgba(196, 173, 90, 0.48);
  --deck-ambient-ui-opacity: 0.55;
}

[data-operator-deck='emberwake'] {
  --deck-accent: #f43f5e;
  --deck-accent-secondary: #ff6b2c;
  --deck-accent-dim: rgba(244, 63, 94, 0.4);
  --deck-accent-glow: rgba(255, 107, 44, 0.5);
  --deck-accent-bg: rgba(244, 63, 94, 0.07);
  --deck-card-accent-bar: #ff6b2c;
  --deck-accent-rail: #f43f5e;
  --deck-accent-rail-glow: rgba(244, 63, 94, 0.5);
  --deck-ambient-ui-opacity: 0.8;
}

[data-operator-deck='settings'] {
  --deck-accent: var(--neon-purple, #a83ef0);
  --deck-accent-secondary: var(--text-muted, #5e5868);
  --deck-accent-dim: rgba(168, 62, 240, 0.28);
  --deck-accent-glow: rgba(168, 62, 240, 0.32);
  --deck-accent-bg: rgba(168, 62, 240, 0.05);
  --deck-card-accent-bar: var(--neon-purple);
  --deck-accent-rail: var(--neon-purple, #a83ef0);
  --deck-accent-rail-glow: rgba(168, 62, 240, 0.42);
  --deck-ambient-ui-opacity: 0.38;
}

[data-operator-deck='pathtracer'] {
  --deck-accent: var(--neon-cyan, #00e8f5);
  --deck-accent-secondary: var(--brass-light, #c4ad5a);
  --deck-accent-dim: rgba(0, 232, 245, 0.38);
  --deck-accent-glow: rgba(0, 232, 245, 0.45);
  --deck-accent-bg: rgba(0, 232, 245, 0.07);
  --deck-card-accent-bar: var(--neon-cyan);
  --deck-accent-rail: var(--neon-cyan, #00e8f5);
  --deck-accent-rail-glow: rgba(0, 232, 245, 0.48);
  --deck-ambient-ui-opacity: 0.55;
}

/* Forge seasonal skins override deck accent when present on page root */
[class*='forge-skin--'] {
  --deck-accent: var(--forge-accent, var(--neon-amber));
  --deck-accent-secondary: var(--forge-accent-secondary, var(--neon-cyan));
  --deck-accent-dim: var(--forge-accent-dim, rgba(232, 152, 48, 0.42));
  --deck-accent-glow: var(--forge-glow, rgba(255, 180, 60, 0.55));
  --deck-accent-bg: var(--forge-accent-bg, rgba(232, 152, 48, 0.08));
  --deck-card-accent-bar: var(--forge-accent, var(--neon-amber));
  --deck-accent-rail: var(--neon-cyan, #00e8f5);
  --deck-accent-rail-glow: rgba(0, 232, 245, 0.5);
}

/* ── Section accent rail (4px persistent left edge) ── */
[data-operator-deck] .main-content {
  position: relative;
}

[data-operator-deck] .main-content:not(:has(.operator-deck-page))::before,
.operator-deck-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--deck-accent-rail, var(--deck-accent));
  box-shadow: 0 0 18px var(--deck-accent-rail-glow, var(--deck-accent-glow));
  pointer-events: none;
  z-index: 3;
}

.operator-deck-page {
  position: relative;
}

/* ── Page shell ── */
.operator-deck-page .deck-hero::after {
  background: linear-gradient(90deg, var(--deck-accent), transparent);
  box-shadow: 0 0 12px var(--deck-accent-glow);
}

.operator-deck-page .deck-eyebrow {
  color: var(--deck-accent-secondary, var(--deck-accent));
}

/* ── Card chrome (layers on .card / .neon-card — does not replace page styles) ── */
.operator-deck-card {
  position: relative;
  border-radius: var(--deck-card-radius);
  box-shadow:
    var(--deck-card-shadow),
    0 0 28px -14px var(--deck-card-glow);
  transition:
    border-color 0.22s ease,
    box-shadow 0.28s ease;
}

.card.operator-deck-card,
.neon-card.operator-deck-card {
  border-color: color-mix(in srgb, var(--deck-card-border) 75%, var(--deck-accent-dim));
}

.operator-deck-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--deck-card-radius) var(--deck-card-radius) 0 0;
  background: linear-gradient(90deg, var(--deck-card-accent-bar), transparent 72%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.operator-deck-card:hover {
  border-color: color-mix(in srgb, var(--deck-card-border) 55%, var(--deck-accent));
  box-shadow:
    var(--deck-card-shadow),
    0 0 32px -10px var(--deck-accent-glow);
}

/* Emberwake spread sections — deck chrome without losing section accents */
.emberwake-page .spread-section.operator-deck-card {
  padding: var(--deck-card-padding);
  border-radius: var(--deck-card-radius);
  box-shadow:
    var(--deck-card-shadow),
    0 0 24px -12px var(--deck-accent-glow);
}

.emberwake-page .spread-section--ember.operator-deck-card { --deck-card-accent-bar: #ff6b2c; }
.emberwake-page .spread-section--cyan.operator-deck-card { --deck-card-accent-bar: #3dd6c6; }
.emberwake-page .spread-section--gold.operator-deck-card { --deck-card-accent-bar: #c9a227; }
.emberwake-page .spread-section--violet.operator-deck-card { --deck-card-accent-bar: #a78bfa; }
.emberwake-page .spread-section--war-room.operator-deck-card { --deck-card-accent-bar: #f43f5e; }

/* Builder form sections */
.builder-form .form-section.operator-deck-card {
  padding: var(--deck-card-padding);
  border-radius: var(--deck-card-radius);
}

/* ── Interactive bounding boxes (focus / hover outlines) ── */
@keyframes operator-interactive-dash-march {
  to {
    background-position:
      var(--deck-interactive-dash) 0,
      calc(-1 * var(--deck-interactive-dash)) 100%,
      0 var(--deck-interactive-dash),
      100% calc(-1 * var(--deck-interactive-dash));
  }
}

.operator-interactive {
  position: relative;
  transition:
    transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.22s ease,
    outline-color 0.22s ease;
  outline: 1px solid transparent;
  outline-offset: 2px;
}

/* Animated dashed ring — enhancement layer via ::before (does not replace outline) */
.operator-interactive::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--deck-interactive-radius) + 2px);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background:
    linear-gradient(90deg, var(--deck-interactive-outline) 50%, transparent 50%) 0 0 / var(--deck-interactive-dash) 1px repeat-x,
    linear-gradient(90deg, var(--deck-interactive-outline) 50%, transparent 50%) 0 100% / var(--deck-interactive-dash) 1px repeat-x,
    linear-gradient(0deg, var(--deck-interactive-outline) 50%, transparent 50%) 0 0 / 1px var(--deck-interactive-dash) repeat-y,
    linear-gradient(0deg, var(--deck-interactive-outline) 50%, transparent 50%) 100% 0 / 1px var(--deck-interactive-dash) repeat-y;
  transition: opacity 0.22s ease;
}

.operator-interactive:hover,
.operator-interactive:focus-within {
  outline-color: var(--deck-interactive-outline);
  box-shadow:
    0 0 0 1px var(--deck-interactive-outline),
    0 0 20px -6px var(--deck-interactive-glow);
}

.operator-interactive:hover::before,
.operator-interactive:focus-within::before {
  opacity: 1;
  animation: operator-interactive-dash-march 0.75s linear infinite;
}

.operator-interactive:focus-within {
  outline-color: var(--deck-accent);
  box-shadow:
    0 0 0 1px var(--deck-accent-dim),
    0 0 22px -4px var(--deck-interactive-glow);
}

.operator-interactive:focus-visible {
  outline: 2px solid var(--deck-accent);
  outline-offset: 3px;
}

/* Micro-lift — flat panels only; 3D neon cards keep their own tilt transform */
.operator-interactive:not(.neon-card-3d):hover,
.operator-interactive:not(.neon-card-3d):focus-within {
  transform: translateY(var(--deck-interactive-lift));
}

.neon-card-3d.operator-interactive:hover,
.neon-card-3d.operator-interactive:focus-within {
  transform: perspective(var(--perspective, 900px)) rotateX(2deg) translateY(calc(var(--deck-interactive-lift) - 3px));
}

/* Crucible node cards — lighter outline + compact lift */
.crucible-node-card.operator-interactive:hover:not(.selected),
.crucible-node-card.operator-interactive:focus-within:not(.selected) {
  outline-color: var(--deck-interactive-outline);
  transform: translateY(var(--deck-interactive-lift)) scale(1.008);
}

/* Tactile button scale within operator decks */
.operator-interactive-btn,
.operator-deck-page .btn:not(:disabled),
.operator-deck-page button:not(:disabled):not([role='switch']) {
  transition:
    transform 0.16s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.operator-interactive-btn:hover:not(:disabled),
.operator-interactive-btn:focus-visible:not(:disabled),
.operator-deck-page .btn:not(:disabled):hover,
.operator-deck-page .btn:not(:disabled):focus-visible,
.operator-deck-page button:not(:disabled):not([role='switch']):hover,
.operator-deck-page button:not(:disabled):not([role='switch']):focus-visible {
  transform: scale(var(--deck-interactive-btn-scale));
}

.operator-interactive-btn:active:not(:disabled),
.operator-deck-page .btn:not(:disabled):active,
.operator-deck-page button:not(:disabled):not([role='switch']):active {
  transform: scale(0.985);
}

/* Nested step panels inside fleet / forge wizards */
.fleet-policy-step-panel.operator-interactive,
.forge-mission-wizard .forge-mission-step-panel.operator-interactive {
  border-radius: var(--deck-interactive-radius);
  padding: 0.85rem 1rem;
  margin-top: 0.5rem;
}

/* Global music player — section-aware ambient UI intensity */
.global-music-player {
  opacity: var(--deck-ambient-ui-opacity);
  border-color: color-mix(in srgb, var(--deck-card-border) 60%, var(--deck-accent-dim));
}

.global-music-player:hover,
.global-music-player:focus-within {
  opacity: 1;
  border-color: color-mix(in srgb, var(--deck-accent-dim) 80%, var(--deck-accent));
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.6),
    0 0 16px var(--deck-accent-glow);
}

.global-music-player--ambient-dim {
  opacity: calc(var(--deck-ambient-ui-opacity) * 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .operator-deck-card,
  .operator-interactive,
  .operator-interactive-btn,
  .global-music-player {
    transition: none;
  }

  .operator-interactive::before {
    animation: none !important;
  }

  .operator-interactive:not(.neon-card-3d):hover,
  .operator-interactive:not(.neon-card-3d):focus-within,
  .crucible-node-card.operator-interactive:hover:not(.selected),
  .neon-card-3d.operator-interactive:hover,
  .neon-card-3d.operator-interactive:focus-within {
    transform: none;
  }

  .operator-interactive-btn:hover:not(:disabled),
  .operator-interactive-btn:active:not(:disabled),
  .operator-deck-page .btn:not(:disabled):hover,
  .operator-deck-page .btn:not(:disabled):active,
  .operator-deck-page button:not(:disabled):hover,
  .operator-deck-page button:not(:disabled):active {
    transform: none;
  }
}