/* The whole question shows the result, with a separate palette for each theme. */
:root {
 --answer-ok-bg:#dff2e9; --answer-ok-border:#559b82; --answer-ok-text:#193b31;
 --answer-bad-bg:#fbe1dd; --answer-bad-border:#c97068; --answer-bad-text:#542822;
}
html[data-theme="dark"] {
 --answer-ok-bg:#244c40; --answer-ok-border:#8bd5b6; --answer-ok-text:#edf8f2;
 --answer-bad-bg:#592f34; --answer-bad-border:#f1a39b; --answer-bad-text:#fff0ed;
}
body .exercise-question:has([data-exercise-feedback].is-correct:not([hidden])),
body .cafe-question-card:has(.cafe-answer-feedback.is-correct),
body .arena-dialog--question:has(#arena-answers .is-correct):not(:has(#arena-answers .is-wrong)),
body .adventure-feedback.is-correct,
body .exercise-match-card.is-correct,
body .exercise-match-result.is-correct,
body .irv-question:has(.irv-feedback.is-correct:not([hidden])) {
 --answer-state-bg:var(--answer-ok-bg); --answer-state-border:var(--answer-ok-border); --answer-state-text:var(--answer-ok-text);
}
body .exercise-question:has([data-exercise-feedback].is-wrong:not([hidden])),
body .cafe-question-card:has(.cafe-answer-feedback.is-wrong),
body .arena-dialog--question:has(#arena-answers .is-wrong),
body .adventure-feedback.is-wrong,
body .exercise-match-card.is-wrong,
body .exercise-match-result.is-wrong,
body .irv-question:has(.irv-feedback.is-wrong:not([hidden])) {
 --answer-state-bg:var(--answer-bad-bg); --answer-state-border:var(--answer-bad-border); --answer-state-text:var(--answer-bad-text);
}
body .exercise-question:has([data-exercise-feedback]:not([hidden])),
body .exercise-question:has([data-exercise-feedback]:not([hidden])) .exercise-sentence__line,
body .cafe-question-card.is-answered,
body .arena-dialog--question:has(#arena-answers .is-correct),
body .adventure-feedback:is(.is-correct,.is-wrong),
body .exercise-match-card:is(.is-correct,.is-wrong),
body .exercise-match-result:is(.is-correct,.is-wrong),
body .irv-question:has(.irv-feedback:not([hidden])) {
 background-color:var(--answer-state-bg) !important;
 background-image:none !important;
 border-color:var(--answer-state-border) !important;
 color:var(--answer-state-text) !important;
 --text:var(--answer-state-text); --muted:var(--answer-state-text);
 box-shadow:inset 0 0 0 2px var(--answer-state-border);
}
body .cafe-question-card.is-answered #cafe-question-title,
body .arena-dialog--question:has(#arena-answers .is-correct) :is(#arena-question-text,#arena-question-feedback),
body .adventure-feedback:is(.is-correct,.is-wrong) :is(h2,p,div,strong,span) {
 color:var(--answer-state-text) !important;
}
body .arena-dialog--question:has(#arena-answers .is-correct) #arena-question-text {
 background-color:var(--answer-state-bg) !important;
 background-image:none !important; border-color:var(--answer-state-border) !important;
}

body .exercise-match-card:is(.is-correct,.is-wrong) .exercise-match-card__status,
body .exercise-match-result:is(.is-correct,.is-wrong) p { color:var(--answer-state-text) !important; }

/* A checked answer is a continuation surface, including on pages embedding the engine. */
body .exercise-question.is-answered :is(.exercise-choice,[data-match-mode],[data-match-question],[data-gap-index]):disabled,
body .cafe-question-card.is-answered [data-cafe-answer]:disabled,
body .arena-dialog--question:has(#arena-answers .is-correct) #arena-answers button:disabled,
body .irv-question:has(.irv-feedback:not([hidden])) input:disabled { pointer-events:none; }

/* Checked options use their result, rather than their original A/B/C/D colour. */
body :is(.exercise-choice, [data-cafe-answer], #arena-answers button).is-correct {
 background:var(--answer-ok-bg) !important; border-color:var(--answer-ok-border) !important;
 color:var(--answer-ok-text) !important; opacity:1 !important;
 box-shadow:inset 0 0 0 2px var(--answer-ok-border) !important;
}
body :is(.exercise-choice, [data-cafe-answer], #arena-answers button).is-wrong {
 background:var(--answer-bad-bg) !important; border-color:var(--answer-bad-border) !important;
 color:var(--answer-bad-text) !important; opacity:1 !important;
 box-shadow:inset 0 0 0 2px var(--answer-bad-border) !important;
}
body :is(.exercise-choice, [data-cafe-answer], #arena-answers button):is(.is-correct,.is-wrong) :is(strong,span) {
 color:inherit !important;
}