/* ============================================================
   body / depth.css  —  深度页专用
   ------------------------------------------------------------
   落地页是一屏一件事往下翻；这一页是一台仪表：左边一排旋钮，
   右边一块读数屏，下面一条随手拧就重画的曲线。

   和另外两个深度页刻意长得不一样：
     game/charts  是终端 —— 等宽、零圆角、一百行贴着行，密。
     fortune/bazi 是历书 —— 衬线、居中、大留白。
     这里是仪表 —— 暖炭黑、DIN 压缩体数字、左右分栏、一次只有一条线在动。

   不塞进 skin.css：落地页用不到这些类，塞进去等于让每个落地访客
   白下载一段样式，而落地率是整条漏斗最贵的一段。
   配色和字体全部继承 skin.css，不重定义任何 token。
   ============================================================ */

/* 顶栏：做成仪表上沿的一条铭牌，不是导航条 */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
}
.top a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.top a:hover { color: var(--accent); }
.top .live { color: var(--faint); display: inline-flex; align-items: center; gap: var(--sp-2); }
.top .live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .top .live i { animation: none; } }

.doc {
  max-width: 68rem; margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-7);
}
.head { display: grid; gap: var(--sp-4); justify-items: start; }
.lede { max-width: var(--measure); font-size: var(--step-1); color: var(--muted); }
.block { display: grid; gap: var(--sp-5); }

/* 小标题：一条短横线加一行字，不做成卡片头 */
.block > h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); letter-spacing: .02em;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule);
}

/* ---- 仪表本体：左旋钮，右读数 ------------------------------
   左栏 sticky：曲线在下面很长，拧参数的时候旋钮不能滚没了。 */
.rig { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.panel { position: sticky; top: var(--sp-4); display: grid; gap: var(--sp-5); }
.panel fieldset, .bench fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.panel legend, .bench legend {
  padding: 0; font-size: var(--step--1); color: var(--faint);
  letter-spacing: .18em; text-transform: uppercase;
}
.panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* 三个数字框长一个样：标题在上、框在下。不写的话 Age 那个 label 会跟框并排，
   跟上面两个对不齐。 */
.panel label, .bench label { display: grid; gap: var(--sp-2); }

/* ---- 控制台：横着的一条，不是侧栏 ---------------------------
   /body/calculator/ 已经是「左旋钮右读数」了。这一页三节读同一组输入，
   所以把控制排成机器面板上沿的一条铭牌，四组之间用竖线分隔。

   列宽写死不用 auto-fit：第一格装三个数字框，后三格各装一排 chip，
   四等分的话第一格永远不够宽。断点也就跟着写死 —— 三档比一条
   auto-fit 好调试，出问题能一眼看出是哪一档。 */
.bench {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  width: 100%;
}
.bench fieldset {
  align-content: start;
  padding: var(--sp-4) var(--sp-4);
  border-left: 1px solid var(--rule);
}
.bench fieldset:first-child { border-left: 0; padding-left: 0; }
.bench .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }

/* 这三个框是输入不是读数，--step-2 那个字号该留给答案。
   skin.css 的 .unit 是 width:fit-content + 4ch 的大号框，三个并排要 ~340px；
   这一列给不了那么宽，而 minmax(0,1fr) 既不报错也不折行 ——
   结果是三个框糊在一起、"yr" 被挤到框外面。所以让框跟着列宽走。 */
.bench .unit { width: auto; padding: var(--sp-2); }
.bench .unit input { font-size: var(--step-0); flex: 1 1 0; min-width: 0; width: auto; }

/* 两档折行。620 那档必须排在 980 后面，两条都命中时才是它说了算。 */
@media (max-width: 980px) {
  .bench { grid-template-columns: 1fr 1fr; }
  .bench fieldset { border-left: 1px solid var(--rule); padding-left: var(--sp-4); }
  .bench fieldset:nth-child(odd) { border-left: 0; padding-left: 0; }
  .bench fieldset:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 620px) {
  .bench { grid-template-columns: minmax(0, 1fr); }
  .bench fieldset {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule);
  }
  .bench fieldset:first-child { border-top: 0; }
}

/* 结论段：这一页每一节末尾那段话是论点本身，不是口径说明。
   skin.css 的 .note 是给口径和边界用的（--faint、更小），
   把论点塞进 .note 会让整页最重要的三句话变成脚注。 */
