/* Normal desktop heights show the everyday workflow without page scrolling.
   Short/mobile viewports retain natural scrolling rather than clipping controls. */
.compact-lab .topbar{min-height:52px;padding:8px 24px;max-width:none}
.compact-lab .brand-mark{width:32px;height:32px;font-size:14px}
.compact-lab .brand b{font-size:14px}.compact-lab .brand small{font-size:7px}
.compact-lab nav{gap:18px;font-size:11px}
.compact-lab main{max-width:none;padding:10px 24px 12px}
.compact-lab .intro{margin:0 0 9px;gap:18px;min-height:36px}
.compact-lab .intro .eyebrow,.compact-lab .intro-copy,.compact-lab .mode-note{display:none}
.compact-lab h1{font-size:22px;line-height:1.3;margin:0;letter-spacing:-.5px}
.compact-lab .version{padding:5px 10px;font-size:10px;border-radius:7px}
.compact-lab .version small{display:none}
.compact-lab .workspace{grid-template-columns:140px minmax(350px,1fr) 265px;min-height:0;border-radius:12px}
.compact-lab .lessons{padding:15px 9px}
.compact-lab .lessons>.eyebrow{margin:0 7px 10px}
.compact-lab .experiment-tab{padding:10px 7px;font-size:11px;gap:8px}
.compact-lab #experiment-tabs{gap:4px}
.compact-lab .lesson-tip{margin:17px 7px 0;padding-top:12px;font-size:10px}
.compact-lab .board-pane{padding:10px 12px}
.compact-lab .board-pane>.section-heading{margin-bottom:5px;min-height:22px}
.compact-lab .board-pane>.section-heading .eyebrow{display:none}
.compact-lab .board-pane>.section-heading h2{font-size:15px}
.compact-lab .control-source{padding:4px 8px;margin-bottom:6px;font-size:10px;min-height:28px;gap:8px}
.compact-lab .control-source button{padding:2px 7px}
.compact-lab .firmware-console{padding:7px 9px;margin:0 0 7px;border-radius:9px}
.compact-lab .firmware-console .fw-toolbar{margin:0;gap:5px}
.compact-lab .firmware-console .fw-toolbar button{font-size:11px;padding:5px 8px;border-radius:5px;white-space:nowrap}
.compact-lab .firmware-console #firmware-examples{margin-bottom:6px}
.compact-lab .fw-control-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.compact-lab .fw-upload{background:#f1f3e9;padding:4px 6px;gap:6px;border-radius:5px;flex:1;flex-wrap:nowrap;min-width:210px;font-size:10px}
.compact-lab .fw-upload b{white-space:nowrap;font-size:10px}
.compact-lab .fw-upload input{font-size:10px;width:180px;min-width:0;flex:1}
.compact-lab .fw-upload span{display:none}
.compact-lab .fw-feedback-row{display:flex;align-items:center;gap:10px;min-height:22px;margin-top:3px}
.compact-lab #fw-filename{margin:0;max-width:36%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px;line-height:1.5;color:#7a8978}
.compact-lab #fw-status{padding:0;min-height:0;font-size:10px;line-height:1.5;flex:1;overflow-wrap:anywhere}
.compact-lab .fw-diagnostics-row{display:flex;align-items:center;gap:12px;font-size:10px;min-height:20px}
.compact-lab .fw-diagnostics-row>.fw-led{margin:0;padding:2px 7px;border-radius:5px;font-size:10px;box-shadow:none;align-self:center}
.compact-lab .fw-diagnostics-row>.text-button{font-size:10px;margin-left:auto}
.compact-lab .fw-runtime-details{position:relative}
.compact-lab .fw-runtime-details summary{cursor:pointer;color:#62765d;font-size:10px}
.compact-lab .fw-runtime-details[open]{z-index:3}
.compact-lab .fw-runtime-details .fw-metrics{position:absolute;top:25px;left:0;width:min(480px,66vw);background:#fffef8;border:1px solid #d9dfcd;padding:14px;border-radius:8px;box-shadow:0 8px 30px #263d2920;gap:16px}
.compact-lab .fw-runtime-details .fw-metrics span{font-size:10px}
.compact-lab .fw-runtime-details .fw-metrics strong{font-size:12px}
.compact-lab .fw-runtime-details .fw-gates{position:absolute;top:155px;left:0;width:min(480px,66vw);padding:8px 12px;background:#fffef8;border:1px solid #d9dfcd;border-radius:7px;font-size:10px}
.compact-lab .model-header{padding:5px 10px;font-size:9px;min-height:24px}
.compact-lab .physical-viewer{height:clamp(170px,calc(100dvh - 455px),470px);max-height:none;aspect-ratio:auto}
.compact-lab .physical-viewer .model-preview{padding:6px}
.compact-lab .board-feedback-layer{left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.compact-lab .model-controls-note{font-size:8px;padding:0 10px 3px;line-height:1.5}
.compact-lab .board-notes{margin-top:4px;font-size:9px;color:#7f8a7d}
.compact-lab .board-notes summary{cursor:pointer;line-height:1.5}
.compact-lab .physical-note{margin:4px 0;font-size:9px}
.compact-lab .readouts{padding:7px 0;gap:8px}
.compact-lab .readouts strong{font-size:18px;margin-top:0;line-height:1.4}
.compact-lab .readouts .engine-name{font-size:12px;line-height:2}
.compact-lab .readouts span{font-size:9px}
.compact-lab .board-footer{margin-top:5px;gap:12px;min-height:20px;font-size:9px}
.compact-lab .board-footer .text-button{font-size:9px}
.compact-lab .experiment-panel{padding:17px 16px}
.compact-lab .panel-number{font-size:8px;margin-bottom:6px}
.compact-lab .experiment-panel h2{font-size:19px}
.compact-lab .experiment-panel>p{font-size:11px;line-height:1.7;margin:8px 0 13px}
.compact-lab #controls{gap:10px}
.compact-lab .action{padding:8px 9px;font-size:11px}
.compact-lab .insight{margin-top:15px}
.compact-lab .insight p{font-size:10px;line-height:1.7}
.compact-lab .code-details{margin-top:14px;padding-top:10px}
.compact-lab .fw-tools-dialog{width:min(850px,calc(100% - 30px));max-width:850px}
.compact-lab .fw-tools-dialog .fw-peripherals{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-lab .fw-tools-dialog .fw-serial-card{grid-column:1/-1}
.compact-lab .lab-more-dialog{width:min(1050px,calc(100% - 30px));max-width:1050px}
.compact-lab .lab-more-dialog .next-stage{padding:15px 0}
.compact-lab .lab-more-dialog footer{padding-bottom:0}
@media(min-width:1500px){.compact-lab .workspace{grid-template-columns:155px minmax(400px,1fr) 290px}}
@media(max-width:1100px){.compact-lab .workspace{grid-template-columns:115px minmax(340px,1fr) 230px}.compact-lab .experiment-panel{grid-column:auto;border-left:1px solid var(--line);border-top:0;display:block;padding:14px 12px}.compact-lab .lessons{padding:12px 6px}.compact-lab .experiment-tab{font-size:10px;padding:9px 5px;gap:5px}.compact-lab .board-pane{padding:9px}.compact-lab .fw-control-row{gap:5px}.compact-lab .fw-control-row .fw-toolbar{flex:1}.compact-lab .physical-viewer{height:clamp(170px,calc(100dvh - 485px),420px)}}
@media(max-width:850px){.compact-lab .workspace{grid-template-columns:minmax(0,1fr) 220px}.compact-lab .lessons{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);padding:6px 9px}.compact-lab .lessons>.eyebrow,.compact-lab .lesson-tip{display:none}.compact-lab #experiment-tabs{display:flex;gap:3px;overflow-x:auto}.compact-lab .experiment-tab{width:auto;white-space:nowrap;padding:5px 7px}.compact-lab .board-pane{grid-column:1}.compact-lab .experiment-panel{grid-column:2}.compact-lab .physical-viewer{height:clamp(180px,calc(100dvh - 505px),400px)}.compact-lab .intro{gap:10px}.compact-lab .version b{margin-left:5px}.compact-lab .fw-toolbar button{font-size:10px!important;padding:5px 6px!important}}
@media(max-width:620px){.compact-lab .topbar{padding:8px 12px}.compact-lab .brand small,.compact-lab nav a{display:none}.compact-lab nav{gap:10px}.compact-lab nav .text-button{font-size:10px}.compact-lab main{padding:8px}.compact-lab .intro{display:flex;margin-bottom:8px}.compact-lab h1{font-size:18px}.compact-lab .version{font-size:9px;padding:4px 6px}.compact-lab .workspace{display:block}.compact-lab .experiment-panel{border-left:0;border-top:1px solid var(--line)}.compact-lab .board-pane{padding:9px}.compact-lab .control-source{gap:6px}.compact-lab .control-source a{margin-left:auto}.compact-lab .firmware-console .fw-toolbar{flex-wrap:wrap}.compact-lab .fw-control-row .fw-toolbar{flex-basis:100%}.compact-lab .fw-upload{min-width:0;width:100%}.compact-lab .physical-viewer{height:clamp(190px,32dvh,330px)}.compact-lab .board-footer>span{flex-basis:auto}.compact-lab .board-footer{flex-wrap:wrap}.compact-lab .fw-tools-dialog .fw-peripherals{grid-template-columns:1fr}.compact-lab .fw-diagnostics-row{gap:8px}.compact-lab .fw-diagnostics-row>.text-button{font-size:9px}.compact-lab .fw-runtime-details .fw-metrics{left:-65px;width:75vw}.compact-lab .fw-runtime-details .fw-gates{left:-65px;width:75vw}}

.compact-lab .board-heading-row{display:flex;gap:12px;align-items:center;margin-bottom:6px}.compact-lab .board-heading-row>.section-heading{margin:0;flex-shrink:0}.compact-lab .board-heading-row .eyebrow{display:none}.compact-lab .board-heading-row h2{font-size:15px}.compact-lab .board-heading-row .control-source{flex:1;margin:0}.compact-lab .board-heading-row .power-switch{margin-left:10px}.compact-lab .board-footer{flex-wrap:wrap}.compact-lab .board-footer .fw-diagnostics-row{order:1;margin-left:auto}.compact-lab .board-footer>span{order:0}.compact-lab .board-footer>#reset,.compact-lab .board-footer>#export{order:2}.compact-lab .board-footer .fw-runtime-details .fw-metrics{top:auto;bottom:25px;left:auto;right:0}.compact-lab .board-footer .fw-runtime-details .fw-gates{top:auto;bottom:155px;left:auto;right:0}
@media(max-width:850px){.compact-lab .board-heading-row{flex-wrap:wrap;gap:5px}.compact-lab .board-heading-row .control-source{min-width:220px}.compact-lab .board-footer .fw-diagnostics-row{margin-left:0}}

.compact-lab main{padding-bottom:5px}.compact-lab .experiment-group-label{font-size:9px;color:#8b9b8d;padding:5px 7px 2px;letter-spacing:1px}.compact-lab .source-download{white-space:nowrap;font-size:10px!important;padding:5px 8px!important;background:#fff4df!important;border-color:#d9b87b!important;color:#71512b!important}.compact-lab .course-link{display:inline-block;font-size:10px;color:#467555;margin:5px 0}.compact-lab .course-link[hidden]{display:none}@media(max-width:850px){.compact-lab .experiment-group-label{display:flex;align-items:center;padding:2px 5px;white-space:nowrap;font-size:8px}.compact-lab .physical-viewer{height:clamp(170px,calc(100dvh - 530px),400px)}}

.compact-lab .workspace { grid-template-columns: minmax(0, 1fr) 265px; }
#fw-case-dialog #experiment-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
#fw-case-dialog .experiment-group-label { grid-column: 1 / -1; }
#fw-case-dialog .experiment-tab { white-space: normal; }
@media (min-width: 1500px) {
 .compact-lab .workspace { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 1100px) {
 .compact-lab .workspace { grid-template-columns: minmax(0, 1fr) 230px; }
}

/* The drawing and its SVG feedback share a 4:3 viewport at every width. */
.compact-lab .workspace {
 grid-template-columns: minmax(0, 1fr) clamp(300px, 29%, 440px);
}
.compact-lab .physical-viewer {
 width: min(100%, clamp(640px, 115dvh, 1280px));
 height: auto;
 aspect-ratio: 4 / 3;
 margin-inline: auto;
}
.compact-lab .experiment-panel .control-source {
 margin-bottom: 7px;
}
.compact-lab .experiment-panel .fw-feedback-row {
 flex-wrap: wrap;
}
@media (max-width: 850px) {
 .compact-lab .workspace { grid-template-columns: minmax(0, 1fr) 260px; }
}