/**
 * ppt.css — 只給 ppt.html 用的頁卡樣式。
 *
 * 不併進 workspace.css:那支檔案已經 268 行,接近 200~300 行的單檔上限,
 * 與 canvas.css(inpaint.html 專用)、edit.css 同一先例分出來。
 * .job / .job__bar / .job__fill / .job__msg / .grid__empty / .card-actions
 * 沿用 workspace.css 既有定義,這裡不重複。
 */

.pages {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.page-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.page-card__art { border-radius: var(--radius-sm); overflow: hidden; }
.page-card__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.page-card__blank {
  display: grid;
  place-content: center;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.page-card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.page-card__body .field__input { margin-bottom: 8px; }

/* 重寫/匯出失敗的說明:這兩件事不影響出圖區,失敗態只能寫在卡片上。
 * 用 --warm-ink(定義於 workspace.css)而非 --brand-warm 原色,理由同
 * .job--failed .job__msg —— 原色在淺色主題只有 2.36:1。 */
.page-card__notice {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--warm-ink);
}

@media (max-width: 620px) {
  .page-card { grid-template-columns: 1fr; }
}

/* 頁卡上兩個輸入框的標籤。page_text(印在投影片上的字)與 visual(給生圖用的
 * 畫面描述)語意差很多,沒有標籤的話使用者會把兩者都當成內文在寫。 */
.page-card__label {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-2xs);
  color: var(--text-dim);
}

/* 出圖是連結(點開新分頁看原圖)。a 預設是行內元素,不撐開就會在圖下方
 * 留一條 baseline 的縫。 */
.page-card__art a {
  display: block;
  line-height: 0;
}

/* 頁卡裡的三行編輯器。form.css 的 .line 是為左欄 420px 設計的,
 * 頁卡更窄,強調鈕換行才不會把輸入框擠成一小格。 */
.page-card .lines { margin: 4px 0 0; }
.page-card .line { flex-wrap: wrap; gap: 6px; }
.page-card .line__input { min-width: 0; }

/* 「全部重新生圖」與「匯出 PDF」。★ 它們在左欄的表單**外面** —— 不是委託單的
 * 一部分,而是「已經有一份簡報之後」才成立的動作,所以用一條分隔線與委託單斷開。 */
.deck-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* 「全部重新生圖」下方的告誡。★ 這顆按鈕會蓋掉已經滿意的那幾頁 ——
 * 舊圖檔還在磁碟上,但頁卡不再指向它,在 UI 上救不回來,所以要先說。 */
.deck-actions__caveat {
  margin: 6px 0 12px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-align: center;
}

/* 疊字模式:繁中 100% 正確,「已知會畫錯的字」是假警報,藏起來。
 * ★ 用 CSS 不用 JS —— 那個警告的計算在 badchars.js 裡,加條件會讓它多知道
 *   一件與它無關的事。
 * ★★ 2026-09-07 起掛在**每一張頁卡**上,不是整個結果區 —— 文字產生方式
 *   已經是每頁自己的設定,整份掛一次會讓沒選疊字的那幾頁也少掉警告。 */
.page-card--overlay [data-badchars] { display: none !important; }

/* 簡報庫的清單(對話框內):一列一份,主題大、風格與時間小 */
.decklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.decklist__pick {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); cursor: pointer; font: inherit;
}
.decklist__pick:hover { border-color: var(--brand-warm); }
.decklist__topic { font-size: var(--fs-md); font-weight: 500; }
.decklist__meta { font-size: var(--fs-xs); color: var(--text-dim); }