@rhinestone/deposit-modal 0.3.0-alpha.9 → 0.3.0

package/dist/styles.css

@@ -284,6 +284,11 @@
   /* Cap the modal at 600px (or viewport-40 on tiny screens) so long lists
      scroll inside instead of growing the modal. */
   max-height: min(600px, calc(100vh - 40px));
+  /* Explicit 0 (not the `auto` default) so the min-height transition
+     below has a definite starting value when :has() rules later raise
+     it to the iframe-mounted height. Transitions from `auto` are
+     unreliable in browsers and tend to apply instantly. */
+  min-height: 0;
   display: flex;
   flex-direction: column;
   margin: 20px;
@@ -292,7 +297,18 @@
   border: 1px solid var(--rs-border);
   border-radius: var(--rs-radius-lg);
   transform: scale(0.95);
-  transition: transform 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    /* Smooth resize when the user moves between steps with different
+       widths (e.g. ConnectStep 400 → Connect-via-Swapped 469) instead of
+       a hard pop. */
+    max-width 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    /* Same for height: when a flow starts that pre-reserves the iframe
+       size (via the min-height :has() rules below), grow smoothly from
+       the previous step's height instead of jumping. Min-height is on
+       modal-content rather than modal-body so the transitioned property
+       lives on an element that survives step swaps. */
+    min-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .rs-modal-content[data-theme="dark"] {
@@ -375,21 +391,17 @@
   padding-inline: 16px;
 }
 
-.rs-modal-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.rs-modal-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.rs-modal-body::-webkit-scrollbar-thumb {
-  background-color: var(--rs-surface-hover);
-  border-radius: var(--rs-radius-full);
+/* Scrollbars are hidden throughout the modal UI. The portfolio list
+   (.rs-asset-list) is the sole exception — it keeps a visible scrollbar since
+   it's a long, independently-scrolling list. The :not() exemption also keeps
+   this rule's specificity above the per-container scrollbar rules elsewhere. */
+.rs-modal *:not(.rs-asset-list) {
+  scrollbar-width: none;
 }
 
-.rs-modal-body::-webkit-scrollbar-thumb:hover {
-  background-color: var(--rs-muted-foreground);
+.rs-modal *:not(.rs-asset-list)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
 
 /* =============================================================================
@@ -1095,7 +1107,10 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  max-height: 320px;
+  /* Figma's asset list is 284px — exactly 4 rows (4×68 + 3×4 gaps). Cap here
+     so wallets with many assets scroll inside instead of growing the modal
+     past the design's height. */
+  max-height: 284px;
   overflow-y: auto;
   overscroll-behavior: contain;
   /* Pull rows back to the row's natural left edge inside a scrollable
@@ -1300,6 +1315,11 @@
   justify-content: center;
   gap: 4px;
   width: 100%;
+  /* `border-box` so the 16px side padding counts INTO the 100% width
+     instead of adding 32px on top of it (which otherwise pushes the
+     footer past containers with their own horizontal padding — e.g.
+     the tracker — and paints a phantom horizontal scrollbar). */
+  box-sizing: border-box;
   padding: 0 16px 16px;
   font-size: 11px;
   font-weight: 500;
@@ -1660,6 +1680,21 @@
      manages the vertical rhythm between body slot and powered-by. */
   padding: 0;
   gap: 16px;
+  /* Each screen fades in on mount so step-to-step transitions feel
+     progressive instead of a hard swap. Short enough that the user
+     doesn't perceive a delay; long enough to look intentional. */
+  animation: rs-screen-enter 180ms ease-out;
+}
+
+@keyframes rs-screen-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Body slot — direct child of .rs-screen. Always uses a 16px internal
@@ -2782,7 +2817,7 @@
 .rs-withdraw-dropdown-arrow {
   width: 24px;
   height: 24px;
-  color: var(--rs-icon-secondary);
+  color: #9f9fa9;
   transition: transform 0.15s;
 }
 
@@ -2968,11 +3003,13 @@
   align-items: center;
   justify-content: space-between;
   gap: 6px;
+  white-space: nowrap;
 }
 
 .rs-deposit-address-min {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   gap: 4px;
   font-size: 11px;
   font-weight: 500;
@@ -2980,8 +3017,8 @@
 }
 
 .rs-deposit-address-min-icon {
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
   flex-shrink: 0;
   color: var(--rs-icon-secondary);
 }
