/* Keep the approved artwork intact. The SVG rendering filter removes only its
   near-black matte before adding a restrained shadow; no logo is redrawn. */
#experience .room-art-filters{position:absolute;pointer-events:none;overflow:hidden}
#experience .spaces-leadin img{filter:url(#scowcroft-room-cutout)}
#experience .spaces-leadin{filter:none;background:transparent}
/* The gold DealerSPACE wordmark retains the secure entry options; Sara also
   understands an explicit request to enter. The extra caption button is gone. */
/* A cardless, keyboard-accessible Sara launcher in the lower LEFT corner. */
#answer-desk-room{left:24px;top:auto;bottom:24px;transform:none;width:100px;height:120px}
#answer-desk-room .answer-desk-launch{width:100px;min-height:120px;padding:0;gap:3px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;color:#fff;text-shadow:0 1px 3px #000,0 2px 8px #000}
#answer-desk-room .answer-desk-launch:hover,#answer-desk-room .answer-desk-launch:focus-visible{background:transparent;transform:translateY(-2px)}
#answer-desk-room .answer-desk-launch img{width:72px;height:82px;filter:drop-shadow(0 3px 6px #0009)}
#answer-desk-room .answer-desk-launch-label{font-size:14px;line-height:1.2}
#answer-desk-room .answer-desk-launch-note{font-size:10px;line-height:1.2;color:#fff}
#answer-desk-room .answer-desk-panel{left:0;top:auto;bottom:132px;width:min(430px,calc(100vw - 48px));max-height:calc(100svh - 172px);transform:translateY(12px)}
#answer-desk-room .answer-desk-panel.is-open{transform:none}
@media(max-height:650px){
 #answer-desk-room .answer-desk-panel .answer-desk-portrait img{height:140px;width:160px}
 #answer-desk-room .answer-desk-panel{max-height:calc(100svh - 172px)}
}
@media(max-width:650px){
 #answer-desk-room{left:16px;bottom:20px;width:88px}
 #answer-desk-room .answer-desk-launch{width:88px}
 #answer-desk-room .answer-desk-panel{width:calc(100vw - 32px)}
}

#experience:not(.technics-invitation-mode) .dealer-space-caption{display:none}
@media(max-width:650px){
 body:not(.mobile-theater) #experience.penthouse-hero{height:100svh;min-height:100svh}
 body:not(.mobile-theater) #experience .virtual-remote{max-height:max(200px,calc(100svh - 180px))!important}
}

/* Keep all nine destinations readable before spending height on utility gaps.
   Retain every control and the bottom clearance for the separate zoom toggle. */
body:not(.mobile-theater) #experience .virtual-remote{padding-bottom:54px!important}
body:not(.mobile-theater) #experience .virtual-remote > .touch-body{max-height:none!important}
body:not(.mobile-theater) #experience .virtual-remote > .touch-skip{margin:2px 0;padding-top:0}
body:not(.mobile-theater) #experience .virtual-remote > .touch-room-settings{margin-top:2px;padding-top:4px}
body:not(.mobile-theater) #experience .virtual-remote > .touch-room-settings .os-slider{margin:0;line-height:1.25}
body:not(.mobile-theater) #experience .virtual-remote > .touch-room-settings input{height:32px;min-height:32px;margin:0}
body:not(.mobile-theater) #experience .virtual-remote > :is(.touch-fullscreen,.touch-catalog-return){min-height:44px;margin:2px 0;padding:8px;line-height:1.2}
body:not(.mobile-theater) #experience .virtual-remote > footer.touch-footer{flex-shrink:0;margin-top:0;padding-top:2px}
body:not(.mobile-theater) #experience .virtual-remote > .touch-footer button{height:44px!important;min-height:44px!important}
body:not(.mobile-theater) #experience .virtual-remote > .touch-volume{margin-top:2px;padding-top:2px}
body:not(.mobile-theater) #experience .virtual-remote > .touch-volume button{height:44px;min-height:44px}
@media(min-width:651px) and (min-height:630px){
 body:not(.mobile-theater) #experience .virtual-remote .touch-activities :is(button,a){height:64px!important;min-height:64px!important}
}
@media(max-width:650px){
 /* Stay below the gold entry links and above Sara in narrow desktop windows. */
 body:not(.mobile-theater) #experience .virtual-remote{--room-remote-top:min(340px,max(12px,calc(100svh - 380px)));top:var(--room-remote-top)!important;max-height:max(200px,calc(100svh - var(--room-remote-top) - 180px))!important;overflow-y:auto!important;overscroll-behavior:contain}
 body:not(.mobile-theater) #experience .virtual-remote > .touch-body{flex:0 0 auto;overflow:visible!important}
}
/* On very short windows, scroll the whole remote rather than collapse the menu
   or clip a fixed utility control. The normal-height remote stays stationary. */
