/* =============================================================
 *  focus.css · 专注模式（Focus Mode）沉浸式视觉系统 v1.0
 *  依赖：design-tokens.css（颜色/字体令牌）+ theme.css（明暗令牌覆盖 + .theme-toggle）
 *  用途：teaching-web-platform/focus/ 下的单页沉浸式闪卡（SPA 式翻页）
 *
 *  设计目标（张老师 2026-09-08 定调）：
 *    一屏一概念 · 字体偏大 · 极致留白 · 风格简约 · 沉浸式 · 零干扰
 *
 *  纪律：
 *    - 所有 class 以 focus- 前缀命名，语义独立、不与 components.css 冲突
 *    - 专注模式【不引入】components.css：它是一套完全独立的视觉语言
 *    - 默认深色沉浸（html[data-theme="dark"]），可切亮色；跟随明暗令牌
 * ============================================================= */

/* ---------- 专注模式专属令牌（明/暗各一套聚光光晕） ---------- */
:root {
  --focus-glow: rgba(79, 93, 213, 0.07);      /* 亮色：极淡蓝紫聚光 */
  --focus-max: 62rem;                          /* 内容最大宽度（比讲义更窄，更聚焦） */
}
:root[data-theme="dark"] {
  --focus-glow: rgba(138, 150, 196, 0.14);    /* 暗色：稍强板岩蓝聚光，营造"聚光灯"感 */
}

/* ---------- Reset（专注模式自包含，不依赖 components.css） ---------- */
html.focus-root,
html.focus-root body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;                /* 一屏一卡：禁止页面级滚动 */
}
html.focus-root body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.focus-app *,
.focus-app *::before,
.focus-app *::after { box-sizing: border-box; }

/* ---------- App 舞台：满屏 + 沉浸式聚光背景 ---------- */
.focus-app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background:
    radial-gradient(125% 95% at 50% 42%, var(--focus-glow), transparent 62%),
    var(--bg);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ---------- 单屏（一张卡）：绝对叠放，切换靠淡入上浮 ---------- */
.focus-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6.5vh 6vw 12.5vh;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.55s;
}
.focus-screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 2;
}

/* ---------- 文字层级（v2.0 密度重构：受众本科三年级，字号下调一档换信息量） ---------- */
.focus-kicker {
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent2);
  font-weight: 700;
  margin-bottom: 2.2vh;
}
.focus-title {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: var(--focus-max);
  margin-bottom: 1.6vh;
}
.focus-sub {
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 48rem;
  margin-bottom: 1vh;
}

/* ---------- 要点列表（v2.0：序号 + 主句 + 二级说明，密度加倍） ---------- */
.focus-points {
  display: flex;
  flex-direction: column;
  gap: 1.7vh;
  max-width: var(--focus-max);
  margin-top: 2.6vh;
  width: 100%;
}
.focus-point {
  display: flex;
  align-items: flex-start;
  gap: 1.05rem;
  text-align: left;
}
.focus-point-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  color: var(--accent);
  opacity: 0.55;
  min-width: 1.9ch;
  margin-top: 0.12rem;
}
.focus-point-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  text-align: left;
}
.focus-point-text {
  font-size: clamp(1.02rem, 1.75vw, 1.3rem);
  line-height: 1.42;
  font-weight: 600;
  color: var(--ink);
}
.focus-point-text b {
  color: var(--accent);
  font-weight: 700;
}
.focus-point-text .mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent2);
}
.focus-point-desc {
  font-size: clamp(0.86rem, 1.45vw, 1.02rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  max-width: 48rem;
}

/* ---------- 锚点总结句（一屏底部的一句话收口） ---------- */
.focus-note {
  margin-top: 3.4vh;
  font-size: clamp(0.88rem, 1.45vw, 1.05rem);
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  max-width: 46rem;
}
.focus-note b { color: var(--accent2); font-style: normal; font-weight: 700; }

/* ---------- 总览首屏：闭环全景流（5 大环节横向串联） ---------- */
.focus-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 4vh;
  max-width: 74rem;
}
.focus-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 8rem;
  padding: 1.05rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--accent-12);
  background: var(--card-bg);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.focus-flow-node:hover { border-color: var(--accent-30); transform: translateY(-3px); }
