/* The closed drawer leaves this tab pinned to the right edge, so page gutters reserve it. */
:root { --mix-tab-width:38px; }
.mix-stage { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:45; }
.mix-drawer { position:absolute; right:0; top:50%; width:min(520px,calc(100% - 52px)); transform:translate(100%,-50%); transition:transform .25s ease; pointer-events:auto; }
.mix-drawer[data-open=true] { transform:translate(0,-50%); }
.mix-tab { position:absolute; right:100%; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:var(--mix-tab-width); min-height:116px; padding:16px 9px; border:1px solid #ad9667; border-right:0; border-radius:8px 0 0 8px; background:#d0b27b; color:#1b261d; font-size:13px; font-weight:750; letter-spacing:1px; box-shadow:-4px 4px 16px #0004; }
.mix-tab-label { writing-mode:vertical-rl; transform:rotate(180deg); }
.mix-tab-dot { position:absolute; top:9px; width:6px; height:6px; border-radius:50%; background:#2a5034; }
.mix-stage [hidden] { display:none!important; }
.mix-panel { display:flex; flex-direction:column; max-height:calc(100dvh - 40px); border:1px solid #455240; border-right:0; border-radius:12px 0 0 12px; background:#18251d; box-shadow:-12px 12px 45px #0006; overflow:hidden; }
.mix-drawer[data-open=false] .mix-panel { visibility:hidden; transition:visibility 0s .25s; }
.mix-heading { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; gap:12px; flex-shrink:0; }
.mix-heading h2 { margin:0; font-size:22px; font-weight:650; color:#edf0e5; }
.mix-heading h2>span { display:inline-block; margin-left:6px; color:#a3b29a; font-size:13px; font-weight:400; }
.mix-actions { display:flex; gap:6px; flex-shrink:0; margin-left:auto; }
.mix-actions button { border:1px solid #40503b; background:#243328; color:#cbd6c1; padding:5px 8px; border-radius:5px; font-size:11px; white-space:nowrap; }
.mix-actions button:disabled { opacity:.4; cursor:default; }
.mix-actions [data-mix-clear] { color:#e2af9f; }
.mix-slots { display:flex; gap:4px; flex:1; min-width:0; }
.mix-slots button { flex:1; min-width:24px; border:1px solid #3c4b36; border-radius:5px; background:transparent; color:#a9b69f; padding:5px 0; font-size:11px; }
.mix-slots button[aria-pressed=true] { color:#eedcb4; border-color:#9c895b; background:#343b28; }
.mix-slots button:hover { color:#eedcb4; border-color:#9c895b; }
.mix-slots button.is-playing { border-color:#c0a66e; box-shadow:0 0 0 1px #cdb17b30; }
.player-slot-menu { z-index:50; width:100px; }
.tabletop .player-slot-menu .sound-menu-item { justify-content:center; padding:6px 11px; }
[data-slot-direction=left] svg { transform:rotate(180deg); }
[data-slot-direction=down] svg { transform:rotate(90deg); }
.mix-filters { display:flex; gap:5px; padding:0 16px 8px; border-bottom:1px solid #354430; flex-shrink:0; }
.mix-filters button { flex:1; border:1px solid #3c4b36; border-radius:5px; background:transparent; color:#a9b69f; padding:5px; font-size:11px; white-space:nowrap; }
.mix-filters button[aria-pressed=true] { color:#eedcb4; border-color:#9c895b; background:#343b28; }
.mix-tracks { list-style:none; margin:0; padding:6px 16px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; min-height:0; }
.mix-tracks:empty { padding:0; }
.mix-track { position:relative; padding:16px 25px; background:#202f24; border:1px solid #3c4c36; border-radius:6px; }
.mix-track+.mix-track { margin-top:6px; }
.mix-track.is-playing { border-color:#a4915c; background:#293322; }
.mix-track-heading { display:flex; gap:8px; align-items:center; padding-right:19px; }
.mix-track-copy { min-width:0; flex:1; }
.mix-track-copy strong { display:block; color:#e1e8d7; font-size:12px; line-height:1.25; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mix-track-copy>span { display:block; color:#a0b293; font-size:9px; line-height:1.25; }
.mix-play { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border:1px solid #68754d; border-radius:50%; color:#ddc48e; background:#2b3926; }
.mix-play svg { width:13px; height:13px; }
.mix-play[aria-pressed=true] { background:#d0b27b; color:#1b261d; border-color:#d0b27b; }
.mix-track .mix-remove { position:absolute; top:0; right:0; min-width:24px; min-height:24px; width:24px; height:24px; padding:3px; }
.mix-remove svg { width:12px; height:12px; }
.mix-track-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mix-loop { display:flex; align-items:center; gap:4px; min-width:24px; min-height:24px; padding:3px 5px; border:1px solid #45543b; border-radius:4px; background:transparent; color:#a7b59b; font-size:10px; line-height:1.3; }
.mix-loop svg { width:12px; height:12px; }
.mix-loop[aria-pressed=true] { color:#ead19d; background:#41432b; border-color:#9d8b5c; }
.mix-time { color:#a7b59b; font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mix-volume,.mix-footer { display:flex; align-items:center; gap:10px; }
.mix-volume { margin-top:6px; }
.mix-volume label,.mix-footer label { color:#acbaa2; font-size:11px; white-space:nowrap; }
.mix-volume output,.mix-footer output { min-width:36px; text-align:right; color:#d7dfcb; font-size:11px; font-variant-numeric:tabular-nums; }
#rollcue-player input[type=range] { min-width:0; flex:1; padding:0; margin:0; border:0; min-height:20px; height:20px; background:transparent; box-shadow:none; accent-color:#ceb27b; cursor:pointer; }
#rollcue-player .mix-volume input[type=range] { min-height:18px; height:18px; }
.mix-empty { display:flex; flex-direction:column; align-items:center; padding:34px 24px; text-align:center; color:#9bac90; }
.mix-empty svg { width:40px; height:40px; margin-bottom:16px; color:#baa16f; }
.mix-empty strong { color:#d8e1cc; font-size:14px; }
.mix-empty p { margin:8px 0 0; font-size:12px; }
.mix-filter-empty { margin:0; padding:32px 24px; color:#a2b397; font-size:12px; text-align:center; }
.mix-footer { flex-shrink:0; padding:8px 16px; border-top:1px solid #354430; background:#142017; }
.mix-status { flex-shrink:0; margin:0; padding:6px 16px; color:#c3d7b2; font-size:11px; }
.mix-status:not(.is-error) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.mix-status.is-error,.mix-track-error { color:#efb7a8; }
.mix-track-error { margin:10px 0 0; font-size:11px; }
.mix-broadcast { flex-shrink:0; padding:10px 16px; border-top:1px solid #354430; background:#142017; }
.mix-broadcast button { border:1px solid #526046; border-radius:5px; background:#243328; color:#ddcfad; font:inherit; font-size:11px; padding:7px 10px; cursor:pointer; }
.mix-broadcast button:disabled { opacity:.5; cursor:default; }
.mix-broadcast-start { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.mix-broadcast-start svg { width:15px; height:15px; }
.mix-broadcast-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.mix-broadcast-heading>span { display:flex; align-items:center; gap:7px; color:#c3d7b2; font-size:11px; }
.mix-broadcast-heading>span::before { content:""; width:6px; height:6px; background:#cdb17b; border-radius:50%; }
.mix-broadcast [data-broadcast-end] { color:#e2af9f; padding:4px 7px; }
.mix-broadcast-link { display:flex; align-items:center; gap:8px; }
#rollcue-player .mix-broadcast-link input { width:0; min-width:0; flex:1; padding:6px 8px; height:30px; min-height:30px; border:1px solid #354430; border-radius:5px; background:#111b13; color:#b5c4aa; font-size:11px; }
.mix-broadcast-link button { flex-shrink:0; }
.mix-broadcast-error { color:#efb7a8; margin:8px 0 0; font-size:11px; }
@media(max-width:600px) { .mix-heading { padding:8px 12px; gap:8px; } .mix-heading h2 { font-size:20px; } .mix-heading h2>span { font-size:11px; margin-left:3px; } .mix-actions button { font-size:10px; padding:5px 6px; } .mix-filters { padding:0 12px 8px; } .mix-filters button { font-size:10px; } .mix-tracks { padding:6px 12px; } .mix-track { padding:4px 10px; } .mix-track-heading,.mix-track-controls { gap:5px; } .mix-loop>span { display:none; } .mix-footer { padding:8px 12px; } .mix-status { padding-inline:12px; } }
@media(prefers-reduced-motion:reduce) { .mix-drawer { transition:none; } .mix-drawer[data-open=false] .mix-panel { transition:none; } }
@media(max-width:600px) { .mix-heading { flex-wrap:wrap; } .mix-slots { flex-basis:100%; } .mix-actions { margin-left:auto; } }