/* Shared viewport contract. Artwork owns its aspect ratio; UI owns readable width.
   Header/footer participate in layout. Only the middle work area scrolls. */
:root{--ui-gutter:clamp(12px,2.4vw,32px);--ui-content:1100px;--ui-safe-bottom:env(safe-area-inset-bottom,0px)}
html body dialog.guided-view[open]:not(#briefing){box-sizing:border-box;grid-template-rows:auto minmax(0,1fr) auto!important;max-height:100dvh!important}
html body dialog.guided-view:not(#briefing) footer{height:auto!important;min-height:0!important;max-height:45dvh;overflow:auto;display:flex!important;flex-direction:column;align-items:stretch;gap:12px;padding:12px max(var(--ui-gutter),calc((100% - var(--ui-content))/2)) calc(12px + var(--ui-safe-bottom))!important}
html body dialog.guided-view:not(#briefing) footer .device-feedback{flex:none;max-height:none;overflow:visible;font-size:clamp(16px,2vw,22px);margin:0 auto;line-height:1.45}
html body dialog.guided-view:not(#briefing) footer :is(.lab-controls,.step-actions,.field-controls){display:flex!important;position:static!important;flex-flow:row wrap!important;justify-content:flex-end!important;align-items:center!important;gap:10px;height:auto!important;min-height:44px!important;padding:0!important;width:100%;min-width:0}
html body dialog.guided-view:not(#briefing) footer :is(.lab-controls,.step-actions,.field-controls)>button{position:static!important;inset:auto!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:100%;min-height:44px;height:auto!important;white-space:normal;padding:10px 16px!important;margin:0!important}
html body dialog.guided-view:not(#briefing) footer .device-help{margin-right:auto!important;order:0!important}
html body dialog.guided-view:not(#briefing) footer #lab-examples{order:1!important}
html body dialog.guided-view:not(#briefing) footer #lab-correct{order:2!important}
html body dialog.guided-view:not(#briefing) footer :is(#lab-run,#sample-next,#label-done,.lesson-continue){order:3!important}
html body #collection-dialog.guided-view #collection-continue{position:static;width:auto;height:auto;min-height:44px;align-self:flex-end}
html body .guided-view :is(.lab-stage,.field-stage,.guide-workspace){min-width:0;min-height:0;overscroll-behavior:contain}
html body .guided-view #batch-results{max-width:none;box-sizing:border-box;width:100%;overflow:auto;align-content:safe center}
html body #lab-dialog[data-mode=test] .lab-stage{background:#08090d}
html body .guided-view #lab-scene{width:100%;height:100%;object-fit:contain}
html body .guided-view .guide-workspace{align-content:safe center}
/* Help occupies the same adaptive middle row as the device; no guessed footer height. */
html body .guided-view .device-lesson{display:grid;place-items:center;z-index:3;text-align:center;position:relative;inset:auto;grid-row:2;grid-column:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#08090d;align-items:safe center;color:#f3f2f5;padding:clamp(16px,3vw,36px)}
html body .guided-view[data-teaching=true] :is(.lab-stage,.guide-workspace){grid-row:2;grid-column:1}
html body .guided-view .device-lesson>div{width:100%;max-width:850px}
html body .guided-view .device-lesson h2{color:#f4f3f6;font-size:clamp(22px,3vw,28px);line-height:1.4;margin:0 0 12px}
html body .guided-view .device-lesson .lesson-demo{display:block;width:100%;height:clamp(230px,42dvh,400px);object-fit:contain;margin-bottom:14px}
html body .guided-view .device-lesson .lesson-copy{font-size:20px;line-height:1.5;margin:0 0 9px}
html body .guided-view .device-lesson .lesson-detail{color:#c3c0cb;font-size:17px;line-height:1.5;margin:0}
.briefing-reopen{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.3;color:#dce1e8;background:#ffffff08;border:1px solid #ffffff30;border-radius:6px;padding:10px 12px;min-height:44px;margin-top:14px;cursor:pointer;text-align:center}
.briefing-reopen:hover{background:#ffffff14}
.briefing-reopen:focus-visible{outline:2px solid #ffe09a;outline-offset:2px}
html body .guided-view :is(.inspection-results,.retest-heading,.test-specimen-queue){min-width:0}
html body .room-dialog{box-sizing:border-box;max-width:calc(100vw - 2 * var(--ui-gutter));max-height:calc(100dvh - 2 * var(--ui-gutter));overflow:auto;overscroll-behavior:contain}
#space-popover{max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain}
#entry{padding:max(16px,env(safe-area-inset-top)) var(--ui-gutter) max(16px,var(--ui-safe-bottom));align-items:safe center}
.entry-card{max-width:100%;box-sizing:border-box}
#connection-error>div{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:600px){
 html body #lab-dialog .inspection-results{grid-template-columns:minmax(0,1fr);max-width:440px;gap:22px}
 html body #lab-dialog .inspection-category{min-height:430px;padding:0 42px 54px}
 html body #lab-dialog .inspection-category h3{font-size:20px;height:44px}
 html body #lab-dialog .inspection-result canvas{height:100px}
 html body #lab-dialog .inspection-result .result-name{font-size:14px}
 html body #lab-dialog .inspection-result .result-action{font-size:13px;min-height:36px}
 html body #lab-dialog #batch-results[data-stage=done]{justify-content:flex-start}
 html body .guided-view .collection-rack{grid-template-columns:repeat(2,minmax(0,1fr))}
 html body .guided-view footer .learning-preview-detail{font-size:14px;line-height:1.45}
 html body #label-dialog .workbench{max-width:100%;box-sizing:border-box}
 #choices{gap:6px}.choice{min-width:0;flex:1}.character-preview{max-width:100%}
}
@media(max-height:560px){
 html body dialog.guided-view:not(#briefing) footer{gap:6px;padding-top:8px!important;padding-bottom:calc(8px + var(--ui-safe-bottom))!important}
 html body .guided-view footer .learning-preview-detail{margin-top:3px}
 html body .guided-view .device-lesson .lesson-demo{max-height:30dvh;width:100%;object-fit:contain}
 html body #lab-dialog .sorting-console[data-stage=running] .rail-scene{max-height:none;min-height:190px}
 html body #lab-dialog #batch-results[data-stage=running]{justify-content:flex-start}
}
html body :is(#lab-dialog,#label-dialog).guided-view footer :is(.lab-controls,.step-actions)>.device-help{margin-right:auto!important}
html body #lab-dialog.guided-view #batch-results:not([hidden]){justify-content:safe center}
@media(max-height:560px){html body #lab-dialog.guided-view #batch-results:not([hidden]){justify-content:flex-start}}

/* Map overlays share reserved bands instead of competing at the same origin. */
@media(max-width:650px){
 html body:has(.event-identity) #map-camera-controls:not([hidden]){top:140px;max-width:calc(100vw - 24px)}
 html body:has(.event-identity) .room-actions{left:12px;right:12px;bottom:calc(12px + var(--ui-safe-bottom));transform:none;display:flex;gap:6px;width:auto}
 html body:has(.event-identity) .room-actions button{flex:1;min-width:0;white-space:normal;padding:10px 6px;min-height:44px}
 html body:has(.event-identity) .visitor{display:none}
 html body:has(.event-identity) #directory{top:12px;bottom:calc(68px + var(--ui-safe-bottom));max-width:calc(100vw - 24px)}
}
html body #event-entry{box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto}
@media(max-height:560px){html body #event-entry #entry-avatar{height:70px;width:66px}}

/* Cleanup uses the same three-row viewport model as the learning devices. */
#ending-layout{position:fixed;inset:0;z-index:7;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:var(--ui-gutter);padding-bottom:max(var(--ui-gutter),var(--ui-safe-bottom));box-sizing:border-box;pointer-events:none}
#ending-layout:has(#ending-panel[hidden]):has(#ending-inventory[hidden]):has(#ending-actions[hidden]){display:none}
html body #ending-layout>section,html body #ending-layout>#ending-actions{position:static;transform:none;max-height:none;min-height:0;pointer-events:auto;margin:0;justify-self:center}
html body #ending-layout>#ending-panel{grid-row:1;width:min(510px,100%)}
html body #ending-layout>#ending-inventory{grid-row:2;width:min(800px,100%);align-self:stretch;overflow:auto}
html body #ending-layout>#ending-actions{grid-row:3;width:min(800px,100%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#ending-layout #ending-actions button{min-height:44px;flex:1;min-width:0;white-space:normal}
body:has(#ending-layout #ending-panel:not([hidden])) #space-hud{visibility:hidden}
@media(max-height:560px){#ending-layout{gap:8px;padding:8px}html body #ending-layout #ending-panel{padding:8px 12px}#ending-layout .ending-decision{margin:4px 0;min-height:0;font-size:15px}#ending-layout .ending-counts{font-size:13px}}

/* Reconnection prompt: one centered stack, independent of native control defaults. */
.connection-pause{box-sizing:border-box;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:28px;background:#101116;color:#f5f4f7;border:1px solid #555660;border-radius:16px;text-align:center;overflow:auto;font-family:system-ui,sans-serif;box-shadow:0 16px 48px #0005}
.connection-pause[open]{display:flex;flex-direction:column;align-items:stretch;gap:24px}
.connection-pause h2{margin:0;font-size:22px;font-weight:700;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.connection-pause::backdrop{background:#000a}
.connection-pause button{appearance:none;display:block;width:100%;margin:0;min-height:48px;padding:12px 20px;border:1px solid #d7d8de;border-radius:8px;background:#f1f1f5;color:#191b22;font:600 16px/1.4 system-ui,sans-serif;cursor:pointer}
.connection-pause button:hover{background:#fff}
.connection-pause button:focus-visible{outline:2px solid #f1d18c;outline-offset:3px}

/* Finished result pages scroll as one surface; the footer cannot cover items. */
html body #lab-dialog.guided-view[open][data-batch=done][data-teaching=false]{display:flex!important;flex-direction:column;overflow-y:auto;background:#08090d}
html body #lab-dialog.guided-view[open][data-batch=done][data-teaching=false] #activity-guide{flex-shrink:0}
html body #lab-dialog.guided-view[open][data-batch=done][data-teaching=false] .lab-stage{height:auto;overflow:visible;flex:1 0 auto}
html body #lab-dialog.guided-view[open][data-batch=done][data-teaching=false] #batch-results{height:auto;overflow:visible;padding-bottom:32px}
html body #lab-dialog.guided-view[open][data-batch=done][data-teaching=false] footer{flex-shrink:0;overflow:visible;max-height:none;background:#08090d;border:0}