/* ==================================================================
   pages/answersheet.css — 纸质答卷页（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖（全部来自 static/base.css，本文件不重复定义）：
     .card/.q-card 卡片家族 · .btn 家族（含 btn-primary / btn-ghost 等）
     .chip/.q-type/.q-subject · .form-row/.form-label/select/.note-input
     .upload-zone · .toast · .modal-overlay · .g-empty
     .page-container/.page-head/.page-title/.page-subtitle
     .text-mute/.text-xs · .subnav/.subnav-inner · .footer · :focus-visible
   纪律（《前端显示优化方案_20260925.md》§3/§9）：
     1. 无字面色值（无十六进制、无颜色函数），一律 var(--g-*)；
     2. 无强制权重覆盖声明；
     3. 字号走 --g-fs-*（最小 12.5px）；不写焦点样式，焦点环交给 base 的 :focus-visible；
     4. 不改 HTML 既有 class 名，不动任何 id（页内 JS 依赖，删 id 会空指针）。
   ================================================================== */

/* 页脚沉底：.footer 的 margin-top:auto 依赖 body 为纵向 flex */
body[data-page="answersheet"] { display: flex; flex-direction: column; }

/* ---------- 1. 登录引导 ---------- */
.login-card { padding: var(--g-sp-6); text-align: center; }
.login-cta { margin-top: var(--g-sp-3); }

/* ---------- 2. 卡片标题（base 只管 .card 容器，标题归本页） ---------- */
.card h3 {
  margin-bottom: var(--g-sp-3);
  font-size: var(--g-fs-md); font-weight: 700; color: var(--g-ink);
}

/* ---------- 3. 上传区：预览缩略图 + 提示 ---------- */
.photo-preview { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); margin-top: var(--g-sp-3); }
/* cursor 与 click 处理一致：renderPreview() 把预览图接到同一个 #photo-modal（修 4-28 假可点） */
.photo-preview img {
  width: 86px; height: 86px; object-fit: cover;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  cursor: zoom-in;
}
/* 字号/颜色走 base 的 .text-xs/.text-mute，这里只留间距 */
.photo-hint { margin-top: var(--g-sp-2); }

/* ---------- 4. 我的答卷列表（窄屏见第 8 段，修 4-20） ---------- */
.item-row {
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: var(--g-sp-3);
  border: 1px solid var(--g-line); border-radius: var(--g-r-md);
  margin-bottom: var(--g-sp-2); cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease);
}
.item-row:hover { background: var(--g-surface-2); border-color: var(--g-primary); }
.item-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--g-fs-base); font-weight: 500; color: var(--g-ink);
  overflow-wrap: anywhere;
}
.item-meta { flex: 0 0 auto; font-size: var(--g-fs-xs); color: var(--g-mute); white-space: nowrap; }
.item-row .chip { flex: 0 0 auto; }
/* 状态徽标只补语义底色，形状/字号沿用 base 的 .chip */
.chip-uploaded { background: var(--g-warn-bg); color: var(--g-warn); }
.chip-graded { background: var(--g-ok-bg); color: var(--g-ok); }

/* ---------- 5. 自评视图：顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-sp-3); flex-wrap: wrap; margin-bottom: var(--g-sp-3);
}
.grade-title { margin-bottom: 2px; }
.progress-note { font-size: var(--g-fs-sm); color: var(--g-mute); }
.progress-note strong { color: var(--g-primary); }

/* ---------- 6. 答卷照片条（点击放大，接 #photo-modal） ---------- */
.photo-strip {
  display: flex; gap: var(--g-sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
}
.photo-strip img {
  height: 110px; width: auto; max-width: none; flex: 0 0 auto;
  border: 2px solid var(--g-line); border-radius: var(--g-r-sm);
  cursor: zoom-in;
}

/* ---------- 7. 题卡与自评行 ---------- */
/* 4-1：只写本页几何，白底/细边/--g-sh-sm 由 base 的卡片家族（.q-card 已在内）提供 */
.q-card { padding: var(--g-sp-4); margin-bottom: var(--g-sp-3); }
/* 已评分才叠加语义底色 */
.q-card.graded-right { border-color: var(--g-ok); background: var(--g-ok-bg); }
.q-card.graded-wrong { border-color: var(--g-danger); background: var(--g-danger-bg); }

.q-head { display: flex; align-items: center; gap: var(--g-sp-2); flex-wrap: wrap; margin-bottom: var(--g-sp-2); }
.q-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; 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 { margin-bottom: 6px; font-size: var(--g-fs-base); color: var(--g-ink); overflow-wrap: anywhere; }
.q-options { margin-bottom: 6px; padding-left: 10px; font-size: var(--g-fs-sm); color: var(--g-ink-2); }
/* renderRichText() 生成的行内代码，避免 JS 里写死色值 */
.q-code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--g-surface-3); font-size: var(--g-fs-xs);
}

.ref-answer {
  margin: var(--g-sp-2) 0; padding: var(--g-sp-3);
  background: var(--g-surface-2); border: 1px solid var(--g-line-2);
  border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm); color: var(--g-ink-2);
}
.ref-answer .label { display: block; margin-bottom: 4px; font-size: var(--g-fs-xs); font-weight: 700; color: var(--g-ok); }
.ref-explanation { margin-top: 6px; font-size: var(--g-fs-xs); color: var(--g-mute); }

.grade-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2); margin-top: var(--g-sp-3); }
.btn-grade {
  min-height: 34px; padding: 7px 16px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-ink-2);
  font-size: var(--g-fs-sm); font-weight: 600; 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);
}
.btn-grade:hover { border-color: var(--g-primary); background: var(--g-primary-soft); color: var(--g-primary); }
.btn-grade.right.on { border-color: var(--g-ok); background: var(--g-ok-bg); color: var(--g-ok); }
.btn-grade.wrong.on { border-color: var(--g-danger); background: var(--g-danger-bg); color: var(--g-danger); }
.btn-grade.skip { border-style: dashed; color: var(--g-mute); font-weight: 500; }
/* 视觉全走 base 的 .note-input（含表单焦点环），这里只给它在 flex 行里的伸缩 */
.note-input { flex: 1 1 180px; min-width: 0; }

.submit-card { text-align: center; }

/* base 的 .modal-overlay 只定了遮罩，图片尺寸在公共层缺项（已在汇报中列出） */
.modal-overlay img { max-height: 92vh; border-radius: var(--g-r-sm); cursor: zoom-out; }

/* ---------- 8. 响应式（与公共层 860/560px 断点对齐） ---------- */
@media (max-width: 860px) {
  .card h3 { margin-bottom: var(--g-sp-2); }
  .q-card { padding: var(--g-sp-3); }
}
@media (max-width: 560px) {
  /* 4-20：390px 下不再被 meta 的 nowrap 挤爆——标题独占一行完整可读 */
  .item-row { flex-wrap: wrap; row-gap: var(--g-sp-1); }
  .item-title { flex: 1 1 100%; }
  .item-meta { flex: 1 1 auto; white-space: normal; }
  .item-row .chip { margin-left: auto; }

  .login-card { padding: var(--g-sp-5); }
  .topbar { gap: var(--g-sp-2); }
  .note-input { flex-basis: 100%; }
  .photo-strip img { height: 88px; }
}