/* Pitch tokens are in tokens.css; personal overrides remain screen-only. */
.tab-svg .fret-note .note-hit { pointer-events: all; cursor: grab; }
.tab-svg .fret-note :is(.note-bg,text,.note-tail), .tab-svg .continuation-arrow { pointer-events: none; }
.tab-svg[data-note-colour=pitch] .fret-note rect.note-bg { fill: color-mix(in srgb,var(--note-color) 12%,var(--canvas)); stroke: color-mix(in srgb,var(--note-color) 25%,transparent); }
.tab-svg[data-note-colour=pitch] .fret-note text { fill: var(--note-color); }
.tab-svg[data-note-colour=pitch] .fret-note .note-tail { stroke: var(--note-color); opacity: .8; }
.tab-svg[data-note-colour=pitch] .fret-note:hover rect.note-bg { fill: color-mix(in srgb,var(--note-color) 18%,var(--canvas)); stroke: var(--note-color); }
/* Pitch stays visible while editing. The thicker gold border and outer frame distinguish selection by shape as well as hue. */
.tab-svg[data-note-colour=pitch] .fret-note.selected rect.note-bg { fill: color-mix(in srgb,var(--note-color) 22%,var(--canvas)); stroke: var(--selection); stroke-width: 2; }
.tab-svg[data-note-colour=pitch] .fret-note.selected text { fill: var(--note-color); }
.editor-canvas .tab-svg .fret-note.selected rect.note-bg { outline: 1.5px solid var(--selection); outline-offset: 2px; }
.editor-canvas .tab-svg:not([data-note-colour=pitch]) .fret-note.selected rect.note-bg { fill: color-mix(in srgb,var(--selection-fill) 55%,var(--selection)); }
.editor-canvas .piano-roll .pr-note.is-selected { box-shadow: 0 0 0 1px var(--canvas), 0 0 0 2.5px var(--selection); }
.tab-svg[data-note-colour=pitch] .fret-note.selected .note-tail { stroke: var(--note-color); opacity: 1; }
.tab-svg[data-note-colour=pitch] .continuation-tail { stroke: var(--note-color,var(--track)); }
.tab-svg[data-note-colour=pitch] .continuation-arrow { fill: var(--note-color,var(--track)); }
.tab-svg[data-note-colour=neutral] .fret-note:not(.selected):not([data-playability]):not(.stacked-note) rect.note-bg { fill: var(--canvas); stroke: transparent; }
.tab-svg[data-note-colour=neutral] .fret-note:not(.selected) text { fill: var(--ink); }
.tab-svg[data-note-colour=neutral] .fret-note .note-tail { stroke: var(--muted); }
.tab-svg[data-note-colour=neutral] .fret-note:hover rect.note-bg { stroke: var(--muted); }
/* A warning remains a warning when that note is also selected or pitch-coloured. */
.editor-canvas .tab-svg .fret-note[data-playability] rect.note-bg { stroke: var(--playing-caution); stroke-width: 2; stroke-dasharray: 3 2; }
.editor-canvas .tab-svg .fret-note[data-playability=conflict] rect.note-bg { stroke: var(--playing-clash); stroke-width: 2; stroke-dasharray: 1 2; }

/* A separate lower lane makes duration grips distinct from the fret targets. */
.tab-svg .note-end { color: var(--track); cursor: ew-resize; }
.tab-svg[data-note-colour=pitch] .note-end { color: var(--note-color); }
.tab-svg[data-note-colour=neutral] .note-end { color: var(--muted); }
.tab-svg .note-end .tail-end-link { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; pointer-events: none; }
.tab-svg .note-end .tail-end-hit { fill: transparent; stroke: none; pointer-events: all; cursor: ew-resize; }
/* A hovered or selected note's grip offers a ~24 px target; heads drawn above still win where they overlap. */
.tab-svg .note-end .tail-end-reach { fill: transparent; stroke: none; pointer-events: none; cursor: ew-resize; }
.tab-svg .note-end:is(.hovered,.selected) .tail-end-reach { pointer-events: all; }
/* Two attacks on one string at once: both stay readable, outlined as a string clash. */
.editor-canvas .tab-svg .fret-note.stacked-note rect.note-bg { stroke: var(--playing-clash); stroke-width: 1.8; stroke-dasharray: 3 2; }
.tab-svg .note-end .tail-end-grip { fill: color-mix(in srgb,currentColor 14%,var(--canvas)); stroke: currentColor; stroke-width: 1; opacity: .6; pointer-events: none; }
.tab-svg .note-end line:not(.tail-end-link) { stroke: currentColor; stroke-width: 1; opacity: .75; pointer-events: none; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,[aria-selected=true]) { color: var(--selection); }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,[aria-selected=true]) .tail-end-grip { fill: var(--selection-fill); stroke: var(--selection); opacity: 1; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,[aria-selected=true]) line:not(.tail-end-link) { stroke: var(--selection-ink); opacity: 1; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,[aria-selected=true]) .tail-end-link { opacity: .8; }
.editor-canvas #tab-canvas[data-gesture=resize], .tab-svg[data-gesture=resize] * { cursor: ew-resize; }
.editor-canvas #tab-canvas[data-gesture=move], .tab-svg[data-gesture=move] * { cursor: grabbing; }

