/* =============================================================================
 * ui/level.css — 关卡外壳样式（章节外壳 Agent 拥有）
 * 只使用 theme.css 的令牌，不硬编码颜色/字号/圆角（红线 R5）。
 * 承载：章节头 / 关卡与阶段导航 / 原文与讲解 / 伪代码 / 可视化控制台 /
 *       证明步骤 / 闯关测验 / 增长曲线。
 * ========================================================================== */

/* ---------- 章节头 ---------- */
.lv-header {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--fg-0);
  margin-bottom: var(--sp-6);
}

/* 编号 + 标题：像教科书的节号，编号是展示衬线，标题是黑体 */
.lv-heading {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
  min-width: 0;
  width: 100%;
}
.lv-heading__no {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.lv-heading__text {
  min-width: 0;
}
@media (max-width: 700px) {
  .lv-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
  .lv-heading__no {
    font-size: var(--fs-3xl);
  }
  .lv-title {
    font-size: var(--fs-xl);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
}

.lv-crumbs {
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.lv-crumbs a {
  color: var(--fg-1);
}

.lv-title {
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lv-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--fg-2);
  margin: var(--sp-1) 0 0;
}

.lv-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- 关卡与阶段导航 ---------- */
.lv-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 960px) {
  .lv-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lv-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-3));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.lv-body > .stack {
  min-width: 0;
}
@media (max-width: 960px) {
  .lv-rail {
    position: static;
  }
}

.rail-group__title {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bd-w) solid var(--bd-0);
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 侧栏 = 进度轨：每条前面一条竖线，完成的染强调色，当前加书签条 */
.rail-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--bd-0);
  color: var(--fg-1);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.rail-item:hover {
  background: var(--bg-2);
  border-left-color: var(--bd-1);
}
.rail-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* 已完成 */
.rail-item.is-done {
  border-left-color: var(--c-ok);
}
.rail-item.is-done .rail-no {
  color: var(--c-ok);
}
/* 进行中 */
.rail-item.is-partial {
  border-left-color: var(--c-warn);
}
/* 当前所在 */
.rail-item[aria-current="true"] {
  background: var(--bg-1);
  border-left-color: var(--accent);
  border-left-width: 3px;
  color: var(--fg-0);
  font-weight: 600;
}
.rail-item[aria-current="true"] .rail-no {
  color: var(--accent);
  font-weight: 700;
}
.rail-item .rail-no {
  flex: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.rail-item .rail-mark {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-ok);
}

/* ---------- 阶段头 ---------- */
.stage-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
/* 阶段号：像书里的节号，不是胶囊徽章 */
.stage-no {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-right: var(--sp-3);
  border-right: var(--bd-w) solid var(--bd-0);
}
.stage-name {
  min-width: 0;
  flex: 1 1 14rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}
.stage-en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
@media (max-width: 560px) {
  .stage-head {
    align-items: flex-start;
  }
  .stage-name {
    flex-basis: 12rem;
  }
}

/* ---------- 页锚点 ---------- */
.pg-ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  border: var(--bd-w) solid var(--bd-0);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-1);
  white-space: nowrap;
}
.pg-ref--preview {
  border-style: dashed;
  border-color: var(--c-warn);
  color: var(--c-warn);
}

/* ---------- 原文 / 讲解 ---------- */
.src-block {
  margin-bottom: var(--sp-5);
}
.src-block__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.src-block__kind {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--fg-2);
}
.src-block__en {
  margin: 0 0 var(--sp-2);
  line-height: 1.75;
}
.src-block__en + .src-block__zh {
  margin-top: var(--sp-2);
}
/* 中文讲解用正文基准字号 + 长文行高（这里曾把讲解压到 15px，是整页最挤的地方） */
.src-block__zh {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-read);
}

