/* Scene shell — "Light, not chrome". The tray in the keyboard slot is the instrument's
   solid casing, cornered like the frame; type lights up when chosen; one glowing point of the
   scene's accent marks a choice and glides between choices. No boxes, fills,
   underlines, tracked capitals or drop shadows. Linked last in index.html. */

#scene-readout,#scene-strip,body.field-ui #hint{
  font-family:var(--note-font);font-variant-numeric:var(--note-numeric);
  letter-spacing:0;text-transform:none;-webkit-font-smoothing:antialiased}
/* Resets stay below component specificity: (1,0,1). */
#scene-strip button,#scene-readout button{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:none;text-shadow:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#scene-strip :focus-visible,#scene-readout :focus-visible{outline:1px solid var(--note-text);outline-offset:3px;border-radius:var(--note-radius-focus);box-shadow:none}
.scene-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The fine-tuning panel is retired: its gear and panel stay in the DOM for main.js only. */
body.field-ui #instrument-rail #visual-toggle[hidden],body.field-ui #visual-toggle[hidden]{display:none}
body.field-ui #panel-visual.scene-drawer{display:none}
body.field-ui:has(#panel-visual.open) #panel-overlay{pointer-events:none;background:none}

/* ---------- Readout: scene name over its look, set on the scene ---------- */
body.field-ui #scene-readout{position:fixed;z-index:24;top:calc(var(--frame-t) + 10px);left:calc(var(--frame-l) + 16px);
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:calc(100vw - 2 * var(--frame-edge) - 160px);
  color:var(--note-text);text-shadow:0 0 12px #0009;pointer-events:none}
body.field-ui #scene-readout>*{pointer-events:auto}
body.field-ui #scene-readout #scene-browse{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:44px;min-height:44px;
  padding:4px 0;text-align:left}
.scene-browse-name{font-size:var(--note-text-sm);font-weight:var(--note-weight-label);line-height:1.2;color:var(--note-text)}
.scene-browse-look{font-size:var(--note-text-xs);font-weight:var(--note-weight-text);line-height:var(--note-leading);color:var(--note-text-muted);
  transition:color var(--note-dur) var(--note-ease)}
.scene-browse-look:empty{display:none}
body.field-ui #scene-readout #scene-browse:hover .scene-browse-look{color:var(--note-text)}
.scene-tour{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.scene-tour[hidden]{display:none}
.scene-tour-line{font-size:var(--note-text-xs);line-height:var(--note-leading);color:var(--note-text-muted)}
body.field-ui #scene-readout .scene-tour-stay{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:var(--note-text-xs);font-weight:var(--note-weight-label);line-height:var(--note-leading);color:var(--note-text)}
body.field-ui #scene-readout .scene-tour-stay::before{content:'';width:var(--note-dot);height:var(--note-dot);border-radius:50%;background:var(--scene-accent);
  box-shadow:var(--note-glow)}
.scene-status{margin:0;max-width:320px;font-size:var(--note-text-xs);line-height:var(--note-leading);color:var(--note-text);pointer-events:none}
body.field-ui.pale-scene #scene-readout{text-shadow:0 0 12px #000b,0 0 2px #0009}

/* ---------- Tray: the casing, in the keyboard slot ---------- */
/* Two rows. Row 1, the carousel: every scene is poster + name, one line in the catalogue's
   order. Row 2, the options bar: the current scene's look words (and subject words) rise into
   place beneath it. Vertical budget: 1px edge + 6px pad + poster + 4px + 17px name + 4px pad
   + 36px bar = 68px + poster. Posters run 48-64px tall with the keyboard band; below a 116px
   band the tray grows by just what it lacks, lifting the rail and the scene opening with it. */
body.field-ui #scene-strip{--poster-w:104px;--poster-h:clamp(48px,calc(var(--kb-h) - 68px),64px);--bar-h:36px;
  position:fixed;z-index:32;left:var(--frame-l);right:var(--frame-r);bottom:0;height:calc(var(--kb-h) + var(--safe-b));padding-bottom:var(--safe-b);box-sizing:border-box;
  display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto var(--bar-h);align-content:start;
  border:1px solid var(--note-edge);border-bottom:0;
  border-radius:var(--note-radius-frame) var(--note-radius-frame) 0 0;color:var(--note-text);background:var(--note-casing);
  animation:scene-tray-in var(--note-dur-drawer) var(--note-ease);
  /* Grows in step with the rail and the scene opening (instrument-frame.css), so it never overlaps them. */
  transition:height var(--note-dur-frame) var(--note-ease)}
