/* Header geometry is available before the editor modules initialize. */
.mobile-studio-switch,.mobile-studio-menu{display:none}
html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch{display:none}
body.mobile-studio-ready .mobile-menu-fallback{display:none}
@media(max-width:760px){
 html body.site-design .compact-studio-header{display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:64px;margin:0;position:relative}
 body.site-design .compact-studio-header .studio-identity{display:contents}
 body.site-design .compact-studio-header .workspace-brand{margin:0;flex:0 0 44px}
 body.site-design .compact-studio-header .workspace-brand .brand-art{width:44px;height:auto}
 body.site-design .compact-studio-header>.workspace-navigation,body.site-design .compact-studio-header>.studio-theme-toggle,body.site-design .compact-studio-header .workspace-modes{display:none}
 body.site-design .compact-studio-header .mobile-studio-switch{display:block;margin-left:auto;flex:1 1 152px;max-width:190px;min-width:0}
 body.site-design .compact-studio-header #mobile-studio-mode{height:44px;width:100%;min-width:0;margin:0;padding:8px 24px 8px 10px;font:inherit;font-size:14px;border:1px solid var(--ui-border,#d4d5d7);border-radius:999px;background-color:var(--ui-page,#fff);color:var(--ui-text,#090909)}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch:not([hidden]){display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:6px;min-width:44px;min-height:44px;margin:0;padding:8px 9px;border:1px solid var(--ui-border,#d4d5d7);border-radius:999px;background:var(--ui-page,#fff);color:var(--ui-text,#090909);font:inherit;font-size:13px;line-height:20px;font-weight:400;text-decoration:none;white-space:nowrap}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch>svg{display:block;flex:none;width:18px;height:18px}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch:hover:not(:disabled){background:var(--ui-raised,#f7f8f9);color:var(--ui-text,#090909);border-color:var(--ui-text,#090909);text-decoration:none}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch:disabled{opacity:.5;cursor:wait}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch:focus-visible{outline:2px solid var(--ui-text,#090909);outline-offset:3px}
 html[data-studio-route=carousel] body.site-design .compact-studio-header>#browse-motion-examples.mobile-treatment-switch,html[data-studio-route=banner] body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch,html[data-studio-route=font] body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch{display:none}
 body.site-design .compact-studio-header .mobile-studio-menu{display:block;position:static;flex:0 0 44px}
 body.site-design .compact-studio-header .mobile-studio-menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;cursor:pointer;list-style:none;border:1px solid var(--ui-border,#d4d5d7);border-radius:50%}
 .mobile-studio-menu>summary::-webkit-details-marker{display:none}
 body.site-design .compact-studio-header #mobile-menu-panel{position:absolute;top:calc(100% - 1px);right:12px;left:12px;z-index:90;max-height:calc(100dvh - 150px);overflow:auto;overscroll-behavior:contain;padding:18px;background:var(--ui-panel,#fff);color:var(--ui-text,#090909);border:1px solid var(--ui-border,#d4d5d7);border-radius:18px;box-shadow:0 14px 30px #0002}
 body.site-design .compact-studio-header #mobile-menu-panel a{display:flex;align-items:center;padding:12px;min-height:44px;border-radius:12px}
 body.site-design .compact-studio-header #mobile-menu-panel .mobile-menu-fallback{gap:0}
 body.site-design .compact-studio-header :is(.mobile-studio-menu>summary,#mobile-studio-mode):focus-visible{outline:2px solid currentColor;outline-offset:3px}
 body.mobile-studio-ready .workspace{padding-top:0}
 body.mobile-studio-ready #mobile-menu-panel .workspace-navigation{display:grid;gap:0;margin:12px 0;width:100%;font-size:15px}
 body.mobile-studio-ready #mobile-menu-panel [data-nav-studio],body.mobile-studio-ready #mobile-menu-panel .account-menu>summary{display:none}
 body.mobile-studio-ready #mobile-menu-panel .account-menu-links{position:static;width:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;display:grid}
 body.mobile-studio-ready #mobile-menu-panel .studio-theme-toggle{display:flex;width:100%;justify-content:flex-start;margin:0;min-height:44px}
 body.mobile-studio-ready #mobile-menu-panel .studio-theme-toggle span{display:inline}
 body.mobile-studio-ready #mobile-menu-panel .project-file{display:grid;gap:8px;min-width:0;padding-bottom:12px;border-bottom:1px solid var(--ui-border,#d4d5d7)}
 body.mobile-studio-ready #mobile-menu-panel .project-file input{width:100%;min-width:0;min-height:44px;font-size:16px}
 body.mobile-studio-ready .motion-export-dock.studio-action-dock{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;left:12px;right:12px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0}
 body.mobile-studio-ready .studio-action-dock #project-bar{display:contents}
 body.mobile-studio-ready .studio-action-dock .project-actions{grid-column:1;grid-row:1;gap:8px}
 body.mobile-studio-ready .studio-action-dock #project-save{min-height:44px;font-size:0;padding:10px 18px}
 body.mobile-studio-ready .studio-action-dock #project-save::after{content:'Save';font-size:14px}
 body.mobile-studio-ready .studio-action-dock #project-bar[aria-busy=true] #project-save::after{content:'Saving…'}
 body.mobile-studio-ready .studio-action-dock #motion-export-controls{display:contents}
 body.mobile-studio-ready .studio-action-dock #export{grid-area:1/2;min-height:44px;min-width:0;width:100%;padding:10px 12px;font-size:14px;justify-content:center;margin:0}
 body.mobile-studio-ready .studio-action-dock #export-note{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.mobile-studio-ready .studio-action-dock :is(#progress-wrap,#download){grid-column:1/-1;grid-row:auto}
 body.mobile-studio-ready .studio-action-dock .project-actions.has-save-error{grid-column:1/-1;flex-wrap:wrap}
 body.mobile-studio-ready .studio-action-dock:has(.has-save-error) #export{grid-row:2;grid-column:1/-1}
 body.mobile-studio-ready .studio-action-dock:not(:has(#motion-export-controls:not([hidden]))){grid-template-columns:1fr}
 body.mobile-studio-ready .studio-action-dock:not(:has(#motion-export-controls:not([hidden]))) .project-actions{justify-content:flex-end}
 body.mobile-studio-ready :is(.mobile-studio-menu>summary,#mobile-studio-mode):focus-visible{outline:2px solid currentColor;outline-offset:3px}
}

@media(max-width:760px){
 body.mobile-studio-ready .studio-action-dock:has(#banner-actions:not([hidden])){grid-template-columns:auto minmax(0,1fr)}
 body.mobile-studio-ready .studio-action-dock:has(#banner-actions:not([hidden])) .project-actions{justify-content:flex-start}
 body.mobile-studio-ready .studio-action-dock #banner-actions{display:contents}
 body.mobile-studio-ready .studio-action-dock #banner-export{grid-area:1/2;min-height:44px;width:100%;padding:10px 12px;font-size:13px;margin:0;gap:8px}
 body.mobile-studio-ready .studio-action-dock #banner-export-summary{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.mobile-studio-ready .studio-action-dock:has(.has-save-error) #banner-export{grid-row:2;grid-column:1/-1}
}

/* One desktop header for the creation modes and account navigation. */
@media(min-width:761px){
 body.site-design .compact-studio-header{display:flex;align-items:center;gap:24px;min-height:93px;padding:24px 40px}
 body.site-design .compact-studio-header .studio-identity{display:contents}
 body.site-design .compact-studio-header .workspace-modes{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;margin:0;padding:0;border:0;min-width:0}
 body.site-design .compact-studio-header :is(.workspace-modes>a,.workspace-navigation>a,.account-menu>summary){font-size:13px;line-height:20px}
 body.site-design .compact-studio-header .workspace-modes>a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:34px;padding:6px 12px;white-space:nowrap}
 body.site-design .compact-studio-header .workspace-modes>a:focus-visible{outline-width:2px;outline-offset:2px}
 body.site-design .compact-studio-header .workspace-navigation{margin:0 0 0 auto;gap:4px;white-space:nowrap}
 body.site-design .compact-studio-header [data-nav-studio]{display:none}
 body.site-design .compact-studio-header .studio-theme-toggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;flex:none;margin:0}
 body.site-design .compact-studio-header .studio-theme-toggle span{display:none}
}
@media(min-width:761px) and (max-width:1000px){
 body.site-design .compact-studio-header{gap:10px;padding-left:24px;padding-right:24px}
 body.site-design .compact-studio-header .workspace-modes>a,body.site-design .compact-studio-header .workspace-navigation>a,body.site-design .compact-studio-header .account-menu>summary{padding-left:8px;padding-right:8px}
}

/* Filled editor actions share the Save project scale; labels determine width. */
body.site-design:has(.compact-studio-header){--studio-action-height:40px;--studio-action-font:12px;--studio-action-padding:9px 14px}
body.site-design:has(.compact-studio-header) :is(.export-button,.journey-primary,.download-button,.website-download,.website-original,.export-access-actions a,.export-access-actions button,.template-actions button,.template-actions label,.dialog-actions button,.project-actions button){min-height:var(--studio-action-height);padding:var(--studio-action-padding);font-size:var(--studio-action-font);line-height:20px;gap:10px;box-sizing:border-box}
body.site-design:has(.compact-studio-header) :is(#export,#banner-export,#website-export,#project-save,#project-projects){min-height:var(--studio-action-height);padding:var(--studio-action-padding);font-size:var(--studio-action-font);line-height:20px;gap:10px}
body.site-design:has(.compact-studio-header) .export-button>span[aria-hidden=true]{font-size:20px;line-height:20px}
@media(max-width:760px){
 body.site-design:has(.compact-studio-header){--studio-action-height:44px;--studio-action-font:14px;--studio-action-padding:10px 14px}
 body.site-design.mobile-studio-ready:has(.compact-studio-header) .studio-action-dock #project-save{font-size:0;line-height:0}
 body.site-design.mobile-studio-ready:has(.compact-studio-header) .studio-action-dock #project-save::after{font-size:var(--studio-action-font);line-height:20px}
}

/* Route anchors keep the shared header visible when entering the Studio. */
body.site-design :is(#studio,#templates){scroll-margin-top:93px}
@media(max-width:760px){body.site-design :is(#studio,#templates){scroll-margin-top:64px}}

/* Carousel exposes its existing PDF/PNG exports through the same compact mobile dock. */
@media(max-width:760px){
 body.mobile-studio-ready .studio-action-dock:has(#carousel-export-controls:not([hidden])){grid-template-columns:auto minmax(0,1fr)}
 body.mobile-studio-ready .studio-action-dock:has(#carousel-export-controls:not([hidden])) .project-actions{justify-content:flex-start}
 body.mobile-studio-ready .studio-action-dock #carousel-export-controls:not([hidden]){display:contents}
 body.mobile-studio-ready .studio-action-dock #carousel-export{grid-area:1/2;min-width:0;width:100%;min-height:var(--studio-action-height);padding:var(--studio-action-padding);font-size:var(--studio-action-font);line-height:20px;justify-content:center;margin:0;gap:10px}
 body.mobile-studio-ready .studio-action-dock #carousel-export-status{grid-column:1/-1;margin:0;font-size:12px;line-height:1.4;color:var(--ui-muted);overflow-wrap:anywhere}
 body.mobile-studio-ready .studio-action-dock:has(.has-save-error) #carousel-export{grid-row:2;grid-column:1/-1}
}

@media(max-width:760px){
 body.mobile-studio-ready .studio-action-dock>#journey-save-status:not([hidden]){grid-column:1/-1;grid-row:2;margin:0;font-size:10px;line-height:12px}
 body.mobile-studio-ready .studio-action-dock:has(.has-save-error)>#journey-save-status:not([hidden]){grid-row:3}
}

@media(min-width:761px){
 body.site-design .studio-action-dock:has(#carousel-export-controls:not([hidden])){display:flex;align-items:center;gap:24px}
 body.site-design .studio-action-dock:has(#carousel-export-controls:not([hidden])) #project-bar{flex:1;min-width:0}
 body.site-design #carousel-export-controls:not([hidden]){flex:0 0 auto;max-width:320px}
 body.site-design #carousel-export{min-height:44px;margin:0}
 body.site-design #carousel-export-status{font-size:12px;max-width:300px;color:var(--ui-muted)}
}

/* Keep the mode name and Treatments label readable on the narrowest phones. */
@media(max-width:360px){
 body.site-design .compact-studio-header #mobile-studio-mode{padding-left:8px;padding-right:20px;font-size:13px}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch:not([hidden]){gap:0;padding-left:8px;padding-right:8px;font-size:12px}
 html body.site-design .compact-studio-header>:is(#browse-motion-examples,#browse-carousel-treatments).mobile-treatment-switch>svg{display:none}
}

/* Project navigation and saving stay available together in the shared dock. */
body.site-design .studio-action-dock .project-file{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
body.site-design .studio-action-dock .project-file label{white-space:nowrap}
body.site-design .studio-action-dock #project-projects{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:var(--studio-action-height,40px);padding:var(--studio-action-padding,9px 14px);gap:8px;border:1px solid var(--ui-border);border-radius:var(--ds-pill,999px);background:var(--ui-raised);color:var(--ui-text);font:inherit;font-size:var(--studio-action-font,12px);line-height:20px;text-decoration:none;white-space:nowrap;box-sizing:border-box}
body.site-design .studio-action-dock #project-projects>svg{width:16px;height:16px;flex:none}
body.site-design .studio-action-dock #project-projects:hover{background:var(--ui-text);color:var(--ui-page);border-color:var(--ui-text)}
body.site-design .studio-action-dock #project-projects:focus-visible{outline:2px solid var(--ui-text);outline-offset:3px}
@media(max-width:360px){
 body.site-design.mobile-studio-ready .motion-export-dock.studio-action-dock{grid-template-columns:minmax(0,1fr)}
 body.site-design.mobile-studio-ready .studio-action-dock .project-actions{grid-column:1/-1;justify-content:space-between}
 body.site-design.mobile-studio-ready .studio-action-dock :is(#export,#banner-export,#carousel-export){grid-column:1/-1;grid-row:2}
 body.site-design.mobile-studio-ready .studio-action-dock:has(#carousel-export-controls:not([hidden]))>#journey-save-status:not([hidden]){grid-row:3}
}