/* Projection-first learning layer; underlying evidence and interactions preserved. */
:root { --vl-space: clamp(24px,4vw,56px); }
.section,.clinical-overview,.skill-section { margin-block:var(--vl-space); }
.section-header h2,.section-heading h2 { font-size:clamp(26px,2.6vw,36px); line-height:1.2; letter-spacing:-.025em; }
.section-header,.section-heading { margin-bottom:24px; }
.source-backed { background:transparent; padding:0; border:0; border-radius:0; }
.source-backed>.section-header { padding-block:20px; border-top:2px solid var(--teal); }
.source-backed>.section-header>p { max-width:65ch; }
.sb-reading { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(24px,4vw,48px); padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:20px; margin-block:24px; align-items:center; }
.sb-reading figure { margin:0; background:#ebe8df; border-radius:12px; overflow:hidden; }
.sb-reading figure img { max-height:430px; width:100%; object-fit:contain; display:block; }
.sb-reading figcaption { background:var(--panel); padding:14px 16px; font-size:14px; line-height:1.5; }
.sb-reading-copy h3 { font-size:24px; margin:0 0 16px; }
.sb-reading-copy>p { font-size:19px; line-height:1.65; }
.sb-limit { background:transparent; padding:16px 0; border:0; border-top:1px solid var(--line); margin-top:20px; }
.sb-limit strong { color:var(--teal); font-size:14px; }
.sb-limit p { font-size:16px; line-height:1.65; }
.vl-explain,.sb-reading details,.sb-evidence { padding:14px 0; border-top:1px solid var(--line); margin:12px 0; background:transparent; }
.vl-explain summary,.sb-reading summary,.sb-evidence summary { cursor:pointer; color:var(--teal); font-weight:700; line-height:1.5; }
.vl-explain[open]>:not(summary) { margin-top:16px; }
.vl-cues { display:grid; gap:12px; list-style:none; padding:0; margin:20px 0; }
.vl-cues>li { display:flex; gap:12px; align-items:baseline; font-size:18px; line-height:1.6; }
.vl-cues>li::before { content:counter(vlc,decimal-leading-zero); counter-increment:vlc; color:var(--teal); font:700 13px monospace; }
.vl-cues { counter-reset:vlc; }
.vl-process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:20px; background:#e9f1ed; border-radius:12px; }
.vl-process>div { border-left:2px solid var(--teal); padding:8px 12px; }
.vl-process b { display:block; color:var(--teal); font-size:22px; margin-bottom:8px; }
.vl-process span { font-size:14px; line-height:1.5; }
.vl-map { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; background:#143c32; padding:24px; border-radius:18px; color:#fffdf8; }
.vl-map>div { border-top:1px solid #75968b; padding-top:12px; }
.vl-map b { display:block; font-size:36px; color:#e8c38a; }
.vl-map span { font-size:16px; }
.sb-reasoning { gap:20px; margin-block:28px; }
.sb-reasoning article { background:transparent; border:0; border-top:2px solid var(--teal); border-radius:0; padding:18px 0; }
.sb-reasoning h3 { font-size:20px; }
.sb-reasoning p { font-size:17px; line-height:1.7; }
.sb-quiz { background:#143c32; color:#fffdf8; padding:22px 26px; border-radius:14px; margin-block:24px; }
.sb-quiz summary { font-size:20px; font-weight:700; cursor:pointer; }
.route-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.route-tab { min-height:94px!important; padding:16px!important; justify-content:flex-start; background:#f4f2eb; }
.route-tab .route-count { position:static!important; background:transparent!important; color:var(--skill-teal,var(--teal)); font-size:14px; padding:0; }
.route-tab strong { font-size:16px!important; margin:0!important; }
.route-tab.active { background:#143c32!important; color:white!important; }
.route-tab.active .route-count { color:#e8c38a; }
.route-detail { gap:32px!important; margin-top:24px; }
.route-media-frame img { max-height:410px; object-fit:contain; }
.route-detail-copy h3 { font-size:30px; line-height:1.25; }
.route-detail-copy .learning-grid { grid-template-columns:1fr 1fr; }
.route-detail-copy .learning-grid article { padding:16px; }
.media-provenance { font-size:13px; padding:12px!important; }
.sb-observe { font-size:16px; line-height:1.65; }
.decision-task { min-height:100px!important; }
@media(max-width:760px) { .sb-reading { grid-template-columns:1fr; padding:18px; }.sb-reading figure img {max-height:350px;} .route-tabs {display:flex; overflow-x:auto;} .route-tabs li {min-width:135px;} .vl-map {grid-template-columns:repeat(2,1fr);} .vl-process {padding:14px;} .sb-reasoning {grid-template-columns:1fr;} }
@media print { .vl-explain>* {display:block!important;} .sb-quiz {background:white;color:black;} }
.vl-context-note {display:block; padding:12px 16px; color:var(--muted); font-size:12px;line-height:1.5;}
.vl-node-cues {grid-template-columns:1fr; background:#143c32;color:#fffdf8;gap:16px;}
.vl-node-cues>div {display:grid;grid-template-columns:36px 1fr;gap:6px 16px;border:0;padding:0;}
.vl-node-cues b {grid-row:1 / 3;color:#e8c38a;font-size:15px;}
.vl-node-cues strong {font-size:17px;}
.vl-node-cues p {grid-column:2;margin:0;font-size:15px;line-height:1.6;}
.vl-has-node-cues>div>dl {display:none;}
/* Small screens keep the course and language controls reachable without obscuring the lesson. */
@media(max-width:600px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 14px}
 .topbar .brand{font-size:14px;min-width:0}.topbar .brand-mark{width:32px;height:32px}
 .topbar .language-toggle{grid-column:2;grid-row:1;padding:3px}.topbar .language-toggle button{padding:6px 10px}
 .topbar .nav{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:16px;padding:5px 0;margin:0}
 .topbar .nav a{white-space:nowrap;font-size:13px;padding:0;flex:0 0 auto}
}