/* Context graph (views/partials/pm-graph.ejs; /enrichments "Context Enrich"), AK Oct 24.
   Desktop: three equal source cards on the left, a wire from each card's centre into the graph card on the right. data-step (0 to 3) on .pgr__viz
   lights the sources in turn, adds their nodes and fills the differentiation meter. Phones: one column.
   Brand tokens only: gold #FFC61E, ink #110A33, violet #341D99, lavender #DDD6FF, mist #F6F4FF, cream #FFF4D2, slate #5B6478, white.
   Node colours: internal lavender, external slate, Humantic AI gold. */
html body .pgr { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.65, 0, .35, 1); --card: #fff; padding: 56px 0; background: #F6F4FF; color: #110A33; }
html body .pgr--white { background: #fff; --card: #F6F4FF; }
html body .pgr .section-header { margin-bottom: 32px; }
html body .pgr__viz { display: grid; grid-template-columns: minmax(0, 1.1fr) 72px minmax(0, 1fr); align-items: stretch; max-width: 1120px; margin: 0 auto; }
html body .pgr__src { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; } /* ANIM-P2 Oct 27: three equal rows, shared with the wires, so each wire meets its card's centre */
html body .pgr__s { margin: 0; padding: 18px 20px; border: 1px solid rgba(221, 214, 255, .7); border-radius: 20px; background: rgba(221, 214, 255, .3); transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
html body .pgr__s.is-ours { border-width: 2px; }
/* W18 (X4): a source that has not lit yet keeps its text (slate on a lavender fill, 5:1 or better) with a lighter border and fill instead of opacity .45; the ones already added turn into the full card. */
html body .pgr__s h3 { transition: color 320ms var(--ease-out); }
html body [data-step="0"] .pgr__s h3, html body [data-step="1"] .pgr__s:nth-child(n+2) h3, html body [data-step="2"] .pgr__s:nth-child(n+3) h3 { color: #5B6478; }
html body [data-step="1"] .pgr__s:nth-child(1), html body [data-step="2"] .pgr__s:nth-child(-n+2), html body [data-step="3"] .pgr__s { background: var(--card); border-color: #DDD6FF; }
html body [data-step="1"] .pgr__s:nth-child(1), html body [data-step="2"] .pgr__s:nth-child(2) { border-color: #341D99; } /* ANIM-P2 Oct 27: no 4px sideways jump */
html body [data-step="3"] .pgr__s.is-ours { border-color: #FFC61E; background: #FFF4D2; box-shadow: 0 14px 30px -16px rgba(17, 10, 51, .35); }
/* W15 (audit E2): the numbered eyebrow tags (.pgr__tag) are no longer rendered; their rules are removed. */
html body .pgr__s h3 { margin: 0; font: 700 20px/1.2 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #110A33; }
html body .pgr__items { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
html body .pgr__items span { padding: 3px 10px; border-radius: 999px; background: #F6F4FF; border: 1px solid #DDD6FF; font: 600 13px/1.3 Manrope, Arial, sans-serif; color: #110A33; }
html body .pgr--white .pgr__items span { background: #fff; }
html body .pgr__s.is-ours .pgr__items span { background: #fff; border-color: #FFC61E; }
html body .pgr__note { margin: 10px 0 0; font: 500 14px/1.45 Manrope, Arial, sans-serif; color: #5B6478; text-wrap: pretty; }
html body .pgr__s.is-ours .pgr__note { color: #110A33; font-weight: 700; }
/* wires */
html body .pgr__wires { display: grid; grid-template-rows: repeat(var(--n, 3), minmax(0, 1fr)); row-gap: 12px; padding: 0; }
html body .pgr__w { position: relative; display: block; align-self: center; height: 2px; background: #DDD6FF; transition: background-color 320ms var(--ease-out); }
html body .pgr__w i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; opacity: 0; background: #341D99; }
html body .pgr__w--2 i { background: #FFC61E; box-shadow: 0 0 0 3px rgba(255, 198, 30, .3); }
html body [data-step="1"] .pgr__w--0, html body [data-step="2"] .pgr__w--1 { background: #341D99; }
html body [data-step="3"] .pgr__w--2 { background: #FFC61E; }
html body [data-step="1"] .pgr__w--0 i, html body [data-step="2"] .pgr__w--1 i, html body [data-step="3"] .pgr__w--2 i { animation: pgr-flow 900ms var(--ease-move) 2; }
/* ANIM-P2 Oct 27: the bead travels on transform (was left), twice per source, then the wire is still */
@keyframes pgr-flow { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(62px); opacity: 0; } }
/* the graph card */
html body .pgr__out { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; background: #110A33; color: #fff; box-shadow: 0 18px 40px -20px rgba(17, 10, 51, .55); }
html body .pgr__k { margin: 0; font: 800 14px/18px Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: #FFC61E; }
html body .pgr__graph { display: block; width: 100%; height: auto; }
html body .pgr__e { stroke: rgba(221, 214, 255, .25); stroke-width: 1.2; opacity: 0; transition: opacity 200ms var(--ease-out); }
html body .pgr__n { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); } /* exit: fast, together */
html body .pgr__n--0 { fill: #DDD6FF; } html body .pgr__n--1 { fill: #5B6478; } html body .pgr__n--2 { fill: #FFC61E; }
html body .pgr__core { fill: #fff; stroke: #FFC61E; stroke-width: 3; }
html body [data-step="1"] .pgr__n--0, html body [data-step="2"] .pgr__n--0, html body [data-step="2"] .pgr__n--1, html body [data-step="3"] .pgr__n { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--d) * 70ms); } /* enter: 70 ms node stagger */
html body [data-step="1"] .pgr__e--0, html body [data-step="2"] .pgr__e--0, html body [data-step="2"] .pgr__e--1, html body [data-step="3"] .pgr__e { opacity: 1; transition-duration: 320ms; }
html body [data-step="3"] .pgr__e--2 { stroke: rgba(255, 198, 30, .55); stroke-width: 1.6; }
/* W15 Oct 26 PM (audit E2): a plain end state replaces the "Differentiation" meter. Before Humantic AI's buyer context lands it
   reads in lavender with an empty tick (11:1 on ink); once it lands (data-step 3) the tick fills gold and the line turns white. */
html body .pgr__end { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 17px/1.3 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #DDD6FF; text-wrap: balance; transition: color 320ms var(--ease-out); }
html body .pgr__end svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(221, 214, 255, .5); color: transparent; transition: background-color 320ms var(--ease-out), color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
html body [data-step="3"] .pgr__end { color: #fff; }
html body [data-step="3"] .pgr__end svg { background: #FFC61E; color: #110A33; box-shadow: none; }
html body .pgr__to { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin: 4px 0 0; padding: 8px 14px 8px 10px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 14px/1 Manrope, Arial, sans-serif; }
html body .pgr__to svg { width: 18px; height: 18px; }
/* F7 Oct 28: hover, focus or tap a source to hold it (same as the pipeline stages on /pi, /vidar and /intent) */
html body .pgr__s { cursor: pointer; }
html body .pgr__s:focus-visible { outline: 2px solid #341D99; outline-offset: 3px; }
@media (max-width: 699px) { /* Nov 7 (AK): tablets (700-899px) keep the wired desktop graphic, scaled; only phones stack */
  html body .pgr__viz { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body .pgr__wires { display: none; }
  html body .pgr__src { grid-template-rows: none; } /* phones and tablets: natural card heights (no wires to align) */
}
@media (max-width: 599px) {
  html body .pgr { padding: 40px 0; }
  html body .pgr__s { padding: 14px; }
  html body .pgr__s h3 { font-size: 18px; }
  html body .pgr__out { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pgr__s, html body .pgr__s h3, html body .pgr__w, html body .pgr__n, html body [data-step] .pgr__n, html body .pgr__e, html body .pgr__end, html body .pgr__end svg { transition: none; }
  html body .pgr__w i { animation: none !important; }
}
/* on /start (gShell): the sub line */
html body .pgr__sub { max-width: 640px; margin: -32px auto 32px; text-align: center; font: 400 17px/1.55 Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; text-wrap: balance; }