/* ============================================================
   detail.css · 词条详情页（定义卡 / 对AI说 / 图示槽位 / 动画控件）
   ============================================================ */

.term-head { margin-bottom: var(--s5); }
.term-title-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.term-title-zh { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.25; }
.term-title-en {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--muted);
}
.term-aliases { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s1); }
.term-meta-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

.term-actions { display: flex; gap: var(--s2); margin-top: var(--s4); }
.term-actions .btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 600;
}

/* 一句话定义 */
.define-card {
  padding: var(--s4) var(--s5);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-lg);
  line-height: 1.8;
  max-width: var(--prose-max);
}

/* 生活类比 */
.analogy-block {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn-soft) 55%, transparent);
  max-width: var(--prose-max);
}
.analogy-icon { color: var(--warn); flex-shrink: 0; margin-top: 3px; }
.analogy-body b { color: var(--warn); }

/* 对 AI 说 */
.talk-wrap { display: grid; gap: var(--s4); }
.talk-col h4 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-md);
  margin-bottom: var(--s2);
}
.talk-good h4 { color: var(--ok); }
.talk-bad h4  { color: var(--danger); }

.talk-list { display: grid; gap: var(--s2); }
.talk-item {
  position: relative;
  padding: var(--s3) var(--s4);
  padding-right: calc(var(--s4) + 34px);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  line-height: 1.8;
}
.talk-good .talk-item { background: var(--ok-soft); border-left: 3px solid var(--ok); }
.talk-bad  .talk-item { background: var(--danger-soft); border-left: 3px solid var(--danger); }

.talk-item .say-q::before { content: "「"; opacity: 0.45; }
.talk-item .say-q::after  { content: "」"; opacity: 0.45; }

.copy-btn {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.copy-btn:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }

.talk-bad .why {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--danger);
  opacity: 0.85;
}
.talk-bad .why::before {
  content: "问题：";
  font-weight: 700;
}

/* 常见误解 */
.misconception-list { counter-reset: mis; display: grid; gap: var(--s2); max-width: var(--prose-max); }
.misconception-list li {
  counter-increment: mis;
  position: relative;
  padding-left: calc(var(--s5) + 8px);
  color: var(--text);
}
.misconception-list li::before {
  content: counter(mis);
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ---------- 图示 / 动画槽位 ---------- */

.media-slot { margin: var(--s4) 0; }

.fig {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.fig-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--surface-2);
}
.fig-head .fig-kind {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  padding: 0 6px;
  line-height: 18px;
}
.fig-body { padding: var(--s4); }
.fig-body > svg { width: 100%; height: auto; }
.fig-caption {
  padding: var(--s2) var(--s4) var(--s3);
  font-size: var(--fs-xs);
  color: var(--muted);
  border-top: 1px dashed var(--line);
}

/* 待补充占位 */
.fig-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 140px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    color-mix(in srgb, var(--line) 40%, transparent) 14px 28px
  );
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* 图片词条 */
.fig-img img { width: 100%; height: auto; }

/* 动画控件 */
.anim-controls {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.anim-controls .spacer { flex: 1; }
.anim-hint { font-size: var(--fs-xs); color: var(--muted); }
.anim-stage-wrap { padding: var(--s3); background: var(--surface); }

/* ---------- 相关词条 / 翻页 ---------- */

.related-note { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s3); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s7);
}
.pager a {
  flex: 1;
  min-width: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pager a:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-1); }
.pager .dir { font-size: var(--fs-xs); color: var(--muted); display: block; }
.pager .name { font-weight: 600; font-size: var(--fs-md); }
.pager .next { text-align: right; }

@media (max-width: 700px) {
  .talk-wrap { grid-template-columns: 1fr; }
  .pager { flex-direction: column; }
  .pager .next { text-align: left; }
}