/* ============================================================================
   flow1.css — Unified Ingest: channel-constellation viz + live counter chrome
   Owned by the foundation (flow1). Message-row arrival animation lives in
   cockpit.css (.msg-row.arriving) since the inbox rows are shared chrome.
   ==========================================================================*/

.constellation {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.constellation-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.constellation-head .c-title {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.constellation-head .c-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ok);
}

/* the SVG funnel: sources on the left, one queue node on the right */
.constellation svg { width: 100%; height: 96px; display: block; overflow: visible; }

.c-feedline {
  stroke: var(--border-lit);
  stroke-width: 1.5;
  fill: none;
  opacity: .55;
}
.c-node {
  fill: var(--bg-alt-3);
  stroke: var(--node-color, var(--ink-dim));
  stroke-width: 1.5;
}
.c-node-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--ink-dim);
}
.c-hub {
  fill: var(--bg-alt);
  stroke: var(--ember);
  stroke-width: 1.75;
}
.c-hub-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}
.c-hub-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  fill: var(--ink-dim);
  text-anchor: middle;
}

/* a pulse dot travels a feed line when a message arrives on that channel */
.c-pulse {
  fill: var(--pulse-color, var(--ember));
  filter: drop-shadow(0 0 4px var(--pulse-color, var(--ember)));
}

/* active feed line brightens briefly */
.c-feedline.active {
  stroke: var(--node-color, var(--ember));
  opacity: 1;
  transition: stroke var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

/* hub breathes when it receives */
.c-hub.pulsing { animation: hubPulse var(--dur-4) var(--ease); }
@keyframes hubPulse {
  0%   { stroke-width: 1.75; }
  40%  { stroke-width: 3.5; filter: drop-shadow(0 0 8px var(--ember)); }
  100% { stroke-width: 1.75; }
}
@media (prefers-reduced-motion: reduce) {
  .c-hub.pulsing { animation: none; }
}

/* the live queue counter (in constellation head, mirrors top bar) */
.c-counter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}