/* ============================================================
   mobile.css — 移动版适配（手机 / PWA 全屏）
   ============================================================
   独立文件、只做覆盖，theme.css 一行不动，桌面端行为完全不受影响。
   加载顺序必须在 theme.css 和 auth.css 之后。

   三件事：
   1. 安全区（刘海屏 / 底部横条）—— env(safe-area-inset-*)
   2. 触控目标放大到 ≥44px（Apple HIG 最小可点尺寸）
   3. 窄屏下把桌面的「并排」布局改成「竖排」，表格和图示改成横向滚动

   断点：
     900px 以下 = 平板竖屏 + 手机（theme.css 已有抽屉侧栏）
     560px 以下 = 手机
     420px 以下 = 小屏手机
   ============================================================ */

/* ============================================================
   安全区：所有屏幕都要，不限断点
   ============================================================ */
.topbar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  /* PWA 全屏时顶栏要顶到状态栏下面，不能被刘海压住 */
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

.sidebar {
  top: calc(var(--header-h) + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
}

.main {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 26px);
}

/* 抽屉打开时的遮罩也要跟着顶栏下移 */
body.nav-open::after {
  top: calc(var(--header-h) + env(safe-area-inset-top)) !important;
}

/* ============================================================
   平板竖屏 + 手机
   ============================================================ */
