/* The instrument casing and its rail (the Display and the Tracks band: transport-ui.css). Render coordinates stay intact.
   Art direction v2 "Light, not chrome": the rail is a line of sentence-case words; the chosen
   one lights up behind a glowing point of the scene's colour. */
body.instrument-frame #light-canvas,body.instrument-frame #shared-pool-canvas,body.instrument-frame #paper-canvas,body.instrument-frame #ink-canvas,body.instrument-frame #prism-canvas,body.instrument-frame #sketch-canvas,body.instrument-frame #signal-canvas,body.instrument-frame #passage-canvas,body.instrument-frame #aquarium-canvas,body.instrument-frame #garden-canvas,body.instrument-frame #skate-canvas,body.instrument-frame #constellation-canvas{cursor:crosshair;clip-path:inset(var(--frame-t) var(--frame-r) var(--visual-bottom) var(--frame-l) round var(--note-radius-frame));transition:clip-path var(--note-dur-frame) var(--note-ease)}
#instrument-rim{position:fixed;z-index:8;inset:var(--frame-t) var(--frame-r) var(--visual-bottom) var(--frame-l);border:1px solid var(--note-rule);border-radius:var(--note-radius-frame);box-shadow:0 0 0 1px var(--note-casing);pointer-events:none;transition:bottom var(--note-dur-frame) var(--note-ease)}

/* ---------- Rail: every rail button, including the ones inside the record popover ---------- */
body.instrument-frame #instrument-rail button{border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;font-family:var(--note-font);cursor:pointer}
body.instrument-frame #instrument-rail button:disabled{cursor:default}
body.instrument-frame #instrument-rail :where(#record-menu) button:disabled{opacity:.3}
body.instrument-frame #record-menu{top:auto;bottom:calc(100% + 12px);max-height:60vh;overflow:auto}

/* ---------- Rail: the words (art direction v2, "Light, not chrome") ----------
   Sentence-case words at 14px, normal tracking. The active or open word lights up and a
   glowing point of the scene's light hangs before it. One id outranks the class-only
   .field-action/.session-button word styles in field-ui.css and session-ui.css. */
body.instrument-frame #instrument-rail{position:fixed;z-index:40;left:max(26px,calc(var(--safe-l) + 12px));right:max(26px,calc(var(--safe-r) + 12px));bottom:calc(var(--key-space) + var(--tracks-space));height:var(--rail-h);display:flex;flex-wrap:nowrap;align-items:center;align-content:center;justify-content:flex-start;gap:0 22px;padding:0;overflow:visible;color:var(--note-text);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);transition:bottom var(--note-dur-frame) var(--note-ease)}
body.instrument-frame #instrument-rail>#corner-bl,body.instrument-frame #instrument-rail>#corner-br{display:contents}
body.instrument-frame #instrument-rail>#corner-tr{display:contents} /* its words (Input on) join the rail; the record menu inside it is fixed */
body.instrument-frame #instrument-rail>button,body.instrument-frame #instrument-rail>#corner-bl>button,body.instrument-frame #instrument-rail>#corner-br>button,body.instrument-frame #instrument-rail>#corner-tr>button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:auto;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:2px;background:none;box-shadow:none;backdrop-filter:none;transform:none;opacity:1;color:var(--note-text-faint);font:var(--note-weight-text) var(--note-text-sm)/1 var(--note-font);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;transition:color var(--note-dur) var(--note-ease)}
body.instrument-frame #instrument-rail>button:hover,body.instrument-frame #instrument-rail>#corner-bl>button:hover,body.instrument-frame #instrument-rail>#corner-br>button:hover,body.instrument-frame #instrument-rail>#corner-tr>button:hover{color:var(--note-text);background:none;box-shadow:none;text-decoration:none;padding:0}
body.instrument-frame #instrument-rail>button:is([aria-expanded=true],[aria-pressed=true],.on),body.instrument-frame #instrument-rail>#corner-bl>button[aria-expanded=true],body.instrument-frame #instrument-rail>#corner-tr>button[aria-expanded=true]{color:var(--note-text);font-weight:var(--note-weight-label);background:none;box-shadow:none;text-decoration:none;padding:0}
body.instrument-frame #instrument-rail>button::before,body.instrument-frame #instrument-rail>#corner-bl>button::before,body.instrument-frame #instrument-rail>#corner-br>button::before,body.instrument-frame #instrument-rail>#corner-tr>button::before,body.instrument-frame #instrument-rail>button::after,body.instrument-frame #instrument-rail>#corner-bl>button::after,body.instrument-frame #instrument-rail>#corner-br>button::after,body.instrument-frame #instrument-rail>#corner-tr>button::after{content:none}
body.instrument-frame #instrument-rail>button[hidden],body.instrument-frame #instrument-rail>#corner-bl>button[hidden],body.instrument-frame #instrument-rail>#corner-br>button[hidden],body.instrument-frame #instrument-rail>#corner-tr>button[hidden],body.instrument-frame #instrument-rail>#corner-br>#kb-restore,body.instrument-frame.kb-min #instrument-rail>#corner-br>#kb-collapse{display:none}
body.instrument-frame.kb-min #instrument-rail>#corner-br>#kb-restore{display:inline-flex}
/* The point of light hangs in the gap before the word, so the word never shifts. */
body.instrument-frame #instrument-rail>button:is([aria-expanded=true],[aria-pressed=true],.on)::before,body.instrument-frame #instrument-rail>#corner-bl>button[aria-expanded=true]::before,body.instrument-frame #instrument-rail>#corner-tr>button[aria-expanded=true]::before{content:'';position:absolute;left:-11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--scene-accent);box-shadow:var(--note-glow);pointer-events:none;animation:rail-light-in var(--note-dur-fade) var(--note-ease)}
@keyframes rail-light-in{from{opacity:0}to{opacity:1}}
/* NOTE mark: the only picture in the rail. */
body.instrument-frame #instrument-rail>#about-toggle{gap:8px;color:var(--note-text);font-weight:var(--note-weight-label)}
body.instrument-frame #instrument-rail>#about-toggle img{display:block;width:20px;height:20px}
body.instrument-frame #instrument-rail>#about-toggle span{display:inline}
body.instrument-frame #instrument-rail>:is(button,#corner-bl>button,#corner-br>button,#corner-tr>button):focus-visible{outline:1px solid var(--note-text);outline-offset:3px;border-radius:2px;box-shadow:none}
/* The Mixer, Tracks, Library and the keys, and the Display's parts when they come back to the rail (Sound in #corner-bl, the
   tempo, the click), are icons on the Display's caps (NoteDisplay.icon): the cap itself shows them lit, so no point of
   light hangs before them; the gaps close to the caps' own rhythm. */
