/* ============================================================================
   shared/mobile.css · 手机端适配层
   ----------------------------------------------------------------------------
   加载位置：**每个 app 的 app.css 之后**（最后一个 <link>）。
   为什么放最后：这一层的规则要能压住各 app 自己写的窄屏规则
   （比如 `.kb-search input{font-size:var(--t-sm)}` 会把输入框变成 12.5px，
   而 iOS 在 <16px 的输入框上聚焦时会自动放大整个页面）。
   全站禁 !important —— 需要更高优先级时用 `html body` 前缀把优先级抬上去，
   而不是用暴力覆盖。

   三条原则（别破坏）：
     1. **不做单独的移动版页面**。两套 HTML = 两份逻辑，改一处忘一处，
        迟早对不上；功能一致性靠响应式天然保证。
     2. **桌面逐像素不变**：所有规则都在 @media (max-width:720px)
        或 @media (pointer:coarse) 里。
     3. **点击区按"手指"判，不按窗口宽度判**：触屏笔记本窗口可能很窄，
        但用鼠标点，不该被撑到 44px。所以点击区用 pointer:coarse。

   ——— 实测（390×844 体检，改之前）———
     · 顶栏 7 个应用图标 + 品牌 + 主题按钮 ≈ 414px > 390px → 横向溢出
       → Chrome 为"适配"把整页缩小到 0.83 倍（视口被撑到 469px），
         于是全站字号与点击区跟着一起变小 —— 手机端"哪哪都不对"的元凶
     · 输入框 11.5–12.5px → iOS 聚焦自动放大页面
     · 模块小卡 30px、应用图标 34px → 手指点不准
   ========================================================================= */

/* iOS 文字自动放大关掉：字号我们自己控 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 防止任何元素把页面撑宽（撑宽就会触发浏览器整页缩小） */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── 触屏：把点击区撑到手指点得准 ─────────────────────────────────── */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  /* 通用按钮一律给足高度。体检时发现 100 多个 30px 的胶囊/链接，
     手指点下去经常点错隔壁 —— 这是手机上最影响体验的一类问题。 */
  button, a.btn, summary, select { min-height: 40px; }
  .appbar-brand { min-height: 44px; }
  .appswitch a { width: 44px; height: 44px; }
  .appswitch a svg { width: 20px; height: 20px; }
  .domain-filter { padding: 4px; }
  .domain-filter button { min-height: 40px; padding-inline: var(--s-4); }
  /* 目录/导航类链接：体检时这些是 30px，手指点不准 */
  .knw-nav a,
  .dock-alt,
  .dock-foot a { min-height: 40px; display: inline-flex; align-items: center; }
  /* 去掉双击缩放的 300ms 延迟 */
  a, button, [role="button"], summary, label, select { touch-action: manipulation; }
  /* 触屏没有 hover，用 :active 给反馈 */
  .btn:active { background: var(--accentSoft); }
}

/* ── 窄屏 ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --shell-pad: 13px;
    --topbar-h: 54px;
    /* 注意：**不动字号令牌**。手机上正文 15px 正好，
       调小反而难读 —— 手机端的问题从来不是"字太大"。 */
  }

  /* 顶栏：三件事一起做才不溢出 —— 去副标题、名字可省略号、切换器可横滑 */
  .appbar { gap: var(--s-2); padding: 0 10px; }
  .appbar-brand { gap: var(--s-2); min-width: 0; }
  .appbar-brand .sub { display: none; }        /* 英文副标题最占地方 */
  .appbar-brand > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-base);
  }
  /* ★ 关键：应用切换器横滑，而不是把整页撑宽 */
  .appswitch {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .appswitch::-webkit-scrollbar { display: none; }
  .appswitch a { scroll-snap-align: center; flex: 0 0 auto; }
  .appbar-spacer { flex: 0 1 auto; }
  .appbar-slot { display: none; }              /* 放不下的先收起 */

  /* ★ 输入框必须 ≥16px：否则 iOS 聚焦时把整页放大。
     优先级问题（踩过）：各 app 写的是 `.rec-search input{font-size:var(--t-sm)}`
     = (0,1,1)，而 `html body input` = (0,0,3) —— 类选择器赢，规则失效。
     全站禁 !important，所以用 `html:root` 加一个伪类把优先级抬到 (0,1,3)，
     既压得住，又是"结构性"做法而不是暴力覆盖。 */
  html:root body input,
  html:root body select,
  html:root body textarea,
  html:root body .input { font-size: 16px; }
  html:root body textarea { line-height: 1.6; }

  .wrap { padding: var(--s-4) var(--shell-pad) var(--s-6); }
  .card { padding: var(--s-4); border-radius: var(--r-md); }
  .empty { min-height: 150px; padding: var(--s-5); }
  .note { font-size: var(--t-sm); padding: var(--s-3); }
}

/* ── iPhone 底部横条：固定底栏要让开 ─────────────────────────────── */
/* 8 个应用后，390px 屏幕上品牌名只剩「智…」反而是噪声。
   超窄屏只保留可点击的品牌标记，把宽度还给应用切换器。 */
@media (max-width: 480px) {
  .appbar-brand > span:last-child { display: none; }
  .appbar-brand { flex: 0 0 auto; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 720px) {
    body { padding-bottom: env(safe-area-inset-bottom); }
  }
}