/* ==================================================================
   pages/exam.css — 自由组卷页（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖 static/base.css（公共层，唯一视觉来源）：
     .filter-card/.preview-card（卡片家族：白底/细边/圆角/阴影由公共层给）
     .btn/.btn-primary/.btn-outline/.btn-sm · .q-type/.q-subject（chip 家族）
     .toast（含 max-width:min(90vw,520px)，修 4-26）
     .g-empty/.g-empty-icon/.g-empty-title/.g-empty-desc · .g-error（修 4-16/4-17）
     .modal-overlay/.modal-overlay.show/.modal-box
     .subnav/.subnav-inner（= var(--g-page)，与版心同宽，修 4-11）
     .page-container/.page-title/.page-subtitle/.page-head · .text-mute/.text-xs
     .footer · :focus-visible
   纪律（《前端优化方案_20260925.md》§3/§9）：
     强制权重 0 处；无字面色值（只用 var(--g-*)）；字号 ≥ var(--g-fs-xs)=12.5px；
     不写 outline（焦点环交给 base.css）；不覆盖卡片家族的 border/box-shadow。
   ================================================================== */

/* 页脚用 margin-top:auto 吸底（与 index 同策略） */
body[data-page="exam"] { display: flex; flex-direction: column; }

/* ---------- 1. 主布局：筛选侧栏 + 预览区 ---------- */
.layout { display: flex; align-items: flex-start; gap: var(--g-sp-5); }
.sidebar { flex: 0 0 260px; width: 260px; min-width: 0; }
.main { flex: 1 1 auto; min-width: 0; }

/* ---------- 2. 筛选侧栏（底/边/圆角/阴影来自 base 卡片家族） ---------- */
.filter-card { padding: var(--g-sp-4); margin-bottom: var(--g-sp-3); }
/* 4-27：卡片标题进字阶（比正文 14px 大一档，不再出现层级倒挂） */
.filter-card h3 { margin-bottom: var(--g-sp-2); font-size: var(--g-fs-md); font-weight: 700; }

.filter-group { margin-bottom: var(--g-sp-2); }
.filter-group label {
  display: flex; align-items: center; gap: var(--g-sp-2);
  min-height: 32px; padding: 4px 0;
  font-size: var(--g-fs-base); color: var(--g-ink-2); cursor: pointer;
}
.filter-group input[type="checkbox"],
.filter-group input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; }
.slider-row { display: flex; align-items: center; gap: var(--g-sp-3); margin-top: var(--g-sp-1); }
/* 4-9：勾选/拖动指示色一律走 token（勾选框由 base 的 accent-color 给，
   滑块这里补同色），不再露旧蓝，与「导出PDF」主按钮同一套色 */
.slider-row input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--g-primary); }
.slider-row .count-display {
  flex: 0 0 auto; min-width: 44px; text-align: right;
  font-size: var(--g-fs-lg); font-weight: 800; color: var(--g-primary);
}

/* 筛选加载失败/空库提示：12.5px + var(--g-mute)，修 4-16（原灰色仅 2.56:1） */
.filter-card .text-xs { line-height: 1.5; }

/* ---------- 3. 预览区（底/边/圆角/阴影来自 base 卡片家族） ---------- */
.preview-card { min-height: 420px; padding: var(--g-sp-4); }
.preview-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--g-sp-3); margin-bottom: var(--g-sp-4); padding-bottom: var(--g-sp-3);
  border-bottom: 1px solid var(--g-line-2);
}
.preview-info { font-size: var(--g-fs-sm); color: var(--g-mute); }
.preview-info strong { color: var(--g-primary); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); }

/* 空态/错误态结构交给 base 的 .g-empty，这里只把占位撑到卡片可用高度，
   避免占位挤在卡片上缘 */
.preview-card .g-empty { min-height: 320px; }

/* ---------- 4. 题目列表 ---------- */
.question-item { padding: var(--g-sp-3) 0; border-bottom: 1px solid var(--g-line-2); }
.question-item:last-child { border-bottom: none; }
.q-body { display: flex; align-items: flex-start; gap: var(--g-sp-2); }
.q-main { flex: 1 1 auto; min-width: 0; }
/* 4-9：题号圆点走考证线 token（与 base 的 .q-subject 同源色） */
.q-num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--g-r-pill);
  background: var(--g-exams-bg); color: var(--g-exams);
  font-size: var(--g-fs-xs); font-weight: 700;
}
.q-stem { font-size: var(--g-fs-base); color: var(--g-ink-2); line-height: 1.6; }
/* 4-27：题型/学科徽标字号由 base 的 chip 家族给（12.5px，原 0.7rem=11.2px）；
   页面层只排位置 */
.q-type, .q-subject { margin-left: var(--g-sp-2); white-space: nowrap; }
.q-options { margin-top: var(--g-sp-1); padding-left: 36px; }
.q-option { margin-bottom: 2px; font-size: var(--g-fs-sm); color: var(--g-ink-2); }

/* ---------- 5. 登录引导弹窗（遮罩/底板来自 base 的 .modal-overlay/.modal-box） ---------- */
#login-modal .modal-box { max-width: 400px; text-align: center; }
#login-modal .modal-box h3 { margin-bottom: var(--g-sp-2); }
#login-modal .modal-box p { margin-bottom: var(--g-sp-4); font-size: var(--g-fs-base); color: var(--g-mute); }
#login-modal .modal-box .btn + .btn { margin-left: var(--g-sp-2); }

/* ---------- 6. 响应式（断点与 base 的 860px 对齐；窄屏不再压死） ---------- */
@media (max-width: 860px) {
  .layout { flex-direction: column; gap: var(--g-sp-4); }
  .sidebar { flex: 1 1 auto; width: 100%; }
  .preview-card { min-height: 360px; }
  .preview-card .g-empty { min-height: 220px; }
}
@media (max-width: 560px) {
  .preview-header { align-items: flex-start; }
  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }
  .q-options { padding-left: var(--g-sp-5); }
}