/* ==========================================================================
   各章节专用样式：首屏、总览、实验台里的小零件、表格、总结页
   页面骨架（顶栏、章节、面板、双栏 / 三栏、通用表格）在 layout.css。
   窄屏覆盖规则的选择器必须和基础规则一样“重”（基础规则是 table.tbl.compact td，
   就要写 table.tbl.<名字> td），否则盖不掉。
   ========================================================================== */

/* ---------- 通用小件 ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.good-text {
  color: var(--good);
}
.nb {
  display: inline-block;
}
ul.tight {
  margin: 6px 0 0;
  padding-left: 1.2em;
}
ul.tight li {
  margin-bottom: 4px;
}
.calc .sub.row-note {
  margin-left: 6px;
}
.calc .term sub {
  margin: 0 2px 0 1px;
}

/* ---------- 首屏 ---------- */
/* 四张数字卡片：手机上沿用 layout.css 里的 2×2，≥521px 排成一行 */
@media (min-width: 521px) {
  .stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 560px;
  }
  .stat {
    min-width: 0;
  }
}
.hero-cap {
  margin: 8px 0 0;
  min-height: 3.4em;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.hero-cap b {
  color: var(--text);
}
.hero-card .btn-row {
  align-items: flex-end;
}
.hero-slider {
  flex: 1 1 180px;
  min-width: 0;
}
.hero-slider .field {
  min-width: 0;
}
/* 两张得分牌：同一个 p，两把尺子各打多少分 */
.duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.duel-cell {
  --dc: var(--brand);
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 8px 12px;
  border-left: 4px solid var(--dc);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}
.duel-cell.tone-loss {
  --dc: var(--loss);
}
.duel-cell.tone-brand {
  --dc: var(--brand);
}
.duel-cell i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.duel-cell b {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.duel-cell span {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- 总览：四张路线卡片 ---------- */
.road-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.road-card {
  --rc: var(--brand);
  --rc-ink: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--rc);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.road-card.tone-fwd {
  --rc: var(--fwd);
}
.road-card.tone-loss {
  --rc: var(--loss);
  --rc-ink: #2d2000;
}
.road-card.tone-upd {
  --rc: var(--upd);
  --rc-ink: #04281d;
}
.road-card.tone-grad {
  --rc: var(--grad);
}
/* 卡片之间的小箭头：表示“后一章要用前一章造出来的工具” */
.road-card:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -17px;
  top: 24px;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.rc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rc-n {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rc);
  color: var(--rc-ink);
  font-size: 14px;
  font-weight: 800;
}
.rc-ic svg {
  width: 24px;
  height: 24px;
  color: var(--rc);
}
.road-card h4 {
  margin: 2px 0 0;
  font-size: 18px;
}
.road-card p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.rc-tex {
  padding: 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  text-align: center;
  font-size: 15px;
  overflow-x: auto;
}
.rc-out {
  font-size: 13px;
  color: var(--muted);
}
.rc-out b {
  color: var(--text);
}
.rc-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--rc) 60%, var(--text));
  text-decoration: none;
}
.rc-link:hover {
  text-decoration: underline;
}
.road-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}
.road-end svg {
  flex: none;
  color: var(--loss);
}
table.symtab td:last-child {
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- 实验台：工具栏里的提示行、滑块组 ---------- */
.lab-note {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.lab-bar .lab-note {
  flex: 1 1 220px;
  align-self: center;
  margin: 0;
  line-height: 1.6;
}
.lab-note svg.icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
/* 一排滑块放进工具栏：每个滑块不再有 150px 的最小宽度，窄屏上才挤得下 */
.lab-sliders {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
}
.lab-sliders .field {
  min-width: 0;
}
.lab-bar > .btn-row {
  align-self: flex-end;
}

/* 实验台里上下相邻的大块之间留出间距 */
.duo + .panel,
.duo + .duo,
.duo + .tri,
.duo + .race-board,
.tri + .panel,
.tri + .duo,
.panel + .duo,
.panel + .panel,
.panel + .race-board,
.lab-bar + .lab-bar,
.table-wrap + .panel,
.table-wrap + .duo {
  margin-top: 18px;
}
/* 双栏、三栏里的卡片已经靠 gap 隔开，上面的规则不能让第二张卡片往下掉 */
.duo > .panel + .panel,
.tri > .panel + .panel {
  margin-top: 0;
}

/* 面板底部的一行读数：把滑块当前对应的数字写成一条等式 */
.readout {
  margin: 10px 0 0;
  padding: 7px 12px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.readout b {
  color: var(--brand-ink);
}

/* 一排数字卡片 */
.lab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.stat-chip {
  --sc: var(--border-strong);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sc);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}
.stat-chip.tone-brand {
  --sc: var(--brand);
}
.stat-chip.tone-loss {
  --sc: var(--loss);
}
.stat-chip.tone-fwd {
  --sc: var(--fwd);
}
.stat-chip.tone-upd,
.stat-chip.tone-good {
  --sc: var(--upd);
}
.stat-chip.tone-grad {
  --sc: var(--grad);
}
.stat-chip.tone-bad {
  --sc: var(--bad);
}
.stat-chip.tone-warn {
  --sc: var(--warn);
}
.stat-chip i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted);
}
.stat-chip b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* 一句话诊断：高度先留够三行，拖滑块时下面的内容不会上下跳 */
.lab-diag {
  display: flex;
  align-items: center;
  min-height: 4.6em;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-size: 14.5px;
  line-height: 1.6;
}
.lab-diag > span {
  min-width: 0;
}
/* 诊断条、图表后面紧跟着一张表时，留出和别处一样的间距，不要贴在一起 */
.lab-diag + .table-wrap,
.chart-wrap + .table-wrap {
  margin-top: 12px;
}
.lab-diag.good {
  border-left-color: var(--good);
  background: var(--good-soft);
}
.lab-diag.warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.lab-diag.bad {
  border-left-color: var(--bad);
  background: var(--bad-soft);
}

