/* Manual inputs share the live camera and Forge surfaces. */
body[data-view=control] .workspace { grid-template-columns:minmax(0,1fr) 400px; }
body[data-view=control] #inspector,body[data-view=control] #focus-button { display:none; }
.control-panel { min-width:0; min-height:0; overflow:auto; padding:14px 16px; border-left:1px solid var(--line); background:var(--surface); scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.control-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.control-heading h2 { margin-top:3px; font-size:16px; }
.control-simulation { max-width:112px; padding:4px 7px; border:1px solid var(--line); color:var(--muted); font:400 10px/1.4 var(--mono); text-align:center; }
.control-ownership { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 6px; }
#control-authority { color:var(--muted); font-size:12px; }
.control-panel .button { min-height:44px; font-size:12px; }
#control-claim { flex-shrink:0; max-width:175px; }
.control-vehicle { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--soft); color:var(--muted); font:400 11px/1.5 var(--mono); }
.control-mode-choice { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.control-mode-choice label { flex-shrink:0; color:var(--muted); font-size:11px; }
.control-mode-choice select { min-width:0; width:100%; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:0; background:var(--page); color:var(--ink); font:400 11px var(--font); }
.control-mode-choice select:disabled { color:var(--muted); }
.control-mode-choice #control-mode-switch { flex-shrink:0; padding:6px 9px; touch-action:manipulation; }
.control-mode-choice #control-mode-switch[hidden] { display:none; }
.control-actions { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:6px; }
.control-actions .button { gap:4px; flex-wrap:wrap; }
.control-actions .button span { font-size:10px; font-weight:400; }
.control-feedback { min-height:35px; padding:8px 0 4px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.control-feedback[data-tone=error] { color:var(--error); }
.control-feedback[data-tone=warning] { color:var(--warning); }
.framing-controls { margin:2px 0 10px; padding:0 0 10px; border-bottom:1px solid var(--soft); }
.framing-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.framing-heading h3 { font-size:12px; }
.framing-heading h3 span { display:inline-block; margin-left:7px; color:var(--muted); font:10px var(--mono); }
.framing-heading .button { padding:4px 8px; }
.framing-status { min-height:18px; margin-bottom:6px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.framing-status[data-phase=active] { color:var(--ink); }
.framing-status[data-phase=lost] { color:var(--warning); }
.framing-actions { display:grid; grid-template-columns:1fr 1.2fr 1.6fr; gap:4px; }
.framing-actions .button { min-width:44px; padding:4px; font-size:11px; line-height:1.3; touch-action:manipulation; }
.framing-actions .button[aria-pressed=true] { border-color:var(--accent); }
.framing-modes .button { flex-direction:column; gap:3px; }
.framing-modes small { color:var(--muted); font-size:10px; font-weight:400; }
.framing-profile-note { margin-bottom:7px; }
.framing-distance { grid-template-columns:1fr 1fr; }
.framing-response { display:flex; align-items:center; gap:10px; margin-top:6px; }
.framing-response label { color:var(--muted); font-size:11px; }
.framing-response select { flex:1; min-width:0; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:0; background:var(--page); color:var(--ink); font:11px var(--font); }
.framing-response select:disabled { color:var(--muted); }
.framing-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; }
.framing-metrics dt { color:var(--muted); font-size:10px; }
.framing-metrics dd { margin-top:2px; font:11px var(--mono); }
.control-inputs { display:grid; grid-template-columns:1.35fr 1fr; gap:12px; padding:4px 0 6px; }
.control-pad-group h3 { margin-bottom:8px; font-size:11px; color:var(--muted); }
.control-direction-pad { display:grid; grid-template:repeat(3,54px)/repeat(3,minmax(0,1fr)); gap:4px; }
.control-forward { grid-area:1/2; }
.control-left { grid-area:2/1; }
.control-right { grid-area:2/3; }
.control-back { grid-area:3/2; }
.control-pad-center { grid-area:2/2; align-self:center; color:var(--muted); text-align:center; font:400 9px/1.5 var(--mono); }
.control-direction { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:54px; min-width:44px; padding:3px 2px; border:1px solid var(--line); background:var(--page); font-size:10px; text-align:center; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.control-direction>span:first-child { font-size:21px; line-height:1; }
.control-direction kbd { color:var(--muted); font:400 9px/1 var(--mono); }
.control-direction[aria-pressed=true] { border-color:var(--accent); background:var(--ink); color:var(--page); }
.control-direction[aria-pressed=true] kbd { color:var(--page); }
.control-direction:disabled { background:transparent; }
.control-direction:disabled>span:first-child { opacity:.5; }
.control-height-pad { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.control-height-pad .control-direction { min-height:82px; }
.control-throttle { padding:0; }
.control-throttle label { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.control-throttle output { color:var(--ink); font-family:var(--mono); }
.control-throttle input { display:block; width:100%; min-height:44px; margin:0; padding:0; accent-color:var(--ink); touch-action:none; }
.control-throttle-steps { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.control-throttle-steps .button { min-width:44px; padding:4px; touch-action:manipulation; }
.control-throttle-steps span { font-size:10px; }
.control-throttle[hidden],.control-height-pad[hidden] { display:none; }
body[data-view=control] .control-panel[data-mode="0"] .control-yaw-pad .control-direction { min-height:54px; }
.control-yaw-pad { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:6px; }
.control-yaw-pad .control-direction { min-height:82px; }
.control-instructions { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.45; }
.control-instructions strong { color:var(--ink); font-weight:500; }
.control-end-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:2px; padding-top:8px; padding-bottom:4px; border-top:1px solid var(--line); }
.control-end-actions .button { flex:1; }
.control-end-actions [data-control-action=release] { flex:2; flex-direction:column; gap:1px; }
.control-end-actions [data-control-action=release] span { font-weight:400; font-size:10px; }
.control-loss-note { font-size:10px; }
@media(max-width:1100px) and (min-width:761px) {
  body[data-view=control] .workspace { grid-template-columns:minmax(0,1fr) 370px; }
  .control-panel { padding:12px; }
  .control-inputs { gap:8px; }
  body[data-view=control] .measurement-buttons>button { min-height:76px; }
}
@media(max-width:760px) {
  .view-navigation { flex-wrap:wrap; }
  .view-navigation button { min-height:44px; }
  body[data-view=control] .camera-stage { min-height:145px; height:clamp(145px,25dvh,220px); }
  body[data-view=control] .camera-empty { padding:12px; }
  body[data-view=control] .camera-empty h3 { font-size:15px; }
  body[data-view=control] .camera-empty p { margin:5px 0; line-height:1.4; }
  body[data-view=control] .camera-empty .button { min-height:36px; margin-top:4px; }
  body[data-view=control] .measurements { display:none; }
  .control-panel { padding:12px 14px; overflow:visible; border-left:0; border-top:1px solid var(--line); }
  .control-heading h2 { font-size:14px; }
  .control-heading .eyebrow { display:none; }
  .control-ownership { margin:8px 0 4px; }
  .control-inputs { grid-template-columns:1.2fr 1fr; gap:12px; max-width:480px; margin:0 auto; }
  .control-direction-pad { grid-template-rows:repeat(3,56px); }
  .control-height-pad .control-direction,.control-yaw-pad .control-direction { min-height:86px; }
}
@media(max-width:380px) {
  .view-navigation { padding:0 6px; gap:0; }
  .view-navigation button { padding:8px; font-size:11px; }
  .control-panel { padding-right:10px; padding-left:10px; }
  .control-inputs { gap:8px; grid-template-columns:1.3fr 1fr; }
  #control-claim { max-width:154px; font-size:11px; }
}
