/* ==================================================================
   pages/practice.css — 自由练习页（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖 static/base.css（公共层，唯一视觉来源）：
     · 版心 .container · 导航 .nav-bar/.nav-scroll/.nav-links
     · 二级导航 .subnav/.subnav-inner · 页脚 .footer
     · 卡片家族 .card（底/边/圆角/阴影全部由公共层给）
     · 按钮 .btn/.btn-primary/.btn-outline/.btn-ghost/.btn-lg/.btn-block
     · 徽标 .chip · 状态反馈 .toast · 行内错误 .g-error
     · 骨架 .g-skeleton · 焦点环 :focus-visible
   纪律（见《前端优化方案_20260925.md》§3/§9）：
     1. 强制覆盖 0 处；无字面色值（颜色一律 var(--g-*)）；字号 ≥ 12.5px；
     2. 焦点样式交给 base.css，本文件不声明 outline；
     3. 不复写卡片家族与 .btn 家族的底/边/阴影；不重复定义 .subnav；
     4. 不改 HTML 既有 class 名与任何 id（页内 JS 依赖；历史事故：删 id 会让
        updateNav() 空指针并静默中断后续初始化）。
   本页修：4-9 旧蓝残留 / 4-11 版心错位 / 4-13 hover 串色 / 4-14 点击目标 /
          4-15 键盘可达 / 4-16 对比度 / 4-17 状态反馈 / 4-19 骨架 / 4-27 字号
   ================================================================== */

/* ---------- 0. 页面骨架（页脚 margin-top:auto 需要 body 是 flex 列） ---------- */
body[data-page="practice"] { display: flex; flex-direction: column; }

/* 4-11：二级导航与 .container 同为 base 的 var(--g-page)，原来 720 vs 1100 的
   190px 错位消失；正文列另设可读宽度并居中，避免选项按钮被拉成整屏长条 */
.container > .header,
.container > .page { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- 1. 页头 ---------- */
.header { padding: var(--g-sp-5) 0 var(--g-sp-4); text-align: center; }
.header h1 { font-size: var(--g-fs-xl); font-weight: 800; color: var(--g-ink); letter-spacing: 0.5px; }
.header p { margin-top: var(--g-sp-1); font-size: var(--g-fs-sm); color: var(--g-mute); }

/* ---------- 2. 配置页 ---------- */
.config-label { margin-bottom: var(--g-sp-2); font-size: var(--g-fs-base); font-weight: 700; color: var(--g-ink-2); }

/* 标签横幅（知识标签联动入口；原为行内色值，改走 token） */
.tag-banner {
  margin-bottom: var(--g-sp-3); padding: var(--g-sp-3) var(--g-sp-4);
  border: 1px solid var(--g-line); border-radius: var(--g-r-md);
  background: var(--g-knowledge-bg); color: var(--g-knowledge);
  font-size: var(--g-fs-sm);
}
.tag-banner a { margin-left: var(--g-sp-2); color: var(--g-knowledge); text-decoration: underline; }

/* 4-14：数量按钮触控高度 44px（原 ≈40px，窄屏更小） */
.count-group { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); margin: var(--g-sp-3) 0; }
.count-btn {
  flex: 1 1 52px; min-width: 52px; min-height: 44px; padding: var(--g-sp-2) var(--g-sp-1);
  border: 1px solid var(--g-line); border-radius: var(--g-r-md);
  background: var(--g-surface); color: var(--g-ink-2);
  font-size: var(--g-fs-base); font-weight: 600; text-align: center; cursor: pointer;
  transition: border-color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}
.count-btn:hover { border-color: var(--g-primary); color: var(--g-primary); }
.count-btn.active { border-color: var(--g-primary); background: var(--g-primary-soft); color: var(--g-primary); font-weight: 700; }

/* 4-15：原来 .type-toggle 是 <label>，键盘无法聚焦；改 <button type="button">，
   class 名与 data-bank/data-type 原样保留（页内事件委托照旧） */
