/* QBank question player (2026): choices, explanation and tutor audio player.
 * Matches the homepage demo. The accent is --mpj-blue: teal on MedExPrep, blue on MPJEReview. */

/* ---------- Tutor audio player (works with or without the mpj-ui shell) ---------- */
.mpj-ap {
  --ap: var(--mpj-blue, #0f7c79);
  --ap-ink: var(--mpj-navy, #14305a);
  --ap-line: var(--mpj-line, #dde3eb);
  --ap-muted: var(--mpj-muted, #556274);
  position: relative; display: flex !important; align-items: center; gap: 12px;
  margin: 4px 0 14px !important; padding: 9px 10px 9px 9px !important;
  background: #fff !important; border: 1px solid var(--ap-line) !important; border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important; color: var(--ap-ink) !important;
  font-family: var(--mpj-sans, inherit) !important; transition: border-color .18s, box-shadow .18s;
}
.mpj-ap--stem { max-width: 560px; }
.mpj-ap--exp { margin: 4px 0 18px !important; }
.mpj-ap:hover { border-color: color-mix(in srgb, var(--ap) 45%, #fff) !important; }
.mpj-ap button { appearance: none; -webkit-appearance: none; margin: 0; font: inherit; cursor: pointer; }
.mpj-ap__play {
  flex: none; width: 40px; height: 40px; border: 0 !important; border-radius: 11px !important; padding: 0 !important;
  display: grid; place-items: center; background: var(--ap) !important; color: #fff !important;
  box-shadow: none !important; transition: background .18s, transform .12s;
}
.mpj-ap__play:hover { transform: scale(1.05); }
.mpj-ap__play:active { transform: scale(.96); }
.mpj-ap__play svg { width: 18px; height: 18px; display: block; }
.mpj-ap__play svg + svg { display: none; }
.mpj-ap.is-playing .mpj-ap__play { background: var(--ap-ink) !important; }
.mpj-ap.is-playing .mpj-ap__play svg:first-child { display: none; }
.mpj-ap.is-playing .mpj-ap__play svg + svg { display: block; }
.mpj-ap__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mpj-ap__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mpj-ap__label { font-size: 14.5px; font-weight: 650; color: var(--ap-ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpj-ap__time { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ap-muted); font-variant-numeric: tabular-nums; }
.mpj-ap__seek {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: -5px 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; --p: 0%;
}
.mpj-ap__seek:focus { outline: none; }
.mpj-ap__seek::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--ap) var(--p), #e6ebf1 var(--p)); }
.mpj-ap__seek::-moz-range-track { height: 5px; border-radius: 99px; background: #e6ebf1; }
.mpj-ap__seek::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--ap); }
.mpj-ap__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--ap); box-shadow: 0 1px 3px rgba(0,0,0,.18); opacity: 0; transition: opacity .15s; }
.mpj-ap__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ap); opacity: 0; transition: opacity .15s; }
.mpj-ap:hover .mpj-ap__seek::-webkit-slider-thumb, .mpj-ap.is-playing .mpj-ap__seek::-webkit-slider-thumb, .mpj-ap__seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.mpj-ap:hover .mpj-ap__seek::-moz-range-thumb, .mpj-ap.is-playing .mpj-ap__seek::-moz-range-thumb { opacity: 1; }
.mpj-ap__seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ap) 25%, transparent); }
.mpj-ap__btn {
  flex: none; width: 34px; height: 34px; padding: 0 !important; border-radius: 9px !important; border: 1px solid transparent !important;
  background: transparent !important; color: var(--ap-muted) !important; display: grid; place-items: center; box-shadow: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
.mpj-ap__btn:hover { background: color-mix(in srgb, var(--ap) 9%, #fff) !important; color: var(--ap) !important; border-color: color-mix(in srgb, var(--ap) 22%, #fff) !important; }
.mpj-ap__btn svg { width: 18px; height: 18px; display: block; }
.mpj-ap__mute svg + svg { display: none; }
.mpj-ap.is-muted .mpj-ap__mute svg:first-child { display: none; }
.mpj-ap.is-muted .mpj-ap__mute svg + svg { display: block; }
.mpj-ap.is-muted .mpj-ap__mute { color: var(--mpj-danger, #a33030) !important; }
.mpj-ap button:focus-visible { outline: 2px solid var(--ap) !important; outline-offset: 2px; }
.mpj-ap.is-error { opacity: .7; }
.mpj-ap.is-error .mpj-ap__play { background: #9aa5b4 !important; }
/* Waiting for a tap (autoplay blocked or muted): soft pulse */
.mpj-ap.is-cue { border-color: var(--ap) !important; animation: mpjApPulse 2s ease-out infinite; }
@keyframes mpjApPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ap) 40%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ap) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ap) 0%, transparent); }
}
@media (max-width: 560px) {
  .mpj-ap { gap: 9px; }
  .mpj-ap__label { font-size: 13.5px; }
  .mpj-ap__btn { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .mpj-ap.is-cue { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap) 25%, transparent) !important; } }

