/* Keep the whole default sphere inside the desktop's first viewport. */
@media(min-width:761px){
 body>header,body>header.has-mode-switch{height:76px;min-height:0;padding:6px 20px;gap:16px}
 header .brand,header.has-mode-switch .brand{width:210px}
 header .brand .official-logo{width:100%;margin:0}
 header .header-nav button,header .header-nav #aboutHeader{font-size:18px;padding:8px 0}
 header .mode-actions{gap:12px}header .mode-actions button{font-size:14px}
 #portfolioMain{height:calc(100dvh - 110px);min-height:0;display:block}
 #portfolioMain .explorer{height:100%;min-height:0;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr)}
 .medium-rail{grid-row:1/5;padding:8px 6px;overflow-y:auto;min-height:0}
 .medium-rail .medium-label{font-size:13px;padding-bottom:5px}
 .medium-rail #mediumNav{min-height:0;grid-auto-rows:auto;gap:1px 3px}
 .medium-rail #mediumNav button{font-size:12px;min-height:25px;padding:3px 2px}
 .medium-rail #mediumNav small{font-size:10px}
 #portfolioMain .view-head{margin:0 16px;padding:5px 0;min-height:0}
 #portfolioMain .view-head>div{display:flex;align-items:baseline;gap:12px}
 #portfolioMain .surface-title{font-size:18px;margin:0}
 #portfolioMain .view-head p{font-size:11px;margin:0}
 #portfolioMain .dimension-tools{margin:0 16px;padding:4px 0}
 .dimension-tools .dimension-row{row-gap:2px}
 .dimension-tools .sphere-path{min-height:24px;padding:0}
 #sphereLevel{font-size:16px}
 #dimensionNav{gap:2px 5px}
 #dimensionNav button{font-size:14px;padding:3px 6px;min-height:28px}
 .dimension-tools #dimensionNote{font-size:10px;margin:2px 0}
 #portfolioMain #stage{grid-row:4;height:100%;min-height:0;margin:0 12px;align-self:stretch}
 #portfolioMain #grid,#portfolioMain #empty{grid-row:4}
 #portfolioMain .sphere-return{grid-row:3;margin:4px auto;align-self:center;font-size:15px;min-height:42px;padding:7px 20px}
 footer{height:34px;min-height:0;padding:7px 20px;font-size:11px}
 footer .text-button{font-size:11px}
}
/* Return controls occupy a dedicated row. Only the content below can scroll. */
:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog)[open]{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 24px)}
:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog)>.dialog-return-bar{position:relative;flex:0 0 auto;top:auto;display:flex;align-items:center;justify-content:center;min-height:70px;padding:8px 12px;background:var(--paper);z-index:2}
:is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar>.close{position:static;transform:none;margin:0;min-height:50px;padding:9px 24px;font-size:17px}
.dialog-body{overflow:auto;min-height:0;overscroll-behavior:contain}
#mediumDialog .medium-content,#collectionDialog .collection-content,#groupDialog .group-header,#aboutDialog .about-content{padding-top:20px}
#viewer .dialog-body{display:grid;grid-template-columns:minmax(0,1fr) 280px}
#viewer .art-stage{height:calc(100dvh - 126px);min-height:0;padding:16px}
#viewer .art-info{padding-top:20px}
#courseViewer #courseFull{max-height:calc(100dvh - 240px)}
#courseMain .view-head{position:relative;display:flex;flex-direction:column-reverse;align-items:stretch;margin:0;padding:10px 20px;gap:10px;background:var(--paper);flex:0 0 auto}
#courseMain #courseBack{position:static;transform:none;align-self:center;margin:0;min-height:50px;padding:9px 24px;font-size:17px}
#courseMain{height:calc(100dvh - 110px);min-height:0}
#courseMain .course-content{height:100%;min-height:0}
#courseScroll{flex:1;min-height:0;overflow:auto}
@media(max-width:760px){
 #portfolioMain .sphere-return{grid-row:4;margin:6px auto}
 #portfolioMain #stage{grid-row:5}
 #viewer .dialog-body{display:block}
 #viewer .art-stage{height:auto;min-height:0;padding:12px}
 #viewer .art-stage img{max-height:60dvh}
 #courseMain{height:calc(100dvh - 160px);min-height:280px}
 #courseMain .view-head{padding:8px 12px;gap:6px}
 #courseMain .view-head .surface-title{margin:0;font-size:18px}
 #courseMain .view-head p{margin:4px 0;font-size:11px}
}

@media(min-width:761px){#portfolioMain .sphere-return:not([hidden])+#stage{margin-left:12px}}
/* A single desktop row leaves the remaining height to the sphere. */
@media(min-width:761px){
 #portfolioMain .dimension-tools{padding:5px 0;margin:0 12px}
 .dimension-tools .dimension-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
 .dimension-tools .sphere-path{width:auto;flex:0 0 auto;min-height:30px;margin:0;padding:0}
 #sphereLevel{font-size:13px;white-space:nowrap}
 #dimensionNav{display:flex;flex:1 1 auto;flex-basis:auto;min-width:0;flex-wrap:nowrap;justify-content:space-evenly;gap:0;margin:0}
 #dimensionNav button{flex:0 1 auto;white-space:nowrap;font-size:clamp(10px,calc(1.2vw - 2px),14px);padding:4px 2px;min-height:30px;line-height:1.5}
 #dimensionNav button:before{width:4px;height:4px;margin-right:3px}
 .dimension-tools #dimensionNote{display:none}
}