/* ============================================================
   charts.css  —  /game/charts/ 那张一百行表底下的三节
   ------------------------------------------------------------
   只有这一页加载。类名一律 .cha- 前缀：/game/depth.css 是五个页面
   （charts / free / genres / rank / sens）共用的，往那张表里加一条
   会连坐另外四个。

   皮肤照 game 站的规矩：等宽正文、琥珀色读数、边框不投影。
   --faint 只画线不写字（depth.css:27 那条，它对底色不到 4.5:1）。
   手机优先，390px 上先排对，宽屏再放宽轨道。
   ============================================================ */

/* ---- 计数表 ------------------------------------------------
   二三两列写死 ch 宽，不写 auto。等宽正文里 1ch 就是一个字符宽，
   9ch 正好装得下「3,945,157」；写 auto 的话每一行各算各的列宽，
   行跟行之间对不上（quiz/reaction 那次栽的就是这个）。
   列宽定死之后每一行可以各自开一个网格，底线直接画在行上 ——
   不用把行摊平，也就没有「底线齐」和「基线齐」二选一的问题
   （birth.css 那一页就是被这个逼去写 subgrid 的）。 */
.cha-tally { display: grid; }

.cha-tally > div {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) 9ch 8ch;
  column-gap: var(--sp-3); row-gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
/* 字号只给表头这一行的内容，不给行本身。ch 是按元素自己的字号算的 ——
   行上一改字号，9ch/8ch 两条轨道就比正文行窄（实测差 9px），表头正好压不住
   它标的那一列。写死 ch 换来的跨行对齐，会被这一行自己的 font-size 破掉。
   字距只给左边那格：字距会在最后一个字母后面也留一份，右对齐的格子加了字距，
   字就比下面的数字缩进去 2px，得拿负 margin 掰回来 —— 而负 margin 又把盒子
   撑出轨道，对不对齐就没法量了。右边两格不加字距，盒子和字一起对齐。 */
.cha-tally > div.hd { padding-top: 0; color: var(--muted); }
.cha-tally > div.hd > * { font-size: var(--step--1); text-transform: uppercase; }
.cha-tally > div.hd > dfn { letter-spacing: .16em; }
.cha-tally > div:last-child { border-bottom: 0; }

.cha-tally dfn {
  font-style: normal; display: grid; gap: var(--sp-1);
  align-content: start; overflow-wrap: anywhere;
}
.cha-tally dfn small { font-size: var(--step--1); color: var(--muted); }

/* 数字不放大，改上色。放大就得把 ch 轨道跟着放宽，而且一行里两个字号
   会把基线对齐搅乱 —— 上面那张一百行表也是同字号加琥珀。 */
.cha-tally b {
  font-weight: 400; text-align: right; white-space: nowrap;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cha-tally em {
  font-style: normal; text-align: right; white-space: nowrap;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.cha-tally .hd b, .cha-tally .hd em { color: var(--muted); }

/* 横条：宽度就是这一行自己的百分比，没有任何缩放，所以不用配图例。
   缩放过的条必须配一句话才看得懂，而那句话会被当成数据读。 */
.cha-tally i {
  grid-column: 1 / -1; display: block;
  height: 4px; background: var(--sink);
}
.cha-tally i span {
  display: block; height: 100%;
  width: var(--_w); background: var(--accent-soft);
}

/* ---- 两头的例子 --------------------------------------------
   有序列表，序号是真的信息：按分歧从大到小排。
   一行三个数并排 —— 名次差是结论，of peak 是上一张表给的解释，
   两个都摆出来读者才能自己对一遍，而不是只能信。 */
.cha-pair { display: grid; gap: var(--sp-5); }

.cha-exhd {
  margin: 0 0 var(--sp-2); font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.cha-ex ol { margin: 0; padding: 0 0 0 2.2em; display: grid; counter-reset: ex; }
.cha-ex li {
  position: relative; counter-increment: ex;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-3); padding: var(--sp-3) 0;
  border-top: 1px solid var(--rule);
}
/* li 一设 display:grid 就不再是 list-item，::marker 整个不渲染 —— 不是颜色
   太浅，是根本没画（先按 --faint 太淡改成 --muted，序号照样不见，才查到这里）。
   所以序号自己用计数器画，绝对定位摆进 ol 的左缩进里：绝对定位的子元素不算
   网格项，不会挤掉下面两列的排布。
   序号是真的信息 —— 这两串按分歧从大到小排，不是随便列三个。 */
.cha-ex li::before {
  content: counter(ex) ".";
  position: absolute; left: -2.2em; top: var(--sp-3);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
/* 游戏名自己占一整行：不占的话「Warhammer 40,000: Space Marine 2」
   会把右边那格挤成一个字一行。 */
.cha-ex li b { grid-column: 1 / -1; font-weight: 400; color: var(--ink); }
.cha-ex li span {
  font-size: var(--step--1); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cha-ex li em {
  font-style: normal; text-align: right; white-space: nowrap;
  font-size: var(--step--1); color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- 表底下那段话 ------------------------------------------
   讲这张表说明了什么、以及说明不了什么。摆在表后面不是摆前面：
   它是从数字里读出来的结论，不是读数字要先看的图例。 */
.cha-note {
  margin: 0; max-width: var(--measure);
  font-size: var(--step--1); line-height: 1.7; color: var(--muted);
}
.cha-note b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (min-width: 620px) {
  /* 宽屏不让表摊满：9ch 的数字列飘到一千多像素外，左右两头得来回看。 */
  .cha-tally { max-width: 46rem; }
  .cha-tally > div { grid-template-columns: minmax(0, 1fr) 10ch 9ch; }
  .cha-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}