/* 記帳中-多筆 — #379 / #380 / #381,docs/DESIGN-BATCH.md §4。
 *
 * 這一頁是「記一筆」底下的子頁,所以外框、卡片、`.seg`、`.f`、`.kind-hint`、
 * `.fab` 那幾樣全部沿用 style.css 與 add.css 的既有語彙 —— **D-H16 的原話是
 * 「風格、配色與『記帳中』一模一樣」,所以這一檔不准長出第二套字級與底色。**
 * 這裡只寫這一頁自己多出來的五塊:那顆大的 ＋、蓋在頁面上的那一層(檢閱)、
 * 縮圖格、一張卡上多出來的記號,以及自訂分攤那幾列。
 *
 * **每一個按得到的東西都 ≥ 44×44** — D-F100。那條規則在 test_browsers 的版面矩陣
 * 上是硬斷言,而這一頁上按得到的東西比別頁多(每張卡七顆)。
 *
 * **沒有 `@media (prefers-color-scheme)`** — #259:深色由 themes.css 的 token 回答,
 * 一支 view 自己讀系統偏好的話,鎖定的主題管不到它。
 */

/* **左右一格內距都沒有** — D-F109 / T1。這一頁與單筆頁的卡要逐格同寬(D-F108 第
   1 點),而外框的 16px 已經由 `.wrap` 給了:這裡再加一次的下場是多筆頁的卡比單
   筆頁窄 32px(390 的視口上量到 326 對 358),兩頁並排看起來像兩個 app。 */
#v-batch { padding-bottom: 24px; }

/* --------------------------------------------------------- 那顆大的 ＋
 *
 * D-H16 第 2 點的 (b):一顆大的 ＋,按下去多一張空白的帳。**它是一整行的虛線
 * 大格**(同 add.css 的 `.caplib`:一扇門,不是一顆小鈕),而不是一顆藥丸 ——
 * 它站在頂卡與那一疊卡中間,而那個位置上「按這裡多一張」要一眼看得出來。 */
.ba-add {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin: 12px 0;
  font-size: 1.375rem; line-height: 1; font-weight: 600;
  color: var(--accent); background: var(--card);
  border: 1px dashed var(--line); border-radius: var(--radius-s);
  cursor: pointer;
}
.ba-add span { font-size: 0.9375rem; font-weight: 500; color: var(--dim); }
.ba-empty { color: var(--dim); margin: 20px 4px; line-height: 1.6; }

/* --------------------------------------------------------- 頂端那張警告卡
 *
 * #450 ①。**這裡以前是 `<p class="ba-note">`,而這一檔裡沒有任何一條規則叫那個
 * 名字** —— 一句與說明文字同色同字級的話夾在頂卡上面,使用者看不見它;而它要說的
 * 是「AI 辨識出 N 筆,跟你選的『單筆』不一樣」,那是使用者按下去之前不知道的事。
 *
 * 形狀照 account.css 的 `.ac-confirm`(全站「這件事要看一眼」的框就是這一個:
 * `--warn` 的細框 + 卡的內距),而它長在 `.card` 上 —— 這一頁上所有東西都是卡。 */
.ba-warn { border-color: var(--warn); }
.ba-warn-say { margin: 0; line-height: 1.6; }
/* 「知道了」撐到 D-F100 的下限。它靠右:主要動作在那一疊卡上,這一顆是收掉一句
   已經讀完的話。 */
.ba-warn-x { min-height: 44px; margin-top: 10px; margin-left: auto; display: block; }

/* 送出鈕底下那一行小計 — #450 ④。**在鈕的下面而不是上面**:使用者按之前最後看
   一眼的東西就該貼著那顆鈕;`--dim` 是因為它是覆述,不是一個要改的數字。
   零張卡時整段(清除 / 送出 / 小計)都不進 DOM —— 一行「總共 NT$0」不是資訊。 */
