/* ============================================================
   v12.35.0 — Sparks explanations, version 1 (built in)

   The colour-coded, animated explanation layout: a verdict banner, the skill
   tested, why the right answer is right (with a step-by-step walk), why each
   wrong option is wrong (with a "trap" chip: Slip, Half-right, Contradicted,
   Not in the evidence, Misconception), and a "Next time" tip.

   Papers carry only the MARKUP (<div class="ex …">); this stylesheet is the
   site's, so every imported paper looks the same and nothing in an uploaded
   file gets to style the site. Everything is scoped under .ex.

   Copied from the design kit (sparks-explanations-css, v1) less its
   standalone-preview rules, plus three additions at the end.
   ============================================================ */
/* Sparks explanations, version 1.
   Everything is scoped under .ex. The animation plays whenever an .ex element becomes visible
   (display none to block), so the LMS only has to show or hide the explanation.
   Optional hooks the LMS can set on .ex:  data-result="ok|no"   data-chosen="A|B|C|D"
   Timing is controlled by --ex-g (when the "wrong options" part starts). */
.ex{
  --ex-ok:#10B981;--ex-ok-bg:#ECFDF5;--ex-ok-ink:#065F46;
  --ex-no:#E11D48;--ex-no-bg:#FFF1F3;--ex-no-ink:#BE123C;
  --ex-tip:#F59E0B;--ex-tip-bg:#FEF3C7;--ex-tip-ink:#92400E;
  --ex-info:#2563EB;--ex-info-bg:#E8F0FF;--ex-info-ink:#1E40AF;
  --ex-violet:#7C3AED;--ex-violet-soft:#F0EAFF;--ex-head:#4C1D95;--ex-line:#E7E1FA;--ex-ink:#211A3E;
  --ex-g:0.75s;   /* v12.39.2: 40% shorter (was 3.4s); v12.72.1: shorter again (was 2.04s) */
  position:relative;color:var(--ex-ink);font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;margin-top:6px;text-align:left;
}
.ex.ex-slow{--ex-g:0.92s}
.ex.ex-fib{--ex-g:0.98s}

/* ---- staging: every part slides in, in order. Base state is visible, so nothing is lost if animation is off ---- */
.ex > *{animation:ex-slide .5s ease backwards}
.ex > .ex-verdict{animation-name:ex-pop}
.ex > .ex-skill{animation-delay:.15s}
.ex > .ex-right{animation-delay:.4s}
.ex > .ex-steps{animation-delay:3.4s}
.ex > .ex-wrongs{animation:none}
.ex-wrongs > *{animation:ex-slide .5s ease backwards}
.ex-wrongs > :nth-child(1){animation-delay:var(--ex-g)}
.ex-wrongs > :nth-child(2){animation-delay:calc(var(--ex-g) + .35s)}
.ex-wrongs > :nth-child(3){animation-delay:calc(var(--ex-g) + .7s)}
.ex-wrongs > :nth-child(4){animation-delay:calc(var(--ex-g) + 1.05s)}
.ex-wrongs > :nth-child(5){animation-delay:calc(var(--ex-g) + 1.4s)}
.ex > .ex-tip{animation-delay:calc(var(--ex-g) + 1.6s)}

/* ---- verdict banner (text set by script from data-result; plain "Here is why" otherwise) ---- */
.ex-verdict{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 14px;border-radius:14px;
  border:2px solid var(--ex-line);background:var(--ex-violet-soft);color:var(--ex-head);font-weight:800;font-size:17px}