body.field-ui.scene-has-options #scene-strip{height:calc(max(var(--kb-h),var(--tray-min)) + var(--safe-b))}
@keyframes scene-tray-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
body.field-ui #scene-strip[hidden]{display:none}
body.field-ui.strip-open #console{visibility:hidden}
body.instrument-frame.kb-min.strip-open{--key-space:calc(var(--kb-h) + var(--safe-b))}
body.instrument-frame.field-ui.strip-open.scene-has-options{--key-space:calc(max(var(--kb-h),var(--tray-min)) + var(--safe-b))}
#scene-strip .scene-strip-close{grid-column:1;grid-row:1;display:flex;align-items:flex-start;justify-content:center;width:44px;min-height:44px;padding-top:6px;
  font-size:var(--note-text-md);font-weight:var(--note-weight-light);line-height:1;color:var(--note-text-muted)}
#scene-strip .scene-strip-close:hover{color:var(--note-text)}
/* Row 1: the carousel. */
.scene-strip-track{grid-column:2;grid-row:1;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:0;padding:6px 20px 4px 0;scrollbar-width:none}
.scene-strip-track::-webkit-scrollbar{display:none}
.scene-strip-cards{display:flex;gap:12px;width:max-content}
.scene-card-item{position:relative;flex:none;scroll-snap-align:start}
#scene-strip .scene-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:var(--poster-w);text-align:left;color:var(--note-text)}
#scene-strip .scene-card-poster{display:block;width:var(--poster-w);height:var(--poster-h);object-fit:cover;border-radius:var(--note-radius-poster);opacity:.82;
  transition:opacity var(--note-dur) var(--note-ease),box-shadow var(--note-dur) var(--note-ease)}
#scene-strip .scene-card:hover .scene-card-poster,#scene-strip .scene-card:focus-visible .scene-card-poster{opacity:1}
#scene-strip .scene-card[aria-pressed=true] .scene-card-poster{opacity:1;box-shadow:0 0 0 1px var(--scene-accent),0 0 14px -2px var(--scene-accent)}
.scene-card-name{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:var(--note-text-sm);font-weight:var(--note-weight-label);line-height:17px;color:var(--note-text);white-space:nowrap}
#scene-strip .scene-card,#scene-strip .scene-card-item{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
/* Row 2: the options bar. Full width under the carousel, still while the carousel scrolls,
   left-aligned with the first poster. It rises into place (8px + fade) when the scene has
   options and sinks away when it has none. */
.scene-options{grid-column:2;grid-row:2;position:relative;min-width:0;height:var(--bar-h);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  opacity:0;translate:0 8px;visibility:hidden;
  transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease),visibility 0s linear var(--note-dur)}
.scene-options::-webkit-scrollbar{display:none}
.scene-options.is-up{opacity:1;translate:0 0;visibility:visible;transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease)}
@starting-style{.scene-options.is-up{opacity:0;translate:0 8px}}
.scene-options-set{display:flex;align-items:center;gap:48px;width:max-content;height:100%;padding-right:20px}
.scene-options-set.is-leaving{position:absolute;top:0;left:0;pointer-events:none}
.scene-choice-group{display:flex;align-items:center;gap:24px;height:100%}
.scene-choice-heading{margin:0;font-size:var(--note-text-xs);font-weight:var(--note-weight-text);line-height:1;color:var(--note-text-muted);white-space:nowrap}
.scene-choice-rows{position:relative;display:flex;align-items:center;gap:24px;height:100%}
#scene-strip .scene-choice{position:relative;flex:none;display:flex;align-items:center;height:100%;padding:0;white-space:nowrap;
  font-size:var(--note-text-sm);font-weight:var(--note-weight-text);line-height:1;color:var(--note-text-faint);transition:color var(--note-dur-fade) var(--note-ease)}
