/* VibeDJ studio design system (v68).
   One place for the studio's colour, spacing, radius, elevation, motion and
   type tokens. Loaded after the other head sheets so it refines, never
   redesigns, the existing dark, moody look. Inspire / taste-bundle sheets are
   intentionally not themed here. */
:root {
  /* Colour */
  --vd-bg-0:#0b0b0f; --vd-bg-1:#0d0d11; --vd-bg-2:#111116;
  --vd-surface-1:#15141d; --vd-surface-2:#1e1b29; --vd-surface-3:#28283a;
  --vd-border:#2a2a38; --vd-border-strong:#3a3150;
  --vd-text-1:#ece8f5; --vd-text-2:#c3bad3; --vd-text-3:#a69cb5; --vd-text-4:#8f86a3;
  --vd-accent:#7c3aed; --vd-accent-soft:#a78bfa; --vd-accent-glow:rgba(124,58,237,.4);
  --vd-warm:#f97316; --vd-success:#22c55e; --vd-danger:#ef4444; --vd-info:#06b6d4;
  --vd-focus:#c4b5fd;
  /* Spacing (4pt) */
  --vd-space-1:4px; --vd-space-2:8px; --vd-space-3:12px; --vd-space-4:16px; --vd-space-5:24px; --vd-space-6:32px;
  /* Radius */
  --vd-radius-sm:4px; --vd-radius-md:8px; --vd-radius-lg:12px; --vd-radius-xl:20px;
  /* Elevation */
  --vd-shadow-1:0 4px 16px rgba(0,0,0,.35);
  --vd-shadow-2:0 18px 50px rgba(0,0,0,.6);
  /* Motion */
  --vd-ease-out:cubic-bezier(.2,.8,.2,1); --vd-dur-1:120ms; --vd-dur-2:200ms; --vd-dur-3:320ms;
  /* Type: one family for landing and studio, and a fixed scale (no text under 11px). */
  --vd-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --vd-fs-2xs:.6875rem; --vd-fs-xs:.75rem; --vd-fs-sm:.8125rem; --vd-fs-md:.9375rem; --vd-fs-lg:1.125rem; --vd-fs-xl:1.5rem; --vd-fs-2xl:2rem; /* 11 12 13 15 18 24 32px */
  /* Hit targets */
  --vd-hit:32px; --vd-hit-touch:44px;
  /* Legacy names now resolve to the same tokens (one definition, AA contrast). */
  --bg:var(--vd-bg-2); --bg2:var(--vd-bg-1); --surface:#1a1a22; --surface2:#202028; --surface3:var(--vd-surface-3);
  --border:var(--vd-border); --border2:#333345;
  --accent:var(--vd-accent); --accent2:var(--vd-accent-soft); --text:#e8e8f2;
  --muted:var(--vd-text-3); --muted2:var(--vd-text-4);
  --orange:var(--vd-warm); --green:var(--vd-success);
}
body { font-family:var(--vd-font); font-variant-numeric:tabular-nums; }
.bpm-label,.vol-label { font-size:var(--vd-fs-2xs); }

/* ── Focus: one clearly visible ring everywhere (keyboard only). ─────────── */
body :where(a,button,input,select,textarea,summary,[tabindex],[role="button"],[role="tab"],[role="menuitem"]):focus-visible {
  outline:2px solid var(--vd-focus)!important; outline-offset:2px!important;
}
body :where(.clip,.beat-cell,.piano-key,.drum-pad):focus-visible { outline-offset:-2px!important; }

/* ── Hit targets: >=32px pointer, >=44px coarse (touch) without moving layout. */
body :is(.clip-play-btn,.clip-options-btn,.scene-options-btn,.scene-launch,.track-btn,.instrument-min-btn) { position:relative; }
body :is(.clip-play-btn,.clip-options-btn,.scene-options-btn,.scene-launch)::after {
  content:''; position:absolute; left:50%; top:50%; width:var(--vd-hit); height:var(--vd-hit); transform:translate(-50%,-50%); border-radius:6px;
}
body .track-controls .track-btn::after { content:''; position:absolute; left:50%; top:50%; width:28px; height:var(--vd-hit); transform:translate(-50%,-50%); }
@media (pointer:coarse) {
  body :is(.clip-play-btn,.clip-options-btn,.scene-options-btn,.scene-launch)::after { width:var(--vd-hit-touch); height:var(--vd-hit-touch); }
}

/* ── Playing clips: a clear beat-paced glow. Queued clips wait in a distinct
   dashed, breathing state. Motion is removed for prefers-reduced-motion. ── */
