/* ═══════════════════════════════════════════════════════════════
   糧好生活 · 基礎版面與分頁殼
   手機優先：主要操作在畫面下半部，底部分頁列常駐。
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* hidden 屬性必須贏過任何 class 的 display。
   沒有這一行的話，像 .gate{display:flex} 這種規則會讓 [hidden] 失效，
   結果一層不透明的滿版遮罩留在畫面上把底下全部蓋掉（曾經真的發生過）。 */
[hidden] { display: none !important; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  /* 內容不能被底部分頁列蓋住，也要避開 iPhone 的圓角區 */
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px);
  overscroll-behavior-y: contain;
}

button, input, select, textarea { font-family: var(--font-sans); font-size: var(--fs-body); color: inherit; }
button { border: none; background: none; cursor: pointer; }

/* 鍵盤操作看得見焦點（桌機用滑鼠時不會冒出來） */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

img { max-width: 100%; display: block; }

/* ── 主容器 ───────────────────────────────────────────────
   480px 是單手持握的舒適寬度；平板上置中留白，不硬拉滿。
   平板的食譜雙欄版面在階段 3 才做，屆時會用更寬的斷點覆寫。 */
.app { max-width: 480px; margin: 0 auto; padding: var(--pad) var(--pad) 8px; }

/* ── 頁面標題 ────────────────────────────────────────────
   五個分頁共用同一個元件。之前有三種寫法、兩種字級，
   切分頁時會覺得「不像同一個 App」—— 使用者實際反映過。
   首頁只是把標題換成品牌字樣，尺寸與間距完全一樣。 */
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px 12px;
}
.pagehead h1, .pagehead .brand {
  font-family: var(--font-hand); font-size: var(--fs-title);
  color: var(--accent-deep); letter-spacing: 2px; font-weight: 400; line-height: 1.25;
}
.pagehead .brand b { color: var(--warm); font-weight: 400; }
.pagehead .sub { color: var(--ink-soft); font-size: var(--fs-tiny); margin-top: 1px; }

/* ── 區塊標題 ─────────────────────────────────────────── */
.sect { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 8px; }
.sect h2 { font-family: var(--font-hand); font-size: 19px; color: var(--accent-deep); letter-spacing: 1.5px; font-weight: 400; }
.sect h2 .dot { font-size: 13px; margin-right: 6px; }
.sect small { color: var(--ink-soft); font-size: var(--fs-tiny); }

/* ── 底部分頁列 ── spec 四節 ──────────────────────────────
   5 個分頁固定在拇指按得到的地方。整列高度含 safe-area，
   每個分頁的可點區域是滿格 × 64px，遠大於 44px 要求。 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1.5px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  position: relative;
  height: var(--tabbar);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-soft); font-size: 11.5px; letter-spacing: .5px;
  transition: color var(--ease);
}
.tabbar button .ic { font-size: 21px; line-height: 1; }
.tabbar button[aria-current='page'] { color: var(--accent-deep); font-weight: 700; }
/* 目前所在分頁除了變色，頂緣多一條短橫 —— 不只靠顏色分辨 */
.tabbar button::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: transparent;
}
.tabbar button[aria-current='page']::before { background: var(--accent); }

/* ── 通用留白 ─────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row   { display: flex; align-items: center; gap: 8px; }
.grow  { flex: 1; min-width: 0; }
.muted { color: var(--ink-soft); }
.tiny  { font-size: var(--fs-tiny); color: var(--ink-soft); }
.center { text-align: center; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 螢幕閱讀器專用文字（給只用圖示的按鈕補說明） */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }