/* ==========================================================================
   StudyOps — mobile.css
   PWA / iOS Safari 适配层：贴边元素的安全区补边 + 触屏点按反馈
   必须排在 views/*.css 之后加载：这里对 plan-mode 的覆盖与
   views/plan-axis.css 里的同名选择器特异性相同，只有晚加载才能在层叠中胜出
   （:active 也需要压过 iOS 点按后黏住的 :hover）
   所有 calc 都带 0px 兜底：安全区为 0 时（桌面 / 无刘海设备）取值与改动前完全一致
   ========================================================================== */

/* ---------- 顶部 / 底部安全区（只补确实贴边的元素） ---------- */

@media (max-width: 900px) {
  /* 顶部 Hero：nav 直接贴视口顶边，让出刘海/状态栏高度 */
  .hero {
    padding-top: calc(24px + var(--safe-top));
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  /* 右上角汉堡按钮：贴视口顶部 */
  .mobile-menu { top: calc(12px + var(--safe-top)); }

  /* 左上角 logo 装饰：与汉堡按钮同一行高，同样让出刘海/状态栏 */
  .mobile-logo {
    top: calc(12px + var(--safe-top));
    left: calc(14px + var(--safe-left));
  }

  /* 主区顶部内边距同步让出，避免内容被下移后的汉堡按钮盖住
     （底部 48px 已在 components.css 里叠加 env(safe-area-inset-bottom)，不重复处理） */
  .main { padding-top: calc(60px + var(--safe-top)); }

  /* 计划轴为整屏布局（宽度/内边距由 plan-axis.css 的分支矩阵决定），
     这里按同一套分支加上下安全区，左右保持 12px，不改既有断点行为 */
  .main.plan-mode,
  .shell.rail-collapsed .main.plan-mode {
    padding-top: calc(60px + var(--safe-top));
    padding-bottom: calc(12px + var(--safe-bottom));
  }

  /* 右侧抽屉导航：上下均贴视口边，补顶部（刘海）与底部（Home 横条）内边距 */
  .rail {
    padding-top: calc(20px + var(--safe-top));
    padding-bottom: calc(20px + var(--safe-bottom));
  }
}

/* 矮屏（≤600px 高）走 plan-axis.css 的 58px/8px 分支，同样叠加安全区 */
@media (max-width: 900px) and (max-height: 600px) {
  .main.plan-mode,
  .shell.rail-collapsed .main.plan-mode {
    padding-top: calc(58px + var(--safe-top));
    padding-bottom: calc(8px + var(--safe-bottom));
  }
}

/* 横屏刘海：左右安全区（竖屏下左右均为 0px，不产生任何影响） */
@media (orientation: landscape) and (max-width: 900px) {
  /* 抽屉从右侧贴边滑出 */
  .rail { padding-right: calc(16px + var(--safe-right)); }
  /* Hero 是整屏版式，左右内容列贴边 */
  .hero {
    padding-left: calc(20px + var(--safe-left));
    padding-right: calc(20px + var(--safe-right));
  }
}

/* ---------- 触屏点按反馈 ---------- */

/* <button> 已由 base.css 的 button:active 统一处理；
   这里补只有 :hover、没有 :active 的「非 button」可点击元素（div/span + role=button） */
[role="button"]:active,
.card-hoverable:active,
.task-row:active,
.pa-bar:active {
  transform: scale(0.985);
}

/* 知识点遮罩是行内 span：用亮度反馈，避免缩放引起段落回流跳动 */
.kp-mask:active { filter: brightness(0.9); }

/* 知识点背诵弹窗：移动端整屏，补上下安全区（左右内边距在 views/cards.css 定） */
.anki-shell {
  padding-top: calc(16px + var(--safe-top));
  padding-bottom: calc(16px + var(--safe-bottom));
}

/* ---------- 紧凑控件的热区补足 ---------- */

/* base.css 的 pointer:coarse 规则把 button 抬到 44×44，但答题卡顶部/底部的
   紧凑控件在 views/drill.css 里用更高特异性的 min-height 明确压小了
   （那是刻意的密集布局契约，放大视觉尺寸会撑破 46px 副栏）。
   这里不改视觉尺寸，只用透明的 ::after 叠加层把可点区域补到 44×44；
   .qcard 虽为 overflow:hidden，但这些控件都在各自栏内部，不会被裁掉。 */
@media (pointer: coarse) {
  .qcard-back,
  .qcard-prev,
  .qcard-mode-btn,
  .qcard-drawer-close { position: relative; }

  .qcard-back::after,
  .qcard-prev::after,
  .qcard-mode-btn::after,
  .qcard-drawer-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}