/**
 * canvas.css — 遮罩畫布。只有 inpaint.html 引用。
 *
 * ★ R17:.mask 的 aspect-ratio 只是「還沒選圖」時的預設值 —— canvas.js 的
 *   loadImage() 讀到底圖後會用 inline style 覆寫成底圖的實際比例
 *   (本專案風格涵蓋 1:1、4:5,不是全部都是 16:9)。
 */

.mask {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mask canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 遮罩層內部是黑白;顯示時染成半透明暖橘。
 * ★ 單色,不做漸層 —— 這兩個品牌色混合會出橄欖綠。 */
.mask canvas[data-mask] {
  opacity: 0.5;
  mix-blend-mode: screen;
  filter: sepia(1) saturate(6) hue-rotate(-15deg);
  cursor: crosshair;
  touch-action: none;      /* 沒有這行,手機上會變成捲頁而不是塗抹 */
}

.mask__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* canvas.js 用 hint.hidden = true 蓋掉提示文字,但瀏覽器內建的
 * [hidden] { display: none } 跟上面這條 .mask__hint 特異度相同,
 * 後載入的樣式表會贏 —— 不補這條,選圖後提示字仍會疊在底圖上。 */
.mask__hint[hidden] { display: none; }

.mask__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
}

.mask__brush {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.mask__brush input { flex: 1; }