/* ==========================================================================
   course.css — 《拆解大模型》课程壳公共件（/study/llm/）
   Layer 3 of 3: MUST load after /css/tokens.css + /css/frame.css.
   覆盖：课程 hub、11 个课页、playground 占位页共用的壳样式。

   约定（与 tokens.css 契约一致）：
   - 只用 tokens.css 的变量，不引入任何新颜色；圆角一律 0。
   - 状态不靠颜色单独表达（配文字 / 边框 / 序号）。
   - 动画遵守 prefers-reduced-motion（tokens.css 已全局硬停，此处仅兜底）。
   ========================================================================== */

/* ==========================================================================
   页面主容器（P3-T1 新增）：hub 与 24 个课页共用的 <main class="course-main">。
   此前无任何布局规则 → 宽屏整条内容贴左、右半屏全空（三期诊断实锤）。
   对齐站点 .container 约定：1140 封顶、水平居中、窄屏留边。
   ========================================================================== */
.course-main {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ---- 共用小件 ------------------------------------------------------------ */
.mono {
  font-family: var(--font-mono);
  line-height: var(--leading-mono);
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-mono);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  white-space: nowrap;
}

.tag--accent {
  color: var(--accent-dim);
  border-color: var(--accent-dim);
}

.tag--soon {
  color: var(--text-dim);
  border-color: var(--border-color);
}

/* ==========================================================================
   生动化公共件（T3 新增，T4/T5 直接复用，勿改类名）
   三件套约定——结构与类名照抄即可：
   1) 类比示意图：
      <figure class="fig">
        <img src="assets/img/analogy-XX-*.jpg" alt="画面本身" width="800" height="500" loading="lazy">
        <figcaption><strong>类比</strong> 图里什么＝课里什么（≤40 字）</figcaption>
      </figure>
   2) 内联 SVG 结构图：
      <figure class="diagram">
        <svg viewBox="…" role="img" aria-label="…">…</svg>
        <figcaption><strong>结构</strong> 数据从哪来到哪去（≤40 字）</figcaption>
      </figure>
      svg 内部配色只用 --text / --accent / --surface-2 / --border-color，
      svg 底透明（纸底透出）；文字字体由 .diagram svg 统一给 var(--font-mono)。
   3) 冷知识 / 容易误解 侧卡：
      <aside class="aside">
        <p class="aside-title">⚠ 容易误解</p>（或 ❄ 冷知识）
        <p>正文…</p>
      </aside>
   ========================================================================== */

/* 类比示意图（AI 生成 jpg，800x500 等比缩放） */
.fig {
  margin: var(--space-4) 0;
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-3);
}

.fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
}

/* 内联 SVG 结构图 */
.diagram {
  margin: var(--space-4) 0;
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-3);
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
}

/* 图注（.fig 与 .diagram 共用） */
.fig figcaption,
.diagram figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-mono);
  color: var(--text-dim);
  padding-top: var(--space-2);
}

.fig figcaption strong,
.diagram figcaption strong {
  color: var(--accent-dim);
  font-weight: 600;
}

/* 冷知识 / 容易误解 侧卡 */
.aside {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
  max-width: 68ch;
}

.aside-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--accent-dim);
  margin-bottom: var(--space-1);
}

.aside p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  margin-bottom: 0;
}

.aside p + p {
  margin-top: var(--space-1);
}

/* 类比钩子开场段（正文最前的 30-60 字生活类比，紧跟 .fig） */
.prose-hook {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   课页 chrome：顶部「← 课程」条
   ========================================================================== */
.lesson-chrome {
  border-bottom: 1px solid var(--border-color);
  background: var(--bg);
}

.lesson-chrome-in {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  flex-wrap: wrap;
}

.lesson-home {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
  text-decoration: none;
}

.lesson-home:hover {
  color: var(--accent-dim);
  text-decoration: underline;
}

.lesson-crumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.lesson-progress {
  margin-left: auto;
  align-self: center;
  width: min(30vw, 180px);
  height: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.lesson-progress-fill {
  display: block;
  height: 100%;
  width: 0; /* course.js 按 data-lesson / data-lesson-total 填充 */
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-out);
}

/* ==========================================================================
   课页头：课题 + 学习目标 + 元信息
   ========================================================================== */
.lesson-hero {
  padding-top: var(--space-12);
}

.lesson-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--accent-dim);
  margin-bottom: var(--space-2);
}

