/* ==========================================================================
   mobile-practice.css — 练习页（#practice / 知识点练习）手机端适配
   --------------------------------------------------------------------------
   ⚠ 需在 index.html 中引用，且必须放在 style.css / redesign.css 之后加载：
      <link rel="stylesheet" href="/css/mobile-practice.css">
   覆盖范围：practice.js 与 kp-practice.js 渲染的做题全流程。
   断点约定：手机 = max-width: 767px；桌面端（min-width: 768px）完全不受影响
   （本文件除「隐藏手机专用按钮」外，所有规则都包在 @media (max-width: 767px) 内）。
   配色只用 style.css/tokens.css 的既有变量（--card-bg/--border/--primary/
   --text 等），亮色/[data-theme="dark"]/prefers-color-scheme 自动兼容。
   ========================================================================== */

/* 手机端专用「题目列表」折叠按钮：桌面端一律隐藏（JS 无条件创建，显隐交给 CSS） */
.qn-toggle { display: none; }

@media (max-width: 767px) {

  /* ===== 1. 布局：单列，题目区为主屏 ===== */
  .practice-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 为固定底部 action-bar 预留空间，避免遮挡最后一行内容 */
    margin-bottom: 88px;
  }
  /* 视觉顺序：折叠按钮 → 题目列表面板 → 题目内容 */
  .practice-layout .qn-toggle      { order: 0; }
  .practice-layout .question-nav   { order: 1; }
  .practice-layout .question-content { order: 2; }

  .question-content {
    padding: 16px 14px;
    min-height: 0;
    border-radius: var(--radius-lg);
  }
  .question-content .q-header { margin-bottom: 14px; padding-bottom: 10px; }

  /* ===== 题目列表折叠抽屉（JS 创建 .qn-toggle，.question-nav 加 .qn-collapsible） ===== */
  .qn-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm, var(--shadow));
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .qn-toggle:active { background: var(--primary-subtle); border-color: var(--primary); }
  .qn-toggle .qn-toggle-text { flex: 1; text-align: left; }
  /* 考试模式计时镜像（JS 每秒同步 #exam-timer 文本，收起抽屉也能看到倒计时） */
  .qn-toggle .qn-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--primary);
    font-size: 0.95rem;
  }
  .qn-toggle .qn-timer.warning { color: var(--danger); }
  .qn-toggle .qn-caret {
    color: var(--text-light);
    font-size: 0.85rem;
    transition: transform 0.25s;
  }
  .qn-toggle[aria-expanded="true"] .qn-caret { transform: rotate(180deg); }

  .question-nav.qn-collapsible {
    position: static;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    opacity: 0;
    box-shadow: none;
    border-radius: var(--radius-lg);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s,
                padding 0.3s;
  }
  .question-nav.qn-collapsible.qn-open {
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    opacity: 1;
    box-shadow: var(--shadow);
  }
  /* 抽屉内题号网格：换行平铺（覆盖 style.css 移动端的单行横滚），按钮加大 */
  .question-nav.qn-collapsible .nav-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
  }
  .question-nav.qn-collapsible .q-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }
  /* 抽屉内「提交全部答案」加大触控 */
  .question-nav.qn-collapsible #btn-submit-all { min-height: 46px; }

  /* ===== 2. action-bar：固定于视口底部（压在 .mobile-bottom-nav 之上） ===== */
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 8px 10px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
  }
  .action-bar .btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.95rem;
  }
  /* 进度 x / N 居中 */
  .action-bar > span {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
  }
  /* 考试回顾 / kp 完成按钮原带 margin-left:auto，手机上均分 */
  .action-bar .btn[style*="margin-left"] { margin-left: 0 !important; }
  #kp-btn-finish { flex: 1.3 1 0; }

  /* ===== 3. 选项按钮：≥44px 触控目标 ===== */
  .choices-list .choice-item {
    min-height: 48px;
    padding: 13px 14px;
    margin: 8px 0;
    gap: 10px;
    border-radius: 10px;
    /* 手机上无明显 hover，给未选中项一个浅边界便于识别可点区域 */
    border-color: var(--border);
  }
  .choices-list .choice-item:active { background: var(--primary-subtle); }
  .choice-radio { width: 24px; height: 24px; }
  .choice-content { line-height: 1.65; }

  /* 填空输入框：≥44px，16px 字号避免 iOS 聚焦自动放大 */
  .blank-input {
    min-height: 46px;
    font-size: 16px;
    padding: 11px 14px;
  }
  textarea.blank-input { min-height: 84px; }

  /* ===== 4. 题干排版 / 代码块横滚 ===== */
  .question-content .q-body {
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 14px 0;
  }
  .question-content .q-body p { margin: 8px 0; }
  .question-content img,
  .question-content .q-body img,
  .analysis-box img { max-width: 100%; height: auto; }

  .question-content pre,
  .analysis-box pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.78rem;
    line-height: 1.55;
    border-radius: 8px;
    max-width: 100%;
  }
  .question-content pre code { font-size: inherit; }
  /* 行号列收窄，避免遮挡代码 */
  .question-content pre .hljs-ln-numbers,
  .analysis-box pre .hljs-ln-numbers {
    padding-right: 6px !important;
    min-width: 1.6em;
  }
  .question-content pre .hljs-ln-code,
  .analysis-box pre .hljs-ln-code { padding-left: 6px !important; }

  /* 双屏（源程序）布局：手机端改上下堆叠，代码块限高可滚 */
  .q-split { display: flex; flex-direction: column; gap: 12px; }
  .q-code-pane pre.q-split-code { max-height: 38vh; overflow: auto; }

  /* 解析 / 反馈条间距微调 */
  .analysis-box { margin-top: 14px; }
  .fb-bar { font-size: 0.85rem; line-height: 1.5; }

  /* ===== 5. practice-header 紧凑化 ===== */
  .practice-header {
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 10px;
  }
  .practice-header .btn {
    padding: 8px 10px;
    min-height: 38px;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  /* 按钮文字（JS 已包 <span class="btn-label">）手机上只留图标/箭头 */
  .practice-header .btn-label { display: none; }
  .practice-header .practice-title { font-size: 1rem; }

  /* ===== 6. 模式选择页：单列全宽、大点击区 ===== */
  .mode-select { flex-direction: column; gap: 12px; margin: 14px 0; }
  .mode-card {
    width: 100%;
    padding: 22px 18px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .mode-card .mode-icon { font-size: 1.8rem; margin-bottom: 6px; }
  .mode-card .mode-title { font-size: 1.05rem; }
  .mode-card .mode-desc { font-size: 0.85rem; }

  /* 未完成练习提示卡 */
  .resume-card { padding: 20px 16px; margin: 16px auto; }
  .resume-actions .btn { flex: 1; min-height: 44px; justify-content: center; }

  /* ===== 7. 考试模式：计时器醒目、结果头部不溢出 ===== */
  .timer { font-size: 1.05rem; }
  .exam-result-banner { gap: 10px !important; }
  .exam-result-banner > div[style*="font-size:1.3rem"] { font-size: 1.1rem !important; }

  /* 「显示答案与解析 / 提交答案」按钮加大 */
  #q-inputs > div > .btn-primary,
  #kp-q-inputs > div > .btn-primary { min-height: 46px; width: 100%; justify-content: center; }
  #kp-q-inputs > div[style*="display:flex"] { flex-wrap: wrap; }
}

/* ===== 桌面端保护：min-width: 768px 下本文件不影响任何现有样式 ===== */
@media (min-width: 768px) {
  /* 若小屏下展开过抽屉又拉到桌面，清除折叠态残留，恢复桌面侧栏样式 */
  .question-nav.qn-collapsible {
    max-height: calc(100vh - 140px);
    opacity: 1;
    overflow-y: auto;
  }
}