/* 影片工作區。只有 video/shot.html 引用。
   ★ 主視覺換成影片那張 —— 擺錯圖等於告訴使用者「這裡是生圖」。 */

.ws-modebar::before { background-image: url("../img/card-video.jpg"); }
.grid__empty::before { background-image: url("../img/card-video.jpg"); }

.field__count {
  margin-left: 8px;
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--text-dim);
}
.field__count[data-state="warn"] { color: var(--warm-ink); font-weight: 700; }

.vid { display: flex; flex-direction: column; gap: 12px; }

.vid-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ★ 直式 9:16,高度綁在視窗上 —— 用 % 會落進「列高取決於內容、內容又想以
     列高為上限」的循環(出圖卡那條地雷同一個成因)。 */
.vid-card__player {
  display: block;
  max-height: 62vh;
  max-width: 100%;
  margin: 0 auto 10px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.vid-card__line { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 500; }

/* ★ 「對台詞幾成、聽到什麼」要換行看得清楚 —— 那是這一鏡可不可信的唯一線索 */
.vid-card__meta {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-line;
}

.vid-card__acts { display: flex; gap: 8px; margin: 0; }

/* 尺寸與長度並排。★ 兩個都是「選一個」而且說明都短,分兩行會把表單拉太長 */
.field--row { display: flex; gap: 12px; }
.field--half { flex: 1; min-width: 0; margin-bottom: 0; }

/* 翻譯後真正送出去的英文。★ 一定要看得見 —— 那是「為什麼出來是這樣」的答案 */
.vid-card__english {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--brand-cool);
  background: var(--surface-soft);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ---------- 整支漫劇 ---------- */

.stages { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.stages .btn { margin: 0; }

.shots { display: flex; flex-direction: column; gap: 12px; }

.shot {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.shot__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.shot__no { font-size: var(--fs-sm); font-weight: 700; flex: none; }
.shot__kind { width: auto; flex: none; padding: 4px 8px; font-size: var(--fs-2xs); }
.shot__state {
  flex: 1; min-width: 0;
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot__state[data-state="warn"] { color: var(--warm-ink); }

/* ★ 圖/影片在左、可編輯的文字在右 —— 窄螢幕疊成上下 */
.shot__body { display: flex; gap: 12px; }
.shot__art { flex: 0 0 34%; min-width: 0; }
.shot__text { flex: 1; min-width: 0; }
.shot__text .field { margin-bottom: 8px; }

.shot__img, .shot__video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.shot__blank {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
}

.shot__acts { display: flex; gap: 8px; margin: 10px 0 0; }
.shot--movie .shot__video { max-height: 50vh; width: auto; margin: 0 auto; }

@media (max-width: 700px) {
  .shot__body { flex-direction: column; }
  .shot__art { flex: none; }
}

/* 擴寫過的英文鏡頭描述。★ 真正送進 LTX 的是它,不是上面那句 —— 所以要看得到,
   但它是「說明」不是「可改的欄位」,字級與顏色都退一階。 */
.shot__expanded {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--text-dim);
}

/* 合成按鈕那一列。★ 擺在成果區上面 —— 使用者要的是成品那一支。 */
.vid__bar { margin: 0 0 14px; }

/* 成品卡與段落卡的區別要一眼看得出來 —— 不然使用者不知道哪個是最後要的。 */
.vid-card__no {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.vid-card--film {
  border: 1px solid var(--brand-warm);
  border-radius: 10px;
  padding: 12px;
}
.vid-card--film .vid-card__no { color: var(--brand-warm); font-weight: 700; }

/* 影片庫裡的預覽播放器。★ 限高,不然一支直式影片會把整個對話框撐爆。 */
.vidlib__player {
  width: 100%;
  max-height: 34vh;
  border-radius: 8px;
  background: var(--surface-soft);
}