/* ============================================================
   body / pace.css  —  /body/pace/ 专用
   ------------------------------------------------------------
   这一页自带三样东西：三个方法各一种线型（图例和曲线共用同一组
   类，改一处两处一起变）、一张会横向滚的换算表、五档训练配速的
   区间条。.rig .big .terms .deltas .mat .plot .legend .landing
   .method 全部复用 depth.css，不重写。
   全部 pace- 前缀。
   ============================================================ */

/* depth.css 在 ≤720px 把 .panel .row 压成一列 —— 那是给 calculator
   的体重/身高两个宽框准备的。时分秒三个框各 3ch，压成一列会白白
   吃掉两百来像素，头条读数正好被挤出手机第一屏。只覆盖这一行。 */
.panel .row.pace-clock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pace-clock .unit { width: auto; }
.pace-clock .unit input { width: 3ch; }

/* 配速单位：行内小标签代替 legend，省掉一个 fieldset 间隔。 */
.pace-pair { align-items: center; }
.pace-pair > b {
  font-weight: 400; font-size: var(--step--1); color: var(--faint);
  letter-spacing: .18em; text-transform: uppercase;
  margin-right: var(--sp-1);
}

/* 八行五列的表在 390px 上放不下，也不许让整页横着滚 —— 只让表自己滚。
   滚动容器要能被键盘聚焦，否则只能摸屏幕的人看得到右边那两列。 */
.pace-scroll { overflow-x: auto; }
.pace-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mat td.pace-mid { color: var(--ink); }

/* ---- 三种线型。图例里那截样例和曲线用同一组类 ----------------
   只靠颜色区分不行：三条线颜色一深两浅，在手机上挨得很近。
   线型（实、虚、点）在黑白截图里也分得开。 */
.pace-k-riegel  { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.pace-k-cameron { fill: none; stroke: var(--accent-soft); stroke-width: 2; stroke-dasharray: 7 4; }
.pace-k-daniels { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.pace-dot { fill: var(--accent); }
.pace-mark { stroke: var(--rule); stroke-width: 1; }
/* 零线就是中位数 —— 整张图都在量「离它多远」，所以它得比别的横线重 */
.plot .grid line.pace-zero { stroke: var(--faint); }
.pace-you { fill: var(--accent-soft); font-size: 11px; letter-spacing: .08em; }
/* colspan 那格罩着三列，右对齐会贴到 Daniels 头上 */
.pace-scroll .mat thead th[colspan] { text-align: center; }

/* ---- 五档训练配速：一档一条，左边色块表示强度，右边是区间 ---- */
.pace-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pace-zone {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4); align-items: baseline;
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--rule);
}
.pace-zone:last-child { border-bottom: 1px solid var(--rule); }
.pace-zone > dfn {
  font-style: normal; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--accent); line-height: 1;
}
.pace-zone-name { font-size: var(--step-0); color: var(--ink); }
.pace-zone-pct { font-size: var(--step--1); color: var(--faint); letter-spacing: .1em; }
.pace-zone-band {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
  justify-self: end;
}
.pace-zone-what {
  grid-column: 2 / -1; font-size: var(--step--1); color: var(--muted); line-height: 1.6;
}

@media (max-width: 620px) {
  .pace-zone { grid-template-columns: 3rem minmax(0, 1fr); }
  .pace-zone-band { grid-column: 2; justify-self: start; }
  .pace-zone-what { grid-column: 1 / -1; }
}