.edu-exercises { margin-top: 2rem; }
.edu-exercises__title { margin: 1rem 0; }

/* Keep standalone and grouped exercises on the same vertical rhythm. */
.edu-exercise {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

.edu-exercise__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.edu-exercise__title { font-weight: 800; }
.edu-exercise__result { font-weight: 700; opacity: .85; }

.edu-question { margin: 0 0 1rem 0; }

.edu-choice__body {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
}

.edu-choice__head {
  display: grid;
  grid-template-columns: 1.75rem 1.125rem;
  align-items: center;
  gap: .5rem;
}

.edu-choice__input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
}

.edu-choice__letter {
  width: 1.75rem;
  min-width: 1.75rem;
  padding: .2rem .4rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.edu-choice__content {
  min-width: 0;
}

.edu-choice__content > :first-child { margin-top: 0; }
.edu-choice__content > :last-child { margin-bottom: 0; }
.edu-choice__content > div[class*="highlight-"] { margin-bottom: 0; }
.edu-choice__feedback:not(:empty) { margin-top: .75rem; }

.edu-choice.is-correct { outline: 2px solid rgba(46,160,67,.45); }
.edu-choice.is-incorrect { outline: 2px solid rgba(248,81,73,.45); }
.edu-choice.is-missed { outline: 2px solid rgba(187,128,9,.45); }

.edu-exercise__actions { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

.edu-exercise__check:disabled,
.edu-exercise__check.is-inactive{
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* When solution is open, lock the button into the hover/active colour */
.edu-exercise__toggle-answer.edu-solution-open,
.edu-exercise__toggle-answer.edu-solution-open:hover,
.edu-exercise__toggle-answer.edu-solution-open:focus,
.edu-exercise__toggle-answer.edu-solution-open:focus-visible,
.edu-exercise__toggle-answer.edu-solution-open:active {
  background-color: rgb(8, 107, 124);
  border-color: rgb(8, 107, 124);
}


/* Latch the button colour when solution is open (beats theme rules) */
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open {
  background-color: rgb(8, 107, 124) !important;
  border-color: rgb(8, 107, 124) !important;
}

/* Keep it latched in all pseudo states too */
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:hover,
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:focus,
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:focus-visible,
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:active {
  background-color: rgb(8, 107, 124) !important;
  border-color: rgb(8, 107, 124) !important;
}