/* Course selection and control experiments, using the existing Learning Lab palette. */
.sidebar{overflow-y:auto}
.course-label{display:block;padding:13px 10px;margin:28px 0 25px}
.course-label>label{display:block;font:500 9px 'IBM Plex Mono',monospace;letter-spacing:1.1px;color:var(--muted);margin-bottom:9px}
.course-label select{display:block;width:100%;border:0;background:transparent;color:var(--ink);font-size:13px;font-weight:650;padding:4px 0;cursor:pointer}
.course-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:30px}
.course-choice{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted)}
.course-choice.selected{border-color:#9cb58b;background:#f1f6ed;color:var(--ink)}
.course-choice:hover{border-color:#6c936d;background:#edf4e8}
.course-choice .course-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:7px;background:#e5edde;font:600 14px 'IBM Plex Mono',monospace;color:#4e6f45}
.course-choice small{display:block;font:500 9px 'IBM Plex Mono',monospace;letter-spacing:1px;margin-bottom:5px}
.course-choice strong{font:650 15px 'Manrope',sans-serif}
.course-choice>svg{margin-left:auto;flex:0 0 18px}
.control-preview{align-self:center;border:1px solid #53745e;border-radius:9px;padding:16px 16px 12px;background:#0e322b;min-width:0;transform:rotate(-2deg)}
.control-preview-title{font:500 9px 'IBM Plex Mono',monospace;letter-spacing:1px;display:flex;justify-content:space-between;gap:8px;color:#badba3;margin-bottom:18px}
.control-preview-title span{color:#91b99c}
.loop-blocks{display:flex;justify-content:center;align-items:center;gap:6px;font-size:10px}
.loop-blocks>span:not(.loop-arrow){border:1px solid #718a69;padding:8px 7px;border-radius:4px;color:#d7ebbd}
.loop-blocks .loop-sum{border-radius:50%!important;width:28px;height:28px;display:grid;place-items:center;padding:0!important;position:relative}
.loop-sum small{position:absolute;bottom:-12px;font-size:12px}
.loop-arrow{color:#a2c680}
.feedback-return{height:22px;margin:4px 25px 5px 15px;border-left:1px solid #6c8f6c;border-bottom:1px solid #6c8f6c;border-right:1px solid #6c8f6c;text-align:center;border-radius:0 0 6px 6px}
.feedback-return span{font:9px 'IBM Plex Mono',monospace;background:#0e322b;padding:0 7px;position:relative;top:12px;color:#a2be9d}
.response-preview{width:100%;height:auto;max-height:115px;margin-top:8px;stroke-width:1;stroke-linecap:round}
.plot-grid{stroke:#345344;stroke-width:.6}.plot-target{stroke:#849f73;stroke-dasharray:4 4}.plot-response{stroke:#c9ef8b;stroke-width:2.6}.response-preview text{stroke:none;fill:#8eae91;font:8px 'IBM Plex Mono',monospace}
.control-preview-foot{color:#a9c89f;font:9px 'IBM Plex Mono',monospace;padding-top:7px;border-top:1px solid #345344;text-align:center}
.course-overview{margin:-10px 0 32px;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}
.course-facts{display:flex;flex-wrap:wrap;gap:18px 28px;padding:21px 24px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.course-facts strong{font:700 22px 'Manrope',sans-serif;color:var(--ink);margin-right:4px}
.course-readiness{padding:17px 24px;font-size:13px}.course-readiness summary{cursor:pointer;font-weight:600;line-height:1.7}.course-readiness summary svg{width:14px;margin-left:6px}.course-readiness>div{margin-top:16px;max-width:850px;color:var(--muted)}
.practical-brief{border:1px solid #cbdac2;border-left:4px solid #789c5f;border-radius:7px;padding:23px;margin:25px 0;background:#f4f8ef}
.practical-brief p,.practical-brief li{font-size:14px;line-height:1.8;color:#4f6255}
.practical-brief ol,.practical-brief ul{padding-left:22px}.practical-brief li{padding-left:5px;margin-bottom:10px}.practical-brief h3{margin-top:17px;margin-bottom:10px}.practical-brief details{border-top:1px solid #d4e0cc;padding-top:15px}.practical-brief summary{font-size:13px;font-weight:600;cursor:pointer}.practical-brief details p{margin:12px 0 0}
.practical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.practical-card{display:flex;gap:18px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:22px;transition:border-color .2s,transform .2s}
.practical-card:hover{border-color:#99b97e;transform:translateY(-2px)}
.practical-number{font:500 18px 'IBM Plex Mono',monospace;color:#8b9c7d;padding-top:3px}
.practical-card h2{font-size:18px;margin:9px 0}.practical-card p{font-size:13px;color:var(--muted);margin-bottom:14px}.practical-card .small-label{font-size:9px}.practical-card .text-link{font-size:12px}
[data-course="control-engineering"] .module-card-foot{flex-wrap:wrap}
@media(max-width:1100px){.control-preview{padding:12px 10px}.loop-blocks{gap:4px;font-size:9px}.loop-blocks>span:not(.loop-arrow){padding:8px 5px}}
@media(max-width:780px){.course-choices{margin-bottom:25px}.practical-grid{grid-template-columns:1fr}.course-choice{padding:13px}.course-choice strong{font-size:13px}.course-choice small{font-size:8px}.course-facts{gap:15px 20px}.control-preview{max-width:320px;width:100%;justify-self:center}.sidebar-bottom{padding-top:25px}}
@media(max-width:530px){.course-choices{grid-template-columns:1fr;gap:8px}.course-choice{padding:10px 13px}.course-choice .course-mark{width:32px;height:32px;flex-basis:32px}.course-choice small{margin-bottom:2px}.course-facts{padding:18px;gap:13px 19px}.course-facts strong{font-size:20px}.course-readiness{padding:16px 18px}.practical-brief{padding:17px 15px}.practical-card{padding:19px 16px;gap:14px}.control-preview{margin:8px 0}.course-overview{margin-top:0}}
@media(prefers-reduced-motion:reduce){.practical-card,.course-choice{transition:none}.practical-card:hover{transform:none}}

/* Content work uses the same calm green palette and typography as the code labs. */
.content-preview{align-self:center;background:#123a32;border:1px solid #52765c;border-radius:9px;padding:22px;transform:rotate(-2deg);min-width:0}
.content-preview>.small-label{color:#c7ef94;font-size:9px;letter-spacing:1.4px}
.content-preview>div{position:relative;margin-top:17px;padding:0 0 15px 35px;border-bottom:1px solid #3a5e4a}
.content-preview>div:last-child{border-bottom:0;padding-bottom:0}
.content-preview>div>span{position:absolute;left:0;top:1px;color:#a5c28e;font:11px 'IBM Plex Mono',monospace}
.content-preview strong{display:block;color:#f2f8e8;font:600 16px 'Manrope',sans-serif}
.content-preview small{display:block;color:#b4ccb1;font-size:11px;line-height:1.5;margin-top:5px}
.content-example{background:#f2f6eb;border:1px solid #d3dfc6;border-radius:8px;padding:24px;margin:18px 0 24px;overflow-wrap:anywhere}
.content-example h3{font-size:18px;line-height:1.5;margin:12px 0 20px}
.content-example h4{font-size:13px;margin:18px 0 6px;color:#355942}
.content-example p{font-size:14px;line-height:1.85;margin:0;white-space:pre-wrap}
.content-form{min-width:0}
.content-form>.aside-note{margin:0 0 24px;padding:16px;border-left:3px solid #89a76b;background:#f8faf4;line-height:1.8}
.content-field{display:block;margin:0 0 24px}
.content-field strong{display:block;font-size:15px;margin-bottom:6px}
.content-field>span{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.content-field textarea{display:block;box-sizing:border-box;width:100%;min-height:155px;border:1px solid #b8c7b0;border-radius:7px;background:#fff;color:var(--ink);padding:15px;font:14px/1.8 'DM Sans',sans-serif;resize:vertical}
.content-field textarea:focus{outline:3px solid #c7ef94;outline-offset:2px;border-color:#365d3c}
.content-field textarea::placeholder{color:#75816f}
.content-review{border:1px solid var(--line);border-radius:7px;padding:20px;margin:28px 0}
.content-review legend{padding:0 8px;font-weight:650}
.content-review label{display:flex;align-items:flex-start;gap:12px;line-height:1.7;font-size:14px;padding:9px 0;cursor:pointer}
.content-review input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:#315d3e}
.content-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
[data-course="ai-content-creation"] .project-art>svg{width:62px;height:62px;stroke-width:1.2}
[data-course="ai-content-creation"] .module-card-foot{flex-wrap:wrap}
.content-form .feedback ul{padding-left:20px}
@media(max-width:1100px){.course-choice{padding:12px;gap:9px}.course-choice strong{font-size:13px}.course-choice small{font-size:8px}.course-choice>svg{display:none}}
@media(max-width:780px){.content-preview{max-width:320px;width:100%;justify-self:center;box-sizing:border-box}.course-choices{grid-template-columns:1fr}.course-choice>svg{display:block}.content-example{padding:18px}.content-review{padding:14px}.content-actions .button{width:100%;justify-content:center}}

.content-source{margin:18px 0 24px;padding:16px 20px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px;line-height:1.8}.content-source summary{font-weight:600;cursor:pointer}.content-source p{margin:12px 0}.content-source a{text-decoration:underline}