.term-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ---------- 伪代码 ---------- */
.pc-clickable {
  cursor: pointer;
}
.pc-clickable:hover {
  background: var(--bg-1);
}
.pc-zh {
  font-size: var(--fs-xs);
  color: var(--fg-1);
  background: var(--bg-1);
  border-left: 2px solid var(--accent);
  padding: var(--sp-1) var(--sp-2);
  /* 与 .pc-line 的代码列（2.5rem）对齐 */
  margin: 0 var(--sp-5) var(--sp-1) calc(2.75rem + var(--sp-3));
  white-space: pre-wrap;
}
.pc-line.is-open {
  background: var(--bg-1);
}
.pc-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}

/* ---------- 关键值表（变量表 / 断言表 / 对照表） ---------- */
.kv {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.kv caption {
  text-align: left;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding-bottom: var(--sp-2);
}
.kv th,
.kv td {
  border-bottom: var(--bd-w) solid var(--bd-0);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-base);
}
.kv th {
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
}

/* 结论一览：左列是「什么时候成立」（中文长句，要能换行），
 * 右列是公式 + 页码出处（右对齐，读起来像参考表的右栏）。
 * 通用 .kv 的 th 是 nowrap（变量名短），这里必须放开，否则长句会把公式挤到折行。 */
.kv--claims th {
  white-space: normal;
  width: 46%;
  font-weight: 500;
}
.kv--claims td {
  text-align: right;
  white-space: normal;
}
.kv td.mono {
  font-family: var(--font-mono);
}
.kv tr:last-child td,
.kv tr:last-child th {
  border-bottom: none;
}

/* ---------- 可视化控制台 ---------- */
.viz-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.viz-stage {
  background: var(--bg-1);
  border: var(--bd-w) solid var(--bd-0);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  min-height: 16rem;
}
.viz-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.viz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.viz-controls .spacer {
  flex: 1 1 auto;
}
.viz-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  white-space: nowrap;
}
.viz-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-1);
}
.viz-note {
  font-size: var(--fs-sm);
  background: var(--c-note);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  min-height: 2.4em;
}
.viz-invariant {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: var(--bd-w) solid var(--bd-0);
  background: var(--bg-2);
}
.viz-invariant[data-ok="1"] {
  border-color: var(--c-ok);
}
.viz-invariant[data-ok="0"] {
  border-color: var(--c-err);
}

.speed-range {
  width: 8rem;
  accent-color: var(--accent);
}

/* ---------- 增长曲线 ---------- */
.growth {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-start;
}
.growth svg {
  border: var(--bd-w) solid var(--bd-0);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}
.growth-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--fg-1);
}
.growth-legend .key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.growth-legend .swatch {
  width: 0.9em;
  height: 0.9em;
  border-radius: 2px;
  display: inline-block;
}
/* 增长曲线图例里的色块是一条线：高度为 0，靠上边框表现实线/虚线 */
.growth-legend .swatch--line {
  width: 1.5em;
  height: 0;
  border-radius: 0;
  align-self: center;
  flex: 0 0 auto;
}
/* 曲线本体在 .growth 里占满剩余宽度，图例靠右 */
.growth > svg {
  flex: 1 1 340px;
  min-width: 0;
}

/* 增长曲线面板的两个滑杆（常数 c / 起点 n₀） */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.chart-control {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--fg-1);
  white-space: nowrap;
}

/* ---------- 证明步骤 ---------- */
.proof-step {
  border: var(--bd-w) solid var(--bd-0);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.proof-step > summary {
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-2);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.proof-step > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.proof-step > .proof-step__body {
  padding: var(--sp-3);
}
.proof-step__en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* ---------- 闯关测验 ---------- */
.drill-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.quiz__opt {
  font-family: var(--font-sans);
  text-align: left;
  width: 100%;
}
.quiz__opt[aria-checked="true"] {
  border-color: var(--accent);
}
.quiz__opt:disabled {
  cursor: default;
  opacity: 0.85;
}
.quiz__opt:disabled:not(.is-correct):not(.is-wrong) {
  opacity: 0.5;
}
.drill-input {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  border: var(--bd-w) solid var(--bd-1);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--fg-0);
  min-width: 12rem;
}
.drill-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.drill-badge {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--fg-2);
}
.drill-exercise {
  border: var(--bd-w) solid var(--bd-0);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--bg-1);
}
.drill-exercise__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.drill-exercise__id {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.drill-exercise__stmt {
  font-family: var(--font-serif);
  margin: 0 0 var(--sp-2);
  line-height: 1.6;
}

/* ---------- 位置感（map） ---------- */
.map-card {
  border: var(--bd-w) solid var(--bd-0);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  background: var(--bg-1);
}
.map-card__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--sp-1);
}
.map-unlocks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
details.kit {
  border: var(--bd-w) dashed var(--bd-1);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-1);
}
details.kit > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ---------- 阶段底部导航 ---------- */
.stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--bd-w) solid var(--bd-0);
}
.stage-foot .spacer {
  flex: 1 1 auto;
}

