/* Metrics detail components — funnel, win/loss, tables, health model */

/* Funnel — matches ds-row / ds-track from report-view.css */
.m-funnel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.m-funnel-stage { display: flex; align-items: center; gap: 12px; }
.m-funnel-label { width: 150px; font-size: 13px; color: var(--text); text-align: right; flex-shrink: 0; }
.m-funnel-bar-wrap {
  flex: 1; height: 24px; background: rgba(4,49,89,0.04);
  border-radius: 6px; overflow: hidden;
}
.m-funnel-bar {
  height: 100%; border-radius: 6px;
  display: flex; align-items: center; padding: 0 8px;
  transition: width 0.4s ease;
}
.m-funnel-bar span { font-size: 11px; font-weight: 600; color: white; }
.m-funnel-conv { font-size: 12px; width: 60px; text-align: left; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.m-funnel-conv.at_benchmark, .m-funnel-conv.above_benchmark { color: var(--green); }
.m-funnel-conv.below_benchmark { color: var(--orange); }
.m-funnel-conv.critical { color: var(--red); }

/* Win/Loss grid */
.m-wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.m-wl-section h4 { margin-bottom: 10px; }
.m-wl-bars { display: flex; flex-direction: column; gap: 5px; }
.m-wl-row { display: flex; align-items: center; gap: 8px; }
.m-wl-row .label {
  width: 160px; font-size: 12px; color: var(--text-secondary);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-wl-row .bar-wrap { flex: 1; height: 16px; background: rgba(4,49,89,0.04); border-radius: 4px; overflow: hidden; }
.m-wl-row .bar { height: 100%; border-radius: 4px; }
.m-wl-row .val { font-size: 11px; color: var(--text-secondary); width: 40px; font-variant-numeric: tabular-nums; }

/* Two-column layout (health model) */
.m-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.m-col { min-width: 0; }

/* Table — clean, minimal */
.m-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.m-table th {
  text-align: left; color: var(--text-secondary); padding: 8px 10px;
  border-bottom: 2px solid rgba(4,49,89,0.08); font-weight: 500; font-size: 12px;
}
.m-table td { padding: 8px 10px; border-bottom: 1px solid rgba(4,49,89,0.06); color: var(--text); }
.m-table td.positive { color: var(--green); font-weight: 600; }
.m-table td.negative { color: var(--red); font-weight: 600; }

@media (max-width: 700px) { .m-wl-grid, .m-two-col { grid-template-columns: 1fr; } }