/* =========================================================
   xtap-mobile.css — 星TAP 全站统一移动端适配层
   版本：v2（2026-09-06，补 touch-action 去点击延迟）

   加载顺序：必须在 xtap-home.css / xtap-ui.css 之前 <link>
   适用：首页 + /photo /video /music /download 全部子页面

   设计原则：
   1. mobile-first + 令牌驱动：断点/安全区/视口/间距全部抽成令牌，改一处全局生效
   2. 渐进增强 @supports：老内核（含微信 X5）自动降级，不崩、只是退化为「能用」
   3. 规范断点（全站唯一真源）：
        xs:360   sm:480   md:640   lg:760   lg+:880   xl:1000
      注：CSS 规范限制 @media 内不能用 var()，故断点写字面量，
          但全站只允许出现上面这 6 个值（grep 卡点校验）。
   ========================================================= */

/* ---------- 1. 视口高度令牌 ---------- */
:root{
  /* --vh  : 动态视口，跟随浏览器/微信工具栏收放。用于全屏浮层、弹窗、灯箱
     --vh-s: 稳定视口（最小），不随工具栏跳动。用于页面区块高度（hero 等），避免滚动时抖动
     先给 100vh 兜底，支持新单位时再覆盖 —— 老 X5 不识别 dvh/svh 也不会报错 */
  --vh:   100vh;
  --vh-s: 100vh;
}
@supports (height:100dvh){ :root{ --vh:100dvh } }
@supports (height:100svh){ :root{ --vh-s:100svh } }

/* ---------- 2. 安全区令牌（带 0 降级） ---------- */
:root{
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ---------- 3. 流式间距 / 尺寸令牌 ---------- */
:root{
  --gap-nav:       clamp(18px, 2.6vw, 30px);   /* 导航项间距 */
  --gap-brand-nav: clamp(14px, 3.5vw, 20px);   /* 品牌↔导航最小间距（移动端隐藏文字后的显式补偿，防重叠） */
  --pad-page:      clamp(16px, 5vw, 22px);     /* 页面左右内边距 */
  --tap:           44px;                        /* 最小可点击尺寸（iOS HIG 44pt） */
}

/* ---------- 4. 全局移动端基线 ---------- */
html{
  -webkit-text-size-adjust:100%;
          text-size-adjust:100%;
}
body{ overflow-x:hidden }

/* iOS / 微信 X5：background-attachment:fixed 会卡顿甚至失效，降级为 scroll */
@supports (-webkit-touch-callout:none){
  body{ background-attachment:scroll !important }
}

/* 触摸设备：去掉点击高亮块 */
a,button,input,label,summary{ -webkit-tap-highlight-color:transparent }
/* 触摸设备：去掉 300ms 点击延迟与双击缩放（老安卓 WebView 尤明显），但不禁双指缩放 */
a,button,input,label,summary,.nav-links a,.words-nav button,.lb-close,.lb-nav,.music-btn,.links a{touch-action:manipulation}

/* 微信 X5：部分版本滚动时 position:fixed 会被降级为 absolute。
   全站固定层统一用「fixed 容器 + 内部 absolute 子元素」写法（子页面播放器已如此），此处不再覆写。 */
html.wechat body{ overscroll-behavior-y:contain }

/* ---------- 5. 工具类（按需使用，语义化命名） ---------- */
.u-fill-h { height:var(--vh) }     /* 全屏浮层高度（动态视口） */
.u-fill-s { height:var(--vh-s) }   /* 页面区块高度（稳定视口） */
.u-safe-t { padding-top:var(--safe-top) }
.u-safe-b { padding-bottom:var(--safe-bottom) }
.u-safe-x { padding-left:var(--safe-left); padding-right:var(--safe-right) }
.u-pad-x  { padding-left:var(--pad-page);  padding-right:var(--pad-page) }

/* ---------- 6. 极窄屏收敛（<=360） ---------- */
@media(max-width:360px){
  :root{ --pad-page:16px; --tap:42px }
}