/* Physical sides stay the same in Hebrew and English. Keep each app's
   existing scrolling behavior, size, appearance and native click handlers. */
:root{--mms-page-direction:rtl}
:root[dir="ltr"],:root[lang="en"]{--mms-page-direction:ltr}
html body #mms-home-fab,html body #home-btn{
  inset-inline:auto!important;left:auto!important;right:14px!important;
}
html body #spec-btn,html body #theme-btn,html body #bm-theme-button{
  inset-inline:auto!important;left:14px!important;right:auto!important;
}
html body #spec-pop,html body #theme-popup,html body #bm-theme-panel{
  inset-inline:auto!important;left:14px!important;right:auto!important;
  box-sizing:border-box;max-width:calc(100vw - 28px)!important;
}

/* Headers with controls in the normal flow put their first group on the
   right. Text inside each group keeps the language of the page. */
.topbar:has(.home-button):has(#themeButton),
.topbar:has(#homeButton):has(#themeButton),
.topbar:has(#mms-home-fab):has(#spec-btn){direction:rtl}
.topbar:has(#themeButton)>.brand,
.topbar:has(#themeButton)>.brand-wrap,
.topbar:has(#themeButton)>.top-actions,
.topbar:has(#mms-home-fab)>.brand-wrap,
.topbar:has(#mms-home-fab)>.top-actions{direction:rtl}
.topbar .brand-copy,.topbar .brand-wrap>.brand,
.topbar>.home-button,.topbar .language-button,.topbar .lang-link,
.topbar #themeButton{direction:var(--mms-page-direction)}
.topbar .theme-menu{inset-inline:auto;left:0;right:auto;direction:var(--mms-page-direction)}
.topbar:has(#homeButton) #themeButton{inset-inline:auto!important;left:0!important;right:auto!important}
.topbar .tone-control #spec-btn{left:auto!important;right:auto!important}
.topbar .tone-control #spec-pop{left:0!important;right:auto!important}
.topbar .tone-control:has(>#spec-btn.tone-button){inset-inline:auto!important;left:20px!important;right:auto!important}
.topbar:has(#spec-btn.tone-button)>.top-actions{margin-left:58px!important;margin-right:0!important}

/* The guide uses a floating Home link and a theme menu in its nav. */
.tone-control:has(>#spec-btn.tone-trigger){position:fixed;top:14px;left:14px;right:auto}

/* React chord tools create this control after page load. Move the whole
   picker so its menu remains attached to the button. */
div:has(>button#theme-picker-btn){position:fixed!important;top:12px!important;inset-inline:auto!important;left:14px!important;right:auto!important;z-index:100}
div:has(>button#theme-picker-btn)>div{inset-inline:auto!important;left:0!important;right:auto!important}
@media(max-width:640px){div:has(>button#theme-picker-btn)>div{left:14px!important;transform:none!important;max-width:calc(100vw - 28px)!important}}

/* Simon uses its own small theme menu. */
.header-tools .home-link{inset-inline:auto!important;right:12px!important;left:auto!important}
.header-tools .theme-control{inset-inline:auto!important;left:12px!important;right:auto!important}
.header-tools #theme-panel{inset-inline:auto!important;left:0!important;right:auto!important}

/* The circle's mobile toolbar previously moved its theme button into a row. */
.controls-row #spec-btn{position:fixed!important;top:14px!important;left:14px!important;right:auto!important}

/* Let's Play docks Home in a header with several independent groups. */
header:has(>#mms-home-fab){position:relative;padding-right:66px!important}
html body header>#mms-home-fab{position:absolute!important;right:16px!important;left:auto!important;top:10px!important}

/* FX Lab keeps Home inside its sticky toolbar. */
.bar:has(>#mms-home-fab){padding-left:66px;padding-right:66px;min-height:62px}
html body .bar>#mms-home-fab{position:absolute!important;top:13px!important;right:0!important;left:auto!important}

/* Phase Lab has a full-width header instead of floating corner buttons. */
.phase-top-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto 38px;direction:ltr;align-items:center;gap:12px}
.phase-top-row>.phase-brand,.phase-page-actions{direction:var(--mms-page-direction)}
.phase-theme-control{position:relative}
html body .phase-top-row #mms-home-fab,html body .phase-top-row #spec-btn{position:static!important;inset:auto!important;width:38px!important;height:38px!important;margin:0!important;transform:none!important;flex:none}
html body .phase-theme-control #spec-pop{position:absolute!important;inset:auto!important;top:calc(100% + 8px)!important;left:0!important;z-index:50}
@media(max-width:999px){
  .phase-top-row{grid-template-columns:38px minmax(0,1fr) 38px;gap:10px}
  .phase-top-row>.phase-page-actions{grid-column:1/-1;grid-row:2;justify-content:flex-end}
}