/* The music studio (Pages/Music) and the chrome js/music-ui.js builds around its parts. It reuses the photo editor's chrome — menus,
   dialogs, buttons, sliders, toasts are photo.css's .pe-* — and a few of the video editor's panel classes (.ve-tab, .ve-name, .ve-sep,
   .ve-savestate, from video.css) and the audio studio's meter token; .mu-* is what a music studio adds. The timeline and editors
   (music-editors.css) and the sample browser and mixer (music-panels.css) bring their own. Chrome follows the app's tokens, so it
   follows light and dark with the rest of the site. */

.mu-host { container: mu / inline-size; }

.mu {
    --mu-left: 19rem;
    --ae-meter-bg: #14161a;
}
@media (prefers-color-scheme: light) { .mu { --ae-meter-bg: #d7dbe3; } }
:root[data-theme="light"] .mu { --ae-meter-bg: #d7dbe3; }
:root[data-theme="dark"] .mu { --ae-meter-bg: #14161a; }

.mu-name { max-width: 16rem; }

/* ---- transport bar ---- */
.mu-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .35rem; padding: .3rem .6rem; border-bottom: 1px solid var(--pe-line); background: var(--rl-surface); }
.mu-bar__grp { display: inline-flex; align-items: center; gap: .25rem; }
.mu-bar .pe-ib { width: 2rem; }
.mu-play.is-on { background: var(--rl-ok); color: #fff; }
.mu-rec { color: var(--rl-danger); }
.mu-rec.is-on { background: var(--rl-danger); color: #fff; }
.mu-toggle.is-on:not(.mu-rec) { background: var(--rl-accent); color: var(--rl-accent-contrast); }
.mu-pos { min-width: 6.6rem; text-align: center; font: 700 .95rem ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; padding: .22rem .5rem; border-radius: 8px; background: var(--ae-meter-bg); color: var(--rl-text); user-select: text; }
.mu-clock { font: .76rem ui-monospace, Consolas, monospace; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; min-width: 4.4rem; }
.mu-lbl { font-size: .72rem; color: var(--rl-text-muted); }
.mu-num { width: 4.4rem; padding: .22rem .35rem; font-variant-numeric: tabular-nums; }
.mu-num--s { width: 3.6rem; }
.mu-sel { padding: .22rem .3rem; font-size: .78rem; max-width: 9rem; }
.mu-swing { width: 5.5rem; accent-color: var(--rl-accent); }
.mu-vol { width: 5.5rem; accent-color: var(--rl-accent); }
.mu-small { font-size: .72rem; color: var(--rl-text-muted); }
.mu-meter { display: block; width: 120px; height: 22px; border-radius: 5px; cursor: pointer; }
.mu-addtrack { display: inline-flex; align-items: center; gap: .2rem; }

/* ---- layout ---- */
.mu-work { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: var(--mu-left) minmax(0, 1fr); }
.mu--noleft .mu-work { grid-template-columns: minmax(0, 1fr); }
.mu--noleft .mu-left { display: none; }
.mu-left { min-height: 0; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--pe-line); background: var(--rl-surface); overflow: hidden; }
.mu-left > * { flex: 1; min-height: 0; }
.mu-center { --mu-dock: 56%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mu-tlwrap { flex: 1 1 0; min-height: 6rem; display: flex; flex-direction: column; min-width: 0; }
.mu-tlwrap > * { flex: 1; min-height: 0; }
.mu-split { flex: none; height: 7px; cursor: row-resize; background: var(--rl-surface); border-top: 1px solid var(--pe-line); border-bottom: 1px solid var(--pe-line); position: relative; touch-action: none; }
.mu-split::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2.4rem; height: 2px; margin-left: -1.2rem; border-radius: 2px; background: var(--rl-text-muted); opacity: .5; }
.mu-split:hover::after, .mu-split:focus-visible::after { opacity: 1; background: var(--rl-accent); }
.mu-dock { flex: none; height: var(--mu-dock); min-height: 9rem; display: flex; flex-direction: column; background: var(--rl-surface); min-width: 0; }
.mu-dtabs { flex: none; display: flex; align-items: center; gap: .1rem; padding: 0 .4rem; border-bottom: 1px solid var(--pe-line); }
.mu-dtab { flex-direction: row; padding: .4rem .8rem; font-size: .76rem; }
.mu-dockhint { font-size: .72rem; color: var(--rl-text-muted); padding-right: .4rem; }
.mu-pane { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.mu-pane[hidden] { display: none; }
.mu-ehead { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; padding: .3rem .6rem; border-bottom: 1px solid var(--pe-line); min-height: 2.2rem; }
.mu-ehead:empty { display: none; }
.mu-etitle { font-size: .82rem; }
.mu-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.mu-ebody { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.mu-ebody > * { flex: 1 1 0; min-height: 0; }
.mu-ebody > [hidden] { display: none; }
.mu-empty { display: grid; place-content: center; text-align: center; gap: .3rem; padding: 1rem; color: var(--rl-text-muted); max-width: 34rem; margin: 0 auto; }
.mu-empty strong { color: var(--rl-text); font-size: .9rem; }
.mu-empty p { margin: 0; line-height: 1.45; }
.mu-missing { padding: 1rem; color: var(--rl-danger); font-weight: 600; }
.mu-status { flex: none; display: flex; gap: 1rem; padding: .2rem .7rem; border-top: 1px solid var(--pe-line); background: var(--rl-surface); font-size: .72rem; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.mu-chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; cursor: pointer; }

/* ---- dialogs ---- */
.mu-form { display: flex; flex-direction: column; gap: .6rem; min-width: min(30rem, 80vw); }
.mu-field { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.mu-field .pe-input { min-width: 0; width: 100%; user-select: text; }
.mu-err { color: var(--rl-danger); font-weight: 600; }
.mu-progress { width: 100%; height: .5rem; accent-color: var(--rl-accent); }
.mu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.mu-card { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .6rem .7rem; border: 2px solid var(--pe-line); border-radius: 10px; background: var(--rl-surface); cursor: pointer; font-size: .78rem; line-height: 1.35; }
.mu-card:hover { border-color: var(--rl-text-muted); }
.mu-card.is-on { border-color: var(--rl-accent); background: var(--rl-surface-sunken); }
.mu-card strong { font-size: .9rem; }
.mu-swatches { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 16rem; }
.mu-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.mu-swatch.is-on { border-color: var(--rl-text); }
.mu-plist { display: flex; flex-direction: column; gap: .35rem; min-width: min(34rem, 80vw); max-height: 55vh; overflow-y: auto; }
.mu-prow { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--pe-line); border-radius: 8px; }
.mu-prow.is-cur { border-color: var(--rl-accent); }
.mu-prow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mu-prow__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-dl { display: grid; grid-template-columns: 14rem 1fr; gap: .3rem .8rem; margin: 0; font-size: .82rem; min-width: min(34rem, 80vw); }
.mu-dl dt { font-weight: 600; }
.mu-dl dd { margin: 0; color: var(--rl-text-muted); }
.mu-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; line-height: 1.45; }
.mu-instgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; min-width: min(40rem, 85vw); }
.mu-instgrid section { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.mu-instgrid h3 { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-text-muted); }
.mu-picker { width: min(46rem, 85vw); height: min(34rem, 65vh); display: flex; flex-direction: column; }
.mu-picker > * { flex: 1; min-height: 0; }
.mu-popup { z-index: 70; }

/* ---- narrow screens: the sample browser slides over the work area instead of squeezing it ---- */
@container mu (max-width: 1280px) {
    .mu-bar .mu-lbl { display: none; }
    .mu-clock { display: none; }
    .mu-swing, .mu-vol { width: 4rem; }
    .mu-meter { width: 90px; }
    .mu-bar .pe-btn--sm { padding-inline: .5rem; }
}
@container mu (max-width: 980px) {
    .mu { --mu-left: 16rem; }
    .mu-name { max-width: 9rem; }
}
@container mu (max-width: 760px) {
    .mu-work { grid-template-columns: minmax(0, 1fr); position: relative; }
    .mu-left { position: absolute; z-index: 20; inset: 0 auto 0 0; width: min(21rem, 92%); box-shadow: var(--pe-shadow); }
    .mu-savestate, .mu .ve-savestate { display: none; }
    .mu-bar { overflow-x: auto; flex-wrap: nowrap; }
    .mu-bar > * { flex: none; }
    .mu-field { grid-template-columns: 1fr; }
}

/* The MIDI import dialog's list of the tracks a file brings. */
.mu-midilist { margin: 0; padding-left: 1.2rem; max-height: 14rem; overflow-y: auto; font-size: .8rem; }