/* Court workspace: overrides are scoped to the court, not training or notes. */
.court-column{--workspace-safe-top:env(safe-area-inset-top,0px)}
.court-bottom-controls #rotation-value{display:none!important}
.court-tools #draw-pen{justify-content:center}
.court-tools #draw-pen svg{flex-shrink:0}
.court-column #pen-actions:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.court-column #pen-actions button{width:100%;min-width:0;white-space:normal!important;overflow-wrap:anywhere;line-height:1.2;text-align:center}
.direction-pad{position:relative}
.court-bottom-controls .direction-pad .pad-center{position:absolute;left:33%;top:33%;width:34%;height:34%;margin:0;grid-area:auto;pointer-events:none;will-change:transform}
.direction-pad.is-held .pad-center{box-shadow:0 2px 12px #173e3750;outline:2px solid #d7b878}
.direction-pad button{pointer-events:none}
.direction-pad button:focus-visible{outline:2px solid #173e37;outline-offset:-2px}
.court-column .learning-note,.court-column .scene-caption,.court-column .to-side-note,.court-column .gesture-hint{display:none!important}
body.court-focus #header-actions,body.court-focus #focus-header-controls{display:none!important}
body.court-focus .court-column{
 display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px minmax(0,1fr) auto;gap:6px!important;
 position:fixed;inset:0;box-sizing:border-box;height:100dvh!important;min-height:0;overflow:hidden;
 padding:calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
}
body.court-focus .court-size-toolbar,body.court-focus .court-toolbar{grid-column:1;grid-row:auto;margin:0!important;min-width:0;min-height:0;gap:6px;flex-wrap:nowrap!important}
body.court-focus .court-size-toolbar{grid-row:1}
body.court-focus .court-toolbar{grid-row:2}
body.court-focus #scene-select{display:block;flex:1;min-width:0;max-width:none;height:40px}
body.court-focus #court-stage,body.court-focus #court-stage.eye-view{grid-column:1;grid-row:3;min-height:0!important;height:100%!important;width:100%;aspect-ratio:auto!important;flex:none!important;align-self:stretch}
body.court-focus .court-bottom-controls{grid-column:1;grid-row:4;position:static!important;display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:6px!important;min-height:0!important;padding:0!important;margin:0!important;align-items:start}
body.court-focus .court-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0!important}
body.court-focus .court-tools button,body.court-focus #officials-select{width:100%;min-width:0;min-height:40px!important;height:40px;font-size:12px;padding:5px!important;white-space:nowrap}
body.court-focus #pen-actions{grid-column:1/-1;gap:5px}
body.court-focus #pen-actions[hidden]{display:none!important}
body.court-focus #pen-actions button{flex:1;white-space:normal;font-size:11px}
body.court-focus .court-bottom-controls .actor-controller{position:static!important;display:flex;flex-direction:column;grid-column:2;width:136px;max-width:100%;margin:0!important;padding:0;gap:3px;justify-self:end}
body.court-focus .court-bottom-controls .controller-label{display:flex;flex-direction:column;gap:2px;padding:0;background:none}
body.court-focus .court-bottom-controls .controller-label b{font-size:12px;line-height:14px}
body.court-focus .quick-ref-selector button{width:38px;min-width:38px;min-height:38px;height:38px;font-size:14px;padding:4px}
body.court-focus .court-bottom-controls .direction-pad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);padding:2px;grid-area:auto}
body.court-focus .court-bottom-controls .direction-pad button{min-height:36px;height:36px;padding:5px}
body.court-focus .direction-pad svg{width:24px;height:24px}
body.court-focus .court-bottom-controls .rotation-controls{grid-area:auto;width:100%;margin:0}
body.court-focus .rotation-buttons button{width:38px;min-width:38px;min-height:38px;height:38px;padding:6px}
body.court-focus .rotation-buttons output{font-size:12px}
body.court-focus .canvas-badge{left:6px;top:6px;font-size:10px;padding:3px;gap:4px}
body.court-focus .canvas-badge span:first-child{font-size:10px;padding:3px 5px}
body.court-focus .court-legend{left:6px;right:6px;bottom:5px;gap:8px;font-size:10px;padding:4px;flex-wrap:wrap}
/* A right-hand control panel in landscape leaves the court its own usable height. */
@media (orientation:landscape) and (max-height:650px){
 body.court-active main{padding:calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left))!important;max-width:none}
 body.court-active .studio-layout{display:block}
 body.court-active .court-column,body.court-active .court-column{
  display:grid!important;grid-template-columns:minmax(0,1fr) clamp(204px,25vw,240px);grid-template-rows:76px auto minmax(0,1fr);gap:5px 10px!important;
  height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;overflow:hidden;
 }
 body.court-active .court-column{height:100dvh!important}
 body.court-active .court-size-toolbar,body.court-active .court-toolbar{grid-column:2;grid-row:auto;min-width:0;margin:0!important;min-height:0;gap:5px;flex-wrap:nowrap!important}
 body.court-active .court-size-toolbar{grid-row:1;display:grid!important;grid-template-columns:minmax(0,1fr) 38px;grid-template-rows:34px 38px;gap:4px}
 body.court-active .court-size-toolbar .segmented{grid-column:1;grid-row:1;width:100%;display:grid;grid-template-columns:1fr 1fr}
 body.court-active #court-focus{grid-column:2;grid-row:1/3;align-self:start}
 body.court-active #scene-select{grid-column:1;grid-row:2;width:100%}
 body.court-active .court-toolbar{grid-row:2;align-items:start}
 body.court-active .court-toolbar .segmented{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:100%}
 body.court-active .court-toolbar .segmented button{width:100%;min-height:32px;height:32px;padding:2px 4px!important}
 body.court-active #scene-select{display:block;flex:1;min-width:0;max-width:none;height:38px;font-size:12px}
 body.court-active .court-size-toolbar .segmented,body.court-active .court-toolbar .segmented{min-width:0;padding:2px;gap:0}
 body.court-active .segmented button{padding:4px 5px;font-size:12px;min-width:0;min-height:36px}
 body.court-active #court-focus,body.court-active #save-image{width:38px;min-width:38px;min-height:38px;height:38px;padding:6px}
 body.court-active #court-stage,body.court-active #court-stage,body.court-active #court-stage.eye-view,body.court-active #court-stage.eye-view{
  grid-column:1;grid-row:1/-1;min-height:0!important;height:100%!important;width:100%;max-width:none!important;aspect-ratio:auto!important;align-self:stretch;justify-self:stretch;flex:none!important;
 }
 body.court-active .court-bottom-controls,body.court-active .court-bottom-controls{
  grid-column:2;grid-row:3;position:static!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px!important;margin:0!important;padding:0!important;min-height:0!important;max-height:100%;
 }
 body.court-active .court-bottom-left{width:100%}
 body.court-active .court-tools,body.court-active .court-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0!important}
 body.court-active .court-tools button,body.court-active #officials-select{width:100%;min-width:0;min-height:38px!important;height:38px;font-size:12px;padding:3px!important;white-space:nowrap}
 body.court-active #note-scene-short{grid-column:2/4}
 body.court-active #pen-actions{grid-column:1/-1;gap:5px}
 body.court-active #pen-actions[hidden]{display:none!important}
 body.court-active #pen-actions button{flex:1}
 body.court-active .court-bottom-controls .actor-controller,body.court-active .court-bottom-controls .actor-controller{
  position:static!important;display:grid!important;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:4px 8px;width:100%;max-width:100%;margin:0!important;
 }
 body.court-active .court-bottom-controls .controller-label{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;text-align:center;background:none;padding:0}
 body.court-active .court-bottom-controls .controller-label b{font-size:12px;line-height:14px}
 body.court-active .quick-ref-selector button{width:34px;min-width:34px;height:36px;min-height:36px;font-size:14px;padding:3px}
 body.court-active .court-bottom-controls .direction-pad{grid-column:1;grid-row:1/3;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);padding:1px}
 body.court-active .court-bottom-controls .direction-pad button{min-height:36px;height:36px;padding:5px}
 body.court-active .direction-pad svg{width:24px;height:24px}
 body.court-active .court-bottom-controls .rotation-controls{grid-column:2;grid-row:2;width:100%;margin:0}
 body.court-active .rotation-buttons button{width:36px;min-width:36px;height:38px;min-height:38px;padding:5px}
 body.court-active .rotation-buttons output{font-size:12px}
 body.court-active .actor-controller[hidden]{display:none!important}
 body.court-active .canvas-badge{left:6px;top:6px;font-size:10px}
 body.court-active .court-legend{left:6px;right:6px;bottom:5px;font-size:10px;gap:8px;padding:4px;flex-wrap:wrap}
}