.type-toggles { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); }
.type-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: var(--g-sp-2) var(--g-sp-4);
  border: 1px solid var(--g-line); border-radius: var(--g-r-pill);
  background: var(--g-surface); color: var(--g-ink-2);
  font-size: var(--g-fs-base); font-weight: 500; cursor: pointer; user-select: none;
  transition: border-color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}
.type-toggle:hover { border-color: var(--g-primary); color: var(--g-primary); }
.type-toggle.active { border-color: var(--g-primary); background: var(--g-primary-soft); color: var(--g-primary); font-weight: 700; }
.type-dot { flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: var(--g-r-pill); }

/* 4-9：题型配色原先由 JS 写死 10 组十六进制色值，现在 JS 只给 tone-0..9 序号，
   徽标底/字与圆点色全部取自 base token（.chip 提供形状与 12.5px 字号） */
.question-type-badge { margin-bottom: var(--g-sp-3); }
.question-type-badge.tone-0, .badge-choice { background: var(--g-info-bg); color: var(--g-info); }
.question-type-badge.tone-1, .badge-tf { background: var(--g-warn-bg); color: var(--g-warn); }
.question-type-badge.tone-2, .badge-short { background: var(--g-ok-bg); color: var(--g-ok); }
.question-type-badge.tone-3, .badge-term { background: var(--g-knowledge-bg); color: var(--g-knowledge); }
.question-type-badge.tone-4 { background: var(--g-danger-bg); color: var(--g-danger); }
.question-type-badge.tone-5 { background: var(--g-tasks-bg); color: var(--g-tasks); }
.question-type-badge.tone-6 { background: var(--g-surface-3); color: var(--g-ink-2); }
.question-type-badge.tone-7 { background: var(--g-primary-soft); color: var(--g-primary); }
.question-type-badge.tone-8 { background: var(--g-surface-2); color: var(--g-mute); }
.question-type-badge.tone-9 { background: var(--g-primary-soft-2); color: var(--g-primary-2); }

.type-dot.tone-0 { background: var(--g-c1); }
.type-dot.tone-1 { background: var(--g-c2); }
.type-dot.tone-2 { background: var(--g-c3); }
.type-dot.tone-3 { background: var(--g-c4); }
.type-dot.tone-4 { background: var(--g-c5); }
.type-dot.tone-5 { background: var(--g-c6); }
.type-dot.tone-6 { background: var(--g-c1); }
.type-dot.tone-7 { background: var(--g-c2); }
.type-dot.tone-8 { background: var(--g-c3); }
.type-dot.tone-9 { background: var(--g-c4); }

/* ---------- 3. 答题页：导航点 / 进度 ---------- */
/* 4-19：容器给最小高度，题目渲染前后不跳高 */
.nav-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g-sp-2); min-height: 34px; margin-bottom: var(--g-sp-4); }
/* 4-14：28px（窄屏 24px）→ 34px；窄屏 44px。
   4-15：原为 <div onclick>，改 <button type="button">，原生可 Tab/Enter/Space */
.nav-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 2px solid var(--g-mute-2); border-radius: var(--g-r-pill);
  background: var(--g-surface); color: var(--g-mute);
  font-size: var(--g-fs-xs); font-weight: 700; line-height: 1; cursor: pointer;
  transition: transform var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease),
    background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}
.nav-dot:hover { border-color: var(--g-primary); }
.nav-dot.current { border-color: var(--g-primary); background: var(--g-primary-soft); color: var(--g-primary); transform: scale(1.15); }
.nav-dot.correct { border-color: var(--g-ok); background: var(--g-ok-bg); color: var(--g-ok); }
.nav-dot.wrong { border-color: var(--g-danger); background: var(--g-danger-bg); color: var(--g-danger); }
.nav-dot.pending { border-color: var(--g-warn); background: var(--g-warn-bg); color: var(--g-warn); }

