/* ============================================================================
   AOA TEST CENTER — DESIGN SYSTEM
   The foundation every screen of the FAA written-test platform inherits.
   v1.0 · Built alongside the Question Card + Reveal Flow screen.

   Genre: "focus-mode learning app" — quiet cockpit, not mission control.
   Discipline: orange is a scalpel (ONE accent per view), wrong answers are
   never an emergency, whitespace is generous, motion is calm and named.

   This file is the source of truth for the rest of the product. Reuse the
   tokens and component classes below verbatim. Do not invent new colors.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ===== Color — surfaces & ink ===== */
  --ink:            #161312;   /* primary text + dark surfaces (warm near-black) */
  --ink-elevated:   #211d1c;   /* raised dark surfaces (the Key Takeaway tray)   */
  --paper:          #ffffff;   /* page background — white (kills cream-on-scroll) */
  --surface:        #ffffff;   /* cards                                          */
  --line:           #e6e3e0;   /* borders, dividers — warm, not neutral gray     */
  --body-text:      #333333;   /* body copy on light                             */
  --muted:          #6b6663;   /* secondary text, metadata                       */

  /* ===== Color — the one accent ===== */
  --orange:         #f47321;   /* THE brand color: primary action + selection    */
  --orange-hover:   #ff8236;   /* lightens on hover (intentional)                */
  --orange-soft:    rgba(244,115,33,0.08);  /* tint backgrounds, rails           */
  /* Brand orange as TEXT on white reads at only ~2.9:1 — fails WCAG AA (4.5:1).
     Pilots study on iPads in daylight; the eyebrows and codes have to hold up.
     --orange-text is the AA-safe TEXT role: 5.01:1 on white, 4.6:1 on the
     --orange-soft tints. Use it wherever orange renders as WORDS or NUMBERS on
     a light surface. Keep --orange for everything non-text: fills, icons,
     rails, borders, focus rings — and for text sitting ON DARK surfaces
     (#b8500a only manages ~3.7:1 on --ink; #f47321 reads 6.4:1 there, so dark
     surfaces re-override back to --orange). Promoted from instructor.css,
     W3 AA-contrast pass, 2026-06-10. */
  --orange-text:    #b8500a;

  /* ===== Color — calm status ===== */
  --success:        #2c7a4b;   /* correct / ready — a calm green, not SaaS-bright */
  --success-soft:   rgba(44,122,75,0.10);
  --caution:        #c47b1f;   /* shortfall + the GENTLE wrong-answer treatment   */
  --caution-soft:   rgba(196,123,31,0.10);
  --guess:          #8a807a;   /* muted warm tone — the "Guessing" confidence     */
  --guess-soft:     rgba(138,128,122,0.12);

  /* ===== Color — RESERVED ===== */
  --error:          #b91c2c;   /* SYSTEM FAILURE ONLY (can't reach server).       */
                               /* NEVER for a wrong answer. A wrong answer is     */
                               /* how people learn — the UI must not punish it.   */

  /* ===== Type — families ===== */
  --font-display:   'Oswald', 'Arial Narrow', sans-serif;   /* headlines, labels */
  --font-body:      'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace; /* metadata, codes */

  /* ===== Type — roles (see component classes for application) ===== */
  --tracking-eyebrow: 0.14em;  /* eyebrow / kicker letter-spacing            */
  --tracking-label:   0.10em;  /* section label letter-spacing               */
  --tracking-wordmark:0.08em;

  /* ===== Spacing — 8px base ===== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* ===== Radius ===== */
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;

  /* ===== Shadow ===== */
  --shadow-card:     0 2px 8px rgba(22,19,18,0.05);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.12);
  --focus-ring:      0 0 0 3px rgba(244,115,33,0.15);  /* the orange glow */

  /* ===== Motion — aviation-named, calm, never bouncy ===== */
  --tap:    80ms;
  --glance: 160ms;
  --brief:  280ms;
  --beat:   480ms;
  --breath: 720ms;
  --ease-calm:      cubic-bezier(.4, 0, .2, 1);
  --ease-decisive:  cubic-bezier(.2, 0, 0, 1);
  --ease-cinematic: cubic-bezier(.16, 1, .3, 1);
  --stagger: 80ms;   /* checklist.cascade interval */
}

