Create flow: session UI + sign out

tests/components/Login.test.tsx

@@ -10,6 +10,37 @@ describe("Login", () => {
     vi.clearAllMocks();
   });
 
+  it("uses blurredYellow backdrop by default (header overlay)", async () => {
+    renderWithProviders(
+      <Login isOpen onClose={vi.fn()} ariaLabelledBy="login-modal-heading">
+        <p id="login-modal-heading">Login content</p>
+      </Login>,
+    );
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    const backdrop = screen.getByRole("dialog").parentElement;
+    expect(backdrop).toHaveClass("backdrop-blur-md");
+  });
+
+  it("uses solid backdrop when backdropVariant is solid (/login page)", async () => {
+    renderWithProviders(
+      <Login
+        isOpen
+        onClose={vi.fn()}
+        ariaLabelledBy="login-modal-heading"
+        backdropVariant="solid"
+      >
+        <p id="login-modal-heading">Login content</p>
+      </Login>,
+    );
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    const backdrop = screen.getByRole("dialog").parentElement;
+    expect(backdrop).not.toHaveClass("backdrop-blur-md");
+  });
+
   it("renders dialog when open and portal is ready", async () => {
     renderWithProviders(
       <Login isOpen onClose={vi.fn()} ariaLabelledBy="login-modal-heading">
@@ -35,6 +66,23 @@ describe("Login", () => {
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
+  it("portals overlay outside the rendered subtree by default", async () => {
+    const { container } = renderWithProviders(
+      <div data-testid="inline-root">
+        <Login isOpen onClose={vi.fn()} ariaLabelledBy="login-modal-heading">
+          <p id="login-modal-heading">Portaled</p>
+        </Login>
+      </div>,
+    );
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    const dialog = screen.getByRole("dialog");
+    expect(
+      container.querySelector('[data-testid="inline-root"]')?.contains(dialog),
+    ).toBe(false);
+  });
+
   it("calls onClose when close button is clicked", async () => {
     const onClose = vi.fn();
     renderWithProviders(