.editor-panel .pitch-readout[data-note-colour=pitch] { border-color: color-mix(in srgb,var(--note-color) 45%,var(--border)); }
.pitch-readout[data-note-colour=pitch] .pitch-result { background: color-mix(in srgb,var(--note-color) 12%,var(--panel)); }
.pitch-readout[data-note-colour=pitch] .pitch-result .pitch-caption, .editor-panel .pitch-readout[data-note-colour=pitch] .pitch-result .pitch-name { color: var(--note-color); }
#dialog .note-colour-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-block: 14px 10px; }
#dialog .note-colour-options label { color: var(--ink); font-size: 12px; }
#dialog .note-colour-options select { min-height: 34px; max-width: 210px; font-size: 12px; }
#dialog .pitch-key { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 4px; margin: 9px 0 5px; }
#dialog .pitch-swatch { display: flex; align-items: center; flex-direction: column; gap: 6px; padding-block: 5px; color: var(--muted); font: 10px/1.3 var(--mono); }
#dialog .pitch-swatch::before { content: ''; display: block; width: 22px; height: 8px; border-radius: 3px; background: var(--note-color); }

/* Drum colour names a lane, while the solid cell and diamond denote accent. */
.drum-grid[data-note-colour=pitch] .drum-row[data-lane=hat] { --lane-color: var(--pitch-5); }
.drum-grid[data-note-colour=pitch] .drum-row[data-lane=snare] { --lane-color: var(--pitch-9); }
.drum-grid[data-note-colour=pitch] .drum-row[data-lane=kick] { --lane-color: var(--pitch-11); }
.drum-grid[data-note-colour=pitch] .drum-row[data-lane] .drum-label { color: var(--lane-color); }
.drum-grid[data-note-colour=pitch] .drum-row .drum-step.on { background: color-mix(in srgb,var(--lane-color) 20%,var(--canvas)); border-color: color-mix(in srgb,var(--lane-color) 70%,var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--lane-color) 20%,transparent); }
.drum-grid[data-note-colour=pitch] .drum-row .drum-step.on::after { background: var(--lane-color); }
.drum-grid[data-note-colour=pitch] .drum-row .drum-step.on.accented { background: var(--lane-color); border-color: var(--lane-color); box-shadow: none; }
.drum-grid[data-note-colour=pitch] .drum-row .drum-step.on.accented::after { background: var(--canvas); }
.drum-grid[data-note-colour=pitch] .drum-row .drum-step.selected { outline-color: var(--selection); }
@media (max-width:480px) { #dialog .pitch-key { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; } }
@media (prefers-reduced-motion:reduce) { .tab-svg .note-end, .tab-svg .fret-note { transition: none; animation: none; } }

#dialog .pitch-key[hidden] { display: none; }
.tab-svg .playing-flag { pointer-events: none; }
.drum-grid[data-note-colour=neutral] .drum-step.on { background: var(--surface); border-color: var(--muted); }
.drum-grid[data-note-colour=neutral] .drum-step.on::after { background: var(--muted); }

/* Idle endpoints stay small; the current note exposes its full grip. */
.tab-svg .note-end .tail-end-dot { fill: currentColor; opacity: .4; }
.tab-svg .note-end .tail-end-link { opacity: .14; }
.tab-svg .note-end .tail-end-grip, .tab-svg .note-end line:not(.tail-end-link) { opacity: 0; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,.hovered) { color: var(--selection); }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,.hovered) .tail-end-grip { fill: var(--selection-fill); stroke: var(--selection); opacity: 1; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,.hovered) line:not(.tail-end-link) { stroke: var(--selection-ink); opacity: 1; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,.hovered) .tail-end-link { opacity: .8; }
.tab-svg .note-end:is(:hover,:focus-visible,.selected,.hovered) .tail-end-dot { opacity: 0; }

