/* ============================================================================
   QUESTION CARD — body styling recovered VERBATIM from Chris's Claude Design
   prototype ("AOA Test Center - Question Card.html" inline <style>).
   Scoped under .qc-screen so the borderless card + white background do NOT leak
   to other screens. The Approach Rail header is kept (Chris's request); this file
   restores his BODY: borderless question, the confidence→Key-Takeaway swap, and
   the square NEXT button fused to the right of the Key Takeaway.
   ========================================================================== */

/* Pure white, full-height — no cream showing below the content (Chris, 2026-05-30) */
.qc-screen { background: #ffffff; min-height: 100vh; }
.qc-screen .page { max-width: 1040px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 32px) 80px; }

/* Borderless question card — no bounding box. Structure comes from type, spacing,
   the figure tint, and the answer borders. (Chris: "clean white, no border.") */
.qc-screen .card { border: none; box-shadow: none; background: transparent; padding: 0; border-radius: var(--r-xl); }

/* Figure reference — preview treatment (mini chart thumbnail). */
.qc-screen .figure-row { cursor: pointer; }
.qc-screen .figure-mini { display: none; flex: none; width: 64px; height: 46px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qc-screen .figure-mini svg { display: block; width: 100%; height: 100%; }
.qc-screen .fig--preview { background: var(--surface); border-color: var(--line); }
.qc-screen .fig--preview .figure-row__icon { display: none; }
.qc-screen .fig--preview .figure-mini { display: block; }

.qc-screen .explain-block__label { font-size: 0.92rem; }

/* The reveal regions are hidden until graded. */
.qc-screen .reveal-region { display: none; }
.qc-screen .reveal-region.is-open { display: block; }

/* Key Takeaway + its integrated square NEXT button — lands IN PLACE OF the
   confidence picker, side by side. */
.qc-screen .takeaway-region { display: none; }
.qc-screen .takeaway-region.is-open {
  display: grid;
  grid-template-columns: 1fr clamp(150px, 22%, 200px);
  gap: var(--s-4);
  align-items: stretch;
  margin-top: var(--s-8);
}
.qc-screen .takeaway-region .takeaway { margin-top: 0; }

.qc-screen .takeaway-next {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2);
  border: none; border-radius: var(--r-xl);
  background: var(--orange); color: var(--ink); /* navy on orange — AA (audit) */
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(244,115,33,0.55), 0 2px 0 rgba(0,0,0,0.06);
  transition: background var(--brief) var(--ease-calm), transform var(--glance) var(--ease-decisive),
              box-shadow var(--brief) var(--ease-calm), opacity var(--brief) var(--ease-calm);
}
.qc-screen .takeaway-next svg { transition: transform var(--brief) var(--ease-decisive); }
.qc-screen .takeaway-next:hover { background: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(244,115,33,0.65); }
.qc-screen .takeaway-next:hover svg { transform: translateX(4px); }
.qc-screen .takeaway-next:active { transform: translateY(0); }
.qc-screen .takeaway-next[disabled] { opacity: 0.45; pointer-events: none; box-shadow: none; }
.qc-screen .takeaway-next.is-ready { animation: settle-pulse var(--breath) var(--ease-cinematic); }

/* In-flow Next at the BOTTOM of the explanation — so a student who has scrolled
   through a long answer can advance right where they finish reading, without hunting
   for the button fused up top or relying on the floating sticky (which can't track
   scroll inside the Kajabi iframe embed). Plain in-flow markup, so it works everywhere.
   (Chris, 2026-06-08.) */
