/* ==========================================================================
   【第42轮】手机端修复 —— 由 proof/mobiletest.js 实测发现并守住

   实测（Chromium 390x844 / isMobile / hasTouch）发现三件事：
     1. 文档高 5,607px，而 #btnRun（算区间）在 y=1,577px
        —— 主按钮在 1.9 屏之外。原因见 index.html 的结构：
        #app.pushable（品类筛选，678px）→ .card（表单，879px）
        → 按钮组（裸 div，直接挂在 body 上）
        桌面上 y=1,577 在滚动范围里无所谓；手机上这是"填完表
        还要再滑半屏才能按"，而店主就是拿着手机用的。
        ⇒ 手机上把主按钮吸底。
     2. 横向溢出 24px：.pop__panel right=414（视口 390）
     3. 横向溢出 58px：.tip__bubble right=448（视口 390）
        —— 这两个是 absolute 定位的气泡/浮层，靠 trigger 定位，
        触发点在屏幕右缘时就会顶出去。
   为什么以前没发现：41 轮的浏览器测试都在 1280x900 跑，
   那个宽度下 (2)(3) 根本不溢出；而 uitest/b2btest 是
   evaluate() 直接调函数，不是真的"用手指点屏幕上的那个按钮"，
   所以 (1) 也测不出来。
   ========================================================================== */

/* ---- (1) 手机上主按钮吸底 ------------------------------------------- */
/* 桌面端完全不动：下面的规则只在 <900px 生效，uitest 的
   1280x900 布局与选择器命中都不受影响。 */
@media (max-width:899px){
  #btnRun,#btnDemo{ min-height:44px; }         /* 触控目标 44px */

  /* 按钮组的那个裸 div 没有 class，用它上面的属性定位不到，
     所以改用 :has() 让按钮自己吸底（父级会跟着撑满一行）。
     :has() 在 Chrome/Edge/Safari 15.4+ / Firefox 121+ 已可用。 */
  body:has(> #btnRun) #btnRun{
    position:fixed; z-index:var(--z-sticky,60);
    left:12px; right:12px; bottom:12px; width:auto;
    box-shadow:0 6px 20px rgba(16,24,40,.18);
  }
  /* "填入示例"是辅助动作，让位到吸底按钮上方 */
  body:has(> #btnRun) #btnDemo{
    position:fixed; z-index:var(--z-sticky,60);
    left:12px; right:12px; bottom:66px; width:auto;
  }
  /* 吸底按钮不能压住内容：给 body 留出底部空间 */
  body:has(> #btnRun){ padding-bottom:132px; }

  /* iOS Safari 底部安全区（横屏home条） */
  @supports (padding:max(0px)){
    body:has(> #btnRun){ padding-bottom:calc(132px + env(safe-area-inset-bottom)); }
    body:has(> #btnRun) #btnRun{ bottom:calc(12px + env(safe-area-inset-bottom)); }
    body:has(> #btnRun) #btnDemo{ bottom:calc(66px + env(safe-area-inset-bottom)); }
  }
}

/* ---- (2)(3) 浮层不顶出视口 ------------------------------------------- */
@media (max-width:899px){
  /* 浮层宽度改为"不超过视口 - 16px 边距" */
  .pop__panel{ max-width:calc(100vw - 16px); }
  /* 触发点在屏幕右缘时，absolute 定位会顶出去。
     JS 侧按 trigger 的 right 做过定位，这里兜底：
     当浮层右缘超出视口时，改用 right:0 对齐容器。
     —— 用 overflow-x:clip 兜住最后的余量，
        比让它撑出横向滚动条好（横向滚动条会让人以为页面坏了）。 */
  .pop__panel,.tip__bubble{ overflow-wrap:anywhere; }
  .tip__bubble{ max-width:min(260px, calc(100vw - 28px)); }
}

html,body{ overflow-x:clip; }