/* Edit selection is gold; a green speaker describes the listening mix. */
.sidebar .parts-panel { --parts-card-width:184px; display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; width:100%; }
#app .sidebar > .parts-panel { display:flex; flex-direction:column; flex-wrap:nowrap; flex:1; min-width:0; min-height:0; width:100%; gap:10px; overflow:visible; }
.parts-heading { display:flex; align-items:center; justify-content:space-between; gap:7px; flex-shrink:0; }
.parts-heading-title { display:flex; align-items:center; gap:7px; min-width:0; }
.parts-heading .eyebrow { font-size:9px; letter-spacing:.1em; }
.parts-count { color:var(--muted); font:10px var(--mono); }
.sidebar .parts-add { min-width:0; min-height:32px; padding:6px 7px; gap:4px; border:1px solid var(--border); border-radius:6px; color:var(--ink); background:var(--panel); font-size:10px; }
.parts-add .icon { width:13px; height:13px; }
.parts-list { display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; overflow:auto; padding:3px; margin:-3px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; overscroll-behavior:contain; }
.part-card { position:relative; flex-shrink:0; min-width:0; padding:4px; border:1px solid var(--border); border-radius:9px; background:color-mix(in srgb,var(--panel) 55%,var(--bg)); }
.part-card.is-editing { border-color:var(--selection); box-shadow:inset 3px 0 var(--selection); background:color-mix(in srgb,var(--selection-bg) 18%,var(--panel)); }
.sidebar .part-select { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-width:0; min-height:54px; padding:7px 5px; border-radius:5px; text-align:left; white-space:normal; }
.part-select:hover { background:var(--hover); }
.part-instrument { display:grid; place-items:center; flex-shrink:0; width:25px; height:29px; color:var(--muted); background:var(--surface); border-radius:6px; }
.part-instrument .icon { width:17px; height:17px; }
.part-caption { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.part-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:12px; font-weight:600; line-height:1.4; }
.part-note-count { color:var(--muted); font-size:10px; line-height:1.3; }
.part-select .part-editing { align-self:flex-start; margin-top:2px; color:var(--muted); font-size:9px; line-height:1.4; }
.part-card.is-editing .part-editing { color:var(--selection); }
.part-hearing { display:flex; align-items:center; gap:5px; min-height:22px; padding:0 5px 4px; color:var(--muted); font-size:10px; line-height:1.3; }
.part-hearing .part-speaker { width:13px; height:13px; }
.part-card.is-audible .part-hearing { color:var(--nav); }
.part-controls { display:flex; gap:4px; padding:3px; border-top:1px solid var(--border); }
.sidebar .part-controls > button { flex:1; min-width:0; min-height:30px; padding:6px 4px; border:1px solid transparent; border-radius:4px; color:var(--muted); font-size:10px; }
.sidebar .part-controls > button:hover { color:var(--ink); background:var(--hover); }
.sidebar .part-controls .part-more { flex:0 0 30px; width:30px; }
.part-controls .part-more .icon { width:16px; height:16px; }
.sidebar .part-controls .part-mute[aria-pressed=true] { color:var(--ink); border-color:var(--line); background:var(--surface); }
.sidebar .part-controls .part-solo[aria-pressed=true] { color:var(--nav); border-color:color-mix(in srgb,var(--nav) 50%,var(--border)); background:color-mix(in srgb,var(--nav) 10%,var(--panel)); }
.parts-panel button:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:1px; }

