/* =============================================================
 *  components.css
 *  卡片式教学页面 · 组件样式（v1.0）
 *  依赖：design-tokens.css（必须先引入）
 *
 *  用法：
 *    <link rel="stylesheet" href="_shared/design-tokens.css">
 *    <link rel="stylesheet" href="_shared/components.css">
 * ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* ---------- Page shell ---------- */
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -5%, rgba(79, 93, 213, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(14, 159, 138, 0.07), transparent 60%),
    radial-gradient(1000px 700px at 60% 110%, rgba(79, 93, 213, 0.06), transparent 60%),
    var(--bg);
  line-height: var(--lh-body);
  padding: 2.5rem 1rem 4rem;
}
article.page { max-width: var(--max); margin: 0 auto; }

/* ---------- Hero ---------- */
header.hero { margin-bottom: var(--sp-7); }
.kicker {
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.8rem;
}
.subtitle {
  font-size: var(--fs-sub);
  color: var(--muted);
  max-width: 46rem;
}
.meta-line {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--font-mono);
}

/* ---------- Section ---------- */
section { margin-bottom: var(--sp-7); }
h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 1.6rem 0 0.6rem;
  color: var(--ink);
}
p { margin-bottom: var(--sp-3); }
mark.key {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Card ⭐ ---------- */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--accent-12);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 4px 18px var(--accent-07);
  margin-bottom: 1.4rem;
}
.card .lecture-tag {
  display: inline-block;
  font-size: var(--fs-tag);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 5px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.55rem;
}
.card h3 { margin-top: 0.2rem; }

/* ---------- Part Banner ---------- */
.part-banner {
  margin: 2.4rem 0 1.2rem;
  padding: 0.9rem 1.4rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-06);
  border-radius: 0 10px 10px 0;
}
.part-banner .part-title { font-size: 1.15rem; font-weight: 700; }
.part-banner .part-desc  { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.2rem; }

/* ---------- TOC（页内目录导航，hero 后 / 概览前；随论文精读页自 slides 版 _shared 迁入） ---------- */
.toc {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem 0;
}
.toc > div:first-child {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent2);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.toc > ul.flat {
  font-size: 0.92rem;
  line-height: 1.7;
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc > ul.flat > li > a {
  color: var(--ink);
  text-decoration: none;
}
.toc > ul.flat > li > a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Label（段内小标题） ---------- */
.label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent2);
  text-transform: uppercase;
  margin: 0.9rem 0 0.25rem;
}

/* ---------- Text-sm（.label 小节标题后的小号正文） ---------- */
.text-sm {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink);
}

/* ---------- List（方块项目符号） ---------- */
ul.flat { list-style: none; margin: 0.4rem 0 0.9rem; }
ul.flat li {
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.35rem;
  font-size: var(--fs-body);
}
ul.flat li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg2);
  border: 1px solid var(--rule);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 0.12rem 0.65rem;
  text-decoration: none; /* 移除链接下划线 */
  white-space: nowrap; /* 胶囊内文字不折行（2026-10-08）：窄面板下整枚胶囊换行，杜绝按钮内文字断形成「半截」 */
}
a.chip { text-decoration: none; } /* 明确移除 a 标签的下划线 */
a.chip:hover { text-decoration: none; } /* hover 状态也不显示下划线 */
.chip.wiki  { color: var(--accent);  border-color: var(--accent-30); }
.chip.paper { color: var(--accent2); border-color: var(--accent2-30); }

/* ---------- CTA · 主入口按钮（v1.0 · 起源页：index 首页两大入口） ----------
   语义：页面级「主行动召唤」，与普通导航 chip 形成明确视觉层级（主 vs 次）。
   手法：大尺寸 + 实心渐变 / 加粗描边 + 白字/强调字 + 悬浮上浮阴影反馈。
   两个变体：.cta-primary（第一主入口，实心渐变）、.cta-secondary（第二主入口，描边）。 */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cta .cta-icon { font-size: 1.25rem; line-height: 1; }
.cta:hover { text-decoration: none; transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 第一主入口：实心渐变（蓝紫→青绿），白字，最强视觉权重 */
.cta-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 6px 20px var(--accent-30);
}
.cta-primary:hover {
  color: #fff;
  box-shadow: 0 10px 28px var(--accent-30);
}

