/* ==========================================================================
   归浦GEO v8.9 · 原生交互质感层（Native Feel Layer）
   --------------------------------------------------------------------------
   定位：不改动 v8 设计系统的配色 / 间距 / 圆角 / 信息层级，
        只补齐「网页」与「装了 App」之间那层平台级差异。
   依据：Emil Kowalski《mobile-native / emil-design-eng》的硬规则。

   本文件解决 7 个问题，每条都附了「为什么会这样」：
     1. 点击时 iOS/Android 的那一层灰/蓝高亮闪一下
     2. 点击到按钮有约 300ms 的迟滞感
     3. 输入框字号 <16px，iOS 聚焦时把整页放大且失焦后不还原
     4. 触摸设备上 hover 态残留（已在 v8.css 用能力门控解决，这里是兜底）
     5. 下拉刷新 / 整页橡皮筋把应用内滚动容器一起拽走
     6. 长按按钮时选中按钮文字、弹出复制菜单
     7. 触控目标偏小（34/28/24px），手指按不准

   另外补：弹窗打开时锁定背景滚动；键盘用户的 focus 可见环；
          prefers-reduced-motion 降级。
   ========================================================================== */

/* ---------- 1. 根基线：三行声明，消除「网页感」的一半 ---------- */
html {
  /* 1a. 杀掉系统点击高亮。iOS Safari 与 Android Chrome 会在任何带点击处理的
         元素上盖一层半透明灰/蓝，这是最响亮的「我是网页」信号，而且会盖住
         我们自己设计的按压反馈。设置一次，全局生效。 */
  -webkit-tap-highlight-color: transparent;
  /* 1b. 横屏时某些安卓浏览器会把字号放大，导致布局忽大忽小。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 1c. 应用有自己的滚动容器，禁掉整页的下拉刷新与橡皮筋。
         注意用 none 而非在 JS 里 preventDefault —— 后者会让监听器变成
         non-passive，直接吃掉滚动帧。 */
  overscroll-behavior: none;
}

body {
  /* 与根一致，部分旧版安卓只认 body 上的声明 */
  overscroll-behavior: none;
}

/* ---------- 2. 控件：点击零迟滞 + 不当选中文本 ---------- */
/* touch-action: manipulation 告诉浏览器「这个元素永不双击缩放」，
   于是 click 事件立即触发，不再等 300ms 看是否有第二次点击。 */
