feat: drag account groups and separate grouped card rows

apps/web/src/style.css

@@ -1497,24 +1497,84 @@ textarea,
 
 .group-order-list {
   list-style: none;
-  padding: 0;
-  max-height: 55vh;
+  padding: 4px;
+  margin: 16px -4px;
+  max-height: 50vh;
   overflow-y: auto;
+  overscroll-behavior: contain;
 }
 .group-order-list li {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
-  padding: 10px 0;
-  border-bottom: 1px solid #e5e9e5;
+  margin: 8px 0;
+  padding: 10px 12px;
+  border: 1px solid #e1e8e3;
+  border-radius: 12px;
+  background: #f8faf8;
 }
-.group-order-list li > span {
+.group-order-list li.drag-active {
+  background: #e6f2eb;
+  border-color: #79a38a;
+  box-shadow: 0 3px 12px #234c3b18;
+}
+.group-order-name {
+  flex: 1;
   min-width: 0;
   overflow-wrap: anywhere;
+  font-weight: 500;
 }
-.group-order-list li > div {
-  display: flex;
-  gap: 6px;
+.group-order-index {
+  font-size: 12px;
+  color: #718279;
+  font-variant-numeric: tabular-nums;
+}
+.group-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
   flex-shrink: 0;
+  color: #718279;
+  border: 0;
+  background: transparent;
+  border-radius: 8px;
+  cursor: grab;
+  touch-action: none;
+}
+.group-drag-handle:hover {
+  background: #e8eee9;
+  color: #234c3b;
+}
+.group-drag-handle:focus-visible {
+  outline: 2px solid #39785b;
+  outline-offset: 2px;
+}
+.group-order-list.is-dragging,
+.group-order-list.is-dragging .group-drag-handle {
+  cursor: grabbing;
+}
+.group-order-help {
+  line-height: 1.6;
+}
+
+.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;
+}
+
+.position-grid > .account-group-title {
+  grid-column: 1 / -1;
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: #456352;
 }