/* ============================================================
   琴风纪 QinFengJi · 移动端基线（全站共用）
   覆盖：PC / macOS / iOS / iPadOS / HarmonyOS / Android / 微信内置浏览器
   引入方式：放在各页 </head> 之前，作为最后一层兜底样式
   ============================================================ */

/* ---------- 1. 文本缩放与点击行为 ---------- */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a,button,input,select,textarea,label,tr{
  -webkit-tap-highlight-color:transparent;
}
button,a,[onclick],.sb-item,.pill-btn{
  touch-action:manipulation;   /* 去掉 300ms 点击延迟与双击缩放 */
}

/* ---------- 2. iOS / iPadOS ---------- */
@supports(-webkit-touch-callout:none){
  body{min-height:-webkit-fill-available;}
  /* 阻止 Safari 橡皮筋把整页拖出白边 */
  html{overscroll-behavior-y:none;}
}

/* ---------- 3. 刘海屏安全区（竖屏 / 横屏） ---------- */
@supports(padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
}

/* ---------- 4. 移动端通用规则 ---------- */
@media(max-width:900px){
  /* iOS 聚焦输入框自动放大：控件字号必须 ≥16px */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    font-size:16px !important;
  }

  /* 触控目标不小于 44px，手指点得准 */
  .sb-item{min-height:44px;padding:12px !important;}
  .pill-btn,.chip,.tab,.pg,.tbl-head .more{padding-top:9px;padding-bottom:9px;}

  /* 表格横向滚动：iOS 惯性 + 不带动页面 */
  .tbl-wrap{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    overflow-x:auto;
  }

  /* 弹窗靠底部弹出，拇指可达 */
  .qtj-modal{padding:0 !important;align-items:flex-end !important;}
  .qtj-modal-box{
    max-width:none !important;
    border-radius:16px 16px 0 0 !important;
    max-height:92dvh !important;
  }
}

/* ---------- 5. 触屏设备取消 hover 位移（避免点击后卡住） ---------- */
@media(hover:none){
  .kpi:hover,.q:hover,.mod:hover,.plan:hover,.step:hover,.tbl-wrap tr:hover{
    transform:none !important;
    box-shadow:none !important;
  }
}

/* ---------- 6. 打印（顺手支持导出 PDF 时干净一些） ---------- */
@media print{
  .sidebar,.m-bar,.topbar,.nav,.demo-note{display:none !important;}
  body{display:block !important;}
}