/* Transport UI (transport-ui.js): the Display's seat in the rail, the Tracks band and the progress bar
   along the top of the keys. The Display's face is note-display.css; the well's is note-timeline.css.
   The band is the casing itself, like the rail: solid, flat, no edge of its own. Its controls are flat caps
   (as the Display's) and small menus. Its height is --tracks-h and its share of the screen --tracks-space
   (instrument-tokens.css). */

/* ---------- The Display: the left of the rail, from the frame's edge to the transport words ----------
   #rail-display holds the face, no wider than its natural width (transport-ui.js sets max-width), so it hugs
   its parts. Its parts are the rail's own buttons (NOTE, the scene, Sound, the tempo, the click (Metronome) and the
   transport's three caps) laid over its zones by transport-ui.js: transparent, their names kept for assistive tech, the
   house focus ring drawn around the zone. Nothing else marks them: the Display prints hover, press and
   open itself. A part the Display cannot hold at this width comes back as a rail word (.rail-word),
   right after the Display; the caps always stay. #play-toggle stands behind the tempo door and comes back with it. */
body.instrument-frame #instrument-rail{left:var(--frame-l)}
body.instrument-frame #instrument-rail>#rail-display{order:-1;position:relative;flex:1 1 auto;min-width:0;height:var(--display-h);margin:0 14px 0 0}
body.instrument-frame #instrument-rail>#rail-display .note-display{height:100%}
html body.instrument-frame #instrument-rail :is(#about-toggle,#scene-browse,#audio-toggle,#hud,#rail-metronome,#display-record,#display-play,#display-loop):not(.rail-word){
 position:absolute;z-index:1;display:block;box-sizing:border-box;width:44px;min-width:0;height:var(--display-h);min-height:0;margin:0;padding:0;border:0;border-radius:2px;
 background:none;box-shadow:none;color:transparent;text-shadow:none;cursor:pointer;overflow:visible;transition:none;
}
html body.instrument-frame #instrument-rail :is(#about-toggle,#scene-browse,#audio-toggle,#hud,#rail-metronome,#display-record,#display-play,#display-loop):not(.rail-word)>*{visibility:hidden}
html body.instrument-frame #instrument-rail :is(#about-toggle,#scene-browse,#audio-toggle,#hud,#rail-metronome,#display-record,#display-play,#display-loop):not(.rail-word):is(:hover,[aria-expanded=true]){color:transparent;font-weight:inherit}
html body.instrument-frame #instrument-rail :is(#about-toggle,#scene-browse,#audio-toggle,#hud,#rail-metronome,#display-record,#display-play,#display-loop):not(.rail-word)::before,html body.instrument-frame #instrument-rail :is(#about-toggle,#scene-browse,#audio-toggle,#hud,#rail-metronome,#display-record,#display-play,#display-loop):not(.rail-word)::after{content:none}
html body.instrument-frame #instrument-rail :is(#about-toggle,#scene-browse,#audio-toggle,#hud,#rail-metronome,#display-record,#display-play,#display-loop):not(.rail-word):focus-visible{outline:1px solid var(--note-text);outline-offset:3px;border-radius:2px;box-shadow:none}
html body.instrument-frame #instrument-rail #play-toggle:not(.rail-word){display:none}
/* A returned tempo door has no word of its own: Play (#play-toggle) comes back in its place. */
html body.instrument-frame #instrument-rail #hud.rail-word{display:none}
/* A returned scene door (never at the widths the Display serves) reads as the corner did. */
body.instrument-frame #instrument-rail>#scene-browse.rail-word{flex-direction:column;align-items:flex-start;gap:2px;color:var(--note-text)}

/* ---------- The Tracks band: between the rail and the keys, opened by Tracks ----------
   Closed, it is clipped away from the top down; opening reveals it as the rail rises, both over
   --note-dur-frame. With the keys hidden it sits on the bottom edge (--key-space is the safe area).
   Two columns: the track headers, then the lanes to the band's edge. The transport is the Display's caps. */
