fix(macos): use web's light panel backdrop and center the welcome panel

apps/calendar-macos/CompassUI/Sources/CompassUI/Onboarding/WelcomeModalView.swift

@@ -16,13 +16,16 @@ struct WelcomeModalView: View {
         ZStack {
             PanelBackdropView()
                 .ignoresSafeArea()
-            ScrollView {
-                panel
-                    .frame(maxWidth: .infinity, alignment: .top)
-                    .padding(.top, 32)
-                    .padding(.bottom, 32)
+            // Web `OverlayPanel` centers the panel and scrolls (`py-8`) only
+            // when it is taller than the window.
+            GeometryReader { geometry in
+                ScrollView {
+                    panel
+                        .frame(maxWidth: .infinity)
+                        .padding(.vertical, 32)
+                        .frame(minHeight: geometry.size.height)
+                }
             }
-            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
         }
         .onAppear {
             model.onboardingStore.setWelcomeFirstVisitOpen(true)

apps/calendar-macos/CompassUI/Sources/CompassUI/PanelBackdropView.swift

@@ -1,7 +1,9 @@
 import AppKit
 import SwiftUI
 
-/// Web `OverlayPanel` backdrop: dimmed background with light blur (`backdrop-blur-sm`).
+/// Web `OverlayPanel` backdrop: `bg-background/85` over a light blur
+/// (`backdrop-blur-sm`), so the calendar shows faintly through. The dark
+/// `overlayBackdrop` dim belongs to menus and confirm dialogs, not panels.
 struct PanelBackdropView: NSViewRepresentable {
     @Environment(\.nativeWebTheme) private var theme
 
@@ -10,7 +12,7 @@ struct PanelBackdropView: NSViewRepresentable {
         container.wantsLayer = true
 
         let blur = NSVisualEffectView()
-        blur.material = .hudWindow
+        blur.material = .windowBackground
         blur.blendingMode = .withinWindow
         blur.state = .active
         blur.translatesAutoresizingMaskIntoConstraints = false
@@ -37,7 +39,7 @@ struct PanelBackdropView: NSViewRepresentable {
     }
 
     func updateNSView(_ container: NSView, context: Context) {
-        context.coordinator.tintView?.layer?.backgroundColor = NSColor(theme.overlayBackdropColor).cgColor
+        context.coordinator.tintView?.layer?.backgroundColor = NSColor(theme.panelBackdropColor).cgColor
     }
 
     func makeCoordinator() -> Coordinator { Coordinator() }

docs/features/desktop-web-parity-checklist.md

@@ -28,7 +28,7 @@ This checklist compares **apps/calendar-web** (reference UI) with **apps/calenda
 | --- | --- | --- | --- | --- |
 | Light Beach / Dark Abyss palettes | `[data-theme]` in `index.css` | `ThemeTokens.lightBeach` / `darkAbyss` | ✅ | Generated from same CSS |
 | SwiftUI accessor coverage | Tailwind `color-*` for all 22 roles | `NativeWebTheme` exposes subset on `ThemeTokenColor+SwiftUI.swift` | 🟡 | Missing convenience colors: `surfaceRaised`, `textSubtle`, `borderStrong`, `accentHover`, `accentStrong`, `accentSecondaryHover`, `onAccent`, `info`, `shadowDefault` |
-| Panel modal backdrop | `OverlayPanel` / `bg-background/85` | `panelBackdropColor` = `background` @ 85% opacity | 🟡 | Web uses `--overlay-backdrop` for dimming; panel tint is separate |
+| Panel modal backdrop | `OverlayPanel` / `bg-background/85` + `backdrop-blur-sm` | `PanelBackdropView`: `panelBackdropColor` (`background` @ 85%) over a within-window blur | ✅ | Settings and welcome used the dark `overlayBackdrop` dim and read as solid gray; that dim stays for menus and confirm dialogs. Welcome centers vertically like web |
 | Event default fill hex | `theme.util.ts` / deck | `EventCardView.swift` literals `#454442`, `#82A0B2` | 🟡 | Values align; not read from tokens |
 | Event focus ring color | `--event-focus-color` + outline | `EventCardView` CALayer border from fill-aware helper | 🟡 | Same intent, different paint model |
 | Holiday / gradient accents | CSS gradients on chips | Mostly solid fills | 🟡 | Audit per calendar color id |