A lot of CSS hackery later, and I've managed to construct a popover dialog using a <details> element that doesn't disrupt the button order and also doesn't require any JS to work!

The trick is that the <details> is contained within a wrapper div with identical styling to the <summary> (ie. the 'button') and identical text contents, except the wrapper div is invisible and position:relative, with the <details> being position:absolute and anchored against the wrapper's top left corner.

This means that the wrapper essentially 'reserves' the space for the button, while the <details> element can freely expand without disrupting anything because its absolute positioning takes it out of the content flow