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/deadlines/DeadlineGroupCard.tsx

@@ -81,7 +81,7 @@ export function DeadlineGroupCard({ deadlines, onEdit, onRequestToggle }: Deadli
               key={deadline.id}
               onClick={() => onEdit?.(deadline)}
               className={cn(
-                'group flex items-center gap-3 rounded-md py-1.5 -mx-2 px-2 transition-colors duration-150',
+                'group flex items-center gap-3 rounded-sm py-1.5 -mx-2 px-2 transition-colors duration-150',
                 onEdit && 'cursor-pointer hover:bg-secondary/35',
               )}
             >

components/deadlines/DeadlineList.tsx

@@ -6,6 +6,7 @@ import { Deadline, DeadlineType } from '@/types'
 import { DeadlineRow, deadlineDateLabel } from './DeadlineRow'
 import { DeadlineGroupCard, isSkattekontoDeadline } from './DeadlineGroupCard'
 import { ConfirmDialog } from '@/components/ui/confirm-dialog'
+import { SegmentedControl } from '@/components/ui/segmented-control'
 import { isDeadlineOverdue, parseDate, startOfDay } from '@/lib/calendar/utils'
 
 type TypeSegment = 'all' | 'tax' | 'invoicing' | 'own'
@@ -136,31 +137,16 @@ export function DeadlineList({
   return (
     <div className="space-y-6">
       {/* Toolbar: the type seg (concept: Alla / Skatt / Fakturering / Egna) */}
-      <div className="inline-flex shrink-0 gap-0.5 rounded-lg bg-muted/70 p-[3px]" role="tablist">
-        {(
-          [
-            { key: 'all', label: t('seg_all') },
-            { key: 'tax', label: t('seg_tax') },
-            { key: 'invoicing', label: t('seg_invoicing') },
-            { key: 'own', label: t('seg_own') },
-          ] as const
-        ).map(({ key, label }) => (
-          <button
-            key={key}
-            type="button"
-            role="tab"
-            aria-selected={segment === key}
-            onClick={() => setSegment(key)}
-            className={`rounded-md px-3.5 py-[5px] text-[12.5px] transition-colors duration-150 ${
-              segment === key
-                ? 'border border-border bg-card font-medium text-foreground'
-                : 'text-muted-foreground hover:text-foreground'
-            }`}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
+      <SegmentedControl
+        value={segment}
+        onChange={setSegment}
+        options={[
+          { value: 'all', label: t('seg_all') },
+          { value: 'tax', label: t('seg_tax') },
+          { value: 'invoicing', label: t('seg_invoicing') },
+          { value: 'own', label: t('seg_own') },
+        ]}
+      />
 
       <div className="gap-8 lg:grid lg:grid-cols-[minmax(0,1fr)_240px] lg:items-start">
         {/* The thread */}

components/deadlines/DeadlineRow.tsx

@@ -130,7 +130,7 @@ export function DeadlineRow({ deadline, onEdit, onRequestToggle }: DeadlineRowPr
     <div
       onClick={() => onEdit?.(deadline)}
       className={cn(
-        'group flex items-start gap-3 rounded-md py-3 -mx-2 px-2 transition-colors duration-150',
+        'group flex items-start gap-3 rounded-sm py-3 -mx-2 px-2 transition-colors duration-150',
         onEdit && 'cursor-pointer hover:bg-secondary/35',
         completed && 'opacity-60',
       )}