/*
 * BJC book — the multiple-choice questions.
 *
 * The llab quiz runtime (llab/script/quiz.js + quiz/multiplechoice.js,
 * vendored, unchanged) replaces each <div class="assessment-data"> with a
 * Bootstrap card:
 *
 *   div.card.MultipleChoice.Question.mb-3
 *     div.card-header.questionType          "Multiple Choice"
 *     div.card-body > div.promptDiv         the question
 *     div.list-group.list-group-flush.currentQuestionBox
 *       div.radiobuttondiv > li.list-group-item.question-choice  (one per choice:
 *           a .grid of .g-col-1 radio | .g-col-5 text | .g-col-6 feedback)
 *       div.feedbackdiv
 *     div.card-body.interactionBox
 *       div.statusMessages.mb-3             attempts / score / result
 *       div.grid > .g-col-3 > button.checkAnswerButton.btn.btn-primary
 *                 .g-col-3 > button.tryAgainButton.btn.btn-primary
 *
 * On Check Answer it toggles border-success/bg-success (right) or
 * border-danger/bg-danger (wrong) on the card and its header, adds
 * .question-feedback to the chosen answer's feedback cell, and .disabled to
 * the buttons. Those are the names styled here, scoped to .Question so the
 * Bootstrap-flavored class names mean nothing elsewhere on the page. The
 * buttons themselves are the shared .btn rules in navbar.css.
 */

/* -- the card -------------------------------------------------------------- */

.Question {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--bjc-body-color);
  word-wrap: break-word;
  background-color: var(--bjc-card-bg);
  background-clip: border-box;
  border: 1px solid var(--bjc-card-border);
  border-radius: 0.5rem;
}

.Question .card-header {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  background-color: var(--bjc-card-cap-bg);
  border-bottom: 1px solid var(--bjc-card-border);
  border-radius: 0.5rem 0.5rem 0 0;
}

.Question .card-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.Question p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* verdict colors (the runtime toggles these on the card and header) */

.Question.border-success {
  border-color: var(--bjc-success) !important;
}

.Question.border-danger {
  border-color: var(--bjc-danger) !important;
}

.Question.border-primary {
  border-color: var(--bjc-primary) !important;
}

.Question .bg-success {
  color: #fff;
  background-color: var(--bjc-success) !important;
}

.Question .bg-danger {
  color: #000;
  background-color: var(--bjc-danger) !important;
}

.Question .bg-primary {
  color: #fff;
  background-color: var(--bjc-primary) !important;
}

/* -- the choices ----------------------------------------------------------- */

.Question .list-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0;
  border-radius: 0;
}

.Question .list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: var(--bjc-body-color);
  background-color: var(--bjc-list-group-bg);
  border: solid var(--bjc-list-group-border);
  border-width: 0 0 1px;
}

.Question .list-group-item:last-child {
  border-bottom-width: 0;
}

.Question .currentQuestionBox ~ .card-body {
  border-bottom: none !important;
}

/* Each choice is a 12-column grid: radio | answer | feedback. The runtime
   sets --bs-gap inline on the grid; keep that name. */
.Question .grid {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bs-gap, 1.5rem);
}

.Question .grid .g-col-1 {
  grid-column: auto / span 1;
}

.Question .grid .g-col-3 {
  grid-column: auto / span 3;
}

.Question .grid .g-col-5 {
  grid-column: auto / span 5;
}

.Question .grid .g-col-6 {
  grid-column: auto / span 6;
}

/* The chosen answer's feedback, once checked. */
.Question .question-feedback {
  padding-left: 0.5rem;
  border-left: 3px solid var(--bjc-feedback-rule);
}