/* Growth module: leads board, stage stepper, comms, templates, integrations. Uses core design tokens (light + dark). */

.banner-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: color-mix(in srgb, var(--ok) 75%, var(--text)); }
a.banner { text-decoration: none; }

/* ---------- leads board ---------- */
.lead-board { grid-auto-columns: minmax(250px, 1fr); }
.lead-board .kcard .t { margin-bottom: .2rem; }
.lead-board .board-col-head .tag { margin-left: .25rem; }

/* stage stepper */
.stage-steps { display: flex; flex-wrap: wrap; gap: .35rem; }
.stage-step { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; font-weight: 560;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease); }
.stage-step:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.stage-step.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.stage-step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* service chips (checkbox pills) */
.chip-checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-check { position: relative; cursor: pointer; margin: 0; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-block; padding: .28rem .7rem; border-radius: 999px; border: 1px solid var(--border); font-size: .8rem; font-weight: 550; color: var(--text-2); background: var(--surface);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.chip-check input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.chip-check input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* meters (widths set via data-w by C.animateBars) */
.meter { height: 8px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; min-width: 60px; }
.meter > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--violet))); transition: width 700ms var(--ease); }
td .meter { display: inline-block; width: 80px; vertical-align: middle; margin-right: .4rem; }
.funnel-bars { margin: 0; }
.funnel-row { display: grid; grid-template-columns: 110px 1fr auto; gap: .75rem; align-items: center; padding: .35rem 0; }

/* mini stats in dashboard widget */
.mini-stat { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem .7rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.mini-stat b { font-size: 1.25rem; line-height: 1.1; }
.mini-stat span { font-size: .74rem; color: var(--muted); }
.mini-stat .icon { color: var(--brand); }

/* comms */
.comm-subj { max-width: 42ch; }
.bulk-sample { max-height: 180px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .65rem; margin-top: .35rem; }

/* templates */
.tpl-card { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast); animation: rise var(--dur) var(--ease) both; }
.tpl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.tpl-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tpl-card.inactive { opacity: .6; }
.tpl-card .card-head h2 { min-width: 0; }
.tpl-body { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tag-btn { cursor: pointer; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); transition: background var(--dur-fast), border-color var(--dur-fast); }
.tag-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.mono-ish { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .86rem; }

/* integrations */
.copy-row { display: grid; grid-template-columns: 96px 1fr auto; gap: .5rem; align-items: center; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); margin-bottom: .4rem; }
.copy-row code { font-size: .78rem; color: var(--text); min-width: 0; }
.narrow-card { max-width: 640px; }

@media (max-width: 575.98px) {
  .funnel-row { grid-template-columns: 84px 1fr; }
  .funnel-row > :last-child { grid-column: 1 / -1; }
  .copy-row { grid-template-columns: 1fr auto; }
  .copy-row > span:first-child { grid-column: 1 / -1; }
  .comm-subj { max-width: 60vw; }
}