/* ============================================================
   Ztor — Input (form field)
   ============================================================ */

/* 刪除紀錄（2026-07-10）：.ztor-input / .ztor-input--xs/sm/lg/xl / .ztor-textarea 替身 class
   已移除，未被任何實頁使用（產品頁一律用 .input / .textarea，無尺寸變體）。
   design-system.html 的 demo 同輪已改用真身 .input / .textarea。
   真身規則原住 shared.css:805-835，後續依元件對齊調整為陰影邊線與 4px focus glow。此檔本身非棄用檔，持續使用中。 */

/* 高度 2026-07-21（STYLE-DECISIONS Q25）：由「padding 撐開」改成「吃 --control-h-* token」。
   舊做法是 padding 9×2 ＋ font-size 14 × line-height 1.5 = 39px——算出來一定有零頭，
   而且各元件各自調 padding 就會長出 41.5／37.5／35.5 這些對不起來的高度（盤點見 docs/input高度盤點-2026-07-21.md）。
   單行控件一律 height: var(--control-h-sm)＝36px，與 .btn 同值：工具列裡搜尋框與按鈕必須齊平，
   這也讓 _tokens.css「同尺寸的 input 與 button 等高」那句註解由空話變成事實。
   多行的 .textarea 不吃固定高度（見下方，維持 padding ＋ min-height）。 */
.input, .textarea, .select {
  --input-pad-y: 0px;
  --input-pad-x: var(--sp-12);
  --input-prefix-pad-x: var(--sp-32);
  --select-arrow-pad-x: 34px;
  --select-wrap-arrow-pad-x: var(--sp-40);

  font-family: var(--font-body);
  font-size: var(--fs-14);
  padding: var(--input-pad-y) var(--input-pad-x);
  border-radius: var(--radius);
  border: 0;
  box-shadow: 0 0 0 1px var(--border);
  background: var(--input-surface);   /* 2026-07-17 Q19：暗色比卡亮一階＝filled 欄位；亮色仍＝白卡 */
  color: var(--foreground);
  width: 100%;
  outline: none;
  transition: box-shadow 150ms ease;
}
.input:focus, .textarea:focus, .select:focus {
  box-shadow: 0 0 0 1px var(--ring), 0 0 0 4px color-mix(in srgb, var(--ring) 15%, transparent);
}
/* 單行控件＝固定高度（Q25）。textarea 例外：多行必須靠 padding ＋ min-height 撐開。 */
.input, .select { height: var(--control-h-sm); }
.textarea { --input-pad-y: var(--sp-12); min-height: 100px; resize: vertical; height: auto; }
.input--with-prefix { padding-left: var(--input-prefix-pad-x); }

/* disabled — 建立後固定不可編輯（D137）等鎖定欄位的唯讀呈現：靜音底、不可操作游標，
   仍顯示目前值（如商品細節頁鎖定的主分類 disabled select）。 */
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--muted);
  color: var(--foreground-muted);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Native <select> styled to match the design system: drop the OS arrow and
   draw our own chevron with comfortable right padding (the native arrow
   crowded the edge and looked broken). */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--select-arrow-pad-x);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* --bare：站在頁面／工具列上、不在任何卡片或 section 內的 select（例：projects.html 列表工具列的
   內容類別篩選，跟旁邊的 filter-tabs 同一列）。新設計規則（2026-07-26）：controls 的 1px 邊框只留給
   「疊在 section／card 內」的情境（Q4 原規則）；沒有卡片包著、直接坐在頁面背景上的 select 改成貼合
   filter-tabs 的無邊框處理——去邊框、去填色，hover 才浮出 `--muted` 底，視覺上跟同列的 filter-tabs 一致。 */
.select--bare {
  height: var(--sp-32);
  padding: 0 var(--select-arrow-pad-x) 0 var(--sp-12);
  border-radius: var(--radius-pill);
  box-shadow: none;
  background-color: transparent;
  color: var(--foreground-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
.select--bare:hover { background-color: var(--muted); color: var(--foreground); }
.select--bare:focus { box-shadow: 0 0 0 2px var(--ring); }

.select-wrap { position: relative; display: block; width: 100%; }
.select-wrap .select { background-image: none; padding-right: var(--select-wrap-arrow-pad-x); }
/* right 直接用 --sp-12 token：原本繞 --select-icon-inset，但該變數定義在 .select（本 icon 的兄弟）上，
   CSS 變數不從兄弟繼承→icon 拿不到值、right 失效跑到框外（2026-07-18 修）。 */
.select-wrap__icon { position: absolute; top: 50%; right: var(--sp-12); width: 16px; height: 16px; color: var(--muted-foreground); pointer-events: none; transform: translateY(-50%); }