#customerEngagement {
  display: grid;
  gap: var(--space-4, 1rem);
  color: var(--text-primary, #1a1a2e);
  font-size: 14px;
}

#customerEngagement section {
  min-width: 0;
  display: grid;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-subtle, var(--bg-card, #fff));
}

#customerEngagement :is(p, li, label, dt, dd, .capability-banner, .capability-scenario-picker) {
  font-size: 14px;
}

#customerEngagement > header h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

#customerEngagement section :is(h4, h5) {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

#customerEngagement :is(button, input, select, textarea) {
  min-height: var(--control-height, 40px);
  font: inherit;
}

#customerEngagement :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--primary, #e31937);
  outline-offset: 2px;
}

#customerEngagement :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .58;
}

#customerEngagement .btn-primary:hover {
  transform: none;
}

#customerEngagementWorkspaceState,
#customerEngagementBirthdayPreviewResult {
  margin: 0;
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-color: currentColor;
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3, 12px);
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  overflow-wrap: anywhere;
}

#customerEngagementBirthdayPreviewResult:focus {
  outline: .2rem solid currentColor;
  outline-offset: .2rem;
}

#customerEngagementWorkspaceState:is(
  [data-workspace-state="error"],
  [data-workspace-state="unauthorized"],
  [data-workspace-state="externally_blocked"]
) {
  background: #fff1f2;
  color: #9f1239;
}

#customerEngagementWorkspaceState:is(
  [data-workspace-state="empty"],
  [data-workspace-state="not_configured"]
) {
  background: #fff7ed;
  color: #9a3412;
}

#customerEngagement [data-status="cleared"] {
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  color: var(--text-secondary, #64748b);
}

@media (max-width: 640px) {
  #customerEngagement section { padding: var(--space-3, 12px); }
  #customerEngagement :is(button, input, select, textarea) { min-height: var(--control-height-touch, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  #customerEngagement, #customerEngagement * { transition-duration: 0s !important; animation-duration: 0s !important; }
}