/* Supplemental rules for the added learning features, using the original palette. */
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 8px; top: -100px; background: white; padding: 8px; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid #007bff; outline-offset: 3px; }
.small, .muted { font-size: .9em; color: #555; }
.filters, .form-grid, .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 15px 0; }
label { display: inline-block; }
input, select, button { font: inherit; }
input, select { padding: 6px; max-width: 100%; }
button { cursor: pointer; padding: 6px 12px; }
button:disabled { cursor: default; opacity: .65; }
.notice { margin: 15px 0; padding: 12px; background: #eee; }
.source-links { display: flex; flex-direction: column; gap: 8px; font-size: .85em; margin: 15px 0; }
.source-links a { overflow-wrap: anywhere; }
.category .question-list li { display: block; margin: 0 0 18px; }
.category .question-list a { font-weight: normal; }
.question-progress { font-size: .85em; color: #555; margin-left: 12px; }
.learning-tools { margin-top: 22px; }
.learning-tools summary { cursor: pointer; }
.quiz-main { box-sizing: border-box; max-width: calc(100% - 16px); }
.quiz-main .notes, .quiz-main .source-links, .review-item { text-align: left; }
.quiz-main h2 { font-size: 20px; }
.quiz-main #question-heading { font-size: 18px; font-weight: normal; color: #666; line-height: 1.7; }
.quiz-main .form-grid { justify-content: center; }
.quiz-main .form-grid label { display: flex; flex-direction: column; gap: 6px; }
.quiz-main .actions { justify-content: center; }
.quiz-main .quiz-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 15px 0; }
.quiz-main progress { width: 100%; height: 6px; }
.quiz-main .question-meta { margin: 20px 0; color: #666; font-size: .9em; }
.quiz-main .question-meta span { margin-right: 12px; }
.quiz-main .choices { display: flex; justify-content: space-between; gap: 12px; }
.quiz-main .choices.multiple-choice { flex-direction: column; }
.quiz-main .answer-button { display: flex; align-items: center; justify-content: center; gap: 12px; }
.quiz-main .multiple-choice .answer-button { text-align: left; justify-content: flex-start; font-size: 16px; }
.quiz-main .choice-letter { font-weight: bold; }
.quiz-main .is-correct { outline: 3px solid #168232; outline-offset: 2px; }
.quiz-main .is-wrong { outline: 3px solid #b43c20; outline-offset: 2px; }
.quiz-main .feedback { margin-top: 20px; text-align: left; line-height: 1.7; border-top: 1px solid #ccc; padding-top: 12px; }
.quiz-main .feedback h3 { font-size: 18px; }
.quiz-main .review-item { border-top: 1px solid #ccc; padding: 12px 0; }
.quiz-main .review-item summary { cursor: pointer; }
.quiz-main .result-score { font-size: 24px; margin: 20px 0; }
.quiz-main .breakdown { text-align: left; }
.quiz-footer { margin: 20px 0; }
.guide-main { padding: 20px; line-height: 1.8; }
.guide-main h1 { color: #333; }
.guide-main section { margin: 24px 0; }
.table-scroll { overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 12px; text-align: left; }
@media (max-width: 600px) {
  body > header { flex-wrap: wrap; gap: 12px; }
  .quiz-main.container { width: 340px; max-width: calc(100% - 16px); padding: 20px; }
  .question-progress { display: block; margin-left: 0; }
}