/* Expanded controls share the viewport coordinate space with their touch targets. */
body.court-focus{overscroll-behavior:none;overflow:hidden}
body.court-focus>.court-column{margin:0!important;max-width:none!important;isolation:isolate;touch-action:manipulation}
.court-column button svg{pointer-events:none}

/* Portrait: all utility controls sit to the left of a larger movement pad. */
@media (orientation:portrait){
 body.court-active .court-bottom-controls,body.court-focus .court-bottom-controls{
  --pad-size:clamp(154px,46vw,216px);display:grid!important;grid-template-columns:minmax(0,1fr) var(--pad-size);grid-template-rows:auto auto auto;gap:5px 8px!important;margin-top:6px;align-items:center;
 }
 body.court-active .court-bottom-left{grid-column:1;grid-row:1;min-width:0}
 body.court-active .court-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0!important}
 body.court-active .court-tools button,body.court-active #officials-select{width:100%;min-width:0;min-height:40px!important;height:40px;padding:4px!important;font-size:12px;white-space:nowrap}
 body.court-active #note-scene-short,body.court-active #pen-actions{grid-column:1/-1}
 body.court-active #pen-actions[hidden]{display:none!important}
 body.court-active .court-bottom-controls .actor-controller{display:contents!important}
 body.court-active .court-bottom-controls .actor-controller[hidden]{display:none!important}
 body.court-active .court-bottom-controls .controller-label{grid-column:1;grid-row:2;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:0;background:none}
 body.court-active .quick-ref-selector{display:flex;gap:4px}
 body.court-active .quick-ref-selector button{width:36px;min-width:36px;min-height:38px;height:38px;padding:4px;font-size:14px}
 body.court-active .court-bottom-controls .controller-label b{font-size:12px;line-height:16px}
 body.court-active .court-bottom-controls .direction-pad{
  grid-column:2;grid-row:1/4;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:var(--pad-size);height:var(--pad-size);padding:4px;align-self:center;
 }
 body.court-active .court-bottom-controls .direction-pad button{width:100%;height:100%;min-width:0;min-height:0!important;padding:8px}
 body.court-active .direction-pad svg{width:30px;height:30px}
 body.court-active .court-bottom-controls .rotation-controls{grid-column:1;grid-row:3;width:100%;margin:0}
 body.court-active .rotation-buttons button{width:38px;min-width:38px;min-height:38px;height:38px;padding:6px}
 body.court-active .rotation-buttons output{font-size:12px}
}
/* Compact right panel for short phone viewports, including safe-area insets. */
@media (orientation:landscape) and (max-height:380px){
 body.court-active .court-column,body.court-active .court-column{grid-template-rows:64px auto minmax(0,1fr);gap:4px 8px!important}
 body.court-active .court-size-toolbar{grid-template-rows:30px 30px;gap:4px}
 body.court-active #scene-select{height:30px}
 body.court-active .segmented button,body.court-active .court-toolbar .segmented button{min-height:28px;height:28px;padding:2px!important}
 body.court-active .court-tools button,body.court-active #officials-select{min-height:32px!important;height:32px;font-size:11px}
 body.court-active .court-bottom-controls{gap:5px!important}
 body.court-active .court-bottom-controls .actor-controller{grid-template-columns:94px minmax(0,1fr);gap:3px 5px}
 body.court-active .court-bottom-controls .direction-pad{grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px)}
 body.court-active .court-bottom-controls .direction-pad button{min-height:30px;height:30px;padding:3px}
 body.court-active .quick-ref-selector button{width:30px;min-width:30px;height:32px;min-height:32px}
 body.court-active .rotation-buttons button{width:32px;min-width:32px;height:34px;min-height:34px;padding:4px}
}

