/* HYPERPART: funnel */
/* Promoted VERBATIM from Dazzle regions.css (Tier C-a, fleet
 * convergence). The Dazzle emitter contract is unchanged. */

/* ─────────────────────────── funnel_chart region ────────────────
 * Stacked proportional bars rendering ordered stages. Each stage
 * gets a width derived from `count / first_count` and a tone tint
 * via data-dz-funnel-step (0..N) so the depth-by-position fade can
 * happen in CSS. Replaces the dynamic
 * `bg-[hsl(var(--primary)/{{ pct }})]` Tailwind arbitrary value
 * (which was JIT-invisible). */

.dz-funnel-stages {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block-start: var(--space-sm);
}

.dz-funnel-stage-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dz-funnel-stage {
  border-radius: var(--radius-sm);
  padding-inline: var(--space-md);
  padding-block: 0.375rem;
  text-align: center;
  /* The step fade lives on the BAR SURFACE via --dz-funnel-fade, never on
   * element opacity — the promoted rules faded whole stages to 20%,
   * taking the TEXT with them (unreadable + a WCAG contrast failure the
   * axe gate caught on first gallery exposure). Text keeps full-contrast
   * scheme-aware ink on the mixed surface. */
  background: color-mix(
    in oklab,
    var(--colour-brand) calc(var(--dz-funnel-fade, 100) * 1%),
    var(--colour-surface)
  );
  color: var(--colour-text);
  min-width: 7.5rem;
}

/* Position-driven surface fade (steps 0..7). Beyond step 7 the surface
 * stays at the step-7 mix. */
.dz-funnel-stage[data-dz-funnel-step="0"] { --dz-funnel-fade: 60; }
.dz-funnel-stage[data-dz-funnel-step="1"] { --dz-funnel-fade: 50; }
.dz-funnel-stage[data-dz-funnel-step="2"] { --dz-funnel-fade: 41; }
.dz-funnel-stage[data-dz-funnel-step="3"] { --dz-funnel-fade: 33; }
.dz-funnel-stage[data-dz-funnel-step="4"] { --dz-funnel-fade: 26; }
.dz-funnel-stage[data-dz-funnel-step="5"] { --dz-funnel-fade: 20; }
.dz-funnel-stage[data-dz-funnel-step="6"] { --dz-funnel-fade: 15; }
.dz-funnel-stage[data-dz-funnel-step="7"] { --dz-funnel-fade: 11; }

.dz-funnel-stage-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.dz-funnel-stage-count {
  font-size: var(--text-xs);
  /* inherits the stage's full-contrast ink — muted text fails WCAG on
   * the brand-tinted surfaces; size alone differentiates it. */
  margin-inline-start: 0.25rem;
}

.dz-funnel-summary {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  margin-block-start: var(--space-sm);
}