/*
 * vest-theme.css — Shared VestApps visual theme
 * Based on AcidVest's dark industrial palette.
 * Import this in every standalone HTML and reference it from studio-instruments.js.
 *
 * Usage (standalone):
 *   <link rel="stylesheet" href="../vest-theme.css">
 *
 * Usage (carousel / studio):
 *   Already applied globally via studio-instruments.js injecting this sheet once.
 */

/* ── GLOBAL RESET / BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── CSS VARIABLES — single authoritative dark palette ───────────── */
:root {
  /* Backgrounds */
  --vst-bg:        #080808;
  --vst-surface:   #0f0f0f;
  --vst-surface2:  #141414;
  --vst-panel:     #0f0f0f;
  --vst-panel2:    #141414;

  /* Borders */
  --vst-border:    #1c1c1c;
  --vst-border2:   #2a2a2a;

  /* Accent — VSW purple (matches studio chrome) */
  --vst-accent:    #8b5cf6;
  --vst-accent2:   #a78bfa;

  /* Per-instrument accent colours (match studio nav pips) */
  --vst-acid:      #b8f020;
  --vst-arp:       #c8a0ff;
  --vst-chord:     #d480ff;
  --vst-drum:      #ff7040;
  --vst-glitch:    #f0cc44;
  --vst-karplus:   #20d0ff;
  --vst-pulse:     #a8e060;
  --vst-seq:       #f0cc44;
  --vst-tape:      #ff9060;
  --vst-mixer:     #8b5cf6;

  /* Text */
  --vst-text:      #e0e0e0;
  --vst-text-mid:  #888888;
  --vst-text-dim:  #444444;

  /* Danger / record */
  --vst-rec:       #ff4444;

  /* Typography */
  --vst-mono:      'DM Mono', 'Share Tech Mono', monospace;
  --vst-sans:      'Syne', sans-serif;
}

/* ── OVERRIDE: strip retro / futuro skin variables ───────────────── */
/* These are declared defensively — any .retro class applied by old code
   gets overridden back to dark values so nothing turns beige. */
body.retro,
.dv-root.retro,
.av-root.retro {
  --bg:       var(--vst-bg)       !important;
  --panel:    var(--vst-panel)    !important;
  --panel2:   var(--vst-panel2)   !important;
  --border:   var(--vst-border)   !important;
  --border2:  var(--vst-border2)  !important;
  --text:     var(--vst-text)     !important;
  --text-mid: var(--vst-text-mid) !important;
  --text-dim: var(--vst-text-dim) !important;
  background-image: none !important;
  background-color: var(--vst-bg) !important;
  font-family: var(--vst-mono) !important;
  /* Nuke the linen / sepia look */
  filter: none !important;
}

/* ── HIDE: skin toggle (retro/futuro switch) ─────────────────────── */
.skin-toggle,
#skinToggle,
[id*="skinToggle"],
[class*="skin-toggle"],
.skin-lbl,
.skin-sub,
.skin-thumb,
.skin-toggle-track {
  display: none !important;
}

/* ── HIDE: VestLink / Network badges ─────────────────────────────── */
.vl-badge,
#vlBadge,
.vln-open-btn,
#vlnOpenBtn,
.vestlink-badge,
[class*="vl-badge"],
[class*="vln-open"] {
  display: none !important;
}

/* ── HIDE: VestLink Network overlay panel ────────────────────────── */
.vln-panel,
#vlnPanel {
  display: none !important;
}

/* ── HIDE: external nav links (website, coffee, quick start, guide) ─ */
/* These selectors target the <a> elements by their typical text or href
   patterns used across all VestApps standalone pages. */
/*a[href*="decibelboy.com"],*/
/*a[href*="buymeacoffee.com"],*/
/*a[href*="vestsoundworks.com/vestapps-guide"],*/
a.nav-a,
a.nav-home,
a.nav-bmc,
a.nav-qs,
a[onclick*="openQS"],
a[onclick*="showQS"],
#qsBtn {
  display: none !important;
}

/* ── HIDE: BMC prompt modal ──────────────────────────────────────── */
.bmc-overlay,
#bmc-overlay {
  display: none !important;
}

/* ── HIDE: VestClip modal (handled centrally by TapeVest) ────────── */
/* Only hide in standalone — studio wires it centrally */
#vcModal {
  /* Not hidden globally: studio-instruments.js handles routing.
     Individual apps still need it. Leave visible. */
}

/* ── HIDE: VestNav side arrows + strip (standalone page nav) ──────── */
#vestNavLeft,
#vestNavRight,
#vestNavStrip,
.vn-arrow,
.vn-strip {
  display: none !important;
}

/* ── HIDE: BMC-style modal overlays ─────────────────────────────── */
.bmc-overlay { display: none !important; }

/* ── TRANSPORT STRIP: unified look across all apps ───────────────── */
/* In standalone pages, the header transport row uses module-specific
   classes. We normalise the background and border to match the studio. */
.dv-transport,
.cv-transport,
.inst-transport,
header .transport-cluster {
  background: var(--vst-surface) !important;
  border-color: var(--vst-border) !important;
}

/* ── PANELS: unified dark surface ────────────────────────────────── */
.panel,
.seq-bank-panel,
.cassette-panel,
.midi-panel {
  background: var(--vst-panel) !important;
  border-color: var(--vst-border) !important;
}

/* ── STEP BUTTONS: normalise hover glow to match AcidVest style ──── */
.dstep:hover { border-color: var(--vst-border2) !important; }

/* ── FOCUS RING: consistent purple outline everywhere ────────────── */
:focus-visible {
  outline: 2px solid var(--vst-accent) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ── SCROLLBARS: hide across the board (already set in most apps) ── */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* ── STANDALONE HEADER: strip legacy link clusters ───────────────── */
/* Some standalone pages have a .header-right that contains nav links
   and badge buttons. Hide the whole right cluster if it only has
   hidden children; don't hide it if it contains play/bpm controls. */
header .header-right {
  /* Use gap:0 so hidden children don't leave phantom spacing */
  gap: 0 !important;
}
header .header-right > *:not(.bpm-display):not(.play-btn):not(.bpm-cluster):not(button[class*="play"]) {
  display: none !important;
}

/* ── FOOTER: hide app footers in studio, clean them in standalone ── */
/* In studio (carousel) mode the .app-footer is already off-screen.
   In standalone we leave it visible but normalise its colour. */
.app-footer {
  color: var(--vst-text-dim) !important;
  border-top-color: var(--vst-border) !important;
}
.app-footer a {
  color: var(--vst-text-mid) !important;
}

/* ── MOBILE DOCK: retain but theme-match ────────────────────────── */
.transport-dock {
  background: var(--vst-surface) !important;
  border-top-color: var(--vst-border) !important;
}