/* 第二主入口：加粗描边 + 强调字，与实心款差异化、避免同级争抢 */
.cta-secondary {
  background: var(--card-bg);
  color: var(--accent);
  border-color: var(--accent-30);
  box-shadow: 0 3px 12px var(--accent-07);
}
.cta-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-06);
  box-shadow: 0 8px 22px var(--accent-07);
}

/* CTA 行：两大主入口独立居中，与下方次级导航 chip 分层（起源页：index 首页） */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0 1.2rem;
}

/* 响应式：窄屏 CTA 占满一行，更易点 */
@media (max-width: 640px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .cta { width: 100%; justify-content: center; }
}

/* ---------- Stat Grid ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.4rem 0;
}
.stat {
  background: var(--card-bg);
  border: 1px solid var(--accent-12);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  text-align: center;
  backdrop-filter: blur(10px);
}
.stat .num {
  font-size: 1.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stat .lbl { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------- Table ---------- */
/* 表格不做内部纵向滚动窗口：完整展开随页面滚动，避免表头被裁剪、
   滚轮被内部区间截留；仅保留横向滚动（小屏防溢出） */
.table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
}
th {
  text-align: left;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
}
td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.mono, .mono { font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------- Figure ---------- */
.chart-figure { margin: 1.6rem 0; }
.chart-figure figcaption { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.6rem; }
figure.diagram {
  margin: 1.6rem 0;
  padding: 1.2rem;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
}
figure.diagram figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.6rem; }
.mermaid { font-family: var(--font); }

/* ---------- Callout ---------- */
.callout {
  border-left: 4px solid var(--accent2);
  background: var(--accent2-06);
  padding: 0.9rem 1.2rem;
  border-radius: 0 10px 10px 0;
  margin: 1.2rem 0;
  font-size: 0.93rem;
}

/* ---------- Footer / Sources ---------- */
footer { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
footer .sources h2 { font-size: 1.1rem; }
footer .sources ol { padding-left: 1.2rem; font-size: var(--fs-sm); color: var(--muted); }
footer .sources li { margin-bottom: 0.5rem; overflow-wrap: break-word; word-break: break-all; }
footer .sources .src-title { color: var(--ink); word-break: normal; }
footer .sources .src-url   { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--accent); word-break: break-all; }
footer .sources a { word-break: break-all; }
footer .sources a.src-url { text-decoration: none; }
footer .sources a.src-url:hover { text-decoration: underline; }
sup a { color: var(--accent); text-decoration: none; font-size: 0.75em; font-weight: 600; }
sup a:hover { text-decoration: underline; }

