/* civics.css - /civics-test/ (practice quiz) and /civics-test/questions/ (the full list). Colours come from the site's
   --cv-* tokens, which dark mode redefines, so nothing here needs a dark-mode rule. */

.cv-civics-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cv-civics-star{ color:var(--cv-red); font-weight:700; }

/* quiz */
.cv-civics{ gap:14px; }
.cv-civics h2:focus{ outline:none; }
.cv-civics-modes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.cv-civics-mode{ display:grid; gap:8px; align-content:start; padding:14px; border:1px solid var(--cv-line); border-radius:var(--cv-radius); background:var(--cv-surface-2); }
.cv-civics-mode h3{ margin:0; font-size:17px; color:var(--cv-ink); }
.cv-civics-mode p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--cv-ink-2); }
.cv-civics-mode .cv-btn, .cv-civics-mode .cv-field{ justify-self:start; max-width:100%; }
.cv-civics-label{ margin:0; font-size:13px; font-weight:700; color:var(--cv-ink-2); }
.cv-civics-count{ margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cv-ink-3); }
.cv-civics-qtext{ margin:0; display:grid; gap:4px; font-size:clamp(19px, 2.4vw, 23px); line-height:1.35; color:var(--cv-ink); }
.cv-civics-num{ font-size:13px; font-weight:700; color:var(--cv-red); }
.cv-civics-score{ margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13.5px; }
.cv-civics-need{ color:var(--cv-ink-3); }
.cv-civics-input{ width:100%; max-width:560px; box-sizing:border-box; font:inherit; resize:vertical; }
.cv-civics-actions{ margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.cv-civics-answer{ display:grid; gap:6px; padding:12px 14px; border-left:4px solid var(--cv-ok); background:var(--cv-surface-2); border-radius:0 var(--cv-radius) var(--cv-radius) 0; }
.cv-civics-typed{ margin:0; color:var(--cv-ink-2); }
.cv-civics-alabel{ margin:0; font-weight:700; color:var(--cv-ink); }
.cv-civics-result{ margin:0; font-size:16px; font-weight:600; }
.cv-civics-result.is-pass{ color:var(--cv-ok); }
.cv-civics-result.is-fail{ color:var(--cv-red); }
.cv-civics-review{ margin:0; padding-left:20px; display:grid; gap:10px; }
.cv-civics h3{ margin:4px 0 0; font-size:17px; }

/* answers list (quiz and full list) */
.cv-civics-a{ margin:0; padding-left:20px; display:grid; gap:2px; font-size:15px; line-height:1.5; color:var(--cv-ink); }
.cv-civics-q{ margin:0; font-weight:700; color:var(--cv-ink); line-height:1.45; }

/* full list */
.cv-civics-intro p{ margin:0; line-height:1.55; }
.cv-civics-toc p{ margin:0 0 4px; font-size:14.5px; }
.cv-civics-section{ display:grid; gap:10px; }
.cv-civics-h2{ margin:8px 0 0; font-size:24px; color:var(--cv-ink); border-bottom:2px solid var(--cv-red); padding-bottom:4px; }
.cv-civics-h3{ margin:6px 0 0; font-size:18px; color:var(--cv-blue); scroll-margin-top:80px; }
.cv-civics-list{ margin:0; padding-left:34px; display:grid; gap:14px; }
.cv-civics-list > li{ padding-left:4px; scroll-margin-top:80px; }
.cv-civics-list > li::marker{ font-weight:700; color:var(--cv-ink-3); }
.cv-civics-list .cv-note{ margin-top:4px; }

@media (max-width:600px){
  .cv-civics-list{ padding-left:28px; }
  .cv-civics-actions .cv-btn{ flex:1 1 auto; text-align:center; }
}