screen.html

<div class="editor-root flex flex-col h-screen pt-16 bg-dark-900 text-white overflow-hidden">

    <!-- Menu bar (workspace-shell B4) — built by src/menu-bar.js; nine menus
         re-homing the command registry. Always present, above everything. -->
    <div id="editor-menu-bar" class="editor-menu-bar shrink-0"></div>

    <!-- Top bar: back + song info -->
    <div class="flex items-center gap-3 px-4 py-2 bg-dark-800 border-b border-gray-800 shrink-0">
        <button onclick="editorLeaveToHome()" class="text-gray-500 hover:text-white text-sm flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg> Back
        </button>
        <div class="h-4 w-px bg-gray-700"></div>
        <span id="editor-song-title" class="text-sm text-gray-400">No song loaded</span>
        <div class="flex-1"></div>
        <!-- Per-part view switcher: fretted parts choose String or Piano
             roll (keys parts are piano-locked). Editor pref, never pack. -->
        <!-- Per-track view dropdown (Christian's call: a dropdown, not a pill
             toggle). The engraved options drive the live lens; "Notation +
             Tab" is the 'both' staff profile as an explicit choice. -->
        <select id="editor-view-switch" onchange="editorSetViewMode(this.value)"
            class="hidden bg-dark-700 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none mr-1"
            title="Editing view for this track — String / Piano roll edit; Tab / Notation are the live engraved score (click a beat to select)"
            aria-label="Editing view for this track">
            <option value="string">String view</option>
            <option value="piano">Piano roll</option>
            <option value="tab">Tab</option>
            <option value="notation">Notation</option>
            <option value="both">Notation + Tab</option>
            <!-- Drum-editor entries (shown only in drum mode): the kit-ordered
                 grid, the same grid at GM-roll density (the drum piano roll),
                 and the engraved percussion staff via the live lens. -->
            <option value="drum-grid" hidden>Drum grid</option>
            <option value="drum-piano" hidden>Piano roll</option>
            <option value="drum-notation" hidden>Notation</option>
        </select>
        <!-- Arrangement selector -->
        <select id="editor-arrangement" class="bg-dark-700 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none" onchange="editorSwitcherSelect(this.value)" style="display:none">
        </select>
        <!-- Instrument type (first-class DATA — wins over the name). Escape hatch
             for a fretted chart opened piano-locked by a keys word in its name. -->
        <select id="editor-arr-type" class="bg-dark-700 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none hidden" onchange="editorSetArrangementType(this.value)" title="Instrument type for this track — authored identity wins over the name (fixes a fretted chart that opened as keys because its name contains a keys word). Undoable.">
            <option value="guitar">Guitar</option>
            <option value="bass">Bass</option>
            <option value="keys">Keys</option>
        </select>
        <button id="editor-rename-arr-btn" onclick="editorRenameArrangement()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs text-gray-500 hover:text-white transition hidden" title="Rename current track (display label — undoable; the instrument kind can't change here)">✏</button>
        <button id="editor-move-arr-earlier-btn" onclick="editorMovePart(-1)" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs text-gray-500 hover:text-white transition hidden disabled:opacity-40 disabled:cursor-not-allowed" title="Move current track earlier in the list (persists on save; clears undo history)">‹</button>
        <button id="editor-move-arr-later-btn" onclick="editorMovePart(1)" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs text-gray-500 hover:text-white transition hidden disabled:opacity-40 disabled:cursor-not-allowed" title="Move current track later in the list (persists on save; clears undo history)">›</button>
        <button id="editor-remove-arr-btn" onclick="editorRemoveArrangement()" class="px-2 py-1 bg-dark-600 hover:bg-red-900 rounded text-xs text-gray-500 hover:text-red-300 transition hidden" title="Remove current arrangement">&times;</button>
    </div>

    <!-- Toolbar. Each divider-group is wrapped in a `.editor-tb` span
         (display:contents — layout-inert) named by data-tb, so View ▸ Toolbars,
         the right-click checklist and the density presets can show/hide whole
         clusters with a CSS class flip (src/toolbars.js, workspace-shell B5).
         One toolbar id may span several wrappers (grid = zoom + snap). -->
    <div id="editor-toolbar-row" class="flex items-center gap-2 px-4 py-1.5 bg-dark-800 border-b border-gray-800 shrink-0 flex-wrap">
        <!-- File operations -->
        <div class="editor-tb" data-tb="file">
        <button id="editor-load-btn" onclick="editorShowLoadModal()" class="px-3 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium">Load</button>
        <button id="editor-create-btn" onclick="editorShowCreateModal()" class="px-3 py-1 bg-green-800 hover:bg-green-700 rounded text-xs font-medium" title="Start a new song">New…</button>
        <button id="editor-save-btn" onclick="editorSave()" class="px-3 py-1 bg-accent hover:bg-accent-light rounded text-xs font-medium" disabled>Save</button>
        <button id="editor-replace-audio-btn" onclick="editorShowReplaceAudioModal()" class="px-3 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium hidden" title="Replace the audio track">Replace Audio</button>
        <button id="editor-shift-audio-btn" onclick="editorPromptAudioShift()" class="px-3 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium hidden" title="Slide the recording in time to line it up with the chart — the audio moves, the chart stays put (non-destructive, undoable)">Shift Audio…</button>
        <button id="editor-build-btn" onclick="editorBuild()" class="px-3 py-1 bg-purple-800 hover:bg-purple-700 rounded text-xs font-medium hidden" title="Export the current project to the feedBack library">Export to Library</button>
        </div>
        <!-- Parts -->
        <div class="editor-tb" data-tb="parts">
        <!-- The three per-kind add buttons consolidated behind one New Track
             entry (the DAW idiom). The old modals survive as the
             import-from-file flows the dialog routes to. -->
        <button id="editor-new-track-btn" onclick="editorShowNewTrackModal()" class="px-3 py-1 bg-emerald-900 hover:bg-emerald-800 rounded text-xs font-medium hidden" title="Add a track — audio (a recording) or a MIDI/transcription instrument (empty or imported from a file)">＋ Track</button>
        <button id="editor-strings-btn" onclick="editorShowStringsModal()" class="px-3 py-1 bg-amber-800 hover:bg-amber-700 rounded text-xs font-medium hidden" title="Add or remove strings on the active arrangement (extended-range guitar / bass)">⋮ Strings</button>
        <button id="editor-record-midi-btn" onclick="editorShowRecordMidiModal()" class="px-3 py-1 bg-rose-900 hover:bg-rose-800 rounded text-xs font-medium hidden disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-rose-900" title="Record a Keys arrangement live from a MIDI keyboard (Chrome/Edge)">● Record</button>
        <button id="editor-tones-btn" onclick="editorShowTonesModal()" class="px-3 py-1 bg-cyan-900 hover:bg-cyan-800 rounded text-xs font-medium hidden" title="Tone slot names and base tone for this arrangement">♪ Tones…</button>

        <div class="h-4 w-px bg-gray-700"></div>
        </div>
        <!-- Undo/Redo -->
        <div class="editor-tb" data-tb="edit">
        <button id="editor-undo" onclick="editorUndo()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs" disabled title="Undo (Ctrl+Z)">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a5 5 0 015 5v2M3 10l4-4M3 10l4 4"/></svg>
        </button>
        <button id="editor-redo" onclick="editorRedo()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs" disabled title="Redo (Ctrl+Y)">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4"/></svg>
        </button>

        <div class="h-4 w-px bg-gray-700"></div>
        </div>
        <!-- Playback -->
        <div class="editor-tb" data-tb="transport">
        <button id="editor-play-btn" onclick="editorTogglePlay()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs" disabled title="Play/Pause (Space)">
            <svg id="editor-play-icon" class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <span id="editor-time-display" class="text-xs text-gray-500 font-mono w-20">0:00 / 0:00</span>
        <span id="editor-measure-display" class="text-xs text-gray-500 font-mono w-16" title="Current measure and time signature">—</span>
        <span id="editor-chord-display" class="text-xs text-accent font-mono w-14" title="Chord at the playhead"></span>
        <!-- Loop selected bars on the 3D highway (drag the bottom beat bar to
             select a range first). Returns to this exact edit position on exit. -->
        <button id="editor-loop3d-btn" onclick="editorLoopIn3D()" class="px-3 py-1 bg-accent hover:bg-accent-light rounded text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled title="Select some notes or set a loop region first">▶ Loop in 3D</button>
        <button id="editor-loop-region-btn" onclick="editorToggleLoopRegion()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled title="Set a loop region first">Loop</button>
        <button id="editor-loop-ab-btn" onclick="editorToggleLoopAB()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled title="Set a loop region first — A/B alternates recording and guide per pass" aria-pressed="false">A/B</button>
        <button id="editor-guide-btn" onclick="editorToggleGuideClap()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Guide claps: tick each charted note during playback (C)" aria-pressed="false">Claps</button>
        <button id="editor-metronome-btn" onclick="editorToggleMetronome()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Metronome: click every beat, accented on downbeats" aria-pressed="false">Click</button>
        <select id="editor-countin" onchange="editorSetCountIn(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none" title="Count-in: bars of metronome clicks before playback (and recording) starts — in the meter and tempo at the cursor">
            <option value="0" selected>Count: off</option>
            <option value="1">Count: 1 bar</option>
            <option value="2">Count: 2 bars</option>
            <option value="4">Count: 4 bars</option>
        </select>
        <button id="editor-mixer-btn" onclick="editorToggleMixer()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Mixer panel: track volume / mute / solo + bus levels (Shift+C)" aria-pressed="false">Mix</button>

        <div class="h-4 w-px bg-gray-700"></div>
        </div>
        <!-- Zoom (grid toolbar, first chunk — the snap chunk follows below) -->
        <div class="editor-tb" data-tb="grid">
        <span class="text-xs text-gray-500">Zoom:</span>
        <button onclick="editorZoom(-1)" class="px-1.5 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs">-</button>
        <span id="editor-zoom-display" class="text-xs text-gray-400 w-8 text-center">100</span>
        <button onclick="editorZoom(1)" class="px-1.5 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs">+</button>
        </div>
        <!-- Overlays -->
        <div class="editor-tb" data-tb="overlays">
        <button id="editor-onset-btn" onclick="editorToggleOnsetStrip()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Onset strip: amber blocks mark detected attacks in the recording (Shift+W). Display only — never places notes." aria-pressed="false">Onsets</button>
        <button id="editor-tab-preview-btn" onclick="editorShowTabPreview()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Preview the current track as engraved tab (read-only — renders the pack as last saved; needs the Tab View plugin)">Tab…</button>
        <button id="editor-drum-pads-btn" onclick="editorToggleDrumPadStrip()" class="hidden px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Drum pads: kit legend + input strip — selected hits light up, click a pad to add a hit at the cursor, Listen flashes pads from a MIDI kit (GM map)" aria-pressed="true">Drum Pads</button>
        <button id="editor-fretboard-btn" onclick="editorToggleFretboardStrip()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed" title="Fretboard strip: light every playable position for the selected notes — click one to assign it, right-click to cycle the finger mark (fretted parts)" aria-pressed="false">Fret</button>

        <div class="h-4 w-px bg-gray-700"></div>
        </div>
        <!-- BPM + offset -->
        <div class="editor-tb" data-tb="tempo">
        <span class="text-xs text-gray-500">BPM:</span>
        <input type="number" id="editor-bpm" min="30" max="400" step="0.1"
            class="w-14 bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none text-center"
            value="120" onchange="editorSetBPM(this.value)" title="Change tab tempo — rescales all notes and beats">
        <!-- Tempo sync -->
        <button id="editor-sync-btn" onclick="editorSyncTempo()" class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs hidden" title="Match tab tempo to audio">Sync</button>

        <div class="h-4 w-px bg-gray-700"></div>

        <!-- Offset -->
        <span class="text-xs text-gray-500">Offset:</span>
        <button onclick="editorNudgeOffset(-0.01)" class="px-1 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs" title="-10ms">&lt;</button>
        <input type="number" id="editor-offset" step="0.01" value="0"
            class="w-16 bg-dark-700 border border-gray-700 rounded px-1 py-0.5 text-xs text-gray-300 outline-none text-center"
            onchange="editorApplyOffset(this.value)" title="Shift all notes by seconds (negative = earlier)">
        <button onclick="editorNudgeOffset(0.01)" class="px-1 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs" title="+10ms">&gt;</button>

        <div class="h-4 w-px bg-gray-700"></div>
        </div>
        <!-- Snap (grid toolbar, second chunk) -->
        <div class="editor-tb" data-tb="grid">
        <span class="text-xs text-gray-500">Snap:</span>
        <select id="editor-snap" onchange="editorSetSnap(this.selectedIndex)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none">
            <option>1/1</option>
            <option>1/2</option>
            <option>1/3T</option>
            <option selected>1/4</option>
            <option>1/6T</option>
            <option>1/8</option>
            <option>1/12T</option>
            <option>1/16</option>
            <option>1/24T</option>
            <option>1/32</option>
            <option>1/48T</option>
            <option>1/64</option>
            <option>1/96T</option>
        </select>
        <label class="flex items-center gap-1 text-xs text-gray-400" title="Toggle grid snapping without changing the selected resolution">
            <input id="editor-snap-enabled" type="checkbox" checked onchange="editorSetSnapEnabled(this.checked)" class="accent-accent"> On
        </label>
        <button id="editor-snapmode-btn" onclick="editorToggleSnapMode()" class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Snap target — Grid: tempo-map subdivisions. Onset: nearest detected audio attack (falls back to grid when no transient is near). Turn on Onsets to see the attacks." aria-pressed="false">Grid</button>
        <select id="editor-swing" onchange="editorSetSwing(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none" title="Swing: displace the off subdivision of each pair toward the next beat (snap placement only — beat-domain, so swung notes ride tempo flexes; playback and existing notes are unchanged)">
            <option value="50" selected>Straight</option>
            <option value="54">Swing 54%</option>
            <option value="58">Swing 58%</option>
            <option value="62">Swing 62%</option>
        </select>
        </div>

        <!-- Key / scale (piano-roll in-key highlight). Hidden unless a keys
             arrangement is active; populated + gated by _refreshKeyControls().
             The harmony toolbar wrapper ANDs with that inner logic — and a
             pitched part activating REVEALS the toolbar (sticky), so today's
             auto-show behavior survives every preset. -->
        <div class="editor-tb" data-tb="harmony">
        <div id="editor-key-group" class="hidden items-center gap-1">
            <div class="h-4 w-px bg-gray-700"></div>
            <span class="text-xs text-gray-500">Key:</span>
            <select id="editor-key-tonic" onchange="editorSetKeyTonic(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none" title="Song key (tonic)"></select>
            <select id="editor-key-scale" onchange="editorSetKeyScale(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none" title="Scale / mode"></select>
            <button id="editor-key-highlight-btn" onclick="editorToggleKeyHighlight()" class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Dim out-of-key notes — fretted lanes resolve pitch from tuning + capo; the piano roll also shades out-of-key rows" aria-pressed="false">In-key</button>
            <button id="editor-key-detect-btn" onclick="editorDetectKey()" class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium" title="Guess the key from this track's notes (Krumhansl profiles) and set it — a suggestion, editable in the picker">Detect</button>
        </div>
        <!-- Trailing divider lives inside the harmony wrapper so it hides with
             the group (no orphan separator before Shortcuts when Harmony is off). -->
        <div class="h-4 w-px bg-gray-700"></div>
        </div>

        <!-- Shortcuts (always visible — the completeness net's own controls
             never hide) -->
        <span class="text-xs text-gray-500">Keys:</span>
        <select id="editor-shortcut-profile" onchange="editorSetShortcutProfile(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none" title="Keyboard shortcut profile">
            <option value="feedback">FeedBack</option>
            <option value="logical">Logical (Logic-style)</option>
            <option value="cableton">Cableton (Ableton-style)</option>
            <option value="eof">Legacy (EOF)</option>
        </select>
        <button id="editor-shortcuts-btn" onclick="editorToggleShortcutPanel()" class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs" title="Show shortcut and command controls">Shortcuts…</button>
    </div>

    <!-- Transport control bar + LCD (workspace-shell B2) — built by
         src/transport-bar.js; always present, directly above the timeline. -->
    <div id="editor-transport-bar" class="editor-transport-bar shrink-0"></div>

    <!-- Canvas area + inspector panel -->
    <div class="flex-1 flex overflow-hidden relative">
        <!-- Tracks header column (src/track-session.js): the persistent track
             tree made visible — one header cell per lane the canvas draws.
             Empty until render() fills it; the splitter resizes it. -->
        <aside id="editor-track-session" class="w-80 shrink-0 bg-dark-800 border-r border-gray-800 overflow-hidden text-xs text-gray-200"></aside>
        <div id="editor-track-session-splitter" role="separator" aria-orientation="vertical" aria-label="Resize track headers" title="Drag to resize track headers"></div>
        <div id="editor-canvas-wrap" class="flex-1 relative overflow-hidden bg-dark-900">
            <!-- Position sweep bar (P8) - shown by anchor "Resolve positions in
                 this window"; Enter accepts, arrows move, A accepts all, Esc done. -->
            <div id="editor-sweep-bar" class="hidden absolute top-12 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 rounded-md border border-sky-500/50 bg-dark-800/95 backdrop-blur-sm px-3 py-1.5 text-xs">
                <span class="text-sky-300 font-medium">Sweep</span>
                <span id="editor-sweep-count" class="font-mono text-gray-300"></span>
                <button id="editor-sweep-prev" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600" title="Previous (Left arrow)">&#8592;</button>
                <button id="editor-sweep-accept" class="px-2 py-0.5 rounded bg-sky-700 text-white hover:bg-sky-600" title="Accept this position (Enter)">Accept</button>
                <button id="editor-sweep-skip" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600" title="Skip (Right arrow)">&#8594;</button>
                <button id="editor-sweep-all" class="px-2 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600" title="Accept all remaining (A)">Accept all</button>
                <button id="editor-sweep-done" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600" title="Close (Esc)">&#10005;</button>
            </div>
            <!-- Tempo-zone confirm bar (P2-3) — shown by Tempo/Grid ▸ Scan for
                 tempo zones; adjust the bands on the timeline (drag a boundary,
                 Split/Merge/Kind/BPM on the selected zone), then Confirm & refine.
                 Esc dismisses without applying. -->
            <div id="editor-segment-bar" class="hidden absolute top-12 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 rounded-md border border-teal-500/50 bg-dark-800/95 backdrop-blur-sm px-3 py-1.5 text-xs">
                <span class="text-teal-300 font-medium">Tempo zones</span>
                <span id="editor-segment-count" class="font-mono text-gray-300"></span>
                <button id="editor-segment-split" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600 disabled:opacity-40" title="Split the selected zone at the playhead">Split</button>
                <button id="editor-segment-merge" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600 disabled:opacity-40" title="Merge the selected zone with the one after it">Merge &#8594;</button>
                <button id="editor-segment-kind" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600 disabled:opacity-40" title="Cycle the selected zone: steady &#8594; ramp &#8594; unmapped">Kind</button>
                <button id="editor-segment-bpm" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600 disabled:opacity-40" title="Type the selected zone's tempo">BPM&#8230;</button>
                <button id="editor-segment-feel" class="hidden px-2 py-0.5 rounded bg-teal-700 text-white hover:bg-teal-600"></button>
                <button id="editor-segment-octave" class="hidden px-2 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600"></button>
                <button id="editor-segment-single" class="px-2 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600" title="Replace every zone with one steady tempo (escape hatch for an over-segmented steady song)">Single tempo</button>
                <button id="editor-segment-apply" class="px-2 py-0.5 rounded bg-teal-700 text-white hover:bg-teal-600" title="Build the grid: seed each zone, then snap its barlines to the recording inside it">Confirm &amp; refine</button>
                <button id="editor-segment-dismiss" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-gray-300 hover:text-white hover:bg-dark-600" title="Dismiss (Esc)">&#10005;</button>
            </div>
            <!-- Command palette (Ctrl+K) — a searchable front door over every
                 registry command (with its live keybinding) and menu action.
                 Type-to-filter; ↑/↓ select, Enter runs, Esc / backdrop closes. -->
            <!-- Numeric Tempo List (P2-7, UX G3): one row per AUTHORED mark;
                 toggled from Tempo/Grid menu; click a row jumps to its bar. -->
            <div id="editor-tempo-list" class="hidden absolute right-2 top-12 z-30 w-80 max-h-80 overflow-y-auto rounded-md border border-gray-600 bg-dark-800/95 backdrop-blur-sm text-xs">
                <div class="flex items-center justify-between px-2 py-1 border-b border-gray-700">
                    <span class="text-teal-300 font-medium">Tempo List</span>
                    <button id="editor-tempo-list-close" class="px-1.5 rounded text-gray-400 hover:text-white hover:bg-dark-600" title="Close">&#10005;</button>
                </div>
                <table class="w-full text-left">
                    <thead><tr class="text-gray-500">
                        <th class="px-2 py-0.5 text-right">Bar</th><th class="px-2 py-0.5">Type</th>
                        <th class="px-2 py-0.5">Value</th><th class="px-2 py-0.5">Source</th>
                    </tr></thead>
                    <tbody id="editor-tempo-list-body"></tbody>
                </table>
            </div>
            <!-- Multitrack stem manager (studio-session ingest): import /
                 rename / reorder / delete audio tracks and pair each with
                 the chart track transcribing it. src/stem-tracks.js owns it. -->
            <div id="editor-stem-tracks-modal" class="hidden absolute inset-0 z-40 bg-black/40 backdrop-blur-[2px]">
                <div class="mx-auto mt-16 w-[30rem] max-w-[calc(100%-2rem)] rounded-lg border border-gray-600 bg-dark-800/95 shadow-2xl text-sm" role="dialog" aria-label="Audio tracks">
                    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-700">
                        <span class="text-teal-300 font-medium">Audio tracks</span>
                        <div class="flex items-center gap-2">
                            <label class="px-2 py-0.5 rounded bg-teal-700 text-white hover:bg-teal-600 cursor-pointer">Import…
                                <input id="editor-stem-tracks-file" type="file" multiple accept=".wav,.ogg,.opus,.mp3,.flac,.m4a,.aac,audio/*" class="hidden">
                            </label>
                            <button id="editor-stem-tracks-close" class="px-1.5 rounded text-gray-400 hover:text-white hover:bg-dark-600" title="Close">&#10005;</button>
                        </div>
                    </div>
                    <div id="editor-stem-tracks-list" class="px-3 py-1.5 max-h-80 overflow-y-auto text-xs"></div>
                    <p class="px-3 pb-2 text-[10px] text-gray-500">Each track can be paired with the chart track that transcribes it — pairing powers "Solo my source track" and is saved with the song.</p>
                </div>
            </div>
            <div id="editor-command-palette" class="hidden absolute inset-0 z-40 bg-black/40 backdrop-blur-[2px]">
                <div class="mx-auto mt-16 w-[36rem] max-w-[calc(100%-2rem)] rounded-lg border border-gray-600 bg-dark-800/95 shadow-2xl text-sm" role="dialog" aria-label="Command palette">
                    <input id="editor-palette-input" type="text" placeholder="Type a command… (Esc to close)" autocomplete="off" spellcheck="false"
                           class="w-full bg-transparent px-3 py-2.5 text-gray-100 placeholder-gray-500 border-b border-gray-700 outline-none" />
                    <ul id="editor-palette-list" class="max-h-80 overflow-y-auto p-1.5 text-xs"></ul>
                </div>
            </div>
            <!-- Live Tab view mount (view-modality): the engraved score that
                 OWNS the timeline area while S.tabViewMode is on. alphaTab
                 renders into it; the draw pass shows/hides it. -->
            <div id="editor-tabview-mount" class="hidden absolute inset-0 z-20 overflow-auto bg-white"></div>
            <!-- Playability-lint popover (P9) — anchored bottom-right of the timeline. -->
            <div id="editor-lint-pop" role="dialog" aria-label="Playability notes" class="hidden absolute right-3 bottom-2 z-30 editor-lint-pop"></div>
            <!-- Entry tour card (workspace-shell C3) — a non-modal, task-based
                 first-run coach; never blocks the canvas. Skippable + resumable
                 from Help ▸ Editor tour. -->
            <div id="editor-tour" class="hidden absolute bottom-3 left-1/2 -translate-x-1/2 z-40 w-[26rem] max-w-[calc(100%-1.5rem)] rounded-lg bg-dark-800/95 border border-sky-700/50 shadow-xl backdrop-blur px-4 py-3 text-xs text-gray-200">
                <div class="flex items-center justify-between mb-1.5">
                    <div class="flex items-center gap-2">
                        <span id="editor-tour-title" class="text-sky-300 font-semibold">Compose</span>
                        <span id="editor-tour-count" class="text-[10px] text-gray-500">1/4</span>
                    </div>
                    <button onclick="editorTourSkip()" class="text-gray-500 hover:text-white text-sm leading-none" aria-label="Skip — resume from Help" title="Skip — resume any time from Help ▸ Editor tour">&times;</button>
                </div>
                <div id="editor-tour-text" class="leading-snug text-gray-200"></div>
                <div class="flex items-center justify-end gap-2 mt-2.5">
                    <button id="editor-tour-escape" onclick="editorTourEscape()" class="hidden mr-auto px-2 py-1 rounded text-[11px] text-gray-400 hover:text-gray-200 hover:bg-dark-600" title="Skip aligning for now and switch to the Compose tour">I'll align later</button>
                    <button onclick="editorTourSkip()" class="px-2 py-1 rounded text-[11px] text-gray-400 hover:text-gray-200 hover:bg-dark-600">Skip</button>
                    <button id="editor-tour-next" onclick="editorTourNext()" class="px-3 py-1 rounded text-[11px] font-medium bg-sky-600 hover:bg-sky-500 text-white">Next ›</button>
                </div>
            </div>
            <!-- Onboarding signpost (workspace-shell C2) — a quiet, SUGGEST-ONLY,
                 one-shot, permanently-dismissible hint pinned bottom-centre. It
                 only ever points at the menu/shortcut; it never moves a surface. -->
            <div id="editor-signpost" role="status" aria-live="polite" class="hidden absolute bottom-3 left-1/2 -translate-x-1/2 z-30 max-w-lg flex items-start gap-2 px-3 py-2 rounded-lg bg-dark-800/95 border border-gray-700 shadow-xl backdrop-blur text-xs text-gray-200">
                <span class="mt-0.5 text-sky-300" aria-hidden="true">💡</span>
                <span id="editor-signpost-msg" class="leading-snug"></span>
                <button onclick="editorDismissSignpost()" class="ml-1 -mr-0.5 text-gray-500 hover:text-white text-sm leading-none shrink-0" aria-label="Dismiss — won't show again" title="Dismiss — won't show again">&times;</button>
            </div>
            <!-- First-win cue (workspace-shell C2) — a calm, one-time visual
                 acknowledgement of a correctness milestone; auto-fades, no sound,
                 no score, no token. Non-interactive. -->
            <div id="editor-cue" class="hidden absolute bottom-14 left-1/2 -translate-x-1/2 z-30 px-3 py-1.5 rounded-full bg-emerald-500/15 border border-emerald-400/40 text-xs text-emerald-100 pointer-events-none"></div>
            <!-- Drum-pad companion strip — kit legend / cursor input / GM MIDI
                 monitor; built by src/drum-pad-strip.js, drum edit mode only. -->
            <div id="editor-drum-pad-strip" class="hidden absolute bottom-2 left-[52px] right-3 z-20 h-44 select-none rounded-md border border-gray-700/80 bg-dark-800/90 backdrop-blur-sm px-2 py-1.5 flex items-center gap-2">
                <div id="editor-drum-pads" class="flex flex-col items-center gap-1 mx-auto"></div>
                <div class="ml-auto flex flex-col items-end gap-1 shrink-0">
                    <div class="flex items-center gap-1">
                        <button id="editor-drum-view-kit" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-[10px] text-gray-300 hover:text-white hover:bg-dark-600 aria-pressed:bg-accent" title="Kit view — a drawn kit with VSTi-style hit zones" aria-pressed="true">Kit</button>
                        <button id="editor-drum-view-pads" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-[10px] text-gray-300 hover:text-white hover:bg-dark-600" title="Pad view — sampler-style pad grid" aria-pressed="false">Pads</button>
                    </div>
                    <button id="editor-drum-pads-listen" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-[10px] text-gray-300 hover:text-white hover:bg-dark-600" title="Flash pads from incoming MIDI notes (General MIDI percussion map) — verify your e-kit mapping before recording" aria-pressed="false">Listen</button>
                    <button id="editor-drum-pads-hide" class="px-1.5 py-0.5 rounded bg-dark-700/90 text-[10px] text-gray-300 hover:text-white hover:bg-dark-600" title="Hide the drum pads">Hide</button>
                </div>
            </div>
            <!-- Fretboard companion strip (P7/VA.6) — bottom overlay, built by
                 src/fretboard-strip.js; hidden unless toggled on a fretted part. -->
            <div id="editor-fretboard-strip" class="hidden absolute bottom-2 left-[52px] right-3 z-20 h-28 select-none rounded-md border border-gray-700/80 bg-dark-800/90 backdrop-blur-sm overflow-hidden">
                <button id="editor-fretboard-collapse" class="absolute right-1 top-1 z-10 px-1.5 py-0.5 rounded bg-dark-700/90 text-[10px] text-gray-300 hover:text-white hover:bg-dark-600" title="Hide the fretboard strip">Hide</button>
                <canvas id="editor-fretboard-canvas" class="w-full h-full block"></canvas>
            </div>
            <!-- The loop region UI lives on the canvas ruler now (src/ruler.js,
                 workspace-shell B3): drag the ruler's upper half to paint a
                 loop (Shift = free), drag its edge grips to resize, Alt+←/→
                 nudges the start edge (Alt+Shift: the end edge); snap mode +
                 Clear live under Transport ▸ Loop. -->
            <canvas id="editor-canvas" class="absolute inset-0"></canvas>
            <!-- Canvas string-count buttons: −/+ pinned under the lowest
                 string's label. + grows the count at the end the pitch model
                 supports (guitar low B/F#, bass low B then high C); − peels
                 it back, confirming first when notes live on that string.
                 Positioned/refreshed by editorStringButtonsRefresh(). -->
            <div id="editor-string-btns" class="hidden editor-string-btns">
                <button id="editor-string-btn-remove" onclick="editorCanvasStringRemove()" class="editor-string-btn" aria-label="Remove a string">−</button>
                <button id="editor-string-btn-add" onclick="editorCanvasStringAdd()" class="editor-string-btn" aria-label="Add a string">+</button>
            </div>
            <!-- Read-only-roll notice: shown while a FRETTED part is in the
                 piano roll (V4 — no silent string/fret writes). -->
            <div id="editor-roll-lock-pill" class="hidden absolute top-12 left-1/2 -translate-x-1/2 z-20 px-3 py-1 rounded-full bg-dark-800/90 border border-amber-700/60 text-[11px] text-amber-200 pointer-events-none">
                Piano roll is read-only for fretted parts — switch to String view to edit
            </div>
            <div id="editor-shortcut-panel" class="hidden absolute top-12 right-3 z-30 w-[34rem] max-w-[calc(100%-1.5rem)] bg-dark-800/95 border border-gray-700 rounded-lg shadow-xl backdrop-blur text-xs text-gray-200">
                <div class="flex items-center justify-between px-3 py-2 border-b border-gray-700">
                    <div>
                        <div class="font-semibold">Shortcut Controls</div>
                        <div id="editor-shortcut-panel-subtitle" class="text-[11px] text-gray-500">Command buttons follow the active shortcut profile.</div>
                    </div>
                    <button onclick="editorToggleShortcutPanel(false)" class="text-gray-500 hover:text-white text-sm leading-none">&times;</button>
                </div>
                <div class="px-3 py-2 border-b border-gray-700 flex flex-wrap items-center gap-2">
                    <span class="text-gray-500">Profile</span>
                    <select id="editor-shortcut-panel-profile" onchange="editorSetShortcutProfile(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none">
                        <option value="feedback">FeedBack</option>
                        <option value="logical">Logical (Logic-style)</option>
                        <option value="cableton">Cableton (Ableton-style)</option>
                        <option value="eof">Legacy (EOF)</option>
                    </select>
                    <span class="text-gray-500 ml-2">Right-click</span>
                    <select id="editor-right-click-behavior" onchange="editorSetRightClickBehavior(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none">
                        <option value="context">Context menus</option>
                        <option value="eofEdit">Add/remove notes</option>
                        <option value="tool:pencil">Pencil tool (draw)</option>
                        <option value="tool:eraser">Eraser tool</option>
                        <option value="tool:marquee">Marquee tool</option>
                        <option value="tool:mute">Mute tool</option>
                        <option value="tool:scissors">Scissors tool (split)</option>
                    </select>
                    <span class="text-gray-500 ml-2">Chord click</span>
                    <select id="editor-chord-select-behavior" onchange="editorSetChordSelectBehavior(this.value)" class="bg-dark-700 border border-gray-700 rounded px-1.5 py-0.5 text-xs text-gray-300 outline-none" title="Clicking one note of a same-time chord — Alt-click always does the opposite">
                        <option value="single">Single note</option>
                        <option value="chord">Whole chord</option>
                    </select>
                    <span id="editor-chord-select-hint" class="w-full text-[11px] text-gray-500"></span>
                    <label id="editor-shortcut-diff-wrap" class="hidden flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer" title="List only the keys that differ from this profile's reference app">
                        <input type="checkbox" id="editor-shortcut-diff-only" onchange="editorSetShortcutDiffFilter(this.checked)" class="accent-amber-400">
                        Show differences
                    </label>
                    <span id="editor-right-click-hint" class="ml-auto text-[11px] text-gray-500">Disabled rows are planned commands.</span>
                </div>
                <div class="px-3 py-1.5 border-b border-gray-800 text-[11px] text-gray-500">Shortcut keys are handled only while the editor has focus; browser/system conflicts stay outside editor focus.</div>
                <div id="editor-shortcut-command-list" class="p-2 space-y-2 max-h-[62vh] overflow-y-auto"></div>
            </div>
        </div>
        <!-- Mixer panel (workspace-shell B6) — the one first-class mixer,
             DOCKED beside the canvas like the inspector (never a floating
             popover): per-part strips (volume / mute / solo shape the part's
             GUIDE voice; future part playback reads the same S.partMix)
             over the recording / guide / click bus faders and the edit
             blip. Bus levels + open state are editor prefs (never pack
             data); the recording fader is a transparent gain outside the
             limiter, and part solo never gates the recording (D5). Part
             strips render via src/mixer-panel.js. -->
        <!-- Bottom-drawer DAW mixer: a horizontal row of vertical channel
             strips (per-track meter + rotated fader + M/S) followed by the
             SOURCE / GUIDE / CLICK utility buses and a dedicated MASTER
             output strip. Track M/S/faders share S.partMix with the Tracks
             column; bus levels + the +6 dB fader ceiling are editor prefs.
             The recording joins post-limiter so it's metered and master-
             trimmed but never colored. Strips render via src/mixer-panel.js. -->
        <div id="editor-mixer-panel" class="hidden editor-mixer-drawer text-xs text-gray-200">
            <div class="editor-mixer-titlebar">
                <span>Mixer</span>
                <div class="flex items-center gap-3">
                    <!-- Band mode: every track voices its instrument, mixed by the strips. -->
                    <button id="editor-mixer-play-all" type="button" onclick="editorTogglePlayAllTracks()" aria-pressed="false"
                            class="editor-mixer-playall" title="Play ALL tracks as their instruments (mixed by the strips); off = only the current track's guide voice">All tracks</button>
                    <button id="editor-mixer-close" type="button" title="Close mixer" aria-label="Close mixer">&times;</button>
                </div>
            </div>
            <div class="editor-mixer-console">
                <div id="editor-mixer-parts" class="editor-mixer-strips"></div>
                <div class="editor-mixer-utility-strips" aria-label="Utility buses">
                    <label class="editor-mixer-strip editor-mixer-bus-strip" title="Active recording or stem source">
                        <span class="editor-mixer-strip-type">BUS</span><span class="editor-mixer-bus-name">SOURCE</span>
                        <div class="editor-mixer-channel"><div class="editor-mixer-meter-group"><div class="editor-mixer-meter" data-meter-key="bus:ref" aria-hidden="true"><span></span></div>
                        <div class="editor-mixer-db-scale" aria-hidden="true"><i>0</i><i>−6</i><i>−12</i><i>−24</i><i>−48</i><i>−∞</i></div><output class="editor-mixer-db-readout" data-meter-readout="bus:ref">−∞</output></div>
                        <input id="editor-mix-ref" class="editor-mixer-fader" type="range" min="0" max="110" step="0.1" value="100" aria-label="Source fader level" aria-valuetext="+0.0 dB" oninput="editorSetMixLevel('ref', this.value)"></div>
                        <span id="editor-mix-ref-val" class="editor-mixer-value">+0.0 dB</span>
                    </label>
                    <label class="editor-mixer-strip editor-mixer-bus-strip" title="Transcription guide voice">
                        <span class="editor-mixer-strip-type">BUS</span><span class="editor-mixer-bus-name">GUIDE</span>
                        <div class="editor-mixer-channel"><div class="editor-mixer-meter-group"><div class="editor-mixer-meter" data-meter-key="bus:guide" aria-hidden="true"><span></span></div>
                        <div class="editor-mixer-db-scale" aria-hidden="true"><i>0</i><i>−6</i><i>−12</i><i>−24</i><i>−48</i><i>−∞</i></div><output class="editor-mixer-db-readout" data-meter-readout="bus:guide">−∞</output></div>
                        <input id="editor-mix-guide" class="editor-mixer-fader" type="range" min="0" max="110" step="0.1" value="35" aria-label="Guide fader level" aria-valuetext="−9.1 dB" oninput="editorSetMixLevel('guide', this.value)"></div>
                        <span id="editor-mix-guide-val" class="editor-mixer-value">−9.1 dB</span>
                    </label>
                    <label class="editor-mixer-strip editor-mixer-bus-strip" title="Metronome click">
                        <span class="editor-mixer-strip-type">BUS</span><span class="editor-mixer-bus-name">CLICK</span>
                        <div class="editor-mixer-channel"><div class="editor-mixer-meter-group"><div class="editor-mixer-meter" data-meter-key="bus:click" aria-hidden="true"><span></span></div>
                        <div class="editor-mixer-db-scale" aria-hidden="true"><i>0</i><i>−6</i><i>−12</i><i>−24</i><i>−48</i><i>−∞</i></div><output class="editor-mixer-db-readout" data-meter-readout="bus:click">−∞</output></div>
                        <input id="editor-mix-click" class="editor-mixer-fader" type="range" min="0" max="110" step="0.1" value="25" aria-label="Click fader level" aria-valuetext="−12.0 dB" oninput="editorSetMixLevel('click', this.value)"></div>
                        <span id="editor-mix-click-val" class="editor-mixer-value">−12.0 dB</span>
                    </label>
                </div>
                <label class="editor-mixer-strip editor-mixer-master-strip" title="Final output level">
                    <span class="editor-mixer-strip-type">OUTPUT</span><span class="editor-mixer-bus-name">MASTER</span>
                    <div class="editor-mixer-channel"><div class="editor-mixer-meter-group"><div class="editor-mixer-meter editor-mixer-master-meter" data-meter-key="bus:master" aria-hidden="true"><span></span></div>
                    <div class="editor-mixer-db-scale" aria-hidden="true"><i>0</i><i>−6</i><i>−12</i><i>−24</i><i>−48</i><i>−∞</i></div><output class="editor-mixer-db-readout" data-meter-readout="bus:master">−∞</output></div>
                    <input id="editor-mix-master" class="editor-mixer-fader" type="range" min="0" max="110" step="0.1" value="100" aria-label="Master output fader level" aria-valuetext="+0.0 dB" oninput="editorSetMixLevel('master', this.value)"></div>
                    <span id="editor-mix-master-val" class="editor-mixer-value">+0.0 dB</span>
                </label>
            </div>
        </div>
        <!-- Inspector panel — populated by `_renderInspector` whenever the
             selection changes. Hidden when no notes are selected; the wrapper
             stays in the DOM so layout is stable across selection changes. -->
        <div id="editor-inspector" class="hidden w-64 shrink-0 bg-dark-800 border-l border-gray-800 overflow-y-auto text-xs text-gray-200 p-3 space-y-3"></div>
    </div>

    <!-- Status bar -->
    <div class="flex items-center gap-4 px-4 py-1 bg-dark-800 border-t border-gray-800 shrink-0">
        <span id="editor-status" class="text-xs text-gray-500">Ready</span>
        <div class="flex-1"></div>
        <button id="editor-lint-chip" onclick="editorToggleLintPopover()" aria-controls="editor-lint-pop" aria-expanded="false" class="hidden px-1.5 rounded text-xs font-medium bg-amber-500/15 text-amber-300 border border-amber-400/30 hover:bg-amber-500/25" title="Playability notes for this track — advisory only, never blocking. Click to review; each row seeks and selects."></button>
        <span id="editor-note-count" class="text-xs text-gray-600"></span>
        <span class="text-xs text-gray-600">Wheel/middle-drag: pan | Ctrl+wheel: zoom | Dbl-click: add note | Del: delete | Select notes or drag the ⇆ bars strip → ▶ Loop in 3D</span>
    </div>
</div>

<!-- Load modal -->
<div id="editor-load-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-lg max-h-[75vh] flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Load a feedpak</span>
            <button onclick="editorHideLoadModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="px-4 pt-3 pb-1">
            <div class="text-[11px] text-gray-500 mb-1">Song library folder</div>
            <div id="editor-load-path" title="" class="text-xs text-gray-400 bg-dark-800 border border-gray-700 rounded px-2 py-1 truncate">—</div>
        </div>
        <div class="px-4 py-2">
            <input id="editor-load-search" type="text" placeholder="Search all folders by song, artist, or filename…" oninput="editorFilterSongs(this.value)"
                class="w-full bg-dark-800 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-300 outline-none focus:border-accent/50">
        </div>
        <div id="editor-load-list" class="flex-1 overflow-y-auto px-2 pb-2">
            <div class="text-xs text-gray-500 p-2">Loading…</div>
        </div>
    </div>
</div>

<!-- Context menu -->
<div id="editor-context-menu" class="hidden absolute z-50 bg-dark-700 border border-gray-700 rounded-lg shadow-xl py-1 min-w-[160px]">
</div>

<!-- Self-contained segmented toggle for the audio-source pickers. Inlined (not
     Tailwind utilities) so it renders regardless of what the plugin's prebuilt
     stylesheet scanned — same rationale as song_preview's toggle pill. -->
<style>
.aud-seg-wrap { display:inline-flex; gap:2px; margin-bottom:8px; padding:3px;
    background:#15161c; border:1px solid #2c3040; border-radius:8px; }
.aud-seg { padding:5px 14px; border:none; border-radius:6px; background:transparent;
    color:#9aa0ad; font-size:12px; line-height:1; cursor:pointer; transition:background-color .15s, color .15s; }
.aud-seg:hover { color:#f2f3f6; }
.aud-seg.is-active { background:#4080e0; color:#fff; }
</style>

<!-- Create custom song modal -->
<div id="editor-create-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-5xl mx-4 max-h-[88vh] flex flex-col overflow-y-auto">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700 shrink-0">
            <span class="text-sm font-medium">Create New Arrangement</span>
            <button onclick="editorHideCreateModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4">

            <!-- One import-first menu. Files define the track roster; metadata
                 remains editable alongside it. -->
            <p class="text-[11px] text-gray-500">
                Add the session files, choose one audio source as the Guide, then create the project.
            </p>

            <!-- Two columns so the modal is wide, not tall: LEFT = where the chart
                 comes from, RIGHT = audio + song details. Full-width Create below. -->
            <div class="grid grid-cols-2 gap-4 mt-4 items-start">

              <!-- ===== LEFT: chart source ===== -->
              <div class="space-y-4">

            <!-- Content Import — one browse for every supported track format. -->
            <div class="space-y-2 rounded-lg border border-gray-800 p-3">
                <div class="text-xs font-semibold text-gray-300">Content Import</div>
                <label for="editor-create-import"
                    class="inline-block cursor-pointer px-2 py-1 rounded text-xs font-medium bg-dark-600 text-gray-300 hover:bg-dark-500">Add File</label>
                <input type="file" id="editor-create-import" multiple class="hidden"
                    accept=".mp3,.wav,.flac,.ogg,.m4a,.opus,.aac,.wem,.gp3,.gp4,.gp5,.gpx,.gp,.mid,.midi,.xml,.musicxml,.mxl"
                    onchange="editorContentImportSelected(this)">
                <div class="flex items-center gap-2">
                    <span class="text-[11px] text-gray-600 shrink-0">or paste a YouTube URL</span>
                    <input type="text" id="editor-create-yt-url" placeholder="https://youtube.com/watch?v=..."
                        oninput="editorYtUrlInput()"
                        class="flex-1 bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none focus:border-accent/50">
                </div>
                <div id="editor-create-import-status" class="text-[11px] text-gray-500"></div>
            </div>

            <!-- Unified imported-track roster. Guide is an exclusive audio-only choice. -->
            <div id="editor-create-tracks" class="space-y-1">
                <div class="editor-create-track-head">
                    <span>Use</span><span>Track</span><span>Type</span><span>Guide</span><span></span>
                </div>
                <div id="editor-create-track-list" class="max-h-64 overflow-y-auto bg-dark-800 rounded"></div>
            </div>

            <!-- GP8 embedded audio banner (shown only when GP8 file has embedded audio) -->
            <div id="editor-gp8-audio-banner" class="hidden rounded-lg border border-accent/30 bg-accent/5 p-3">
                <div class="flex items-start gap-2">
                    <svg class="w-4 h-4 text-accent mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/></svg>
                    <div class="flex-1">
                        <p class="text-xs font-semibold text-white mb-1">Embedded audio detected</p>
                        <p class="text-xs text-gray-400 mb-2">This GP8 file has a backing track with <span id="editor-gp8-sync-count">0</span> sync point(s).</p>
                        <div class="flex gap-2">
                            <button onclick="editorSetGP8AudioMode('embedded')" id="editor-gp8-btn-embedded"
                                class="px-2 py-1 rounded text-xs font-medium bg-accent text-white">Use embedded audio</button>
                            <button onclick="editorSetGP8AudioMode('upload')" id="editor-gp8-btn-upload"
                                class="px-2 py-1 rounded text-xs font-medium bg-dark-600 text-gray-300 hover:bg-dark-500">Supply own audio</button>
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Sync quality depends on how carefully the tab was aligned in Guitar Pro.</p>
                    </div>
                </div>
            </div>

            <!-- Auto-sync audio drop zone (shown when no embedded audio, or user wants to supply their own) -->
            <div id="editor-autosync-section" class="hidden">
                <label class="text-xs font-medium text-gray-400 mb-1 block">
                    Audio for auto-sync
                    <span class="text-gray-600 font-normal ml-1">— align tab to recording automatically</span>
                </label>
                <input type="file" id="editor-autosync-audio" accept=".wem,.ogg,.flac,.mp3,.wav,.m4a,.aac"
                    onchange="editorAutoSyncAudioSelected(this)"
                    class="w-full text-xs text-gray-400 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:bg-dark-600 file:text-gray-300 hover:file:bg-dark-500">
                <div class="mt-1 flex items-center gap-2">
                    <span class="text-xs text-gray-600">or</span>
                    <input type="text" id="editor-autosync-yt-url" placeholder="https://youtube.com/watch?v=..."
                        class="flex-1 bg-dark-700 border border-gray-700 rounded px-2 py-0.5 text-xs text-gray-300 outline-none focus:border-accent">
                    <button onclick="editorAutoSyncYtFetch()" id="editor-autosync-yt-btn"
                        class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs text-gray-300 transition">Fetch</button>
                </div>
                <div id="editor-autosync-status" class="text-xs text-gray-600 mt-1"></div>
                <div id="editor-refine-row" class="hidden mt-2 flex items-center gap-2 flex-wrap">
                    <span class="text-xs text-gray-500">Refine sync every</span>
                    <input type="number" id="editor-refine-bars" value="8" min="1" max="64" step="1"
                        class="w-14 bg-dark-700 border border-gray-700 rounded px-2 py-0.5 text-xs text-gray-300 outline-none">
                    <span class="text-xs text-gray-500">bars</span>
                    <button onclick="editorRefineSync()" id="editor-refine-btn"
                        class="px-2 py-0.5 bg-dark-600 hover:bg-dark-500 rounded text-xs text-gray-300 transition">Refine</button>
                    <span id="editor-refine-status" class="text-xs text-gray-600"></span>
                </div>
            </div>

              </div><!-- /LEFT column -->

              <!-- ===== RIGHT: album art + song details ===== -->
              <div class="space-y-4">

            <!-- Album Art — upload a file OR pick a cover from the Cover Art Archive. -->
            <div class="rounded-lg border border-gray-800 p-3">
                <div class="text-xs font-semibold text-gray-300 mb-2">Album Art <span class="text-gray-600 font-normal">— optional</span></div>
                <div class="flex items-center gap-3">
                    <div id="editor-create-art-preview" style="width:5.5rem;height:5.5rem;background-size:cover;background-position:center"
                        class="rounded bg-dark-800 border border-gray-700 flex items-center justify-center text-gray-600 text-[10px] text-center shrink-0 overflow-hidden">No art yet</div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <input type="file" id="editor-create-art" accept=".png,.jpg,.jpeg,.dds"
                                onchange="editorCreateArtSelected(this)"
                                class="flex-1 min-w-0 text-xs text-gray-400 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-xs file:bg-dark-600 file:text-gray-300 hover:file:bg-dark-500">
                            <button type="button" onclick="editorArtSearch()"
                                class="px-2 py-1 rounded text-xs font-medium bg-dark-600 text-gray-300 hover:bg-dark-500 shrink-0">Find cover…</button>
                        </div>
                        <p class="text-[11px] text-gray-600 mt-1">Upload a file, or find a cover from MusicBrainz.</p>
                    </div>
                </div>
            </div>

            <!-- Song details — the manifest metadata the feedpak spec models (§5.1). -->
            <div class="rounded-lg border border-gray-800 p-3 space-y-2">
                <div class="text-xs font-semibold text-gray-300">Song details</div>
                <div id="editor-create-autofill-note" class="text-[11px] text-accent"></div>
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="text-xs text-gray-500">Title <span class="text-gray-600">(required)</span></label>
                        <input type="text" id="editor-create-title" placeholder="Song title"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Artist</label>
                        <input type="text" id="editor-create-artist" placeholder="Performing artist"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Album</label>
                        <input type="text" id="editor-create-album" placeholder="Album"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Album artist</label>
                        <input type="text" id="editor-create-album-artist" placeholder="For compilations"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Year</label>
                        <input type="text" id="editor-create-year" placeholder="2025" inputmode="numeric"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="text-xs text-gray-500">Track #</label>
                            <input type="text" id="editor-create-track" placeholder="1" inputmode="numeric"
                                class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                        </div>
                        <div>
                            <label class="text-xs text-gray-500">Disc #</label>
                            <input type="text" id="editor-create-disc" placeholder="1" inputmode="numeric"
                                class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Genre(s)</label>
                        <input type="text" id="editor-create-genre" placeholder="Rock, Metal"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Language</label>
                        <input type="text" id="editor-create-language" placeholder="en"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">ISRC</label>
                        <input type="text" id="editor-create-isrc" placeholder="USABC2400001"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">MusicBrainz ID</label>
                        <input type="text" id="editor-create-mbid" placeholder="recording MBID"
                            class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    </div>
                </div>
                <div>
                    <label class="text-xs text-gray-500">Chart author(s)</label>
                    <input type="text" id="editor-create-authors" placeholder="Who charted this — separate names with commas"
                        class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                    <p class="text-[11px] text-gray-600 mt-1">Credited in the feedpak (spec <span class="text-gray-500">authors</span>) — distinct from the performing artist.</p>
                </div>
            </div>

            <!-- MusicBrainz match — scan-first: uses the Title/Artist already on
                 the form; the popup lets you refine the query + pick a record. -->
            <div class="rounded-lg border border-gray-800 p-3">
                <div class="flex items-center justify-between gap-2">
                    <div>
                        <div class="text-xs font-semibold text-gray-300">Match metadata</div>
                        <p class="text-[11px] text-gray-600">Look this song up on MusicBrainz, or identify the exact recording from your audio.</p>
                    </div>
                    <div class="flex items-center gap-1.5 shrink-0">
                        <button type="button" id="editor-create-identify-btn" onclick="editorIdentifyAudio()" disabled
                            title="Identify the exact recording by fingerprinting your master audio"
                            class="px-2 py-1 rounded text-xs font-medium bg-dark-600 text-gray-300 hover:bg-dark-500 disabled:opacity-50 disabled:cursor-not-allowed">Identify from audio…</button>
                        <button type="button" id="editor-create-mb-btn" onclick="editorMbMatch()"
                            class="px-2 py-1 rounded text-xs font-medium bg-dark-600 text-gray-300 hover:bg-dark-500 disabled:opacity-50 disabled:cursor-not-allowed">Match…</button>
                    </div>
                </div>
                <div id="editor-create-mb-hint" class="text-[11px] text-gray-600 mt-1"></div>
            </div>

            <!-- Create button — works for import (GP/EOF) and from-scratch alike -->
              </div><!-- /RIGHT column -->
            </div><!-- /two-column grid -->

            <button onclick="editorDoCreate()" id="editor-create-go"
                class="w-full px-4 py-2 bg-green-700 hover:bg-green-600 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed mt-4" disabled>
                Create &amp; Open in Editor
            </button>
            <div id="editor-create-status" class="text-xs text-gray-500 mt-2"></div>
        </div>
    </div>
</div>

<!-- Replace audio modal -->
<div id="editor-replace-audio-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Replace Audio</span>
            <button onclick="editorHideReplaceAudioModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-4">
            <div>
                <label class="text-xs font-medium text-gray-400 mb-1 block">Audio Source</label>
                <div class="aud-seg-wrap" role="tablist" aria-label="Audio source">
                    <button onclick="editorSetReplaceAudioMode('file')" id="editor-replace-mode-file"
                        class="aud-seg is-active">Upload File</button>
                    <button onclick="editorSetReplaceAudioMode('youtube')" id="editor-replace-mode-yt"
                        class="aud-seg">YouTube URL</button>
                </div>
                <div id="editor-replace-audio-file-input">
                    <input type="file" id="editor-replace-audio" accept=".wem,.ogg,.flac,.mp3,.wav,.m4a"
                        class="w-full text-xs text-gray-400 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:bg-dark-600 file:text-gray-300 hover:file:bg-dark-500">
                </div>
                <div id="editor-replace-audio-yt-input" class="hidden">
                    <input type="text" id="editor-replace-yt-url" placeholder="https://youtube.com/watch?v=..."
                        class="w-full bg-dark-800 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-300 outline-none focus:border-accent/50">
                </div>
                <div id="editor-replace-audio-status" class="text-xs text-gray-500 mt-1"></div>
            </div>
            <div class="flex gap-2">
                <button onclick="editorApplyReplaceAudio()" id="editor-replace-audio-apply"
                    class="flex-1 px-4 py-2 bg-accent hover:bg-accent-light rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    Apply
                </button>
                <button onclick="editorHideReplaceAudioModal()"
                    class="flex-1 px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-lg text-sm font-medium">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Canvas appearance dialog (View ▸ Canvas appearance…) — Ableton-parity
     grid/canvas customization: grid strength, brightness, intensity, hue.
     Live-updating; the canvas is its own preview. -->
<div id="editor-canvas-appearance-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)" role="dialog" aria-modal="true" aria-labelledby="editor-canvas-appearance-title">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-sm flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span id="editor-canvas-appearance-title" class="text-sm font-medium">Canvas Appearance</span>
            <button onclick="editorHideCanvasAppearance()" class="text-gray-500 hover:text-white" aria-label="Close canvas appearance (Esc)" title="Close (Esc)">&times;</button>
        </div>
        <div class="p-4 space-y-4">
            <div>
                <div class="flex justify-between items-baseline mb-1">
                    <label for="editor-canvas-app-grid" class="text-xs font-medium text-gray-400">Grid lines</label>
                    <span id="editor-canvas-app-grid-val" class="text-xs text-gray-500">100%</span>
                </div>
                <input type="range" id="editor-canvas-app-grid" min="25" max="400" step="5" value="100"
                    class="w-full" oninput="editorCanvasAppearanceInput('grid', this.value)"
                    title="Strength of grid lines and lane separators — raise it if beat lines are hard to see">
            </div>
            <div>
                <div class="flex justify-between items-baseline mb-1">
                    <label for="editor-canvas-app-brightness" class="text-xs font-medium text-gray-400">Brightness</label>
                    <span id="editor-canvas-app-brightness-val" class="text-xs text-gray-500">100%</span>
                </div>
                <input type="range" id="editor-canvas-app-brightness" min="50" max="250" step="5" value="100"
                    class="w-full" oninput="editorCanvasAppearanceInput('brightness', this.value)"
                    title="Overall canvas background brightness">
            </div>
            <div>
                <div class="flex justify-between items-baseline mb-1">
                    <label for="editor-canvas-app-intensity" class="text-xs font-medium text-gray-400">Color intensity</label>
                    <span id="editor-canvas-app-intensity-val" class="text-xs text-gray-500">100%</span>
                </div>
                <input type="range" id="editor-canvas-app-intensity" min="0" max="200" step="5" value="100"
                    class="w-full" oninput="editorCanvasAppearanceInput('intensity', this.value)"
                    title="Color saturation of the canvas palette (0 = grayscale)">
            </div>
            <div>
                <div class="flex justify-between items-baseline mb-1">
                    <label for="editor-canvas-app-hue" class="text-xs font-medium text-gray-400">Hue</label>
                    <span id="editor-canvas-app-hue-val" class="text-xs text-gray-500">0°</span>
                </div>
                <input type="range" id="editor-canvas-app-hue" min="-180" max="180" step="5" value="0"
                    class="w-full" oninput="editorCanvasAppearanceInput('hue', this.value)"
                    title="Hue rotation of the canvas palette (structural colors only — string, note and drum-piece colors keep their meaning)">
            </div>
            <p class="text-[11px] text-gray-600">Applies to the canvas structure only — string, note,
                selection and playhead colors never change.</p>
            <div class="flex gap-2">
                <button onclick="editorCanvasAppearanceReset()"
                    class="flex-1 px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-lg text-sm font-medium">
                    Reset to defaults
                </button>
                <button onclick="editorHideCanvasAppearance()"
                    class="flex-1 px-4 py-2 bg-accent hover:bg-accent-light rounded-lg text-sm font-medium">
                    Done
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Tool palette (Logic-style: T opens it at the cursor; a key or a click
     picks the left-click tool — see CLICK-TOOLS-DESIGN.md) -->
<div id="editor-tool-palette" class="hidden fixed z-50 bg-dark-700 border border-gray-700 rounded-lg shadow-xl p-1.5 w-48" style="left:0;top:0">
    <div class="text-[10px] font-medium text-gray-500 px-3 py-1">Tool — press a key or click</div>
    <div class="editor-tool-palette-rows"></div>
</div>

<!-- Sync tempo dialog -->
<div id="editor-sync-dialog" class="hidden absolute z-50 bg-dark-700 border border-gray-700 rounded-lg shadow-xl p-4 w-72">
    <div class="text-xs font-medium text-gray-300 mb-3">Sync Tempo</div>
    <div class="space-y-2 text-xs">
        <div class="flex justify-between"><span class="text-gray-500">Tab BPM:</span><span id="sync-tab-bpm" class="text-gray-300">—</span></div>
        <div class="flex justify-between"><span class="text-gray-500">Audio BPM:</span><span id="sync-audio-bpm" class="text-gray-300">—</span></div>
        <!-- D3: names the detector that produced the Audio BPM (onset vote +
             confidence + suggested first-beat phase, or the waveform fallback). -->
        <div id="sync-detect-hint" class="text-[10px] text-gray-500"></div>
        <div class="flex justify-between"><span class="text-gray-500">Scale factor:</span><span id="sync-factor" class="text-white font-mono">—</span></div>
        <div>
            <label class="text-gray-500">Manual audio BPM override:</label>
            <input type="number" id="sync-manual-bpm" min="30" max="300" step="0.1" placeholder="auto"
                class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none mt-1"
                oninput="editorSyncUpdateFactor()">
        </div>
    </div>
    <div class="flex gap-2 mt-3">
        <button onclick="editorApplySync()" class="flex-1 px-2 py-1 bg-accent hover:bg-accent-light rounded text-xs">Apply</button>
        <button onclick="editorHideSyncDialog()" class="flex-1 px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs">Cancel</button>
    </div>
</div>

<!-- New Track dialog — the single front door for adding tracks (DAW
     new-tracks idiom: type tiles up top, details below, Create bottom-right).
     Routes to the per-kind import modals for from-file sources. -->
<div id="editor-new-track-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-lg flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">New Track</span>
            <button onclick="editorHideNewTrackModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-4">
            <div class="flex gap-3 justify-center">
                <button data-ntt="audio" onclick="editorNewTrackSetType('audio')" class="editor-ntt-tile" aria-pressed="false">
                    <span class="editor-ntt-icon">🎙</span>
                    <span class="editor-ntt-name">Audio</span>
                    <span class="editor-ntt-sub">A recording — stem or full mix</span>
                </button>
                <button data-ntt="transcription" onclick="editorNewTrackSetType('transcription')" class="editor-ntt-tile" aria-pressed="true">
                    <span class="editor-ntt-icon">🎼</span>
                    <span class="editor-ntt-name">MIDI / Transcription</span>
                    <span class="editor-ntt-sub">A playable instrument chart</span>
                </button>
            </div>
            <div id="editor-new-track-details-audio" class="hidden text-xs text-gray-400">
                Choose one or more audio files. Each becomes a studio track you can
                rename, reorder, mix, and pair with the transcription charted against it.
            </div>
            <div id="editor-new-track-details-transcription" class="space-y-3">
                <div>
                    <label class="text-xs font-medium text-gray-400 mb-1 block">Instrument</label>
                    <div class="flex gap-1.5 flex-wrap">
                        <button data-nti="Lead" onclick="editorNewTrackSetInstrument('Lead')" class="editor-nti-chip" aria-pressed="true">Lead</button>
                        <button data-nti="Rhythm" onclick="editorNewTrackSetInstrument('Rhythm')" class="editor-nti-chip" aria-pressed="false">Rhythm</button>
                        <button data-nti="Bass" onclick="editorNewTrackSetInstrument('Bass')" class="editor-nti-chip" aria-pressed="false">Bass</button>
                        <button data-nti="Keys" onclick="editorNewTrackSetInstrument('Keys')" class="editor-nti-chip" aria-pressed="false">Keys</button>
                        <button data-nti="Drums" onclick="editorNewTrackSetInstrument('Drums')" class="editor-nti-chip" aria-pressed="false">Drums</button>
                    </div>
                </div>
                <div>
                    <label class="text-xs font-medium text-gray-400 mb-1 block">Source</label>
                    <label class="flex items-center gap-2 text-xs text-gray-300">
                        <input type="radio" name="new-track-source" value="empty" checked onchange="editorNewTrackSetSource('empty')">
                        Start empty — add notes in the editor
                    </label>
                    <label class="flex items-center gap-2 text-xs text-gray-300 mt-1">
                        <input type="radio" name="new-track-source" value="file" onchange="editorNewTrackSetSource('file')">
                        Import from a file (Guitar Pro, MIDI, MusicXML)
                    </label>
                </div>
                <p id="editor-new-track-note" class="text-[11px] text-amber-300"></p>
            </div>
            <div class="flex items-center justify-end gap-2 pt-1 border-t border-gray-700/60">
                <span id="editor-new-track-status" class="text-xs text-gray-500 mr-auto"></span>
                <button onclick="editorHideNewTrackModal()" class="px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-lg text-sm font-medium">Cancel</button>
                <button id="editor-new-track-create" onclick="editorNewTrackCreate()" class="px-4 py-2 bg-emerald-700 hover:bg-emerald-600 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">Create</button>
            </div>
        </div>
    </div>
</div>

<!-- Add drums modal -->
<div id="editor-add-drums-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Add Drum Arrangement</span>
            <button onclick="editorHideAddDrumsModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <div>
                <label class="text-xs font-medium text-gray-400 mb-1 block">Guitar Pro (.gp3, .gp4, .gp5, .gpx, .gp) or Standard MIDI (.mid, .midi) File</label>
                <input type="file" id="editor-add-drums-gp" accept=".gp3,.gp4,.gp5,.gpx,.gp,.mid,.midi"
                    onchange="editorDrumsFileSelected(this)"
                    class="w-full text-xs text-gray-400 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:bg-dark-600 file:text-gray-300 hover:file:bg-dark-500">
            </div>
            <div id="editor-add-drums-existing" class="hidden text-xs text-amber-400 bg-amber-900/30 border border-amber-700/40 rounded p-2">
                This song already has a drum tab. Importing will replace it.
            </div>
            <div id="editor-add-drums-tracks" class="hidden">
                <label class="text-xs font-medium text-gray-400 mb-1 block">Select Drum Track</label>
                <div id="editor-add-drums-track-list" class="space-y-1 max-h-32 overflow-y-auto bg-dark-800 rounded p-2"></div>
            </div>
            <!-- Where the imported part lands on the timeline (its region).
                 Keep = the source file's own timing; Bar 1 / Playhead slide the
                 whole part there as one undoable placement. Hidden in create
                 mode (single-tab replace semantics — no region to place). -->
            <div id="editor-add-drums-place-row">
                <label class="text-xs font-medium text-gray-400 mb-1 block" for="editor-add-drums-place">Place at</label>
                <select id="editor-add-drums-place"
                    class="w-full bg-dark-700 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none"
                    title="Where the imported drum part lands on the timeline — keep the file's own timing, or slide the whole part to bar 1 / the playhead (undoable)">
                    <option value="keep" selected>Keep source timing</option>
                    <option value="bar1">Bar 1</option>
                    <option value="playhead">Playhead</option>
                </select>
            </div>
            <button onclick="editorDoAddDrums()" id="editor-add-drums-go"
                class="w-full px-4 py-2 bg-red-700 hover:bg-red-600 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                Import Drum Track
            </button>
            <div id="editor-add-drums-status" class="text-xs text-gray-500"></div>
        </div>
    </div>
</div>

<!-- Add keys modal -->
<div id="editor-add-keys-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Add Keys Arrangement</span>
            <button onclick="editorHideAddKeysModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <div>
                <label class="text-xs font-medium text-gray-400 mb-1 block">Source File (Guitar Pro, MIDI, or MusicXML)</label>
                <input type="file" id="editor-add-keys-file" accept=".gp3,.gp4,.gp5,.gpx,.gp,.mid,.midi,.xml,.musicxml,.mxl"
                    onchange="editorKeysFileSelected(this)"
                    class="w-full text-xs text-gray-400 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:bg-dark-600 file:text-gray-300 hover:file:bg-dark-500">
                <p class="text-[11px] text-gray-600 mt-1">After import you can fine-tune note timing in the editor.</p>
            </div>
            <div id="editor-add-keys-tracks" class="hidden">
                <label class="text-xs font-medium text-gray-400 mb-1 block">Select Keyboard Track</label>
                <div id="editor-add-keys-track-list" class="space-y-1 max-h-40 overflow-y-auto bg-dark-800 rounded p-2"></div>
            </div>
            <button onclick="editorDoAddKeys()" id="editor-add-keys-go"
                class="w-full px-4 py-2 bg-indigo-700 hover:bg-indigo-600 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                Import Keys Track
            </button>
            <div class="text-center text-xs text-gray-600">— or —</div>
            <button onclick="editorAddEmptyKeys()"
                class="w-full px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-lg text-sm font-medium">
                Start Empty (no source file)
            </button>
            <div id="editor-add-keys-status" class="text-xs text-gray-500"></div>
        </div>
    </div>
</div>

<!-- Import guitar/bass track modal -->
<div id="editor-import-guitar-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Import Guitar / Bass from GP</span>
            <button onclick="editorHideImportGuitarModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <div>
                <label class="text-xs font-medium text-gray-400 mb-1 block">Guitar Pro File</label>
                <input type="file" id="editor-import-guitar-file" accept=".gp3,.gp4,.gp5,.gpx,.gp"
                    onchange="editorImportGuitarFileSelected(this)"
                    class="w-full text-xs text-gray-400 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:bg-dark-600 file:text-gray-300 hover:file:bg-dark-500">
                <p class="text-[11px] text-gray-600 mt-1">Notes align to this song's current audio offset. Beats, sections and audio are left untouched.</p>
            </div>
            <div id="editor-import-guitar-tracks" class="hidden">
                <label class="text-xs font-medium text-gray-400 mb-1 block">Select Guitar / Bass Track</label>
                <div id="editor-import-guitar-track-list" class="space-y-1 max-h-40 overflow-y-auto bg-dark-800 rounded p-2"></div>
            </div>
            <div id="editor-import-guitar-dest" class="hidden space-y-2">
                <label class="text-xs font-medium text-gray-400 block">Destination</label>
                <label class="flex items-center gap-2 text-xs text-gray-300">
                    <input type="radio" name="guitar-dest" value="add" checked onchange="editorImportGuitarDestChanged()" class="accent-blue-500">
                    <span>Add as a new arrangement</span>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-300">
                    <input type="radio" name="guitar-dest" value="replace" onchange="editorImportGuitarDestChanged()" class="accent-blue-500">
                    <span>Replace an existing arrangement</span>
                </label>
                <select id="editor-import-guitar-replace-target"
                    class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-200 hidden"></select>
            </div>
            <button onclick="editorDoImportGuitar()" id="editor-import-guitar-go"
                class="w-full px-4 py-2 bg-blue-700 hover:bg-blue-600 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                Import Track
            </button>
            <div id="editor-import-guitar-status" class="text-xs text-gray-500"></div>
        </div>
    </div>
</div>

<!-- Strings (tuning) editor modal -->
<!-- Read-only Tab preview modal (VA.4): engraved tab of the current part
     via the Tab View plugin's conversion + alphaTab. Renders the SAVED
     pack; strictly no edit affordances (V8). -->
<div id="editor-tab-preview-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)" role="dialog" aria-modal="true" aria-labelledby="editor-tab-preview-title">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-4xl flex flex-col mx-6" style="max-height:85vh">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span id="editor-tab-preview-title" class="text-sm font-medium">Tab preview</span>
            <div class="flex items-center gap-2">
                <button onclick="editorRefreshTabPreview()" class="px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs" title="Re-convert from the saved pack (Save first to preview new edits)">Refresh</button>
                <button onclick="editorHideTabPreview()" class="text-gray-500 hover:text-white" aria-label="Close tab preview (Esc)" title="Close (Esc)">&times;</button>
            </div>
        </div>
        <div class="px-4 py-1 text-[11px] text-gray-500 border-b border-gray-700/60">
            Read-only — shows the pack as last saved. Save first to preview current edits.
            <span id="editor-tab-preview-status" class="text-amber-300 ml-2"></span>
        </div>
        <div class="flex-1 overflow-auto p-2" style="background:#f7f6f2">
            <div id="editor-tab-preview-mount"></div>
        </div>
    </div>
</div>

<!-- User Guide (Help ▸ User Guide). Read-only reference modal; the canonical
     copy of this content lives in docs/USER-GUIDE.md — keep the two in step. -->
<div id="editor-user-guide-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)" role="dialog" aria-modal="true" aria-labelledby="editor-user-guide-title" onclick="if(event.target===this)editorToggleUserGuide(false)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-3xl flex flex-col mx-6" style="max-height:88vh">
        <div class="flex items-center justify-between px-5 py-3 border-b border-gray-700">
            <span id="editor-user-guide-title" class="text-sm font-semibold">Song Editor — User Guide</span>
            <button onclick="editorToggleUserGuide(false)" class="text-gray-500 hover:text-white" aria-label="Close user guide (Esc)" title="Close (Esc)">&times;</button>
        </div>
        <div class="flex-1 overflow-y-auto px-5 py-4 text-sm text-gray-300 leading-relaxed editor-guide-body">
            <p class="text-gray-400">Turn a recording into a playable chart: line a grid up to the
                music, place the notes, mark the tempo and sections, save the editable <code>.feedpak</code>, and export it when ready.
                Keys below are the default <strong>FeedBack</strong> profile — press
                <kbd>?</kbd> for the full, profile-aware shortcut list.</p>
            <figure>
                <img src="/api/plugins/editor/assets/guide/workspace.png" alt="The Song Editor loaded with a song — the multitrack Tracks column down the left, the menu bar and toolbars up top, and the timeline (waveform and colored note blocks per string) filling the middle.">
                <figcaption>The editor with a song loaded: the menu bar and toolbars up top, the timeline (waveform + colored note blocks per string) in the middle, the transport and inspector around it.</figcaption>
            </figure>

            <h3>1 · Start a project</h3>
            <ul>
                <li><strong>From a recording</strong> — load audio and you get an empty timeline over the waveform. Set the tempo grid (§6), then place notes.</li>
                <li><strong>From an import</strong> — <em>File ▸ Import</em> reads Guitar Pro (GP3–GP8), MIDI (with its tempo map), community arrangement XML, GoPlayAlong sync sidecars, and existing <code>.feedpak</code> files. All normalize into one model, so editing is the same afterward.</li>
            </ul>
            <figure>
                <img src="/api/plugins/editor/assets/guide/import.png" alt="The Create New Arrangement dialog: add files, review every imported track, and select the Guide audio source.">
                <figcaption><strong>New…</strong> uses one track table for audio, Guitar Pro, MIDI, and XML. Pick one audio row as the Guide for tempo mapping.</figcaption>
            </figure>
            <p class="tip">Nothing touches your library until you <strong>Export to Library</strong> (§9). Save early with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

            <h3>2 · The workspace</h3>
            <ul>
                <li><strong>Menu bar</strong> — every command, grouped by what it acts on. Follows your shortcut profile; greys out what doesn't apply.</li>
                <li><strong>Timeline canvas</strong> — waveform, beat grid, and notes. Click here to edit; zoom and scroll to navigate.</li>
                <li><strong>Transport bar</strong> — play/stop, clock, loop, count-in, metronome, follow-playhead.</li>
                <li><strong>Inspector</strong> — details for the current selection (a note's fret/techniques, a barline's BPM, a section's name).</li>
                <li><strong>Companion strips</strong> — a fretboard strip (candidate positions — click to assign) for fretted tracks, a drum pad strip for drums.</li>
                <li><strong>Mixer</strong> (<kbd>Shift</kbd>+<kbd>C</kbd>) — per-track volume / mute / solo.</li>
            </ul>
            <p>Press <kbd>?</kbd> for the searchable shortcut panel, or <kbd>Ctrl</kbd>+<kbd>K</kbd> for the command palette.</p>

            <h3>3 · Play &amp; navigate</h3>
            <ul>
                <li><kbd>Space</kbd> plays/stops. <strong>Follow playhead</strong> (<kbd>Shift</kbd>+<kbd>L</kbd>) scrolls with playback.</li>
                <li><strong>Loop A/B</strong> (<kbd>Alt</kbd>+<kbd>B</kbd>) compares the recording against your guide. <strong>Count-in</strong> adds a bar of clicks before the entry.</li>
                <li><strong>Guide claps</strong> (<kbd>C</kbd>) tick the charted notes; the <strong>metronome</strong> ticks the beat — use them to hear whether notes land where the grid says.</li>
                <li>Move: <kbd>PgUp</kbd>/<kbd>PgDn</kbd> beat to beat; <kbd>Alt</kbd>+<kbd>←</kbd>/<kbd>→</kbd> note to note. Set bookmarks <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>1…9</kbd>, jump with <kbd>Alt</kbd>+<kbd>1…9</kbd>.</li>
            </ul>

            <h3>4 · Edit notes</h3>
            <p>Click a note to select; drag a box for several. Then:</p>
            <ul>
                <li><strong>Fret</strong> — <kbd>F</kbd> to edit, or type <kbd>0</kbd>–<kbd>9</kbd> (<kbd>Shift</kbd>+<kbd>0</kbd> for 10; <kbd>Ctrl</kbd>+<kbd>+</kbd>/<kbd>-</kbd> to nudge).</li>
                <li><strong>String</strong> — <kbd>↑</kbd>/<kbd>↓</kbd> move between strings; <kbd>Shift</kbd>+<kbd>↑</kbd>/<kbd>↓</kbd> move <em>keeping the pitch</em> (cycles fretting positions in the roll).</li>
                <li><strong>Timing</strong> — drag along the timeline. With <strong>snap</strong> (<kbd>G</kbd> to toggle, <kbd>,</kbd>/<kbd>.</kbd> for resolution) notes land on the grid; switch snap to target <strong>audio onsets</strong> when matching a loose take.</li>
                <li><strong>Sustain</strong> — drag the tail (or <em>Note ▸ Shorten/Lengthen sustain</em>; <kbd>[</kbd>/<kbd>]</kbd> keys). <strong>Duplicate</strong> to next position <kbd>Ctrl</kbd>+<kbd>D</kbd>; <strong>select matching</strong> <kbd>Ctrl</kbd>+<kbd>L</kbd>; <strong>resnap</strong> <kbd>Shift</kbd>+<kbd>R</kbd>.</li>
            </ul>
            <p><strong>Techniques</strong> toggle on the selection — hammer-on <kbd>H</kbd>, pull-off <kbd>P</kbd>, bend <kbd>B</kbd>, slide <kbd>S</kbd>, palm-mute <kbd>M</kbd>, vibrato <kbd>V</kbd>, harmonics <kbd>N</kbd>/<kbd>Shift</kbd>+<kbd>N</kbd>, accent <kbd>A</kbd>, mute <kbd>X</kbd>. The rest are under <em>Note ▸ Techniques</em> with their keys shown.</p>
            <figure>
                <img src="/api/plugins/editor/assets/guide/notes.png" alt="The timeline: colored note blocks laid out per string, with the anchors and handshape lanes along the bottom.">
                <figcaption>Notes are colored blocks, one lane per string (e·B·G·D·A·E). The number on a block is its fret; the lanes along the bottom hold anchors and handshapes (§8).</figcaption>
            </figure>
            <p class="tip">The <strong>playability</strong> and <strong>drum-limb</strong> lints flag awkward or impossible fingerings — they <em>advise</em>, never block or auto-change your chart.</p>

            <h3>5 · Tracks</h3>
            <p>A song holds several tracks (lead, rhythm, bass, keys, drums). Each gets the right view automatically — <strong>string lanes</strong>, <strong>piano roll</strong>, or <strong>drum grid</strong>. Switch with the track selector; <strong>Tracks overview</strong> (<kbd>Shift</kbd>+<kbd>A</kbd>) stacks them all. Rename / reorder from the <em>Track</em> menu; add a track by importing into it.</p>

            <h3>6 · Tempo mapping — line the grid up</h3>
            <p>The grid is <strong>beat-primary</strong>: a note remembers its bar-and-beat and derives its clock time from where the barlines sit — move a barline and the notes ride along. The <strong>ruler is authoritative</strong>: you fit bars to the fixed recording, never the reverse. Three ways, coarse to fine:</p>
            <ol>
                <li><strong>Sync tempo to audio</strong> (<em>Tempo/Grid</em> menu) — detects the BPM and scales the whole grid to match. A good first pass on a steady take.</li>
                <li><strong>Set a constant BPM</strong> — type into the BPM box for a single-tempo song.</li>
                <li><strong>Tempo Map mode</strong> (<kbd>T</kbd>,<kbd>T</kbd>) — the precise tool. Drag a barline onto its downbeat and neighbours re-space to fit. Inside it: <kbd>G</kbd> suggest a fit from the audio's onsets (click a ghost to accept), <kbd>Shift</kbd>+<kbd>B</kbd> tap tempo, <kbd>B</kbd> set BPM, <kbd>M</kbd> metric modulation, <kbd>I</kbd> mark a barline, <kbd>Del</kbd> delete one, <kbd>Shift</kbd>+<kbd>T</kbd> time signature. <strong>Beat-lock</strong> a hand-verified barline so later auto-fits leave its time alone (your manual edits are always kept).</li>
            </ol>
            <figure>
                <img src="/api/plugins/editor/assets/guide/tempomap.png" alt="Tempo Map mode: vertical barline poles across the timeline, each labeled with its measure and BPM, over the waveform.">
                <figcaption>Tempo Map mode (<kbd>T</kbd>,<kbd>T</kbd>): each vertical pole is a barline (labeled with its measure and BPM). Drag one onto its downbeat in the waveform and the bars around it re-space to fit.</figcaption>
            </figure>
            <p>The <strong>Offset</strong> box shifts the whole chart in time against the recording — for when the notes are right relative to each other but the chart sits a few ms early or late.</p>
            <p class="tip">Sync, BPM-rescale, and Offset move <strong>every track at once</strong> and are <strong>undoable</strong> — experiment freely.</p>

            <h3>7 · Drums &amp; 8 · Structure</h3>
            <ul>
                <li><strong>Drums</strong> — a piece-lane grid (rows = kit pieces, columns = grid positions). Click to place; the pad strip monitors a MIDI e-kit. Row density (Full / Compact / GM roll) is in the <em>Track</em> menu.</li>
                <li><strong>Add</strong> menu — sections <kbd>Shift</kbd>+<kbd>M</kbd>, phrases <kbd>Shift</kbd>+<kbd>P</kbd>, hand anchors <kbd>Shift</kbd>+<kbd>F</kbd>, handshapes <kbd>Ctrl</kbd>+<kbd>H</kbd>, tone changes <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd>.</li>
            </ul>
            <figure>
                <img src="/api/plugins/editor/assets/guide/drums.png" alt="The drum piece-lane grid: kit pieces (kick, snare, hats, toms, ride…) as rows with a kit map below, and a groove charted across the bars.">
                <figcaption>Adding drums: import a Guitar Pro or MIDI drum track, then edit it on the piece-lane grid.</figcaption>
            </figure>

            <h3>9 · Save &amp; export</h3>
            <p><kbd>Ctrl</kbd>+<kbd>S</kbd> saves the editable <code>.feedpak</code> project at the location you choose. <strong>Export to Library</strong> publishes the current project to the library without replacing Save. Export once the grid fits, the notes are placed, and guide-claps-against-the-recording sounds right.</p>
            <p class="tip"><strong>Undo/redo is the safety net</strong> — every edit, including tempo moves, offset, and imports, is undoable (<kbd>Ctrl</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>). If something looks wrong, undo it.</p>

            <p class="text-gray-500 text-[12px] mt-4 pt-3 border-t border-gray-700/60">More help: <kbd>?</kbd> shortcut panel · <kbd>Ctrl</kbd>+<kbd>K</kbd> command palette. Full written copy: <code>docs/USER-GUIDE.md</code> in the plugin repo.</p>
        </div>
    </div>
</div>

<div id="editor-strings-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Strings (extended range)</span>
            <button onclick="editorHideStringsModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <div id="editor-strings-summary" class="text-xs text-gray-400"></div>
            <div id="editor-strings-list" class="space-y-1 text-xs font-mono"></div>
            <div class="flex gap-2">
                <button id="editor-strings-add-low" onclick="editorAddString('low')"
                    class="flex-1 px-3 py-2 bg-amber-800 hover:bg-amber-700 rounded text-xs font-medium disabled:opacity-40 disabled:cursor-not-allowed"
                    title="Add a string at the low end (guitar low B/F#, bass low B); existing notes keep their lanes">
                    + Add low
                </button>
                <button id="editor-strings-add-high" onclick="editorAddString('high')"
                    class="flex-1 px-3 py-2 bg-amber-800 hover:bg-amber-700 rounded text-xs font-medium disabled:opacity-40 disabled:cursor-not-allowed"
                    title="Add a string at the high end (6-string bass high C)">
                    + Add high
                </button>
            </div>
            <div class="flex gap-2">
                <button id="editor-strings-remove-low" onclick="editorRemoveString('low')"
                    class="flex-1 px-3 py-2 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium disabled:opacity-40 disabled:cursor-not-allowed"
                    title="Remove the lowest string (only when no notes live on it)">
                    − Remove low
                </button>
                <button id="editor-strings-remove-high" onclick="editorRemoveString('high')"
                    class="flex-1 px-3 py-2 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium disabled:opacity-40 disabled:cursor-not-allowed"
                    title="Remove the highest string (only when no notes live on it)">
                    − Remove high
                </button>
            </div>
            <p id="editor-strings-warning" class="text-[11px] text-amber-300"></p>
            <p class="text-[11px] text-gray-600">
                Guitar arrangements support 6–8 strings (added low: B, then
                F#); bass 4–6 (low B, then high C). Each add/remove button
                is enabled only at the end that matches the instrument's
                extended-range layout. To retune a string — drop, open, or
                a re-entrant/octave setup — type its offset (semitones from
                the lane's standard pitch) directly in the row; that never
                changes the string count. Going above 6/4 strings requires
                saving as Sloppak.
            </p>
        </div>
    </div>
</div>

<!-- Save format prompt modal (extended-range arrangement) -->
<div id="editor-save-format-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-lg flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Extended-range arrangement</span>
            <button onclick="editorHideSaveFormatModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3 text-xs text-gray-300">
            <p>
                This arrangement has more strings than the standard
                6-guitar / 4-bass layout. It will be saved as a
                <strong>Sloppak</strong>, which preserves the extended
                range.
            </p>
            <div class="flex flex-col gap-2 pt-2">
                <button id="editor-save-as-sloppak-btn"
                    onclick="editorSaveAsSloppakConfirm()"
                    class="w-full px-3 py-2 bg-green-800 hover:bg-green-700 rounded text-xs font-medium">
                    Save as Sloppak
                </button>
                <button onclick="editorHideSaveFormatModal()"
                    class="w-full px-3 py-2 text-gray-500 hover:text-white rounded text-xs">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Tone slots modal — names the five tone slots (base + A/B/C/D) and
     picks which one is the base. Tone changes placed on the lane store
     their slot name verbatim, so the slot list here is mostly a UI
     dictionary that the lane uses for click-to-place + display. -->
<div id="editor-tones-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Tone slots</span>
            <button onclick="editorHideTonesModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3 text-xs text-gray-300">
            <p class="text-gray-400">
                Name the five tone slots and pick which one is the base
                tone. The base plays from the start of the song; the
                others can be placed on the tone lane to switch into.
            </p>
            <div id="editor-tones-slots" class="space-y-2"></div>
            <div class="flex flex-col gap-2 pt-2">
                <button onclick="editorApplyTonesModal()"
                    class="w-full px-3 py-2 bg-cyan-800 hover:bg-cyan-700 rounded text-xs font-medium">
                    Apply
                </button>
                <button onclick="editorHideTonesModal()"
                    class="w-full px-3 py-2 text-gray-500 hover:text-white rounded text-xs">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Record MIDI modal -->
<div id="editor-record-midi-modal" class="hidden absolute inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7)">
    <div class="bg-dark-700 rounded-xl border border-gray-700 w-full max-w-md flex flex-col">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-medium">Record Keys (live MIDI)</span>
            <button onclick="editorHideRecordMidiModal()" class="text-gray-500 hover:text-white">&times;</button>
        </div>
        <div class="p-4 space-y-3">
            <div id="editor-record-midi-setup" class="space-y-3">
                <div>
                    <label class="text-xs font-medium text-gray-400 mb-1 block">MIDI Device</label>
                    <select id="editor-record-midi-device" onchange="editorRecordMidiDeviceChanged(this.value)"
                        class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none"></select>
                    <p id="editor-record-midi-no-device" class="hidden text-[11px] text-rose-400 mt-1">No MIDI input detected — connect a keyboard and reopen.</p>
                    <p id="editor-record-midi-no-webmidi" class="hidden text-[11px] text-rose-400 mt-1">Web MIDI not available in this browser — use Chrome or Edge.</p>
                </div>
                <div>
                    <label class="text-xs font-medium text-gray-400 mb-1 block">Channel</label>
                    <select id="editor-record-midi-channel"
                        class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
                        <option value="-1">All channels</option>
                    </select>
                </div>
                <button onclick="editorStartRecordMidi()" id="editor-record-midi-start"
                    class="w-full px-4 py-2 bg-rose-700 hover:bg-rose-600 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    Start Recording (audio will play)
                </button>
            </div>
            <div id="editor-record-midi-active" class="hidden flex items-center justify-between gap-3">
                <div class="flex items-center gap-2 text-sm">
                    <span class="inline-block w-2.5 h-2.5 rounded-full bg-rose-500 animate-pulse"></span>
                    <span>Recording…</span>
                    <span id="editor-record-midi-count" class="text-gray-400">0 notes</span>
                </div>
                <button onclick="editorStopRecordMidi()"
                    class="px-3 py-1.5 bg-dark-600 hover:bg-dark-500 rounded text-xs font-medium">
                    Stop
                </button>
            </div>
            <div id="editor-record-midi-status" class="text-xs text-gray-500"></div>
        </div>
    </div>
</div>

<!-- Add note dialog -->
<div id="editor-add-note-dialog" class="hidden absolute z-50 bg-dark-700 border border-gray-700 rounded-lg shadow-xl p-3 w-48">
    <div class="text-xs text-gray-400 mb-2">Add Note</div>
    <div class="flex gap-2 mb-2">
        <div id="editor-add-fret-col" class="flex-1">
            <label class="text-xs text-gray-500">Fret</label>
            <input id="editor-add-fret" type="number" min="0" max="24" value="0"
                class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
        </div>
        <div id="editor-add-pitch-col" class="flex-1 hidden">
            <label class="text-xs text-gray-500">Pitch</label>
            <div id="editor-add-pitch-label" class="px-2 py-1 text-sm text-indigo-300 font-medium">C4</div>
        </div>
        <div class="flex-1">
            <label class="text-xs text-gray-500">Sustain</label>
            <input id="editor-add-sustain" type="number" min="0" max="10" step="0.1" value="0"
                class="w-full bg-dark-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 outline-none">
        </div>
    </div>
    <div class="flex gap-2">
        <button onclick="editorConfirmAddNote()" class="flex-1 px-2 py-1 bg-accent hover:bg-accent-light rounded text-xs">Add</button>
        <button onclick="editorHideAddNote()" class="flex-1 px-2 py-1 bg-dark-600 hover:bg-dark-500 rounded text-xs">Cancel</button>
    </div>
</div>