body.instrument-frame #tracks-band{
 --tracks-head-w:224px;--cap:#1c1c1b;--cap-h:30px;
 position:fixed;z-index:29;left:0;right:0;bottom:var(--key-space);height:var(--tracks-h);box-sizing:border-box;
 display:grid;grid-template-columns:var(--tracks-head-w) minmax(0,1fr);column-gap:16px;
 padding:8px max(26px,calc(var(--safe-r) + 12px)) 14px max(26px,calc(var(--safe-l) + 12px));
 background:var(--note-casing);clip-path:inset(100% 0 0 0);visibility:hidden;
 transition:clip-path var(--note-dur-frame) var(--note-ease),bottom var(--note-dur-frame) var(--note-ease),visibility 0s linear var(--note-dur-frame);
}
body.instrument-frame.tracks-open #tracks-band{
 clip-path:inset(0);visibility:visible;
 transition:clip-path var(--note-dur-frame) var(--note-ease),bottom var(--note-dur-frame) var(--note-ease),visibility 0s;
}
body.instrument-frame #tracks-band .tracks-well{position:relative;min-width:0;min-height:0}
body.instrument-frame #tracks-band .tracks-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Track headers, one per lane (the well's ruler, then two equal lanes with --tracks-gap between), each a
   tile the lane's height, centred on it: the identity on the left (the name over the instrument) and the caps
   flush right in two rows (M S over Q ⋯), each row lined up with the text beside it. Clicking the header selects
   the track (the record target): the swatch fills, the name goes to full strength and the tile lifts to the
   selected lane's shade (white 5% on the casing, radius 10), so header and lane read as one row. Every control
   is a 44px target; the visible caps are smaller and sit in theirs. */
body.instrument-frame #tracks-band .tracks-heads{position:relative;display:grid;grid-template-rows:1fr 1fr;row-gap:var(--tracks-gap);min-height:0;padding-top:var(--tracks-ruler)}
body.instrument-frame #tracks-band .tracks-head{
 --head-bg:var(--note-casing);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--note-target) var(--note-target);align-content:center;
 min-height:0;padding:0 8px 0 12px;border-radius:10px;cursor:pointer;transition:background var(--note-dur-fade) var(--note-ease);
}
body.instrument-frame #tracks-band .tracks-head:is([data-state=armed],[data-state=recording]){--head-bg:color-mix(in srgb,#fff 5%,var(--note-casing));background:var(--head-bg)}
/* Selected (the track is the selection: Delete clears it): the lanes' ring ink round the tile, as round its lane. */
body.instrument-frame #tracks-band .tracks-head[data-selected]{box-shadow:inset 0 0 0 1.5px var(--ring)}
body.instrument-frame #tracks-band .tracks-id{grid-row:1/3;grid-column:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* The name: 14/500 Helvetica, faint at rest, full when selected; its swatch before it. Under it the instrument,
   12 muted, full under the pointer or while its chooser is open, set in line with the name's text and centred on
   the Q ⋯ row (its line is a cap's height). */
body.instrument-frame #tracks-band .tracks-name{display:inline-flex;align-items:flex-end;gap:8px;min-width:var(--note-target);min-height:var(--note-target);padding:0 0 8px;box-sizing:border-box;color:var(--note-text-faint);font-weight:var(--note-weight-label);line-height:1.2;white-space:nowrap}
body.instrument-frame #tracks-band .tracks-name:hover,body.instrument-frame #tracks-band .tracks-name[aria-pressed=true]{color:var(--note-text)}
body.instrument-frame #tracks-band .tracks-instrument{
 display:flex;align-items:flex-start;max-width:100%;min-width:var(--note-target);height:var(--note-target);padding:4px 0 0 18px;box-sizing:border-box;
 color:var(--note-text-muted);font-size:var(--note-text-xs);line-height:var(--cap-h);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.instrument-frame #tracks-band .tracks-instrument:is(:hover,[aria-expanded=true]){color:var(--note-text)}
/* The swatch: a ring of the ink at rest, solid when selected, and while that track records a vermilion
   ring breathes around it. Muted, the ring is dotted, as the muted lane is. Flat: no glow. */
body.instrument-frame #tracks-band .tracks-name::before{
 content:'';flex:none;box-sizing:border-box;width:10px;height:10px;margin-bottom:3px;border:1.5px solid var(--ink);border-radius:50%;background:transparent;
 transition:background var(--note-dur-fade) var(--note-ease);
}
body.instrument-frame #tracks-band .tracks-head:is([data-state=armed],[data-state=recording]) .tracks-name::before{background:var(--ink)}
body.instrument-frame #tracks-band .tracks-head[data-state=recording] .tracks-name::before{animation:tracks-recording 1.6s ease-in-out infinite}
body.instrument-frame #tracks-band .tracks-head[data-muted] .tracks-name::before{border-style:dotted;border-width:2px;background:transparent}
@keyframes tracks-recording{0%,100%{box-shadow:0 0 0 2px var(--head-bg),0 0 0 3.5px var(--rec-ink)}50%{box-shadow:0 0 0 2px var(--head-bg),0 0 0 3.5px transparent}}

