/* funnel.css — Expand Your Capacity funnel tab. Owner-tinted 9-phase ribbon
   layered on Pure Parchment tokens (see styles.css :root). */

:root {
  --owner-web-bg:   #eef2f7; --owner-web-ink:   #3a516e;
  --owner-drsti-bg: #e8f2f2; --owner-drsti-ink: #1a6b6b;
  --owner-voice-bg: #f3eefb; --owner-voice-ink: #5b3f8a;
  --owner-live-bg:  #fdeef0; --owner-live-ink:  #a13a4e;
  --owner-money-bg: #eef7ee; --owner-money-ink: #2f7a3f;
  --owner-goal-bg:  #fbf3e6; --owner-goal-ink:  #8a5a1f;
}

.funnel-page { padding: 4px 0 48px; }

.funnel-toolbar {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.funnel-cohort-label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 'Poppins', sans-serif; color: var(--ink-muted);
}
.funnel-cohort-select {
  font: 500 14px/1 'Poppins', sans-serif; color: var(--ink);
  background: var(--card-bg, #fff); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}

.funnel-kpis { margin-bottom: 28px; }

/* 9-phase ribbon */
.funnel-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.funnel-ribbon.is-loading { opacity: 0.5; transition: opacity 0.2s; }

.funnel-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; cursor: pointer;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.funnel-step:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,23,18,0.08); }
.funnel-step.is-empty { opacity: 0.55; }

.funnel-step-eyebrow {
  font: 600 10px/1 'Geist Mono', monospace; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
}
.funnel-step-title { font: 600 16px/1.1 'Cormorant Garamond', serif; color: var(--ink); }
.funnel-step-sub { font: 400 11px/1.2 'Poppins', sans-serif; color: var(--ink-light); }
.funnel-step-count { font: 600 26px/1 'Poppins', sans-serif; color: var(--ink); margin-top: 4px; }
.funnel-step-drop { font: 500 11px/1 'Poppins', sans-serif; color: var(--owner-live-ink); }
.funnel-step-drop.is-muted { color: var(--ink-light); }

/* owner tints applied to the eyebrow + left accent */
.funnel-step.is-web   { border-left: 3px solid var(--owner-web-ink); }
.funnel-step.is-web   .funnel-step-eyebrow { background: var(--owner-web-bg);   color: var(--owner-web-ink); }
.funnel-step.is-drsti { border-left: 3px solid var(--owner-drsti-ink); }
.funnel-step.is-drsti .funnel-step-eyebrow { background: var(--owner-drsti-bg); color: var(--owner-drsti-ink); }
.funnel-step.is-voice { border-left: 3px solid var(--owner-voice-ink); }
.funnel-step.is-voice .funnel-step-eyebrow { background: var(--owner-voice-bg); color: var(--owner-voice-ink); }
.funnel-step.is-live  { border-left: 3px solid var(--owner-live-ink); }
.funnel-step.is-live  .funnel-step-eyebrow { background: var(--owner-live-bg);  color: var(--owner-live-ink); }
.funnel-step.is-money { border-left: 3px solid var(--owner-money-ink); }
.funnel-step.is-money .funnel-step-eyebrow { background: var(--owner-money-bg); color: var(--owner-money-ink); }
.funnel-step.is-goal  { border-left: 3px solid var(--owner-goal-ink); }
.funnel-step.is-goal  .funnel-step-eyebrow { background: var(--owner-goal-bg);  color: var(--owner-goal-ink); }

/* reconciliation */
.funnel-recon { max-width: 640px; }
.funnel-recon h3 {
  font: 600 20px/1 'Cormorant Garamond', serif; color: var(--ink);
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.funnel-recon-badge {
  font: 600 12px/1 'Poppins', sans-serif; color: var(--owner-live-ink);
  background: var(--owner-live-bg); padding: 3px 9px; border-radius: 999px;
}
.funnel-recon-note { font: 400 13px/1.4 'Poppins', sans-serif; color: var(--ink-muted); margin-bottom: 12px; }
.funnel-recon-list { list-style: none; padding: 0; margin: 0; }
.funnel-recon-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; background: var(--card-bg, #fff);
}
.funnel-recon-email { font: 500 14px/1 'Poppins', sans-serif; color: var(--ink); }
.funnel-recon-meta { font: 400 12px/1 'Geist Mono', monospace; color: var(--ink-light); }

.funnel-empty {
  font: 400 14px/1.5 'Poppins', sans-serif; color: var(--ink-muted);
  padding: 32px; text-align: center;
}