/* quiz plus: the sheet of the options of the second round (plus.js): pictures,
   fact tables, stop rules, sheets, the spoken round, the host view, the paper
   test. It is a file of its own because the 45 KB page budget leaves style.css
   about 1.4 KB of room: plus-render.mjs links it in front of the tool, and only
   on a page that sets one of those options, so every other quiz page loads what
   it always did. Base tokens only, like style.css; no colour of its own. */

/* The picture box has one height for every question, so the choices under it
   stay where they are from one question to the next. */
.quiz__pic {
  display: grid;
  place-items: center;
  height: 11rem;
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.quiz__pic[data-wide] {
  height: 16rem;
}

.quiz__pic img,
.quiz__choice-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quiz__choices:has(.quiz__choice-pic) {
  grid-template-columns: 1fr 1fr;
}

.quiz__choice-pic {
  flex: 1 1 4rem;
  height: 4.5rem;
}

/* The name under a picture would give the answer away: it shows once the question is marked. */
.quiz__choice:has(:enabled) .quiz__choice-pic[data-hide] ~ .quiz__text {
  display: none;
}

.quiz__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.quiz__meta {
  display: grid;
  gap: var(--space-1);
}

.quiz__meta > *,
.quiz__factsbox > *,
.quiz__facts-panel > *,
.quiz__sheet-body > *,
.quiz__sheet-body p,
.quiz__stage > *,
.quiz__stage-card > *,
.quiz__stage-answer > * {
  min-width: 0;
  margin: 0;
}

.quiz__tag,
.quiz__find,
.quiz__state {
  width: min(100%, 26rem);
}

.quiz__asof,
.quiz__lookup,
.quiz__report {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* With a stop rule an answer is final, as it is at the counter: no way back. */
.quiz[data-qp-stop][data-phase="run"] [data-act="back"] {
  display: none;
}

/* ---------------------------------------------------------- the facts box */

.quiz__factsbox,
.quiz__facts-panel {
  display: grid;
  gap: var(--space-3);
}

.quiz__factsbox {
  padding: var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.quiz__facts-title,
.quiz__sheet-title {
  font: var(--display-weight) var(--step-1) / 1.3 var(--font-display);
}

.quiz__dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-3);
}

.quiz__dl div {
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--brand);
}

