/* ============================================================================
 * KTO-103 门户共享响应式层（P0）
 * ----------------------------------------------------------------------------
 * 由每个主题的独立页面在「所有主题 CSS 之后」引入（<link> 统一放在 </head> 前），
 * 因此同特异性的规则靠加载顺序即可生效；用 !important 的地方是防内联样式与
 * 主题里更具体的选择器（例如 .tp-tokenlumi-market .xxx）。
 *
 * 设计约束（见 UI 仓 kylin-tokenproto-platform-ui 的 docs/intent/kto-103-mobile-adaptation.md
 *           与 docs/spec/kto-103-mobile-p0-plan.md；同一工单 KTO-103）：
 *   - 浏览器基线：微信 X5/Chromium 86+、iOS Safari 15.4+、Android Chrome 100+
 *     ⇒ 不使用 :has() / dvh / @container 等 Baseline Newly Available 特性；
 *       env(safe-area-inset-*) 可直接用。
 *   - 桌面零回归：除「全局归零」两条外，所有规则都在 @media (max-width: 1040/900/768/480px) 内。
 *   - 不引入 user-scalable=no / maximum-scale / text-size-adjust:none。
 *
 * 三条已确认 P0 的根因（本地 harness 复现，见 tools/mobile-audit/portal-static-render.js）：
 *   1) .landing-two-cards-inner-merged{grid-template-columns:1fr 1fr} 的 1fr 自动最小值
 *      被卡片内 <pre class="landing-code-block"> 的 min-content(650px) 撑爆 ⇒ 页面横向溢出 292px。
 *      修法：minmax(0,1fr) + 代码块换行。
 *   2) .tp-status-table-wrap{overflow:hidden} 把 428px 宽的表格最后一列裁掉且无法滚动 ⇒ clipped 15。
 *      修法：overflow-x:auto（overflow-y 仍是 hidden，不产生内层竖滚动条）。
 *   3) 全库 0 处 viewport-fit=cover ⇒ 刘海屏安全区未处理。修法见各页面 viewport meta + 下面第 5 条。
 * 另有本地实测新发现（同属 P0，一并修）：
 *   4) t1 主题 .ps-nav 关闭态用 transform:translateX(100%) 把 fixed 抽屉挪到视口右侧，
 *      Chrome 会把它算进文档可滚动溢出 ⇒ 每个 t1 页面整页多出 320px 横向滚动；
 *      t1 顶栏 .ps-header__inner 不换行且 .ps-header__actions{flex-shrink:0} ⇒ 再多 166px。
 *   5) tokenlumi 首页 .tokenlumi-hero-top 的 1fr 被终端里 nowrap 的长 URL 撑到 460px（容器只有 342px）。
 *   6) 各主题 .admin-login-form-card 固定 width:400px ⇒ 360/390 视口溢出 5–20px。
 * ========================================================================== */

/* ---- 0) 全局归零：只做 box-sizing 与替换元素收敛（多数主题 landing.css 已有同样规则） ----
 * ⚠️ 必须收在移动断点内。若这两条无条件作用于桌面，会让个别页面 docHeight 变几个像素
 *    （本地实测：1280/1440 上 v1、zoo 首页 −4px；1024 上 c1/v1/zoo 三个 status 页 −15px），
 *    从而违反 KTO-103 的「桌面 ≥1024 零回归」验收项。桌面本来就不需要它们。 */
@media (max-width: 900px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================================
 * ≤1040px：t1 抽屉关闭态不得占据文档溢出区
 * 说明：visibility:hidden / right:-320px / 保留 transform 都会被 Chrome 计入
 *       documentElement.scrollWidth（本地实测 320px），只有「关闭态不渲染」能根除；
 *       用 keyframes 补回滑入动效，打开态仍在屏内。
 * ========================================================================== */
@media (max-width: 1040px) {
  .ps-nav {
    display: none !important;
  }

  html.ps-nav-open .ps-nav {
    display: flex !important;
    animation: kto-ps-nav-in 0.22s ease both;
  }

  @keyframes kto-ps-nav-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

/* ============================================================================
 * ≤900px：栅格必须可收缩（1fr 的自动最小值 = min-content，会被内部长内容撑爆）
 * ========================================================================== */
@media (max-width: 900px) {
  .landing-two-cards-inner,
  .landing-two-cards-inner-merged,
  .landing-stats-grid-merged,
  .landing-feature-cards,
  .landing-model-grid,
  .landing-faq-inner,
  .landing-footer-top,
  .landing-footer-links,
  .landing-platform-inner,
  .tokenlumi-hero-top,
  .tokenlumi-value-grid,
  .tokenlumi-trust-band,
  .tp-tokenlumi-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .landing-integration-card,
  .landing-feature-card,
  .landing-platform-inner > *,
  .tokenlumi-hero-top > *,
  .tp-tokenlumi-hero-copy,
  .tp-tokenlumi-panel,
  .tp-tokenlumi-terminal,
  .tp-tokenlumi-terminal-body {
    min-width: 0;
  }

  /* 居中容器用 margin:0 auto 时，交叉轴的 auto margin 会关掉 flex 的 stretch，
     宽度退化成 fit-content；max-width 是 1180/1680px 这种大值时，仍会被内部表格/
     代码块的 min-content 顶宽（实测 t1/gateway/index.html 972px、
     t1/resource/openclaw.html 658px——后者样式写在该页 head 的内联 <style> 里，
     类名 page-local，所以这里按「外壳的直接子元素」通用收敛，不做类名枚举）。 */
  .landing-wrap > *,
  .ps-shell > *,
  .service-main,
  .tp-status,
  .tp-tokenlumi-hero {
    max-width: 100% !important;
  }
}

/* ============================================================================
 * ≤768px：手机端
 * ========================================================================== */
@media (max-width: 768px) {
  /* ---- 1) 代码块 / 终端换行：长行不再把卡片撑宽 ---- */
  .landing-code-block,
  .tp-tokenlumi-terminal-body code,
  .tp-tokenlumi-terminal-url {
    white-space: pre-wrap !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ---- 2) 表格容器一律可横滚：禁止用 overflow:hidden 把列裁掉 ---- */
  .tp-status-table-wrap,
  .tp-price-table-wrap,
  .tp-home-table-wrap,
  .tp-price-plaza-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .tp-status-table,
  .tp-price-table {
    min-width: 640px;
  }

  /* ---- 3) 触控目标下限 44px（Apple HIG；WCAG 2.5.8 AA 只要求 24px） ---- */
  .landing-nav-toggle,
  .landing-login-link,
  .landing-footer-links a,
  .landing-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ---- 4) 安全区（viewport-fit=cover 之后生效；不支持的浏览器读到 0，优雅降级） ---- */
  .landing-footer,
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* ---- 5) 表单输入 ≥16px：避免 iOS Safari 聚焦时自动放大整页 ---- */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ---- 6) 固定宽登录卡改「上限」 ---- */
  .admin-login-form-card {
    width: 100% !important;
    max-width: min(400px, 100%) !important;
  }

  /* ---- 7) t1 顶栏允许换行，动作区可收缩（原 flex-shrink:0 + 不换行 ⇒ 溢出 166px） ---- */
  .ps-header__inner {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .ps-header__actions {
    flex-shrink: 1 !important;
    flex-wrap: wrap;
    min-width: 0;
  }
}

/* ============================================================================
 * ≤480px：小屏进一步收敛留白
 * ========================================================================== */
@media (max-width: 480px) {
  .landing-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ps-header__actions .ps-btn--install {
    padding: 10px 12px;
    font-size: 13px;
  }
}