/* ═══════════════════════════════════════════════════════════════════
   错题本样式
   ───────────────────────────────────────────────────────────────────
   设计目标：错题不是用来「看」的，是用来「做动作」的。
   所以卡片上的验证按钮要显眼、状态标记要能一眼分辨、
   四组之间要有明确的优先级顺序（归因 > 反复犯 > 待验证 > 已通过）。
   ═══════════════════════════════════════════════════════════════════ */

/* 卡片：验证按钮在右，状态在左 —— 视线从「这是什么」到「我现在按哪个」 */
.nb-card {
  border-left: 3px solid transparent;
  transition: border-color .2s var(--e-out), background .2s var(--e-out);
}
.nb-card:hover { border-left-color: var(--glass-line-2); }

/* 错题本用单栏，不用 lay-masonry 的三栏瀑布 ——
   一条错题要连着读完「诊断信号 / 纠正动作 / 验证方法」三段，
   拆成三栏会让三段内容各自断开，反而读不成一个诊断链。 */
.nb-list { column-count: 1 !important; columns: 1 !important; }
.nb-list > * { break-inside: avoid; }

/* 归因待判：最需要处理的，卡片本身就要报警 */
.g-card.risk .nb-card { border-left-color: var(--c-rose); }
.g-card.risk .nb-card:hover { border-left-color: var(--c-rose); }

/* 归因二选一按钮：这是全站少见的「必须二选一」的决策，给足视觉权重 */
.nb-card .g-btn[data-nbblame] {
  border-color: var(--c-rose);
  color: var(--c-rose);
  background: transparent;
}
.nb-card .g-btn[data-nbblame]:hover {
  background: color-mix(in srgb, var(--c-rose) 16%, transparent);
  color: var(--c-rose);
}
.nb-card .g-btn[data-nbblame][data-conc="method"] {
  border-color: var(--c-violet);
  color: var(--c-violet);
}
.nb-card .g-btn[data-nbblame][data-conc="method"]:hover {
  background: color-mix(in srgb, var(--c-violet) 16%, transparent);
  color: var(--c-violet);
}

/* 验证通过：主行动 —— 用了强调色，让人一眼知道该按哪个 */
.nb-card .g-btn[data-nbpass] {
  background: var(--acc); color: var(--acc-ink); border-color: transparent;
  font-weight: 700;
}
.nb-card .g-btn[data-nbpass]:hover { opacity: .9; }

/* 验证不通过：次行动 —— 但不能弱到看不见，它同样是闭环的一步 */
.nb-card .g-btn[data-nbfail] {
  border-color: var(--glass-line-2);
  color: var(--ink-1);
}

/* 验证历史：时间戳序列，用等宽数字对齐 */
.nb-card .qc .v span { font-variant-numeric: tabular-nums; font-size: calc(11.5 * var(--u)); }

/* 归因结论已落库时，卡片给一个「已结案」的收束感 */
.nb-card .g-block.risk {
  border-left-width: 3px;
}

/* 空状态：把「怎么开始」说清楚，而不是留一句「暂无数据」 */
.nb-card + .nb-card { margin-top: calc(10 * var(--u)); }

/* 移动端：验证按钮排满一行，避免误触相邻按钮 */
@media (max-width: 700px) {
  .nb-card .g-btn[data-nbpass],
  .nb-card .g-btn[data-nbfail] { flex: 1 1 auto; }
}