/* Part 4 only. The shared field, header/dock and summary remain unchanged. */
.atlas-flow-card {
  --workflow-ink: var(--color-text);
  --workflow-muted: var(--color-text-muted);
  --workflow-rim: var(--color-border-strong);
  --workflow-line: var(--color-primary);
  --workflow-node: var(--color-surface-2);
  --workflow-panel: var(--surface-panel-fill);
  --workflow-shadow: var(--color-shadow);
  padding: var(--space-sm) var(--space-md) var(--space-lg);
  border: 1px solid var(--atlas-material-rim);
  border-radius: var(--atlas-radius-md);
  background: var(--workflow-panel);
  background-image: var(--surface-panel-shading);
  box-shadow: 0 2px 6px var(--atlas-material-shadow);
  color: var(--workflow-ink);
}

.atlas-flow-card::before, .atlas-flow-card::after,
.atlas-flow-card .atlas-flow::before, .atlas-flow-card .atlas-flow::after,
.atlas-flow-card .atlas-flow-stages::before, .atlas-flow-card .atlas-flow-stages::after { content: none; }
.atlas-workflow-circuit {
  opacity: var(--circuit-detail-opacity);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.atlas-flow-card .atlas-workflow-head { position: relative; z-index: 4; display: flex; align-items: center; gap: var(--space-xxs); min-height: 24px; }
.atlas-flow-card .atlas-workflow-head h2 { margin: 0; font-size: var(--text-xs); line-height: var(--leading-tight); letter-spacing: var(--tracking-wide); font-weight: 600; color: var(--workflow-ink); }
.atlas-flow-card .icon-workflow-message { --icon: url("/assets/icons/chat-left-text-fill.svg"); }
.atlas-flow-card .atlas-flow {
  --workflow-node-size: 94px;
  --workflow-node-expanded: calc(var(--workflow-node-size) * 1.22);
  --workflow-dock-gap: var(--space-md);
  --workflow-dock-active-gap: var(--space-sm);
  --workflow-link-clearance: 6px;
  --workflow-ease: var(--duration-base) var(--ease-standard);
  max-width: 880px; margin: var(--space-lg) auto 0; position: relative; z-index: 1;
}
.atlas-flow-card .atlas-flow-stages {
  display: flex; align-items: flex-start; gap: var(--workflow-dock-gap);
  transition: gap var(--workflow-ease);
}
.atlas-flow-card .atlas-flow-stages:has(.atlas-stage:is([data-dock-active="true"], :focus-visible, :active)) { gap: var(--workflow-dock-active-gap); }
.atlas-flow-card .atlas-stage {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-xxs);
  border: none; border-radius: var(--atlas-radius-md); background: none; color: var(--workflow-ink); transform: none; cursor: pointer;
  transition: flex-grow var(--workflow-ease); user-select: none;
}
.atlas-flow-card .atlas-stage:is([data-dock-active="true"], :focus-visible, :active) { flex-grow: 1.5; }
.atlas-flow-card .atlas-flow-links { position: absolute; inset: 0; pointer-events: none; }
.atlas-flow-card .atlas-stage-link {
  --relay-first: .28; --relay-middle: .56; --relay-last: .9;
  position: absolute; height: 20px; transform: translateY(-50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: var(--space-xxs);
  color: var(--workflow-line); background: none; box-shadow: none;
  container-type: inline-size;
}
.atlas-flow-card .atlas-stage-link::before,
.atlas-flow-card .atlas-stage-link::after {
  content: ""; flex: 1 1 0; min-width: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, currentColor); opacity: .3;
}
.atlas-flow-card .atlas-stage-link::after { background: linear-gradient(90deg, currentColor, transparent); }
.atlas-flow-card .atlas-link-direction {
  flex: 0 1 28px; min-width: 0; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.atlas-flow-card .atlas-link-direction i {
  /* Reuse the app's chevron icon, turned toward the next workflow stage. */
  flex: 0 0 16px; height: 16px; margin-inline: -4px;
  background: currentColor; mask: url("/assets/icons/chevron-down.svg") center / contain no-repeat;
  transform: rotate(-90deg); opacity: var(--relay-first);
  transition: opacity var(--duration-base) var(--ease-standard);
}
.atlas-flow-card .atlas-link-direction i:nth-child(2) { opacity: var(--relay-middle); transition-delay: calc(var(--duration-fast) / 2); }
.atlas-flow-card .atlas-link-direction i:nth-child(3) { opacity: var(--relay-last); transition-delay: var(--duration-fast); }
.atlas-flow-card .atlas-flow:has(.atlas-stage:nth-child(1):is([data-dock-active="true"], :focus-visible, :active)) .atlas-stage-link:nth-child(1),
.atlas-flow-card .atlas-flow:has(.atlas-stage:nth-child(2):is([data-dock-active="true"], :focus-visible, :active)) .atlas-stage-link:nth-child(2),
.atlas-flow-card .atlas-flow:has(.atlas-stage:nth-child(3):is([data-dock-active="true"], :focus-visible, :active)) .atlas-stage-link:nth-child(3),
.atlas-flow-card .atlas-flow:has(.atlas-stage:nth-child(4):is([data-dock-active="true"], :focus-visible, :active)) .atlas-stage-link:nth-child(4),
.atlas-flow-card .atlas-flow:has(.atlas-stage:nth-child(5):is([data-dock-active="true"], :focus-visible, :active)) .atlas-stage-link:nth-child(4) {
  --relay-first: .6; --relay-middle: .82; --relay-last: 1;
  color: var(--atlas-signal);
}
/* Narrow links keep one legible directional mark instead of squeezing three. */
@container (max-width: 35px) {
  .atlas-flow-card .atlas-link-direction { flex-basis: 12px; max-width: 100%; }
  .atlas-flow-card .atlas-link-direction i { flex: 0 1 12px; min-width: 0; height: 12px; margin: 0; }
  .atlas-flow-card .atlas-link-direction i:nth-child(-n+2) { display: none; }
}
.atlas-flow-card .atlas-stage-link[hidden] { display: none; }
.atlas-flow-card .atlas-stage-visual {
  width: 100%; height: var(--workflow-node-expanded); display: grid; place-items: center; flex: 0 0 auto;
}
.atlas-flow-card .atlas-stage-node {
  position: relative; z-index: 2; flex: 0 0 auto; width: var(--workflow-node-size); height: var(--workflow-node-size);
  display: grid; place-items: center; border: 1px solid var(--atlas-border-strong); border-radius: 50%;
  color: var(--surface-card-accent); background: var(--control-soft-surface);
  /* Quieter resting depth; preserve the stronger Dock material on emphasis. */
  box-shadow: var(--surface-soft-inset);
  transform: none; transition: width var(--workflow-ease), height var(--workflow-ease), filter var(--duration-base);
}
.atlas-flow-card .atlas-stage-node::before,
.atlas-flow-card .atlas-stage-node::after { content: none; }
.atlas-flow-card .atlas-stage-node .ui-icon { width: 38.3%; height: 38.3%; }

.atlas-flow-card .atlas-stage-count {
  /* Anchor the badge center to the circle's 45-degree edge, including during growth. */
  z-index: 3; top: calc(14.644661% - 1px); right: calc(14.644661% - 1px); transform: translate(50%, -50%);
  min-width: 30px; width: auto; height: 30px; padding-inline: var(--space-xs);
  border: 1px solid var(--atlas-border-strong); background: var(--workflow-node); color: var(--workflow-ink);
  border-radius: var(--atlas-radius-badge); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.atlas-flow-card .atlas-stage strong { max-width: 100%; margin-top: var(--space-xxs); font-size: var(--text-md); line-height: var(--leading-tight); font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; }
.atlas-flow-card .atlas-stage small, .atlas-flow-card .atlas-stage-meta { display: block; font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--workflow-muted); font-weight: 400; overflow-wrap: anywhere; }
.atlas-flow-card .atlas-stage:is([data-dock-active="true"], :focus-visible, :active) .atlas-stage-node {
  width: var(--workflow-node-expanded); height: var(--workflow-node-expanded); transform: none;
  /* Match the primary Dock's shared layered material without an outer halo. */
  border-color: var(--control-primary-border);
  border-radius: 50%; color: var(--atlas-on-action);
  background: var(--control-primary-surface);
  box-shadow: var(--control-primary-inset);
  z-index: 4;
}
.atlas-flow-card .atlas-stage:is([data-dock-active="true"], :focus-visible, :active) .atlas-stage-node .ui-icon { color: var(--atlas-on-action); filter: none; }
.atlas-flow-card .atlas-stage[data-dock-active="true"], .atlas-flow-card .atlas-stage:focus-visible { transform: none; color: var(--atlas-signal); z-index: 2; }
.atlas-flow-card .atlas-stage[data-dock-active="true"] .atlas-stage-node, .atlas-flow-card .atlas-stage:focus-visible .atlas-stage-node { transform: none; filter: none; }
.atlas-flow-card .atlas-stage:active .atlas-stage-node { transform: none; filter: brightness(.94); }
.atlas-flow-card :is(.atlas-stage, summary):focus-visible { outline: 2px solid var(--atlas-signal); outline-offset: 4px; }

/* Tighten only the two-column dashboard, retaining the full hover-size rail. */
@media (min-width: 1281px) {
  .atlas-flow-card { padding-bottom: var(--space-sm); }
  .atlas-flow-card .atlas-flow { margin-top: var(--space-xs); }
  .atlas-flow-card .atlas-stage { gap: 2px; }
  .atlas-flow-card .atlas-stage strong { margin-top: 2px; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .atlas-flow-card .atlas-flow { --workflow-node-size: 76px; }
  .atlas-flow-card .atlas-stage-node .ui-icon { width: 40%; height: 40%; }
}
@media (max-width: 820px) {
  .atlas-flow-card { padding: var(--space-sm) var(--space-sm) var(--space-sm); border-radius: var(--atlas-radius-md); }
  .atlas-flow-card .atlas-workflow-head { justify-content: space-between; min-height: 20px; }
  .atlas-flow-card .atlas-workflow-head h2 { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
  .atlas-flow-card .atlas-flow { --workflow-node-size: clamp(40px, 11vw, 56px); --workflow-node-expanded: calc(var(--workflow-node-size) * 1.18); --workflow-dock-gap: var(--space-xs); --workflow-dock-active-gap: var(--space-xxs); --workflow-link-clearance: 3px; margin-top: var(--space-sm); }
  .atlas-flow-card .atlas-stage-link { height: 14px; gap: 0; }
  .atlas-flow-card .atlas-stage { gap: var(--space-xxs); }
  .atlas-flow-card .atlas-stage-node .ui-icon { width: 58%; height: 58%; }
  .atlas-flow-card .atlas-stage-count { min-width: 23px; height: 23px; padding-inline: var(--space-xxs); font-size: var(--text-sm); }
  .atlas-flow-card .atlas-stage strong { margin-top: var(--space-xxs); font-size: var(--text-xs); line-height: var(--leading-tight); min-height: 16px; }
  .atlas-flow-card .atlas-stage-label-full { display: none; }
  .atlas-flow-card .atlas-stage-label-short { display: inline; }
  .atlas-flow-card .atlas-stage small { display: none; }
  .atlas-flow-card .atlas-stage-meta { font-size: var(--text-xs); line-height: var(--leading-tight); }
  .atlas-flow-card .atlas-stage:is([data-dock-active="true"], :focus-visible, :active) strong { color: var(--atlas-signal); }
}
@media (max-width: 380px) {
  .atlas-flow-card { padding-inline: var(--space-xs); }
  .atlas-flow-card .atlas-flow { --workflow-node-size: 40px; --workflow-dock-gap: var(--space-xxs); }
  .atlas-flow-card .atlas-stage strong { font-size: var(--text-xs); }
  .atlas-flow-card .atlas-stage-node .ui-icon { width: 55%; height: 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-flow-card .atlas-flow:not([data-motion-preview="true"]) *,
  .atlas-flow-card .atlas-flow:not([data-motion-preview="true"]) *::before,
  .atlas-flow-card .atlas-flow:not([data-motion-preview="true"]) *::after { animation: none !important; transition: none !important; }
  /* Opt in only on localhost + demo=1 + qa-motion=1, as in the ambient field.
     Override the shared shell's reduced-motion rules for this preview alone. */
  .atlas-flow-card [data-motion-preview="true"] .atlas-flow-stages { transition: gap var(--workflow-ease) !important; }
  .atlas-flow-card [data-motion-preview="true"] .atlas-stage { transition: flex-grow var(--workflow-ease) !important; }
  .atlas-flow-card [data-motion-preview="true"] .atlas-stage-node { transition: width var(--workflow-ease), height var(--workflow-ease), filter var(--duration-base) !important; }
}