/* Responsive desktop shells. Mobile and the independently owned /app workspace keep their own layouts. */
@media (min-width:1024px){
 #mobile.guest-page{max-width:none;width:100%;padding-inline:clamp(32px,4vw,128px)}
 .guest-header{min-height:88px}
 .guest-nav{font-size:14px;gap:clamp(24px,2.5vw,64px)}
 .guest-app-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(48px,5vw,128px);padding-block:clamp(40px,5vh,80px)}
 #mobile.guest-page .guest-app-copy h1{font-size:clamp(58px,4.7vw,108px);max-width:15ch}
 #mobile.guest-page .guest-app-copy>.guest-intro{font-size:clamp(16px,1.1vw,21px);max-width:48ch}
 .guest-app-capture{width:clamp(300px,min(27vw,calc((100svh - 220px)*.461)),500px)}
 .guest-app-capture figcaption{font-size:12px;max-width:100%}
 .guest-button{min-height:50px;font-size:14px}
 .guest-section{padding-block:clamp(48px,4vw,88px)}
 .guest-section-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,160px)}
 #mobile.guest-page .guest-section-head>p{max-width:56ch;font-size:15px}
 .guest-app-feature{padding-block:32px}
 .guest-app-feature h3{font-size:24px}
 .guest-app-feature p{font-size:15px}
 .guest-board-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,160px)}
 .guest-board-detail{width:min(100%,760px);justify-self:center}
 .guest-board-story>div{max-width:680px}
 .guest-board-story p{font-size:16px}
 #mobile.guest-page .public-roadmap{max-width:none}
 .guest-footer nav{font-size:13px}
 body:not([data-mobile=true]){--desktop-side:clamp(192px,12vw,248px);--desktop-gutter:clamp(20px,2vw,56px)}
 body:not([data-mobile=true]) .sidebar{width:var(--desktop-side);padding:24px 18px;display:flex;flex-direction:column;overflow-y:auto;z-index:6}
 body:not([data-mobile=true]) .sidebar-bottom{position:static;margin-top:auto;padding:28px 10px 4px}
 body:not([data-mobile=true]) .content{margin-left:var(--desktop-side);margin-right:0;padding-inline:var(--desktop-gutter);min-width:0}
 html[dir=rtl] body:not([data-mobile=true]) .content{margin-left:0;margin-right:var(--desktop-side)}
 body:not([data-mobile=true]) .workspace-header{position:sticky;top:0;z-index:5;height:70px;background:var(--paper);gap:16px}
 body:not([data-mobile=true]) .page-title{padding:12px 0 18px}
 body:not([data-mobile=true]) .stats{gap:12px;margin-bottom:18px}
 body:not([data-mobile=true]) .stats>div{padding:14px 18px;min-width:0}
 body:not([data-mobile=true]) .stats strong{font-size:26px;margin:4px 0;line-height:1.4}
 body:not([data-mobile=true]) .stats .date-stat{font-size:22px;line-height:1.65}
 body:not([data-mobile=true]) .directory{grid-template-columns:clamp(232px,14vw,300px) minmax(0,1fr);gap:18px}
 body:not([data-mobile=true]) .filters{position:sticky;top:88px;max-height:calc(100dvh - 106px);overflow:auto;scrollbar-width:thin;padding:18px}
 body:not([data-mobile=true]) .filters label{margin-block:12px}
 body:not([data-mobile=true]) .filters .pair label{margin-top:0}
 body:not([data-mobile=true]) .filter-heading{margin-bottom:16px}
 body:not([data-mobile=true]) .results{min-width:0}
 body:not([data-mobile=true]) .table-wrap{max-height:clamp(360px,calc(100dvh - 340px),1000px);scrollbar-width:thin;overscroll-behavior:contain}
 body:not([data-mobile=true]) .record-name{max-width:clamp(150px,14vw,360px);white-space:normal;overflow-wrap:anywhere}
 body:not([data-mobile=true]) .record-sub{max-width:clamp(150px,14vw,360px)}
 body:not([data-mobile=true]) .board-art-frame{max-width:min(100%,620px);justify-self:center;width:100%}
 body:not([data-mobile=true]) #details{inset:24px;margin:auto;width:min(1180px,calc(100vw - 48px));height:calc(100dvh - 48px);max-height:calc(100dvh - 48px);border-radius:20px;padding-inline:24px;overflow:auto}
 body:not([data-mobile=true]) #details:not(:has(#detail-board-canvas)){width:min(640px,calc(100vw - 48px))}
 body:not([data-mobile=true]) #details .panel-header{position:sticky;top:0;z-index:2;background:var(--white)}
 body:not([data-mobile=true]) #detail-content:has(#detail-board-canvas){grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr)}
 body:not([data-mobile=true]) #detail-content #detail-board-canvas{max-height:calc(100dvh - 155px);object-fit:contain}
 body:not([data-mobile=true]) #settings{inset:24px;margin:auto;width:min(480px,calc(100vw - 48px));height:fit-content;max-height:calc(100dvh - 48px);border-radius:20px;overflow:auto}
 body:not([data-mobile=true]) .omni-roadmap{max-width:none}
 #hold-studio.hold-studio-root main{max-width:none;padding-inline:0;padding-top:16px}
 body:not([data-mobile=true]) .content:has(#hold-main:not([hidden]))>.page-title{display:none}
 #hold-studio.hold-studio-root header{padding-inline:0;gap:20px;flex-wrap:wrap;height:auto;min-height:80px}
 #hold-studio.hold-studio-root .workspace{grid-template-columns:minmax(0,1fr) minmax(360px,520px)}
 #hold-studio.hold-studio-root .board-wrap{display:grid;place-items:center}
 #hold-studio.hold-studio-root #hs-board{max-width: min(100%,calc((100dvh - 350px)*1.1))}
 #hold-studio.hold-studio-root .editor{top:88px;max-height:calc((100dvh - 110px)/var(--hs-ui-scale,1));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
@media (min-width:1200px){
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])){display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.45fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;align-items:start}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .search-bar{grid-column:1/-1;flex-wrap:nowrap}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .search{min-width:0}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) #board-browser{grid-column:1;grid-row:2/span 4;display:flex;flex-direction:column;gap:16px;margin:0 0 16px 16px;padding:14px;min-width:0}
 html[dir=rtl] body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) #board-browser{margin:0 16px 16px 0}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .board-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;width:100%;min-width:0}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .board-summary h2,body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .board-summary>p{grid-column:1/-1}
 body:not([data-mobile=true]) .board-summary label{margin:0;min-width:0}
 body:not([data-mobile=true]) .board-summary select{max-width:100%}
 body:not([data-mobile=true]) .role-legend{grid-template-columns:1fr 1fr;align-content:center;font-size:11px;gap:8px}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .result-meta{grid-column:2;grid-row:2;flex-wrap:wrap;gap:4px 12px;padding:0 16px 12px}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) #notice{grid-column:2;grid-row:3}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .table-wrap{grid-column:2;grid-row:4;min-width:0}
 body:not([data-mobile=true]) .results:has(#board-browser:not([hidden])) .pagination{grid-column:2;grid-row:5;flex-wrap:wrap;gap:10px;padding:14px 16px}
 body:not([data-mobile=true]) th,body:not([data-mobile=true]) td{padding-inline:9px}
}
@media(min-width:1600px){.guest-app-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}.guest-app-feature:has(.guest-feature-media){grid-column:1/-1}}
/* CSS viewport reflow also handles browser zoom, independent of input hardware. */
@media(min-width:1024px) and (max-width:1199px){
 body:not([data-mobile=true]) .board-browser{grid-template-columns:minmax(220px,.9fr) minmax(130px,1fr);gap:18px}
 body:not([data-mobile=true]) .board-art-frame{max-width:300px}
 body:not([data-mobile=true]) .search-bar{flex-wrap:wrap}
}
@media(min-width:1024px){
 @container(max-width:900px){#hold-studio.hold-studio-root .workspace{grid-template-columns:minmax(0,1fr)}#hold-studio.hold-studio-root .editor{position:static;max-height:none;overflow:visible}}
}