/* ==========================================================================
   学习路径页 v3 重构
   --------------------------------------------------------------------------
   图像版面实测（分析截图得出）暴露的问题：
     · 内容行占比仅 28.2%，最长连续空白 3502px —— 页面被撑得过长
     · 章节序号 03 用 48px 衬线大字占掉 96px 窄列，视觉上"头重脚轻"
     · 右侧信息栏独占一列且垂直拉满，把主内容压到 55% 宽
     · 任务清单每项被塞进带边框的盒子，四项就占近 400px 高
   做法：序号降级为紧凑徽标、信息栏改为顶部一行横排、任务清单改紧凑列表、
         章节卡连续排列并共用一条时间轴，把页面压到原来的 ~60% 高度。
   ========================================================================== */

/* ---------------------------- 章节时间轴 ---------------------------- */
.path-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: chapter;
}

/* ---------------------------- 章节卡 ---------------------------- */
.path-item {
  position: relative;
  display: block;
  padding: var(--space-8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.path-item--current {
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-lg);
}

/* 当前章节左侧一条品牌紫竖线，替代整卡描边变色（更克制） */
.path-item--current::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-8);
  bottom: var(--space-8);
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}

/* ---------------------------- 卡片头：徽标 + 标题一行 ---------------------------- */
.path-item__index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  padding: 0;
}

/* 序号降级：从 48px 衬线大字改为 12px 等宽徽标 */
.path-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--brand);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
}

.path-item--current .path-item__num { background: var(--brand); }

.path-item__chapter {
  color: var(--ink-faint);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.path-item__title {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--ls-h3);
}

.path-item__goal {
  max-width: 66ch;
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ---------------------------- 小节标题 ---------------------------- */
.path-item h3 {
  margin: var(--space-6) 0 var(--space-3) !important;
  color: var(--ink-faint);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* ---------------------------- 章节目标：紧凑列表 ---------------------------- */
.path-item__tasks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-item__tasks li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.path-item__tasks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------------------------- 核心知识点标签 ---------------------------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-row .badge {
  padding: 3px var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--brand-tint);
  color: var(--brand-press);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

/* ---------------------------- 任务清单：紧凑两列 ---------------------------- */
.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

@media (max-width: 900px) {
  .checklist { grid-template-columns: minmax(0, 1fr); }
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.check:hover { border-color: var(--brand-soft); background: var(--brand-tint); }

.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}

.check > span { display: grid; gap: 2px; min-width: 0; }

.check strong {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.check > span > span {
  color: var(--ink-mute);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* 勾选后整条变淡并加删除线，反馈明确 */
.check:has(input:checked) {
  border-color: var(--color-border-strong);
  background: var(--surface-muted);
}

.check:has(input:checked) strong {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---------------------------- 右侧信息栏 → 顶部横排信息条 ---------------------------- */
.path-item__side {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.path-item__side dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

@media (max-width: 1024px) {
  .path-item__side dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .path-item__side dl { grid-template-columns: minmax(0, 1fr); }
}

.path-item__side dt {
  margin: 0 0 var(--space-2);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.path-item__side dd {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.path-item__side dd a { color: var(--brand); }

/* ---------------------------- 学习进度条 ---------------------------- */
.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-muted);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-out);
}

/* 进度数字用等宽，跳动时不抖 */
#progressText,
.progress-text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--font-features-num);
}

@media (max-width: 760px) {
  .path-item { padding: var(--space-5); }
  .path-item--current::before { top: var(--space-5); bottom: var(--space-5); }
}

/* ---------------------------- 卡片内三段式结构 ---------------------------- */
/* .path-item 是单列块级容器；head / body / side 依次纵向排列。
   之前 HTML 里 h3、ul 等是 grid 直接子元素，掉进 96px 窄列被压成竖条。 */
.path-item__head { display: block; }
.path-item__body { display: block; }
.path-item__side { display: block; }

/* ==========================================================================
   关键修正：grid 子元素错位
   --------------------------------------------------------------------------
   .path-item 是 3 列 grid（96px | 主内容 | 侧栏），但 HTML 里除 index / 主内容 /
   side 三个 div 外，还有若干 h3、ul、div 是 grid 的直接子元素 ——
   它们会被自动放进只有 96px 宽的第一列，把章节目标压成一个汉字一行的竖条。
   这是图像核验才暴露出来的真实缺陷（页面被从 3497px 撑到 6999px）。

   修正：让第 4 个及以后的直接子元素跨满三列。
   ========================================================================== */
.path-item > *:nth-child(n + 4) {
  grid-column: 1 / -1;
}

/* 主内容列本身也要能容纳块级子元素 */
.path-item > div:nth-child(2) > * {
  min-width: 0;
}