/* P30 — the song header's Download menu (decision 42), src/studio/header/
   download-menu.ts and download-view.ts.

   It is the Layout menu's popover, title row, groups, check boxes,
   segmented control and footer (layout-menu.css: .lm-popover, .lm-head,
   .lm-group, .lm-check, .lm-foot), narrower, right-aligned 8px under the
   Download button. What is new: the file rows (a stem's colour dot, a hint
   on the right, stems indented under "All stems"), the format line, the
   progress bar with Cancel, and the busy button. Linked from index.html after header.css. */

.dl { position: relative; display: flex; }

.dl-popover.lm-popover {
  width: 320px;
  max-height: calc(100vh - 140px);
  text-align: left;
}
.dl-menu:focus { outline: none; }

.dl-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dl-group.lm-group { gap: 2px; }
.dl-group .lm-group__title { margin-bottom: 6px; }

/* ---- Files ------------------------------------------------------------------ */

.dl-row.lm-check {
  flex: none;
  gap: 8px;
  min-height: 28px;
  color: var(--st-text);
  font-size: 13px;
}
.dl-row--stem.lm-check { padding-left: 23px; }
.dl-row__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-row__hint {
  flex: none;
  margin-left: auto;
  color: var(--st-text-faint);
  font-size: 11.5px;
}
.dl-row:has(.lm-check__input:disabled) { opacity: 0.45; cursor: default; }
.dl-row:has(.lm-check__input:disabled) .lm-check__input { cursor: default; }
/* "All stems" with only some chosen: a dash in the box. */
.dl-menu .lm-check__input:indeterminate + .lm-check__box { outline-color: var(--st-accent); }
.dl-menu .lm-check__input:indeterminate + .lm-check__box::after {
  content: '';
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--st-accent);
}
.dl-menu .lm-check__input:indeterminate + .lm-check__box .lm-check__icon { display: none; }

.dl-row__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dl-dot); }
.dl-row__dot--vocals { --dl-dot: var(--st-stem-vocals); }
.dl-row__dot--drums { --dl-dot: var(--st-stem-drums); }
.dl-row__dot--bass { --dl-dot: var(--st-stem-bass); }
.dl-row__dot--piano { --dl-dot: var(--st-stem-piano); }
.dl-row__dot--guitar { --dl-dot: var(--st-stem-guitar); }
.dl-row__dot--other { --dl-dot: var(--st-stem-other); }

/* ---- Format ----------------------------------------------------------------- */

.dl-format { display: flex; align-items: center; gap: 10px; }
.dl-format__detail { color: var(--st-text-dim); font: 400 12px/normal var(--st-font); }
.dl-applies {
  margin: 8px 0 0;
  color: var(--st-text-faint);
  font: 400 11.5px/16px var(--st-font);
}

.dl-empty {
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--st-text-dim);
  font: 400 13px/19px var(--st-font);
}

/* ---- Status and footer ------------------------------------------------------ */

.dl-status {
  margin: 0;
  padding: 0 16px 12px;
  overflow-wrap: anywhere;
  color: var(--st-text-dim);
  font: 400 12px/16px var(--st-font);
}
.dl-status:empty { display: none; }

.dl-foot.lm-foot { min-height: 56px; box-sizing: border-box; }
.dl-foot__idle { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.dl-count { flex: 1; min-width: 0; color: var(--st-text-faint); font: 400 12px/normal var(--st-font); }
.dl-action.st-btn { font-size: 12.5px; }

.dl-progress { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.dl-progress[hidden],
.dl-foot__idle[hidden] { display: none; }
.dl-progress__text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dl-progress__line {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--st-text);
  font: 500 12px/16px var(--st-font);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dl-progress__percent { color: var(--st-text-dim); font: 500 11px/16px var(--st-font-mono); }
.dl-progress__row { display: flex; align-items: center; gap: 10px; }
.dl-progress__bar {
  position: relative;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--st-surface-2);
}
.dl-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--dl-progress, 0) * 100%);
  border-radius: 3px;
  background: var(--st-accent);
  transition: width 0.2s linear;
}
.dl-cancel.st-btn { margin-right: -4px; }

/* While an export runs, the choices can't change (inert): their boxes dim, the text keeps its contrast. */
.dl-menu--running :is(.lm-check__box, .dl-row__dot, .st-seg) { opacity: 0.5; }

/* ---- The Download button: open (as the Layout button), and while an export runs ---- */

.hd-actions .dl > .st-icon-btn[aria-expanded='true'] { background: var(--st-surface-2); color: var(--st-text); }

.hd-actions .st-icon-btn.dl-button--busy { position: relative; color: var(--st-accent); }
.dl-button--busy::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 7px;
  width: calc((100% - 14px) * var(--dl-progress, 0));
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}