/* The free plan's split window on the mixer (D191, mixer/split-window.ts): a stem-piano teal box over the lanes,
   placed like the playhead (--from, --to: fractions of the song). Pink stays on the upgrade actions only. */

.mixer-window {
  --window: var(--st-stem-piano);
  position: absolute;
  top: 26px;
  right: var(--mixer-pad);
  bottom: 50px;
  left: calc(var(--mixer-lane-start) + var(--mixer-pad));
  z-index: 3;
  pointer-events: none;
}
.mixer-window[hidden] { display: none; }
/* Over the stem rows only, so the Metronome's rate and the Cues row stay in reach. */
@supports (bottom: anchor(--a top)) {
  .mixer-track[data-channel='metronome'] { anchor-name: --mixer-metronome-row; }
  .mixer-track[data-channel='cues'] { anchor-name: --mixer-cues-row; }
  .mixer-window { bottom: calc(anchor(--mixer-metronome-row top, 44px) + 6px); }
  .mixer-timeline:has(> .mixer-track[data-channel='metronome'][hidden]) > .mixer-window { bottom: calc(anchor(--mixer-cues-row top, 44px) + 6px); }
}

.mixer-window__box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * 100% - var(--pad, 0px));
  width: calc((var(--to) - var(--from)) * 100% + 2 * var(--pad, 0px));
  box-sizing: border-box;
  border: 1.5px solid var(--window);
  border-radius: 10px;
  background: color-mix(in srgb, var(--window) 7%, transparent);
  transition: border-width 120ms, box-shadow 120ms;
}
.mixer-window[data-state='pick'] .mixer-window__box { box-shadow: 0 0 0 4px color-mix(in srgb, var(--window) 12%, transparent); }
.mixer-window[data-state='pick'] :is(.mixer-window__box, .mixer-window__label) { cursor: grab; touch-action: none; user-select: none; pointer-events: auto; }
.mixer-window[data-dragging='move'] :is(.mixer-window__box, .mixer-window__label) { cursor: grabbing; }
.mixer-window[data-dragging]:not([data-dragging='move']) :is(.mixer-window__box, .mixer-window__label) { cursor: ew-resize; }
/* The stem bars sit on a 3.5px pitch (model.ts BAR_STEP_PX), so the bar holding the window's first moment
   can start up to a step before it: after a split the box stands 6px out at each end so every bar is inside (D280). */
.mixer-window[data-state='split'] .mixer-window__box { --pad: 6px; background: none; }
.mixer-window__box:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 2px; }
/* Past the plan's length the dragged edge thickens and glows. */
.mixer-window[data-over='end'] .mixer-window__box { border-right-width: 4px; box-shadow: 8px 0 18px -6px var(--window); }
.mixer-window[data-over='start'] .mixer-window__box { border-left-width: 4px; box-shadow: -8px 0 18px -6px var(--window); }

.mixer-window__outside { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; container-type: inline-size; }
.mixer-window__outside[data-side='start'] { left: 0; width: calc(var(--from) * 100%); }
.mixer-window__outside[data-side='end'] { right: 0; width: calc((1 - var(--to)) * 100%); }
.mixer-window[data-state='pick'] .mixer-window__outside { background: color-mix(in srgb, var(--st-surface) 45%, transparent); }
.mixer-window[data-state='split'] .mixer-window__outside {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-text) 7%, transparent) 0 1px, transparent 1px 9px);
}
.mixer-window__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  color: var(--st-text-dim);
  font: 500 11.5px/16px var(--st-font);
  white-space: nowrap;
  pointer-events: auto;
}
.mixer-window__pill[hidden],
.mixer-window__cues[hidden] { display: none; }
button.mixer-window__pill { cursor: pointer; }
button.mixer-window__pill:hover { color: var(--st-text); }
.mixer-window__pill.is-quiet { pointer-events: none; }
.mixer-window__pill.is-quiet .mixer-window__pill-icon { display: none; }
.mixer-window__pill-icon { width: 12px; height: 12px; }

