/* Share the camera and upload-video layout across Chinese and English views. */
body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"],
body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] {
  width: min(1480px, 100%);
  max-width: 1480px;
}

body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-workspace-grid,
body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .performance-workspace-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1040px) {
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .family-performance-flow,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .family-performance-flow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 24px;
    padding: 22px 30px;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .family-performance-flow-head,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .family-performance-flow-track,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .family-performance-flow-head,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .family-performance-flow-track {
    grid-column: 1 / -1;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .family-performance-flow-next,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .family-performance-flow-next {
    grid-column: 2;
    grid-row: 3;
    min-width: 180px;
    min-height: 50px;
    padding: 0 20px;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-video-card,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .performance-video-card {
    grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr);
    grid-template-areas: "controls preview";
    align-items: start;
    gap: 20px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-live-copy,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .performance-video-copy {
    grid-area: controls;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-video-preview,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .performance-video-preview {
    grid-area: preview;
    width: 100%;
    min-height: 420px;
    height: min(66vh, 680px);
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-video-preview .stage,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .performance-video-preview .stage {
    min-height: 100%;
    height: 100%;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-live-readiness-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-live-readiness-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"] .performance-overview-back,
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] .performance-overview-back {
    width: auto;
    min-width: 220px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 1039px) {
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-live"],
  body.audience-family.is-performance-mode .performance-workspace-shell[data-performance-module="motion-video"] {
    max-width: 920px;
  }
}