.lesson-title {
  font-family: var(--font-display);
  font-weight: 400 900; /* Archivo Black 单一字重，CJK 落系统重体 */
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.lesson-goals {
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-12);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
  max-width: 68ch;
}

.lesson-goals h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.lesson-goals ol {
  margin-left: 1.25em;
}

.lesson-goals li {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  padding-left: var(--space-1);
  margin-bottom: var(--space-1);
}

.lesson-goals li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   正文排版：列宽 ~68ch、小节编号、mono 标签
   ========================================================================== */
.lesson-prose {
  max-width: 68ch;
  margin-bottom: var(--space-16);
  margin-inline: auto; /* P3-T1：阅读列在 1140 容器内水平居中 */
}

.lesson-sec {
  margin-bottom: var(--space-8);
}

.lesson-sec h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.lesson-sec .sec-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-dim);
  flex: none;
}

.lesson-prose p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.prose-note {
  border-left: 2px solid var(--accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-dim);
  margin: var(--space-4) 0;
}

.prose-note strong {
  color: var(--text);
}

/* 行内代码 / mono 标签 */
.lesson-prose code,
.lab-extra code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  padding: 0.05em 0.35em;
  word-break: break-all;
}

/* ==========================================================================
   交互实验区：挂载点 + 降级 + 权重进度
   ========================================================================== */
.lesson-lab {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-8);
  margin-bottom: var(--space-16);
}

.lab-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.lab-head h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.lab-engine {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.lab-engine.is-ready {
  color: var(--accent-dim);
}

.lab-engine::before {
  content: "● ";
}

.lab-note {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-dim);
  max-width: 68ch;
  margin-bottom: var(--space-4);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
}

/* 权重下载进度（course.js 监听 weights:progress / done / error 驱动） */
.weights-box {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  padding: var(--space-4);
  max-width: 68ch;
  margin-bottom: var(--space-4);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
}

.weights-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.weights-bar {
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
}

.weights-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-out);
}

.weights-box.is-done .weights-fill {
  background: var(--border-strong);
}

.weights-box.is-done .weights-status {
  color: var(--accent-dim);
}

.weights-box.is-error {
  border-color: var(--accent-dim);
}

.weights-box.is-error .weights-status {
  color: var(--accent-dim);
}

/* 组件挂载点 */
.lesson-mount {
  border: 1px solid var(--border-color);
  background: var(--surface);
  min-height: 180px;
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: center;
}

.lesson-mount.is-offline {
  opacity: 0.5;
}

/* 降级容器（noscript / 引擎失败） */
.lab-fallback {
  border: 1px dashed var(--border-strong);
  padding: var(--space-4);
  margin-top: var(--space-4);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
  max-width: 68ch;
}

.lab-fallback p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.lab-fallback-static {
  border: 1px dashed var(--border-strong);
  padding: var(--space-4);
  margin-top: var(--space-4);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
  max-width: 68ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* 代码实验（进阶玩法） */
.lab-extra {
  margin-top: var(--space-6);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
  max-width: 68ch;
}

.lab-extra h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.lab-extra ol {
  margin-left: 1.25em;
}

.lab-extra li {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin-bottom: var(--space-1);
}

/* ==========================================================================
   参考致谢（课内页脚）
   ========================================================================== */
.lesson-colophon {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-6);
  margin-bottom: var(--space-16);
}

