/* Sphere-first layout: compact navigation, flexible canvas, no clipped first screen. */
html,body{height:100%;min-height:0}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body>header{flex:0 0 auto}
body>footer{flex:0 0 auto;height:26px;min-height:26px;padding:3px 14px;font-size:10px}
#portfolioMain,#courseMain{flex:1 1 0;height:auto;min-height:0}
#portfolioMain .explorer{height:100%;min-height:0}
#portfolioMain .view-head{display:none}
#portfolioMain .sphere-return{position:static;transform:none;min-height:34px;padding:5px 16px;font-size:13px;margin:2px auto;justify-self:center}
#portfolioMain #stage{height:100%;min-height:0;margin:0 5px;align-self:stretch}
#collectionFolders{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#collectionFolders .preview-fan{height:clamp(180px,62cqw,260px)}
#collectionFolders .preview-print{width:60cqw;max-width:210px;bottom:15px}
#collectionFolders .folder-count{color:var(--orange);font-size:12px}
#collectionFolders .folder-name{font-size:14px}
@media(min-width:761px){
 body>header,body>header.has-mode-switch{height:60px;padding:4px 16px;gap:20px}
 header .brand,header.has-mode-switch .brand{width:180px}
 header .header-nav{margin:auto;gap:30px}
 header .header-nav button,header .header-nav #aboutHeader{font-size:16px;padding:6px 0}
 #portfolioMain .explorer{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
 .medium-rail{grid-row:1/4;padding:5px;overflow:auto}
 .medium-rail #mediumNav button{min-height:23px;font-size:11px;padding:2px}
 .medium-rail .medium-label{font-size:12px}
 #portfolioMain .dimension-tools{grid-row:1;margin:0 10px;padding:3px 0}
 #dimensionNav button{font-size:clamp(10px,1vw,13px);min-height:28px}
 #portfolioMain .sphere-return{grid-row:2}
 #portfolioMain #stage{grid-row:3}
}
@media(max-width:760px){
 body>header{padding:5px 8px 2px;gap:2px;position:relative}
 header .brand{width:120px;max-width:40vw}
 header .header-nav{gap:3px}
 header .header-nav button,header .header-nav #aboutHeader{font-size:13px;min-height:30px;padding:4px 1px}
 header .header-nav i{display:none}
 #portfolioMain .explorer{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr)}
 #portfolioMain .medium-rail{grid-row:1;padding:2px 8px;min-height:0}
 .medium-rail>summary{min-height:30px;padding:5px 9px;font-size:12px}
 .medium-rail .medium-strip{position:absolute;left:8px;right:8px;top:32px;width:auto;max-height:55dvh;margin:0;overflow:auto;background:var(--paper);box-shadow:0 10px 30px #0006}
 #portfolioMain .dimension-tools{grid-row:2;margin:0 8px;padding:2px 0}
 .dimension-tools .dimension-row{display:block}
 .dimension-tools .sphere-path{display:none}
 #dimensionNav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;width:100%}
 #dimensionNav button{font-size:10px;padding:4px 0;min-height:28px;line-height:1.4;white-space:nowrap}
 #dimensionNav button:before{width:3px;height:3px;margin-right:1px}
 #dimensionNote{display:none}
 #portfolioMain .sphere-return{grid-row:3}
 #portfolioMain #stage{grid-row:4;grid-column:1}
 footer>span,footer .text-button{display:none}
 body>footer{justify-content:center;height:22px;min-height:22px;padding:2px 6px}
 #collectionFolders{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #collectionFolders .preview-fan{height:140px}
 #collectionFolders .preview-print{height:120px;width:65cqw;max-width:76%;bottom:8px}
 #collectionFolders .folder-name{font-size:12px}
 #collectionFolders .folder-count{font-size:10px}
 #courseScroll{overflow:auto;min-height:0}
}

/* Skip painting offscreen cards; every group remains available in the list. */
#collectionFolders .group-card,#mediumCards .group-card{content-visibility:auto;contain-intrinsic-size:auto 360px}