<NME> index.css
<BEF> button.workflow-tracker__toggle {
  min-width: 3.75rem;
  padding: var(--boxel-sp-xxxs);
}

.workflow-tracker {
  --workflow-tracker-max-width: 18.125rem;
  --workflow-tracker-max-height: 75vh;
  --workflow-tracker-background: var(--boxel-purple-500);

  width: 100%;
  max-width: var(--workflow-tracker-max-width);
  min-height: var(--workflow-tracker-max-width);
  max-height: var(--workflow-tracker-max-height);
  padding: var(--boxel-sp-sm) 0;
}

.workflow-tracker__toggle-icon {
  --icon-color: var(--boxel-dark);

  letter-spacing: var(--boxel-lsp-xl);
  text-transform: uppercase;
  box-shadow: none;
  z-index: 1;
  transition: box-shadow var(--boxel-transition);
}

.workflow-tracker__heading--scrolled {
  box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

.workflow-tracker__list {
  padding: 0 var(--boxel-sp) var(--boxel-sp-sm);
}

.workflow-tracker__list + .workflow-tracker__heading {
  box-shadow: 0 -2px 2px rgb(0 0 0 / 35%);
}

.workflow-tracker__li + .workflow-tracker__li .workflow-tracker__li-content {
  border-top: 1px solid var(--boxel-purple-600);
  border-radius: 0;
}

.workflow-tracker__li:hover .workflow-tracker__li-content:enabled,
.workflow-tracker__li:hover + .workflow-tracker__li .workflow-tracker__li-content:enabled {
  border-top-color: transparent;
  border-radius: var(--boxel-border-radius);
}

.workflow-tracker__toggle-icon {
  --icon-color: var(--boxel-dark);

  margin-right: var(--boxel-sp-xxxs);
}

.workflow-tracker__heading-icon {
  --icon-color: var(--boxel-light);
}

.workflow-tracker__count {
  color: var(--boxel-highlight);
  font-weight: 700;
  font-size: var(--boxel-font-size-sm);
}

.workflow-tracker__footer {
  padding: var(--boxel-sp-sm) var(--boxel-sp-xs);
  text-align: center;
}

.abandon-workflow-confirmation {
  padding: var(--boxel-sp-lg);
}

.abandon-workflow-confirmation p {
  margin-top: var(--boxel-sp-sm);
  margin-bottom: var(--boxel-sp-sm);
}

<MSG> Workflow Tracker horizontal rules and hover states

<DFF> @@ -15,6 +15,22 @@
   padding: var(--boxel-sp-sm) 0;
 }
 
