.course-route,.course-steps{border:1px solid var(--border);border-radius:14px;background:var(--surface);margin:14px 0;padding:12px 16px;color:var(--text)}
.course-route summary,.course-steps summary{cursor:pointer;font-size:13px;font-weight:600}
.course-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:12px}
.course-stage-grid h3{font-size:13px;margin:4px 0 10px;color:var(--text)}
.course-stage-grid button,.course-steps button{display:block;border:0;border-radius:7px;background:transparent;color:var(--text-dim);padding:7px 9px;text-align:left;cursor:pointer;font:inherit;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.course-stage-grid button:hover,.course-steps button:hover{background:var(--surface-hover,rgba(100,140,220,.12));color:var(--accent)}
.course-stage-grid button:focus-visible,.course-steps button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.course-scope{color:var(--text-dim);font-size:12px;line-height:1.65;margin:14px 0 0}
.course-steps{margin:0 0 12px;padding:10px 12px;flex:none}
.course-steps p{font-size:12px;margin:12px 0 4px}
.course-steps>div{display:flex;flex-wrap:wrap;gap:3px}
.course-steps button{font-family:Consolas,monospace;font-size:11px;background:var(--bg)}
@media(max-width:650px){.course-stage-grid{grid-template-columns:1fr;gap:10px}}

/* Explicit areas prevent the injected learning route from occupying the sidebar. */
body[data-ui-page=project] .page[data-course-layout=true]{grid-template-areas:"header header" "wiring wiring" "route route" "title title" "modules bom";grid-template-rows:auto;align-items:start;row-gap:18px}
.page[data-course-layout=true]>#pageHeader{grid-area:header}
.page[data-course-layout=true]>#wiringCard{grid-area:wiring}
.page[data-course-layout=true]>#courseLearningRoute{grid-area:route;margin:0}
.page[data-course-layout=true]>.modules-title{grid-area:title;margin:12px 0 0;height:auto}
.page[data-course-layout=true]>#moduleList{grid-area:modules;min-width:0}
.page[data-course-layout=true]>:is(#bomCard,#uiBom){grid-area:bom;align-self:start;margin:0;min-width:0}
.page[data-course-layout=true] #courseLearningRoute>.course-stage-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px 0 4px}
#courseLearningRoute>.course-stage-grid>section{border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg);min-width:0}
#courseLearningRoute h3{font-size:14px;line-height:1.5;margin:0 0 8px}
#courseLearningRoute button{width:100%;line-height:1.6;overflow-wrap:normal;word-break:normal}
#coursePinoutNotice{margin:12px 0 0;border:0;border-top:1px solid var(--border);border-radius:0;padding:12px 0 0;background:none}
#coursePinoutNotice .course-stage-grid{display:flex;gap:12px;flex-wrap:wrap}
#coursePinoutNotice a{font-size:13px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--accent)}
body[data-ui-page=project] .page[data-course-layout=true] #pageHeader{padding:8px 0 10px!important;margin-bottom:0}
body[data-ui-page=project] .page[data-course-layout=true] #pageHeader .ui-page-tools{margin:8px 0}
body[data-ui-page=project] .page[data-course-layout=true] .wiring-card{margin-bottom:0}
body[data-ui-page=project] .page[data-course-layout=true] #wiringCard>:first-child{margin:0!important}
@media(min-width:1000px){.page[data-course-layout=true] #pageHeader .ui-page-tools{position:absolute;right:0;top:8px;max-width:35%;margin:0}.page[data-course-layout=true] #pageHeader h1{max-width:62%;margin-top:0}}
@media(max-width:900px){body[data-ui-page=project] .page[data-course-layout=true]{grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "wiring" "route" "title" "modules" "bom"}.page[data-course-layout=true] #courseLearningRoute>.course-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.page[data-course-layout=true] #courseLearningRoute>.course-stage-grid{grid-template-columns:minmax(0,1fr)}#courseLearningRoute{padding:12px}#courseLearningRoute>summary{line-height:1.6}}

#moduleObservation .obs-outcome{margin:14px 0;padding:14px;border-left:3px solid var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
#moduleObservation .obs-outcome small{display:block;margin-bottom:6px;color:var(--text-dim);font-size:11px}
#moduleObservation .obs-outcome strong{display:block;font-size:15px;line-height:1.65;color:var(--text)}
#moduleObservation .obs-teaching-steps{margin:0}
#moduleObservation .obs-teaching-steps>div{padding:10px 0;border-bottom:1px solid var(--border)}
#moduleObservation .obs-teaching-steps dt{font-size:11px;font-weight:650;color:var(--accent);margin-bottom:5px}
#moduleObservation .obs-teaching-steps dd{margin:0;color:var(--text);font-size:13px;line-height:1.75;overflow-wrap:anywhere}
#moduleObservation .obs-expected{margin:14px 0;padding:12px;background:var(--bg);border-radius:8px}
#moduleObservation .obs-expected b{color:var(--accent);font-size:12px}
#moduleObservation .obs-expected p{margin:5px 0 0;font-size:13px;line-height:1.75}
#moduleObservation .obs-help{margin:8px 0 14px}
#moduleObservation .obs-help p{font-size:13px;line-height:1.75;margin:8px 0}
#moduleObservation .obs-teaching>.obs-profile{font-size:11px}