[3.0] Theme split (wave 3, part 7) — Rebuild the footer as a flex row

[albertlast]

Description

Part 7 of wave 3 of the #7933 split. Stacked on #9374 and the parts below it — the diff of this one is its last commit.

The footer was a list with one of its two items floated, and the help links inside it were separated by pipe characters written into the markup:

<li class="floatright"><a …>Help</a> | <a …>Terms and Rules</a> | <a …>Go Up ▲</a></li>
<li class="copyright">…</li>

It becomes a flex row: copyright at one end, links at the other, separated by a gap instead of punctuation. Reading order now matches visual order, and both items wrap onto their own line on a narrow window instead of colliding. Colours, size and the link states move to tokens.

--footer-bg is var(--primary-color-700), which is #38546B, where the hard-coded value was #3e5a78. That is a deliberate change rather than an oversight: it is the same colour the ramp added in #9369 already carries, and the two were near enough identical that keeping both would have meant keeping a colour that has no reason to differ.

A broken selector not carried over

The theme branch has this, which is worth flagging because it looks like a working rule:

#footer ul.helpitems li 
#footer li.copyright {
	display: block;
	font-family: Verdana, sans-serif;
}

There is no comma. It parses as one descendant selector, #footer ul.helpitems li #footer li.copyright, which requires a #footer inside a #footer and so can never match. The copyright loses its Verdana on that branch. The rule here is the working one release-3.0 already had.

Verification

Board index, logged in.

At 1401px:

background   rgb(56, 84, 107)   = #38546B = --primary-color-700, so the ramp resolves
colour       rgb(245, 245, 245)
ul display   flex
copyright    x 101, right 345    first in the row
helplinks    x 1134, right 1301  aligned to the end of the row
links        Help, Terms and Rules, Go Up ▲
literal "|" characters in the footer text: none

At 701px both items stay inside the viewport, x 10 → 255 and x 525 → 691, with no horizontal scrollbar.

Every var() in index.css still resolves against variables.css.

Issues References (Fixes|Related|Closes)

Related to #7933.