/* The registered body projection and explicitly named detail use one canvas. */
#context-detail{position:absolute;right:12px;top:108px;width:220px;height:220px;border:1px solid #9cc5bf;border-radius:5px;z-index:2;pointer-events:none;color:#dce6df;background:linear-gradient(to bottom,#193028 0,#193028 44px,transparent 44px);overflow:hidden}
#context-detail strong,#context-detail span{display:block;padding:4px 8px;font-size:12px;line-height:16px}
#context-detail span{font-size:10px;padding-top:0}
#context-registration-note{position:absolute;left:12px;right:12px;bottom:108px;margin:0;font-size:11px;line-height:1.4;color:#dce6df;background:#193028ef;padding:6px 8px;border-radius:4px;pointer-events:none;z-index:2}
#context-zoom-out{position:absolute;top:60px;right:12px;min-height:44px;min-width:44px;padding:6px 12px;font-size:12px;z-index:3}
.viewport-dock{display:flex;align-items:center;gap:6px;padding:6px;bottom:34px}
.viewport-dock #simple-comparison{flex:1;min-width:0}
.viewport-dock #simple-view-options{margin:0;padding:0;border:0;flex:0 0 70px}
#simple-view-options>summary{font-size:0;width:70px;min-height:48px}
#simple-view-options>summary::after{content:'View';font-size:13px}
.viewport-dock .compare button{font-size:14px;padding:6px 4px}
#structure-label{max-width:190px;font-size:11px;padding:5px 8px}
.simple-grade-explanation{position:absolute;left:6px;right:6px;bottom:calc(100% + 6px);margin:0;min-height:0;padding:5px 8px;background:#193028ef;color:#dce6df;font-size:11px;line-height:1.4}
#simple-patella-grades{flex:1;gap:3px}
#simple-patella-grades button{min-width:44px;min-height:44px;font-size:11px}
@media(max-width:850px){#context-detail{width:174px;height:184px;right:8px;top:108px}#context-registration-note{bottom:103px;font-size:10px}#structure-label{max-width:130px}.viewport-dock .compare button{font-size:13px}}

#thickness-comparison-controls.context-section-control{position:absolute;right:12px;top:336px;width:220px;z-index:3;margin:0}
.context-section-control button{width:100%;min-height:44px;font-size:12px}
@media(max-width:850px){#thickness-comparison-controls.context-section-control{right:8px;top:300px;width:174px}}

/* Phone prose belongs below the manipulation canvas, never over tissue. */
#phone-model-notes{margin:0 0 12px;border:1px solid #cadad4;border-radius:5px;background:#f5f8f4;color:#225a50;padding:0 12px;grid-column:1/-1}
#phone-model-notes>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:14px}
#phone-model-notes p{position:static!important;max-width:none!important;width:auto!important;margin:8px 0!important;padding:0!important;background:transparent!important;color:#225a50!important;font-size:13px!important;line-height:1.5!important}
@media(max-width:850px){#context-detail-source{display:none!important}.scene-heading{max-height:44px;overflow:hidden}#structure-label{max-height:42px;overflow:auto}#selection-leader,#lesion-marker{pointer-events:none}.viewport-dock #simple-view-options[open]{flex-basis:100%}.viewport-dock:has(#simple-view-options[open]){flex-wrap:wrap}.simple-view-content{position:static;width:auto;max-height:145px;padding:6px;margin-top:4px}#simple-view-options[open]>summary{height:44px}#simple-view-options[open]>summary::after{content:'Close view'}#thickness-comparison-controls.context-section-control{top:300px}}



@media(max-width:850px){
 .viewport-dock:has(#simple-view-options[open]){flex-wrap:nowrap;padding-bottom:110px}
 .viewport-dock #simple-view-options[open]{flex-basis:70px}
 .simple-view-content{position:absolute;left:6px;right:6px;bottom:6px;top:auto;width:auto;max-height:none;overflow:visible;border:0;padding:0;margin:0;display:block;background:transparent}
 .simple-view-content>.view-presets{display:flex;flex-wrap:nowrap;gap:4px}
 .simple-view-content>.view-presets button{flex:1;padding:4px;font-size:11px}
 .simple-view-content>.transparency-control{margin:4px 0 0;min-height:44px;font-size:10px;align-items:center}
 .simple-view-content>.transparency-control input{min-width:40px}
 #phone-secondary-options{grid-column:1/-1;margin:0 0 12px;border:1px solid #cadad4;border-radius:5px;background:#f5f8f4;padding:0 12px;color:#225a50}
 #phone-secondary-options>summary{display:flex;align-items:center;min-height:44px;font-size:14px;cursor:pointer}
 #phone-secondary-options button,#phone-secondary-options select{min-height:44px;min-width:44px}
 #phone-secondary-options .camera-controls{position:static;display:flex;flex-wrap:wrap;max-width:none}
 #phone-secondary-options .view-presets{display:flex;flex-wrap:wrap;gap:4px}
}

#phone-compact-presets{display:none}
@media(max-width:850px){.simple-view-content>.view-presets:has(#skeleton-preset){display:none}#phone-compact-presets{display:flex;gap:6px}#phone-compact-presets label{flex:1;min-width:0;font-size:10px}#phone-compact-presets select{display:block;width:100%;min-height:44px;font-size:12px;padding:2px}#phone-frame-label{display:none}body:has(#ankle-view-options:not([hidden])) #phone-frame-label{display:block}.viewport-dock:has(#simple-view-options[open]){padding-bottom:124px}}
@media(max-width:850px){#structure-label{max-height:none;overflow:visible}}

/* Bounded patient-flow experiment: one condition list and one off-image details section. */
header{height:62px}main{padding-top:0}.intro{padding:12px 0!important;margin:0!important;display:block}.intro h1{font-size:26px!important;margin:0 0 6px!important;line-height:1.15}.intro .eyebrow{display:none}.intro>p{font-size:13px;margin:0!important}.simple-chooser{margin:8px 0!important;display:block}.simple-chooser>label[hidden]{display:none!important}.workspace{height:auto!important;grid-template-columns:minmax(0,1fr) 280px;align-items:start}.viewport{height:min(620px,calc(100dvh - 240px))!important;min-height:480px}.workspace #patient-conditions{height:100%;max-height:620px;overflow-y:auto;padding:16px;background:#f5f8f4}.workspace #patient-conditions h2{font-size:20px;margin:0 0 8px}#patient-conditions>p{font-size:12px;line-height:1.45;margin:0 0 12px}#patient-conditions .model-button{min-height:44px;font-size:14px;margin:5px 0}#patient-conditions #visual-details>summary{display:none}#patient-conditions .small-note{display:none}#patient-conditions #visual-details{margin:0}.simple-view-content>.view-presets:has(#skeleton-preset){display:none}#phone-compact-presets{display:flex;gap:6px}#phone-compact-presets label{flex:1;min-width:0;display:block;font-size:10px}#phone-compact-presets select{display:block;width:100%;min-height:44px;font-size:12px}#phone-frame-label{display:none}body:has(#ankle-view-options:not([hidden])) #phone-frame-label{display:block}.viewport-dock:has(#simple-view-options[open]){flex-wrap:nowrap;padding-bottom:124px}.viewport-dock #simple-view-options[open]{flex-basis:70px}.simple-view-content{position:absolute;left:6px;right:6px;bottom:6px;width:auto;max-height:none;overflow:visible;border:0;padding:0;margin:0;background:transparent}#phone-model-notes,#phone-secondary-options{border:0;padding:0;margin:0}#phone-secondary-options .camera-controls{position:static}#context-registration-note,.simple-grade-explanation{position:static!important;background:transparent!important;color:#225a50!important}.simple-return{top:58px}#atlas-details{margin:10px 0}.simple-model-caption{margin:8px 0!important}#context-detail{width:150px;height:132px;top:108px}#context-detail strong{font-size:10px;line-height:12px}#context-detail-source{display:none!important}
@media(max-width:850px){header{height:58px}.intro h1{font-size:22px!important}.workspace{display:flex;flex-direction:column}.workspace #patient-conditions{order:-1;width:100%;height:auto;max-height:none;overflow:visible;padding:10px;margin-bottom:8px;border:1px solid #cadad4}.viewport{width:100%;height:560px!important;min-height:0}#patient-conditions #injury-list{display:flex;flex-wrap:wrap;gap:5px}#patient-conditions .model-button{flex:1 1 130px;width:auto;margin:0;padding:8px;font-size:12px}#patient-conditions h2{display:none}#patient-conditions>p{margin:0 0 8px;font-size:11px}#context-detail{width:118px;height:120px;top:108px}}
@media(max-width:420px){.viewport{height:530px!important}}

#context-detail{width:112px!important;height:74px!important;background:linear-gradient(to bottom,#193028 0,#193028 22px,transparent 22px)}#context-detail strong{padding:4px;font-size:10px;line-height:12px}
@media(max-width:850px){.viewport-dock:has(#simple-patella-grades:not([hidden])){gap:2px;padding:3px;left:6px;right:6px}#simple-patella-grades{gap:0;flex-wrap:nowrap}#simple-patella-grades button{min-width:44px;font-size:10px;padding:2px}.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-view-options{flex:0 0 44px}.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-view-options>summary{width:44px}.viewport-dock:has(#simple-patella-grades:not([hidden])):has(#simple-view-options[open]){padding-bottom:124px}}
@media(min-width:0px){#phone-compact-presets #phone-frame-label{display:none}body:has(#ankle-view-options:not([hidden])) #phone-compact-presets #phone-frame-label{display:block}}

#paired-knee-labels{position:absolute;inset:0;pointer-events:none;z-index:5}
#paired-knee-labels span{position:absolute;font-size:11px;color:#173744;background:#e6eae2dd;border-radius:3px;padding:2px 4px}
#paired-knee-zoom{position:absolute;right:8px;display:flex;gap:4px;z-index:8}
#paired-knee-zoom[hidden],#paired-knee-labels[hidden]{display:none}
#paired-knee-zoom button{min-height:44px;min-width:72px;font-size:12px;background:#edf2ed;border:1px solid #93aaa8;border-radius:6px;color:#173744}

#body-muscle-notice{font-size:12px;color:#225a50;margin:8px 0}
#body-muscle-notice[hidden]{display:none}
.viewport:has(#scene[data-body-overview="true"]) .viewport-dock:has(#simple-view-options[open]){padding-bottom:96px}
.viewport:has(#scene[data-body-overview="true"]) .simple-view-content{display:grid;grid-template-columns:1fr;gap:2px}
.viewport:has(#scene[data-body-overview="true"]) #phone-compact-presets label{font-size:0}
.viewport:has(#scene[data-body-overview="true"]) #phone-compact-presets select{font-size:12px;min-height:44px}
.viewport:has(#scene[data-body-overview="true"]) .transparency-control{margin:0!important;min-height:44px}

#body-fit{position:absolute;left:12px;top:58px;min-height:44px;padding:8px 12px;z-index:8;background:#edf2ed;color:#173744;border:1px solid #93aaa8;border-radius:4px}
#body-fit[hidden]{display:none}
.viewport:has(#scene[data-body-mode="true"]) #return-body{display:none}

#body-muscle-notice{position:absolute;left:12px;right:12px;top:12px;z-index:5;max-height:40px;margin:0;padding:4px 6px;font-size:11px;line-height:14px;color:#edf2ed;background:#173744;border-radius:4px;pointer-events:none}

/* Full contextual scenes retain usable anatomy space on phones. */
@media(max-width:850px){.viewport{height:640px!important;min-height:640px!important}}

#clinical-detail-label{position:absolute;z-index:4;font-size:11px;color:#eef6ef;background:#1c352d;padding:3px 6px;pointer-events:none;border-radius:3px}#clinical-detail-label[hidden]{display:none}