/* Commercial-use quiz, styled as the other quizzes. Phone first: the article frame is 311 px on a phone and 700 px on a computer. */

h1 { font-size: 1.25rem; }
.questions { margin-top: 14px; }
.q { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.q legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-weight: 600; font-size: 0.9375rem; }
.q legend + * { clear: both; }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; vertical-align: 1px;
}
.choice:has(input:disabled) { cursor: default; }
.choice:has(input:disabled:not(:checked)) { opacity: 0.6; }
.feedback { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 0.9375rem; }
.feedback.ok { background: #e9f7ef; color: #1f5f3a; }
.feedback.no { background: #fff4e5; color: #7a4100; }
.result { padding: 14px; border-radius: var(--radius); background: var(--accent-soft); }
.score { margin: 0 0 12px; font-weight: 600; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
[hidden] { display: none !important; }

@media (min-width: 600px) {
  h1 { font-size: 1.375rem; }
}