#detail {
  align-items: flex-start;
  overflow-y: auto;
  padding: 16px;
}

#detail > .modal {
  width: min(1040px, 100%) !important;
  max-height: none;
  margin: auto;
}

#detail .modalbody {
  padding: 18px;
}

#detail .detail {
  grid-template-columns: minmax(380px, 1.1fr) minmax(300px, .9fr);
  align-items: start;
}

/* All completed demo videos are 1080×1920. The width is limited by both the
   available column and viewport height, so the entire 9:16 frame is visible. */
#detail .preview {
  width: min(100%, 420px, calc((100vh - 190px) * 9 / 16));
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

#detail .preview video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center;
  background: #000;
}

#detail .preview .pill {
  z-index: 2;
}

#detail .modalfoot {
  position: sticky;
  bottom: 0;
  background: var(--card);
  z-index: 3;
}

.render-row__title { max-width: 560px; white-space: normal; line-height: 18px; }

.render-table td { vertical-align: middle; }

@media (max-width: 800px) {
  #detail { padding: 6px; }
  #detail .detail { grid-template-columns: 1fr; }
  #detail .preview {
    width: min(100%, 360px, calc((100vh - 170px) * 9 / 16));
  }
  .render-row__title { max-width: 260px; }
}