Fit the analysis panel's text inside its own cards

[thcp]

Closes #688

The seven metadata cards size their text in fixed pixels while the row they sit in is a seven column grid that tracks the window. Below about 1250px the text is wider than the card holding it, and flex-shrink: 0 on the value meant it did not stop at the card edge. "Natural Minor" at 17px is 133px of monospace in a 135px card, painted over the Dynamic Range value beside it.

The long labels failed the other way. "DYNAMIC RANGE" and "TEMPO STABILITY" wrapped to a second line, and because the card centres its content that line landed on top of the value instead of below it.

What changed

Values, labels, qualifiers, padding and gaps scale with the viewport through clamp(), the way the top bar has since #665. Labels are pinned to one line. Labels and values clip with an ellipsis as a last resort rather than escaping the card. The qualifier shrinks four times as fast as the value beside it, so "Peak -0.3 dB" gives up its width before the number does.

The presence row below gets the same treatment, which is what stops "BASS DEPTH" reading as "BA..." at the width where the row above was already broken.

CSS only. No markup, no script, no strings.

How it was checked

The panel's real markup, rendered against both the old and the new stylesheet, with every span measured for overflow past its card, for wrapping to a second line, and for clipping.

Width	Before	After
920px	scale value overflows, stability label wraps, five labels clipped	clean
1000px	scale value overflows, five labels clipped	clean
1100px	two labels clipped	clean
1250px, 1440px	clean	clean
420px, 600px, 880px, 1600px, 1920px	not measured	clean

Local gate: Playwright 259 passed, test:js 48 passed, ruff, ruff format, bandit, i18n coverage and uv.lock all clean. pytest has two pre-existing failures in test_stems_api.py, both from this machine's ffmpeg being built without libvorbis, which no stylesheet can reach.