/* 1c 手機底部分頁列（2026-09-10）
   頂部的橫向捲動選單 10 顆一路捲，最常用的頁反而要滑；抽屜又要先點漢堡。
   底部分頁列把最常走的五條路放在拇指構得到的地方。
   ⚠️ 抽屜沒有拿掉 —— 它有 10 個入口（晨報／行事曆／風險雷達／認養榜／文章／
   自訂…），底部只放得下 5 個，拿掉抽屜會讓另外 5 頁在手機上沒有入口。 */

.tabbar { display: none; }

@media (max-width: 760px) {
  .tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    background: rgba(26, 29, 36, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line, #2A2E36);
    /* iPhone 的 home indicator 會蓋住最後那幾 px */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 6px;
    color: var(--ink-mute2, #6E727A);
    text-decoration: none;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent;
    transition: color 120ms;
  }
  .tabbar a .tb-ico { width: 21px; height: 21px; display: block; }
  .tabbar a .tb-lbl { line-height: 1; }
  .tabbar a:active { color: var(--ink, #F5F7FA); }
  .tabbar a.on { color: var(--gold, #C8A260); }
  .tabbar a.on .tb-ico { stroke-width: 2.2; }
  /* 有未讀的頁在圖示右上角點一顆紅點，跟頂部選單同一套語彙 */
  .tabbar .tb-wrap { position: relative; display: block; }
  .tabbar .tb-dot {
    position: absolute; top: -1px; right: -3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #ef4444;
  }

  /* 內容要讓開，否則最後一列會被分頁列蓋住（footer、locked 卡、送出鈕都在底部）。
     選擇器故意寫成 `html body`：這支是 head 裡的外部 CSS，而兩支模板的
     `html, body { padding: 0 }` 在後面的 inline <style> 裡 —— 同權重後面的贏，
     寫 `body` 會被歸零。 */
  html body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* 抽屜不用另外處理：.kp-drawer z-index 1000、backdrop 999，
     分頁列在 45，打開抽屜時本來就會被蓋住並跟著變暗。
     （原本寫 body.md-open —— mobile-drawer.js 根本不加這個 class，是死規則。） */
}