.training-panel{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);width:min(860px,calc(100% - 48px));z-index:5;background:#f4f2e9f5;color:#293b32;border:1px solid #b9c6b4;border-radius:8px;box-shadow:0 8px 35px #13231c44;padding:14px 18px}
.training-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.training-top p{margin:0;font-size:10px;letter-spacing:.16em}.training-top button{font-size:11px;background:none;border:0;text-decoration:underline;color:#425b4a;min-height:32px}
.training-stations{display:flex;gap:6px}.training-stations button{flex:1;min-height:44px;border:1px solid #c4cebd;border-radius:4px;background:#ebece2;color:#405342;font-size:12px}.training-stations button[aria-pressed=true]{background:#2d4939;color:#f3f3e6;border-color:#2d4939}
.training-body{display:grid;grid-template-columns:1fr 1.4fr;gap:25px;padding:14px 0 12px}.training-body h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;line-height:1;margin:0 0 8px;font-weight:600}.training-body p{margin:0;font-size:12px;line-height:1.6}.training-body strong{display:block;margin-bottom:4px;font-size:12px}.training-body span{display:block;color:#52634f;font-size:12px}
.training-footer{display:flex;align-items:center;gap:8px;border-top:1px solid #ced3c5;padding-top:9px}.training-footer>span{margin-right:auto;font-size:10px;letter-spacing:.03em;color:#59694f}.training-footer button{background:#e4e8da;color:#334731;border:1px solid #bcc7b5;border-radius:4px;min-height:40px;padding:8px 12px;font-size:11px}.training-footer #trainingBuild{background:#2d4939;color:#fff}
.training-show{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);min-height:44px;z-index:5;padding:12px 20px;background:#f4f2e9;border:1px solid #b9c6b4;border-radius:4px;color:#293b32}
body[data-room=theater] :is(.place-caption,.movement-panel){display:none}body[data-room=theater] .scene-shade{inset:75% 0 0}body[data-workspace] :is(.training-panel,.training-show){display:none}
@media(max-width:700px){.training-panel{bottom:44px;width:calc(100% - 20px);padding:10px 12px}.training-top{margin-bottom:4px}.training-top p{font-size:8px}.training-top button{font-size:10px}.training-stations{gap:4px}.training-stations button{font-size:10px;padding:5px}.training-body{gap:12px;padding:10px 0;grid-template-columns:1fr}.training-body h2{font-size:22px;margin-bottom:4px}.training-body>div:first-child p{display:none}.training-body p,.training-body span{font-size:11px;line-height:1.45}.training-body strong{font-size:11px}.training-footer{flex-wrap:wrap;gap:5px}.training-footer>span{width:100%;font-size:9px}.training-footer button{flex:1;min-height:40px;padding:6px 8px;font-size:10px}.training-show{bottom:48px}}
@media(max-height:620px) and (min-width:701px){.training-panel{left:auto;right:16px;top:14px;bottom:auto;transform:none;width:330px;padding:10px 12px}.training-body{grid-template-columns:1fr;gap:8px;padding:10px 0}.training-body h2{font-size:23px}.training-body>div:first-child p{display:none}.training-stations button{font-size:10px}.training-footer{flex-wrap:wrap}.training-footer>span{width:100%}.training-footer button{flex:1;font-size:10px;padding:6px;min-height:38px}body[data-room=theater] .view-tools{right:365px}.training-top p{font-size:8px}}
/* Keep both people visible above the controls on narrow screens. */
@media(max-width:700px){body[data-room=theater] #facilityCanvas{height:calc(100% - 300px);min-height:200px}body[data-room=theater] #facilityStage{background:#d3d6ca}body[data-room=theater] .training-panel{bottom:44px}body[data-room=theater] .travel-feedback{font-size:9px;min-height:36px;padding:5px 8px}}
@media(max-height:620px) and (min-width:701px){body[data-room=theater] #facilityCanvas{width:calc(100% - 350px)}body[data-room=theater] #facilityStage{background:#d3d6ca}}

/* Reserve the measured control height so it never covers the teaching surface. */
body[data-room=theater] #facilityCanvas{height:calc(100% - var(--training-panel-height,270px) - 66px);min-height:160px}
body[data-room=theater]:has(#trainingPanel[hidden]) #facilityCanvas{height:100%;width:100%}
body[data-room=theater] #facilityStage{background:#cdd2c5}
@media(max-width:700px){body[data-room=theater] #facilityCanvas{height:calc(100% - var(--training-panel-height,290px) - 54px);min-height:160px}}
@media(max-height:620px) and (min-width:701px){body[data-room=theater] #facilityCanvas{height:100%;width:calc(100% - 350px)}}