/* quiz-funnel.css — R16 L2 (funnel-recovery).
 *
 * Replaces site/assets/css/section-tally-quiz.css ("ledisa", 8.7 KB, 27/41 dead
 * classes — G50). Only the ~700 bytes that actually match served markup survive:
 * the .tally-quiz loader/iframe wrapper on create-your-song.html. The third brand's
 * #ledisa-quiz-p1 cover (present in NO page) is dropped whole.
 *
 * Adds, in the same bytes, the funnel a11y/contrast fixes that had nowhere else to live:
 *   G34 — the loader text was rgba(var(--color-foreground),.7) = white on #fdf6ee peach
 *         (1.01:1, invisible). It is now brand ink on a brand-blush scrim, and the peach
 *         competitor overlay is gone.
 *   G35 — the quiz's own inputs shipped `outline:none`; every focusable control in the
 *         funnel now paints a visible brand focus ring.
 *   G64 — one error red (was three), a required ⚠ icon before every shown error.
 *   reduced-motion — the loader spinner and the quiz's sideways slide honor the OS setting.
 */

/* ── G50: the useful ledisa bytes (loader + iframe wrapper), verbatim in behavior ── */
.tally-quiz { width: 100%; position: relative; }
.tally-quiz__iframe { display: block; width: 100%; border: 0; }
.tally-quiz__loader {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(251, 244, 246, .94);          /* G34: brand blush, not #fdf6ee peach */
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.tally-quiz__loader.is-visible { opacity: 1; pointer-events: auto; }
.tally-quiz__loader-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(206, 31, 82, .2); border-top-color: #CE1F52;
  border-radius: 50%; animation: tally-quiz-spin .7s linear infinite;
}
.tally-quiz__loader-text {
  margin-top: 14px; font-size: 14px; font-weight: 600;
  color: #2B1722;                                /* G34: was invisible white on peach */
}
@keyframes tally-quiz-spin { to { transform: rotate(360deg); } }
[data-tally-stage-root][data-stage=cover] .tally-quiz__iframe-wrap,
[data-tally-stage-root][data-stage=quiz] .tally-quiz__cover { display: none; }

/* ── G35: a visible brand focus ring on every funnel control ──
 * Plain :focus (not :focus-visible) on purpose — the shipped inline sheet ships
 * `outline:none` on the inputs; equal specificity + later source order wins, and a ring
 * that also shows on programmatic focus is what the keyboard proof and switch users need. */
.q-input:focus,
.q-select-input:focus,
.q-textarea:focus,
.q-option:focus,
.q-next:focus,
.q-back:focus,
.q-select-list button:focus,
.rh-btn:focus {
  outline: 3px solid #CE1F52;
  outline-offset: 2px;
}
/* options carry the ring inside their own rounded box so it reads as one control */
.q-option:focus { outline-offset: -3px; }

/* ── G64: one error red, a required icon, so the snag is never colour-only ── */
.q-error {
  color: #C0143C;                                /* the single funnel error red */
}
.q-error.is-visible::before {
  content: "\26A0";                              /* ⚠ — meets "errors ship without the icon" */
  font-weight: 700;
  margin-right: 6px;
}

/* ── G23: the three essays are optional (the server never required them) ── */
.q-optional {
  font-weight: 400;
  font-size: .72em;
  color: rgba(43, 23, 34, .55);
  letter-spacing: .01em;
}

/* ── G12: keyboard-reachable options read as one control when focused ── */
.q-option[tabindex] { cursor: pointer; }

/* ── reduced motion: the loader spinner and the quiz slide stop for those who ask ── */
@media (prefers-reduced-motion: reduce) {
  .tally-quiz__loader-spinner { animation: none; }
  .rh-slide-right, .rh-slide-left { animation: none !important; }
}