/* ===== 交互方式适配：触屏 / 动效偏好 =====
   单独一个文件、并且注册在 index.html 的最后。这里全是横切所有栏目的覆盖，
   要盖过前面 base / layout / login / tables / detail / forms / editors / charts 八个文件里的既有规则。

   为什么不拆散写进各栏目文件：CSS 的层叠规则是"同优先级后加载者胜"，媒体查询**不增加优先级**，
   所以写在前面的文件里的窄屏/触屏规则会被后面文件里的基础规则反盖。
   本项目已经栽过一次（.table-wrap 的 overflow），横切的规则集中放最后是唯一稳妥的位置。

   用 (hover: none) and (pointer: coarse) 而不是单独 (hover: none)：
   触屏笔记本的主指针是鼠标/触控板，pointer:coarse 不匹配，
   那类机器保持桌面尺寸与抬升态，不被误伤。 */

@media (hover: none) and (pointer: coarse) {
  /* ---- 干掉会"粘住"的悬停态 ----
     触屏没有 hover 的离开时机：点一下卡片，抬升态就一直留在那儿，
     看上去像选中了但其实没有。改回静止态。
     下面每条都要显式写出"静止时该是什么样"，不能只写 transform:none 了事。 */
  .kpi:hover,
  .chart-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  .field-group:hover { background: var(--bg); }
  /* 注意别误伤 .row-failed td：失败行是<td>自己上的红底，这里清的是<tr>的背景 */
  tbody tr[data-id]:hover { background: none; }

  /* ---- 放大触摸目标 ----
     36px 是给鼠标准备的，手指按不准（推荐下限 44px）。 */
  button { height: 44px; }
  .compact { height: 44px; }              /* 压 base.css 里的 30px */
  .kv-row button,
  .inv-row > button {
    height: 44px;
    width: 44px;                          /* 原 32×32 的删除钮 */
  }
  /* 分段切换是个胶囊，按钮不能比外壳还高，只放宽到 34px */
  .mode-switch button { height: 34px; }
  /* 「← 返回列表」是文字导航，不能跟着放大到 44px（那会在昵称上方开一大片空白），
     但 18px 的行高又太难点。折中到 32px。这一条靠"同优先级后加载者胜"压过
     detail.css 里的 height:auto——两个都是 .back-button（0,1,0），本文件在最后。 */
  .back-button { height: 32px; }

  /* 勾选框没有尺寸样式，全靠浏览器默认（约 13px）撑，手指根本按不准。
     22px 而不是 44px：勾选框在存档编辑器里是密集的布尔字段，真按 44px 会把
     每行都撑高、一屏少看三分之一，这里取"点得中"与"看得多"的折中。
     必须 !important——ui/form-controls.js 的 buildCheckControl 在内联 style 上
     写死了 18px，样式表里不加 !important 的声明一律赢不过内联。 */
  input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* ---- 挡住 iOS 的聚焦缩放 ----
     iOS Safari 在聚焦字号小于 16px 的输入框时会把整页放大，而且放大后不会自己缩回去。
     这个后台的 body 字号是 13px（tokens.css），所有控件都 font:inherit，所以每个输入框都会中招——
     "手机端看起来全变形了"有一大半是这一条。
     index.html 的 viewport 没写 maximum-scale（**那是对的，别加**：禁掉缩放会连正常的双指放大一起废掉，
     无障碍上也说不过去），所以只能从字号下手。

     用 !important 是因为下面这些地方都各自设了更具体或同等特异的字号，逐个列举既啰嗦又早晚漏一个：
       .editor-panel textarea { font: 13px Consolas… }、.save-editor { font: 12px/1.55 Consolas… }、
       .inv-weapon input { font-size: 13px }。
     这条是平台行为的硬要求（低于 16px 就缩放），必须绝对生效，用 !important 是正解。 */
  input, select, textarea { font-size: 16px !important; }
}

/* 系统开了"减少动态效果"：这套过渡全是装饰性的，跟着关掉。
   用近乎 0 而不是 0，是为了让 transitionend 之类的钩子仍然会触发。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}