Consolidate dashboard font sizes onto a three-step type scale

[0101]

Problem

The dashboard CSS in src/Client/index.html had accumulated roughly 25 distinct font sizes with no shared vocabulary:

• Relative em values (0.7em, 0.75em, 0.78em, 0.8em, 0.82em, 0.85em, 0.88em, 0.9em, 0.95em, 1.05em) that compound through nesting — a 0.82em badge inside a 0.9em row renders at neither size.
• Hard-coded pixels (10px, 10.5px, 11px, 11.5px, 12.5px, 15px) that were immune to any global adjustment.
• No base font-size on body, so everything was relative to the UA default (16px), and form controls silently fell back to 13.333px Arial.

The result: sizes that drifted apart for no design reason, and no answer to "what size should this new component be?"

Changes

Introduce a three-step type scale as CSS custom properties on :root and map every rule onto it:

Token	Size	Use
--fs-sm	11px	Metadata, labels, badges, chart legends, tooltips
--fs-base	13px	Default body text, rows, buttons, event log
--fs-lg	15px	Branch names, repo names, prominent controls

• body now sets font-size: var(--fs-base), so the scale has a real anchor instead of the UA default.
• Added an explicit button, input, select, textarea { font-size: var(--fs-base); } rule — form controls do not inherit font-size, so without it they revert to the browser default font.
• All em-based sizes replaced with tokens, removing the compounding problem entirely.
• All hard-coded pixel sizes replaced with tokens, except .history-charts .axis-label, which is SVG text inside a fixed 760x170 viewBox. Its size is in user units that scale with the chart, not screen pixels, so it is deliberately not a scale token. A comment documents this.
• Font weights normalised alongside the sizes to a small consistent set (400 / 600), replacing scattered 500 / 700 values.
• Small fixes surfaced by the audit: compact cards now get --fs-sm for .main-behind, and .nav-hint kbd drops its redundant nested 0.9em.

Pure CSS change — no F# or behaviour changes.

Tests

No test changes. The diff touches only <style> content in src/Client/index.html; existing E2E tests assert on CSS classes and DOM structure, which are unchanged.

[Copilot]

Pull request overview

Consolidates dashboard typography into shared CSS tokens.

Changes:

• Adds small, base, and large font-size tokens.
• Applies tokens across dashboard components and form controls.
• Documents the SVG axis-label exception.

Show a summary per file

File	Description
src/Client/index.html	Defines and applies the typography scale.

Review details

Comments suppressed due to low confidence (4)

src/Client/index.html:368

• This introduces 200, although the PR defines the normalized weight set as only 400/600. Keep this label at normal weight so the CSS and documented scale agree.

        .overview-bd-repo-name { font-size: var(--fs-sm); font-weight: 200; text-transform: uppercase; letter-spacing: 0.6px; color: #6c7086; margin: 0 0 7px; }

src/Client/index.html:907

• This changes the empty-state text from inherited 400 to 200, contrary to the PR's stated 400/600 normalization. Keep it at 400 unless the documented weight scale is intentionally expanded.

            font-weight: 200;

src/Client/index.html:950

• This adds a 200 weight outside the PR's documented 400/600 set and changes the title from its previous inherited normal weight. Use 400 to preserve the stated normalization.

            font-weight: 200;

src/Client/index.html:676

• The new 200 weight falls outside the PR's stated normalized 400/600 set and makes this label lighter than its previous inherited normal weight. Use 400 here.

        .modal-field-label { font-size: var(--fs-base); font-weight: 200; color: #a6adc8; text-transform: uppercase; letter-spacing: 0.04em; }

• Files reviewed: 1/1 changed files
• Comments generated: 1
• Review effort level: Medium