/* Foundations classroom: quiet surfaces, generous type, precise blue accents. */
.course-page { background:var(--surface); }
.course-main { max-width:1260px; }
.course-topline { display:flex; align-items:center; gap:24px; margin:34px 0 42px; font-size:11px; color:var(--muted); }
.course-topline>span { margin-left:auto; font-size:9px; letter-spacing:1.5px; }
.course-topline .share-menu { margin:0; }
.course-topline .share-menu summary { font-size:11px; }
.classroom { display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(40px,7vw,100px); align-items:start; }
.course-sidebar { position:sticky; top:88px; padding-bottom:24px; max-height:calc(100dvh - 108px); overflow-y:auto; scrollbar-width:thin; }
.course-identity .eyebrow { font-size:9px; letter-spacing:1.5px; color:var(--muted); }
.course-identity h1 { font-size:31px; line-height:1.08; font-weight:600; letter-spacing:-1.2px; margin:15px 0; }
.course-identity>p { font-size:13px; color:var(--muted); line-height:1.6; }
.course-progress { margin:26px 0 20px; padding-right:8px; }
.course-progress>div { display:flex; justify-content:space-between; gap:12px; font-size:11px; }
.course-progress strong { font-weight:500; }
.course-progress span { color:var(--muted); }
.course-progress progress { width:100%; height:5px; display:block; margin-top:10px; appearance:none; border:0; border-radius:9px; overflow:hidden; background:var(--inset); accent-color:var(--blue); }
.course-progress progress::-webkit-progress-bar { background:var(--inset); }
.course-progress progress::-webkit-progress-value { background:var(--blue); border-radius:9px; transition:width .35s ease; }
.course-progress progress::-moz-progress-bar { background:var(--blue); border-radius:9px; }
.syllabus-menu { padding:0; margin:0; border:0; border-radius:0; background:transparent; }
.syllabus-menu>summary { display:flex; align-items:center; justify-content:space-between; padding:12px 7px 12px 0; cursor:pointer; font-size:13px; font-weight:500; list-style:none; }
.syllabus-menu>summary::-webkit-details-marker { display:none; }
.syllabus-menu[open]>summary>span { transform:rotate(180deg); }
.chapter-group { margin:13px 0 24px; }
.chapter-group h2 { font-size:9px; letter-spacing:.6px; color:var(--muted); font-weight:500; margin:0 0 8px; padding-left:9px; text-transform:uppercase; }
.chapter-group ol { list-style:none; margin:0; padding:0 7px 0 0; }
.chapter-group li { padding:0; margin:0; }
.chapter-group a { display:flex; gap:10px; align-items:center; padding:10px 9px; border-radius:9px; font-size:12px; line-height:1.35; color:var(--secondary); transition:background .2s,color .2s; }
.chapter-group a:hover { background:var(--surface-soft); }
.chapter-group a[aria-current] { color:var(--link); background:var(--blue-soft); font-weight:500; }
.lesson-index { flex:0 0 22px; width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:8px; color:var(--muted); }
.lesson-index.is-complete { border-color:var(--blue); color:var(--link); background:var(--blue-soft); font-size:11px; }
.chapter-group a[aria-current] .lesson-index { background:var(--blue); border-color:var(--blue); color:var(--surface); }
.notebook-actions { border-top:1px solid var(--line-soft); padding-top:16px; margin-right:8px; }
.notebook-actions .text-button { display:flex; align-items:center; gap:7px; color:var(--link); font-size:11px; min-height:35px; padding:6px 0; }
.notebook-actions .text-button img { width:13px; height:13px; }
.notebook-actions .reset-course { color:var(--muted); font-size:10px; }
.notebook-actions p { font-size:10px; line-height:1.5; color:var(--muted); margin:10px 0 0; }
.lesson-reader { min-width:0; max-width:760px; padding:22px 0 10px; scroll-margin-top:100px; }
.lesson-heading { padding-bottom:32px; border-bottom:1px solid var(--line-soft); animation:lesson-arrive .45s ease both; }
.lesson-kicker { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; font-size:9px; letter-spacing:1px; color:var(--muted); }
.lesson-kicker .eyebrow { color:var(--link); font-size:9px; letter-spacing:1.2px; }
.lesson-heading h2 { font-size:clamp(42px,4.6vw,62px); line-height:1.03; font-weight:600; letter-spacing:-2.7px; margin:24px 0; color:var(--text); }
.lesson-heading h2:focus-visible { outline:2px solid var(--blue); outline-offset:8px; }
.lesson-deck { font-size:23px; line-height:1.4; color:var(--muted); letter-spacing:-.5px; margin-bottom:0; }
.lesson-prose section { margin-top:35px; }
.lesson-prose h3 { font-size:23px; font-weight:600; letter-spacing:-.65px; margin:0 0 12px; }
.lesson-prose p { font-size:17px; line-height:1.8; color:var(--secondary); margin:0; }
.lesson-table { overflow:auto; margin:30px 0; border:1px solid var(--line-soft); border-radius:16px; }
.lesson-table table { width:100%; border-collapse:collapse; font-size:14px; }
.lesson-table caption { padding:15px; font-weight:500; text-align:left; background:var(--surface-soft); }
.lesson-table th,.lesson-table td { border:0; border-bottom:1px solid var(--line-soft); padding:13px 18px; text-align:left; white-space:normal; color:var(--secondary); }
.lesson-table thead th { font-size:10px; letter-spacing:.5px; color:var(--muted); }
.lesson-table tbody th { font-weight:500; }
.lesson-table tr:last-child>th,.lesson-table tr:last-child>td { border-bottom:0; }
.lesson-takeaway { border-left:3px solid var(--blue); padding:3px 0 3px 24px; margin:38px 0 45px; }
.lesson-takeaway .eyebrow { font-size:9px; color:var(--link); }
.lesson-takeaway p { font-size:22px; font-weight:500; letter-spacing:-.5px; line-height:1.4; margin:10px 0 0; }
.lesson-exercise { background:var(--surface-soft); border-radius:25px; padding:32px; margin:0 0 38px; }
.lesson-exercise .eyebrow,.lesson-check .eyebrow,.lesson-practice .eyebrow { font-size:9px; color:var(--muted); }
.lesson-exercise h3,.lesson-check h3 { font-size:29px; font-weight:600; letter-spacing:-1px; margin:12px 0 16px; }
.lesson-exercise>p { font-size:15px; color:var(--secondary); line-height:1.75; }
.lesson-exercise .inline-link { display:inline-flex; gap:6px; font-size:13px; margin:4px 0 28px; }
.lesson-exercise label { font-size:12px; color:var(--text); display:block; margin:0 0 10px; }
.lesson-exercise label>span { display:block; font-size:10px; color:var(--muted); margin-top:4px; }
.lesson-exercise textarea { width:100%; display:block; min-height:145px; font:inherit; font-size:14px; line-height:1.65; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px; resize:vertical; }
.lesson-exercise textarea:focus { outline:3px solid #0071e333; border-color:var(--blue); }
.notes-bottom { display:flex; justify-content:space-between; align-items:start; gap:12px; color:var(--muted); font-size:10px; margin-top:8px; min-height:20px; }
#notesCount { white-space:nowrap; }
.lesson-check { padding:0 0 30px; }
.lesson-check fieldset { border:0; margin:0 0 20px; padding:0; min-width:0; }
.lesson-check legend { font-size:16px; color:var(--secondary); line-height:1.5; padding:0 0 18px; }
.lesson-check label.answer-option { display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:13px; padding:16px; margin:0 0 9px; font-size:14px; line-height:1.5; color:var(--secondary); cursor:pointer; background:var(--surface); }
.lesson-check .answer-option:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); color:var(--text); }
.lesson-check .answer-option input { appearance:auto; accent-color:var(--blue); width:17px; height:17px; flex:0 0 17px; margin:0; padding:0; border:0; }
.lesson-check .answer-option:has(input:focus-visible) { outline:3px solid #0071e34a; outline-offset:3px; }
.lesson-check .outline-button { font-size:13px; padding:11px 19px; }
.lesson-check button:disabled { opacity:.65; cursor:default; }
.check-feedback { font-size:13px; line-height:1.7; color:var(--warning); margin:15px 0 0; }
.check-feedback.is-correct { color:var(--green); }
.lesson-references { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:11px; padding-bottom:30px; line-height:1.7; }
.lesson-references>span { width:100%; color:var(--muted); }
.lesson-references a { color:var(--link); }
.lesson-navigation { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line-soft); padding-top:28px; }
.lesson-navigation>div { display:flex; flex-direction:column; align-items:end; gap:12px; }
.lesson-navigation .light-button { font-size:13px; padding:11px 21px; }
.lesson-navigation .light-button:disabled { opacity:.45; cursor:default; }
.next-lesson-link { font-size:12px; color:var(--link); }
.lesson-complete { text-align:center; border-radius:28px; background:var(--surface-soft); padding:45px 30px; margin-bottom:35px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.lesson-complete[hidden] { display:none; }
.completion-orbit { width:70px; height:70px; border:1px solid var(--blue); border-radius:50%; display:grid; place-items:center; color:var(--link); font-size:25px; }
.lesson-complete h3 { font-size:44px; font-weight:600; letter-spacing:-2px; line-height:1.08; margin:0; }
.lesson-complete p { color:var(--muted); font-size:16px; max-width:440px; margin:0; }
.lesson-complete .eyebrow { font-size:9px; color:var(--muted); }
.lesson-complete .inline-link { font-size:13px; }
.lesson-practice { margin:32px 0; padding:30px; background:var(--surface-soft); border-radius:25px; }
.lesson-practice h2 { font-size:28px; font-weight:600; letter-spacing:-.9px; line-height:1.15; margin:12px 0 24px; }
.lesson-practice label { font-size:12px; color:var(--secondary); display:block; }
.lesson-practice select { display:block; padding:11px 15px; margin:7px 0 20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font:inherit; font-size:14px; width:100%; max-width:240px; }
.house-practice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.house-practice-grid>div { padding:14px 7px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface); text-align:center; }
.house-practice-grid span { display:block; color:var(--muted); font-size:9px; }
.house-practice-grid strong { display:block; font-size:12px; font-weight:500; margin-top:4px; }
.lesson-practice .practice-caption { color:var(--muted); font-size:10px; line-height:1.6; margin:18px 0 0; }
.aspect-practice-visual { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:20px; }
.aspect-practice-visual svg { width:180px; height:180px; flex-shrink:0; }
.aspect-practice-visual circle { fill:none; stroke:#cbd3dd; stroke-width:1; }
.aspect-practice-visual line { stroke:var(--blue); stroke-width:1.5; }
.aspect-practice-visual circle.practice-point { fill:var(--blue); stroke:var(--blue); }
.aspect-practice-visual output { font-size:52px; font-weight:500; letter-spacing:-2px; }
.aspect-practice-visual p { font-size:12px; color:var(--link); margin:0; max-width:190px; }
.lesson-practice input[type=range] { display:block; width:100%; margin:15px 0 8px; accent-color:var(--blue); }
.practice-range { display:flex; justify-content:space-between; gap:15px; font-size:9px; color:var(--muted); }
.course-reset-dialog h2 { font-size:29px; letter-spacing:-1px; line-height:1.15; }
.course-reset-dialog p { color:var(--muted); line-height:1.6; font-size:14px; }
.course-reset-dialog .result-actions { margin-top:25px; }
@keyframes lesson-arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1060px) { .classroom { grid-template-columns:230px minmax(0,1fr); gap:42px; }.lesson-heading h2 { font-size:48px; letter-spacing:-2px; }.lesson-deck { font-size:21px; }.lesson-kicker { font-size:8px; }.lesson-exercise,.lesson-practice { padding:25px; } }
@media(max-width:860px) {
  .course-topline { margin:25px 0 30px; gap:10px; }.course-topline>span { display:none; }.course-topline [data-share] { margin-left:auto; }
  .classroom { display:block; }.course-sidebar { position:static; max-height:none; padding:25px; background:var(--surface-soft); border-radius:23px; margin-bottom:25px; }
  .course-identity h1 { font-size:28px; margin:10px 0; }.course-identity h1 br { display:none; }.course-identity>p { display:none; }.course-identity .eyebrow { font-size:8px; }
  .course-progress { margin:20px 0 8px; padding:0; }.syllabus-menu>summary { padding-bottom:3px; }.syllabus-menu[open] { padding-bottom:10px; }
  .chapter-group ol { display:grid; grid-template-columns:1fr 1fr; gap:3px; }.chapter-group a { font-size:12px; }.chapter-group a:hover { background:var(--inset); }
  .notebook-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 10px; padding-top:10px; margin-top:15px; margin-right:0; }
  .notebook-actions p { width:100%; font-size:9px; margin:2px 0 0; }.notebook-actions .text-button { font-size:10px; }.notebook-actions .reset-course { font-size:9px; }
  .lesson-reader { max-width:760px; margin:auto; padding-top:15px; scroll-margin-top:125px; }.lesson-heading h2 { font-size:46px; letter-spacing:-2px; margin:22px 0; }
  .lesson-kicker { font-size:8px; gap:9px; }.lesson-kicker .eyebrow { font-size:8px; }.lesson-deck { font-size:21px; }.lesson-prose p { font-size:16px; line-height:1.8; }.lesson-prose h3 { font-size:22px; }
  .lesson-exercise,.lesson-practice { padding:24px; border-radius:22px; }.lesson-exercise textarea { font-size:16px; }.lesson-takeaway p { font-size:21px; }.lesson-takeaway { padding-left:20px; }
  .lesson-navigation { align-items:start; }.lesson-navigation .back-link { font-size:11px; padding-top:12px; }.lesson-navigation .light-button { font-size:11px; padding:12px 16px; }.next-lesson-link { font-size:11px; }
}
@media(max-width:480px) {
  .chapter-group ol { grid-template-columns:1fr; }.course-sidebar { padding:22px; }.lesson-heading h2 { font-size:42px; }.lesson-deck { font-size:20px; }.lesson-kicker { display:block; }.lesson-kicker>span { display:block; margin-bottom:8px; }
  .house-practice-grid { grid-template-columns:repeat(3,1fr); }.house-practice-grid strong { font-size:11px; }.lesson-check label.answer-option { padding:14px; font-size:13px; }.lesson-check legend { font-size:15px; }
  .aspect-practice-visual { gap:12px; }.aspect-practice-visual svg { width:135px; height:135px; }.aspect-practice-visual output { font-size:42px; }.aspect-practice-visual p { font-size:10px; }
  .lesson-practice h2 { font-size:25px; }.lesson-complete { padding:35px 23px; }.lesson-complete h3 { font-size:38px; }.lesson-table th,.lesson-table td { padding:12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .lesson-heading { animation:none; }.chapter-group a,.course-progress progress::-webkit-progress-value { transition:none; } }
@media print { .course-sidebar,.course-topline,.lesson-navigation,.lesson-check,.lesson-exercise textarea,.lesson-exercise label,.notes-bottom,.lesson-complete { display:none!important; }.classroom { display:block; }.lesson-reader { max-width:none; padding:0; }.lesson-heading h2 { font-size:30px; }.lesson-prose p { font-size:12px; }.lesson-heading { animation:none; }.lesson-exercise,.lesson-practice { break-inside:avoid; }.course-page main { padding:0; } }