/* Every animation collapses under reduced-motion. Ship-blocker if removed. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tap: 0.01ms; --glance: 0.01ms; --brief: 0.01ms;
    --beat: 0.01ms; --breath: 0.01ms; --stagger: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body-text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Universal focus indicator — visible, never communicated by opacity alone.
   A solid outline (not just the soft box-shadow ring) for WCAG 2.2 focus
   appearance. Outline doesn't affect layout, so this is purely additive. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: var(--orange) !important;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------------------------
   3. TYPE ROLES
   -------------------------------------------------------------------------- */
/* Eyebrow / kicker — instrument-panel labeling.
   TEXT role on light paper → --orange-text (AA). Dark hosts re-override. */
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--orange-text);
}
/* Section label (H4) — the orange uppercase sub-labels inside the reveal.
   TEXT role on light paper → --orange-text (AA). Dark hosts re-override. */
.t-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--orange-text);
}
/* Heading (H2) — title case, ink. */
.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
/* Question text — the most prominent text on the card. */
.t-question {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.5vw, 1.18rem);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
/* Body — explanation copy reads at the SAME size as the answers. */
.t-body { font-size: 1rem; line-height: 1.55; color: var(--body-text); text-wrap: pretty; }
/* Metadata / codes. */
.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
/* Primary action — the single orange "thing" per state (NEXT / FINISH). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-6);
  border: none;
  border-radius: var(--r-md);
  background: var(--orange);
  color: var(--ink); /* navy on orange — AA-compliant (was #fff = 2.87:1). Audit 2026-05-31. */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--brief) var(--ease-calm),
              transform var(--tap) var(--ease-decisive),
              box-shadow var(--brief) var(--ease-calm), opacity var(--brief) var(--ease-calm);
}
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary svg { transition: transform var(--brief) var(--ease-decisive); }
.btn-primary:hover svg { transform: translateX(4px); }
/* Disabled = hidden-in-place until the reveal enables it. */
.btn-primary[disabled] { opacity: 0; pointer-events: none; }
/* The brief emphasis pulse as the cascade settles. */
.btn-primary.is-ready { animation: settle-pulse var(--breath) var(--ease-cinematic); }

/* Quiet icon button (the discreet "?"). */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--glance) var(--ease-calm),
              border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm);
}
.btn-icon:hover { color: var(--orange); border-color: var(--orange); }

/* ----------------------------------------------------------------------------
   5. SESSION BAR + PROGRESS
   -------------------------------------------------------------------------- */
.session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) clamp(16px, 4vw, 32px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: baseline; gap: var(--s-2); }
.wordmark__aoa {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: var(--tracking-wordmark); color: var(--orange);
  /* stays #f47321: this is the brand logotype — WCAG 1.4.3 exempts text that is
     part of a logo or brand name. Informational text never reuses this class. */
}
.wordmark__sub {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: var(--tracking-wordmark); color: var(--ink);
}
.status-cluster { display: flex; align-items: center; gap: var(--s-2); }

/* Status pills — micro instrument labels. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  white-space: nowrap;
}
.pill--cert { color: var(--body-text); }
.pill--mode-study { color: var(--orange-text); border-color: rgba(244,115,33,0.35); background: var(--orange-soft); } /* text on tint → AA text role */
.pill--mode-mock  { color: #fff; background: var(--ink); border-color: var(--ink); }
.pill--count { font-variant-numeric: tabular-nums; }

/* Thin progress fill — fills smoothly, never jumps. */
.progress { height: 4px; background: var(--line); width: 100%; }
.progress__fill {
  height: 100%; background: var(--orange);
  transition: width var(--breath) var(--ease-cinematic);
}

/* ----------------------------------------------------------------------------
   6. QUESTION CARD
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 4vw, 40px);
}

/* Figure row — figure feels like part of the question, not a document. */
.figure-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--orange-soft);
  border: 1px solid rgba(244,115,33,0.18);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}
