/* The map, for the agent pages.
   Built from the landing page's orchestration diagram. The tokens sit on
   .orch because these pages are on the older stylesheet stack and do not
   carry them; declaring them here keeps the diagram correct and changes
   nothing outside it. */
.orch {
  --accent: #4b5df6;
  --violet: #7c5cff;
  --hair: #dde6ff;
  --panel: #ffffff;
  --panel-soft: #f8faff;
  --r-l: 22px;
  --shadow-l: 0 2px 4px rgba(15, 23, 42, 0.04), 0 24px 64px rgba(23, 50, 168, 0.12);
  --live: #10b981;
  --live-ink: #0c6b43;
  --amber: #f59e0b;
  --red: #dc2626;
  --cyan: #09b8d8;
  --dim: #566179;
  --muted: #5b6a84;
  --text: #0f172a;
}
.orch a.node-link { text-decoration: none; cursor: pointer; }
.orch a.node-link:hover .ring { stroke: color-mix(in srgb, var(--accent) 70%, var(--hair)); }
.orch a.node-link:hover .nm { fill: var(--text); }
.orch a.node-link:focus-visible .ring { stroke: var(--accent); stroke-width: 3; }

/* ── orchestration diagram ───────────────────────────────────────── */
.orch { position: relative; margin-top: 22px; padding: 24px 22px 18px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--hair)); border-radius: var(--r-l); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, #fff) 0%, #ffffff 46%, var(--panel-soft) 100%); box-shadow: var(--shadow-l); max-width: 100%; overflow: hidden; }
.orch-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* ── what each agent does, on its beat ───────────────────────────── */
/* On a phone the labels already fill the frame; a popup over them would
   be the clutter this diagram exists to avoid. */
.orch-tech { margin: 6px 0 0; text-align: center; font-size: 12px; line-height: 1.55; color: var(--dim); font-weight: 600; }
.orch-tech b { color: var(--muted); font-weight: 750; }
.orch-say { display: flex; align-items: center; gap: 9px; max-width: min(560px, 100%); box-sizing: border-box; min-height: 34px; margin: 0 auto 4px; padding: 8px 14px; max-width: 560px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); }
.orch-say b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: orchPulse 1.6s ease-in-out infinite; }
.orch-say span { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.orch-svg { display: block; width: 100%; min-width: 680px; height: auto; }
.orch-cap { margin: 10px 0 0; min-height: 40px; text-align: center; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.orch-cap b { color: var(--text); }

.orch-svg .ln { fill: none; stroke: color-mix(in srgb, var(--accent) 26%, var(--hair)); stroke-width: 2.2; }
.orch-svg .ln.mem { stroke-dasharray: 3 6; opacity: .85; }
.orch-svg .ln-flow { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 54 300; stroke-dashoffset: 354; opacity: 0; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.orch-svg .ln-flow.on { opacity: 1; animation: orchFlow 1.15s linear infinite; }
.orch-svg .ln-flow.mem { stroke: var(--violet); stroke-width: 3; stroke-dasharray: 26 120; stroke-dashoffset: 146; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--violet) 55%, transparent)); }
.orch-svg .ln-flow.mem.on { animation: orchFlowMem .95s linear infinite; }
.orch-svg .ln-flow.mem.up.on { animation: orchFlowMemUp .95s linear infinite; }


.orch-svg .phase .prule { stroke: var(--hair); stroke-width: 1.5; fill: none; }
.orch-svg .phase text { fill: var(--dim); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-anchor: middle; }
.orch-svg .phase.live .prule { stroke: color-mix(in srgb, var(--accent) 55%, var(--hair)); stroke-width: 2.4; }
.orch-svg .phase.live text { fill: var(--accent); }
/* THE LIVE MOMENT. When the flow reaches Copilot the band it sits in
   lights, the node grows, and a ring goes out from it — the one beat
   where the product is actually in the room with the seller. */
.orch-svg .callring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.orch.oncall .orch-svg .callring { animation: orchCall 1.5s ease-out infinite; }
.orch.oncall .orch-svg .phase.live text { fill: var(--accent); }
.orch.oncall .orch-svg .phase.live .prule { stroke: var(--accent); }
.orch.oncall .orch-svg .node[data-node="3"] .ring { stroke-width: 3.2; }
.orch.oncall .orch-svg .node[data-node="3"] { transform-box: fill-box; }
@keyframes orchCall { 0% { r: 30; opacity: .55; } 100% { r: 62; opacity: 0; } }
.orch.stacked .orch-svg .phase { display: none; }

