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/docs/order-composer.md

@@ -105,6 +105,20 @@ the same row, the overlay reapplies, and re-submitting is
 idempotent on the engine side (the rename already matches the
 stored value).
 
+### Visual encoding on the order tab
+
+The order tab's row carries a `status-{status}` class that tints the
+card background through the design-token subtle palette: `applied`
+reads as `--color-success-subtle`, `invalid` / `rejected` / `conflict`
+as `--color-danger-subtle`, and `draft` / `valid` / `submitting` as
+`--color-warning-subtle` (the "not yet acknowledged by the server"
+group, including the offline mode). The textual status name stays in
+the DOM as a `.sr-only` node so screen readers and the existing
+`order-command-status-N` testids still observe it. The per-row delete
+control is a small framed `✕` button absolutely positioned in the
+card's top-right corner — always visible (no hover-only reveal) and
+labelled by `game.sidebar.order.command_delete` for assistive tech.
+
 ## Discriminated union shape
 
 `OrderCommand` is a discriminated union on the `kind` field: