/* ============================================================
   traits. 皮肤  —  光标阅卷答题卡（OMR sheet）
   ------------------------------------------------------------
   题材决定视觉：这个站是一份 120 题的量表，真实世界里它长成
   一张答题卡 —— 你涂气泡格，机器扫，吐出一份分数报告。
   所以整站的语汇来自那张卡：扫描仪滤色的淡绿纸、石墨铅笔痕、
   左边缘的定时轨、印在卡上的白色标签区、报告里的常模刻度。

   五个老站的主色全在 #b4231f–#ffb020 这段暖色里，这一个走冷色
   （石油蓝 #12506b），不靠色相近似区分，一眼就知道换站了。

   只重新赋值 tokens.css 已有的变量，不新增变量名。
   首屏零 web font。所有纹理走 CSS 渐变，不加请求。

   定时轨（.track）不是装饰：它就是进度条。答题卡边上那排黑块
   本来的作用就是让扫描仪数到第几行，拿它当进度显示是本来用途，
   不是把装饰硬说成信息。
   ============================================================ */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper: #dfe6db;        /* 扫描仪滤色绿：真答题卡就印这个色，为了被读头滤掉 */
  --raise: #f0f4ec;        /* 卡上印白的填写区 */
  --sink:  #c8d4c2;

  --ink:   #131a12;        /* 印刷黑 / 石墨 */
  --muted: #4d5a4b;        /* 对 --paper 约 7.4:1 */
  --faint: #8b9789;        /* 只给描边和轨块，不给要读的字 */

  --accent:      #12506b;  /* 第二印色，石油蓝 */
  --accent-ink:  #ffffff;
  --accent-soft: #2e7f9e;

  --pos: #1d6b4e; --neg: #9c3b2a; --warn: #8a6212;
  --rule: #aab6a6;

  /* 表格印刷品的圆角：不是 0（那是 quiz 的印刷描边），也不是 10px。
     2px 是切纸和套印的公差，给一点点就够，多了就变成卡片站。 */
  --radius-s: 2px; --radius-m: 3px; --radius-l: 3px;
  --dur: 220ms;
}

/* 纸：横向刻线 + 左边缘的定时轨底槽。两层渐变，零请求。 */
body {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 27px, rgba(19,26,18,.055) 27px 28px),
    linear-gradient(to right,
      var(--sink) 0 var(--_gut, 18px), transparent var(--_gut, 18px)),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}
@media (max-width: 720px) { body { --_gut: 10px; } }

/* 标题用窄体大写，像卡头上印的科目名；正文保持系统字体。
   不选衬线（fortune 占了），不选等宽（game 占了），
   不选 DIN（body 占了），不选 Arial Narrow（anime 占了）。 */
:root {
  --font-display: "Haettenschweiler", "Oswald", "Impact",
    "Franklin Gothic Medium", "Arial Black", var(--font-body);
}

.wordmark {
  font-family: var(--font-display);
  letter-spacing: .02em; text-transform: uppercase;
  font-weight: 400; line-height: .92;
}

/* 卡头：黑底反白，像答题卡顶上那条印着科目和版次的黑条 */
.cardhead {
  background: var(--ink); color: var(--raise);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
}
.cardhead b { color: var(--raise); font-weight: 400; }
.cardhead .form { color: #9fb4a0; }

/* ---- 定时轨 ------------------------------------------------
   钉在左边缘的一列小黑块。答完一题点亮一块。
   120 块在手机上一块只有几像素高，所以按 facet 分 30 段（每段 4 题），
   段与段之间留一道缝 —— 缝的位置正好是「换一个 facet」的位置，
   于是这条轨同时告诉你：答了多少、现在在量哪一组。 */
.track {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--_gut, 18px);
  display: grid; grid-template-rows: repeat(30, 1fr);
  gap: 2px; padding: var(--sp-2) 3px; z-index: 3;
  pointer-events: none;
}
.track i { display: block; background: var(--faint); border-radius: 1px; opacity: .4; }
/* 一段 4 题，涂几题就填多宽。不用自定义属性做过渡（那要 @property
   才能插值，浏览器支持还不齐），直接过渡 background-size，到处都能跑。 */
