/* Shared exercise widget styles. Theme-var driven so each course's accent flows
   through; self-sufficient so courses without their own .quiz CSS (e.g. espresso)
   still render correctly. Paired with ./exercise.js. */

.quiz {
  border: 1px solid color-mix(in srgb, var(--accent, #666) 30%, transparent);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  margin: 1.8rem 0;
  background: #fff;
}

.quiz [data-q] + [data-q] {
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--accent, #666) 15%, transparent);
}

.quiz p.q {
  font-weight: bold;
  margin: 0 0 0.6rem;
}

.quiz button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  margin: 0.4rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--accent, #666) 25%, #ccc);
  border-radius: 6px;
  background: var(--paper, #fbfaf7);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.quiz button:hover:not(:disabled) {
  background: var(--accent-soft, #eee);
}
.quiz button:disabled {
  cursor: default;
}
.quiz button:focus-visible {
  outline: 2px solid var(--accent, #666);
  outline-offset: 2px;
}

.quiz button.correct {
  background: #e9f7ef;
  border-color: #34a06a;
  color: #176d43;
}
.quiz button.wrong {
  background: #fdecea;
  border-color: #d9534f;
  color: #a3231d;
}

.quiz .ex-feedback {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.quiz .ex-feedback.ok {
  color: #176d43;
}
.quiz .ex-feedback.no {
  color: #a3231d;
}

@media (prefers-reduced-motion: reduce) {
  .quiz button {
    transition: none;
  }
}