.mixer-window__handle {
  position: absolute;
  top: 50%;
  display: none;
  width: 14px;
  height: 36px;
  translate: 0 -50%;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.mixer-window__handle[data-edge='start'] { left: calc(var(--from) * 100% - 7px); }
.mixer-window__handle[data-edge='end'] { left: calc(var(--to) * 100% - 7px); }
.mixer-window[data-state='pick'] .mixer-window__handle { display: block; }
.mixer-window__handle:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 2px; }
.mixer-window__grip { position: absolute; inset: 11px 4px; border-block: 1.5px solid #71717a; }
.mixer-window__grip::after { content: ''; position: absolute; inset: 5px 0 auto; border-top: 1.5px solid #71717a; }

.mixer-window__label {
  position: absolute;
  /* On the window's bottom edge in every state, clear of the ruler above (D204). */
  bottom: 0;
  left: calc((var(--from) + var(--to)) / 2 * 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc((var(--to) - var(--from)) * 100% - 24px);
  padding: 4px 10px;
  translate: -50% 50%;
  box-sizing: border-box;
  border-radius: 999px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font: 500 12px/16px var(--st-font);
  white-space: nowrap;
  pointer-events: auto;
}
.mixer-window__time { flex: none; font: 600 12px/16px var(--st-font-mono); }
.mixer-window__text { overflow: hidden; color: var(--st-text-dim); text-overflow: ellipsis; }
.mixer-window__label-icon { flex: none; width: 13px; height: 13px; color: var(--window); }
.mixer-window__action { flex: none; padding: 0 0 0 6px; border: 0; border-left: 1px solid var(--st-line); background: none; color: var(--window); font: 600 12px/16px var(--st-font); cursor: pointer; }
.mixer-window__action[hidden] { display: none; }
.mixer-window__action:hover { text-decoration: underline; }
.mixer-window__back { display: grid; flex: none; place-items: center; height: 16px; padding: 0 0 0 6px; border: 0; border-left: 1px solid var(--st-line); background: none; color: var(--st-text-dim); cursor: pointer; }
.mixer-window__back[hidden] { display: none; }
.mixer-window__back:hover { color: var(--st-text); }
.mixer-window__back .st-icon { width: 12px; height: 12px; }


.mixer-window__notch {
  position: absolute;
  top: -10px;
  display: none;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--window);
  color: var(--st-surface);
  font: 600 11px/16px var(--st-font-mono);
  white-space: nowrap;
}
.mixer-window[data-over='end'] .mixer-window__notch { display: block; right: 4px; }
.mixer-window[data-over='start'] .mixer-window__notch { display: block; left: 4px; }

/* The header's chip, in the presets' place while the window is picked. */
.mixer-window-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 12px;
  border-radius: 999px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  color: var(--st-text);
  font: 500 12.5px/18px var(--st-font);
  white-space: nowrap;
}
.mixer-window-chip[hidden] { display: none; }
.mixer-head:has(> .mixer-window-chip:not([hidden])) .mixer-presets { display: none; }
.mixer-window-chip__icon { flex: none; width: 14px; height: 14px; color: var(--st-text-dim); }
.mixer-window-chip__left { color: var(--st-text-dim); }
.mixer-window-chip__left[hidden] { display: none; }
.mixer-window-chip__upgrade { padding: 0; border: 0; background: none; color: var(--st-accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.mixer-window-chip__upgrade:hover { text-decoration: underline; }
@container mixer-head (width < 860px) {
  .mixer-window-chip__left { display: none; }
}
/* Its upgrade link wraps under the text rather than running past the card. */
@container mixer-head (width < 440px) {
  .mixer-window-chip { flex-wrap: wrap; border-radius: 12px; white-space: normal; }
}

/* The engine's first-time setup (P255, mixer/setup-pill.ts), beside the title on every plan, apart from Free's chip.
   With nothing to say it has no box, but its status text stays in the page so the next state is announced. */
.mixer-setup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 12px;
  border-radius: 999px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font: 500 12.5px/18px var(--st-font);
  white-space: nowrap;
}
.mixer-setup[data-state='none'] { display: contents; }
.mixer-setup[data-state='none'] .mixer-setup__text { position: absolute; }
.mixer-setup > * { display: none; }
.mixer-setup > .mixer-setup__text { display: inline; }
.mixer-setup[data-state='setting-up'] > :is(.mixer-setup__spin, .mixer-setup__count, .mixer-setup__bar),
.mixer-setup[data-state='ready'] > .mixer-setup__ok,
.mixer-setup[data-state='gave-up'] > :is(.mixer-setup__warn, .mixer-setup__retry) { display: revert; }
.mixer-setup__icon { flex: none; width: 14px; height: 14px; }
.mixer-setup__spin { color: var(--st-text-dim); }
.mixer-setup__ok { color: var(--st-ok); }
.mixer-setup__warn { color: var(--st-warn); }
.mixer-setup__count { font-weight: 600; }
.mixer-setup__bar { width: 120px; height: 4px; border-radius: 2px; background: var(--st-line); overflow: hidden; }
.mixer-setup[data-state='setting-up'] > .mixer-setup__bar { display: block; }
.mixer-setup__fill { display: block; height: 100%; background: var(--st-stem-piano); transform: scaleX(var(--setup-progress, 0)); transform-origin: left; }
.mixer-setup__retry { padding: 0 8px; border: 1px solid var(--st-line); border-radius: 6px; background: none; color: var(--st-text); font: inherit; line-height: 16px; cursor: pointer; }
.mixer-setup__retry:hover { border-color: var(--st-text-dim); }
@media (prefers-reduced-motion: no-preference) {
  .mixer-setup__spin { animation: st-spin 1s linear infinite; }
}
@container mixer-head (width < 640px) {
  .mixer-setup__bar { width: 60px; }
}
/* On a desktop row the pill takes only the room left beside the controls, so it never wraps the header onto another
   line and moves the mixer below (D285: phones wrap it, until their redesign): it grows to its full width when the
   row has the room, else its bar shrinks, then its words end in "…" (role=status keeps them whole). */
@container mixer-head (width >= 640px) {
  .mixer-setup { flex: 999 1 0; max-width: max-content; }
  .mixer-setup > .mixer-setup__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mixer-setup__bar { flex: 0 999 120px; min-width: 32px; } /* the bar gives way before the words */
}

/* "Need more than 2 minutes?" (D235, mixer/window-nudge.ts): the banner and upgrade pop-up's sibling, on the top
   bar's Extract row over its chips; without anchor positioning, or with no Extract row, at the top of the page. */
.mixer-nudge {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 60;
  width: min(520px, calc(100vw - 24px));
  translate: -50% 0;
  pointer-events: none;
}
@supports (position-anchor: --a) {
  .sp-extract--bar { anchor-name: --sp-extract-row; }
  .mixer-nudge[data-place='row'] {
    position-anchor: --sp-extract-row;
    top: anchor(top);
    right: anchor(right);
    left: anchor(left);
    width: auto;
    height: anchor-size(height);
    translate: none;
  }
}
.mixer-nudge__card {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  min-height: 40px;
  padding: 4px 4px 4px 12px;
  border-radius: 10px;
  outline: 1px solid color-mix(in srgb, var(--st-accent) 35%, transparent);
  outline-offset: -0.5px;
  background: linear-gradient(90deg, var(--st-accent-soft), transparent 70%), var(--st-surface);
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--st-shadow) 70%, transparent);
  pointer-events: auto;
}
.mixer-nudge__card[hidden] { display: none; }
.mixer-nudge__picture { display: flex; flex: none; align-items: center; gap: 1.5px; width: 54px; height: 22px; }
.mixer-nudge__bar { flex: 1; height: calc(var(--h) * 100%); border-radius: 1px; background: color-mix(in srgb, var(--st-text-faint) 40%, transparent); }
.mixer-nudge__bar[data-free='true'] { background: var(--st-stem-piano); }
.mixer-nudge__words { flex: 1; min-width: 0; }
.mixer-nudge__title { margin: 0; color: var(--st-text); font: 600 12.5px/16px var(--st-font); }
.mixer-nudge__line { margin: 0; color: var(--st-text-dim); font: 400 11.5px/15px var(--st-font); }
.mixer-nudge__close { display: grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--st-text-dim); cursor: pointer; }
.mixer-nudge__close:hover { background: var(--st-surface-2); color: var(--st-text); }
.mixer-nudge__close:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.mixer-nudge__close .st-icon { width: 14px; height: 14px; }
.mixer-nudge__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A phone's toast: the picture gives up its room to the words. */
@media (max-width: 480px) {
  .mixer-nudge__picture { display: none; }
}

