/* ═══════════════════════════════════════════════════
   quiz.css — shared quiz styles for all module pages
   Link from any 1.x subfolder as: ../quiz.css
   Requires module.css to already be loaded.
   ═══════════════════════════════════════════════════ */

/* ── Question wrapper ──────────────────────────────── */
.quiz-q {
  margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.quiz-q:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.quiz-q-num {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.quiz-q-text { font-size: 16px; font-weight: 600; margin-bottom: 18px; line-height: 1.5; }

/* ── Multiple choice options ───────────────────────── */
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid var(--line); border-radius: 11px; padding: 12px 16px;
  cursor: pointer; transition: border-color .15s, background .15s; font-size: 15px;
}
.quiz-opt:hover { border-color: #ccc8ef; }
.quiz-opt.selected      { border-color: var(--accent); background: var(--accent-soft); }
.quiz-opt.correct       { border-color: var(--green);  background: var(--green-soft); }
.quiz-opt.wrong         { border-color: var(--red);    background: var(--red-soft); }
.quiz-opt.correct-reveal { border-color: var(--green); }
.quiz-opt.correct-reveal .quiz-opt-ltr { background: var(--green); color: #fff; }

.quiz-opt-ltr {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: background .15s, color .15s;
}
.quiz-opt.selected .quiz-opt-ltr { background: var(--accent); color: #fff; }
.quiz-opt.correct  .quiz-opt-ltr { background: var(--green);  color: #fff; }
.quiz-opt.wrong    .quiz-opt-ltr { background: var(--red);    color: #fff; }

/* ── True / False ──────────────────────────────────── */
.quiz-tf { display: flex; gap: 10px; }
.quiz-tf-btn {
  flex: 1; padding: 11px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 14px; font-weight: 700;
  transition: all .12s; color: var(--muted);
}
.quiz-tf-btn:hover           { border-color: #ccc8ef; color: var(--ink); }
.quiz-tf-btn.selected        { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.quiz-tf-btn.correct         { border-color: var(--green);  background: var(--green-soft);  color: var(--green); }
.quiz-tf-btn.wrong           { border-color: var(--red);    background: var(--red-soft);    color: var(--red); }
.quiz-tf-btn.correct-reveal  { border-color: var(--green);  color: var(--green); }

/* ── Ordering ──────────────────────────────────────── */
.quiz-order-list { display: flex; flex-direction: column; gap: 6px; }
.quiz-order-item {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--line); border-radius: 10px;
  padding: 9px 12px; background: var(--card); font-size: 14px;
}
.quiz-order-item.correct-pos { border-color: var(--green); background: var(--green-soft); }
.quiz-order-item.wrong-pos   { border-color: var(--red);   background: var(--red-soft); }

.order-pos {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.order-btns { display: flex; flex-direction: column; gap: 2px; margin-left: auto; flex-shrink: 0; }
.order-btn {
  width: 26px; height: 20px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg); cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center; transition: background .1s;
}
.order-btn:hover    { background: var(--accent-soft); }
.order-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── Matching ──────────────────────────────────────── */
.quiz-match-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-match-left, .quiz-match-right { display: flex; flex-direction: column; gap: 6px; }
.match-item {
  padding: 9px 12px; border-radius: 10px; border: 2px solid var(--line);
  background: var(--card); font-size: 13px; cursor: pointer;
  transition: border-color .12s, background .12s; min-height: 42px; display: flex; align-items: center;
}
.match-item.active    { border-color: var(--accent);  background: var(--accent-soft); }
.match-item.matched-0 { border-color: #7c5ccf; background: #ede8ff; }
.match-item.matched-1 { border-color: #1ea878; background: #e4f8f1; }
.match-item.matched-2 { border-color: #d07826; background: #fef3e4; }
.match-item.matched-3 { border-color: #9b6cd4; background: #f0ebff; }
.match-item.correct   { border-color: var(--green); background: var(--green-soft); }
.match-item.wrong     { border-color: var(--red);   background: var(--red-soft); }

/* ── Fill-in ───────────────────────────────────────── */
.quiz-fill input {
  width: 100%; padding: 10px 14px; border: 2px solid var(--line);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s;
}
.quiz-fill input:focus   { border-color: var(--accent); }
.quiz-fill input.correct { border-color: var(--green); background: var(--green-soft); }
.quiz-fill input.wrong   { border-color: var(--red);   background: var(--red-soft); }

/* ── Explanation ───────────────────────────────────── */
.quiz-explain {
  margin-top: 10px; font-size: 13px; padding: 10px 14px;
  background: #faf8f3; border: 1px solid var(--line);
  border-radius: 8px; color: var(--muted); line-height: 1.5;
}

/* ── Score banner ──────────────────────────────────── */
.quiz-banner {
  border-radius: 12px; padding: 20px 24px; text-align: center;
  border: 2px solid; margin-bottom: 4px;
}
.quiz-banner.pass { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.quiz-banner.fail { background: var(--red-soft);   border-color: var(--red);   color: var(--red); }
.quiz-score-big { font-size: 40px; font-weight: 800; }
.quiz-score-lbl { font-size: 14px; margin-top: 4px; opacity: .8; font-weight: 600; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 500px) {
  .quiz-match-grid { grid-template-columns: 1fr; }
}

/* ── Dark theme overrides for hardcoded light fills ── */
html[data-theme="dark"] .quiz-opt:hover,
html[data-theme="dark"] .quiz-tf-btn:hover { border-color: #4a4170; }
html[data-theme="dark"] .match-item.matched-0 { border-color: #a385e6; background: #2c2447; }
html[data-theme="dark"] .match-item.matched-1 { border-color: #2fbd8c; background: #143229; }
html[data-theme="dark"] .match-item.matched-2 { border-color: #e0974a; background: #38280f; }
html[data-theme="dark"] .match-item.matched-3 { border-color: #c79bef; background: #2e2547; }
html[data-theme="dark"] .quiz-explain { background: #1b1726; }