body .clip.playing {
  border-color:currentColor!important;
  box-shadow:0 0 0 1px currentColor,0 0 18px -3px currentColor,inset 0 0 20px rgba(0,0,0,.2);
}
body .clip.playing::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 16px currentColor; opacity:.12;
  animation:vd-clip-glow calc(var(--vd-beat,.46875s) * 2) ease-in-out infinite alternate;
}
body .clip.queued { outline:1.5px dashed var(--vd-success); outline-offset:-3px; }
body .clip.queued::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px);
  animation:vd-clip-queued 1s ease-in-out infinite alternate;
}
@keyframes vd-clip-glow { from { opacity:.12; } to { opacity:.5; } }
@keyframes vd-clip-queued { from { opacity:.3; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  body .clip.playing::after { animation:none; opacity:.35; }
  body .clip.queued::after { animation:none; opacity:.8; }
}

/* ── Hint spotlight (replaces the old arrow marker). ─────────────────────── */
.learning-pointer.learning-spotlight {
  position:fixed; z-index:200000; pointer-events:none; width:auto; height:auto; line-height:normal; filter:none;
  border-radius:12px;
  box-shadow:0 0 0 2px rgba(196,181,253,.95),0 0 0 6px rgba(139,92,246,.18),0 0 26px 4px rgba(139,92,246,.38);
  animation:vd-spotlight 1.8s var(--vd-ease-out) infinite;
  transition:left var(--vd-dur-2) var(--vd-ease-out),top var(--vd-dur-2) var(--vd-ease-out),width var(--vd-dur-2) var(--vd-ease-out),height var(--vd-dur-2) var(--vd-ease-out);
}
.learning-pointer.learning-spotlight[hidden] { display:none; }
.learning-spotlight-ring { position:absolute; inset:-1px; border-radius:inherit; background:radial-gradient(ellipse at center,transparent 58%,rgba(167,139,250,.10) 100%); }
.learning-spotlight-tip {
  position:absolute; left:0; top:calc(100% + 12px); box-sizing:border-box;
  width:max-content; max-width:min(280px,calc(100vw - 24px)); padding:8px 12px;
  border:1px solid rgba(167,139,250,.38); border-radius:10px;
  background:rgba(22,18,32,.97); color:var(--vd-text-1);
  font:500 var(--vd-fs-sm)/1.45 var(--vd-font); letter-spacing:0; white-space:normal;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.learning-spotlight-tip[hidden] { display:none; }
.learning-spotlight-tip::before {
  content:''; position:absolute; left:16px; top:-6px; width:10px; height:10px; transform:rotate(45deg);
  background:inherit; border-left:inherit; border-top:inherit;
}
.learning-pointer[data-placement="above"] .learning-spotlight-tip { top:auto; bottom:calc(100% + 12px); }
.learning-pointer[data-placement="above"] .learning-spotlight-tip::before { top:auto; bottom:-6px; border:0; border-right:inherit; border-bottom:inherit; }
@keyframes vd-spotlight {
  0%,100% { box-shadow:0 0 0 2px rgba(196,181,253,.95),0 0 0 6px rgba(139,92,246,.18),0 0 26px 4px rgba(139,92,246,.38); }
  50% { box-shadow:0 0 0 2px rgba(221,209,255,1),0 0 0 10px rgba(139,92,246,.08),0 0 36px 10px rgba(139,92,246,.5); }
}
/* The ring now marks the target; keep the old outline subtle so they don't double up. */
.learning-highlight { outline:2px solid transparent!important; box-shadow:none!important; animation:none!important; }
@media (prefers-reduced-motion:reduce) {
  .learning-pointer.learning-spotlight { animation:none; transition:none; }
}

/* ── Beat Maker: no overlapping Swing/Tone labels; one Key label. ────────── */
body .beat-window .beat-melodic-controls { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--vd-space-2) var(--vd-space-4); }
body .beat-window .beat-melodic-controls label,
body .beat-window .beat-melodic-controls .beat-swing { display:grid; grid-template-columns:4.2em minmax(0,1fr) 3.2em; align-items:center; gap:var(--vd-space-2); min-width:0; flex:none; }
body .beat-window .beat-melodic-controls input[type=range] { width:100%; min-width:0; }
body .beat-window .beat-melodic-controls output { min-width:0; text-align:right; }
body .beat-window .beat-keyline .beat-key-current { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Leave room for the floating Guide button below the last action row. */
body .beat-window .beat-actions { padding-bottom:var(--vd-space-2); }

/* ── Typography floor for dense studio labels. ───────────────────────────── */
body .track-controls .track-btn,body .vol-mini,body .sidebar .sample-type { font-size:var(--vd-fs-2xs); }

/* ── Compact top bar for phones and 200% zoom. Secondary actions move into a
   "More" overflow menu; Session/Arrangement and transport stay visible. ── */
.topbar-more-btn { display:none; }
.topbar-overflow { display:contents; }
@media (max-width:760px), (max-height:560px) {
  /* Wrap onto a second row instead of overflowing the screen. */
  body .topbar { height:auto; min-height:48px; flex-wrap:wrap; row-gap:4px; column-gap:6px; gap:4px 6px; padding:4px 8px; position:relative; overflow:visible; max-width:100vw; }
  body .topbar .logo-mark,body .topbar .sep,body .topbar .step-leds,body .topbar .vu-meter,body .topbar .rec-time[hidden] { display:none; }
  body .topbar .bpm-group { min-width:56px; padding:1px 6px; }
  body .topbar .bpm-label { display:none; }
  body .topbar .pos-display { min-width:0; padding:2px 6px; font-size:var(--vd-fs-xs); white-space:nowrap; flex-shrink:0; }
  body .topbar > * { flex-shrink:0; }
  body .topbar .sync-btn { margin-left:0; }
  body .topbar .view-switch { margin-left:auto; flex-shrink:0; }
  body .topbar .view-switch-btn { padding:5px 8px; font-size:var(--vd-fs-xs); }
  .topbar-more-btn { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:36px; height:36px; padding:0 8px; border:1px solid var(--border2); border-radius:8px; background:var(--surface); color:var(--vd-text-2); font:600 var(--vd-fs-md)/1 var(--vd-font); cursor:pointer; }
  .topbar-more-btn[aria-expanded="true"] { background:var(--surface3); color:var(--vd-text-1); border-color:var(--accent2); }
  body .topbar .topbar-overflow {
    display:none; position:absolute; top:calc(100% + 4px); right:8px; z-index:9500;
    flex-direction:column; align-items:stretch; gap:6px; width:min(280px,calc(100vw - 16px)); max-height:calc(100dvh - 72px); overflow:auto;
    padding:10px; border:1px solid var(--vd-border-strong); border-radius:var(--vd-radius-lg); background:var(--vd-surface-2); box-shadow:var(--vd-shadow-2);
  }
  body .topbar.topbar-more-open .topbar-overflow { display:flex; }
  body .topbar .topbar-overflow > * { margin:0!important; }
  body .topbar .topbar-overflow .session-tool,body .topbar .topbar-overflow .sync-btn { width:100%; min-height:40px; justify-content:flex-start; }
  body .topbar .topbar-overflow .master-vol { display:flex; justify-content:space-between; gap:10px; }
  body .topbar .topbar-overflow .master-vol input[type=range] { flex:1; }
  body .topbar .topbar-overflow .nav-user { justify-content:space-between; }
  body .topbar .topbar-overflow .nav-user .status-item { display:inline-flex; }
  /* Session and Arrangement toolbars: one scrollable row instead of 2-3 rows. */
  body :is(.session-tools,.arr-toolbar) { flex-wrap:nowrap!important; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding-block:6px; gap:6px; }
  body :is(.session-tools,.arr-toolbar) > * { flex-shrink:0; }
  body .starter-menu { position:fixed; top:var(--vd-starter-top,150px); left:var(--vd-starter-left,8px); width:min(370px,calc(100vw - 16px)); max-height:calc(100dvh - var(--vd-starter-top,150px) - 8px); box-sizing:border-box; overflow:auto; z-index:9500; }
  body .statusbar { min-height:22px; }
  body .guide-companion-trigger { min-height:40px; padding:6px 12px; }
}
@media (max-width:500px) {
  body .workspace > .sidebar { width:min(128px,32vw); }
  body .topbar .transport-btn:not(#btn-play):not(#btn-stop):not(#btn-rec):not(.topbar-more-btn) { width:32px; }
  body .topbar #btn-metronome { font-size:0; gap:0; padding:0 10px; min-width:36px; justify-content:center; }
  body .clip-cell { min-width:132px; }
  body .topbar .pos-display { display:none; }
  body .topbar .view-switch-btn { padding:4px 7px; }
}
@media (max-width:760px) and (pointer:coarse), (max-height:560px) and (pointer:coarse) {
  body .topbar .transport-btn,.topbar-more-btn { width:44px; min-width:44px; height:44px; }
}

/* ── Branded fast loading state (shown only while the studio boots). ─────── */
html[data-studio-boot="loading"] #studio-loading { gap:14px; }
.studio-loading-brand { font:700 28px/1 var(--vd-font); letter-spacing:-.02em; background:linear-gradient(135deg,#c4b5fd,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
.studio-loading-skeleton { display:grid; grid-template-columns:repeat(5,minmax(0,64px)); gap:6px; margin-top:6px; opacity:.85; }
.studio-loading-skeleton i { display:block; height:22px; border-radius:6px; background:linear-gradient(90deg,#1e1b29 0,#2a2438 50%,#1e1b29 100%); background-size:200% 100%; animation:vd-skeleton 1.4s linear infinite; }
.studio-loading-skeleton i:nth-child(5n+1) { background-color:#3b2a1c; }
@keyframes vd-skeleton { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce) { .studio-loading-skeleton i { animation:none; } }
/* v68: Guide eyebrow inside the studio card reaches the 11px floor
   (the landing level picker keeps its own sizes). */
.learning-guide .learning-eyebrow { font-size:var(--vd-fs-2xs); }