.lesson-colophon h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.lesson-colophon ul {
  list-style: none;
  max-width: 68ch;
  margin-bottom: var(--space-4);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
}

.lesson-colophon li {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-dim);
  margin-bottom: var(--space-1);
  padding-left: 1.25em;
  position: relative;
}

.lesson-colophon li::before {
  content: "·";
  position: absolute;
  left: 0.25em;
  color: var(--accent-dim);
}

.lesson-colophon a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lesson-colophon a:hover {
  color: var(--accent-dim);
}

.colophon-local {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  max-width: 68ch;
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
}

/* ==========================================================================
   上一课 / 下一课
   ========================================================================== */
.lesson-pager {
  border-top: 1px solid var(--border-strong);
}

.lesson-pager-in {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
}

.pager-link {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.pager-link:hover {
  border-color: var(--border-strong);
}

.pager-link--next {
  text-align: right;
}

.pager-dir {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.pager-link:hover .pager-dir {
  color: var(--accent-dim);
}

.pager-title {
  font-weight: 600;
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   课程 hub：页题 + 五层地图 + 课卡
   ========================================================================== */
.hub-hero {
  padding-top: var(--space-16);
  margin-bottom: var(--space-section);
}

.hub-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--accent-dim);
  margin-bottom: var(--space-3);
}

.hub-title {
  font-family: var(--font-display);
  font-weight: 400 900;
  font-size: clamp(2.4375rem, 2rem + 2.2vw, 4rem); /* 39 -> 64px */
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.hub-sub {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  max-width: 44ch;
  margin-bottom: var(--space-6);
}

.hub-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.hub-facts li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border: 1px solid var(--border-color);
  padding: 0 var(--space-2);
}

.hub-layer {
  margin-bottom: var(--space-section);
}

.layer-head {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.layer-head h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.layer-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-dim);
}

.soon-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  border: 1px solid var(--border-color);
  padding: 0 var(--space-2);
}

.layer-head > p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-dim);
  max-width: 68ch;
  margin-top: var(--space-2);
  margin-inline: auto; /* P3-T1：窄块在 1140 容器内水平居中 */
}

.card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.course-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.course-card:hover {
  border-color: var(--border-strong);
}

.card-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-dim);
}

