/* quiz/calibration 独有的三块：价目表 / 换挡带 / 单题代价柱 / 两条规则对照。
   这些类名只在这一页出现，所以放页面级样式表，不进 quiz/depth.css ——
   那份里的 .curve 被 memory 和 reaction 共用，.score 被 iq、memory、reaction
   共用，往共用文件里加内容形状的假设迟早误伤别的页（fortune/dreams 就是
   这么被 .sys 的 nowrap 砸掉 84% 内容的）。 */

/* ---- 价目表 ---------------------------------------------------- */
.cal-price { border: 3px solid var(--rule); background: var(--raise); }
.cal-price .hd,
.cal-price .pr { display: grid; grid-template-columns: 9.5rem 1fr 1fr; align-items: center; }
.cal-price .hd {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 3px solid var(--rule); background: var(--rule);
}
.cal-price .hd span {
  font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--raise);
}
.cal-price .pr { padding: var(--sp-3); gap: var(--sp-2); }
.cal-price .pr + .pr { border-top: 1px solid var(--sink); }
.cal-price dfn {
  display: block; font-style: normal;
  font-family: var(--font-display); font-size: var(--step-0); line-height: 1.15;
}
.cal-price dfn i {
  display: block; font-style: normal;
  font-size: var(--step--1); color: var(--faint); font-variant-numeric: tabular-nums;
}

/* 条长按 价钱 / 最贵的价钱。「确定了还答错」比「确定了答对」贵 81 倍，
   这件事写成数字没人有感觉，两条并排一眼就看见。 */
.cal-price .b { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cal-price .b u { display: none; }
.cal-price .b span {
  display: block; height: .95rem; min-width: 2px;
  border: 2px solid var(--rule); background: var(--accent-soft);
}
.cal-price .b.no span { background: var(--accent); }
.cal-price .b b {
  font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- 换挡带 ---------------------------------------------------- */
.cal-sub {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-display); font-size: var(--step-1);
}
.cal-cap { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--faint); }
.cal-band { display: flex; border: 3px solid var(--rule); background: var(--raise); }
.cal-band .bd { padding: var(--sp-3) var(--sp-2); min-width: 0; text-align: center; }
.cal-band .bd + .bd { border-left: 3px solid var(--rule); }
.cal-band .bd:nth-child(2) { background: var(--sink); }
.cal-band .bd:nth-child(3) { background: var(--accent-soft); }
.cal-band b {
  display: block; font-family: var(--font-display);
  font-size: var(--step--1); line-height: 1.15; overflow-wrap: anywhere;
}
.cal-band span {
  display: block; margin-top: 2px;
  font-size: var(--step--1); color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- 单题代价柱 ------------------------------------------------ */
.cal-conc {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--sp-2);
  align-items: end; height: 11rem;
  padding: var(--sp-3) var(--sp-3) 0;
  border: 3px solid var(--rule); background: var(--raise);
}
/* 柱子高度是百分比，必须有一条「高度确定」的轨道去解析它。
   用 grid 的 1fr + 定高容器，不要 flex——flex 里百分比高度会连
   底下那行序号的高度一起算进去，柱子就溢出了。 */
.cal-conc .cb { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.cal-conc .cb span {
  display: block; align-self: end; min-height: 5px;
  border: 2px solid var(--rule); border-bottom: 0; background: var(--accent);
}
/* min-height 5px：0.010 真实高度不到 2px，减去 2px 上边框只剩 1px 黄，
   读者会当成坐标轴而不是「一根很矮的柱子」。抬到 5px 是为了让「几乎为零」
   看得出是零，不是为了改比例——高度本身仍然是按代价现算的。 */
.cal-conc .cb.ok span { background: var(--accent-soft); }
.cal-conc .cb.hi span { outline: 3px solid var(--rule); outline-offset: 3px; }
.cal-conc .cb i {
  padding: var(--sp-2) 0; border-top: 3px solid var(--rule);
  font-style: normal; font-size: var(--step--1); text-align: center;
  font-variant-numeric: tabular-nums;
}
.cal-conc .cb.hi i { font-weight: 700; }

/* ---- 两条规则对照 ---------------------------------------------- */
.cal-rules { border: 3px solid var(--rule); background: var(--raise); }
.cal-rules .hd,
.cal-rules .rr { display: grid; grid-template-columns: 1fr 6rem 6rem; align-items: center; }
.cal-rules .hd {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 3px solid var(--rule); background: var(--rule);
}
.cal-rules .hd span {
  font-size: var(--step--1); line-height: 1.25; letter-spacing: .06em;
  text-transform: uppercase; color: var(--raise);
}
.cal-rules .hd span + span,
.cal-rules .rr b { text-align: right; }
.cal-rules .rr { padding: var(--sp-3); gap: var(--sp-2); }
.cal-rules .rr + .rr { border-top: 1px solid var(--sink); }
.cal-rules dfn {
  font-style: normal; font-family: var(--font-display); font-size: var(--step-0);
}
.cal-rules dfn em { font-style: italic; }
.cal-rules dfn i {
  display: block; font-style: normal;
  font-size: var(--step--1); color: var(--faint); font-family: var(--font-body);
}
.cal-rules .rr b {
  font-size: var(--step-1); font-variant-numeric: tabular-nums;
}
.cal-rules .rr b u { display: none; }
/* 赢的那一格加底色，不加箭头——两行四个数，读者要的是「哪个小」 */
.cal-rules .rr b.win {
  background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- 窄屏 ------------------------------------------------------ */
@media (max-width: 560px) {
  .cal-price .hd { display: none; }
  .cal-price .pr { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cal-price .b u {
    display: block; flex: 0 0 5.2rem; text-decoration: none; white-space: nowrap;
    font-size: var(--step--1); letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint);
  }
  .cal-price .b span { flex: 0 1 auto; }

  /* 十根柱子在 390px 上一根不到 30px，数字挤成两行。改成两排五根。 */
  .cal-conc { grid-template-columns: repeat(5, 1fr); height: auto; }
  .cal-conc .cb { height: 6.5rem; }

  .cal-rules .hd { display: none; }
  .cal-rules .rr { grid-template-columns: 1fr; row-gap: var(--sp-2); }
  .cal-rules .rr b { text-align: left; justify-self: start; }
  .cal-rules .rr b u {
    display: inline; margin-right: .4em; text-decoration: none;
    font-size: var(--step--1); color: var(--faint);
    text-transform: uppercase; letter-spacing: .06em;
  }
}

@media (max-width: 420px) {
  .cal-band { display: block; }
  .cal-band .bd { width: auto !important; text-align: left; }
  .cal-band .bd + .bd { border-left: 0; border-top: 3px solid var(--rule); }
}