/* ============================================================
   form-section.css · 無卡片表單區段（建立流程共用骨架）
   ------------------------------------------------------------
   一個區段 = 標題 + 灰副標 + 上分隔線 + 寬鬆留白；區段內沿用
   .field / .input / .select / .segmented 等原元件，只在
   .form-section 作用域內微調 field 間距與 label 字級，
   不影響全站其他地方的 .field（Settings、e-shop 等）。
   取代各建立頁原本頁內的 .cp-section / .ce-section… 散裝樣式。
   ============================================================ */

.form-section { padding: 44px 0; margin: 0; }            /* 上下寬鬆留白＝區段間隔 */
.form-section[hidden] { display: none; }
.form-section + .form-section { border-top: 1px solid var(--border-soft); }   /* 區段間分隔線 */

/* (2026-07-17) `.form-section--modal` 已退場：pickup session modal 當日改用頂部頁籤
   （shared .tabs + .tab-panel）分區，不再套填色面板；此變體無其他消費者，故移除。 */

/* Opt-in outlined variant — reserved for evaluation pages until a product
   flow explicitly adopts it. In light mode the section is the brightest
   layer (`--card`) inside the `--surface-page` main and `--surface-shell`
   app. Dark mode deliberately uses `--muted`, one step above the #191A1A
   page surface. 2026-07-16 使用者裁示：去除外框線（保留填色卡＝bg＋圓角＋內距），
   兩模式都靠填色對比區分區塊、不再有 1px 邊界。 */
/* 寫成 .form-section.form-section--outlined 提高權重（0,2,0）蓋過
   `.form-section + .form-section` 的 border-top 分隔線（同權重），確保四邊皆無 border——
   否則相鄰 outlined 卡頂端會殘留一條分隔線。 */
/* 2026-07-17（使用者裁示，Q14 修訂）：無邊框填色卡再加「浮起感」——resting card 陰影(E2)＋頂緣高光，
   讓區塊像浮在內容底上的卡（midnight 探索頁做法）。仍無 1px 邊框；填色＋陰影＋上緣光共同分區。 */
/* 2026-07-27 L 回報「這兩張卡好擠」＋「我們有設 design token，但它沒在跟」——確認屬實。
   這個區塊在視覺上就是一張卡（--card 底、--radius-xl、卡陰影，第 18 行的註解也寫明
   圓角是刻意「與 form-section--outlined 統一」的），但內距卻寫死 var(--sp-16)＝16px，
   完全沒有接上卡片的 --card-pad token。旁邊真正的 .card（右側設定總覽）算出來是 20px，
   .ztor-card 是 24px——所以同一個畫面上三種卡有三種內距，而這一張是最擠的那個，
   而且不管未來怎麼調 --card-pad 都不會跟著動。
   改成宣告並消費 --card-pad：內距回到 DESIGN.md 記載的卡片 24px，之後也跟著 token 走。 */
.form-section.form-section--outlined {
  --card-pad: var(--sp-24);
  padding: var(--card-pad);
  background: var(--card);
  border: 0;   /* 2026-07-16：去外框線（原 1px solid --border）*/
  border-radius: var(--radius-xl);   /* 16px — 對齊 Figma node 781-4166（2026-07-16 使用者裁示全站統一）*/
  box-shadow: var(--shadow-card), var(--shadow-edge-top);   /* 2026-07-17：E2 浮起＋頂緣高光（Q14 修訂）*/
}
/* 2026-07-17 midnight：暗色改用 --card（原 --muted）——midnight 壓暗後 --muted(#131414) 與頁面底(#111212)
   幾乎同色、區塊會消失；--card(#191A1B) 在新層次裡正是「浮在內容底上的卡」，與亮色行為一致。 */
[data-theme="dark"] .form-section--outlined { background: var(--card); }
/* 區塊式建立流程：僅在前方已有可見 outlined section 時留出區段間距。
   使用一般兄弟選擇器，讓中間的條件 section [hidden] 不會留下空白、
   也不會讓下一個可見區段漏掉間距。 */
.form-section--outlined:not([hidden]) ~ .form-section--outlined:not([hidden]) {
  margin-top: var(--sp-24);
}

.form-section__head { margin-bottom: var(--sp-24); }
/* 標題列帶右側動作（2026-07-22）：標題群靠左、動作群（按鈕／⋯選單）靠右。
   預設 head 是堆疊的 title＋sub，改成 flex 會讓兩者並排，故用 --actions 修飾＋把標題群包進
   __head-titles，只在需要動作的區段啟用。用於商品明細庫存卡（補貨紀錄鈕＋新增/編輯/補貨選單）。 */
.form-section__head--actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-12);
}
.form-section__head--actions .form-section__head-titles { min-width: 0; }
.form-section__head-actions { display: flex; align-items: center; gap: var(--sp-8); flex: none; }
/* 區段標題：title role（font-ui）／14px／medium
   2026-07-20（Q21）：18→14，與 .field__label 同級——區塊標題與欄位標籤拉平，
   層級改由卡片邊界承擔，不再靠字級放大。全站 form-section 消費頁一起生效。 */
.form-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--type-title-24-weight);
  letter-spacing: var(--type-title-24-tracking);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-4);
}
/* 2026-07-20（Q21）：14→11 且色階壓暗（--foreground-muted → --muted-foreground），
   與 .field__hint 同級——區塊副標與欄位說明是同一種「輔助說明」角色。 */
.form-section__sub { font-size: var(--fs-11); color: var(--muted-foreground); margin: 0; }

/* ---- 區段內 field 微調（作用域限 .form-section）---- */
/* Q6 2026-07-13：以 .field 為準——移除 field 垂直節奏的局部覆寫（原 gap 4px／欄位間距 26px 裸值），
   改吃基礎 .field（gap 6px、margin-bottom --sp-16=16px），全站表單節奏統一。
   （label 字級屬另一議題，維持 form-section 的 14px regular。若長建立流程日後想恢復較寬鬆的
   欄位間距，可加 `.form-section .field { margin-bottom: var(--sp-24); }` 單獨處理。）*/
.form-section .field__label { font-size: var(--fs-14); font-weight: var(--fw-regular); }
.form-section .field__label + .field__hint { margin-top: -4px; }        /* 描述貼齊 label（gap 0）*/
.form-section .field__hint--count { text-align: right; }                /* 字數計數靠右 */

/* Form footnote：表單底部置中小字說明（如 Stripe 保障文案）。2026-07-09 自 create-product/auction 頁內樣式 promote；數值照舊（margin-top 22px 非 token，維持零視覺變動） */
.form-footnote { text-align: center; font-size: var(--fs-12); color: var(--muted-foreground); margin-top: 22px; }