/*
  Route-local UI/UX layer for the Ableton Learning Music Playground.
  Additive only: this styles wrapper markup added around the vendored widgets
  and never overrides the widget runtime or the minified main.css.
  Scoped to the playground body so the six single-lesson routes are unaffected.
*/

body[data-story-route="ableton-learning-music-playground"] .playground-track-intro {
  margin: 0 auto 1.1rem;
  max-width: var(--story-practice-max, 76rem);
  padding: 0 1rem;
  color: #c7d3e4;
  font-size: 0.98rem;
}

/* Four parallel layers of one loop */
body[data-story-route="ableton-learning-music-playground"] .playground-track {
  position: relative;
  margin: 0 auto 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--playground-accent, rgba(140, 199, 255, 0.7));
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(18, 24, 34, 0.96), rgba(14, 20, 31, 0.94));
  box-shadow: 0 16px 32px rgba(2, 8, 18, 0.24);
  overflow: clip;
}

/* The first track keeps the shared practice-focus framing; this card wrapper
   just normalises spacing so all four tracks line up. */
body[data-story-route="ableton-learning-music-playground"] .playground-track--primary {
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track--primary .story-practice-focus {
  border-left: 3px solid var(--playground-accent, rgba(255, 161, 94, 0.9));
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--playground-accent, rgba(140, 199, 255, 0.4));
  background: rgba(13, 19, 29, 0.76);
  color: #f7f9fc;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__heading {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__heading h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
  color: #f7f8fb;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__role {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--playground-accent, #8cc7ff);
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__body {
  padding: 1rem 1.1rem 1.25rem;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__body > :first-child {
  margin-top: 0;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track__body > :last-child {
  margin-bottom: 0;
}

/* The widget headings now live in the card header, so hide the inline h2/h3
   the section markup keeps for anchor stability. */
body[data-story-route="ableton-learning-music-playground"] .playground-track__body > .playground-track-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Per-track accent colors, drawn from each widget's theme. */
body[data-story-route="ableton-learning-music-playground"] .playground-track--beats {
  --playground-accent: #f0a35f;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track--bass {
  --playground-accent: #6fc3b8;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track--chords {
  --playground-accent: #b79ad6;
}

body[data-story-route="ableton-learning-music-playground"] .playground-track--melody {
  --playground-accent: #8cc7ff;
}

@media (max-width: 767px) {
  body[data-story-route="ableton-learning-music-playground"] .playground-track,
  body[data-story-route="ableton-learning-music-playground"] .playground-track-intro {
    margin-bottom: 0.9rem;
  }

  body[data-story-route="ableton-learning-music-playground"] .playground-track__header {
    padding: 0.8rem 0.85rem;
  }

  body[data-story-route="ableton-learning-music-playground"] .playground-track__body {
    padding: 0.85rem 0.85rem 1rem;
  }
}