/* ════════════════════════════════════════════════════════════════
   EHDarkMuse — alyx-v2.17.css
   ────────────────────────────────────────────────────────────────
   Three things, all in response to v2.10 test feedback:

   1. The palette default became 'slate' (true neutral gray). The
      backgrounds across the app now read from the preset's CSS
      vars, but we also push a slightly higher contrast floor in
      case a preset is partially loaded.

   2. The cell-edit "ventanita" (#ceditOverlay) and shortcuts /
      firstrun overlays used hardcoded near-black backgrounds in
      styles.css. We swap them for the active --bg2 / --bg3 so
      they ride the preset and feel less like caves.

   3. The palette panel itself now has a neutral, slightly lifted
      background so the close button reads cleanly against it.
   ════════════════════════════════════════════════════════════════ */

/* ─ 1. Global floor: lift the deepest surfaces a notch ──────── */
:root {
  /* Only used if a preset hasn't set these (defensive) */
  --ehdm-floor-1: rgba(255,255,255,.025);
  --ehdm-floor-2: rgba(255,255,255,.045);
}

/* If localStorage was empty before v2.17 the user landed on the
   industrial #121212 base from palette-v10.css. Even after the
   slate preset applies, palette-v10.css still cascades into a few
   nested selectors. These overrides ride above it. */
body, .app-shell, .app-main {
  background: var(--bg) !important;
}

/* Right-side context panel — was leaning very dark on slate */
.ctx-panel {
  background: var(--bg2) !important;
  border-left: 1px solid var(--border) !important;
}
.ctx-section {
  background: transparent !important;
}

/* ─ 2. Modal "ventanitas" — ride the active preset ──────────── */
.cedit-overlay {
  background: rgba(0,0,0,.55) !important;      /* scrim, not panel */
}
.cedit-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.55),
              0 0 0 1px rgba(255,255,255,.04) !important;
}
.cedit-header {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
}
.cedit-ta {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.cedit-footer {
  background: var(--bg3) !important;
  border-top: 1px solid var(--border) !important;
}

.shortcuts-overlay { background: rgba(0,0,0,.55) !important; }
.shortcuts-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
}

/* v1.0-clean: was rgba(0,0,0,.6) — too transparent against the
   colorful waveform cells behind it, made the modal text unreadable
   (see screenshot bug report). Reverted to opaque so it functions as
   an actual first-run gate, not a tinted overlay on top of the app. */
.firstrun-overlay {
  background: var(--bg) !important;
}
.narrative-overlay {
  background: rgba(0,0,0,.6) !important;
}

/* Advanced Tools Panel — also rides the preset */
.atp-overlay  { background: rgba(0,0,0,.55) !important; }
.atp-panel,
.atp-shell {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
}

/* ─ 3. Palette panel — lifted neutral background so the close ─
       button (now a real bordered pill) has contrast against it. */
#ehdmThemePanel {
  background: var(--bg3) !important;
}

/* Active swatch card highlight tweak — accent ring instead of
   purple-only, so it reads on the new slate background too. */
.ehdm-preset-card.active {
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) !important;
}

/* ─ 4. Sequencer cells: bump base contrast slightly on slate ── */
.seq-cell {
  background-color: var(--bg3);
}
.seq-cell:hover {
  background-color: var(--bg4);
}

/* ─ 5. Sidebar / topbar — match the new floor ───────────────── */
.app-topbar,
.step-bar,
.sidebar,
.lsidebar,
.timeline-bar {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

/* ─ 6. Simple Mode overlay — same treatment ─────────────────── */
.simple-mode-overlay,
.sm2-topbar {
  background: var(--bg) !important;
}
.sr-root {
  background: var(--bg) !important;
}
.sr-root .sr-card,
.sr-root .sr-panel {
  background: var(--bg2) !important;
}