Animate the ETA, hide delays, and tidy the order card actions

- Slide the "Ready in about" value when it changes (new EtaMessage)
- Drop the "Running late" banner; delays only move the ETA now
- Remove the cancel-info tooltip and its icon button
- Shorten the steps toggle to "Steps" / "Hide"
- Add icons and more padding to the order card action buttons

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

src/components/orders/OrderStatusView.module.scss

@@ -1,13 +1,5 @@
 @use '../../styles/variables' as *;
 
-@position-try --cancel-hint-flip {
-  position-area: bottom;
-  --hint-arrow-top: auto;
-  --hint-arrow-bottom: 100%;
-  --hint-arrow-color-top: transparent;
-  --hint-arrow-color-bottom: #{$color-text};
-}
-
 .page {
   max-width: 720px;
   margin: 0 auto;
@@ -277,12 +269,6 @@
   opacity: 0.6;
 }
 
-.eta {
-  margin: 0 0 $space-2;
-  font-size: 0.9rem;
-  color: $color-success;
-}
-
 .actions {
   display: flex;
   flex-wrap: wrap;
@@ -291,7 +277,10 @@
 
   button,
   a {
-    padding: $space-1 $space-3;
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    padding: $space-2 $space-4;
     border: 1px solid $color-border;
     border-radius: $radius;
     background: $color-background;
@@ -310,66 +299,12 @@
     }
   }
 
-  .infoButton {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: $space-1;
-    padding: $space-1 $space-2;
-    color: $color-text-muted;
-    font-size: 0.85rem;
-    white-space: nowrap;
-
-    &:hover:not(:disabled) {
-      color: $color-primary;
-      border-color: $color-primary;
-    }
-  }
-
-  .infoIcon {
+  .actionIcon {
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
   }
 
-  .cancelHint {
-    position: fixed;
-    position-area: top;
-    position-try-fallbacks: --cancel-hint-flip;
-    inset: auto;
-    overflow: visible;
-    height: auto;
-    margin: $space-2;
-    padding: $space-2 $space-3;
-    width: max-content;
-    max-width: 260px;
-    border: none;
-    border-radius: $radius;
-    background: $color-text;
-    color: $color-background;
-    font-size: 0.8rem;
-    line-height: 1.4;
-    text-align: left;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
-    --hint-arrow-top: 100%;
-    --hint-arrow-bottom: auto;
-    --hint-arrow-color-top: #{$color-text};
-    --hint-arrow-color-bottom: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 50%;
-      top: var(--hint-arrow-top);
-      bottom: var(--hint-arrow-bottom);
-      transform: translateX(-50%);
-      border: 6px solid transparent;
-      border-top-color: var(--hint-arrow-color-top);
-      border-bottom-color: var(--hint-arrow-color-bottom);
-    }
-  }
-
   .cancelButton {
     padding: $space-1 $space-2;
     border: none;