/* ==========================================================================
   Miftah Islamiyat — quiz engine  (visual redesign, Stage 2)

   Feedback is the point. The design gives explanations room and makes the
   distinction between "your answer" and "the correct answer" legible without
   relying on colour alone.
   ========================================================================== */

.quiz { margin-bottom: var(--s5); }
.quiz__intro {
  font-size: 0.93rem; color: var(--ink-soft);
  padding: var(--s3) var(--s4); margin-bottom: var(--s5);
  background: var(--paper-sunk); border-radius: var(--radius); max-width: none;
}

.quiz-item {
  padding: var(--s6);
  margin-bottom: var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.quiz-item__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.quiz-item__stem {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: 0; margin-bottom: var(--s2);
  font-family: var(--font-ui); font-weight: 650; font-size: var(--t-1);
  line-height: 1.45; color: var(--ink-strong);
}
.quiz-item__num {
  flex: none; width: 1.7rem; height: 1.7rem;
  display: inline-grid; place-items: center;
  font-size: 0.76rem; font-weight: 700;
  color: #fff; background: var(--pine); border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.quiz-item__type {
  margin: 0 0 var(--s4) 2.7rem;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint);
}
.quiz-item__context {
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  font-size: 0.92rem; max-width: none;
  background: var(--paper-sunk); border-radius: var(--radius);
}

/* --- Options ------------------------------------------------------------- */
.quiz-item__options { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.quiz-option { margin: 0 0 var(--s2); max-width: none; }

.quiz-option__label {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .13s var(--ease), background .13s var(--ease);
}
.quiz-option__label:hover { border-color: var(--pine-edge); background: var(--pine-tint); }
.quiz-option__text { flex: 1; }

.quiz-option__feedback {
  margin: var(--s2) 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  font-size: 0.9rem; line-height: 1.6; max-width: none;
  background: var(--paper-sunk);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}

/* After checking: the correct option is marked with a tick as well as colour,
   so the state does not depend on colour perception. */
.quiz-item.is-checked .quiz-option[data-correct="1"] .quiz-option__label {
  border-color: var(--sage); background: var(--sage-tint);
}
.quiz-item.is-checked .quiz-option[data-correct="1"] .quiz-option__text::after {
  content: " ✓"; color: var(--sage); font-weight: 700;
}
.quiz-item.is-checked .quiz-option[data-correct="1"] .quiz-option__feedback {
  border-left-color: var(--sage); background: var(--sage-tint);
}
.quiz-item.is-checked .quiz-option.is-chosen[data-correct="0"] .quiz-option__label {
  border-color: var(--clay); background: var(--clay-tint);
}
.quiz-item.is-checked .quiz-option.is-chosen[data-correct="0"] .quiz-option__text::after {
  content: " ✕"; color: var(--clay); font-weight: 700;
}
.quiz-item.is-checked .quiz-option[data-correct="0"] .quiz-option__feedback {
  border-left-color: var(--gold); background: var(--gold-tint);
}

.quiz-item__result {
  margin: var(--s3) 0 0; max-width: none;
  font-family: var(--font-ui); font-weight: 620; font-size: 0.92rem;
}
.quiz-item.is-correct   .quiz-item__result { color: var(--sage); }
.quiz-item.is-incorrect .quiz-item__result { color: var(--clay); }

.quiz-item__explanation {
  margin-top: var(--s4); padding: var(--s4) var(--s5);
  background: var(--indigo-tint);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius);
}
.quiz-item__explanation h5 { color: var(--indigo); margin-bottom: var(--s2); }
.quiz-item__explanation p { max-width: none; margin: 0; }

/* --- Self-marked items --------------------------------------------------- */
.quiz-item__write { margin-bottom: var(--s4); }
.quiz-item__criteria { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.quiz-item__criteria > summary {
  font-family: var(--font-ui); font-weight: 650; font-size: 0.9rem;
  color: var(--pine-deep); cursor: pointer;
}
.quiz-item__criteria-lede { margin-top: var(--s4); font-size: 0.88rem; }
.quiz-item__criteria-list { list-style: none; padding: 0; }
.quiz-item__criteria-list li { max-width: none; margin-bottom: 0; }
.quiz-item__criteria-list label {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  font-size: 0.92rem; cursor: pointer;
}
.quiz-item__criteria-list label:hover { background: var(--paper-sunk); }

.quiz-item__indicative {
  margin-top: var(--s4); padding: var(--s4) var(--s5);
  background: var(--pine-tint); border-radius: var(--radius);
}
.quiz-item__indicative h5 { color: var(--pine-deep); }
.quiz-item__indicative p { max-width: none; }
.quiz-item__indicative-note {
  margin-bottom: 0; font-size: 0.82rem; font-style: italic; color: var(--ink-soft);
}

/* --- Score --------------------------------------------------------------- */
.quiz__score {
  padding: var(--s4) var(--s5); min-height: 1rem;
  background: var(--paper-sunk); border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 620;
}
.quiz__score p { margin: 0; max-width: none; }

/* --- Development only: rejected items ------------------------------------ */
.quiz-problems {
  padding: var(--s5); margin-bottom: var(--s4);
  background: var(--clay-tint); border: 2px solid var(--clay);
  border-radius: var(--radius);
}
.quiz-problems h4 { color: var(--clay); }