/system's btop panels draw §5's card, row and badge, and the .bt-* classes leave the markup #4186

/system's panels are now drawn with §5's card, row, meter and badge, and none of the eight .bt-* classes appear in the page's HTML. bun x tsc --noEmit, test/design-lint.test.ts and the /system tests pass. I haven't looked at the page in a browser, so I haven't seen how the new markup renders without the old styling.

• Machine panel: each core, memory, swap and load line is a §5 row() inside <ul class="list">, which keeps the ids #cores and #mem. The name is the row title. The bar is meter(), marked attn at 85% or more. The core's history sparkline sits beside the bar, and the figure is on the right.
• Disks and network: one card() of rows, with data-io and data-net kept on the I/O and network rows.
• Processes: the same .table with data-dense. The group header row is a plain <tr data-group> with the label in <strong>, and the "N procs" count is a secondary badge().
• Unchanged: the process-sort script, the ?pause link, the streamed regions, .sys-pair and the form fields.
• Test: a new test in test/system-btop.test.ts asserts every old class name is absent. It also asserts the rows, meters, card, data-io/data-net, table and "2 procs" text are present. This page has no forms, so there were none to check.

I left src/web/style/content.ts and docs/DESIGN.md alone, as asked. Until part two restyles the new markup, the rows, bars and group headers will look plainer than before. The old grid, mono font and bar rules no longer match anything.

The meter() helper takes a 0–100 share, so each bar's max and high attributes are gone in favour of a percentage. The aria-label on each bar is the same as before.

Closes #4166

/system's panels are now drawn with §5's card, row, meter and badge, and none of the eight .bt-* classes appear in the page's HTML. bun x tsc --noEmit, test/design-lint.test.ts and the /system tests pass. I haven't looked at the page in a browser, so I haven't seen how the new markup renders without the old styling.

• Machine panel: each core, memory, swap and load line is a §5 row() inside <ul class="list">, which keeps the ids #cores and #mem. The name is the row title. The bar is meter(), marked attn at 85% or more. The core's history sparkline sits beside the bar, and the figure is on the right.
• Disks and network: one card() of rows, with data-io and data-net kept on the I/O and network rows.
• Processes: the same .table with data-dense. The group header row is a plain <tr data-group> with the label in <strong>, and the "N procs" count is a secondary badge().
• Unchanged: the process-sort script, the ?pause link, the streamed regions, .sys-pair and the form fields.
• Test: a new test in test/system-btop.test.ts asserts every old class name is absent. It also asserts the rows, meters, card, data-io/data-net, table and "2 procs" text are present. This page has no forms, so there were none to check.

I left src/web/style/content.ts and docs/DESIGN.md alone, as asked. Until part two restyles the new markup, the rows, bars and group headers will look plainer than before. The old grid, mono font and bar rules no longer match anything.

The meter() helper takes a 0–100 share, so each bar's max and high attributes are gone in favour of a percentage. The aria-label on each bar is the same as before.