/* Desktop cockpit: cameras/map above, all day-to-day instruments below. */
#controlView:not([hidden]){height:100vh;height:100dvh;min-height:560px;display:flex;flex-direction:column}
#controlView .topbar{padding:8px 12px;flex:0 0 auto;min-height:50px}
#controlView .topbar h1{font-size:16px;white-space:nowrap}
#controlView .topbar button{padding:7px 12px}
#controlView .layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(190px,1fr) 210px;gap:10px;padding:10px;flex:1;min-height:0;align-items:stretch}
#controlView .video-card{padding:10px;display:flex;flex-direction:column;min-height:0;min-width:0}
#controlView .video-title-row{flex:none;margin-bottom:6px;min-height:22px}
#controlView #cameraFrame{height:100%;min-height:0;flex:1;aspect-ratio:auto}
#controlView .explorer-map-card{margin:0;min-width:0;min-height:0;grid-column:2;grid-row:1}
#controlView #gpsFrame{height:100%;width:100%;min-height:0}
#controlView .dash{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(140px,.85fr) minmax(140px,.85fr) minmax(185px,1.2fr) minmax(140px,.85fr) minmax(320px,1.8fr);gap:10px;width:auto;min-height:0;min-width:0}
#controlView .dash-card{padding:10px;min-width:0;position:relative}
#controlView .dash-card h3{font-size:13px;margin:0 0 8px}
#controlView .wheel-box{padding:0 0 4px}
#controlView .wheel{width:76px;height:76px;border-width:4px}
#controlView .wheel span{width:36px;height:36px;font-size:11px}
#controlView .meter-row{gap:5px;margin:5px 0}
#controlView .meter-label{width:27px;font-size:11px}
#controlView .meter-row b{width:24px;font-size:12px}
#controlView .speed-card h3 .hint{display:block;margin-top:5px}
#controlView .gear-row{gap:5px;margin-top:20px}
#controlView .gear-row strong{font-size:22px}
#controlView .gear{min-width:0;padding:7px 8px;font-size:12px}
#controlView .gear-input{margin-top:18px}
#controlView .gp-state{font-size:12px;line-height:1.5;min-height:36px;overflow-wrap:anywhere}
#controlView .btn-row{gap:5px;margin:8px 0}
#controlView .btn-row button{padding:6px 8px;font-size:12px}
#controlView .map-list{font-size:11px;line-height:1.45;margin-top:5px;overflow-wrap:anywhere}
#controlView .avoid-row{flex-direction:column;gap:7px}
#controlView .avoid-btn{padding:7px 4px;font-size:12px}
#controlView .avoid-state{line-height:1.5;font-size:11px}
#controlView .telemetry-card{display:flex;flex-direction:column;gap:0}
#controlView .telemetry-card h3{display:flex;justify-content:space-between;gap:6px}
#controlView .feedback-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
#controlView .feedback-grid>div{padding:6px 7px;background:#101720;border-radius:6px;min-width:0}
#controlView .feedback-grid span{font-size:10px;display:block;white-space:nowrap}
#controlView .feedback-grid b{display:block;font-size:15px;margin-top:3px;white-space:nowrap}
#controlView .feedback-grid i{font-style:normal}
#controlView .feedback-grid small{font-size:9px;font-weight:400;color:var(--muted)}
#controlView #serialState{font-size:12px;white-space:normal;overflow-wrap:anywhere}
#controlView .output-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
#controlView .output-grid span{font-size:10px;white-space:nowrap}
#controlView .tele-note{font-size:10px;color:var(--muted);margin:7px 0 0;line-height:1.3}
#controlView .feedback-ok{color:var(--green)}
#controlView .feedback-warn{color:var(--amber)}
#controlView .alert{flex:0 0 auto;margin:0 10px 8px;padding:5px 10px;font-size:12px}
#controlView .raw-grid:not([hidden]):not(:empty){position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:45;min-width:350px;max-width:80vw;background:#101923;border:1px solid #38bdf8;border-radius:10px;padding:14px;box-shadow:0 12px 40px #0008;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(min-width:1600px) and (min-height:850px){#controlView .layout{grid-template-rows:minmax(250px,1fr) 230px;padding:14px;gap:12px}#controlView .dash-card{padding:14px}#controlView .wheel{width:92px;height:92px}#controlView .feedback-grid b{font-size:20px}#controlView .feedback-grid span{font-size:12px}#controlView .output-grid span{font-size:12px}}
@media(max-width:1100px){#controlView .topbar{gap:6px;padding:6px 10px}#controlView .topbar-right{gap:4px}#controlView .topbar button{padding:6px 8px;font-size:12px}#controlView .topbar h1{font-size:14px}#controlView .pill{padding:3px 6px;font-size:11px}#controlView .layout{gap:8px;padding:8px}#controlView .dash{gap:6px;grid-template-columns:140px 140px minmax(160px,1fr) 132px minmax(310px,1.7fr)}#controlView .dash-card{padding:8px}#controlView .feedback-grid{gap:4px}#controlView .feedback-grid b{font-size:13px}}
/* Narrow screens and high browser zoom keep information accessible instead of clipping it. */
@media(max-width:979px){#controlView:not([hidden]){height:auto;min-height:100dvh}#controlView .layout{grid-template-rows:360px auto}#controlView .dash{grid-template-columns:repeat(4,minmax(0,1fr))}#controlView .telemetry-card{grid-column:1/-1}#controlView .feedback-grid{grid-template-columns:repeat(6,1fr)}#controlView .feedback-grid>div:nth-child(n){grid-column:auto}#controlView .avoid-row{flex-direction:row}}
@media(max-width:650px){#controlView .layout{grid-template-columns:1fr;grid-template-rows:300px 380px auto}#controlView .explorer-map-card{grid-column:1;grid-row:2}#controlView .dash{grid-row:3;grid-template-columns:1fr 1fr}#controlView .feedback-grid{grid-template-columns:repeat(3,1fr)}#controlView .topbar-right{flex-wrap:wrap}}

.input-safety{font-size:11px;color:#ffe08a;line-height:1.25;margin-top:3px}.pedal-mode{font-size:10px;color:#9aa9bd;line-height:1.2}.device-card .gp-state{font-size:11px;line-height:1.15}.device-card .map-list{font-size:10px;line-height:1.15}.raw-grid{white-space:pre-wrap;font-size:12px}.calib-card{max-height:90dvh;overflow:auto}

.calib-error{color:#ffb5b5;background:#442326;border:1px solid #d65b65;border-radius:6px;padding:10px;font-size:14px;line-height:1.5}.calib-live{font-size:12px;line-height:1.5;white-space:pre-wrap;color:#b9c9df;max-height:140px;overflow:auto;background:#101720;padding:8px;border-radius:5px}

#controlView .device-card .btn-row{gap:3px}#controlView .device-card .btn-row button{font-size:10px;padding:5px 3px;white-space:nowrap;min-width:0;flex:1}#controlView .device-card .gp-state{font-size:11px;line-height:1.3}#controlView .device-card .map-list{font-size:10px;line-height:1.3}

.drive-modes{display:flex;gap:5px;margin-top:5px}.drive-modes button{padding:4px 3px;flex:1;min-width:0;white-space:nowrap;font-size:11px;min-height:26px}.drive-modes .selected{background:#198fba;color:white;border-color:#54c6eb}.mode-hint{font-size:10px;line-height:1.2;color:#b7cbd6;margin:5px 0}#controlView .speed-card .gear-input{margin-top:4px}#controlView .speed-card .gear-row{margin-top:5px}#controlView .speed-card h3{margin-bottom:4px}#controlView .speed-card h3 .hint{margin-top:2px}