@media screen and (min-width:1051px) {
  .parts-list { max-height:calc(100dvh - 230px); }
  .sidebar .part-select { padding-top:13px; }
  .part-select .part-editing { position:absolute; top:5px; right:7px; margin:0; font-size:8px; }
  .part-card:not(.is-editing) .part-editing { visibility:hidden; }
}
.part-control-letter { display:none; }
/* Below the side-rail width parts become one row of chips, so the music starts near the top. */
@media screen and (max-width:1050px) {
  #app > .layout > .sidebar { position:static; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; height:auto; min-height:0; padding:6px 24px; }
  #app .sidebar > .parts-panel { flex:1 1 auto; flex-direction:row; align-items:center; gap:8px; }
  .parts-heading { order:2; flex:none; }
  .parts-heading-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .parts-list { flex:0 1 auto; flex-direction:row; gap:6px; width:auto; max-width:100%; max-height:none; padding:2px; margin:-2px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; }
  .part-card { display:flex; align-items:center; flex:0 0 auto; gap:2px; width:auto; padding:2px; border-radius:8px; }
  .sidebar .part-select { flex:0 1 auto; width:auto; min-width:0; min-height:34px; padding:3px 9px 3px 4px; gap:7px; }
  .part-instrument { width:22px; height:24px; border-radius:5px; }
  .part-instrument .icon { width:15px; height:15px; }
  .part-caption { flex:0 1 auto; }
  .part-name { max-width:128px; font-size:12px; }
  .part-note-count, .part-select .part-editing { display:none; }
  .part-hearing { min-height:0; padding:0 4px 0 2px; }
  .part-hearing > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .part-hearing .part-speaker { width:15px; height:15px; }
  .part-controls { gap:2px; padding:0 0 0 4px; border-top:0; border-left:1px solid var(--border); }
  .sidebar .part-controls > button { flex:0 0 auto; min-width:28px; min-height:30px; padding:4px 6px; font-size:11px; font-weight:650; letter-spacing:.02em; }
  .part-control-word { display:none; }
  .part-control-letter { display:inline; }
  .sidebar .part-controls .part-more { flex:0 0 28px; width:28px; padding:4px; }
  .sidebar .parts-add { min-height:34px; padding:6px 10px; font-size:11px; white-space:nowrap; }
}
@media screen and (max-width:700px) {
  #app > .layout > .sidebar { padding:6px 12px; }
  .parts-list { scrollbar-width:thin; }
  .part-name { max-width:96px; }
  .sidebar .parts-add { width:34px; padding:6px; gap:0; font-size:0; }
  .parts-add .icon { width:15px; height:15px; }
}
@media screen and (any-pointer:coarse) {
  #app .sidebar .parts-add { min-height:44px; min-width:44px; padding-inline:10px; }
  #app .sidebar .part-controls > button { min-height:44px; min-width:40px; }
  #app .sidebar .part-controls .part-more { flex-basis:44px; width:44px; }
  #app .sidebar .part-select { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) { .parts-panel button { transition:none; } }


/* Mute is a saved state, distinct from gold editing and green playback. */
.part-level { display:flex; align-items:center; gap:7px; min-width:0; padding:3px 5px 7px; }
.part-level > .icon { width:13px; height:13px; flex-shrink:0; color:var(--muted); }
.part-level input { flex:1; width:100%; min-width:0; height:28px; padding:0; accent-color:var(--play); cursor:pointer; }
.part-level-value { flex:0 0 30px; color:var(--ink); text-align:right; font:10px var(--mono); }
.part-card.is-muted { border-color:color-mix(in srgb,var(--muted) 65%,var(--border)); box-shadow:inset -3px 0 var(--muted); }
.part-card.is-editing.is-muted { box-shadow:inset 3px 0 var(--selection),inset -3px 0 var(--muted); }
.part-card.is-muted .part-hearing { color:var(--muted); font-weight:650; }
.sidebar .part-controls .part-mute[aria-pressed=true],.simple-mixer .part-mute[aria-pressed=true],.quiet-transport .speaker-mute.is-muted,.mix-open.is-muted,.mixer-master.is-muted { color:var(--muted); background:color-mix(in srgb,var(--muted) 15%,var(--panel)); border-color:color-mix(in srgb,var(--muted) 65%,var(--border)); }
.editor-heading .mix-open { flex:none; gap:4px; min-height:32px; padding:4px 6px; border:1px solid var(--border); border-radius:5px; font-size:10px; }
.mix-open > .icon { width:13px; height:13px; }
.mixer-dialog { width:600px; }
.simple-mixer { display:flex; flex-direction:column; gap:14px; }
.mixer-output { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.mixer-output > span { font-weight:600; }
.mixer-master { min-height:40px; padding:6px 10px; border:1px solid var(--border); }
.mixer-parts { display:flex; flex-direction:column; gap:8px; }
.mixer-row { display:grid; grid-template-columns:minmax(90px,1fr) minmax(140px,1.5fr) 82px 48px; gap:8px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:9px; background:var(--canvas); }
.mixer-part-name { display:flex; align-items:center; gap:7px; min-width:0; }
.mixer-part-name .icon { width:17px; height:17px; flex:none; color:var(--muted); }
.mixer-part-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.mixer-row .part-level { padding:0; }
.mixer-row button { min-height:40px; padding:6px; border:1px solid var(--border); border-radius:6px; font-size:11px; }
.mixer-row .part-solo[aria-pressed=true] { color:var(--nav); background:color-mix(in srgb,var(--nav) 15%,var(--panel)); border-color:var(--nav); }
.mixer-row.is-muted { border-color:var(--muted); }
.simple-mixer .mixer-note { margin:0; font-size:11px; }
@media screen and (max-width:1050px) { .sidebar .part-level { display:none; } .part-card.is-muted .part-hearing > span { position:static; width:auto; height:auto; clip-path:none; } }
@media screen and (max-width:700px) { .editor-heading .mix-open { min-height:44px; } .editor-heading .part-title > .pill { display:none; } }
@media screen and (max-width:600px) {
  .mixer-dialog .dialog-body { padding:14px; }
  .mixer-row { grid-template-columns:minmax(0,1fr) 78px 48px; gap:5px 7px; }
  .mixer-part-name { grid-column:1; grid-row:1; }
  .mixer-row .part-level { grid-column:1/-1; grid-row:2; }
  .mixer-row > .part-mute { grid-column:2; grid-row:1; }
  .mixer-row > .part-solo { grid-column:3; grid-row:1; }
  .mixer-row button,.mixer-row input { min-height:44px; }
}

@media screen and (any-pointer:coarse) { .simple-mixer input,.simple-mixer button { min-height:44px; } }

/* The current instrument is also the Focus navigation route. */
.editor-heading .part-chooser-trigger { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; min-height:32px; padding:3px 5px; border:1px solid var(--border); border-radius:5px; }
.part-chooser-trigger > strong { min-width:0; }
.part-chooser-trigger > .icon { flex:none; width:11px; height:11px; transform:rotate(90deg); }
.part-chooser-trigger:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:2px; }
.part-chooser-dialog { width:440px; }
.part-chooser,.part-chooser > nav { display:flex; flex-direction:column; gap:8px; }
.part-chooser > .secondary { margin-top:6px; min-height:44px; border:1px solid var(--border); }
.part-chooser .part-choice { display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 12px; text-align:left; border:1px solid var(--border); border-radius:8px; background:var(--canvas); }
.part-choice > .icon { flex:none; width:21px; height:21px; color:var(--muted); }
.part-choice-name { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.part-choice-name strong { overflow-wrap:anywhere; font-size:13px; }
.part-choice-name small { color:var(--muted); font:11px var(--mono); }
.part-choice-current { flex:none; color:var(--selection); font-size:10px; }
.part-chooser .part-choice[aria-current=true] { border-color:var(--selection); box-shadow:inset 3px 0 var(--selection); }
@media screen and (max-width:700px), screen and (any-pointer:coarse) { .editor-heading .part-chooser-trigger { min-height:44px; } }

/* Saved mute, temporary Solo exclusion and zero level remain distinct. */
.mixer-part-name > span { min-width:0; display:flex; flex-direction:column; gap:4px; }
.mixer-hearing { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; }
.mixer-hearing .icon { width:12px; height:12px; }
.mixer-row.is-soloed { border-color:var(--nav); box-shadow:inset 3px 0 var(--nav); background:color-mix(in srgb,var(--nav) 7%,var(--canvas)); }
.mixer-row.is-soloed .part-solo[aria-pressed=true],.sidebar .part-controls .part-solo[aria-pressed=true] { color:var(--bg); background:var(--nav); border-color:var(--nav); font-weight:700; }
.mixer-row.is-soloed:not(.is-muted):not(.is-quiet) .mixer-hearing { color:var(--nav); }
.mixer-row.is-muted .mixer-hearing { color:var(--muted); }
.mixer-row.is-quiet:not(.is-muted) .mixer-part-name > .icon,.part-card.is-quiet:not(.is-muted) .part-instrument { opacity:.55; }
.mixer-combine { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:36px; font-size:12px; }
.mixer-combine small { color:var(--muted); font-size:10px; }
@media screen and (max-width:700px),screen and (any-pointer:coarse) { .mixer-combine { min-height:44px; } }
.main .bar-card.has-playing { border-color:var(--play); background:color-mix(in srgb,var(--play) 12%,var(--panel)); }
.main .bar-card.has-playing .bar-number { color:var(--play); }
.main .bar-card.has-playing .bar-number::before { content:'\25B6'; margin-right:5px; font-size:9px; }
.main .bar-card.has-playing::after { height:4px; background:var(--play); }