/* Fixed app shell. Scrolling belongs to the tool tray and dialogs. */
:root{--app-height:100dvh;--app-top:0px;--header-height:64px;--tool-height:clamp(180px,34dvh,320px)}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{position:fixed;top:var(--app-top);left:0;height:var(--app-height);padding:0;display:flex;flex-direction:column}
body>header{height:var(--header-height);flex:0 0 var(--header-height)}
body>main,body.tools-open>main{width:100%;max-width:980px;height:auto;min-height:0;flex:1;margin:0 auto;padding-bottom:var(--dock-height);overflow:hidden}
body.tools-open>main{padding-bottom:calc(var(--dock-height) + var(--tool-height))}
body .workspace,body.tools-open .workspace{position:relative;inset:auto;height:100%;width:100%;display:flex;flex-direction:column;min-height:0;padding:8px 14px;overflow:hidden}
.workspace>.stage,body.tools-open .workspace>.stage{flex:1;min-height:0;padding:5px;overflow:hidden}
.workspace .canvaswrap,body.tools-open .workspace .canvaswrap{height:100%;width:auto;min-width:0;max-width:100%;aspect-ratio:9/16}
.workspace canvas{width:100%;height:100%;object-fit:contain}
.workspace>.sectionhead,.workspace>.previewtools,.workspace>.transport,.workspace>.mediaquick,.workspace>.quickbar{flex-shrink:0}
.workspace .sectionhead{margin-bottom:6px}.workspace .sectionhead h1{font-size:20px}.workspace .sectionhead .eyebrow,.workspace>.replaymeta{display:none}
.workspace>.transport{margin:5px 0;min-height:40px}.workspace>.mediaquick{margin:6px 0}.workspace>.quickbar{margin:4px 0}
body .appdock{position:absolute;bottom:0;min-height:var(--dock-height)}
body #toolsheet{position:absolute;top:auto;bottom:var(--dock-height);left:0;right:0;width:min(980px,100%);height:var(--tool-height);max-height:none}
#sheethost{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
#toolsheet input,#toolsheet select{scroll-margin-block:24px}
#palettes{overflow-x:auto;flex-wrap:nowrap;overscroll-behavior-x:contain}.palettechip{flex:0 0 58px}
body #status,body.tools-open #status{position:absolute;top:70px;right:12px;z-index:25;background:#222;max-width:min(310px,85vw);max-height:120px;overflow:auto;padding:10px 14px;border-radius:6px;opacity:0;pointer-events:none;margin:0}
body #status.notice{opacity:1;pointer-events:auto}
#result{position:absolute;inset:10px;z-index:5;background:#151515;padding:16px;overflow-y:auto;border:1px solid #5c4036;border-radius:6px;overscroll-behavior:contain}
#result video{max-height:calc(var(--app-height) - 280px)}
#welcome{height:var(--app-height);max-height:var(--app-height);overflow:hidden;top:var(--app-top);bottom:auto}
#welcome .welcomeart{min-height:0;flex:1}#welcome .welcomebottom{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;flex-shrink:0}
body.previewonly>header{display:none}body.previewonly>main{padding-bottom:80px}body.previewonly .canvaswrap{width:auto}
@media(max-width:850px){:root{--header-height:56px}.workspace>.previewtools{margin-bottom:5px}}
@media(max-height:650px){.workspace>.mediaquick,.workspace>.quickbar{display:none}.workspace .sectionhead h1{display:none}}
@media(min-width:700px){#welcome .welcomeart{flex:1}#welcome .welcomebottom{flex:0 1 360px}}
body.keyboard-open{--tool-height:calc(var(--app-height) - var(--header-height) - var(--dock-height) - 60px)}
body.keyboard-open .sectionhead,body.keyboard-open .previewtools{display:none}
/* Horizontal pickers keep choices beside each other, with the next card peeking in. */
#toolsheet .catalogue{display:flex;flex-flow:row nowrap;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;scroll-padding-inline:2px;padding:3px 2px 12px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin}
#toolsheet .catalogue .detailcard{flex:0 0 min(190px,64vw);min-width:0;scroll-snap-align:start;align-self:stretch}
#toolsheet .catalogue .detailmain{min-width:0;width:100%;padding-bottom:4px}
#toolsheet .catalogue .detailmain small{font-size:12px;line-height:1.4}
#toolsheet .templates,#toolsheet #palettes,#toolsheet .filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin}
#toolsheet .templates button,#toolsheet .palettechip,#toolsheet .filters button{scroll-snap-align:start;flex-shrink:0}
#toolsheet .filters{margin:8px 0;padding-bottom:4px}
#toolsheet[data-view=details] .panelhead{display:none}
#toolsheet[data-view=details] .search{margin-top:0}
#toolsheet[data-view=details] #panel-details>.hint:first-of-type{margin:0 0 7px;font-size:12px}
#toolsheet[data-view=details] #panel-details>.hint:last-child{font-size:12px;margin-top:0}
/* Permit diagonal touch gestures in horizontal rows, even inside the vertical form tray. */
#sheethost{touch-action:pan-x pan-y}
/* Compact browsing: one header row, one horizontal strip, no description blocks. */
#toolsheet[data-view=details] #panel-details>.hint{display:none}
#toolsheet[data-view=details] #panel-details{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);grid-template-rows:44px auto;gap:8px;align-items:start}
#toolsheet[data-view=details] .search{margin:0;min-width:0}
#toolsheet[data-view=details] #search{margin:0;min-height:40px;height:40px;font-size:14px;padding:8px}
#toolsheet[data-view=details] .filters{margin:0;padding:0 0 4px;height:44px;min-width:0;gap:6px}
#toolsheet[data-view=details] .filters button{min-height:38px;padding:6px 10px}
#toolsheet[data-view=details] .catalogue{grid-column:1/-1;gap:10px;padding:0 0 8px;margin:0;align-items:stretch}
#toolsheet .catalogue .detailcard{flex-basis:156px;padding:8px;min-height:108px}
#toolsheet .catalogue .detailmain{gap:7px;padding:0;min-height:0}
#toolsheet .catalogue .detailmain small{display:none}
#toolsheet .catalogue .detailmain strong{font-size:14px;line-height:1.3;padding-right:0;max-width:138px;white-space:normal}
#toolsheet .catalogue .detailicon{height:38px;width:38px;font-size:24px}
#toolsheet .catalogue .addtoggle{width:38px;min-height:38px;right:8px;top:8px}
#toolsheet[data-view=templates] .templates button{min-height:106px;flex-basis:132px;gap:8px;padding:10px}
#toolsheet[data-view=templates] .templates span{width:40px;height:40px;font-size:24px}
#toolsheet[data-view=palette] #panel-style>.hint{display:none}
#toolsheet[data-view=palette] #panel-style>.two{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;margin-top:6px}
#toolsheet[data-view=palette] #panel-style>.two label{flex:0 0 130px;margin:0;font-size:13px;scroll-snap-align:start}
#toolsheet[data-view=palette] #panel-style>label{margin-top:4px}
#toolsheet[data-view=palette] #panel-style>label:first-of-type{display:none}
#toolsheet[data-view=palette] #palettes{margin:0;padding:6px;gap:8px}
#toolsheet[data-view=palette] .palettechip{min-height:40px;padding:4px}
#toolsheet[data-view=palette] .palettechip span{height:24px}
#toolsheet[data-view=palette] #panel-style>label:last-of-type{font-size:13px;display:flex;align-items:center;gap:12px}
#toolsheet[data-view=palette] #dim{width:auto;min-width:70px;flex:1}
@media(max-width:450px){#toolsheet[data-view=details] #panel-details{grid-template-columns:110px minmax(0,1fr)}#toolsheet .catalogue .detailcard{flex-basis:145px}#toolsheet .catalogue .detailmain strong{max-width:127px}}

body>header{gap:12px;background:#080808}header .brand{display:flex;min-width:0;flex:0 1 230px;height:100%;transform:none}header .headerlogo{display:block;width:100%;height:100%;max-height:60px;object-fit:contain;object-position:left center}header #help{flex-shrink:0}@media(max-width:450px){header .brand{flex-basis:190px}header .headerlogo{max-height:52px}header #help{font-size:12px;padding:8px}}