/* VibeChord launch reel — scoped styles. Regenerate via build-reel.mjs. */
#vc-reel{
  --c-bg:#0f0f11;
  --c-surface:#17171a;
  --c-surface2:#1e1e22;
  --c-text:#f0f0f0;
  --c-text2:#a8a8bc;
  --c-text3:#72728a;
  --c-accent:#7c6af5;
  --c-accent2:#534AB7;
  --c-border:rgba(255, 255, 255, 0.08);
  --c-border2:rgba(255, 255, 255, 0.14);
  --cl-stable-stroke:#7c6af5;
  --cl-stable-text:#7c6af5;
  --cl-stable-bg:rgba(124, 106, 245, 0.15);
  --cl-tension-stroke:#e07050;
  --cl-tension-text:#e07050;
  --cl-tension-bg:rgba(224, 112, 80, 0.15);
  --cl-color-stroke:#c66ad8;
  --cl-color-text:#c66ad8;
  --cl-color-bg:rgba(198, 106, 216, 0.15);
  --cl-momentum-stroke:#4ea0d8;
  --cl-momentum-text:#4ea0d8;
  --cl-momentum-bg:rgba(78, 160, 216, 0.15);
  --c-edited:#e6b042;
  --c-off-chord:#e6b042;
  --f-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
            Arial, sans-serif;
  --f-mono:'SF Mono', 'Fira Code', 'JetBrains Mono', Menlo, Consolas,
            monospace;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --max-w:1180px;
  --gutter:clamp(20px, 4vw, 48px);
  --t-quick:120ms ease;
  --t-medium:220ms ease;
  -webkit-text-size-adjust:100%;
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:radial-gradient(1200px 600px at 50% -200px, rgba(124, 106, 245, 0.08), transparent 70%),
    var(--c-bg);
  --c-bg:#0f0f11;
  --c-surface:#17171a;
  --c-surface2:#1e1e22;
  --c-border:rgba(255,255,255,0.08);
  --c-border2:rgba(255,255,255,0.14);
  --c-text:#f0f0f0;
  --c-text2:#a8a8bc;
  --c-text3:#72728a;
  --c-accent:#7c6af5;
  --c-accent2:#534AB7;
  --c-select:#4dabf7;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --cl-stable:var(--c-accent);
  --cl-stable-bg:rgba(124,106,245,0.15);
  --cl-tension:#e07050;
  --cl-tension-bg:rgba(224,112,80,0.15);
  --cl-color:#c66ad8;
  --cl-color-bg:rgba(198,106,216,0.15);
  --cl-momentum:#4ea0d8;
  --cl-momentum-bg:rgba(78,160,216,0.15);
  --cl-modal:#c06090;
  --cl-modal-bg:rgba(192,96,144,0.15);
  --cl-remote:#cc3a3a;
  --cl-remote-bg:rgba(204,58,58,0.15);
  --c-off-chord:#e6b042;
  --c-off-chord-bg:rgba(230,176,66,0.18);
  --font-mono:'SF Mono', 'Fira Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}
#vc-reel{ font-family:var(--f-sans); color:var(--c-text); }
#vc-reel .vc-app{ font-family:var(--f-sans); -webkit-font-smoothing:antialiased; }
#vc-reel .mono{ font-family:var(--f-mono); }
#vc-reel .mood{ font-family:var(--f-sans); font-style:italic; color:var(--c-text2); }
/* ─────────────────────────────────────────────────────────────────────────
 * vibechord-real.css
 * Component styles lifted VERBATIM from the VibeChord app source
 * (src/styles/global.css + components/ChordTimeline.css + PatternEditor.css).
 * Trimmed to the slice the launch-reel renders (no scroll-mode, drag,
 * context-menu, or edit-affordance variants). Pixel values, colours, and
 * the playhead/ignition math are unchanged from production so the reel
 * renders through the same CSS the live app does.
 * ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
 * ChordTimeline
 * ══════════════════════════════════════════════════════════════════════ */

#vc-reel .timeline {
  padding: 32px 16px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

#vc-reel .timeline__row-group {
  --lane-header-width: 200px;
  position: relative;
}

/* bar number labels above the scrub strip */
#vc-reel .timeline__bar-labels {
  position: relative;
  height: 14px;
  margin-bottom: 2px;
  margin-left: var(--lane-header-width, 200px);
  pointer-events: none;
  user-select: none;
}
#vc-reel .timeline__bar-label {
  position: absolute;
  top: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text3, #71717a);
  transform: translateX(-50%);
}

/* scrub strip / bar ticks */
#vc-reel .timeline__scrub {
  height: 14px;
  margin-bottom: 0;
  margin-left: var(--lane-header-width, 200px);
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.45) 2px, transparent 2px);
  background-size: 152px 100%;
  background-position: 0 bottom;
  background-repeat: repeat-x;
}

/* playhead — neutral light-gray strip, full row-group height */
#vc-reel .timeline__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(240, 240, 240, 0.7);
  pointer-events: none;
  z-index: 30;
}
#vc-reel .timeline__playhead-cap {
  position: absolute;
  top: 0;
  left: -5px;
  width: 12px;
  height: 8px;
  background: rgba(240, 240, 240, 0.85);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#vc-reel .timeline__chord-row {
  display: flex;
  align-items: stretch;
}
#vc-reel .timeline__chord-row > .timeline__bar {
  flex: 1 1 auto;
}