.track i[style*="--f"] {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: calc(var(--f) * 100%) 100%;
  opacity: 1;
  transition: background-size var(--dur) var(--ease);
}
.track i.now { box-shadow: 0 0 0 1.5px var(--accent); }
@media (max-width: 720px) { .track { --_gut: 10px; padding: var(--sp-1) 2px; gap: 1px; } }
@media (prefers-reduced-motion: reduce) { .track i { transition: none; } }

/* ---- 一题 --------------------------------------------------
   一屏一题。题干左边留一个题号章，像卡上印的行号。 */
.sheet { max-width: 46rem; margin-inline: auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

.item {
  background: var(--raise); border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: var(--sp-6) var(--sp-5);
  display: grid; gap: var(--sp-5);
  box-shadow: 0 1px 0 var(--sink);
}
.item .no {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .14em; color: var(--muted);
}
.item .stem {
  font-size: var(--step-2); line-height: 1.25; text-wrap: balance;
  /* 每题前面那句「I …」印成小字，题干本身才是大字 —— 120 题里
     这四个字母每次都一样，跟着放大等于每屏都在读同一句废话。 */
}
.item .stem small {
  display: block; font-size: var(--step--1); color: var(--muted);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-2);
}

/* ---- 五个气泡格 --------------------------------------------
   真答题卡就是一排圆圈。做成 radio，键盘能走，读屏能念。 */
.bubbles { display: grid; gap: var(--sp-2); }
.bubbles label {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--sp-3);
  align-items: center; cursor: pointer;
  /* 必须定位:真 radio 是 position:absolute 藏起来的,没有这一条它会
     跑到文档左上角去,Tab 走到它的时候整页往上弹一下。 */
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  transition: background var(--dur-fast) var(--ease);
}
.bubbles label:hover { background: var(--sink); }
.bubbles input { position: absolute; opacity: 0; width: 0; height: 0; }
.bubbles .dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent;
  display: grid; place-items: center;
}
.bubbles .dot::after {
  content: ''; width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--ink); transform: scale(0); opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) linear;
}
.bubbles input:checked + .dot::after { transform: scale(1); opacity: 1; }
.bubbles input:focus-visible + .dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.bubbles .txt { font-size: var(--step-0); }
@media (prefers-reduced-motion: reduce) {
  .bubbles .dot::after { transition: none; }
}

/* ---- 分数报告 ----------------------------------------------
   一份报告分五块，每块一个维度，每块里六条 facet 刻度。
   刻度条不是进度条：它是一把有刻度的尺，所以画刻度线，
   不画圆角，不加渐变填充 —— 渐变填充会让人以为满格才好。 */
.report { display: grid; gap: var(--sp-7); max-width: 58rem; margin-inline: auto; }

.dom {
  border: 1px solid var(--rule); border-radius: var(--radius-m);
  background: var(--raise); overflow: hidden;
}
.dom > header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule); background: var(--sink);
}
.dom > header h2 {
  margin: 0; font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.dom > header .score {
  font-family: var(--font-mono); font-size: var(--step-2);
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.dom > header .side {
  grid-column: 1 / -1; font-size: var(--step--1); color: var(--muted);
  letter-spacing: .14em; text-transform: uppercase;
}

/* 维度那段解读。不用 .says —— .says 带上边线,一块里放两段会画出
   两道横线,把一段话切成两块看起来像两件事。 */
.dom .read {
  margin: 0; padding: var(--sp-5) var(--sp-5) 0;
  max-width: var(--measure); color: var(--muted); line-height: 1.7;
}
.dom .read:last-of-type { padding-bottom: var(--sp-5); }
/* 极差提示是算出来的,不是写好的 —— 给它一道竖线,和写好的解读区分开 */
.dom .spread {
  border-left: 2px solid var(--accent); padding-left: var(--sp-4);
  margin-top: var(--sp-4); margin-left: var(--sp-5); color: var(--ink);
}
.dom .spread b { color: var(--accent); }

/* ---- 一条 facet 刻度 ---------------------------------------
   左边名字，右边刻度，刻度上有格。不做成卡片：六条并排的卡片
   会把「这是一把尺」读成「这是六个独立的东西」。 */
.facets { display: grid; }
.facets > div {
  display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) 2.6rem;
  gap: var(--sp-3) var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.facets > div:last-child { border-bottom: 0; }
.facets dfn {
  font-style: normal; font-size: var(--step--1); color: var(--ink);
  letter-spacing: .1em; text-transform: uppercase;
}
.facets .n {
  font-family: var(--font-mono); font-size: var(--step--1);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--muted);
}
/* 每条 facet 底下那句解读。这三十句是这个站真正卖的东西:
   别的测试给你一个条,这里每个条下面都有一句话说它是什么意思。 */
.facets p {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--step--1); color: var(--muted); line-height: 1.65;
  max-width: var(--measure);
}
.facets p b { color: var(--ink); font-weight: 600; }