.mixer-window__cues {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  color: var(--st-text-dim);
  font: 500 11.5px/16px var(--st-font);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
.mixer-window__outside .mixer-window__cues { position: absolute; bottom: 8px; }
.mixer-window__cues-upgrade { color: var(--st-accent-ink); font-weight: 600; }
.mixer-window__cues:hover .mixer-window__cues-upgrade { text-decoration: underline; }
/* Only where the lane leaves them room (a window at the song's edge leaves none). */
@container (width < 150px) {
  .mixer-window__outside .mixer-window__pill:not(.mixer-window__playing) { display: none; }
}
/* It wraps to the room beside the window, down to a narrow strip. */
.mixer-window__playing { box-sizing: border-box; max-width: calc(100% - 12px); border-radius: 12px; text-align: center; white-space: normal; }
.mixer-window__playing[hidden] { display: none; }
@container (width < 72px) {
  .mixer-window__outside .mixer-window__playing { display: none; }
}
@container (width < 190px) {
  .mixer-window__outside .mixer-window__cues { display: none; }
}

/* Before a Free split: one Original mix lane, the window over its placeholder bars. */
.mixer-original { display: flex; flex: none; gap: 8px; height: 160px; }
.mixer-original__card {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: calc(var(--mixer-lane-start) - 8px);
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 0 0 0.5px var(--st-line), inset 0 0 0 0.5px var(--st-line);
  background: var(--st-panel);
}
.mixer-original__name { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--st-text); font: 600 14px/18px var(--st-font); }
.mixer-original__icon { flex: none; width: 16px; height: 16px; color: var(--st-text-dim); }
.mixer-original__meta { margin: 0; color: var(--st-text-faint); font: 400 12px/16px var(--st-font); }
.mixer-original__hint { margin: 0; color: var(--st-text-dim); font: 400 12px/17px var(--st-font); }
.mixer-original__wave { position: relative; flex: 1; min-width: 0; border-radius: 8px; cursor: pointer; container: mixer-original-wave / inline-size; }
.mixer-original__bars { position: absolute; inset: 0 var(--mixer-pad); display: flex; align-items: center; gap: 2px; pointer-events: none; }
.mixer-original__bars > span { flex: 1; height: calc(var(--h) * 90%); border-radius: 1.5px; background: color-mix(in srgb, var(--st-text-faint) 40%, transparent); }
.mixer-original__bars.is-lit { inset: 0; clip-path: inset(0 calc((1 - var(--to)) * 100%) 0 calc(var(--from) * 100%)); }
.mixer-original__bars.is-lit > span { background: var(--window); }
/* An upload whose file the tab no longer holds (P294): its bars dimmed, no window to drag. */
.mixer-original.is-missing .mixer-original__bars > span { background: color-mix(in srgb, var(--st-stem-piano) 35%, transparent); }
.mixer-original .mixer-window { inset: 0 var(--mixer-pad); }
/* 180 bars and their 2px gaps need 540px: a narrower lane draws every other bar, then with 1px gaps. */
@container mixer-original-wave (width < 540px) {
  .mixer-original__bars > span:nth-child(even) { display: none; }
}
@container mixer-original-wave (width < 300px) {
  .mixer-original__bars { gap: 1px; }
}
/* Too narrow for the card beside its lane (D224): a full-width lane under the ruler, which it and the playhead
   follow (the drag reads the ruler), and the card below it, where the playhead stops. */
