/* ============================================================================
   CloviTek Pipeline Flow — flagship "idea → product" animated pipeline visual
   Vector only (CSS + inline SVG); no raster, no CDN, no external deps.
   On-brand LIGHT theme via page :root tokens (drop-in fallbacks included).
   Progressive enhancement: with NO JS and with prefers-reduced-motion, the
   component renders the FULL flow in its lit/verified end-state (static).
   JS adds `.is-animated` to enable the descending idea-token + stage stepping.
   Reuse: include this file + pipeline-flow.js + the markup block. See
   /root/docs-planning/PIPELINE_FLOW_COMPONENT.md
   ========================================================================== */

.pflow{
  --pf-brand: var(--brand,#3E6FB0);
  --pf-brand-dk: var(--brand-dk,#2C517F);
  --pf-brand-lt: var(--brand-lt,#5B8AC9);
  --pf-gold: var(--gold,#C79A3E);
  --pf-ink: var(--ink,#0E1A2B);
  --pf-ink2: var(--ink-2,#42536A);
  --pf-line: var(--line,#E5EAF1);
  --pf-surface: var(--surface,#FFFFFF);
  --pf-bg3: var(--bg-3,#F0F5FB);
  position:relative;
  max-width:760px;
  margin:8px auto 40px;
  padding:8px 0;
}

/* ---- the central spine / rail ------------------------------------------- */
.pflow-rail{
  position:absolute;
  left:50%; top:26px; bottom:26px;
  width:4px; transform:translateX(-50%);
  background:var(--pf-line);
  border-radius:4px;
  overflow:visible;
  z-index:0;
}
.pflow-rail-fill{
  position:absolute; left:0; top:0; width:100%; height:100%;
  border-radius:4px;
  background:linear-gradient(180deg,var(--pf-brand),var(--pf-brand-lt));
  transform-origin:top;
  transition:height .6s cubic-bezier(.4,0,.2,1);
}
/* Static (no-JS / reduced-motion): rail is fully filled */
.pflow:not(.is-animated) .pflow-rail-fill{height:100%}

/* ---- the descending idea token ------------------------------------------ */
.pflow-token{
  position:absolute; left:50%; top:0;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 40% 35%,var(--pf-gold),#a97e28);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pf-gold) 32%,transparent),
             0 6px 18px -4px rgba(0,0,0,.35);
  z-index:5; opacity:0;
  transition:top .8s cubic-bezier(.45,0,.25,1), opacity .35s ease;
}
.pflow-token svg{width:18px;height:18px;display:block}
.pflow.is-animated .pflow-token.visible{opacity:1}
/* Static state: no token shown (flow already complete) */
.pflow:not(.is-animated) .pflow-token{display:none}

/* ---- steps -------------------------------------------------------------- */
.pflow-steps{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.pf-step{
  position:relative;
  display:grid;
  grid-template-columns:1fr 60px 1fr;
  align-items:center;
  min-height:70px;
  padding:9px 0;
}
/* alternate card sides on wide screens */
.pf-step .pf-card{grid-column:3}
.pf-step.left .pf-card{grid-column:1;text-align:right}
.pf-step .pf-node{grid-column:2}

/* node marker on the spine */
.pf-node{
  justify-self:center;
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center;
  background:var(--pf-surface);
  border:2px solid var(--pf-brand);
  color:var(--pf-brand);
  box-shadow:0 4px 14px -6px color-mix(in srgb,var(--pf-brand) 55%,transparent);
  position:relative; z-index:2;
  transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s ease,box-shadow .4s ease;
}
.pf-node svg{width:24px;height:24px;display:block}
/* idea + product endpoints get a distinct fill */
.pf-step[data-kind="idea"] .pf-node{border-color:var(--pf-gold);color:#8a6416}
.pf-step[data-kind="product"] .pf-node{border-color:var(--pf-brand-dk)}

/* card */
.pf-card{
  background:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-radius:14px;
  padding:13px 16px;
  box-shadow:0 10px 30px -22px rgba(14,26,43,.5);
  transition:border-color .4s ease,transform .4s ease,box-shadow .4s ease;
}
.pf-card .pf-role{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pf-brand);display:block;margin-bottom:3px;
}
.pf-card h4{font-size:15px;font-weight:800;color:var(--pf-ink);margin:0 0 3px;line-height:1.25}
.pf-card p{font-size:13px;line-height:1.5;color:var(--pf-ink2);margin:0}

/* gate badge — sits on the connector below stages that must clear a gate */
.pf-gate{
  position:relative; z-index:3;
  display:flex; justify-content:center;
  margin:-4px 0;
}
.pf-gate .pf-gate-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 8px;border-radius:999px;
  background:var(--pf-bg3);
  border:1px solid var(--pf-line);
  font-size:12px;font-weight:700;color:var(--pf-ink2);
  transition:background .4s ease,border-color .4s ease,color .4s ease,transform .4s ease;
}
.pf-gate .pf-check{
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--pf-surface);border:2px solid var(--pf-line);
  color:var(--pf-line);
  transition:background .4s ease,border-color .4s ease,color .4s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pf-gate .pf-check svg{width:12px;height:12px;opacity:0;transition:opacity .3s ease}

/* ============================================================
   ANIMATED STATE — start dimmed, light up as the token passes
   ============================================================ */
.pflow.is-animated .pf-node{
  background:var(--pf-surface);
  border-color:var(--pf-line);
  color:var(--pf-line);
  box-shadow:none;
}
.pflow.is-animated .pf-card{opacity:.55;transform:translateY(2px)}
.pflow.is-animated .pf-gate-badge{opacity:.6}

/* ON state (JS-applied as the token reaches a stage) */
.pflow.is-animated .pf-step.on .pf-node{
  background:var(--pf-brand);
  border-color:var(--pf-brand);
  color:#fff;
  transform:scale(1.06);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--pf-brand) 16%,transparent),
             0 8px 22px -8px color-mix(in srgb,var(--pf-brand) 70%,transparent);
}
.pflow.is-animated .pf-step[data-kind="idea"].on .pf-node,
.pflow.is-animated .pf-step[data-kind="product"].on .pf-node{
  background:var(--pf-gold);border-color:var(--pf-gold);color:#3a2a08;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--pf-gold) 22%,transparent),
             0 8px 22px -8px color-mix(in srgb,var(--pf-gold) 70%,transparent);
}
.pflow.is-animated .pf-step.on .pf-card{opacity:1;transform:translateY(0);border-color:color-mix(in srgb,var(--pf-brand) 45%,var(--pf-line))}
.pflow.is-animated .pf-gate.on .pf-gate-badge{
  opacity:1;background:color-mix(in srgb,var(--pf-brand) 12%,var(--pf-surface));
  border-color:var(--pf-brand);color:var(--pf-brand-dk);
}
.pflow.is-animated .pf-gate.on .pf-check{
  background:var(--pf-brand);border-color:var(--pf-brand);color:#fff;transform:scale(1.12)
}
.pflow.is-animated .pf-gate.on .pf-check svg{opacity:1}

/* ------ STATIC end-state (no-JS OR reduced-motion): all lit + checked ---- */
.pflow:not(.is-animated) .pf-gate .pf-check{
  background:var(--pf-brand);border-color:var(--pf-brand);color:#fff;
}
.pflow:not(.is-animated) .pf-gate .pf-check svg{opacity:1}
.pflow:not(.is-animated) .pf-gate-badge{
  background:color-mix(in srgb,var(--pf-brand) 10%,var(--pf-surface));
  border-color:var(--pf-brand);color:var(--pf-brand-dk);
}

/* honor reduced-motion even if JS attempted animation */
@media (prefers-reduced-motion: reduce){
  .pflow *{transition:none !important;animation:none !important}
  .pflow-token{display:none !important}
}

/* ---- responsive: single-column left-rail timeline on small screens ------ */
@media (max-width:640px){
  .pflow{max-width:100%}
  .pflow-rail{left:26px}
  .pflow-token{left:26px}
  .pf-step{grid-template-columns:52px 1fr;column-gap:16px;padding:8px 0}
  .pf-step .pf-node,
  .pf-step.left .pf-node{grid-column:1;justify-self:center}
  .pf-step .pf-card,
  .pf-step.left .pf-card{grid-column:2;text-align:left}
  .pf-gate{justify-content:flex-start;padding-left:6px;margin:-2px 0}
}

/* ============================================================================
   "SHOW DON'T TELL" — concrete mini-artifacts inside each stage card.
   Each artifact makes the WHAT visually obvious. Default (static / no-JS /
   reduced-motion) = finished state. In `.is-animated` they reset and fill in
   as the token lights the stage (`.pf-step.on`).
   ========================================================================== */
.pf-art{margin-top:11px;border-top:1px dashed var(--pf-line);padding-top:11px}
.pf-step.left .pf-art{text-align:left}          /* artifacts always read L→R */
.pf-art-cap{display:block;margin-top:7px;font-size:11px;font-weight:600;color:var(--pf-ink2)}

/* --- Idea: a raw prompt being typed --- */
.pf-art-prompt code{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--pf-ink);
  background:var(--pf-bg3);border:1px solid var(--pf-line);border-radius:8px;
  padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf-art-prompt code b{color:var(--pf-brand);font-weight:700}
.pf-caret{display:inline-block;width:7px;height:14px;margin-left:2px;
  vertical-align:-2px;background:var(--pf-gold);border-radius:1px}
.pflow.is-animated .pf-caret{animation:pf-blink 1s steps(1) infinite}
@keyframes pf-blink{50%{opacity:0}}

/* --- Governance: hub routes work to agents --- */
.pf-art-route svg{width:100%;height:44px;display:block}
.pf-art-route .pf-wire{stroke:var(--pf-brand);stroke-width:1.6;fill:none;
  stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .7s ease}
.pf-art-route .pf-hub{fill:var(--pf-brand)}
.pf-art-route .pf-ag-dot{fill:var(--pf-gold);transition:transform .4s cubic-bezier(.34,1.56,.64,1);transform-origin:center}
.pflow.is-animated .pf-art-route .pf-wire{stroke-dashoffset:1}
.pflow.is-animated .pf-art-route .pf-ag-dot{transform:scale(0)}
.pflow.is-animated .pf-step.on .pf-art-route .pf-wire{stroke-dashoffset:0}
.pflow.is-animated .pf-step.on .pf-art-route .pf-ag-dot{transform:scale(1)}

/* --- Discovery: an SRS document writing itself --- */
.pf-art-doc{background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:8px;padding:10px 12px}
.pf-doc-t{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-brand);margin-bottom:8px}
.pf-ln{display:block;height:6px;border-radius:3px;background:var(--pf-line);margin:6px 0;width:100%;
  transition:width .5s ease}
.pf-ln:nth-child(2){width:96%}.pf-ln:nth-child(3){width:88%}
.pf-ln:nth-child(4){width:92%}.pf-ln.short{width:54%}
.pf-ln.done{background:linear-gradient(90deg,var(--pf-brand-lt),var(--pf-brand))}
.pflow.is-animated .pf-art-doc .pf-ln{width:0}
.pflow.is-animated .pf-step.on .pf-art-doc .pf-ln{background:linear-gradient(90deg,var(--pf-brand-lt),var(--pf-brand))}
.pflow.is-animated .pf-step.on .pf-art-doc .pf-ln:nth-child(2){width:96%;transition-delay:.05s}
.pflow.is-animated .pf-step.on .pf-art-doc .pf-ln:nth-child(3){width:88%;transition-delay:.18s}
.pflow.is-animated .pf-step.on .pf-art-doc .pf-ln:nth-child(4){width:92%;transition-delay:.31s}
.pflow.is-animated .pf-step.on .pf-art-doc .pf-ln:nth-child(5){width:54%;transition-delay:.44s}

/* --- Build: parallel agents each producing an artifact --- */
.pf-art-agents{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-ag{display:flex;align-items:center;gap:8px;background:var(--pf-surface);
  border:1px solid var(--pf-line);border-radius:8px;padding:6px 8px}
.pf-ag b{font-size:10.5px;font-weight:800;color:var(--pf-brand);flex:none;width:22px}
.pf-bar{flex:1;height:6px;border-radius:3px;background:var(--pf-bg3);overflow:hidden}
.pf-bar i{display:block;height:100%;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--pf-brand-lt),var(--pf-brand));transition:width .8s ease}
.pflow.is-animated .pf-art-agents .pf-bar i{width:0}
.pflow.is-animated .pf-step.on .pf-art-agents .pf-ag:nth-child(1) .pf-bar i{width:100%;transition-delay:.05s}
.pflow.is-animated .pf-step.on .pf-art-agents .pf-ag:nth-child(2) .pf-bar i{width:100%;transition-delay:.22s}
.pflow.is-animated .pf-step.on .pf-art-agents .pf-ag:nth-child(3) .pf-bar i{width:100%;transition-delay:.14s}
.pflow.is-animated .pf-step.on .pf-art-agents .pf-ag:nth-child(4) .pf-bar i{width:100%;transition-delay:.30s}

/* --- Verify: a checklist stamping green --- */
.pf-art-check{display:grid;gap:6px}
.pf-ck{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--pf-ink2)}
.pf-ck i{width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--pf-brand);border:2px solid var(--pf-brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .3s ease,border-color .3s ease}
.pflow.is-animated .pf-art-check .pf-ck i{background-color:var(--pf-surface);border-color:var(--pf-line);
  background-image:none;transform:scale(.6)}
.pflow.is-animated .pf-step.on .pf-art-check .pf-ck i{
  background-color:var(--pf-brand);border-color:var(--pf-brand);transform:scale(1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E")}
.pflow.is-animated .pf-step.on .pf-art-check .pf-ck:nth-child(1) i{transition-delay:.05s}
.pflow.is-animated .pf-step.on .pf-art-check .pf-ck:nth-child(2) i{transition-delay:.22s}
.pflow.is-animated .pf-step.on .pf-art-check .pf-ck:nth-child(3) i{transition-delay:.39s}

/* --- Product: a finished app mockup --- */
.pf-art-app{border:1px solid var(--pf-line);border-radius:10px;overflow:hidden;background:var(--pf-surface);box-shadow:0 8px 22px -18px rgba(14,26,43,.6)}
.pf-app-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--pf-bg3);border-bottom:1px solid var(--pf-line)}
.pf-app-bar i{width:8px;height:8px;border-radius:50%;background:var(--pf-line)}
.pf-app-bar i:first-child{background:var(--pf-gold)}
.pf-app-bar i:nth-child(2){background:var(--pf-brand-lt)}
.pf-app-bar i:nth-child(3){background:var(--pf-brand)}
.pf-app-body{display:flex;height:74px}
.pf-app-side{width:34px;background:var(--pf-bg3);border-right:1px solid var(--pf-line)}
.pf-app-main{flex:1;padding:9px 10px}
.pf-app-main>b{display:block;height:7px;border-radius:3px;background:var(--pf-line);margin-bottom:6px}
.pf-app-main>b:first-child{width:52%;background:var(--pf-brand)}
.pf-app-main>b:nth-child(2){width:78%}
.pf-app-chart{display:flex;align-items:flex-end;gap:6px;height:30px;margin-top:8px}
.pf-app-chart i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--pf-brand-lt),var(--pf-brand));transition:height .6s cubic-bezier(.34,1.4,.64,1)}
.pf-app-chart i:nth-child(1){height:45%}.pf-app-chart i:nth-child(2){height:72%}
.pf-app-chart i:nth-child(3){height:56%}.pf-app-chart i:nth-child(4){height:90%}
.pflow.is-animated .pf-art-app .pf-app-chart i{height:0}
.pflow.is-animated .pf-step.on .pf-art-app .pf-app-chart i:nth-child(1){height:45%;transition-delay:.10s}
.pflow.is-animated .pf-step.on .pf-art-app .pf-app-chart i:nth-child(2){height:72%;transition-delay:.22s}
.pflow.is-animated .pf-step.on .pf-art-app .pf-app-chart i:nth-child(3){height:56%;transition-delay:.34s}
.pflow.is-animated .pf-step.on .pf-art-app .pf-app-chart i:nth-child(4){height:90%;transition-delay:.46s}

@media (max-width:640px){.pf-art-agents{grid-template-columns:1fr}}