/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub.css, minus 66 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#wtHeaderContainer { max-width: var(--wt-shell-width) !important; margin: 0 auto !important; padding: 0 20px !important; width: 100% !important; }

.view-hidden { display: none !important; }

/* ================================================================
   STATUS PILLS
   ================================================================ */
.pill {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap;
}

.pill-green  { background: var(--c-green-bg); color: var(--c-green); }

.pill-yellow { background: var(--c-yellow-bg); color: var(--c-yellow); }

.pill-red    { background: var(--c-red-bg); color: var(--c-red); }

.pill-blue   { background: var(--c-blue-bg); color: var(--c-blue); }

.pill-purple { background: var(--c-purple-bg); color: var(--c-purple); }

.pill-grey   { background: #e5e7eb; color: #374151; }

.pill-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; flex-shrink: 0; }

/* Tab panels */
.tab-panel[data-panel] { display: none !important; }

.tab-panel[data-panel].is-active { display: block !important; animation: mhTabEnter .3s cubic-bezier(.22,1,.36,1) both; }

@keyframes mhTabEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.ph-sub { display: none; }

.ph-sub.is-active { display: block; animation: mhTabEnter .3s cubic-bezier(.22,1,.36,1) both; }

/* Card wrapper — background container for content sections */
.ph-card-wrap {
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 14px);
  padding: 20px;
  box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.05));
}

/* Panel Headings */
.ph-panel-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px; }

.ph-panel-title { font-size:18px;font-weight:800;color:var(--ink);margin:0; }

.ph-panel-sub { font-size:12px;color:var(--ink3);margin:2px 0 0; }

/* ── Loading banner + shimmer ── */
.mh-loading-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-blue-bg); border: 1px solid var(--c-blue-soft);
  border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; color: var(--c-blue);
  transition: opacity .35s ease, max-height .35s ease;
  overflow: hidden; max-height: 60px;
}

.mh-loading-banner.is-done {
  opacity: 0; max-height: 0; padding: 0 16px; margin-bottom: 0; border-width: 0;
}

.mh-loading-spinner {
  width: 14px; height: 14px; border: 2px solid var(--c-blue-soft);
  border-top-color: var(--c-blue); border-radius: 50%;
  animation: mhSpin .7s linear infinite; flex-shrink: 0;
}

@keyframes mhSpin { to { transform: rotate(360deg); } }

@keyframes mhShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Module item rows */
.mh-mod-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px 8px 13px; border-radius: 6px;
  cursor: pointer; border-left: 3px solid transparent;
  transition: all .18s cubic-bezier(.22,1,.36,1);
}

.mh-mod-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); }

.mh-mod-item.mi-red    { border-left-color: var(--c-red); }

.mh-mod-item.mi-yellow { border-left-color: var(--c-yellow); }

.mh-mod-item.mi-green  { border-left-color: var(--c-green); }

.mh-mod-item.mi-blue   { border-left-color: #3b82f6; }

.mh-mod-item.mi-purple { border-left-color: var(--mh-accent); }

.mh-mod-body { flex: 1; min-width: 0; }

.mh-mod-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mh-mod-sub { font-size: 10px; color: var(--ink3); margin-top: 1px; }

.mh-mod-badge {
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 6px; white-space: nowrap;
}

/* Split layout (legacy — used for non-home views) */
.mh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

@media (max-width: 900px) {
.mh-split { grid-template-columns: 1fr; }
}

/* ================================================================
   MH-BODY — 2-column body layout (mirrors Work Hub .wk-body)
   Left: main focus panel  |  Right: support/insight stack (340px)
   ================================================================ */
.mh-body {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 18px; align-items: start;
}

@media (max-width: 1100px) {
.mh-body { grid-template-columns: 1fr; }
}

.mh-focus-panel {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 12px; padding: 0; overflow: hidden;
}

.mh-focus-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border-s);
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--surf) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.mh-focus-title { font-size: 14px; font-weight: 800; color: var(--ink); flex: 1; transition: opacity .2s ease; }

.mh-focus-count {
  font-size: 11px; font-weight: 800; color: var(--ink3);
  background: var(--bg-s); padding: 2px 8px; border-radius: 6px;
}

.mh-focus-body {
  padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 5px;
  max-height: 680px; overflow-y: auto; scrollbar-width: none;
  transition: opacity .25s ease;
}

.mh-focus-body.mh-fade-out { opacity: 0; }

.mh-focus-body::-webkit-scrollbar { display: none; }

/* Right column — support/intelligence modules (mirrors Work Hub .wk-support-*) */
.mh-support-stack { display: flex; flex-direction: column; gap: 12px; }

.mh-support-module {
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 3px solid var(--_sm-color, var(--mh-accent));
  border-radius: 10px; padding: 14px 16px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.mh-support-module:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.mh-support-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-s);
}