@@ -3005,6 +3042,7 @@
   border: none;
   cursor: pointer;
   font-family: inherit;
+  line-height: normal;
   color: var(--rs-muted);
   text-align: left;
 }
@@ -3085,7 +3123,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding-top: 12px;
+  padding-top: 8px;
   font-size: 12px;
   color: var(--rs-muted);
 }
@@ -3166,7 +3204,10 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 12px;
+  /* 11px vertical (not 12) so the 1px border lands the input at Figma's
+     48px total height — Figma draws the stroke inside the box, CSS adds it
+     outside. Horizontal stays 12px to match the design. */
+  padding: 11px 12px;
   background: var(--rs-surface-subtle);
   border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
@@ -3205,7 +3246,7 @@
 .rs-deposit-address-dropdown-chevron {
   width: 24px;
   height: 24px;
-  color: var(--rs-icon-secondary);
+  color: #9f9fa9;
   margin-left: auto;
   flex-shrink: 0;
   transition: transform 0.15s ease;
@@ -3226,10 +3267,10 @@
   border: 1px solid var(--rs-surface-subtle);
   border-radius: var(--rs-radius-sm);
   box-shadow: var(--rs-shadow-dropdown);
-  padding: 12px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0;
   max-height: 240px;
   overflow-y: auto;
   overscroll-behavior: none;
@@ -3241,8 +3282,8 @@
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 0;
-  border-radius: calc(var(--rs-radius-sm) - 2px);
+  padding: 8px 4px;
+  border-radius: 4px;
   border: none;
   background: transparent;
   color: var(--rs-foreground);
@@ -3251,12 +3292,12 @@
   line-height: normal;
   cursor: pointer;
   text-align: left;
-  transition: opacity 0.1s;
+  transition: background-color 0.1s;
   font-family: inherit;
 }
 
 .rs-deposit-address-dropdown-item:hover {
-  opacity: 0.7;
+  background: var(--rs-surface);
 }
 
 .rs-deposit-address-dropdown-item--active {
@@ -3274,39 +3315,18 @@
   border-radius: 8px;
 }
 
-/* Mid-refetch: dim the address/QR and block interaction so a stale
-   registration can't be copied or scanned until setup is ready again. */
-.rs-deposit-address-well--updating {
-  opacity: 0.4;
-  pointer-events: none;
-  filter: grayscale(0.3);
-  transition: opacity 0.15s;
-}
-
-.rs-deposit-address-updating {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--rs-muted);
-}
-
 .rs-deposit-address-qr {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 12px;
+  padding: 16px;
 }
 
 .rs-deposit-address-qr canvas,
 .rs-deposit-address-qr svg {
   display: block;
-  width: 200px;
-  height: 200px;
+  width: 190px;
+  height: 190px;
 }
 
 .rs-deposit-address-value {
@@ -3323,6 +3343,61 @@
   word-break: break-all;
 }
 