@media(min-width:651px) and (max-height:480px){
 body:not(.mobile-theater) #experience .virtual-remote{max-height:calc(100svh - 24px)!important;overflow-y:auto!important;overscroll-behavior:contain}
 body:not(.mobile-theater) #experience .virtual-remote > .touch-body{flex:0 0 auto;overflow:visible!important}
}
/* Enlarge the approved transparent logo without changing its artwork/filter.
   Keep secure entry below the complete logo and SPACES line. */
body:not(.mobile-theater) #experience .spaces-leadin{width:256px}
body:not(.mobile-theater) #experience .dealer-space-trigger{top:188px;--logo-home-top:188px}
@media(max-width:650px){
 body:not(.mobile-theater) #experience .spaces-leadin{width:min(207px,52vw)!important;max-width:none!important}
 body:not(.mobile-theater) #experience .dealer-space-trigger{top:168px;--logo-home-top:168px}
}

/* Keep program navigation above the scrollable title and room choices. */
#experience .virtual-remote > .touch-program-tracks{flex-shrink:0;grid-template-columns:minmax(0,1fr) minmax(76px,1.2fr) minmax(0,1fr);margin:4px 0}
#experience .virtual-remote > .touch-program-tracks[hidden]{display:none}
#experience .virtual-remote > .touch-video-resume{flex-shrink:0}
#experience .virtual-remote > .touch-program-tracks button{min-width:0;height:auto;min-height:44px;padding:6px 2px;font:600 11px/1.2 system-ui}
#experience .virtual-remote > .touch-body{min-height:0;overscroll-behavior:contain;scrollbar-width:thin}

/* Bring the approved logo closer to SPACES without resizing either artwork. */
#experience .spaces-leadin > img:first-child{position:relative;top:8px}

/* Short rooms keep navigation and utilities fixed; only descriptive content
   and destination choices scroll. Fullscreen and catalog return share a row. */
