/* ============================================================
   学习路线页（#roadmap/:examTypeId）
   结构：头部画像 → KPI → 出口判据/说明 → 阶段导航 → 阶段手风琴（专题 → 考点）
   约定：颜色走 tokens，暗色模式（data-theme="dark"）自动可用。
   ============================================================ */

.roadmap-page { max-width: 1080px; margin: 0 auto; padding: 4px 0 48px; }
.rm-loading { padding: 60px 0; text-align: center; color: var(--text-tertiary); }
.rm-empty { padding: 60px 20px; text-align: center; }
.rm-muted { color: var(--text-tertiary); }
.rm-warn { color: var(--warning); font-weight: 600; }

/* ── 头部 ───────────────────────────────────────────────── */
.rm-back {
  display: inline-block; font-size: 0.78rem; color: var(--text-tertiary);
  text-decoration: none; margin-bottom: 10px;
}
.rm-back:hover { color: var(--brand); }
.rm-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rm-title-row h1 { margin: 0; font-size: 1.5rem; line-height: 1.35; }
.rm-updated { font-size: 0.72rem; color: var(--text-muted); }
.rm-ability {
  margin: 10px 0 0; font-size: 0.88rem; line-height: 1.85;
  color: var(--text-secondary); max-width: 76ch;
}
.rm-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rm-badge {
  font-size: 0.74rem; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
}

/* ── KPI ────────────────────────────────────────────────── */
.rm-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 18px 0;
}
.rm-kpi {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.rm-kpi b { font-size: 1.35rem; font-weight: 800; color: var(--brand); line-height: 1.2; }
.rm-kpi span { font-size: 0.76rem; color: var(--text-secondary); }
.rm-kpi i { font-size: 0.7rem; color: var(--text-muted); font-style: normal; }

/* ── 出口判据 / 说明 ─────────────────────────────────────── */
.rm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.rm-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
}
.rm-card h3 { margin: 0 0 10px; font-size: 0.92rem; font-weight: 700; }
.rm-exit { list-style: none; margin: 0; padding: 0; }
.rm-exit li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.82rem; line-height: 1.75; color: var(--text-secondary);
  padding: 4px 0;
}
.rm-tick { color: var(--success); font-weight: 700; flex: 0 0 auto; }
.rm-note { margin: 0 0 8px; font-size: 0.8rem; line-height: 1.8; color: var(--text-secondary); }
.rm-note b { color: var(--text); }
.rm-next { margin-top: 10px; font-size: 0.8rem; color: var(--text-secondary); }
.rm-next-link { color: var(--brand); font-weight: 600; text-decoration: none; }
.rm-next-link:hover { text-decoration: underline; }
.rm-next-dead { color: var(--text-muted); }
.rm-bridge {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--success-50); font-size: 0.78rem; line-height: 1.75; color: var(--text);
}

/* ── 阶段导航 ───────────────────────────────────────────── */
.rm-stages-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 12px; padding: 8px; border-radius: var(--r-md);
  background: var(--bg-alt);
}
.rm-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: 0.8rem; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
}
.rm-nav-btn:hover { background: var(--card); border-color: var(--border); }
.rm-nav-btn.is-on {
  background: var(--card); border-color: var(--brand-100);
  color: var(--brand); font-weight: 600;
}
.rm-nav-icon { font-size: 0.8rem; opacity: .85; }
.rm-nav-n {
  font-size: 0.68rem; padding: 0 5px; border-radius: 5px;
  background: var(--bg-alt); color: var(--text-tertiary);
}
.rm-nav-btn.is-on .rm-nav-n { background: var(--brand-50); color: var(--brand); }

