/* The mock test (js/mock.js, spec B.22 to B.24). The start page's and the results' primary with its quiet secondary
   are the shared .menu-actions (app.css). */

/* The running test, on the stage: the part with 'End the test' and the progress bar above the question and the big
   button. On a phone the question is centred in the space left and the button sits at the bottom. */
.mock-head { display: grid; gap: 12px; width: 100%; }
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The quiet button's text lines up with the end of the bar. */
.mock-top .quiet { margin-inline-end: -12px; }
.progress { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--red); transition: width var(--t-move) var(--ease); }
/* The heading takes focus when the question changes (B.0); it is not a control, so no ring. */
.mock-run h1:focus { outline: none; }
.mock-run .cue { text-align: left; }
@media only screen and (max-width: 734px) {
  .stage.mock-run { grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* The results: the speaking time with its caption, then the one point (headline and sub line). */
.mock-figure, .mock-point { display: grid; gap: 6px; }
.mock-point:empty { display: none; }
.mock-figure .t-super { font-variant-numeric: tabular-nums; }

/* All Answers: a card per part, one answer after another. */
.mock-parts { display: grid; gap: 24px; }
.mock-item { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--line); }
.mock-item:nth-child(2) { border-top: 0; padding-top: 0; }
.mock-item-q { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .progress span { transition: none; }
}