@media (orientation:landscape) and (max-height:650px){
 body.court-active .court-toolbar .segmented:has(button[data-view="C"]:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
 body.court-active .quick-ref-selector:has(button[data-ref="C"]:not([hidden])) button{width:28px;min-width:28px;padding:2px}
}

/* Normal mode retains page navigation; expanded mode retains the full viewport. */
.court-column{--workspace-safe-bottom:env(safe-area-inset-bottom,0px)}
.court-size-toolbar #extent-select,.court-size-toolbar #officials-select{
 display:block;width:100%;min-width:0;max-width:none;height:40px;min-height:40px!important;padding:4px 6px;border:2px solid #61748e;border-radius:8px;background:#fff;color:#14263b;font-size:12px;font-weight:600;
}
body.court-active .court-size-toolbar,body.court-focus .court-size-toolbar{
 display:grid!important;grid-template-columns:minmax(92px,.9fr) 64px minmax(0,1.4fr) 44px;grid-template-rows:44px;gap:5px!important;
}
body.court-active #extent-select{grid-column:1;grid-row:1}
body.court-active .court-size-toolbar #officials-select{grid-column:2;grid-row:1}
body.court-active .court-size-toolbar #scene-select{grid-column:3;grid-row:1;width:100%;height:40px;max-width:none}
body.court-active #court-focus{grid-column:4;grid-row:1;align-self:center}
@media (orientation:portrait){
 body.court-active:not(.court-focus) .topbar{height:56px;padding:4px 12px;gap:8px}
 body.court-active:not(.court-focus) .header-note,body.court-active:not(.court-focus) .demo-tag{display:none}
 body.court-active:not(.court-focus) .main-tabs{height:44px;gap:16px}
 body.court-active:not(.court-focus) .main-tabs button{min-height:40px;font-size:13px}
 body.court-active:not(.court-focus) #page-court>.page-heading{padding:6px 0;min-height:42px}
 body.court-active:not(.court-focus) #page-court>.page-heading .eyebrow{display:none}
 body.court-active:not(.court-focus) #page-court h1{font-size:20px}
 body.court-active:not(.court-focus) main{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
 body.court-active:not(.court-focus) .studio-layout{display:block}
 body.court-active .court-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:650px){
 body.court-active .court-size-toolbar{grid-template-columns:minmax(0,1fr) 62px 38px;grid-template-rows:34px 38px;gap:4px!important}
 body.court-active #extent-select{grid-column:1;grid-row:1;height:34px;min-height:34px!important;font-size:11px;padding:3px}
 body.court-active .court-size-toolbar #officials-select{grid-column:2;grid-row:1;height:34px;min-height:34px!important;padding:3px}
 body.court-active .court-size-toolbar #scene-select{grid-column:1/3;grid-row:2;height:38px}
 body.court-active #court-focus{grid-column:3;grid-row:1/3;align-self:start}
 body.court-active .court-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.court-active #note-scene-short{grid-column:auto}
}
@media (orientation:landscape) and (max-height:380px){
 body.court-active .court-size-toolbar{grid-template-rows:30px 30px}
 body.court-active #extent-select,body.court-active .court-size-toolbar #officials-select,body.court-active .court-size-toolbar #scene-select{height:30px;min-height:30px!important}
}

/* Landscape normal mode uses the same page chrome as practice and notes. */
@media (orientation:landscape) and (max-height:650px){
 body.court-active:not(.court-focus) .topbar{display:flex!important}
 body.court-active:not(.court-focus) main{max-width:1500px;padding:0 22px 24px!important}
 body.court-active:not(.court-focus) .main-tabs{display:flex!important;height:73px;gap:34px;margin:0}
 body.court-active:not(.court-focus) .main-tabs button{min-height:44px;padding:0 4px;font-size:14px}
 body.court-active:not(.court-focus) #page-court>.page-heading{display:flex!important;padding:27px 0 23px}
 body.court-active:not(.court-focus) .studio-layout{display:block}
}
@media (orientation:landscape) and (max-width:760px){
 body.court-active:not(.court-focus) .main-tabs{height:62px;gap:8px}
 body.court-active:not(.court-focus) .main-tabs button{font-size:13px}
 body.court-active:not(.court-focus) #page-court>.page-heading{padding:21px 0 17px}
}
@media (orientation:portrait){
 body.court-active #draw-pen{grid-column:1;grid-row:2}
 body.court-active #note-scene-short{grid-column:2;grid-row:2;font-size:11px}
}

/* In landscape, scroll past the standard header to the same workspace as expansion. */
@media (orientation:landscape) and (max-height:650px){
 body.court-active:not(.court-focus) .court-column{height:100dvh;box-sizing:border-box;padding:calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));scroll-margin-top:0}
 body.court-active:not(.court-focus) .court-size-toolbar,body.court-active:not(.court-focus) .court-toolbar{margin:0!important}
}
/* Compact rotation controls and the selected actor in the center of the pad. */
.court-bottom-controls .rotation-buttons{justify-content:center;gap:8px}
.court-bottom-controls .rotation-buttons output{min-width:40px;text-align:center}
.court-bottom-controls .pad-center{display:flex;align-items:center;justify-content:center;margin:2px}
.court-bottom-controls .pad-center #controller-target{color:#173E37;font-size:clamp(12px,3vw,20px);line-height:1;font-weight:700;text-align:center;pointer-events:none}