+/* Visually hidden but exposed to assistive tech — used by the skeleton's
+   "Preparing…" status, whose visual placeholders are all aria-hidden. */
+.rs-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Loading placeholders for DepositAddressSkeleton — grey blocks that pulse
+   while the smart account / deposit address are being prepared. Uses
+   --color-gray4 (zinc-200 light / zinc-800 dark) so it reads on the well in
+   both themes. */
+.rs-skeleton {
+  background: var(--color-gray4);
+  border-radius: 8px;
+  animation: rs-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.rs-skeleton-qr {
+  width: 190px;
+  height: 190px;
+}
+
+.rs-skeleton-address {
+  height: 12px;
+  margin: 0 16px 12px;
+  border-radius: 8px;
+}
+
+/* Inline placeholder sized to the fee value (e.g. "$0.04") while the
+   pre-deposit quote resolves. Stays put if the quote fails. */
+.rs-skeleton-fee {
+  display: inline-block;
+  width: 36px;
+  height: 13px;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+@keyframes rs-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
 .rs-deposit-address-copy {
   display: flex;
   align-items: center;
@@ -3336,6 +3411,7 @@
   color: var(--rs-foreground);
   font-size: 14px;
   font-weight: 500;
+  line-height: normal;
   font-family: inherit;
   cursor: pointer;
   transition: background-color 0.15s;
@@ -3440,8 +3516,8 @@
 .rs-deposit-notifications {
   position: absolute;
   bottom: 12px;
-  left: 12px;
-  right: 12px;
+  left: 0;
+  right: 0;
   z-index: 10;
   display: flex;
   flex-direction: column;
@@ -3498,7 +3574,8 @@
   justify-content: center;
 }
 
-.rs-deposit-notification-badge svg {
+.rs-deposit-notification-badge--complete svg,
+.rs-deposit-notification-badge--failed svg {
   width: 20px;
   height: 20px;
 }
@@ -3518,9 +3595,29 @@
   color: var(--rs-icon-secondary);
 }
 
-.rs-deposit-notification-badge--processing .rs-spinner {
+.rs-deposit-notification-spinner {
   width: 42px;
   height: 42px;
+  animation: rs-spin 1s linear infinite;
+}
+
+/* Spinner ring/arc colors flip with the theme. Light: a faint zinc-200 ring
+   with a zinc-600 arc on the near-white card. Dark: the Figma values — a
+   zinc-300 ring with a zinc-600 arc on the #18181b card. */
+.rs-deposit-notification-spinner-track {
+  stroke: #e4e4e7;
+}
+
+.rs-deposit-notification-spinner-head {
+  stroke: #52525c;
+}
+
+.rs-modal[data-theme="dark"] .rs-deposit-notification-spinner-track {
+  stroke: #d4d4d8;
+}
+
+.rs-modal[data-theme="dark"] .rs-deposit-notification-spinner-head {
+  stroke: #52525c;
 }
 
 .rs-deposit-notification-content {
@@ -3968,30 +4065,13 @@
   padding-right: 2px;
 }
 
-.rs-history-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.rs-history-list::-webkit-scrollbar-thumb {
-  background-color: var(--rs-surface-hover);
-  border-radius: var(--rs-radius-full);
-}
-
-.rs-history-list::-webkit-scrollbar-thumb:hover {
-  background-color: var(--rs-muted-foreground);
-}
-
-.rs-history-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 /* Card */
 .rs-history-card {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 16px 12px;
+  gap: 0;
+  padding: 12px 8px;
   background: var(--rs-surface-subtle);
   border: none;
   border-radius: 8px;
@@ -4106,12 +4186,38 @@
   white-space: nowrap;
 }
 
+/* Collapsing wrapper that animates the detail block between closed/open. */
+.rs-history-card-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.rs-history-card--expanded .rs-history-card-panel {
+  grid-template-rows: 1fr;
+}
+
+.rs-history-card-panel-inner {
+  overflow: hidden;
+  min-height: 0;
+  /* Keep the collapsed panel (and its tx link) out of the tab order.
+     visibility stays "visible" through the collapse so the content is
+     present during the height animation, then flips hidden at the end. */
+  visibility: hidden;
+  transition: visibility 0.25s;
+}
+
+.rs-history-card--expanded .rs-history-card-panel-inner {
+  visibility: visible;
+}
+
 /* Expanded detail block under the row. */
 .rs-history-card-details {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
+  padding-top: 16px;
 }
 
 .rs-history-card-link {
@@ -4301,6 +4407,12 @@
   gap: 8px;
 }
 
+/* Figma gives subtitle headers a 12px icon→title gap (vs 8px for title-only
+   headers like the QR screen). */
+.rs-body-header:has(.rs-body-header-subtitle) {
+  gap: 12px;
+}
+
 .rs-body-header-icon {
   display: inline-flex;
   align-items: center;
@@ -4349,11 +4461,81 @@
 .rs-body-header-subtitle {
   font-size: 14px;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: normal;
   color: var(--rs-muted);
   margin: 0;
 }
 
+/* Ticker — per-digit odometer-style animation for the live timer.
+   Each slot clips its content; the outgoing digit slides up and out while
+   the incoming digit slides up from below. Static chars (e.g. ":") never
+   change so they never animate. */
+
+.rs-ticker {
+  display: inline-flex;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.rs-ticker-slot {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+.rs-ticker-in,
+.rs-ticker-out {
+  display: inline-block;
+  line-height: 1;
+}
+
+.rs-ticker-out {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  animation: rs-ticker-out 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.rs-ticker-in {
+  animation: rs-ticker-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rs-ticker-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-70%);
+    opacity: 0;
+  }
+}
+
+@keyframes rs-ticker-in {
+  from {
+    transform: translateY(70%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rs-ticker-in,
+  .rs-ticker-out {
+    animation: none;
+  }
+  .rs-ticker-out {
+    display: none;
+  }
+}
+
 /* List row — Figma "oauth button" pattern */
 
 .rs-list {
@@ -4531,3 +4713,431 @@
   border: 1px solid var(--rs-border);
   background-color: var(--rs-background);
 }
+
+/* =============================================================================
+   Fiat On-Ramp (Swapped iframe flow)
+   ============================================================================= */
+
+/* `.rs-fiat-onramp` is a marker class on the .rs-screen root so the
+   modal-content `:has()` rules below can size correctly. Layout (padding,
+   gap, flex direction) comes from .rs-screen itself, identical to
+   ConnectStep — keeps the top of the page visually unchanged across the
+   payment-method picker → Swapped iframe transition. */
+
+.rs-fiat-onramp-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border-radius: var(--rs-radius-sm);
+  font-size: 12px;
+  line-height: 1.35;
+  border: 1px solid var(--rs-border);
+}
+
+.rs-fiat-onramp-banner--info {
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner--success {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.35);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner--warning {
+  background: rgba(234, 179, 8, 0.08);
+  border-color: rgba(234, 179, 8, 0.4);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner-title {
+  font-weight: 600;
+}
+
+.rs-fiat-onramp-banner-detail {
+  color: var(--rs-muted);
+}
+
+/* Iframe wrap sized to Swapped's documented dimensions — 400×482 for the
+   fiat on-ramp, 445×585 for Connect (overrides below). Centered horizontally
+   inside the modal so the step body can have header padding. */
+.rs-fiat-onramp-iframe-wrap {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  min-height: 482px;
+  margin: 0 auto;
+  border-radius: var(--rs-radius);
+  overflow: hidden;
+}
+
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe-wrap {
+  max-width: 445px;
+  min-height: 585px;
+}
+
+.rs-fiat-onramp-iframe {
+  display: block;
+  width: 100%;
+  height: 482px;
+  min-height: 482px;
+  border: 0;
+  background: var(--rs-background);
+}
+
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
+  height: 585px;
+  min-height: 585px;
+}
+
+.rs-fiat-onramp-loading,
+.rs-fiat-onramp-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  background: var(--rs-background);
+  color: var(--rs-foreground);
+  padding: 16px;
+}
+
+.rs-fiat-onramp-retry {
+  padding: 6px 14px;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.rs-fiat-onramp-retry:hover {
+  background: var(--rs-border);
+}
+
+/* =============================================================================
+   Exchange picker (Swapped Connect)
+   ============================================================================= */
+
+.rs-exchange-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.rs-exchange-card {
+  display: flex;
+  min-width: 0;
+  min-height: 104px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 8px;
+  border: 1px solid var(--rs-background-secondary);
+  border-radius: 8px;
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+.rs-exchange-card:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+  border-color: var(--rs-surface-hover);
+}
+
+.rs-exchange-card:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-exchange-card-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--rs-surface);
+  color: #71717b;
+  overflow: hidden;
+}
+
+.rs-exchange-card-logo img,
+.rs-exchange-card-logo svg {
+  width: 28px;
+  height: 28px;
+  display: block;
+  object-fit: contain;
+}
+
+.rs-exchange-card-name {
+  width: 100%;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--rs-foreground);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-exchange-select-state {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--rs-foreground);
+}
+
+.rs-exchange-select-state-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+/* =============================================================================
+   Modal sizing for the Swapped iframe step
+   =============================================================================
+   Modal stays at the default 400px width for the fiat variant (matches
+   Swapped's 400×482 iframe edge-to-edge). Connect needs 445px because its
+   iframe is 445×585. Height grows with the Rhinestone chrome (header
+   icon/title/subtitle + iframe + PoweredBy); cap to viewport so smaller
+   laptops get a scrollable modal-body instead of overflowing the screen. */
+
+/* Connect's iframe is 445×585 (vs fiat's 400×482). To preserve the same
+   12px horizontal padding as ConnectStep while still giving Swapped's
+   Connect iframe its documented width, widen the modal by 24px (12 each
+   side) → 469px. Applied from the moment the user enters exchange-connect
+   mode (`data-flow-mode` on rs-modal-body) — not just the iframe step —
+   so the modal width is stable across SetupStep → SwappedIframeStep.
+   Fiat keeps the default 400px modal; its iframe renders at 376px
+   content-width, matching the visual width of ConnectStep's list rows. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+  max-width: 469px;
+}
+
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+  max-height: calc(100vh - 40px);
+}
+
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]) .rs-modal-body,
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) .rs-modal-body {
+  /* `overflow-x: hidden` is explicit because a `visible` x-axis with an
+     `auto` y-axis gets promoted to `auto` on both axes, which paints a
+     phantom horizontal scrollbar even when content fits horizontally. */
+  overflow: hidden auto;
+}
+
+/* Pre-size the modal-content to the eventual iframe-mounted height for
+   the iframe-phase only:
+   - `[data-step-type="setup"]` — brief pre-flight before SwappedIframeStep mounts
+   - `:has(...) .rs-fiat-onramp` — SwappedIframeStep's iframe phase is in DOM
+   The tracker phase (.rs-swapped-tracker) is naturally shorter and is
+   excluded so the modal shrinks down to its content instead of leaving
+   a tall empty area below the tracker. Applied on modal-content (not
+   modal-body) so the transition on its min-height animates smoothly
+   when the iframe→tracker phase swap fires. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"][data-step-type="setup"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp) {
+  min-height: 691px;
+}
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"][data-step-type="setup"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
+  min-height: 794px;
+}
+
+/* =============================================================================
+   Custom order tracker
+   =============================================================================
+   Shown after the user creates an order with Swapped — replaces the iframe
+   until the deposit-processor reports bridge-complete. */
+/* Layout lives in rs-screen now — tracker just contributes the entrance
+   animation and a marker class for any future tracker-only tweaks. The
+   icon + title come from the shared BodyHeader so the header position
+   matches ConnectStep and SwappedIframeStep exactly. */
+.rs-swapped-tracker {
+  animation: rs-swapped-tracker-enter 250ms ease-out;
+}
+
+@keyframes rs-swapped-tracker-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rs-tracker-step-complete {
+  0% {
+    transform: scale(0.72);
+  }
+  60% {
+    transform: scale(1.08);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.rs-swapped-tracker-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.rs-swapped-tracker-step {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+/* Dotted vertical connector between adjacent step markers. */
+.rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: 11px;
+  width: 0;
+  height: 28px;
+  border-left: 1.5px dotted #d4d4d8;
+}
+
+.rs-swapped-tracker-step-label {
+  font-size: 15px;
+  color: var(--rs-foreground);
+  flex-grow: 1;
+}
+
+.rs-swapped-tracker-step-marker {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1.5px solid #d4d4d8;
+  color: transparent;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
+  border-color: #d4d4d8;
+  background: transparent;
+  /* Spinner SVG uses currentColor; base marker class sets color:transparent
+     for the (hidden) ring glyph — re-establish a visible color here so the
+     active-state spinner actually paints. */
+  color: #18181b;
+}
+
+.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker .rs-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+/* Satisfying scale-pop when a step ticks complete — the color transition
+   alone is too subtle to register as "that just happened". */
+.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
+  animation: rs-tracker-step-complete 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  background: #18181b;
+  border-color: #18181b;
+  color: #fff;
+}
+
+.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 3;
+}
+
+/* Failed step marker — terminal processor failure or cancellation. Red in
+   both themes (the failure color reads on light and dark). */
+.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker {
+  background: #fb2c36;
+  border-color: #fb2c36;
+  color: #fff;
+}
+
+.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 3;
+}
+
+/* Terminal message block shown below the steps on failure / cancellation. */
+.rs-swapped-tracker-terminal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.rs-swapped-tracker-terminal-message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--rs-foreground-secondary, #71717a);
+}
+
+.rs-swapped-tracker-terminal--failed .rs-swapped-tracker-terminal-message {
+  color: #fb2c36;
+}
+
+.rs-swapped-tracker-retry {
+  padding: 8px 16px;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.rs-swapped-tracker-retry:hover {
+  background: var(--rs-border);
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
+  border-left-color: #3f3f46;
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--pending .rs-swapped-tracker-step-marker,
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
+  border-color: #3f3f46;
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
+  background: #fafafa;
+  border-color: #fafafa;
+  color: #18181b;
+}