/* Camera preview and compact manual workspace. */
.camera-panel{min-width:0}.camera-panel .panel-head h2{margin:0}.camera-panel .panel-head button{font-size:11px;padding:6px 9px}
.camera-body{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:14px;align-items:start}
.camera-preview{position:relative;aspect-ratio:1/1;width:100%;display:grid;place-items:center;background:#07131b;border:1px solid #345367;color:#94adbd;overflow:hidden}
.camera-preview>span{text-align:center;padding:20px}.camera-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.camera-preview [hidden]{display:none}
.camera-sidebar{min-width:0}.camera-sidebar p{margin:0 0 8px;font-size:11px;overflow-wrap:anywhere}
.camera-sliders{display:grid;gap:14px;margin:12px 0}.camera-slider{display:grid;gap:4px;font-size:12px}.camera-slider-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.camera-slider output{color:#8ee8f5;font-variant-numeric:tabular-nums}.camera-slider input[type=range]{width:100%;padding:0;height:24px;accent-color:#54cfe0;cursor:pointer}.camera-slider small{color:#98b5c7;font-size:10px}
.camera-panel [role=alert]:empty{display:none}.camera-panel [role=alert]{color:#ffd18d}.camera-panel select{min-width:0;width:100%;padding:6px;font-size:11px}.camera-panel details{margin-top:8px;font-size:11px}
.camera-panel .compact-buttons{flex-wrap:wrap;gap:6px}.camera-panel .compact-buttons button{padding:7px 9px;font-size:11px}
.camera-settings-fields .setting-card{display:grid;gap:8px;align-content:start}.camera-settings-fields input[type=checkbox]{justify-self:start}
.camera-workspace{grid-template-columns:minmax(280px,.75fr) minmax(0,1.65fr);gap:12px;align-items:stretch}
.camera-workspace>.manual-controls-panel,.camera-workspace>.board-panel{grid-column:1/-1}
.camera-workspace>.panel>.panel-head{min-height:46px;padding:8px 12px}.camera-workspace>.panel>.panel-body{padding:12px}
.camera-workspace .instrument-view svg{width:100%;height:330px;max-height:none}
.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 225px}
.camera-workspace .camera-preview{max-height:390px;aspect-ratio:1/1}
.camera-workspace .dual-controls{margin-bottom:8px;gap:12px}
.camera-workspace .head-card{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px;align-content:start}
.camera-workspace .head-card-title{grid-column:1/-1}.camera-workspace .head-card-title h3{margin:0}
.camera-workspace .head-card .stat-row{grid-column:1;grid-row:2/4;margin:0;align-self:start}
.camera-workspace .head-card>label,.camera-workspace .head-card .form-grid{grid-column:2}.camera-workspace .head-card .form-grid{margin:0}
.camera-workspace .head-card>.muted,.camera-workspace .head-card>.board-setup{grid-column:1/-1;margin:0}
.camera-workspace .head-card input,.camera-workspace .head-card select{padding:6px 8px}
.head-motion{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px;margin:8px 0}
.movement-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px;border:1px solid #467186;border-radius:16px;background:#071721;box-shadow:inset 0 2px 8px #0006}
.movement-pad button{min-height:46px;font-size:13px;font-weight:700;padding:8px;border-radius:9px;border:1px solid #68d3e8;background:#19495c;color:#c1f5ff;box-shadow:0 3px 0 #08222f}
.movement-pad button.pad-rotate{background:#343452;border-color:#a795dd;color:#e1d7ff}
.movement-pad button.pad-grip{background:#20483f;border-color:#6bbca6;color:#cbf4e7}
.movement-pad button:hover:not(:disabled){filter:brightness(1.3);transform:translateY(-1px)}.movement-pad button:active:not(:disabled){transform:translateY(2px);box-shadow:none}.movement-pad button:focus-visible{outline:3px solid #fff;outline-offset:2px}.movement-pad button:disabled{opacity:.45}
.home-controls{display:flex;flex-direction:column;justify-content:center;gap:7px}.home-controls>span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#9cb0c0}.home-controls button{padding:8px 5px;font-size:11px}
.camera-workspace .manual-controls-panel>.panel-body>p{margin:4px 0;font-size:10px}.camera-workspace .manual-controls-panel details{font-size:11px}
.main:has(.camera-workspace){padding-top:14px}.main:has(.camera-workspace)>.heading{margin-bottom:10px}.main:has(.camera-workspace)>.heading .eyebrow{display:none}
@media(min-width:1000px){.console-header{flex-wrap:nowrap;gap:16px}.console-header>.row{flex:0 1 auto}.console-header .nav button{padding:10px 13px}}
@media(max-width:1100px){.camera-workspace{grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr)}.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 180px}.camera-workspace .head-card{display:block}.camera-workspace .head-card>*{margin-bottom:8px}.head-motion{grid-template-columns:minmax(0,1fr) 85px}.movement-pad button{font-size:11px}}
@media(max-width:800px){.camera-workspace{grid-template-columns:1fr}.camera-workspace .dual-controls{grid-template-columns:1fr}.camera-workspace .instrument-view svg{height:240px}.camera-body,.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 190px}}
@media(max-width:480px){.camera-body,.camera-workspace .camera-body{grid-template-columns:1fr}.camera-preview{max-height:320px}.movement-pad{padding:6px;gap:5px}.head-motion{gap:6px;grid-template-columns:minmax(0,1fr) 80px}}
.camera-workspace .camera-preview{aspect-ratio:6/5;max-height:none;max-width:480px;justify-self:center}
.camera-workspace .instrument-view svg{height:270px}
.camera-workspace .camera-sliders{gap:8px;margin:8px 0}
.camera-workspace .camera-panel .compact-buttons button{padding:6px 8px}
.camera-workspace .camera-body{align-items:center}
.camera-workspace .head-card .stat{padding:6px}.camera-workspace .head-card .stat .value{font-size:18px}
.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 260px;align-items:start}
.camera-workspace .camera-preview{justify-self:start}
.camera-workspace .camera-sliders{gap:5px;margin:6px 0}
.camera-workspace .head-card .form-grid label,.camera-workspace .head-card>label{font-size:10px}
.camera-workspace .head-card .form-grid input{padding:4px 6px}
@media(max-width:1100px){.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 180px}}
@media(max-width:480px){.camera-workspace .camera-body{grid-template-columns:1fr}}
.camera-workspace .camera-body{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
.camera-workspace .head-card-title button{padding:5px 8px;font-size:10px}
.camera-workspace .head-card{gap:4px 12px}.camera-workspace .head-motion{margin:4px 0}
.camera-workspace .instrument-view svg{height:245px}
@media(max-width:1100px){.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 180px}}
@media(max-width:480px){.camera-workspace .camera-body{grid-template-columns:1fr}}

/* Keep the large motion targets; recover space from telemetry and setup fields. */
@media(min-width:1101px){
.camera-workspace .head-card{padding:8px;gap:5px 10px}
.camera-workspace .head-card-title{grid-column:1;grid-row:1}
.camera-workspace .head-card .stat-row{grid-column:2;grid-row:1;align-self:stretch}
.camera-workspace .head-card .stat{padding:4px 6px}
.camera-workspace .head-card .stat>span{font-size:7px;letter-spacing:0}
.camera-workspace .head-card .stat .value{font-size:16px}
.camera-workspace .head-card>label{grid-column:1;grid-row:2;margin:0}
.camera-workspace .head-card .form-grid{grid-column:2;grid-row:2}
.camera-workspace .head-card select{padding:4px 6px}
.camera-workspace .head-motion{margin:2px 0}
.camera-workspace .movement-pad{padding:7px;gap:6px}
.camera-workspace .manual-controls-panel>.panel-head{min-height:36px;padding:5px 12px}
.camera-workspace .manual-controls-panel>.panel-body{padding:8px 12px}
}

/* Follow the camera's actual frame/ROI dimensions, including changes during streaming. */
.camera-preview,.camera-workspace .camera-preview{aspect-ratio:var(--camera-ratio,2448 / 2048);max-width:var(--camera-width,478.125px);max-height:none}
@media(min-width:1101px){.camera-workspace .camera-body{grid-template-columns:minmax(0,var(--camera-width,478.125px)) minmax(190px,1fr)}}
.camera-sidebar .camera-sliders{gap:5px}.camera-sidebar .camera-slider{gap:2px}

/* Live actuator readouts replace the duplicate statistics in the motion pads. */
.camera-workspace{grid-template-columns:minmax(300px,.85fr) minmax(0,1.65fr)}
.camera-workspace .instrument-view svg{height:390px;max-height:none}
.camera-workspace .camera-preview{max-width:none}
.camera-view{min-width:0;width:100%}
.camera-preview img{transform-origin:0 0;pointer-events:none;user-select:none}
.camera-preview.zoomed{cursor:grab;touch-action:none}.camera-preview.zoomed:active{cursor:grabbing}
.camera-preview.selecting{cursor:crosshair;touch-action:none}
.camera-preview:focus-visible{outline:2px solid #68d5e6;outline-offset:2px}
.camera-selection{position:absolute;border:2px solid #72e5ef;background:#72e5ef26;pointer-events:none;z-index:2}
.camera-zoom-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.camera-zoom-controls button{padding:5px 9px;font-size:11px}.camera-zoom-controls output{font:12px Consolas,monospace;color:#8ee8f5;min-width:38px;text-align:center}
.camera-zoom-controls [aria-pressed=true]{background:#54cfe0;color:#07131b}
.camera-zoom-hint{font-size:10px;color:#96afc0;margin:4px 0 0}
.actuator-readouts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 8px 10px}
.actuator-readout{padding:8px;border:1px solid #386171;border-radius:5px;background:#091923;font:11px Consolas,monospace;color:#8ee4ec}
.actuator-readout.right{border-color:#655982;color:#c7b4f0}.actuator-readout>strong{text-transform:uppercase;font-size:10px;letter-spacing:1px}
.actuator-readout>div{display:flex;justify-content:space-between;gap:6px;margin:6px 0;color:#dceaf3}.actuator-readout b{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.actuator-readout small{font-size:9px;color:#a9bfca}
.camera-workspace .head-card{grid-template-columns:1fr 1fr;padding:7px;gap:4px 10px}
.camera-workspace .head-card-title{grid-column:1;grid-row:1}
.camera-workspace .head-card>label{grid-column:2;grid-row:1;margin:0}
.camera-workspace .head-card .form-grid{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr}
.camera-workspace .head-card>.muted{font-size:9px;line-height:1.35}
.camera-workspace .head-motion{margin:0;gap:8px;grid-template-columns:minmax(0,1fr) 90px}
.camera-workspace .movement-pad{padding:5px;gap:5px;border-radius:12px}
.camera-workspace .movement-pad button{min-height:36px;padding:5px;font-size:12px}
.camera-workspace .dual-controls{gap:8px;margin-bottom:5px}
@media(min-width:1101px){.camera-workspace .camera-body{grid-template-columns:minmax(0,var(--camera-width,526px)) minmax(165px,1fr)}}
@media(max-width:800px){.camera-workspace{grid-template-columns:1fr}.camera-workspace .instrument-view svg{height:350px}.camera-workspace .head-card{display:grid}}
@media(max-width:480px){.camera-workspace .camera-body{grid-template-columns:1fr}.camera-workspace .movement-pad button{font-size:10px}.camera-workspace .head-card-title{grid-column:1/-1}.camera-workspace .head-card>label{grid-column:1/-1;grid-row:2}.camera-workspace .head-card .form-grid{grid-row:3}}
@media(min-width:801px){
 .camera-workspace .instrument-view svg{height:clamp(200px,calc(100dvh - 600px),285px)}
 .camera-workspace .camera-body{grid-template-columns:minmax(0,calc(clamp(260px,100dvh - 540px,400px) * var(--camera-aspect,1.1953125))) minmax(160px,1fr)}
}
.camera-workspace .instrument-view .view-label{padding:5px 8px;font-size:8px}
.camera-workspace .actuator-readout{padding:6px;line-height:1.25}
.camera-workspace .actuator-readout>div{margin:4px 0}
.camera-workspace>.panel>.panel-head{min-height:36px;padding:5px 12px}

/* One actuator panel: physical head columns, readouts, pads, and shared increments. */
.camera-workspace{grid-template-columns:minmax(440px,.95fr) minmax(0,1.55fr);align-items:start}
.camera-workspace .actuator-controls-panel .instrument-view{border:0;background:transparent}
.camera-workspace .actuator-controls-panel .instrument-view svg{display:block;width:92%;height:auto;max-height:none;aspect-ratio:350 / 380;margin:0 auto}
.camera-workspace .actuator-controls-panel .view-label.bottom{display:none}
.camera-workspace .actuator-readouts{gap:8px;padding:4px 0 8px}
.combined-manual-controls .dual-controls{gap:8px}
.camera-workspace .combined-manual-controls .head-card{display:flex;flex-direction:column;padding:5px;border-radius:5px}
.camera-workspace .combined-manual-controls .head-card-title{justify-content:flex-end}
.camera-workspace .combined-manual-controls .head-card-title h3{display:none}
.camera-workspace .combined-manual-controls .head-card-title button{padding:3px 6px;font-size:9px}
.camera-workspace .combined-manual-controls .head-motion{display:flex;flex-direction:column;gap:4px;margin:0}
.camera-workspace .combined-manual-controls .movement-pad{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;gap:4px;border-radius:8px}
.camera-workspace .combined-manual-controls .movement-pad button{font-size:10px;min-height:30px;padding:4px}
.camera-workspace .combined-manual-controls .movement-pad button:nth-child(1){grid-column:1;grid-row:1}
.camera-workspace .combined-manual-controls .movement-pad button:nth-child(4){grid-column:1;grid-row:2}
.camera-workspace .combined-manual-controls .movement-pad button:nth-child(2){grid-column:2;grid-row:1}
.camera-workspace .combined-manual-controls .movement-pad button:nth-child(5){grid-column:2;grid-row:2}
.camera-workspace .combined-manual-controls .movement-pad button:nth-child(3){grid-column:1;grid-row:3}
.camera-workspace .combined-manual-controls .movement-pad button:nth-child(6){grid-column:2;grid-row:3}
.camera-workspace .combined-manual-controls .home-controls{flex-direction:row;gap:4px}
.camera-workspace .combined-manual-controls .home-controls>span{display:none}
.camera-workspace .combined-manual-controls .home-controls button{flex:1;padding:5px 2px;font-size:9px}
.camera-workspace .combined-manual-controls .head-card>.muted{font-size:8px;line-height:1.3}
.shared-manual-settings{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;padding:9px 0;border-top:1px solid #345363;margin-top:6px}
.shared-manual-settings label{font-size:10px}.shared-manual-settings input,.shared-manual-settings select{width:100%;padding:5px;font-size:11px;min-width:0}
.combined-manual-controls>.check{font-size:11px}.combined-manual-controls>.keyboard-help{margin:3px 0;font-size:9px}
.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 175px}
.camera-workspace .camera-preview{max-width:none}
.camera-workspace .camera-sliders{gap:10px}
@media(min-width:1400px){.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 165px}}
@media(max-width:1100px){.camera-workspace{grid-template-columns:minmax(420px,1fr) minmax(0,1fr)}.camera-workspace .camera-body{grid-template-columns:1fr}.camera-workspace .camera-sliders{grid-template-columns:repeat(3,1fr)}.camera-workspace .camera-preview{max-height:480px;max-width:100%}}
@media(max-width:850px){.camera-workspace{grid-template-columns:1fr}.camera-workspace .combined-manual-controls .dual-controls{grid-template-columns:1fr 1fr}.camera-workspace .camera-body{grid-template-columns:minmax(0,1fr) 170px}.camera-workspace .camera-sliders{grid-template-columns:1fr}}
@media(max-width:500px){.camera-workspace .camera-body{grid-template-columns:1fr}.shared-manual-settings{gap:5px}.camera-workspace .combined-manual-controls .movement-pad button{font-size:9px}}
/* Let the camera set the row height; the twin uses the space above its controls. */
@media(min-width:851px){
 .camera-workspace>.actuator-controls-panel{contain:size;align-self:stretch;display:flex;flex-direction:column;min-height:0}
 .camera-workspace>.actuator-controls-panel>.panel-head{flex-shrink:0}
 .camera-workspace>.actuator-controls-panel>.panel-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}
 .camera-workspace .actuator-controls-panel .instrument-view{display:flex;flex-direction:column;flex:1;min-height:150px}
 .camera-workspace .actuator-controls-panel .instrument-view svg{flex:1;min-height:0;height:0;width:100%;aspect-ratio:auto}
 .camera-workspace .actuator-controls-panel .view-label,.camera-workspace .actuator-readouts,.combined-manual-controls{flex-shrink:0}
 .camera-workspace .combined-manual-controls .movement-pad button{min-height:27px;padding:3px}
 .camera-workspace .shared-manual-settings{padding:6px 0;margin-top:4px}
}
@media(min-width:851px){
 .camera-workspace .actuator-controls-panel .instrument-view{min-height:230px}
 .camera-workspace .combined-manual-controls .board-setup{font-size:9px;line-height:1.2;padding:5px;margin:3px 0 0}
 .camera-workspace .combined-manual-controls .board-setup ul{padding-left:12px;margin:3px 0 0}
 .camera-workspace .combined-manual-controls .head-card>.muted{margin:3px 0;line-height:1.15}
}

/* Review layout: callouts share the drawing, controls stay below. */
.instrument-view{position:relative}
.camera-workspace .actuator-readouts{position:absolute;left:2%;right:2%;top:12%;padding:0;pointer-events:none;gap:20%}
.camera-workspace .actuator-readout{background:#0b2029e8;border:1px solid #52788d;box-shadow:0 3px 10px #0005;padding:6px;font-size:11px}
.head-card-title{justify-content:flex-start;gap:8px;flex-wrap:wrap}
.head-keyboard-guide{font-size:10px;color:#9cb9c9}
.operate-visuals{grid-template-columns:1fr 1fr;align-items:stretch;margin:14px 0}
#operate-camera>.panel{height:100%;box-sizing:border-box}
.operate-details{grid-template-columns:1fr 1fr;margin:14px 0}
@media(max-width:900px){.operate-visuals,.operate-details{grid-template-columns:1fr}.camera-workspace .actuator-readouts{top:8%;gap:14%}}

.camera-workspace .combined-manual-controls .head-card-title{justify-content:flex-start}
.protocol-group{border:1px solid #4b7689;border-radius:6px;padding:10px;margin:12px 0;background:#132b38}
.protocol-group>summary{padding:8px;cursor:pointer;color:#92e6eb}.protocol-group>div{padding-left:12px}
.preparation-step{margin-left:16px;padding:6px 10px;color:#9edaca;border-left:2px solid #508782}

.operate-visuals .plate3d-viewport{min-height:330px}
.operate-visuals .panel-body{padding:12px}
#operate-camera .camera-body{grid-template-columns:minmax(0,1fr) 165px;gap:10px}
#operate-camera .camera-preview{aspect-ratio:var(--camera-aspect,1.1953125)}
#runtime-live.compact-run{padding:10px 12px;min-height:0}
#runtime-live .run-title{display:flex;align-items:center;gap:12px}#runtime-live .run-title h2{margin:0;font-size:16px}
#runtime-live>p:empty{display:none}.run-toolbar{margin-top:8px}
@media(max-width:600px){#operate-camera .camera-body{grid-template-columns:1fr}}

.actuator-readout{position:relative}.actuator-readout:after{content:"";position:absolute;top:100%;height:24px;width:1px;background:#6baabb;left:70%;transform:rotate(-20deg);transform-origin:top}.actuator-readout.right:after{left:30%;transform:rotate(20deg)}

.actuator-readout>div{flex-direction:column;gap:3px}.actuator-readout small{display:block}
.camera-workspace .actuator-readouts{gap:42%}.actuator-readouts .actuator-readout{min-width:0}