.says {
  max-width: var(--measure); font-size: var(--step-0);
  line-height: 1.7; color: var(--muted);
}
.says b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- 三段条：按真比例，不按「大概」 --------------------------
   负荷色（--accent）在这个站的规矩是「只给在动的量用」，所以它归训练那段。
   整页的笑点就在这里：全站最亮的那个颜色，是这根条上最窄的一条。 */
.split {
  display: flex; width: 100%; height: 4.5rem;
  border: 1px solid var(--rule); background: var(--raise);
}
.split i {
  flex: 0 0 var(--_w); font-style: normal;   /* i 默认斜体 */
  display: grid; place-items: center; overflow: hidden;
  border-left: 1px solid var(--paper);
  transition: flex-basis var(--dur) var(--ease);
}
.split i:first-child { border-left: 0; }
.split i b {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0); font-variant-numeric: tabular-nums;
}
.split .rest { background: var(--sink); }
.split .rest b { color: var(--muted); }
.split .life { background: var(--accent-soft); }
.split .life b { color: var(--accent-ink); }
.split .gym  { background: var(--accent); }
.split .gym  b { color: var(--accent-ink); }

/* 三段的账：色块对上面那根条，数字右边竖着能加下来 */
.ledger { display: grid; gap: 0; }
.ledger div {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
}
.ledger div::before {
  content: ''; width: 12px; height: 12px; align-self: center;
  background: var(--sink); border: 1px solid var(--rule);
}
.ledger .life::before { background: var(--accent-soft); border-color: var(--accent-soft); }
.ledger .gym::before  { background: var(--accent); border-color: var(--accent); }
.ledger dfn { font-style: normal; color: var(--ink); }
.ledger span {
  grid-column: 2; font-size: var(--step--1); color: var(--faint); line-height: 1.5;
}
.ledger b {
  grid-row: 1 / span 2; grid-column: 3; align-self: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ledger b em { font-style: normal; font-size: .4em; color: var(--faint); margin-left: .4em; }

/* ---- 读数屏 ------------------------------------------------
   一个大数打头，下面是它的四项拆解 —— 让人能自己按一遍计算器对上。
   这是这个站的老规矩：屏幕上出现的数，都要能追到它是怎么来的。 */
.read { display: grid; gap: var(--sp-5); }
.big {
  border: 1px solid var(--rule); background: var(--raise);
  padding: var(--sp-5); display: grid; gap: var(--sp-2);
}
/* 同样用 > 限死：.why 那句话里也有 <span>（活动系数的说明），
   写成 .big span 会把那半句话变成大写疏排的标签体。 */
.big > span { font-size: var(--step--1); color: var(--faint); letter-spacing: .18em; text-transform: uppercase; }
/* 用 > 限死在直接子元素：.why 那句话里也有 <b>（基础代谢和系数），
   写成 .big b 会把那两个行内数字一起放大到 5rem，整段话就散了。 */
.big > b {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 2rem + 5vw, 5rem); line-height: .9;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.big > b em { font-style: normal; font-size: .3em; color: var(--muted); letter-spacing: .1em; }
.big .why { font-size: var(--step--1); color: var(--muted); line-height: 1.6; }
.big .why b {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 四项拆解：一行一项，右边对齐的数能竖着加下来 */
.terms { display: grid; gap: 0; }
.terms div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--muted);
}
.terms div:last-child { border-bottom: 0; }
.terms b {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 三个结论数：维持之外的每日差额、蛋白下限、此刻的速度 */
.deltas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.deltas div {
  border-top: 2px solid var(--rule); padding-top: var(--sp-3);
  display: grid; gap: var(--sp-1); align-content: start;
}
.deltas div.hot { border-top-color: var(--accent); }
.deltas b {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.deltas span { font-size: var(--step--1); color: var(--faint); line-height: 1.5; }
@media (max-width: 900px) {
  .rig { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
}

/* ---- 曲线：这一页的论点就在这张图里 ------------------------
   两条线：一条是「差额 ÷ 7700 一路直着走」，一条是每周重算维持热量。
   两条之间那块面积就是直线规则多算出来的斤两。
   用 SVG 不用 canvas：刻度和端点要真文字，能选中、能读屏、能跟着主题变色。 */
.plot { display: grid; gap: var(--sp-4); }
.plot figure { margin: 0; border: 1px solid var(--rule); background: var(--raise); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot .grid line { stroke: var(--rule); stroke-width: 1; }
.plot .axis { fill: var(--faint); font-size: 11px; letter-spacing: .08em; }
.plot .axis.y { text-anchor: end; }
.plot .gapfill { fill: var(--accent); opacity: .1; }
.plot .naive { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plot .real  { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.plot .flat  { stroke: var(--accent-soft); stroke-width: 1; stroke-dasharray: 2 5; }
.plot .end { fill: var(--accent); }
.plot .endlabel { fill: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 13px; }

/* 图例：两行字，各自带一小段和线一模一样的样例，不另配色块 */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--step--1); color: var(--muted); }
.legend div { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend svg { width: 2rem; height: 10px; flex: none; }

/* 落点：这张图真正要说的那句话，单独一格，不淹在正文里 */
.landing {
  border-left: 2px solid var(--accent); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  display: grid; gap: var(--sp-2); max-width: var(--measure);
}
.landing b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--ink); }
.landing span { font-size: var(--step--1); color: var(--muted); line-height: 1.65; }

/* ---- 方法：每个数从哪来。这一页可信度的来源 ------------------ */
.method { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-3); max-width: var(--measure); }
.method li { font-size: var(--step--1); color: var(--muted); line-height: 1.7; }
.method b { color: var(--ink); font-weight: 600; font-family: var(--font-display); }

/* ---- 矩阵：对角线上的数字不变 ------------------------------
   一档职业 0.15、一次训练 0.05，所以横着走三格等于竖着走一格。
   标出来的不是「最大值」也不是「推荐值」，是「和你现在这格相等的格」——
   相等本身就是这一节要说的话，所以它得是唯一被标出来的东西。 */
.mat { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mat th, .mat td {
  padding: var(--sp-3) var(--sp-3); text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.mat thead th {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.mat thead tr:first-child th { border-bottom: 0; padding-bottom: 0; }
.mat thead th:first-child, .mat tbody th { text-align: left; }
.mat tbody th { font-weight: 400; color: var(--muted); }
.mat td {
  font-family: var(--font-display); font-size: var(--step-0); color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* 同一条对角线：沙色 —— 副读数的颜色，说明「这也是你」 */
.mat td.on { background: var(--raise); color: var(--accent-soft); }
/* 你现在这格：负荷色，且用 inset 阴影画框 —— border 会把整列挤宽半像素，
   一张比较用的表格里，列宽跳动比框好不好看重要得多。 */
.mat td.here {
  color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---- 一周七天：柱子几乎一样高，这就是论点 --------------------
   目标线一段一段画在每根柱子自己的槽里，不是在外面盖一条横线 ——
   同一个网格算出来的位置，天然对齐，不会因为换了间距就错位半格。 */
.seven { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.seven .col { display: grid; gap: var(--sp-2); justify-items: center; text-align: center; }
.seven b {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.seven .pit {
  position: relative; width: 100%; height: 9rem;
  display: grid; align-items: end; background: var(--raise);
}
.seven .pit i {
  display: block; height: calc(100% * var(--_h)); background: var(--accent);
  transition: height var(--dur) var(--ease);
}
.seven .off .pit i { background: var(--sink); }
.seven .pit .t {
  position: absolute; left: 0; right: 0; bottom: calc(100% * var(--_t));
  border-top: 1px dashed var(--accent-soft);
}
.seven dfn {
  font-style: normal; font-size: var(--step--1);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.seven small { font-size: var(--step--1); color: var(--faint); line-height: 1.35; }
.seven .off dfn, .seven .off small { color: var(--faint); }

/* ---- 合计：两个总数摆一起，差额单独一行 ---------------------- */
.tally { display: grid; gap: 0; max-width: var(--measure); }
.tally div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
}
.tally dfn { font-style: normal; font-size: var(--step--1); color: var(--muted); }
.tally b {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.tally b em { font-style: normal; font-size: .5em; color: var(--faint); margin-left: .4em; }
.tally .gap b { color: var(--accent-soft); }

@media (max-width: 720px) {
  .doc { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-6); }
  .deltas { grid-template-columns: minmax(0, 1fr); }
  .panel .row { grid-template-columns: 1fr; }
  /* 窄屏上三段条里的百分比会被挤成半个字，宁可不显示 —— 三个数在下面的
     账里都有，条本身的宽度已经把比例说清楚了。 */
  .split { height: 3rem; }
  .split i b { display: none; }
  .seven { gap: 1px; }
  .seven .pit { height: 6.5rem; }
  .seven b { font-size: var(--step--1); }
  .seven small { display: none; }
}