/* Cross-platform ergonomics. Colors and feature layouts remain owned by their
   existing components. The native shell applies safe areas outside its iframe. */
:root{
 --mw-shell-width:1280px;
 --mw-page-gutter:24px;
 --mw-safe-top:env(safe-area-inset-top,0px);
 --mw-safe-right:env(safe-area-inset-right,0px);
 --mw-safe-bottom:env(safe-area-inset-bottom,0px);
 --mw-safe-left:env(safe-area-inset-left,0px);
 --mw-header-height:65px;
 --mw-viewport-height:100dvh;
}
html[data-miniapp]{--mw-safe-top:0px;--mw-safe-right:0px;--mw-safe-bottom:0px;--mw-safe-left:0px}
html{scroll-padding-top:calc(var(--mw-header-height) + var(--mw-safe-top) + 16px)}
body[data-site-shell=unified]{padding-inline:var(--mw-safe-left) var(--mw-safe-right)}
.mw-header{height:calc(var(--mw-header-height) + var(--mw-safe-top));padding-top:var(--mw-safe-top)}
#experience-root{min-width:0}
/* Shared supporting content follows the footer's inner edges, outside page renders. */
.mw-global-help{
 width:calc(100% - 2 * var(--mw-page-gutter));
 max-width:calc(var(--mw-shell-width) - 2 * var(--mw-page-gutter));
 margin-inline:auto;
}
.mw-global-help>.sj-help{min-width:0}
.mw-chat-page>.mw-global-help,
body:has(.mw-voice-page)>.mw-global-help,
body:has(.mw-studio-landing-scope)>.mw-global-help{display:none}
.sj-help>div,.sj-help>nav{min-width:0}
.sj-help a{overflow-wrap:anywhere}
@media(max-width:639px){:root{--mw-page-gutter:16px}}
#experience-root :is(input,textarea,select){min-width:0}
#experience-root :is(h1,h2,h3,p,label),.mw-toolbar,.mw-row{overflow-wrap:anywhere}
:is(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
 outline:3px solid var(--site-focus);outline-offset:3px;
}
.mw-question:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 12%,transparent)}
.mw-question textarea:focus-visible{outline:0}
:is(button,summary,a){touch-action:manipulation}
.mw-header>nav>a[aria-current=page]{color:var(--primary-ink);background:var(--soft)}
.mw-header nav>details>div{
 max-height:calc(var(--mw-viewport-height) - var(--mw-header-height) - var(--mw-safe-top) - 24px);
 overflow-y:auto;overscroll-behavior:contain;
}
#experience-dialog{
 max-width:calc(100% - var(--mw-safe-left) - var(--mw-safe-right) - 32px);
 max-height:calc(var(--mw-viewport-height) - var(--mw-safe-top) - var(--mw-safe-bottom) - 32px);
 overscroll-behavior:contain;scroll-padding-block:24px;
}
#experience-dialog[data-spread-picker=true]{
 height:var(--mw-viewport-height);max-height:var(--mw-viewport-height);
 padding-top:calc(24px + var(--mw-safe-top));padding-bottom:calc(24px + var(--mw-safe-bottom));
}
#experience-dialog>.mw-close{min-width:44px;min-height:44px;display:grid;place-items:center;line-height:1}
#mw-notice{bottom:calc(24px + var(--mw-safe-bottom));overflow-wrap:anywhere}
.mw-header-popover,#mw-music-popover,.mw-currency-options{
 max-height:calc(var(--mw-viewport-height) - var(--mw-safe-top) - var(--mw-safe-bottom) - 24px);
 overscroll-behavior:contain;
}
.mw-loading{padding:clamp(32px,8vw,90px) 20px}
.mw-tabs>button{min-width:0;overflow-wrap:anywhere}
.mw-position-input>input,.mw-row>span,.mw-profile-top>div{min-width:0}
.mw-profile-details>[data-profile]>span:first-child{flex-shrink:0;max-width:45%}
.mw-profile-details>[data-profile]>span:last-child{text-align:end;overflow-wrap:anywhere}
@media(max-width:1119px){
 :root{--mw-header-height:60px}
 .mw-header .mw-header-tools>button,.mw-header #mw-account summary{width:44px;height:44px;min-width:44px;padding:10px}
 .mw-header #mw-account>a{min-height:44px;height:auto}
 .mw-header.is-open>nav{
  top:calc(var(--mw-header-height) + var(--mw-safe-top));
  max-height:calc(var(--mw-viewport-height) - var(--mw-header-height) - var(--mw-safe-top));
  padding-bottom:calc(16px + var(--mw-safe-bottom));
  padding-left:max(16px,var(--mw-safe-left));padding-right:max(16px,var(--mw-safe-right));
 }
 .mw-header.is-open>nav>details>div{max-height:none;overflow:visible}
}
@media(max-width:760px),(pointer:coarse){
 /* Form and reference-page controls must remain finger-sized across templates. */
 #experience-root :is(button,a.mw-primary,input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select),
 #experience-dialog :is(button,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select){
  min-height:44px;
 }
 #experience-root :is(button,a.mw-primary){white-space:normal}

 #experience-root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select),
 #experience-dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select){font-size:16px}
 .mw-language-options button,.mw-mobile-controls button{height:auto;min-height:44px}
 .mw-currency-options>[role=option],.mw-header details>div>a{min-height:44px}
 .mw-draw-setting{min-height:44px}
 .mw-chip,.mw-tabs>button,.mw-toolbar>button,.mw-actions>button,.mw-actions>a,
 .mw-pricing-currency>button,.mw-period-toggle>button,.mw-profile .mw-row button,
 .mw-history-ranges button,.mw-history-actions button,.mw-history-actions a,
 .mw-question-footer button,.mw-spread-head>button{min-height:44px}
 .mw-history-actions button,.mw-question-footer button{min-width:44px}
 .mw-chat-content>header .mw-chat-mobile-back,.mw-chat-content>header .mw-chat-mobile-history,
 .mw-chat-content>header .mw-chat-mobile-new,.mw-chat-form button{min-width:44px;min-height:44px;height:auto}
 .mw-chat-content>header .mw-chat-mobile-back{display:grid;place-items:center;line-height:1}
 .mw-chat-content>header{height:auto;min-height:64px;flex-wrap:wrap}
 .mw-chat-form{gap:8px;align-items:flex-end}
 .mw-benefits{flex-wrap:wrap;row-gap:6px}
 .mw-tabs{flex-wrap:wrap}
 .mw-tabs>button{flex:1 1 100px}
 .mw-spread-head{flex-wrap:wrap}
 .mw-mode{flex-wrap:wrap}
 .mw-row{gap:12px}
 .mw-footer-inner{padding-bottom:calc(24px + var(--mw-safe-bottom))}
}
@media(max-width:380px){
 .mw-header>.mw-brand{flex:1 1 auto;min-width:0}
 .mw-header .mw-brand-name{font-size:14px}
 .mw-language-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mw-profile .mw-row{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .mw-slot button:hover:not(:disabled),.mw-deck button:hover img,.mw-deck button:focus-visible img{transform:none}
}


/* Keep the shared account navigation above a viewport-wide scrim. */
html:has(.mw-account-menu[open]){overflow:hidden;scrollbar-gutter:stable}
.mw-header #mw-account .mw-account-backdrop{
 position:fixed;inset:0;z-index:50;background:rgb(15 18 28 / .44);cursor:default;
}
.dark .mw-header #mw-account .mw-account-backdrop{background:rgb(0 0 0 / .6)}
.mw-header #mw-account .mw-account-menu[open]>summary{position:relative;z-index:61;box-shadow:0 0 0 4px var(--surface)}
/* Compact identity, grouped destinations and a persistent sign-out row. */
.mw-header #mw-account .mw-account-panel{
 inset-block-start:calc(100% + 24px);inset-inline-end:0;inset-inline-start:auto;
 width:304px;min-width:0;max-width:calc(100vw - 24px);
 max-height:calc(var(--mw-viewport-height) - var(--mw-header-height) - var(--mw-safe-top) - var(--mw-safe-bottom) - 24px);
 padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;text-align:start;
 border-radius:14px;box-shadow:0 16px 48px rgb(0 0 0 / .18),0 2px 8px rgb(0 0 0 / .06);color:var(--fg);z-index:60;
}
.mw-account-heading{display:flex;align-items:center;gap:10px;padding:12px;flex:none;border-bottom:1px solid var(--line)}
.mw-account-avatar{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--primary-ink);font-size:14px;font-weight:700}
.mw-account-identity{min-width:0;flex:1}
.mw-account-identity strong,.mw-account-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-account-identity strong{font-size:14px;line-height:20px;font-weight:600}
.mw-account-identity small{font-size:12px;line-height:20px;color:var(--muted-ink)}
.mw-header #mw-account .mw-account-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;border:0;background:transparent;color:var(--muted-ink);border-radius:8px}
.mw-account-links{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px;scroll-padding-block:8px}
.mw-account-group{padding:4px 0}
.mw-account-group+.mw-account-group{border-top:1px solid var(--line)}
.mw-account-group [data-account-platform]{display:contents}
.mw-header #mw-account .mw-account-link{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);font-size:14px;font-weight:400;line-height:20px;text-align:start;text-decoration:none;white-space:normal}
.mw-account-link>.mw-ui-icon{flex:0 0 20px;color:var(--muted-ink);stroke-width:1.7}
.mw-account-link>span{min-width:0;flex:1;overflow-wrap:anywhere}
.mw-account-tier{font-size:11px;line-height:18px;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--primary-ink);font-weight:600}
.mw-header #mw-account :is(.mw-account-link,.mw-account-close):hover{background:var(--soft);color:var(--primary-ink)}
.mw-header #mw-account .mw-account-link[aria-current=page]{background:var(--soft);color:var(--primary-ink);font-weight:600}
.mw-account-link[aria-current=page]>.mw-ui-icon{color:inherit}
.mw-account-footer{flex:none;padding:6px 8px;border-top:1px solid var(--line)}
.mw-header #mw-account [data-signout]:hover{color:var(--danger-ink)}
.mw-account-panel :focus-visible{outline-offset:-3px}
@media(max-width:420px){
 .mw-header #mw-account .mw-account-panel{position:fixed;top:calc(var(--mw-header-height) + var(--mw-safe-top) + 8px);inset-inline:12px;width:auto;max-width:none}
}

/* File inputs have an intrinsic width that must not size a narrow dialog. */
#experience-dialog :is(form,.mw-field){min-width:0;max-width:100%}
#experience-dialog input[type=file]{box-sizing:border-box;min-width:0;width:100%;max-width:100%}

.mw-preference-status{font-size:14px;line-height:1.5;margin:8px 0;color:var(--muted-ink);overflow-wrap:anywhere}
.mw-preference-status:empty{display:none}
.mw-preference-status[role=alert]{color:var(--danger-ink)}