.figure-row__icon { color: var(--orange); flex: none; }
.figure-row__meta { flex: 1; min-width: 0; }
.figure-row__label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink);
}
.figure-row__hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.figure-thumb {
  display: flex; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-3);
  border: 1px solid rgba(244,115,33,0.4); border-radius: var(--r-md);
  background: var(--surface); color: var(--orange-text); /* "FIG 23" is text → AA role */
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  transition: background var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm);
  flex: none;
}
.figure-thumb:hover { background: var(--orange-soft); border-color: var(--orange); }

/* ----------------------------------------------------------------------------
   7. ANSWER LIST
   -------------------------------------------------------------------------- */
.answers { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.answer {
  display: flex; align-items: flex-start; gap: var(--s-4);
  width: 100%; min-height: 48px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: left; cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color var(--brief) var(--ease-calm),
              background var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm),
              opacity var(--brief) var(--ease-calm);
}
/* The selection / state left-rail. */
.answer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background var(--brief) var(--ease-calm);
}
.answer__letter {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--muted); background: var(--surface);
  transition: all var(--brief) var(--ease-calm);
}
.answer__text { flex: 1; font-size: 1rem; line-height: 1.45; color: var(--body-text); padding-top: 2px; }
.answer__mark { flex: none; opacity: 0; transform: scale(.6); transition: opacity var(--brief) var(--ease-cinematic), transform var(--brief) var(--ease-cinematic); }
.answer__status {
  flex: none; align-self: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0; transition: opacity var(--brief) var(--ease-calm);
}

/* Hover (desktop, pre-submit only). */
.answers:not(.is-graded) .answer:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
}
/* Selected (tapped, pre-submit). */
.answer.is-selected {
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
}
.answer.is-selected::before { background: var(--orange); }
.answer.is-selected .answer__letter { border-color: var(--orange); color: var(--orange-text); background: var(--orange-soft); } /* the letter is text; ring stays brand */

/* ── Graded states ── */
.answer.is-correct { border-color: var(--success); background: var(--success-soft); box-shadow: none; }
.answer.is-correct::before { background: var(--success); }
.answer.is-correct .answer__letter { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.answer.is-correct .answer__mark { opacity: 1; transform: scale(1); color: var(--success); }
.answer.is-correct .answer__status { opacity: 1; color: var(--success); }

/* Wrong = GENTLE warm amber, never harsh red. */
.answer.is-wrong { border-color: var(--caution); background: var(--caution-soft); box-shadow: none; }
.answer.is-wrong::before { background: var(--caution); }
.answer.is-wrong .answer__letter { border-color: var(--caution); color: var(--caution); background: var(--caution-soft); }
.answer.is-wrong .answer__mark { opacity: 1; transform: scale(1); color: var(--caution); }
.answer.is-wrong .answer__status { opacity: 1; color: var(--caution); }

/* The untouched remaining option dims back. */
.answer.is-dimmed { opacity: 0.5; }

/* Once graded, answers are no longer interactive. */
.answers.is-graded .answer { cursor: default; }

/* ----------------------------------------------------------------------------
   8. CONFIDENCE ROW — the two-step commit. The pick IS the submit.
   -------------------------------------------------------------------------- */
.confidence {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px dashed var(--line);
  /* hidden until an answer is selected */
  display: none;
}
.confidence.is-open { display: block; animation: callout-lift var(--beat) var(--ease-cinematic) both; }
.confidence__label { margin-bottom: var(--s-3); }
.confidence__options { display: flex; gap: var(--s-3); }
.conf-btn {
  flex: 1; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c-accent, var(--line));
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.04em; color: var(--ink); cursor: pointer;
  transition: background var(--brief) var(--ease-calm),
              border-color var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm);
}
.conf-btn--sure   { --c-accent: var(--success); --c-soft: var(--success-soft); }
.conf-btn--pretty { --c-accent: var(--caution); --c-soft: var(--caution-soft); }
.conf-btn--guess  { --c-accent: var(--guess);   --c-soft: var(--guess-soft); }
.conf-btn:hover { background: var(--c-soft); border-left-color: var(--c-accent); }
.conf-btn:active { transform: translateY(1px); }

