/* ─────────────────────────────────────────────────────────────
   Elysian Works Dashboard — Enhancements III
   Render Pipeline funnel

   Load AFTER enhancements-2.css:
     <link rel="stylesheet" href="enhancements-2.css">
     <link rel="stylesheet" href="enhancements-3.css">   ← this file

   Additive only — sits ABOVE the existing .stats-grid.
   Reuses existing tokens (--purple, --green, --cyan, --red) and the
   focus-ring / reduced-motion conventions from enhancements*.

   Pairs with enhancements-4.css, which hides the now-redundant
   Rendering / Completed / Queued / Failed cards in .stats-grid,
   since this funnel covers those four counts.
   ───────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   A. RENDER PIPELINE FUNNEL
   Queued → Rendering → Completing → Completed → Failed
   Connected stage cards with a directional arrow between them.
   ═══════════════════════════════════════════════════════════ */
.pipeline-row{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-bottom:18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.pipeline-stage{
  flex:1;
  min-width:0;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  cursor:pointer;
  transition:background .14s ease;
}
.pipeline-stage:hover{ background:oklch(1 0 0/.02); }
.pipeline-stage:not(:last-child){
  border-right:1px solid var(--border);
}
/* directional arrow between stages */
.pipeline-stage:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-7px; top:50%;
  width:14px; height:14px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--surface);
  border-top:1px solid var(--border);
  border-right:1px solid var(--border);
  z-index:1;
}

.pipeline-label{
  font-family:var(--mono);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--pl-color, var(--text-dim));
}
.pipeline-val{
  font-family:var(--mono);
  font-size:24px;
  font-weight:800;
  line-height:1;
  color:var(--text-bright);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.pipeline-sub{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-dim);
}
.pipeline-link{
  font-family:var(--mono);
  font-size:10px;
  color:var(--pl-color, var(--accent));
  text-decoration:none;
  margin-top:2px;
}
.pipeline-stage:hover .pipeline-link{ text-decoration:underline; }

/* top accent bar per stage, matches existing badge color language */
.pipeline-stage::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--pl-color, var(--text-dim));
  opacity:.7;
}
.pipeline-stage.queued    { --pl-color:var(--purple); }
.pipeline-stage.rendering { --pl-color:var(--green); }
.pipeline-stage.completing{ --pl-color:#06b6d4; }
.pipeline-stage.completed { --pl-color:var(--cyan); }
.pipeline-stage.failed    { --pl-color:var(--red); }

/* failed stage: zero state reads as "all clear", non-zero as alert */
.pipeline-stage.failed.has-failures .pipeline-val{ color:var(--red); }
.pipeline-stage.failed:not(.has-failures) .pipeline-val{ color:var(--text-dim); }

@media (max-width:760px){
  .pipeline-row{ flex-wrap:wrap; }
  .pipeline-stage{ flex:1 1 50%; }
  .pipeline-stage:not(:last-child)::after{ display:none; }
  .pipeline-stage:nth-child(odd){ border-right:1px solid var(--border); }
  .pipeline-stage:nth-child(-n+4){ border-bottom:1px solid var(--border); }
}


/* ═══════════════════════════════════════════════════════════
   B. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .pipeline-stage{ transition:none; }
}