/* ===================== HERO TEAM: the crew at work =====================
   Live simulation beside the hero copy: tasks arrive at an intake port,
   the coordinator routes them to specialist agents, work gets handed
   between agents, finished work lands in the delivered tray.
   Markup in index.html, engine in js/hero-team.js.
   Geometry contract: stage aspect-ratio == SVG viewBox (520x560);
   node center %s below must match NODE_AT in js/hero-team.js. */

.hero-team { min-width: 0; }

.team-caption {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.team-caption .l { color: var(--success); display: inline-flex; align-items: center; gap: 0.45rem; }
.team-caption .l::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); animation: consolePulse 2.4s infinite;
}
.team-caption .r { color: var(--text-dim); }

.team-stage { position: relative; aspect-ratio: 520 / 560; }

/* wires */
.team-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.team-wires .tw { fill: none; stroke: var(--border-hover); stroke-width: 1.3; }
/* per-travel pulse clones (js): bright head under the chip + soft comet tail */
.team-wires .tw-head {
  fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(212, 160, 82, 0.6));
}
.team-wires .tw-tail {
  fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round;
  opacity: 0.35;
}

/* shared node placement */
.team-node, .team-port, .team-tray {
  position: absolute; translate: -50% -50%; z-index: 3;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono);
}
.team-stage [data-node="intake"]      { left: 50%;    top: 7.14%; }
.team-stage [data-node="coordinator"] { left: 50%;    top: 29.46%; }
.team-stage [data-node="analyst"]     { left: 17.69%; top: 58.93%; }
.team-stage [data-node="builder"]     { left: 50%;    top: 62.5%; }
.team-stage [data-node="reviewer"]    { left: 82.31%; top: 58.93%; }
.team-stage [data-node="delivered"]   { left: 50%;    top: 90.18%; }

/* agents */
.team-node {
  gap: 0.45rem; font-size: 0.66rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.42rem 0.7rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.team-node--coord {
  font-size: 0.7rem; padding: 0.52rem 0.85rem;
  border-color: rgba(212, 160, 82, 0.35);
}
.tn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim); flex: none; transition: background 0.25s;
}
.team-node.is-busy {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px rgba(212, 160, 82, 0.1), 0 0 24px rgba(212, 160, 82, 0.16),
              0 12px 28px rgba(0, 0, 0, 0.42);
}
.team-node.is-busy .tn-dot { background: var(--accent); animation: consolePulse 1.5s infinite; }
.team-node.is-ok .tn-dot { background: var(--success); }
/* dispatch signal just landed */
.team-node.is-pinged {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 160, 82, 0.22), 0 0 30px rgba(212, 160, 82, 0.28),
              0 12px 28px rgba(0, 0, 0, 0.42);
}
.tn-bar {
  position: absolute; left: 0.55rem; right: 0.55rem; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; opacity: 0.9;
}
.tn-sub {
  position: absolute; top: calc(100% + 0.35rem); left: 50%; translate: -50% 0;
  font-size: 0.58rem; letter-spacing: 0.02em; color: var(--text-muted); opacity: 0;
}

/* intake port */
.team-port {
  gap: 0.4rem; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--border-hover); border-radius: 999px;
  padding: 0.34rem 0.85rem;
  background: rgba(26, 26, 28, 0.55);
}

/* delivered tray */
.team-tray {
  gap: 0.5rem; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.42rem 0.9rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.team-tray.is-flash {
  border-color: rgba(62, 207, 142, 0.45);
  box-shadow: 0 0 22px rgba(62, 207, 142, 0.16), 0 12px 28px rgba(0, 0, 0, 0.42);
}
.tt-label { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6rem; }
.tt-count {
  color: var(--success); font-weight: 600; font-size: 0.72rem;
  display: inline-block; font-variant-numeric: tabular-nums;
}
.tt-tick { color: var(--success); font-size: 0.66rem; opacity: 0; display: inline-block; }
.tt-min { color: var(--text-muted); font-size: 0.6rem; font-variant-numeric: tabular-nums; }
.tt-min:empty { display: none; }

/* task chips (created by JS) */
.team-chip {
  position: absolute; left: 0; top: 0; translate: -50% -50%; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--text);
  background: var(--surface-hover); border: 1px solid var(--border-hover); border-radius: 999px;
  padding: 0.26rem 0.6rem; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
}
.tc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; transition: background 0.25s; }
.tc-ok { display: none; color: var(--success); font-weight: 600; }
.team-chip.is-done { border-color: rgba(62, 207, 142, 0.4); }
.team-chip.is-done .tc-dot { background: var(--success); }
.team-chip.is-done .tc-ok { display: inline; }

/* stacked layout (viz below the copy) */
@media (max-width: 999px) {
  .hero-team { max-width: 440px; margin: 3rem auto 0; }
}
@media (max-width: 420px) {
  .team-node { font-size: 0.62rem; padding: 0.36rem 0.55rem; gap: 0.38rem; }
  .team-node--coord { font-size: 0.64rem; padding: 0.44rem 0.7rem; }
  .team-chip { font-size: 0.56rem; }
  .tn-sub { font-size: 0.54rem; }
  .team-caption { font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .team-caption .l::before,
  .team-node.is-busy .tn-dot { animation: none; }
}