@media (orientation:portrait){
 body.court-active:not(.court-focus) #court-stage,body.court-active:not(.court-focus) #court-stage.eye-view{height:var(--court-available-height,40dvh)!important;min-height:0!important;aspect-ratio:auto!important}
}

/* Keep ordinary landscape navigation and the complete workspace in one viewport. */
@media (orientation:landscape) and (max-height:650px){
 body:not(.court-focus) .topbar{height:40px;min-height:40px;padding:3px max(12px,env(safe-area-inset-right)) 3px max(12px,env(safe-area-inset-left));gap:12px}
 body:not(.court-focus) .brand{font-size:18px;gap:6px}
 body:not(.court-focus) .brand-icon{width:28px;height:28px}
 body:not(.court-focus) .brand-wordmark{gap:0}
 body:not(.court-focus) .brand-wordmark small{font-size:8px}
 body:not(.court-focus) .header-note{font-size:11px}
 body:not(.court-focus) .demo-tag{font-size:9px;padding:2px 5px}
 body:not(.court-focus) #header-actions .icon-btn,body:not(.court-focus) #header-actions #app-refresh,body:not(.court-focus) #header-actions #help-button{width:32px;min-width:32px;height:32px;min-height:32px;padding:4px}
 body:not(.court-focus) .main-tabs,body.court-active:not(.court-focus) .main-tabs{height:32px;min-height:32px;gap:20px;margin:0}
 body:not(.court-focus) .main-tabs button,body.court-active:not(.court-focus) .main-tabs button{height:32px;min-height:32px;padding:0 4px;font-size:12px}
 body:not(.court-focus) .main-tabs button span{font-size:15px;margin-right:5px}
 body.court-active:not(.court-focus) main{max-width:none;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))!important}
 body.court-active:not(.court-focus) #page-court>.page-heading{height:26px;min-height:26px;padding:2px 0;gap:8px}
 body.court-active:not(.court-focus) #page-court>.page-heading .eyebrow{display:none}
 body.court-active:not(.court-focus) #page-court h1{font-size:16px;line-height:20px}
 body.court-active:not(.court-focus) #reset-court{font-size:11px;padding:0;line-height:20px}
 body.court-active:not(.court-focus) .court-column{height:var(--landscape-available-height,calc(100dvh - 104px - env(safe-area-inset-bottom)))!important;padding:0;grid-template-columns:minmax(0,1fr) clamp(204px,27vw,250px);grid-template-rows:60px auto minmax(0,1fr);gap:4px 8px!important}
 body.court-active:not(.court-focus) .court-size-toolbar{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr) 62px 32px;grid-template-rows:28px 28px;gap:4px!important;justify-content:stretch}
 body.court-active:not(.court-focus) #extent-select,body.court-active:not(.court-focus) .court-size-toolbar #officials-select,body.court-active:not(.court-focus) .court-size-toolbar #scene-select{grid-row:1;height:28px;min-height:28px!important;font-size:11px}
 body.court-active:not(.court-focus) .court-size-toolbar #scene-select{grid-column:1/3;grid-row:2;height:28px}
 body.court-active:not(.court-focus) #court-focus{grid-column:3;grid-row:1/3;align-self:start;height:32px;min-height:32px;width:32px;min-width:32px;padding:4px}
 body.court-active:not(.court-focus) #court-stage,body.court-active:not(.court-focus) #court-stage.eye-view{grid-row:1/-1}
 body.court-active:not(.court-focus) .court-toolbar .segmented button{height:26px;min-height:26px;font-size:11px}
 body.court-active:not(.court-focus) #save-image{height:32px;min-height:32px;width:32px;min-width:32px;padding:4px}
 body.court-active:not(.court-focus) .court-tools button{height:28px;min-height:28px!important;font-size:11px}
 body.court-active:not(.court-focus) .court-bottom-controls{gap:4px!important}
 body.court-active:not(.court-focus) .court-bottom-controls .actor-controller{grid-template-columns:84px minmax(0,1fr);gap:3px 4px}
 body.court-active:not(.court-focus) .court-bottom-controls .direction-pad{width:84px;height:84px;grid-template-columns:repeat(3,27px);grid-template-rows:repeat(3,27px);padding:1px}
 body.court-active:not(.court-focus) .court-bottom-controls .direction-pad button{height:27px;min-height:27px;padding:3px}
 body.court-active:not(.court-focus) .direction-pad svg{width:20px;height:20px}
 body.court-active:not(.court-focus) .quick-ref-selector button{height:30px;min-height:30px;width:30px;min-width:30px;font-size:13px}
 body.court-active:not(.court-focus) .rotation-buttons{gap:3px}
 body.court-active:not(.court-focus) .rotation-buttons button{height:30px;min-height:30px;width:28px;min-width:28px;padding:3px}
 body.court-active:not(.court-focus) .rotation-buttons output{min-width:30px;font-size:11px}
}

