.exam-container {
  max-width: 640px;
  padding-top: 48px;
  padding-bottom: 48px;
}

/* A guided practice session carries a help panel beside the question, so it
   needs room for two columns. Added by js/cognitive-module.js only when
   guided is on - a formal test keeps the 640px reading width, which is the
   right measure for a single column of questions.
   Compound selector AND declared after .exam-container: written before it
   at equal specificity, the 640px cap simply won on source order and the
   panel kept being squeezed beside a 376px question. */
/* Three columns need the room: 260 rail + 700 question + 280 panel plus two
   22px gaps is 1284, and the container adds 24px of padding each side. */
.container.exam-container-guided { max-width: 1360px; }

.exam-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  text-align: center;
}

.exam-progress {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.exam-prompt {
  font-size: 20px;
  color: var(--navy-dark);
  margin-bottom: 28px;
  line-height: 1.5;
}

.exam-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exam-option-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 14px 20px;
  font-size: 15px;
}
.exam-option-btn:hover {
  background: var(--navy);
  color: #fff;
}
/* CHOSEN, NOT YET COMMITTED (2026-08-27). A tap used to answer and advance
   in one gesture, so there was never a state to show. Now there is, and it
   has to be unmistakable: this is what will be recorded when Next is
   pressed. Navy on the same teal the rest of the product uses for "here",
   at 5.9:1 - and never colour alone, since aria-pressed carries it for a
   screen reader and the tick carries it for anyone who cannot separate the
   two fills. */
.exam-option-btn.is-chosen,
.exam-option-btn.is-chosen:hover {
  background: #4E9EA8;
  border-color: #0F7B8A;
  color: var(--navy-dark, #1B1C50);
  font-weight: 600;
}
.exam-option-btn.is-chosen::after {
  content: '\2713';
  margin-left: auto;
  padding-left: 14px;
  font-size: 17px;
  font-weight: 700;
}

/* The commit row. Back sits left and quiet, Next right and primary: the
   ordinary path through a test is forwards, and the control that undoes a
   mis-tap should be findable without competing with it. */
.exam-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.exam-nav-row .btn { min-width: 116px; }
.exam-classic-next[disabled],
.exam-classic-back[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.exam-nav-hint {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 460px) {
  .exam-nav-row { flex-direction: column-reverse; }
  .exam-nav-row .btn { width: 100%; }
}

/* Save & exit sits apart from the commit row and reads quieter than both
   buttons in it. Leaving is a legitimate thing to do and must be findable,
   but it is not the path through a test - and it sits next to controls a
   child taps quickly, which is why it asks before it acts. */
.exam-exit-row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.exam-save-exit-btn { font-size: 13.5px; }
.exam-save-exit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}
@media (max-width: 460px) {
  .exam-save-exit-actions { flex-direction: column-reverse; }
  .exam-save-exit-actions .btn { width: 100%; }
}

.exam-timer {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--amber-dark);
  background: rgba(243, 113, 48, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.exam-pairs-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.exam-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-light);
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-dark);
}
.exam-pair-arrow { color: var(--teal); }

.exam-flash-digit {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 64px;
  color: var(--navy);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spelling module */
.spelling-play-btn {
  margin: 0 auto 24px;
}
.spelling-play-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.spelling-no-audio-note {
  color: #b3261e;
  margin-bottom: 20px;
}
.spelling-input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  text-align: left;
}
.spelling-input-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.spelling-input-field input {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
}
.spelling-input-field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 123, 138, 0.12);
}

.spelling-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  text-align: left;
}
.spelling-review-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-light);
}
.spelling-review-word {
  flex: 0 0 140px;
  font-weight: 600;
  color: var(--navy-dark);
}
.spelling-review-typed {
  flex: 1;
  color: var(--text-muted);
  font-style: italic;
}
.spelling-review-mark {
  font-weight: 700;
  font-size: 18px;
}
.spelling-review-correct .spelling-review-mark { color: var(--teal); }
.spelling-review-wrong .spelling-review-mark { color: var(--amber-dark); }
.spelling-review-wrong .spelling-review-typed { text-decoration: line-through; }
.spelling-review-skipped { opacity: 0.7; }
.spelling-review-skipped .spelling-review-mark { color: var(--text-muted); font-size: 12px; font-weight: 600; }

