/* NoteUI (note-ui.js): the shared light. One point of the scene's colour per option group,
   placed 12px before the chosen word by --light-x/--light-y and gliding between choices. The
   group carries [data-light] while lit; [data-light=before] paints the light under the words. */
[data-light]{position:relative}
[data-light]:not([data-light=before])::after,[data-light=before]::before{
 content:'';position:absolute;left:0;top:0;width:var(--note-dot);height:var(--note-dot);border-radius:50%;
 background:var(--scene-accent);box-shadow:var(--note-glow);pointer-events:none;
 transform:translate(var(--light-x),var(--light-y));transition:transform var(--note-dur-glide) var(--note-ease);
}
/* NoteUI.select: in a selection mode every chosen row has its own point of light, fading in 12px before the row
   (in the margin, so nothing moves). --select-y centres it on the row's first line; a surface may set it. */
.is-selecting>[role=option]{--select-y:50%;position:relative;cursor:pointer}
.is-selecting>[role=option]::before{
 content:'';position:absolute;left:calc(-12px - var(--note-dot));top:var(--select-y);width:var(--note-dot);height:var(--note-dot);margin-top:calc(var(--note-dot) / -2);
 border-radius:50%;background:var(--scene-accent);box-shadow:var(--note-glow);opacity:0;pointer-events:none;transition:opacity var(--note-dur-fade) var(--note-ease);
}
.is-selecting>[role=option][aria-selected=true]::before{opacity:1}