.card-name {
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.card-desc {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-dim);
  flex: 1 1 auto;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.card-size {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  /* P3-mob：本类同时用于课页 .lesson-meta 与 hub 卡 .card-meta（均为 flex 容器）。
     min-width:0 允许 flex 项收缩（默认 min-width:auto 会按 max-content 撑爆窄屏画布），
     overflow-wrap:anywhere 让长英文/数字串（如 28.1MB）窄屏可断行；宽屏不受影响。 */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 施工中层的灰态卡（不可点） */
.card-grid--soon {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.soon-card {
  border: 1px dashed var(--border-color);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-dim);
}

.soon-card .card-no {
  color: var(--text-faint);
}

.soon-card .card-name {
  font-weight: 400;
  font-size: var(--text-base);
}

.course-card--soon {
  border-style: dashed;
}

.course-card--soon .card-name,
.course-card--soon .card-desc {
  color: var(--text-dim);
}

/* ==========================================================================
   playground 占位页
   ========================================================================== */
.pg-hero {
  padding-top: var(--space-16);
  margin-bottom: var(--space-16);
}

.pg-title {
  font-family: var(--font-display);
  font-weight: 400 900;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   宽屏版面（P3-T1 新增）：>900px 视口图块放宽到 900px 并居中，窄屏维持现状
   ========================================================================== */
@media (min-width: 901px) {
  .fig,
  .diagram {
    max-width: min(100%, 900px);
    margin-inline: auto;
  }

  /* 正文列（68ch）内的图块出列（breakout）：以列中线为中心放宽到 900px，
   * 负外边距 = (列宽 - 图宽) / 2；图宽 ≤ 100vw - 64px，任何视口不出横向滚动条。
   * hub 页 .hub-hero .fig 的 720px 是页面内样式（0,2,0 特异性），不受此 900px 影响。 */
  .lesson-prose .fig,
  .lesson-prose .diagram {
    width: min(900px, calc(100vw - 64px));
    max-width: none;
    margin-left: calc((100% - min(900px, calc(100vw - 64px))) / 2);
  }
}

/* ==========================================================================
   响应式：平板两列，移动端单列
   ========================================================================== */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid--soon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .card-grid,
  .card-grid--soon {
    grid-template-columns: 1fr; /* 移动端单列 */
  }

  .lesson-progress {
    display: none; /* 顶部窄条让位给课号文字 */
  }

  .lesson-pager-in {
    flex-direction: column;
  }

  .pager-link--next {
    text-align: left;
  }
}

/* ==========================================================================
   reduced-motion 兜底（tokens.css 已全局硬停，这里关掉进度条过渡）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lesson-progress-fill,
  .weights-fill,
  .course-card,
  .pager-link {
    transition: none;
  }
}

/* ==========================================================================
   引导式实操（R4 新增，R5–R7 复用；接入契约见 docs/loop/prompts/GUIDE-CONTRACT.md）
   guide.js 渲染，全 .guide-* 前缀隔离；只用 tokens 变量、圆角 0；
   上方既有规则一律未动。
   ========================================================================== */

/* 系统性根治：部分课 SVG 用了未定义的 var(--ink) → stroke 声明失效、线条隐形。
   在 .diagram 作用域定义 --ink 别名（= 正文墨色）全局生效，逐页不必改。
   （R1 裁定「tokens 无 --ink，墨色即 --text」的落地；以新增规则实现，不动上方原块。） */
.diagram {
  --ink: var(--text);
}

/* 引导卡挂载点（课页 lab 区内） */
.guide-root {
  max-width: 68ch;
  margin: 0 0 var(--space-6);
  margin-inline: auto; /* P3-T1：引导卡居中；下方 .lesson-mount 用满 1140 容器 */
}

.guide-card {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: var(--space-4);
}

.guide-card--done,
.guide-card--skipped {
  border-left-color: var(--border-strong);
}

.guide-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.guide-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--accent-dim);
}

.guide-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.guide-skip,
.guide-restart,
.guide-step-skip {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 0;
  cursor: pointer;
}

.guide-skip:hover,
.guide-restart:hover,
.guide-step-skip:hover {
  color: var(--accent-dim);
  border-bottom-color: var(--accent-dim);
}

.guide-step-skip {
  margin-left: var(--space-3);
}

/* 步骤进度点：空心=未到，实心墨=已完成，实心橙+放大=当前（状态不只靠色相） */
.guide-dots {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
}

.guide-dots li {
  width: 8px;
  height: 8px;
  border: 1px solid var(--border-strong);
  background: transparent;
}

.guide-dots li.is-done {
  background: var(--border-strong);
}

.guide-dots li.is-cur {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}

.guide-text {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  margin-bottom: 0;
}

.guide-text.is-affirm {
  color: var(--accent-dim);
  font-weight: 600;
}

.guide-status-row {
  display: flex;
  align-items: baseline;
  margin-top: var(--space-2);
}

.guide-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-bottom: 0;
}

.guide-done-text,
.guide-skip-msg {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
}

.guide-done-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin: var(--space-2) 0 0;
}

/* 激活步高亮：橙描边 + outline-offset 呼吸；只描边，不锁控件 */
.guide-target {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  animation: guide-breathe 1.8s var(--ease-out) infinite;
}

@keyframes guide-breathe {
  0%, 100% { outline-offset: 3px; }
  50% { outline-offset: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-target {
    animation: none; /* tokens.css 全局硬停之外的兜底 */
  }
}

/* 课页 <html> 带 .rm 类（脚本预检 reduced-motion）时的同效兜底 */
.rm .guide-target {
  animation: none;
}