/* 工具中心 · 手机端统一增强
 *
 * 各工具页自带的响应式断点只管自己的版式（列数、堆叠），
 * 但「触控目标够不够大、输入会不会触发 iOS 缩放、底部按钮
 * 够不够得着」是每一页都要保证的事，收在这一份里统一管。
 *
 * 只写 ≤768px 内的增强，桌面零影响。
 */

@media (max-width: 768px) {

  /* ── 触控目标：按钮/选择器至少 44px 高 ──────────────
   * 手指点 30px 的按钮会连带点到旁边那个；44px 是 iOS 人机
   * 界面的最低建议值。用 min-height 只抬下限，不压桌面样式。 */
  main button,
  main .btn,
  main select,
  main input[type="checkbox"],
  main input[type="radio"] {
    min-height: 42px;
  }
  main input[type="checkbox"],
  main input[type="radio"] {
    min-height: 22px;
    min-width: 22px;
    width: 22px;
    height: 22px;
  }

  /* ── 输入字号 ≥16px：iOS 对更小的字号会自动缩放页面 ── */
  main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  main textarea,
  main select {
    font-size: max(16px, 1em);
  }
  main input[type="range"] {
    min-height: 30px;
    touch-action: pan-x;
  }

  /* ── 横滑容器：加惯性滚动、藏滚动条 ──────────────────
   * 工具页里常有一排筛选胶囊/页签，窄屏变横滑条。 */
  .tools-scrollx,
  main .filter-tabs,
  main .tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tools-scrollx::-webkit-scrollbar,
  main .filter-tabs::-webkit-scrollbar,
  main .tabs::-webkit-scrollbar {
    display: none;
  }

  /* ── 表格：宽表改横滑，别把页面撑出横向滚动 ── */
  main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 长任务按钮在窄屏上放开整行，拇指够得着 ── */
  main .md-btns .md-btn,
  main .qg-actions button,
  main .quote-actions button {
    flex: 1 1 auto;
  }

  /* ── 底部留安全区，避免被全面屏手势条盖住 ── */
  main {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 弹窗/浮层：贴底弹出，别悬在屏幕中间 ── */
  [class*="modal"],
  [class*="dialog"] {
    max-width: min(560px, 100vw) !important;
  }
}

/* 更窄的屏幕：工具卡一行一个，信息不被截 */
@media (max-width: 480px) {
  main h1 {
    font-size: clamp(20px, 5.6vw, 26px);
    text-wrap: balance;
  }
}