/* ============================================================
   /body/zones/ 专用：五条带的尺子。
   ------------------------------------------------------------
   这一页唯一自己画的东西。五行，每行一条从静息到最大的整轨，
   轨上填出这一区占的那一段 —— 五段等宽是这一页的论点，
   所以必须画在同一把尺子上量，不能五行各画各的。

   规则一律写 `>` 直接子代：skin.css 和 depth.css 里已经有
   .row / .note 这类同名 class，后代选择器会互相吃掉。
   ============================================================ */
.bands { display: grid; gap: var(--sp-4); }

.bands > div { display: grid; gap: var(--sp-2); }

.bands > div > .lab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); font-size: var(--step--1); color: var(--muted);
}
.bands > div > .lab > b {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  letter-spacing: .01em;
}
.bands > div > .lab > span { font-variant-numeric: tabular-nums; }
.bands > div > .lab > span > b {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
}

/* 整轨 = 静息到最大。轨本身用 --rule，不用 --faint 以外的浅色描边：
   它是网格线不是字，这里正是 --faint 该待的地方。 */
.bands > div > .trk {
  position: relative; height: 12px;
  border: 1px solid var(--faint); border-radius: var(--radius-s);
  background: var(--sink);
}
.bands > div > .trk > i {
  position: absolute; inset-block: 0; left: var(--l); width: var(--w);
  background: var(--accent-soft);
}
/* 当前这一区里，Zone 2 单独点出来 —— 全页的争议都在它身上 */
.bands > div.hot > .trk > i { background: var(--accent); }
.bands > div.hot > .lab > b { color: var(--accent); }

/* 轨底下那条刻度：只标两端，中间不塞数，390px 上塞不下 */
.bands > .ends {
  display: flex; justify-content: space-between;
  font-size: var(--step--1); color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: calc(var(--sp-2) * -1);
}