/* Banners is the shared Studio toolbar reference. Single source for all five modes: layout, dimensions and interaction. */
body.site-design :is(.banner-design-toolbar,.carousel-design-toolbar){display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:0 0 24px}
body.site-design :is(.banner-design-toolbar .field,.carousel-design-field,.carousel-design-toolbar .style-picker-field){display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;min-width:0;padding:0;text-align:left;font-size:14px;font-weight:400}
body.site-design :is(.banner-design-toolbar,.carousel-design-toolbar,.motion-design-controls) label{font-size:14px;font-weight:400;text-align:left}
html body.site-design :is(#banner-design,#banner-style,#carousel-design-select,#carousel-style-picker-select,#motion-animation,#motion-style-picker-select){box-sizing:border-box;width:190px;min-width:0;max-width:100%;height:44px;min-height:44px;padding:10px 12px;margin:0;border:1px solid var(--ui-border,#d4d5d7);border-radius:12px;background:var(--ui-field,#fff);color:var(--ui-text,#090909);font:inherit;font-size:14px;line-height:1.2}

/* Mode-specific placement; shared field appearance is defined below. */
body.site-design .carousel-design-toolbar #carousel-style-picker{width:auto;min-width:0;flex:0 1 auto;margin:0;padding:0;border:0}
body.site-design .carousel-design-toolbar .style-picker-heading{display:flex;gap:12px;padding:0;margin:0}
.carousel-design-toolbar .style-picker-field p{display:none}
.motion-design-controls{display:grid;grid-template-columns:auto 190px auto 190px minmax(0,1fr);column-gap:10px;align-items:center;border:0;padding:0;margin-bottom:24px}
.motion-design-controls .motion-animation-picker,.motion-design-controls #motion-style-picker,.motion-design-controls .style-picker-heading,.motion-design-controls .style-picker-field{display:contents}
.motion-design-controls label[for=motion-animation]{grid-area:1/1}
.motion-design-controls #motion-animation{grid-area:1/2}
.motion-design-controls label[for=motion-style-picker-select]{grid-area:1/3}
.motion-design-controls #motion-style-picker-select{grid-area:1/4}
.motion-design-controls #browse-motion-examples{grid-area:1/5;justify-self:start}
.motion-design-controls #motion-style-picker-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Contextual Font field: Imagery copy and Typography words share the inspector. */
body.site-design .motion-design-controls.font-in-inspector{grid-template-columns:auto 190px minmax(0,1fr)}
.motion-design-controls.font-in-inspector #browse-motion-examples{grid-area:1/3}
body.site-design .studio-settings .style-picker-field{padding:0;min-width:0}
body.site-design .studio-settings .style-picker-field label{font:inherit}
body.site-design .studio-settings .style-picker-field p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.site-design #motion-typography-font:not(:empty){margin-top:12px}
html body.site-design .studio-settings #motion-style-picker-select{width:100%;min-width:0;max-width:100%}
@media(min-width:761px){
 html body.site-design .studio-settings #motion-style-picker-select{height:36px;min-height:36px;padding:7px 10px;border-radius:8px;font-size:13px;line-height:20px}
}
@media(max-width:760px){
 body.site-design .studio-settings .style-picker-field{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin:12px 0}
 html body.site-design .studio-settings #motion-style-picker-select{height:44px;min-height:44px;font-size:16px}
}

/* Text actions stay text actions; generic filled-button hover must not hide labels. */
html body.site-design :is(#banner-browse,#carousel-browse-designs,#browse-motion-examples){display:inline-flex;align-items:center;justify-content:flex-start;width:auto;min-height:44px;margin:0;padding:10px 0;border:0;border-radius:4px;background:transparent;color:var(--ui-text,#090909);font:inherit;font-size:14px;line-height:1.2;text-align:left;text-decoration:none;white-space:nowrap;box-shadow:none;cursor:pointer}
html body.site-design :is(#banner-browse,#carousel-browse-designs,#browse-motion-examples):not(:disabled):not([aria-disabled=true]):hover{background:transparent;color:var(--ui-text,#090909);border-color:transparent;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;box-shadow:none}
html body.site-design :is(#banner-browse,#carousel-browse-designs,#browse-motion-examples):focus-visible{outline:2px solid var(--ui-text,#090909);outline-offset:4px;background:transparent;color:var(--ui-text,#090909)}
html body.site-design :is(#banner-browse,#carousel-browse-designs,#browse-motion-examples):disabled{opacity:.5;cursor:wait}
@media(min-width:1201px){
 body.site-design :is(.banner-design-toolbar,.carousel-design-toolbar){flex-wrap:nowrap}
 html body.site-design :is(#banner-browse,#carousel-browse-designs){flex-shrink:0}
 body.site-design .motion-design-controls{grid-template-columns:auto 190px auto 190px minmax(0,1fr);column-gap:10px;margin-bottom:24px}
 body.site-design .motion-design-controls label[for=motion-style-picker-select]{margin-left:8px}
 html body.site-design #browse-motion-examples{margin-left:8px}
}
@media(max-width:1200px){
 .motion-design-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;margin-bottom:16px}
 .motion-design-controls label[for=motion-animation]{grid-area:1/1}
 .motion-design-controls label[for=motion-style-picker-select]{grid-area:1/2}
 .motion-design-controls #motion-animation{grid-area:2/1}
 .motion-design-controls #motion-style-picker-select{grid-area:2/2}
 .motion-design-controls #browse-motion-examples{grid-area:3/1}
 body.site-design .motion-design-controls.font-in-inspector{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .motion-design-controls.font-in-inspector label[for=motion-animation]{grid-area:1/1 / 2/3}
 .motion-design-controls.font-in-inspector #motion-animation{grid-area:2/1 / 3/3}
 .motion-design-controls.font-in-inspector #browse-motion-examples{grid-area:3/1}
 body.site-design :is(.banner-design-toolbar,.carousel-design-toolbar){gap:8px 12px;margin-bottom:16px}
 body.site-design :is(.banner-design-toolbar .field,.carousel-design-toolbar .carousel-design-field,.carousel-design-toolbar #carousel-style-picker){flex:0 1 calc(50% - 6px);min-width:0}
 body.site-design :is(.banner-design-toolbar .field,.carousel-design-field,.carousel-design-toolbar .style-picker-field){flex-direction:column;align-items:stretch;gap:6px}
 body.site-design :is(.banner-design-toolbar,.carousel-design-toolbar,.motion-design-controls) label{font-size:13px}
 body.site-design .carousel-design-toolbar .style-picker-heading{display:block}
 html body.site-design :is(#banner-design,#banner-style,#carousel-design-select,#carousel-style-picker-select,#motion-animation,#motion-style-picker-select){width:100%}
 html body.site-design :is(#banner-browse,#carousel-browse-designs){flex-basis:auto}
}

/* Shared settings column across Motion, Carousel, Banners, Logo and Typography. */
body.site-design{--studio-settings-width:320px;--studio-settings-gap:40px}
@media(min-width:761px){
 body.site-design :is(.workspace,.banner-workspace,.website-workspace,.template-workspace){grid-template-columns:minmax(0,1fr) var(--studio-settings-width);column-gap:var(--studio-settings-gap)}
}

/* Shared treatment rails scale smoothly from 760 to 1240px, then keep the
   established desktop widths. Only phones switch to the treatment drawer. */
@media(min-width:761px){
 body.site-design :is(#studio[data-library-panel=true],#visual-carousel){--studio-library-width:clamp(180px,calc(25vw - 10px),300px);--studio-settings-width:clamp(240px,calc(16.6667vw + 113.333px),320px);--studio-settings-gap:clamp(12px,calc(2.5vw - 7px),24px);--studio-field-label-width:clamp(72px,calc(5vw + 34px),96px);grid-template-columns:var(--studio-library-width) minmax(0,1fr) var(--studio-settings-width);column-gap:var(--studio-settings-gap)}
 body.site-design #studio[data-library-panel=true]>#motion-library{grid-column:1;grid-row:1;min-width:0}
 body.site-design #studio[data-library-panel=true]>.motion-main{grid-column:2;grid-row:1;min-width:0}
 body.site-design #studio[data-library-panel=true]>.studio-settings{grid-column:3;grid-row:1}
}

/* Desktop panels start at the workspace top, independently of discovery controls. */
@media(min-width:761px){
 body.site-design #templates:has(#template-design:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) var(--studio-settings-width);grid-template-rows:max-content minmax(0,1fr);column-gap:var(--studio-settings-gap);align-items:start}
 body.site-design #templates:has(#template-design:not([hidden]))>#journey-shell{grid-column:1;grid-row:1;min-width:0}
 body.site-design #templates>#template-design:not([hidden]),
 body.site-design #template-design:not([hidden])>.template-workspace{display:contents}
 body.site-design #template-design:not([hidden]) .template-gallery{grid-column:1;grid-row:2;min-width:0}
 body.site-design #template-design:not([hidden]) #template-editor{grid-column:2;grid-row:1 / 3;align-self:start;margin-top:0}
}

@media(max-width:760px){
 body.site-design :is(.motion-design-controls,.banner-design-toolbar,.carousel-design-toolbar){row-gap:6px;margin-bottom:16px}
 body.site-design :is(.banner-design-toolbar .field,.carousel-design-field,.carousel-design-toolbar .style-picker-field,.motion-design-controls label){font-size:13px;line-height:1.4}
 body.site-design .carousel-design-toolbar{align-items:flex-start}
}

/* Treatment selection lives in the desktop rail or mobile navigation. */
body.site-design #studio[data-library-panel=true]>.motion-main>.motion-design-controls{display:none}

/* Shared settings inspector. Start with content, not a duplicate workspace title.
   Keep legacy heading nodes mounted for existing route/status integrations. */
body.site-design .studio-settings>:is(.studio-heading,.template-editor-heading,h2){display:none}
body.site-design .studio-settings{border-radius:16px;min-width:0}
/* Shared side panels use a flat surface in both light and dark themes. */
body.site-design :is(.studio-settings,.website-treatment){border:var(--studio-panel-border,1px solid var(--ui-border))}
body.site-design .studio-settings :is(.studio-heading,.template-editor-heading){padding:14px 16px;border-radius:15px 15px 0 0}
body.site-design .studio-settings :is(.studio-heading h2,.template-editor-heading h2),body.site-design .studio-settings>h2{font-size:16px;line-height:1.35;letter-spacing:0}
body.site-design .studio-settings>h2{padding:14px 16px;border-radius:15px 15px 0 0}
body.site-design .studio-settings :is(.upload-panel,.editor,.template-editor-content,.website-controls){padding:16px}
body.site-design .studio-settings .step-heading{margin-bottom:10px;gap:8px}
body.site-design .studio-settings .step-heading h3{font-size:14px}
body.site-design .studio-settings :is(.privacy,.format-help,.contrast-note,.banner-help,.template-note,.journey-help){font-size:12px;line-height:1.45;margin:8px 0 0}
body.site-design .studio-settings :is(.privacy,.contrast-note,.banner-help,.template-note,.journey-help):empty{display:none}
body.site-design .studio-settings :is(.banner-options,.carousel-global-settings){border-color:var(--ui-border);margin:12px 0 0}
body.site-design .studio-settings :is(.banner-options,.carousel-global-settings)>summary{font-size:13px;line-height:1.4;padding:10px 0;min-height:38px;cursor:pointer}
body.site-design .studio-settings :is(.banner-options,.carousel-global-settings)[open]>summary{margin-bottom:8px}
body.site-design .studio-settings .banner-field-heading{font-size:13px;margin:12px 0 8px}
body.site-design .studio-settings .banner-upload{border-radius:8px}
body.site-design .studio-settings .carousel-settings-tools:empty{display:none}
body.site-design .studio-settings .template-section-title{margin:12px 0 8px;font-size:11px}
body.site-design .studio-settings :is(.template-status,.website-status):empty{display:none}
body.site-design .studio-settings .banner-options>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:4px;background:transparent;color:var(--ui-text)}
body.site-design .studio-settings .banner-options>summary::-webkit-details-marker{display:none}
body.site-design .studio-settings :is(.banner-options,.carousel-global-settings)>summary:focus-visible{outline:2px solid var(--ui-text);outline-offset:3px}
body.site-design .studio-settings .banner-options>summary:hover{background:var(--ui-raised)}
body.site-design .studio-settings .banner-options>summary small{font-size:11px;color:var(--ui-muted);margin-left:6px}
body.site-design .studio-settings .banner-copy-chevron{font-size:18px;line-height:1;transition:transform .15s}
body.site-design .studio-settings .banner-help{margin:8px 0}
body.site-design .studio-settings .banner-options{border-top:1px solid var(--ui-border)}
body.site-design .studio-settings .banner-options[open] .banner-copy-chevron{transform:rotate(45deg)}
@media(min-width:761px){
 body.site-design .studio-settings .field{display:grid;grid-template-columns:var(--studio-field-label-width,96px) minmax(0,1fr);align-items:center;gap:8px;margin:0 0 8px;font-size:13px;line-height:1.35;min-width:0}
 body.site-design .studio-settings .field:has(textarea),body.site-design .studio-settings .field:has(#banner-size){display:flex;flex-direction:column;align-items:stretch;gap:8px}
 body.site-design .studio-settings :is(.two-fields,.template-pair,.banner-pair){display:block}
 html body.site-design .studio-settings :is(.field input:not([type=color]):not([type=range]),.field select,.colour-control){width:100%;max-width:100%;min-width:0;height:36px;min-height:36px;margin:0;padding:7px 10px;font-size:13px;line-height:20px;border-radius:8px;background:var(--ui-field);color:var(--ui-text)}
 html body.site-design .studio-settings .field textarea{width:100%;min-width:0;min-height:64px;max-height:260px;margin:0;padding:10px;font-size:14px;line-height:1.45;border-radius:8px;resize:vertical;background:var(--ui-field);color:var(--ui-text)}
 html body.site-design .studio-settings .colour-control{display:flex;align-items:center;gap:8px;padding:5px 8px}
 html body.site-design .studio-settings .field input[type=color]{height:26px;min-height:26px;width:100%;padding:2px;border-radius:5px;border:1px solid var(--ui-border);background:var(--ui-field)}
 html body.site-design .studio-settings .colour-control input[type=color]{width:24px;flex:0 0 24px;height:24px;padding:0;border:0}
 body.site-design .studio-settings .colour-control>span{font-size:12px}
 body.site-design .studio-settings :is(.dropzone,.banner-upload){padding:14px 10px;gap:5px;border-radius:8px}
 body.site-design .studio-settings .dropzone .upload-mark{font-size:24px;line-height:1}
 body.site-design .studio-settings .dropzone strong{font-size:14px}
 body.site-design .studio-settings .dropzone>span:not(.upload-mark){font-size:11px}
 body.site-design .studio-settings :is(.slide-tools,.template-actions){gap:5px;flex-wrap:wrap;margin:8px 0 12px}
 body.site-design .studio-settings .slide-tools button{font-size:12px;min-height:32px;padding:6px 8px}
 body.site-design .studio-settings .text-button{font-size:12px;min-height:32px}
 body.site-design .studio-settings .settings-secondary-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 :root[data-studio-theme=dark] body.site-design .studio-settings :is(.field input:not([type=color]):not([type=range]),.field select,.field textarea,.colour-control){border-color:transparent}
 :root[data-studio-theme=dark] body.site-design .studio-settings :is(.field input,.field select,.field textarea):focus{border-color:var(--ui-accent)}
}
@media(max-width:760px){
 html body.site-design .studio-settings :is(.field input:not([type=range]):not([type=file]),.field select,.colour-control){min-height:44px}
 html body.site-design .studio-settings :is(.field input:not([type=color]):not([type=range]),.field select,.field textarea){font-size:16px}
 body.site-design .studio-settings :is(.banner-options,.carousel-global-settings)>summary{min-height:44px}
 html body.site-design .studio-settings .colour-control{height:44px;min-height:44px;padding:0 4px;gap:6px}
 html body.site-design .studio-settings .colour-control .studio-colour-well{width:44px;min-width:44px;height:44px;flex:0 0 44px}
 html body.site-design .studio-settings .colour-control input[type=color]{width:44px;min-width:44px;height:44px;flex:0 0 44px}
}

@media(prefers-reduced-motion:reduce){body.site-design .studio-settings .banner-copy-chevron{transition:none}}

body.site-design .studio-settings :is(#motion-copy-help,#template-copy-help){margin:0 0 12px;font-size:11px;line-height:1.4;color:var(--ui-muted)}

/* One bounded desktop inspector, shared by all active tools and archived banners.
   JS measures the current header/panel/dock bounds; the fallback also reserves
   the existing dock space before the first layout pass. Mobile stays stacked. */
@media(min-width:761px){
 body.site-design :is(.studio-settings,#website-legacy-editor .website-treatment){position:sticky;top:var(--studio-inspector-top,16px);align-self:start;min-height:0;max-height:var(--studio-inspector-height,calc(100dvh - 101px - var(--motion-export-space,0px) - 16px));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scroll-padding-block:12px}
 body.site-design :is(.studio-settings,#website-legacy-editor .website-treatment) :is(input,select,textarea,button,summary){scroll-margin-block:12px}
}

/* Every desktop treatment rail shares the inspector's measured scroll boundary. */
@media(min-width:761px){
 body.site-design #studio[data-library-panel=true]>#motion-library{position:sticky;top:var(--studio-inspector-top,16px);align-self:start;min-height:0;max-height:var(--studio-inspector-height,calc(100dvh - 101px - var(--motion-export-space,0px) - 16px));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scroll-padding-block:12px}
 body.site-design #studio[data-library-panel=true]>#motion-library :is(button,summary){scroll-margin-block:12px}
}


/* Compact Studio shell. Long content scrolls within its workspace, not behind
   the fixed action dock. Normal document flow remains available before JS and
   on mobile; public pages do not have this shell marker. */
body.site-design:has(main.studio-main) .compact-studio-header{padding-left:16px;padding-right:16px}
body.site-design:has(main.studio-main) .motion-export-dock{left:max(16px,calc((100vw - 1888px)/2));right:max(16px,calc((100vw - 1888px)/2))}
@media(min-width:761px){
 body.site-design:has(main.studio-main[data-studio-shell=true]){display:flex;flex-direction:column;height:100dvh;min-height:0;padding-bottom:0}
 body.site-design:has(main.studio-main[data-studio-shell=true])>.workspace-header{flex:none}
 body.site-design main.studio-main[data-studio-shell=true]{flex:1;min-height:0;width:100%;margin:0 auto;padding-bottom:16px;overflow:hidden}
 main.studio-main[data-studio-shell=true]>:is(#motion-workspace,#templates,#website,#font-workspace){height:100%;min-height:0;overflow:auto;overscroll-behavior-y:contain;scroll-padding-block:12px}
 main.studio-main[data-studio-shell=true]>#motion-workspace{overflow:hidden}
 main.studio-main[data-studio-shell=true] #studio{height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
 main.studio-main[data-studio-shell=true] #studio>.motion-main{height:100%;min-height:0;overflow:auto;overscroll-behavior-y:contain;scroll-padding-block:12px}
 body.site-design main.studio-main[data-studio-shell=true] #studio>:is(.studio-settings,#motion-library){position:relative;top:auto;max-height:100%}
 body.site-design main.studio-main[data-studio-shell=true] #templates:has(#template-design:not([hidden])){overflow:hidden}
 body.site-design main.studio-main[data-studio-shell=true] #template-design:not([hidden]) .template-gallery{height:100%;min-height:0;overflow:auto;overscroll-behavior-y:contain;scroll-padding-block:12px}
 body.site-design main.studio-main[data-studio-shell=true] #template-design:not([hidden]) #template-editor{position:relative;top:auto;max-height:100%}
 main.studio-main[data-studio-shell=true] :is(.motion-design-controls,.carousel-design-toolbar) :focus-visible{outline-offset:-2px}
 /* Archived workspaces retain their full content and sticky local inspector. */
 body.site-design main.studio-main[data-studio-shell=true]>:is(#website,#font-workspace) :is(.studio-settings,.website-treatment){top:8px}
}
@media(max-width:760px){
 body.site-design:has(main.studio-main) .compact-studio-header{padding-left:12px;padding-right:12px}
 body.site-design:has(main.studio-main) .motion-export-dock{left:12px;right:12px}
}


/* Route-correct first paint, before the existing router takes over hidden state. */
html[data-studio-boot=true]:not([data-studio-route=motion]):not([data-studio-route=logo]):not([data-studio-route=typography]) #motion-workspace{display:none!important}
html[data-studio-boot=true][data-studio-route=carousel] #templates[hidden],
html[data-studio-boot=true][data-studio-route=banner] #website[hidden],
html[data-studio-boot=true][data-studio-route=font] #font-workspace[hidden]{display:block!important}
html[data-studio-boot=true]:is([data-studio-route=logo],[data-studio-route=typography]) #motion-images-panel{display:none!important}
html[data-studio-boot=true][data-studio-route=logo] #motion-logo-panel[hidden],
html[data-studio-boot=true][data-studio-route=typography] #motion-typography-panel[hidden]{display:block!important}
#studio[data-controls-loading=true]>.studio-settings>.editor{display:none}
#motion-controls-loading{padding:16px;font-size:13px;line-height:1.4;color:var(--ui-muted)}
#motion-controls-loading[hidden],#studio:not([data-controls-loading=true]) #motion-controls-loading{display:none!important}
/* Match the existing selected tab while the parser is still building the body. */
html[data-studio-boot=true] body.site-design .compact-studio-header .workspace-modes>a[aria-current=page]{background:transparent;color:var(--ui-text);border-color:transparent}
html[data-studio-boot=true][data-studio-route=motion] #motion-tab,
html[data-studio-boot=true][data-studio-route=logo] #logo-tab,
html[data-studio-boot=true][data-studio-route=typography] #typography-tab,
html[data-studio-boot=true][data-studio-route=carousel] #templates-tab{background:#090909;color:#fff;border-color:transparent}
html[data-studio-boot=true][data-studio-theme=dark][data-studio-route=motion] #motion-tab,
html[data-studio-boot=true][data-studio-theme=dark][data-studio-route=logo] #logo-tab,
html[data-studio-boot=true][data-studio-theme=dark][data-studio-route=typography] #typography-tab,
html[data-studio-boot=true][data-studio-theme=dark][data-studio-route=carousel] #templates-tab{background:#f7f8f9;color:#090909;border-color:transparent}

/* Carousel already exposes its initial readiness; keep that local to its route. */
#templates:has(>#journey-shell[aria-busy=true])>:is(#journey-shell,#template-design){display:none!important}
#carousel-initial-loading{grid-column:1/-1;grid-row:1;padding:16px 0;font-size:13px;line-height:1.4;color:var(--ui-muted)}
#templates:not(:has(>#journey-shell[aria-busy=true]))>#carousel-initial-loading{display:none}

/* The pre-mounted rail moves into the mobile dialog; never flash above canvas. */
@media(max-width:760px){#studio[data-library-panel=true]>#motion-library{display:none}}

/* Shared quality choices affect downloads only; the working format stays fixed. */
body.site-design .studio-settings label.export-quality-field,body.site-design label.export-quality-field{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;font-size:14px;font-weight:400;line-height:1.4;text-transform:none;letter-spacing:normal}
body.site-design .export-quality-field select{box-sizing:border-box;width:100%;min-width:0;min-height:36px;font:inherit;color:var(--ui-text);background-color:var(--ui-field);border:1px solid var(--ui-border);border-radius:8px;padding:7px 32px 7px 12px}
body.site-design .export-quality-field select:focus-visible{outline:2px solid var(--ui-text);outline-offset:2px}
body.site-design .export-quality-help{font-size:12px;line-height:1.5;color:var(--ui-muted);margin:0 0 12px}
@media(max-width:760px){body.site-design .export-quality-field select{min-height:44px;font-size:16px}}