.progress-bar { height: 5px; margin-bottom: var(--g-sp-2); border-radius: var(--g-r-pill); background: var(--g-surface-3); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--g-r-pill); background: var(--g-grad); transition: width var(--g-dur-2) var(--g-ease); }

.kbd-hint { margin-bottom: var(--g-sp-3); color: var(--g-mute); font-size: var(--g-fs-xs); text-align: center; }
.kbd-hint kbd {
  display: inline-block; margin: 0 2px; padding: 1px 6px;
  border: 1px solid var(--g-line); border-radius: 4px;
  background: var(--g-surface-3); color: var(--g-ink-2);
  font-family: inherit; font-size: var(--g-fs-xs);
}

/* ---------- 4. 题干与选项 ---------- */
.question-stem {
  margin-bottom: var(--g-sp-5); padding: var(--g-sp-3) var(--g-sp-4);
  background: var(--g-surface-2);
  border: 1px solid var(--g-line);
  border-left-width: 4px;
  border-left-color: var(--g-primary);
  border-radius: var(--g-r-md);
  color: var(--g-ink-2); font-size: var(--g-fs-md); line-height: 1.85;
}
.options-area { margin-bottom: var(--g-sp-2); }
.option-btn {
  position: relative; display: block; width: 100%; min-height: 48px;
  margin-bottom: var(--g-sp-2); padding: 15px 18px;
  border: 2px solid var(--g-line); border-radius: var(--g-r-md);
  background: var(--g-surface); color: var(--g-ink);
  text-align: left; font-size: var(--g-fs-base); cursor: pointer;
  transition: border-color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}
.option-btn:hover:not(:disabled) { border-color: var(--g-primary); background: var(--g-surface-2); }
.option-btn:active:not(:disabled) { transform: scale(0.985); }
.opt-label {
  display: inline-block; width: 26px; height: 26px; margin-right: var(--g-sp-3);
  border-radius: var(--g-r-pill); background: var(--g-surface-3);
  color: var(--g-mute); font-size: var(--g-fs-sm); font-weight: 700; line-height: 26px; text-align: center;
}
.option-btn:hover:not(:disabled) .opt-label { background: var(--g-primary-soft); color: var(--g-primary); }
/* 判卷状态：不再需要强制覆盖（出题后按钮即 disabled，hover 规则带 :not(:disabled) 不会串色） */
.option-btn.correct { border-color: var(--g-ok); background: var(--g-ok-bg); animation: p-pulse-green 0.4s var(--g-ease); }
.option-btn.correct .opt-label { background: var(--g-ok); color: var(--g-on-primary); }
.option-btn.wrong { border-color: var(--g-danger); background: var(--g-danger-bg); animation: p-shake 0.4s var(--g-ease); }
.option-btn.wrong .opt-label { background: var(--g-danger); color: var(--g-on-primary); }
.option-btn:disabled { cursor: default; opacity: 0.85; }

/* ---------- 5. 反馈 / 解析（折叠区） ---------- */
.feedback-box {
  margin-top: var(--g-sp-4); border: 1px solid var(--g-line);
  border-radius: var(--g-r-md); overflow: hidden;
  animation: p-fade-in var(--g-dur-2) var(--g-ease);
}
.feedback-box.correct { background: var(--g-ok-bg); border-left: 3px solid var(--g-ok); }
.feedback-box.wrong { background: var(--g-danger-bg); border-left: 3px solid var(--g-danger); }
.feedback-box.neutral { background: var(--g-surface-2); border-left: 3px solid var(--g-mute-2); }