.mh-support-icon {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--_sm-bg, var(--c-blue-bg));
}

.mh-support-icon svg {
  width: 13px; height: 13px; stroke: var(--_sm-color, var(--mh-accent));
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mh-support-title { font-size: 12px; font-weight: 700; color: var(--ink); }

.mh-support-body { max-height: 260px; overflow-y: auto; scrollbar-width: none; transition: opacity .25s ease; }

.mh-support-body::-webkit-scrollbar { display: none; }

.mh-support-body .mh-empty {
  padding: 20px 12px; font-size: 11px; color: var(--ink4);
}

/* Support module stat row */
.mh-stat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 11px;
}

.mh-stat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.mh-stat-label { flex: 1; color: var(--ink2); font-weight: 500; }

.mh-stat-val { font-weight: 700; color: var(--ink); }

/* Support module item list */
.mh-support-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  transition: all .15s ease;
}

.mh-support-item:hover {
  background: var(--bg-s); transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.mh-support-item-title { font-size: 11px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mh-support-item-meta { font-size: 9.5px; color: var(--ink3); flex-shrink: 0; }

.mh-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--_sm-color, #0284c7) 16%, transparent);
  background: color-mix(in srgb, var(--_sm-bg, #f8fafc) 35%, #fff);
  margin-bottom: 7px;
}

.mh-task-main { flex: 1; min-width: 0; }

.mh-task-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-task-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-task-actions { display: flex; gap: 6px; flex-shrink: 0; }

.mh-task-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink2);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 8px;
  cursor: pointer;
}

.mh-task-btn:hover {
  border-color: var(--_sm-color, #0284c7);
  color: var(--_sm-color, #0284c7);
}

.mh-task-btn.mh-task-open {
  background: var(--_sm-color, #0284c7);
  border-color: var(--_sm-color, #0284c7);
  color: #fff;
}

.mh-task-btn.mh-task-open:hover { filter: brightness(1.06); }

.mh-task-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mh-task-board-row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.mh-task-board-main,
.mh-task-board-owner,
.mh-task-board-campaign {
  min-width: 0;
}

.mh-task-board-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-task-board-sub,
.mh-task-board-owner-sub,
.mh-task-board-campaign-sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-task-owner-name,
.mh-task-campaign-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-task-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mh-task-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.mh-task-pill-review { background: #f5f3ff; color: #7c3aed; }

.mh-task-pill-ai { background: #eef2ff; color: #4f46e5; }

.mh-task-pill-crm { background: #e0f2fe; color: #0369a1; }

.mh-task-pill-briefing { background: #fef3c7; color: #b45309; }

.mh-task-pill-open { background: #fff7ed; color: #c2410c; }

.mh-task-pill-assigned { background: #ecfdf5; color: #047857; }

@media (max-width: 980px) {
.mh-task-board-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Quick action buttons — AI Suggest button */
.ph-qa-ai {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
  border: 1px solid #a5b4fc !important;
  color: #4f46e5 !important;
}

/* ================================================================
   SHARED BUTTONS
   ================================================================ */
.mh-btn {
  background: none; border: 1px solid #e2e5ea; border-radius: 8px;
  padding: 6px 14px; font-size: 11px; font-family: var(--f);
  cursor: pointer; color: var(--ink); transition: all .12s; font-weight: 600;
}

.mh-btn:hover { border-color: var(--mh-accent); color: var(--mh-accent); }

.mh-btn-primary {
  background: var(--mh-accent); color: #fff; border-color: var(--mh-accent);
}

.mh-btn-primary:hover { opacity: .9; color: #fff; }

.mh-btn-danger {
  color: var(--c-red); border-color: var(--c-red-soft);
}

.mh-btn-danger:hover { background: var(--c-red-bg); }

.mh-btn-sm { padding: 4px 10px; font-size: 10px; }

.mh-btn-icon {
  display: inline-flex; align-items: center; gap: 4px;
}

.mh-btn-icon svg {
  width: 12px; height: 12px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ================================================================
   PLAN CARD — the main card for listing plans
   ================================================================ */
.mh-plan-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px; background: var(--surf);
  border: 1px solid var(--border); transition: all .18s; cursor: pointer;
}

.mh-plan-card + .mh-plan-card { margin-top: 8px; }

.mh-plan-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); transform: translateY(-2px); }

.mh-plan-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--c-blue-bg);
}

.mh-plan-icon svg {
  width: 18px; height: 18px; stroke: var(--mh-accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mh-plan-info { flex: 1; min-width: 0; }

.mh-plan-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mh-plan-meta { font-size: 10px; color: var(--ink3); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

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

/* ================================================================
   CONTACT CARD — the main card for listing contacts
   ================================================================ */
.mh-contact-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; background: var(--surf);
  border: 1px solid var(--border); transition: all .18s; cursor: pointer;
}

.mh-contact-card + .mh-contact-card { margin-top: 6px; }

.mh-contact-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); transform: translateY(-1px); }

.mh-contact-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-blue-bg); font-size: 12px; font-weight: 800;
  color: var(--mh-accent); text-transform: uppercase;
}

.mh-contact-info { flex: 1; min-width: 0; }

.mh-contact-name { font-size: 12px; font-weight: 700; }

.mh-contact-detail { font-size: 10px; color: var(--ink3); margin-top: 1px; }

.mh-contact-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ================================================================
   HOME TAB — Campaign & Plan cards
   ================================================================ */
.mh-camp-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: #f8fafc;
  border: 1px solid #f1f5f9; cursor: pointer; transition: all .15s;
}

.mh-camp-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); border-color: var(--c-blue); }

.mh-camp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.mh-camp-body { flex: 1; min-width: 0; }

.mh-camp-name { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mh-camp-meta { display: flex; gap: 6px; align-items: center; font-size: 10px; color: var(--ink3); margin-top: 2px; flex-wrap: wrap; }

.mh-camp-type { text-transform: capitalize; }

.mh-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;
}

.mh-src-badge svg { flex-shrink: 0; }

.mh-src-n8n { background: #fef3c7; color: #b45309; }

.mh-src-crm { background: #eef2ff; color: #6366f1; }

.mh-src-plan { background: #f1f5f9; color: #64748b; }

/* ================================================================
   CAMPAIGN ROW — campaign within a plan
   ================================================================ */
.mh-campaign-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; background: #f8fafc;
  border: 1px solid #f1f5f9; transition: all .15s; cursor: pointer;
}

.mh-campaign-row + .mh-campaign-row { margin-top: 4px; }

.mh-campaign-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); }

.mh-campaign-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

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

.mh-campaign-name { font-size: 11.5px; font-weight: 600; }

.mh-campaign-meta { font-size: 9.5px; color: var(--ink3); margin-top: 1px; }

/* ================================================================
   MODAL / SLIDE-OVER PANEL
   ================================================================ */
.mh-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 100000; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}

.mh-modal-overlay.is-open { display: flex; }

.mh-modal {
  background: var(--surf); border-radius: 18px; width: 580px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 16px 64px rgba(0,0,0,.18);
  animation: mhModalIn .25s cubic-bezier(.22,1,.36,1) both;
}

@keyframes mhModalIn { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

.mh-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border-s);
}

.mh-modal-title { font-size: 16px; font-weight: 800; flex: 1; }

.mh-modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  color: var(--ink3); transition: background .15s;
}

.mh-modal-close:hover { background: #f3f4f6; }

.mh-modal-close svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mh-modal-body { padding: 18px 22px; }

.mh-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px 18px; border-top: 1px solid var(--border-s);
}

/* ================================================================
   FORM FIELDS
   ================================================================ */
.mh-field { margin-bottom: 14px; }

.mh-field-label { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); margin-bottom: 4px; }