/* ---------- 第 ① 章：分布编辑器 ---------- */
.dist-editor {
  display: grid;
  gap: 12px;
}
.de-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.de-sliders .field {
  min-width: 0;
}
.dist-editor.compact {
  gap: 8px;
}
.dist-editor.compact .de-sliders {
  gap: 6px 18px;
}

/* ---------- 第 ③ 章：十次抛硬币的格子 ---------- */
/* 十个格子固定排成 5 × 2，不随面板宽度出现“第 10 个孤零零掉到下一行”；
   单栏的宽屏面板里限制总宽度，格子不会被拉得太宽 */
.flips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-width: 340px;
  margin: 2px 0 10px;
}
.flip {
  --fc: var(--c-pos);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 4px 4px 3px;
  border: 2px solid rgb(var(--fc) / 0.75);
  border-radius: 10px;
  background: rgb(var(--fc) / 0.13);
  line-height: 1.25;
}
.flip.heads {
  --fc: var(--c-neg);
}
.flip b {
  font-size: 15px;
}
.flip i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
}

/* ---------- 第 ④ 章：赛跑记分牌 ---------- */
.race-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.rb-card {
  --rb: var(--brand);
  min-width: 0;
  padding: 12px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--rb);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.rb-card.tone-loss {
  --rb: var(--loss);
}
.rb-card.tone-brand {
  --rb: var(--brand);
}
.rb-card h4 {
  margin-bottom: 6px;
  font-size: 15.5px;
}
.rb-card dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 14px;
  margin: 0;
  font-size: 13.5px;
}
.rb-card dt {
  color: var(--muted);
}
.rb-card dd {
  margin: 0;
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- 表格的小修饰 ---------- */
table.tbl tr.cur td {
  background: var(--brand-soft);
}
table.tbl tr.dim td {
  color: var(--muted);
}
table.audit td.num,
table.tbl td.num {
  white-space: nowrap;
}
table.audit .nb {
  display: inline-block;
}
.audit-sum {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.audit-sum .badge {
  margin-right: 6px;
}
table.recap td {
  vertical-align: middle;
}
.recap-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--rc, var(--brand));
}
table.recap tr.tone-fwd {
  --rc: var(--fwd);
}
table.recap tr.tone-loss {
  --rc: var(--loss);
}
table.recap tr.tone-upd {
  --rc: var(--upd);
}
table.recap tr.tone-grad {
  --rc: var(--grad);
}