/* key-signature header column on the left */
#vc-reel .timeline__chord-track-label {
  flex: 0 0 auto;
  width: var(--lane-header-width, 200px);
  display: flex;
  align-items: center;
  padding: 0 10px 0 8px;
  user-select: none;
  background: var(--c-surface);
}
#vc-reel .timeline__chord-key-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--c-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
}
#vc-reel .timeline__chord-key-glyph {
  flex: 0 0 auto;
  font-family: ui-serif, Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 0.8;
  color: var(--c-accent);
  width: 22px;
  text-align: center;
}
#vc-reel .timeline__chord-key-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#vc-reel .timeline__chord-key-tag {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--c-text3, #71717a);
}
#vc-reel .timeline__chord-key-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the chord bar — CSS Grid, 35px columns + 3px gap = 38px stride per beat */
#vc-reel .timeline__bar {
  display: grid;
  grid-template-columns: repeat(var(--row-beats, 32), 35px);
  grid-auto-rows: 88px;
  grid-auto-flow: row;
  gap: 6px 3px;
  align-items: stretch;
  min-height: 88px;
  height: auto;
  position: relative;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 152px 100%, 38px 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  border-radius: var(--radius-sm);
  padding: 0;
}

/* pill wrapper — grid item, span = durationBeats */
#vc-reel .tl-pill-wrap {
  display: flex;
  align-items: stretch;
  position: relative;
  min-width: 0;
}

#vc-reel .tl-pill {
  position: relative;
  flex: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface2);
  overflow: hidden;
  transition: border-color 0.12s;
}

#vc-reel .tl-pill__inner {
  height: 100%;
  padding: 7px 12px 5px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
#vc-reel .tl-pill__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
#vc-reel .tl-pill__degree {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#vc-reel .tl-pill__dur {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  margin-top: auto;
}
#vc-reel .tl-pill__dur-name {
  font-size: 10px;
  color: var(--c-text3);
  display: block;
}
#vc-reel .tl-pill__dur-bars {
  font-size: 9px;
  color: var(--c-text3);
  display: block;
  opacity: 0.5;
}
#vc-reel .tl-pill__accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  opacity: 0.95;
  pointer-events: none;
}

/* playing state */
#vc-reel .tl-pill.playing {
  border-color: var(--c-accent) !important;
  background: rgba(124, 106, 245, 0.28) !important;
  box-shadow: 0 0 0 2px rgba(124, 106, 245, 0.55);
}
#vc-reel .tl-pill.playing .tl-pill__name {
  color: #e8e4ff;
}

/* ═══════════════════════════════════════════════════════════════════════
 * PatternEditor
 * ══════════════════════════════════════════════════════════════════════ */

#vc-reel .pattern-editor {
  margin: 12px auto 0;
  padding: 12px 14px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  width: fit-content;
}

/* header */
#vc-reel .pe-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 12px;
  border-radius: 4px;
  box-shadow: inset 3px 0 0 0 var(--pe-track-color, transparent);
  background: color-mix(in srgb, var(--pe-track-color, transparent) 6%, transparent);
}
#vc-reel .pattern-editor__play {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-border2);
  background: transparent;
  color: var(--c-text2);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
#vc-reel .pattern-editor__play.playing {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: white;
}
#vc-reel .pattern-editor__play-icon { font-size: 11px; line-height: 1; margin-left: 1px; }
#vc-reel .pattern-editor__play.playing .pattern-editor__play-icon { margin-left: 0; }

#vc-reel .pe-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}
#vc-reel .pe-meta {
  font-size: 12px;
  color: var(--c-text3);
  font-family: var(--font-mono, monospace);
}
#vc-reel .pe-edited-tag {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--c-accent);
  background: rgba(124, 106, 245, 0.15);
  border: 1px solid rgba(124, 106, 245, 0.4);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* grid resolution toggle (static, decorative in the reel) */
#vc-reel .pe-grid-toggle {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  margin-left: auto;
}
#vc-reel .pe-grid-toggle__seg {
  padding: 4px 9px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--c-text3);
  background: transparent;
  border: none;
  border-left: 1px solid var(--c-border);
}
#vc-reel .pe-grid-toggle__seg:first-child { border-left: none; }
#vc-reel .pe-grid-toggle__seg.active {
  background: rgba(124,106,245,0.15);
  color: var(--c-accent);
}

/* body / grid area */
#vc-reel .pe-body { display: block; }
#vc-reel .pe-grid-area {
  position: relative;
  padding: 8px 10px 10px 0;
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  min-width: 0;
}

#vc-reel .pattern-editor__playhead {
  position: absolute;
  top: 8px;
  bottom: 10px;
  width: 2px;
  background: #f0f0f0;
  border-radius: 1px;
  pointer-events: none;
  z-index: 10;
  box-shadow:
    0 0 8px  rgba(240, 240, 240, 0.75),
    0 0 18px rgba(124, 106, 245, 0.55);
}

