/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-campaigns.css, minus 0 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ================================================================
   marketing-hub-campaigns.css — Campaigns tab styles
   ================================================================ */

/* ── Campaign card grid (All Campaigns view) ── */
.mc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.mc-card {
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  transition: all .25s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mc-card:hover {
  box-shadow: 0 8px 32px rgba(99,102,241,.12), 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-3px);
  border-color: var(--wt-theme-primary, #6366f1);
}

.mc-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}

/* Card header: icon + title/type */
.mc-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 0;
}

.mc-card-header .mc-campaign-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.mc-card-hinfo {
  flex: 1;
  min-width: 0;
}

.mc-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #161616);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}

.mc-card-type {
  font-size: 11px;
  color: var(--ink3, #8d8d8d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card badges row */
.mc-card-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px 0;
}

.mc-source-pill {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

/* Keep legacy selectors for head/meta compat */
.mc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 18px 18px 0;
}

.mc-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0 18px;
}

.mc-card-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-s, #f3f4f6);
  color: var(--ink3, #8d8d8d);
  text-transform: capitalize;
}

.mc-tag-crm {
  background: #eef2ff;
  color: #6366f1;
}

.mc-tag-n8n {
  background: #fff2e8;
  color: #ba4e00;
}

/* Card footer */
.mc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  margin-top: auto;
  border-top: 1px solid var(--border-s, #f0f0f0);
}

.mc-card-date {
  font-size: 11px;
  color: var(--ink3, #8d8d8d);
  font-weight: 500;
}

.mc-card-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--wt-theme-primary, #6366f1);
  opacity: 0;
  transition: opacity .2s;
}

.mc-card:hover .mc-card-action { opacity: 1; }

@media (max-width: 640px) {
.mc-card-grid { grid-template-columns: 1fr; }
}

/* ── Legacy campaign list cards (kept for compat) ── */
.mc-campaign-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
  cursor: pointer; transition: background .15s, border-color .15s;
}

