/* mylinguistics-exercise-layout — design tokens match the site's real
   values (pulled from mlai-writing.css). Change any value here and every
   exercise page that uses these blocks updates automatically — nothing
   to touch in individual posts. */

:root {
  --mlx-coral: #e8603c;
  --mlx-dark: #21273c;
  --mlx-teal: #2d9d8f;
  --mlx-bg: #f8f7f5;
  --mlx-border: #ece9e5;
  --mlx-text: #2d2926;
  --mlx-muted: #6d6862; /* WCAG AA-passing muted gray (5.15:1 on --mlx-bg) */
}

/* ── Exercise title ─────────────────────────────────────────────── */
.mlx-exercise-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--mlx-dark);
  font-family: inherit;
  margin: 0 0 14px;
  line-height: 1.35;
}

/* ── Instruction / situation box ──────────────────────────────────
   Previously borrowed .mlai-question from mylinguistics-ai-writing's
   own CSS - which only loads when an mlai/* block is present on the
   page. CE reading exercises and PE formulaire exercises never have
   one (no AI grading needed), so that stylesheet never loaded there
   and the box rendered as plain unstyled text. This class lives here
   instead, tied to the exercise-title block, which is present on
   every single generated exercise regardless of type - guaranteed
   to load every time. */
.mlx-question-box {
  border-left: 3px solid var(--mlx-coral);
  background: var(--mlx-bg);
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mlx-text);
}

/* ── Model answer toggle ────────────────────────────────────────── */
.mlx-model-answer {
  margin-top: 18px;
}

.mlx-model-answer__details {
  border: 1px solid var(--mlx-border);
  border-radius: 10px;
  overflow: hidden;
}

.mlx-model-answer__summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  background: var(--mlx-bg);
  font-weight: 600;
  font-size: 13px;
  color: var(--mlx-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mlx-model-answer__summary::-webkit-details-marker { display: none; }

.mlx-model-answer__icon {
  color: var(--mlx-coral);
}

.mlx-model-answer__body {
  padding: 16px 18px;
}

.mlx-model-answer__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mlx-muted);
  margin: 0 0 8px;
}

.mlx-model-answer__text {
  background: var(--mlx-bg);
  border: 1px solid var(--mlx-border);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mlx-text);
  margin-bottom: 18px;
}
.mlx-model-answer__text p { margin: 0 0 12px; }
.mlx-model-answer__text p:last-child { margin-bottom: 0; }

.mlx-model-answer__checklist {
  list-style: none;
  margin: 0;
  padding: 0 4px;
}
.mlx-model-answer__checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--mlx-border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mlx-text);
}
.mlx-model-answer__checklist li:last-child { border-bottom: none; }

.mlx-model-answer__marker {
  flex-shrink: 0;
  color: var(--mlx-teal);
  font-size: 13px;
  margin-top: 2px;
}

.mlx-model-answer__checklist strong {
  color: var(--mlx-dark);
}

/* ── Answer reveal (CE reading exercises) ─────────────────────────── */
.mlx-answer-reveal {
  margin-top: 18px;
}
.mlx-answer-reveal__details {
  border: 1px solid var(--mlx-border);
  border-radius: 10px;
  overflow: hidden;
}
.mlx-answer-reveal__summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  background: var(--mlx-bg);
  font-weight: 600;
  font-size: 13px;
  color: var(--mlx-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mlx-answer-reveal__summary::-webkit-details-marker { display: none; }
.mlx-answer-reveal__icon {
  color: var(--mlx-coral);
}
.mlx-answer-reveal__body {
  padding: 14px 18px;
}
.mlx-answer-reveal__row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mlx-border);
  font-size: 13px;
  color: var(--mlx-text);
}
.mlx-answer-reveal__row:last-child { border-bottom: none; }
.mlx-answer-reveal__num {
  color: var(--mlx-teal);
  flex-shrink: 0;
}

/* ── Question badge (numbered question label) ────────────────────── */
.mlx-question-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
}
.mlx-question-badge__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mlx-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mlx-question-badge__text {
  font-size: 14px;
  color: var(--mlx-dark);
  font-weight: 500;
}

/* ── Image choice strip (sits above mlqa/quiz-choice's real A/B/C
   options - purely visual, the actual answer logic stays in quiz-choice) */
.mlx-image-choice-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.mlx-image-choice__item {
  border: 1px solid var(--mlx-border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #fff;
}
.mlx-image-choice__img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
  display: block;
}
.mlx-image-choice__placeholder {
  width: 100%;
  height: 90px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--mlx-bg);
  color: var(--mlx-muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.mlx-image-choice__label {
  font-size: 12px;
  color: var(--mlx-muted);
}