body.instrument-frame #instrument-rail button.has-icon::before,body.instrument-frame #instrument-rail button.has-icon::after,body.instrument-frame #instrument-rail>#corner-bl>button.has-icon.rail-word::before{content:none}
@media(min-width:701px){body.instrument-frame #instrument-rail>button.has-icon,body.instrument-frame #instrument-rail>#corner-bl>button.has-icon.rail-word,body.instrument-frame #instrument-rail>#corner-br>button.has-icon{margin:0 -11px;padding:0}body.instrument-frame #instrument-rail>#corner-br>button.has-icon{margin-right:0}}
/* Instrument words left, transport words right. */
body.instrument-frame #instrument-rail>#mixer-toggle{margin-left:auto}
/* 961–1100px: the transport words close up a little so the Display keeps its labels. */
@media(min-width:961px) and (max-width:1100px){body.instrument-frame #instrument-rail{column-gap:16px}}

/* ---------- Rail: ≤700px, the Display's row (transport-ui.css) over one row of caps spread across it: the Display's
   parts that came back (sound, the tempo, the click), then the Mixer, Tracks, Library and the keys. The targets
   (44px, faces 34px) may touch, and the row runs 5px past the frame each side (transport-ui.css) so the outer faces
   line up with the Display's edges: seven caps fit at 320. body.rail-wrapped (a second row) is only a fallback ---------- */
@media(max-width:700px){
  body.instrument-frame #instrument-rail{flex-wrap:wrap;row-gap:0;column-gap:0;justify-content:space-between;align-content:center}
  body.instrument-frame #instrument-rail>#about-toggle span{display:none}
  body.instrument-frame #instrument-rail>#mixer-toggle{margin-left:0}
  body.instrument-frame #record-menu{position:fixed;left:18px;right:18px;bottom:calc(var(--visual-bottom) + 8px);width:auto}
}

/* ---------- Keyboard console and panels sit in the same casing ---------- */
body.instrument-frame #console{background:var(--note-casing);opacity:1;pointer-events:auto;transition:transform var(--note-dur-frame) var(--note-ease),opacity 300ms;z-index:30}
body.instrument-frame.kb-min #console{opacity:0;pointer-events:none;transform:translateY(110%)}
body.instrument-frame #panel-audio.spatial-ui{inset:var(--frame-t) var(--frame-r) var(--visual-bottom) var(--frame-l);width:auto;height:auto;overflow:hidden;border-radius:var(--note-radius-frame);transition:bottom var(--note-dur-frame) var(--note-ease),visibility 440ms}
body.instrument-frame .space-stage{inset:72px 20px 64px;max-width:none;align-content:safe center;margin:0;overflow-y:auto}
body.instrument-frame #panel-audio #sound-close.space-close{bottom:14px;background:none;box-shadow:none;border:0;color:var(--note-text);font-size:var(--note-text-xs);height:44px;padding:0 10px}
body.instrument-frame #panel-overlay{inset:var(--frame-t) var(--frame-r) var(--visual-bottom) var(--frame-l);border-radius:var(--note-radius-frame)}
body.instrument-frame #audio-status{bottom:calc(var(--visual-bottom) + 12px);left:32px}
body.instrument-frame #sample-strip{bottom:calc(var(--visual-bottom) + 12px)}
@media(max-width:700px){body.instrument-frame .space-stage{inset:48px 8px 54px;align-content:start}}
@media(prefers-reduced-motion:reduce){
  body.instrument-frame #instrument-rail,body.instrument-frame #instrument-rim,body.instrument-frame #corner-tr,body.instrument-frame canvas,body.instrument-frame #console,body.instrument-frame .spatial-ui{transition:none!important}
  body.instrument-frame #instrument-rail button{transition:none}
  body.instrument-frame #instrument-rail button::before{animation:none}
}

/* Walk renders into the actual scene opening instead of cropping a window-sized camera. */
body.instrument-frame #signal-canvas,body.instrument-frame #passage-canvas,body.instrument-frame #aquarium-canvas,body.instrument-frame #garden-canvas,body.instrument-frame #skate-canvas,body.instrument-frame #constellation-canvas{inset:var(--frame-t) var(--frame-r) var(--visual-bottom) var(--frame-l)!important;width:calc(100% - var(--frame-l) - var(--frame-r))!important;height:calc(100% - var(--visual-bottom) - var(--frame-t))!important;clip-path:inset(0 round var(--note-radius-frame))}

/* Film transport belongs to the Shorts playlist only. */