/* ============================================================
   quiz / iq.css  —  /quiz/iq/ 专用（矩阵推理）
   ------------------------------------------------------------
   这一页在 depth.css 那套语汇里的位置：九宫格是一整块硬网格，
   缺的那一格就是页面上的黑砖 —— 和反应测试的击打面同一个东西，
   只是这里它不能点，是要被填上的。选项是六张硬投影卡片。
   只加 mx- 前缀的类，skin.css / depth.css 已有的一律复用，
   .ask .score .verdict .sheet .method .more .hint 都不重写。
   ============================================================ */

/* ---- 进度：一条实心带，只报进度不报对错 ----------------------
   不做成 .tape 那样的二十格：中途不给对错反馈，格子就没有可染的
   状态，二十个空格只是把「还剩多少」讲得更啰嗦。 */
.mx-bar {
  height: 10px;
  border: 3px solid var(--ink);
  background: var(--paper);
}
.mx-bar i { display: block; height: 100%; background: var(--accent); transition: width var(--dur) var(--ease); }

.mx-rule-n {
  margin: 0;
  font-size: var(--step--1); font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}
.mx-rule-n b { font-size: var(--step-1); color: var(--ink); margin-right: .2em; }

/* ---- 九宫格 --------------------------------------------------
   3px 的 gap 铺在墨色底上就是网格线本身，不用给每一格写 border ——
   写 border 的话中缝会叠成 6px，四边又只有 3px。 */
.mx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--ink);
  border: 3px solid var(--ink);
}
.mx-c {
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 8%;
  background: var(--paper);
  color: var(--ink);
}
/* 缺的那一格是这一页的黑砖。反应测试那页整块面板是黑的，这里缩成
   一格 —— 同一件东西，认得出是同一个站。 */
.mx-ask {
  background: var(--ink); color: var(--accent-soft);
  font-size: var(--step-4); font-weight: 900; line-height: 1;
}

/* viewBox 是 100×100，没写 width/height。engine.css 的全局 reset 给了
   max-width:100% 和 height:auto，但不写 width 的话 Safari 会退回
   300×150 的默认尺寸，图就被压扁。 */
.mx-fig { width: 100%; height: auto; display: block; }

.mx-pick {
  margin: 0;
  font-size: var(--step-0); font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ---- 六个选项 ------------------------------------------------ */
.mx-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mx-o {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 12%;
  font: inherit; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) linear;
}
.mx-o:hover, .mx-o:focus-visible {
  transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--accent);
  background: var(--raise);
}
.mx-o:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.mx-o:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); background: var(--accent-soft); }

/* 编号压在左上角，是给「我选第几个」这句话用的锚点，不是装饰。 */
.mx-k {
  position: absolute; top: 0; left: 0;
  padding: .1em .45em;
  background: var(--ink); color: var(--accent-soft);
  font-size: var(--step--1); font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ---- 逐题复盘 ------------------------------------------------
   二十条全印出来，不只印错的：对的那些也要能看见规则是什么，
   否则「蒙对的」和「看出来的」在这一页上长得一模一样。 */
.mx-review { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.mx-rv {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--raise);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
/* 错题换成黄投影 —— 往下滚的时候不用读字就知道哪几条要看。
   底色不动：卡片上印着图，底色一变图就跟着变脏。 */
.mx-rv.miss { box-shadow: 5px 5px 0 var(--accent); }

.mx-rv-head {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--step--1); font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
}
.mx-rv-head > b {
  padding: .1em .5em;
  background: var(--ink); color: var(--accent-soft);
  font-size: var(--step-0); font-variant-numeric: tabular-nums;
}
.mx-rv-tag { color: var(--muted); }
.mx-rv.miss .mx-rv-tag { color: var(--ink); background: var(--accent); padding: .15em .5em; }
.mx-rv-t { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }

/* 复盘里的九宫格连第九格一起画满 —— 这一屏的用处就是看完整的那张图。 */
.mx-rv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--ink); border: 2px solid var(--ink);
  max-width: 13rem;
}
.mx-rv-grid .mx-c { padding: 10%; }
.mx-fig-s { width: 100%; height: auto; }

.mx-rv-body { display: grid; gap: var(--sp-3); align-content: start; }
.mx-why { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.mx-why li { font-size: var(--step--1); line-height: 1.6; color: var(--muted); }

/* 「你选的 / 对的」两张小图并排。错题才有这一格。 */
.mx-rv-pick {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-3); border-top: 2px solid var(--rule);
}
.mx-rv-p { display: grid; gap: var(--sp-2); justify-items: start; width: 4.5rem; }
.mx-rv-p > i {
  font-style: normal;
  font-size: var(--step--1); font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
}
.mx-rv-p > svg { border: 3px solid var(--rule); padding: 6%; }
.mx-rv-p.ok > i { color: var(--ink); }
.mx-rv-p.ok > svg { border-color: var(--ink); background: var(--accent-soft); }

@media (min-width: 46rem) {
  .mx-opts { grid-template-columns: repeat(6, 1fr); }
  /* 九宫格自己不该长到一整栏宽：一格 220px 的时候图形之间的关系
     反而要摆头才看得全，行与行比不起来。 */
  .mx-grid { max-width: 26rem; }
  .mx-rv { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--sp-5); }
  .mx-rv-head { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .mx-opts { gap: var(--sp-2); }
  .mx-rv { padding: var(--sp-3); }
  .mx-rv-grid { max-width: 11rem; }
}

/* 手机第一屏：买量进来的全是手机，进来必须看见「九宫格 + 下面能点的一排」。
   九宫格铺满整栏的话一格 110px，三行就 330px，选项整排被顶到屏外 ——
   收到 19rem 每格还有 95px，图形照样看得清，第一排选项能露出来。 */
@media (max-width: 40rem) {
  .mx-grid { max-width: 19rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-bar i, .mx-o { transition: none; }
  .mx-o:hover, .mx-o:focus-visible, .mx-o:active { transform: none; }
}