/* ============================================================
   body / lifts.css  —  /body/lifts/ 专用
   ------------------------------------------------------------
   这一页唯一自带的东西是「杠铃片装载图」：片子侧着看是一根竖条，
   高度按重量走，颜色按比赛色标。九档百分比各画一排，一眼看得出
   哪一档只差一片、哪一档装不出来。
   .rig .big .terms .deltas .method 全部复用 depth.css，不重写。
   全部 lift- 前缀。
   ============================================================ */

.lift-load { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

/* depth.css 在 ≤720px 把 .panel .row 压成一列 —— 那是给 calculator 的
   体重/身高两个宽框准备的。这一页两个框各 4ch，压成一列白白吃掉
   一百来个像素高，头条读数正好被挤出手机第一屏。只覆盖这一页的行。 */
.panel .row.lift-set { grid-template-columns: 1fr 1fr; }

/* 单位和杠铃：行内小标签代替 legend，两行按钮共省掉一个图例和一个
   fieldset 间隔。基线对齐，标签跟 legend 一个字号一个颜色。 */
.lift-pair { align-items: center; }
.lift-pair > b {
  font-weight: 400; font-size: var(--step--1); color: var(--faint);
  letter-spacing: .18em; text-transform: uppercase;
  margin-right: var(--sp-1);
}

/* 一行四个读数 + 一整排片子。片子单独占第二行，窄屏才画得开。 */
.lift-row {
  display: grid;
  grid-template-columns: 4.2rem 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);
}
.lift-row:last-child { border-bottom: 1px solid var(--rule); }
/* 用户报的那组落在哪一档 —— 整页唯一一处「你在这」 */
.lift-row[data-here] { background: var(--raise); box-shadow: inset 3px 0 0 var(--accent); }

.lift-pct {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.lift-row[data-here] .lift-pct { color: var(--accent); }
.lift-pct em { font-style: normal; font-size: .58em; color: var(--faint); margin-left: .1em; }

.lift-kg {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.lift-kg em { font-style: normal; font-size: .38em; color: var(--muted); margin-left: .3em; }

.lift-reps {
  justify-self: end; font-size: var(--step--1); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lift-off {
  grid-column: 2 / -1; justify-self: end;
  font-size: var(--step--1); color: var(--faint); font-variant-numeric: tabular-nums;
}

/* ---- 片子 ---------------------------------------------------- */
.lift-stack {
  grid-column: 1 / -1;
  display: flex; align-items: flex-end; gap: 2px;
  min-height: 4.4rem; padding-top: var(--sp-2);
}
/* 杠铃套筒：片子挂在它上面，不写这一条整排片子像是浮着的 */
.lift-sleeve {
  flex: none; width: 1.6rem; height: 10px; align-self: center;
  background: linear-gradient(180deg, var(--faint), var(--rule));
  border-radius: 1px; margin-right: 2px; margin-bottom: 1.1rem;
}
.lift-p { flex: none; display: grid; justify-items: center; gap: 3px; }
.lift-p b {
  display: block; width: 13px; height: calc(var(--_h) * 3.2rem);
  border-radius: 2px; border: 1px solid rgba(0, 0, 0, .45);
}
.lift-p em {
  font-style: normal; font-size: .62rem; line-height: 1;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.lift-p[data-c="red"]    b { background: #d0342c; }
.lift-p[data-c="blue"]   b { background: #1e6fbd; }
.lift-p[data-c="yellow"] b { background: #dcb02c; }
.lift-p[data-c="green"]  b { background: #3f9b52; }
.lift-p[data-c="white"]  b { background: #e4e0d6; }
.lift-p[data-c="chrome"] b { background: linear-gradient(90deg, #6d7377, #b3b9bd, #6d7377); }

.lift-none {
  align-self: center; margin-bottom: 1.1rem;
  font-style: normal; font-size: var(--step--1); color: var(--faint);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---- 六个公式那张表 ------------------------------------------
   depth.css 的 .terms 是两项对齐的 flex；这里每条多一段出处说明，
   所以在 .terms 上加一个本页的类改成两行网格，不动原来那套。 */
.terms.lift-formulas div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-4); align-items: baseline;
  padding: var(--sp-4) 0;
}
.terms.lift-formulas dfn {
  font-style: normal; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0); color: var(--ink);
}
.terms.lift-formulas dfn small {
  font-family: var(--font-body); font-weight: 400; font-size: var(--step--1);
  color: var(--faint); margin-left: .4em; letter-spacing: .08em;
}
.terms.lift-formulas b { font-size: var(--step-1); line-height: 1; }
.terms.lift-formulas b em {
  font-style: normal; font-size: .5em; color: var(--muted); margin-left: .25em;
}
.terms.lift-formulas span { grid-column: 1 / -1; line-height: 1.6; max-width: var(--measure); }

@media (max-width: 560px) {
  .lift-row { grid-template-columns: 3.6rem minmax(0, 1fr) auto; padding: var(--sp-4) var(--sp-2); }
  .lift-kg { font-size: var(--step-1); }
  .lift-p b { width: 11px; height: calc(var(--_h) * 2.6rem); }
  .lift-stack { min-height: 3.8rem; }
  .lift-sleeve { width: 1.1rem; margin-bottom: 1rem; }
}