.mc-campaign-card:hover {
  background: var(--glass2, rgba(255,255,255,.10));
  border-color: var(--wt-theme-primary, #6366f1);
}

.mc-campaign-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.mc-campaign-icon svg { width: 20px; height: 20px; stroke-width: 2; fill: none; }

.mc-campaign-icon.mc-email      { background: #eef2ff; }

.mc-campaign-icon.mc-email svg   { stroke: #6366f1; }

.mc-campaign-icon.mc-email_nurture { background: #eef2ff; }

.mc-campaign-icon.mc-email_nurture svg { stroke: #6366f1; }

.mc-campaign-icon.mc-social     { background: #fef3c7; }

.mc-campaign-icon.mc-social svg  { stroke: #b45309; }

.mc-campaign-icon.mc-sms        { background: #defbe6; }

.mc-campaign-icon.mc-sms svg     { stroke: #16a34a; }

.mc-campaign-icon.mc-content    { background: #fce7f3; }

.mc-campaign-icon.mc-content svg { stroke: #db2777; }

.mc-campaign-icon.mc-paid-ads   { background: #fee2e2; }

.mc-campaign-icon.mc-paid-ads svg{ stroke: #dc2626; }

.mc-campaign-icon.mc-paid_ads   { background: #fee2e2; }

.mc-campaign-icon.mc-paid_ads svg{ stroke: #dc2626; }

.mc-campaign-icon.mc-event      { background: #e0e7ff; }

.mc-campaign-icon.mc-event svg   { stroke: #4f46e5; }

.mc-campaign-icon.mc-other      { background: #f1f5f9; }

.mc-campaign-icon.mc-other svg   { stroke: #64748b; }

.mc-campaign-info { flex: 1; min-width: 0; }

.mc-campaign-name { font-size: 12px; font-weight: 600; color: var(--ink, #161616); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-campaign-meta { display: flex; gap: 8px; align-items: center; font-size: 10px; color: var(--ink3, #8d8d8d); margin-top: 2px; flex-wrap: wrap; }

.mc-campaign-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Stats row ── */
.mc-stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.mc-stat-card {
  flex: 1; min-width: 120px; padding: 14px 16px; border-radius: 10px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
}

.mc-stat-val { font-size: 22px; font-weight: 700; color: var(--ink1, #fff); }

.mc-stat-label { font-size: 10px; color: var(--ink3, #999); margin-top: 2px; }

/* ── Campaign list container ── */
.mc-list { display: flex; flex-direction: column; gap: 6px; }

/* ── Filters row ── */
.mc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }

.mc-filter-pill {
  padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 500;
  background: var(--glass1, rgba(255,255,255,.06)); color: var(--ink2, #ccc);
  border: 1px solid transparent; cursor: pointer; transition: all .15s;
}

.mc-filter-pill:hover { border-color: var(--wt-theme-primary, #6366f1); }

.mc-filter-pill.is-active {
  background: var(--wt-theme-primary, #6366f1); color: #fff;
  border-color: var(--wt-theme-primary, #6366f1);
}

.mc-search-wrap { margin-left: auto; position: relative; }

.mc-search-wrap input {
  padding: 5px 10px 5px 28px; border-radius: 8px; border: 1px solid var(--border1, rgba(255,255,255,.08));
  background: var(--glass1, rgba(255,255,255,.06)); color: var(--ink1, #fff);
  font-size: 11px; width: 180px; outline: none;
}

.mc-search-wrap input:focus { border-color: var(--wt-theme-primary, #6366f1); }

.mc-search-wrap svg {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--ink3, #999); fill: none; stroke-width: 2;
}

/* ── Detail view ── */
.mc-detail-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }

.mc-detail-back {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border1, rgba(255,255,255,.08));
  background: var(--glass1, rgba(255,255,255,.06)); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
}

.mc-detail-back:hover { background: var(--glass2, rgba(255,255,255,.10)); }

.mc-detail-back svg { width: 16px; height: 16px; stroke: var(--ink2, #ccc); fill: none; stroke-width: 2; }

.mc-detail-title { font-size: 16px; font-weight: 700; color: var(--ink1, #fff); }

.mc-detail-section { margin-bottom: 20px; }

.mc-detail-section-title { font-size: 11px; font-weight: 700; color: var(--ink3, #999); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }

.mc-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}

.mc-detail-field { padding: 10px 12px; border-radius: 8px; background: var(--glass1, rgba(255,255,255,.06)); }

.mc-detail-field-label { font-size: 10px; color: var(--ink3, #999); margin-bottom: 2px; }

.mc-detail-field-val { font-size: 12px; font-weight: 500; color: var(--ink1, #fff); }

/* ── Metrics row in detail ── */
.mc-metrics-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.mc-metric {
  flex: 1; min-width: 100px; padding: 14px; text-align: center; border-radius: 10px;
  background: var(--glass1, rgba(255,255,255,.06)); border: 1px solid var(--border1, rgba(255,255,255,.08));
}

.mc-metric-val { font-size: 20px; font-weight: 700; color: var(--ink1, #fff); }

.mc-metric-label { font-size: 10px; color: var(--ink3, #999); margin-top: 2px; }

/* ── Empty state ── */
.mc-empty { text-align: center; padding: 40px 20px; }

.mc-empty-icon { margin: 0 auto 12px; width: 48px; height: 48px; opacity: .4; }

.mc-empty-icon svg { width: 100%; height: 100%; stroke: var(--ink3, #999); fill: none; stroke-width: 1.5; }

.mc-empty-title { font-size: 13px; font-weight: 600; color: var(--ink2, #ccc); margin-bottom: 4px; }

.mc-empty-sub { font-size: 11px; color: var(--ink3, #999); margin-bottom: 12px; }

/* ── Member cards ── */
.mc-member-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
  margin-bottom: 4px;
}

.mc-member-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--wt-theme-primary, #6366f1); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
}

.mc-member-info { flex: 1; min-width: 0; }

.mc-member-name { font-size: 12px; font-weight: 600; color: var(--ink1, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-member-meta { font-size: 10px; color: var(--ink3, #999); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-member-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.mc-unroll-btn { padding: 2px 6px !important; font-size: 14px !important; line-height: 1; min-width: auto !important; opacity: .5; transition: opacity .15s; }

.mc-member-card:hover .mc-unroll-btn { opacity: 1; }

/* ── Person picker (enrollment modal) ── */
.mc-person-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
  transition: background .15s;
}

.mc-person-pick:hover { background: var(--glass2, rgba(255,255,255,.10)); }

.mc-person-enrolled { opacity: .6; }

.mc-person-optout {
  opacity: .5;
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.04);
}

.mc-optout-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(239,68,68,.12); color: #ef4444;
  margin-left: 6px; vertical-align: middle;
}

.mc-optout-label {
  font-size: 10px; font-weight: 600; color: #ef4444;
  white-space: nowrap; flex-shrink: 0;
}

.mc-enrolled-badge {
  font-size: 10px; font-weight: 600; color: #22c55e;
  white-space: nowrap; flex-shrink: 0;
}

.mc-person-history {
  margin-top: 3px;
}

.mc-history-count {
  font-size: 10px; color: #6366f1; cursor: pointer;
  font-weight: 600;
  transition: color .15s;
}

.mc-history-count:hover { color: #4f46e5; text-decoration: underline; }

.mc-history-list {
  margin-top: 4px; padding: 4px 0;
}

.mc-history-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--ink2, #ccc);
  padding: 2px 0;
}

.mc-history-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

.mc-history-date {
  color: var(--ink3, #999); font-size: 9px; margin-left: auto;
}

/* ── Enroll modal tabs ── */
.mc-enroll-tabs {
  display: flex; gap: 2px; margin-bottom: 12px;
  background: var(--glass1, rgba(255,255,255,.06));
  border-radius: 8px; padding: 3px;
}

.mc-enroll-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink3, #999);
  background: transparent; border: none; cursor: pointer;
  transition: all .15s;
}

.mc-enroll-tab:hover { color: var(--ink, #161616); background: var(--glass2, rgba(0,0,0,.04)); }

.mc-enroll-tab.is-active {
  color: var(--ink, #161616);
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e0e0e0);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.mc-enroll-tab svg { opacity: .7; }

.mc-enroll-tab.is-active svg { opacity: 1; }

.mc-enroll-panel { display: none; }

.mc-enroll-panel.is-active { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.mh-modal.mh-modal-tall .mh-modal-body { padding-bottom: 14px; }

/* ── Company picker ── */
.mc-company-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
  transition: background .15s;
}

.mc-company-pick:hover { background: var(--glass2, rgba(255,255,255,.10)); }

.mc-company-avatar {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Bulk enroll ── */
.mc-group-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
  transition: background .15s;
}

.mc-group-pick:hover { background: var(--glass2, rgba(255,255,255,.10)); }

.mc-group-avatar {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, #06b6d4, #6366f1);
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.mc-group-type-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--glass2, rgba(255,255,255,.08));
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; color: var(--ink2, #ccc);
}

.mc-bulk-progress-bar {
  height: 6px; border-radius: 3px;
  background: var(--glass1, rgba(255,255,255,.06));
  overflow: hidden; margin-top: 10px;
}

.mc-bulk-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width .2s;
}

/* ── Flow builder steps ── */
.mc-flow-steps { display: flex; flex-direction: column; align-items: stretch; }

.mc-flow-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--glass1, rgba(255,255,255,.06));
  border: 1px solid var(--border1, rgba(255,255,255,.08));
  transition: background .15s;
}

.mc-flow-step:hover { background: var(--glass2, rgba(255,255,255,.10)); }

.mc-flow-step-icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent;
}

.mc-flow-step-icon svg { width: 18px; height: 18px; stroke-width: 2; fill: none; stroke: currentColor; }

.mc-flow-step-body { flex: 1; min-width: 0; }

.mc-flow-step-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--ink3, #999); }

.mc-flow-step-name { font-size: 12px; font-weight: 600; color: var(--ink1, #fff); margin-top: 2px; }

.mc-flow-step-desc { font-size: 11px; color: var(--ink3, #999); margin-top: 2px; }

.mc-flow-step-delay { font-size: 10px; color: #f59e0b; margin-top: 3px; }

.mc-flow-step-condition { font-size: 10px; color: #06b6d4; margin-top: 3px; font-style: italic; }

.mc-flow-step-actions { flex-shrink: 0; }

.mc-step-delete { opacity: .4; transition: opacity .15s; }

.mc-flow-step:hover .mc-step-delete { opacity: 1; }

/* ── Flow arrow connector ── */
.mc-flow-arrow {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 0; color: var(--ink3, #999);
}

.mc-flow-arrow svg { flex-shrink: 0; }

.mc-flow-arrow-label {
  font-size: 9px; font-weight: 500; color: var(--ink3, #999);
  background: var(--glass1, rgba(255,255,255,.06));
  padding: 2px 8px; border-radius: 10px;
}

/* ── Pill extras ── */
.pill.pill-green { background: rgba(22,163,74,.15); color: #4ade80; }

.pill.pill-blue  { background: rgba(99,102,241,.15); color: #818cf8; }

/* ── Danger button ── */
.mh-btn-danger { background: rgba(239,68,68,.15) !important; color: #f87171 !important; border-color: rgba(239,68,68,.2) !important; }

.mh-btn-danger:hover { background: rgba(239,68,68,.25) !important; }

/* ═══════════════════════════════════════════════════════════
   WEBSITE SIGNUPS panel  (the tab formerly called Auto-Enroll)

   ⚠️ THIS BLOCK WAS WRITTEN FOR A DARK APP AND THIS APP IS LIGHT.
   Every rule here used to read `var(--text1, #fff)` / `var(--text3, #888)` /
   `var(--glass1, …)`. Only the --glass* trio is ever declared (marketing-hub.css
   line 12); **--text1/2/3 are declared nowhere in this repo**, so the fallback
   won — the panel title, every section title and the whole pipeline diagram
   rendered #fff on a near-white card. Invisible, not merely ugly: a good part
   of "the auto-enroll stuff is way too confusing" was that half of it could not
   be read at all. Retyped against the tokens this app actually defines
   (--ink / --ink2 / --ink3), which are in marketing-hub.css line 11.
   If you add a --text1 later, do NOT revert this — fix it at the token.
   ═══════════════════════════════════════════════════════════ */
.ae-panel { max-width: 820px; }

.ae-header { margin-bottom: 18px; }

.ae-title { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0 0 4px; letter-spacing: -.3px; }

/* --ink3 (#8d8d8d) measures 3.15:1 against this page's #f8f9fa — acceptable
   for a 9px caption, not for the paragraph that explains what the whole screen
   does. The two blocks of real body copy here use --ink2 (#525252, ~7.5:1).
   The global token is deliberately left alone: changing it would restyle every
   hub in the app, which is not what was asked for. */
.ae-subtitle { font-size: 12.5px; color: var(--ink2); margin: 0; line-height: 1.6; max-width: 66ch; }

/* ── what actually happens, in three plain steps ── */
.ae-flow {
  display: flex; align-items: stretch; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
}

.ae-flow-step {
  flex: 1 1 210px; display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid #eef0f4; border-radius: 12px; padding: 13px 14px;
}

.ae-flow-ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: #eef2ff; color: #6366f1; display: flex; align-items: center; justify-content: center;
}

.ae-flow-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ae-flow-txt strong { font-size: 12.5px; font-weight: 700; color: var(--ink); }

.ae-flow-txt span { font-size: 11px; color: var(--ink3); line-height: 1.5; }

.ae-flow-arrow {
  flex: 0 0 auto; align-self: center; color: #c6c6c6; font-size: 16px; font-weight: 700;
}

@media (max-width: 820px) {
.ae-flow-arrow { display: none; }
}

/* ── sections ── */
.ae-section {
  background: #fff; border: 1px solid #eef0f4; border-radius: 12px;
  padding: 18px 20px; margin-bottom: 14px;
}

.ae-section-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }

.ae-section-desc { font-size: 11.5px; color: var(--ink2); margin-bottom: 13px; line-height: 1.55; max-width: 66ch; }

/* ── the webhook URL. Monospace stays; the colours become readable. ── */
.ae-url-row { display: flex; align-items: center; gap: 8px; }

.ae-url {
  flex: 1; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 10px 13px; font-family: 'Fira Code', Consolas, monospace; font-size: 11.5px;
  color: #15803d; word-break: break-all;
}

.ae-copy-btn {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 9px 11px; cursor: pointer; color: var(--ink2); transition: all .12s; line-height: 0;
}

.ae-copy-btn:hover { border-color: #6366f1; color: #4f46e5; background: #fafaff; }

/* ── payload schema ── */
.ae-schema { overflow-x: auto; }

.ae-schema-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.ae-schema-table th {
  text-align: left; color: var(--ink3); font-weight: 800; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 7px 10px; border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}

.ae-schema-table td { padding: 7px 10px; color: var(--ink2); border-bottom: 1px solid #f3f4f6; }

.ae-schema-table td:first-child { font-family: 'Fira Code', Consolas, monospace; color: #4f46e5; font-weight: 600; white-space: nowrap; }

.ae-schema-table td:nth-child(3) { font-weight: 700; }

/* ── test form ── */
.ae-test-form { display: flex; flex-direction: column; gap: 9px; }

.ae-form-row { display: flex; align-items: center; gap: 10px; }

.ae-form-row label { width: 130px; font-size: 11px; font-weight: 700; color: var(--ink2); flex-shrink: 0; }

.ae-form-row input {
  flex: 1; min-width: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 9px;
  padding: 8px 11px; color: var(--ink); font-size: 12.5px; font-family: inherit; outline: 0;
  transition: border-color .12s, box-shadow .12s;
}

.ae-form-row input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.ae-form-row input::placeholder { color: #c6c6c6; }

.ae-test-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #6366f1; border: 1px solid #6366f1; border-radius: 9px;
  padding: 9px 18px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: opacity .12s; align-self: flex-start; margin-top: 4px; font-family: inherit;
}

.ae-test-btn:hover { opacity: .9; }

.ae-test-btn:disabled { opacity: .5; cursor: not-allowed; }

.ae-test-result {
  font-size: 11.5px; padding: 11px 13px; border-radius: 9px; display: none;
  white-space: pre-wrap; font-family: 'Fira Code', Consolas, monospace; line-height: 1.55;
}

.ae-test-result.ae-success { display: block; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

.ae-test-result.ae-error   { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* ── developer setup, folded away ──
   Two audiences never overlap here: the person checking that signups arrive,
   and the person who wires the form once. The second one gets a disclosure,
   not a third of the page. */
.ae-dev { background: #fff; border: 1px solid #eef0f4; border-radius: 12px; overflow: hidden; }

.ae-dev-sum {
  display: flex; align-items: center; gap: 9px; padding: 13px 18px; cursor: pointer;
  list-style: none; color: var(--ink2); user-select: none;
}

.ae-dev-sum::-webkit-details-marker { display: none; }

.ae-dev-sum:hover { background: #fafaff; }

.ae-dev-sum > svg { flex: 0 0 auto; color: #6366f1; }

.ae-dev-t { font-size: 12.5px; font-weight: 700; color: var(--ink); flex: 1; }

.ae-dev-hint { font-size: 10.5px; color: var(--ink3); font-weight: 500; }

.ae-dev[open] .ae-dev-sum { border-bottom: 1px solid #f3f4f6; }

.ae-dev-body { padding: 16px 18px 18px; }

/* ⚠️ REQUIRED, not belt-and-braces. Measured: with `display:flex` on the
   <summary>, Chromium still LAYS OUT the rest of the details' children while
   closed — the body measured 641px tall inside a 108px <details>. It was
   invisible only because `.ae-dev` happens to set `overflow:hidden`, i.e. the
   whole disclosure was working by accident of an unrelated rule. Drop the
   overflow and the developer docs reappear under the summary. Hide it
   explicitly instead of depending on an engine's details/summary quirk. */
.ae-dev:not([open]) .ae-dev-body { display: none; }

@media (max-width: 640px) {
.ae-dev-hint { display: none; }
}

/* ── Source badges on campaign cards ── */
.mc-src-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  letter-spacing: .3px; text-transform: uppercase; line-height: 1.4;
}

.mc-src-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

.mc-src-n8n { background: rgba(245,158,11,.15); color: #f59e0b; }

.mc-src-crm { background: rgba(99,102,241,.15); color: #818cf8; }

.mc-node-hint {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; color: var(--ink3, #999); opacity: .7;
  transition: opacity .15s;
}

.mc-node-hint svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.mc-campaign-card.mc-card-n8n { border-left: 2px solid #f59e0b; }

.mc-campaign-card.mc-card-n8n:hover { border-color: #f59e0b; }

/* ================================================================
   Rich Campaign Cards — Operational Intelligence
   ================================================================ */

/* ── Rich card adjustments ── */
.mc-card.mc-card-rich {
  gap: 0;
}

.mc-card-rich .mc-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 8px;
}

.mc-card-rich .mc-card-header .mc-status-pill {
  flex-shrink: 0;
  margin-left: auto;
}

.mc-card-rich .mc-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}

.mc-card-rich .mc-card-type {
  font-size: 10px;
  color: var(--ink3, #8d8d8d);
}

/* ── Status pill variants ── */
.mc-status-broken {
  background: rgba(220,38,38,.15) !important;
  color: #dc2626 !important;
  font-weight: 700;
}

.mc-status-stale {
  background: rgba(245,158,11,.12) !important;
  color: #d97706 !important;
}

.mc-status-unused {
  background: rgba(100,116,139,.1) !important;
  color: #64748b !important;
}

/* ── Meta row: trigger + node count ── */
.mc-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 0;
  flex-wrap: wrap;
}

.mc-trigger-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink2, #525252);
  background: var(--bg-s, #f3f4f6);
  padding: 3px 8px;
  border-radius: 6px;
}

.mc-trigger-chip svg {
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
}

.mc-node-count {
  font-size: 9px;
  color: var(--ink3, #8d8d8d);
  font-weight: 600;
  letter-spacing: .2px;
}

/* ── Channel chips ── */
.mc-channel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 16px 0;
}

.mc-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink2, #525252);
  background: rgba(99,102,241,.06);
  padding: 2px 7px;
  border-radius: 5px;
  line-height: 1.3;
}

.mc-channel-chip-icon {
  display: inline-flex;
  align-items: center;
}

.mc-channel-chip-icon svg {
  stroke: currentColor;
  fill: none;
}

.mc-channel-chip-label {
  white-space: nowrap;
}

/* ── Warning banners ── */
.mc-card-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 16px;
  margin: 6px 12px 0;
  border-radius: 6px;
}

.mc-card-warning svg {
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.mc-card-warning-error {
  background: rgba(220,38,38,.08);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,.15);
}

.mc-card-warning-warn {
  background: rgba(245,158,11,.08);
  color: #d97706;
  border: 1px solid rgba(245,158,11,.15);
}

.mc-card-warning-mute {
  background: rgba(100,116,139,.06);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,.1);
}

/* ── Health bar ── */
.mc-health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 0;
}

.mc-health-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-s, #f0f0f0);
  border-radius: 2px;
  overflow: hidden;
}

.mc-health-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

.mc-health-good { background: #16a34a; }

.mc-health-warn { background: #f59e0b; }

.mc-health-bad { background: #dc2626; }

.mc-health-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink3, #8d8d8d);
  white-space: nowrap;
  min-width: 62px;
  text-align: right;
}

/* ── Stats row ── */
.mc-card-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 0;
  flex-wrap: wrap;
}

.mc-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink2, #525252);
}

.mc-stat-item svg { fill: currentColor; }

.mc-stat-error {
  color: #dc2626;
}

/* ── Mini journey strip ── */
.mc-journey-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 16px 0;
  flex-wrap: wrap;
}

.mc-journey-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1;
  background: var(--bg-s, #f3f4f6);
  color: var(--ink2, #525252);
  flex-shrink: 0;
}

.mc-journey-trigger { background: rgba(99,102,241,.12); color: #6366f1; }

.mc-journey-email   { background: rgba(99,102,241,.08); color: #818cf8; }

.mc-journey-sms     { background: rgba(22,163,74,.08); color: #16a34a; }

.mc-journey-condition { background: rgba(245,158,11,.1); color: #d97706; }

.mc-journey-wait    { background: rgba(100,116,139,.08); color: #94a3b8; }

.mc-journey-notify  { background: rgba(79,70,229,.08); color: #4f46e5; }

.mc-journey-webhook { background: rgba(6,182,212,.08); color: #0891b2; }

.mc-journey-action  { background: var(--bg-s, #f3f4f6); color: var(--ink3, #8d8d8d); }

.mc-journey-arrow {
  font-size: 9px;
  color: var(--ink3, #bbb);
  margin: 0 1px;
}

/* ── Rich card footer ── */
.mc-card-rich .mc-card-footer {
  padding: 10px 16px;
  margin-top: 8px;
}

.mc-card-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mc-card-owner {
  font-size: 10px;
  color: var(--ink3, #8d8d8d);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* ── List view enrichments ── */
.mc-list-row-channels {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mc-list-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(99,102,241,.06);
  color: var(--ink2, #525252);
}

.mc-list-channel svg {
  stroke: currentColor;
  fill: none;
}

.mc-list-row-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mc-stat-item-sm {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink3, #8d8d8d);
}

.mc-error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: rgba(220,38,38,.12);
  color: #dc2626;
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
}

/* ── Filter chips bar ── */
.mc-filter-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
}

.mc-filter-chips-bar:empty {
  display: none;
}

.mc-fchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surf, #fff);
  color: var(--ink2, #525252);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.mc-fchip:hover {
  background: rgba(99,102,241,.06);
  border-color: rgba(99,102,241,.2);
}

.mc-fchip.is-active {
  background: rgba(99,102,241,.12);
  border-color: #6366f1;
  color: #6366f1;
}

.mc-fchip-count {
  font-size: 9px;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  padding: 1px 5px;
  border-radius: 8px;
  color: var(--ink3, #8d8d8d);
}

.mc-fchip.is-active .mc-fchip-count {
  background: rgba(99,102,241,.15);
  color: #6366f1;
}

.mc-fchip-status { }

.mc-fchip-channel { }

.mc-fchip-purpose { }

.mc-fchip-quick {
  border-color: rgba(220,38,38,.2);
  color: #dc2626;
}

.mc-fchip-quick.is-active {
  background: rgba(220,38,38,.1);
  border-color: #dc2626;
  color: #dc2626;
}

.mc-fchip-clear {
  border: none;
  background: transparent;
  color: var(--ink3, #8d8d8d);
  font-size: 10px;
  text-decoration: underline;
  padding: 4px 6px;
}

.mc-fchip-clear:hover {
  color: #dc2626;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE RESOURCE HUB'S BUNDLE CARD, PORTED
   Copied from vo-app-training-materials `training-materials.css`
   (.tmb-grid / .tmb-card / .tmb-mosaic blocks) so a campaign card and a
   bundle card are the same object. Only two things are added, both marked:
   the `bad` status tier, and the list-row thumbnail.
   ═══════════════════════════════════════════════════════════════════════ */

.tmb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  padding: 16px 0;
}

@media(max-width:1100px) {
.tmb-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media(max-width:600px) {
.tmb-grid { grid-template-columns: 1fr; }
}

.tmb-card {
  border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--card,#fff);
  border: 1px solid var(--border,#e5e7eb);
  transition: transform .22s, box-shadow .22s;
}

.tmb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.tmb-card-header {
  position: relative; min-height: 120px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}

.tmb-card-status {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 6px; color: #fff;
}

.tmb-card-status[data-lvl="good"] { background: rgba(5,150,105,.85); }

.tmb-card-status[data-lvl="med"]  { background: rgba(245,158,11,.85); }

.tmb-card-status[data-lvl="low"]  { background: rgba(100,116,139,.85); }

/* ADDED: a bundle is never broken, a campaign is. */
.tmb-card-status[data-lvl="bad"]  { background: rgba(220,38,38,.88); }

.tmb-card-body { padding: 14px; }

.tmb-card-title {
  font-size: 14px; font-weight: 700; color: var(--ink1,#1e293b);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.tmb-card-type {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink3,#94a3b8); margin-top: 4px;
}

.tmb-card-meta {
  display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink3,#94a3b8);
}

.tmb-card-type-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: -2px;
}

.tmb-card-type-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ═══ STACKED CARD THUMBNAILS → MOSAIC GRID ═══ */
.tmb-mosaic {
  display: grid;
  gap: 3px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* ADDED: a single file fills the header. The Resource Hub has no --1 because
   a bundle always holds several; most pieces here are one thing. */
.tmb-mosaic--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }

.tmb-mosaic--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

.tmb-mosaic--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.tmb-mosaic--6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }

.tmb-mosaic-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.tmb-mosaic-cell .tmc-prev-svg {
  width: 32px;
  height: 40px;
  opacity: .55;
}

.tmb-mosaic-more {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.45);
  padding: 2px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Campaign-side trim: the grid sits inside a panel that already pads, and the
   card keeps the operational rows the bundle card has no equivalent for. */
.mc-tmb-grid { padding: 16px; }

.mc-tmb-card .mc-card-warning,
.mc-tmb-card .mc-health-row,
.mc-tmb-card .mc-card-stats { margin-top: 10px; }

.mc-tmb-flags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ADDED: the list row wears the same mosaic, shrunk. */
.mc-list-thumb {
  position: relative;
  width: 60px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.mc-list-thumb .tmb-mosaic { border-radius: 8px; gap: 2px; }

.mc-list-thumb .tmb-mosaic-cell .tmc-prev-svg { width: 14px; height: 18px; opacity: .6; }

.mc-list-thumb .tmb-mosaic-more { display: none; }

.mc-list-thumb--empty { display: flex; align-items: center; justify-content: center; }

.mc-list-thumb--empty svg {
  width: 18px; height: 18px;
  fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE RESOURCE HUB'S *MATERIAL* CARD, PORTED
   Copied from vo-app-training-materials `training-materials.css`
   (.tm-mat-card / .tmc-* blocks, lines ~4346 and ~4813). The Resource Hub
   uses TWO cards and so do we: a bundle of several things gets the mosaic
   card above, a single thing gets THIS — the document itself in a 120px
   header with 28px of top padding and overflow:hidden, so the page sits low
   and is cut off by the bottom edge. That crop IS "coming out from the
   bottom of the card"; centring the preview loses it.
   ═══════════════════════════════════════════════════════════════════════ */
.tm-mat-card {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  min-width: 0;
}

.tm-mat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }

.tmc-header {
  position: relative;
  padding: 28px 16px 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 120px;
  max-height: 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.tmc-header .tmr-prev { width: 56px; height: 70px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.1)); }

.tmc-badge-row {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
  z-index: 2;
}

.tmc-badge {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 6px;
  line-height: 1; white-space: nowrap; color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.tmc-badge[data-lvl="high"] { background: rgba(239,68,68,.88); }

.tmc-badge[data-lvl="med"]  { background: rgba(245,158,11,.88); }

.tmc-badge[data-lvl="good"] { background: rgba(22,163,74,.88); }

.tmc-badge[data-lvl="low"]  { background: rgba(100,116,139,.80); }

.tmc-type-chip {
  margin-top: 10px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink2, #475569);
  background: rgba(0,0,0,.06);
  padding: 3px 10px; border-radius: 6px;
  position: relative; z-index: 2;
}

.tmc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.tmc-title {
  font-size: 13px; font-weight: 700; color: var(--ink1, #111);
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.tmc-sub {
  font-size: 11px; color: var(--ink3, #9ca3af); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The real artefact covers the header, CROPPED FROM ITS TOP EDGE — a document
   is recognised by its masthead, not its middle. */
.tmc-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  z-index: 0; border-radius: inherit;
  background: rgba(15, 23, 42, .06);
}

/* Scrim so the chips stay readable over a real picture. */
.tmc-header:has(.tmc-thumb-img)::after,
.tmc-header:has(.mh-cardshot)::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.45) 100%);
  z-index: 1; pointer-events: none;
}

.tmc-header:has(.tmc-thumb-img) .tmc-type-chip,
.tmc-header:has(.mh-cardshot) .tmc-type-chip {
  margin-top: auto; color: #fff; background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.tmc-header:has(.tmc-thumb-img) .tmc-prev-svg,
.tmc-header:has(.tmc-thumb-img) .tmr-prev,
.tmc-header:has(.mh-cardshot) .tmc-prev-svg,
.tmc-header:has(.mh-cardshot) .tmr-prev { display: none; }

/* The SVG stand-in, drawn ONLY when there is no artefact. 70px inside the
   120px box under 28px of padding — the overflow is the point. */
.tmc-header .tmc-prev-svg {
  width: 56px; height: 70px;
  position: relative; z-index: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
  flex-shrink: 0;
}

/* ── CAMPAIGN DETAIL, WEARING THE PROJECT SHELL ──────────────────────────
   The detail page took Work's .ax-card scorecard row and section cards so it
   reads like a project page. These two are the difference that keeps it
   obviously a CAMPAIGN linked to projects rather than a project itself.
   ⚠️ No curly braces inside these comments — a brace in a comment poisons the
   following selector when the porter rewrites this file for MRG. */
.mc-kind-chip {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: #4f46e5; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 999px; padding: 2px 7px; flex: none;
}

/* The audience numbers, over the member list they count. */
.mc-aud-strip {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--ink3);
  padding: 0 0 8px; margin: -2px 0 6px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}

.mc-aud-strip b { font-size: 12px; font-weight: 700; color: var(--ink1, #0f172a); }

/* ═══════════════════════════════════════════════════════════
   THE CAMPAIGN PROFILE'S TABS
   ═══════════════════════════════════════════════════════════
   Tyler, 2026-08-11: *"you just need to have a fully organized campaign,
   probably with different tabs, to make it look like the work stream, or how
   we're doing it on VisionOne."*

   ⚠️ THIS APP IS LIGHT. Every colour here goes through a variable that is
   actually DECLARED in marketing-hub.css (--ink / --ink1 / --ink3 / --glass2 /
   --border1 / --wt-primary). The Website Signups block above is the cautionary
   tale: it used var(--text1, #fff), --text1 is declared nowhere in this repo,
   and the whole panel rendered white on near-white.
   ─────────────────────────────────────────────────────────── */
.mc-ptabs {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--border1, #e0e0e0);
  margin: 0 0 16px;
}

.mc-ptab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 12px; border-radius: 6px 6px 0 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--ink3, #8d8d8d); cursor: pointer; white-space: nowrap;
}

.mc-ptab:hover { color: var(--ink, #161616); background: var(--glass2, rgba(0,0,0,.06)); }

.mc-ptab.is-active {
  color: var(--ink, #161616);
  border-bottom-color: var(--wt-primary, #6366f1);
}

.mc-ptab-n {
  font-size: 9.5px; font-weight: 800; line-height: 1.5;
  padding: 0 5px; border-radius: 99px;
  background: var(--glass2, rgba(0,0,0,.06)); color: var(--ink3, #8d8d8d);
}

.mc-ptab.is-active .mc-ptab-n { background: var(--wt-primary, #6366f1); color: #fff; }

/* 🚫 display, NOT the [hidden] attribute — `.mc-ptab { display:flex }` above is
   an author rule and would beat [hidden]'s UA `display:none` every time
   (reference_hidden_attr_loses_to_author_display). !important because is-off
   has to win over .is-active too: a panel can be both for one frame, while the
   Plan tab is being taken away by syncWorkTab(). */
.mc-ppanel { display: none; }

.mc-ppanel.is-active { display: block; }

.mc-ptab.is-off, .mc-ppanel.is-off { display: none !important; }

/* The prose the builder collects and this page never used to show. */
.mc-detail-prose { margin-top: 12px; }

.mc-detail-prose p {
  margin: 3px 0 0; font-size: 12px; line-height: 1.55;
  color: var(--ink2, #525252); white-space: normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CAMPAIGN HERO — A WORK STREAM CARD, AT FULL WIDTH

   Tyler, 2026-08-11: *"The campaign card needs to use the exact same cards that
   work streams have. Literally the exact same design as a work stream … with
   campaign or something special for it."*

   🚫 THERE ARE ALMOST NO RULES HERE ON PURPOSE. The card's look is work.css's
   `.wk-goal-card` and every child class is Work's own, so the two cards cannot
   drift apart by stylesheet. Adding a `.mc-hero-card { ... }` that restyled the
   surface would be exactly the "approximation of a work stream" this replaced.
   What follows is only: the ONE variant Work has no reason to carry, and the
   layout that lets a card built for a 2-up grid sit across a profile column.

   ⚠️ IF THIS CARD EVER RENDERS UNSTYLED, DIFF apps/Work/work.css FIRST. It is a
   copy of vo-app-work's file and it was a 2026-08-06 snapshot until 08-11 —
   109 KB behind, missing `.wk-goal-kind`, `.wk-goal-idrow` AND
   `.wk-goal-people-row` outright. Three forked copies of that file exist
   (vo-app-work, here, mrg-crm's vendor/), so the drift is structural.
   ══════════════════════════════════════════════════════════════════════════ */

/* THE ONE DELIBERATE DIFFERENCE. `.wk-goal-kind--stream` is teal and
   `--project` is green; a campaign is violet, matching the accent the hub uses
   for a campaign everywhere else. It lives HERE and not in work.css because
   that file is shared three ways and has no business carrying a marketing-only
   variant — Work never renders this chip. */
.wk-goal-kind--campaign {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
}

@media (prefers-color-scheme: dark) {
.wk-goal-kind--campaign { background: rgba(139,92,246,.18); color: #c4b5fd; border-color: rgba(139,92,246,.35); }
}

/* The header is a row: back button, then the card and its actions. `min-width:0`
   is load-bearing — without it the flex item refuses to shrink below the card's
   content width and the whole row overflows the profile column
   (reference_grid_item_floored_by_table_min_width, same mechanism). */
.mc-detail-header--card { align-items: flex-start; gap: 10px; }

/* ⚠️ THE RIGHT PADDING IS THE FAB RAIL, AND IT BELONGS ON THE WRAP, NOT ON THE
   BUTTONS. The hub pins a fixed rail of round action buttons to the right edge
   of the content column. A first cut cleared it on the action row only: the
   buttons became reachable, the harness passed, and the CARD still ran
   underneath — the "Campaign" kind chip and the status pill both sit at the far
   right of their own rows, and both landed behind a FAB. Padding the wrap clears
   the card and its actions together, against one right edge. */
.mc-hero-wrap { flex: 1 1 auto; min-width: 0; padding-right: 56px; }

/* A stream card is built for a ~395px grid cell. At profile width it must fill
   the column, and its title can afford to be the size of a page heading. */
.mc-hero-wrap .wk-goal-card { width: 100%; max-width: none; cursor: default; margin: 0; }

.mc-hero-wrap .wk-goal-title { font-size: 17px; }

/* Actions under the card, right-aligned, wrapping rather than being clipped. */
.mc-hero-acts {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 6px; margin-top: 8px;
}

@media (max-width: 700px) {
.mc-hero-wrap { padding-right: 0; }

.mc-hero-acts { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CAMPAIGN POPUP — the work stream popup's shell, with a campaign face
   ══════════════════════════════════════════════════════════════════════════
   Tyler, 2026-08-11: *"when I click the campaign pop-up, I expect it to be an
   actual pop-up. It needs to look exactly like how a workstream looks, but
   with a campaign tag on it."*

   🚫 THIS IS A COPY, AND IT HAS TO BE. The shell it copies is `.gp-overlay` /
   `.gp-popup` / `.gp-topbar` in **vo-app-work/apps/Work/project-detail.css**,
   worn by `#projectDetailOverlay` — the popup a work stream card opens in the
   Work app. That file is NOT vendored here; `apps/Work/work.css` is, and it
   carries **zero** `.gp-popup` rules (grep it and see). Vendoring a 2,100-line
   profile stylesheet to borrow 100 lines of chrome would have handed this repo
   a fourth fork of a file that is already forked three ways
   ([[reference_campaign_profile_is_a_work_stream_card]]).

   ⚠️ SO THE NUMBERS ARE THE CONTRACT, not the class names. 1240px / 96vw wide,
   92vh / 1040px tall, 20px radius, the same two-layer shadow, a 16px/24px
   topbar with a 38px icon, and the same .35s spring on open. If Work's popup
   ever changes shape, diff those declarations — nothing propagates them.

   🚫 DO NOT NAME THESE `.gp-*`. `wk-form-controls.css` and `work.css` are both
   loaded on this page and both re-vendored from Work periodically; a `.gp-`
   class here would be silently overwritten the next time one of them lands. */

.mc-cp-overlay {
  position: fixed; inset: 0; z-index: 990000;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}

.mc-cp-overlay.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .25s ease, visibility 0s 0s;
}

/* ⚠️ BELOW THE BUILDER, DELIBERATELY. The campaign builder and the piece
   builder both sit at z-index 1000000, and both open FROM this popup (Edit, and
   "New piece" on a campaign). A popup that outranked the dialog it launches
   would hide it. */

.mc-cp-popup {
  position: absolute; top: 50%; left: 50%;
  width: 1240px; max-width: 96vw; height: 92vh; max-height: 1040px;
  transform: translate(-50%, -50%) scale(.95);
  background: var(--surf, #fff); border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  opacity: 0;
  font-family: var(--f, system-ui, -apple-system, sans-serif);
}

.mc-cp-overlay.is-open .mc-cp-popup { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ── topbar ─────────────────────────────────────────────────────────────── */
.mc-cp-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid var(--border-s, #f3f4f6);
  flex-shrink: 0; user-select: none; position: relative; z-index: 20;
}

/* 🚨 VIOLET MEGAPHONE, NOT A TEAL BULLSEYE — the one place this popup is
   allowed to differ from Work's, and the same swap `.wk-goal-kind--campaign`
   already makes on the card inside. The tag is the whole point of the ask. */
.mc-cp-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex; align-items: center; justify-content: center;
}

.mc-cp-icon svg { width: 20px; height: 20px; }

.mc-cp-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mc-cp-title {
  font-size: 16px; font-weight: 800; color: var(--ink, #111); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}

.mc-cp-sub {
  font-size: 11px; font-weight: 700; color: #7c3aed; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase;
}

.mc-cp-status {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 10px; flex-shrink: 0;
}

.mc-cp-status--on-track { background: #defbe6; color: #198038; }

.mc-cp-status--complete { background: #defbe6; color: #198038; }

.mc-cp-status--at-risk  { background: #fef3c7; color: #b45309; }

.mc-cp-status--behind   { background: #fff1f1; color: #da1e28; }

.mc-cp-status--planning { background: #f1f5f9; color: #475569; }

.mc-cp-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; flex-shrink: 0;
  background: transparent; color: var(--ink3, #9ca3af); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}

.mc-cp-btn:hover { background: var(--c-red-bg, #fee2e2); color: var(--c-red, #ef4444); }

.mc-cp-btn svg { width: 17px; height: 17px; }

/* ── body ───────────────────────────────────────────────────────────────── */
.mc-cp-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; padding: 20px 24px 24px;
}

/* The profile was built to fill a whole panel; inside the popup two of its
   page-level affordances stop making sense.
   1. The back chevron was the ONLY way out of a full-screen detail. The ✕ is
      the way out now, and two of them side by side is a question, not a
      control. Hidden rather than deleted — renderDetail() and renderN8nDetail()
      both addEventListener on it by id and would throw on null.
   2. `.mc-hero-wrap`'s 56px right pad exists to clear the floating FAB rail
      pinned to the VIEWPORT's right edge. Inside a centred popup the card no
      longer reaches it, so that pad is just dead column. */
.mc-cp-body .mc-detail-back { display: none; }

.mc-cp-body .mc-hero-wrap { padding-right: 0; }

@media (max-width: 820px) {
.mc-cp-popup {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: none;
    border-radius: 0;
  }

.mc-cp-title { max-width: 42vw; }

.mc-cp-body { padding: 14px 14px 20px; }
}