/* 4-15：原为 <div onclick>，改 <button type="button">（可 Tab，Enter/Space 展开） */
.feedback-header {
  display: flex; align-items: center; gap: var(--g-sp-3); width: 100%;
  padding: 14px 16px; border: 0; background: none;
  text-align: left; cursor: pointer; user-select: none;
}
.feedback-icon { flex-shrink: 0; font-size: 1.4rem; line-height: 1; }
.feedback-summary { flex: 1; font-size: var(--g-fs-md); font-weight: 700; color: var(--g-ink); }
.feedback-toggle { color: var(--g-mute); font-size: var(--g-fs-xs); transition: transform var(--g-dur) var(--g-ease); }
.feedback-toggle.open { transform: rotate(180deg); }
.feedback-detail { display: none; padding: 0 16px 16px; }
.feedback-detail.open { display: block; }
.explanation-text { color: var(--g-ink-2); font-size: var(--g-fs-base); line-height: 1.8; }
.reference-text {
  margin-top: var(--g-sp-2); padding-top: var(--g-sp-2);
  border-top: 1px dashed var(--g-line);
  color: var(--g-mute); font-size: var(--g-fs-xs);
}
/* 解析里的行内代码（renderRichText 生成，原先写死行内色值） */
.rt-code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--g-surface-3); color: var(--g-ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: var(--g-fs-xs);
}

/* ---------- 6. 自评题型（文本作答 + 参考答案 + 自评） ---------- */
.self-textarea {
  width: 100%; min-height: 140px; padding: var(--g-sp-3);
  border-radius: var(--g-r-md); line-height: 1.7; resize: vertical;
}
.self-textarea:disabled { background: var(--g-surface-2); color: var(--g-mute); }

.model-answer-box {
  margin-top: var(--g-sp-3); padding: 14px 16px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-md);
  background: var(--g-ok-bg);
}
.model-answer-box.mine { background: var(--g-surface-2); }
.model-answer-label { margin-bottom: 6px; color: var(--g-ok); font-size: var(--g-fs-sm); font-weight: 700; }
.model-answer-label.mine { color: var(--g-mute); }
.model-answer-text { color: var(--g-ink-2); font-size: var(--g-fs-base); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }

.self-assess-area { margin-top: var(--g-sp-4); }
.self-assess-label { margin-bottom: var(--g-sp-2); color: var(--g-ink-2); font-size: var(--g-fs-sm); font-weight: 700; }
.self-assess-btns { display: flex; gap: var(--g-sp-3); }
.btn-self-correct, .btn-self-wrong {
  flex: 1; min-height: 44px; padding: var(--g-sp-3);
  border-width: 1px; border-style: solid; border-radius: var(--g-r-md);
  font-size: var(--g-fs-md); font-weight: 700; cursor: pointer;
  transition: border-color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease);
}
.btn-self-correct { background: var(--g-ok-bg); color: var(--g-ok); border-color: var(--g-ok-bg); }
.btn-self-correct:hover { border-color: var(--g-ok); }
.btn-self-wrong { background: var(--g-danger-bg); color: var(--g-danger); border-color: var(--g-danger-bg); }
.btn-self-wrong:hover { border-color: var(--g-danger); }
.self-assess-done { padding: var(--g-sp-3); border-radius: var(--g-r-md); font-size: var(--g-fs-base); font-weight: 700; text-align: center; }
.self-assess-done.good { background: var(--g-ok-bg); color: var(--g-ok); }
.self-assess-done.bad { background: var(--g-danger-bg); color: var(--g-danger); }

/* ---------- 7. 结果页 ---------- */
.result-ring {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; margin: 0 auto var(--g-sp-4);
  border: 6px solid var(--g-line); border-radius: var(--g-r-pill);
  background: var(--g-surface);
  font-size: var(--g-fs-2xl); font-weight: 800;
}
.ring-good { border-color: var(--g-ok-bg); color: var(--g-ok); }
.ring-ok { border-color: var(--g-warn-bg); color: var(--g-warn); }
.ring-bad { border-color: var(--g-danger-bg); color: var(--g-danger); }
.result-label { margin-bottom: var(--g-sp-5); min-height: 22px; color: var(--g-mute); font-size: var(--g-fs-base); text-align: center; }

