/* Yolt v11 — funnel block · 4-tier inverted-trapezoid pyramid
 * Source: _DESIGN_HANDOFF/_DESIGN_BLOCKS_funnel-scatter.html
 * Stepped opacity tiers; hover shows drop% reason via tooltip.
 */

.funnel-block ═════ */
.funnel-block {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: 16px;
  align-items: stretch;
  padding: 8px 0;
}
.funnel-block .lbl-col { display: flex; flex-direction: column; }
.funnel-block .lbl-col.left { align-items: flex-end; }
.funnel-block .lbl-col.right { align-items: flex-start; }
.funnel-block .tier-lbl {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--line-soft);
}
.funnel-block .tier-lbl:last-child { border-bottom: none; }
.funnel-block .lbl-col.left .tier-lbl { text-align: right; }
.funnel-block .tier-lbl .name { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.funnel-block .tier-lbl .meta { font-size: 11px; color: var(--ink-3); font-family: ui-monospace, monospace; margin-top: 2px; }
.funnel-block .tier-lbl .count { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; color: var(--ink-0); }
.funnel-block .tier-lbl .drop {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--bad);
  margin-top: 1px;
}
.funnel-block .tier-lbl .drop.first { color: var(--ink-3); }
.funnel-block .tier-lbl .conv {
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}

.funnel-svg { width: 100%; height: 380px; display: block; }
.funnel-svg .tier-shape {
  cursor: pointer;
  transition: filter 120ms ease, opacity 120ms ease;
}
.funnel-svg .tier-shape:hover { filter: brightness(1.18); }
.funnel-svg .tier-text {
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  fill: var(--ink-0);
  pointer-events: none;
  text-anchor: middle;
}
.funnel-svg .tier-text.dim { fill: var(--bg-0); }

.funnel-tip {
  position: absolute;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 11.5px; color: var(--ink-1);
  box-shadow: 0 8px 24px color-mix(in oklch, oklch(0 0 0) 50%, transparent);
  pointer-events: none;
  max-width: 220px;
  z-index: 100;
}
.funnel-tip .tip-h { font-weight: 600; color: var(--ink-0); margin-bottom: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
.funnel-tip .tip-r { color: var(--ink-2); line-height: 1.4; }
.funnel-tip .tip-r b { color: var(--bad); font-weight: 500; }
.funnel-stage { position: relative; }

/* ═════