/* ============================================================
   ui-base.css —— 全站 UI 基线（手机端 P0 + 桌面渲染兜底）
   ------------------------------------------------------------
   挂载方式：每个页面 <head> 里一行
        <link rel="stylesheet" href="/static/ui-base.css">
   本文件自动引入 tokens.css。

   设计约束（**桌面零影响**）：
     · 规则绝大多数包在 @media (max-width: 900px) 里，桌面端不生效；
     · 不改 box-sizing、不改全局字号、不动页面自己的布局；
     · 只做「兜底」和「手机端必须解决」的事。

   对应手机端上线前的最小清单：
     ① viewport          → 由补丁给缺的 3 个页面补上
     ② 横向溢出三公约     → 本文件 §2
     ③ 首页弹性栅格       → 本文件 §3
     ④ 汉堡菜单           → nav.js / marketing-nav.js
     ⑤ 地图触屏手势       → 地图页各自的 touch 适配
     ⑥ 大屏页明示         → 本文件 §5 的 .screen-only-notice
   ============================================================ */
/* ---------- MOTION-BASE-V1 IMPORT START ---------- */
@import url('/static/motion-base.css');
/* ---------- MOTION-BASE-V1 IMPORT END ---------- */
@import url("tokens.css");
@import url("ui-kit.css");

/* ---------- §1 全局兜底（桌面也安全）---------- */
html {
  -webkit-text-size-adjust: 100%;   /* 防 iOS 横屏自动放大字号 */
}
img, video, canvas, svg {
  max-width: 100%;                  /* 图片永不撑破窄屏 */
  height: auto;
}
/* 表格容器工具类：大表格在外面包一层即可横向滑，不挤压页面
   用法：<div class="table-scroll"><table>…</table></div> */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table {
  min-width: 720px;                 /* 表格保留可读最小宽，滑动代替挤压 */
}
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }

/* ---------- §2 手机端横向溢出三公约 ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }   /* 公约①：兜底，防整页被撑出横滚 */

  /* 公约③：禁止硬编码 min-width / 固定宽把布局撑破 */
  .wrap {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }
  table { table-layout: auto; }        /* 公约②：表格自适应，配合 .table-scroll 滑动 */
  td, th { word-break: break-word; }   /* 长串（单号/地址）换行，不撑宽 */

  /* 卡片栅格在窄屏一律单列 */
  .grid, .cards, .card-grid, .cols, .row-cards {
    grid-template-columns: 1fr !important;
    display: block;
  }
  .grid > *, .cards > *, .card-grid > * { margin-bottom: 12px; }

  /* 横排工具条在窄屏换行，不挤成一行 */
  .toolbar, .actions, .btns, .tabs, .filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 弹窗贴边，不做固定宽 */
  .modal, .dialog, .popup, .panel {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    left: 12px !important;
    right: 12px !important;
  }
}

/* ---------- §3 首页弹性栅格（手机端 P0）---------- */
@media (max-width: 900px) {
  /* 首页营销大图 / 卖点栅格 → 单列、图片自适应 */
  .hero, .banner { padding: 24px 14px !important; }
  .hero h1, .banner h1 { font-size: 24px !important; line-height: 1.3 !important; }
  .hero p, .banner p { font-size: 14px !important; }
  .features, .sellpoints, .home-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .features > *, .sellpoints > *, .home-grid > * { margin: 0 !important; }
}

/* ---------- §4 触屏可用性 ---------- */
/* 只在真正触屏设备上生效，不影响桌面鼠标 */
@media (pointer: coarse) {
  button, .btn, .tab, .nav a, .tabs a,
  input[type="checkbox"], input[type="radio"], select, label {
    min-height: 40px;                 /* 点击区不小于 40px */
  }
  button, .btn, .tab, .tabs a {
    padding-top: 8px; padding-bottom: 8px;
  }
  a { text-decoration: none; }        /* 触屏没有 hover，去掉下划线噪音 */
  /* hover-only 的交互在触屏上改为常显 */
  .hover-only { opacity: 1 !important; visibility: visible !important; }
}

/* ---------- §5 大屏页明示（手机端 P0）---------- */
/* sales-screen / questionnaire-screen / expo 等大屏展示页：
   在窄屏显示一条提示条，避免用户以为「页面坏了」。
   用法：页面顶部放 <div class="screen-only-notice">请横屏或使用大屏查看</div> */
.screen-only-notice { display: none; }
@media (max-width: 900px) {
  .screen-only-notice {
    display: block;
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--brand-bg);
    color: var(--brand-strong);
    font-size: var(--fs-sm);
    line-height: 1.6;
    border: 1px solid var(--brand-line);
  }
}

/* ---------- §6 手机端排版微调 ---------- */
@media (max-width: 900px) {
  body { font-size: 14px; line-height: 1.7; }
  h1, .h1 { font-size: 22px !important; }
  h2, .h2 { font-size: 18px !important; }
  h3, .h3 { font-size: 16px !important; }
  .card, .panel, .box {
    border-radius: var(--r-lg) !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
}