#scene-strip .scene-choice:hover{color:var(--note-text)}
#scene-strip .scene-choice[aria-pressed=true]{color:var(--note-text);font-weight:var(--note-weight-label)}
/* Touch: 44px-tall hit areas that reach sideways into the gaps; the bar stays 36px. */
@media (pointer:coarse){#scene-strip .scene-choice::after{content:'';position:absolute;inset:-4px -12px}}
@media (max-width:600px){
  body.field-ui #scene-strip{left:calc(4px + var(--safe-l));right:calc(4px + var(--safe-r))}
  .scene-strip-track,.scene-options-set{padding-right:12px}
}

/* ---------- How-to moment: shown in the hint's place when the scene changes ---------- */
body.field-ui .scene-howto{position:fixed;z-index:22;left:50%;bottom:calc(var(--visual-bottom) + 24px);translate:-50% 0;width:max-content;
  max-width:calc(100vw - 48px);margin:0;font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font);letter-spacing:0;
  text-align:center;text-wrap:balance;color:var(--note-text);text-shadow:0 0 12px #0009;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity 600ms var(--note-ease),visibility 0s linear 600ms}
body.field-ui .scene-howto.is-showing{opacity:1;visibility:visible;transition:none}
/* A stale tab's notice: "Reload" is a word in the line, at the chosen weight. */
body.field-ui .scene-howto .scene-howto-reload{margin:0;padding:12px 0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;
  font-weight:var(--note-weight-label);letter-spacing:inherit;text-shadow:inherit;cursor:pointer;pointer-events:auto}
body.field-ui .scene-howto:not(.is-showing) .scene-howto-reload{pointer-events:none}
body.field-ui .scene-howto .scene-howto-reload:focus-visible{outline:1px solid var(--note-text);outline-offset:3px;border-radius:var(--note-radius-focus)}
body.instrument-ui.field-ui.howto-showing #hint{opacity:0;transition:none}
/* Pale scenes (Pool, Ink, Aquarium Day): a denser shadow keeps light type readable. */
body.field-ui.pale-scene .scene-howto,body.instrument-ui.field-ui.pale-scene #hint{text-shadow:0 0 12px #000b,0 0 2px #0009}
@media (max-width:600px){body.field-ui .scene-howto{bottom:calc(var(--visual-bottom) + 56px);font-size:var(--note-text-sm)}}

/* ---------- First-run hint: a line of light above the rail ---------- */
body.instrument-ui.field-ui #hint{display:block;position:fixed;z-index:22;top:auto;right:auto;left:50%;bottom:calc(var(--visual-bottom) + 24px);translate:-50% 0;
  width:max-content;max-width:calc(100vw - 48px);margin:0;padding:0;background:none;font-size:var(--note-text-md);font-weight:var(--note-weight-text);line-height:var(--note-leading);
  text-align:center;color:var(--note-text);text-shadow:0 0 12px #0009;pointer-events:none;opacity:1;
  transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease)}
/* Phones: smaller, and above the sound toggle that shares the scene's bottom edge. */
@media (max-width:600px){body.instrument-ui.field-ui #hint{bottom:calc(var(--visual-bottom) + 56px);font-size:var(--note-text-sm)}}
body.instrument-ui.field-ui #hint.gone{opacity:0;visibility:hidden;translate:-50% 8px;
  transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease),visibility 0s linear var(--note-dur)}
/* While a panel or popover is open (Sound, Play, Library, Audio & MIDI, Record, Loop, Key, About)
   the hint and the how-to line step aside: opacity only, so nothing reflows. The scene tray is
   exempt; choosing a scene there is exactly when its how-to line should show. */
body.instrument-ui.field-ui:has(#panel-audio.open,#record-menu.open,#loop-panel:not([hidden]),#about-dialog[open]) :is(#hint,.scene-howto){
  opacity:0;transition:opacity var(--note-dur) var(--note-ease)}

@media (prefers-reduced-motion:reduce){
  body.field-ui #scene-strip{animation:none}
  .scene-browse-look,#scene-strip .scene-choice,#scene-strip .scene-card-poster,body.field-ui .scene-howto,
  body.field-ui #scene-strip,.scene-options,.scene-options.is-up{transition:none}
  .scene-options{translate:0 0}
  body.instrument-ui.field-ui #hint,body.instrument-ui.field-ui #hint.gone{transition:none;translate:-50% 0}
  body.instrument-ui.field-ui:has(#panel-audio.open,#record-menu.open,#loop-panel:not([hidden]),#about-dialog[open]) :is(#hint,.scene-howto){transition:none}
}