@container st-mixer-tracks (width < 440px) {
  .mixer-timeline:has(> .mixer-original) { --mixer-lane-start: 0px; }
  .mixer-original { flex-direction: column-reverse; height: auto; }
  .mixer-original__card { width: auto; padding: 10px 12px; }
  .mixer-original__wave { flex: none; height: 120px; anchor-name: --mixer-original-lane; }
  /* Without anchor positioning the playhead runs on over the card: still readable. */
  @supports (bottom: anchor(--a top)) {
    .mixer-timeline:has(> .mixer-original) .mixer-playhead { bottom: anchor(--mixer-original-lane bottom, 0px); }
  }
}

/* A split under way (D212): the outline fills left to right with its progress; the rest is dimmed. */
.mixer-window[data-state='splitting'] .mixer-window__box {
  border-color: color-mix(in srgb, var(--window) 30%, transparent);
  background: color-mix(in srgb, var(--window) 5%, transparent);
}
.mixer-window[data-state='splitting'] .mixer-window__box::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--window);
  border-radius: inherit;
  clip-path: inset(0 calc((1 - var(--progress)) * 100%) 0 0);
  transition: clip-path 300ms linear;
}
.mixer-window[data-state='splitting'] .mixer-window__outside { background: color-mix(in srgb, var(--st-surface) 55%, transparent); }
.mixer-window__lead { flex: none; color: var(--st-text); }
.mixer-window__lead[hidden] { display: none; }