/**
 * form.css — 委託單表單與共用按鈕。
 *
 * 從 workspace.css 拆出來(Task 4,原檔案追加出圖結果區後會破 300 行)。
 * .btn 系列雖然長在表單裡,但出圖網格(workspace.js 的 mountResultGrid)
 * 的動作列與重試鈕也共用同一套類別,所以四個 image/*.html 都要引入本檔,
 * 不是只有生成模式的委託單頁面。
 *
 * ★ 收合式進階欄位(`.recipe*`)已於 2026-09-03 抽到 advfield.css —— 本檔加上
 *   尺寸欄位後破 300 行,而那一塊本來就是獨立元件。四頁一樣都要引入那一支。
 */

.field { display: block; margin-bottom: 14px; }

.field__label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.field__input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  resize: vertical;
}

.field__input:focus {
  outline: none;
  border-color: var(--brand-cool);
}

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field--narrow { flex: 0 0 110px; }

.lines { margin: 0 0 14px; padding: 0; border: 0; }

.line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.line__input { flex: 1; }

.line__preview { flex-basis: 100%; font-size: var(--fs-sm); line-height: 1.8; }
.seg--base { color: var(--text-mid); }

/* 強調段:單色暖橘,不做漸層。用 --warm-ink 而非 --brand-warm 原色 ——
 * 這是「這段字會被強調」的示意,不是純裝飾,讀不出來就沒有意義
 * (原色對淺色 --surface 只有 2.36:1,見 workspace.css 的代幣註解)。 */
.seg--accent {
  color: var(--warm-ink);
  font-weight: 700;
}

/* 字數提示:ok 態是 --text-dim(3.74:1)。warn 態若用 --brand-warm 原色
 * 只有 2.36:1 —— 切到「要注意」反而比常態更難讀,所以同樣走 --warm-ink。 */
.lines__hint { font-size: var(--fs-sm); color: var(--text-dim); }
.lines__hint[data-state="warn"] { color: var(--warm-ink); }

/* 送出前的必要性檢查訊息。四個模式共用同一個類別、同一個位置(送出鈕正上方)
 * ——先前四頁各用一種驗證方式(不驗證 / JS+提示 / JS+靜默 / HTML required),
 * 使用者每換一個模式就要重學一次「按下去沒動靜」代表什麼。
 * aria-live 讓輔助技術也讀得到;沒有訊息時不佔視覺重量。 */
.form__hint {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  color: var(--warm-ink);
}

/* 沒有訊息時連下邊距也收掉,不要在送出鈕上方留一條空隙。
 * 用 :empty 而不是 display:none —— 這是 aria-live 區域,留在無障礙樹裡
 * 才不會有「訊息出現時整個區域才剛被建立」的播報時機問題。 */
.form__hint:empty { margin: 0; }

.btn {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-md);
  color: var(--text-mid);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.btn:hover { color: var(--text); border-color: var(--line-strong); }

/* 進行中的按鈕(送出鈕與卡片動作鈕共用):文字換成「◯◯中…」並鎖住,
 * 避免連按兩次讓兩個請求互相覆蓋。定義在 form.css 而不是 ppt.css ——
 * 四個模式的送出鈕都會用到,不是 PPT 專屬。 */
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn--primary {
  width: 100%;
  margin-top: 6px;
  border-color: transparent;
  background: var(--brand-warm);
  color: #17140f;          /* 橘底上 9:1,固定值不隨主題變 */
  font-weight: 700;
}

.btn--ghost { flex: none; font-size: var(--fs-sm); padding: 7px 12px; }

/* 欄位下方的補充說明(目前只有修改模式的強度在用) */
.field__note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ---------- 參考圖槽(修改與局部重繪共用) ---------- */

/* 瀏覽器預設的 fieldset 邊框/留白會露出來 —— 與 form.css 的 .lines 同一個修法 */
.refs { margin: 0 0 14px; padding: 0; border: 0; }

/* ★ 固定三欄,不用 flex:1 —— 局部重繪只有一個槽位,flex 會讓它撐滿整欄變成
 *   一個巨大的方框。固定三欄讓「一個槽」與「三個槽」的大小完全一致。 */
