Mock server workflow - first draft

src/styles/components.css

@@ -550,3 +550,60 @@
   justify-content: flex-end;
   margin-top: 1.1rem;
 }
+
+/* Collapsible cards */
+.card-collapsible .card-header {
+  gap: 12px;
+}
+.card-collapsible .card-actions {
+  align-items: center;
+}
+.card-collapse-toggle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #c9c3b9;
+  border-radius: 999px;
+  background: linear-gradient(#ffffff, #f1efeb);
+  color: #4f4a43;
+  cursor: pointer;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 1px rgba(0,0,0,.05);
+  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+.card-collapse-toggle:hover {
+  border-color: #aaa299;
+  background: linear-gradient(#ffffff, #e8e5df);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 2px 5px rgba(0,0,0,.08);
+}
+.card-collapse-toggle:focus-visible {
+  outline: 3px solid rgba(82, 130, 177, .22);
+  outline-offset: 2px;
+}
+.card-collapse-toggle svg {
+  transition: transform .22s ease;
+}
+.card-collapsible.is-collapsed .card-collapse-toggle svg {
+  transform: rotate(-180deg);
+}
+.card-collapse-region {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows .24s ease, opacity .18s ease;
+}
+.card-collapsible.is-collapsed .card-collapse-region {
+  display: none;
+}
+.card-collapse-region > .card-body {
+  min-height: 0;
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  .card-collapse-toggle,
+  .card-collapse-toggle svg,
+  .card-collapse-region {
+    transition: none;
+  }
+}