/* ----------------------------------------------------------------------------
   9. BOTTOM NAV ROW
   -------------------------------------------------------------------------- */
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-6);
}
.nav-row__acs { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

/* ----------------------------------------------------------------------------
   10. KEY TAKEAWAY — the headline of the reveal. Editorial pull-quote on paper,
       with the "Key Takeaway" title set as a label across the top.
   -------------------------------------------------------------------------- */
.takeaway {
  margin-top: var(--s-8);
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-8);
}
.takeaway__label { margin-bottom: var(--s-4); }
/* DARK-SURFACE RE-OVERRIDE — on the charcoal tray the AA text role inverts:
   #b8500a only reads ~3.7:1 on --ink, while brand #f47321 reads 6.4:1. Any
   .t-label / .t-eyebrow living on a dark host gets brand orange back. */
.takeaway .t-label, .takeaway .t-eyebrow { color: var(--orange); }
.takeaway__quote {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-5);
  align-items: start;
}
.takeaway__mark {
  font-family: var(--font-display); font-weight: 700;
  font-size: 4.2rem; line-height: 0.7; color: var(--orange);
  user-select: none;
}
.takeaway__body { min-width: 0; }
.takeaway__head {
  margin: 0 0 var(--s-2);
  font-family: var(--font-body); font-weight: 500;
  font-size: 1.5rem; line-height: 1.3; color: #f3efe9;
  letter-spacing: -0.005em; text-wrap: pretty;
}
.takeaway__sub {
  margin: 0;
  font-family: var(--font-body); font-weight: 400;
  font-size: 1rem; line-height: 1.5; color: #b9b2ac;
  text-wrap: pretty;
}
@media (max-width: 480px) {
  .takeaway { padding: var(--s-5) var(--s-6); }
  .takeaway__quote { column-gap: var(--s-4); }
  .takeaway__mark { font-size: 3.2rem; }
  .takeaway__head { font-size: 1.28rem; }
}

/* ----------------------------------------------------------------------------
   11. EXPLANATION — cascades in; each block staggers.
   -------------------------------------------------------------------------- */
.explanation { margin-top: var(--s-6); }
.explain-block { margin-top: var(--s-6); }
.explain-block:first-child { margin-top: 0; }
.explain-block__label { margin-bottom: var(--s-2); }

/* checklist.cascade — items start lifted+faded, JS adds .is-in with a delay. */
.cascade-item { opacity: 0; transform: translateY(12px); }
.cascade-item.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--beat) var(--ease-cinematic), transform var(--beat) var(--ease-cinematic);
}
/* VISIBILITY SAFETY NET — `.cascade-show` is added by JS unconditionally and the
   instant grading completes. It forces the end-state with NO transition and NO
   dependence on requestAnimationFrame, so the 4-layer explanation can never be
   stranded invisible if rAF is throttled (backgrounded/occluded tab or embed).
   The `.is-in` animation layers on top as progressive enhancement. !important
   guards against any per-screen override re-zeroing the opacity. */
.cascade-item.cascade-show { opacity: 1 !important; transform: none !important; }

/* GO DEEPER citation chips. */
.go-deeper { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-4);
  border: 1px solid rgba(244,115,33,0.45); border-radius: var(--r-pill);
  background: var(--surface); color: var(--orange-text); /* citation text (+ its inline icon) → AA */
  font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.02em; cursor: pointer; text-decoration: none;
  transition: background var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm);
}
.chip:hover { background: var(--orange-soft); border-color: var(--orange); }