/* ---------- Diagram Actions（下载/导出按钮区） ---------- */
.diagram-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.diagram-download {
  background: var(--bg2);
  border: 1px solid var(--rule);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.diagram-download:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--card-bg);
}
.diagram-download:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.diagram-download[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Code Block（JSON / 命令 / 长代码） ---------- */
pre.code-block {
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 0.5rem 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
  /* 横向滚动更顺滑 */  scrollbar-width: thin;
}

/* ---------- TOC Sidebar（左侧页面目录导航 · 由 _shared/toc-sidebar.js 动态生成）
   设计：固定于视口左侧空白区（正文 --max=960px 居中后左侧留白 ≥260px 才显示），
   不挤占正文宽度；点击平滑滚动 + scrollspy 高亮当前章节；
   可收缩 / 展开（「收起」按钮 ↔ 左缘竖排「目录」把手），偏好存 localStorage；
   颜色全部走令牌，亮暗主题自动适配；打印隐藏。 */
.toc-sidebar {
  display: none; /* 默认隐藏：窄屏无左侧留白，避免挤占/遮挡正文 */
  position: fixed;
  top: 108px;
  /* 224px 栏宽 + 48px 与正文间距（原 248px = 间距仅 24px，宽屏下左侧大片空白而目录贴正文）；
     max(16px,…) 钳制防 1480px 断点附近 left 变负溢出屏幕，窄宽屏间距优雅退化回 ~24px */
  left: max(16px, calc((100vw - var(--max)) / 2 - 224px - 48px));
  width: 224px;
  max-height: calc(100vh - 168px);
  overflow-y: auto; /* 仅导航自身过长时才出现滚动（标准目录栏行为），正文不受影响 */
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 1px solid var(--rule);
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.toc-sidebar.collapsed {
  transform: translateX(-115%); /* 滑出屏幕左侧而非 display:none，保留过渡动画 */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.toc-sidebar .toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 0.45rem;
}
.toc-sidebar .toc-collapse-btn {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}
.toc-sidebar .toc-collapse-btn:hover {
  color: var(--accent);
  background: var(--bg2);
}
/* 展开把手：收起后固定在左缘的竖排「目录」小按钮（与目录栏同样仅宽屏显示） */
.toc-expand-btn {
  display: none;
  position: fixed;
  left: 10px;
  top: 42%;
  z-index: 50;
  writing-mode: vertical-rl; /* 竖排「目录」二字 */
  letter-spacing: 0.25em;
  padding: 0.75rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card-bg, var(--surface, #fff));
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: color 0.15s, border-color 0.15s;
}
.toc-expand-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.toc-sidebar a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.7rem;
  margin-left: -0.95rem; /* 指示条压在容器分隔线上 */
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 长标题截断，悬停 title 看全文 */
  transition: color 0.15s, border-color 0.15s;
}
.toc-sidebar a:hover { color: var(--accent); }
.toc-sidebar a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
/* ---- 两级目录（2026-09-13）：h2 分组 + 组内 h3 子项 ---- */
.toc-sidebar .toc-group { position: relative; }
.toc-sidebar a.toc-l1 { padding-right: 1.1rem; } /* 右侧给「▸」箭头让位 */
.toc-sidebar .toc-toggle {
  position: absolute;
  right: 0;
  top: 0.3rem;
  z-index: 2;
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 15px;
  text-align: center;
  transition: transform 0.18s ease, color 0.15s;
}
.toc-sidebar .toc-group.open > .toc-toggle { transform: rotate(90deg); }
.toc-sidebar .toc-toggle:hover { color: var(--accent); }
.toc-sidebar .toc-sub { display: none; }
.toc-sidebar .toc-group.open > .toc-sub { display: block; }
.toc-sidebar a.toc-l2 {
  padding-left: 1.55rem;   /* 比一级多缩进，层级一眼可辨 */
  font-size: 0.72rem;
  line-height: 1.4;
}
@media (min-width: 1480px) {
  .toc-sidebar { display: block; }
  .toc-expand-btn.show { display: block; animation: toc-fade-in 0.25s ease; }
}
@keyframes toc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media print {
  .toc-sidebar, .toc-expand-btn { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  body { padding: 1.4rem 0.8rem 3rem; }
  h1 { font-size: 1.7rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  table { min-width: 640px; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; }
  .card, .stat { box-shadow: none; }
  section { page-break-inside: avoid; }
}

/* ---------- People card · 人物卡（v1.0 · 起源页：pioneers-on-ai-code）
   通用模式：avatar + 标题块（标签 + h3） + 文本 / callout。
   未来若被 ≥3 个页面复用即升级为独立 components；当前 1 页使用，暂驻此处。
   依赖：design-tokens.css（颜色/圆角）+ theme.css（暗色令牌） */
.pioneer-card {
  /* 人物卡 = .card + 头像排版。锚点跳转时避开吸顶 header（与 section 的 scroll-margin 对齐）*/
  scroll-margin-top: 5rem;
}
.pioneer-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.pioneer-card-head > .pioneer-card-titles { flex: 1; min-width: 0; }
.pioneer-card-head > .pioneer-card-titles h3 { margin: 0.2rem 0 0; }
.pioneer-portrait {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent-30);
  box-shadow: 0 3px 10px var(--accent-07);
  background: var(--bg2);
}

/* ---------- People strip · 头像条（v1.0 · 起源页：pioneers-on-ai-code）
   通用模式：一行多枚头像（可换行）+ 名字 + 角色 + 状态徽标。 */
.pioneer-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 0.6rem;
  margin: 1.2rem 0 0.4rem;
  padding: 1rem 0.8rem;
  background: var(--card-bg);
  border: 1px solid var(--accent-12);
  border-radius: var(--radius);
}
.pioneer-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 88px;
  text-align: center;
  line-height: 1.25;
}
.pioneer-strip-item img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-30);
  background: var(--bg2);
  margin-bottom: 0.4rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pioneer-strip-item img:hover,
