/*
 * Instrumental composer (owner: Instrumental + Speech builder). Tokens only (css/tokens.css), radii 6/10/14/20/pill.
 * Everything else comes from the shared control styles in css/app.css.
 * Every selector is scoped to [data-composer-for="instrumental"] — this file stays loaded once a user visits the tool,
 * so an unscoped selector would restyle whatever tool they open next (foundation critic round 4, N2).
 */

/* Length: the custom slider sits right under the presets, as one group. */
body.soundlabs-page [data-composer-for="instrumental"] .sl-inst-length { gap: var(--sp-4); }
body.soundlabs-page [data-composer-for="instrumental"] .sl-inst-length .sl-field--slider .sl-readout { color: var(--text); font-weight: 700; }

/* The description starts two lines tall and grows with what is typed, so Length is above the fold at 1280x720. */
body.soundlabs-page [data-composer-for="instrumental"] [data-control="prompt"] .sl-textarea { min-height: 64px; }

/* "Leave out" is a short list of words: a one-line field that grows only if needed. */
body.soundlabs-page [data-composer-for="instrumental"] .sl-field--short .sl-textarea { min-height: 44px; }

/* Pre-run hints under the description (vocab warning copy, with a one-tap fix). */
body.soundlabs-page [data-composer-for="instrumental"] .sl-tool-hints {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
body.soundlabs-page [data-composer-for="instrumental"] .sl-tool-hints li {
  display: flex;
  gap: 6px;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-2);
  text-wrap: pretty;
}
body.soundlabs-page [data-composer-for="instrumental"] .sl-tool-hints .sl-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: var(--info); }
body.soundlabs-page [data-composer-for="instrumental"] .sl-tool-hints .sl-link--button { font-size: inherit; line-height: inherit; text-align: left; }
body.soundlabs-page [data-composer-for="instrumental"] .sl-tool-hints .sl-link--button { white-space: nowrap; }

/* "More ideas" reveals the rest of the idea chips (critic round 1, M1). */

/* Idea chips are one scrollable row at every width (the pattern the shell uses on phones), so the controls below them —
   Length, the estimate, the use-policy line — stay above the composer's fold. Critic round 1, M1/m14/m15. */
body.soundlabs-page [data-composer-for="instrumental"] .sl-field--chips .sl-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-5));
  padding: 2px var(--sp-5);
  scrollbar-width: none;
  scroll-padding-inline: var(--sp-5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
}
body.soundlabs-page [data-composer-for="instrumental"] .sl-field--chips .sl-chips::-webkit-scrollbar { display: none; }