/* Compact desktop controls with larger touch targets on touch screens. */
body.planner-reference{--planner-timeline-height:min(270px,36dvh);--track-label:220px}
#plannerMenubar{height:34px;font-size:11px;gap:3px;padding-inline:10px}
#plannerMenubar .plannerBrand{font-size:11px;letter-spacing:.6px;gap:8px;margin-right:18px}
.plannerBrand img{width:23px;height:23px;object-fit:contain}
#plannerMenubar>button,#plannerMenubar summary,#plannerMenubar #assetsToggle{height:28px;font-size:11px;padding-inline:9px;gap:5px}
#plannerMenubar .plannerTopIcon{font-size:18px}
#plannerMenubar .plannerMenuPopup button,#plannerMenubar .assetsMenuItem{font-size:11px;height:26px}
body.planner-reference #assetsDropdown{top:32px}
body.planner-reference #panel{top:34px;height:calc(100dvh - 34px);font-size:11px}
body.planner-reference #panel :is(button,input,select,label){font-size:11px;min-height:24px}
body.planner-reference .plannerViewportCanvas{top:34px!important;height:calc(100dvh - 34px)!important}
body.planner-reference.planner-animation-open .plannerViewportCanvas,body.planner-reference.planner-animation-open #panel{height:calc(100dvh - 34px - var(--planner-timeline-height))!important}
body.planner-reference #shotPlannerTimeline{grid-template-rows:40px minmax(0,1fr)}
body.planner-reference #shotPlannerTimeline .plannerTransport{height:40px;min-height:40px;padding:5px 10px;gap:8px}
body.planner-reference #shotPlannerTimeline button{height:28px;min-height:28px;font-size:11px;padding:0 12px}
body.planner-reference #shotPlannerTimeline .plannerToolGroup{height:28px;gap:4px}
body.planner-reference #shotPlannerTimeline .plannerIconButton{width:32px;min-width:28px;font-size:15px}
body.planner-reference #shotPlannerTimeline .plannerFrameGroup{gap:8px}
body.planner-reference #shotPlannerTimeline .plannerFrameGroup output{height:26px;width:50px;font-size:11px}
body.planner-reference #shotPlannerTimeline .plannerFrameGroup label{font-size:11px;gap:6px}
body.planner-reference #shotPlannerTimeline .plannerFrameGroup input{height:24px;width:44px;font-size:11px}
body.planner-reference #shotPlannerTimeline #plannerAddKey{width:62px}body.planner-reference #shotPlannerTimeline #plannerRemoveKey{width:80px}
.plannerKeying{min-width:82px;font-size:11px}.plannerKeying summary{padding:6px 10px}
body.planner-reference #shotPlannerTimeline .plannerAnimationBadge{min-width:100px}
.plannerSheetRow,.plannerSheetRow.object{height:22px}.plannerSheetRuler{height:25px}
body.planner-reference #shotPlannerTimeline .plannerSheetLabel{font-size:11px;height:100%;min-height:0;padding-left:18px}
body.planner-reference #shotPlannerTimeline .plannerSheetScale button,body.planner-reference #shotPlannerTimeline .plannerSheetKey{font-size:11px;height:22px;min-height:0}
.plannerSheetCursor span{width:28px;height:23px;font-size:11px}
#plannerInspectorToggle{width:24px;height:44px;padding:0;border-radius:4px 0 0 4px}.plannerInspectorChevron{font-size:24px}.plannerInspectorCaption{display:none}
body.camera-monitor-active #cameraViewToolbar .toolbarRow{min-height:52px}.cameraParameter summary{height:52px;padding:6px 16px;gap:5px}
.cameraParameter summary strong,.cameraParameter summary #toolbarFocalLengthLabel{font-size:14px}.cameraParameterPopup{top:56px}
body.camera-monitor-active #cameraViewToolbar .cameraParameterPopup button{font-size:11px;min-height:28px;padding:5px 8px}
body.camera-monitor-active #cameraShutterButton{width:44px;height:44px;min-width:44px;min-height:44px;right:24px;top:42%}
body.camera-monitor-active #cameraShutterButton:after{top:49px;font-size:8px}
body.camera-monitor-active #cameraMonitorStatus{height:58px;font-size:11px}#cameraMonitorStatus output{font-size:16px}
body.camera-monitor-active #cameraViewExitButton{top:10px;font-size:11px;min-height:28px;padding:5px 9px}
#plannerCameraRecord{display:none;position:fixed;z-index:80;right:24px;top:calc(42% + 58px);width:44px;height:44px;padding:6px;margin:0;border:2px solid #ddd;border-radius:50%;background:#16191e;cursor:pointer}
body.camera-monitor-active #plannerCameraRecord{display:block}#plannerCameraRecord>span{display:block;width:100%;height:100%;background:#e84d51;border-radius:50%}#plannerCameraRecord.recording>span{border-radius:3px;transform:scale(.65)}
#plannerCameraRecord small{position:absolute;top:49px;left:50%;transform:translateX(-50%);color:#eee;font:8px Arial;letter-spacing:.1em}
#plannerRecordingStatus{display:none;position:fixed;bottom:65px;left:20px;z-index:80;font:11px Arial;color:#f0b8b8;background:#14181de0;padding:5px 8px;border-radius:3px}body.camera-monitor-active #plannerRecordingStatus:not(:empty){display:block}
#plannerVideoProjects{position:fixed;inset:0;z-index:150;background:#171b21;color:#dce0e5;padding:24px 32px;overflow:auto;font:12px Arial}#plannerVideoProjects[hidden]{display:none}
#plannerVideoProjects header{display:flex;align-items:center;gap:20px;border-bottom:1px solid #363d47;padding-bottom:16px}#plannerVideoProjects h1{flex:1;font-size:18px;font-weight:500}
#plannerVideoProjects button{width:auto;margin:0;padding:7px 12px;font:12px Arial;background:#292f38;color:#eee;border:1px solid #424a55;border-radius:4px;cursor:pointer}
.plannerVideoProjectGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin-top:28px}.plannerVideoProjectGrid article{max-width:340px}
#plannerVideoProjects .plannerVideoProject{display:flex;flex-direction:column;gap:10px;padding:0 0 14px;background:transparent;border:0;text-align:left;width:100%}.plannerVideoProjectPicture{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:linear-gradient(140deg,#344452,#202b38);border:1px solid #4d5967;border-radius:6px;font-size:40px;color:#d3b36a}.plannerVideoProject small{color:#9ca7b4}
body.planner-video-projects :is(#plannerMenubar,#plannerInspectorToggle,#panel,#shotPlannerTimeline){visibility:hidden}
@media(max-width:650px){#plannerMenubar{height:62px;flex-wrap:wrap}#plannerMenubar .plannerBrand{font-size:0;margin:0;height:28px}#plannerMenubar .plannerMenuPopup,body.planner-reference #assetsDropdown{top:62px}body.planner-reference .plannerViewportCanvas{top:62px!important;height:calc(100dvh - 62px)!important}body.planner-reference #panel{top:62px;height:calc(100dvh - 62px)}body.planner-reference.planner-animation-open .plannerViewportCanvas,body.planner-reference.planner-animation-open #panel{height:calc(100dvh - 62px - var(--planner-timeline-height))!important}#plannerVideoProjects{padding:14px}#plannerVideoProjects header{gap:8px}#plannerVideoProjects h1{font-size:14px}.cameraParameter summary{padding-inline:8px}body.camera-monitor-active #cameraViewExitButton{top:62px}}
body.planner-reference.camera-monitor-active .plannerViewportCanvas{top:0!important;height:100dvh!important}
@media(pointer:coarse){#plannerInspectorToggle{width:32px;height:48px}#plannerMenubar .plannerMenuPopup button{min-height:36px}}
body.planner-reference #shotPlannerTimeline .plannerSheetKey,body.planner-reference #shotPlannerTimeline .plannerSheetScale button{padding:0}