/* StemConsole — the sheet of public/js/stem-console.js (class names come from the module).
   Consumers: /drum-separator, /drum-remover. Moved here unchanged from /drum-separator's blade
   on 2026-09-19, when the second consumer appeared — the move the module's header asked for.

   ⚠️ `direction:ltr` on the transport is deliberate and not an oversight of RTL: the waveform
   lives in a <canvas>, which [dir=rtl] does NOT mirror, so time flows left→right in every
   locale. Mirroring the scrubber would send it the opposite way to the playhead it drives
   (seen on /ar, 2026-08-18). Everything else in the console mirrors normally. */
.sc{--sc-row-h:44px}
.sc-slot:empty{display:none}
.sc-transport{display:flex;direction:ltr;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--glass)}
.sc-play{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:0;background:var(--accent-gradient,var(--accent));color:var(--on-accent,#fff);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(56,189,248,.28)}
.sc-play:hover{filter:brightness(1.08)}
.sc-play:focus-visible,.sc-loop:focus-visible,.sc-tgb:focus-visible,.sc-dl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-t{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.sc-seek{flex:1 1 auto;min-width:60px;accent-color:var(--accent)}
.sc-loop{width:40px;height:40px;flex:0 0 auto;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sc-loop.is-on{color:var(--accent);border-color:var(--accent);background:var(--glass-hover);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.sc-tracks{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sc-row{display:grid;grid-template-columns:minmax(120px,150px) auto minmax(0,1fr) 88px 40px;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--glass);transition:opacity .18s,border-color .18s}
.sc-row.is-off{opacity:.55}
.sc.is-playing .sc-row:not(.is-off){border-color:var(--border-hover);border-color:color-mix(in srgb,var(--sc-c) 45%,var(--border))}
.sc-head{display:flex;align-items:center;gap:8px;min-width:0}
.sc-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--sc-c)}
.sc-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-empty{font-size:12px;color:var(--text-muted);border:1px solid var(--border);border-radius:10px;padding:1px 7px;flex:0 0 auto}
.sc-empty[hidden]{display:none}
.sc-tg{display:flex;gap:4px;flex:0 0 auto}
.sc-tgb{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;line-height:1}
.sc-tgb:hover{border-color:var(--border-hover);color:var(--text-primary)}
.sc-solo.is-on{background:var(--warning,#fbbf24);border-color:var(--warning,#fbbf24);color:#1a1205}
.sc-mute.is-on{background:var(--danger,#f87171);border-color:var(--danger,#f87171);color:#1a0505}
.sc-mute.is-dim{opacity:.45}
.sc-wave{position:relative;height:40px;min-width:0;border-radius:6px;background:var(--glass);background:color-mix(in srgb,var(--sc-c) 8%,transparent);cursor:pointer;overflow:hidden}
.sc-cv{display:block;width:100%;height:100%}
.sc-ph{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--text-primary);opacity:.75;pointer-events:none}
.sc-vol{width:88px;accent-color:var(--sc-c)}
.sc-dl{width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sc-dl:hover{border-color:var(--accent);color:var(--accent)}
.sc-dl:disabled{opacity:.45;cursor:progress}
/* a console without the per-row ↓ column (.sc--nodl is set by the module) */
.sc--nodl .sc-row{grid-template-columns:minmax(120px,150px) auto minmax(0,1fr) 88px}

@media (max-width:720px){
    .sc-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'head tg dl' 'wave wave wave' 'vol vol vol';gap:8px 10px;padding:10px}
    .sc-head{grid-area:head}
    .sc-tg{grid-area:tg}
    .sc-wave{grid-area:wave;height:46px}
    .sc-vol{grid-area:vol;width:100%}
    .sc-dl{grid-area:dl}
    .sc-transport{gap:8px;padding:8px 10px}
    .sc--nodl .sc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'head tg' 'wave wave' 'vol vol'}
}
@media (prefers-reduced-motion:reduce){.sc-row{transition:none}}