notes 1 one thing learned, dated

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.