Refactor campaign recipient and review presentation

webui/src/styles/campaign-workspace.css

@@ -1499,6 +1499,7 @@
 }
 
 .review-flow-navigation {
+  --stage-rail-partial: var(--review-flow-partial);
   position: sticky;
   top: 85px;
   z-index: 35;
@@ -1512,94 +1513,6 @@
   overflow-x: auto;
 }
 
-.review-flow-navigation-track {
-  display: flex;
-  align-items: flex-start;
-  width: max-content;
-  min-width: max-content;
-  margin: 0 auto;
-}
-
-.review-flow-navigation-group {
-  display: flex;
-  align-items: flex-start;
-}
-
-.review-flow-navigation-item {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  min-width: 96px;
-  padding: 3px 5px;
-  border: 0;
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  text-align: center;
-  cursor: pointer;
-}
-
-.review-flow-navigation-item:hover .review-flow-navigation-icon,
-.review-flow-navigation-item:focus-visible .review-flow-navigation-icon {
-  background: color-mix(in srgb, var(--review-nav-color) 15%, var(--surface));
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--review-nav-color) 12%, transparent);
-}
-
-.review-flow-navigation-item:focus-visible {
-  outline: none;
-}
-
-.review-flow-navigation-icon {
-  width: 38px;
-  height: 38px;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--review-nav-color);
-  border-radius: 50%;
-  color: color-mix(in srgb, var(--review-nav-color) 82%, var(--text));
-  background: color-mix(in srgb, var(--review-nav-color) 8%, var(--surface));
-  transition: background .16s ease, box-shadow .16s ease;
-}
-
-.review-flow-navigation-copy {
-  display: grid;
-  justify-items: center;
-  min-width: 0;
-}
-
-.review-flow-navigation-copy strong {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  color: var(--text-strong);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.review-flow-navigation-copy small {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 14px;
-  color: var(--muted);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.review-flow-navigation-line {
-  width: 42px;
-  height: 2px;
-  margin: 21px 2px 0;
-  flex: 0 0 auto;
-  background: linear-gradient(
-    to right,
-    var(--review-nav-line-color, var(--review-nav-color)),
-    var(--review-nav-line-next-color, var(--review-nav-next-color, var(--review-nav-color)))
-  );
-  opacity: .82;
-}
-
 .review-flow-timeline {
   width: 100%;
   max-width: none;