/* Caps: the Display's own (display.icon draws each on its canvas: the flat key, its dot glyph, its hover, its lit
   face in the deal's on ink), 30px tall, in 44px targets that abut, so the visible caps stand 6px apart, the rows
   8px apart. Their words are hidden labels; aria-label and title name them. Quantize and the count-in print their
   value beside the glyph, so their caps are wider. */
body.instrument-frame #tracks-band .tracks-caps{grid-column:2;display:flex;justify-content:flex-end;margin-right:-3px}
body.instrument-frame #tracks-band .tracks-caps-top{grid-row:1}
body.instrument-frame #tracks-band .tracks-caps-bottom{grid-row:2}
body.instrument-frame #tracks-band .tracks-cap{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--note-target);min-height:var(--note-target);padding:0 3px;box-sizing:border-box}
body.instrument-frame #tracks-band .tracks-caps-top .tracks-cap{align-items:flex-end;padding-bottom:4px}
body.instrument-frame #tracks-band .tracks-caps-bottom .tracks-cap{align-items:flex-start;padding-top:4px}
body.instrument-frame #tracks-band .tracks-cap .note-icon{width:38px;height:var(--cap-h);border-radius:6px}
body.instrument-frame #tracks-band .tracks-quantize .note-icon{width:74px}
body.instrument-frame #tracks-band .tracks-count-in .note-icon{width:46px}
body.instrument-frame #tracks-band .tracks-cap:focus-visible{outline:0}
body.instrument-frame #tracks-band .tracks-cap:focus-visible .note-icon{outline:1px solid var(--note-text);outline-offset:2px}
body.instrument-frame #tracks-band .tracks-cap:disabled .note-icon{opacity:.4}

/* The menu: a small flat panel of the caps' grey (radius 8) dropped from what opened it (a cap, the instrument,
   a take badge; up when it would not fit below), words at the house 44px rhythm. The current choice carries the
   house dot (flat); Clear is red under the pointer; the shortcuts are faint at the right. */
