el.hidden = true does nothing if CSS sets display on that element. The
attribute’s display: none comes from the browser’s stylesheet, and any
author rule outranks it, even a single-class selector.
.overlay { display: flex; } /* wins */
[hidden] { display: none; } /* from the UA sheet, loses */
So an element toggled from JavaScript stays visible, silently, with no error anywhere. The fix is one line, and it belongs in the reset rather than on each offender.
[hidden] { display: none !important; }
Worth adding pre-emptively to any stylesheet, because the failure looks like broken JavaScript rather than broken CSS, and that sends you debugging in the wrong file.