/* Reserve selection rows so selecting a range never moves the download line. */
.result:not(.comparison-dashboard) .editor-workspace > .selection-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 46px 40px;
  min-height: 110px;
  row-gap: 8px;
  align-items: center;
}
.result:not(.comparison-dashboard) .selection-bar > .transport { grid-row: 1; }
.result:not(.comparison-dashboard) .selection-bar > .selection-tools { grid-row: 2; justify-content: flex-end; margin: 0; min-height: 40px; }
.result:not(.comparison-dashboard) .selection-bar > .selection-hint { grid-row: 2; margin: 0!important; align-self: center; }
.result:not(.comparison-dashboard) > .downloads { position: relative; height: 94px!important; padding-block: 20px 14px; align-items: flex-start; }
.result:not(.comparison-dashboard) .download-note { position: relative; font-size: 17px; font-weight: 600; color: var(--text); min-height: 48px; }
.result:not(.comparison-dashboard) .downloads > button { height: 48px; min-height: 48px; padding-inline: 20px; font-size: 16px; }
.result:not(.comparison-dashboard) .downloads > button svg { width: 18px; height: 18px; }
.result:not(.comparison-dashboard) .downloads .export-format { flex-basis: 196px; width: 196px; }
.result:not(.comparison-dashboard) .export-menu { width: 196px; }
.result:not(.comparison-dashboard) .export-menu > summary { height: 48px; font-size: 16px; }
@media (min-width: 900px) and (max-height: 650px) {
  .result:not(.comparison-dashboard) { padding-block: 20px; }
  .result:not(.comparison-dashboard) .editor-workspace > .selection-bar { grid-template-rows: 40px 34px; min-height: 96px; padding-top: 12px!important; }
  .result:not(.comparison-dashboard) > .downloads { margin-top: 20px; }
}
@media (max-width: 650px) {
  .result:not(.comparison-dashboard) .editor-workspace > .selection-bar { grid-template-rows: 88px 88px; min-height: 200px; }
  .result:not(.comparison-dashboard) .selection-bar > .transport { min-width: 0; }
  .result:not(.comparison-dashboard) .selection-bar > .selection-tools { justify-content: flex-start; align-self: start; flex-wrap: wrap; min-height: 88px; }
  .result:not(.comparison-dashboard) .selection-bar > .selection-hint { align-self: start; }
  .result:not(.comparison-dashboard) > .downloads { height: auto!important; padding-bottom: 42px; }
  .result:not(.comparison-dashboard) .downloads > button { padding-inline: 8px; font-size: 15px; }
  .result:not(.comparison-dashboard) .downloads .export-format { width: 196px; }
}

/* All progress phases share an intrinsic, centered group that can fit short windows. */
.start:has(.processing-simple) { min-height: calc(100dvh - 66px); }
.processing-simple { box-sizing: border-box; min-height: calc(100dvh - 66px); display: flex; align-items: center; justify-content: center; padding: 64px 24px; }
.processing-simple .processing-group { position: static; transform: none; width: min(760px, 100%); }
.processing-simple .progress-ring { width: clamp(108px, 11dvh, 148px); height: clamp(108px, 11dvh, 148px); }
.processing-simple .progress-stage { min-height: clamp(108px, 11dvh, 148px); }
.processing-simple .progress-current { font-size: clamp(16px, 1vw, 20px); }
@media (max-height: 650px) {
  .processing-simple { padding-block: 48px; }
  .processing-simple .processing-group { gap: 20px; }
  .processing-simple #processing-title { font-size: 30px; margin-bottom: 12px; }
  .processing-simple .progress-ring { width: 108px; height: 108px; }
}
@media (max-width: 650px) {
  .start:has(.processing-simple), .processing-simple { min-height: calc(100dvh - 60px); }
  .processing-simple .progress-hint { font-size: 16px; max-width: 100%; }
  .processing-simple #processing-title { font-size: 28px; }
}

/* Keep the workspace centered in the space above a bottom download dock.
   Intrinsic header height and content sizing also accommodate narrow windows. */
#app:has(> .result:not(.comparison-dashboard)) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
#app:has(> .result:not(.comparison-dashboard)) > header { flex-shrink: 0; }
.result:not(.comparison-dashboard) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
  padding-block: 0;
}
.result:not(.comparison-dashboard) > .editor-workspace {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-block: 32px;
}
.result:not(.comparison-dashboard) .editor-workspace > :is(.edit-toolbar, .timeline, .selection-bar) {
  flex-shrink: 0;
  width: 100%;
}
.result:not(.comparison-dashboard) > .downloads {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex-shrink: 0;
  align-self: stretch;
  margin-top: 0;
  background: var(--bg, #111315);
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
@media (max-width: 650px) {
  .result:not(.comparison-dashboard) > .editor-workspace { padding-block: 24px; }
  .result:not(.comparison-dashboard) > .downloads {
    padding-bottom: max(42px, env(safe-area-inset-bottom));
  }
}
@media (max-height: 650px) {
  .result:not(.comparison-dashboard) > .downloads { position: relative; }
  .result:not(.comparison-dashboard) > .editor-workspace { padding-block: 20px; }
}

/* Export notices stay above the dock instead of obscuring its buttons. */
body:has(.result:not(.comparison-dashboard)) > #toast.visible {
  bottom: calc(106px + env(safe-area-inset-bottom));
  z-index: 30;
}
@media (max-width: 650px) {
  body:has(.result:not(.comparison-dashboard)) > #toast.visible {
    bottom: calc(181px + env(safe-area-inset-bottom));
  }
}

/* Wide workspaces place range editing beside playback without changing row height.
   Narrow windows keep the reserved second row so selection never shifts the tracks. */
.result:not(.comparison-dashboard) > .editor-workspace {
  container-type: inline-size;
}
@container (min-width: 1120px) {
  .result:not(.comparison-dashboard) .editor-workspace > .selection-bar {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
  }
  .result:not(.comparison-dashboard) .selection-bar > .transport {
    grid-column: 1;
    width: auto;
  }
  .result:not(.comparison-dashboard) .selection-bar > .selection-tools {
    grid-row: 1;
    grid-column: 2;
    flex-basis: auto;
    flex-wrap: nowrap;
    align-self: center;
    justify-self: end;
  }
  .result:not(.comparison-dashboard) .selection-bar > .selection-hint {
    grid-column: 1 / -1;
  }
}