.ba-total {
  margin: 10px 4px 0; text-align: right; color: var(--dim);
  font-size: 0.875rem; line-height: 1.5;
}

/* 送出那一列 —— **形狀逐字照單筆頁的 `.ad-acts`**(add.css)— D-F108 第 6 點:
   左邊一顆小的「清除」、右邊那顆主鈕。兩頁的那一列因此是同一個版面,而不是各自
   量出來的一份。 */
.ba-acts { display: flex; gap: 10px; margin-top: 18px; }
.ba-acts #baSend { margin-top: 0; }
#baClear { flex: 0 0 96px; }

/* ------------------------------------- 選好照片之後那一層(兩頁共用)
 *
 * D-H17 第 6 點:「照相機按鈕按進來之後的 ui 都共用這一個版本」——所以這一段的
 * 選擇器**一個 `#v-batch` 都不帶**:同一層也蓋在單筆頁上(`web/shots.js` 把它
 * 掛在 `document.body` 底下,同 capture.js 的 `.caplayer`)。
 *
 * 位置與圓角照 style.css 的 `.pick-sheet`(全站的底部彈層就是那個形狀),
 * `--navh` 的接縫留著:這一層不該蓋掉導覽列。scrim 是半透明的 —— 底下那一頁還
 * 看得見一角,人要知道自己按完相機回到的是哪裡(D-H16 第 3 點的判準)。
 *
 * 三排開關本身**一條規則都不寫**:它們是 `.f` + `.seg`(style.css),與單筆頁的
 * 「種類」那一排同一份 —— 那正是「兩頁一模一樣」在 CSS 上的意思。 */
/* 幕的值在 #392 收成 `--scrim`。**它以前是 .42 而另外三處是 .32** —— 四處各寫
   一個 rgba 的下場,而沒有人是故意的。 */
.sh-scrim { position: fixed; inset: 0; z-index: 24; background: var(--scrim); }
.sh-sheet {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
  max-height: 82vh; overflow-y: auto; box-sizing: border-box;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--card); color: var(--ink);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}
@media (min-width: 552px) {
  .sh-sheet { left: 50%; transform: translateX(-50%); width: 520px; }
}
.sh-lede { color: var(--dim); margin: 0 0 12px; line-height: 1.6; }
/* 額度那一句貼著它說的那一排開關 — 票 §6(「額度提示保留在開關旁」)。 */
.sh-hint { color: var(--dim); font-size: 0.8125rem; line-height: 1.5; margin: 6px 0 14px; }
.sh-hint:empty { display: none; }
.sh-short { color: var(--warn); }
.sh-busy { text-align: center; padding: 48px 16px; color: var(--dim); }
/* 額度不夠時 AI 那一排真的鎖著 —— **灰掉要看得出來** — D-F108 第 4 點 / T5。
   `.seg button` 一格 disabled 樣式都沒有,所以鎖著的那一顆與按得動的那一顆長得
   一模一樣:使用者按下去沒反應,而畫面上沒有任何理由。 */
.sh-sheet .seg button[disabled] { opacity: .4; cursor: not-allowed; }
/* 「上傳」灰掉的那一句理由 — D-F108 第 4 點。一顆灰著的鈕不會自己解釋,而使用者
   手上的三個開關就是解法。 */
.sh-why { color: var(--warn); font-size: 0.8125rem; line-height: 1.5; margin: 12px 0 0; }
/* 「升級到 Premium ›」 — D-F108 第 5 點。形狀照 paywall.css 的 `.pw-up`:同一句
   話在這個 app 裡只有一種長相。 */
