/* Train With Moe - /quiz/ only.
 *
 * Page scoped. The site stylesheet is loaded first and carries the shell this
 * page shares with every other one: the header, .overline, .btn-gold-solid,
 * .field-error, .hp-field and the fonts. Only the quiz layout is here.
 *
 * It lives beside the page rather than inside styles.css because styles.css is
 * loaded by all ten public pages and none of them can reach the quiz, so
 * putting ~200 lines of quiz layout in there would have every page paying for
 * it and would force a ?v= bump across all of them. Versioned from birth.
 *
 * Everything below uses the shared tokens. No colour is written by hand, so a
 * change to the brand ramp reaches this page like it reaches the rest.
 *
 * Phone first: the base rules are the phone layout and the only media query
 * widens it. Tap targets are full width rows at a comfortable height, because
 * this page is answered with a thumb.
 */

.quiz {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.quiz-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Intro ---- */

.quiz-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 52px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 10px 0 14px;
}

.quiz-intro h1 span { color: var(--accent-primary); }

.quiz-lede {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}

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

.quiz-progress { display: flex; flex-direction: column; gap: 8px; }

/* A class that sets display beats the hidden attribute, so anything given
   display here has to say what hidden means for it as well. Without this the
   progress bar sits above the result claiming the quiz is still running. */
.quiz-progress[hidden] { display: none; }

.quiz-progress-bar {
  height: 3px;
  background: var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.quiz-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-primary);
  border-radius: 999px;
  transition: width 180ms ease-out;
}

.quiz-progress-txt {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- A question ---- */

.quiz-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;         /* a fieldset will not shrink below its content without this */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-step[hidden] { display: none; }

.quiz-q {
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6.5vw, 33px);
  line-height: 1.12;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.quiz-options { display: flex; flex-direction: column; gap: 10px; }

/* The whole row is the tap target. The radio itself is taken out of the flow
   rather than hidden with display:none, which would take it out of the tab
   order and off every screen reader with it. */
.quiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}

.quiz-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.quiz-opt-txt {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.4;
}

.quiz-opt:hover { background: var(--bg-surface-hover); border-color: var(--border-hairline); }

.quiz-opt:has(input:checked) {
  border-color: var(--accent-primary);
  background: var(--bg-surface-raised);
}

/* Keyboard focus has to be visible on the row, because the control that
   actually has focus is the one taken out of the flow above. */
.quiz-opt:has(input:focus-visible) {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.quiz-back {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-tertiary);
  cursor: pointer;
  text-decoration: underline;
}

.quiz-back:hover { color: var(--text-secondary); }

/* ---- The email gate ---- */

.quiz-capture-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.5;
}

.quiz-fields { display: flex; flex-direction: column; gap: 10px; }

.quiz-fields input {
  width: 100%;
  padding: 15px 16px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;      /* 16px stops iOS zooming the page on focus */
}

.quiz-fields input::placeholder { color: var(--text-disabled); }
.quiz-fields input:focus { outline: none; border-color: var(--border-focus); }
.quiz-fields button { width: 100%; }

.quiz-fine {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ---- The result ---- */

.quiz-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The site stylesheet gives every section 64px of top padding, which is
     right for a full width band on a long page and wrong for a panel that
     swaps in where the form was. */
  padding: 0;
}

.quiz-result[hidden] { display: none; }

.quiz-result h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 46px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin: 4px 0 0;
}

.quiz-reason {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-primary);
}

.quiz-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.quiz-cta { display: block; text-align: center; text-decoration: none; margin: 6px 0; }

.quiz-built-h {
  margin: 10px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.quiz-built {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-left: 14px;
  border-left: 2px solid var(--border-subtle);
}

.quiz-again {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.quiz-again a { color: var(--accent-primary); }

/* ---- Wider than a phone ---- */

@media (min-width: 700px) {
  .quiz { padding: 48px 24px 80px; }
  .quiz-inner { gap: 28px; }
  .quiz-opt { min-height: 56px; }
  .quiz-opt-txt { font-size: 15.5px; }
  .quiz-fields { flex-direction: row; flex-wrap: wrap; }
  .quiz-fields input { flex: 1 1 220px; width: auto; }
  .quiz-fields button { width: auto; flex: 0 0 auto; }
}

/* Somebody who asked for less movement gets the bar snapping rather than
   sliding. Nothing here depends on the transition to be understood. */
@media (prefers-reduced-motion: reduce) {
  .quiz-progress-bar span { transition: none; }
}