+ul + .workflow-tracker__heading {
+  border-top: 2px solid var(--boxel-purple-800);
+  margin-top: var(--boxel-sp);
+  padding-top: var(--boxel-sp-sm);
+}
+
+.workflow-tracker__li .workflow-tracker__li-content {
+  border-top: 1px solid var(--boxel-purple-600);
+}
+
+.workflow-tracker__li:first-child .workflow-tracker__li-content,
+.workflow-tracker__li:hover .workflow-tracker__li-content:enabled,
+.workflow-tracker__li:hover + .workflow-tracker__li .workflow-tracker__li-content:enabled {
+  border-top-color: transparent;
+}
+
 .workflow-tracker__toggle-icon {
   --icon-color: var(--boxel-dark);
 

{'commit': 'diff --git a/packages/web-client/app/components/card-pay/header/workflow-tracker/dropdown-list/index.hbs b/packages/web-client/app/components/card-pay/header/workflow-tracker/dropdown-list/index.hbs\nindex 723da5439..940201aeb 100644\n--- a/packages/web-client/app/components/card-pay/header/workflow-tracker/dropdown-list/index.hbs\n+++ b/packages/web-client/app/components/card-pay/header/workflow-tracker/dropdown-list/index.hbs\n@@ -11,10 +11,11 @@\n   </heading>\n   <ul>\n     {{#each this.workflowPersistence.activeWorkflows as |workflowMeta|}}\n-      <li data-test-active-workflow>\n+      <li data-test-active-workflow class="workflow-tracker__li">\n         <CardPay::Header::WorkflowTracker::Item\n           @workflowMeta={{workflowMeta}}\n           @closeList={{@close}}\n+          class="workflow-tracker__li-content"\n         />\n       </li>\n     {{/each}}\n@@ -32,8 +33,12 @@\n     </heading>\n     <ul>\n       {{#each this.workflowPersistence.completedWorkflows as |workflowMeta|}}\n-        <li data-test-completed-workflow>\n-          <CardPay::Header::WorkflowTracker::Item @workflowMeta={{workflowMeta}} />\n+        <li data-test-completed-workflow class="workflow-tracker__li">\n+          <CardPay::Header::WorkflowTracker::Item\n+            @workflowMeta={{workflowMeta}}\n+            @closeList={{@close}}\n+            class="workflow-tracker__li-content"\n+          />\n         </li>\n       {{/each}}\n     </ul>\ndiff --git a/packages/web-client/app/components/card-pay/header/workflow-tracker/index.css b/packages/web-client/app/components/card-pay/header/workflow-tracker/index.css\nindex 36422c4a2..a82dd71dd 100644\n--- a/packages/web-client/app/components/card-pay/header/workflow-tracker/index.css\n+++ b/packages/web-client/app/components/card-pay/header/workflow-tracker/index.css\n@@ -15,6 +15,22 @@\n   padding: var(--boxel-sp-sm) 0;\n }\n \n+ul + .workflow-tracker__heading {\n+  border-top: 2px solid var(--boxel-purple-800);\n+  margin-top: var(--boxel-sp);\n+  padding-top: var(--boxel-sp-sm);\n+}\n+\n+.workflow-tracker__li .workflow-tracker__li-content {\n+  border-top: 1px solid var(--boxel-purple-600);\n+}\n+\n+.workflow-tracker__li:first-child .workflow-tracker__li-content,\n+.workflow-tracker__li:hover .workflow-tracker__li-content:enabled,\n+.workflow-tracker__li:hover + .workflow-tracker__li .workflow-tracker__li-content:enabled {\n+  border-top-color: transparent;\n+}\n+\n .workflow-tracker__toggle-icon {\n   --icon-color: var(--boxel-dark);\n \ndiff --git a/packages/web-client/app/components/card-pay/header/workflow-tracker/item/index.hbs b/packages/web-client/app/components/card-pay/header/workflow-tracker/item/index.hbs\nindex 7290fc1d2..33a26f2a6 100644\n--- a/packages/web-client/app/components/card-pay/header/workflow-tracker/item/index.hbs\n+++ b/packages/web-client/app/components/card-pay/header/workflow-tracker/item/index.hbs\n@@ -3,6 +3,7 @@\n   type=\'button\'\n   disabled={{if this.isComplete \'disabled\'}}\n   {{on \'click\' this.visit}}\n+  ...attributes\n >\n   <heading class=\'workflow-tracker-item__heading\'>\n     {{this.workflowDisplayName}}\n', 'commit_subject': 'Workflow Tracker horizontal rules and hover states', 'repo_name': 'cardstack/cardstack', 'committer': {'name': 'Luke Melia', 'email': '6b3799be4300e44489a08090123f3842e6419da5@lukemelia.com', 'time_sec': '1632947804', 'tz_offset': '-240', 'date': {'seconds': '1632947804'}}, 'commit_tree': 'b195913710f5b46601122516d3e29978dbbdfab2', 'commit_message': 'Workflow Tracker horizontal rules and hover states\n', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': '@@ -15,6 +15,22 @@\n   padding: var(--boxel-sp-sm) 0;\n }\n \n+ul + .workflow-tracker__heading {\n+  border-top: 2px solid var(--boxel-purple-800);\n+  margin-top: var(--boxel-sp);\n+  padding-top: var(--boxel-sp-sm);\n+}\n+\n+.workflow-tracker__li .workflow-tracker__li-content {\n+  border-top: 1px solid var(--boxel-purple-600);\n+}\n+\n+.workflow-tracker__li:first-child .workflow-tracker__li-content,\n+.workflow-tracker__li:hover .workflow-tracker__li-content:enabled,\n+.workflow-tracker__li:hover + .workflow-tracker__li .workflow-tracker__li-content:enabled {\n+  border-top-color: transparent;\n+}\n+\n .workflow-tracker__toggle-icon {\n   --icon-color: var(--boxel-dark);\n \n', 'addition_count': 16, 'deletion_count': 0, 'src_file': 'a/packages/web-client/app/components/card-pay/header/workflow-tracker/index.css', 'tgt_file': 'b/packages/web-client/app/components/card-pay/header/workflow-tracker/index.css', 'file_extension': '.css', 'before_file': 'button.workflow-tracker__toggle {\n  min-width: 3.75rem;\n  padding: var(--boxel-sp-xxxs);\n}\n\n.workflow-tracker {\n  --workflow-tracker-max-width: 18.125rem;\n  --workflow-tracker-max-height: 75vh;\n  --workflow-tracker-background: var(--boxel-purple-500);\n\n  width: 100%;\n  max-width: var(--workflow-tracker-max-width);\n  min-height: var(--workflow-tracker-max-width);\n  max-height: var(--workflow-tracker-max-height);\n  padding: var(--boxel-sp-sm) 0;\n}\n\n.workflow-tracker__toggle-icon {\n  --icon-color: var(--boxel-dark);\n\n  letter-spacing: var(--boxel-lsp-xl);\n  text-transform: uppercase;\n  box-shadow: none;\n  z-index: 1;\n  transition: box-shadow var(--boxel-transition);\n}\n\n.workflow-tracker__heading--scrolled {\n  box-shadow: 0 1px 2px rgb(0 0 0 / 35%);\n}\n\n.workflow-tracker__list {\n  padding: 0 var(--boxel-sp) var(--boxel-sp-sm);\n}\n\n.workflow-tracker__list + .workflow-tracker__heading {\n  box-shadow: 0 -2px 2px rgb(0 0 0 / 35%);\n}\n\n.workflow-tracker__li + .workflow-tracker__li .workflow-tracker__li-content {\n  border-top: 1px solid var(--boxel-purple-600);\n  border-radius: 0;\n}\n\n.workflow-tracker__li:hover .workflow-tracker__li-content:enabled,\n.workflow-tracker__li:hover + .workflow-tracker__li .workflow-tracker__li-content:enabled {\n  border-top-color: transparent;\n  border-radius: var(--boxel-border-radius);\n}\n\n.workflow-tracker__toggle-icon {\n  --icon-color: var(--boxel-dark);\n\n  margin-right: var(--boxel-sp-xxxs);\n}\n\n.workflow-tracker__heading-icon {\n  --icon-color: var(--boxel-light);\n}\n\n.workflow-tracker__count {\n  color: var(--boxel-highlight);\n  font-weight: 700;\n  font-size: var(--boxel-font-size-sm);\n}\n\n.workflow-tracker__footer {\n  padding: var(--boxel-sp-sm) var(--boxel-sp-xs);\n  text-align: center;\n}\n\n.abandon-workflow-confirmation {\n  padding: var(--boxel-sp-lg);\n}\n\n.abandon-workflow-confirmation p {\n  margin-top: var(--boxel-sp-sm);\n  margin-bottom: var(--boxel-sp-sm);\n}\n', 'message': 'Workflow Tracker horizontal rules and hover states\n', 'author_name': 'Luke Melia', 'lang': 'css'}