/* ============================================================
   traits / depth.css  —  深度页专用
   ------------------------------------------------------------
   落地页是一屏一题的答题卡；深度页是**配套的评分手册**——
   真实世界里答题卡不会单独发，跟着的是一本印着「第几列的气泡
   算进哪个分」的小册子。这一页就是那本册子。

   所以这里的语汇是手册，不是卡：栏号、条目、两极释义、题干清单。
   .track / .bubbles / .item 那套留在 skin.css，深度页一个都不用。

   不塞进 skin.css：落地访客不该为这一页的样式多下载一个字节，
   落地率是整条漏斗最贵的一段。token 全部继承 skin.css，不新增。
   ============================================================ */

/* 面包屑 */
.top {
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-5);
  background: var(--raise);
}
.top a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); text-decoration: none;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.top a:hover { color: var(--accent); }

.doc {
  max-width: 64rem; margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-7);
}
.head { display: grid; gap: var(--sp-4); justify-items: start; }
.lede { max-width: var(--measure); font-size: var(--step-1); color: var(--muted); }

/* 分节用 .sect 不用 .block：skin.css 的 .block 自带
   `max-width:54rem; margin-inline:auto`，在 .doc 这个 grid 里会让
   每一节按自己的内容宽度缩一下再居中 —— 结果是散文节、评分表、
   广告位各自一条左边线。这一页画的是一张有格线的表单，
   左边线只能有一条。 */
.sect { display: grid; gap: var(--sp-4); }
.sect > p { max-width: var(--measure); color: var(--muted); margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--step-5); font-weight: 400; line-height: .94;
  letter-spacing: .01em; text-transform: uppercase;
  margin: 0; max-width: 20ch; text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--accent); }
.sec-title {
  font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; margin: 0;
}

/* 先答后读的提醒条。不是装饰性 callout —— 这一页确实会告诉你
   哪一题算进哪个分，知道了就会影响作答，所以必须先说。 */
.first {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  background: var(--raise);
  padding: var(--sp-4) var(--sp-5);
  display: grid; gap: var(--sp-3); justify-items: start;
  max-width: var(--measure);
}
.first p { margin: 0; }
.first b { color: var(--accent); }

/* ---- 维度分节头 --------------------------------------------
   黑底反白一条，和答题卡顶上那条印科目名的黑条同一个做法，
   但这里多一个栏号区间（N1–N6），因为手册是按栏号查的。 */
.domhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
}
.domhead h2 {
  font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; margin: 0;
}
.domhead .range {
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-soft); font-variant-numeric: tabular-nums;
}
.domhead .count { margin-left: auto; font-size: var(--step--1); color: var(--faint); }

/* ---- 一个 facet 一条 ---------------------------------------
   左边一列栏号（N1 这种），右边全部内容。栏号用显示字体打大，
   因为手册真的是靠它查的 —— 它是索引，不是标签。 */
.keysheet {
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--raise);
}
.keyrow {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--rule);
}
.keyrow:first-child { border-top: 0; }
.colcode {
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-size: var(--step-3); line-height: 1; letter-spacing: .02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.keyrow h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-1); font-weight: 600; letter-spacing: .01em;
}

/* 两极：高分一栏、低分一栏，等宽并排。等宽是有意的 ——
   报告里低分那一端和高分写得一样长，这里的版面也不能偏袒一边。 */
.poles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.pole { background: var(--raise); padding: var(--sp-3) var(--sp-4); }
.pole b {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
}
.pole[data-end="hi"] b { color: var(--accent); }
.pole[data-end="lo"] b { color: var(--muted); }
.pole p { margin: 0; font-size: var(--step--1); }

/* 四条题干。序号是**卡上的题号**，不是 1-2-3-4 的装饰性编号 ——
   它能让人回到那张卡上去数第几题，所以用等宽数字印出来。 */
.stems { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.stems li {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem;
  gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0;
  border-top: 1px dotted var(--rule);
  font-size: var(--step--1);
}
.stems .qn {
  font-variant-numeric: tabular-nums; color: var(--faint);
  letter-spacing: .08em;
}
.stems .dir {
  text-align: right; font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.stems li[data-key="1"] .dir { color: var(--pos); }
.stems li[data-key="-1"] .dir { color: var(--neg); }

@media (max-width: 640px) {
  .keyrow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .colcode { grid-row: auto; font-size: var(--step-1); }
  .poles { grid-template-columns: minmax(0, 1fr); }
  .stems li { grid-template-columns: 3rem minmax(0, 1fr); }
  .stems .dir { grid-column: 2; text-align: left; }
}