Scale component spacing and refine table styling

[samuel-williams-shopify]

Component padding currently uses the root font size even when its text is smaller or larger. Use em for table-cell, inline-code, badge, and navigation-link spacing so each scales with its own text. Compact navigation and badges get spacing proportional to their smaller fonts.

Set table-cell padding to 0.1em 0.4em for a compact layout. Shade every second column, including its header, with a 2% tint of the theme's text colour. The translucent tint works in light and dark modes and allows row hover highlighting to remain visible.

Keep breadcrumb offsets matched to link padding, and use consistent em padding and summary offsets for disclosures so opening a details element does not shift its summary at a different font size. Related corner radii follow the local font as well. Shared page widths, sidebar widths, margins, and layout gaps remain in rem.

Validation:

• Headless Chrome component checks at 390px, 800px, and 1440px with font scales of 80%, 100%, and 125%; verified component spacing, badge and breadcrumb offsets, and summary alignment in open and closed disclosures.
• Compared the fiber-profiler Getting Started page using the main and proposed stylesheets at all three widths. Shared layout dimensions match; extra-wide tables scroll without widening the page. Inspected screenshots.
• Checked the final table padding and column tint in light and dark modes at 390px and 1440px, with font scales of 80%, 100%, and 125%. Verified row hover highlighting and contained horizontal scrolling, and inspected screenshots.
• git diff --check passes for the CSS changes.

Local Ruby setup was blocked by incompatible native extensions in the installed gem environment; Ruby checks are left to CI.