.wrong-list { list-style: none; }
/* 4-13：base 没有 .wrong-item 的 hover 规则，这里也只用 longhand 声明左边红条，
   不再用 border-left 简写，避免被后续任何 border-color 简写染成主色 */
.wrong-item {
  margin-bottom: var(--g-sp-2); padding: 14px 16px;
  border: 1px solid var(--g-line);
  border-left-width: 4px;
  border-left-color: var(--g-danger);
  border-radius: var(--g-r-md);
  cursor: pointer;
  transition: background var(--g-dur) var(--g-ease);
}
.wrong-item:hover { background: var(--g-danger-bg); }
.wrong-q-stem { color: var(--g-ink-2); font-size: var(--g-fs-base); font-weight: 500; }
.wrong-q-meta { display: flex; flex-wrap: wrap; gap: var(--g-sp-4); margin-top: 6px; font-size: var(--g-fs-xs); }
.wrong-q-your { color: var(--g-danger); }
.wrong-q-correct { color: var(--g-ok); }

.no-wrong { display: none; padding: var(--g-sp-5); color: var(--g-ok); font-size: var(--g-fs-md); font-weight: 700; text-align: center; }
.no-wrong.warn { color: var(--g-warn); }

/* ---------- 8. 状态反馈统一（4-17）：toast 走 base 的 .toast，行内错误走 .g-error ---------- */
/* 行内错误 = base 的 .card（底/边/内距）+ .g-error（危险语义色），这里只压扁成轻量提示条 */
.inline-error { margin-top: var(--g-sp-2); padding: var(--g-sp-3); border-radius: var(--g-r-sm); box-shadow: none; font-size: var(--g-fs-sm); }

/* 4-19：抽题骨架与结果区骨架（底与流光由 base 的 .g-skeleton 给） */
.q-skel { display: block; border-radius: var(--g-r-md); }
.q-skel-badge { width: 88px; height: 24px; margin-bottom: var(--g-sp-3); }
.q-skel-stem { height: 72px; margin-bottom: var(--g-sp-5); }
.q-skel-opt { height: 52px; margin-bottom: var(--g-sp-2); }
.result-ring.g-skeleton { border-color: var(--g-line); background: var(--g-surface-3); }
.wrong-list .g-skeleton { height: 62px; margin-bottom: var(--g-sp-2); border-radius: var(--g-r-md); }

/* ---------- 9. 按钮：形状走 base 的 .btn 家族，这里只补本页几何 ---------- */
.btn-start { margin-top: var(--g-sp-4); letter-spacing: 1px; }
.btn-next { margin-top: var(--g-sp-4); }
.btn-next.hidden { display: none; }
.btn-submit-text { margin-top: var(--g-sp-3); }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--g-sp-3); margin-top: var(--g-sp-5); }
.btn-restart, .btn-home { flex: 1 1 160px; }
.btn-skip-assess { margin-top: var(--g-sp-2); }

/* ---------- 10. 页面切换与动效 ---------- */
.page { display: none; }
.page.active { display: block; animation: p-fade-in var(--g-dur-2) var(--g-ease); }

@keyframes p-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes p-pulse-green { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes p-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- 11. 响应式（断点与 base 的 860 对齐；触控目标见 4-14） ---------- */
@media (max-width: 860px) {
  .header { padding: var(--g-sp-4) 0 var(--g-sp-3); }
  .wrong-item { padding: var(--g-sp-3); }
}
@media (max-width: 560px) {
  /* 4-14：窄屏导航点触控 44px */
  .nav-dot { width: 44px; height: 44px; }
  .nav-dots { min-height: 44px; }
  .option-btn { min-height: 44px; padding: var(--g-sp-3); }
  .btn-group { flex-direction: column; }
  .btn-restart, .btn-home { flex: 1 1 auto; width: 100%; }
  .wrong-q-meta { flex-direction: column; gap: var(--g-sp-1); }
}