.refs__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.slot__pick {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow: hidden;
}

.slot--over .slot__pick { border-color: var(--brand-cool); }

.slot__hint { font-size: var(--fs-xs); color: var(--text-dim); }
.slot__pick img { width: 100%; height: 100%; object-fit: cover; }

.slot__x {
  position: absolute;
  top: 4px; right: 4px;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--fs-2xs);
}

/* 資訊圖的條目列(js/items.js)。★ 圖示與它的文字是**同一列**的三個欄位 ——
 * 分成兩份清單模型會對錯格(picturePrompt 第 5 條),介面上綁在一起,
 * 使用者就不會把它們想成可以各自增減的兩件事。 */
.item {
  display: grid;
  grid-template-columns: 22px 1fr 30px;
  align-items: start;
  gap: 8px;
  margin-bottom: 10px;
}

.item__no {
  padding-top: 9px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-align: right;
}

.item__fields { display: grid; gap: 6px; }

.item__drop { padding: 7px 0; line-height: 1; }

.items__foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.items__count { font-size: var(--fs-xs); color: var(--text-dim); }

/* fieldset 的預設邊框與內距會讓它跟旁邊的 .field 對不齊 */
.items-field { margin: 0 0 12px; padding: 0; border: 0; }

/* 輸出尺寸的自訂欄位(js/sizefield.js)。★ 用 div 不是 label —— 兩個輸入框
 * 沒辦法共用一個 label,標籤因此是 span,靠 aria 以外的視覺位置對應。 */
.sizefield__custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.sizefield__x { color: var(--text-dim); }

/* 超過原生 1.5 倍的警語。與字數提示同一套語彙(.lines__hint),
 * 一樣用 --warm-ink 而不是 --brand-warm 原色 —— 後者對淺色底只有 2.36:1。 */
.field__note[data-state="warn"] { color: var(--warm-ink); }

/* 文字產生方式的二選一。★ 兩個選項都要看得到說明 —— 這個選擇有取捨,
 * 只給名字的話使用者要試過才知道差在哪。生成模式與 PPT 都用,所以放在四頁共用的 form.css。 */
.textmode { margin: 0 0 14px; padding: 0; border: 0; }

.textmode__opt {
  display: flex;
  gap: 9px;
  align-items: start;
  margin-top: 7px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}

.textmode__opt input { margin-top: 3px; accent-color: var(--brand-warm); }
.textmode__opt b { display: block; font-size: var(--fs-md); color: var(--text); }

.textmode__opt small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

/* 頁卡上的緊湊版:省略說明、橫排。★ 說明在左邊表單已經講過一次,
 * 每張頁卡再重複一次會把卡片撐得比它的圖還長。 */
.textmode--compact { margin: 10px 0 0; }
.textmode--compact .textmode__opt { display: inline-flex; margin-right: 6px; padding: 5px 9px; }
.textmode--compact .textmode__opt b { font-size: var(--fs-sm); }

/* 指令範本(js/prompthints.js)。定義在 form.css 而不是 edit.css ——
 * 局部重繪要用同一個元件配不同的清單,屆時不必再搬一次。 */
.hints { margin-bottom: 12px; }

.hints__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* 可播放的清單:曲庫(js/songs.js)與語音庫(js/speeches.js)共用。
 * ★ 與圖庫的縮圖網格不同 —— 音訊要的是可播放的列表,所以直向堆疊。
 * ★★ 放在 form.css 而不是 music.css —— 2026-09-10 語音頁也要用,
 *   而語音頁不會載入 music.css。第一次共用時就搬,不要等到第三次。 */
.songs { display: grid; gap: 14px; }

.songs__item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.songs__audio { width: 100%; }

/* ★ meta 用 pre-line:第二行是使用者寫的 caption,可能很長也可能有換行 */
.songs__meta {
  margin: 0;
  white-space: pre-line;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

.songs__acts { display: flex; gap: 8px; margin: 0; }

/* 這台機器做不到的選項(js/feasibility.js):停用 + 變淡,原因寫在後面的小字 */
.is-infeasible { color: var(--text-dim); cursor: not-allowed; }