.mh-field-input,
.mh-field-select,
.mh-field-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; font-family: var(--f); color: var(--ink);
  background: var(--surf); transition: border-color .15s, box-shadow .15s;
}

.mh-field-input:focus,
.mh-field-select:focus,
.mh-field-textarea:focus {
  outline: none; border-color: var(--mh-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.mh-field-textarea { min-height: 72px; resize: vertical; }

.mh-field-row { display: flex; gap: 12px; }

.mh-field-row .mh-field { flex: 1; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.mh-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
}

.mh-empty-icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--c-blue-bg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}

.mh-empty-icon svg {
  width: 24px; height: 24px; stroke: var(--mh-accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mh-empty-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }

.mh-empty-sub { font-size: 11px; color: var(--ink3); margin-bottom: 14px; max-width: 280px; }

/* ================================================================
   LOADING SPINNER
   ================================================================ */
.mh-spinner {
  display: flex; align-items: center; justify-content: center; padding: 32px;
}

.mh-spinner::after {
  content: ''; width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--mh-accent);
  animation: mhSpin .6s linear infinite;
}

@keyframes mhSpin { to { transform: rotate(360deg); } }

/* ================================================================
   TOAST NOTIFICATION
   ================================================================ */
.mh-toast-wrap {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
}

.mh-toast {
  background: var(--surf); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  animation: mhToastIn .3s cubic-bezier(.22,1,.36,1) both;
  display: flex; align-items: center; gap: 8px;
}

.mh-toast.toast-success { border-left: 3px solid var(--c-green); }

.mh-toast.toast-error { border-left: 3px solid var(--c-red); }

@keyframes mhToastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ================================================================
   LINKED CONTACTS CHIP LIST
   ================================================================ */
.mh-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

.mh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 8px; font-size: 10.5px; font-weight: 600;
  background: var(--c-blue-bg); color: var(--mh-accent);
  transition: all .15s;
}

