/* Bootstrap 4 behaviour the older pages still rely on, after the move to Bootstrap 5 (loaded right after it).
   Bootstrap 5 gives every direct child of a .row full width and gutter padding (".row > *"); Bootstrap 4 only did
   that for .col* elements, and a lot of older markup puts buttons and plain divs straight into rows. New pages
   should use real columns (or the ec- styles in ui.css) instead of leaning on this. Only real column classes count:
   the online word search's class=".col-9" (a typo that never was a column) must stay auto-width, as it was. The
   :where() keeps this at the same specificity as Bootstrap's ".row > *": it beats that (it loads later), but an
   element's own styles (a .btn's padding, say), which load later still, win over it. */
.row > :where(:not(.col):not([class^="col-"]):not([class*=" col-"])) {
	flex-shrink: 1;
	width: auto;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
	margin-top: 0;
}

/* Bootstrap 5's reboot sets every cell's border-width to 0, which erases the borders that the HTML border attribute
   draws on older tables (<table border="1">). */
table[border]:not([border="0"]) > * > tr > td,
table[border]:not([border="0"]) > * > tr > th {
	border-width: 1px;
	border-style: inset;
}

/* Bootstrap 4 made every column position: relative; 5 doesn't. Older pages rely on it twice over: absolutely
   positioned children are placed against their column, and columns stack above an absolutely positioned sibling
   (the quiz game's board sits behind its question this way). */
.col, .col-auto, [class^="col-"], [class*=" col-"] {
	position: relative;
}

/* Bootstrap 4 buttons never wrapped their label; 5's do. With the theme's overflow: hidden on .btn, a squeezed button
   then cut its own label off instead of moving to the next line (word search toolbar, tic-tac-toe setup on phones). */
.btn {
	white-space: nowrap;
}