/* P48 — the floating YouTube mini player (decision 56, DESIGN-CHANGES 4.37;
   src/studio/yt-player/card.ts). A fixed card: a 28px header (drag handle
   with the song's title, size toggle, Open on YouTube) over the 16:9 video,
   356×200 small or 480×270 large. Never smaller than 200px tall and never
   hidden while it plays (YouTube's terms). Floating, it is above the panels
   and the floating sheet (30), below the rail, menus and popovers (40),
   tooltips (50) and dialogs (100).

   Docked (decision 60, data-mode="dock"): the same card sits exactly over the
   chart-only mixer's video box (.mixer-dock__video, below), header hidden,
   radius 10, at z-index 5: over the mixer's playhead (4), under everything
   else that floats. It never moves in the page, so the video never reloads. */

.yt-mini {
  --yt-w: 356px;
  --yt-h: 200px;
  position: fixed;
  z-index: 35;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  width: var(--yt-w);
  border: 1px solid var(--st-line-strong);
  border-radius: 12px;
  background: var(--st-panel);
  box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--st-shadow) 70%, transparent);
  overflow: hidden;
  transition: width 160ms ease;
}
.yt-mini[data-size='large'] { --yt-w: 480px; --yt-h: 270px; }
.yt-mini[data-dragging='true'] { transition: none; user-select: none; }

.yt-mini__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding-right: 4px;
  border-bottom: 1px solid var(--st-line);
}

.yt-mini__handle {
  --st-focus-offset: -2px;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 10px;
  border-radius: 11px 0 0 0;
  cursor: grab;
  touch-action: none;
}
.yt-mini[data-dragging='true'] .yt-mini__handle { cursor: grabbing; }

.yt-mini__title {
  overflow: hidden;
  color: var(--st-text-dim);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yt-mini__btn {
  --st-focus-offset: -2px;
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--st-text-dim);
  cursor: pointer;
}
.yt-mini__btn:hover { background: var(--st-surface-2); color: var(--st-text); }
.yt-mini__btn .st-icon { width: 14px; height: 14px; }

.yt-mini__video {
  position: relative;
  width: var(--yt-w);
  height: var(--yt-h);
  background: #000;
  transition: height 160ms ease;
}
.yt-mini__video iframe,
.yt-mini__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-mini__error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 20px 24px;
  background: var(--st-panel);
  text-align: center;
}
.yt-mini__error-title { margin: 0; color: var(--st-text); font-size: 14px; font-weight: 600; }
.yt-mini__error-body { margin: 0; color: var(--st-text-dim); font-size: 12px; line-height: 1.5; }
.yt-mini__link { color: var(--st-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Docked in the chart-only mixer (decision 60) --------------------------------- */

.yt-mini[data-mode='dock'] {
  z-index: 5;
  border: 0;
  border-radius: 10px;
  background: #000;
  box-shadow: none;
  transition: none;
}
.yt-mini[data-mode='dock'] .yt-mini__bar { display: none; }
.yt-mini[data-mode='dock'] .yt-mini__video { transition: none; }

/* The mixer body of a chart-only song: the video's box and the Split stems
   card, over the playhead (it runs through the ruler and the rows below). */
.mixer-dock {
  /* dock.ts sets --dock-w and --dock-h: the body's height at 16:9, leaving 256px for the card, never under 356×200.
     The video's box is out of flow, so it never holds the body open when the window shrinks.
     It fills the scroll box's height under the ruler (26px), up to 280px before the Metronome row gets room,
     so the docked video is never cut off by the scroll box; card.ts floats it when that is under 200px. */
  position: relative;
  z-index: 5;
  display: flex;
  flex: 1;
  align-items: stretch;
  min-height: max(200px, min(280px, calc(100cqh - 26px)));
  padding-left: calc(var(--dock-w, 356px) + 16px);
  background: var(--st-surface);
}
.mixer-dock__video {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dock-w, 356px);
  height: var(--dock-h, 200px);
  border-radius: 10px;
  background: #000;
}

.yt-split {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
  padding: 16px;
  border-radius: 10px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
}
.yt-split__title { margin: 0; color: var(--st-text); font: 600 14px/normal var(--st-font); }
.yt-split__line { margin: 0; color: var(--st-text-dim); font: 400 12px/17px var(--st-font); }
.yt-split__controls { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.yt-split__progress { margin: 0; color: var(--st-text-dim); font: 500 11.5px/16px var(--st-font); font-variant-numeric: tabular-nums; }
.yt-split__progress[hidden] { display: none; }
.yt-split__hint { margin: auto 0 0; color: var(--st-text-faint); font: 400 11px/15px var(--st-font); }
/* The card fills the width beside the video (P73); its lines and chips keep a readable length. */
.mixer-dock:not(:has(> [data-video='float'])) .yt-split > * { max-width: 560px; }

/* A short mixer (the card would be cut off beside the video): no Extract chips
   (the top bar's are the same choice) and no hint. */
@container st-mixer-tracks (max-height: 339px) {
  .yt-split .sp-extract--card,
  .yt-split__hint { display: none; }
}

/* No room to dock (card.ts, data-video="float"): the video floats, its box
   goes, and the card is one compact row: the title and line, then Split stems. */
.mixer-dock__video[data-video='float'] { display: none; }
.mixer-dock:has(> [data-video='float']) { min-height: 0; padding-left: 0; }
.mixer-dock:has(> [data-video='float']) .yt-split {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 16px;
  min-width: 0;
  max-width: none;
  padding: 12px 16px;
}
.mixer-dock:has(> [data-video='float']) .yt-split > * { grid-column: 1; }
.mixer-dock:has(> [data-video='float']) .yt-split__controls { grid-column: 2; grid-row: 1 / span 3; }
.mixer-dock:has(> [data-video='float']) .yt-split .sp-extract--card,
.mixer-dock:has(> [data-video='float']) .yt-split__hint,
.mixer-dock:has(> [data-video='float']) .yt-split[data-splitting='true'] .yt-split__line { display: none; }
.mixer-dock:has(> [data-video='float']) .yt-split__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-extract--card { flex-wrap: wrap; gap: 6px; }
.sp-extract--card .sp-extract__label { flex-basis: 100%; margin: 0 0 2px; }
.sp-extract--card .sp-chip { height: 28px; }

.sp-split--card {
  height: 36px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 13px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--st-accent) 25%, transparent);
}

