/* ============================================================
   quiz / reaction.css  —  /quiz/reaction/ 专用
   ------------------------------------------------------------
   这一页原来一张自己的表都没有，四个深度版块全靠 quiz/depth.css。
   只写 depth.css 里没有的三样东西，别的一律复用：
   ① 折线图里连点的那根线（.curve 有 .dot .diag .gap，没有连线）
   ② 相邻两轮的间隔梯子（.rx-gaps）
   ③ 抽掉一轮那张表要并排放两列数，.decomp 原来只放得下一列
   全部 rx- 前缀，另外两条挂在 .curve / .decomp 上的都带本页的类
   限定住 —— quiz 站七个深度页共用那两张表，改裸类会连坐。
   ============================================================ */

/* 连点的线压在网格和中位线之下的层级感由颜色给：--faint 最淡，
   点是节目红，中位那条是黑的粗虚线。线本身只负责说「按这个顺序」。 */
.curve .run { fill: none; stroke: var(--faint); stroke-width: 2; }

/* ---- 相邻两轮差多少 ------------------------------------------
   一行一对相邻成绩。差不到一次刷新的那几行整行涂黄 —— 黄是这个站
   的第二主色（节目黄），涂满一行就是一道荧光笔，意思是「这两个数
   在这台机器上是同一个数」。黄底上的字保持 --ink，不另配色。 */
.rx-gaps { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.rx-gap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3); border-bottom: 1px solid var(--rule);
}
.rx-same { background: var(--accent-soft); }

.rx-gap b {
  font-size: var(--step-0); font-weight: 900;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.rx-gap b em {
  font-style: normal; font-weight: 400; font-size: .64em;
  color: var(--muted); margin-left: .25em; letter-spacing: .08em;
}
.rx-gap i {
  justify-self: end; font-style: normal; font-size: var(--step--1);
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rx-gap span {
  grid-column: 1 / -1; font-size: var(--step--1);
  color: var(--muted); line-height: 1.5;
}

/* ---- 抽掉一轮 ------------------------------------------------
   .decomp 原来一行只挂一个 <b>（跨两行、贴右边）。这一节要中位数和
   平均数并排，才看得出谁动得少 —— 那正是这一节唯一想说的事，拆成
   两张表就看不出来了。所以在 .decomp 上加本页的类改成三列。
   用 .decomp.rx-jack 两个类限定：跟 depth.css 那条同权重的话只靠
   加载顺序取胜，哪天有人调换 <link> 顺序就会静默失效。

   两个 <b> 必须 grid-row:auto，不能写 grid-row:1。写死行号的项在
   网格自动排布里是「先排、占前面的列」的那一批，两个数会抢走第 1、
   第 2 列，把源码里排在它们前面的 <dfn> 挤到第 3 列 —— 整行从右往
   左读。2026-09-19 截图实测，数值断言全绿。 */
.decomp.rx-jack > div { grid-template-columns: minmax(0, 1fr) auto auto; }
.decomp.rx-jack b {
  grid-row: auto; grid-column: auto; align-self: baseline;
  display: grid; justify-items: end; gap: 1px;
  min-width: 3.2rem; font-size: var(--step-1); line-height: 1.1;
}
/* 列名压在数字底下，不摆在表头 —— 两列数中间没有竖线，表头那一行
   离得越远越对不上号。每个数自己带着单位走最不会读错。
   .44em 在 390px 上只有 7px，截图上是一团灰，读不出写的是什么。 */
.decomp.rx-jack b em {
  font-style: normal; font-weight: 400; font-size: .58em;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
}
.decomp.rx-jack dfn small {
  font-weight: 400; font-size: var(--step--1);
  color: var(--muted); margin-left: .4em; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .decomp.rx-jack b { font-size: var(--step-0); min-width: 2.9rem; }
  .decomp.rx-jack dfn { font-size: var(--step--1); }
  .decomp.rx-jack > div { gap: var(--sp-2); }
}