@media (max-width: 900px) {
  /* 侧栏抽屉：给左安全区留位，横屏时不被刘海切掉 */
  .sidebar {
    padding-left: env(safe-area-inset-left);
    width: min(300px, 86vw);
  }

  /* 触控目标：34px 太小，拇指点不准。目标 ≥44px（Apple HIG） */
  .icon-btn { width: 40px; height: 40px; font-size: 16px; }
  .btn { padding: 9px 15px; font-size: 14px; }
  .btn.sm { padding: 7px 12px; font-size: 13px; }

  /* 侧栏导航项：抽屉里全是这些，必须好点 */
  .nav-item { padding: 11px 12px; font-size: 14px; min-height: 44px; }

  /* 表格：窄屏一律横滚，并给个视觉提示不要以为内容被截断了 */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }

  /* 图示：SVG 容器横滚，别把图压扁到看不清 */
  .viz-body { -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   手机（≤560px）
   ============================================================ */
@media (max-width: 560px) {
  /* ---------- 顶栏：品牌副标题挤不下，藏掉 ---------- */
  .topbar { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .topbar .brand { font-size: 14px; }
  .topbar .brand small { display: none; }
  .topbar [data-who] {
    max-width: 74px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 12px;
  }
  .icon-btn { width: 40px; height: 40px; }

  /* ---------- 正文间距收紧 ---------- */
  .container { padding: 0 14px; }
  .main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  h1.page-title { font-size: 22px; }
  .page-sub, .page-meta { font-size: 13px; }
  .hero { padding: 20px 16px; }
  .hero h1 { font-size: 20px; }

  /* ---------- 卡片：内边距减小，圆角略收 ---------- */
  .card { padding: 15px 16px; }
  .q-card { padding: 16px 15px; }
  .callout { padding: 12px 14px; }

  /* ---------- 网格一律单列 ---------- */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .ch-grid { grid-template-columns: 1fr; }

  /* 公式行：90px 标签列在窄屏会把公式挤成一团，改竖排 */
  .formula-row { grid-template-columns: 1fr; gap: 4px; }

  /* 左右对比卡：并排变上下 */
  .cmp { grid-template-columns: 1fr; }

  /* 考点卡：必背 + 公式两列在窄屏挤不开，改上下 */
  .ec { padding: 13px 14px; }
  .ec-grid { grid-template-columns: 1fr; gap: 12px; }
  .ec-must li { font-size: 14px; }

  /* 首页倒计时：数字块和文案上下排，数字不用那么大 */
  .cd-row { gap: 13px; }
  .cd-box { min-width: 0; flex: 1 1 auto; padding: 10px 14px; }
  .cd-n { font-size: 34px; }
  .cd-txt { min-width: 0; }

  /* 加权掌握度条：说明文字换行后别贴着标题 */
  .ovw-hd { gap: 4px; }
  .ovw-hd span { flex: 1 1 100%; }

  /* 三域块头部：权重和题量换行 */
  .eco-hd { gap: 7px; }
  .eco-nm { font-size: 15px; }

  /* 速查页：公式分组和过程清单一律单列 */
  .qr-fgrid, .qr-plist { grid-template-columns: 1fr; }

  /* ---------- 做题区：选项是主要触控目标，加大 ---------- */
  .opt {
    padding: 13px 14px; gap: 10px;
    font-size: 14.5px; line-height: 1.55;
  }
  .q-stem { font-size: 14.5px; }
  .q-head { flex-wrap: wrap; gap: 8px; }

  /* 测验工具条：按钮换行后不要挤在一起 */
  .quiz-bar { padding: 13px 14px; gap: 9px; }
  .quiz-bar .btn { flex: 1 1 auto; min-width: 96px; justify-content: center; }

  /* 控件条：滑块占满一行才好拖 */
  .ctrl-bar { gap: 10px; padding: 11px 13px; }
  .ctrl { flex: 1 1 100%; }

  /* ---------- 弹窗：手机上从底部弹出的抽屉式，比居中小卡好按 ---------- */
  .modal-mask { padding: 0; place-items: end stretch; }
  .modal {
    max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh; border-bottom: 0;
    animation: fadeUp .26s ease both;
  }
  .modal-body { padding: 16px; max-height: calc(92vh - 132px); }
  .modal-head, .modal-foot { padding: 13px 16px; }
  .modal-foot {
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  /* 底部抽屉时按钮要够大、够宽 */
  .modal-foot .btn { padding: 10px 16px; font-size: 14px; }

  /* ---------- 登录页 ---------- */
  /* place-items 是简写，只改交叉轴对齐要用 align-items 覆盖在后面 */
  .login-wrap { padding: 8vh 14px 24px; align-items: start; }
  .login-card { padding: 24px 20px; }
  /* 输入框字号必须 ≥16px，否则 iOS Safari 聚焦时会自动放大整页 */
  .login-card input, .field input, .field select, .field textarea { font-size: 16px; }

  /* ---------- 管理后台 ---------- */
  /* .u-table 外面已经有 .tbl-wrap 负责横滚，这里只保证列不被压烂 */
  .u-table { min-width: 560px; }
  .adm-tabs { -webkit-overflow-scrolling: touch; }
  .adm-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* ============================================================
   小屏手机（≤420px）
   ============================================================ */
@media (max-width: 420px) {
  .topbar { gap: 6px; }
  .topbar [data-who] { display: none; }   /* 位置留给按钮 */
  .icon-btn { width: 36px; height: 36px; }
  .container { padding: 0 11px; }
  .stat-grid { grid-template-columns: 1fr; }
  h1.page-title { font-size: 20px; }
  h2.sec-title { font-size: 18px; margin-top: 32px; }
  .card { padding: 13px 14px; }
  .q-card { padding: 14px 13px; }
}

/* ============================================================
   触控设备通用：没有 hover 的设备上，hover 态会「粘」住
   ============================================================ */
@media (hover: none) {
  .btn:hover { background: var(--bg-elev); }
  .btn.primary:hover { filter: none; }
  .opt:hover { border-color: var(--border); }
  .icon-btn:hover { background: var(--bg-elev); color: var(--text-dim); }
  /* 点下去要有反馈，用 active 代替 hover */
  .btn:active { filter: brightness(.94); transform: scale(.985); }
  .opt:active { background: var(--bg-sunken); }
  .icon-btn:active { background: var(--bg-sunken); }
}

/* ============================================================
   PWA 独立窗口模式（从主屏图标打开）
   ============================================================ */
@media (display-mode: standalone) {
  /* 没有浏览器的下拉刷新，禁掉过度滚动的橡皮筋，手感更像原生 */
  body { overscroll-behavior-y: none; }
}