.pioneer-strip-item img:focus-visible {
  transform: scale(1.08);
  border-color: var(--accent);
  outline: none;
}
.pioneer-strip-item strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}
.pioneer-strip-item .pioneer-role {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 0.1rem;
}

/* ---------- 状态徽标 · 通用（v1.0）
   三状态色板：verified（绿）/ partial（蓝）/ unverified（红）。
   未来扩展：info / warning / neutral，命名走 —pill 风格保持一致。 */
.fc-pill {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.fc-verified   { background: var(--accent2-06); color: var(--accent2); border: 1px solid var(--accent2-30); }
.fc-partial    { background: var(--accent-06);  color: var(--accent);  border: 1px solid var(--accent-30); }
.fc-unverified { background: rgba(229, 90, 78, 0.10); color: #c13b2a; border: 1px solid rgba(229, 90, 78, 0.35); }
/* 暗主题下未证实 chip:浅红 #ff9b8f (与 focus.css --focus-del 暗值同色,语义一致)
   对比度 vs --bg = 5.42:1 (AA),vs --bg2 = 4.66:1 (AA) */
:root[data-theme="dark"] .fc-unverified {
  background: rgba(229, 90, 78, 0.18);
  color: #ff9b8f;
  border: 1px solid rgba(229, 90, 78, 0.55);
}

/* ---------- Responsive（人物组件） ---------- */
@media (max-width: 768px) {
  .pioneer-card-head { flex-direction: row; align-items: flex-start; }
  .pioneer-portrait { width: 64px; height: 64px; }
  .pioneer-strip-item { width: 80px; }
  .pioneer-strip-item img { width: 56px; height: 56px; }
}

/* ---------- 人物名跨节跳转 ---------- */
a.pioneer-link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted var(--muted);
  transition: border-color 0.15s, color 0.15s;
}
a.pioneer-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* ---------- Hero Quote（重要引语专用） ---------- */
/* 用法：<div class="hero-quote"><p class="hero-quote-text">...</p><p class="hero-quote-byline">—— 作者 · 出处</p></div> */
.hero-quote {
  position: relative;
  margin: 1.6rem 0;
  padding: 1.6rem 1.8rem 1.2rem 2.4rem;
  background: linear-gradient(135deg, var(--accent-06), var(--accent2-06));
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
}
.hero-quote::before {
  content: "\201C"; /* 左双引号 " */
  position: absolute;
  top: -1.2rem;
  left: 0.6rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}
.hero-quote::after {
  content: "\201D"; /* 右双引号 " */
  position: absolute;
  bottom: -2.4rem;
  right: 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}
.hero-quote-text {
  font-size: 1.35em;
  font-style: italic;
  line-height: 1.55;
  color: var(--accent); /* 主题感知:亮 #4f5dd5 深紫蓝气质还在;暗 #8a96c4 板岩蓝对比度 5.66:1 */
  font-weight: 500;
  margin: 0 0 0.6rem 0;
  position: relative;
  z-index: 1;
  letter-spacing: 0.005em;
}
.hero-quote-byline {
  font-size: 0.82em;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-align: right;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ---------- Lab task（任务型实训 · 2026-09-06 试点，首发 llm-api-schema-reference） ---------- */
/* 用法：「课堂实训」对照型条目之后跟一块 .lab-task，内含可执行命令（.code-block）+ 预期输出（.lab-expected） */
.lab-task {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-06);
  padding: 0.65rem 0.9rem;
  margin: 0.5rem 0 0.9rem;
}
.lab-task-title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
}
.lab-task .code-block {
  margin: 0.4rem 0;
}
.lab-expected {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

/* ---------- Quiz（details 折叠自测 · 2026-09-06 试点） ---------- */
details.quiz {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.5rem;
}
details.quiz summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
}
details.quiz summary::marker {
  color: var(--accent);
}
.quiz-answer {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Portal Back Link（返回门户首页） ----------
   固定在左上角的小药丸：部署在子站（如 /teaching/、/platform/ 之类）
   时一键返回门户总入口（/），避免用户在子站内"迷路"。
   与右上角 .theme-toggle 同级，互不冲突。
   由 build_site.py 注入到每个生成的 HTML，无需逐页手改。 */
.portal-back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;            /* 与 .theme-toggle 一致，两边各占一隅 */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  background: var(--card-bg);
  border: 1px solid var(--accent-30);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px var(--accent-07);
  transition: border-color 0.18s ease, color 0.18s ease,
              transform 0.18s ease, background 0.18s ease;
}
.portal-back:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--bg2);
  transform: translateY(-1px);
}
.portal-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.portal-back .home-icon { font-size: 0.95em; line-height: 1; }

