/* A full practice exam (lib/exam-page.js, assets/js/exam.js), mounted on a
   course's practice-test page. Everything is scoped under .exam and uses the
   design variables site.css defines; choices, buttons and tables keep the
   site's own rules. */

.exam { margin-top: 18px; }
.exam h2:focus, .exam h3:focus { outline: none; }
.exam-how li { margin-bottom: 6px; }
.exam-gate { margin: 18px 0; }
.exam-gate .btn { white-space: normal; text-align: center; }
.exam-section { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 18px; }
.exam-section-meta { color: var(--muted); font-size: 0.93rem; margin-top: -4px; }
.exam-clock { position: sticky; top: 0; z-index: 2; display: inline-block; margin: 0 0 8px; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--card); font-weight: 700; font-variant-numeric: tabular-nums; }
.exam-clock.is-done { position: static; }
.exam-list { padding-left: 1.4em; min-width: 0; }
.exam-q { padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.exam-q.is-right { border-left: 4px solid var(--good); padding-left: 10px; }
.exam-q.is-wrong { border-left: 4px solid var(--bad); padding-left: 10px; }
.exam-set { background: var(--page); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.exam-set-label, .exam-set-note { font-weight: 700; font-size: 0.9rem; color: var(--muted); margin: 0 0 6px; }
.exam-review { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--page); border: 1px solid var(--line); }
.exam-key { margin: 0 0 8px; }
.exam-why { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.exam-why li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
.exam-why li + li { margin-top: 0; }
.exam-why-letter { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--ink); font-weight: 800; font-size: 0.8rem; }
.exam-why-text p { margin: 0 0 6px; }
.exam-why-text p:last-child { margin-bottom: 0; }
.exam-frqs { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.exam-frqs > li + li { margin-top: 0; }
.exam-frq { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.exam-frq-head { margin-top: 0; }
.exam-frq-points { font-size: 0.85rem; font-weight: 700; color: var(--accent); margin-left: 6px; white-space: nowrap; }
.exam-frq-parts { list-style: none; padding: 0; }
.exam-frq-parts > li { margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.exam-frq-label { font-weight: 800; color: var(--accent); margin: 0 0 4px; }
.exam-response-label { display: block; font-size: 0.85rem; color: var(--muted); margin: 8px 0; }
.exam-response { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 0.97rem; padding: 10px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--page); color: var(--ink); resize: vertical; }
.exam-rubric { margin-top: 8px; background: var(--page); border-radius: 8px; padding: 10px 12px; }
.exam-rubric summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.exam-rubric-list { list-style: none; padding: 0; margin: 10px 0; }
.exam-rubric-list li + li { margin-top: 10px; }
.exam-rubric-list label { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.exam-rubric-points { font-weight: 800; color: var(--accent); font-size: 0.85rem; }
.exam-rubric-ex { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 3px; }
.exam-sample { border-top: 1px dashed var(--line-strong); padding-top: 10px; }
.exam-frq-score { font-size: 1.1rem; margin-top: 16px; }
.exam-section-result { font-weight: 700; color: var(--ink); }
@media (max-width: 560px) {
  .exam-frq { padding: 14px; }
  .exam-rubric-list label { grid-template-columns: 22px minmax(0, 1fr); }
  .exam-rubric-list label .exam-rubric-points, .exam-rubric-list label .exam-rubric-text { grid-column: 2; }
}
.exam-timing { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 14px 0; }
.exam-timing legend { font-weight: 700; color: var(--ink); padding: 0 4px; }
.exam-timing-option { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; min-height: 32px; cursor: pointer; }
.exam-timing-note { font-size: 0.88rem; color: var(--muted); margin: 6px 0 0; }
.exam-timing-used { font-weight: 700; }
/* The exam buttons initTest adds beside the timed-set lengths. */
.test-exams { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.test-exams p { margin: 0; }
.test-exams .btn { white-space: normal; text-align: left; }
.exam-check { min-height: 40px; }
.exam-guide { margin: 10px 0 4px; }