/* ----------------------------------------------------------------------------
   12. OVERLAYS — figure lightbox + shortcuts modal
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: var(--s-6);
  background: rgba(22,19,18,0.72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.overlay.is-open { display: flex; animation: fade-in var(--brief) var(--ease-calm); }
.overlay__panel {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated); max-width: 560px; width: 100%;
  animation: callout-lift var(--beat) var(--ease-cinematic) both;
}
.overlay__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line);
}
.overlay__body { padding: var(--s-6); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm);
  background: var(--paper); font-family: var(--font-mono); font-size: 0.74rem;
  font-weight: 500; color: var(--ink);
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-row__keys { display: flex; gap: 6px; }
.shortcut-row__desc { color: var(--body-text); font-size: 0.94rem; }

/* Figure lightbox — zoom + pan stage. */
.lightbox__stage {
  position: relative; overflow: hidden; max-width: 880px; width: 100%;
  background: var(--ink); border-radius: var(--r-xl); box-shadow: var(--shadow-elevated);
  animation: callout-lift var(--beat) var(--ease-cinematic) both;
}
.lightbox__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
}
.lightbox__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; font-size: 0.92rem; }
.lightbox__viewport { overflow: hidden; cursor: grab; background: #100e0d; }
.lightbox__viewport.is-panning { cursor: grabbing; }
/* Rotation layer — drives the figure's 90°-per-click rotate. Composes with the
   zoom/pan transform via a CSS variable so the rotate control only has to flip
   --rot (0 / 90 / 180 / 270deg); pan+scale stay inline on the same element. */
.lightbox__content {
  transform-origin: center center;
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--glance) var(--ease-calm);
}
.lightbox__zoom { display: flex; align-items: center; gap: var(--s-2); }
.zoom-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06);
  color: #fff; cursor: pointer; transition: background var(--glance) var(--ease-calm);
}
.zoom-btn:hover { background: rgba(255,255,255,0.14); }
.zoom-btn svg { display: block; }

/* ── Figure rotate support for the LIVE in-app lightbox (.qcfig, built in
   screens/test.js) ──────────────────────────────────────────────────────────
   The .qcfig image lives in question-card.css with transform-origin:0 0 and
   NO transition (pan must stay 1:1). test.js writes img.style.transform inline
   as `translate(tx,ty) scale(s)`. To add a 90°-per-click rotate WITHOUT making
   pan rubber-band, the test.js owner appends ` rotate(var(--qcfig-rot,0deg))`
   to that inline string and flips the --qcfig-rot custom property by 90deg per
   click. Defining the property here (initial 0deg) makes that one-liner safe.
   No transition is set on .qcfig__img on purpose — see followUps. */
:root { --qcfig-rot: 0deg; }
/* Reusable rotate-tool affordance for the .qcfig toolbar (matches .qcfig__tool). */
.qcfig__tool--rotate svg { display: block; }
.btn-icon--dark { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; }
.btn-icon--dark:hover { color: var(--orange-hover); border-color: var(--orange); }

/* ----------------------------------------------------------------------------
   13. KEYFRAMES — calm choreography. No literal blink (photosensitivity).
   -------------------------------------------------------------------------- */
@keyframes callout-lift {        /* element enters: up 12px + fade */
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle-pulse {        /* slow color pulse, never a blink */
  0%   { box-shadow: 0 0 0 0 rgba(244,115,33,0); }
  40%  { box-shadow: 0 0 0 6px rgba(244,115,33,0.18); }
  100% { box-shadow: 0 0 0 0 rgba(244,115,33,0); }
}

/* ----------------------------------------------------------------------------
   14. AA CONTRAST GUARDS — for orange TEXT declared in styles this file can't
   edit (W3 contrast pass, 2026-06-10).
   Two shell styles still say `color: var(--orange)` for text on white:
     · the feedback footer (app.html inline <style> + the kajabi-loader shell
       injection — #aoa-feedback label + toggle), and
     · the dashboard coverage stat (<style id="dash-style"> injected at runtime
       by screens/dashboard.js).
   Both are appended to <head> AFTER the linked stylesheets, so these guards
   win on SPECIFICITY (the ID / extra ancestor class), not on source order.
   Remove each guard once its host style is repointed to --orange-text at the
   source — they are belt-and-suspenders, not the home of these rules. */
#aoa-feedback .aoa-fb__label { color: var(--orange-text); }
#aoa-feedback .aoa-fb__toggle:hover,
#aoa-feedback.is-open .aoa-fb__toggle { color: var(--orange-text); }
.mm-journey__caption .dash-coverage b { color: var(--orange-text); }