/* ============================================================
   body / calculator.css  —  /body/calculator/ 专用
   ------------------------------------------------------------
   这一页原来一张自己的表都没有，三个新版块全靠 body/depth.css。
   只写 depth.css 里没有的东西：
   ① 逐周账本（一行四格：周次 + 三个带单位的数）
   ② 衰减链条（.terms 的行是左右对开的，这里要上下堆叠才读得成链条）
   ③ 三套公式（标签占满一整行，底下并排两个数）
   ②③ 挂在 .terms 上，一律用 .terms.calc-xxx 两个类限定 ——
   body 站六个深度页共用 .terms，改裸类会连坐；只靠 <link> 顺序
   取胜的写法哪天有人调换顺序就会静默失效。
   ============================================================ */

/* ---- 逐周账本 ------------------------------------------------
   三个数各自带着单位走，不做表头 —— 表头那一行离得越远越对不上号，
   窄屏上尤其。单位压在数字底下，跟 quiz/reaction 那张表同一个办法。 */
.calc-ledger { display: grid; gap: 0; border-top: 2px solid var(--rule); }
.calc-ledger > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
}
.calc-ledger dfn {
  font-style: normal; font-size: var(--step--1);
  color: var(--muted); letter-spacing: .04em;
}
.calc-ledger b {
  display: grid; justify-items: end; gap: 1px; min-width: 3.4rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0); line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.calc-ledger b em {
  font-style: normal; font-weight: 400; font-size: .58em;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
}

/* ---- 衰减链条 ------------------------------------------------
   .terms 原来是 flex 左右对开，可这里右边那半是「10 × 1.35 = 13.5
   kcal a day」这种整句算式，390px 上跟左边的标签挤不下。改成上下堆叠，
   而且堆叠本身就对：这五行是一条链，每一行用上一行的结果，竖着读。 */
.terms.calc-decay div {
  display: grid; gap: var(--sp-1); padding: var(--sp-3) 0;
}
.terms.calc-decay dfn {
  font-style: normal; font-size: var(--step--1);
  color: var(--muted); letter-spacing: .04em;
}
.terms.calc-decay b {
  font-size: var(--step-0); line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
/* 最后一行是这一节的答案，不是链条的一环 */
.terms.calc-decay .out { border-top: 2px solid var(--rule); }
.terms.calc-decay .out b { font-size: var(--step-1); color: var(--accent); }

/* ---- 三套公式 ------------------------------------------------
   标签这一格装的是公式名 + 年份 + 代进你那组数的那一行算式，一行放不下，
   所以它独占整行，两个数并排排在它下面。两个数都靠左，不靠右 ——
   靠右的话三行之间的列位置会随标签长度漂，读不出这是一张表。
   列宽靠 min-width 对齐（每个 div 是各自独立的网格，auto 不跨行对齐）。 */
.terms.calc-formulas div {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
}
.terms.calc-formulas dfn {
  grid-column: 1 / -1; font-style: normal;
  font-size: var(--step-0); color: var(--ink); line-height: 1.35;
}
.terms.calc-formulas dfn small { font-size: .78em; font-weight: 400; color: var(--muted); }
/* 代数那一行整句是要给人按计算器的，属于正文密度，不能压到 --faint */
.terms.calc-formulas dfn small.sum {
  display: block; margin-top: var(--sp-1);
  font-size: var(--step--1); line-height: 1.55;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.terms.calc-formulas b {
  display: grid; justify-items: start; gap: 1px; min-width: 4.4rem;
  font-size: var(--step-1); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.terms.calc-formulas b em {
  font-style: normal; font-weight: 400; font-size: .5em;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
}
/* 这一页自己用的那套。颜色之外还在名字后面写了字，不让颜色单独扛信息 */
.terms.calc-formulas .on b { color: var(--accent); }

@media (max-width: 560px) {
  .calc-ledger > div { gap: var(--sp-2); }
  .calc-ledger b { min-width: 3rem; font-size: var(--step--1); }
  .terms.calc-formulas b { min-width: 4rem; font-size: var(--step-0); }
  .terms.calc-formulas div { gap: var(--sp-2) var(--sp-3); }
}