/* Compartilhado por Meta Ads e Google Ads — funil de conversão e ranking
   top 3 por CTR. Reusa page-head/cards-row-5/rank-item/detail-table de
   metric-page.css; isso aqui só adiciona o que é específico de ads. */

/* ---------- funil ---------- */
.funnel { display: flex; flex-direction: column; gap: var(--space-3); }
.funnel-stage { display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; gap: var(--space-3); }
.funnel-lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.funnel-track { background: var(--grid); border-radius: var(--radius-sm); overflow: hidden; height: 34px; }
.funnel-fill {
  height: 100%; display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm); min-width: 44px; transition: width .2s ease;
}
.funnel-rate { font-size: 12px; font-weight: 600; color: var(--text-2); text-align: right; }

/* ---------- top 3 ---------- */
.top3-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-3); }
.top3-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.top3-rank { font-size: 11px; font-weight: 700; color: var(--muted); }
.top3-name { font-size: 13px; font-weight: 600; margin: 4px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top3-path { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }
.top3-stats { display: flex; gap: var(--space-4); }
.top3-stats div span { display: block; font-size: 14px; font-weight: 700; }
.top3-stats div small { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; }

.ads-empty { color: var(--text-2); font-size: 13px; padding: 8px 4px; }

/* ---------- múltiplas tabelas de detalhamento empilhadas ---------- */
.detail-card + .detail-card { margin-top: var(--space-4); }