/*
 Sizing lives in these variables so one media query can rescale the whole
 quiz. The question's left inset is computed from the option metrics, so
 changing them here keeps question and answers aligned automatically.
*/
:root {
  /* Width of the border that marks a selected answer. */
  --opt-border: 40px;
  --opt-padding: 1rem;
  /* Extra inset on the text inside each label (see `label span`). */
  --opt-text-inset: 0.5rem;

  --q-font: 50px;
  --opt-font: 100px;
  --btn-font: 100px;
  --page-pad: 3rem;
  --opt-min: 400px;
  --img-max: 575px;
  --row-gap: 1rem;
}

/*
 Phones. The desktop sizes assume roughly 1000px of width: 100px options and
 a 400px minimum do not fit a 375px screen, and a 40px selection border eats
 a fifth of it. Everything scales together.
*/
@media (max-width: 700px) {
  :root {
    --opt-border: 10px;
    --opt-padding: 0.5rem;
    --opt-text-inset: 0.25rem;

    --q-font: 1.5rem;
    --opt-font: 2.25rem;
    --btn-font: 1.75rem;
    --page-pad: 0.75rem;
    --opt-min: 0px;
    --img-max: 100%;
    --row-gap: 0.5rem;
  }
}

/*
 Remove the radio buttons from the page.
*/
input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/*
 Limit the size of added images
*/
img {
  max-width: var(--img-max);
  height: auto;
}

main {
  /* 100% rather than 100vw: 100vw includes the scrollbar and so forces a
     horizontal scroll on desktop. */
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
}

#question-section {
  font-size: var(--q-font);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  /* Match the option labels' inset so question and answers align. */
  padding-left: calc(var(--opt-border) + var(--opt-padding) + var(--opt-text-inset));
}

#choices {
  font-size: var(--opt-font);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

#choices > * {
  font-size: var(--opt-font);
  display: flex;
  /*
   Size to the content rather than a fixed width: the padding and the
   selection border eat into the content box, and a fixed width made answers
   like "२π मीटर<sup>२</sup>" wrap mid-unit. min-width keeps short answers
   from looking cramped on wide screens, and drops to 0 on phones.
  */
  min-width: var(--opt-min);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}

.button-container {
  font-size: var(--btn-font);
  display: flex;
  justify-content: flex-start;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  gap: 2rem;
  margin: var(--row-gap);
}

label {
  width: inherit;
  /* Answers are short units like २π मीटर<sup>२</sup>; never split them across lines. */
  white-space: nowrap;
  padding: 0.5rem var(--opt-padding);
  border-radius: 0.3rem;
  /*
   The selected state draws a border. Reserve that space here as a
   transparent border so selecting an option only changes its colour --
   otherwise the label grows and shunts every option below it down.
  */
  border: var(--opt-border) solid transparent;
}

label,
button {
  cursor: pointer;
}

/*
Style to indicate a selected, correct,
and/or incorrect answers.
*/
label:has(~ :checked) {
  border-color: black;
}

label:has(~ .correct:checked) {
  border-color: green;
}

label:has(~ .incorrect:checked) {
  border-color: red;
}

label span {
  padding-left: var(--opt-text-inset);
}

.hidden {
  display: none !important;
}

/*
 Units like मीटर<sup>२</sup>. Without line-height:0 the raised digit
 stretches the line box at this font size; nowrap keeps the exponent
 attached to its unit instead of wrapping onto the next line.
*/
sup {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  white-space: nowrap;
}