/* On a phone the nodes sit in two columns with no room beside them; the
   same three figures run as a line under the diagram instead. */
.orch.stacked .orch-svg .stat { display: none; }
.orch.stacked .statline { display: block; }
.statline { display: none; margin: 10px 0 0; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--dim); }

.statline i { font-style: normal; color: var(--dim); font-weight: 650; }
.statline b { color: var(--accent); font-weight: 800; }
.orch-svg .stat rect { fill: #fff; stroke: color-mix(in srgb, var(--accent) 24%, var(--hair)); stroke-width: 1.3; }
.orch-svg .stat .n { fill: var(--accent); font-size: 14px; font-weight: 800; text-anchor: middle; }
.orch-svg .stat .c { fill: var(--dim); font-size: 8.5px; font-weight: 700; text-anchor: middle; letter-spacing: .05em; }
.orch.stacked .orch-svg .stat { display: none; }
.orch-svg .info text { transition: opacity .25s ease; }
.orch-svg .info .ti { fill: var(--text); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.orch-svg .info .de { fill: var(--muted); font-size: 12.5px; font-weight: 600; }
.orch-svg .info.right text { text-anchor: end; }
.orch-svg .info .fn { fill: var(--accent); font-size: 15px; font-weight: 800; }
.orch-svg .info .fs { fill: var(--dim); font-size: 10.2px; font-weight: 650; }
/* On a phone the hub sits centred with no room either side; the caption
   under the diagram already carries the same words there. */
.orch.stacked .orch-svg .info.left { display: block; }
.orch.stacked .orch-svg .info.right { display: none; }
.orch-svg .hub .disc { fill: var(--accent); }
.orch-svg .hub .halo { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.orch-svg .hub .halo.two { fill: color-mix(in srgb, var(--accent) 13%, transparent); }
.orch-svg .hub .halo { animation: orchHalo 2.6s ease-out infinite; }
.orch-svg .hub .ico { stroke: #fff; stroke-width: 1.9; fill: none; stroke-linecap: round; }
.orch-svg .hub .nm { fill: var(--text); font-size: 14px; font-weight: 800; text-anchor: middle; letter-spacing: -0.01em; }

.orch-svg .node .ring { fill: #fff; stroke: var(--hair); stroke-width: 1.8; transition: stroke .3s ease, transform .3s ease, filter .3s ease; }
.orch-svg .node .ico { stroke: var(--dim); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.orch-svg .node .nm { fill: var(--muted); font-size: 13px; font-weight: 700; text-anchor: middle; transition: fill .3s ease; }
.orch-svg .node.was .ring { stroke: color-mix(in srgb, var(--accent) 45%, var(--hair)); }
.orch-svg .node.was .ico { stroke: var(--accent); }
.orch-svg .node.was .nm { fill: var(--text); }
.orch-svg .node.on .ring { stroke: var(--accent); stroke-width: 2.6; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent)); }
.orch-svg .node.on .ico { stroke: var(--accent); }
.orch-svg .node.on .nm { fill: var(--text); }

.orch-svg .band { fill: color-mix(in srgb, var(--accent) 4%, #fff); stroke: var(--hair); stroke-width: 1.5; }
.orch-svg .band-label { fill: var(--dim); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.orch-svg .chip rect { fill: #fff; stroke: color-mix(in srgb, var(--accent) 38%, var(--hair)); stroke-width: 1.4; }
.orch-svg .chip text { fill: var(--text); font-size: 11px; font-weight: 700; text-anchor: middle; }
.orch-svg .chip { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.orch-svg .chip.in { opacity: 1; transform: translateY(0); }

@keyframes orchFlow { to { stroke-dashoffset: 0; } }
@keyframes orchFlowMem { to { stroke-dashoffset: 0; } }
@keyframes orchFlowMemUp { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 146; } }
@keyframes orchHalo { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes orchPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }


/* The brand mark on the hub, breathing. The halos already pulse when a
   beat is running; the glow is the mark's own, so the centre reads as
   alive even between beats. */
.orch-svg .hub .mark { fill: #fff; stroke: none; }
.orch-svg .hub .mark .bub { fill: none; stroke: #fff; stroke-width: 3.1; stroke-linecap: round; stroke-linejoin: round; }
.orch-svg .hub .mark .arw { fill: #fff; }
.orch-svg .hub .glow { animation: orchGlow 3.2s ease-in-out infinite; }
.orch-svg .hub.busy .glow { animation-duration: 1.9s; }
@keyframes orchGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255,255,255,.4)); }
  50% { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 15px rgba(125,185,255,.75)); }
}
/* On a phone the agent and what it does read as a heading above the
   diagram — left-aligned and wrapped, rather than centred into the
   curves leaving the hub. */
.orch.stacked .orch-svg .info.left text { text-anchor: start; }
.orch.stacked .orch-svg .info .ti { font-size: 21px; }
.orch.stacked .orch-svg .info .de { font-size: 16.5px; }
.orch.stacked .orch-svg { max-height: 74vh; }
/* Key Signals, rising off Copilot while the call is live. Transient by
   design — a signal you have read should not keep sitting on the
   diagram. Names and colours are the app's own family styles. */
.orch-svg .balloons text { font-size: 12.5px; font-weight: 800; text-anchor: middle; letter-spacing: -0.005em; }
.orch-svg .balloons .bal { opacity: 0; }
.orch.oncall .orch-svg .balloons .bal { animation: balRise 3.1s cubic-bezier(.25,.6,.3,1) var(--wait) infinite; }
@keyframes balRise {
  0% { opacity: 0; transform: translate(0, 10px) scale(.82); }
  12% { opacity: 1; transform: translate(0, 0) scale(1); }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.94); }
}
.orch.stacked .orch-svg .balloons text { font-size: 13.5px; }
.orch-svg .bal.b0 { --dx: -22px; --dy: -104px; --wait: 0.0s; }
.orch.stacked .orch-svg .bal.b0 { --dx: -18px; --dy: -94px; }
.orch-svg .bal.b1 { --dx: 28px; --dy: -118px; --wait: 0.45s; }
.orch.stacked .orch-svg .bal.b1 { --dx: -24px; --dy: -108px; }
.orch-svg .bal.b2 { --dx: -12px; --dy: -126px; --wait: 0.9s; }
.orch.stacked .orch-svg .bal.b2 { --dx: -30px; --dy: -118px; }
.orch-svg .bal.b3 { --dx: 40px; --dy: -96px; --wait: 1.3s; }
.orch.stacked .orch-svg .bal.b3 { --dx: -14px; --dy: -88px; }
.orch-svg .bal.b4 { --dx: -34px; --dy: -112px; --wait: 1.75s; }
.orch.stacked .orch-svg .bal.b4 { --dx: -26px; --dy: -104px; }
.orch-svg .bal.b5 { --dx: 20px; --dy: -108px; --wait: 2.15s; }
.orch.stacked .orch-svg .bal.b5 { --dx: -34px; --dy: -96px; }
/* The stacked arrangement fits a phone outright — no scrolling, and the
   labels stay at a readable size because the diagram is drawn for that
   width rather than shrunk into it. */
.orch.stacked .orch-svg { min-width: 0; }
.orch.stacked .orch-scroll { -webkit-mask-image: none; mask-image: none; overflow-x: visible; }
.orch.stacked .orch-svg .nm { font-size: 19px; }
.orch.stacked .orch-svg .band-label { font-size: 15px; }
.orch.stacked .orch-svg .chip text { font-size: 16px; }
.orch.stacked .orch-svg .ico { stroke-width: 1.6; }
@media (max-width: 720px) {
  .orch { padding: 14px 12px 12px; }
  /* The diagram is wider than a phone, so it scrolls inside its card.
     A hard cut at the edge looks like a rendering fault; a fade reads as
     "there is more this way", which is the truth. */
  .orch-scroll { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 82%, transparent 100%); }
  .orch-say span { font-size: 12.5px; }
  .orch-cap { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .orch-svg .ln-flow.on { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; opacity: .55; }
  .orch-svg .hub.busy .halo { animation: none; }
  .orch-svg .hub .glow { animation: none; }
  .orch.oncall .orch-svg .balloons .bal { animation: none; }
  .orch-say b { animation: none; }
  .orch-svg .chip { transition: none; }
}

/* The map rendered at the full column width, ~600px tall. Capped so the
   section it sits in can share a screen with the one after it. */
.orch-scroll { max-width: 760px; margin: 0 auto; }
.orch { padding: 14px 14px 10px; margin-top: 14px; }