/* Vocabulary assessment: calm, explicit and consistent with the learning app. */
body.vocab-open { overflow: hidden; }
#vocabMask { height: 100dvh; overflow: hidden; background: var(--bg); }
#vocabMask .review-top { flex: 0 0 auto; width: min(920px, 100%); max-width: none; min-height: 72px; padding: 16px 24px; }
#vocabMask .review-stage {
  width: min(920px, 100%); max-width: none; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; justify-content: flex-start;
  padding: clamp(22px, 5vh, 52px) 24px max(38px, env(safe-area-inset-bottom));
}
#vocabMask .review-setup, #vocabMask .review-done { width: min(720px, 100%); flex: 0 0 auto; margin-inline: auto; }
#vocabMask .review-setup { text-align: left; }
#vocabMask .rcard {
  width: min(700px, 100%); min-height: 0; margin-inline: auto; padding: 30px;
  cursor: default; background: var(--surface-solid, var(--th-bg)); border-radius: 28px;
}
#vocabMask .rcard:hover { transform: none; }
#vocabMask .rword { margin: 26px 0 8px; overflow-wrap: anywhere; font-size: clamp(36px, 7vw, 56px); letter-spacing: -.035em; }
#vocabMask .vocab-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 26px; }
#vocabMask .vocab-opt {
  min-height: 58px; padding: 14px 16px; white-space: normal; overflow-wrap: anywhere;
  border-radius: 15px; background: color-mix(in srgb, var(--surface-solid, var(--card)) 88%, var(--bg));
}
#vocabMask .vocab-opt:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-solid, var(--card))); }
#vocabMask .assessment-unknown { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); border-style: dashed; }
#vocabMask .ractions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.assessment-intro { padding-right: min(14vw, 100px); }
.assessment-eyebrow { display: block; color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.assessment-intro h2, .assessment-result-head h2 { margin: 9px 0 8px; font-size: clamp(27px, 5vw, 40px); line-height: 1.24; letter-spacing: -.04em; }
.assessment-lead { max-width: 590px; color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.assessment-facts { display: flex; gap: 8px; margin: 22px 0 24px; }
.assessment-facts span {
  min-width: 112px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid, var(--card)) 82%, var(--bg)); color: var(--ink-soft); font-size: 12px;
}
.assessment-facts b { display: block; color: var(--ink); font-size: 18px; line-height: 1.3; }
.assessment-note { padding: 13px 15px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--code-bg); font-size: 13px; line-height: 1.7; color: var(--ink-soft); text-align: left; }
.assessment-start { display: inline-flex; align-items: center; gap: 18px; margin-top: 20px; padding-inline: 22px; }
.assessment-start span { font-size: 18px; }
.assessment-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 34px; }
.assessment-history-head h3 { font-size: 16px; }
.assessment-history-head span { color: var(--ink-soft); font-size: 11px; }
.assessment-qmeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.assessment-qmeta span { padding: 4px 10px; border-radius: 999px; background: var(--glow); color: var(--accent-deep); font-size: 11px; font-weight: 750; }
.assessment-qmeta small { color: var(--ink-soft); font-size: 11px; }
.assessment-result-head { text-align: center; }
.assessment-range { margin: 24px 0 6px; color: var(--accent-deep); font-size: clamp(38px, 8vw, 58px); font-weight: 780; letter-spacing: -.05em; }
.assessment-range small { font-size: 14px; }
.assessment-quality { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.assessment-result-facts { justify-content: center; }
.assessment-point { margin-block: 18px; }
#vocabMethod p { color: var(--ink-soft); font-size: 13px; line-height: 1.8; margin-block: 12px; }
.assessment-history { display: block; width: 100%; margin: 9px 0; padding: 15px 16px; color: var(--ink); background: var(--surface-solid, var(--card)); border: 1px solid var(--line); border-radius: 14px; text-align: left; cursor: pointer; }
.assessment-bands { margin: 22px 0; padding: 8px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid, var(--card)); }
.assessment-bands > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.assessment-bands > div:last-child { border-bottom: 0; }
.assessment-bands .assessment-bands-head { color: var(--ink-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
#vocabMask details { margin: 20px 0; text-align: left; }
#vocabMask summary { padding: 12px 0; color: var(--accent-deep); cursor: pointer; font-weight: 700; }
#vocabMask :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 620px) {
  #vocabMask .review-top { min-height: 64px; padding: 12px 20px; }
  #vocabMask .review-stage { padding: 24px 18px max(30px, env(safe-area-inset-bottom)); }
  #vocabMask .rcard { padding: 22px 18px; border-radius: 22px; }
  #vocabMask .rword { margin-top: 22px; }
  #vocabMask .vocab-opts { grid-template-columns: 1fr; gap: 9px; margin-top: 20px; }
  #vocabMask .assessment-unknown { grid-column: auto; }
  .assessment-intro { padding-right: 0; }
  .assessment-facts { gap: 6px; }
  .assessment-facts span { min-width: 0; flex: 1; padding: 10px 8px; text-align: center; }
  .assessment-note { font-size: 12px; }
  .assessment-start { width: 100%; justify-content: space-between; }
  .assessment-bands { padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) { body.vocab-open #vocabMask { animation: none; } }