style: tooltips

[tyler-dane]

What

Redesigns the app's tooltips and keyboard-shortcut hints so they're consistent, legible, and well-layered. The work is split into three reviewable commits:

1. Tooltip surface — style: tooltips (2368c5f)

One shared tooltip look, smaller text, and a z-index fix.

• New c-tooltip @utility (index.css) promoted from the app's own (previously orphaned) menu-tooltip tokens: near-black surface, white text, subtle border + shadow. TooltipContent applies it by default; TooltipWrapper and LifeDotTooltip now share it (was a light beige pill vs a dark navy pill — two different looks).
• Font dropped from text-m (13px) → text-s (11px).
• Layering fix (contributes to event form: duplicate shortcut tooltip is hidden and Cmd+D also changes view #1842): tooltips computed gridMax + LAYER_3, which could land below the floating event form (21) / actions menu (22) / modal (24). Now Math.max(gridMax + LAYER_3, Z_INDEX_TOOLTIP) (new constant = modal + 1), so a tooltip always floats above those layers.
• Tasteful enter/exit motion via floating-ui useTransitionStyles (fade + 4px rise, the app's cubic-bezier(0.16, 1, 0.3, 1) curve).

2. Keycap contrast & consistency — style: standardize color contrast w/ shortcuts (e373ec8)

• New c-keycap @utility — one high-contrast chip (border-border-primary + bg-panel-bg + full-opacity text-text-light, 11px). Replaces four divergent, low-contrast keycap styles (translucent bg-gray-700, gray-on-gray bg-gray-400, a bespoke ShortcutList override).
• View selector (SelectView) recolored for the dark-only UI: the light-beige selected row → text-accent-primary over a clean bg-white/10 hover/active.

3. Per-key shortcut chips — feat: split keys in shortcut combos (c2ff868)

Multi-key combos rendered as one chip with a literal "+" (⌘ +k); now each key is its own chip ([⌘] [K]), with Cmd/Mod shown as the ⌘ icon.

• New ShortcutKeys component: splits a "+"-joined combo and renders one c-keycap per key (no "+"); uppercases single letters ([W]), resolves cmd/ctrl aliases, and renders ⌘/⌃/arrow icons via the existing ShortCutLabel.
• shortcut.util.tsx: added arrow icons to keyIconMap, made Meta platform-aware (⌘ on mac, Windows logo elsewhere), and let text keys inherit the chip's font size.
• Every combo site became a plain token string, which let us delete MigrationShortcutHint and the now-dead getModifierKeyIcon / getMetaKeyIcon helpers, and fold the undo/migration toasts' bespoke box onto the shared chip. Touches ShortcutList, SelectView, ShortcutTip, TooltipWrapper, MenuItem (+ Duplicate/Delete/Move/Migrate buttons), SaveSection, PlannerSidebarActions, and both toasts.

Why

The tooltips were three different surfaces, oversized, sometimes hidden behind floating UI, and their shortcut chips were low-contrast and inconsistent (and combos were visually mushy). The fix centralizes everything into two shared Tailwind @utility recipes (c-tooltip, c-keycap) plus one ShortcutKeys component, so there's a single source of truth and the styles can't drift again.

Notes for reviewers

• Net −41 lines despite the breadth — most call sites got simpler (hand-assembled JSX → token strings; bespoke styles → shared utilities).
• Tailwind v4 gotcha: the custom text-* size utilities don't resolve inside @apply (they live under --font-size-*, not --text-*), so c-tooltip/c-keycap set font-size: var(--font-size-s) directly — mirroring the existing c-recurrence-toggle pattern.
• Test contracts updated (behavior/text based, no snapshots): ShortcutList now asserts per-key chips (Shift + W), SelectView keys are uppercased (D/W), toasts assert Z + the modifier icon, TooltipWrapper/SelectView highlight markers updated.
• Out of scope: the second half of event form: duplicate shortcut tooltip is hidden and Cmd+D also changes view #1842 (the Cmd+D shortcut also firing the global d view-nav) is a behavioral bug, intentionally left for a separate PR — this PR is styling-only.

Verification

• test:web ✅ 1043 pass / 0 fail
• type-check ✅ · lint ✅ (13 pre-existing a11y warnings, none in touched files) · build:web ✅ (confirms the new phosphor arrow icons import cleanly and no Tailwind @apply regressions)

Not covered

• Live visual spot-checks of the authenticated screens (shortcuts panel, event-form action menu, Save/Someday tooltips, toasts) weren't run — those routes need a logged-in account unavailable in this environment. Behavior is covered by the updated unit tests (per-key split, uppercasing, modifier-icon presence); the public /life tooltip was verified via computed styles. Worth a glance when logged in.
• test:backend / test:scripts not run — unrelated to this web styling change and require local config/env; they run in CI.

🤖 Generated with Claude Code