.focus-flow-num {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.focus-flow-name {
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  font-weight: 700;
  color: var(--ink);
}
.focus-flow-sub {
  font-size: clamp(0.72rem, 1.2vw, 0.84rem);
  color: var(--muted);
  line-height: 1.35;
}
.focus-flow-arrow {
  display: flex;
  align-items: center;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--accent2);
  opacity: 0.6;
  font-weight: 700;
}

/* ---------- 底部导航：进度点 + 计数 + 操作提示 ---------- */
.focus-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  z-index: 5;
}
.focus-dots { display: flex; gap: 0.65rem; }
.focus-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--muted);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.focus-dot:hover { opacity: 0.7; }
.focus-dot.is-active {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.45);
}
.focus-nav-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.7;
}
.focus-counter { font-variant-numeric: tabular-nums; }
.focus-hint kbd {
  font-family: var(--font-mono);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.05rem 0.4rem;
  font-size: 0.9em;
}

/* ---------- 退出按钮（左上角，极淡，不抢注意力） ---------- */
.focus-exit {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.focus-exit:hover { color: var(--accent); border-color: var(--accent-30); }

/* ---------- 合规元信息（verify.py 要求 .meta-line + 生成时间；藏到极淡） ---------- */
.focus-app .meta-line {
  position: absolute;
  bottom: 1.1rem;
  right: 1.4rem;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.28;
  text-align: right;
  max-width: 60vw;
}

/* ---------- 逐个上浮动画：进入一屏时标题→要点依次浮现（增强沉浸节奏） ---------- */
@keyframes focus-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.focus-screen.is-active .focus-kicker,
.focus-screen.is-active .focus-title,
.focus-screen.is-active .focus-sub,
.focus-screen.is-active .focus-point,
.focus-screen.is-active .focus-flow-node,
.focus-screen.is-active .focus-flow-arrow,
.focus-screen.is-active .focus-note {
  animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.focus-screen.is-active .focus-kicker      { animation-delay: 0.02s; }
.focus-screen.is-active .focus-title       { animation-delay: 0.08s; }
.focus-screen.is-active .focus-sub         { animation-delay: 0.16s; }
.focus-screen.is-active .focus-flow        { animation: none; }
.focus-screen.is-active .focus-flow-node:nth-child(1)  { animation-delay: 0.20s; }
.focus-screen.is-active .focus-flow-arrow:nth-child(2) { animation-delay: 0.28s; }
.focus-screen.is-active .focus-flow-node:nth-child(3) { animation-delay: 0.34s; }
.focus-screen.is-active .focus-flow-arrow:nth-child(4) { animation-delay: 0.42s; }
.focus-screen.is-active .focus-flow-node:nth-child(5) { animation-delay: 0.48s; }
.focus-screen.is-active .focus-flow-arrow:nth-child(6) { animation-delay: 0.56s; }
.focus-screen.is-active .focus-flow-node:nth-child(7) { animation-delay: 0.62s; }
.focus-screen.is-active .focus-flow-arrow:nth-child(8) { animation-delay: 0.70s; }
.focus-screen.is-active .focus-flow-node:nth-child(9) { animation-delay: 0.76s; }
.focus-screen.is-active .focus-note        { animation-delay: 0.5s; }
.focus-screen.is-active .focus-point:nth-child(1) { animation-delay: 0.22s; }
.focus-screen.is-active .focus-point:nth-child(2) { animation-delay: 0.32s; }
.focus-screen.is-active .focus-point:nth-child(3) { animation-delay: 0.42s; }
.focus-screen.is-active .focus-point:nth-child(4) { animation-delay: 0.52s; }
.focus-screen.is-active .focus-point:nth-child(5) { animation-delay: 0.62s; }

/* ---------- 响应式：窄屏收紧留白、闭环流转纵列 ---------- */
@media (max-width: 820px) {
  .focus-screen { padding: 9vh 6vw 16vh; }
  .focus-point { gap: 0.9rem; }
  .focus-flow { flex-direction: column; align-items: center; gap: 0.5rem; }
  .focus-flow-arrow { transform: rotate(90deg); }
  .focus-flow-node { width: 100%; max-width: 22rem; flex-direction: row; justify-content: flex-start; gap: 1rem; padding: 1rem 1.2rem; }
  .focus-app .meta-line { display: none; }
}

/* ---------- 减少动态偏好：尊重系统"减少运动"设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  .focus-screen,
  .focus-screen.is-active .focus-point,
  .focus-screen.is-active .focus-flow-node,
  .focus-screen.is-active .focus-code,
  .focus-screen.is-active .focus-next { transition: none; animation: none; }
}

/* =============================================================
 *  v1.1 扩展 · 实战篇（focus/example.html）：真实数据展示组件
 *  背景：骨架篇纯概念；实战篇要展示 issue 原文 / diff / jsonl /
 *  SFT 样本等真实代码块，需要与专注模式同语言的代码视觉。
 *  纪律：沿用 focus- 前缀；diff 红绿为本模式专属令牌（token 层无语义红绿）。
 * ============================================================= */

/* ---------- 实战篇专属令牌：diff 增/删行色（明暗各一套） ---------- */
:root {
  --focus-add: #157f4e;                        /* 亮色：增行绿 */
  --focus-del: #b3362b;                        /* 亮色：删行红 */
  --focus-code-bg-shadow: rgba(15, 23, 42, 0.10);
}
:root[data-theme="dark"] {
  --focus-add: #62d9a5;                        /* 暗色：增行亮绿 */
  --focus-del: #ff9b8f;                        /* 暗色：删行亮红 */
  --focus-code-bg-shadow: rgba(0, 0, 0, 0.32);
}

/* ---------- 代码块头（来源标注：issue / 文件路径 / 数据集行） ---------- */
.focus-code-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.2vh;
  margin-bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.1vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.focus-code-head::before {
  content: "▮";
  color: var(--accent);
  opacity: 0.65;
}

/* ---------- 代码块本体：等宽左对齐 + 卡片化 + 横向滚动兜底 ---------- */
.focus-code {
  font-family: var(--font-mono);
  font-size: clamp(0.74rem, 1.2vw, 0.92rem);
  line-height: 1.5;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  width: 100%;
  max-width: min(58rem, 90vw);
  margin: 0;
  padding: 1.05rem 1.35rem;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 14px 36px var(--focus-code-bg-shadow);
}
/* 代码内的语义着色：注释灰 / 增行绿 / 删行红 / 关键蓝 */
.focus-code .focus-c-dim { color: var(--muted); }
.focus-code .focus-c-add { color: var(--focus-add); font-weight: 700; }
.focus-code .focus-c-del { color: var(--focus-del); }
.focus-code .focus-c-key { color: var(--accent2); }

/* ---------- 章节跳转胶囊（骨架篇 ↔ 实战篇互链） ---------- */
.focus-next {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 2.4vh;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.5vw, 0.92rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  background: var(--card-bg);
  border: 1px solid var(--accent-30);
  border-radius: var(--radius-pill);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.focus-next:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---------- 实战篇组件的入场节奏（挂到既有 focus-rise 动画族） ---------- */
.focus-screen.is-active .focus-code-head { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: 0.22s; }
.focus-screen.is-active .focus-code      { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: 0.30s; }
.focus-screen.is-active .focus-next      { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: 0.58s; }

/* ---------- 窄屏：代码块收紧（横滚兜底已在 .focus-code 上） ---------- */
@media (max-width: 820px) {
  .focus-code { padding: 0.85rem 0.95rem; border-radius: 11px; }
  .focus-code-head { margin-top: 2vh; }
}

/* =============================================================
 *  v1.2 扩展 · 超链接能力：网页的本职优势
 *  背景：专注模式此前是"幻灯片思维"，无跳转。v1.2 引入三层链接：
 *    1) 每屏「深挖」行——新标签打开对应讲义，不打断沉浸进度
 *    2) 封面流程图节点——可点击目录，直达对应幕（#sN 屏级深链）
 *    3) URL 深链 #sN——翻页自动同步，可分享/可跳转指定屏
 *  纪律：沿用 focus- 前缀；链接视觉保持"安静"（可选探索，不抢概念主体）。
 * ============================================================= */

/* ---------- 深挖链接行（每屏底部，讲义跳转 · 新标签） ---------- */
.focus-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2.8vh;
  max-width: 54rem;
}
.focus-links-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  opacity: 0.6;
  margin-right: 0.25rem;
}
.focus-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.4vw, 0.85rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.focus-link:hover {
  color: var(--accent);
  border-color: var(--accent-30);
  transform: translateY(-2px);
}

/* ---------- 封面流程图节点 → 可点击目录（a 化后的样式复位 + 可点性提示） ---------- */
a.focus-flow-node {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}
a.focus-flow-node .focus-flow-name { color: var(--ink); }
/* 可点性提示：右上角小箭头，hover 浮现——否则"像卡片但点不动"的误会被试运行抓到过 */
a.focus-flow-node::after {
  content: "→";
  position: absolute;
  top: 0.55rem;
  right: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent2);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
a.focus-flow-node:hover::after { opacity: 0.9; transform: none; }

/* ---------- 键盘可达性：链接聚焦可见（Tab 浏览时不迷路） ---------- */
.focus-app a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 深挖行入场节奏（挂在 focus-rise 动画族末尾） ---------- */
.focus-screen.is-active .focus-links { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: 0.62s; }

/* ---------- 窄屏：深挖行收紧 ---------- */
@media (max-width: 820px) {
  .focus-links { gap: 0.4rem; margin-top: 2vh; }
  .focus-link { padding: 0.36rem 0.8rem; }
}

/* =============================================================
 *  v2.0 扩展 · 密度重构组件：网格卡 / 字段表 / 对比列
 *  背景：试运行反馈「字过大、风格过简、单屏内容太有限」。
 *  字号整体下调一档（本科三年级），用省出的空间承载结构化组件：
 *    .focus-grid/.focus-cell   2×2 / 1×3 网格卡（元素→角色→说明）
 *    .focus-table              字段映射表（字段 / 角色 / 来源）
 *    .focus-vs                 A/B 双列对比卡（好/坏轨迹、拿到/看不到）
 *  纪律：沿用 focus- 前缀；卡片 hover 微交互与全站一致。
 * ============================================================= */

/* ---------- 通用 mono 内联（网格/表格/对比列内可用） ---------- */
.focus-app .mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent2);
}

