/* Quiz — instructions page, the paper, and the marked review. */

.quiz { max-width: 46rem; margin-inline: auto; }
.quiz__bar {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.quiz__timer {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-mid); font-variant-numeric: tabular-nums;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--surface-line); border-radius: var(--radius-pill);
}
.quiz__timer.is-low { color: var(--y-red); border-color: var(--y-red); }
.quiz__timer.is-out { color: var(--y-red); }

.quiz__note {
  margin-top: var(--s-5);
  font-size: var(--fs-sm); color: var(--text-lo);
}
.quiz__start { margin-top: var(--s-7); }

/* --- Instructions page ---------------------------------------------------- */

.quiz__facts {
  display: grid; gap: 0;
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-1); margin: 0;
}
.quiz__facts > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--surface-line);
}
.quiz__facts > div:last-child { border-bottom: 0; }
.quiz__facts dt { color: var(--text-lo); font-size: var(--fs-sm); margin: 0; }
.quiz__facts dd {
  margin: 0; color: var(--text-hi);
  font-family: var(--font-mono); font-size: var(--fs-body);
}

.quiz__preview {
  display: grid; gap: var(--s-4);
  margin: 0 0 var(--s-6); padding-left: var(--s-6);
  color: var(--text-mid); font-size: var(--fs-body-lg); line-height: 1.5;
  max-width: 52rem;
}
.quiz__preview li::marker { color: var(--y-yellow); font-family: var(--font-mono); }

/* --- The paper ------------------------------------------------------------ */

/* Every question is visible by default. The runner adds .quiz--paged and only
   THEN does one-at-a-time paging start, so with JS off the whole paper is on
   the page and every radio is reachable. */
.qcard { border: 0; padding: 0; margin: 0 0 var(--s-10); }
.quiz--paged .qcard { display: none; margin-bottom: 0; }
.quiz--paged .qcard.is-active { display: block; }

.qcard__q {
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--text-hi); line-height: 1.35; padding: 0; margin-bottom: var(--s-6);
}
.qcard__n { color: var(--text-lo); font-family: var(--font-mono); font-size: var(--fs-body); }

.qcard__opts { display: grid; gap: var(--s-3); }

.qopt {
  position: relative;
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text-hi);
  font-family: inherit; font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.qopt:hover { transform: translateX(3px); border-color: var(--y-yellow); }
.qopt__t { flex: 1 1 auto; }

/* The radio is the real control — it keeps keyboard and screen-reader
   behaviour for free — but it is visually replaced by the lettered key. */
.qopt__input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.qopt__k {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--surface-2); color: var(--text-lo);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.qopt:has(.qopt__input:checked) {
  border-color: var(--y-yellow);
  background: color-mix(in srgb, var(--y-yellow) 10%, var(--surface-1));
}
.qopt:has(.qopt__input:checked) .qopt__k { background: var(--y-yellow); color: var(--y-black); }
.qopt:has(.qopt__input:focus-visible) { outline: 2px solid var(--y-yellow); outline-offset: 2px; }

.quiz__nav {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-8); align-items: center;
}
.quiz__nav [data-quiz-finish] { margin-left: auto; }

.quiz__navigator {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: var(--s-2); margin-top: var(--s-8);
  padding-top: var(--s-6); border-top: 1px solid var(--surface-line);
}
.quiz__navitem {
  padding: var(--s-2) 0; cursor: pointer;
  border: 1px solid var(--surface-line); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-lo);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.quiz__navitem.is-answered { background: var(--y-yellow); color: var(--y-black); border-color: var(--y-yellow); }
.quiz__navitem.is-current  { outline: 2px solid var(--y-yellow); outline-offset: 1px; }

/* --- The marked review ---------------------------------------------------- */

.qreview { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.qreview__item {
  padding: var(--s-6); border: 1px solid var(--surface-line);
  border-left-width: 4px; border-radius: var(--radius); background: var(--surface-1);
}
.qreview__item.is-correct { border-left-color: var(--y-green); }
.qreview__item.is-wrong   { border-left-color: var(--y-red); }

.qreview__q {
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--text-hi); line-height: 1.35; margin: 0 0 var(--s-2);
}
.qreview__verdict {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-lo); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 var(--s-5);
}
.qreview__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.qreview__opt {
  display: grid; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-0); color: var(--text-mid); font-size: var(--fs-body);
}
/* Colour is never the only signal — the badge says it in words, because
   red-green colour blindness runs at roughly 8% among men and that is a large
   share of an engineering cohort. */
.qreview__opt.is-key {
  border-color: var(--y-green);
  background: color-mix(in srgb, var(--y-green) 12%, var(--surface-0));
  color: var(--text-hi);
}
.qreview__opt.is-picked {
  border-color: var(--y-red);
  background: color-mix(in srgb, var(--y-red) 12%, var(--surface-0));
  color: var(--text-hi);
}
.qreview__opt .badge { justify-self: start; }
.qreview__exp {
  padding-top: var(--s-3); border-top: 1px dashed var(--surface-line);
  color: var(--text-mid); font-size: var(--fs-sm); line-height: 1.55;
}

@media (max-width: 40rem) {
  .quiz__nav [data-quiz-finish] { margin-left: 0; width: 100%; }
}

/* --- Hub filter ----------------------------------------------------------- */
.quiz__filter {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  margin-bottom: var(--s-8);
}
.quiz__filter .input { flex: 1 1 12rem; min-width: 0; }
.quiz__filter select.input { flex: 0 1 14rem; }