/* ═══════════════════════════════════════════════════════════════
   糧好生活 · 食譜、購物、知識庫
   ═══════════════════════════════════════════════════════════════ */

/* ── 購物清單 ─────────────────────────────────────────────── */
.shrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 12px 6px 10px; box-shadow: var(--lift);
}
.shrow.done { opacity: .55; background: var(--surface-sunk); box-shadow: none; }
.shrow.done .nm { text-decoration: line-through; }
.checkbox {
  width: var(--tap); height: var(--tap); flex: 0 0 var(--tap);
  display: grid; place-items: center; border-radius: 50%;
  font-size: 18px; font-weight: 700; color: var(--accent-ink);
  background: var(--surface); border: 2px solid var(--accent);
}
.shrow.done .checkbox { background: var(--accent); }
.shmain { text-align: left; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.shmain .nm { font-weight: 700; }
.shmain .sub { font-size: var(--fs-tiny); color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--surface-sunk); border-radius: var(--r-pill);
  padding: 0 8px; font-size: 11px; color: var(--ink-soft);
}

/* ── 食譜卡 ───────────────────────────────────────────────── */
.cards { display: flex; flex-direction: column; gap: var(--gap-list); }
.rcard {
  display: flex; align-items: stretch; gap: 4px;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r); box-shadow: var(--lift); overflow: hidden;
}
.rmain, .rcard.simple {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px 8px 12px 14px; text-align: left; min-height: var(--tap);
}
.rcard.simple {
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r); box-shadow: var(--lift);
}
.rcard .e { font-size: 26px; flex: 0 0 auto; }
.rcard .n { font-weight: 700; display: block; line-height: 1.35; }
.rcard .s {
  font-size: var(--fs-tiny); color: var(--ink-soft); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcard .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.rcard .tags .t {
  font-size: 11px; background: var(--surface-sunk); color: var(--ink-soft);
  border-radius: var(--r-pill); padding: 1px 8px;
}
.favbtn {
  width: var(--tap); min-height: var(--tap); flex: 0 0 var(--tap);
  display: grid; place-items: center; font-size: 21px; color: var(--ink-faint);
}
.favbtn.on { color: var(--warm); }

/* ── 分類九宮格（沿用原始檔的樣子）─────────────────────────── */
.catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-bottom: 20px; }
.cat {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r);
  padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 7px;
  box-shadow: var(--lift); transition: transform var(--ease), border-color var(--ease);
  min-height: var(--tap);
}
.cat:active { transform: scale(.96); border-color: var(--accent); }
.cat .e { font-size: 26px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; }
.cat .n { font-weight: 700; }
.cat .s { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }

/* ── 半成品／知識庫橫幅 ───────────────────────────────────── */
.prepbanner {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--warm-soft); border: 2px dashed var(--warm);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; min-height: var(--tap);
}
.prepbanner .e { font-size: 26px; }
.prepbanner .n { font-weight: 700; color: var(--warm-deep); }
.prepbanner .s { font-size: var(--fs-tiny); color: var(--ink-soft); }
.prepbanner .arrow { margin-left: auto; color: var(--warm); font-size: 20px; }
.prepbanner.know { background: var(--calm-soft); border-color: var(--calm); }
.prepbanner.know .n { color: var(--calm-deep); }
.prepbanner.know .arrow { color: var(--calm); }