/* ---------- 网格卡 ---------- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  width: 100%;
  max-width: 60rem;
  margin-top: 2.6vh;
  text-align: left;
}
.focus-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.focus-cell {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.95rem 1.05rem;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 13px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.focus-cell:hover { border-color: var(--accent-30); transform: translateY(-2px); }
.focus-cell-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent2);
}
.focus-cell-title {
  font-size: clamp(0.95rem, 1.55vw, 1.12rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.focus-cell-title b { color: var(--accent); }
.focus-cell-text {
  font-size: clamp(0.84rem, 1.35vw, 0.98rem);
  line-height: 1.52;
  color: var(--muted);
}

/* ---------- 字段映射表 ---------- */
.focus-table {
  width: 100%;
  max-width: 58rem;
  margin-top: 2.4vh;
  border-collapse: collapse;
  text-align: left;
  font-size: clamp(0.86rem, 1.4vw, 1.0rem);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 13px;
  overflow: hidden;
}
.focus-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0.55rem 1.0rem;
  border-bottom: 1px solid var(--accent-30);
  background: var(--bg2);
}
.focus-table td {
  padding: 0.6rem 1.0rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  line-height: 1.45;
}
.focus-table td:first-child {
  font-family: var(--font-mono);
  color: var(--accent2);
  white-space: nowrap;
}
.focus-table tr:last-child td { border-bottom: none; }

