feat(ui): readable order card — status as background tint, corner ✕

The order-tab row now wraps long labels (`overflow-wrap: anywhere`),
encodes status into the card background via the design-token subtle
palette (applied → success-subtle, invalid/rejected/conflict →
danger-subtle, draft/valid/submitting → warning-subtle), and exposes
a small framed `✕` delete button absolutely positioned in the
card's top-right corner — always visible, labelled by
`game.sidebar.order.command_delete` for assistive tech. The textual
status name remains in the DOM as an `.sr-only` node so screen
readers and the existing testids still observe it.

Refs #46

ui/frontend/tests/order-tab.test.ts

@@ -76,6 +76,24 @@ describe("order-tab", () => {
 		expect(ui.getByTestId("order-command-status-0")).toHaveTextContent(
 			"invalid",
 		);
+		// The status is encoded into the card's background via a
+		// `status-*` class, so the visual cue survives even after
+		// the textual badge moved into an `sr-only` node.
+		expect(ui.getByTestId("order-command-0")).toHaveClass("status-invalid");
+		draft.dispose();
+	});
+
+	test("delete button exposes an accessible label and is always present", async () => {
+		const { draft, context } = await makeDraft([
+			{ kind: "placeholder", id: "id-1", label: "first" },
+		]);
+		const ui = render(OrderTab, { context });
+		const button = ui.getByTestId("order-command-delete-0");
+		expect(button).toBeVisible();
+		expect(button).toHaveAttribute(
+			"aria-label",
+			i18n.t("game.sidebar.order.command_delete"),
+		);
 		draft.dispose();
 	});