Tracker: slide the segmented control background

[BryanFRD]

Purely visual. The three button groups on the tracker (category, status filter, progress
calculation) get one sliding background instead of moving the highlight between buttons.

Branched from master, independent of #57 and #58.

What changes

SegmentedControl renders a single absolutely positioned indicator and animates it to the
active button, rather than each button painting its own background.

It measures the active button's box instead of assuming equal widths, so the pill fits
labels of different lengths, and a ResizeObserver recalculates on container resize and on
font load. TabButton and MetricButton had no callers left afterwards, so they are gone.

Roles moved to tablist / tab with aria-selected, which is what these groups actually
were.

One thing worth knowing

The transition has to be declared inline rather than with a utility class. global.css has
an unlayered rule:

html, body, header, nav, main, footer, h1...h6, p, span, a, button, input, div {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

Being outside @layer, it outranks every Tailwind utility, so transition-[transform,width]
was silently dropped and the computed transition-property stayed
background-color, border-color, color, box-shadow. Inline styles are the only thing that
wins without touching a rule that affects the whole site.

Flagging it because it means no custom transition on any div, span or button anywhere
in the project can work, and it fails without any warning. Changing that rule has site-wide
effects, so it did not belong in this PR.

prefers-reduced-motion drops the duration to zero.

Tested

bun run build clean. Checked in a browser that each group's indicator lands on its active
button's exact offset and width: category translateX(4px) 89px, status translateX(4px) 61px, progress translateX(2px) 93px.