/* Studio hierarchy: song identity, musical canvas, persistent transport.
   White editing surfaces, violet actions, instrument colours reserved for music. */
:root { --ink: #252638; --muted: #656b7c; --paper: #fff; --line: #e0e3eb; --accent: #6356cb; background: #f5f6fa; }
#workspace { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
#workspace button, #workspace select { border-radius: 7px; }
#workspace .primary { background: var(--accent); color: #fff; border-color: var(--accent); }
#workspace .primary:hover { background: #5043b5; }
#workspace .quiet-button { border-color: transparent; background: transparent; color: var(--muted); }
#workspace .quiet-button:hover { background: #eceaf7; color: var(--ink); }
.topbar { flex-shrink: 0; min-height: 64px; padding: 12px 24px; gap: 12px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.topbar .wordmark { font-size: 31px; letter-spacing: -2px; }
.topbar .top-caption { color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); font-size: 12px; }
.topbar button { font-size: 12px; padding: 8px 12px; }
.topbar .library { margin-left: auto; }
.topbar .library select { background: #f5f6fa; border-color: transparent; max-width: 260px; font-size: 12px; }
.topbar .state { padding: 0; background: transparent; font-size: 11px; color: #536d5e; }
#toggle-chat[aria-expanded=true] { background: #eeebfb; border-color: #dcd6f3; color: #5547b3; }

.workspace { flex: 1; width: 100%; min-height: 0; max-width: none; grid-template-columns: minmax(0, 1fr) 330px; overflow: hidden; }
.workspace.assistant-closed { grid-template-columns: minmax(0, 1fr); }
.score { min-height: 0; padding: 26px 28px; overflow-y: auto; scrollbar-gutter: stable; }
.song-heading { margin: 0 0 12px; align-items: flex-start; gap: 16px; }
.song-heading > div:first-child { min-width: 0; }
.song-heading h1 { font-size: 27px; letter-spacing: -.7px; font-weight: 600; overflow-wrap: anywhere; }
.song-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.song-actions > button { font-size: 12px; }
.song-setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 16px; padding: 4px 0; border-block: 1px solid var(--line); }
#workspace .song-setup button { position: relative; display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 52px; padding: 7px 24px 7px 12px; background: transparent; border: 0; border-radius: 0; text-align: left; }
#workspace .song-setup button::after { content: '›'; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-size: 20px; font-weight: 400; color: var(--muted); }
#workspace .song-setup button + button { border-left: 1px solid var(--line); }
.song-setup strong { font-size: 13px; font-weight: 600; }
.song-setup span { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.song-setup.has-album { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#workspace .song-setup:not(.has-album) #edit-song { border-left: 0; }
#workspace .song-setup button:hover { background: #eeebfb; color: #5547b3; }
.setup-browser { display: grid; grid-template-columns: minmax(160px, 210px) minmax(0, 1fr); gap: 20px; align-items: start; }
.setup-roster { display: grid; align-content: start; gap: 4px; }
.setup-roster button { display: grid; gap: 5px; padding: 12px; text-align: left; background: transparent; border-color: transparent; overflow-wrap: anywhere; }
.setup-roster button strong { font-size: 14px; }
.setup-roster button span { color: var(--muted); font-size: 12px; font-weight: 400; }
.setup-roster button[aria-pressed=true] { background: #eeebfb; border-color: #c8c0ed; color: #514399; }
.setup-detail { min-width: 0; }
.setup-detail fieldset { margin: 0; }
.player-assignments { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.player-assignments label { flex-direction: row; align-items: center; font-weight: 400; cursor: pointer; }
.player-assignments input { accent-color: var(--accent); }
#editor-dialog[data-mode=band], #editor-dialog[data-mode=instruments] { width: min(980px, calc(100vw - 24px)); }
@media (max-width: 600px) {
  .song-setup, .song-setup.has-album { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  #workspace .song-setup button { min-height: 52px; padding: 7px 24px 7px 10px; }
  #workspace .song-setup.has-album #edit-band { border-left: 0; border-top: 1px solid var(--line); }
  #workspace .song-setup #edit-instruments { border-top: 1px solid var(--line); }
  #workspace .song-setup:not(.has-album) #edit-instruments { grid-column: 1 / -1; border-left: 0; }
  .setup-browser { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .setup-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.arrangement-panel { margin-bottom: 24px; }
.arrangement-label { display: flex; align-items: baseline; gap: 10px; }
.arrangement-label h2 { font-size: 15px; font-weight: 600; }
#song-summary { margin: 0; font-size: 11px; color: var(--muted); }
.section-heading .actions { align-items: center; }
.timeline { gap: 8px; padding: 4px 0 8px; }
#workspace .section-block { position: relative; min-width: 125px; padding: 12px 12px 12px 30px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; }
#workspace .section-block[aria-pressed=true] { border-color: #a39ae2; background: #eeebfb; color: #4d419b; box-shadow: inset 0 -2px #8c7bd3; }
.section-block .section-number { position: absolute; left: 12px; top: 14px; margin: 0; color: #85829a; font-size: 10px; }
.section-block strong { font-size: 12px; font-weight: 600; }
.section-block span { font-size: 10px; margin-top: 4px; }
#workspace .section-block.is-playing { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
.parts-panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.part-heading { margin: 0; padding: 18px 18px 14px; align-items: center; }
.part-heading h2 { font-size: 18px; font-weight: 600; }
#section-summary { font-size: 11px; margin-top: 4px; }
#workspace .part-heading .selected-range { background: #f0edfb; color: #5649ad; border-color: transparent; }
.track-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 18px 10px; }
.track-toolbar > span { font-size: 11px; }
.disclosure-menu { position: relative; margin: 0; }
.disclosure-menu > summary { list-style: none; margin: 0; padding: 8px 10px; border-radius: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.disclosure-menu > summary::-webkit-details-marker { display: none; }
.disclosure-menu > summary::after { content: '⌄'; padding-left: 8px; }
#advanced-menu > summary { font-size: 16px; padding: 6px 10px; letter-spacing: 1px; }
#advanced-menu > summary::after { content: none; }
.disclosure-menu[open] > summary, .disclosure-menu > summary:hover { background: #eeebfb; color: #5547b3; }
.menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 230px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px #25263816; }
.menu-panel button { display: block; width: 100%; text-align: left; background: transparent; border: 0; font-size: 12px; font-weight: 500; padding: 10px; }
.menu-panel p { padding: 8px 10px; font-size: 11px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.menu-panel label { font-size: 12px; margin: 8px; }
.menu-panel select { width: 100%; font-size: 12px; }
#file-name { border-top: 1px solid var(--line); margin-top: 5px; }
.chat { position: static; height: auto; max-height: none; min-height: 0; padding: 25px 20px 18px; gap: 22px; border-color: var(--line); background: #fff; overflow-y: auto; }
.chat-heading h2 { font-size: 15px; font-weight: 600; }
.agent-mark { background: #eeebfb; color: #6356cb; flex-shrink: 0; }
.chat .message { font-size: 13px; }
.chat .message.user { background: #f2f0fa; }
#chat-form { border-top: 1px solid var(--line); padding-top: 16px; }
#chat-form > label { font-size: 12px; }
#chat-form textarea { background: #f8f9fc; font-size: 13px; border-radius: 9px; }
#chat-form .section-heading { margin-bottom: 0; }

/* The transport is app chrome, not a card competing with the arrangement. */
.live-transport { flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 78px; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; z-index: 25; }
.transport-main, .transport-scope, .transport-options-live { display: flex; align-items: center; gap: 18px; min-width: 0; }
.transport-main .play-buttons { flex-shrink: 0; }
.play-buttons button { min-width: 108px; min-height: 42px; font-size: 12px; }
#play::before { content: '▶'; padding-right: 9px; font-size: 10px; }
#stop::before { content: '■'; padding-right: 9px; font-size: 10px; }
.transport-readout { min-width: 0; }
.play-clock { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: #838796; font-variant-numeric: tabular-nums; white-space: nowrap; }
#play-position { font-size: 16px; font-weight: 600; color: var(--ink); }
#playback-status { display: block; font-size: 10px; color: var(--muted); line-height: 1.35; margin-top: 3px; max-width: 34ch; overflow-wrap: anywhere; }
.transport-scope select { max-width: 200px; font-size: 12px; background: #f5f6fa; border-color: transparent; }
.loop-control { flex-direction: row; align-items: center; font-size: 12px; font-weight: 500; gap: 7px; cursor: pointer; }
.loop-control input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.transport-options-live { justify-content: flex-end; gap: 12px; }
.master-volume { flex-direction: row; align-items: center; gap: 8px; font-size: 11px; font-weight: 400; color: var(--muted); }
.master-volume input { width: 80px; height: 24px; padding: 0; margin: 0; accent-color: var(--accent); }
#listening-options .menu-panel { top: auto; bottom: calc(100% + 12px); width: 280px; }
#export-dialog { width: min(600px, calc(100vw - 24px)); }
#reaper-template-dialog { width: min(600px, calc(100vw - 24px)); }
.reaper-template-summary p { margin: 0 0 8px; font-size: 14px; }
.reaper-template-summary p:empty { display: none; }
.reaper-template-summary button { width: auto; justify-self: start; font-size: 13px; }
#export-dialog .transport { margin: 0; padding: 0; border: 0; }
#export-dialog .transport-options { max-width: 180px; margin: 20px 0; }
#take-actions { margin-top: 14px; }
#render-status { margin-top: 14px; }
#performance-details { padding: 14px; margin: 18px 0; border: 1px solid var(--line); border-radius: 8px; background: #f7f8fb; }
#performance-details > summary { margin: 0; font-size: 12px; font-weight: 600; }
.band-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.band-summary p { border: 0; padding: 0; }
.performance-note { border-left: 3px solid #c3bddf; padding-left: 12px; }
.performance-note strong { display: block; margin-bottom: 5px; }
.performance-note p + p { margin-top: 7px; }

/* One shared scroll surface and time axis for every instrument. */
.lane-hint { margin-bottom: 10px; }
.lanes-scroll { overflow: auto; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 5px; }
#lanes { min-width: 850px; }
.lanes-scroll .lane { grid-template-columns: 140px minmax(0, 1fr); min-height: 114px; }
.lanes-scroll .instrument { position: sticky; left: 0; z-index: 3; background: #e9edf0; padding: 14px 10px; border-right: 1px solid var(--line); }
.lanes-scroll .mix-controls { flex-wrap: wrap; }
.lanes-scroll .mix-controls button:last-child { flex-basis: 100%; margin-top: 5px; text-align: left; }
.lanes-scroll .phrases { position: relative; display: block; overflow: visible; padding: 0; min-width: 0; }
.lanes-scroll .phrase { position: absolute; top: 9px; bottom: 9px; min-width: 0; max-width: none; margin: 0; border-radius: 3px; padding: 9px 7px; overflow: hidden; white-space: nowrap; z-index: 1; text-overflow: ellipsis; border-right: 2px solid #e9edf0; }
.lanes-scroll .phrase strong, .lanes-scroll .phrase span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lanes-scroll .phrase strong { font-size: 12px; }
.lanes-scroll .phrase span { font-size: 10px; }
.lanes-scroll .phrase:focus-visible { z-index: 4; }
.lanes-scroll .phrase.rest { background: repeating-linear-gradient(135deg, transparent, transparent 8px, #dce3e8 8px, #dce3e8 9px); border: 0; padding-top: 20px; }
.bar-guide { position: absolute; top: 0; bottom: 0; border-left: 1px solid #738b9c26; z-index: 2; pointer-events: none; }
.lanes-scroll .ruler-row { min-height: 34px; }
.lanes-scroll .ruler-caption { font-size: 10px; font-weight: 600; padding-top: 10px; padding-bottom: 8px; }
.bar-ruler { position: relative; min-height: 34px; background: #dce5ec; }
.bar-ruler span { position: absolute; bottom: 9px; font-size: 10px; color: #486173; padding-left: 4px; border-left: 1px solid #a5b7c4; }
.bar-ruler .ruler-end { right: 3px; top: 1px; bottom: auto; border-left: 0; font-size: 9px; }
.bar-ruler button { position: absolute; bottom: 0; padding: 8px 4px; border: 0; border-left: 1px solid #a5b7c4; border-radius: 0; background: transparent; font-size: 10px; color: #486173; }
.bar-ruler button:hover { background: #c1d1de; }

/* Track labels carry instrument configuration; phrase colours carry the music. */
.parts-panel .lanes-scroll { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; }
.parts-panel .lane { min-height: 120px; border-color: #e8eaf0; }
.parts-panel .ruler-row { min-height: 34px; }
.parts-panel .instrument { background: #fff; border-color: var(--line); padding: 10px; }
.parts-panel .instrument .muted { margin-bottom: 5px; }
#workspace .instrument-name { display: block; border: 0; background: transparent; text-align: left; padding: 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
#workspace .instrument-name:hover { color: var(--accent); }
#workspace .mix-controls button { font-size: 10px; border-radius: 4px; padding: 3px 6px; background: #f4f5f8; }
#workspace .mix-controls button[aria-pressed=true] { background: #6356cb; color: #fff; }
.parts-panel .phrases { background: #fafbfe; }
.parts-panel .phrase { top: 10px; bottom: 10px; border-radius: 7px; border-left-width: 3px; border-right-width: 1px; }
.parts-panel .phrase strong { font-size: 12px; font-weight: 600; }
.parts-panel .phrase span { font-size: 10px; }
.parts-panel .phrase.rest { background: transparent; color: #858a9b; }
.parts-panel .bar-ruler { background: #f4f5f9; }
.parts-panel .bar-ruler button { border-color: #d9dce6; color: var(--muted); }
.parts-panel .ruler-caption { background: #f4f5f9; color: var(--muted); }
.preview-level { flex-basis: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; font-size: 9px; margin-top: 4px; color: var(--muted); font-weight: 400; }
.preview-level input { width: 100%; padding: 0; height: 20px; accent-color: #9688c2; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #6356cb; z-index: 4; pointer-events: none; }
.editor-audition { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; margin: 12px 0 20px; background: #f2f0fa; border-radius: 7px; }
.phrase-audition { align-items: end; margin-bottom: 12px; }

/* Music editors keep repeated notes compact and controls descriptive. */
dialog { width: min(850px, calc(100vw - 24px)); }
.form-row { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.form-row > label { flex: 1; min-width: 90px; }
.form-row > button { flex: 0 1 auto; font-size: 11px; }
.form-row input, .form-row select { width: 100%; }
#fields > fieldset + fieldset { margin-top: 8px; }
#fields legend { font-size: 14px; color: var(--ink); font-weight: 600; }
#fields > details { border: 1px solid var(--line); border-radius: 5px; padding: 13px; margin: 0; }
#fields > details > summary { font-weight: 600; }
#fields > details[open] { display: grid; gap: 12px; }
#fields .pitch-cell { flex: 1; min-width: 90px; max-width: 160px; }
.pitch-cell button { margin-top: 6px; font-size: 11px; }
.trait { display: grid; grid-template-columns: 1fr 80px; gap: 4px 12px; align-items: center; }
.trait input { width: 100%; padding: 0; accent-color: var(--accent); }
.trait output { font-size: 12px; text-align: right; }
.trait p { grid-column: 1 / -1; }
.change-item { border-left: 3px solid #9ab7ca; padding: 8px 12px; font-size: 12px; overflow-wrap: anywhere; }
.part-add-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.part-add-choices > fieldset { min-width: 0; margin: 0; }
.part-add-choices .form-row { align-items: stretch; }
.part-add-choices .form-row > label { flex-basis: 100%; }
.part-add-choices select { max-width: 100%; }
.shared-edit-warning { border-left: 3px solid #aa8538; padding: 12px 16px; background: #f3eddf; }
.shared-edit-warning li { font-size: 12px; margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .part-add-choices { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .form-row > label { min-width: 100px; } .band-summary { grid-template-columns: 1fr; } #advanced-menu { margin-left: 0; } }

@media (max-width: 1150px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 285px; }
  .score { padding: 22px 20px; }
  .topbar { gap: 8px; padding: 12px 18px; }
  .topbar .top-caption { display: none; }
  .topbar .library select { max-width: 220px; }
  .live-transport { gap: 14px; grid-template-columns: auto 1fr auto; padding-left: 18px; padding-right: 18px; }
  .transport-scope { justify-content: center; }
  .master-volume span { display: none; }
  .master-volume input { width: 64px; }
}
@media (max-width: 900px) {
  .topbar .state { display: none; }
  .topbar .library select { max-width: 175px; }
  .part-heading { align-items: flex-start; gap: 8px; padding: 14px; }
  .part-heading .actions { justify-content: flex-end; }
  .part-heading button { font-size: 11px; }
  .track-toolbar { padding-left: 14px; padding-right: 14px; }
  .song-heading h1 { font-size: 24px; }
  .song-heading { gap: 10px; }
}
@media (max-width: 760px) {
  .topbar { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .topbar .wordmark { margin-right: auto; }
  .topbar .library { order: 1; flex: 1 1 calc(100% - 100px); margin-left: 0; }
  .topbar #toggle-chat { order: 1; }
  .topbar .library select { max-width: none; width: 100%; }
  .topbar #new { margin-left: 0; }
  .topbar > button { font-size: 11px; padding: 7px 10px; }
  .workspace { display: block; overflow-y: auto; }
  .score { padding: 20px 14px; overflow: visible; }
  .chat { min-height: 520px; overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
  .chat .messages { max-height: 340px; min-height: 120px; }
  .song-heading { margin-bottom: 12px; }
  .song-heading h1 { font-size: 23px; }
  .song-properties { line-height: 1.5; }
  .song-actions { gap: 0; }
  .song-actions > button { font-size: 11px; padding: 8px; }
  .live-transport { grid-template-columns: 1fr auto; gap: 10px 8px; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
  .transport-main { gap: 12px; }
  .transport-scope { grid-row: 2; grid-column: 1; justify-content: flex-start; gap: 12px; }
  .transport-scope select { max-width: 190px; font-size: 11px; }
  .transport-options-live { grid-column: 2; grid-row: 1 / 3; flex-direction: column; justify-content: center; gap: 4px; }
  .transport-options-live summary { padding: 8px 0; font-size: 11px; }
  .master-volume input { width: 72px; }
  .play-buttons button { min-width: 104px; }
  #playback-status { max-width: 24ch; }
  .part-heading .actions { gap: 4px; }
  .part-heading .actions button { padding: 7px; }
  .section-heading .actions button { font-size: 11px; }
}
@media (pointer: coarse) {
  #workspace button, .disclosure-menu > summary, .live-transport select, .loop-control { min-height: 40px; }
  #workspace .mix-controls button { min-height: 30px; }
}

/* Performer feedback uses the same restrained music-editor surfaces. */
.limb-strain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 14px 0; }
.limb-strain meter { width: 100%; height: 14px; }
.strain-history { height: 44px; display: flex; gap: 2px; align-items: end; border-bottom: 1px solid var(--line); margin: 8px 0; }
.strain-history span { flex: 1; min-width: 1px; background: #9d7151; }
.performance-warning { border-left: 3px solid #a87539; padding-left: 10px; margin-top: 10px; }
.strum-preview { padding: 14px 0 4px; }
.string-contacts { list-style: none; padding: 0; margin: 8px 0; }
.string-contacts li { display: grid; grid-template-columns: 90px minmax(80px, 1fr) 90px; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.contact-time { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 520px) { .limb-strain { grid-template-columns: 1fr; } .string-contacts li { grid-template-columns: 72px minmax(50px, 1fr) 75px; } }
.band-summary > p { grid-column: 1 / -1; }

#proposal-summary { white-space: pre-line; overflow-wrap: anywhere; margin: 12px 0; }
#proposal .actions + .actions { margin-top: 8px; }

/* Let long fill names wrap within the editor instead of widening its grid. */
#fields { grid-template-columns: minmax(0, 1fr); }
#fields > * { min-width: 0; }
#fields select { max-width: 100%; }

.empty-arrangement { padding: 28px; border: 1px dashed var(--line); border-radius: 10px; width: 100%; white-space: normal; }
.empty-arrangement p { margin: 10px 0 18px; color: var(--muted); max-width: 600px; }
#chat-context { min-width: 0; flex: 1; }
#chat-scope { width: 100%; font-size: 12px; }

#new-song-form, #album-form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
#new-song-form > *, #album-form > * { min-width: 0; }
#album-dialog { width: min(820px, calc(100vw - 24px)); }
#album-tracks { display: grid; gap: 12px; }
#album-tracks .album-reference { flex-direction: row-reverse; justify-content: flex-end; align-items: center; font-weight: normal; }
#album-form .actions { align-items: end; }
#album-form .actions > label { flex: 1; min-width: 0; }
#album-form select { width: 100%; min-width: 0; }
#new-song-error { color: #962f27; }

/* Library routes sit above the editor and have no transport or editing chrome. */
#library-view { min-height: 100dvh; background: #f5f6fa; }
.library-topbar { min-height: 76px; padding: 16px max(24px, calc((100vw - 1200px) / 2)); display: flex; align-items: center; gap: 20px; background: white; border-bottom: 1px solid var(--line); }
.library-topbar .wordmark { font-size: 34px; }
.library-topbar .top-caption { color: var(--muted); font-size: 13px; }
.library-topbar nav { display: flex; gap: 8px; margin-left: auto; }
.library-topbar nav a { padding: 10px 16px; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.library-topbar nav a[aria-current=page] { color: #5547b3; background: #eeebfb; }
#library-content { max-width: 1200px; padding: 54px 24px 80px; margin: auto; outline: none; }
.library-heading { display: flex; justify-content: space-between; gap: 32px; align-items: center; margin-bottom: 36px; }
.library-heading h1 { font-size: 38px; margin: 10px 0 14px; overflow-wrap: anywhere; }
.library-intro { max-width: 600px; color: var(--muted); font-size: 15px; }
.eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: #65588d; }
.library-heading .actions { flex-shrink: 0; flex-direction: column; align-items: stretch; }
#library-view button { border-radius: 7px; }
#library-view .primary { background: var(--accent); color: white; border-color: var(--accent); }
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.album-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); background: white; }
.album-card:hover { border-color: #8e82b7; box-shadow: 0 6px 22px #29213b12; }
.album-cover { position: relative; min-height: 250px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; color: #f8f6ee; background: #343549; overflow: hidden; }
.album-cover::after { content: ''; position: absolute; width: 250px; height: 250px; border: 1px solid #ffffff15; border-radius: 50%; top: -55px; right: -65px; box-shadow: 0 0 0 22px #ffffff05, 0 0 0 44px #ffffff04; pointer-events: none; }
.album-cover[data-tone='1'] { background: #3e514e; }.album-cover[data-tone='2'] { background: #604b4d; }.album-cover[data-tone='3'] { background: #4d4d64; }
.album-cover > span { font-size: 11px; letter-spacing: .16em; }
.album-cover .record-number { font: 58px/1 Georgia, serif; font-style: italic; opacity: .45; margin: 12px 0; }
.album-cover h2 { font-size: 24px; letter-spacing: -.5px; line-height: 1.25; position: relative; z-index: 1; overflow-wrap: anywhere; }
.album-card-detail { padding: 22px; }.album-card-detail p { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 18px; }
.album-card-detail span { font-size: 12px; font-weight: 600; }
.library-empty { padding: 38px; background: white; border: 1px dashed #c6c4d4; border-radius: 12px; color: var(--muted); }
.album-grid > .library-empty { grid-column: 1 / -1; }.library-empty .record-number { font: italic 48px Georgia, serif; color: #a29bac; }.library-empty h2 { font-size: 24px; color: var(--ink); margin: 16px 0 8px; }.library-empty button { margin-top: 22px; }
.library-footer { display: flex; gap: 12px; margin-top: 38px; font-size: 14px; color: var(--muted); }.library-footer a, .library-back, .song-memberships a { color: #5547b3; }
.library-back { display: inline-block; margin-bottom: 28px; text-decoration: none; font-size: 13px; }
.library-filters { display: flex; gap: 12px; margin-bottom: 24px; }.library-filters input { flex: 1; }.library-filters select { max-width: 230px; }
.song-list { display: grid; gap: 10px; }.song-row { display: flex; gap: 22px; align-items: center; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.song-row-info { flex: 1; min-width: 0; }.song-link { display: inline-block; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; margin-bottom: 5px; overflow-wrap: anywhere; }.song-link:hover { color: #5547b3; }
.open-song-link { color: #5547b3; text-decoration: none; font-size: 13px; font-weight: 600; flex-shrink: 0; }.track-number { color: #8a829d; font: italic 24px Georgia, serif; }.track-direction { margin-top: 8px; color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.song-memberships { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; }
#library-progress { max-width: 1152px; margin: 20px auto 0; padding: 14px 20px; border-radius: 8px; background: #eeebfb; font-size: 14px; }#library-progress { display: flex; gap: 16px; }#library-progress a { color: #5547b3; }
@media(max-width: 980px) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.library-heading { align-items: flex-start; }.library-heading h1 { font-size: 32px; } }
@media(max-width: 600px) { .library-topbar { padding: 14px 18px; gap: 12px; }.library-topbar .top-caption { display: none; }.library-topbar nav { gap: 0; }.library-topbar nav a { padding: 9px 10px; font-size: 12px; }#library-content { padding: 30px 18px 50px; }.library-heading { flex-direction: column; gap: 22px; }.library-heading .actions { width: 100%; }.album-grid { grid-template-columns: 1fr; }.album-cover { min-height: 240px; }.library-empty { padding: 26px; }.library-footer { flex-direction: column; }.song-row { padding: 18px; gap: 12px; flex-wrap: wrap; }.song-row-info { min-width: 180px; }.open-song-link { margin-left: auto; }.library-filters { flex-wrap: wrap; }.library-filters select { max-width: none; } }

.album-reference { flex-direction: row; align-items: center; gap: 8px; font-weight: normal; }
#album-lineup-dialog { width: min(980px, calc(100vw - 24px)); }
#album-lineup-form, #add-album-track-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#album-lineup-fields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#album-lineup-fields > *, #album-lineup-form > *, #add-album-track-form > * { min-width: 0; }
#album-lineup-fields select { max-width: 100%; }
#album-lineup-error, #add-album-track-error { color: #962f27; }
/* The album's music is the primary workspace; its brief and band stay in reach. */
.album-page-heading { margin-bottom: 30px; align-items: flex-end; }
.album-page-heading.library-heading .actions { flex-direction: row; align-items: center; }
.album-page-heading h1 { margin-bottom: 8px; }
.album-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.album-workspace > *, .album-sidebar > * { min-width: 0; }
.album-tracklist > .section-heading { min-height: 40px; margin-bottom: 18px; }
.album-tracklist h2, .album-sidebar h2 { font-size: 16px; font-weight: 600; }
.album-sidebar { display: grid; gap: 20px; }
.album-direction, .album-band-panel { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.album-direction { background: #eeebf5; border-color: transparent; }
.album-brief-excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.65; color: #55516b; margin: 14px 0; }
#library-view .album-direction > button { border: 0; background: transparent; color: #5547b3; padding: 4px 0; text-align: left; font-size: 12px; }
.album-band-panel > p { margin-top: 8px; }
.album-player-list { list-style: none; padding: 0; margin: 18px 0 0; }
.album-player-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #eeeef3; }
.album-player-list li:first-child { padding-top: 0; }
.album-player-list li > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.album-player-list strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.album-player-list span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.album-player-list .player-style { font-size: 10px; text-transform: capitalize; padding: 3px 7px; background: #f3f1f9; border-radius: 4px; }
.album-onboarding { display: grid; gap: 14px; justify-items: start; margin-top: 14px; }
.album-onboarding p { font-size: 13px; line-height: 1.65; color: #55516b; }
.album-first-track { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; text-align: center; padding: 40px 28px; background: white; border: 1px dashed #c6c4d4; border-radius: 12px; }
.first-track-number { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #e5e0ef; border-radius: 50%; font: italic 30px Georgia, serif; color: #8a829d; margin-bottom: 24px; background: #faf9fd; }
.album-first-track h3 { font-size: 20px; font-weight: 600; margin: 0; }
.album-first-track p { max-width: 330px; font-size: 14px; color: var(--muted); line-height: 1.65; margin: 12px 0 24px; }
.album-tracklist .song-row { gap: 18px; padding: 20px; }
.album-tracklist .song-row-info { min-width: 0; }
.album-tracklist .track-direction { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.album-brief-dialog { width: min(760px, calc(100vw - 32px)); }
.album-brief-reading { white-space: pre-wrap; overflow-wrap: anywhere; color: #55516b; line-height: 1.8; margin: 24px 0; }
@media (max-width: 980px) {
  .album-workspace { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
  .album-page-heading.library-heading .actions { flex-direction: column; align-items: stretch; }
  .album-tracklist .song-row { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .album-workspace { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .album-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .album-page-heading { align-items: flex-start; }
}
@media (max-width: 600px) {
  .album-page-heading.library-heading .actions { flex-direction: row; flex-wrap: wrap; }
  .album-page-heading.library-heading .actions > .primary { flex: 1; }
  .album-sidebar { grid-template-columns: minmax(0, 1fr); }
  .album-first-track { min-height: 290px; padding: 28px 20px; }
  .album-first-track h3 { font-size: 19px; }
  .album-tracklist .song-row { gap: 12px; padding: 18px; }
}

.album-band-panel > .section-heading { margin-bottom: 0; align-items: center; }

/* A single editor shell: fixed header and tabs, scrolling content, fixed save bar. */
#album-lineup-dialog { padding: 0; overflow: hidden; background: white; }
#album-lineup-form { display: flex; flex-direction: column; gap: 0; height: min(860px, 90dvh); min-height: 0; }
.lineup-header { flex-shrink: 0; padding: 22px 24px 0; background: #fff; }
.lineup-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.lineup-heading-row > div { min-width: 0; }
.lineup-album-name { color: var(--muted); font-size: 12px; margin-bottom: 5px; overflow-wrap: anywhere; }
#album-lineup-heading { font-size: 22px; letter-spacing: -.4px; }
#close-album-lineup { flex-shrink: 0; font-size: 12px; }
.lineup-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 0; border-top: 1px solid #eeeef3; }
.lineup-default { display: flex; flex-direction: row; align-items: center; gap: 9px; font-size: 12px; font-weight: 500; cursor: pointer; }
.lineup-default input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 32px; height: 19px; margin: 0; padding: 2px; border: 1px solid #b4b3c1; border-radius: 20px; background: #c2c1cd; cursor: pointer; }
.lineup-default input::before { content: ''; display: block; height: 13px; width: 13px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #25263830; }
.lineup-default input:checked { background: var(--accent); border-color: var(--accent); }
.lineup-default input:checked::before { transform: translateX(13px); }
#toggle-album-band-import { display: flex; align-items: center; gap: 10px; font-size: 12px; background: white; }
#toggle-album-band-import[aria-expanded=true] { color: #514399; background: #f3f0fc; }
#album-band-import-panel { display: flex; align-items: end; gap: 12px; padding: 14px; background: #f5f3fa; border: 1px solid #e6e1f2; border-radius: 7px; margin-bottom: 16px; }
#album-band-import-panel label { min-width: 0; flex: 1; font-size: 12px; }
#album-band-import-panel button { font-size: 12px; flex-shrink: 0; }
#album-band-import-source { width: 100%; font-size: 12px; background: white; }
.lineup-tabs { display: flex; flex-shrink: 0; gap: 8px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); }
.lineup-tabs [role=tab] { position: relative; display: grid; gap: 4px; min-width: 190px; text-align: left; padding: 14px 16px 16px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--muted); }
.lineup-tabs [role=tab][aria-selected=true] { background: #f5f3fc; color: #514399; }
.lineup-tabs [role=tab][aria-selected=true]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--accent); }
.lineup-tabs [role=tab]:hover { background: #f8f7fc; }
.lineup-tabs [role=tab]:focus-visible { outline-offset: -3px; }
.lineup-tab-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.lineup-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px; background: #e8e4f4; color: #65588d; font-size: 11px; }
.lineup-tab-description { font-size: 11px; font-weight: 400; line-height: 1.4; }
#album-lineup-panel { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: #fafafe; }
#album-lineup-fields { padding: 22px 24px; gap: 18px; }
#album-lineup-fields .setup-browser { gap: 22px; }
#album-lineup-fields .setup-detail { padding: 18px; background: white; border: 1px solid var(--line); border-radius: 8px; }
#album-lineup-fields .setup-detail > fieldset { padding: 0; border: 0; }
#album-lineup-fields .setup-detail > fieldset > legend { display: none; }
#album-lineup-fields .setup-roster button { background: transparent; }
#album-lineup-fields .setup-roster button[aria-pressed=true] { background: #eeebfb; border-color: #c8c0ed; }
#album-lineup-disabled { color: var(--muted); padding: 28px; font-size: 14px; }
.lineup-save-bar { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--line); background: white; }
.lineup-save-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#album-lineup-help { font-size: 12px; color: var(--muted); }
#save-album-lineup { min-width: 180px; flex-shrink: 0; font-size: 13px; }
.lineup-save-bar p:empty { display: none; }
#album-lineup-error:not(:empty) { margin-bottom: 10px; font-size: 12px; }
@media (max-width: 600px) {
  .lineup-header { padding: 18px 16px 0; }
  #album-lineup-heading { font-size: 19px; }
  .lineup-toolbar { gap: 8px; margin-top: 16px; padding: 12px 0; flex-wrap: wrap; }
  .lineup-default { font-size: 11px; }
  #toggle-album-band-import { font-size: 11px; padding: 8px; }
  #album-band-import-panel { flex-wrap: wrap; }
  #album-band-import-panel label { flex-basis: 100%; }
  .lineup-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; gap: 4px; }
  .lineup-tabs [role=tab] { min-width: 0; padding: 12px 10px; }
  .lineup-tab-title { font-size: 13px; gap: 6px; }
  .lineup-tab-description { font-size: 10px; }
  #album-lineup-fields { padding: 16px; }
  #album-lineup-fields .setup-browser { gap: 16px; }
  #album-lineup-fields .setup-roster { display: flex; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  #album-lineup-fields .setup-roster button { flex: 0 0 136px; scroll-snap-align: start; padding: 10px; }
  #album-lineup-fields .setup-detail { padding: 12px; }
  .lineup-save-bar { padding: 12px 16px; }
  .lineup-save-actions { flex-wrap: wrap; gap: 8px; }
  #album-lineup-help { font-size: 11px; }
  #save-album-lineup { width: 100%; }
}
.album-setup-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 8px; }
#library-view .album-setup-links button { display: grid; gap: 5px; position: relative; padding: 10px 20px 10px 0; border: 0; border-radius: 0; background: transparent; text-align: left; min-width: 0; }
#library-view .album-setup-links button + button { border-left: 1px solid var(--line); padding-left: 14px; }
.album-setup-links button::after { content: '›'; position: absolute; right: 8px; top: 10px; color: var(--accent); }
.album-setup-links strong { font-size: 13px; font-weight: 600; }
#library-view .album-setup-links button:hover { color: var(--accent); background: #f6f4fc; }

.track-order-status { color: var(--muted); font-size: 12px; margin: -6px 0 16px; }
.track-order-status:empty { display: none; }
.track-order-status.error { color: #962f27; }
.album-tracklist .actions [aria-pressed=true] { color: #514399; background: #eeebfb; border-color: #c8c0ed; }
.album-tracklist .is-reordering .song-row { position: relative; gap: 12px; padding-left: 12px; }
.is-reordering .open-song-link { display: none; }
#library-view .track-drag-handle { border: 0; background: transparent; color: #858098; cursor: grab; font-size: 25px; padding: 4px; width: 32px; flex-shrink: 0; touch-action: auto; }
#library-view .track-drag-handle:active { cursor: grabbing; }
.track-order-buttons { display: flex; gap: 4px; margin-left: auto; }
#library-view .track-order-buttons button { min-width: 36px; min-height: 36px; padding: 6px 10px; font-size: 16px; }
.is-reordering .song-row.is-dragging { opacity: .5; }
.is-reordering .song-row.drop-before::before, .is-reordering .song-row.drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: var(--accent); border-radius: 3px; pointer-events: none; }
.is-reordering .song-row.drop-before::before { top: -7px; }
.is-reordering .song-row.drop-after::after { bottom: -7px; }
@media (max-width: 600px) {
  .album-tracklist > .section-heading { flex-wrap: wrap; gap: 12px; }
  .album-tracklist .is-reordering .song-row { display: grid; grid-template-columns: 24px 24px minmax(0, 1fr); gap: 8px; }
  #library-view .track-drag-handle { width: 24px; }
  .track-order-buttons { grid-column: 3; }
  #library-view .track-order-buttons button { min-width: 44px; min-height: 40px; }
}

.track-row-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
#library-view .track-rename { padding: 6px 8px; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border-color: transparent; }
#library-view .track-rename:hover { color: var(--accent); background: #eeebfb; }
.is-reordering .track-row-actions { display: none; }
#rename-track-dialog { width: min(460px, calc(100vw - 24px)); }
#rename-track-form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
#rename-track-form .section-heading { margin: 0; }
#rename-track-error { color: #962f27; font-size: 13px; overflow-wrap: anywhere; }
#rename-track-error:empty { display: none; }
@media (max-width: 600px) { .track-row-actions { flex-basis: 100%; justify-content: flex-end; }.track-row-actions .open-song-link { margin-left: 0; } }

.album-direction > .section-heading { margin-bottom: 0; align-items: center; }
#library-view .album-direction .section-heading button { padding: 6px 9px; font-size: 12px; background: transparent; border-color: #d9d3e8; color: #5547b3; }
#album-brief-editor-dialog { width: min(760px, calc(100vw - 24px)); padding: 0; overflow: hidden; background: white; }
#album-brief-editor-form { display: flex; flex-direction: column; height: min(680px, 90dvh); }
.album-brief-editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); }
.album-brief-editor-header > div { min-width: 0; overflow-wrap: anywhere; }
.album-brief-editor-header h2 { margin-top: 5px; font-size: 21px; }
#close-album-brief-editor { flex-shrink: 0; font-size: 12px; }
.album-brief-editor-body { padding: 20px 24px; flex: 1; min-height: 0; gap: 10px; }
#album-brief-text { flex: 1; min-height: 0; resize: none; background: #fafafe; font-size: 14px; font-weight: 400; line-height: 1.8; }
.album-brief-editor-footer { padding: 16px 24px; border-top: 1px solid var(--line); }
.album-brief-editor-footer > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#save-album-brief { min-width: 130px; flex-shrink: 0; font-size: 13px; }
#album-brief-editor-error { font-size: 12px; color: #962f27; margin-bottom: 10px; overflow-wrap: anywhere; }
#album-brief-editor-error:empty { display: none; }
@media (max-width: 600px) {
  .album-brief-editor-header { padding: 18px; }
  .album-brief-editor-body { padding: 16px 18px; }
  .album-brief-editor-footer { padding: 14px 18px; }
  .album-brief-editor-footer > div { flex-wrap: wrap; gap: 10px; }
  #save-album-brief { width: 100%; }
}

/* One transcript: commentary and tools share chronological order and a single scroll. */
.activity-flow { margin: 12px 0; padding-left: 8px; white-space: normal; }
.activity-timeline { list-style: none; padding: 0; margin: 0; }
.activity-event { position: relative; margin: 0; padding: 0 0 14px 21px; border-left: 1px solid #e5e1f1; }
.activity-event:last-child { padding-bottom: 0; border-left-color: transparent; }
.activity-commentary::before { content: ''; position: absolute; width: 5px; height: 5px; left: -3px; top: 8px; border-radius: 50%; background: #9e94cf; }
.activity-commentary-text, .agent-response { line-height: 1.65; overflow-wrap: anywhere; white-space: normal; }
.activity-commentary-text p + p, .agent-response p + p { margin-top: 10px; }
.activity-flow code, .agent-response code { font-size: .92em; background: #f2f0f8; padding: 1px 4px; border-radius: 3px; }
.activity-action details { margin: 0; }
.activity-action summary { position: relative; list-style: none; display: flex; gap: 8px; align-items: baseline; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.activity-action summary::-webkit-details-marker { display: none; }
.activity-action summary::after { content: '›'; margin-left: auto; color: #8e899e; }
.activity-action details[open] summary::after { transform: rotate(90deg); }
.activity-action-icon { position: absolute; left: -28px; width: 14px; text-align: center; background: #fff; color: #657d6c; }
.activity-action[data-status=running] summary { color: var(--accent); }
.activity-action[data-status=running] .activity-action-icon { color: var(--accent); }
.activity-action[data-status=error] summary, .activity-action[data-status=error] .activity-action-icon { color: #a24a3b; }
.activity-action-detail { margin-top: 7px; padding: 9px 11px; background: #f7f6fb; border-radius: 6px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-action-detail p + p { margin-top: 8px; }
.activity-legacy-note { color: var(--muted); font-size: 11px; margin-bottom: 14px; }
.agent-response { margin-top: 14px; }
.agent-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: white; position: sticky; top: 0; z-index: 2; padding: 4px 0; }
.agent-phase { min-width: 0; font-size: 12px; }
.proposal-listening { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; font-size: 12px; }
.proposal-listening select { max-width: 100%; min-width: 0; font-size: 12px; }
.app-loading { padding: 32px; color: var(--muted); }
.app-error { position: fixed; bottom: 110px; right: 16px; width: min(390px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px; z-index: 110; max-height: calc(100dvh - 150px); overflow-y: auto; background: #fff; border: 1px solid #d5b4af; border-radius: 10px; box-shadow: 0 5px 25px #202c3526; font-size: 13px; }
.app-error details { margin: 10px 0; font-size: 12px; overflow-wrap: anywhere; }
.agent-clock { margin-right: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.agent-clock::before { content: '·'; margin-right: 10px; }
.agent-activity-heading button { flex-shrink: 0; font-size: 11px; padding: 6px 8px; }
@media (min-width: 1060px) { .workspace:not(.assistant-closed) { grid-template-columns: minmax(0, 1fr) 410px; } }
@media (min-width: 1500px) { .workspace:not(.assistant-closed) { grid-template-columns: minmax(0, 1fr) 450px; } }

.working-draft { padding: 12px; margin: 10px 0; border: 1px solid var(--line, #d5d1e6); border-radius: 8px; background: #f4f2fb; max-height: 320px; overflow: auto; }
.working-draft .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.working-draft pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 130px; overflow: auto; }

.chat { overflow: hidden; }
.assistant-thread { flex: 1; min-height: 180px; overflow-y: auto; scrollbar-gutter: stable; }
.chat .messages { flex: none; overflow: visible; min-height: 0; max-height: none; }
.assistant-thread .working-draft { max-height: none; overflow: visible; margin-top: 20px; }
.assistant-thread .working-draft pre { max-height: none; overflow: visible; }
.assistant-thread #proposal { margin-top: 20px; }
@media (max-width: 760px) {
  .chat { overflow: visible; }
  .assistant-thread { overflow: visible; min-height: 0; }
}

.chat-heading > div:nth-child(2) { min-width: 0; flex: 1; }
#new-chat { flex-shrink: 0; padding: 6px 9px; font-size: 11px; }
.chat-context-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-context-row #assistant-album { flex: 1; min-width: 100px; }
#previous-chats { max-width: 190px; padding: 5px 7px; font-size: 11px; background: #f8f7fc; }

.album-runtime { margin-top: 10px; font-size: 14px; color: var(--ink); }
.album-playback-note { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.album-listening { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; margin: -10px 0 24px; background: #eeebfb; border: 1px solid #d9d2f0; border-radius: 10px; }
.album-listening > div:first-child { min-width: 0; }
.album-listening strong, .album-playback-errors { overflow-wrap: anywhere; }
.album-playback-errors { font-size: 12px; color: #9b4035; }
.track-runtime { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.album-tracklist .song-row.is-album-playing { border-color: var(--accent); background: #f5f2ff; }
.album-tracklist .song-row.is-album-playing .track-number { color: var(--accent); font-weight: 700; }
@media (max-width: 760px) { .album-listening { align-items: flex-start; flex-direction: column; } }

.song-lineup-choice { padding: 16px; margin: 16px 0; background: var(--lavender, #efedf9); border: 1px solid #d8d0f5; border-radius: 8px; }
#fields.inherited-setup .setup-detail { opacity: .8; }

#proposal-merge-dialog { width: min(960px, calc(100vw - 32px)); }
.merge-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#proposal-merge-conflicts pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; padding: 10px; background: #f5f4fa; }
#proposal-merge-error { color: #9b4035; }
@media (max-width: 600px) { .merge-versions { grid-template-columns: 1fr; } }

#timeline { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0; scrollbar-width: auto; scroll-snap-type: x proximity; padding-bottom: 14px; }
#workspace #timeline .section-block { flex: 0 0 170px; scroll-snap-align: start; }
#timeline::-webkit-scrollbar { height: 10px; }
#timeline::-webkit-scrollbar-thumb { background: #b6afd7; border: 2px solid #f5f4fa; border-radius: 8px; }
#timeline::-webkit-scrollbar-track { background: #f5f4fa; }
.section-seek { border: 0; background: transparent; padding: 0; text-align: left; font-size: inherit !important; }
.part-heading { flex-wrap: wrap; }
@media (max-width: 600px) { .arrangement-panel > .section-heading { flex-wrap: wrap; } .part-heading .actions { width: 100%; } }

.parts-panel button.phrase.rest { border: 1px dashed #c6bfdc; border-radius: 4px; }
.parts-panel button.phrase.rest:hover { background: #f0edfb; color: #5649ad; }

/* Album discussion has room for a continuous conversation and score-reading activity. */
.album-page-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin: 24px 0; padding-bottom: 10px; }
.album-page-tabs button { border-color: transparent; background: transparent; }
.album-page-tabs button[aria-pressed=true] { background: #eae6f8; color: #5142ab; }
.album-workspace[hidden] { display: none; }
.album-conversation { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.album-chat-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 28px 12px; }
.album-chat-heading select { max-width: 260px; font-size: 12px; }
.album-chat-context { padding: 0 28px 20px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.album-chat-log { max-height: 62vh; min-height: 240px; overflow-y: auto; padding: 24px 28px; overflow-wrap: anywhere; scrollbar-gutter: stable; }
.album-chat-welcome { max-width: 700px; margin: 0 auto; display: grid; gap: 12px; padding: 18px 0; }
.album-chat-welcome[hidden] { display: none; }
.album-chat-welcome button { text-align: left; font-weight: 400; line-height: 1.6; }
.album-chat-turn + .album-chat-turn { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.album-chat-user { background: #f0edf9; border-radius: 8px; padding: 16px 20px; margin-bottom: 22px; white-space: pre-wrap; }
.album-chat-user strong { font-size: 12px; }
.album-chat-user p { margin-top: 6px; }
.album-chat-activity { margin: 12px 0; }
.album-chat-activity .activity-flow { border: 0; padding: 0; max-height: none; overflow: visible; }
.album-chat-activity .activity-action-detail { max-height: none; overflow: visible; }
.album-chat-reply { line-height: 1.75; }
.album-chat-reply p + p { margin-top: 14px; }
.album-chat-composer { border-top: 1px solid var(--line); padding: 20px 28px; background: #faf9fd; }
.album-chat-composer .section-heading { margin: 12px 0 0; }
.album-chat-error { color: #922f2f; font-size: 13px; white-space: pre-wrap; }
.album-chat-error:empty { display: none; }
.album-proposal, .album-song-task { margin-top: 20px; padding: 20px; border: 1px solid #cbc4e5; border-radius: 8px; background: #faf8ff; }
.album-proposal h3, .album-song-task h3 { margin: 0 0 8px; font-size: 16px; }
.album-proposal > button + button { margin-left: 8px; }
.album-proposal-text { white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; margin: 10px 0; }
.album-text-change { margin: 18px 0; }
.album-song-task > p:last-child { margin-top: 10px; }
@media (max-width: 600px) {
  .album-chat-heading { padding: 18px 16px 12px; }
  .album-chat-context { padding: 0 16px 16px; }
  .album-chat-log { padding: 16px; max-height: 60vh; }
  .album-chat-composer { padding: 16px; }
  .album-chat-composer .section-heading { flex-wrap: wrap; }
  .album-chat-heading .actions { width: 100%; }
  .album-chat-heading select { flex: 1; min-width: 0; max-width: 100%; }
  .album-proposal, .album-song-task { padding: 14px; }
  .album-proposal > button { margin: 5px 0 !important; }
}

/* Album identity and its two common actions occupy one compact header. */
#library-content.album-page { padding-top: 22px; }
.album-page > .library-back { margin-bottom: 14px; }
.album-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.album-identity { min-width: 0; }
.album-title-row { display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.album-title-row h1 { font-size: 34px; margin: 0; overflow-wrap: anywhere; }
.album-edit-details { font-size: 11px; font-weight: 500; padding: 5px 0; }
.album-metadata { margin-top: 7px; font-size: 13px; color: var(--muted); }
.album-header > .actions { flex-shrink: 0; align-items: center; }
.album-header .actions > button { font-size: 12px; }
.album-add-song { display: inline-flex; align-items: stretch; }
#library-view .album-add-song > button { border-radius: 7px 0 0 7px; font-size: 12px; }
.album-add-options { position: relative; margin: 0; }
.album-add-options > summary { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; height: 100%; width: 32px; background: var(--accent); color: white; border: 1px solid var(--accent); border-left-color: #ffffff55; border-radius: 0 7px 7px 0; }
.album-add-options > summary::-webkit-details-marker { display: none; }
.album-add-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 15; padding: 5px; min-width: 185px; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px #202c3518; }
.album-add-menu button { width: 100%; text-align: left; border: 0; font-size: 12px; }
.album-page > .album-page-tabs { margin: 18px 0; padding-bottom: 8px; }
.album-page .album-workspace { gap: 24px; }
.album-page .album-sidebar > details { margin: 0; }
#album-details-dialog { width: min(460px, calc(100vw - 24px)); }
#album-details-form { display: grid; gap: 16px; }
#album-details-form > .section-heading { margin-bottom: 0; }
#album-details-error { color: #962f27; }
#album-details-error:empty { display: none; }
@media (max-width: 760px) {
  .album-header { flex-wrap: wrap; gap: 14px; }
  .album-title-row h1 { font-size: 29px; }
  .album-header > .actions { width: 100%; }
  #library-content.album-page { padding-top: 18px; }
}
#album-tracklist-section { display: grid; gap: 12px; }
#library-view .album-edit-details { border: 0; background: transparent; color: var(--muted); font-size: 22px; padding: 3px 7px; line-height: 1; }
#library-view .album-edit-details:hover { color: var(--accent); background: #eeebfb; }

#album-export-dialog { width: min(560px, calc(100vw - 32px)); }
#album-export-dialog .section-heading { align-items: flex-start; gap: 16px; }
#album-export-dialog h2 { overflow-wrap: anywhere; }
#album-export-drafts:empty, #album-export-error:empty, #album-export-status:empty { display: none; }
#album-export-drafts { padding: 12px; background: #fff3d6; border-radius: 6px; color: #674b18; }
#album-export-output { display: grid; gap: 16px; margin-top: 20px; }
#album-export-output audio { width: 100%; }
#album-export-output a { overflow-wrap: anywhere; display: block; padding: 10px 14px; border-radius: 5px; background: var(--accent); color: white; text-align: center; font-weight: 600; text-decoration: none; }
#album-export-error, #album-export-status.export-error { color: #a52d25; white-space: pre-wrap; }

#album-export-form { display: grid; gap: 14px; }
#album-export-form .section-heading, #album-export-form p { margin: 0; }
#album-export-output:empty { display: none; }
#album-export-output { margin-top: 4px; }

/* Tables stay inside the conversation; wide scores can be scrolled independently. */
.agent-prose { min-width: 0; max-width: 100%; }
.agent-prose p { white-space: normal; }
.agent-table-scroll { max-width: 100%; overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 6px; }
.agent-table-scroll table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5; white-space: normal; }
.agent-table-scroll th, .agent-table-scroll td { padding: 8px 10px; min-width: 65px; border-bottom: 1px solid var(--line); vertical-align: top; }
.agent-table-scroll th { background: #efedf8; font-weight: 700; }
.agent-table-scroll td:first-child { min-width: 140px; }
.agent-table-scroll tr:last-child td { border-bottom: 0; }
.agent-table-scroll .align-left { text-align: left; }
.agent-table-scroll .align-center { text-align: center; }
.agent-table-scroll .align-right { text-align: right; }
.agent-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-prose pre { max-width: 100%; overflow-x: auto; padding: 10px; background: #f3f2f8; border-radius: 5px; white-space: pre; }

.agent-prose :is(h2,h3,h4,h5,h6) { margin: 1.4em 0 .65em; line-height: 1.4; font-weight: 750; }
.agent-prose h2 { font-size: 1.25em; }
.agent-prose h3 { font-size: 1.15em; }
.agent-prose :is(h4,h5,h6) { font-size: 1em; }
.agent-prose > :first-child { margin-top: 0; }
.agent-prose > :last-child { margin-bottom: 0; }
.agent-prose :is(ul,ol) { padding-left: 1.6em; margin: .8em 0; }
.agent-prose li { margin: .45em 0; padding-left: .15em; }
.agent-prose li :is(ul,ol) { margin: .35em 0; }
.agent-prose li > p { margin: .35em 0; }
.agent-prose li input[type=checkbox] { width: auto; margin: 0 .3em 0 0; vertical-align: middle; }
.agent-prose blockquote { margin: 1em 0; padding: .2em 0 .2em 1em; border-left: 3px solid #b7aedc; color: var(--muted); }
.agent-prose blockquote > :first-child { margin-top: 0; }
.agent-prose blockquote > :last-child { margin-bottom: 0; }
.agent-prose hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--line); }
.agent-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.agent-prose code { font-size: .92em; background: #f2f0f8; padding: 1px 4px; border-radius: 3px; overflow-wrap: anywhere; }
.agent-prose pre code { padding: 0; background: transparent; overflow-wrap: normal; }

.agent-prose li.agent-task { list-style: none; }

#chat-form textarea, .album-chat-composer textarea { display: block; width: 100%; min-height: 38px; max-height: 118px; padding: 8px 10px; margin: 0; line-height: 20px; font-size: 13px; resize: none; overflow-y: hidden; }
#chat-form .chat-composer-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
#chat-form #chat-context { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; flex: 1; }
#chat-context > span { flex: none; font-size: 12px; color: var(--muted); }
#chat-form #chat-scope { width: 0; min-width: 0; flex: 1; height: 36px; margin: 0; font-size: 12px; }
#chat-form #send { flex: none; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; line-height: 1; }

.reaper-settings { margin: 16px 0; display: grid; gap: 14px; }
.reaper-track-mapping { display: grid; gap: 10px; }
.reaper-track-mapping select { width: 100%; }
.reaper-template-items { flex-direction: row; align-items: flex-start; font-weight: 400; }
.reaper-template-items input { flex: none; margin-top: 4px; }
.reaper-offsets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reaper-offsets input { width: 100%; min-width: 0; }
@media (max-width: 480px) { .reaper-offsets { grid-template-columns: 1fr; } }

/* Separate compositions within one album track. */
#song-version-select { margin-top: 10px; max-width: 100%; }
.song-version-panel { padding: 14px 16px; margin: 0 0 18px; border: 1px solid #c8d3d6; border-radius: 8px; background: #f2f6f5; }
.song-version-panel > p:first-child { font-weight: 600; margin-top: 0; }
.song-version-panel .actions + .actions { margin-top: 10px; }
#new-version-dialog { width: min(700px, calc(100vw - 24px)); }
#new-version-direction { padding: 12px 0; }
#new-version-direction summary { cursor: pointer; font-weight: 600; }
#new-version-references { display: grid; gap: 8px; }
.version-reference { display: flex; align-items: center; gap: 8px; }
.version-reference input { width: auto; }
.track-version-menu { position: relative; }
.track-version-menu summary { cursor: pointer; list-style: none; padding: 8px; }
.track-version-menu .album-add-menu { right: 0; }

/* Confirmations float; actionable failures stay with their controls. */
.toast { position: fixed; z-index: 100; left: 16px; bottom: var(--toast-bottom, 16px); display: flex; align-items: center; gap: 12px; max-width: min(440px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid #d5d2e5; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 5px 24px #202c3526; }
.toast p { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.toast button { flex-shrink: 0; font-size: 12px; }
#toast-close { background: transparent; border: 0; padding: 5px 8px; font-size: 20px; color: var(--muted); }
.inline-error { color: #772e22; background: #fff1ee; border: 1px solid #e1bdb5; border-radius: 7px; padding: 12px; margin-bottom: 12px; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.inline-error button { margin-top: 8px; margin-right: 6px; font-size: 12px; }
.library-error { max-width: 1152px; margin: 16px auto; }
.save-controls { position: relative; display: flex; align-items: center; gap: 8px; }
.topbar #draft-sync-state:not(:empty) { display: inline-block; max-width: 110px; white-space: normal; font-size: 10px; }
.library-topbar { flex-wrap: wrap; }
.save-error { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 28px)); max-height: min(50dvh, 360px); overflow-y: auto; box-shadow: 0 4px 18px #202c3520; }
.host-connection { font-size: 11px; color: #772e22; background: #fff1ee; border-color: #e1bdb5; }
@media (max-width: 760px) {
  .save-controls .state { display: inline; font-size: 10px; padding: 0; }
  .save-error { position: fixed; top: 132px; left: 14px; right: 14px; width: auto; }
  .toast { left: 12px; max-width: calc(100vw - 24px); gap: 8px; }
  #toast-close { min-width: 40px; min-height: 40px; }
}

.app-error:not([hidden]) ~ #toast { visibility: hidden; }

/* App navigation and song actions have separate, stable homes. */
.ui-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
#workspace .topbar { min-height: 58px; padding: 10px 28px; gap: 22px; flex-wrap: nowrap; }
#workspace .topbar .wordmark { margin: 0; font-size: 29px; }
.workspace-location { display: flex; align-items: center; gap: 16px; min-width: 0; }
.location-divider { color: #c3c3d0; font-size: 22px; font-weight: 300; }
#workspace #editor-back { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; font-weight: 500; }
#editor-back-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.account-slot { border-left: 1px solid var(--line); padding-left: 12px; }
.account-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; background: transparent; border-color: transparent; color: var(--muted); border-radius: 50%; }
#workspace-library > summary { display: flex; align-items: center; gap: 8px; padding: 8px; }
#workspace-library > summary::after { content: none; }
#workspace-library > summary .ui-icon:last-child { width: 14px; }
#workspace-library .menu-panel { width: 280px; }
#workspace-library .menu-panel button, #workspace-library .menu-panel a { display: flex; align-items: center; gap: 10px; padding: 11px 10px; color: var(--ink); text-decoration: none; font-size: 13px; border-radius: 5px; }
#workspace-library .menu-panel a:hover { background: #eeebfb; }
.song-switcher { margin: 6px 4px 3px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); gap: 8px; }
.song-switcher select { width: 100%; font-size: 12px; font-weight: 500; }
#workspace .editor-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 24px; padding: 10px 28px; margin: 0; border-bottom: 1px solid var(--line); background: #fff; }
.editor-toolbar .song-identity { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.editor-toolbar h1 { font-size: 24px; letter-spacing: -.6px; }
.editor-toolbar #song-version-select { max-width: 230px; margin: 0; font-size: 12px; min-height: 34px; }
.editor-toolbar .song-actions { margin-left: auto; gap: 8px; }
.editor-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; font-size: 12px; white-space: nowrap; }
.editor-toolbar .icon-button { width: 34px; padding: 7px; }
.editor-toolbar button:disabled { cursor: default; }
.history-controls { display: flex; gap: 2px; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
#save-state { position: absolute; right: 0; top: 100%; font-size: 10px; line-height: 1; white-space: nowrap; color: #586f61; }
#save-state:empty { display: none; }
#save-state[data-tone=pending] { color: #85632c; }
#save-state[data-tone=error] { color: #a52d25; }
.editor-toolbar #save:disabled { opacity: 1; color: #7a7e8b; background: #f8f8fb; border-color: #e8e8ef; }
.editor-toolbar #advanced-menu > summary { display: flex; align-items: center; justify-content: center; width: 34px; height: 36px; padding: 7px; }
.editor-toolbar #advanced-menu .menu-panel button { display: block; text-align: left; }
@media (max-width: 1100px) {
  #workspace .editor-toolbar { gap: 16px; padding: 10px 20px; }
  .editor-toolbar .song-identity { display: block; }
  .editor-toolbar #song-version-select { margin-top: 6px; }
  .editor-toolbar .song-actions { gap: 6px; }
  .editor-toolbar .save-controls { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 760px) {
  #workspace .topbar { padding: 8px 14px; min-height: 54px; gap: 14px; }
  .workspace-location { gap: 10px; }
  .workspace-location .ui-icon { display: none; }
  .app-controls { gap: 6px; }
  .account-slot { padding-left: 6px; }
  #workspace-library > summary { gap: 5px; }
  #workspace-library .menu-panel { position: fixed; top: 54px; left: 14px; right: 14px; width: auto; }
  #workspace-library > summary > .ui-icon:first-child { display: none; }
  #workspace .editor-toolbar { flex-wrap: wrap; padding: 10px 14px; gap: 14px; }
  .editor-toolbar .song-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; width: 100%; }
  .editor-toolbar h1 { font-size: 23px; }
  .editor-toolbar #song-version-select { max-width: 230px; margin-top: 0; }
  .editor-toolbar .song-actions { width: 100%; margin: 0; gap: 6px; }
  .history-controls { gap: 0; padding-right: 6px; margin-right: auto; }
  .editor-toolbar button { padding: 8px; gap: 5px; }
  .editor-toolbar .icon-button { width: 30px; }
  .editor-toolbar #advanced-menu > summary { width: 28px; }
  .editor-toolbar #toggle-chat { margin-left: auto; }
  .editor-toolbar #toggle-chat > span { display: none; }
  .editor-toolbar .save-error { top: 174px; }
}

/* Infrequent configuration stays together in one tabbed window. */
.editor-toolbar #open-song-setup { flex-shrink: 0; font-weight: 500; }
.version-badge { padding: 4px 7px; border-radius: 5px; background: #eeebfb; color: #65539a; font-size: 11px; white-space: nowrap; }
.editor-toolbar .song-identity { flex-wrap: wrap; align-items: center; gap: 6px 14px; }
#advanced-menu .version-choice { margin: 3px 6px 8px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
#advanced-menu #song-version-select { margin: 4px 0 0; width: 100%; max-width: none; font-size: 12px; }
#editor-dialog.is-song-setup { width: min(980px, calc(100vw - 32px)); height: min(720px, 90dvh); max-height: 90dvh; padding: 0; overflow: hidden; background: #fff; border-radius: 12px; }
.is-song-setup #editor-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.is-song-setup .editor-heading { margin: 0; padding: 22px 24px 18px; flex-shrink: 0; align-items: center; }
#setup-song-name { margin-bottom: 4px; }
.is-song-setup #editor-title { font-size: 22px; }
#setup-tabs { display: flex; flex-shrink: 0; padding: 0 24px; gap: 24px; border-bottom: 1px solid var(--line); }
#setup-tabs button { min-height: 44px; padding: 10px 2px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 13px; }
#setup-tabs button[aria-selected=true] { color: #5547b3; border-bottom-color: var(--accent); }
#setup-tabs button:hover { color: var(--accent); }
.is-song-setup #editor-content { flex: 1; min-height: 0; padding: 22px 24px; overflow-y: auto; scrollbar-gutter: stable; }
.is-song-setup #editor-help { margin-bottom: 18px; }
.is-song-setup .editor-footer { flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 20px; border-top: 1px solid var(--line); padding: 16px 24px; background: #fafafd; }
.is-song-setup #setup-apply-hint { grid-column: 1; grid-row: 1; }
.is-song-setup #apply-edit { grid-column: 2; grid-row: 1 / span 2; }
.is-song-setup #editor-error { grid-column: 1; margin: 6px 0 0; }
.is-song-setup #editor-error:empty { display: none; }
.setup-album-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setup-album-identity h3 { margin: 0; font-size: 21px; }
.setup-album-format { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; color: var(--muted); }
.setup-album-brief { padding: 4px 0 16px; }
.setup-album-brief h3 { font-size: 13px; margin: 18px 0 8px; }
.setup-album-brief p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
@media (max-width: 1100px) { .editor-toolbar .song-identity { display: flex; } }
@media (max-width: 600px) {
  #editor-dialog.is-song-setup { width: calc(100vw - 16px); height: 92dvh; max-height: 92dvh; }
  .is-song-setup .editor-heading { padding: 18px 16px 14px; }
  #setup-tabs { padding: 0 16px; gap: 0; justify-content: space-between; }
  #setup-tabs button { padding-inline: 6px; }
  .is-song-setup #editor-content { padding: 18px 16px; }
  .is-song-setup .editor-footer { padding: 12px 16px; gap: 8px; }
  .is-song-setup #setup-apply-hint { font-size: 11px; }
  .is-song-setup #apply-edit { font-size: 12px; padding: 10px; }
}

.song-identity-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.song-identity-tools #advanced-menu .menu-panel { left: 0; right: auto; }
@media (max-width: 760px) {
  .editor-toolbar .song-identity { position: relative; }
  .song-identity-tools #advanced-menu { position: static; }
}