/* Mobile imaging layout. Loaded after the shared desktop and learning styles. */
.mobile-focus{display:none}
.build-version{font-size:11px;font-weight:500;letter-spacing:.02em;white-space:nowrap;color:#a9bdca}
.mobile-layout .topbar{gap:8px}
.mobile-layout .topbar .build-version{margin-left:auto;font-size:10px}
.mobile-layout #cap-status:not([hidden]){display:block;font-size:11px;flex-basis:100%}
.mobile-layout main{padding-top:8px}
.mobile-layout .topbar{min-height:44px;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:8px}
.mobile-layout .brand{font-size:16px}
.mobile-layout .brand strong{font-size:16px}
.mobile-layout .brand i{height:20px}
.mobile-layout .toolbar{display:block;margin-bottom:4px}
.mobile-layout .toolbar>div:first-child{display:none}
.mobile-layout .actions{margin:0;gap:6px}
.mobile-layout .actions button{font-size:12px}
.mobile-layout .mobile-nav{padding:6px 0;gap:6px}
.mobile-layout .mobile-view-switch button{font-size:13px}
.mobile-layout .workspace{gap:8px}
.mobile-layout .anatomy,.mobile-layout .ultrasound{display:flex}
.mobile-layout .anatomy .panelhead,.mobile-layout .ultrasound .panelhead{
 min-height:48px;padding:2px 8px;flex-wrap:nowrap;gap:6px;
}
.mobile-layout .anatomy .panelhead h2,.mobile-layout .ultrasound .panelhead h2{
 flex:1 1 auto;font-size:0;line-height:1.25;
}
.mobile-layout .panelhead h2 span{font-size:13px;margin-left:0}
.mobile-layout .anatomy .panel-actions,.mobile-layout .ultrasound .panel-actions{
 width:auto;flex:0 0 auto;gap:5px;
}
.mobile-layout .anatomy .panel-actions .quiet,.mobile-layout .ultrasound .panel-actions .quiet{display:none}
.mobile-layout .panel-actions .mobile-focus{display:block;min-height:44px;padding:6px 8px;font-size:12px}
.mobile-layout #learn-toggle,.mobile-layout #us-learn-toggle{min-height:44px;padding:6px 8px;font-size:12px}
.mobile-layout .viewport,.mobile-layout.learning-open .anatomy .viewport{
 height:clamp(320px,52svh,620px);min-height:0;max-height:none;
}
.mobile-layout .anatomy .panelbottom,.mobile-layout .ultrasound .panelbottom{
 padding:2px 8px;min-height:48px;font-size:13px;gap:2px 10px;
}
.mobile-layout .panelbottom label{min-height:44px}
.mobile-layout .panelbottom .quiet{display:none}
.mobile-layout .zoom-controls{bottom:62px;right:10px}
.mobile-layout .zoom-controls button{width:44px;height:44px}
.mobile-layout .ecg-panel .panelhead{min-height:30px}
.mobile-layout .ecg-panel .panelhead h2{flex-basis:auto}
.mobile-layout .ecg-panel canvas{height:150px}
.mobile-layout .ecg-status{min-height:26px;padding:5px 10px}

/* Wide phones/tablets can compare side by side. Portrait phones use full width. */
.mobile-layout.compare-layout .workspace{grid-template-columns:repeat(2,minmax(0,1fr))}
.mobile-layout.compare-layout .anatomy{grid-column:1;grid-row:1}
.mobile-layout.compare-layout .ultrasound{grid-column:2;grid-row:1}
.mobile-layout.compare-layout .ecg-panel{grid-column:1/-1;grid-row:2}
.mobile-layout.compare-layout .learning-panel{grid-column:1/-1;grid-row:3}
.mobile-layout.compare-layout .viewport,.mobile-layout.compare-layout .anatomy .viewport{
 height:clamp(280px,44svh,480px);
}
.mobile-layout.compare-layout .anatomy .panelhead,.mobile-layout.compare-layout .ultrasound .panelhead{min-height:48px}
.mobile-layout.compare-layout .panelhead h2{flex-basis:auto}
.mobile-layout.compare-layout .panel-actions{justify-content:flex-end}
.mobile-layout.compare-layout .zoom-controls button{width:44px;height:44px}
.mobile-layout.compare-layout .us-labels button{max-width:140px;font-size:13px;min-height:44px}
.mobile-layout.compare-layout .structure-labels .structure-label{max-width:180px!important;font-size:13px}
.mobile-layout.compare-layout .scanmeta,.mobile-layout.compare-layout .scanfooter{display:flex}
.mobile-layout.compare-layout .panelbottom .key{display:flex}
.mobile-layout.compare-layout #touch-probe{display:block}
@media(max-width:639px){
 .mobile-layout.compare-layout .workspace{grid-template-columns:minmax(0,1fr)}
 .mobile-layout.compare-layout .anatomy{grid-column:1;grid-row:2}
 .mobile-layout.compare-layout .ultrasound{grid-column:1;grid-row:1}
 .mobile-layout.compare-layout .ecg-panel{grid-column:1;grid-row:3}
 .mobile-layout.compare-layout .learning-panel{grid-column:1;grid-row:4}
 .mobile-layout.compare-layout .viewport,.mobile-layout.compare-layout .anatomy .viewport{
  height:clamp(280px,40svh,440px);
 }
}
/* Enlarging keeps the ECG and navigation in the same document and clock. */
.mobile-layout.image-focus .topbar,.mobile-layout.image-focus .toolbar{display:none}
.mobile-layout.image-focus main{padding-top:0}
.mobile-layout.image-focus .viewport,.mobile-layout.image-focus.learning-open .anatomy .viewport{
 height:clamp(340px,calc(100svh - 290px),900px);
}
@media(max-height:500px) and (pointer:coarse){
 .mobile-layout .viewport,.mobile-layout.learning-open .anatomy .viewport,
 .mobile-layout.compare-layout .viewport,.mobile-layout.compare-layout .anatomy .viewport{height:72svh}
 .mobile-layout.image-focus .viewport,.mobile-layout.image-focus.learning-open .anatomy .viewport{height:80svh}
 .mobile-layout .actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}