/* The mixer header's presets and Stem audio wait for stems ("Split stems first"). */
.mixer-presets__item:disabled,
.mixer-stem-audio[data-locked='true'] { opacity: 0.5; cursor: default; }
.mixer-stem-audio[data-locked='true'] .st-switch { cursor: default; }

/* ---- The header's "Split stems" button, in place of "0 stems" (decision 59; a small secondary st-btn, P72) ---- */

.hd-split { flex: none; height: 22px; padding: 0 8px; border-radius: 6px; color: var(--st-accent-ink); }
.hd[data-fit='1'] .hd-split,
.hd[data-fit='2'] .hd-split { display: none; }

@media (prefers-reduced-motion: reduce) {
  .yt-mini,
  .yt-mini__video { transition: none; }
}

/* The error card's fallback (decision 66): the song plays from our server instead. */
.yt-mini__server {
  align-self: flex-start;
  height: 32px;
  margin-top: 6px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--st-text-strong);
  color: var(--st-bg);
  font: 600 12.5px/1 var(--st-font);
  cursor: pointer;
}
.yt-mini__server:hover { background: var(--st-text); }

/* ---- An example sets up its mixer (decision 67; prep.ts) -------------------------- */

/* The Split stems card becomes "Preparing the mixer…" while an example splits. */
.yt-split[data-prep='true'] > :not(.yt-prep) { display: none; }
/* An example where the browser can't split (P28): the reason in short, no controls. */
.yt-split[data-unsupported='true'] .yt-split__controls,
.yt-split[data-unsupported='true'] .yt-split__hint { display: none; }

