/* ============================================================================
 * 彤梦焙语 · 移动端适配基线（Mobile Adaptation Baseline）
 * 版本 v1.0 · 2026-09-20 · 规范见项目根 DESIGN.md §8
 * ----------------------------------------------------------------------------
 * 定位：**纯增强层**。引入它不会改变 PC 端（>900px）的任何像素。
 *       所有规则都包在 @media (max-width:900px) 或纯新增工具类里，
 *       不会覆盖页面已有的自主样式 —— 可灰度引入、可随时撤下。
 *
 * 用法（放在页面自身 <style> **之后**、</head> 之前）：
 *   <link rel="stylesheet" href="design-tokens.css?v=20260920dt1">
 *   <link rel="stylesheet" href="mobile-base.css?v=20260920mb1">
 *
 * 断点说明（两套阈值，各司其职，非笔误）：
 *   · <=900px —— 本文件的「适配增强」阈值。与既有 common.js 的移动补丁
 *                保持一致，避免同页出现两套互相打架的规则。
 *   · < 768px —— DESIGN.md §8.1 的「信息架构分流」阈值（底部 Tab Bar vs 侧栏），
 *                由 JS 判定，与 CSS 增强无关。
 * ========================================================================= */

@media (max-width:900px){

  /* ── 1. 视口兜底：禁止整页横向滚动 ────────────────────────────────────
     门店手机上横向"晃动的页面"是最高频的体感缺陷。真正的宽表格由
     §6 的卡片化方案处理，不靠横向滚动糊过去。 */
  html,body{ max-width:100%; overflow-x:hidden; }

  /* ── 2. 安全区：底部必须为 Tab Bar 与 iPhone 刘海/横条留白 ─────────── */
  body{
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    -webkit-text-size-adjust:100%;   /* 允许用户缩放，不禁用 */
  }
  .wrap,.container,.page,.main{
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }
  /* 带底部导航的页面：再加一层 Tab Bar 高度 */
  body.has-tabbar{ padding-bottom:calc(var(--tabbar-h,56px) + 16px + env(safe-area-inset-bottom)); }

  /* ── 3. 触摸目标 ≥44px（iOS HIG / Material）───────────────────────────
     只约束高度与命中区，不改配色与布局结构。 */
  .btn,.btn-sm,.btn-outline,.btn-primary,.btn-ghost,.btn-secondary,.btn-danger,
  button,input[type="submit"],input[type="button"],a.btn,.nav-tab,.tab{
    min-height:44px;
  }
  .tab,.nav-item,.tag-btn,.link-card,.row,.tabbar-item{ min-height:40px; }
  /* ⚠ .chip 是**非交互文字标签**，不适用最小触摸高度。
     （实测：把 .chip 纳入 min-height:40px 后，单字符标签会被 flex 拉伸成
       40px 高的椭圆，视觉上是明显的破图。可点击的筛选芯片请用 .chip-btn / .tag-btn） */
  /* 特异性必须提到 (0,1,1)：common.js 在 body 中执行时会向 head **追加**一段
     <style id="mobileA11yStyle">，其中 `.chip{min-height:40px}` 与选择器 .chip 同特异性，
     但追加位置在本文件之后 → 靠顺序它反而胜出。加 body 前缀即可稳定压过它，
     不依赖文件/脚本的加载先后。实测：改前 12 个 chip 全被撑到 40px。 */
  body .chip{ min-height:0; }
  /* 图标按钮：视觉图标 22px + 内边距补足 44px 命中区 */
  .icon-btn,.btn-icon{ min-width:44px; min-height:44px; display:inline-flex;
                       align-items:center; justify-content:center; }
  /* 相邻可点元素的间距下限，防误触 */
  .btn + .btn,.tab + .tab{ margin-left:0; }

  /* ── 4. 输入框字号必须 ≥16px ─────────────────────────────────────────
     iOS Safari 在 font-size<16px 的输入框聚焦时会自动放大整个页面，
     且不会自动还原 —— 这是移动端最刺眼的体验断裂。 */
  input,select,textarea{ font-size:16px !important; min-height:44px; }
  input[type="checkbox"],input[type="radio"]{ min-height:auto; width:20px; height:20px; }

  /* ── 5. 字号下限 12px ────────────────────────────────────────────────
     现存页面存在 9px / 10px / 10.5px / 11px 共约 257 处。门店员工中
     中老年使用者占比不低，这里做兜底抬升；页面自身按 DESIGN.md §3.2
     改用 token 后本规则自然失效（因值已 ≥12px）。 */
  small,.hint,.tip,.sub,.meta,.footnote,.muted,[class*="-hint"],[class*="-sub"],[class*="-meta"]{
    font-size:max(12px, 1em);
  }
  /* 显式内联写了 <12px 的兜底（含 !important 内联场景由页面自行修正） */
  *[style*="font-size:9px"]   { font-size:12px !important; }
  *[style*="font-size:10px"]  { font-size:12px !important; }
  *[style*="font-size:10.5px"]{ font-size:12px !important; }
  *[style*="font-size:11px"]  { font-size:12px !important; }

  /* ── 6. 表格：横向滚动兜底（过渡态）─────────────────────────────────
     ⚠ 这只是"别撑破页面"的兜底，**不是移动端方案**。DESIGN.md §4.10 要求
     >4 列的表格在移动端转为卡片列表，用 §7 的 .m-cards 落地。 */
  .tbl-scroll-m,.table-scroll,.tbl-wrap{
    display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  table{ max-width:100%; }

  /* ── 7. 卡片化表格（opt-in）─────────────────────────────────────────
     给 <table> 加 class="m-cards"，移动端即转为卡片列表：
       每个 <tr> 变一张卡，<td> 的标签由 data-label 提供（由 mobile-base.js
       自动从 <thead> 的 <th> 文本注入，无需手写）。
     桌面端（>900px）完全不受影响，仍是原表格。 */
  table.m-cards{ display:block; border:none; }
  table.m-cards thead{ display:none; }
  table.m-cards tbody{ display:block; }
  table.m-cards tr{
    display:block; background:var(--surface-1,#fff);
    border:1px solid var(--n-200,#EDE3D6); border-radius:var(--r-lg,12px);
    padding:12px 14px; margin-bottom:12px; box-shadow:var(--shadow-1,none);
  }
  table.m-cards td{
    display:flex; align-items:baseline; gap:12px;
    padding:6px 0; border:none; text-align:right;
  }
  table.m-cards td::before{
    content:attr(data-label);
    flex:0 0 auto; min-width:76px; text-align:left;
    color:var(--n-600,#5C534A); font-weight:500; font-size:13.5px;
  }
  table.m-cards td:first-child{
    display:block; text-align:left; font-weight:700; font-size:15px;
    padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--n-200,#EDE3D6);
  }
  table.m-cards td:first-child::before{ content:none; }
  table.m-cards td.num{ font-variant-numeric:tabular-nums; }

  /* ── 8. 栅格：多列自动收成单列 ──────────────────────────────────────── */
  .grid,.stat-grid,.cards,.kv,[class*="-grid"]{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }

  /* ── 9. 粘性表头在手机上让位给 App Bar，避免双重遮挡 ───────────────── */
  thead.sticky,th.sticky{ position:static; }

  /* ── 10. 手势与滚动惯性 ────────────────────────────────────────────── */
  .tabs,.chip-row,.scroll-x{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tabs::-webkit-scrollbar,.chip-row::-webkit-scrollbar,.scroll-x::-webkit-scrollbar{ display:none; }
}

/* ── 11. 极小屏（<360px）：进一步收窄，防关键数字溢出 ────────────────── */
@media (max-width:359px){
  .stat .s-value,.stat-value{ font-size:24px; }
  .brand-text h1{ font-size:16px; }
  .tabbar-item{ font-size:11.5px; }
  .kv{ grid-template-columns:1fr; }
}

/* ── 12. 打印：去掉所有交互阴影与固定定位，保证对账单能正常出纸 ────────── */
@media print{
  .tabbar,.appbar,.btn,.no-print{ display:none !important; }
  body{ background:#fff; padding:0; }
  .card,.panel{ box-shadow:none; border-color:#ccc; }
}