@media (orientation:portrait){
 body:not(.court-focus) .topbar,body.court-active:not(.court-focus) .topbar{height:48px;min-height:48px;padding:3px 12px;gap:8px}
 body:not(.court-focus) .main-tabs,body.court-active:not(.court-focus) .main-tabs{height:38px;min-height:38px}
 body:not(.court-focus) .main-tabs button,body.court-active:not(.court-focus) .main-tabs button{min-height:34px;font-size:13px}
}
@media (orientation:landscape) and (max-height:650px){
 /* Drawing adds undo/clear; a single row of views reserves their height. */
 body.court-active:not(.court-focus) .court-column:has(#pen-actions:not([hidden])) .court-toolbar .segmented{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.court-active:not(.court-focus) .court-column:has(#pen-actions:not([hidden])) .court-toolbar .segmented:has(button[data-view="C"]:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))}
 body.court-active:not(.court-focus) .court-column:has(#pen-actions:not([hidden])) .court-toolbar .segmented button{height:24px;min-height:24px;font-size:10px;padding:1px!important}
 body.court-active:not(.court-focus) .court-column:has(#pen-actions:not([hidden])) #save-image{height:28px;min-height:28px}
}

@media (orientation:landscape) and (max-height:650px){
 body.court-active:not(.court-focus) #page-court{position:relative}
 body.court-active:not(.court-focus) #page-court>.page-heading{display:contents!important}
 body.court-active:not(.court-focus) #page-court>.page-heading>div{display:none}
 body.court-active:not(.court-focus) #reset-court{position:absolute;right:0;top:-28px;height:24px;z-index:1}
}

/* Tall landscape viewports (including iPad): the same left court/right controls
   workspace as phones, with tablet sized targets and ordinary navigation. */
@media (orientation:landscape) and (min-width:768px) and (min-height:651px){
 body.court-active:not(.court-focus) .topbar{height:52px;min-height:52px;padding:4px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))}
 body.court-active:not(.court-focus) .brand{font-size:22px}
 body.court-active:not(.court-focus) .brand-icon{width:34px;height:34px}
 body.court-active:not(.court-focus) .brand-wordmark small{font-size:10px}
 body.court-active:not(.court-focus) .main-tabs{height:44px;min-height:44px;margin:0;gap:24px}
 body.court-active:not(.court-focus) .main-tabs button{height:44px;min-height:44px;padding:0 8px;font-size:15px}
 body.court-active:not(.court-focus) main{max-width:none;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))!important}
 body.court-active:not(.court-focus) #page-court>.page-heading{display:flex!important;height:36px;min-height:36px;padding:4px 0}
 body.court-active:not(.court-focus) #page-court>.page-heading .eyebrow{display:none}
 body.court-active:not(.court-focus) #page-court h1{font-size:20px;line-height:28px}
 body.court-active .studio-layout{display:block}
 body.court-active .court-column{--tablet-workspace-height:var(--landscape-available-height,calc(100dvh - 138px));display:grid!important;grid-template-columns:minmax(0,7fr) minmax(270px,3fr);grid-template-rows:92px auto minmax(0,1fr);gap:8px 12px!important;box-sizing:border-box;min-height:0;overflow:hidden}
 body.court-active:not(.court-focus) .court-column{height:var(--landscape-available-height,calc(100dvh - 138px))!important;padding:0}
 body.court-focus .court-column{--tablet-workspace-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);height:100dvh!important}
 body.court-active .court-size-toolbar{display:grid!important;grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr) 70px 48px;grid-template-rows:44px 44px;gap:4px!important;margin:0!important}
 body.court-active #extent-select{grid-column:1;grid-row:1}
 body.court-active .court-size-toolbar #officials-select{grid-column:2;grid-row:1}
 body.court-active .court-size-toolbar #scene-select{grid-column:1/3;grid-row:2;width:100%;max-width:none}
 body.court-active #extent-select,body.court-active #officials-select,body.court-active #scene-select{height:44px;min-height:44px!important;font-size:14px;padding:6px}
 body.court-active #court-focus{grid-column:3;grid-row:1/3;align-self:start}
 body.court-active #court-focus,body.court-active #save-image{width:48px;min-width:48px;height:48px;min-height:48px;padding:8px}
 body.court-active .court-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) 48px;grid-column:2;grid-row:2;gap:6px;margin:0!important;align-items:start}
 body.court-active .court-toolbar .segmented{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;gap:2px;width:100%;min-width:0}
 body.court-active .court-toolbar .segmented:has([data-view="C"]:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
 body.court-active .court-toolbar .segmented button{min-width:0;height:44px;min-height:44px;padding:4px!important;font-size:14px}
 body.court-active #court-stage,body.court-active #court-stage.eye-view{grid-column:1;grid-row:1/-1;height:100%!important;min-height:0!important;width:100%;max-width:none!important;aspect-ratio:auto!important;align-self:stretch}
 body.court-active .court-bottom-controls{display:flex!important;flex-direction:column;grid-column:2;grid-row:3;align-items:stretch;justify-content:flex-start;position:static!important;margin:0!important;padding:0!important;min-height:0!important;gap:8px!important}
 body.court-active .court-bottom-left{width:100%}
 body.court-active .court-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0!important}
 body.court-active .court-tools button{height:44px;min-height:44px!important;width:100%;padding:5px!important;font-size:14px;white-space:nowrap}
 body.court-active #note-scene-short{grid-column:auto}
 body.court-active #pen-actions{grid-column:1/-1}
 body.court-active .court-bottom-controls .actor-controller{position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;align-items:center;width:100%;max-width:none;margin:0!important;gap:6px}
 body.court-active .court-bottom-controls .actor-controller[hidden]{display:none!important}
 body.court-active .court-bottom-controls .controller-label{grid-column:1;grid-row:1;display:flex;justify-content:center;padding:0;background:none}
 body.court-active .quick-ref-selector button{width:48px;min-width:48px;height:44px;min-height:44px;font-size:18px;padding:5px}
 body.court-active .court-bottom-controls .direction-pad{grid-column:1;grid-row:2;width:clamp(100px,calc(var(--tablet-workspace-height) - 410px),240px);height:clamp(100px,calc(var(--tablet-workspace-height) - 410px),240px);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));padding:4px}
 body.court-active .court-bottom-controls .direction-pad button{min-width:0;min-height:0!important;width:100%;height:100%;padding:6px}
 body.court-active .direction-pad svg{width:30px;height:30px}
 body.court-active .court-bottom-controls .rotation-controls{grid-column:1;grid-row:3;width:auto;margin:0}
 body.court-active .rotation-buttons{justify-content:center;gap:8px}
 body.court-active .rotation-buttons button{width:44px;min-width:44px;height:44px;min-height:44px;padding:8px}
 body.court-active .rotation-buttons output{min-width:48px;font-size:15px}
 body.court-active .canvas-badge{top:8px;left:8px;font-size:12px}
 body.court-active .court-legend{left:8px;right:8px;bottom:8px;font-size:12px;padding:6px;gap:12px;flex-wrap:wrap}
}
@media (orientation:portrait) and (min-width:768px){
 body.court-active:not(.court-focus) main{max-width:none;padding:0 16px 8px}
 body.court-active .studio-layout{display:block}
 body.court-active .court-size-toolbar{grid-template-columns:minmax(130px,.8fr) 80px minmax(0,1.6fr) 48px;grid-template-rows:48px}
 body.court-active #extent-select,body.court-active #officials-select,body.court-active .court-size-toolbar #scene-select{height:44px;min-height:44px!important;font-size:15px}
 body.court-active .court-toolbar .segmented{flex:1;justify-content:space-around}
 body.court-active .court-toolbar .segmented button{height:44px;min-height:44px;font-size:15px}
 body.court-active .court-bottom-controls{--pad-size:clamp(220px,32vw,280px);gap:8px 16px!important}
 body.court-active .court-tools button{height:48px;min-height:48px!important;font-size:15px}
 body.court-active .quick-ref-selector button{width:48px;min-width:48px;height:44px;min-height:44px;font-size:18px}
 body.court-active .rotation-buttons button{width:44px;min-width:44px;height:44px;min-height:44px}
}