.yt-prep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.yt-prep[hidden] { display: none; }
.yt-prep__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.yt-prep__title { overflow: hidden; margin: 0; color: var(--st-text); font: 600 14px/18px var(--st-font); text-overflow: ellipsis; white-space: nowrap; }
.st-btn.yt-prep__cancel { flex: none; gap: 4px; height: 24px; padding: 0 8px; color: var(--st-text-dim); font-size: 12px; font-weight: 500; }
.st-btn.yt-prep__cancel:hover { color: var(--st-text); }
.st-btn.yt-prep__cancel .st-icon { width: 12px; height: 12px; }
.yt-prep__overall { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.yt-prep__pct { color: var(--st-text); font: 600 28px/30px var(--st-font); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.yt-prep__eta { margin-left: auto; overflow: hidden; color: var(--st-text-dim); font: 400 11.5px/16px var(--st-font); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sp-card__bar.yt-prep__bar { flex: none; height: 6px; border-radius: 3px; }

/* The current step, in the tracker's style (design 02): marker, title, and its line on the right. */
.yt-prep__steps { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }
.yt-prep .sp-step { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.yt-prep .sp-step__line { display: none; }
.yt-prep .sp-step__marker { width: 20px; height: 20px; border-radius: 10px; }
.yt-prep .sp-step__title { flex: none; font-size: 12.5px; white-space: nowrap; }
.yt-prep .sp-step__sub { overflow: hidden; margin-left: auto; text-overflow: ellipsis; white-space: nowrap; }

/* A row per stem: the splitting page's rows, 18px tall, with the percent or Done. */
.yt-prep__stems { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.yt-prep .sp-stem { gap: 8px; height: 18px; padding: 0; border-radius: 0; outline: 0; background: none; }
.yt-prep .sp-stem__icon { width: 16px; height: 16px; border-radius: 4px; }
.yt-prep .sp-stem__icon .st-icon { width: 10px; height: 10px; }
.yt-prep .sp-stem__name { width: 52px; font-size: 12px; }
.yt-prep .sp-stem__bar { height: 4px; }
/* The percent is the stem colour lifted toward the text colour, so every stem reads at 4.5:1 or more (Bass on dark was 4.18:1); the swatches keep the stem colour. */
.yt-prep .sp-stem__pct { width: 34px; color: color-mix(in srgb, var(--stem-color) 80%, var(--st-text)); font-size: 10.5px; }
.yt-prep .sp-stem .sp-stem__status,
.yt-prep .sp-stem .sp-stem__preview,
.yt-prep .sp-stem .sp-stem__add { display: none; }

/* A short mixer: the rows become a line of coloured dots (queued a ring, working half, done full). */
@container st-mixer-tracks (max-height: 339px) {
  .yt-prep__stems { flex-direction: row; gap: 6px; }
  .yt-prep .sp-stem { height: 10px; }
  .yt-prep .sp-stem > :not(.sp-stem__icon) { display: none; }
  .yt-prep .sp-stem__icon { width: 10px; height: 10px; border-radius: 5px; outline: 1.5px solid var(--stem-color); outline-offset: -1.5px; background: transparent; }
  .yt-prep .sp-stem__icon .st-icon { display: none; }
  .yt-prep .sp-stem[data-state='working'] .sp-stem__icon { background: color-mix(in srgb, var(--stem-color) 45%, transparent); }
  .yt-prep .sp-stem[data-state='done'] .sp-stem__icon { background: var(--stem-color); }
}

/* The video floats: one compact row, "42%" | title, step, ETA over the bar | dots | Cancel. */
.mixer-dock:has(> [data-video='float']) .yt-split > .yt-prep {
  display: grid;
  grid-column: 1 / -1;
  grid-template-areas: 'pct title step eta dots cancel' 'pct bar bar bar dots cancel';
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px 12px;
}
.mixer-dock:has(> [data-video='float']) .yt-split > .yt-prep[hidden] { display: none; }
.mixer-dock:has(> [data-video='float']) .yt-prep :is(.yt-prep__head, .yt-prep__overall) { display: contents; }
.mixer-dock:has(> [data-video='float']) .yt-prep__pct { grid-area: pct; font-size: 24px; line-height: 28px; }
.mixer-dock:has(> [data-video='float']) .yt-prep__title { grid-area: title; font-size: 13px; }
.mixer-dock:has(> [data-video='float']) .yt-prep__steps { grid-area: step; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-step__marker { width: 16px; height: 16px; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-step__sub { margin-left: 0; }
.mixer-dock:has(> [data-video='float']) .yt-prep__eta { grid-area: eta; margin: 0; }
.mixer-dock:has(> [data-video='float']) .yt-prep__bar { grid-area: bar; }
.mixer-dock:has(> [data-video='float']) .yt-prep__stems { grid-area: dots; flex-direction: row; gap: 6px; }
.mixer-dock:has(> [data-video='float']) .yt-prep__cancel { grid-area: cancel; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-stem { height: 10px; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-stem > :not(.sp-stem__icon) { display: none; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-stem__icon { width: 10px; height: 10px; border-radius: 5px; outline: 1.5px solid var(--stem-color); outline-offset: -1.5px; background: transparent; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-stem__icon .st-icon { display: none; }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-stem[data-state='working'] .sp-stem__icon { background: color-mix(in srgb, var(--stem-color) 45%, transparent); }
.mixer-dock:has(> [data-video='float']) .yt-prep .sp-stem[data-state='done'] .sp-stem__icon { background: var(--stem-color); }

/* "Splitting · 42%": the mixer's header row, and the floating player's header while the mixer isn't shown. */
.yt-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--st-accent) 12.5%, transparent);
  color: var(--st-accent-ink);
  font: 600 11px/1 var(--st-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.yt-badge[hidden],
.yt-mini[data-mixer='true'] .yt-badge { display: none; }
.yt-mini__bar .yt-badge { margin-right: 4px; }