/* ============================================================
   Cue — "How Cue works" horizontal pipeline diagram
   Fixed 1300x720 design stage, scaled to fit. Sources flow left
   → Cue Index core → ways to use it. Colors from tokens.
   ============================================================ */

.pl-wrap { position: relative; width: 100%; }
.pl-scaler { position: relative; transform-origin: top left; }
.pl-stage { position: relative; width: 1300px; height: 720px; }

/* ---- connectors ---- */
.pl-links { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pl-link {
  fill: none;
  stroke: color-mix(in srgb, var(--cue-color-blue) 22%, transparent);
  stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(.45,0,.2,1);
}
.run .pl-link { stroke-dashoffset: 0; }
.pl-pin { fill: var(--cue-color-white); stroke: var(--cue-color-blue); stroke-width: 2; opacity: 0; transition: opacity .5s ease .4s; }
.run .pl-pin { opacity: 1; }

/* ---- flow dots ---- */
.pl-flow { opacity: 0; transition: opacity .6s ease .5s; }
.run .pl-flow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pl-flow { display: none; } }
body.no-dataflow .pl-flow { display: none; }

/* ---- zone labels ---- */
.pl-zone {
  position: absolute; z-index: 2;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cue-color-midgray); transform: translateX(-50%); white-space: nowrap;
  opacity: 0; transition: opacity .6s ease;
}
.run .pl-zone { opacity: 1; }
.pl-caption {
  position: absolute; z-index: 2; font-size: 11.5px; color: var(--cue-color-midgray);
  letter-spacing: .02em; transform: translateX(-50%); white-space: nowrap; text-align: center;
  opacity: 0; transition: opacity .6s ease;
}
.run .pl-caption { opacity: 1; }

/* ---- nodes ---- */
.pl-node {
  position: absolute; z-index: 3; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.run .pl-node, .run .pl-tuner, .run .pl-core { opacity: 1; transform: none; }
.pl-tile { flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; }
.pl-tile .cue-icon { font-size: 26px; }
.pl-ntext { display: flex; flex-direction: column; min-width: 0; }
.pl-ntitle { font-size: 16px; font-weight: 600; color: var(--cue-color-darkgray); letter-spacing: .002em; }
.pl-nsub { font-size: 11.5px; color: var(--cue-color-midgray); letter-spacing: .02em; margin-top: 3px; line-height: 1.35; }

/* inputs — neutral, recessed, turquoise-keyed */
.pl-src {
  background: #fcfcfe; border: 1px solid var(--cue-border-color); border-radius: 16px; padding: 16px 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.pl-src .pl-tile { width: 50px; height: 50px; background: rgba(0,202,204,.12); color: #079ea0; }

/* outputs — elevated white cards, blue-keyed */
.pl-out {
  background: var(--cue-color-white); border: 1px solid var(--cue-border-color); border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 2px 30px rgba(18,28,43,.08);
}
.pl-out .pl-tile { width: 52px; height: 52px; background: rgba(40,89,225,.10); color: var(--cue-color-blue); }
.pl-badge {
  margin-left: auto; align-self: flex-start;
  font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cue-color-blue); background: rgba(40,89,225,.10);
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}

/* core — the one filled hero */
.pl-core {
  position: absolute; z-index: 4; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 11px; border-radius: 34px; padding: 26px;
  background: linear-gradient(152deg, #3567ee 0%, var(--cue-color-blue) 46%, var(--cue-color-darkblue) 100%);
  color: #fff;
  box-shadow: 0 22px 55px rgba(23,68,194,.34), inset 0 1px 0 rgba(255,255,255,.22);
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.pl-core::after { content: ""; position: absolute; inset: 0; border-radius: 34px; box-shadow: 0 0 0 8px rgba(40,89,225,.07); }
.pl-core .pl-tile { width: 62px; height: 62px; border-radius: 18px; background: rgba(255,255,255,.16); color: #fff; }
.pl-core .pl-tile .cue-icon { font-size: 32px; }
.pl-ctitle { font-size: 21px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.pl-csub { font-size: 12px; color: rgba(255,255,255,.82); max-width: 190px; line-height: 1.45; letter-spacing: .01em; }

/* tuner — optional modifier */
.pl-tuner {
  position: absolute; z-index: 4; box-sizing: border-box;
  display: flex; align-items: center; gap: 11px;
  background: var(--cue-color-white); border: 1.5px dashed #b7c2db; border-radius: 16px; padding: 13px 16px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.pl-tuner .pl-tile { width: 42px; height: 42px; border-radius: 12px; background: rgba(18,28,43,.06); color: var(--cue-color-darkgray); }
.pl-tuner .pl-tile .cue-icon { font-size: 22px; }
.pl-tuner .pl-ntitle { font-size: 14.5px; }
.pl-tchip {
  font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cue-color-midgray);
  border: 1px solid var(--cue-border-color); border-radius: 999px; padding: 3px 7px; margin-left: 4px;
}

/* ---- legend below diagram ---- */
.dg-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 820px) { .dg-legend { grid-template-columns: 1fr; gap: 14px; } }
.dg-legend__item { display: flex; gap: 14px; align-items: flex-start; }
.dg-legend__num { font-size: 13px; font-weight: 700; color: var(--cue-color-blue); font-variant-numeric: tabular-nums; padding-top: 1px; }
.dg-legend__t { font-size: 14.5px; font-weight: 600; color: var(--cue-color-darkgray); margin: 0 0 3px; }
.dg-legend__d { font-size: 13px; line-height: 1.5; color: var(--cue-color-midgray); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .pl-link { transition: none; stroke-dashoffset: 0; }
  .pl-node, .pl-core, .pl-tuner, .pl-zone, .pl-caption, .pl-pin { transition: none; opacity: 1; transform: none; }
}

/* lock final state (renders even if transitions are throttled) */
.run-final .pl-node, .run-final .pl-core, .run-final .pl-tuner { opacity: 1 !important; transform: none !important; transition: none !important; }
.run-final .pl-zone, .run-final .pl-caption, .run-final .pl-pin, .run-final .pl-flow { opacity: 1 !important; }
.run-final .pl-link { stroke-dashoffset: 0 !important; transition: none !important; }