/* ---------- Answer choices ---------- */
html body.mpj-ui .medexp-qbank .medexp-qb-choices { display: grid !important; gap: 10px !important; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice {
  display: flex !important; align-items: center !important; gap: 12px !important; position: relative;
  padding: 13px 16px !important; border: 1.5px solid var(--mpj-line) !important; border-radius: 12px !important;
  background: #fff !important; box-shadow: none !important; transform: none;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s, opacity .2s !important; cursor: pointer;
}
html body.mpj-ui .medexp-qbank .medexp-qb-choices.is-single .medexp-qb-choice__left { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice__right { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1; min-width: 0; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice__meta { flex: none; display: flex; align-items: center; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice__label {
  display: inline-grid !important; place-items: center; width: 30px !important; height: 30px !important; min-width: 30px; padding: 0 !important;
  border-radius: 8px !important; border: 0 !important; background: #eef2f7 !important; color: var(--mpj-navy) !important;
  font: 700 14px/1 var(--mpj-sans) !important; box-shadow: none !important; transition: background .18s, color .18s;
}
html body.mpj-ui .medexp-qbank .medexp-qb-choice__text { flex: 1; min-width: 0; font-size: 16px !important; line-height: 1.5 !important; color: var(--mpj-text) !important; font-weight: 450 !important; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice__text p { margin: 0 !important; }
/* Hover: lift with a crisp offset shadow (not after answering) */
html body.mpj-ui .medexp-qbank .medexp-qb-interaction:not(.is-review) .medexp-qb-choice:hover {
  border-color: var(--mpj-blue) !important; background: #fff !important;
  box-shadow: 3px 3px 0 0 var(--mpj-blue) !important; transform: translate(-1px, -1px);
}
html body.mpj-ui .medexp-qbank .medexp-qb-interaction:not(.is-review) .medexp-qb-choice:hover .medexp-qb-choice__label { background: var(--mpj-blue) !important; color: #fff !important; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--mpj-blue) 35%, transparent) !important; outline-offset: 2px; }
/* Selected, before submitting */
html body.mpj-ui .medexp-qbank .medexp-qb-interaction:not(.is-review) .medexp-qb-choice.is-selected,
html body.mpj-ui .medexp-qbank .medexp-qb-interaction:not(.is-review) .medexp-qb-choice:has(input:checked) {
  border-color: var(--mpj-blue) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--mpj-blue) 9%, #fff), #fff 85%) !important;
  box-shadow: inset 4px 0 0 var(--mpj-blue) !important; transform: none;
}
html body.mpj-ui .medexp-qbank .medexp-qb-interaction:not(.is-review) .medexp-qb-choice.is-selected .medexp-qb-choice__label,
html body.mpj-ui .medexp-qbank .medexp-qb-interaction:not(.is-review) .medexp-qb-choice:has(input:checked) .medexp-qb-choice__label { background: var(--mpj-blue) !important; color: #fff !important; }
/* After answering */
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice { cursor: default; }
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-correct,
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-missed {
  border-color: var(--mpj-success) !important; border-style: solid !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mpj-success) 10%, #fff), #fff 85%) !important;
  box-shadow: inset 4px 0 0 var(--mpj-success) !important; opacity: 1;
}
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-wrong {
  border-color: var(--mpj-danger) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mpj-danger) 8%, #fff), #fff 85%) !important;
  box-shadow: inset 4px 0 0 var(--mpj-danger) !important; animation: mpjQShake .4s; opacity: 1;
}
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-correct .medexp-qb-choice__label,
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-missed .medexp-qb-choice__label { background: var(--mpj-success) !important; color: #fff !important; }
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-wrong .medexp-qb-choice__label { background: var(--mpj-danger) !important; color: #fff !important; }
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-wrong .medexp-qb-choice__text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--mpj-danger) 50%, transparent); }
html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice:not(.is-correct):not(.is-missed):not(.is-wrong) { opacity: .55; }
html body.mpj-ui .medexp-qbank .medexp-qb-choice__ic { width: 24px; height: 24px; border-radius: 50%; display: inline-grid !important; place-items: center; font-size: 12px !important; color: #fff !important; }
@keyframes mpjQShake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ---------- Stem ---------- */
html body.mpj-ui .medexp-qbank .medexp-qb-stem, html body.mpj-ui .medexp-qbank .medexp-qb-stem p, html body.mpj-ui .medexp-qbank .medexp-qb-stem li { font-size: 17px !important; line-height: 1.7 !important; color: var(--mpj-text) !important; }

/* ---------- Explanation: clear sections, like TeachBack on the homepage ---------- */
html body.mpj-ui .medexp-qb-feedback.mpj-xp { border-radius: 14px !important; background: linear-gradient(180deg, #fbfdfd, #f7fafb) !important; }
html body.mpj-ui .medexp-qb-feedback.mpj-xp .medexp-qb-feedback__body { font-size: 15.5px; line-height: 1.7; }
html body.mpj-ui .mpj-xp__h {
  display: flex !important; align-items: center; gap: 12px; margin: 4px 0 6px !important;
  font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mpj-navy) !important;
}
html body.mpj-ui .mpj-xp__hIc { width: 30px !important; height: 30px !important; border-radius: 9px !important; font-size: 14px !important; flex: none; color: var(--mpj-success) !important; background: color-mix(in srgb, var(--mpj-success) 13%, #fff) !important; }
html body.mpj-ui .mpj-xp__hIc.is-bad { color: var(--mpj-danger) !important; background: color-mix(in srgb, var(--mpj-danger) 11%, #fff) !important; }
html body.mpj-ui .mpj-xp__h + .mpj-xp__lead, html body.mpj-ui .mpj-xp__lead { margin: 0 0 4px !important; padding: 0 0 14px 42px !important; border-bottom: 1px solid #e6eeee; }
html body.mpj-ui .mpj-xp__list + .mpj-xp__h, html body.mpj-ui .mpj-xp__lead + .mpj-xp__h, html body.mpj-ui p + .mpj-xp__h { margin-top: 16px !important; }
html body.mpj-ui .medexp-qb-feedback__body ul.mpj-xp__list { gap: 2px !important; padding-left: 42px !important; }
html body.mpj-ui ul.mpj-xp__list > li { padding: 11px 10px !important; border: 0 !important; border-bottom: 1px solid #e6eeee !important; border-radius: 10px !important; background: transparent !important; }
html body.mpj-ui ul.mpj-xp__list > li:last-child { border-bottom: 0 !important; }
html body.mpj-ui ul.mpj-xp__list > li.is-mine { background: color-mix(in srgb, var(--mpj-danger) 6%, #fff) !important; border-bottom-color: transparent !important; }
html body.mpj-ui .mpj-xp__badge { border-radius: 7px !important; }
html body.mpj-ui .mpj-xp__reason { padding-left: 34px; font-size: 15px; }
/* Sections arrive one after another */
@keyframes mpjXpStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html body.mpj-ui .medexp-qb-feedback.mpj-xp--in .medexp-qb-feedback__body > * { animation: mpjXpStep .4s cubic-bezier(.2,.8,.2,1) both; }
html body.mpj-ui .medexp-qb-feedback.mpj-xp--in .medexp-qb-feedback__body > :nth-child(2) { animation-delay: .08s; }
html body.mpj-ui .medexp-qb-feedback.mpj-xp--in .medexp-qb-feedback__body > :nth-child(3) { animation-delay: .16s; }
html body.mpj-ui .medexp-qb-feedback.mpj-xp--in .medexp-qb-feedback__body > :nth-child(4) { animation-delay: .24s; }
html body.mpj-ui .medexp-qb-feedback.mpj-xp--in .medexp-qb-feedback__body > :nth-child(n+5) { animation-delay: .32s; }
@media (max-width: 640px) {
  html body.mpj-ui .mpj-xp__h + .mpj-xp__lead, html body.mpj-ui .mpj-xp__lead { padding-left: 0 !important; }
  html body.mpj-ui .medexp-qb-feedback__body ul.mpj-xp__list { padding-left: 0 !important; }
  html body.mpj-ui .medexp-qbank .medexp-qb-choice { padding: 12px 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.mpj-ui .medexp-qb-feedback.mpj-xp--in .medexp-qb-feedback__body > * { animation: none; }
  html body.mpj-ui .medexp-qbank .medexp-qb-interaction.is-review .medexp-qb-choice.is-wrong { animation: none; }
}