/* Shared stylesheet for the auto-generated per-question practice pages
   (dist/questions/*.html) - one external file rather than an inline
   <style> block repeated per page, since there are hundreds of them.
   Same design tokens as study-guide.html/sitemap.html for consistency. */
:root {
    --bg: #f3efe3;
    --card: #fffaf0;
    --ink: #1f2933;
    --muted: #52606d;
    --accent: #0f766e;
    --accent-soft: #d7f5ef;
    --line: #d9d2c3;
    --correct: #166534;
    --correct-bg: #ecfdf3;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1a1f1e;
        --card: #21282a;
        --ink: #e8ede9;
        --muted: #8fa39b;
        --accent: #2dd4bf;
        --accent-soft: #134e4a;
        --line: #2e3d3a;
        --correct: #4ade80;
        --correct-bg: #0f2a1c;
    }
}
:root[data-theme="dark"] {
    --bg: #1a1f1e; --card: #21282a; --ink: #e8ede9; --muted: #8fa39b;
    --accent: #2dd4bf; --accent-soft: #134e4a; --line: #2e3d3a;
    --correct: #4ade80; --correct-bg: #0f2a1c;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.7;
}
.q-wrap, .qi-wrap { max-width: 680px; margin: 0 auto; padding: 32px 24px 60px; }
.q-back, .qi-back { display: inline-block; margin-bottom: 24px; color: var(--accent); text-decoration: none; font-size: 0.95rem; }
.q-back:hover, .qi-back:hover { text-decoration: underline; }
.q-eyebrow { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
h1 { font-size: 1.5rem; line-height: 1.35; margin: 0 0 24px; color: var(--ink); }
.q-options { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.q-options li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 1rem; }
.q-options li.q-correct { background: var(--correct-bg); border-color: var(--correct); color: var(--correct); font-weight: 700; }
.q-answer { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.q-answer-label { margin: 0 0 8px; }
.q-answer-label strong { color: var(--correct); }
.q-explanation { margin: 0; color: var(--muted); }
.q-facts { background: var(--accent-soft); border-radius: 12px; padding: 14px 20px; margin-bottom: 28px; }
.q-facts h2 { font-size: 0.95rem; margin: 0 0 8px; color: var(--ink); }
.q-facts ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.92rem; }
.q-cta {
    display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
    padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 0.95rem;
    font-family: system-ui, sans-serif; margin-bottom: 40px;
}
.q-cta:hover { opacity: 0.9; }
.q-footer, .qi-footer { border-top: 1px solid var(--line); padding-top: 20px; font-size: 0.85rem; color: var(--muted); }
.q-footer a, .qi-footer a { color: var(--accent); text-decoration: none; margin-right: 14px; }
.q-footer a:hover, .qi-footer a:hover { text-decoration: underline; }
.qi-set { margin-bottom: 28px; }
.qi-set h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--ink); }
.qi-set ul { margin: 0; padding-left: 20px; }
.qi-set li { margin-bottom: 5px; }
.qi-set a { color: var(--accent); text-decoration: none; }
.qi-set a:hover { text-decoration: underline; }