feat #477: show vpd ords control architecture

src/main/resources/static/css/app.css

@@ -184,6 +184,14 @@ body {
   .rw-menu-group:focus-within .rw-menu-panel {
     display: grid;
   }
+
+  .architecture-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .architecture-arrow {
+    display: none;
+  }
 }
 
 .page-title {
@@ -201,6 +209,52 @@ body {
   margin: .35rem 0 0;
 }
 
+.architecture-strip {
+  align-items: stretch;
+  display: grid;
+  gap: .5rem;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
+  margin-bottom: 1rem;
+}
+
+.architecture-step {
+  background: var(--rw-surface);
+  border: 1px solid var(--rw-border);
+  border-radius: 8px;
+  padding: .85rem;
+}
+
+.architecture-step.active {
+  border-color: var(--rw-primary);
+  box-shadow: inset 0 0 0 1px var(--rw-primary);
+}
+
+.architecture-kicker {
+  color: var(--rw-muted);
+  display: block;
+  font-size: .72rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.architecture-step strong {
+  display: block;
+  font-size: .95rem;
+  margin-top: .15rem;
+}
+
+.architecture-step p {
+  color: var(--rw-muted);
+  font-size: .82rem;
+  margin: .25rem 0 0;
+}
+
+.architecture-arrow {
+  align-self: center;
+  color: var(--rw-muted);
+  font-weight: 800;
+}
+
 .rw-card,
 .content-band,
 .summary-tile {