/* ── FUNNEL VISUALIZATION (Overview tab) ── */
.funnel-row { display: flex; align-items: stretch; margin-bottom: 2px; }
.funnel-label {
  width: 120px; flex-shrink: 0;
  display: flex; align-items: center;
  padding: 10px 12px; font-size: 12px; font-weight: 500;
  background: var(--surface-1); border: 0.5px solid #2A2A2A;
  border-radius: 6px 0 0 6px; color: var(--momo-white);
}
.funnel-content {
  flex: 1; padding: 10px 14px;
  border: 0.5px solid #2A2A2A; border-left: none;
  border-radius: 0 6px 6px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.funnel-content.upper { background: #2a1020; border-color: #6a2050; }
.funnel-content.lower { background: #101828; border-color: #2a4070; }
.funnel-stage-name { font-size: 13px; font-weight: 500; color: var(--momo-white); }
.funnel-stage-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.funnel-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.owner-note { font-size: 11px; color: var(--text-secondary); }

/* ── TOOL TAG ── */
.tool-tag {
  font-size: 11px; color: var(--text-secondary);
  background: var(--surface-2); border: 0.5px solid #333;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}

/* ── OWNER BADGES ── */
.pill-cio    { background: #2d1a4a; color: #c9a8ef; }
.pill-media  { background: #0d2a10; color: #81c784; }
.pill-marcom { background: #2a1a00; color: #ffb74d; }
.pill-creative { background: #0d2a28; color: #5ecdc0; }

/* ── DECISION TREE (Tracking Setup Guide tab) — collapsible ── */
.decision-tree { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.decision-item { border: none; }
.decision-item summary {
  list-style: none; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--momo-pink);
  border-radius: 6px; padding: 12px 16px;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.decision-item summary::-webkit-details-marker { display: none; }
.decision-item summary::marker { content: ""; }
.decision-item[open] summary { border-radius: 6px 6px 0 0; }
.decision-node-text { flex: 1; }
.decision-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-top: 4px; }
.decision-chevron { flex-shrink: 0; font-size: 11px; color: var(--momo-pink-light); transition: transform 0.15s ease; }
.decision-item[open] .decision-chevron { transform: rotate(90deg); }
.decision-branch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--momo-pink); border-top: none;
  border-radius: 0 0 6px 6px; padding: 12px 16px 16px;
}
.decision-leaf {
  background: var(--surface-1); border: 1px solid #2A2A2A; border-radius: 6px;
  padding: 12px 14px; font-size: 12px; color: #ccc; line-height: 1.6;
}
.decision-leaf strong { display: block; font-size: 13px; color: var(--momo-white); margin-bottom: 4px; }
.leaf-yes { border-left: 3px solid #4ade80; }
.leaf-no  { border-left: 3px solid #f59e0b; }

/* ── UPPER FUNNEL: RESEARCH KNOWLEDGE (CIO request / self-host rules / stats) ── */
.research-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }

.research-card { background: #161616; border: 0.5px solid #2a2a2a; border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; }
.research-card h4 { font-size: 12px; font-weight: 500; color: #fff; margin: 0 0 6px; }
.research-card p, .research-card ul { font-size: 12px; color: #888; line-height: 1.6; margin: 0; }
.research-card ul { padding-left: 14px; list-style: disc; margin-top: 4px; }

.input-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 0.5px solid #222; }
.input-item:last-child { border-bottom: none; }
.input-num {
  width: 22px; height: 22px; border-radius: 50%; background: #A50064; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.input-label { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 3px; }
.input-desc { font-size: 12px; color: #888; line-height: 1.55; margin-bottom: 4px; }
.input-example { font-size: 11px; color: #555; font-style: italic; }

.rule-card {
  background: #161616; border: 0.5px solid #2a2a2a; border-radius: 8px; padding: 16px;
  margin-bottom: 8px; display: flex; flex-direction: column; gap: 10px;
}
.rule-header { display: flex; align-items: center; gap: 10px; }
.rule-title { font-size: 13px; font-weight: 500; color: #fff; flex: 1; }
.rule-body { font-size: 12px; color: #888; line-height: 1.65; }
.rule-examples { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; background: #111; border-radius: 4px; font-size: 12px; }
.rule-do { color: #81c784; }
.rule-dont { color: #f87171; }

.severity-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px; flex-shrink: 0;
}
.severity-badge.critical { background: #2d0a0a; color: #f87171; border: 0.5px solid #c62828; }
.severity-badge.warning  { background: #2a1a00; color: #ffb74d; border: 0.5px solid #bf6800; }
.severity-badge.standard { background: #0d2a10; color: #81c784; border: 0.5px solid #2e7d32; }
.severity-badge.robust   { background: #0a1a2d; color: #90caf9; border: 0.5px solid #1565c0; }

.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sample-card { background: #161616; border: 0.5px solid #2a2a2a; border-radius: 6px; padding: 14px; }
.sample-n { font-family: var(--font-display); font-size: 20px; color: #A50064; margin: 6px 0 4px; }
.sample-label { font-size: 12px; color: #888; line-height: 1.5; }

.pvalue-block {
  background: #0d0d0d; border-left: 3px solid #A50064; border-radius: 0 6px 6px 0;
  font-family: monospace; font-size: 12px; line-height: 1.9; padding: 12px 16px; margin-top: 12px;
  white-space: pre-wrap;
}
.pvalue-sig { color: #81c784; }
.pvalue-nonsig { color: #f87171; }

.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.example-card { border-radius: 6px; padding: 12px; font-size: 12px; line-height: 1.6; }
.example-card h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin: 0 0 6px; }
.example-card.good { background: #0d2a10; border: 0.5px solid #2e7d32; color: #81c784; }
.example-card.caution { background: #2a1a00; border: 0.5px solid #bf6800; color: #ffb74d; }
.example-card ul { margin: 0; padding-left: 16px; }
.example-card li { margin-bottom: 6px; }
.example-card li:last-child { margin-bottom: 0; }

.nonresponse-card { background: #161616; border: 0.5px solid #2a2a2a; border-radius: 6px; padding: 14px; margin-bottom: 8px; }
.nonresponse-card:last-child { margin-bottom: 0; }
.nonresponse-card h5 { font-size: 12px; font-weight: 500; color: #fff; margin: 0 0 6px; }
.nonresponse-card p { font-size: 12px; color: #888; line-height: 1.6; margin: 0; }

.redflag-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.redflag-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #ccc; line-height: 1.5; }

@media (max-width: 768px) {
  .research-two-col { grid-template-columns: 1fr; }
  .sample-grid { grid-template-columns: 1fr; }
  .example-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .funnel-row { flex-direction: column; }
  .funnel-label { width: 100%; border-radius: 6px 6px 0 0; }
  .funnel-content { border-left: 0.5px solid #2A2A2A; border-top: none; border-radius: 0 0 6px 6px; }
  .decision-branch { grid-template-columns: 1fr; }
}