/* ── 阶段卡片 ───────────────────────────────────────────── */
.rm-stage {
  /* 点击阶段导航会 scrollIntoView，顶部有 sticky header，留出避让距离 */
  scroll-margin-top: 76px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden;
}
.rm-stage[open] { border-color: var(--brand-100); }
.rm-stage--k[open] { border-color: var(--warning-50); }
.rm-stage-sum {
  list-style: none; cursor: pointer;
  padding: 13px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rm-stage-sum::-webkit-details-marker { display: none; }
.rm-stage-sum::after { content: "▾"; color: var(--text-muted); font-size: 0.72rem; margin-left: auto; }
.rm-stage[open] .rm-stage-sum::after { content: "▴"; }
.rm-stage-icon {
  flex: 0 0 24px; height: 24px; border-radius: 8px;
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
}
.rm-stage--k .rm-stage-icon { background: var(--warning-50); color: var(--warning); }
.rm-stage-name { font-size: 0.94rem; font-weight: 700; color: var(--text); }
.rm-stage-motto { font-size: 0.78rem; color: var(--text-tertiary); }
.rm-stage-tag {
  font-size: 0.67rem; padding: 1px 7px; border-radius: 5px;
  background: var(--warning-50); color: var(--warning-text, var(--warning)); font-weight: 600;
}
.rm-stage-meta { font-size: 0.74rem; color: var(--text-tertiary); margin-left: auto; margin-right: 8px; }

.rm-stage-body { padding: 0 16px 14px; border-top: 1px solid var(--border-light); }
.rm-stage-desc {
  margin: 12px 0 6px; font-size: 0.82rem; line-height: 1.85;
  color: var(--text-secondary); max-width: 78ch;
}
.rm-stage-exit {
  margin: 0 0 12px; font-size: 0.76rem; line-height: 1.7; color: var(--text-tertiary);
  padding-left: 10px; border-left: 2px solid var(--brand-100);
}

/* ── 专题 ───────────────────────────────────────────────── */
.rm-domain { margin-top: 14px; }
.rm-domain-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--border-light);
}
.rm-domain-name { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.rm-domain-meta { font-size: 0.72rem; color: var(--text-tertiary); margin-left: auto; }

/* ── 考点行 ─────────────────────────────────────────────── */
.rm-kps { display: flex; flex-direction: column; }
.rm-kp {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 2px; border-bottom: 1px solid var(--border-light);
  font-size: 0.82rem;
}
.rm-kp:last-child { border-bottom: 0; }
.rm-kp-name { color: var(--text); flex: 1 1 220px; min-width: 0; }
.rm-lvl {
  font-size: 0.66rem; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  background: var(--bg-alt); color: var(--text-tertiary);
}
.rm-lvl--3 { background: #fee2e2; color: #b91c1c; }
.rm-lvl--2 { background: var(--brand-50); color: var(--brand); }
.rm-hit {
  font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; background: var(--bg-alt);
}
.rm-hit--none { color: var(--text-muted); }
.rm-kp-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.rm-act {
  font-size: 0.72rem; padding: 3px 9px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text-secondary);
  text-decoration: none; white-space: nowrap; background: var(--card);
}
.rm-act:hover { border-color: var(--brand); color: var(--brand); }
.rm-act--learn { border-color: var(--brand-100); color: var(--brand); font-weight: 600; }
.rm-act--learn:hover { background: var(--brand-50); }
.rm-act--ghost { border-style: dashed; font-weight: 400; color: var(--text-tertiary); }
.rm-act--none { color: var(--text-muted); border-style: dashed; }

.rm-source {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-light);
  font-size: 0.72rem; line-height: 1.8; color: var(--text-tertiary);
}
.rm-source a { color: var(--brand); }

/* ── 手机端 ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rm-title-row h1 { font-size: 1.24rem; }
  .rm-kpis { grid-template-columns: repeat(2, 1fr); }
  .rm-grid2 { grid-template-columns: 1fr; }
  .rm-stages-nav { overflow-x: auto; flex-wrap: nowrap; padding: 7px; }
  .rm-stage-sum { padding: 11px 12px; gap: 7px; }
  .rm-stage-meta { margin-left: 0; width: 100%; margin-right: 0; }
  .rm-stage-body { padding: 0 12px 12px; }
  .rm-kp { gap: 6px; padding: 8px 0; }
  .rm-kp-name { flex: 1 1 100%; }
  .rm-kp-acts { margin-left: auto; }
  .rm-act { padding: 4px 10px; }
}

/* 「学到哪算完」：删掉「怎么排的」说明卡后改为整宽，判据横排避免右侧大片留白 */
.rm-card--exit .rm-exit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 20px;
  margin-bottom: 4px;
}
.rm-card--exit .rm-next { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-light); }
.rm-card--exit .rm-bridge { margin-top: 8px; }
@media (max-width: 767px) {
  .rm-card--exit .rm-exit { grid-template-columns: 1fr; }
}