.qc-screen .reveal-next {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; margin-top: var(--s-7); min-height: 52px; padding: 0 24px;
  border: none; border-radius: var(--r-xl);
  background: var(--orange); color: var(--ink); /* navy on orange — AA */
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(244,115,33,0.55), 0 2px 0 rgba(0,0,0,0.06);
  transition: background var(--brief) var(--ease-calm), transform var(--glance) var(--ease-decisive),
              box-shadow var(--brief) var(--ease-calm);
}
.qc-screen .reveal-next svg { transition: transform var(--brief) var(--ease-decisive); }
.qc-screen .reveal-next:hover { background: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(244,115,33,0.65); }
.qc-screen .reveal-next:hover svg { transform: translateX(4px); }
.qc-screen .reveal-next:active { transform: translateY(0); }
.qc-screen .reveal-next:focus-visible { outline: 2px solid var(--ink, #161312); outline-offset: 3px; }

/* ACS classification lives in the references block, not the nav row. */
.qc-screen .go-deeper__acs {
  margin-top: var(--s-5);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.01em; line-height: 1.4;
}

/* Per-answer reveal — restate each choice (✓/✗ + letter + text) then its specific
   "why", in answer order, so the student reads straight down without looking back at
   the answer list (Chris, 2026-05-30). */
.qc-screen #explanation .explain-answer { margin-top: var(--s-6); }
.qc-screen #explanation .explain-answer:first-child { margin-top: 0; }
.qc-screen .explain-answer__head {
  display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); line-height: 1.3;
}
.qc-screen .explain-answer__mark { font-weight: 700; flex: none; }
.qc-screen .explain-answer--right .explain-answer__mark { color: var(--success); }
/* red light / green light — the wrong ✗ reads clearly red, not brown (Chris) */
.qc-screen .explain-answer--wrong .explain-answer__mark { color: var(--error); }
.qc-screen .explain-answer__letter { font-family: var(--font-mono); font-weight: 500; color: var(--muted); flex: none; }
.qc-screen .explain-answer__txt { color: var(--ink); }
.qc-screen .explain-answer__you {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); align-self: center;
}
.qc-screen .explain-answer > p { padding-left: calc(1.2em + var(--s-2)); }
.qc-screen .explain-answer--chosen {
  background: rgba(185, 28, 44, 0.06); border-radius: var(--r-md);
  padding: var(--s-4); margin-inline: calc(-1 * var(--s-4));
}
/* "Why this matters" — reads right under the Key Takeaway, before the breakdown */
.qc-screen .explain-block--why { margin-bottom: var(--s-2); }

@media (max-width: 560px) {
  .qc-screen .takeaway-region.is-open { grid-template-columns: 1fr; }
  .qc-screen .takeaway-next { flex-direction: row; gap: var(--s-3); min-height: 60px; }
}

/* ---- Figure shadowbox — zoom + pan (opened from the whole figure bar) ------ */
.qcfig-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(20, 19, 18, 0.72); display: flex; align-items: center; justify-content: center; padding: clamp(10px, 3vw, 24px); }
.qcfig { max-width: 96vw; width: 1100px; max-height: 94vh; display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: var(--r-lg, 14px); overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42); }
.qcfig__head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.qcfig__title { flex: 1 1 auto; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcfig__tools { display: flex; align-items: center; gap: 6px; }
.qcfig__tool { min-width: 36px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--surface, #fff); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.qcfig__tool:hover { background: var(--paper); border-color: var(--orange); color: var(--orange-text); } /* tool glyphs are text → AA; border keeps brand */
.qcfig__tool--txt { padding: 0 12px; font-size: 0.8rem; font-family: var(--font-display); font-weight: 600; }
.qcfig__pct { min-width: 50px; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.qcfig__view { position: relative; overflow: hidden; flex: 1 1 auto; height: 78vh; display: flex; background-color: #eef0f2; background-image: repeating-conic-gradient(#e7e9eb 0% 25%, #f3f4f6 0% 50%); background-size: 22px 22px; cursor: grab; touch-action: none; }
.qcfig__view.is-pan { cursor: grabbing; }
.qcfig__img { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; max-width: none; }
.qcfig__empty { margin: auto; color: var(--muted); padding: 40px; text-align: center; }
.qcfig__cap { padding: 9px 16px; font-size: 0.74rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); }
@media (max-width: 560px) { .qcfig__tool--txt { display: none; } }

/* Sticky Next — floats at the screen bottom while the inline Next (fused to the Key
   Takeaway) is scrolled out of view, so students reading long answers/explanations can
   advance without scrolling back up. Toggled by an IntersectionObserver in test.js. */
.qc-sticky-next {
  position: fixed; left: 50%; bottom: clamp(16px, 4vw, 28px); transform: translateX(-50%);
  z-index: 75; display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 26px; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--orange, #f47321); color: var(--ink, #161312);
  font-family: var(--font-display, sans-serif); font-weight: 600; font-size: .88rem;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(244,115,33,.42), 0 2px 10px rgba(0,0,0,.16);
  animation: qc-sticky-in .24s ease;
}
.qc-sticky-next[hidden] { display: none; }
.qc-sticky-next:hover { background: var(--orange-hover, #ff8236); }
.qc-sticky-next:focus-visible { outline: 2px solid var(--ink, #161312); outline-offset: 3px; }
@keyframes qc-sticky-in { from { opacity: 0; bottom: 0; } to { opacity: 1; } }
@media (max-width: 560px) {
  .qc-sticky-next { left: 16px; right: 16px; transform: none; justify-content: center; bottom: 14px; }
}