/* Tablet controls share the phone's upper/lower corner arrangement. */
@media (min-width:768px) and (min-height:651px){
 body.court-active .court-bottom-controls .actor-controller{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%;max-width:none!important;height:var(--tablet-pad-size,300px);min-height:0;
  flex-shrink:0;margin:0!important;padding:0;
 }
 body.court-active .court-bottom-controls .controller-label,
 body.court-active .quick-ref-selector,
 body.court-active .court-bottom-controls .rotation-controls,
 body.court-active .rotation-buttons{display:contents!important}
 body.court-active .quick-ref-selector button{
  position:absolute;top:0;transform:none;width:36px;min-width:36px;height:36px;min-height:36px;
  padding:4px;font-size:14px;
 }
 body.court-active .quick-ref-selector button[data-ref="L"]{left:0}
 body.court-active .quick-ref-selector button[data-ref="T"],
 body.court-active .quick-ref-selector button[data-ref="C"]{right:0}
 body.court-active .quick-ref-selector button[data-ref="C"]{top:calc(var(--tablet-pad-size,300px) / 2);transform:translateY(-50%)}
 body.court-active .court-bottom-controls .direction-pad{
  position:absolute;left:50%;top:0;transform:translateX(-50%);grid-area:auto;margin:0;
  width:var(--tablet-pad-size,300px);height:var(--tablet-pad-size,300px);
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));padding:4px;
 }
 body.court-active .court-bottom-controls .direction-pad button{
  width:100%;height:100%;min-width:0;min-height:0!important;padding:6px;
 }
 body.court-active .rotation-buttons button{
  position:absolute;bottom:0;width:44px;min-width:44px;height:44px;min-height:44px;padding:8px;
 }
 body.court-active .rotation-buttons button[data-rotate="-5"]{left:0}
 body.court-active .rotation-buttons button[data-rotate="5"]{right:0}
}
@media (orientation:landscape) and (min-width:768px) and (min-height:651px){
 body.court-active .court-column{
  grid-template-columns:minmax(0,1fr) var(--tablet-panel-width,336px);
  grid-template-rows:92px 96px minmax(0,1fr);
 }
 body.court-active .court-bottom-controls .actor-controller{grid-column:auto;grid-row:auto}
}
@media (orientation:portrait) and (min-width:768px){
 body.court-active .court-bottom-controls{
  --tablet-pad-size:clamp(204px,34vw,306px);
  display:grid!important;grid-template-columns:minmax(0,1fr) calc(var(--tablet-pad-size) + 96px);
  grid-template-rows:auto;gap:8px 16px!important;align-items:start;
 }
 body.court-active .court-bottom-left{grid-column:1;grid-row:1;width:100%}
 body.court-active .court-tools{grid-template-columns:minmax(0,1fr);gap:6px}
 body.court-active .court-tools #show-areas,
 body.court-active .court-tools #show-fov,
 body.court-active .court-tools #draw-pen,
 body.court-active .court-tools #note-scene-short{grid-column:1;grid-row:auto;font-size:15px}
 body.court-active .court-bottom-controls .actor-controller{grid-column:2;grid-row:1}
 body.court-active .court-bottom-controls:has(.actor-controller[hidden]){grid-template-columns:minmax(0,1fr)}
}

