/* score: ordered source sections, combined by the asset build. */
/* score.css — Score screens after a quiz, and the review of a mock's misses. */
/* ---------- score / review ---------- */
.scorewrap {
  text-align: center;
}
.actions {
  max-width: 330px;
  margin: 24px auto 0;
}
/* ---------- mock result ---------- */
/* A marked mock's result (mock-session.html) sits in the lesson completion
   frame, and the score is the whole show: it counts up in the middle
   (animateCompletion) and lands with a pop as the verdict appears under it.
   Its blue clears 3:1 as large text on paper in both themes. */
.mock-result {
  --score-ink: #ad1e2e;
}
[data-theme="dark"] .mock-result {
  --score-ink: #d52b3a;
}
.mock-result-paper {
  margin: auto 0 6px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mock-result-score {
  margin: 0;
  color: var(--score-ink);
  font-size: clamp(112px, 38vw, 168px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mock-result-score > [data-count-to] {
  display: inline-block;
}
.mock-result-score small {
  margin-left: 4px;
  color: var(--ink-3);
  font-size: 0.3em;
}
.mock-result-verdict {
  margin: 22px 0 auto;
  transition:
    opacity 0.3s ease,
    translate 0.3s ease;
}
#finCard .mock-result .mock-result-verdict h1 {
  color: var(--ink);
}
.mock-result-verdict p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 800;
}
.mock-result.is-counting .mock-result-verdict {
  opacity: 0;
  translate: 0 10px;
}
.mock-result.is-counted .mock-result-score > [data-count-to] {
  animation: mock-score-land 0.45s var(--ease);
}
@keyframes mock-score-land {
  40% {
    scale: 1.12;
  }
}
#mockMisses {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--panel);
  overflow-y: auto;
  display: none;
  padding: calc(72px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 48px;
}
#mockMisses.show {
  display: block;
}
#mockMisses .inner {
  max-width: 540px;
  margin: 0 auto;
}
#mockMisses h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0 0 16px;
}
.miss {
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.miss .mq {
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 12px;
  white-space: pre-line;
}
.miss .you,
.miss .cor {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
}
.miss .you {
  color: var(--wrong-ink);
  background: var(--wrong-soft);
}
.miss .cor {
  color: var(--correct-ink);
  background: var(--correct-soft);
  margin-top: 6px;
}
.miss .exp {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 12px;
}
.closex {
  position: fixed;
  top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  right: max(16px, calc(50vw - 254px));
  z-index: 31;
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  padding: 6px 14px;
  box-shadow: 0 3px 0 var(--lip);
}