/* cell ignition — the glow (box-shadow + scale) is now driven inline from the
   beat clock in vibechord-reel.jsx so it's frame-accurate for deterministic
   video capture. The old wall-clock @keyframes animation was removed because a
   running CSS animation overrides inline styles and desyncs from stepped frames.
   .is-igniting is kept as a hook but carries no animation. */
#vc-reel .pe-cell.filled.is-igniting {
  transform-origin: center;
}

/* rows */
#vc-reel .pe-row, #vc-reel .pe-ruler-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
#vc-reel .pe-row:last-child, #vc-reel .pe-ruler-row:last-child { margin-bottom: 0; }
#vc-reel .pe-ruler-row--beats { margin-bottom: 12px; }

#vc-reel .pe-row-left {
  /* 140px: just the role chip + pitch label. Was 240 to fit per-row octave/dup
     controls, which are omitted in the presentation reel. Must match ROW_LEFT_W
     in vibechord-reel.jsx so the playhead aligns to the grid. */
  --pe-row-left-w: 140px;
  flex-shrink: 0;
  width: var(--pe-row-left-w);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
}

/* per-voice controls */
#vc-reel .pe-row-ctrls { display: flex; gap: 3px; }
#vc-reel .pe-ctrl-pair { display: flex; flex-direction: column; gap: 2px; }
#vc-reel .pe-ctrl-btn {
  width: 18px; height: 13px;
  border: 1px solid var(--c-border2);
  border-radius: 3px;
  background: transparent;
  color: var(--c-text3);
  font-size: 8px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
#vc-reel .pe-ctrl-btn--dup { font-size: 7px; }

/* role chip */
#vc-reel .pe-role {
  min-width: 40px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid rgba(var(--row-rgb, 114, 114, 138), 0.45);
  background: rgba(var(--row-rgb, 114, 114, 138), 0.12);
  color: rgb(var(--row-rgb, 240 240 240));
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* pitch */
#vc-reel .pe-pitch-wrap {
  display: inline-flex;
  align-items: center;
  width: 76px;
  justify-content: center;
  gap: 2px;
}
#vc-reel .pe-pitch {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.3px;
  width: 56px;
  text-align: center;
  color: rgb(var(--row-rgb, 240 240 240));
}
#vc-reel .pe-semi {
  width: 14px; height: 18px;
  font-size: 11px;
  color: #eed972;
  background: transparent;
  border: none;
  padding: 0;
  opacity: 0;
  border-radius: 3px;
}

/* cells grid — 32px squares, 2px gap */
#vc-reel .pe-cells {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(var(--steps, 32), 56px);
  gap: 2px;
  height: 32px;
  position: relative;
  z-index: 0;
}
#vc-reel .pe-ruler-cells {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(var(--steps, 32), 56px);
  gap: 2px;
  position: relative;
  z-index: 0;
}

#vc-reel .pe-cell {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  height: 100%;
  border: none;
  padding: 0;
  position: relative;
}
#vc-reel .pe-cell.beat       { background: rgba(255, 255, 255, 0.08); }
#vc-reel .pe-cell.bar-start  { box-shadow: inset 1px 0 0 rgba(255,255,255,0.18); }
#vc-reel .pe-cell.chord-start {
  box-shadow: inset 2px 0 0 var(--pe-cluster, var(--c-accent));
}
#vc-reel .pe-cell.filled {
  background: var(--pe-cluster, var(--c-accent));
}
#vc-reel .pe-cell.filled.chord-start {
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.85);
}

/* ruler rows */
#vc-reel .pe-ruler-row--chords .pe-ruler-cells { height: 22px; }
#vc-reel .pe-ruler-row--bars   .pe-ruler-cells { height: 14px; }
#vc-reel .pe-ruler-row--beats  .pe-ruler-cells { height: 14px; }

#vc-reel .pe-bar-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 6px;
  font-size: 9.5px;
  color: var(--c-text2);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-left: 2px solid rgba(255,255,255,0.20);
}

#vc-reel .pe-chord-band {
  background: var(--cluster-bg, rgba(124,106,245,0.10));
  border: 1px solid var(--cluster-color, rgba(124,106,245,0.22));
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--c-text2);
  padding: 0 6px;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}
#vc-reel .pe-chord-band.is-active {
  background: var(--cluster-color, var(--c-accent));
  color: #fff;
  border-color: var(--cluster-color, var(--c-accent));
  box-shadow: 0 0 0 1px var(--cluster-color, var(--c-accent)) inset;
}
#vc-reel .pe-chord-band__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#vc-reel .pe-beat-mark {
  display: flex; align-items: center; justify-content: flex-start;
  height: 100%;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--c-text3);
  padding-left: 4px;
}
#vc-reel .pe-beat-mark.bar {
  border-left: 2px solid rgba(255,255,255,0.18);
  color: var(--c-text2);
}

/* footer */
#vc-reel .pe-footer {
  margin-top: 8px;
  font-size: 11px;
  color: var(--c-text3);
  text-align: right;
  font-style: italic;
}