/**
 * voice.css — 語音工作區的共用外觀(辨識與合成兩頁都引用)。
 *
 * ★ 抽出來的理由是那兩頁本來各寫了一份一模一樣的橫幅圖覆寫。凡是「兩頁都要
 *   長這樣」的規則放這裡,只有某一頁要的留在 stt.css / tts.css。
 */

/* ---------- 主視覺:語音工作區用波形那張,不是生圖那張 ---------- */

/* 橫幅(滿版出血那條)。只覆寫圖,遮罩與混合模式沿用 modebar.css。 */
.ws-modebar::before { background-image: url("../img/card-music.jpg"); }

/* ★ 空狀態的主視覺也要換 —— workspace.css 的預設是 `card-image.jpg`,
 * 那是影像工作區的圖,擺在語音頁上等於告訴使用者「這裡是生圖」。
 *
 * ★ 位置改成 `center` 不沿用預設的 `center 32%`:那個值是為 card-image.jpg
 *   調的(主體偏上),而波形這張的主體**橫在正中間**,用 32% 會把波形切掉。 */
.grid__empty::before {
  background-image: url("../img/card-music.jpg");
  background-position: center;
}

/* ---------- 表單 ---------- */

/* form.css 的 .form__hint 一律是暖色(它本來只用來提醒)。語音這兩頁同一條列
 * 也拿來報進度,而進度不該長得像警告 —— 只有進行中改成安靜色。 */
.form__hint[data-state="run"] { color: var(--text-dim); }