/* The diverge-converge story on the homepage (Allen, Oct 22), on its own so the live page needs no
   flows.css. The --wf-* names match flows.css so the two stay interchangeable. */
.dc {
  --wf-ink: var(--theme-ink);
  --wf-muted: var(--theme-ink-muted);
  --wf-faint: var(--theme-ink-faint);
  --wf-line: var(--theme-line);
  --wf-card: var(--theme-surface-raised);
  --wf-fill-strong: var(--theme-surface-raised-strong);
  --wf-win: var(--theme-accent);
  --wf-win-soft: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface-raised));
  --wf-bad: var(--theme-bad);
}
/* Allen, Oct 22: the diverge-converge story and the how-it-works loop. flows-links.js draws the lines:
   grey dashes as the team fans out, solid yellow as everything flows back into Powerplant. Phones
   show the three people in focus; from 768px two more sit cut off at the edges. */
.dc { position: relative; display: grid; justify-items: center; overflow: hidden; border: 1px solid var(--wf-line); border-radius: 10px; background: var(--wf-card); }
.dc > svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dc > :not(svg) { position: relative; z-index: 1; }
.links path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.links .l-out { stroke: var(--wf-faint); stroke-dasharray: 1.5 5; }
.links .l-in { stroke: var(--wf-win); }
.links .l-head { fill: var(--wf-win); stroke: none; }
.dc { padding: 28px 12px 32px; }
.dc-goal { display: grid; justify-items: center; gap: 2px; padding: 12px 18px; border: 1px solid var(--wf-line); border-radius: 8px; background: var(--wf-card); text-align: center; }
.dc-k { margin: 0; font-size: 12px; color: var(--wf-muted); }
.dc-g { margin: 0; font: 500 17px/1.3 var(--font-heading); color: var(--wf-ink); }
.wf-main .dc-team, .dc-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px; width: 100%; margin: 56px 0 0; padding: 0; list-style: none; }
.dc-p { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.dc-edge { display: none; }
.dc-who { display: grid; justify-items: center; gap: 4px; margin: 0 0 2px; text-align: center; }
.dc-who > img, .dc-ini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dc-ini { display: grid; place-items: center; background: var(--wf-fill-strong); font-size: 13px; color: var(--wf-muted); }
.dc-n { display: grid; justify-items: center; gap: 1px; font-size: 13px; font-weight: 500; color: var(--wf-ink); }
.dc-n small { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 400; color: var(--wf-muted); }
.dc-n small img { display: block; width: 12px; height: 12px; }
[data-theme="light"] .dc-n small img { filter: brightness(0.2); }
.dc-last { width: 100%; }
.dc-s { display: flex; align-items: flex-start; gap: 5px; width: 100%; margin: 0; padding: 7px 8px; border: 1px dashed var(--wf-line); border-radius: 6px; background: var(--wf-card); font-size: 12px; line-height: 1.3; color: var(--wf-ink); }
.dc-s svg { flex: none; margin-top: 1px; color: var(--wf-muted); }
.dc-s span { min-width: 0; }
.dc-bad { border-color: color-mix(in srgb, var(--wf-bad) 50%, transparent); color: var(--wf-bad); }
.dc-bad svg { color: var(--wf-bad); }
.dc-pp { display: grid; justify-items: center; gap: 2px; padding: 12px 20px; border: 1.5px solid var(--wf-win); border-radius: 10px; background: var(--wf-win-soft); text-align: center; }
.dc-pp { margin-top: 64px; }
.dc-pp-h { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 16px/1.2 var(--font-heading); color: var(--wf-ink); }
.dc-pp-s { margin: 0; font-size: 12px; color: var(--wf-muted); }
.dc-fix, .dc-all { margin-top: 28px; }
.dc-fix::before, .dc-all::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 28px; border-left: 1.5px solid var(--wf-win); }
.dc-fix { display: grid; gap: 4px; width: min(100%, 300px); padding: 10px 12px; border: 1px solid var(--wf-line); border-radius: 8px; background: var(--wf-card); }
.dc-fix-h { display: flex; align-items: center; gap: 6px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--wf-ink); }
.dc-fix-h svg { flex: none; color: var(--wf-muted); }
.dc-fix-h em { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: var(--wf-win-soft); font: normal 11px/1.4 var(--font-body); color: var(--wf-ink); }
.dc-fix-s { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wf-muted); }
.dc-all { display: grid; justify-items: center; gap: 8px; }
.dc-faces { display: flex; margin: 0; }
.dc-faces > * { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--wf-card); }
.dc-faces > * + * { margin-left: -6px; }
.dc-faces .dc-ini { font-size: 11px; }
.dc-good { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; text-align: center; color: var(--wf-ink); }
.dc-good svg { flex: none; color: var(--wf-win); }
[data-theme="light"] .dc-good svg { color: var(--palette-golden-600); }
@media (min-width: 768px) {
  .dc { padding: 40px 24px 44px; }
  .wf-main .dc-team, .dc-team { grid-template-columns: 0.8fr repeat(3, minmax(0, 1fr)) 0.8fr; gap: 16px; max-width: 980px; }
  .dc-edge { display: grid; opacity: 0.4; }
  .dc-edge-l { transform: translateX(-30%); }
  .dc-edge-r { transform: translateX(30%); }
  .dc-s { padding: 8px 10px; font-size: 13px; }
  .dc-g { font-size: 19px; }
}


/* On the homepage the story sits between the hero and the agent window chips. */
.vstory { margin-bottom: clamp(56px, 9vw, 112px); }
.vstory .dc { margin-top: clamp(20px, 3vw, 32px); }