/*
 * mobile-core.css —— 全站共享移动端基础规则（只写通用规则，不含具体页面布局）
 * ==============================================================================
 *
 * 【引入方式】放在 "TRAE Work/colors_and_type.css"、"TRAE Work/components.css"
 * 之后（覆盖 hover 粘滞需要更高加载优先级），mobile-core.js 同步加载在前：
 *
 *   <head>
 *     <script src="/static/mobile-core.js"></script>
 *     <link rel="stylesheet" href="/static/TRAE Work/colors_and_type.css">
 *     <link rel="stylesheet" href="/static/TRAE Work/components.css">
 *     <link rel="stylesheet" href="/static/mobile-core.css">
 *   </head>
 *
 * 【作用域约定】
 * - 设备相关规则挂在 html.is-mobile / html.is-desktop（由 mobile-core.js 同步打标）；
 * - 纯媒体查询规则（.m-only / .d-only 默认分支、窄屏输入字号、tap-highlight）
 *   在 JS 未执行/被禁用时也能按 (max-width:768px) 兜底工作；
 * - hover 中和只用 (hover:none) and (pointer:coarse)——无悬停能力的触屏一律生效。
 *
 * 【约定类名】
 *   .m-only       仅移动端显示（桌面隐藏）
 *   .d-only       仅桌面端显示（移动隐藏）
 *   .safe-bottom  底部内边距适配 iOS 安全区 env(safe-area-inset-bottom)
 *
 * 颜色一律引用 TRAE Work token，本文件禁止硬编码色值。
 */

/* ── 1. 触屏点击高亮透明 ─────────────────────────────────────────── */
html.is-mobile,
html.is-mobile * {
  -webkit-tap-highlight-color: transparent;
}
/* JS 未执行时的媒体查询兜底 */
@media (max-width: 768px) {
  html, body, a, button, [role="button"], input, select, textarea, label {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── 2. 触屏（无悬停能力）下中和 hover 粘滞 ────────────────────────
   把 components.css 的主要 :hover 效果恢复为各组件的静止态外观，
   :active 反馈保留（触屏按压仍有响应）。与 components.css 的选择器一一对应。 */
@media (hover: none) and (pointer: coarse) {
  /* ds-btn 系列（components.css:124-156） */
  .ds-btn--primary:hover { background: var(--bg-invert); border-color: var(--bg-invert); }
  .ds-btn--secondary:hover { background: var(--bg-overlay-l1); border-color: var(--border-neutral-l1); }
  .ds-btn--tertiary:hover,
  .ds-btn--ghost:hover { background: transparent; color: var(--text-default); }
  .ds-btn--danger:hover,
  .ds-btn--danger-strong:hover { background: var(--status-error-default); border-color: var(--status-error-default); }
  .ds-btn--danger-subtle:hover { background: var(--status-error-surface-l1); }
  .ds-btn--warning:hover { background: var(--status-warning-default); border-color: var(--status-warning-default); }
  .ds-btn--brand:hover { background: var(--bg-brand); border-color: var(--bg-brand); }
  .ds-btn--link:hover { color: var(--text-default); text-decoration: none; }

  /* 关闭/移除类小按钮（components.css:32,186,263,266） */
  .ds-notif__close:hover,
  .ds-dialog__close:hover { background: transparent; color: var(--icon-secondary); }
  .tag-remove:hover { background: transparent; color: var(--icon-tertiary); }
  .stepper button:hover { background: transparent; color: var(--icon-secondary); }

  /* 菜单 / 分页 / 面包屑 / 标签页（components.css:277,290,88,337） */
  .ds-menu__item:hover { background: transparent; }
  .ds-pagination__item:hover { background: transparent; color: var(--text-secondary); }
  .ds-breadcrumb a:hover { color: var(--text-tertiary); }
  .ds-tab:hover { color: var(--text-tertiary); }
}

/* ── 3. 表单控件字号 ≥16px，防 iOS 聚焦自动放大 ──────────────────── */
html.is-mobile input,
html.is-mobile textarea,
html.is-mobile select {
  font-size: 16px;
}
/* JS 未执行时的媒体查询兜底 */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px; }
}

/* ── 4. 底部安全区工具类 ─────────────────────────────────────────── */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── 5. 显示切换工具类 .m-only / .d-only ───────────────────────────
   「隐藏」规则只负责在错误端隐藏，「显示」状态由元素自身的 display 决定，
   因此不覆盖元素的正常 display（flex/grid 等不受影响）。
   默认（无 JS 判定）按媒体查询；is-mobile/is-desktop 类存在时以类为准。 */
@media (min-width: 769px) {
  .m-only { display: none; }
}
@media (max-width: 768px) {
  .d-only { display: none; }
}
/* class 优先：与媒体查询结论冲突时（如窄桌面窗口 / 宽屏手机横屏）以判定类为准 */
html.is-mobile .d-only { display: none; }
html.is-desktop .m-only { display: none; }

/* ── 6. 表格 / 代码块横向滚动兜底 ──────────────────────────────────
   components.css 的表格包裹层是 .ds-table-card（自带 overflow-x:auto），
   .ds-table 自身 min-width:720px。移动端对未被 .ds-table-card 包裹的
   裸 .ds-table 让表格自身变成可横向滚动块；pre 代码块同理。 */
html.is-mobile .ds-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html.is-mobile .ds-table-card {
  -webkit-overflow-scrolling: touch;
}
html.is-mobile pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* JS 未执行时的媒体查询兜底 */
@media (max-width: 768px) {
  pre { overflow-x: auto; }
}