/* ============================================================
   Quiz widget styling — pairs with assets/quiz.js
   ============================================================ */

.quiz {
  background: #fff;
  border: 1px solid var(--rule, #d9d4c7);
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1.3rem;
  margin: 1.8rem 0;
  box-shadow: 0 1px 3px var(--shadow, rgba(40,36,28,0.08));
}
.quiz .q {
  font-weight: 600;
  margin: 0 0 0.9rem;
}
.quiz .qlabel {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--accent-2, #1f4d7a);
  display: block;
  margin-bottom: 0.3rem;
}
.quiz button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  background: var(--paper, #fffef9);
  border: 1px solid var(--rule, #d9d4c7);
  border-radius: 5px;
  padding: 0.55rem 0.8rem;
  margin: 0.4rem 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.quiz button:hover:not(:disabled) { background: #f3f1e9; border-color: #b9b3a3; }
.quiz button:disabled { cursor: default; opacity: 0.95; }
.quiz button.right {
  border-color: var(--good, #1d6b3a);
  background: #eef7f0;
  box-shadow: inset 3px 0 0 var(--good, #1d6b3a);
}
.quiz button.wrong {
  border-color: var(--bad, #9a2a2a);
  background: #fbefef;
  box-shadow: inset 3px 0 0 var(--bad, #9a2a2a);
}
.quiz .explain {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 5px;
  font-size: 0.92rem;
  background: var(--note-bg, #f6f4ec);
  border: 1px solid var(--rule, #d9d4c7);
}
.quiz .explain.ok { border-left: 3px solid var(--good, #1d6b3a); }
.quiz .explain.no { border-left: 3px solid var(--bad, #9a2a2a); }
.quiz .explain::before {
  content: attr(data-tag);
  font-weight: 600;
}
.quiz .explain.ok::before { color: var(--good, #1d6b3a); }
.quiz .explain.no::before { color: var(--bad, #9a2a2a); }

.quiz [data-retry] {
  width: auto;
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--ink-soft, #44423d);
  background: transparent;
  border: 1px solid var(--rule, #d9d4c7);
}