.flow-diagram {
  --flow-accent: var(--gold-data);
  --flow-cycle: 16s;
  position: relative;
  container: flow-diagram / inline-size;
  isolation: isolate;
  margin-top: 10px;
}

.flow-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.flow-heading #architectureTitle { margin: 0; }
.flow-heading .flow-caption {
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font: 9px var(--font-mono);
}

.flow-diagram > ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6cqw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-diagram > ol > li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 0 8px 12px;
  text-align: center;
}

.flow-diagram .flow-station {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 7px var(--panel);
}

.flow-diagram .flow-station::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--flow-accent);
  border-radius: inherit;
  opacity: 0;
  animation: flow-station-arrival var(--flow-cycle) ease-out infinite;
  animation-delay: var(--flow-arrival, calc(var(--flow-cycle) * .18));
  pointer-events: none;
}

.flow-diagram .architecture-icon { width: 27px; height: 27px; }
.flow-diagram .flow-step-content { min-width: 0; margin-top: 8px; }
.flow-diagram strong, .flow-diagram small { display: block; }
.flow-diagram strong { color: var(--ink); font-size: 14px; line-height: 1.3; }
.flow-diagram small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.flow-diagram .flow-action {
  display: block;
  margin-top: 10px;
  color: var(--flow-accent);
  font: 9px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.flow-diagram .flow-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.flow-diagram .flow-track path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

@keyframes flow-station-arrival {
  0% { opacity: 0; box-shadow: 0 0 0 0 transparent; }
  3% { opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--flow-accent) 12%, transparent); }
  12%, 100% { opacity: 0; box-shadow: 0 0 0 9px transparent; }
}

@container flow-diagram (max-width: 43rem) {
  .flow-diagram > ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flow-diagram > ol > li {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: start;
    column-gap: 18px;
    row-gap: 4px;
    padding: 0 6px;
    text-align: left;
  }
  .flow-diagram .flow-station { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .flow-diagram .flow-step-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; grid-column: 2; grid-row: 1; align-self: center; margin: 0; width: 100%; }
  .flow-diagram .flow-action { grid-column: 2; grid-row: 1 / 3; margin: 0; }
}