/* Phone workspace sizing uses its measured viewport, not accumulated legacy heights. */
body.court-focus .court-column{height:var(--workspace-viewport-height,100dvh)!important}
body.court-focus .quick-ref-selector button.active,
body.court-focus .quick-ref-selector button[aria-pressed="true"]{
 background:#fff1ce;color:#14263b;border:2px solid #d7b878;box-shadow:0 0 0 2px #fff1ce33;
}
body.court-focus .court-size-toolbar #scene-select{
 background:#f8fafc;color:#14263b;border-color:#8c9db3;color-scheme:light;
}
@media (orientation:portrait) and (max-width:767px){
 body.court-active .court-bottom-controls{--pad-size:clamp(157px,46.92vw,220px)}
 body.court-active .quick-ref-selector button,
 body.court-active .rotation-buttons button{width:44px;min-width:44px;height:44px;min-height:44px;padding:6px}
 body.court-active .quick-ref-selector button{font-size:14px}
}
@media (orientation:portrait) and (max-width:380px){
 body.court-active .court-tools button{font-size:11px;white-space:normal;padding:2px!important;line-height:1.2}
}
@media (orientation:landscape) and (max-height:650px){
 body.court-active .court-column,
 body.court-active:not(.court-focus) .court-column{
  grid-template-columns:minmax(0,1fr) var(--phone-panel-width,249px);
  grid-template-rows:var(--phone-toolbar-height,64px) var(--phone-view-height,56px) minmax(0,1fr);
  gap:3px 8px!important;align-content:stretch;
 }
 body.court-active:not(.court-focus) .court-column{
  height:var(--landscape-available-height,calc(100dvh - 78px - env(safe-area-inset-bottom)))!important;
 }
 body.court-active .court-size-toolbar,
 body.court-active:not(.court-focus) .court-size-toolbar{
  grid-template-columns:minmax(0,1fr) 58px 44px;grid-template-rows:32px 32px;gap:4px!important;
 }
 body.court-active #extent-select,
 body.court-active .court-size-toolbar #officials-select,
 body.court-active .court-size-toolbar #scene-select,
 body.court-active:not(.court-focus) .court-size-toolbar #scene-select{
  height:32px;min-height:32px!important;font-size:12px;
 }
 body.court-active #court-focus,
 body.court-active:not(.court-focus) #court-focus{
  grid-column:3;grid-row:1/3;width:44px;min-width:44px;height:44px;min-height:44px;padding:7px;
 }
 body.court-active .court-toolbar{display:flex;gap:4px;align-items:start}
 body.court-active .court-toolbar .segmented{flex:1;padding:2px;gap:0;align-self:start}
 body.court-active .court-toolbar .segmented button,
 body.court-active:not(.court-focus) .court-toolbar .segmented button{
  height:32px;min-height:32px;font-size:12px;padding:3px!important;
 }
 body.court-active #save-image,
 body.court-active:not(.court-focus) #save-image{
  width:40px;min-width:40px;height:36px;min-height:36px;padding:6px;
 }
 body.court-active #court-stage,body.court-active #court-stage.eye-view{
  grid-column:1;grid-row:1/-1;height:100%!important;min-height:0!important;max-height:none;
  align-self:stretch;box-sizing:border-box;
 }
 body.court-active .court-bottom-controls,
 body.court-active:not(.court-focus) .court-bottom-controls{gap:3px!important;align-items:stretch;overflow:visible}
 body.court-active .court-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 body.court-active .court-tools button,
 body.court-active:not(.court-focus) .court-tools button{
  height:34px;min-height:34px!important;padding:3px!important;font-size:12px;
 }
 body.court-focus .court-tools button{height:36px;min-height:36px!important}
 body.court-active .court-tools #pen-actions button{height:34px;min-height:34px!important}
 body.court-active .court-bottom-controls .actor-controller,
 body.court-active:not(.court-focus) .court-bottom-controls .actor-controller{
  position:relative!important;inset:auto!important;display:block!important;width:100%;flex-shrink:0;
  height:var(--phone-pad-size,149px);min-height:0;
 }
 body.court-active .court-bottom-controls .controller-label,
 body.court-active .quick-ref-selector{display:contents!important}
 body.court-active .quick-ref-selector button,
 body.court-active .quick-ref-selector:has(button[data-ref="C"]:not([hidden])) button,
 body.court-active:not(.court-focus) .quick-ref-selector button{
  position:absolute;top:0;transform:none;
  width:32px;min-width:32px;height:32px;min-height:32px;font-size:13px;padding:4px;
 }
 body.court-active:not(.court-focus) .quick-ref-selector button{font-size:13px}
 body.court-active .quick-ref-selector button[data-ref="L"]{left:0}
 body.court-active .quick-ref-selector button[data-ref="T"],
 body.court-active .quick-ref-selector button[data-ref="C"]{right:0}
 body.court-active .quick-ref-selector button[data-ref="C"]{top:calc(var(--phone-pad-size,149px) / 2);transform:translateY(-50%)}
 body.court-active .quick-ref-selector:has(button[data-ref="C"]:not([hidden])) button[data-ref="T"]{top:0;transform:none}
 body.court-active .court-bottom-controls .direction-pad,
 body.court-active:not(.court-focus) .court-bottom-controls .direction-pad{
  position:absolute;left:50%;top:0;transform:translateX(-50%);margin:0;
  grid-area:auto;width:var(--phone-pad-size,149px);height:var(--phone-pad-size,149px);
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));padding:3px;
 }
 body.court-active .court-bottom-controls .direction-pad button,
 body.court-active:not(.court-focus) .court-bottom-controls .direction-pad button{
  width:100%;height:100%;min-width:0;min-height:0!important;padding:3px;
 }
 body.court-active .direction-pad svg,body.court-active:not(.court-focus) .direction-pad svg{width:24px;height:24px}
 body.court-active .court-bottom-controls .rotation-controls{display:contents!important}
 body.court-active .rotation-buttons,
 body.court-active:not(.court-focus) .rotation-buttons{display:contents!important}
 body.court-active .rotation-buttons button,
 body.court-active:not(.court-focus) .rotation-buttons button{
  position:absolute;bottom:0;
  width:var(--phone-controller-button-size,44px);min-width:var(--phone-controller-button-size,44px);
  height:var(--phone-controller-button-size,44px);min-height:var(--phone-controller-button-size,44px);padding:7px;
 }
 body.court-active .rotation-buttons button[data-rotate="-5"]{left:0}
 body.court-active .rotation-buttons button[data-rotate="5"]{right:0}
 body.court-active .rotation-buttons output,
 body.court-active:not(.court-focus) .rotation-buttons output{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  min-width:36px;height:18px;line-height:18px;font-size:12px;text-align:center;
 }
 /* Short Safari viewports change the row arrangement before shrinking controls. */
 body.court-active .court-column:is([data-phone-density="1"],[data-phone-density="2"],[data-phone-density="3"]) .court-toolbar .segmented{
  grid-template-columns:repeat(4,minmax(0,1fr));
 }
 body.court-active .court-column:is([data-phone-density="1"],[data-phone-density="2"],[data-phone-density="3"]) .court-toolbar .segmented:has(button[data-view="C"]:not([hidden])){
  grid-template-columns:repeat(5,minmax(0,1fr));
 }
 body.court-active .court-column:is([data-phone-density="2"],[data-phone-density="3"]) .court-tools{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.court-active .court-column:is([data-phone-density="2"],[data-phone-density="3"]) .court-tools>button{height:38px;min-height:38px!important;font-size:11px;white-space:normal;line-height:1.15}
 body.court-active .court-column[data-phone-density="3"] .court-size-toolbar{
  grid-template-columns:54px 48px minmax(0,1fr) 44px;grid-template-rows:36px;gap:3px!important;
 }
 body.court-active .court-column[data-phone-density="3"] .court-size-toolbar #extent-select{grid-column:1;grid-row:1}
 body.court-active .court-column[data-phone-density="3"] .court-size-toolbar #officials-select{grid-column:2;grid-row:1}
 body.court-active .court-column[data-phone-density="3"] .court-size-toolbar #scene-select{grid-column:3;grid-row:1;font-size:11px}
 body.court-active .court-column[data-phone-density="3"] #court-focus{grid-column:4;grid-row:1;height:36px;min-height:36px}
}