@media(max-height:650px),(max-width:650px){
 body.spaces-app #experience .virtual-remote{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"header header" "program program" "body body" "tracks tracks" "lighting lighting" "full return" "footer footer" "volume volume";
  grid-template-rows:44px auto minmax(36px,1fr) 44px 54px 44px auto 44px;
  gap:2px 4px;top:16px!important;max-height:calc(100dvh - 32px)!important;height:calc(100dvh - 32px)!important;
  padding:8px!important;overflow:hidden!important;aspect-ratio:auto!important;
 }
 body.spaces-app #experience .virtual-remote[hidden]{display:none!important}
 body.spaces-app #experience .virtual-remote > .touch-header{grid-area:header}
 body.spaces-app #experience .virtual-remote > .touch-program-tracks{grid-area:program;margin:0}
 body.spaces-app #experience .virtual-remote > .touch-video-resume{grid-area:program;margin:0;min-height:44px}
 body.spaces-app #experience .virtual-remote > .touch-body{grid-area:body;overflow-y:auto!important;max-height:none!important;padding:0!important}
 body.spaces-app #experience .touch-video-now{margin:0;padding:2px 0;border:0}
 body.spaces-app #experience .touch-video-now strong{margin:2px 0;font-size:11px;line-height:1.2}
 body.spaces-app #experience .virtual-remote > .touch-skip{grid-area:tracks;margin:0;padding:0}
 body.spaces-app #experience .virtual-remote > .touch-room-settings{grid-area:lighting;margin:0;padding-top:2px}
 body.spaces-app #experience .virtual-remote > .touch-room-settings .os-slider{margin:0;font-size:11px;line-height:16px}
 body.spaces-app #experience .virtual-remote > .touch-room-settings input{height:32px;min-height:32px;margin:0}
 body.spaces-app #experience .virtual-remote > .touch-fullscreen{grid-area:full}
 body.spaces-app #experience.catalog-embedded .virtual-remote > .touch-fullscreen{grid-column:1/-1}
 body.spaces-app #experience .virtual-remote > .touch-catalog-return{grid-area:return}
 body.spaces-app #experience .virtual-remote > :is(.touch-fullscreen,.touch-catalog-return){min-width:0;min-height:44px;margin:0;padding:4px;font-size:11px;line-height:1.2}
 body.spaces-app #experience .virtual-remote > footer.touch-footer{grid-area:footer;margin:0;padding:0}
 body.spaces-app #experience .virtual-remote > .touch-volume{grid-area:volume;margin:0;padding:0}
 body.spaces-app #experience .virtual-remote > .touch-volume button{min-width:0;min-height:44px;height:44px}
 body.spaces-app #experience .virtual-remote > .touch-volume button small{font-size:8px;white-space:nowrap}
 body.spaces-app #experience .virtual-remote > .touch-skip button{height:44px!important;min-height:44px!important}
}
@media(max-width:650px) and (orientation:portrait){
 body.spaces-app #experience .virtual-remote,
 body.mobile-theater #experience.catalog-embedded.catalog-category-playlist .virtual-remote{--touch-nav-top:min(240px,28dvh);top:var(--touch-nav-top)!important;height:calc(100dvh - var(--touch-nav-top) - 12px)!important;max-height:calc(100dvh - var(--touch-nav-top) - 12px)!important}
 body.mobile-theater:not(.mobile-theater-full) #experience:not(.dreamwall-content-fullscreen) .mobile-cinema-actions{top:calc(min(240px,28dvh) - 48px)!important;bottom:auto!important;left:14px!important;right:auto!important;gap:4px}
 body.mobile-theater:not(.mobile-theater-full) #experience:not(.dreamwall-content-fullscreen) .mobile-cinema-actions button{min-height:38px;padding:6px;font-size:10px}
 body.mobile-theater:not(.mobile-theater-full) #experience:not(.dreamwall-content-fullscreen) .remote-toggle{top:calc(min(240px,28dvh) - 48px)!important;bottom:auto!important;right:14px!important;min-height:38px;padding:6px 8px}
}
@media(min-width:651px) and (max-height:650px){
 body.spaces-app:not(.mobile-theater) #experience .virtual-remote{height:calc(100dvh - 84px)!important;max-height:calc(100dvh - 84px)!important}
}
/* The landscape rail contains two artworks, so stack them instead of letting
   two full-width images overflow the left edge of a flex row. */
@media(orientation:landscape) and (pointer:coarse) and (max-height:600px){
 body.mobile-theater #experience .spaces-leadin{display:block!important;height:auto!important;top:12px!important}
 body.mobile-theater #experience .spaces-leadin > img:first-child{width:100%!important;height:auto!important;top:4px}
 body.mobile-theater #experience .spaces-leadin > .spaces-wordmark{width:70%!important;height:auto!important;margin:0 auto!important}
 body.mobile-theater #experience .dealer-space-trigger{top:30%!important}
 body.mobile-theater:not(.mobile-theater-full) #experience:not(.dreamwall-content-fullscreen) .remote-toggle{left:calc(max(10px,env(safe-area-inset-left)) + clamp(90px,15vw,132px) + 10px)!important;right:auto!important;top:auto!important;bottom:8px!important;z-index:60!important}
}