.remote-panel{position:fixed;top:84px;left:20px;bottom:55px;width:min(410px,calc(100vw - 40px));overflow:auto;padding:24px;z-index:20;background:#172b34f5;border:1px solid #8edbcc66;border-radius:18px;color:#edf5f6;box-shadow:0 20px 70px #0005;font:14px/1.55 system-ui}.remote-panel[hidden]{display:none}.remote-panel h2{text-transform:none;font-size:24px;letter-spacing:-.5px}.remote-panel p{margin:12px 0}.remote-panel input{width:100%;box-sizing:border-box;padding:10px;background:#10232a;color:#fff;border:1px solid #537078;border-radius:8px}.remote-panel button{margin:6px 3px 6px 0;min-height:40px}.remote-request{display:flex;gap:12px;align-items:center}.remote-panel .physics-note{font-size:12px;color:#b7cdd4}#remote-start{background:#98e5d5;color:#132831}.remote-panel a{color:#9ae8db}.remote-view{margin:0;background:#10232b;color:#edf4f5;font:16px/1.55 system-ui}.remote-view *{box-sizing:border-box}.remote-view header{height:72px;display:flex;gap:24px;align-items:center;padding:16px 28px;background:#172f3a}.remote-view a{color:#a4e7db}.remote-badge{margin-left:auto;font-size:12px;color:#8fe4d5;letter-spacing:.1em}.remote-view main{max-width:1500px;margin:auto;padding:24px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:24px}.remote-screen{aspect-ratio:16/10;position:relative;background:#09161c;border:1px solid #324a56;border-radius:16px;overflow:hidden;align-self:start}.remote-screen video{width:100%;height:100%;object-fit:contain}#remote-empty{position:absolute;inset:0;display:grid;place-items:center;padding:32px;text-align:center;color:#a0b5bf}#remote-empty[hidden]{display:none}.remote-overlay{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px;background:#10232bd9;font-size:12px}.remote-view h1{font-size:30px;line-height:1.1;margin:8px 0 20px}.remote-view p{color:#bdcfd5}.remote-view .eyebrow{font-size:11px;letter-spacing:.16em;color:#8edccd}.remote-view input{display:block;width:100%;padding:12px;border-radius:8px;border:1px solid #526b76;background:#172f3a;color:#fff;margin:8px 0}.remote-view button{background:#24424e;color:#fff;border:1px solid #54737e;border-radius:8px;padding:12px;margin:5px 4px 5px 0;cursor:pointer;font-weight:600;min-height:44px}.remote-view button:disabled{opacity:.4;cursor:default}.remote-view button:focus-visible,.remote-view input:focus-visible{outline:3px solid #9aebdb;outline-offset:3px}#join,#request-control{background:#9debd8;color:#10232b}#remote-stop{border-color:#efb994}.remote-pad{display:grid;grid-template-columns:repeat(3,60px);width:max-content;margin:16px auto;gap:6px;touch-action:none}.remote-pad button{margin:0;user-select:none;-webkit-user-select:none;touch-action:none}.remote-pad button:first-child{grid-column:2}.remote-pad button:nth-child(2){grid-column:1}.remote-pad .pressed{background:#9debd8;color:#10232b;box-shadow:0 0 0 3px #9debd855}.remote-facts{background:#19313b;padding:16px;border-radius:12px;font-size:13px}.remote-facts div{display:flex;justify-content:space-between;gap:16px;margin:8px 0}.remote-facts dd{margin:0;text-align:right}.remote-note{font-size:12px}#remote-message{padding:12px;border-left:3px solid #99e1d2;background:#19313b}.remote-join,.remote-driving{border-top:1px solid #304d59;padding:12px 0}.remote-view label{font-size:12px}@media(max-width:800px){.remote-view main{grid-template-columns:1fr;padding:12px;gap:12px}.remote-view header{padding:12px;gap:12px;height:auto;font-size:12px}.remote-view h1{font-size:24px}.remote-screen{aspect-ratio:4/3}.remote-panel{top:118px;left:12px;bottom:70px;padding:18px;width:calc(100vw - 24px)}#remote-open{font-size:11px;padding:4px 7px}.remote-badge{font-size:9px}.remote-view .remote-console{padding:8px}}
@media(max-width:650px){body:not(.remote-view) header{grid-template-columns:repeat(5,minmax(0,1fr))}body:not(.remote-view) header #remote-open{grid-row:2;grid-column:4;min-width:0}body:not(.remote-view) header #reality-open{grid-column:5}body:not(.remote-view) header .apps-cta{grid-column:4/6}}

.remote-view.connected .remote-join label,.remote-view.connected .remote-join input,.remote-view.connected #join{display:none}
@media(max-width:800px){.remote-view.connected .remote-screen{position:sticky;top:8px;z-index:2;max-height:32svh;aspect-ratio:16/9}.remote-view.connected .remote-console>div:first-child>p:not(#remote-message):not(.eyebrow){display:none}.remote-view.connected .remote-join{padding:3px 0}.remote-view.connected h1{font-size:22px;margin-bottom:12px}.remote-view.connected .remote-pad{margin:8px auto}}

#view-dock{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:5px;padding:6px;background:#122b35ed;border:1px solid #799da5;border-radius:12px}
#view-dock button{padding:9px 14px;font-size:12px;white-space:nowrap;min-height:40px}#view-dock button.selected{background:#9debd8;color:#10232b}
#fpv-preview{position:fixed;right:18px;bottom:64px;width:280px;z-index:4;background:#132b36;border:1px solid #90d8cc;border-radius:12px;overflow:hidden;pointer-events:none;color:#e9f5f3}
#fpv-preview[hidden],.fpv-mode #fpv-preview{display:none}#fpv-preview span,#fpv-preview small{display:block;padding:7px 10px;font:600 10px system-ui}#fpv-preview small{padding-top:0;color:#b6cdd4}#fpv-preview canvas{width:100%;height:auto;display:block}
.remote-sdk-option{display:flex;gap:10px;align-items:center}.remote-panel .remote-sdk-option input{width:18px;height:18px}.fpv-label{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:6px;background:#122b35df;color:#b2f5e5;font:600 11px system-ui}
@media(max-width:650px){#view-dock{bottom:34px}#view-dock button{padding:7px 12px}#fpv-preview{width:170px;bottom:95px;right:8px}.remote-panel{top:116px;bottom:84px}}

/* The local operator sees and drives the same simulation in one window. */
#local-drive-dock{position:fixed;left:20px;bottom:78px;z-index:8;max-width:340px;padding:15px;background:#102630f2;border:1px solid #89dfcc;border-radius:14px;box-shadow:0 12px 40px #0005;pointer-events:auto}
#local-drive-dock[hidden]{display:none}#local-drive-dock strong,#local-drive-dock small{display:block}#local-drive-dock strong{margin:7px 0;font-size:14px}#local-drive-dock small{font-size:11px;color:#b7d7d8}#local-drive-dock .row{margin:12px 0}#local-resume{background:#9debd8;color:#10232b}#local-stop{border-color:#efb994}#local-close{flex:0}#remote-sharing{margin:22px 0 12px}#remote-sharing summary{font-weight:650}
.single-window-drive .controls{display:none!important}.single-window-drive .dpad{display:block;right:24px;bottom:86px;z-index:8}.single-window-drive #view-dock{bottom:20px}.single-window-drive footer{display:none}
@media(max-width:650px){#local-drive-dock{left:10px;bottom:90px;max-width:calc(100vw - 210px);min-width:155px;padding:10px}#local-drive-dock .eyebrow{font-size:8px}#local-drive-dock strong{font-size:12px}#local-drive-dock .row{flex-wrap:wrap;gap:4px}#local-drive-dock button{min-height:40px;padding:6px;font-size:11px}#local-drive-dock small{font-size:9px}.single-window-drive .dpad{right:10px;bottom:88px;min-width:170px}.single-window-drive #view-dock{bottom:22px}.single-window-drive .telemetry{display:none}}

/* One entry point for driving, tests and secondary diagnostics. */
.remote-panel{box-sizing:border-box;width:min(410px,calc(100vw - 40px));padding:22px}
.remote-panel h2{margin:6px 0 14px;line-height:1.2}.remote-panel h3{font-size:13px;margin:20px 0 8px}
.connection-badge{padding:9px 12px;border:1px solid #527d7d;background:#173b40;border-radius:8px;color:#b3efdf;font-size:12px}
.control-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 12px}.remote-panel .control-tabs button{margin:0;min-height:44px}
.control-tabs [aria-selected=true]{background:#9debd8;color:#10232b;border-color:#9debd8}
.remote-panel [role=tabpanel][hidden]{display:none}.remote-panel .primary{background:#9debd8;color:#10232b}
.remote-panel #local-start{width:100%;min-height:46px;margin:5px 0}
.remote-panel select{width:100%;box-sizing:border-box;background:#14323c;color:#fff;border:1px solid #91adaf;border-radius:8px;padding:12px;font:inherit}
.remote-panel #sdk-run{width:calc(65% - 6px)}.remote-panel #sdk-stop{width:35%;margin-right:0}
.remote-panel #sdk-status{font-size:13px;border-radius:6px}.remote-panel #sdk-status[data-result=passed]{color:#b0f5cd;border-color:#b0f5cd}.remote-panel #sdk-status[data-result=failed]{color:#ffc2a9;border-color:#ffc2a9}
#control-diagnostics{border-top:1px solid #466069;margin-top:20px;padding-top:16px;font-size:12px}#control-diagnostics>summary{font-size:13px;font-weight:650;cursor:pointer;min-height:30px}
#sdk-evidence{padding-bottom:10px}#sdk-evidence ol{padding-left:20px;font-size:12px}#sdk-connect{border-top:1px solid #466069;padding-top:5px}
#remote-status{font-size:12px;color:#c4d9de}#remote-approval{padding:12px;background:#345249;border:1px solid #9debd8;border-radius:8px;margin-top:12px}#remote-approval h3{margin:0 0 6px}
.drive-test-open #local-drive-dock,.drive-test-open .dpad,.drive-test-open #session-hud{display:none!important}
.remote-panel button:focus-visible,.remote-panel select:focus-visible,.remote-panel input:focus-visible,.remote-panel summary:focus-visible{outline:3px solid #9debd8;outline-offset:3px}
@media(max-width:650px){
 body:not(.remote-view) header{grid-template-columns:repeat(4,minmax(0,1fr))}
 body:not(.remote-view) header #remote-open{grid-column:3;grid-row:2;font-size:10px}
 body:not(.remote-view) header #reality-open{grid-column:4}
 body:not(.remote-view) header .apps-cta{grid-column:3/5}
 .remote-panel{left:12px;width:calc(100vw - 24px);padding:18px;top:116px;bottom:80px}
 .remote-panel h2{font-size:23px}.remote-panel p{font-size:13px}.remote-panel .physics-note{font-size:11px}
}

/* Size the control card to its contents, leaving the scene visible. */
.remote-panel{bottom:auto;max-height:calc(100svh - 145px)}
@media(max-width:650px){.remote-panel{bottom:auto;max-height:calc(100svh - 196px)}}

#remote-status:empty{display:none}
/* Keep the local session dock beside, rather than on top of, the touch pad. */
@media(max-width:380px){#local-drive-dock{max-width:calc(100vw - 202px);min-width:0}}