/* ── 返回列 ───────────────────────────────────────────────── */
.backbar { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.backbtn {
  display: flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 14px;
  font-weight: 700; color: var(--accent-deep); border-radius: var(--r-pill); background: var(--accent-soft);
}
.pagetitle { font-family: var(--font-hand); font-size: 21px; color: var(--accent-deep); }

/* ── 食譜狀態列 ── spec 9-3 ────────────────────────────────
   固定在頂部，捲動時不消失：做菜時最常回頭看的就是「還缺什麼」。 */
.statusbar {
  position: sticky; top: 0; z-index: 20;
  border: 2px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  margin-bottom: 14px; background: var(--surface); box-shadow: var(--lift);
}
.statusbar.ok   { background: var(--calm-soft); border-color: var(--calm); }
.statusbar.warn { background: var(--warm-soft); border-color: var(--warm); }
.statusbar .line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.statusbar .line2 { font-size: var(--fs-body); margin-top: 6px; line-height: 1.6; }
.statusbar .line3 { font-size: var(--fs-tiny); color: var(--warm-deep); margin-top: 6px; }
.statusbar .btn { margin-top: 10px; width: 100%; min-height: var(--tap); }

/* ── 份量檔位 ── spec 十節 ─────────────────────────────────── */
.servings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.servings button {
  min-height: 52px; border-radius: var(--r-sm); border: 2px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.servings button b { font-size: var(--fs-small); }
.servings button small { font-size: 10.5px; color: var(--ink-soft); }
.servings button[aria-pressed='true'] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
}

/* ── 食材列 ───────────────────────────────────────────────── */
.inglist { display: flex; flex-direction: column; gap: 6px; }
.ingroup {
  font-size: var(--fs-tiny); font-weight: 700; color: var(--ink-soft);
  padding: 8px 2px 2px; letter-spacing: 1px;
}
.ingrow {
  display: flex; align-items: center; gap: 8px; min-height: var(--tap);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 12px; text-align: left;
}
.ingrow .n { font-weight: 500; }
.ingrow .amt { font-size: var(--fs-body); color: var(--ink-soft); white-space: nowrap; }
.kindtag {
  font-size: 10.5px; background: var(--surface-sunk); color: var(--ink-soft);
  border-radius: var(--r-pill); padding: 1px 7px; margin-left: 6px;
}

/* ── 關鍵原理與流派 ── spec 9-1-1 ─────────────────────────── */
.pointbox {
  background: var(--honey-soft, var(--warm-soft)); border: 2px solid var(--warm);
  border-radius: var(--r); padding: 12px 14px; margin-top: 14px;
}
.pointbox .t { font-weight: 700; color: var(--warm-deep); margin-bottom: 4px; }
.pointbox p { font-size: var(--fs-body); line-height: 1.85; }
.school { font-size: var(--fs-tiny); color: var(--ink-soft); margin-top: 10px; }

/* ── 步驟 ─────────────────────────────────────────────────── */
.stagebox { margin-bottom: 14px; }
.stagename {
  font-family: var(--font-hand); font-size: 17px; color: var(--accent-deep);
  letter-spacing: 2px; margin: 6px 2px 8px;
}
.steprow {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: 8px; min-height: var(--tap);
}
.steprow.done { opacity: .5; background: var(--surface-sunk); }
.steprow .no {
  flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-deep); font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.steprow .txt { line-height: 1.8; font-size: var(--fs-body); }
.steprow .timer {
  display: inline-block; margin-top: 6px; font-size: var(--fs-tiny);
  color: var(--warm-deep); background: var(--warm-soft); border-radius: var(--r-pill); padding: 1px 9px;
}
.steprow .check { color: var(--calm-deep); font-weight: 700; }

/* 【判斷】【省時技巧】這類提示是「做得出來」的關鍵，要看得見 */
mark.cue {
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 5px; padding: 0 5px; font-size: 12px; font-weight: 700; margin-right: 3px;
}

.cookbtn { margin-top: 18px; min-height: 54px; font-size: 17px; }

/* ── 料理模式：字大、按鈕大，手濕手忙也點得到 ── spec 9-5 ──── */
.scrim.cookmode { align-items: stretch; }
.cooksheet {
  max-height: 100vh; border-radius: 0; display: flex; flex-direction: column;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.cookstage {
  font-family: var(--font-hand); font-size: 18px; color: var(--accent-deep);
  letter-spacing: 2px; margin-bottom: 10px;
}
.cooktext { font-size: 21px; line-height: 1.95; flex: 1; overflow-y: auto; }
.cooktext mark.cue { font-size: 16px; }
.timerbox {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  background: var(--warm-soft); border: 2px solid var(--warm); border-radius: var(--r); padding: 12px 16px;
}
.timerbox .tleft { font-size: 30px; font-weight: 700; color: var(--warm-deep); font-variant-numeric: tabular-nums; }

/* ── 扣庫存預覽 ── spec 9-4 ───────────────────────────────── */
.deductrow {
  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;
}
.deductrow.skip { opacity: .6; }
.deductrow .num { min-width: 62px; min-height: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--surface-sunk); }
.deductrow .num b { font-size: 17px; }
.deductrow .num small { font-size: 11px; color: var(--ink-soft); }

/* ── 知識庫 ───────────────────────────────────────────────── */
/* 知識庫是長文閱讀（而且是斷網時唯一能靠的東西），字級不能低於內文基準 */
.qa-a { font-size: var(--fs-body); line-height: 1.95; }
.babylist { padding-left: 20px; }
.babylist li { font-size: var(--fs-body); line-height: 1.9; margin-bottom: 10px; }
.meatrow { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.meatrow:last-child { border-bottom: none; }
.meatrow p { line-height: 1.8; margin-top: 3px; }
.chip.on { background: var(--accent); color: var(--accent-ink); }

.butcherbox { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 8px; }
.butcher { width: 100%; height: auto; }
.butcher .deco { fill: var(--raw-line); }
.butcher .eye { fill: var(--ink); }
.butcher .cut path {
  fill: var(--milk, #FDF3E7); stroke: var(--accent-deep); stroke-width: 2;
  transition: fill var(--ease); cursor: pointer;
}
.butcher .cut text {
  font-size: 11px; fill: var(--ink); text-anchor: middle; pointer-events: none;
  font-family: var(--font-sans);
}
.butcher .cut.on path { fill: var(--accent); }
.butcher .cut.on text { fill: #fff; font-weight: 700; }
.butcher .cut:focus-visible path { stroke-width: 4; }

/* ── 平板：食譜詳情雙欄 ── spec 9-5 ────────────────────────
   左邊食材與狀態常駐，右邊步驟。做菜時架在流理台上看。 */
@media (min-width: 768px) {
  .rdgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
  .rdleft { position: sticky; top: 120px; }
  .catgrid { grid-template-columns: repeat(3, 1fr); }
  .cooktext { font-size: 24px; }
  .steprow .txt { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════
   備援視角 ── spec 七節
   刻意維持同一套視覺語言：達標用溫和的肯定色，未達標用需要注意
   但不刺激的提示。不用警報紅、不用會嚇到小孩的圖示。
   ═══════════════════════════════════════════════════════════════ */
.daysgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.daycard {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r);
  padding: 14px 12px; text-align: center; box-shadow: var(--lift);
}
.daycard.ok    { background: var(--calm-soft); border-color: var(--calm); }
.daycard.short { background: var(--warm-soft); border-color: var(--warm); }
.daycard .ic { font-size: 24px; }
.daycard .n  { font-size: var(--fs-small); margin-top: 2px; }
.daycard .n b { font-size: 30px; line-height: 1.1; }
.daycard .l  { font-weight: 700; font-size: var(--fs-small); margin-top: 2px; }
.daycard .bar { height: 6px; background: var(--surface); border-radius: 3px; margin: 8px 0 6px; overflow: hidden; }
.daycard.ok .bar div    { background: var(--calm); }
.daycard.short .bar div { background: var(--warm); }
.daycard .bar div { height: 100%; border-radius: 3px; }
.daycard .s { font-size: var(--fs-tiny); color: var(--ink-soft); line-height: 1.5; }

.prepline { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.prepline:last-child { border-bottom: none; }
.prepline .mark { flex: 0 0 20px; font-weight: 700; text-align: center; }
.prepline.has .mark { color: var(--calm-deep); }
.prepline.no  .mark { color: var(--warm-deep); }
.prepline.opt .mark { color: var(--ink-faint); }
.prepline.opt { opacity: .75; }

.guidelist { padding-left: 20px; }
.guidelist li { font-size: var(--fs-body); line-height: 1.9; margin-bottom: 9px; }

.prepsum { width: 100%; text-align: left; display: block; }
.prepsum .go { color: var(--ink-faint); font-size: 18px; }

/* 首頁的警示列也要能點 */
.item[data-item], .item[data-fix], .item[data-restore] { text-align: left; width: 100%; }