ML Intern pill: focus ring, tinted badge, spacing (#2552)
* ML Intern pill: one focus ring, on the pill
Keyboard focus drew two rings at once: the switch button kept the
browser's rectangular outline (the reset cleared padding, border and
background but not outline), and the track drew its own orange ring
inside it. Drop both and ring the pill itself via has-focus-visible, so
the indicator follows the rounded shape, in the same blue the app uses
for focus elsewhere.
* ML Intern pill: tint the NEW badge instead of filling it
A solid dark-orange block with white text sat heavy next to the switch.
Use a 20% accent tint with the pill's own orange for the label, the same
treatment as the MCP pill's inner button. The label's contrast on the
tint is about 3.5:1, a deliberate trade for a lighter badge.
* ML Intern pill: match the end padding to the track's vertical gap
px-2.5 left 10px at each end of the pill while the 17px track only has
5.5px above and below it at h-7 (7.5px at h-8), so the ends looked
loose. Use px-2 / sm:px-1.5 to match, and close the track-to-label gap
from 6px to 5px.
* Drop letter-spacing tweaks across the app
Remove every tracking-* utility (the ML Intern NEW badge, the feature
announcement toast label, the settings nav headings) and the deploy
badge's letter-spacing rule. Text keeps its font's native tracking
everywhere.
* Composer: same gap between the MCP and ML Intern pills as between + and MCP
The + button and the MCP pill sit 6px apart (ml-1.5 inside their
wrapper), but the ML Intern pill is a sibling of that wrapper and got
the row's 8px gap (10px on mobile). The wrapper and the pill are the
row's only children, so set the row gap to 6px to match.
