Agentic UI: Add signed-out sign-in experience

[shaunandrews]

Related issues

• Related to #

How AI was used in this PR

AI (Claude) built the sign-in band's responsive CSS and its collapse / rotating-tagline behavior, rewrote the sidebar's bottom entry into a direct Settings link, added the Settings tooltips, and standardized the user-facing auth copy on "Log in."

One notable fix worth a close look: the particle-"W" squished and mispositioned at narrow (preview-open) widths because the stacked breakpoint set .mark { position: static }, which detached EmptyBackground's position: absolute; inset: 0 canvas from its container so it filled the whole band. Restoring the positioning context (relative) fixed it. The layout was verified by measuring the real component's computed geometry across breakpoints in a throwaway Electron instance.

Proposed Changes

When you're signed out of WordPress.com, the agentic UI now guides you toward logging in and adapts the surrounding UI to the signed-out state:

• The site Overview shows a sign-in band ("Let Studio code it for you") with a responsive particle-"W" illustration — it scales and bleeds off the leading edge on wider panels, hangs off the bottom, and collapses to a small stacked mark when narrow. The "W" always stays a perfect circle.
• That band can be collapsed (Hide) to a compact Log in button with a short rotating tagline beside it. The collapsed control stays clear of the preview toggle and sits above the footer blur. It shows the tagline until the panel gets genuinely tiny.
• The sidebar's bottom entry is now a single Settings button — your gravatar when signed in, a sliders icon when signed out — that opens Settings directly. Logging in/out, Documentation, and Report an issue live in Settings → Account (Docs / Report now have tooltips).
• The sidebar site rows reflect the signed-out state (a selected site's Overview is its home).
• User-facing auth copy is standardized on "Log in" (previously a mix of "Sign in" / "Log in").

Logging in unlocks the AI "let Studio code it for you" capabilities; nothing here blocks local-site work.

⚠️ Visual change: needs human review in light + dark mode.

Testing Instructions

1. Run the agentic UI signed out (no WordPress.com auth).
2. Overview band: open a site's Overview.
   • Resize the panel / toggle the preview: the "W" bleeds + scales in the row layout, stacks small when narrow, drops away when tiny — and stays a perfect circle at every width.
   • Hit Hide → it collapses to a Log in button with a rotating tagline; the button is crisp (not blurred) and clears the preview toggle. Reload to bring the full band back.
3. Sidebar bottom: shows a Settings button (sliders icon signed-out, gravatar signed-in) that opens Settings. Check the signed-out site rows too.
4. Settings → Account: Log in / Log out, plus Docs and Report an issue with tooltips.
5. Verify in both light and dark color schemes.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?