.workflow-map {
  text-align: center;
}
.workflow-heading {
  padding-block-start: var(--space-12);
  margin-block-end: var(--space-8);
  text-align: start;
}
.workflow-heading h2 { max-width: 24ch; }
.workflow-heading p {
  max-width: var(--reading-max);
  margin-block-start: var(--space-6);
}
.workflow-figure { margin: 0; }
.workflow-route-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.workflow-atlas {
  max-width: clamp(600px, 100svh - 48px, 900px);
  margin: 0 auto;
  background: radial-gradient(circle at 50% 53%, var(--surface) 0%, transparent 70%);
}
.workflow-visual {
  width: 100%;
  height: auto;
  overflow: visible;
  user-select: none;
}
.workflow-rings {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  pointer-events: none;
}
.workflow-rings circle:last-child { stroke-dasharray: 1 7; }
.workflow-edge, .workflow-pulse {
  fill: none;
  pointer-events: none;
}
.workflow-edge {
  stroke: var(--control-border);
  opacity: .36;
  stroke-width: 1;
  transition: opacity 280ms ease, stroke 280ms ease, stroke-width 280ms ease;
}
.workflow-edge[data-workflow-cross] { stroke-dasharray: 4 5; }
.workflow-edge[data-workflow-tone="active"] {
  opacity: .96;
  stroke: var(--focus);
  stroke-width: 2;
}
.workflow-edge[data-workflow-tone="muted"] { opacity: .12; }
.workflow-pulse {
  stroke: var(--focus);
  stroke-width: 2;
  stroke-dasharray: 7 93;
  stroke-linecap: round;
  opacity: 0;
}
.workflow-node { transition: opacity 280ms ease; }
.workflow-node[data-workflow-tone="muted"] { opacity: .43; }
.workflow-node-dot {
  fill: var(--background);
  stroke: var(--control-border);
  stroke-width: 1.6;
  transition: fill 280ms ease, stroke 280ms ease, stroke-width 280ms ease;
}
.workflow-node[data-workflow-kind="hub"] .workflow-node-dot {
  fill: var(--action-bg);
  stroke: var(--action-bg);
}
.workflow-node[data-workflow-kind="family"] .workflow-node-dot {
  stroke: var(--text);
  stroke-width: 2;
}
.workflow-node[data-workflow-tone="active"]:not([data-workflow-kind="hub"]) .workflow-node-dot {
  stroke: var(--focus);
  stroke-width: 2.5;
}
.workflow-node[data-workflow-current]:not([data-workflow-kind="hub"]) .workflow-node-dot {
  fill: var(--focus);
}
.workflow-node[data-workflow-current] .workflow-family-icon { stroke: var(--background); }
.workflow-node-hit { fill: transparent; pointer-events: all; }
.workflow-hub-logo { filter: none; }
.workflow-family-icon {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workflow-node-title {
  fill: var(--text);
  stroke: var(--background);
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-size: 18px;
  font-weight: var(--weight-medium);
  pointer-events: none;
}
[data-workflow-kind="hub"] .workflow-node-title {
  font-size: 23px;
  font-weight: var(--weight-heading);
}
[data-workflow-kind="workflow"] .workflow-node-title {
  font-size: 14px;
  stroke-width: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 260ms ease-out;
}
[data-workflow-kind="workflow"][data-workflow-current] .workflow-node-title {
  opacity: 1;
  transform: translateY(0);
}
.workflow-node:focus { outline: none; }
.workflow-node:focus-visible {
  opacity: 1;
}
.workflow-node:focus-visible .workflow-node-dot {
  stroke: var(--focus);
  stroke-width: 4;
}
[data-workflow-ready] .workflow-node:not([data-workflow-kind="step"]) { cursor: pointer; }
.workflow-node[data-workflow-kind="step"] { pointer-events: none; }
.workflow-rotor {
  transform-origin: center;
  transform-box: view-box;
  animation: workflow-spin 240s linear infinite paused;
}
.workflow-rotor [data-workflow-node-ink] {
  transform-origin: 0 0;
  animation: workflow-counterspin 240s linear infinite paused;
}
[data-workflow-running] :is(.workflow-rotor, .workflow-rotor [data-workflow-node-ink]) {
  animation-play-state: running;
}
.workflow-pulse { animation: workflow-pulse 8s linear var(--pulse-delay) infinite paused; }
.workflow-node-dot[data-workflow-arrival] {
  transform-box: fill-box;
  transform-origin: center;
  animation: workflow-arrival 8s linear var(--pulse-delay) infinite paused;
}
[data-workflow-running] :is(.workflow-pulse, [data-workflow-arrival]) { animation-play-state: running; }
/* The leading edge of the 7% dash reaches the node at 88% × 93%. */
@keyframes workflow-arrival {
  0%, 81.8%, 91%, 100% { transform: scale(1); }
  84% { transform: scale(1.26); stroke: var(--focus); }
  87% { transform: scale(1.05); }
}
@keyframes workflow-spin { to { transform: rotate(360deg); } }
@keyframes workflow-counterspin { to { transform: rotate(-360deg); } }
@keyframes workflow-pulse {
  0% { stroke-dashoffset: 100; opacity: 0; }
  18%, 70% { opacity: .56; }
  88%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
[data-workflow-ready] [data-workflow-readout] > :not([hidden]) {
  animation: workflow-detail-in 270ms ease-out both;
}
@media (prefers-reduced-motion: no-preference) {
  [data-workflow-ready]:not([data-workflow-entered]):not(:focus-within) .workflow-atlas {
    opacity: 0;
  }
  [data-workflow-entered] .workflow-atlas {
    animation: workflow-atlas-in 680ms cubic-bezier(.2,.7,.2,1) both;
  }
  [data-workflow-entered] .workflow-edges {
    animation: workflow-branches-in 820ms ease-out both;
  }
}
@keyframes workflow-atlas-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes workflow-branches-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes workflow-detail-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.workflow-readout, .workflow-fallback {
  max-width: 720px;
  margin: var(--space-4) auto 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.workflow-readout {
  min-height: 13rem;
  font-size: var(--text-small);
}
.workflow-readout h3 { font-size: var(--text-body); }
.workflow-readout:has([data-workflow-overview]:not([hidden])) {
  border-color: transparent;
  background: transparent;
}
.workflow-readout [data-workflow-overview] { padding-top: var(--space-2); }
.workflow-readout h3 + p, .workflow-fallback summary + p {
  margin-top: var(--space-3);
}
.workflow-readout ol, .workflow-fallback ol {
  margin-bottom: 0;
  padding-inline-start: var(--space-6);
  text-align: start;
}
.workflow-readout ol li + li { margin-top: var(--space-1); }
.workflow-route-buttons { padding: 0; list-style: none; }
.workflow-fallback { text-align: start; }
.workflow-fallback details details { padding-inline-start: var(--space-4); }
.workflow-fallback summary { padding-block: var(--space-2); cursor: pointer; }
@media (max-width: 599px) {
  .workflow-readout, .workflow-fallback { padding: var(--space-4); }
  .workflow-readout { min-height: 0; }
  .workflow-node-title { font-size: 21px; }
  [data-workflow-kind="workflow"] .workflow-node-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-map *, .workflow-map *::before { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .workflow-visual { forced-color-adjust: none; }
  .workflow-node-title { fill: CanvasText; stroke: Canvas; }
  .workflow-edge, .workflow-rings, .workflow-node:not([data-workflow-kind="hub"]) .workflow-node-dot { stroke: CanvasText; }
  .workflow-node:not([data-workflow-kind="hub"]) .workflow-node-dot { fill: Canvas; }
  .workflow-node[data-workflow-tone="active"]:not([data-workflow-kind="hub"]) .workflow-node-dot,
  .workflow-edge[data-workflow-tone="active"] { stroke: Highlight; }
  .workflow-family-icon, .workflow-node[data-workflow-current] .workflow-family-icon { stroke: CanvasText; }
}