/* home-v3.css — v3 鍵盤架構覆蓋層（並存開發）
   scope：.home-v3（index.v3.html 專用）；正式 index.html 未載入本檔 → 零影響
   載入順序：必須在 chrome.css 之後（晚載入 + 等/高特異性 → 覆蓋成立）
   斷點：僅 @media (max-width: 1023px)；桌機（min-width:1024px）完全不碰

   作用：把手機 app-shell 容器模型
         從 chrome.css 的「position:absolute + height:100%」
         改為「position:fixed + height:var(--app-h) + top:var(--app-top)」，
         由 kb-v3.js 跟隨 visualViewport 即時更新；並禁橡皮筋、保留 masthead。

   保留：v6 column-reverse 已在 chrome.css 以 .swipe-page 為 scope，v3 自動沿用，不需重寫。 */

@media (max-width: 1023px) {

  /* 1) 禁止 layout viewport 橡皮筋 —— 消除底部空白的關鍵 */
  html:has(body.home-v3),
  body.home-v3 {
    overscroll-behavior: none;
  }

  /* 2) app-shell（= body）改 fixed，高度/頂端跟隨 visualViewport
        特異性 0,2,1（body.app-shell.home-v3）> chrome.css 的 0,1,1（body.app-shell）→ 穩定覆蓋 */
  body.app-shell.home-v3 {
    position: fixed;
    top:   var(--app-top, 0px);
    left:  0;
    right: 0;
    height: var(--app-h, 100%);
    /* 覆蓋 chrome.css 手機段：position:absolute; top:0; height:100% */
  }

  /* 3) 對話捲動不外漏（保護 column-reverse 內部捲動，避免冒泡成整頁橡皮筋） */
  .home-v3 .swipe-page { overscroll-behavior: contain; }

  /* 4) v3 驗收 #1 要 masthead 維持可見 → 取消 chrome.css 的鍵盤收起 masthead */
  body.home-v3.keyboard-open .masthead {
    margin-top: 0;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── 真機調校開關（若 device test 發現 shell 位置偏移時用）──
   iOS position:fixed 的定位基準（layout vs visual viewport）會因版本而異：
   · 預設假設 fixed 相對 layout viewport → top 需補 offsetTop（上方 var(--app-top) 即此）
   · 若實測 shell 反而被多推一截 → 代表該機 fixed 已相對 visual viewport，
     此時把 top 改回 0（不補 offsetTop）。改法：註解掉上面 top 那行、改下行：
   body.app-shell.home-v3 { top: 0; }
   （兩種都先在 kb-test.html 方案 F 上各測一次再定。） */