/* 尺身：五格刻度压在底上，你的读数是一根实心竖条 + 一段填充。
   50 那根线是**量表中点**（四题全选「中立」正好是 50），不是常模均值 ——
   我们没有常模样本，所以刻度上不出现任何冒充百分位的东西。 */
.rule-bar {
  position: relative; height: 1.35rem;
  background:
    repeating-linear-gradient(to right,
      var(--rule) 0 1px, transparent 1px 20%),
    var(--paper);
  border: 1px solid var(--rule); border-radius: 1px;
  overflow: hidden;
}
.rule-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--ink); opacity: .5;
}
.rule-bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: calc(var(--v) * 1%); background: var(--accent-soft); opacity: .4;
  transition: width var(--dur-slow) var(--ease);
}
.rule-bar b {
  position: absolute; top: -2px; bottom: -2px; width: 3px;
  left: calc(var(--v) * 1%); transform: translateX(-1.5px);
  background: var(--accent); z-index: 1;
  transition: left var(--dur-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .rule-bar i, .rule-bar b { transition: none; }
}
@media (max-width: 560px) {
  .facets > div { grid-template-columns: minmax(0, 1fr) 2.6rem; }
  .facets .rule-bar { grid-column: 1 / -1; grid-row: 2; }
  /* 解读句必须显式指定行:上面把尺钉在第 2 行了,不指定的话
     自动排版会把这一段塞进第 1 行剩下的空位,和名字挤在一起。 */
  .facets p { grid-row: 3; }
  .dom .read { padding-inline: var(--sp-4); }
  .dom .spread { margin-left: var(--sp-4); }
}

/* ---- 结果头：五个字母的代号 + 离分界线有多远 ----------------
   代号是给人晒的，分界线距离是给人信的。MBTI 那套只给代号，
   于是「我是 INTJ」变成一个身份而不是一次测量；印出你离翻面
   还差几分，代号就退回它本来的身份：一个四舍五入的简写。 */
.verdict {
  display: grid; gap: var(--sp-4); justify-items: center; text-align: center;
  padding: var(--sp-7) var(--sp-5);
  border: 1.5px solid var(--ink); border-radius: var(--radius-m);
  background: var(--raise);
}
.verdict .code {
  font-family: var(--font-mono); font-size: var(--step-4); line-height: 1;
  letter-spacing: .1em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.verdict .code em { font-style: normal; color: var(--faint); }
.verdict h1 {
  margin: 0; font-family: var(--font-display); font-size: var(--step-3);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.verdict .sub { max-width: var(--measure); color: var(--muted); }

/* 离分界线多近：五条，每条一句。近的那几条要显眼 —— 它们才是
   「这个代号别太当真」的证据。 */
.edge { display: grid; gap: var(--sp-2); width: 100%; max-width: 34rem; }
.edge div {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: baseline;
  font-size: var(--step--1); color: var(--muted);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-s);
  text-align: left;
}
.edge div .k { font-family: var(--font-mono); color: var(--ink); }
.edge div .d { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.edge div.close { background: var(--sink); color: var(--ink); }
.edge div.close .d { color: var(--accent); }

/* ---- 动作按钮 ----------------------------------------------
   答题卡上没有按钮，但这是网页。做成印在卡上的实心块，
   不做成圆角药丸 —— 药丸是通用 UI 套路，跟这张卡不是一个世界。 */
.go {
  font: inherit; font-size: var(--step-0); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--ink);
  border: 0; border-radius: var(--radius-s); cursor: pointer;
  padding: var(--sp-3) var(--sp-6);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.go:hover { background: var(--accent); }
.go:active { transform: translateY(1px); }
.go:disabled { background: var(--faint); cursor: not-allowed; }
.go.quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.go.quiet:hover { background: var(--sink); }
.go .icon { width: 1.1em; height: 1.1em; }

.nav-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.nav-row .of {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted);
  font-variant-numeric: tabular-nums; margin-left: auto;
}

/* ---- 方法 / 免责 -------------------------------------------
   .says 在别的站是灰底小字，这里做成卡背面那段印刷说明：
   细线框 + 全大写小标题，跟报告区分开。 */
.says {
  border-top: 1px solid var(--rule); padding-top: var(--sp-4);
  font-size: var(--step--1); color: var(--muted); line-height: 1.65;
  max-width: var(--measure);
}
.says b { color: var(--ink); font-weight: 600; }
.says p { margin: 0 0 var(--sp-4); }
.says p:last-child { margin-bottom: 0; }

/* ---- 落地屏 ------------------------------------------------
   卡头下面就是这一屏：它要在三秒内说清「这是什么、比别的强在哪」。
   买量来的人 31% 在首屏就走，所以这一屏不放装饰性大图，
   放的是四个真数（120 / 30 / 5 / 32）—— 数字本身就是卖点。 */
.intro {
  max-width: 54rem; margin-inline: auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  display: grid; gap: var(--sp-5); justify-items: start;
}
.intro h1 {
  margin: 0; font-family: var(--font-display);
  font-size: var(--step-4); line-height: .95; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance;
}
.intro h1 em { font-style: normal; color: var(--accent); }
.intro .lede { max-width: var(--measure); font-size: var(--step-1); color: var(--muted); }

/* 四个数：横排，竖线隔开，不做卡片 */
.counts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%; border: 1px solid var(--rule); background: var(--raise);
  border-radius: var(--radius-m); overflow: hidden;
}
.counts div {
  padding: var(--sp-4); border-left: 1px solid var(--rule);
  display: grid; gap: var(--sp-1); align-content: start;
}
.counts div:first-child { border-left: 0; }
.counts b {
  font-family: var(--font-mono); font-size: var(--step-3); line-height: 1;
  font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums;
}
.counts span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
@media (max-width: 620px) {
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts div:nth-child(3) { border-left: 0; }
  .counts div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* 正文区块：落地屏和深度页共用 */
.block { display: grid; gap: var(--sp-4); max-width: 54rem; margin-inline: auto; padding-inline: var(--sp-5); }
.block h2 {
  margin: 0; font-family: var(--font-display); font-size: var(--step-2);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.05;
}
.block p { max-width: var(--measure); color: var(--muted); margin: 0; }
.block p b, .block li b { color: var(--ink); font-weight: 600; }
.method { margin: 0; padding-left: 1.3em; display: grid; gap: var(--sp-3); }
.method li { color: var(--muted); line-height: 1.65; }

/* 对照表：我们给什么 vs 常见的四字母测试给什么。
   这张表是这个站存在的理由，放在落地屏，不藏在深度页。 */
.versus { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.versus th, .versus td {
  padding: var(--sp-3); border-bottom: 1px solid var(--rule);
  text-align: left; vertical-align: top;
}
.versus thead th {
  color: var(--muted); font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; border-bottom: 1.5px solid var(--ink);
}
.versus tbody th { color: var(--ink); font-weight: 600; width: 11rem; }
.versus .ours { color: var(--accent); }