/* The Studio's Add text or score (js/studio-input.js): the button by the
   words, and the pane: Text or Score, who reads it, the preview */
#stAdd { white-space: nowrap; }
body.dropping[data-room="studio"] #app::after { content: "Drop a score (.musicxml, .mxl), a text file, or a take"; }

#stInput { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--gold); border-radius: 10px;
  background: var(--stone); color: var(--vellum); box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6); box-sizing: border-box; overflow: hidden; }
#stInput[open] { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
#stInput::backdrop { background: rgba(8, 9, 12, 0.6); }
#stInput > * { padding-inline: 16px; }
#stInput .si-h { display: flex; align-items: center; gap: 8px; padding-top: 12px; }
#stInput .si-h h3 { margin: 0; flex: 1; font: 700 15px var(--label); letter-spacing: 0.06em; color: var(--gold); text-transform: lowercase; }
#stInput .si-h button { padding: 2px 8px; }
#stInput .si-tabs { display: flex; gap: 0; margin-top: 10px; border-bottom: 1px solid var(--line); }
#stInput .si-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 6px 14px; color: var(--dim); }
#stInput .si-tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
#stInput .si-pane { padding-top: 10px; display: grid; gap: 8px; }
#stInput .si-pane[hidden] { display: none; }
#siText { width: 100%; box-sizing: border-box; min-height: 7.5em; resize: vertical; font: 15px/1.45 var(--display); background: var(--nave); color: var(--vellum);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
#siText:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
#stInput .si-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
#siFile { color: var(--dim); font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
#stInput .si-parts { display: flex; gap: 8px 14px; flex-wrap: wrap; }
#stInput .si-parts[hidden], #siVerseBox[hidden] { display: none; }
#stInput .si-parts label { display: flex; align-items: center; gap: 6px; font: 13px var(--label); letter-spacing: 0.04em; color: var(--dim); min-width: 0; }
#stInput .si-parts select { max-width: 16em; min-width: 0; }
#stInput .si-note { margin: 0; font-size: 12px; color: var(--dim); font-style: italic; }

/* who reads it: four pickers, two a row */
#stInput .si-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding-top: 10px; }
#stInput .si-read label { display: grid; gap: 2px; font: 12px var(--label); letter-spacing: 0.05em; color: var(--dim); min-width: 0; }
#stInput .si-read select { width: 100%; min-width: 0; font-size: 13px; }
#stInput .si-read select.other { border-color: var(--gold); color: var(--gold); }
#stInput .si-read select:disabled { opacity: 0.45; }

/* the preview: each line, its IPA (stressed ˈ), its pitch */
#siPrev { margin-top: 10px; padding-block: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-y: auto; min-height: 3em; scrollbar-width: thin; }
#siPrev p { margin: 0 0 6px; font-size: 13px; }
#siPrev .si-as { color: var(--dim); }
#siPrev .si-as b { color: var(--vellum); font-weight: 500; }
#siPrev .si-dim { color: var(--dim); }
#siPrev .si-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 0.6fr); gap: 0 10px; align-items: center; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
#siPrev .si-line.end { padding-bottom: 10px; }
#siPrev .si-line .tx { grid-column: 1; font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
#siPrev .si-line .ipa { grid-column: 1; font: 15px/1.35 "Gentium Plus", var(--display); color: var(--vellum); overflow-wrap: anywhere; }
#siPrev .si-line .ipa .g { text-decoration: underline dotted var(--rubric); }
#siPrev .si-line.bad .ipa { color: var(--rubric); font: 12px var(--label); }
#siPrev svg { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 40px; }
#siPrev .si-f0 polyline { fill: none; stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#siPrev .si-f0 .st circle { fill: var(--vellum); }
#siPrev svg .tk line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
#siPrev .si-roll rect { fill: var(--gold); }
#siPrev .si-roll { height: 46px; }

#stInput .si-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-block: 10px 14px; }
#stInput .si-foot .sp { flex: 1; }
#stInput .si-foot small { color: var(--dim); font-size: 12px; }
#stInput .si-foot button[hidden] { display: none; }
#stInput .si-foot button:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 760px) {
  #stAdd { flex: 1 1 100% !important; order: -1; font-size: 15px; padding: 9px 0; }
  #stInput { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  #stInput > * { padding-inline: 12px; }
  #stInput .si-read { grid-template-columns: minmax(0, 1fr); }
  #stInput .si-read select, #siText, #stInput .si-parts select { font-size: 16px; } /* iOS does not zoom into them */
  #siPrev .si-line { grid-template-columns: minmax(0, 1fr); }
  #siPrev svg { grid-column: 1; grid-row: auto; }
  #stInput .si-foot button { flex: 1 1 auto; padding: 9px 10px; }
  #stInput .si-foot small { flex-basis: 100%; }
}