/* ---------- A/B 双列对比卡 ---------- */
.focus-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 56rem;
  margin-top: 2.6vh;
  text-align: left;
}
.focus-vs-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.05rem 1.15rem;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.focus-vs-col.is-good { border-color: var(--focus-add); }
.focus-vs-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.focus-vs-col.is-good .focus-vs-tag { color: var(--focus-add); }
.focus-vs-title {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.focus-vs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.focus-vs-list li {
  font-size: clamp(0.84rem, 1.4vw, 0.98rem);
  line-height: 1.5;
  color: var(--muted);
  padding-left: 1.05rem;
  position: relative;
}
.focus-vs-list li::before {
  content: "·";
  position: absolute;
  left: 0.3rem;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- v2.0 组件入场节奏（挂在 focus-rise 动画族） ---------- */
.focus-screen.is-active .focus-cell,
.focus-screen.is-active .focus-vs-col { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.focus-screen.is-active .focus-cell:nth-child(1), .focus-screen.is-active .focus-vs-col:nth-child(1) { animation-delay: 0.22s; }
.focus-screen.is-active .focus-cell:nth-child(2), .focus-screen.is-active .focus-vs-col:nth-child(2) { animation-delay: 0.30s; }
.focus-screen.is-active .focus-cell:nth-child(3) { animation-delay: 0.38s; }
.focus-screen.is-active .focus-cell:nth-child(4) { animation-delay: 0.46s; }
.focus-screen.is-active .focus-table { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: 0.26s; }

/* ---------- 窄屏：v2.0 组件退化单列 ---------- */
@media (max-width: 820px) {
  .focus-grid, .focus-grid.cols-3, .focus-vs { grid-template-columns: 1fr; }
  .focus-table td:first-child { white-space: normal; }
}

/* =============================================================
 *  v2.1 扩展 · 课程地图（focus/index.html 枢纽页）：章节大卡
 *  背景：专注模式升格为「全站讲义的极简映射层」，章节化后需要
 *  一张地图页承载 6 章导航。章节卡 = 可点击的目录卡片。
 * ============================================================= */
.focus-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 66rem;
  margin-top: 3vh;
  text-align: left;
}
.focus-chapter {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.focus-chapter:hover { border-color: var(--accent-30); transform: translateY(-3px); }
.focus-chapter-num {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.focus-chapter-title {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.focus-chapter-sub {
  font-size: clamp(0.84rem, 1.4vw, 0.96rem);
  line-height: 1.5;
  color: var(--muted);
}
.focus-chapter-meta {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent2);
  opacity: 0.8;
}

/* ---------- 章节卡入场节奏（挂在 focus-rise 动画族，逐卡错峰） ---------- */
.focus-screen.is-active .focus-chapter { animation: focus-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.focus-screen.is-active .focus-chapter:nth-child(1) { animation-delay: 0.18s; }
.focus-screen.is-active .focus-chapter:nth-child(2) { animation-delay: 0.26s; }
.focus-screen.is-active .focus-chapter:nth-child(3) { animation-delay: 0.34s; }
.focus-screen.is-active .focus-chapter:nth-child(4) { animation-delay: 0.42s; }
.focus-screen.is-active .focus-chapter:nth-child(5) { animation-delay: 0.50s; }
.focus-screen.is-active .focus-chapter:nth-child(6) { animation-delay: 0.58s; }

/* ---------- 窄屏：章节卡退化单列 ---------- */
@media (max-width: 820px) {
  .focus-chapters { grid-template-columns: 1fr; }
}