/* ==========================================================================
   topic-formulas.css — 平衡与滴定公式专题（不参与章节编号）
   Loaded only by topic-formulas.html. Everything else is inherited from
   style.css / content.css / lesson.css / course-extra.css.
   ========================================================================== */

/* ---- ◆.0 使用说明里的分区表：首列用主题色 ---- */
#howto .table-scroll td:first-child{white-space:nowrap;color:var(--accent)}

/* ---- ◆.9 四栏公式卡表 ----
   用固定表格布局按百分比分栏。自动布局会把「式子」这一列压到最窄
   （窄视口下甚至只剩一两个字符宽），固定布局则保证四列比例稳定。 */
.table-scroll.formula-card-table{overflow-x:auto}
.table-scroll.formula-card-table table{
  table-layout:fixed;
  width:100%;
  min-width:880px;
}
.table-scroll.formula-card-table th:nth-child(1),
.table-scroll.formula-card-table td:nth-child(1){width:28%}
.table-scroll.formula-card-table th:nth-child(2),
.table-scroll.formula-card-table td:nth-child(2){width:20%}
.table-scroll.formula-card-table th:nth-child(3),
.table-scroll.formula-card-table td:nth-child(3){width:22%}
.table-scroll.formula-card-table th:nth-child(4),
.table-scroll.formula-card-table td:nth-child(4){width:30%}
.table-scroll.formula-card-table td:first-child{
  color:var(--accent-soft);
  font-family:Georgia,"Times New Roman","Noto Serif SC",serif;
  font-size:13.5px;
  line-height:1.85;
  white-space:normal;
  word-break:break-word;
}
.table-scroll.formula-card-table td:nth-child(n+2){line-height:1.7}

/* ---- 窄列修正：自动布局会把首列压到 2~3 个字一行 ----
   实测（1440px 视口、正文栏 936px）有四个表出现了「1~2 字一行」的窄列：
   ◆.2 六类 pH 主公式（首列 77px）、◆.5 半反应电位表（n 列 53px）、
   ◆.6 四类滴定区段表（首列 64px）、◆.8 指示剂选择表（首列 71px）。
   下面给这几个表固定列宽比例，首列一律留足 3~4 个汉字的位置。
   列宽用百分比 + table-layout:fixed，所以任何时候都正好占满正文栏、不横向溢出。 */
.table-scroll.t-acidbase table,
.table-scroll.t-redox table,
.table-scroll.t-curves table,
.table-scroll.t-indicator table{
  table-layout:fixed;
  width:100%;
}
.table-scroll.t-acidbase th:nth-child(1),.table-scroll.t-acidbase td:nth-child(1){width:19%}
.table-scroll.t-acidbase th:nth-child(2),.table-scroll.t-acidbase td:nth-child(2){width:19%}
.table-scroll.t-acidbase th:nth-child(3),.table-scroll.t-acidbase td:nth-child(3){width:26%}
.table-scroll.t-acidbase th:nth-child(4),.table-scroll.t-acidbase td:nth-child(4){width:36%}

.table-scroll.t-redox th:nth-child(1),.table-scroll.t-redox td:nth-child(1){width:41%}
.table-scroll.t-redox th:nth-child(2),.table-scroll.t-redox td:nth-child(2){width:11%}
.table-scroll.t-redox th:nth-child(3),.table-scroll.t-redox td:nth-child(3){width:10%}
.table-scroll.t-redox th:nth-child(4),.table-scroll.t-redox td:nth-child(4){width:38%}

.table-scroll.t-curves th:nth-child(1),.table-scroll.t-curves td:nth-child(1){width:13%}
.table-scroll.t-curves th:nth-child(2),.table-scroll.t-curves td:nth-child(2){width:14%}
.table-scroll.t-curves th:nth-child(3),.table-scroll.t-curves td:nth-child(3){width:19%}
.table-scroll.t-curves th:nth-child(4),.table-scroll.t-curves td:nth-child(4){width:17%}
.table-scroll.t-curves th:nth-child(5),.table-scroll.t-curves td:nth-child(5){width:17%}
.table-scroll.t-curves th:nth-child(6),.table-scroll.t-curves td:nth-child(6){width:20%}

.table-scroll.t-indicator th:nth-child(1),.table-scroll.t-indicator td:nth-child(1){width:13%}
.table-scroll.t-indicator th:nth-child(2),.table-scroll.t-indicator td:nth-child(2){width:22%}
.table-scroll.t-indicator th:nth-child(3),.table-scroll.t-indicator td:nth-child(3){width:17%}
.table-scroll.t-indicator th:nth-child(4),.table-scroll.t-indicator td:nth-child(4){width:22%}
.table-scroll.t-indicator th:nth-child(5),.table-scroll.t-indicator td:nth-child(5){width:26%}

/* ---- 公式卡：含义 / 各量 / 什么时候用 / 怎么算 四栏 ---- */
.formula-card{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:2px 14px;
  margin:16px 0;
  padding:16px 20px 16px 16px;
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:0 12px 12px 0;
  background:linear-gradient(145deg,rgba(13,28,45,.94),rgba(9,23,38,.88));
}
.formula-card>span{
  grid-row:1 / span 4;
  color:var(--accent);
  font:15px/1.5 ui-monospace,'DM Mono',monospace;
  opacity:.85;
}
.formula-card>b{
  color:var(--text);
  font-size:14px;
  letter-spacing:-.01em;
}
.formula-body{
  margin:6px 0 8px;
  padding:10px 14px;
  border-radius:8px;
  background:color-mix(in srgb,var(--surface-2) 80%,var(--accent) 20%);
  font:16px Georgia,'Times New Roman','Noto Serif SC',serif;
  overflow-x:auto;
}
.formula-card p{margin:5px 0;color:var(--muted);font-size:13px;line-height:1.62}
.formula-card p b{color:var(--accent-soft);font-weight:600}
.formula-card .formula-count,
.formula-card .formula-when{
  padding-left:11px;
  border-left:2px solid var(--line);
}
.formula-card .formula-when{border-left-color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* ---- 公式块下的补充说明（eq(..., note=...) 产生的段落） ---- */
.equation-note{
  max-width:930px;
  margin:-4px 0 20px;
  padding-left:15px;
  border-left:2px solid var(--line);
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

/* ---- 例题编号占位：给标题让出左侧的「例n」徽标 ---- */
.worked-example{position:relative}
.worked-example>h3{padding-left:44px}

/* ---- 章节快速导航里的专题交叉链接 ---- */
.chapter-jump a.jump-topic{
  margin-left:auto;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--accent);
}
.chapter-jump a.jump-topic:hover{background:var(--accent);color:#0d1c2d}

/* ---- 首页的专题卡：用符号徽标替代两位数编号 ---- */
.chapter-card.topic-card{border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.chapter-card.topic-card .chapter-no{
  border-color:var(--accent);
  color:var(--accent);
  font-family:'Space Grotesk',sans-serif;
}

@media(max-width:820px){
  .formula-card{grid-template-columns:26px minmax(0,1fr);padding:14px}
  .formula-body{font-size:15px}
  .worked-example>h3{padding-left:38px}
  .chapter-jump a.jump-topic{margin-left:0}
}