/* ═══════════════════════════════════════════════════════════════
   糧好生活 · 庫存模組
   設計重點：站在冰箱前、單手、不用瞄準。
   所有會按到的東西都在畫面下半部或卡片右側（拇指區）。
   ═══════════════════════════════════════════════════════════════ */

/* ── 日常／備援視角切換 ── spec 六節開頭 ────────────────────
   刻意做成同一個 App 的另一個畫面，不是「切換到另一個模式」的視覺衝擊。
   併進標題列而不是自己佔一整排：手機上大多是開起來新增一筆，
   省下的那一排可以多看到一個品項。備援一個月才開一次，不需要那麼大。 */
.viewswitch {
  display: flex; gap: 4px; flex: 0 0 auto;
  background: var(--surface-sunk); border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 3px;
}
.viewswitch button {
  position: relative;
  min-height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  font-weight: 700; color: var(--ink-soft); font-size: var(--fs-tiny);
}
/* 看起來小、按起來不小：實際觸控範圍撐到 45px。
   這一處**實測命中過**（elementFromPoint 往上下各探 5px 都打得到），
   所以保留 —— 使用者特別要求這顆要小，省下的空間可以多看到一個品項。
   但同樣的寫法在 .btn.mini 和 .chip 上是無效的，
   改動這附近的版面之後要重新用命中測試確認一次。 */
.viewswitch button::after { content: ''; position: absolute; inset: -6px; }
.viewswitch button[aria-selected='true'] { background: var(--surface); color: var(--accent-deep); box-shadow: var(--lift); }
.viewswitch button:disabled { opacity: .45; }

/* 食譜頁的兩個入口要撐滿一整排 —— 那是主要導覽，不是附屬的切換 */
.viewswitch.wide { width: 100%; }
.viewswitch.wide button { flex: 1; min-height: var(--tap); font-size: var(--fs-small); }

/* 最近搜尋過的詞 */
.chips.recent { margin-top: 8px; align-items: center; }

/* ── 搜尋與篩選：捲動時不消失 ── spec 6-4 ─────────────────── */
.stickytop {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding: 8px 0 6px;
  margin: 0 -2px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 這顆同時是「最近找過」「篩選狀態」「部位互動圖的部位選擇」，
   而且都要先做某個動作才會出現，所以靜態掃描抓不到。

   ⚠️ 這裡刻意<b>不用</b> ::after 撐觸控範圍。
   同樣的手法在 .viewswitch 和 .toast button 上有效，在這裡卻無效
   （實測往上探 5px 打到的是背後的 .stickytop）。原因沒查到底，
   但結論很清楚：**透明層是招數，不是保證**。
   會不會生效要用 document.elementFromPoint 實際打一次才知道 ——
   光看「有沒有 ::after」就假設加 12px，等於沒檢查。
   所以這裡老實把高度做到 44px。 */
.chip {
  min-height: var(--tap); padding: 4px 14px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: var(--fs-tiny); font-weight: 700; border: 1.5px solid transparent;
}
.chip.clearall { background: transparent; border-color: var(--line); color: var(--ink-soft); }

/* ── 品項卡 ─────────────────────────────────────────────────
   左邊是資訊（點了展開細節），右邊固定 － 數量 ＋ 三顆大按鈕。
   常用的動作不需要多一次點擊。 spec 6-3 */
.invcard {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 10px 8px 12px; box-shadow: var(--lift);
}
.invcard.picked { border-color: var(--accent); background: var(--accent-soft); }

.invmain {
  flex: 1; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: 3px; padding: 4px 0;
  min-height: var(--tap);
}
.invmain .nm { font-weight: 700; font-size: var(--fs-body); line-height: 1.3; }
.invmain .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.invmain .loc { font-size: var(--fs-tiny); color: var(--ink-soft); }

.invcard .qty { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.invcard .num {
  min-width: 52px; min-height: var(--tap); padding: 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.invcard .num b { font-size: 19px; line-height: 1.1; }
.invcard .num small { font-size: 11px; color: var(--ink-soft); }

.pickbox {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--surface);
  color: var(--accent-ink); font-weight: 700; display: grid; place-items: center;
}
.invcard.picked .pickbox { background: var(--accent); }

/* 存量偏低是另一種提醒，和效期分開講，兩者可能同時發生 */
.stat.low { background: var(--warm-soft); color: var(--warm-deep); border-color: var(--warm); }

/* ── 浮動的新增按鈕：右下角，拇指自然落點 ─────────────────── */
.fab {
  position: fixed; right: 16px; z-index: 30;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 30px; line-height: 1; font-weight: 400;
  box-shadow: 0 8px 20px -6px rgba(232, 112, 143, .6);
  display: grid; place-items: center;
  transition: transform var(--ease);
}
.fab:active { transform: scale(.92); }

/* ── 批次操作列 ── spec 6-6 ─────────────────────────────── */
.bulkbar {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 2px solid var(--line);
  box-shadow: 0 -6px 20px -12px rgba(75, 59, 51, .4);
  overflow-x: auto;
}
.bulkbar .n { font-weight: 700; font-size: var(--fs-small); white-space: nowrap; }
.bulkbar .btn { min-height: var(--tap); padding: 0 14px; white-space: nowrap; }

/* ── 編輯器的設定列 ─────────────────────────────────────── */
.rowbtn {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 12px; text-align: left;
}
.rowbtn .k { font-size: var(--fs-small); color: var(--ink-soft); flex: 0 0 68px; }
.rowbtn .v { flex: 1; min-width: 0; font-weight: 700; }
.rowbtn .v i { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.rowbtn .v small { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-tiny); }
.rowbtn .v .kind {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--calm-soft); color: var(--calm-deep); font-size: 11px;
}
.rowbtn .go { color: var(--ink-faint); }

.qtyrow { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-sm); padding: 6px 12px; }
.qtyrow .k { font-size: var(--fs-small); color: var(--ink-soft); flex: 0 0 68px; }
.num.big { min-width: 64px; min-height: var(--tap); font-size: 21px; font-weight: 700; }

/* ── 快速盤點模式 ── spec 6-7 ──────────────────────────────
   一次只看一項、字大、按鈕大。手上可能拿著東西，不要求瞄準。 */
.scrim.countmode { align-items: stretch; }
.countsheet {
  max-height: 100vh; border-radius: 0; display: flex; flex-direction: column;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.countbar { display: flex; align-items: center; gap: 8px; }
/* 這一列同時給快速盤點和料理模式用 —— 兩個都是「手忙、手濕」的情境，
   不能為了省 4px 把「結束」縮到 44px 以下。 */
.countbar .btn { min-height: var(--tap); }

.progress { height: 5px; background: var(--line); border-radius: 3px; margin: 12px 0 20px; overflow: hidden; }
.progress div { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s ease; }

.countcard { text-align: center; padding: 26px 10px 30px; }
.countcard .nm { font-family: var(--font-hand); font-size: 34px; color: var(--accent-deep); line-height: 1.3; }
.countcard .qt { margin-top: 10px; color: var(--ink-soft); }
.countcard .qt b { font-size: 24px; color: var(--ink); }

.countacts { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.countacts .big { min-height: 56px; font-size: 17px; }

/* ── 常買品項模板 ───────────────────────────────────────── */
.tplrow { display: flex; align-items: center; gap: 8px; }
.tplrow .days { font-size: var(--fs-tiny); color: var(--ink-soft); }

/* ── 平板：庫存改成兩欄，一次看到更多 ─────────────────────── */
@media (min-width: 768px) {
  .app { max-width: 720px; }
  #inv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fab { right: calc(50vw - 340px); }
}