/* Fret entry is available in both tools; normal canvas scrolling remains navigation. */
.compose-controls .fret-control { flex-shrink: 0; gap: 6px; }
.compose-controls .fret-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); overflow: hidden; }
.editor-panel .compose-controls .fret-stepper input { width: 35px; min-width: 35px; height: 34px; min-height: 34px; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; text-align: center; font: 600 15px var(--mono); }
.editor-panel .compose-controls .fret-stepper button { width: 30px; min-width: 30px; height: 34px; min-height: 34px; padding: 6px; border: 0; border-radius: 0; color: var(--ink); }
.compose-controls .fret-stepper button:hover:not(:disabled) { background: var(--selection-bg); color: var(--selection); }
.compose-controls .fret-stepper button:disabled { opacity: .3; }
.compose-controls .fret-stepper button .icon { width: 14px; height: 14px; }
.compose-controls .fret-stepper:focus-within { outline: 2px solid var(--selection); outline-offset: 2px; }
.editor-panel .compose-controls .fret-stepper :focus-visible { outline: none; }

/* One contextual hint, not a tour over the music. */
.editor-panel .canvas-footer { flex-wrap:wrap; }
.editor-panel .canvas-footer > .context-tip { display:flex; align-items:center; flex-wrap:nowrap; gap:7px; flex:1 0 280px; min-width:0; max-width:100%; }
.canvas-footer .context-tip[hidden] { display:none!important; }
.canvas-footer .context-tip-text { line-height:1.65; min-height:3.3em; display:block; flex:1; min-width:0; }
.canvas-footer .context-tip kbd { font:inherit; color:var(--ink); padding:1px 4px; border:1px solid var(--border); border-radius:4px; background:var(--panel); white-space:nowrap; }
.canvas-footer .context-tip-guide,.canvas-footer .context-tip-dismiss { min-width:28px; min-height:30px; padding:4px; color:var(--muted); flex-shrink:0; }
.canvas-footer .context-tip-guide { display:inline-flex; align-items:center; gap:4px; color:var(--ink); }
.canvas-footer .context-tip-guide:hover,.canvas-footer .context-tip-dismiss:hover { color:var(--selection); }
.canvas-footer .context-tip .icon { width:13px; height:13px; }
@media (pointer:coarse) { .canvas-footer .context-tip-guide,.canvas-footer .context-tip-dismiss { min-height:44px; min-width:44px; } }

.editor-canvas #tab-canvas:focus:not(:focus-visible) { outline: none; }
.editor-canvas #tab-canvas:focus-visible { outline: 2px solid var(--selection); outline-offset: 2px; }
#app[data-input=pointer] .editor-canvas #tab-canvas:focus { outline: none; }

/* Pitch labels explain the hue without enlarging the note hit area. */
.editor-canvas .tab-svg[data-note-colour=pitch] .fret-note:not(.is-muted) .fret-value { font-size:17px; transform:translateY(-5px); }
.editor-canvas .tab-svg .fret-note .note-pitch-label { font:600 8px var(--mono); letter-spacing:.2px; }

/* Opaque digit grounds match the approved palette contrast model; print keeps prior styling. */
@media screen {
  .tab-svg[data-note-colour=pitch] .fret-note rect.note-bg { fill:var(--canvas); stroke:var(--note-color); stroke-width:1.1; }
  .tab-svg[data-note-colour=pitch] .fret-note:hover rect.note-bg { fill:var(--canvas); }
  .tab-svg[data-note-colour=pitch] .fret-note.selected rect.note-bg { fill:var(--selection-bg); }
  .tab-svg[data-note-colour=neutral] .fret-note:not(.selected):not([data-playability]):not(.stacked-note) rect.note-bg { fill:var(--canvas); stroke:transparent; }
}

@media screen {
  .pitch-readout[data-note-colour=pitch] .pitch-result { background:var(--canvas); }
  .pitch-sample[data-note-colour=part] .fret-note rect.note-bg { fill:var(--canvas); stroke:transparent; }
  .pitch-sample[data-note-colour=part] .fret-note text { fill:var(--ink); }
}