/* 移动端：略小一些，避免与 .theme-toggle 在小屏上贴边打架 */
@media (max-width: 768px) {
  .portal-back {
    top: 8px;
    left: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
  }
}

/* ---------- ICP 备案号页脚（法规要求） ----------
   网站底部居中的备案号小字，链接到工信部备案系统 beian.miit.gov.cn
   （《非经营性互联网信息服务备案管理办法》要求备案通过后置于网站底部）。
   由 build_site.py 注入到每个生成的 HTML（幂等），无需逐页手改；
   备案号常量与注入逻辑在 build_site.py，样式在此。 */
.icp-footer {
  margin-top: 3rem;
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.icp-footer a {
  color: var(--muted);
  text-decoration: none;
}
.icp-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.icp-footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Step Card · 步骤卡（v1.0 · 起源页：undergrad-fast-track）
   通用模式：步骤号 + 标题 + 目标 + 操作 + 看什么 + 任务框 + 答案折叠 + 拓展 chips。
   视觉与 .part-banner + .card 协同（左侧色条 + 半透明背景），但语义独立
   ——「.step-card = 一个完整学习步骤」，而 .card = 单个知识点。
   依赖：design-tokens.css（颜色/圆角/间距）+ theme.css（暗色令牌） */
.step-card {
  /* 锚点跳转时避开吸顶 header（与 section 的 scroll-margin 对齐）*/
  scroll-margin-top: 5rem;
  background: var(--card-bg);
  border: 1px solid var(--accent-12);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem 1rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 4px 18px var(--accent-07);
  backdrop-filter: blur(10px);
  /* 数据步数 + 分钟数由 JS 读取做进度条联动，无需 CSS 规则 */
}
.step-card .part-banner {
  /* 步骤卡内嵌 part-banner 时，去掉外边距让其贴顶 */
  margin: 0 0 0.9rem;
  background: transparent;
  border-left: none;
  padding: 0 0 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}

/* ---------- Task Box · 任务高亮框（v1.0 · 起源页：undergrad-fast-track）
   视觉与 .lab-task 同源（左边框 + 浅色背景），但语义定位为「学生必交作业」——
   与 .lab-task 的「教师示范操作」语义区分。 */
.task-box {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent2);
  border-radius: var(--radius);
  background: var(--accent2-06);
  padding: 0.65rem 0.9rem;
  margin: 0.7rem 0 0.6rem;
  font-size: var(--fs-body);
  line-height: 1.65;
}
.task-box b { color: var(--accent2); }

/* ---------- Answer Details · 答案折叠（v1.0 · 起源页：undergrad-fast-track）
   与 details.quiz 同源（折叠 + 答案分隔线），但语义定位为「对照要点」非「自测题」。
   打印时强制展开——学生打印交作业时答案应可见。 */
details.answer-details {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 0.5rem 0.9rem;
  margin: 0.4rem 0 0.6rem;
}
details.answer-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent2);
}
details.answer-details summary::marker {
  color: var(--accent2);
}
details.answer-details[open] {
  background: var(--card-bg);
}
details.answer-details p {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink);
}

/* 打印时：步骤卡去阴影、答案背景变白。
   注：强制展开 <details> 答案在 CSS 中做不到（display 覆盖不了元素开合状态），
   改由 undergrad-fast-track.html 内的 beforeprint/afterprint 监听实现。 */