/* ---------- 延伸阅读 ---------- */
.reading {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.reading li {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.7fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.reading a {
  color: var(--brand-ink);
  text-decoration: none;
}
.reading a:hover {
  text-decoration: underline;
}
.reading a svg {
  margin-left: 4px;
  vertical-align: -2px;
}
.reading .by {
  font-size: 13px;
  color: var(--muted);
}
.reading .note {
  font-size: 14px;
  color: var(--text-2);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1100px) {
  /* 四张并排每张不到 230px，公式放不下，改成 2×2 */
  .road-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .road-card:nth-child(2)::after {
    display: none;
  }
}
@media (max-width: 900px) {
  .race-board {
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .panel {
    padding: 14px 14px;
  }
  .lab-bar {
    padding: 12px;
    gap: 12px 18px;
  }
  .lab-sliders {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .race-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .road-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 选择器要和上面“→”箭头的规则一样具体，否则盖不掉它，箭头会伸出屏幕 2px，整个页面能横着滑 */
  .road-card:not(:last-child)::after {
    display: none;
  }
  .road-end {
    align-items: flex-start;
    border-radius: var(--radius-sm);
  }
  .reading li {
    grid-template-columns: minmax(0, 1fr);
  }
  .duel-cell b {
    font-size: 21px;
  }
  .hero-cap {
    min-height: 5.1em;
  }
  /* 一页纸回顾 / 配对表：列太多，塞不进手机屏幕，改成每一行一张小卡片，data-label 当小标题 */
  table.tbl.recap,
  table.tbl.recap tbody,
  table.tbl.recap tr,
  table.tbl.recap td,
  table.tbl.pairs,
  table.tbl.pairs tbody,
  table.tbl.pairs tr,
  table.tbl.pairs td {
    display: block;
    width: 100%;
  }
  table.tbl.recap thead,
  table.tbl.pairs thead {
    display: none;
  }
  table.tbl.recap tr,
  table.tbl.pairs tr {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
  }
  table.tbl.recap tbody tr:last-child,
  table.tbl.pairs tbody tr:last-child {
    border-bottom: 0;
  }
  table.tbl.recap td,
  table.tbl.recap tbody tr:last-child td,
  table.tbl.pairs td,
  table.tbl.pairs tbody tr:last-child td {
    padding: 2px 0;
    border: 0;
    white-space: normal;
  }
  table.tbl.recap td.rc-f {
    padding: 6px 0 8px;
    /* 最长的一条公式会比卡片宽几个像素：让它在卡片里自己滚，而不是把整张表撑宽 */
    overflow-x: auto;
    overflow-y: hidden;
  }
  table.tbl.recap td[data-label]::before,
  table.tbl.pairs td[data-label]::before {
    content: attr(data-label) '：';
    margin-right: 2px;
    font-size: 12.5px;
    color: var(--muted);
  }
  /* 回归 vs 分类对照表（3.4）：两列里有公式，手机上横着放不下；同样改成一行一张卡片，
     行标题当卡片标题，“回归 / 分类”两行各带一个小标签 */
  table.tbl.recipe,
  table.tbl.recipe tbody,
  table.tbl.recipe tr,
  table.tbl.recipe th,
  table.tbl.recipe td {
    display: block;
    width: 100%;
  }
  table.tbl.recipe thead {
    display: none;
  }
  table.tbl.recipe tr {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
  }
  table.tbl.recipe tbody tr:last-child {
    border-bottom: 0;
  }
  table.tbl.recipe th,
  table.tbl.recipe td,
  table.tbl.recipe tbody tr:last-child td {
    padding: 2px 0;
    border: 0;
    white-space: normal;
  }
  table.tbl.recipe th {
    margin-bottom: 2px;
    color: var(--text);
  }
  table.tbl.recipe td[data-label]::before {
    content: attr(data-label) '：';
    margin-right: 2px;
    font-size: 12.5px;
    color: var(--muted);
  }
  /* 对账表：数字写成 8 位小数，字号和左右留白收一收，让 4 列尽量一屏放下 */
  table.tbl.audit th,
  table.tbl.audit td {
    padding-left: 5px;
    padding-right: 5px;
  }
  table.tbl.audit td.num {
    font-size: 11.5px;
  }
  table.tbl.audit thead th {
    white-space: normal;
    font-size: 12px;
    line-height: 1.25;
    vertical-align: bottom;
  }
  table.tbl.audit thead th:first-child {
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .de-sliders {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat-chip b {
    font-size: 14px;
  }
}