/* Shared responsive page chrome. Survey is an intentional overlay, with no reserved slot. */
:root{--mobile-page-gap:16px;--mobile-title-size:28px;--mobile-action-size:44px;--home-post-radius:18px}
#mix>header{padding-right:0}
#mix>header #mixHelp{position:static;width:44px;min-width:44px;height:44px;flex:0 0 44px;padding:0;display:grid;place-items:center;border-radius:50%}
/* Normalize embedded admin page headings; keep forms and page-specific view tabs intact. */
.admin-panel-document .admin-page-header{display:block;padding:0 0 20px;margin:0 0 24px;border:0;border-bottom:1px solid var(--admin-line,#b18a4533);background:transparent}
.admin-panel-document .admin-page-header h1{font:700 32px/1.2 system-ui,sans-serif;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
.admin-panel-document .admin-page-header p{font:400 14px/1.5 system-ui,sans-serif;margin:8px 0 0;color:var(--admin-muted,#b1a58e)}
.admin-panel-document .admin-page-header .admin-kicker,.admin-panel-document .admin-page-header .kicker{font-size:11px;letter-spacing:.08em;margin:0 0 8px}
.admin-panel-document nav.admin-tabs[hidden]{display:none!important}
@media(max-width:1099px){
 /* A consistent brand/action row, with a page title below when needed. */
 body:not(.admin-console)>header,.gallery-header,.account-page .account-header{box-sizing:border-box;min-height:68px;padding:12px 16px;gap:12px;align-items:center}
 body[data-mode]>header{flex-wrap:wrap}
 body[data-mode]>header>.brand,.gallery-header .gallery-brand,.account-page .account-header>.brand,.social-header>a{font:700 20px/1.2 system-ui,sans-serif;letter-spacing:-.025em;text-decoration:none;min-width:0}
 body[data-mode=lab]>header>.brand{font-size:var(--mobile-title-size)}
 body[data-mode]>header>div{gap:8px;flex-wrap:wrap}
 body[data-mode]>header button,.gallery-header .header-links button,.account-header nav>a{box-sizing:border-box;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px}
 .gallery-header{flex-wrap:wrap}
 .gallery-header .gallery-brand{display:flex;align-items:center;gap:8px}
 .gallery-header .brand-symbol,.account-header .mark{width:32px;height:32px;flex:0 0 32px;font-size:20px;border-radius:10px}
 .gallery-header .gallery-brand small{font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.08em}
 .gallery-header .header-links{gap:8px;margin:0}
 body:has(>.social-shell){margin:0}
 body .social-shell{padding:16px 16px 100px}
 .social-shell .social-header{padding:0;gap:16px 8px;margin:0 0 24px;grid-template-columns:minmax(0,1fr) auto auto}
 .social-shell .social-header>a{white-space:normal;min-height:44px;display:flex;align-items:center}
 .social-shell .social-header>h1,body[data-mode] .intro h1,.account-page main h1{font:700 var(--mobile-title-size)/1.2 system-ui,sans-serif;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
 .social-header .main-language summary{min-width:44px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
 body[data-mode] main{padding-left:16px;padding-right:16px}
 body[data-mode] .intro{margin:8px 0 24px;gap:16px}
 body[data-mode] .intro h1{margin-bottom:8px}
 .account-page .account-header{flex-direction:row;flex-wrap:wrap}
 .account-page .account-header nav{display:flex;gap:8px;flex-wrap:wrap}
 .account-page main{padding-left:16px;padding-right:16px}
 /* Module back/title/help share one flexible row; tabs remain below it. */
 #mix,#org,#dress{padding-left:16px;padding-right:16px}
 #mix>header,#dress>header,#org>.org-heading{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;min-height:44px;padding:0 0 12px;margin:0 0 16px;background:transparent;border:0;border-bottom:1px solid var(--border,var(--ps-border,#b18a4533))}
 #mix>header h1,#dress>header h1,#org>.org-heading h1{font:700 var(--mobile-title-size)/1.2 system-ui,sans-serif;letter-spacing:-.025em;margin:0;min-width:0;overflow-wrap:anywhere}
 #mix>header>h1,#dress>header>h1,#org>.org-heading>div{flex:1;min-width:0}
 #mix>header>a,#dress>header>a,#org>.org-heading>a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;min-width:44px;max-width:42%;margin:0;white-space:normal;font-size:14px;line-height:1.35}
 #org>.org-heading #intro:empty{display:none}
 #mix>header #mixHelp{position:static;width:44px;min-width:44px;height:44px;flex:0 0 44px;padding:0;display:grid;place-items:center;border-radius:50%}
 /* Rounded mobile Notifications panel, matching regular Home Feed posts. */
 body #social-notifications{left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(var(--social-nav-height,62px) + 12px + env(safe-area-inset-bottom,0px));width:auto;height:auto;max-width:none;border-radius:var(--home-post-radius);box-sizing:border-box;padding:20px}
 .admin-panel-document .admin-page-header h1{font-size:var(--mobile-title-size)}
 .admin-panel-document .admin-page-header{padding-bottom:16px;margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){.social-header,.admin-page-header{scroll-behavior:auto}}

/* Shared dropdown arrow: keep clear of all rounded control borders. */
html body select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c9b890' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:right 16px center;padding-right:44px!important;box-sizing:border-box}
@media(forced-colors:active){html body select:not([multiple]):not([size]){appearance:auto;background-image:none}}