/* -------------------------------------------------------------- test mode
   Twelve questions from across a unit, nothing marked until the end.

   The look is deliberately quieter than the ladder's: no combo pill, no trail
   of pips, no rung label, no color on an answer. Every one of those is a way
   the ladder tells him how he is doing, and this screen's job is to tell him
   nothing at all until he has finished. See public/test.js.
*/

.test-wrap { max-width: 640px; margin: 0 auto; padding: 0 2px 40px; }

.test-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.test-count {
  font-family: var(--pixel); font-size: 12px; letter-spacing: .08em; color: var(--turq);
}
.test-of { margin-left: auto; font-size: 14px; color: var(--muted); }

/* How far through he is. It counts questions ANSWERED and says nothing about
   how they went - the one number this screen is allowed to show him. */
.test-bar {
  height: 6px; border-radius: 3px; background: var(--line);
  overflow: hidden; margin: 0 0 18px;
}
.test-bar i { display: block; height: 100%; background: var(--turq); transition: width .3s ease; }

.test-note { margin: 16px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.test-note.warn { color: var(--amber, var(--turq)); }

/* ------------------------------------------------------------ the result */

.test-score-head { font-size: 15px; margin: 6px 0 4px; }
.test-score {
  display: flex; align-items: baseline; gap: 10px; justify-content: center; margin: 14px 0 6px;
}
.test-score b { font-family: var(--doto, var(--pixel)); font-size: 64px; color: var(--turq); }
.test-score span { font-size: 18px; color: var(--muted); }
.test-verdict { margin: 0 0 4px; text-align: center; font-size: 17px; }
.test-earned { margin: 0 0 8px; text-align: center; font-size: 15px; color: var(--muted); }

.test-sub {
  font-family: var(--pixel); font-size: 12px; letter-spacing: .1em;
  color: var(--muted); margin: 28px 0 10px;
}

/* The work list. It is above the paper on purpose: what to do next is worth
   more to him than what he put for question 7. */
.test-weak { display: grid; gap: 10px; }
.test-weak-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: var(--radius); box-shadow: 0 5px 0 var(--drop);
}
.test-weak-row:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--drop); }
.test-weak-row b { font-family: var(--pixel); font-size: 12px; color: var(--turq); flex: none; }
.test-weak-row span { flex: 1; font-size: 16px; }
.test-weak-row i { font-style: normal; font-size: 14px; color: var(--muted); flex: none; }

/* His paper back. Every question, right ones included - half a paper is no
   use to a boy going back over it. */
.test-paper { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.test-row {
  padding: 14px 16px; background: var(--card);
  border: 2px solid var(--line); border-left-width: 6px; border-radius: var(--radius);
}
.test-row.hit { border-left-color: var(--green-deep, var(--green)); }
.test-row.miss { border-left-color: var(--line); }
.test-row-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.test-mark { font-size: 18px; }
.test-row.hit .test-mark { color: var(--green); }
.test-lesson { font-size: 14px; color: var(--muted); }
.test-prompt { margin: 0 0 8px; font-size: 16px; }
.test-answers { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: 15px; }
.test-yours { color: var(--muted); }
.test-yours b, .test-true b { color: var(--ink); }
.test-true { color: var(--muted); }
/* A figure in the review is a reminder, not the question - it comes down to
   half the width so a twelve-question paper is still scrollable. */
.test-paper .fig-wrap.small { max-width: 240px; margin: 4px 0 0; }

.test-wrap .ghost-btn { width: 100%; margin-top: 26px; }

/* ------------------------------------------- the button on the unit screen */

.unit-test { max-width: 640px; margin: 34px auto 0; }
.unit-test-why { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.unit-test .big-btn { width: 100%; }
.unit-test-last { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.unit-test-last b { color: var(--ink); }