/* The shared gradient is sized for the 3926px landing page. On a single-screen
   layout `100% 100%` would squeeze its entire range into one viewport; the
   design shows roughly its top 83%, so oversize it and pin it to the top. */
body {
  background-size: 100% 120%;
  background-position: 0 0;
}

/* ==========================================================================
   quiz.css — the quiz page
   Geometry measured off design/snapshots/quiz.png at the 393px frame.
   Card grid x12..193 / x203..384, rows y214..362 and y369..517.
   Type resolves to the same tokens the main page uses: question 24.45,
   card text 20.35.
   ========================================================================== */

.quiz {
  display: flex;
  flex-direction: column;
  /* dvh rather than vh: on mobile browsers vh includes the collapsing URL bar,
     which pushes the submit button below the fold on first paint. */
  min-height: 100dvh;
  /* Centre the whole block rather than pushing the footer to the bottom. The
     snapshot is a 657px crop; a real phone is ~850 tall, and margin-top:auto
     would strand the Submit button far below the cards. `safe` keeps the top
     reachable if the viewport is shorter than the content. */
  justify-content: safe center;
  max-width: calc(393 * var(--u));
  margin-inline: auto;
  padding-inline: calc(12 * var(--u));
  text-align: center;
}

/* --- Question --------------------------------------------------------- */

.quiz__num {
  padding-top: calc(12 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: 1.2;
  font-weight: var(--fw-bold);
}

.quiz__question {
  /* The design's widest question line is 330px and the next word always
     overflows. A 369px measure (the full padded width) fits more per line and
     re-wraps every question; 340 reproduces the design's breaks. */
  max-width: calc(340 * var(--u));
  margin-inline: auto;
  margin-top: calc(22 * var(--u));
  font-size: calc(var(--fs-body) * var(--u));
  line-height: calc(31 / 24.45);
  font-weight: var(--fw-bold);
}

/* --- Answer grid ------------------------------------------------------- */

.quiz__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Row gap is 7, column gap 10 — measured separately; the design is not
     symmetric here. */
  gap: calc(7 * var(--u)) calc(10 * var(--u));
  margin-top: calc(26 * var(--u));
}

.quiz__card {
  display: grid;
  place-items: center;
  min-height: calc(148 * var(--u));
  padding: calc(12 * var(--u)) calc(17 * var(--u));
  border-radius: calc(14 * var(--u));
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Each position has its own fill. Sampled from the design, where the four
   cards are flat and distinct — they are not a translucent layer picking up
   the gradient, which is what they look like at a glance. */
.quiz__card:nth-child(1) { background-color: #bf5dff; }
.quiz__card:nth-child(2) { background-color: #8b1ed4; }
.quiz__card:nth-child(3) { background-color: #aa70d0; }
.quiz__card:nth-child(4) { background-color: #b547ff; }

.quiz__cardText {
  /* Solved at 20.52 from thirteen card lines; --fs-sub is 20.35. */
  font-size: calc(20.5 * var(--u));
  line-height: calc(26 / 20.35);
  font-weight: var(--fw-bold);
}

/* The radio is the real control; the card is its label. Kept focusable and
   in the layout rather than display:none, so focus and screen readers work. */
.quiz__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quiz__card.is-selected {
  box-shadow: 0 0 0 calc(3 * var(--u)) #ffffff;
}

/* Focus follows the input onto its card, so keyboard users can see where
   they are while arrowing through the options. */
.quiz__radio:focus-visible + .quiz__cardText {
  outline: calc(2 * var(--u)) solid #ffffff;
  outline-offset: calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
}

@media (hover: hover) {
  .quiz__card:hover {
    transform: translateY(calc(-2 * var(--u)));
  }
}

/* --- Submit ------------------------------------------------------------ */

.quiz__foot {
  margin-top: 0;
}

.quiz__submit {
  display: block;
  width: 100%;
  min-height: calc(48 * var(--u));
  margin-top: calc(25 * var(--u));
  border-radius: 999px;
  background-image: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.22) 0%,
    rgb(255 255 255 / 0.42) 50%,
    rgb(255 255 255 / 0.22) 100%
  );
  font-size: calc(22 * var(--u));
  font-weight: var(--fw-bold);
  color: #ffffff;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.quiz__submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.quiz__submit:not(:disabled):hover {
  background-color: rgb(255 255 255 / 0.14);
}

/* --- Progress ---------------------------------------------------------- */

.quiz__progress {
  height: calc(5 * var(--u));
  margin-top: calc(26 * var(--u));
  border-radius: 999px;
  background-color: rgb(255 255 255 / 0.32);
  overflow: hidden;
}

.quiz__bar {
  height: 100%;
  border-radius: 999px;
  background-color: #ffffff;
  transition: width var(--dur-base) var(--ease-out);
}

.quiz__count {
  margin-top: calc(15 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.2;
  font-weight: var(--fw-regular);
}

/* --- Result ------------------------------------------------------------ */

.quiz__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: calc(16 * var(--u));
  padding-block: calc(40 * var(--u));
}

.quiz__result[hidden],
.quiz__foot[hidden] {
  display: none;
}

/* These headings are focused programmatically so the announcement lands in the
   right place. They are not Tab-reachable, so the ring has no keyboard value
   and only reads as a stray box. */
.quiz__num:focus,
.quiz__resultTitle:focus {
  outline: none;
}

.quiz__resultTitle {
  font-size: calc(var(--fs-h3) * var(--u));
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
}

.quiz__score {
  font-size: calc(44 * var(--u));
  line-height: 1.1;
  font-weight: var(--fw-bold);
}

.quiz__resultNote {
  max-width: calc(300 * var(--u));
  font-size: calc(var(--fs-sub) * var(--u));
  line-height: var(--lh-sub);
}

.quiz__actions {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  width: 100%;
  margin-top: calc(12 * var(--u));
}

.quiz__btn {
  display: grid;
  place-items: center;
  min-height: calc(48 * var(--u));
  border-radius: 999px;
  font-size: calc(20 * var(--u));
  font-weight: var(--fw-bold);
  color: #ffffff;
  background-color: rgb(255 255 255 / 0.22);
}

.quiz__btn--ghost {
  background-color: transparent;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgb(255 255 255 / 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .quiz__card,
  .quiz__bar,
  .quiz__submit {
    transition: none;
  }
  .quiz__card:hover {
    transform: none;
  }
}