RegionSectionCard passed THREE arguments to useShadowStyles(css, label): the CSS,
then 'regions-list', then 'region-section-card'. The signature takes two, so
'regions-list' was the key and its own name was silently ignored.
useShadowStyles keys its <style> tag by label and, on a collision, OVERWRITES
the existing tag's text instead of adding one (useShadowStyles.js:60-61). This
card is a CHILD of regions-list, so the two share one shadow root: the cards
render after the fetch, mount second, find the list's tag under the shared key
and replace every .rl-* rule with the card's CSS.
Measured in the running page: .rl-root became position:static and .rl-scroll
overflow-y:visible, the shadow root held 3 style tags where a working tree holds
4, and 'rl-root{' appeared nowhere in it. The list therefore had no scroller of
its own, a wheel moved the pane column instead, and every region below the fold
was unreachable -- at 1440 Middle East, North America and Oceania; at 390
everything except Africa.
It was latent until the label became real: before the cyrillicHeading fix, a
dangling comma concatenated 'regions-list' INTO regions-list's own CSS, so the
list keyed by a content hash and the two never met. Fixing that rule turned a
silent collision into a visible break, which is why the live site is unaffected
and every sha after it is not.
Verified in the artifact, not the source: ,"regions-list") appears once in the
rebuilt bundle where it appeared twice, ,"region-section-card") now appears once,
and the .rl-* rules are still present.
fe054b2c7f