.mh-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  color: var(--ink3); transition: all .12s; font-size: 12px; line-height: 1;
}

.mh-chip-remove:hover { background: var(--c-red-bg); color: var(--c-red); }

/* ================================================================
   SEARCH BAR
   ================================================================ */
.mh-search {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0 12px; transition: border-color .15s, box-shadow .15s;
  background: var(--surf);
}

.mh-search:focus-within {
  border-color: var(--mh-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.mh-search svg {
  width: 14px; height: 14px; stroke: var(--ink4); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

.mh-search input {
  flex: 1; border: none; outline: none; font-size: 12px; font-family: var(--f);
  padding: 8px 0; background: transparent; color: var(--ink);
}

.mh-search input::placeholder { color: var(--ink4); }

/* ================================================================
   FILTER BAR
   ================================================================ */
.mh-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.mh-filter-pill {
  padding: 4px 12px; border-radius: 8px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surf); color: var(--ink2);
  cursor: pointer; transition: all .15s;
}

/* ================================================================
   CAMPAIGN CARD GRID
   ================================================================ */
.mc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.mc-card {
  position: relative; background: var(--surf); border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden; cursor: pointer;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}

.mc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--c-blue); }

.mc-card-accent { height: 4px; width: 100%; }

.mc-card-header { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 0; }

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

.mc-card-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-card-type { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }

.mc-card-badges { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px 0; }

.mc-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 14px; }

.mc-card-date { font-size: 10.5px; color: var(--ink3); }

.mc-card-action { font-size: 10.5px; font-weight: 600; color: var(--c-blue); }

.mc-card-action:hover { text-decoration: underline; }

/* Campaign icon */
.mc-campaign-icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--c-blue-bg); color: var(--c-blue);
}

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

