Show live order progress, delays, and kitchen cancellations

- Order cards derive their label from item progress (Not Started,
  Preparing, Partly Ready, Ready, Picked Up, Cancelled) instead of the
  order's own status; final states are coloured
- Order page: animated status banner per item (ready/picked up check,
  cancelled cross, running-late clock), steps collapse once an item is
  settled with a Show/Hide steps toggle, done steps are faded instead
  of struck through, and the per-item status badge is gone
- New Delay concept: machines can report extra time on a claimed step
  (preparation_step_instances.delay_seconds), which counts toward the ETA
- The kitchen can cancel an item at any point before it's ready, with a
  refund (order_items.cancelled_by records who cancelled)
- Dev kitchen simulation now runs server-side across every order, so a
  step nobody is watching no longer blocks the queue; each settled step
  may randomly be delayed or cancelled
- Humanize snake_case statuses in the UI

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/orders/OrderStatusView.module.scss

@@ -64,7 +64,9 @@
   color: $color-text-muted;
   font-size: 0.85rem;
   cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
 
   &:hover:not(:disabled) {
     border-color: $color-primary;
@@ -104,17 +106,42 @@
   margin-bottom: $space-2;
 }
 
-.itemStatus {
-  text-transform: capitalize;
-  color: $color-text-muted;
-}
-
 .itemOptions {
   margin: 0 0 $space-2;
   font-size: 0.85rem;
   color: $color-text-muted;
 }
 
+// The negative margin + matching padding leaves room for the in-progress
+// dot's sonar ping, which the collapse animation's overflow would clip.
+.timelineWrapper {
+  overflow: hidden;
+  margin: (-$space-2);
+  padding: $space-2;
+}
+
+.bannerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $space-2;
+  margin: 0 0 $space-2;
+}
+
+.stepsToggle {
+  padding: 0;
+  border: none;
+  background: none;
+  color: $color-text-muted;
+  font-size: 0.85rem;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-primary;
+  }
+}
+
 .timeline {
   margin: 0 0 $space-2;
   padding: 0;
@@ -186,6 +213,8 @@
 }
 
 .step[data-status='done'] {
+  opacity: 0.5;
+
   .stepDot {
     border-color: $color-success;
     background: $color-success;
@@ -193,7 +222,6 @@
 
   .stepLabel {
     color: $color-text;
-    text-decoration: line-through;
   }
 }