/* Each handoff has its own illustrative payload; only the provider scene is a road. */
.flow-diagram > ol > li:nth-child(2) { --flow-arrival: calc(var(--flow-cycle) * .34); }
.flow-diagram > ol > li:nth-child(3) { --flow-arrival: calc(var(--flow-cycle) * .5); }
.flow-diagram > ol > li:nth-child(4) { --flow-arrival: calc(var(--flow-cycle) * .64); }
.flow-diagram > ol > li:nth-child(5) { --flow-arrival: calc(var(--flow-cycle) * .84); }
.flow-diagram .flow-visual { position: relative; display: grid; justify-items: center; width: 100%; height: 74px; }
.flow-diagram .flow-provider-scene { width: 140px; }
.flow-diagram .flow-recording-led { fill: none; stroke: var(--forest-soft); stroke-width: 2; animation: flow-recording-blink var(--flow-cycle) linear infinite; }
.flow-diagram .flow-step-content { margin-top: 0; }
.flow-diagram .flow-camera-beam { position: absolute; top: 30px; left: 20px; width: 100px; height: 40px; clip-path: polygon(var(--flow-camera-aim, 50%) 0, 0 100%, 100% 100%); background: var(--forest-soft); opacity: 0; animation: flow-camera-watch var(--flow-cycle) linear infinite; }
.flow-diagram .flow-scene-road { position: absolute; top: 0; left: 0; width: 140px; height: 74px; transform: translateY(7px); fill: none; opacity: 0; animation: flow-scene-road-visible var(--flow-cycle) linear infinite; }
.flow-diagram .flow-scene-road path { stroke-linecap: round; }
.flow-diagram .flow-scene-road-edge { stroke: var(--line); stroke-width: 11; }
.flow-diagram .flow-scene-road-surface { stroke: color-mix(in srgb, var(--ink) 8%, var(--panel)); stroke-width: 9; }
.flow-diagram .flow-scene-road-center { stroke: color-mix(in srgb, var(--flow-accent) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 7; }
.flow-diagram .flow-scene-car { position: absolute; top: 0; left: 0; width: 22px; height: 18px; fill: var(--panel); stroke: var(--flow-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; offset-path: path("M 11 64 L 129 64"); offset-anchor: center; offset-rotate: 0deg; opacity: 0; animation: flow-car-observation var(--flow-cycle) linear infinite; }
.flow-diagram .flow-oncoming-car { visibility: hidden; stroke: var(--rose); offset-path: path("M 129 64 L 81 64"); animation-name: flow-car-collision; }
.flow-diagram.has-collision .flow-scene-car:not(.flow-oncoming-car) { offset-path: path("M 11 64 L 59 64"); animation-name: flow-car-collision; }
.flow-diagram.has-collision .flow-oncoming-car { visibility: visible; }
.flow-diagram .flow-scene-impact { position: absolute; top: 64px; left: 70px; width: 14px; height: 14px; transform: translate(-50%, -50%); fill: none; stroke: var(--rose); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: flow-scene-contact var(--flow-cycle) ease-out infinite; visibility: hidden; }
.flow-diagram.has-collision .flow-scene-impact { visibility: visible; }
.flow-diagram .flow-track .flow-link { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.flow-diagram .flow-transfer { position: absolute; top: 0; left: 0; z-index: 0; box-sizing: border-box; offset-path: var(--flow-link-path); offset-anchor: center; pointer-events: none; animation-duration: var(--flow-cycle); animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0; }
.flow-diagram .flow-observation { --flow-link-path: var(--flow-link-0); padding: 3px 5px; border-radius: 4px; background: var(--flow-accent); color: var(--panel); font: 8px var(--font-mono); animation-name: flow-send-observation; }
.flow-diagram .flow-event { --flow-link-path: var(--flow-link-0); width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--rose); color: var(--panel); font: bold 10px var(--font-mono); animation-name: flow-send-event; }
.flow-diagram .flow-record { --flow-link-path: var(--flow-link-1); width: 20px; height: 17px; padding: 3px; border: 1px solid var(--forest-soft); border-radius: 3px; background: var(--panel); box-shadow: -2px 2px 0 var(--line); animation-name: flow-insert-record; }
.flow-diagram .flow-record > i { display: block; height: 1px; margin: 2px 0; background: var(--forest-soft); }
.flow-diagram .flow-record-second { animation-delay: .32s; }
.flow-diagram .flow-query { --flow-link-path: var(--flow-link-2); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--flow-accent); color: var(--flow-accent); background: var(--panel); font: bold 10px var(--font-mono); animation-name: flow-read-query; }
.flow-diagram .flow-response { --flow-link-path: var(--flow-link-2); padding: 2px 4px; border: 1px solid var(--forest-soft); border-radius: 3px; color: var(--forest-soft); background: var(--panel); font: 9px var(--font-mono); animation-name: flow-read-response; }
.flow-diagram .flow-window { --flow-link-path: var(--flow-link-3); --flow-packet-pitch: calc((var(--flow-window-width, 94px) - 8px) / 3); offset-distance: 50%; offset-rotate: 0deg; width: var(--flow-window-width, 94px); height: 62px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); animation-name: flow-window-visible; }
.flow-diagram .flow-window-lane { position: absolute; left: 3px; right: 3px; height: 12px; overflow: hidden; border: 1px solid var(--flow-accent); border-radius: 2px; }
.flow-diagram .flow-window-send { top: 3px; }
.flow-diagram .flow-window-receive { bottom: 9px; border-color: var(--forest-soft); }
.flow-diagram .flow-window-strip { display: flex; align-items: center; gap: 2px; width: max-content; height: 10px; animation: flow-window-sender var(--flow-cycle) linear infinite; }
.flow-diagram .flow-window-receive .flow-window-strip { animation-name: flow-window-receiver; }
.flow-diagram .flow-window-strip > i { display: grid; place-items: center; flex: 0 0 calc(var(--flow-packet-pitch) - 2px); height: 10px; border-radius: 1px; color: var(--ink); background: color-mix(in srgb, var(--flow-accent) 24%, var(--panel)); font: 7px var(--font-mono); }
.flow-diagram .flow-window-receive i { background: color-mix(in srgb, var(--forest-soft) 28%, var(--panel)); }
.flow-diagram .flow-window-exchange { position: absolute; left: 0; top: 16px; width: 100%; height: 24px; overflow: visible; fill: none; stroke: var(--flow-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-diagram .flow-window-route { opacity: .45; }
.flow-diagram .flow-window-return, .flow-diagram .flow-window-backward { stroke: var(--forest-soft); }
.flow-diagram .flow-window-forward, .flow-diagram .flow-window-backward { stroke-dasharray: 70; stroke-dashoffset: 70; opacity: 0; animation: flow-window-data var(--flow-cycle) linear infinite; }
.flow-diagram .flow-window-backward { animation-name: flow-window-reply; }
.flow-diagram .flow-window-data-label, .flow-diagram .flow-window-ack-label { position: absolute; top: 23px; left: 4px; color: var(--flow-accent); font: 6px var(--font-mono); }
.flow-diagram .flow-window-ack-label { left: auto; right: 4px; color: var(--forest-soft); }
.flow-diagram .flow-window-size { position: absolute; left: 5px; bottom: 1px; color: var(--muted); font: 5px var(--font-mono); }
.flow-diagram .flow-stored-rows { position: absolute; top: 56px; display: grid; gap: 2px; width: 27px; animation: flow-store-visible var(--flow-cycle) linear infinite; }
.flow-diagram .flow-stored-rows > i { height: 5px; border: 1px solid var(--forest-soft); border-radius: 2px; }
.flow-diagram .flow-chart-reveal { position: absolute; top: 56px; display: flex; align-items: end; gap: 3px; width: 43px; height: 18px; border-bottom: 1px solid var(--line); clip-path: inset(0 100% 0 0); animation: flow-render-chart var(--flow-cycle) linear infinite; }
.flow-diagram .flow-chart-reveal > i { width: 6px; height: 12px; border-radius: 2px 2px 0 0; background: var(--forest-soft); }
.flow-diagram .flow-chart-reveal > i:nth-child(2n) { height: 17px; background: var(--flow-accent); }
.flow-diagram .flow-chart-reveal > i:last-child { height: 17px; }
.flow-diagram.motion-paused *, .flow-diagram.motion-paused *::after { animation-play-state: paused; }

@keyframes flow-camera-watch { 0%, 22% { opacity: .07; } 28%, 100% { opacity: 0; } }
@keyframes flow-scene-road-visible { 0% { opacity: 0; } 3%, 20% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes flow-recording-blink {
  0%, 1%, 5%, 9%, 13%, 17%, 21% { stroke: #df4f5c; opacity: .25; }
  3%, 7%, 11%, 15%, 19%, 23% { stroke: #df4f5c; opacity: 1; }
  28%, 100% { stroke: var(--forest-soft); opacity: 1; }
}
@keyframes flow-car-observation { 0%, 2% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 18%, 20% { offset-distance: 100%; opacity: 1; } 23%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-car-collision { 0%, 2% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 18%, 20% { offset-distance: 100%; opacity: 1; } 23%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-scene-contact { 0%, 17% { opacity: 0; } 18%, 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes flow-send-observation { 0%, 18% { offset-distance: 0%; opacity: 0; } 20% { opacity: 1; } 32% { offset-distance: 100%; opacity: 1; } 34%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-send-event { 0%, 21% { offset-distance: 0%; opacity: 0; } 23% { opacity: 1; } 34% { offset-distance: 100%; opacity: 1; } 36%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-insert-record { 0%, 34% { offset-distance: 0%; opacity: 0; } 36% { opacity: 1; } 47% { offset-distance: 100%; opacity: 1; } 50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-read-query { 0%, 50% { offset-distance: 100%; opacity: 0; } 51% { opacity: 1; } 56% { offset-distance: 0%; opacity: 1; } 57%, 100% { offset-distance: 0%; opacity: 0; } }
@keyframes flow-read-response { 0%, 56% { offset-distance: 0%; opacity: 0; } 57% { opacity: 1; } 64% { offset-distance: 100%; opacity: 1; } 66%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes flow-window-visible { 0%, 60% { opacity: 0; } 65%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes flow-window-sender {
  0%, 77% { transform: translateX(0); }
  78%, 93% { transform: translateX(calc(var(--flow-packet-pitch) * -3)); }
  94%, 100% { transform: translateX(calc(var(--flow-packet-pitch) * -6)); }
}
@keyframes flow-window-receiver {
  0%, 72% { transform: translateX(0); }
  73%, 87% { transform: translateX(calc(var(--flow-packet-pitch) * -3)); }
  88%, 100% { transform: translateX(calc(var(--flow-packet-pitch) * -6)); }
}
@keyframes flow-window-data {
  0%, 64%, 78%, 95%, 100% { stroke-dashoffset: 70; opacity: 0; }
  65%, 79% { stroke-dashoffset: 70; opacity: 1; }
  72%, 87% { stroke-dashoffset: 0; opacity: 1; }
  73%, 88% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flow-window-reply {
  0%, 72%, 87%, 97%, 100% { stroke-dashoffset: 70; opacity: 0; }
  73%, 88% { stroke-dashoffset: 70; opacity: 1; }
  77%, 93% { stroke-dashoffset: 0; opacity: 1; }
  78%, 94% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flow-store-visible { 0%, 40% { opacity: 0; transform: translateY(-5px); } 50%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes flow-render-chart { 0%, 84% { clip-path: inset(0 100% 0 0); } 94%, 98% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }

@container flow-diagram (min-width: 43rem) and (max-width: 50rem) {
  .flow-diagram > ol > li { padding-inline: 3px; }
  .flow-diagram .flow-visual { transform: scale(.86); transform-origin: center top; }
}

@container flow-diagram (max-width: 43rem) {
  .flow-diagram > ol > li { grid-template-columns: 58px minmax(0, 1fr); min-height: 68px; }
  .flow-diagram .flow-visual { grid-column: 1; grid-row: 1; align-self: center; width: 58px; height: 68px; transform: none; }
  .flow-diagram .flow-station { width: 46px; height: 46px; }
  .flow-diagram .architecture-icon { width: 25px; height: 25px; }
  .flow-diagram .flow-visual > .flow-station { position: relative; grid-column: auto; grid-row: auto; align-self: start; }
  .flow-diagram .flow-provider-scene { width: 140px; height: 84px; justify-items: start; }
  .flow-diagram .flow-provider-scene + .flow-step-content { align-self: start; padding-top: 4px; }
  .flow-diagram .flow-provider-scene .flow-scene-road, .flow-diagram .flow-provider-scene .flow-scene-car { top: 6px; }
  .flow-diagram .flow-scene-impact { top: 70px; }
  .flow-diagram .flow-camera-beam { top: 26px; left: 0; height: 44px; --flow-camera-aim: 23%; }
  .flow-diagram .flow-stored-rows, .flow-diagram .flow-chart-reveal { top: 48px; }
  .flow-diagram .flow-window { transform: translateX(24px); }
  .flow-diagram > ol > li:nth-child(4) { padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-diagram *, .flow-diagram *::after { animation: none !important; }
  .flow-diagram .flow-transfer, .flow-diagram .flow-scene-car,
  .flow-diagram .flow-camera-beam, .flow-diagram .flow-scene-impact, .flow-diagram .flow-station::after { display: none; }
  .flow-diagram .flow-stored-rows { opacity: 1; }
  .flow-diagram .flow-chart-reveal { clip-path: none; }
}