Review global box-sizing usage for v11

[colinrotherham]

This PR was recreated from #1633

It was reverted from v10 and is now ready for v11

---

Description

Globally setting box-sizing using best practice from a decade ago is causing problems in components, not least checkboxes and radios inside nhsuk-details__text wrappers.

Best practice as of 2025 is to not set this value globally — certainly if starting a project from scratch, and using intrinsic layouts which don't use fixed widths.

An alternative approach is set this value globally using the * selector, and not attempt to force inheritance. However, as this doesn’t encompass pseudo elements, this then means adding this value explicitly in such cases where it is needed.

I tried removing the global box-sizing reset, but a number of tests failed. Although not beyond the realms of fixing, I have kept the global default for box-sizing as border-box, removed it from rules where it is inherited and kept it for the pseudo elements used to draw checkboxes and radios.

The only visual differences are the space between the underlined NHS logo.

I’ve chosen the former approach; not setting a global box-sizing value and instead setting it where necessary. This is especially important as the global box-sizing was never imported on a per-component basis.

I’ve also added an example of small radios and checkboxes inside details elements… arguably this example page can now be removed, but maybe we want to keep it around for a while.

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[colinrotherham]

We'll need to edit the changelog and move the entry to Breaking changes before merging

Blocked by #1631 when all the v11 things can be merged