.ex-verdict.ex-ok{background:var(--ex-ok-bg);border-color:#A7F3D0;color:var(--ex-ok-ink)}
.ex-verdict.ex-no{background:var(--ex-no-bg);border-color:#FDA4AF;color:var(--ex-no-ink)}
.ex-icon{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px}
.ex-ok .ex-icon{background:var(--ex-ok)} .ex-no .ex-icon{background:var(--ex-no)}

.ex-skill{display:inline-block;margin:0 0 10px;padding:2px 12px;border:2px solid #D6CCF7;border-radius:999px;
  background:#fff;color:var(--ex-head);font-size:12.5px;font-weight:800}

/* ---- right answer ---- */
.ex-right{margin:0 0 10px;padding:10px 14px;border-left:6px solid var(--ex-ok);background:var(--ex-ok-bg);border-radius:0 12px 12px 0}
.ex-right p{margin:0 0 6px}
.ex-title{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ex-ok-ink)}
.ex-wrongs > .ex-title{color:var(--ex-no-ink)}
.ex-steps > .ex-title{color:#5B21B6}

/* ---- how to find it ---- */
.ex-steps{margin:0 0 10px;padding:10px 14px;border-left:6px solid var(--ex-violet);background:var(--ex-violet-soft);border-radius:0 12px 12px 0}
.ex-steps ol{margin:4px 0 0;padding:0;list-style:none;counter-reset:exs}
.ex-steps li{counter-increment:exs;position:relative;padding:3px 0 3px 34px}
.ex-steps li::before{content:counter(exs);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:50%;
  background:var(--ex-violet);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}

/* ---- wrong options ---- */
.ex-wrongs{margin:0 0 10px}
.ex-wrong{margin:0 0 8px;padding:8px 12px;border-left:6px solid var(--ex-no);background:var(--ex-no-bg);border-radius:0 12px 12px 0}
.ex-badge{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:8px;
  background:var(--ex-no);color:#fff;font-weight:800;vertical-align:middle}
.ex-opt{font-weight:700;text-decoration:line-through;text-decoration-color:rgba(225,29,72,.5)}
.ex-why{display:block;margin-top:2px}
.ex-chip,.ex-you{display:inline-block;margin-left:6px;padding:1px 10px;border:2px solid;border-radius:999px;font-size:12.5px;font-weight:800;vertical-align:middle}
.ex-you{background:var(--ex-no-bg);color:var(--ex-no-ink);border-color:#FDA4AF}
.ex-wrong[data-trap="slip"] .ex-chip{background:var(--ex-tip-bg);color:var(--ex-tip-ink);border-color:#F6D56B}
.ex-wrong[data-trap="misc"] .ex-chip{background:#FDF2FF;color:#A21CAF;border-color:#F0ABFC}
.ex-wrong[data-trap="contra"] .ex-chip{background:var(--ex-no-bg);color:var(--ex-no-ink);border-color:#FDA4AF}
.ex-wrong[data-trap="noevid"] .ex-chip{background:var(--ex-info-bg);color:var(--ex-info-ink);border-color:#9DBBF7}
.ex-wrong[data-trap="half"] .ex-chip{background:var(--ex-violet-soft);color:#5B21B6;border-color:#D6CCF7}
.ex-chosen{box-shadow:0 0 0 3px rgba(225,29,72,.25)}
.ex-chosen .ex-badge{animation:ex-shake .5s ease calc(var(--ex-g) + .15s) backwards}

/* ---- next-time tip ---- */
.ex-tip{position:relative;margin:0;padding:10px 14px 10px 48px;border-left:6px solid var(--ex-tip);background:var(--ex-tip-bg);
  color:#5A3A06;border-radius:0 12px 12px 0}
.ex-tip::before{content:"!";position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--ex-tip);
  color:#fff;font-weight:800;display:grid;place-items:center;animation:ex-glow 1.6s ease-in-out calc(var(--ex-g) + 2s) 2}
.ex-tip b{color:var(--ex-tip-ink)}

/* ---- visual 1: which sources support each statement ---- */
.ex-grid{width:100%;margin:6px 0 2px;border-collapse:separate;border-spacing:0;border:2px solid var(--ex-line);border-radius:10px;overflow:hidden;background:#fff;font-size:14px}
.ex-grid th,.ex-grid td{padding:6px 8px;border-bottom:1px solid var(--ex-line);border-right:1px solid var(--ex-line);text-align:center}
.ex-grid th{background:var(--ex-violet-soft);color:var(--ex-head)}
.ex-grid th:first-child,.ex-grid td:first-child{text-align:left}
.ex-grid tr:last-child td{border-bottom:none}.ex-grid th:last-child,.ex-grid td:last-child{border-right:none}
.ex-grid tr.good td:first-child{background:var(--ex-ok-bg);color:var(--ex-ok-ink);font-weight:800}
.ex-grid td span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-weight:800;font-size:14px;animation:ex-pop .4s ease backwards}
.ex-grid .y{background:var(--ex-ok)}.ex-grid .x{background:var(--ex-no)}.ex-grid .n{background:#B7B0D6}
.ex-gridkey{margin:2px 0 0;font-size:12.5px;color:#6B6390}

/* ---- visual 2: walking through a key ---- */
.ex-walk{list-style:none;margin:6px 0 0;padding:0}
.ex-walk li{position:relative;margin:0 0 10px;padding:8px 12px 8px 42px;background:#fff;border:2px solid var(--ex-line);border-radius:11px;animation:ex-slide .5s ease backwards}
.ex-walk li::before{content:"";position:absolute;left:14px;top:12px;width:14px;height:14px;border-radius:50%;background:var(--ex-violet)}
.ex-walk li:not(:last-child)::after{content:"";position:absolute;left:20px;top:28px;bottom:-14px;width:2px;background:var(--ex-violet);opacity:.35}
.ex-walk .yes{display:inline-block;margin:0 4px;padding:0 9px;border-radius:999px;background:var(--ex-ok-bg);border:2px solid #A7F3D0;color:var(--ex-ok-ink);font-weight:800}
.ex-walk li.end{background:var(--ex-ok-bg);border-color:var(--ex-ok);color:var(--ex-ok-ink);font-weight:800}
.ex-walk li.end::before{background:var(--ex-ok)}

/* ---- visual 3: the answer, letter by letter ---- */
.ex-letters{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ex-letters span{display:grid;place-items:center;width:42px;height:48px;border:2px solid var(--ex-ok);border-radius:10px;background:#fff;color:var(--ex-ok-ink);
  font:600 24px "IBM Plex Mono",ui-monospace,monospace;animation:ex-flip .6s ease backwards}
.ex-letters span.hot{border-color:var(--ex-tip);background:var(--ex-tip-bg);color:var(--ex-tip-ink)}

/* ---- visual 4: building the word ---- */
.ex-build{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.ex-tile{display:inline-block;padding:4px 12px;border:2px solid #D6CCF7;border-radius:10px;background:#fff;font:600 20px "IBM Plex Mono",ui-monospace,monospace;animation:ex-pop .45s ease backwards}
.ex-tile.stem{border-color:var(--ex-violet);background:var(--ex-violet-soft);color:var(--ex-head)}
.ex-tile.end{border-color:var(--ex-tip);background:var(--ex-tip-bg);color:var(--ex-tip-ink)}
.ex-tile.result{border-color:var(--ex-ok);background:var(--ex-ok-bg);color:var(--ex-ok-ink);animation-name:ex-flip;animation-duration:.7s}
.ex-sign{font-weight:800;color:#6B6390;animation:ex-pop .45s ease backwards}
.ex-strike{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;text-decoration:line-through;text-decoration-color:rgba(225,29,72,.5)}
.ex-wrong:not([data-opt]) .ex-strike::before{content:"\2717";display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:8px;
  background:var(--ex-no);color:#fff;font-family:Nunito,system-ui,sans-serif;font-weight:800;vertical-align:middle}

/* ---- skip button (added by script) ---- */
.ex > .ex-skip{position:absolute;right:0;top:-4px;animation:ex-skipfade 8s linear forwards;font:inherit;font-size:12px;font-weight:800;
  cursor:pointer;color:var(--ex-head);background:#fff;border:2px solid var(--ex-line);border-radius:999px;padding:2px 10px}
.ex-instant,.ex-instant *,.ex-instant *::before,.ex-instant *::after{animation:none!important}
.ex-instant .ex-skip{display:none}

@keyframes ex-slide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes ex-pop{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes ex-flip{from{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:none}}
@keyframes ex-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes ex-glow{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 0 9px rgba(245,158,11,.3)}}
@keyframes ex-skipfade{0%,92%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.ex,.ex *,.ex *::before,.ex *::after{animation:none!important}.ex .ex-skip{display:none}}
@media print{.ex,.ex *,.ex *::before,.ex *::after{animation:none!important}.ex .ex-skip{display:none}}

/* ---- generated timing for the visuals ---- */
/* sources grid: 12 marks pop in, row by row */
.ex-grid tr:nth-child(2) td:nth-child(2) span{animation-delay:0.90s}
.ex-grid tr:nth-child(2) td:nth-child(3) span{animation-delay:1.06s}
.ex-grid tr:nth-child(2) td:nth-child(4) span{animation-delay:1.22s}
.ex-grid tr:nth-child(3) td:nth-child(2) span{animation-delay:1.38s}
.ex-grid tr:nth-child(3) td:nth-child(3) span{animation-delay:1.54s}
.ex-grid tr:nth-child(3) td:nth-child(4) span{animation-delay:1.70s}
.ex-grid tr:nth-child(4) td:nth-child(2) span{animation-delay:1.86s}
.ex-grid tr:nth-child(4) td:nth-child(3) span{animation-delay:2.02s}
.ex-grid tr:nth-child(4) td:nth-child(4) span{animation-delay:2.18s}
.ex-grid tr:nth-child(5) td:nth-child(2) span{animation-delay:2.34s}
.ex-grid tr:nth-child(5) td:nth-child(3) span{animation-delay:2.50s}
.ex-grid tr:nth-child(5) td:nth-child(4) span{animation-delay:2.66s}
/* key walk: one step at a time */
.ex-walk li:nth-child(1){animation-delay:0.90s}
.ex-walk li:nth-child(2){animation-delay:1.50s}
.ex-walk li:nth-child(3){animation-delay:2.10s}
.ex-walk li:nth-child(4){animation-delay:2.70s}
.ex-walk li:nth-child(5){animation-delay:3.30s}
.ex-walk li:nth-child(6){animation-delay:3.90s}
/* answer letters flip one by one */
.ex-letters span:nth-child(1){animation-delay:0.70s}
.ex-letters span:nth-child(2){animation-delay:0.80s}
.ex-letters span:nth-child(3){animation-delay:0.90s}
.ex-letters span:nth-child(4){animation-delay:1.00s}
.ex-letters span:nth-child(5){animation-delay:1.10s}
.ex-letters span:nth-child(6){animation-delay:1.20s}
.ex-letters span:nth-child(7){animation-delay:1.30s}
.ex-letters span:nth-child(8){animation-delay:1.40s}
.ex-letters span:nth-child(9){animation-delay:1.50s}
.ex-letters span:nth-child(10){animation-delay:1.60s}
.ex-letters span:nth-child(11){animation-delay:1.70s}
.ex-letters span:nth-child(12){animation-delay:1.80s}
/* word builder: part, plus, part, equals, result */
.ex-build > :nth-child(1){animation-delay:2.2s}
.ex-build > :nth-child(2){animation-delay:2.4s}
.ex-build > :nth-child(3){animation-delay:2.6s}
.ex-build > :nth-child(4){animation-delay:3.0s}
.ex-build > :nth-child(5){animation-delay:3.2s}

/* ---- v12.35.0 additions ---- */
/* An explanation waits until it is on screen: on a review page with forty of
   them, playing every animation at page load meant all of them had finished
   before the student scrolled to any. */
.ex.ex-wait,.ex.ex-wait *,.ex.ex-wait *::before,.ex.ex-wait *::after{animation-play-state:paused!important}
/* the host keeps the explanation's own typography and room for the Skip button */
.ex-host{display:block;margin-top:8px;padding-top:4px}
.ex-host .ex{max-width:100%}