/* retouch.css — 文字精修專屬:字塊清單、外框層、點亮。只有 image/retouch.html 引用。
   ★ 顏色只用專案的兩個色相(暖橘 / 冷青)與無彩色;點亮用暖橘,不另加新色。 */

.blocks { display: flex; flex-direction: column; gap: 8px; }
.blocks__empty { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; }
/* 工具列:篩選一組、批次動作一組,窄了就換行 */
.blocks__bar { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.blocks__group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.blocks__bar .btn--xs { font-size: var(--fs-xs); padding: 4px 9px; }
.blocks__bar .btn--on, .proof .btn--on { border-color: var(--brand-warm); color: var(--warm-ink); }

.blk {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 10px 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--text-dim);       /* 保留:灰 */
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.blk[data-act="replace"] { border-left-color: var(--brand-warm); }
.blk[data-act="erase"] { border-left-color: var(--brand-cool); }
.blk--changed { border-color: var(--brand-warm); }
.blk--changed[data-act="erase"] { border-color: var(--brand-cool); }
/* 標頭條:編號 + 縮圖,淺灰底把「這是一塊的開頭」畫出來 */
.blk__head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 -10px 0 -12px; padding: 6px 10px 6px 12px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}
.blk__no {
  flex: none; min-width: 1.6em; padding: 0 5px; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.5;
  color: var(--text-mid); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.blk__thumb { display: block; height: 28px; max-width: 200px; border-radius: 3px; }
.blk__main { display: flex; flex-direction: column; gap: 4px; }
.blk__text { width: 100%; }
.blk__ocr { color: var(--text-dim); font-size: var(--fs-2xs); }
.blk__shrunk { color: var(--warm-ink); font-size: var(--fs-2xs); }
.blk__actions { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); }
.blk__act { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* ★ 保留的塊**不**收起字型/字級(使用者 2026-09-11 要求恢復):每塊長得一樣,
   眼睛掃過去才對得齊;動作只靠左側色條分辨。 */
/* 字型 + 字級一列:下拉吃剩下的寬,字級欄位固定 5 個字寬 */
.blk__type { display: flex; gap: 8px; align-items: center; }
.blk__type .blk__font { flex: 1; min-width: 0; }
.blk__size { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: var(--fs-sm); white-space: nowrap; }
.blk__size input { width: 5.5em; }
.blk__type .blk__align { flex: none; width: auto; }

/* 校對按鈕:回饋在按鈕自己身上(runBusy 換文字),旁邊一行小字說結果 */
.proof { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.proof__note { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; }

/* 右欄外框層 */
.overlay { position: relative; width: 100%; margin-inline: auto; }
.overlay__img { display: block; width: 100%; height: 100%; }
.overlay__boxes { position: absolute; inset: 0; pointer-events: none; }
.overlay__box {
  position: absolute;
  border: 1.5px solid var(--brand-cool);
  border-radius: 2px;
  opacity: 0.7;
}
.overlay__box--keep { border-style: dashed; opacity: 0.4; }
.overlay__box--erase { border-color: var(--text-dim); }
/* 拉框模式:十字游標、正在拉的框用暖橘虛線 */
.overlay--drawing { cursor: crosshair; touch-action: none; user-select: none; }
.overlay__rubber { position: absolute; border: 1.5px dashed var(--brand-warm); border-radius: 2px; pointer-events: none; }
.overlay__box--hot { border-color: var(--brand-warm); opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-warm) 35%, transparent); }

/* 背景補法:兩個單選鈕各佔一行,說明用小字掛在後面 */
.fill { margin: 0 0 12px; padding: 0; border: 0; }
.fill__opt { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-md); margin-top: 6px; }
.fill__opt small { color: var(--text-dim); font-size: var(--fs-xs); }