/* Course study components; layered over the existing teaching stylesheet. */
:root { --accent: #945127; --line: #ded7cc; --muted: #67695f; }
body { color: #292f2b; background: #faf8f2; }
main.course { max-width: 1080px; }
header { margin-bottom: 36px; }
.course h1 { max-width: 800px; }
.intro { max-width: 750px; }
.meta, .tag, .controls, button, input, .number, .flow, .source-note { font-family: system-ui, sans-serif; }
.meta, .source-note { color: var(--muted); font-size: 14px; }
.tag { display: inline-block; padding: 3px 9px; background: #ede8dc; border-radius: 3px; font-size: 12px; }
.number { color: var(--accent); font-size: 13px; font-weight: 650; letter-spacing: 1px; }
.stats { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 20px 0; border-block: 1px solid var(--line); }
.stats strong { display: block; font: 30px/1.2 Georgia, serif; }
.stats span { font: 12px/1.4 system-ui, sans-serif; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 5px; background: #fffdf8; }
.card h3 { font-size: 22px; line-height: 1.25; margin: 9px 0; font-weight: 500; }
.card p { margin: 10px 0; font-size: 16px; }
.card a { overflow-wrap: anywhere; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0; }
input[type=search] { width: min(100%, 450px); padding: 12px; border: 1px solid #a8a89b; border-radius: 4px; font-size: 16px; background: white; }
button { padding: 10px 14px; background: #f1eee5; color: #363c34; border: 1px solid #a8a89b; border-radius: 4px; font-size: 14px; cursor: pointer; }
button:hover { background: #e5e0d3; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lesson-card { scroll-margin-top: 20px; }
.lesson-card summary { display: list-item; font-size: 17px; line-height: 1.5; }
.lesson-card summary .number { display: inline-block; min-width: 30px; }
.lesson-card .content { padding: 8px 6px 16px; }
.lesson-card h3 { font: 600 15px/1.4 system-ui, sans-serif; margin: 28px 0 10px; }
.lesson-card p, .lesson-card li { font-size: 17px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; margin: 18px 0; }
.flow .node { border: 1px solid #b8b8a9; background: #f0eee4; padding: 10px 14px; border-radius: 4px; }
.flow .arrow { color: var(--accent); }
.correction { border-left: 3px solid #b77239; background: #f5eee1; padding: 16px 20px; }
.correction p { margin: 6px 0; }
.practice { margin-top: 28px; padding: 22px; background: #edf0e7; border: 1px solid #d2d9ca; border-radius: 5px; }
.practice h2 { margin-top: 0; }
.quiz-options { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-options button { flex: 1 1 140px; }
.feedback { min-height: 1.6em; font-size: 16px; }
.correct { border-color: #466c42; background: #e0ecd8; }
.incorrect { border-color: #9f4d39; background: #f2e1d8; }
.table-wrap { overflow-x: auto; }
.table-wrap th:first-child { min-width: 120px; }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
[hidden] { display: none !important; }
.only-print { display: none; }
@media (max-width: 650px) { .grid { grid-template-columns: 1fr; } .stats { gap: 18px 30px; } .course h1 { font-size: 38px; } .card { padding: 16px; } }
@media print { .controls, .no-print, .quiz-options { display: none !important; } .only-print { display: block; } .grid { display: block; } .card { margin: 12px 0; break-inside: avoid; } .lesson-card { break-inside: auto; border: 0; padding: 0; } .lesson-card summary { font-weight: bold; margin-top: 20px; } .lesson-card .content { padding: 0; } body { background: white; } .course h1 { font-size: 30pt; } .source-note { font-size: 9pt; } }

.video-reference { font-variant-numeric: tabular-nums; }