.v8-btn,
.v8-nav__item,
.v8-nav__subitem,
.v8-mnav a,
.v8-drawer__close,
.v8-top__btn,
.v8-item,
.v8-tab,
.v8-chip,
.v8-kpi,
a[href],
button,
[role="button"],
label[for],
summary {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* 长按链接/图片时 iOS 会弹复制分享菜单，原生控件从不这样 */
button,
[role="button"],
.v8-btn,
.v8-drawer__close,
.v8-mnav a {
  -webkit-touch-callout: none;
}

/* 但正文、表格、错误信息、订单号这些是「内容」，用户要能复制。
   所以绝不把 user-select:none 写在 body 上。 */
.v8-table td,
.v8-table th,
.v8-modal__body,
.v8-drawer__body,
.v8-toast__msg,
.v8-page-head p,
.v8-muted {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- 3. 输入框：16px 是 iOS 不放大页面的阈值 ---------- */
/* iOS Safari 在聚焦字号 <16px 的输入框时会把整个页面放大，且失焦后不还原，
   用户留在一个人 crop 过又漂走的布局里。过去用 maximum-scale=1 禁缩放来规避，
   那是拿无障碍换方便 —— 已在 index.html 移除，这里补上正确的解法。 */
@media (pointer: coarse) {
  .v8-input,
  .v8-field input,
  .v8-field textarea,
  .v8-field select,
  .v8-modal__body input,
  .v8-modal__body textarea,
  .v8-modal__body select,
  .v8-drawer__body input,
  .v8-drawer__body textarea,
  .v8-drawer__body select,
  input,
  textarea,
  select {
    font-size: 16px;
  }
  /* 数字/验证码类输入直接弹出数字键盘，少一次切键盘 */
  input[inputmode="numeric"],
  input[type="tel"] {
    letter-spacing: 0.06em;
  }
}

/* ---------- 4. 触控目标：粗指头下至少 44px ---------- */
/* Apple HIG 与 Material 的最小触控尺寸都是 44px / 48dp。
   v8 的按钮是 34/28/24px，鼠标很准，手指不行。 */
@media (pointer: coarse) {
  .v8-btn { min-height: 44px; padding: 0 16px }
  .v8-btn--sm { min-height: 40px }
  .v8-btn--xs { min-height: 36px }
  .v8-drawer__close { width: 44px; height: 44px }
  .v8-nav__item,
  .v8-nav__subitem { min-height: 44px }
  .v8-mnav a { min-height: 48px; padding: 6px 0 }
  .v8-top__proj { min-height: 40px }
  .v8-item { min-height: 44px }
  .v8-tab,
  .v8-chip { min-height: 36px }
}

/* ---------- 5. 弹窗/抽屉：打开时锁定背景滚动 ---------- */
/* 没有这层，手机上打开弹窗后还能滚动背后的页面，关掉弹窗人已经跑到了别处。
   用 class 而非直接改 body.style，便于统一管理与调试。 */
body.v8-lock {
  overflow: hidden;
  /* iOS 上 overflow:hidden 仍可能漏滚，补一个 touch-action */
  touch-action: none;
}

/* ---------- 6. 移动端弹窗改为底部动作面板（bottom sheet） ---------- */
/* 桌面居中方框在手机上又高又远，拇指要够到顶部的关闭叉号很别扭。
   ≤640px 改为贴底、圆角在上、向上滑入 —— 这是 iOS/Android 的原生范式。 */
@media (max-width: 640px) {
  .v8-modal-mask {
    align-items: end;          /* 贴底 */
    padding: 0;                /* 通栏 */
    grid-template-columns: minmax(0, 1fr);
  }
  .v8-modal,
  .v8-modal--wide,
  .v8-wx-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;         /* dvh 跟随浏览器地址栏收展，不会被他盖住 */
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: v8-sheet-up 260ms var(--ease-out);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .v8-modal__head { padding: 16px 18px }
  .v8-modal__body { padding: 18px }
  .v8-modal__foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) }
  /* 抓手：给用户「这是可以划下去的」心理模型 */
  .v8-modal__head::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 99px;
    background: var(--line);
  }
  .v8-modal__head { position: relative; padding-top: 20px }
}

@keyframes v8-sheet-up {
  from { transform: translateY(100%) }
  to   { transform: translateY(0) }
}

/* 抽屉在窄屏本就通栏，补一个安全区内边距 */
@media (max-width: 640px) {
  .v8-drawer { border-radius: 0 }
  .v8-drawer__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) }
}

/* ---------- 7. 动效降级：尊重系统偏好 ---------- */
/* 前庭功能障碍用户会被平移动效引发不适。系统说减少动效时就全关掉，
   但保留 opacity 过渡（纯淡入不引发眩晕）。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .v8-modal,
  .v8-wx-modal { animation: none }
  .v8-kpi:hover { transform: none }
}

/* ---------- 8. 键盘焦点环：能看，但不打扰鼠标用户 ---------- */
/* :focus 会同时命中鼠标点击后的残留焦点，视觉杂乱；
   :focus-visible 只在键盘导航时出现，是两者的正确分工。 */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}
.v8-input:focus-visible,
.v8-field input:focus-visible {
  outline: none; /* 输入框用自己的 focus 边框，避免双环 */
}

/* ---------- 9. 内层滚动容器：阻止滚动链 ---------- */
/* 抽屉/弹窗内容滚到底时，继续滑会把背后的页面一起带走（滚动链）。
   contain 保留容器自身回弹（那是原生手感），但断掉链接。 */
.v8-drawer__body,
.v8-modal__body,
.v8-table-wrap,
.v8-side {
  overscroll-behavior: contain;
}