/* ==========================================================================
   pxxy 线上培训学院 · 移动端适配层
   --------------------------------------------------------------------------
   建立时间：阶段 5（稳定性 + 手机端 + HTTPS/PWA）

   真机基准（用户指定，其他机型同样受益）：
     · Redmi 14R 5G  —— 6.88" 大屏 + 1640×720 低分辨率，CSS 视口约 360×820。
                        这台考的是：一屏看得见多少内容、字号按钮够不够大、720p 下水印清不清楚。
     · vivo X Fold2  —— 折叠屏：外屏 2520×1080 / 内屏 2160×1916（近 1:1）。
                        这台考的是：展开·折叠瞬间视口尺寸剧烈变化，界面不能错乱、播放器不能黑屏。

   本文件只做「与业务无关的通用手机端兜底」，解决四类问题：
     ① 地址栏伸缩    → 100vh 把底部内容顶出屏幕（改用 dvh）
     ② 字体自动放大  → Android 长段落被系统擅自放大，撑破卡片
     ③ 触控与输入    → 按钮太小点不准、输入框聚焦时页面乱缩放
     ④ 横向溢出      → 低分辨率屏上元素撑出横向滚动条

   引入方式：各页面 </head> 之前加 <link rel="stylesheet" href="/mobile.css" />
             （必须晚于页面自身的 <style>，否则覆盖不生效）
   ========================================================================== */

/* ---------- ① 视口高度：用 dvh 跟随「当前可见高度」 ----------
   手机浏览器地址栏收起/展开时，vh 不会变（永远等于最大视口），
   于是底部内容会被地址栏盖住。dvh 会跟着变，这才是正确的单位。
   不支持 dvh 的老内核自动忽略这段，退回原来的 vh 行为。 */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}
@supports (height: 100dvh) {
  .stage.vh-dynamic { min-height: 0; }
}

/* ---------- ② 关掉 Android Chrome 的字体自动放大 ----------
   Android Chrome 会对「段落型长文本」擅自放大字号（font boosting），
   在低分辨率大屏机（Redmi 14R）上尤其明显：同一张卡片里文字忽大忽小、直接撑破容器。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- ③ 触控与输入 ---------- */

/* 手指点得准：Android 无障碍建议最小触控目标 44×44。
   Redmi 14R 屏幕大但分辨率低，同一物理距离对应的像素更少，点偏概率更高。 */
.btn, button, input[type="submit"], input[type="button"] {
  min-height: 44px;
  touch-action: manipulation;   /* 去掉 300ms 双击缩放等待，点击更跟手 */
}

/* 去掉 Android 点击时的灰色方块高亮，改用样式内的反馈 */
html { -webkit-tap-highlight-color: transparent; }

/* 输入框字号不得小于 16px：否则聚焦时浏览器会「自动放大页面」把输入框顶到中间，
   用户一松手页面又缩回去，来回跳。这是手机上填表最常见的糟糕体验。 */
input, textarea, select {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}
/* 数字键盘：手机号输入直接弹数字键盘，少切一次输入法 */
input[type="tel"], input[inputmode="numeric"] { font-size: 16px; }

/* ---------- ④ 横向溢出与滚动手感 ---------- */
html, body { overflow-x: hidden; }

/* 表格：窄屏上让它在自己的格子里横向滚动，而不是把整个页面撑宽。
   后台有好几张多列表格，在 360px 宽的手机上必然放不下。
   如果不管，页面会被撑出横向滚动条 —— 手机上看会「整体歪掉、能左右乱拖」。
   这里把表格变成可滚动块，用户手指左右滑能看全，页面本身不动。
   （配合上面的 overflow-x: hidden 使用：前者是正解，后者是兜底。） */
@media (max-width: 820px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table th, table td { white-space: nowrap; }
  /* 表格里长文本（说明、备注）允许折行，否则会拖得很长 */
  table td.wrap-ok, table th.wrap-ok { white-space: normal; }
}

/* 目录类滚动区：滚动到底不要带着整个页面一起滚（手机上很容易误触） */
.lessons {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 弹层：手机上要留出安全边距，且内部可独立滚动，避免底部按钮被手势条盖住 */
@media (max-width: 820px) {
  .modal {
    max-width: calc(100% - 20px) !important;
    margin: 14px auto !important;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    padding: 16px !important;
  }
}

/* ---------- ⑤ 小屏优化（Redmi 14R 等 CSS 宽度 ≤400px 的机型）----------
   这类机器屏幕物理尺寸不小，但 CSS 可用宽度只有 360px 左右，
   两侧留白必须收窄，否则正文被挤成很窄一条，读起来费劲。 */
@media (max-width: 400px) {
  .wrap { width: calc(100% - 24px) !important; }
  footer { font-size: 12px; }
}

/* ---------- ⑥ 折叠屏 / 近方形视口（vivo X Fold2 内屏）----------
   X Fold2 展开后内屏 2160×1916，接近正方形。
   常规「竖屏长条」假设在这里失效，所以要单独把纵向空间收紧，
   避免出现「一块巨大的空白 + 一小条内容」。

   关于判定条件为什么这样写（踩过的坑）：
     · 视口宽度会随设备像素比变化（同一块屏，DPR 2.0 和 2.7 换算出的 CSS 宽度能差 300px），
       所以不能用 max-width 卡死宽度，否则换个 DPR 就匹配不上。
     · 但「宽高比」是物理属性，跟 DPR 无关 —— 2160:1916 ≈ 1.13 永远成立。
       → 因此以宽高比为主判据，min-width 只用来排除小手机。
     · 5/6 (0.83) ~ 6/5 (1.2) 这个区间：
         折叠屏内屏 1.13  → 命中 ✓
         平板竖屏 3/4=0.75 → 不命中 ✓（比 0.83 更窄）
         平板横屏 4/3=1.33 → 不命中 ✓
         普通电脑 16/9=1.78 → 不命中 ✓
   这样只要宽高比落进来就会生效，不管它是哪台折叠屏、什么 DPR。 */
@media (min-width: 600px) and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 6/5) {
  body { line-height: 1.55; }
  footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- ⑦ 安全区（折叠屏圆角 / 手势条 / 挖孔）----------
   只处理底部：Android 横向安全区基本为 0，动了反而会挤掉正文宽度。 */
footer {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ---------- ⑧ 打印与省电：移动端不做多余的动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}