refactor(design): lock the border-radius ladder, one radius per role (#1607)

Seven radii were in circulation (4/5/6/8/12/16px + pill) with no rule for
which went where; one toolbar row on /transactions mixed four shape
languages. This locks a 4-tier ladder (design.md convention 16):

- pill: interactive toolbar controls (buttons, chips, pickers, segmented
  controls, toolbar search, count nubs)
- rounded-xl (12px): overlay tier: page panel, dialogs, slide-overs
- rounded-lg (8px): cards, form fields, popover/menu content, boxes
- rounded-sm (4px): nested leaves (menu items, checkboxes, kbd/code nubs)

Changes:
- New SegmentedControl primitive (pill-in-pill tablist, h-8) replaces the
  hand-rolled bg-muted/70 tablist copied across 11 files
- New ToolbarSearch primitive (pill, h-8) adopted on 9 page toolbars;
  dialog/picker searches keep the rounded-lg Input
- dialog.tsx 8px -> 12px, matching SettingsModal/slide-over/CommandPalette
- ContextPicker chips at the shared h-8 toolbar height
- ~300 rounded-md / bare rounded call sites remapped by role; auth icon
  tiles and the mobile nav sheet come down from 16px to 12px
- rounded-md, bare rounded, rounded-2xl and rounded-[Npx] are dead
  vocabulary, enforced by a new off-ladder-radius check in check:guards

Verified: lint 0 errors, 14422 unit tests pass, check:guards green, tsc
clean on all changed files, sandbox screenshots of transactions/
bookkeeping/granskning toolbars and the Ny verifikation dialog.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

components/ui/segmented-control.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface SegmentedControlOption<T extends string> {
+  value: T
+  /** Segment label. Pass a fragment for custom trailing content (e.g. a muted count). */
+  label: React.ReactNode
+  /** Renders the standard count chip after the label when > 0. */
+  count?: number
+}
+
+interface SegmentedControlProps<T extends string> {
+  value: T
+  onChange: (value: T) => void
+  options: SegmentedControlOption<T>[]
+  'aria-label'?: string
+  className?: string
+}
+
+/**
+ * The toolbar segmented control (view/mode switcher). Pill-in-pill per the
+ * radius ladder: interactive toolbar controls are pills, and pill nesting is
+ * concentric by construction. One fixed height (h-8) shared with
+ * ToolbarSearch and ContextPicker so a toolbar row reads as one line.
+ */
+export function SegmentedControl<T extends string>({
+  value,
+  onChange,
+  options,
+  className,
+  ...aria
+}: SegmentedControlProps<T>) {
+  return (
+    <div
+      className={cn(
+        'inline-flex h-8 shrink-0 items-center gap-0.5 rounded-full bg-muted/70 p-[3px]',
+        className,
+      )}
+      role="tablist"
+      aria-label={aria['aria-label']}
+    >
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          role="tab"
+          aria-selected={value === opt.value}
+          onClick={() => onChange(opt.value)}
+          className={cn(
+            'inline-flex h-full items-center gap-1.5 rounded-full px-3.5 text-[12.5px] transition-colors duration-150',
+            value === opt.value
+              ? 'border border-border bg-card font-medium text-foreground'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+        >
+          {opt.label}
+          {typeof opt.count === 'number' && opt.count > 0 && (
+            <span className="rounded-full bg-secondary px-1.5 text-[10px] font-medium tabular-nums">
+              {opt.count}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}