/* Melody practice — builds on styles.css, chords.css (stage, transport, shared mode pieces) and scales.css
   (fretboard, key and position grids). Design system: brand/design-guide.md */

.ml-stage { grid-template-rows: none; gap: 16px; min-height: 0; }

/* the call: hear it again, and where you are */
.ml-call { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.ml-call-text { display: grid; gap: 4px; min-width: 0; }
.ml-status { margin: 0; color: var(--text); font: 600 clamp(24px, 4cqw, 32px)/1.2 var(--font-ui); }
.ml-stage[data-phase='listen'] .ml-status { color: var(--amber); }
.ml-stage[data-phase='right'] .ml-status { color: var(--good); }
.ml-stage[data-phase='wrong'] .ml-status { color: var(--danger); }
.ml-hint { min-height: 21px; margin: 0; color: var(--text-muted); font-size: 15px; }
.ml-replay:disabled { border-color: var(--on-stage-line); background: var(--on-stage); color: var(--text-quiet); cursor: default; }

/* the phrase: one slot per note, filled in as you play it back (shape and words, not colour alone) */
.ml-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; margin: 0; padding: 0; list-style: none; }
.ml-slot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--on-stage-line);
  border-radius: 50%;
  background: var(--on-stage);
  color: var(--text-quiet);
  font-size: 15px;
  font-weight: 700;
}
.ml-slot.is-playing { border-color: var(--amber); background: var(--amber-tint); color: var(--amber); }
.ml-slot.is-next { border: 1.5px dashed rgba(232, 220, 196, 0.5); color: var(--text); }
.ml-slot.is-right { border-color: var(--good); background: var(--good-tint); color: var(--good); }
.ml-slot.is-wrong { border-color: var(--danger); background: rgba(238, 131, 121, 0.12); color: var(--danger); }

/* the neck: the note playing (amber), notes you got (green), a wrong one (red ring), the phrase numbered */
.melody-page .fb-note.is-heard .fb-dot { fill: var(--good); stroke: var(--good); }
.melody-page .fb-note.is-heard text { fill: var(--ink); }
.melody-page .fb-note.is-wrong .fb-dot { fill: #2a1513; stroke: var(--danger); stroke-width: 2.5; }
.melody-page .fb-note.is-wrong text { fill: var(--danger); }
.melody-page .fb-note.is-step .fb-dot { fill: var(--ivory); stroke: var(--ivory); }
.melody-page .fb-note.is-step text { fill: var(--ink); }
.melody-page .fretboard:not(.is-tappable) .fb-note { cursor: default; }

/* your best */
.ml-progress { padding: 14px 20px 20px; border-top: 1px solid var(--divider); }
.ml-sub { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.ml-progress-empty { margin: 0; color: var(--text-muted); font-size: 14px; }
.ml-stats { display: grid; gap: 0; margin: 0; }
.ml-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--divider); }
.ml-stats dt { color: var(--text-muted); font-size: 14px; }
.ml-stats dd { margin: 0; color: var(--text); font-size: 16px; font-weight: 700; }

@media (max-width: 560px) {
  .ml-slot { width: 38px; height: 38px; }
}