.sh-up {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin-top: 2px;
}
/* 「取消上傳 / 上傳」並排一列:兩顆都是這一層的出口,而它們一樣重要。
 *
 * **同一組 class,差別只有底色** — D-F108 第 4 點(使用者原話:「上傳與取消上傳
 * 兩顆鈕樣式要一致」)。這裡以前是 `.ghost` + `.primary`,而那兩個是全站的次/主
 * 鈕:一個是 0.8125rem 的橢圓藥丸、另一個是 13px 內距的實心圓角方塊 —— 並排在同
 * 一列上一眼就看得出是兩種不同的東西,而它們是同一件事的兩個方向。
 *
 * 44 的下限照舊(D-F100),而它現在由 padding + min-height 一起撐:兩顆的字級、
 * 內距、圓角、框線寬度逐格相同,量得出來的差別只有底色。 */
.sh-acts { display: flex; gap: 10px; margin-top: 16px; }
.sh-acts .sh-act {
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  flex: 1; min-height: 44px; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid transparent; border-radius: var(--radius-m);
}
.sh-act-off { background: var(--chip); color: var(--ink); border-color: var(--line); }
.sh-act-on {
  background: linear-gradient(135deg, var(--accent-grad-a), var(--accent-grad-b));
  color: var(--on-accent);
}
.sh-acts .sh-act:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------------- 卡 */

.ba-card { margin: 12px 0; }
.ba-card input { min-height: 44px; box-sizing: border-box; width: 100%; }
.ba-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ba-once { font-weight: 600; }
/* `--ok` 在 #392 進了主題契約,所以那個退路值拿掉了 —— 在那之前這一行畫出來的
   永遠是 `--accent`(那才是「兩清」與「主要動作」同色的原因)。 */
.ba-done { color: var(--ok); }
.ba-qr, .ba-guess { color: var(--dim); font-size: 0.8125rem; }
.ba-fail { color: var(--danger); }

/* 「金額相同,是不是重複記錄?」 — #450 ⑤(同一筆交易的發票 + 刷卡簽單一起拍
   進來)。**它是一顆鈕**:點一下就收掉(兩張同價的咖啡是真的兩筆),而一個點得動
   的東西鍵盤要走得到。整行、靠左、`--warn-soft` 的底 —— 它說的是這一張卡的事,
   所以長在卡裡面而不是頁頂那張警告卡上。 */
.ba-dup {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 44px; margin: 8px 0 0; padding: 10px 12px; text-align: left;
  font: inherit; font-size: 0.8125rem; line-height: 1.5; cursor: pointer;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid var(--warn); border-radius: var(--radius-s);
}
/* `hidden` 那一格由 `syncSums()` 就地開關(打字時不重畫整頁),而上面那條
   `display: block` 壓得過瀏覽器預設的 `[hidden]`。 */
.ba-dup[hidden] { display: none; }

/* 信心不足的那一格 — §4:金額標黃,而不是幫使用者決定它是錯的。 */
/* 同上:`--warn-soft` 進了契約,而它以前的退路是全站唯一一個寫死的語意色
   (`#fff3b0`,一塊亮黃底 —— 深色主題下它與 `--ink` 的對比是 1.2)。 */
.ba-low { background: var(--warn-soft); }

/* 分類那一排逐格是單筆頁的 `.cats`(add.css)—— 這裡只把每一顆撐到 D-F100 的
   下限:那一排在單筆頁上是 icon + 字兩行,在這裡也是。 */
.ba-cats button { min-height: 44px; }
.ba-cardacts { display: flex; gap: 10px; margin-top: 12px; }
.ba-cardacts button { flex: 1; min-height: 44px; }

/* 已經記下的那幾張淡出去,但仍然讀得到(部分失敗時人要看得出哪幾筆已經進去)。 */
.ba-ok { opacity: .62; }
.ba-failed { border-color: var(--danger); }

/* 來源縮圖是唯讀的 —— attachview 的 `.atts` 在這一頁上不接任何一顆動作鈕
   (D-H11:「來源照片縮圖(唯讀,無勾選)」),所以只調大小。 */
.ba-card .atts { margin: 10px 0; }
.ba-card .attshot { min-width: 64px; min-height: 64px; }