/* ---------- Strassen 块矩阵 ---------- */
.matrix-viz {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: var(--bd-w) solid var(--bd-0);
  background: var(--bg-1);
  min-width: 0;
  max-width: 100%;
}
.matrix-viz__matrices,
.matrix-viz__ledgers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}
.matrix-viz__matrix { margin: 0; }
.matrix-viz h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.matrix-viz__grid { display: grid; grid-template-columns: repeat(2, minmax(3.5rem, 1fr)); border: var(--bd-w) solid var(--bd-1); }
.matrix-viz__cell { padding: var(--sp-2); border: var(--bd-w) solid var(--bd-0); font-family: var(--font-mono); font-size: var(--fs-sm); text-align: center; }
.matrix-viz__cell[data-active="1"] { background: var(--viz-compare); }
.matrix-viz__operator { color: var(--accent); font-family: var(--font-display); font-size: var(--fs-xl); }
.matrix-viz__formula { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-1); }
.matrix-viz__ledger { flex: 1 1 16rem; min-width: 0; }
.matrix-viz__ledger ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding-left: 1.4em; font-family: var(--font-mono); font-size: var(--fs-xs); }
.matrix-viz__ledger li { padding: var(--sp-1); }
.matrix-viz__ledger li[data-active="1"] { background: var(--viz-active); color: var(--bg-0); font-weight: 700; }
@media (max-width: 560px) {
  .matrix-viz__matrices { gap: var(--sp-2); }
  .matrix-viz__operator { font-size: var(--fs-lg); }
  .matrix-viz__ledger ol { grid-template-columns: minmax(0, 1fr); }
  .matrix-viz__matrices .matrix-viz__matrix {
    flex: 0 0 7rem;
  }
  .matrix-viz__matrices .matrix-viz__matrix:last-child {
    flex-basis: 100%;
  }
  .matrix-viz__grid {
    grid-template-columns: repeat(2, 3.5rem);
    width: max-content;
  }
}

/* ---------- 普通矩阵乘法动画 ---------- */
.matrix-product { display: grid; gap: var(--sp-3); }
.matrix-product__matrices { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.matrix-product__matrix { margin: 0; min-width: 8rem; }
.matrix-product__matrix h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.matrix-product__grid { display: grid; grid-template-columns: repeat(2, minmax(3rem, 1fr)); border: var(--bd-w) solid var(--bd-1); }
.matrix-product__cell { min-height: 2.25rem; padding: var(--sp-2); border: var(--bd-w) solid var(--bd-0); font-family: var(--font-mono); text-align: center; }
.matrix-product__cell[data-active="1"] { background: var(--viz-active); color: var(--bg-0); font-weight: 700; }
.matrix-product__operator { color: var(--accent); font-family: var(--font-display); font-size: var(--fs-xl); }
.matrix-product__formula { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-1); }
.matrix-product__status { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 560px) {
  .matrix-product__matrices { gap: var(--sp-2); }
  .matrix-product__matrix { min-width: 6.5rem; }
  .matrix-product__operator { font-size: var(--fs-lg); }
}

/* 视觉惯例提示：原文块用衬线体，已由 components.css 的 [data-kind] 承担 */
.src-block__en[data-kind="source"],
.map-card[data-kind="note"] {
  /* 保持占位，避免被误当普通段落 */
}