.mc-type-email { background: #eef2ff; color: #6366f1; }

.mc-type-social { background: #fef3c7; color: #b45309; }

.mc-type-sms { background: #defbe6; color: #198038; }

.mc-type-content { background: #fce7f3; color: #ec4899; }

.mc-type-paid-ads, .mc-type-paid_ads { background: #fff1f1; color: #dc2626; }

.mc-type-event { background: #eef2ff; color: #4f46e5; }

.mc-type-other { background: #f1f5f9; color: #64748b; }

/* Source & status pills */
.mc-source-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}

.mc-tag-n8n { background: #fef3c7; color: #92400e; }

.mc-tag-crm { background: #dbeafe; color: #1e40af; }

.mc-status-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
}

.mc-status-active { background: #defbe6; color: #166534; }

.mc-status-draft, .mc-status-planning { background: #fef3c7; color: #92400e; }

.mc-status-paused { background: #fef2f2; color: #ba4e00; }

.mc-status-completed { background: #f3e8ff; color: #6d28d9; }

.mc-status-in_review, .mc-status-in-review { background: #e0f2fe; color: #0369a1; }

.mc-status-archived { background: #f1f5f9; color: #64748b; }

.mc-at-risk-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  background: #fef2f2; color: #dc2626; animation: mc-pulse-risk 2s infinite;
}

@keyframes mc-pulse-risk { 0%,100%{opacity:1} 50%{opacity:.7} }

/* ================================================================
   CAMPAIGN LIST VIEW (rows instead of cards)
   ================================================================ */
.mc-list-view { display: flex; flex-direction: column; gap: 2px; }

.mc-list-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background .14s;
}

.mc-list-row:hover { background: var(--border-s); }

.mc-list-row .mc-campaign-icon { width: 32px; height: 32px; border-radius: 8px; }

.mc-list-row-body { flex: 1; min-width: 0; }

.mc-list-row-title { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-list-row-sub { font-size: 10.5px; color: var(--ink3); margin-top: 1px; }

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

/* ================================================================
   CAMPAIGN HEATMAP VIEW (matches Work.html pattern)
   ================================================================ */
.mc-heatmap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(90px, auto); gap: 10px;
}

.mc-heat-tile {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 16px; border-radius: 14px; border: none; position: relative; overflow: hidden;
  border-left: 4px solid var(--_hm-color, var(--c-green)); cursor: pointer;
  background: var(--surf); opacity: 0; animation: mcHeatFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}

.mc-heat-tile:nth-child(1){animation-delay:.06s;}

.mc-heat-tile:nth-child(2){animation-delay:.12s;}

.mc-heat-tile:nth-child(3){animation-delay:.18s;}

.mc-heat-tile:nth-child(4){animation-delay:.24s;}

.mc-heat-tile:nth-child(5){animation-delay:.30s;}

.mc-heat-tile:nth-child(6){animation-delay:.36s;}

.mc-heat-tile:nth-child(n+7){animation-delay:.4s;}

.mc-heat-tile.mc-hm--bad  { --_hm-color: var(--c-red);    background: color-mix(in srgb, var(--c-red) 5%, var(--surf));    box-shadow: inset 4px 0 8px -4px var(--c-red); }

.mc-heat-tile.mc-hm--warn { --_hm-color: var(--c-yellow); background: color-mix(in srgb, var(--c-yellow) 4%, var(--surf)); box-shadow: inset 4px 0 8px -4px var(--c-yellow); }

.mc-heat-tile.mc-hm--good { --_hm-color: var(--c-green);  background: color-mix(in srgb, var(--c-green) 4%, var(--surf));  box-shadow: inset 4px 0 8px -4px var(--c-green); }

.mc-heat-tile:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); transform: translateY(-3px); }

.mc-heat-tile > * { position: relative; z-index: 1; }

.mc-heat-tile-name {
  font-size: 13px; line-height: 1.35; font-weight: 800; color: var(--ink);
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

.mc-heat-tile-sub { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }

.mc-heat-tile-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

@keyframes mcHeatFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

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

/* ================================================================
   FOCUS HEAD — Search, View Toggle, Show All (matching Work.html)
   ================================================================ */
.mc-focus-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--wt-neutral-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 12px; flex: 1; min-width: 120px; max-width: 300px;
  transition: border-color .2s, box-shadow .2s;
}

.mc-focus-search-wrap:focus-within { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(99,102,241,.08); background: #fff; }

.mc-focus-search-wrap svg { width: 14px; height: 14px; stroke: var(--ink4); flex-shrink: 0; }

.mc-focus-search-wrap:focus-within svg { stroke: var(--c-blue); }

.mc-focus-search-wrap input {
  border: none; background: none; outline: none; font-size: 12px; font-weight: 500;
  color: var(--ink); font-family: inherit; width: 100%;
}

.mc-focus-search-wrap input::placeholder { color: var(--ink4); }

/* ================================================================
   PANEL TOOLBAR — THE ROW PIECES & APPROVALS ALREADY HAD, ON EVERY PANEL

   Tyler, 2026-08-11: "all of the middle areas have search bars right on
   top of it. The inbox and routing look bad. They should all match
   exactly what the pieces and approvals do."

   Pieces & Approvals is .wk-focus-action-row: a full-width row INSIDE
   the list card, under the title, with a 10px-radius search box at the
   left reading edge. Every other panel had a 10px-font bar floating on
   the page background above the scorecards. Same controls, two designs,
   and the smaller one is the one Tyler called bad.

   So the bar now mounts into the list head and is sized to match Home's
   row exactly: same padding, same radius, same 12.5px type, same 15px
   icon. There is one design on this hub and this is it.

   Specificity note: .wk-team-toolbar lives in work.css, which loads
   AFTER this file, so a single-class .mh-panel-toolbar rule would lose
   to it. Both classes are named in these selectors deliberately.
   ================================================================ */
.wk-team-toolbar.mh-panel-toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; row-gap: 8px;
}

/* ⚠️ FULL WIDTH, OR IT SITS BESIDE THE TITLE AGAIN. .mh-focus-head is a
   wrapping flex row, so a flex-basis of 100% is what makes the bar drop
   to its own line under the heading — which is the whole point. Padding
   is what turns "appended to the head" into "a row of its own". */
.mh-focus-head > .wk-team-toolbar.mh-panel-toolbar {
  flex: 1 0 100%; margin: 4px 0 0; padding-top: 2px;
}

/* Standing alone above a list that has no head (the template wall, the
   calendar) it still needs its bottom margin. */
.wk-team-toolbar.mh-panel-toolbar { margin-bottom: 12px; }

.mh-focus-head > .wk-team-toolbar.mh-panel-toolbar { margin-bottom: 0; }

/* Search leads and is the size Home's is — 8px 14px, 12.5px type. It does
   not stretch: a capped box beside a spacer reads as one control among
   several, where a full-bleed one reads as the whole page's search. */
.wk-team-toolbar.mh-panel-toolbar .mc-focus-search-wrap {
  flex: 0 1 320px; max-width: 320px; padding: 8px 14px; border-radius: 10px;
}

.wk-team-toolbar.mh-panel-toolbar .mc-focus-search-wrap svg { width: 15px; height: 15px; }

.wk-team-toolbar.mh-panel-toolbar .mc-focus-search-wrap input { font-size: 12.5px; }

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

@media (max-width: 720px) {
.wk-team-toolbar.mh-panel-toolbar .mc-focus-search-wrap {
    flex: 1 1 100%; max-width: none;
  }

.wk-team-toolbar.mh-panel-toolbar .wk-team-toolbar-spacer { display: none; }
}

/* ⚠️ THE VIEW TOGGLE IS .mh-viewtog's TWIN, TO THE PIXEL. Home's toggle
   is a bordered 8px pill with 28x24 buttons; .mc-view-toggle was a
   borderless 7px pill with 28x26 buttons and no border. Side by side on
   two panels of the same hub that reads as two different apps, which is
   the whole of what was being complained about. */
.wk-team-toolbar.mh-panel-toolbar .mc-view-toggle {
  background: var(--surf-2, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; padding: 2px; gap: 2px;
}

.wk-team-toolbar.mh-panel-toolbar .mc-vt-btn { width: 28px; height: 24px; border-radius: 6px; }

.wk-team-toolbar.mh-panel-toolbar .mc-vt-btn svg { width: 14px; height: 14px; }

.wk-team-toolbar.mh-panel-toolbar .mc-vt-btn.is-active { box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── The filter menu, when the options are read off the rows ──────────
   A heading and a count per option, because the menu is a description of
   what is in front of you: "Waiting on us 3" is a fact about this list,
   not a setting. */
.mc-fd-head {
  padding: 8px 12px 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink4);
}

.mc-fd-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.mc-fd-n {
  font-size: 10px; font-weight: 800; color: var(--ink3);
  background: var(--bg-s, #f3f4f6); border-radius: 5px; padding: 1px 6px;
}

.mc-fd-item.is-active .mc-fd-n { background: #fff; color: #6366f1; }

.mc-fd-none {
  padding: 10px 12px; font-size: 11px; line-height: 1.45; color: var(--ink4); max-width: 200px;
}

/* ⚠️ A LIST THAT FILTERED DOWN TO NOTHING HAS TO SAY SO. An empty card
   with a term still in the search box is the same screen as a feed that
   failed to load. */
.mh-filter-empty {
  padding: 22px 10px; text-align: center; font-size: 11.5px; color: var(--ink4);
  grid-column: 1 / -1;   /* the calendar grid and the card grids are grids */
}

/* No fill-mode: a filled animation on a hidden tile leaves a permanent
   stacking context behind it. */
@keyframes mcFlagPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.mc-view-toggle {
  display: flex; gap: 2px; background: var(--border-s); border-radius: 7px; padding: 2px;
}

.mc-vt-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border-radius: 5px;
  border: none; background: none; cursor: pointer; transition: all .14s; color: var(--ink3);
}

.mc-vt-btn svg { width: 13px; height: 13px; pointer-events: none; }

.mc-vt-btn:hover { color: var(--ink); }

.mc-vt-btn.is-active { background: #fff; color: var(--c-blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.mc-show-all {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--ink3); cursor: pointer;
  background: none; border: none; border-radius: 4px; padding: 3px 8px;
  font-family: inherit; white-space: nowrap; flex-shrink: 0; transition: all .14s;
}

.mc-show-all:hover { background: var(--border-s); color: var(--ink2); }

.mc-show-all svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

.mc-show-all.is-active { color: var(--c-blue); }

/* ── Filter dropdown ── */
.mc-filter-wrap { position: relative; }

/* ⚠️ SIZED HERE, IN THE ONE DECLARATION, AND NOT IN AN OVERRIDE LATER.
   MRG's CSS porter REORDERS rules — a later single-class override in this
   file landed BEFORE this block in the vendored copy and lost to it, so the
   button was 11.5px upstream and 10px on crm.mrgcentral.net. Measured. It
   is sized against the search box beside it, not against the 10px text
   links further along the bar. */
.mc-filter-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink3); cursor: pointer;
  background: none; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 7px 12px;
  font-family: inherit; white-space: nowrap; flex-shrink: 0; transition: all .14s;
}

.mc-filter-btn svg { pointer-events: none; flex-shrink: 0; width: 14px; height: 14px; }

.mc-filter-btn:hover { border-color: var(--border); color: var(--ink2); background: var(--bg-s); }

.mc-filter-btn.is-filtered { border-color: #6366f1; color: #6366f1; background: #eef2ff; }

.mc-filter-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  background: var(--surf, #fff); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12); padding: 4px; min-width: 160px;
}

.mc-filter-dropdown.is-open { display: block; }

.mc-fd-item {
  display: block; width: 100%; text-align: left; padding: 7px 12px;
  font-size: 11px; font-weight: 500; color: var(--ink2); cursor: pointer;
  background: none; border: none; border-radius: 6px; font-family: inherit;
  transition: all .12s;
}

.mc-fd-item:hover { background: var(--bg-s, #f3f4f6); color: var(--ink); }

.mc-fd-item.is-active { background: #eef2ff; color: #6366f1; font-weight: 600; }

.mh-focus-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mh-focus-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.mc-empty { text-align: center; padding: 40px 20px; }

.mc-empty-icon { margin: 0 auto 12px; width: 48px; height: 48px; color: var(--ink4); }

.mc-empty-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }

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

.mc-empty-sub { font-size: 12px; color: var(--ink3);
}

.mh-filter-pill:hover { border-color: var(--mh-accent); color: var(--mh-accent); }

.mh-filter-pill.is-active {
  background: var(--mh-accent); color: #fff; border-color: var(--mh-accent);
}

/* ================================================================
   DETAIL VIEW — plan detail panel
   ================================================================ */
.mh-detail-panel {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; display: none;
}

.mh-detail-panel.is-open { display: block; animation: mhTabEnter .3s cubic-bezier(.22,1,.36,1) both; }

.mh-detail-header {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
}

.mh-detail-back {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  color: var(--ink3); transition: background .15s; flex-shrink: 0;
}

.mh-detail-back:hover { background: #f3f4f6; }

.mh-detail-back svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mh-detail-title { font-size: 18px; font-weight: 800; flex: 1; }

.mh-detail-section { margin-bottom: 18px; }

.mh-detail-section-title {
  font-size: 12px; font-weight: 700; color: var(--ink3); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 8px;
}

.mh-detail-row {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
  font-size: 12px;
}

.mh-detail-label { font-weight: 600; color: var(--ink2); width: 100px; flex-shrink: 0; }

.mh-detail-val { color: var(--ink); flex: 1; }

/* ================================================================
   PERSON PICKER — Enrollment status
   ================================================================ */
.mc-person-enrolled { opacity: .55; }

.mc-enrolled-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: #16a34a;
  background: #defbe6; padding: 4px 10px; border-radius: 8px;
  white-space: nowrap;
}

/* ================================================================
   AI ORCHESTRATOR RUNS — Home strip + AI Runs panel + Drawer
   ================================================================ */

/* ---- Recently Built by AI strip (Home overview) ---- */
.mh-air-recent-strip { grid-column: 1 / -1; margin-bottom: 12px; }

.mh-air-recent-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}

.mh-air-recent-title { font-size: 13px; font-weight: 700; color: var(--ink1, #1e293b); }

.mh-air-recent-more {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--wt-theme-primary, #6366f1); background: none; border: none;
  cursor: pointer; padding: 0;
}

.mh-air-recent-more:hover { text-decoration: underline; }

.mh-air-recent-cards {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
}

.mh-air-rc {
  flex: 0 0 180px; background: var(--bg2, #fff); border: 1px solid var(--line1, #e2e8f0);
  border-radius: 10px; padding: 12px; cursor: pointer; text-align: left;
  transition: box-shadow .15s, border-color .15s;
}

.mh-air-rc:hover { border-color: var(--wt-theme-primary, #6366f1); box-shadow: 0 2px 8px rgba(99,102,241,.12); }

.mh-air-rc-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px; display: inline-block; margin-bottom: 6px;
}

.air-rc-ok { background: #defbe6; color: #16a34a; }

.air-rc-warn { background: #fff2e8; color: #ba4e00; }

.air-rc-running { background: #eef2ff; color: #6366f1; }

.mh-air-rc-time { font-size: 11px; color: var(--ink3, #64748b); margin-bottom: 6px; }

.mh-air-rc-stats { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink2, #475569); }

.mh-air-rc-stats span { white-space: nowrap; }

.mh-air-rc-dry {
  font-size: 9px; font-weight: 700; color: #8b5cf6; background: #f5f3ff;
  padding: 2px 6px; border-radius: 4px; margin-top: 6px; display: inline-block;
}

/* ---- AI Runs full panel ---- */
.mh-air-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}

.mh-air-title-row { display: flex; align-items: center; gap: 10px; }

.mh-air-icon { width: 28px; height: 28px; color: var(--wt-theme-primary, #6366f1); flex-shrink: 0; }

.mh-air-title { font-size: 18px; font-weight: 800; color: var(--ink1, #1e293b); margin: 0; }

.mh-air-subtitle { font-size: 12px; color: var(--ink3, #64748b); margin: 2px 0 0; }

.mh-air-actions { display: flex; gap: 8px; }

.mh-air-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 8px 14px;
  border-radius: 8px; border: none; cursor: pointer; transition: all .15s;
}

.mh-air-btn-primary {
  background: var(--wt-theme-primary, #6366f1); color: #fff;
}

.mh-air-btn-primary:hover { filter: brightness(1.1); }

.mh-air-btn-secondary {
  background: var(--bg3, #f1f5f9); color: var(--ink2, #475569);
  border: 1px solid var(--line1, #e2e8f0);
}

.mh-air-btn-secondary:hover { background: var(--bg4, #e2e8f0); }

/* Stats banner */
.mh-air-stats {
  display: flex; gap: 1px; background: var(--line1, #e2e8f0);
  border-radius: 10px; overflow: hidden; margin-bottom: 18px;
}

.mh-air-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px; background: var(--bg2, #fff);
}

.mh-air-stat-val { font-size: 22px; font-weight: 800; color: var(--ink1, #1e293b); }

.mh-air-stat-lbl { font-size: 10px; font-weight: 600; color: var(--ink3, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Run rows */
.mh-air-run-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; background: var(--bg2, #fff); border: 1px solid var(--line1, #e2e8f0);
  border-radius: 10px; margin-bottom: 6px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; text-align: left;
}

.mh-air-run-row:hover { border-color: var(--wt-theme-primary, #6366f1); box-shadow: 0 2px 8px rgba(99,102,241,.08); }

.mh-air-run-icon { flex-shrink: 0; }

.mh-air-run-info { flex: 1; min-width: 0; }

.mh-air-run-title { font-size: 13px; font-weight: 700; color: var(--ink1, #1e293b); }

.mh-air-run-meta { font-size: 11px; color: var(--ink3, #64748b); margin-top: 2px; }

.mh-air-run-stats { display: flex; gap: 14px; flex-shrink: 0; }

.mh-air-run-stat { font-size: 13px; font-weight: 700; color: var(--ink1, #1e293b); }

.mh-air-run-stat small { font-weight: 500; color: var(--ink3, #64748b); font-size: 10px; margin-left: 2px; }

.mh-air-stat-err { color: #dc2626 !important; }

.mh-air-stat-err small { color: #dc2626 !important; }

.mh-air-run-arrow { width: 18px; height: 18px; color: var(--ink4, #94a3b8); flex-shrink: 0; }

.mh-air-dry-badge {
  font-size: 9px; font-weight: 700; color: #8b5cf6; background: #f5f3ff;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}

/* ---- Run Detail Drawer ---- */
.mh-air-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}

.mh-air-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.mh-air-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 90vw);
  background: var(--bg1, #fff); z-index: 9999; box-shadow: -4px 0 24px rgba(0,0,0,.15);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow: hidden;
}

.mh-air-drawer.is-open { transform: translateX(0); }

.mh-air-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line1, #e2e8f0);
  flex-shrink: 0;
}

.mh-air-drawer-title-row { display: flex; align-items: center; gap: 10px; }

.mh-air-drawer-title { font-size: 16px; font-weight: 800; color: var(--ink1, #1e293b); }

.mh-air-drawer-sub { font-size: 11px; color: var(--ink3, #64748b); margin-top: 2px; }

.mh-air-drawer-close {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: var(--bg3, #f1f5f9); color: var(--ink2, #475569);
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.mh-air-drawer-close:hover { background: var(--bg4, #e2e8f0); }

.mh-air-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }

/* Drawer internal styles */
.air-d-status {
  color: #fff; font-size: 13px; font-weight: 700; text-align: center;
  padding: 10px; border-radius: 8px; margin-bottom: 16px;
}

.air-d-summary {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}

.air-d-card {
  flex: 1 1 100px; background: var(--bg3, #f8fafc); border-radius: 8px;
  padding: 12px 10px; text-align: center; border: 1px solid var(--line1, #e2e8f0);
}

.air-d-card-val { font-size: 22px; font-weight: 800; color: var(--ink1, #1e293b); }

.air-d-card-lbl { font-size: 10px; font-weight: 600; color: var(--ink3, #64748b); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }

.air-d-dry { background: #f5f3ff; border-color: #ddd6fe; }

.air-d-dry .air-d-card-val { color: #8b5cf6; }

.air-d-section { font-size: 13px; font-weight: 700; color: var(--ink1, #1e293b); margin: 16px 0 8px; }

.air-d-err-title { color: #dc2626; }

.air-d-phases { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.air-d-phase {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3, #f8fafc); padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink2, #475569);
  border: 1px solid var(--line1, #e2e8f0); text-transform: capitalize;
}

.air-d-phase-dur { font-size: 10px; color: var(--ink3, #64748b); font-weight: 500; }

.air-d-reasoning {
  background: var(--bg3, #f8fafc); border: 1px solid var(--line1, #e2e8f0);
  border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.6;
  color: var(--ink2, #475569); font-style: italic; margin-bottom: 12px;
}

.air-d-table-wrap { overflow-x: auto; margin-bottom: 12px; }

.air-d-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.air-d-table th {
  background: var(--bg3, #f1f5f9); padding: 8px 10px; text-align: left;
  font-weight: 700; color: var(--ink2, #475569); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line1, #e2e8f0);
}

.air-d-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line1, #e2e8f0);
  color: var(--ink2, #475569);
}

.air-d-errors {
  background: #fff5f5; color: #dc2626; padding: 12px; border-radius: 8px;
  font-size: 11px; white-space: pre-wrap; word-break: break-word;
  border: 1px solid #fecaca; margin-bottom: 12px;
}

.air-d-timestamps {
  font-size: 10px; color: var(--ink4, #94a3b8); margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line1, #e2e8f0);
}

@media (max-width: 768px) {
.mh-air-stats { flex-wrap: wrap; }

.mh-air-stat { flex: 1 1 45%; }

.mh-air-run-stats { display: none; }

.mh-air-header { flex-direction: column; }
}