/* ============================================================
   我的进度（个性化投影）
   只展示结论：已掌握 / 还差多少 / 能学几个 / 前置缺口
   ============================================================ */
.rm-progress {
  margin: 14px 0 2px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
}
.rm-progress--guest {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-alt); border-color: var(--border);
}
.rm-progress--guest .rm-prow--sub { margin: 0; }
.rm-progress__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rm-pk { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); margin-right: 6px; }
.rm-progress__big { font-size: 1.25rem; font-weight: 800; color: var(--brand); line-height: 1.2; }
.rm-progress__pct { font-size: 0.76rem; color: var(--text-tertiary); }

.rm-pbar {
  height: 7px; border-radius: var(--r-pill); background: var(--card);
  overflow: hidden; margin: 8px 0 10px;
}
.rm-pbar > i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width .3s ease; }

.rm-prow {
  font-size: 0.8rem; line-height: 1.8; color: var(--text);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
.rm-prow b { color: var(--brand); font-weight: 700; }
.rm-prow--sub { font-size: 0.76rem; color: var(--text-secondary); padding-left: 0; }
.rm-prow--lock { font-size: 0.76rem; color: var(--text-tertiary); margin-top: 4px; }
.rm-prow--lock a { color: var(--brand); }

.rm-gap {
  font-size: 0.72rem; padding: 1px 7px; border-radius: 5px;
  background: var(--warning-50, #fff7ed); color: var(--warning-text, #b45309);
  white-space: nowrap;
}

/* 考点行上的个人状态 */
.rm-order {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: var(--brand); color: #fff;
  font-size: 0.66rem; font-weight: 700;
  display: inline-grid; place-items: center;
}
.rm-state {
  flex: 0 0 auto; font-size: 0.66rem; padding: 1px 6px; border-radius: 4px;
  white-space: nowrap;
}
.rm-state--done { background: var(--bg-alt); color: var(--text-tertiary); }
.rm-state--weak { background: var(--warning-50, #fff7ed); color: var(--warning-text, #b45309); }
.rm-state--gap { background: var(--brand-50); color: var(--brand); border: 1px dashed var(--brand-100); }
.rm-kp--done .rm-kp-name { color: var(--text-tertiary); }

@media (max-width: 767px) {
  .rm-progress { padding: 12px; }
  .rm-progress__big { font-size: 1.1rem; }
}

/* ============================================================
   路线图（三视图：全景 / 我的进度 / 我的路线）
   复用 learn-mindmap 的 D3 折叠树，这里只管容器与切换按钮
   ============================================================ */
.rm-map-fold {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.rm-map-fold > summary {
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.rm-map-fold > summary::-webkit-details-marker { display: none; }
.rm-map-fold > summary::after { content: "▾"; color: var(--text-muted); font-size: 0.72rem; margin-left: auto; }
.rm-map-fold[open] > summary { border-bottom: 1px solid var(--border-light); }
.rm-map-fold .fold-hint { font-size: 0.74rem; font-weight: 400; color: var(--text-tertiary); }
#rm-map-host { padding: 12px 14px 14px; }

.rm-map-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.rm-map-tab {
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg);
  font-family: inherit; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer;
}
.rm-map-tab:hover { border-color: var(--brand-100); }
.rm-map-tab.is-on {
  background: var(--brand-50); border-color: var(--brand-100);
  color: var(--brand); font-weight: 600;
}

.rm-map-canvas {
  width: 100%; height: 470px;
  border: 1px solid var(--border-light); border-radius: var(--r-sm);
  background: #ffffff; overflow: hidden;
}
.rm-map-legend {
  margin-top: 9px; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--text-tertiary);
}
.rm-lg {
  display: inline-block; width: 12px; height: 12px; border-radius: 4px;
  border: 1px solid; margin-right: 5px; vertical-align: -2px;
}
.rm-lg--dash { border-style: dashed; }
.rm-lg-hint { color: var(--text-muted); }

@media (max-width: 767px) {
  .rm-map-canvas { height: 360px; }
  .rm-map-legend { gap: 10px; font-size: 0.68rem; }
}