@media print {
  .step-card { box-shadow: none; background: #fff; }
  details.answer-details { background: #fff; }
}

/* ---------- Step Checkbox · 步骤勾选框（v1.0 · 起源页：undergrad-fast-track）
   进度条区 6 个 checkbox 共享样式——小一号、对齐 chip baseline */
.step-check {
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--accent);
}

/* ---------- Utility Classes · 实用工具类（替代内联样式） ---------- */
/* 表格列宽 */
.th-w-9 { width: 9rem; }
.th-w-11 { width: 11rem; }
.th-w-13 { width: 13rem; }
.th-w-14 { width: 14rem; }
.th-w-16 { width: 16rem; }

/* 标题间距 */
.h3-mt { margin-top: 1.5rem; }
.h3-mt-lg { margin-top: 2rem; }

/* 文本对齐 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--muted); }

/* 间距 */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* 内边距 */
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }

/* 更多表格列宽 */
.th-w-5 { width: 5rem; }
.th-w-6 { width: 6rem; }

/* 特殊间距 */
.mt-06 { margin-top: 0.6rem; }

/* 光标 */
.cursor-pointer { cursor: pointer; }

/* 特殊间距组合 */
.mr-03 { margin-right: 0.3rem; }
.mt-12 { margin-top: 1.2rem; }
.mt-14 { margin-top: 1.4rem; }
.mt-08 { margin-top: 0.8rem; }
.p-card { padding: 1rem 1.4rem; }

/* 组合样式 */
.progress-text { margin: 0.6rem 0 0; color: var(--muted); }

/* 更多表格列宽 */
.th-w-18 { width: 18rem; }

/* 更多表格列宽 */
.th-w-4 { width: 4rem; }
.th-w-8 { width: 8rem; }
.th-w-95 { width: 9.5rem; }
.th-w-10 { width: 10rem; }
.th-w-12 { width: 12rem; }
.th-w-65 { width: 6.5rem; }
.th-w-20 { width: 20rem; }
.th-w-22 { width: 22rem; }

/* 特殊间距 */
.mt-12-no-space { margin-top: 1.2rem; }

/* SVG 字体 */
.svg-font { font-family: InstrumentSans, -apple-system, sans-serif; }

/* 更多实用类 */
.mt-04 { margin-top: 0.4rem; }
.mt-06 { margin-top: 0.6rem; }
.mt-0 { margin-top: 0; }
.m-04-14 { margin: 0.4rem 0 0 1.4rem; padding: 0; }
.text-muted-small { color: var(--muted); font-size: 0.85em; }
.blockquote-accent { border-left: 4px solid var(--accent); background: var(--accent-06); padding: 0.8rem 1.2rem; margin: 0.8rem 0; border-radius: 0 10px 10px 0; font-style: italic; }
.toc-container { background: var(--card-bg); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.2rem 0; }
.toc-header { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent2); font-weight: 700; margin-bottom: .5rem; }
.toc-list { font-size: .92rem; line-height: 1.7; }
.echart-container { width: 100%; }
.echart-300 { height: 300px; }
.echart-320 { height: 320px; }
.echart-340 { height: 340px; }
.echart-360 { height: 360px; }
.th-w-7 { width: 7rem; }
.th-w-15 { width: 15rem; }

/* ---------- Syntax Highlight（专题页代码着色 · 起源页：topics/01-minimal-code-agent）
   用法：<pre class="code-block py">，由 _shared/py-highlight.js 运行时包裹 token 类。
   设计纪律：与 theme.css 对齐——不新增第四色，只复用令牌里已有的三个色位
   （accent 蓝紫 / accent2 青绿 / muted 灰）；亮暗主题因此自动适配，
   本处不需要、也不应该再为暗色补写覆盖规则。 */
.tok-kw  { color: var(--accent); }
.tok-str { color: var(--accent2); }
.tok-com { color: var(--muted); font-style: italic; }
.tok-num { color: var(--muted); }


/* ── meta-line 长文折叠（2026-10-04 张老师指令落地；2026-10-08 调整：默认保留 3 行，超 3 行才折叠+按钮；配套 _shared/meta-collapse.js）── */
.meta-line.mc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
button.meta-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--accent, #0969da);
  background: none;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 14px;
  cursor: pointer;
}
button.meta-toggle:hover { background: var(--card-bg, #f6f8fa); }