/* Past multiple-choice questions (lib/past-mcq.js, assets/js/past-mcq.js).
   Loaded after past-frq.css, whose page frame these pages share, and built on
   site.css tokens so both color schemes come for free. */

.pm-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.pm-choice { min-width: 3.4rem; min-height: 3rem; font-size: 1.1rem; font-weight: 800; }
.pm-choice.pm-picked { outline: 3px solid var(--accent); outline-offset: 1px; }
.pm-choice.pm-right { border-color: var(--good); background: var(--good-tint); color: var(--ink); }
.pm-choice.pm-wrong { border-color: var(--bad); background: var(--bad-tint); color: var(--ink); }
.pm-result { min-height: 1.4em; margin: 10px 0 0; font-size: 1rem; }
.pm-result.pm-good { border-left: 4px solid var(--good); background: var(--good-tint); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; }
.pm-result.pm-bad { border-left: 4px solid var(--bad); background: var(--bad-tint); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; }
.pm-tools { margin-top: 8px; }

/* The worked explanation under the choices (lib/past-mcq-explain.js). */
.pm-explain { margin-top: 8px; }
.pm-why { padding-left: 0; list-style: none; }
.pm-why li { margin-bottom: 8px; }
.pm-why li.pm-why-right { border-left: 4px solid var(--good); padding-left: 10px; }