.quiz__dl dt {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.quiz__dl dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quiz__official-link {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  text-align: start;
}

.quiz__facts-table {
  font-size: var(--step--1);
}

.quiz__facts-table th[scope="row"] {
  white-space: nowrap;
}

.quiz__facts-all > summary,
.quiz__sheet > summary {
  padding-block: var(--space-3);
  font-weight: 700;
  cursor: pointer;
}

/* -------------------------------------------- a page searched as a printable */
/* The print job comes first on such a page: one choice of sheet, the loud button, one line.
   A hairline parts it from the question under it. */
.quiz__lead {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.quiz__lead > * {
  margin: 0;
}

.quiz__lead-pick {
  width: min(100%, 34rem);
}

.quiz__lead-pick .select {
  width: 100%;
  text-overflow: ellipsis;
}

/* On a wide screen the menu and the button share a row, so the whole first question shows under them. */
@container (min-width: 44rem) {
  .quiz__lead {
    grid-template-columns: minmax(0, 34rem) auto;
    align-items: end;
    justify-content: start;
  }

  .quiz__lead-how {
    grid-column: 1 / -1;
  }
}

/* On a phone the answer buttons float at the foot of the screen (style.css). On a page whose loud button
   prints they wait for the first pick, so they never cover "Print the worksheet". */
@media (max-width: 47.99rem) {
  .quiz:has([data-act="lead-print"].btn-primary) .quiz__actions {
    position: static;
  }
}

/* "See all 250 with answers", beside the question count. The padding makes the tap target
   44px tall and the margin takes it back, so the row is no taller for it. */
.quiz__all {
  margin-block: -0.75rem;
  padding-block: 0.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-align: end;
}

/* With the practice questions only: a scored run has a clock in this row, and its answers wait for the end. */
.quiz:not([data-phase="ask"], [data-phase="shown"]) .quiz__all {
  display: none;
}

/* "words": a brand may write English on the card with CSS (certpracticetest: "Marked here when you check", a ruled
   panel beside the question). words.js cannot reach CSS text, so a page in another language leaves it out. */
.quiz[lang][data-mode] .quiz__card[data-phase]::after {
  content: none;
}

/* ------------------------------------------------------------------ sheets */

.quiz__sheets {
  display: grid;
  gap: var(--space-2);
}

.quiz__sheet {
  padding-inline: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.quiz__sheet > summary .hint {
  margin-inline-start: var(--space-2);
  font-weight: 400;
}

.quiz__sheet-body {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding-bottom: var(--space-3);
}

.quiz__sheet-head {
  margin: var(--space-3) 0 var(--space-2) !important;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line-strong);
  font-weight: 700;
}

.quiz__sheet-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quiz__sheet-rows li {
  display: flex;
  gap: var(--space-2);
  align-items: start;
  break-inside: avoid;
}

.quiz__tick {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

[data-style]:not([data-style="checklist"]) > * .quiz__tick {
  display: none;
}

.quiz__sheet-t {
  font-weight: 700;
}

/* A writing sheet: room under every line to copy it out by hand. */
[data-style="lines"] .quiz__sheet-rows li {
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--line-strong);
}

.quiz__sheet-intro,
.quiz__sheet-source {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* ------------------------------------------- spoken round and host view */
/* While one is open it is the whole tool; the quiz under it keeps its place. */

.quiz[data-qp-stage] > :not(.quiz__stage, [data-announce]) {
  display: none;
}

.quiz__stage,
.quiz__stage-card,
.quiz__stage-answer,
.quiz__tally,
.quiz__team {
  display: grid;
  gap: var(--space-3);
}

.quiz__stage-head,
.quiz__team-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.quiz__stage-head > * {
  margin: 0;
}

.quiz__stage-card {
  align-content: start;
  min-height: 15rem;
  padding: var(--space-5) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.quiz__stage-card:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.quiz__stage-q {
  font: var(--display-weight) var(--step-3) / 1.2 var(--font-display);
  text-wrap: balance;
}

.quiz__stage[data-kind="host"] .quiz__stage-q {
  font-size: var(--step-4);
}

.quiz__stage-english {
  color: var(--ink-muted);
}

.quiz__stage-choices,
.quiz__teams {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.quiz__stage-choices {
  font-size: var(--step-1);
}

.quiz__stage-choices li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.quiz__stage-choices li[data-mark] {
  border-color: var(--ok);
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 1px var(--ok);
}

.quiz__stage-answer {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.quiz__stage-accepted,
.quiz__stage-final {
  padding-inline-start: var(--space-5);
  font-size: var(--step-1);
}

.quiz__stage-accepted {
  font-weight: 700;
}

.quiz__tally {
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.quiz__tally > * {
  margin: 0;
}

.quiz__teams {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.quiz__team {
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.quiz__team-name {
  width: 100%;
  min-width: 0;
  font-weight: 700;
  text-align: center;
}

.quiz__team-points {
  font: var(--display-weight) var(--step-2) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.quiz__tally-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

@container (max-width: 26rem) {
  .quiz__stage-card {
    padding: var(--space-4) var(--space-3);
  }

  .quiz__stage-q,
  .quiz__stage[data-kind="host"] .quiz__stage-q {
    font-size: var(--step-2);
  }

  .quiz__pic {
    height: 9.5rem;
  }

  .quiz__pic[data-wide] {
    height: 12rem;
  }
}

/* The answer rises into place and a new point lands with a small bounce: 250ms, once. */
@media (prefers-reduced-motion: no-preference) {
  .quiz__stage-answer,
  .quiz__stage-choices .quiz__mark {
    animation: quiz-reveal 0.25s var(--ease);
  }

  .quiz__team-points[data-bump] {
    animation: quiz-bump 0.25s var(--ease);
  }
}

@keyframes quiz-reveal {
  from { transform: translateY(0.5rem); opacity: 0; }
}

@keyframes quiz-bump {
  50% { transform: scale(1.35); }
}

/* ----------------------------------------------- paper test, answer sheet */

@media print {
  .quiz__paper-pic {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100pt;
    margin: 3pt 0;
  }

  .quiz__paper-pic[data-wide] {
    max-height: 180pt;
  }

  .quiz__paper-how {
    margin: 0 0 8pt;
    font-size: 10pt;
  }

  .quiz__bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 0 30pt;
    margin-top: 10pt;
  }

  .quiz__bubble-col,
  .quiz__paper-shortkey {
    margin: 0;
    padding-inline-start: 24pt;
  }

  .quiz__bubble-col li,
  .quiz__paper-shortkey li {
    margin-bottom: 5pt;
    break-inside: avoid;
  }

  .quiz__bubble {
    display: inline-grid;
    place-items: center;
    width: 15pt;
    height: 15pt;
    margin-inline-end: 7pt;
    border: 1pt solid CanvasText;
    border-radius: 50%;
    font-size: 8pt;
  }

  .quiz__paper-shortkey {
    margin-block: 10pt;
    columns: 3;
    column-gap: 18pt;
  }

  .quiz__sheet-paper .quiz__sheet-title {
    font-size: 15pt;
  }

  .quiz__sheet-paper p {
    margin: 0 0 4pt;
  }

  .quiz__sheet-paper .quiz__sheet-source {
    margin-top: 12pt;
  }
}