/* music notation editor (ABC / abcjs) — a note is a <g class="abcjs-note"> (or ".abcjs-rest"),
   which paints no stroke of its own, so relay the hover/selection outline onto the inner shapes
   it draws: the notehead, stem and any rest glyph (all <path>). Fill them with the accent so a
   picked note reads clearly against the black score. */

/* give the score a white backdrop so the black notation stays legible on any page theme */
.flow-canvas .abcjs-container,
.flow-canvas svg { background: #fff; }

/* hover */
.flow-canvas g.abcjs-note.dia-pick-hover .abcjs-notehead,
.flow-canvas g.abcjs-note.dia-pick-hover .abcjs-stem,
.flow-canvas g.abcjs-rest.dia-pick-hover path {
  fill: rgba(59, 110, 246, 0.55) !important;
  stroke: rgba(59, 110, 246, 0.55) !important;
}

/* selected */
.flow-canvas g.abcjs-note.dia-pick-sel .abcjs-notehead,
.flow-canvas g.abcjs-note.dia-pick-sel .abcjs-stem,
.flow-canvas g.abcjs-rest.dia-pick-sel path {
  fill: var(--accent, #3b6ef6) !important;
  stroke: var(--accent, #3b6ef6) !important;
}

/* the multiline body editor in the tune properties */
.mde-abc-body { width: 100%; font-family: var(--mono, monospace); font-size: 0.85rem; resize: vertical; }