body.instrument-frame #tracks-band .tracks-menu{position:absolute;z-index:3;display:flex;flex-direction:column;min-width:168px;padding:4px 0;box-sizing:border-box;border-radius:8px;background:var(--cap)}
body.instrument-frame #tracks-band .tracks-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--note-target);padding:0 16px 0 28px;color:var(--note-text-muted);text-align:left;white-space:nowrap}
body.instrument-frame #tracks-band .tracks-menu-item:hover:not(:disabled),body.instrument-frame #tracks-band .tracks-menu-item:focus-visible{color:var(--note-text);background:#262625;outline:0}
body.instrument-frame #tracks-band .tracks-menu-item[aria-checked=true]{color:var(--note-text);font-weight:var(--note-weight-label)}
body.instrument-frame #tracks-band .tracks-menu-item[aria-checked=true]::before{content:'';position:absolute;left:13px;top:calc(50% - var(--note-dot) / 2);width:var(--note-dot);height:var(--note-dot);border-radius:50%;background:var(--scene-accent)}
body.instrument-frame #tracks-band .tracks-menu-item.is-danger:hover:not(:disabled){color:var(--note-danger)}
body.instrument-frame #tracks-band .tracks-menu-item:disabled{color:var(--note-text-disabled)}
body.instrument-frame #tracks-band .tracks-menu-hint{color:var(--note-text-faint);font-size:var(--note-text-xs)}
body.instrument-frame #tracks-band .tracks-menu-row{display:flex;padding:0 0 0 12px}
body.instrument-frame #tracks-band .tracks-menu-row .tracks-menu-item{flex:0 0 auto;justify-content:flex-start;gap:8px;min-width:var(--note-target);padding:0 12px 0 16px}
body.instrument-frame #tracks-band .tracks-menu-row .tracks-menu-item[aria-checked=true]::before{left:4px}
/* The instruments: two columns of words. */
body.instrument-frame #tracks-band .tracks-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(136px,auto))}
body.instrument-frame #tracks-band .tracks-menu-title{padding:8px 16px 2px 28px;color:var(--note-text-faint);font-size:var(--note-text-xs)}
body.instrument-frame #tracks-band .tracks-menu-rule{height:1px;margin:4px 0;background:var(--note-rule,rgba(255,255,255,.12))}
/* The tools, in the ruler's row (the band's top padding plus the ruler: 44px). Over the headers, zoom: the lens −, a
   slider, the lens + (the house slider: a 1px track and a 2px thumb). At the lanes' top right, the count-in (a
   metronome and its bars, lit while on) and Follow (lit while the view follows the playhead). */
body.instrument-frame #tracks-band .tracks-tools{position:absolute;top:0;left:calc(max(26px,calc(var(--safe-l) + 12px)) + 7px);display:flex;align-items:center;width:calc(var(--tracks-head-w) - 7px)}
body.instrument-frame #tracks-band .tracks-tools .tracks-zoom-out .note-icon,body.instrument-frame #tracks-band .tracks-tools .tracks-zoom-in .note-icon{width:34px}
body.instrument-frame #tracks-band .tracks-tools .tracks-zoom-out,body.instrument-frame #tracks-band .tracks-tools .tracks-zoom-in{padding:0}
body.instrument-frame #tracks-band .tracks-zoom-slider{
 flex:1 1 auto;appearance:none;-webkit-appearance:none;min-width:40px;height:var(--note-target);margin:0 2px;padding:0;background:transparent;cursor:ew-resize;
}
body.instrument-frame #tracks-band .tracks-zoom-slider::-webkit-slider-runnable-track{height:1px;border:0;background:var(--note-track)}
body.instrument-frame #tracks-band .tracks-zoom-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:2px;height:14px;margin-top:-6.5px;border:0;border-radius:0;background:var(--note-text)}
body.instrument-frame #tracks-band .tracks-zoom-slider::-moz-range-track{height:1px;border:0;background:var(--note-track)}
body.instrument-frame #tracks-band .tracks-zoom-slider::-moz-range-thumb{width:2px;height:14px;border:0;border-radius:0;background:var(--note-text)}
body.instrument-frame #tracks-band .tracks-zoom-slider:focus-visible{outline:1px solid var(--note-text);outline-offset:-10px}
body.instrument-frame #tracks-band .tracks-tools-right{position:absolute;top:0;right:calc(max(26px,calc(var(--safe-r) + 12px)) - 3px);display:flex}
/* The toast: a line of 12 muted on the casing at the lanes' top right, by the count-in; it shows, holds and fades on its own. */
body.instrument-frame #tracks-band .tracks-toast{
 position:absolute;top:13px;right:calc(max(26px,calc(var(--safe-r) + 12px)) + 106px);margin:0;padding:3px 10px;border-radius:6px;background:var(--cap);
 color:var(--note-text-muted);font-size:var(--note-text-xs);line-height:18px;white-space:nowrap;opacity:0;pointer-events:none;
}
body.instrument-frame #tracks-band .tracks-toast.is-showing{animation:tracks-toast 3.2s var(--note-ease) both}
@keyframes tracks-toast{0%{opacity:0}6%,80%{opacity:1}100%{opacity:0}}
/* Shortcuts (⋯ → Shortcuts): two columns of pairs, the keys in small caps' faces, what they do muted. */
body.instrument-frame #tracks-band .tracks-menu-keys{display:grid;grid-template-columns:auto auto auto auto;grid-auto-flow:row;align-items:center;gap:6px 10px;padding:10px 18px 10px 14px}
body.instrument-frame #tracks-band .tracks-menu-keys>:nth-child(4n+3){margin-left:18px}
body.instrument-frame #tracks-band .tracks-key{justify-self:end;padding:2px 6px;border-radius:4px;background:#262625;color:var(--note-text);font:var(--note-weight-label) 11px/14px var(--note-font);white-space:nowrap}
body.instrument-frame #tracks-band .tracks-key-what{color:var(--note-text-muted);font-size:var(--note-text-xs);white-space:nowrap}

