/* ───────────────────────────────────────────────────────────────
   mobile.css — 三端共享移动端基线
   用户端 user.html / 管理端 index.html / 落地页 landing.html 共用。
   原则:只放「跨端通用 + 安全 + 高价值」的规则。端专属布局仍留在各自文件。
   v1.0.75 起;v1.0.77 固化「速览优先」设计 token + opt-in 工具类。
   ─────────────────────────────────────────────────────────────── */

:root {
  /* 统一移动断点(@media 条件不能用 var(),此处供文档 + JS matchMedia 对齐)。全站统一 768。 */
  --bp-mobile: 768px;
  /* v1.0.77 移动卡片节奏 token(后续各屏改用 .m-card / 直接引用,保证整齐统一)*/
  --m-card-pad: 14px 16px;
  --m-card-radius: 12px;
  --m-gap: 12px;          /* 卡间距 */
  --m-touch: 44px;        /* 最小触控高 */
}

@media (max-width: 768px) {
  /* iOS 防输入聚焦自动放大:可编辑控件字号必须 ≥16px(三端统一,管理端表单同样受益) */
  input, select, textarea { font-size: 16px; }

  /* ── opt-in 工具类(后续屏套用,逐步替换各自零散卡样式 → 统一节奏,解决「排版乱」)── */

  /* 统一移动卡片:背景/边框/圆角/内距一致 */
  .m-card {
    background: var(--bg1); border: 1px solid var(--border);
    border-radius: var(--m-card-radius); padding: var(--m-card-pad);
  }
  .m-card + .m-card { margin-top: var(--m-gap); }

  /* 统一区块标题节奏 */
  .m-sec-title {
    font-size: 13px; font-weight: 600; color: var(--text1);
    margin: 16px 0 8px; letter-spacing: .01em;
  }

  /* 触控放大:给关键可点元素手动加 .touch-44(不全局强制,避免撞坏密集表格按钮) */
  .touch-44 { min-height: var(--m-touch); display: inline-flex; align-items: center; }

  /* 首屏黄金区:顶栏下、底栏上的一屏高度,放最高优先级信息(后续屏套用) */
  .m-hero-fold { min-height: calc(100dvh - var(--m-topbar, 96px) - var(--m-tabbar, 64px)); }

  /* 数字统一等宽对齐(沿用设计宪法 §2.3) */
  .m-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
}

/* ───────────────────────────────────────────────────────────────
   v1.0.130 全局无障碍基线(三端共享, 非 @media 限定 → 全宽生效)
   ─────────────────────────────────────────────────────────────── */

/* a11y #1 焦点环 —— 键盘 Tab 时可见 2px 金色环; !important 压过散落的 inline outline:none。
   :focus-visible 仅键盘触发, 鼠标点击不出环, 不打扰视觉。 */
:focus-visible {
  outline: 2px solid var(--accent, #f0b90b) !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* v1.0.149 a11y #1-headings: 屏幕阅读器专用隐藏文本(视觉不可见, 不占布局)。
   用于给每个视图注入语义 h1, 让 SR 用户有页面大纲(13 视图原本零 h1-h6)。 */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* a11y #4 减弱动态 —— 尊重系统「减弱动态」偏好(前庭敏感 / 盘中 price-flash 闪烁)。
   用近零时长而非 none, 保留 transitionend/animationend 事件不破坏 JS。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   v1.0.150 骨架屏(数据密集页加载态)—— 防白屏/纯文字, 给结构预览
   三端共享; shimmer 用 prefers-reduced-motion 自动降级为静态。 */
.skel { background: var(--bg2, #2b2f36); border-radius: 6px; position: relative; overflow: hidden; }
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: skelShimmer 1.2s ease-in-out infinite;
}
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
.skel-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skel-row {
  display: grid; grid-template-columns: 28px minmax(0,1fr) 70px 60px 48px; gap: 10px;
  align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
}
.skel-line { height: 12px; }
.skel-line.lg { height: 16px; }
.skel-card { background: var(--bg1, #1e2026); border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 10px; padding: 14px; }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ───────────────────────────────────────────────────────────────
   v1.0.139 移动端触控目标(a11y #6 touch-target)—— 关键可点元素 ≥40px
   不改 HTML, 在移动端保证常见操作按钮/导航项触控高度, 减少误触。
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 管理端: 表格内/工具栏操作按钮 (v1.0.357 .adm-btn → .btn .btn-xs) */
  .btn-xs, .btn-ghost, .row-act,
  /* 用户端: 导航项 + 次要按钮 + 卡片菜单 */
  .side-item, .m-card-popup__item, .tab-btn,
  /* 通用 icon 按钮 */
  .tb-fb, .tb-kbd, .close-btn {
    min-height: 40px;
    display: inline-flex; align-items: center;
  }
  /* 行内操作按钮额外保证可点宽度 */
  .row-act, .close-btn { min-width: 40px; justify-content: center; }
}