/* Maths practice module */
.math-question {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 32px;
}
.math-input-field input {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.math-feedback {
  font-weight: 600;
  margin-bottom: 18px;
}
.math-feedback-correct { color: var(--teal); }
.math-feedback-wrong { color: var(--amber-dark); }
.math-feedback-neutral { color: var(--navy); }

/* Practice landing chooser (2026-08-09) — "Smart practice" vs "Choose
   category & complexity," shown before math-practice.html drops a
   student into either the adaptive scheduler or the manual picker.
   Shared look for the <button> and <a> variant so neither reads as more
   clickable than the other. */
.practice-landing-choices { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.practice-landing-choice {
  display: block;
  text-align: left;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.practice-landing-choice:hover:not(:disabled) { border-color: var(--teal); background: rgba(15, 123, 138, 0.06); }
.practice-landing-choice:disabled { cursor: not-allowed; opacity: 0.55; }
.practice-landing-choice strong { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--navy-dark); margin-bottom: 4px; }
.practice-landing-choice span { display: block; font-size: 13px; color: var(--text-muted); }
.practice-landing-note { color: var(--amber-dark) !important; margin-top: 6px; font-size: 12px; }

/* Practice-results metrics section (2026-08-09) — appended AFTER
   whatever the engine's own completion screen renders (cognitive-module.js
   /spelling-module.js both render their own summary card first), so this
   is a genuinely separate block underneath it, not a replacement. Reuses
   css/report.css's .score-bar-* classes for the category breakdown so
   practice and the formal-test reports share one visual language for
   the same underlying concept (accuracy-by-category). */












@media (max-width: 480px) {
}

/* Back to home, on the intro only (2026-08-15). Deliberately absent once
   an attempt is under way: leaving mid-exam has consequences the intro
   does not, and there is no pause to leave TO yet. */
.exam-back-home {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.exam-back-home:hover { color: var(--navy-dark); text-decoration: underline; }

/* --- Section heads-up (2026-08-22) -----------------------------------
   Shown before every section while the clock is stopped. Sits between
   modules, so the section timer -- started inside renderItem() -- has not
   begun; the time a child spends reading this is not counted, which is the
   whole reason the screen can afford to be calm rather than terse. */
.exam-intro-card { text-align: left; }

.exam-intro-rail { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.exam-intro-seg { height: 5px; border-radius: 3px; flex: 1; background: var(--border); }
.exam-intro-seg.done { background: var(--teal); }
.exam-intro-seg.now { background: var(--amber); }
.exam-intro-count {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; margin-left: 6px;
}

.exam-intro-title { margin: 6px 0 12px; color: var(--navy); }
.exam-intro-lede { font-size: 18px; margin: 0 0 24px; max-width: 46ch; }
.exam-intro-label {
  font-family: 'Poppins', Arial, sans-serif; font-weight: 600; font-size: 13px;
  color: var(--text-muted); margin: 0 0 10px;
}

.exam-intro-todo { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; }
.exam-intro-todo li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.exam-intro-tick {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  background: var(--teal); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* Only the timed section renders this, so the warning never becomes wallpaper. */
.exam-intro-timed {
  background: rgba(243, 113, 48, 0.10); border: 1px solid var(--amber);
  border-radius: 10px; padding: 15px 17px; margin: 0 0 22px;
  display: flex; gap: 14px; align-items: flex-start;
}
.exam-intro-timed p { margin: 0; font-size: 15px; }
.exam-intro-timed strong { color: var(--amber-dark); }
.exam-intro-clock {
  width: 34px; height: 34px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 3px solid var(--amber-dark); position: relative;
}
.exam-intro-clock::before, .exam-intro-clock::after {
  content: ''; position: absolute; background: var(--amber-dark);
  border-radius: 2px; transform-origin: bottom center;
}
.exam-intro-clock::before { width: 3px; height: 10px; left: 12px; top: 4px; }
.exam-intro-clock::after { width: 3px; height: 7px; left: 12px; top: 7px; transform: rotate(95deg); }

.exam-intro-note {
  background: var(--bg-light); border-left: 3px solid var(--teal);
  border-radius: 6px; padding: 13px 15px; margin: 0 0 22px;
  font-size: 15px; color: var(--text-dark);
}

.exam-intro-paused {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 18px;
  font-size: 14.5px; color: var(--text-muted);
}
.exam-intro-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--teal); color: #fff; padding: 4px 9px; border-radius: 4px;
  white-space: nowrap; flex: none;
}
.exam-intro-card .btn-lg { margin-top: 22px; }

@media (max-width: 560px) {
  .exam-intro-count { display: none; }
  .exam-intro-lede { font-size: 16.5px; }
}

/* The practice-results styles moved to auth.css on 2026-08-25. The same
   markup is now shown in two places - the end of a session here, and the
   "Last five practice sessions" list in the portal - and exam.css is loaded
   by only one of them, so in the portal it rendered as raw text. */