Make the text in the code timer bar smaller and always readable

The text that sits inside a code card's timer bar is too large for the bar and often hard to read. "Code expired" is the worst case. Make it smaller, and make sure it's readable against every bar color.

Where it comes from: CodeStateTimerBarView draws LoadingBarLabel over the bar, which the TOTP and HOTP cards size to 12pt tall. The label is:

• 11pt caption2, semibold and uppercase, so it nearly fills the bar at the default text size.
• It scales with Dynamic Type, so at larger sizes it overflows the 12pt bar and gets clipped.
• Always white, with a black shadow of radius 10.

Cases to fix:

• "Code expired": the bar behind it is Color(.quaternarySystemFill), a very light gray in light mode. White text on it is nearly invisible.
• Editing message on a TOTP card: the bar is Color.white, so the white label disappears entirely. The editing message is the text shown in the bar while a card is being edited.
• Errors (red bar) and "Code locked" (the colored timer): these show white text on a saturated fill. Check they stay readable in both light and dark mode.

What to change:

• Choose the label's color to suit the bar behind it, rather than always using white. For example, use secondary text on the gray fill and white on saturated fills.
• Drop the blurry shadow if a contrasting color makes it unnecessary.
• Use a smaller size that fits inside the bar. Cap its Dynamic Type growth, or let the bar grow with it, so it never clips.
• Keep it legible with Increase Contrast turned on.

Tests: add snapshot tests of the TOTP and HOTP cards in each labelled state (expired, error, locked, editing), in light and dark mode. For dark mode, use .environment(\.colorScheme, …) (see VAULT-14). Include a large Dynamic Type size.