/* ---------- The progress bar: a flat line of the scene's colour along the top of the keys ---------- */
body.instrument-frame #console>.keys-progress{position:absolute;z-index:3;top:-1px;left:0;right:0;height:3px;background:var(--scene-accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
body.instrument-frame #console>.keys-progress[hidden]{display:none}

/* ---------- ≤960px: the Display takes its own row, the frame's width, over the words ---------- */
@media(max-width:960px){
 body.instrument-frame #instrument-rail{right:var(--frame-r);flex-wrap:wrap}
 body.instrument-frame #instrument-rail>#rail-display{flex:0 0 100%;margin:0 0 4px}
}
@media(max-width:700px){
 /* Phones: the name over mute · solo · options (the instrument and Quantize's choices join the options menu). */
 body.instrument-frame #tracks-band{--tracks-head-w:132px;column-gap:4px;padding:0 calc(12px + var(--safe-r)) 10px calc(12px + var(--safe-l))}
 /* Phones: no tools row (the ruler's row is too short for 44px targets): pinch zooms, the view follows. */
 body.instrument-frame #tracks-band :is(.tracks-tools,.tracks-tools-right){display:none}
 body.instrument-frame #tracks-band .tracks-toast{top:8px;right:calc(12px + var(--safe-r))}
 body.instrument-frame #tracks-band .tracks-head{display:flex;flex-wrap:wrap;align-content:center;padding:0 0 0 5px}
 body.instrument-frame #tracks-band .tracks-id{flex:0 0 100%}
 body.instrument-frame #tracks-band :is(.tracks-instrument,.tracks-caps .tracks-quantize){display:none}
 body.instrument-frame #tracks-band .tracks-caps{margin:0 0 0 -3px}
 body.instrument-frame #tracks-band .tracks-caps-top .tracks-cap{align-items:flex-start;padding:4px 3px 0}
}
@media(prefers-reduced-motion:reduce){
 body.instrument-frame #tracks-band,body.instrument-frame #tracks-band *{transition:none}
 body.instrument-frame #tracks-band .tracks-head[data-state=recording] .tracks-name::before{animation:none;box-shadow:0 0 0 2px var(--head-bg),0 0 0 3.5px var(--rec-ink)}
}