/* Tune-specific styling (light). Common styles live in /apps/shared/assessment.css */
#app-root .badge { font-size:.7rem; background:#fff3cd; color:#664d03; padding:.1rem .4rem;
  border-radius:5px; vertical-align:middle; }
#app-root .level { position:relative; height:24px; background:#f1f3f5; border-radius:.375rem;
  margin-top:.4rem; overflow:hidden; border:1px solid #dee2e6; }
#app-root #levelbar { position:absolute; left:0; top:0; bottom:0; width:0%; background:#2780e3; }
#app-root #timeline { position:relative; height:84px; background:#f8f9fa; border:1px solid #dee2e6;
  border-radius:.375rem; margin-top:.5rem; }
#app-root .tl-label { position:absolute; left:6px; font-size:.7rem; color:#adb5bd; }
#app-root .tick { position:absolute; width:3px; border-radius:2px; transform:translateX(-1.5px); }

/* abcjs playback cursor + note highlight (override the forced-black notation fill) */
#app-root #notation svg .highlight, #app-root #notation svg .highlight path { fill:#1769d6 !important; }
#app-root #notation svg .abcjs-cursor { stroke:#d33; stroke-width:2; }
#app-root .tune-audio { margin-top:.5rem; }

/* Hide the abcjs transport widget (grey progress band) — playback is the Play tune
   button + SPACE, seeking is by clicking noteheads. The hidden control still works. */
#app-root #tune-audio { display: none; }

/* cycle (loop) region: noteheads between the two clicked points */
#app-root #notation svg .loop-region, #app-root #notation svg .loop-region path { fill:#6f42c1 !important; }